:root{
    --bg: #232323;
    --bg-2: #2B2B2B;
    --surface: linear-gradient(155deg, #363636 0%, #2A2A2A 100%);
    --surface-flat: #303030;
    --surface-2: #3A3A3A;
    --border: #4E4E4E;
    --text: #F5F5F5;
    --text-secondary: #B8B8B8;
    --text-muted: #7A7A7A;
    --lime: #C7C7C7;
    --red: #E31E24;
    --red-hover: #ff2d33;
    --lime-dim: #333333;
    --match: #5FAD3C;
    --match-dim: #1C2A14;
    --plate: #C9962E;
    --plate-dim: #3A2E12;
    --no: #7A828C;
    --no-dim: #383C42;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  .example-chip, .suggestion-item, .not-compatible-toggle{cursor:pointer;}
  html{scroll-behavior:smooth;}
  html, body{height:100%;}
  body{
    background:
      repeating-linear-gradient(0deg, rgba(199,199,199,0.03) 0, rgba(199,199,199,0.03) 1px, transparent 1px, transparent 34px),
      repeating-linear-gradient(90deg, rgba(199,199,199,0.03) 0, rgba(199,199,199,0.03) 1px, transparent 1px, transparent 34px),
      var(--bg);
    color:var(--text);
    font-family:'Source Sans 3',sans-serif;
    display:flex;flex-direction:column;
    min-height:100vh;
  }

  .topbar{
    flex:0 0 auto;
    border-bottom:1px solid var(--border);
    border-top:4px solid var(--lime);
    background:rgba(35,35,35,0.7);
    backdrop-filter:blur(6px);
  }
  .topbar-inner{
    max-width:2100px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 32px;
  }
  .topbar img{height:68px;width:auto;}
  .topbar img.logo-team{height:104px;}
  .plate-ref{
    font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.5;
    color:var(--text-muted);text-align:right;letter-spacing:0.03em;
    border-right:2px solid var(--lime);padding-right:10px;
  }
  .topbar-tag{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
    border:1px solid var(--border);padding:6px 12px;border-radius:20px;
    display:flex;align-items:center;gap:8px;
  }
  .topbar-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);}

  .hero{
    flex:0 0 auto;
    max-width:2100px;margin:0 auto;width:100%;
    padding:32px 32px 20px;
    display:grid;
    grid-template-columns:660px 1fr 420px 1fr 420px;
    align-items:start;
  }
  .hero-text{flex-shrink:0;grid-column:1;width:660px;}
  .hero-steps{grid-column:3;align-self:start;margin-top:10px;width:420px;}
  .hero-panel{grid-column:5;margin-top:10px;width:420px;}
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:14.5px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--lime);margin-bottom:16px;
  }
  h1{
    font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;
    font-size:clamp(42px,5vw,64px);line-height:1.05;letter-spacing:0.005em;
    margin-bottom:18px;max-width:660px;
  }
  .subtitle{color:var(--text-secondary);font-size:21.5px;font-weight:400;max-width:500px;margin-bottom:32px;line-height:1.6;opacity:0.85;}

  .search-box{position:relative;max-width:480px;}

  /* Marcas de registro tipo dibujo técnico/plano de calibración — el elemento de marca de esta versión */
  .search-box, .hero-panel, .hero-steps, .type-illus, .empty-state{position:relative;}
  .search-box::after, .hero-panel::after, .hero-steps::after, .type-illus::after, .empty-state::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
    background:
      linear-gradient(var(--lime),var(--lime)) top left / 11px 2.5px no-repeat,
      linear-gradient(var(--lime),var(--lime)) top left / 2.5px 11px no-repeat,
      linear-gradient(var(--lime),var(--lime)) top right / 11px 2.5px no-repeat,
      linear-gradient(var(--lime),var(--lime)) top right / 2.5px 11px no-repeat,
      linear-gradient(var(--lime),var(--lime)) bottom left / 11px 2.5px no-repeat,
      linear-gradient(var(--lime),var(--lime)) bottom left / 2.5px 11px no-repeat,
      linear-gradient(var(--lime),var(--lime)) bottom right / 11px 2.5px no-repeat,
      linear-gradient(var(--lime),var(--lime)) bottom right / 2.5px 11px no-repeat;
    opacity:0.85;
  }
  .card{position:relative;}
  input{
    width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);
    font-family:'Oswald',sans-serif;font-size:22.5px;
    padding:18px 52px 18px 22px;border-radius:2px;outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  input:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(199,199,199,0.15);}
  input::placeholder{color:var(--text-muted);}
  .search-icon{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
  .search-icon.is-loading #searchIconDot{animation:reticlePulse 1.1s ease-in-out infinite;transform-origin:12px 12px;}
  @keyframes reticlePulse{
    0%,100%{r:1.4;opacity:1;}
    50%{r:3.2;opacity:0.35;}
  }

  .suggestions{
    position:absolute;top:100%;left:0;right:0;z-index:20;
    max-width:480px;border-radius:2px;overflow:hidden auto;
    border:1px solid transparent;
    box-shadow:0 12px 28px rgba(0,0,0,0);
    max-height:0;opacity:0;margin-top:0;
    transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease, margin-top .32s cubic-bezier(.4,0,.2,1), border-color .2s ease, box-shadow .2s ease;
  }
  .suggestions.show{
    max-height:240px;opacity:1;margin-top:8px;
    border-color:var(--border);
    box-shadow:0 12px 28px rgba(0,0,0,0.28);
  }
  .suggestions::-webkit-scrollbar{width:8px;}
  .suggestions::-webkit-scrollbar-track{background:transparent;}
  .suggestions::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
  .suggestion-item{
    padding:13px 18px;font-size:18px;background:var(--surface);border-bottom:1px solid var(--border);
    opacity:0;transform:translateY(-6px);
    animation:fadeSlideIn .3s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes fadeSlideIn{ to{ opacity:1; transform:translateY(0); } }
  .suggestion-item:last-child{border-bottom:none;}
  .suggestion-item:hover, .suggestion-item.active{background:var(--surface-2);}
  .suggestion-item .fab{color:var(--text-muted);font-size:14.5px;font-family:'IBM Plex Mono',monospace;}

  /* Secuencia de 3 pasos — mismos colores que el resto del sitio: neutro = se identifica,
     verde (--match) = coincide directo, dorado (--plate) = requiere placa adaptadora */
  .hero-steps{
    position:relative;overflow:hidden;
    background:var(--surface);border:1px solid var(--border);border-radius:3px;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
    display:flex;flex-direction:column;
    padding:26px 34px 22px;
  }
  .hero-steps::before{
    content:"";position:absolute;top:-40px;right:-40px;width:220px;height:220px;
    background:radial-gradient(circle, rgba(199,199,199,0.14), transparent 70%);
    pointer-events:none;z-index:0;
  }
  .hero-steps-eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--lime);margin-bottom:20px;
  }
  .hero-steps-inner{
    position:relative;
    display:flex;flex-direction:column;align-items:flex-start;gap:30px;
  }
  .hero-steps-inner::before{
    content:"";position:absolute;top:22px;bottom:22px;left:22px;width:0;
    border-left:1.5px dashed var(--border);z-index:0;
  }
  .hero-step{
    position:relative;z-index:1;
    display:flex;align-items:center;gap:18px;
    margin:0 -12px;padding:8px 12px;border-radius:6px;
    transition:background .15s;
  }
  .hero-step:hover{background:var(--surface-flat);}
  .hero-step-badge{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-flat);color:var(--text-secondary);
    border:1px solid var(--border);
  }
  .hero-step-badge svg{width:19px;height:19px;}
  .hero-step-badge.is-match{background:var(--match-dim);color:var(--match);border-color:transparent;}
  .hero-step-badge.is-plate{background:var(--plate-dim);color:var(--plate);border-color:transparent;}
  .hero-step-text{display:flex;flex-direction:column;gap:4px;}
  .hero-step-label{
    font-family:'Oswald',sans-serif;font-weight:500;font-size:19px;letter-spacing:0.01em;
    color:var(--text);white-space:nowrap;line-height:1;
  }
  .hero-step-desc{
    font-family:'Source Sans 3',sans-serif;font-size:14.5px;color:var(--text-muted);
    line-height:1.4;white-space:nowrap;
  }
  .hero-steps-more{
    display:block;margin-top:22px;padding-top:16px;border-top:1px solid var(--border);
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted);
    text-decoration:none;transition:color .15s;
  }
  .hero-steps-more:hover{color:var(--lime);}

  .hero-panel{
    background:var(--surface);border:1px solid var(--border);border-radius:3px;
    box-shadow:0 2px 8px rgba(0,0,0,0.10);
    padding:28px;position:relative;overflow:hidden;
    aspect-ratio:1 / 1;width:420px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .hero-panel::before{
    content:"";position:absolute;top:-40px;right:-40px;width:220px;height:220px;
    background:radial-gradient(circle, rgba(199,199,199,0.14), transparent 70%);
  }
  .hero-watermark{
    position:absolute;bottom:-12%;right:-12%;
    width:52%;height:auto;
    opacity:0.16;pointer-events:none;z-index:0;
  }
  .reticle-panel{position:relative;z-index:1;}

  .example-chips-label{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.06em;margin-top:16px;margin-bottom:8px;
  }
  .example-chips{display:flex;flex-wrap:wrap;gap:8px;}
  .example-chip{
    font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--text-secondary);
    background:var(--surface);border:1px solid var(--border);border-radius:20px;
    padding:6px 13px;transition:border-color .15s,color .15s,transform .15s;
  }
  .example-chip:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-1px);}
  .example-chip::before{content:"→ ";opacity:0.5;}

  .reticle-panel{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;}
  .reticle-middle{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;width:100%;}
  .reticle-svg{width:200px;height:200px;flex-shrink:0;justify-self:center;}
  .reticle-stat{text-align:center;min-width:0;}
  .reticle-middle .reticle-stat.left{text-align:right;}
  .reticle-middle .reticle-stat.right{text-align:left;}
  .stat-num{font-family:'Oswald',sans-serif;font-size:31.5px;font-weight:600;color:var(--lime);line-height:1;}
  .stat-label{font-family:'Source Sans 3',sans-serif;font-size:13px;color:var(--text-muted);margin-top:3px;line-height:1.3;}

  .content{max-width:2100px;margin:0 auto;width:100%;padding:8px 32px 40px;}
  .results{margin-top:8px;}
  .arma-header{
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border);
    opacity:0;transform:translateY(8px);
    animation:cardIn .3s cubic-bezier(.4,0,.2,1) forwards;
  }
  .arma-header h2{font-family:'Oswald',sans-serif;font-size:29px;font-weight:500;}
  .header-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
  .print-header{display:none;}
  .share-btn{
    display:inline-flex;align-items:center;gap:7px;
    font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--text-secondary);
    background:var(--surface);border:1px solid var(--border);border-radius:3px;
    padding:8px 14px;cursor:pointer;transition:border-color .15s,color .15s;
  }
  .share-btn:hover{border-color:var(--lime);color:var(--lime);}
  .share-btn.copied{border-color:var(--lime);color:var(--lime);}
  .arma-header .fp-tag{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-muted);
    background:var(--surface);border:1px solid var(--border);padding:4px 10px;border-radius:5px;
  }
  .arma-header .fp-tag::before{content:"⌀ ";color:var(--lime);}
  .arma-header .fp-tag.no-fp::before{content:"";}

  .group-label{
    display:flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;font-size:14.5px;letter-spacing:0.08em;
    text-transform:uppercase;color:var(--text-muted);margin:26px 0 14px;
  }
  .group-label .mark{width:7px;height:12px;background:var(--lime);transform:skewX(-18deg);flex-shrink:0;}
  .group-label.plate .mark{background:var(--plate);}

  .card-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));gap:14px;}

  .card{
    background:var(--surface);border:1px solid var(--border);border-left:3px solid transparent;border-radius:2px;
    padding:19px 21px;display:flex;align-items:flex-start;gap:14px;
    box-shadow:0 2px 8px rgba(0,0,0,0.10);
    transition:border-color .15s, transform .15s, box-shadow .15s;
    opacity:0;transform:translateY(10px);
    animation:cardIn .35s cubic-bezier(.4,0,.2,1) forwards;
  }
  @keyframes cardIn{ to{opacity:1;transform:translateY(0);} }
  .card:hover{border-color:#575e66;transform:translateY(-1px);}
  .card.card-direct{
    border-left-color:var(--match);
    background:linear-gradient(90deg, rgba(95,173,60,0.08), var(--surface-flat) 18%);
  }
  .card.card-direct:hover{border-color:var(--match);}
  .badge{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .badge.direct{background:var(--match-dim);color:var(--match);width:40px;height:40px;}
  .badge.plate{background:var(--plate-dim);color:var(--plate);}
  .badge.no{background:var(--no-dim);color:var(--no);}
  .card-body{flex:1;min-width:0;}
  .card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .card-title{font-size:22px;font-weight:500;}
  .card-type-tag{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
    background:var(--surface-flat);border:1px solid var(--border);
    padding:2px 7px;border-radius:3px;white-space:nowrap;
  }
  .card-desc{font-size:16.5px;color:var(--text-secondary);margin-top:5px;line-height:1.5;}
  .card-sub{font-family:'IBM Plex Mono',monospace;font-size:17.5px;color:var(--text-secondary);margin-top:4px;}
  .readout{font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--text-muted);white-space:nowrap;}
  .readout .arrow{margin:0 4px;color:var(--text-muted);}
  .readout .plate-name{color:var(--plate);}
  .readout .fp-ok{color:var(--match);}
  .readout .fp-ok::before{content:"⌀ ";opacity:0.8;}

  .empty-state{
    background:var(--surface);border:1px dashed var(--border);border-radius:2px;
    padding:36px;text-align:center;color:var(--text-secondary);font-size:18px;margin-top:28px;
    opacity:0;transform:translateY(8px);
    animation:cardIn .3s cubic-bezier(.4,0,.2,1) forwards;
  }
  .empty-state.no-fit{border-color:var(--no);}
  .empty-state strong{color:var(--text);display:block;margin-bottom:8px;font-family:'Oswald',sans-serif;font-size:22px;}

  .not-compatible-toggle{
    margin-top:20px;font-size:16px;color:var(--text-muted);
    display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  }
  .not-compatible-list{display:none;margin-top:12px;}
  .not-compatible-list.show{display:block;}
  .card.no-fit{opacity:0.55;}

  .section-title{
    font-family:'Oswald',sans-serif;font-size:39.5px;font-weight:500;margin-bottom:18px;
  }

  .info-section{
    margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
  }
  .info-section-inner{max-width:1600px;}
  .info-section h3{
    font-family:'Oswald',sans-serif;font-size:36.5px;font-weight:500;
    margin-bottom:14px;
  }
  .info-section p{color:var(--text-secondary);font-size:21px;line-height:1.7;}
  .info-section p strong{color:var(--text);font-weight:600;}
  .info-section .how-footer{margin-top:18px;}
  .how-footer-link{color:var(--lime);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(199,199,199,0.4);transition:text-decoration-color .15s ease;}
  .how-footer-link:hover{text-decoration-color:var(--lime);}
  .info-section .how-footer em{color:var(--plate);font-style:normal;}

  .how-steps{display:flex;gap:22px;margin:22px 0 6px;flex-wrap:wrap;}
  .how-step{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:180px;}
  .how-badge{
    width:26px;height:26px;border-radius:7px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface-2);color:var(--text-secondary);
    font-family:'Oswald',sans-serif;font-size:14.5px;font-weight:700;
    border:1px solid var(--border);
  }
  .how-badge.how-direct{background:var(--match-dim);color:var(--match);border-color:transparent;}
  .how-badge.how-plate{background:var(--plate-dim);color:var(--plate);border-color:transparent;}
  .how-text{display:flex;flex-direction:column;font-size:17.5px;}
  .how-text strong{color:var(--text);font-weight:600;}
  .how-text span{color:var(--text-muted);margin-top:2px;line-height:1.45;}

  .illustrations-section{
    margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
  }
  .illustrations-section > h3.section-title{
    font-family:'Oswald',sans-serif;font-size:36.5px;font-weight:500;margin-bottom:14px;
  }
  .illustrations-section > p.section-intro{color:var(--text-secondary);font-size:18.5px;line-height:1.7;max-width:1600px;margin-bottom:8px;}

  .type-block{padding:32px 0;border-bottom:1px solid var(--border);}
  .type-block:last-of-type{border-bottom:none;padding-bottom:8px;}
  .type-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
  .type-head h4{font-family:'Oswald',sans-serif;font-size:29px;font-weight:600;}
  .type-head h4 .type-es{font-family:'Source Sans 3',sans-serif;font-size:17px;font-weight:400;color:var(--text-muted);}
  .type-head .type-models{
    font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--text-muted);
    background:var(--surface);border:1px solid var(--border);padding:3px 10px;border-radius:20px;
  }
  .type-desc{color:var(--text-secondary);font-size:21px;line-height:1.7;max-width:1600px;margin-bottom:26px;}

  .type-illus-row{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:18px;justify-content:center;}
  .type-illus{
    flex:1;min-width:380px;max-width:580px;
    background:var(--surface);border:1px solid var(--border);border-radius:2px;
    box-shadow:0 2px 8px rgba(0,0,0,0.10);
    padding:26px 28px 28px;
  }
  .type-illus svg{width:100%;height:auto;display:block;}
  .type-illus .cap{
    font-size:16.5px;color:var(--text-muted);text-align:center;margin-top:10px;
  }
  .type-note{
    font-size:17px;color:var(--text-muted);max-width:1500px;line-height:1.65;
    padding:12px 16px;background:var(--surface);border-left:3px solid var(--border);border-radius:0 6px 6px 0;
  }

  .illus-footnote{margin-top:8px;color:var(--text-muted);font-size:16.5px;max-width:1600px;line-height:1.65;font-style:italic;}

  .catalog-section{
    margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
  }
  .catalog-intro{color:var(--text-secondary);font-size:21px;line-height:1.7;max-width:1600px;margin-bottom:22px;}
  .catalog-download{
    display:inline-flex;align-items:center;gap:10px;
    font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--text);
    background:var(--surface);border:1px solid var(--border);border-radius:4px;
    padding:12px 20px;text-decoration:none;transition:border-color .15s,color .15s;
    margin-bottom:8px;
  }
  .catalog-download:hover{border-color:var(--lime);color:var(--lime);}
  .catalog-download svg{flex-shrink:0;}
  .catalog-download .cd-size{color:var(--text-muted);font-size:13px;}

  .catalog-cat{margin-top:40px;}
  .catalog-cat-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
  .catalog-cat-head h4{font-family:'Oswald',sans-serif;font-size:27px;font-weight:600;}
  .catalog-cat-num{
    font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--text-muted);
    border:1px solid var(--border);border-radius:50%;width:26px;height:26px;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  }

  .product-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));gap:18px;}
  .product-card{
    background:var(--surface);border:1px solid var(--border);border-radius:2px;
    padding:22px 24px 20px;position:relative;
  }
  .product-badge-new{
    display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;
    color:var(--red);border:1px solid var(--red);border-radius:3px;padding:2px 7px;
    text-transform:uppercase;margin-bottom:9px;
  }
  .product-card h5{font-family:'Oswald',sans-serif;font-size:23px;font-weight:600;margin-bottom:9px;}
  .product-card p.product-desc{color:var(--text-secondary);font-size:16px;line-height:1.6;margin-bottom:14px;}
  .product-features{margin-bottom:14px;list-style:none;}
  .product-features li{
    color:var(--text-secondary);font-size:15px;line-height:1.55;
    padding-left:14px;position:relative;margin-bottom:5px;
  }
  .product-features li::before{content:"•";position:absolute;left:0;color:var(--lime);}
  .product-meta{
    font-family:'IBM Plex Mono',monospace;font-size:13.5px;color:var(--text-muted);
    margin-bottom:12px;
  }
  .product-meta strong{color:var(--text-secondary);font-weight:500;}
  .product-skus{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;}
  .product-sku{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-secondary);
    background:var(--surface-flat);border:1px solid var(--border);border-radius:14px;
    padding:4px 11px;text-decoration:none;display:inline-flex;align-items:center;gap:5px;
    transition:border-color .15s,color .15s;
  }
  a.product-sku:hover{border-color:var(--lime);color:var(--lime);}
  a.product-sku::after{
    content:"↗";font-size:11px;color:var(--text-muted);transition:color .15s;
  }
  a.product-sku:hover::after{color:var(--lime);}
  .product-sku .sku-note{color:var(--text-muted);}

  .ver-tienda-link{
    color:var(--lime);text-decoration:none;font-weight:500;margin-left:6px;
    border-bottom:1px solid transparent;transition:border-color .15s;
  }
  .ver-tienda-link:hover{border-bottom-color:var(--lime);}

  /* Chat IA */
  .ai-chat-launcher{
    position:fixed;right:24px;bottom:24px;z-index:900;
    width:68px;height:68px;border-radius:50%;
    background:var(--bg);color:var(--text);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s,border-color .15s;
  }
  .ai-chat-launcher:hover{transform:translateY(-2px);border-color:var(--lime);}
  .ai-chat-launcher-badge{
    position:absolute;top:-4px;right:-4px;background:var(--lime);color:#111;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    border-radius:9px;padding:2px 6px;letter-spacing:.03em;
  }
  .ai-chat-panel{
    position:fixed;right:24px;bottom:104px;z-index:900;
    width:420px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 140px);
    background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
    display:flex;flex-direction:column;overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.45);
    opacity:0;transform:translateY(12px) scale(.98);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease;
  }
  .ai-chat-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .ai-chat-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-flat);
  }
  .ai-chat-header-title{
    font-family:'Oswald',sans-serif;font-size:15px;font-weight:600;letter-spacing:.02em;
    display:flex;align-items:center;gap:8px;
  }
  .ai-chat-dot{width:8px;height:8px;border-radius:50%;background:var(--match);flex-shrink:0;}
  .ai-chat-close{
    background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;
    display:flex;border-radius:4px;transition:color .15s;
  }
  .ai-chat-close:hover{color:var(--text);}
  .ai-chat-messages{
    flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;
  }
  .ai-chat-msg{
    font-size:14px;line-height:1.5;padding:9px 12px;border-radius:10px;max-width:88%;
    white-space:pre-wrap;word-wrap:break-word;
  }
  .ai-chat-msg-bot{
    align-self:flex-start;background:var(--surface-flat);color:var(--text-secondary);
    border:1px solid var(--border);border-bottom-left-radius:3px;
  }
  .ai-chat-msg-user{
    align-self:flex-end;background:var(--lime-dim);color:var(--text);
    border:1px solid var(--lime);border-bottom-right-radius:3px;
  }
  .ai-chat-msg-error{
    align-self:flex-start;background:rgba(180,60,60,.12);color:#e0a0a0;
    border:1px solid rgba(180,60,60,.4);
  }
  .ai-chat-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;}
  .ai-chat-typing span{
    width:6px;height:6px;border-radius:50%;background:var(--text-muted);
    animation:aiTypingBounce 1.2s infinite ease-in-out;
  }
  .ai-chat-typing span:nth-child(2){animation-delay:.15s;}
  .ai-chat-typing span:nth-child(3){animation-delay:.3s;}
  @keyframes aiTypingBounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}
  .ai-chat-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
  .ai-chat-chip{
    font-family:'Source Sans 3',sans-serif;font-size:12.5px;color:var(--text-secondary);
    background:var(--surface-flat);border:1px solid var(--border);border-radius:14px;
    padding:6px 11px;cursor:pointer;transition:border-color .15s,color .15s;text-align:left;
  }
  .ai-chat-chip:hover{border-color:var(--lime);color:var(--lime);}
  .ai-chat-inputbar{
    display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--border);
    background:var(--surface-flat);
  }
  .ai-chat-input{
    flex:1;resize:none;max-height:100px;background:var(--bg);color:var(--text);
    border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-size:14px;
    font-family:'Source Sans 3',sans-serif;line-height:1.4;
  }
  .ai-chat-input:focus{outline:none;border-color:var(--lime);}
  .ai-chat-send{
    background:var(--lime);color:#111;border:none;border-radius:8px;width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
    transition:opacity .15s;
  }
  .ai-chat-send:disabled{opacity:.4;cursor:default;}
  .ai-chat-whatsapp-cta{
    display:inline-flex;align-items:center;gap:6px;margin-top:8px;
    background:#25D366;color:#0b1a10;font-weight:600;font-size:13px;
    text-decoration:none;padding:7px 12px;border-radius:16px;
  }
  .ai-chat-whatsapp-cta:hover{filter:brightness(1.08);}
  @media (max-width:480px){
    .ai-chat-panel{right:12px;left:12px;width:auto;bottom:98px;}
    .ai-chat-launcher{right:16px;bottom:16px;}
  }

  .product-specs summary{
    cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-muted);
    list-style:none;user-select:none;
  }
  .product-specs summary::-webkit-details-marker{display:none;}
  .product-specs summary::before{content:"+ ";color:var(--lime);}
  .product-specs[open] summary::before{content:"– ";}
  .product-specs table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;}
  .product-specs td{padding:6px 0;border-bottom:1px solid var(--border);color:var(--text-secondary);}
  .product-specs td:first-child{color:var(--text-muted);width:48%;}
  .product-specs td:last-child{color:var(--text);font-weight:500;text-align:right;}

  .adapters-table-wrap{overflow-x:auto;}
  .adapters-table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px;}
  .adapters-table th{
    text-align:left;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:0.06em;
    text-transform:uppercase;color:var(--text-muted);padding:10px 14px;border-bottom:1px solid var(--border);
  }
  .adapters-table td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text-secondary);}
  .adapters-table td:first-child{
    font-family:'IBM Plex Mono',monospace;color:var(--text);font-weight:500;white-space:nowrap;
  }

  .brand-section{
    margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
  }
  .brand-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:18px;margin:26px 0 20px;
  }
  .brand-card{
    background:var(--surface);border:1px solid var(--border);border-radius:2px;
    padding:20px 22px;
  }
  .brand-icon{
    width:38px;height:38px;border-radius:6px;
    background:var(--lime-dim);color:var(--lime);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:14px;
  }
  .brand-card h4{font-family:'Oswald',sans-serif;font-size:21px;font-weight:600;margin-bottom:9px;}
  .brand-card p{color:var(--text-secondary);font-size:17.5px;line-height:1.6;}

  .faq-title-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  .faq-title-row .section-title{margin-bottom:0;}
  .faq-tag{
    font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--lime);
    background:var(--surface-flat);border:1px solid var(--lime);
    padding:5px 11px;border-radius:3px;letter-spacing:0.08em;flex-shrink:0;
  }

  .card-comparable{cursor:pointer;}
  .compare-hint{
    margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-muted);
    transition:color .15s ease;
  }
  .card-comparable:hover .compare-hint{color:var(--lime);}
  .card-comparable.selected{
    border-color:var(--lime);
    background:linear-gradient(90deg, rgba(199,199,199,0.14), var(--surface-flat) 60%);
  }
  .card-comparable.selected .compare-hint{color:var(--lime);}
  .card-comparable.selected .compare-hint .hint-text{display:none;}
  .card-comparable.selected .compare-hint::before{content:"✓ Seleccionada para comparar — clic para quitar";}

  .comparador-panel{margin-top:20px;}
  .comparador-hint{
    font-family:'IBM Plex Mono',monospace;font-size:15.5px;color:var(--plate);
    background:var(--surface);border:1px dashed var(--plate);border-radius:2px;
    padding:12px 16px;
  }
  .comparador-table{
    display:grid;grid-template-columns:160px 1fr 1fr;gap:1px;
    background:var(--border);border:1px solid var(--border);border-radius:2px;overflow:hidden;
  }
  .ct-label, .ct-val{background:var(--surface-flat);padding:12px 16px;font-size:16.5px;color:var(--text-secondary);}
  .ct-label{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.04em;
  }
  .ct-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:18.5px;color:var(--text);}
  .comparador-clear{
    margin-top:14px;font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--text-muted);
    background:none;border:1px solid var(--border);border-radius:3px;padding:8px 14px;cursor:pointer;
    transition:border-color .15s, color .15s;
  }
  .comparador-clear:hover{border-color:var(--lime);color:var(--lime);}

  .faq-section{
    margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
    max-width:1700px;
  }
  .faq-section .section-title{position:relative;padding-bottom:16px;font-size:36.5px;}
  .faq-section .section-title::after{
    content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;background:var(--lime);
  }
  .faq-item{border-bottom:1px solid var(--border);transition:border-color .2s ease;}
  .faq-item:first-of-type{border-top:1px solid var(--border);}
  .faq-item:hover{border-color:var(--lime);}
  .faq-q{
    position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:none;border:none;text-align:left;cursor:pointer;
    padding:22px 18px 22px 4px;font-family:'Oswald',sans-serif;font-size:25.5px;color:var(--text);
  }
  .faq-q::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to left, rgba(199,199,199,0.16), transparent 55%);
    opacity:0;transition:opacity .25s ease;
  }
  .faq-q:hover::after{opacity:1;}
  .faq-icon{
    font-family:'IBM Plex Mono',monospace;font-size:26.5px;color:var(--lime);
    flex-shrink:0;transition:transform .2s ease;line-height:1;
  }
  .faq-item.open .faq-icon{transform:rotate(45deg);}
  .faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
  .faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
  .faq-a-inner{overflow:hidden;}
  .faq-a-inner p{color:var(--text-secondary);font-size:22.5px;line-height:1.7;padding:0 4px 24px;max-width:1600px;}
  .faq-link{color:var(--lime);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(199,199,199,0.4);transition:text-decoration-color .15s ease;}
  .faq-link:hover{text-decoration-color:var(--lime);}

  .install-section{
    margin-top:44px;padding-top:32px;border-top:1px solid var(--border);
  }
  .install-grid{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:28px;margin:24px 0 20px;
  }
  .install-tools h4, .install-steps h4{
    font-family:'Oswald',sans-serif;font-size:21px;font-weight:600;margin-bottom:14px;
  }
  .install-tools ul, .install-steps ol{padding-left:22px;}
  .install-tools li, .install-steps li{
    color:var(--text-secondary);font-size:17.5px;line-height:1.65;margin-bottom:11px;
  }
  .install-steps li strong{color:var(--lime);}
  .install-tools li::marker{color:var(--lime);}
  .install-steps li::marker{color:var(--lime);font-family:'IBM Plex Mono',monospace;}

  footer{
    flex:0 0 auto;
    max-width:2100px;margin:0 auto;width:100%;padding:32px 32px 20px;border-top:1px solid var(--border);
    box-sizing:border-box;
  }
  .footer-inner{
    display:flex;justify-content:center;flex-wrap:wrap;gap:60px;text-align:center;
  }
  .footer-col{flex:0 1 260px;}
  .footer-logo{height:120px;width:auto;flex-shrink:0;align-self:center;}
  .footer-brand{
    font-family:'Oswald',sans-serif;font-size:17.5px;font-weight:600;letter-spacing:0.02em;
    color:var(--text);margin-bottom:8px;
  }
  .footer-col p{font-family:'Source Sans 3',sans-serif;font-size:14.5px;color:var(--text-muted);line-height:1.6;max-width:320px;margin:0 auto;}
  .footer-col h5{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;
  }
  .footer-col ul{list-style:none;}
  .footer-col li{font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--text-secondary);line-height:1.9;}
  .footer-col li em{color:var(--plate);font-style:normal;}
  .footer-link{color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);transition:color .15s,border-color .15s;}
  .footer-link:hover{color:var(--lime);border-color:var(--lime);}
  @media (max-width:760px){ .footer-inner{grid-template-columns:1fr 1fr;} }

  @media (max-width:1650px){
    .hero{grid-template-columns:520px 1fr 340px 1fr 340px;}
    .hero-text{width:520px;}
    .hero-steps{width:340px;padding:20px 18px 16px;}
    .hero-steps-inner{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px 24px;}
    .hero-steps-inner::before{display:none;}
    .hero-step{flex-direction:column;text-align:center;gap:8px;margin:0;padding:4px;}
    .hero-step-text{align-items:center;}
    .hero-step-label{white-space:normal;font-size:15px;}
    .hero-step-desc{white-space:normal;font-size:12.5px;}
    .hero-panel{width:340px;}
    .reticle-middle{grid-template-columns:1fr auto 1fr;gap:6px;}
    .reticle-svg{width:110px;height:110px;}
    .stat-num{font-size:20px;}
    .stat-label{font-size:10.5px;}
  }

  @media (max-width:860px){
    .hero{grid-template-columns:1fr;}
    .hero-text{grid-column:1;width:100%;max-width:100%;}
    .hero-steps{
      grid-column:1;
      margin:28px auto 0;width:100%;max-width:340px;
      padding:22px 20px 18px;
    }
    .hero-steps-inner{
      flex-direction:row;flex-wrap:wrap;justify-content:center;
      gap:20px 30px;
    }
    .hero-steps-inner::before{display:none;}
    .hero-step{flex-direction:column;text-align:center;gap:10px;margin:0;padding:6px;}
    .hero-step-text{align-items:center;}
    .hero-step-label{white-space:normal;font-size:16px;}
    .hero-step-desc{white-space:normal;font-size:13.5px;}
    .hero-panel{grid-column:1;width:100%;max-width:340px;margin:24px auto 0;}
    .reticle-middle{grid-template-columns:1fr auto 1fr;gap:8px;}
    .reticle-svg{width:110px;height:110px;}
    .stat-num{font-size:22px;}
    .stat-label{font-size:11px;}
  }

  /* ===================== MOBILE ===================== */
  @media (max-width:640px){
    /* espaciado general */
    .topbar-inner{padding:12px 18px;}
    .hero{padding:28px 18px 20px;gap:24px;}
    .content{padding:8px 18px 32px;}
    footer{padding:24px 18px 16px;}
    .info-section, .illustrations-section, .brand-section, .catalog-section, .install-section, .faq-section{
      margin-top:32px;padding-top:24px;
    }

    /* topbar: logo y referencia no entran uno al lado del otro */
    .topbar-inner{flex-wrap:wrap;gap:8px;}
    .plate-ref{text-align:left;border-right:none;border-left:2px solid var(--lime);padding-left:10px;padding-right:0;}

    /* tipografía más chica */
    h1{font-size:33px;max-width:100%;}
    .subtitle{font-size:16.5px;max-width:100%;}
    .section-title, .info-section h3, .illustrations-section > h3.section-title, .faq-section .section-title, .catalog-section h3.section-title{font-size:26.5px;}
    .type-head h4{font-size:21px;}
    .catalog-cat-head h4{font-size:22px;}
    .product-grid{grid-template-columns:1fr;}
    .type-desc, .illustrations-section > p.section-intro, .info-section p{font-size:16.5px;}
    .faq-q{font-size:17.5px;padding:16px 10px 16px 4px;}
    .faq-a-inner p{font-size:16.5px;}

    /* buscador */
    input{font-size:17.5px;padding:14px 44px 14px 16px;}

    /* panel de retícula: que no desborde */
    .reticle-middle{grid-template-columns:1fr auto 1fr;gap:8px;}
    .reticle-svg{width:110px;height:110px;}
    .stat-num{font-size:22px;}
    .stat-label{font-size:11px;}
    .hero-panel{padding:18px;}

    /* grillas: todo a una sola columna */
    .card-grid{grid-template-columns:1fr;}
    .type-illus-row{gap:14px;}
    .type-illus{min-width:0;max-width:100%;width:100%;padding:14px 16px 16px;}
    .install-grid{grid-template-columns:1fr;gap:20px;}
    .brand-grid{grid-template-columns:1fr;}
    .footer-inner{grid-template-columns:1fr;gap:22px;}

    /* tarjetas de resultado: apilar ícono y texto en vez de fila */
    .card{padding:16px;gap:12px;}
    .readout{white-space:normal;}

    /* comparador: la tabla de 3 columnas no entra, que scrollee horizontal */
    .comparador-table{
      grid-template-columns:120px 1fr 1fr;
      overflow-x:auto;
      font-size:14.5px;
    }
    .ct-label, .ct-val{padding:9px 10px;font-size:14.5px;}
    .ct-title{font-size:15.5px;}

    /* chips de ejemplo */
    .example-chips{gap:6px;}
    .example-chip{font-size:12px;padding:5px 10px;}
  }  /* ===================== IMPRESIÓN ===================== */
  @media print{
    :root{
      --bg:#ffffff; --surface:#ffffff; --surface-flat:#ffffff; --surface-2:#f2f2f2;
      --border:#999999; --text:#000000; --text-secondary:#222222; --text-muted:#555555;
      --lime:#555555; --lime-dim:#eeeeee; --match:#5FAD3C; --match-dim:#eaf3e2; --plate:#C9962E; --plate-dim:#f5efdf;
      --no:#666666; --no-dim:#eeeeee;
    }
    body{background:#fff !important;}
    body::before, body::after{display:none !important;}
    .topbar, .hero, .example-chips, .info-section, .illustrations-section,
    .brand-section, .catalog-section, .install-section, .faq-section, footer,
    .comparador-panel, .header-actions, .not-compatible-toggle, .not-compatible-list,
    .card-comparable .compare-hint{
      display:none !important;
    }
    .content{padding:0;max-width:100%;}
    .print-header{display:flex !important;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid #555555;}
    .print-logo{height:50px;width:auto;}
    .print-title{font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;color:#000;}
    .print-date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#555;margin-top:2px;}
    .card{box-shadow:none;break-inside:avoid;}
    .card::after, .search-box::after, .hero-panel::after, .hero-steps::after, .type-illus::after, .empty-state::after{
      display:none !important;
    }
    a{color:#000;text-decoration:none;}
  }


/* ============================================================
   AMPLIACIONES: navegación principal, precios, disponibilidad,
   imágenes de producto, home
   ============================================================ */
.mainnav{
  flex:0 0 auto;
  background:rgba(10,10,10,0.42);
  backdrop-filter:blur(3px);
  border-bottom:1px solid transparent;
  position:sticky;top:0;z-index:50;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.mainnav.scrolled{
  background:rgba(24,24,24,0.92);
  border-bottom-color:var(--border);
  backdrop-filter:blur(8px);
}
.mainnav-inner{
  max-width:2100px;margin:0 auto;
  display:flex;align-items:center;gap:18px;
  padding:0 32px;height:54px;
  overflow-x:hidden;overflow-y:visible;
}
.mainnav-links{
  display:flex;align-items:center;gap:22px;
  overflow-x:auto;flex:1 1 auto;min-width:0;height:100%;
}
.mainnav-links::-webkit-scrollbar{height:0;}
.navlink{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:0.05em;
  color:var(--text-secondary);white-space:nowrap;padding:4px 1px;
  border-bottom:2px solid transparent;transition:color .15s, border-color .15s;
  text-decoration:none;flex-shrink:0;
}
.navlink:hover{color:var(--text);}
.navlink.active{color:var(--lime);border-bottom-color:var(--lime);}
.navlink-cta{
  flex-shrink:0;
  color:#fff!important;background:var(--red);
  padding:7px 16px;border-radius:20px;font-weight:600;
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;white-space:nowrap;
  text-decoration:none;border-bottom:none!important;
  transition:background .15s, transform .15s;
}
.navlink-cta:hover{background:var(--red-hover);}
.navlink-cta.active{color:var(--bg)!important;}
.navlink:focus-visible, .navlink-cta:focus-visible, a.home-menu-card:focus-visible{
  outline:2px solid var(--lime);outline-offset:2px;
}

/* ---- hero de páginas de categoría ---- */
.page-hero{
  max-width:2100px;margin:0 auto;width:100%;
  padding:44px 32px 14px;
}
.page-hero .eyebrow{margin-bottom:14px;}
.page-hero h1{font-size:clamp(32px,4vw,46px);margin-bottom:14px;}
.page-hero .subtitle{max-width:760px;margin-bottom:4px;}

.viewonly-note{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
  max-width:1600px;margin:10px 0 6px;letter-spacing:0.02em;
}

/* ---- home: grilla de categorías ---- */
.home-menu-grid{
  max-width:2100px;margin:0 auto;width:100%;
  padding:10px 32px 44px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
a.home-menu-card{
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:26px 24px;position:relative;overflow:hidden;
  transition:border-color .15s, transform .15s;
  text-decoration:none;color:var(--text);display:block;
}
a.home-menu-card:hover{border-color:var(--lime);transform:translateY(-3px);}
.hmc-thumb{
  margin:-26px -24px 18px -24px;height:150px;overflow:hidden;
  background:var(--surface-2);
}
.hmc-thumb-icon{
  display:flex;align-items:center;justify-content:center;color:var(--lime);opacity:0.85;
}
.hmc-thumb img{width:100%;height:100%;object-fit:contain;object-position:center;padding:10px;}
.home-menu-card .hmc-num{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:44px;
  color:var(--lime-dim);position:absolute;top:8px;right:18px;line-height:1;
}
.home-menu-card h4{
  font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;margin-bottom:10px;
  max-width:78%;color:var(--text);text-decoration:none;
}
.home-menu-card p{
  color:var(--text-secondary);font-size:14.5px;line-height:1.55;margin-bottom:18px;
  max-width:88%;
}
.home-menu-card .hmc-footer{display:flex;align-items:center;gap:10px;}
.home-menu-card .hmc-link{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--lime);
  letter-spacing:0.03em;text-decoration:none;
}
a.home-menu-card:hover .hmc-link{text-decoration:underline;}
.home-menu-card .hmc-count{color:var(--text-muted);font-size:12.5px;}

/* ---- imagen de producto ---- */
.product-photo{
  width:100%;height:200px;margin-bottom:16px;border-radius:2px;
  background:linear-gradient(155deg,#333 0%,#292929 100%);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  position:relative;
}
.product-photo img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;object-position:center;
  mix-blend-mode:normal;
}
.photo-badge-new{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.08em;
  color:#fff;background:var(--red);border-radius:3px;padding:3px 8px;
  text-transform:uppercase;font-weight:600;
}
.product-card{transition:border-color .15s, transform .15s;}
.product-card:hover{border-color:#5c5c5c;transform:translateY(-3px);}

/* ---- limpieza general de tarjetas ---- */
.product-card .card-top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:2px;}

/* ---- precio protagonista ---- */
.price-hero{
  margin:14px 0 4px;padding-top:12px;border-top:1px solid var(--border);
}
.price-hero-top{display:flex;align-items:baseline;gap:8px;}
.price-hero-caption{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);
  margin-top:3px;letter-spacing:0.02em;
}
.price-hero-label{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.04em;
}
.price-hero-value{font-family:'Oswald',sans-serif;font-size:30px;font-weight:600;color:var(--lime);line-height:1;}
.price-hero-single{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;}

.variant-list{margin-top:8px;}
.variant-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--border);
}
.variant-sku{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-secondary);
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;
}
a.variant-sku:hover{color:var(--lime);}
a.variant-sku::after{content:"↗";font-size:10px;color:var(--text-muted);}
a.variant-sku:hover::after{color:var(--lime);}
.variant-sku .sku-note{color:var(--text-muted);}
.variant-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}
.variant-price{font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;}

/* ---- tabla compacta de adaptadores ---- */
.adapters-table-wrap{overflow-x:auto;}
.adapters-table{width:100%;border-collapse:collapse;margin-top:8px;}
.adapters-table th{
  text-align:left;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.05em;padding:0 14px 10px;border-bottom:1px solid var(--border);
}
.adapters-table td{padding:14px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.adapters-table tr:hover td{background:rgba(255,255,255,0.02);}
.at-code{
  font-family:'IBM Plex Mono',monospace;font-size:14px;color:var(--text);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
a.at-code:hover{color:var(--lime);}
a.at-code::after{content:"↗";font-size:10px;color:var(--text-muted);}
a.at-code:hover::after{color:var(--lime);}
.at-desc{color:var(--text-secondary);font-size:14.5px;}
.at-footprint{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.at-price{font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;color:var(--lime);white-space:nowrap;}

/* Adaptadores: tabla en desktop, fichas (divs, sin trucos de tabla)
   en mobile. Se generan ambos bloques en el HTML y CSS decide cuál
   mostrar según el ancho de pantalla — así se evita el problema de
   forzar un <table> a comportarse como bloque, que en Safari iOS
   ignora el width:100% y se desborda. */
.adapters-mobile-only{display:none;}

@media (max-width: 700px){
  .adapters-desktop-only{display:none;}
  .adapters-mobile-only{display:block;}

  .at-card{
    border:1px solid var(--border);border-radius:4px;
    padding:14px 16px;margin-bottom:14px;background:var(--surface);
    box-sizing:border-box;width:100%;max-width:100%;overflow:hidden;
  }
  .at-card-row{padding:8px 0;border-bottom:1px solid var(--border);}
  .at-card-row:last-child{border-bottom:none;padding-bottom:0;}
  .at-card-row:first-child{padding-top:0;}
  .at-card-label{
    display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;
    margin-bottom:4px;
  }
  .at-card .at-desc, .at-card .at-footprint{white-space:normal;}
  .at-card .at-price{font-size:19px;}
}

/* ---- iconos de categoría en la home ---- */
.hmc-icon{position:absolute;top:16px;left:18px;color:var(--lime);opacity:0.92;}
.home-menu-card h4{padding-top:0;}

@media (max-width: 1300px){
  .mainnav-inner{gap:10px;padding:0 18px;}
  .mainnav-links{gap:14px;}
  .navlink{font-size:11.5px;}
  .navlink-cta{font-size:11.5px;padding:7px 12px;}
}
@media (max-width: 1100px){
  .home-menu-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 900px){
  .home-menu-grid{grid-template-columns:1fr;}
  .price-row{padding:9px 0;}
}
@media (max-width: 640px){
  .price-row{align-items:flex-start;}
  .price-row-right{margin-left:0;}
}

/* ============================================================
   MENÚ HAMBURGUESA (mobile)
   ============================================================ */
.nav-burger{
  display:none;background:none;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:34px;height:34px;flex-shrink:0;padding:0;
}
.burger-line{
  width:22px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav-burger.open .burger-line-1{transform:translateY(7px) rotate(45deg);}
.nav-burger.open .burger-line-2{opacity:0;}
.nav-burger.open .burger-line-3{transform:translateY(-7px) rotate(-45deg);}

/* El panel mobile es HERMANO de .mainnav (no vive dentro de
   .mainnav-inner), para que el overflow:hidden que protege el botón
   del buscador en desktop no lo recorte. */
.mobile-nav-overlay{display:none;}

@media (max-width: 760px){
  .nav-burger{display:flex;}
  .mainnav-links{display:none;}
  .mainnav-inner{justify-content:space-between;}

  .mobile-nav-overlay{
    display:flex;flex-direction:column;
    position:fixed;top:54px;left:0;right:0;bottom:0;
    background:rgb(15,15,15);
    padding:6px 24px 24px;overflow-y:auto;
    z-index:100;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .mobile-nav-overlay.open{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
  }
  .mobile-nav-overlay .navlink{
    padding:16px 0;border-bottom:1px solid var(--border);
    width:100%;font-size:16px;
    opacity:0;transform:translateX(-10px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .mobile-nav-overlay.open .navlink{opacity:1;transform:translateX(0);}
  .mobile-nav-overlay.open .navlink:nth-child(1){transition-delay:.05s;}
  .mobile-nav-overlay.open .navlink:nth-child(2){transition-delay:.09s;}
  .mobile-nav-overlay.open .navlink:nth-child(3){transition-delay:.13s;}
  .mobile-nav-overlay.open .navlink:nth-child(4){transition-delay:.17s;}
  .mobile-nav-overlay.open .navlink:nth-child(5){transition-delay:.21s;}
  .mobile-nav-overlay.open .navlink:nth-child(6){transition-delay:.25s;}
  .mobile-nav-overlay.open .navlink:nth-child(7){transition-delay:.29s;}
  .mobile-nav-overlay.open .navlink:nth-child(8){transition-delay:.33s;}
  .mobile-nav-overlay.open .navlink:nth-child(9){transition-delay:.37s;}
}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.whatsapp-float{
  position:fixed;left:24px;bottom:24px;z-index:39;
  width:52px;height:52px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  transition:transform .15s;
}
.whatsapp-float:hover{transform:scale(1.06);}
.whatsapp-float svg{width:28px;height:28px;}

@media (max-width: 640px){
  .whatsapp-float{left:16px;bottom:16px;width:46px;height:46px;}
  .whatsapp-float svg{width:24px;height:24px;}
}

/* ============================================================
   VOLVER ARRIBA
   ============================================================ */
.back-to-top{
  position:fixed;left:24px;bottom:96px;z-index:39;
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text-secondary);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s, transform .2s, border-color .15s, color .15s;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{border-color:var(--lime);color:var(--lime);}

@media (max-width: 640px){
  .back-to-top{left:16px;bottom:78px;width:40px;height:40px;}
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs{
  max-width:2100px;margin:0 auto;width:100%;
  padding:16px 32px 0;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text-muted);
  letter-spacing:0.02em;
}
.breadcrumbs a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid transparent;}
.breadcrumbs a:hover{color:var(--lime);border-bottom-color:var(--lime);}
.breadcrumbs .bc-sep{margin:0 8px;color:var(--border);}
.breadcrumbs .bc-current{color:var(--text-secondary);}

/* ============================================================
   DISTRIBUIDORES
   ============================================================ */
.dist-controls{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:24px;
}
.dist-locate-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:#fff;
  background:var(--red);border:none;padding:10px 18px;border-radius:20px;
  font-weight:600;cursor:pointer;transition:background .15s;
}
.dist-locate-btn:hover{background:var(--red-hover);}
.dist-status{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted);
}
.dist-list{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:18px;
}
.dist-card{
  background:var(--surface);border:1px solid var(--border);border-radius:4px;
  padding:20px 22px;transition:border-color .15s, transform .15s;
}
.dist-card:hover{border-color:#5c5c5c;transform:translateY(-2px);}
.dist-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;}
.dist-card h5{font-family:'Oswald',sans-serif;font-size:19px;font-weight:600;margin:0;}
.dist-badge{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--text-muted);
  border:1px solid var(--border);border-radius:12px;padding:3px 10px;
  white-space:nowrap;flex-shrink:0;
}
.dist-location{color:var(--text-secondary);font-size:14.5px;margin-bottom:4px;}
.dist-distance{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--lime);
  min-height:1.2em;margin-bottom:4px;
}
.dist-contact-row{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;
  padding-top:10px;border-top:1px solid var(--border);
}
.dist-contact-item{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-secondary);margin-right:14px;display:inline-block;}
.dist-contact-link{
  font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-secondary);
  text-decoration:none;border-bottom:1px solid transparent;margin-right:14px;display:inline-block;
}
.dist-contact-link:hover{color:var(--lime);border-bottom-color:var(--lime);}
.dist-wa{color:var(--lime);}

/* ---- mapa de distribuidores (Leaflet) ---- */
.dist-map{
  height:420px;border-radius:4px;border:1px solid var(--border);
  margin-bottom:20px;overflow:hidden;background:var(--surface);
  position:relative;z-index:0;isolation:isolate;
}
.dist-map .dist-map-tiles{
  filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.7);
}
.leaflet-popup-content-wrapper{
  background:var(--surface);color:var(--text);border-radius:4px;
}
.leaflet-popup-content{font-family:'Source Sans 3',sans-serif;font-size:13.5px;}
.leaflet-popup-tip{background:var(--surface);}
.leaflet-popup-content a{color:var(--lime);}
.leaflet-control-zoom a{
  background:var(--surface-flat)!important;color:var(--text)!important;
  border-color:var(--border)!important;
}
.leaflet-control-zoom a:hover{background:var(--surface-2)!important;}
.leaflet-control-attribution{
  background:rgba(30,30,30,0.85)!important;color:var(--text-muted)!important;
}
.leaflet-control-attribution a{color:var(--text-secondary)!important;}
@media (max-width: 640px){
  .dist-map{height:300px;}
}


/* ============================================================
   HOME: foto de fondo en el hero (topbar+nav flotan transparentes
   encima hasta que se hace scroll)
   ============================================================ */
.home-hero-photo{
  position:relative;
  background-color:var(--bg);
  min-height:88vh;
  display:flex;flex-direction:column;
}
.home-hero-photo .page-hero{
  margin-top:auto;
}
.home-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  z-index:0;
}
@media (max-width: 700px){
  .home-hero-img{object-position:center 15%;}
}
.home-hero-photo::before{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.65) 35%, rgba(8,8,8,0.3) 58%, rgba(8,8,8,0.1) 78%),
    linear-gradient(180deg, rgba(8,8,8,0.05) 0%, rgba(8,8,8,0.15) 45%, rgba(8,8,8,0.6) 85%, rgba(8,8,8,0.92) 100%);
}
.home-hero-photo > .topbar,
.home-hero-photo > .mainnav,
.home-hero-photo > .page-hero{
  position:relative;z-index:2;
}
.home-hero-photo .page-hero{padding-bottom:64px;}
.home-hero-photo .eyebrow,
.home-hero-photo h1,
.home-hero-photo .subtitle,
.home-hero-photo .viewonly-note,
.home-hero-photo .viewonly-note a{
  text-shadow:0 2px 14px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.95);
}