/* VANTERIS — hoja del sitio. Consume tokens.css (--vt-*). */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--vt-white);color:var(--vt-ink);
     font-family:var(--vt-font-body);font-size:16px;line-height:var(--vt-lh-body);
     -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--vt-teal-deep)}
h1,h2,h3{font-family:var(--vt-font-display);line-height:var(--vt-lh-tight);
         letter-spacing:.03em;margin:0;text-wrap:balance}
h1{font-size:var(--vt-fs-display);font-weight:var(--vt-w-bold)}
h2{font-size:var(--vt-fs-h2);font-weight:var(--vt-w-semibold);margin-bottom:var(--vt-space-4)}
h3{font-size:var(--vt-fs-h3);font-weight:var(--vt-w-semibold)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--vt-orange-ink);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:-9999px;background:var(--vt-ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--vt-maxw);margin:0 auto;padding:0 var(--vt-space-4)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- volver arriba ----------
   Aparece cuando ya se bajó lo suficiente para que el header quede lejos. */
.arriba{position:fixed;right:16px;bottom:16px;z-index:30;
        width:46px;height:46px;border-radius:50%;
        display:grid;place-items:center;
        background:var(--vt-teal);color:var(--vt-white);
        box-shadow:0 3px 12px rgba(40,40,40,.28);
        opacity:0;visibility:hidden;transform:translateY(8px);
        transition:opacity .2s ease,transform .2s ease,visibility .2s}
.arriba.visible{opacity:1;visibility:visible;transform:none}
.arriba:hover{background:var(--vt-teal-deep)}
.arriba .ico{width:21px;height:21px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--vt-line);position:sticky;top:0;background:var(--vt-white);z-index:20}
.head-in{display:flex;align-items:center;gap:var(--vt-space-3);
         flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.brand img{width:178px;height:auto;display:block}
.nav{display:flex;gap:var(--vt-space-3);margin-right:auto}
.nav a{color:var(--vt-ink);text-decoration:none;font-size:var(--vt-fs-small);font-weight:var(--vt-w-medium)}
.nav a:hover{color:var(--vt-teal-deep)}
.head-tools{display:flex;align-items:center;gap:var(--vt-space-2)}
/* El buscador es una herramienta, no el protagonista del header: con el botón en
   lupa y el input angosto, la barra entera cabe en un solo renglón. */
.search{display:flex;align-items:stretch;border:1.5px solid var(--vt-line);
        border-radius:var(--vt-radius-md);overflow:hidden;height:36px}
.search input{border:0;padding:0 10px;width:min(186px,34vw);font-family:inherit;font-size:.8rem;
              background:var(--vt-white);color:var(--vt-ink)}
.search input:focus-visible{outline:2px solid var(--vt-teal);outline-offset:-2px}
.search input::placeholder{color:var(--vt-ink-muted)}
.search button{border:0;background:var(--vt-teal);color:#fff;width:36px;flex:none;cursor:pointer;
               display:grid;place-items:center;padding:0}
.search button:hover{background:var(--vt-teal-deep)}
.search button .ico{width:17px;height:17px}
/* El botón de cotización tampoco necesita el tamaño de un CTA de página. */
.head-tools .btn{padding:9px 15px}
.lang{font-family:var(--vt-font-mono);font-size:.75rem;text-decoration:none;color:var(--vt-ink);
      border:1px solid var(--vt-line);padding:6px 9px;border-radius:var(--vt-radius-sm)}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--vt-font-body);
     font-weight:var(--vt-w-semibold);font-size:var(--vt-fs-small);line-height:1;
     padding:12px 20px;border-radius:var(--vt-radius-md);border:1.5px solid transparent;
     cursor:pointer;text-decoration:none}
.btn-primary{background:var(--vt-teal);color:var(--vt-white)}
.btn-primary:hover{background:var(--vt-teal-deep)}
.btn-secondary{background:var(--vt-white);color:var(--vt-teal-deep);border-color:var(--vt-teal)}
.btn-secondary:hover{background:var(--vt-teal-tint)}
.btn-accent{background:var(--vt-orange);color:var(--vt-ink)}   /* charcoal sobre naranja: 5.07:1 */
.btn-accent:hover{background:#E85A10}
.btn-quiet{background:transparent;color:var(--vt-ink);border-color:var(--vt-line)}
.btn-quiet:hover{border-color:var(--vt-ink-muted)}
.btn-row{display:flex;gap:var(--vt-space-3);flex-wrap:wrap;align-items:center}

/* ---------- secciones ---------- */
section{padding:var(--vt-space-6) 0}
section.tinted{background:var(--vt-surface)}
.page-head{padding:var(--vt-space-5) var(--vt-space-4) 0;display:flex;flex-direction:column;gap:var(--vt-space-3)}
.lede{color:var(--vt-ink-muted);max-width:70ch}
.prose{max-width:68ch;color:var(--vt-ink-muted)}
.empty{color:var(--vt-ink-muted);font-size:var(--vt-fs-small)}
.eyebrow{font-family:var(--vt-font-mono);font-size:.75rem;letter-spacing:.18em;color:var(--vt-teal);margin-bottom:10px}

/* ---------- hero ---------- */
/* El velo va MUY opaco del lado del texto a propósito: sobre charcoal al 94%
   el blanco conserva ~13:1, así que la foto nunca compromete la legibilidad. */
.hero{background:linear-gradient(100deg,rgba(40,40,40,.95) 0%,rgba(40,40,40,.88) 42%,
                                 rgba(40,40,40,.58) 100%),
                 var(--vt-ink) url('/assets/img/bg/hero-corredor.webp') center/cover no-repeat;
      color:var(--vt-white);position:relative;overflow:hidden;
      padding:var(--vt-space-7) 0}
@media (max-width:760px){
  /* En móvil el texto ocupa todo el ancho: el velo se vuelve parejo. */
  .hero{background:linear-gradient(rgba(40,40,40,.93),rgba(40,40,40,.93)),
                   var(--vt-ink) url('/assets/img/bg/hero-corredor.webp') center/cover no-repeat}
}

/* Cabecera con foto para industrias y soluciones. Sin foto, la página cae al
   encabezado normal: la imagen es un plus, nunca un requisito. */
.page-cover{position:relative;padding:var(--vt-space-6) 0 var(--vt-space-5);
            background:linear-gradient(90deg,rgba(11,90,96,.94) 0%,rgba(11,90,96,.80) 55%,
                                       rgba(40,40,40,.62) 100%),
                       var(--vt-teal-deep) var(--bg) center/cover no-repeat;
            color:var(--vt-white);overflow:hidden}
.page-cover::after{content:"";position:absolute;top:0;right:0;border-style:solid;
                   border-width:0 var(--vt-wedge) var(--vt-wedge) 0;
                   border-color:transparent var(--vt-orange) transparent transparent}
.page-cover .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--vt-space-3)}
.page-cover h1{color:var(--vt-white)}
.page-cover .lede{color:#DCE7E8}
.page-cover .crumb,.page-cover .crumb a{color:#BBD0D2}
.page-cover .crumb a:hover{color:var(--vt-white)}
.hero::after{content:"";position:absolute;top:0;right:0;border-style:solid;
             border-width:0 120px 120px 0;
             border-color:transparent var(--vt-orange) transparent transparent}
.hero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--vt-space-3)}
.hero .lede{color:#C2CFD0;font-size:1.1rem}
.hero .sub{color:#9BACAD;font-size:var(--vt-fs-small);max-width:66ch}
/* #9BACAD y no #8FA0A1: con la foto detrás, el tono anterior caía a 4.37:1 en
   móvil (AA pide 4.5). Este da 5.04:1 en el peor caso. */
.hero .btn-row{margin-top:var(--vt-space-3)}

/* ---------- grids y cards ---------- */
.grid{display:grid;gap:var(--vt-space-4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{border:1px solid var(--vt-line);border-radius:var(--vt-radius-md);background:var(--vt-white);
      position:relative;overflow:hidden}
.cat{padding:var(--vt-space-4);text-decoration:none;color:inherit;
     display:flex;flex-direction:column;gap:6px}
.cat:hover{border-color:var(--vt-teal)}
.cat .code{position:absolute;top:var(--vt-space-3);right:var(--vt-space-3);
           font-family:var(--vt-font-mono);font-size:.7rem;color:var(--vt-ink-muted)}
.cat p{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.cat .count{font-family:var(--vt-font-mono);font-size:.7rem;color:var(--vt-teal-deep);margin-top:6px}
.ind{padding:var(--vt-space-4);text-decoration:none;color:inherit;display:block}
.ind:hover{border-color:var(--vt-teal)}
.why{padding:var(--vt-space-4);display:flex;flex-direction:column;gap:8px}
.why p{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}

/* ---------- tarjeta de producto ---------- */
/* Todas las fotos de producto son 1:1, así que el marco también: sin franjas
   de relleno y con la misma altura en toda la rejilla. */
.prod .thumb{background:var(--vt-white);aspect-ratio:1/1;display:flex;align-items:center;
             justify-content:center;position:relative;border-bottom:1px solid var(--vt-line);
             text-decoration:none}
.prod .thumb::after{content:"";position:absolute;top:0;right:0;border-style:solid;
                    border-width:0 var(--vt-wedge) var(--vt-wedge) 0;
                    border-color:transparent var(--vt-orange) transparent transparent}
.prod .thumb img{width:100%;height:100%;object-fit:contain}
.noimg{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.prod-body{padding:var(--vt-space-3) var(--vt-space-4) var(--vt-space-4);
           display:flex;flex-direction:column;gap:var(--vt-space-3)}
.prod-body h3 a{color:inherit;text-decoration:none}
.prod-body .desc{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.sku{align-self:flex-start;font-family:var(--vt-font-mono);font-size:var(--vt-fs-sku);
     background:var(--vt-teal-tint);color:var(--vt-teal-deep);padding:5px 10px;border-radius:var(--vt-radius-sm)}
.sku.big{font-size:1.05rem;padding:8px 14px}
.attrs{display:flex;gap:6px;flex-wrap:wrap}
.attrs span{font-size:.72rem;border:1px solid var(--vt-line);border-radius:var(--vt-radius-pill);
            padding:3px 10px;color:var(--vt-ink-muted)}

/* ---------- ficha de producto ---------- */
.prod-top{padding-top:var(--vt-space-5)}
.prod-hero{background:var(--vt-white);border:1px solid var(--vt-line);border-radius:var(--vt-radius-md);
           aspect-ratio:1/1;max-height:390px;display:flex;align-items:center;justify-content:center;
           position:relative;overflow:hidden}
.prod-hero::after{content:"";position:absolute;top:0;right:0;border-style:solid;
                  border-width:0 34px 34px 0;border-color:transparent var(--vt-orange) transparent transparent}
.prod-info{display:flex;flex-direction:column;gap:var(--vt-space-3)}
.partno{display:flex;flex-direction:column;gap:6px}
.partno .lbl{font-family:var(--vt-font-mono);font-size:.7rem;letter-spacing:.12em;
             text-transform:uppercase;color:var(--vt-ink-muted)}
.features{display:flex;flex-wrap:wrap;gap:var(--vt-space-2);margin-top:var(--vt-space-3)}
.features li{font-size:var(--vt-fs-small);border:1px solid var(--vt-line);
             border-radius:var(--vt-radius-pill);padding:6px 14px;color:var(--vt-ink-muted)}
/* Subtítulo de atributos del producto — el "24 in · BLANCO · PP 10 g" de la ficha */
.subtitulo{color:var(--vt-teal);font-size:var(--vt-fs-small);font-weight:var(--vt-w-semibold);
           letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--vt-orange);
           padding-bottom:8px;align-self:flex-start}

/* Distintivos del producto (los círculos laterales de la ficha) */
.badges{display:flex;flex-wrap:wrap;gap:var(--vt-space-4);list-style:none}
.badges li{display:flex;align-items:center;gap:10px;color:var(--vt-teal)}
.badges .ico{width:40px;height:40px;padding:6px;flex:none;
             border:1.5px solid var(--vt-teal);border-radius:50%}
.badges span{font-size:.72rem;font-weight:var(--vt-w-semibold);letter-spacing:.04em;
             text-transform:uppercase;color:var(--vt-ink);line-height:1.25}

/* Banda de datos clave, bajo el hero del producto */
.tiles-sec{padding:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
       border:1px solid var(--vt-line);border-radius:var(--vt-radius-md);background:var(--vt-white)}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;
      padding:var(--vt-space-3) var(--vt-space-2);text-align:center;
      border-left:1px solid var(--vt-line)}
.tile:first-child{border-left:0}
.tile .ico{width:38px;height:38px;color:var(--vt-teal)}
.tile b{font-family:var(--vt-font-display);font-size:1.1rem;font-weight:var(--vt-w-bold);
        line-height:1.1}
.tile span{font-size:.62rem;font-weight:var(--vt-w-semibold);letter-spacing:.06em;
           text-transform:uppercase;color:var(--vt-ink-muted);line-height:1.3}
@media (max-width:640px){
  .tile{border-left:0;border-top:1px solid var(--vt-line)}
  .tile:first-child{border-top:0}
}

/* ---------- FAQ ---------- */
/* Abiertas por defecto: el contenido tiene que estar en el HTML para que lo lean
   los motores de IA, y <details open> lo deja visible sin JavaScript. */
.faq h2{font-size:var(--vt-fs-h3);color:var(--vt-teal-deep);
        margin:var(--vt-space-5) 0 var(--vt-space-3);padding-bottom:var(--vt-space-2);
        border-bottom:1px solid var(--vt-line)}
.faq h2:first-child{margin-top:0}
.faq-list{display:flex;flex-direction:column;gap:var(--vt-space-2)}
.faq-item{border:1px solid var(--vt-line);border-radius:var(--vt-radius-md);
          background:var(--vt-white);padding:var(--vt-space-3) var(--vt-space-4)}
.faq-item summary{cursor:pointer;font-weight:var(--vt-w-semibold);color:var(--vt-ink);
                  list-style:none;display:flex;justify-content:space-between;gap:var(--vt-space-3)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--vt-teal);font-weight:var(--vt-w-bold);flex:none}
.faq-item[open] summary::after{content:"−"}
.faq-item[open] summary{margin-bottom:var(--vt-space-2)}
.faq-item p{color:var(--vt-ink-muted);font-size:var(--vt-fs-small);line-height:var(--vt-lh-body)}

.fams{display:flex;gap:var(--vt-space-2);flex-wrap:wrap;margin-bottom:var(--vt-space-4)}
.fam{font-size:var(--vt-fs-small);border:1px solid var(--vt-line);border-radius:var(--vt-radius-pill);
     padding:6px 14px;color:var(--vt-ink-muted)}
.fam.active{background:var(--vt-teal);color:#fff;border-color:var(--vt-teal)}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--vt-fs-small)}
.spec th{background:var(--vt-teal);color:var(--vt-white);text-align:left;
         font-weight:var(--vt-w-semibold);padding:11px 14px;letter-spacing:.03em}
.spec td{border:1px solid var(--vt-line);padding:10px 14px;background:var(--vt-white)}
.spec tbody tr:nth-child(even) td{background:var(--vt-surface)}
.spec td:first-child{font-weight:var(--vt-w-medium);width:44%;text-transform:capitalize}
section.tinted .spec td{background:var(--vt-white)}
section.tinted .spec tbody tr:nth-child(even) td{background:var(--vt-teal-tint)}

/* Tabla de comparación / desempeño: filas con rótulo a la izquierda y 2+ columnas.
   La columna VANTERIS va resaltada; la de la marca de referencia, en gris oscuro
   — igual que en la ficha impresa que nos pasó el cliente. */
.cmp th.ref{background:var(--vt-ink)}
.cmp thead th{text-align:center;font-size:var(--vt-fs-xsmall);line-height:1.3}
.cmp thead th.rotulo{text-align:left}
.cmp tbody th{background:var(--vt-white);color:var(--vt-ink);text-align:left;
              font-weight:var(--vt-w-medium);border:1px solid var(--vt-line);
              padding:10px 14px;letter-spacing:0;width:34%}
.cmp tbody tr:nth-child(even) th{background:var(--vt-surface)}
/* Un h2 que sigue a texto o a otra tabla necesita aire arriba: sin esto,
   "Comparación técnica" queda pegado al párrafo de la descripción. */
.wrap > p.prose + h2,.wrap > ul.features + h2,
.wrap > .scroll + h2,.wrap > .nota-tabla + h2{margin-top:var(--vt-space-5)}
/* Ancho fijo: con 2 o con 3 columnas de datos se reparten parejo y ninguna
   parte el texto mientras la de al lado sobra. */
/* `table-layout:fixed` reparte el ancho disponible, y en un teléfono ese ancho es
   tan poco que los encabezados de marca (RYMPLECLOTH® 301, HERMITEX® 300) se
   salían de su celda y se encimaban con la de al lado. Con un ancho mínimo la
   tabla deja de comprimirse y el contenedor .scroll hace lo suyo: se desliza. */
.cmp{table-layout:fixed;min-width:640px}
.cmp th,.cmp td{overflow-wrap:anywhere}   /* red de seguridad si entra un texto más largo */
.cmp thead th.rotulo{width:28%}
.cmp thead th + th{border-left:1px solid rgba(255,255,255,.28)}
.cmp-sub{display:block;font-family:var(--vt-font-mono);font-size:.68rem;
         font-weight:var(--vt-w-medium);opacity:.85;margin-top:3px;letter-spacing:.02em}
.cmp td{text-align:center}
.cmp .si{display:inline-flex;align-items:center;gap:6px;justify-content:center}
.cmp .si .ico{width:15px;height:15px;stroke-width:3.4;color:#0F7B3F}  /* 5.28:1 sobre blanco */
.cmp td.mia{font-weight:var(--vt-w-semibold)}
.cmp tbody tr td.mia{background:var(--vt-teal-tint)}
.cmp tbody tr:nth-child(even) td.mia{background:var(--vt-teal-tint)}
.articulo h2{font-size:1.45rem;margin-top:var(--vt-space-5)}
.articulo h2:first-of-type{margin-top:var(--vt-space-4)}
.articulo .prose + .prose{margin-top:var(--vt-space-3)}
.normas th{width:32%;white-space:nowrap;font-family:var(--vt-font-mono);font-size:.78rem}
.nota-tabla{font-size:var(--vt-fs-xsmall);color:var(--vt-ink-muted);
            margin-top:var(--vt-space-2);max-width:70ch}

/* ---------- documentos ---------- */
.doc{display:flex;align-items:center;gap:var(--vt-space-3);padding:14px 16px;flex-wrap:wrap;
     border:1px solid var(--vt-line);border-radius:var(--vt-radius-md);margin-bottom:10px;background:var(--vt-white)}
.doc .kind{font-family:var(--vt-font-mono);font-size:.7rem;background:var(--vt-ink);color:#fff;
           padding:4px 9px;border-radius:var(--vt-radius-sm)}
.doc .name{flex:1;font-size:var(--vt-fs-small);min-width:190px}
.doc .rev{font-family:var(--vt-font-mono);font-size:.72rem;color:var(--vt-ink-muted);
          font-variant-numeric:tabular-nums}
.doc-soon{opacity:.62}
/* Descargar el PDF y verla en línea son dos acciones distintas: van juntas y
   la descarga es la primaria, que es lo que la gente busca en una ficha. */
.doc-acts{display:flex;gap:var(--vt-space-2);flex-wrap:wrap;align-items:center}
.doc-acts .btn{padding:9px 15px}
.soon{font-size:var(--vt-fs-small);color:var(--vt-ink-muted);font-style:italic}

/* ---------- marcadores de dato faltante ---------- */
.pendiente{font-family:var(--vt-font-mono);font-size:.72rem;background:#FBE9E6;color:#9E2B1D;
           padding:2px 7px;border-radius:var(--vt-radius-sm);white-space:nowrap}
.review-flag{border-left:3px solid var(--vt-orange);background:var(--vt-surface);
             padding:var(--vt-space-3) var(--vt-space-4);font-size:var(--vt-fs-small);
             margin-top:var(--vt-space-3)}
.review-flag b{display:block;margin-bottom:4px}
.review-flag code{font-family:var(--vt-font-mono);background:var(--vt-white);
                  border:1px solid var(--vt-line);padding:1px 6px;border-radius:2px}

/* ---------- breadcrumb ---------- */
.crumb{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.crumb a{color:var(--vt-teal-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;margin:0 9px;color:#B7C1C1}

/* ---------- formulario ---------- */
.form{display:flex;flex-direction:column;gap:var(--vt-space-3)}
.form label{display:flex;flex-direction:column;gap:6px;font-size:var(--vt-fs-small);
            font-weight:var(--vt-w-medium)}
.form input,.form textarea{border:1.5px solid var(--vt-line);border-radius:var(--vt-radius-md);
            padding:11px 13px;font-family:inherit;font-size:var(--vt-fs-body);
            background:var(--vt-white);color:var(--vt-ink)}
.form input:focus,.form textarea:focus{border-color:var(--vt-teal);outline:none}
.form button{align-self:flex-start;margin-top:var(--vt-space-2)}
.formnote{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.contact-aside{display:flex;flex-direction:column;gap:var(--vt-space-3);
               background:var(--vt-surface);padding:var(--vt-space-4);border-radius:var(--vt-radius-md)}
.contact-aside p{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.contact-aside b{color:var(--vt-ink)}

/* ---------- footer ---------- */
.site-foot{background:var(--vt-ink);color:#B9C6C7;margin-top:var(--vt-space-6);padding:var(--vt-space-6) 0 0}
.foot-in{display:grid;gap:var(--vt-space-5);grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
         padding-bottom:var(--vt-space-5)}
.foot-brand img{width:210px}
.foot-brand p{font-size:var(--vt-fs-small);color:#8FA0A1;margin-top:var(--vt-space-2)}
.site-foot h3{color:var(--vt-white);font-size:.95rem;margin-bottom:var(--vt-space-3)}
.site-foot ul{display:flex;flex-direction:column;gap:8px}
.site-foot a{color:#B9C6C7;text-decoration:none;font-size:var(--vt-fs-small)}
.site-foot a:hover{color:var(--vt-white)}
.foot-contact li{font-size:var(--vt-fs-small)}
.foot-legal{border-top:1px solid #3A3A3A;padding-top:var(--vt-space-3);padding-bottom:var(--vt-space-4)}
.foot-legal p{font-size:.8rem;color:#8FA0A1}

/* ---------- menú móvil ----------
   El botón sólo existe abajo de 860px. Arriba de eso el nav es la barra de
   siempre y el botón se esconde, así que el escritorio no cambia en nada. */
.nav-btn{display:none;align-items:center;gap:8px;cursor:pointer;
         background:var(--vt-white);color:var(--vt-ink);
         border:1.5px solid var(--vt-line);border-radius:var(--vt-radius-md);
         font-family:var(--vt-font-body);font-size:.8rem;font-weight:var(--vt-w-semibold);
         padding:8px 13px;line-height:1}
.nav-btn:hover{border-color:var(--vt-teal);color:var(--vt-teal-deep)}
.nav-btn-ico{display:grid;gap:4px;width:17px}
.nav-btn-ico span{display:block;height:2px;border-radius:2px;background:currentColor;
                  transition:transform .18s ease,opacity .18s ease}
/* Abierto, las tres barras se vuelven una X. */
.site-head.nav-abierto .nav-btn-ico span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-head.nav-abierto .nav-btn-ico span:nth-child(2){opacity:0}
.site-head.nav-abierto .nav-btn-ico span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  /* Tres renglones, en este orden: logo + botón · idioma y cotización · buscador.
     El `order` es explícito porque head-tools trae el 0 por omisión y sin esto el
     botón caía hasta abajo del buscador. */
  .brand{order:1}
  .nav-btn{display:inline-flex;margin-left:auto;order:2}
  .head-tools{order:3;flex-basis:100%;justify-content:flex-end}
  /* El panel se queda dentro del wrap. Con flex-basis:100% un margen negativo lo
     corre a la izquierda pero no lo ensancha, y el panel terminaba antes del borde
     derecho; alineado con el resto del contenido no hay nada que cuadrar. */
  .nav{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
       margin-top:10px;border-top:1px solid var(--vt-line)}
  .site-head.nav-abierto .nav{display:flex}
  /* Renglones altos: en un teléfono se tocan con el pulgar. */
  .nav a{padding:15px 2px;border-bottom:1px solid var(--vt-line);
         font-size:1rem;font-weight:var(--vt-w-semibold)}
  .nav a:active{background:var(--vt-teal-tint)}
  /* margin-left lo maneja .nav-btn */
}
/* En móvil el buscador se queda sin ancho útil apretado junto a los botones:
   ahí toma su propia línea. Compacto es una decisión de escritorio. */
@media (max-width:560px){
  .head-tools{flex-wrap:wrap;justify-content:flex-end;gap:var(--vt-space-2) var(--vt-space-3)}
  .search{order:3;flex-basis:100%;height:40px}
  .search input{width:100%;font-size:.9rem}
  .search button{width:44px}
  .nav-btn-txt{display:none}   /* a este ancho el ícono ya se entiende solo */
  .nav-btn{padding:9px 11px}
}
@media (max-width:640px){
  .hero::after{border-width:0 70px 70px 0}
  section{padding:var(--vt-space-5) 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- formulario de descarga y aviso de privacidad ---------- */
.form .check{flex-direction:row;align-items:flex-start;gap:10px;cursor:pointer}
.form .check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--vt-teal)}
.form .check span{font-size:var(--vt-fs-small);color:var(--vt-ink-muted);line-height:1.5}
.form .check a{color:var(--vt-teal-deep)}
/* Honeypot: invisible para personas, tentador para bots. Fuera del flujo y
   fuera del foco, no solo display:none (algunos bots lo detectan). */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formerror{background:#FBE9E6;color:#9E2B1D;border-left:3px solid #C0392B;
           padding:12px 14px;border-radius:var(--vt-radius-sm);font-size:var(--vt-fs-small)}
.contact-aside .nota{margin-top:var(--vt-space-3);font-size:var(--vt-fs-small);
                     color:var(--vt-ink-muted);font-style:italic}
.prose-block{max-width:74ch}
.prose-block h2{font-size:var(--vt-fs-h3);margin-top:var(--vt-space-5);margin-bottom:var(--vt-space-2)}
.prose-block h2:first-child{margin-top:0}

/* ---------- tarjeta de industria con foto ---------- */
/* Solo se activa si el build encontró la imagen: sin foto, la tarjeta
   sigue siendo la de siempre. */
.ind.has-bg{position:relative;overflow:hidden;isolation:isolate;border-color:transparent;
            min-height:172px;display:flex;align-items:flex-end;color:var(--vt-white)}
.ind.has-bg::before{content:"";position:absolute;inset:0;z-index:-2;
                    background:var(--bg) center/cover no-repeat;
                    transition:transform .45s ease}
/* Velo oscuro que se cierra abajo, donde va el texto: ahí el blanco queda
   sobre ~#464646, que da 9:1. Arriba se abre para que la foto respire. */
.ind.has-bg::after{content:"";position:absolute;inset:0;z-index:-1;
                   background:linear-gradient(180deg,rgba(40,40,40,.22) 0%,
                              rgba(40,40,40,.62) 46%,rgba(40,40,40,.88) 100%)}
.ind.has-bg h3{color:var(--vt-white);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.ind.has-bg:hover{border-color:transparent}
.ind.has-bg:hover::before{transform:scale(1.06)}

/* Tarjeta de "sigue leyendo": foto arriba, texto abajo. */
.lee{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}
.lee:hover{border-color:var(--vt-teal)}
.lee-foto{display:block;aspect-ratio:16/9;background:var(--vt-ink) var(--bg) center/cover no-repeat;
          transition:transform .35s ease}
.lee:hover .lee-foto{transform:scale(1.04)}
.lee-txt{display:flex;flex-direction:column;gap:8px;padding:var(--vt-space-4)}
.lee-kicker{font-family:var(--vt-font-mono);font-size:.7rem;letter-spacing:.18em;
            text-transform:uppercase;color:var(--vt-teal)}
.lee-desc{font-size:var(--vt-fs-small);color:var(--vt-ink-muted)}
.lee-mas{font-size:var(--vt-fs-small);font-weight:var(--vt-w-semibold);color:var(--vt-teal-deep);margin-top:2px}

/* Rejilla de 3 fijas: con 5 elementos deja 3 arriba y 2 abajo, en vez de 4+1. */
.g3f{grid-template-columns:repeat(3,1fr)}
/* Tarjeta de descarga en Recursos: título, para qué sirve y los dos botones. */
.doc-card{padding:var(--vt-space-4);display:flex;flex-direction:column;gap:8px}
.doc-card b{font-family:var(--vt-font-display);font-size:1.05rem;font-weight:var(--vt-w-semibold)}
.doc-card > span:not(.btn-row){font-size:var(--vt-fs-small);color:var(--vt-ink-muted);flex:1}
.doc-card .btn-row{margin-top:4px}

/* La comparativa del producto destacado va a TODO EL ANCHO, debajo de la foto y
   el texto: metida en media columna, las celdas partían cada frase en dos. */
.prod-destacado.con-cmp{grid-template-areas:"img body" "cmp cmp"}
.prod-destacado.con-cmp .ph-img{grid-area:img}
.prod-destacado.con-cmp .ph-body{grid-area:body}
.ph-cmp{grid-area:cmp;padding:var(--vt-space-5);background:var(--vt-surface);
        border-top:1px solid var(--vt-line)}
.ph-cmp h2{font-size:.8rem;font-weight:var(--vt-w-bold);letter-spacing:.1em;
           text-transform:uppercase;color:var(--vt-teal-deep);
           margin:0 0 12px;display:flex;align-items:center;gap:10px}
.ph-cmp h2::after{content:"";flex:1;height:1px;background:var(--vt-line)}
.ph-cmp .cmp{font-size:.82rem}
.ph-cmp .cmp thead th{font-size:.7rem}
.ph-cmp .nota-tabla{margin-top:10px;max-width:none}
@media (max-width:760px){
  .prod-destacado.con-cmp{grid-template-areas:"img" "body" "cmp"}
  .ph-cmp{padding:var(--vt-space-4)}
  .ph-body{padding:var(--vt-space-4)}
}
@media (max-width:900px){.g3f{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g3f{grid-template-columns:1fr}}
.ind.has-bg::first-line{color:inherit}

/* ---------- rejilla de 6 en una línea (industrias) ---------- */
/* Con 6 columnas cada tarjeta queda en ~185 px: el formato vertical aprovecha
   ese ancho angosto sin que la foto pierda al recortarse. */
.g6{grid-template-columns:repeat(6,1fr);gap:var(--vt-space-3)}
@media (max-width:1080px){.g6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.g6{grid-template-columns:repeat(2,1fr)}}
.g6 .ind.has-bg{aspect-ratio:3/4;min-height:0;padding:var(--vt-space-3)}
.g6 .ind.has-bg h3{font-size:1rem;line-height:1.22;letter-spacing:.02em}
/* En una tarjeta angosta el velo tiene que cerrar antes: el título suele
   ocupar dos renglones. */
.g6 .ind.has-bg::after{background:linear-gradient(180deg,rgba(40,40,40,.18) 0%,
                       rgba(40,40,40,.55) 40%,rgba(40,40,40,.9) 100%)}

/* ---------- producto destacado a lo ancho ---------- */
.prod-destacado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
                gap:0;align-items:center;
                border:1px solid var(--vt-line);border-radius:var(--vt-radius-md);
                background:var(--vt-white);overflow:hidden;position:relative;
                margin-bottom:var(--vt-space-4)}
.prod-destacado::after{content:"";position:absolute;top:0;right:0;border-style:solid;
                       border-width:0 var(--vt-wedge) var(--vt-wedge) 0;
                       border-color:transparent var(--vt-orange) transparent transparent}
/* Invertido a propósito: la foto de producto ya viene con fondo blanco, así que
   sobre gris se le veía el recuadro flotando. Blanco detrás de la foto —se funde—
   y el gris pasa al lado del texto, que es donde sí ayuda a separar el bloque. */
.ph-img{background:var(--vt-white);display:flex;align-items:center;justify-content:center;
        align-self:stretch;padding:var(--vt-space-4);min-height:320px}
.ph-img img{max-height:340px;width:auto;object-fit:contain}
.ph-body{display:flex;flex-direction:column;gap:var(--vt-space-3);align-items:flex-start;
         padding:var(--vt-space-5);background:var(--vt-surface)}
.ph-body h3{font-size:1.7rem}
.ph-body .desc{max-width:62ch}
.ph-body h3 a{color:inherit;text-decoration:none}
.ph-body h3 a:hover{color:var(--vt-teal-deep)}
.ph-body .eyebrow{margin-bottom:0}
.ph-body .desc{color:var(--vt-ink-muted);font-size:var(--vt-fs-small);max-width:62ch}
/* Los datos clave del producto, en la misma lectura que la banda de la ficha. */
.ph-specs{display:flex;flex-wrap:wrap;gap:var(--vt-space-4);
          border-top:1px solid var(--vt-line);border-bottom:1px solid var(--vt-line);
          padding:var(--vt-space-3) 0;width:100%}
.ph-specs li{display:flex;flex-direction:column;gap:2px;min-width:82px}
.ph-specs .ico{width:26px;height:26px;color:var(--vt-teal)}
.ph-specs b{font-family:var(--vt-font-display);font-size:.95rem;line-height:1.15}
.ph-specs span{font-size:.6rem;font-weight:var(--vt-w-semibold);letter-spacing:.05em;
               text-transform:uppercase;color:var(--vt-ink-muted)}
@media (max-width:820px){
  .prod-destacado{grid-template-columns:1fr;gap:0}
  .ph-img{min-height:240px}
  .ph-body{padding:var(--vt-space-4)}
  .ph-body h3{font-size:1.4rem}
}

/* ---------- cierre "Por qué VANTERIS": banda con foto + CTA ---------- */
/* Es lo último que ve alguien antes del footer: cierra con el argumento y la
   acción, no con cuatro cajas blancas sueltas. */
.porque{position:relative;isolation:isolate;color:var(--vt-white);
        padding:var(--vt-space-7) 0;overflow:hidden;
        background:linear-gradient(100deg,rgba(11,90,96,.95) 0%,rgba(11,90,96,.88) 45%,
                   rgba(40,40,40,.78) 100%),
                   var(--vt-teal-deep) url('/assets/img/bg/cta-porque.webp') center/cover no-repeat}
.porque::after{content:"";position:absolute;top:0;right:0;border-style:solid;
               border-width:0 90px 90px 0;
               border-color:transparent var(--vt-orange) transparent transparent}
.porque .wrap{position:relative;z-index:1}
.porque h2{color:var(--vt-white);margin-bottom:var(--vt-space-2)}
.porque .lede{color:#E4EFF0;max-width:60ch;margin-bottom:var(--vt-space-5)}

.porque-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--vt-space-4);
              margin-bottom:var(--vt-space-5)}
.porque-lista li{display:flex;flex-direction:column;gap:8px;
                 border-top:2px solid rgba(255,255,255,.28);padding-top:var(--vt-space-3)}
.porque-lista .ico{width:34px;height:34px;color:var(--vt-white);opacity:.9}
.porque-lista h3{font-size:1rem;color:var(--vt-white);line-height:1.25}
.porque-lista p{font-size:var(--vt-fs-small);color:#E2F0F1;line-height:1.5}
/* Medido en el PEOR caso (velo teal al 88% sobre una zona blanca de la foto,
   fondo efectivo #286E73): blanco 5.89:1, lede #E4EFF0 5.02:1 y el texto de
   las razones #E2F0F1 5.04:1. Los tonos anteriores (#DCE7E8 / #CFDDDE) daban
   4.66 y 4.22 — este último no llegaba al 4.5 que pide AA. */
.porque .btn-ghost{background:transparent;color:var(--vt-white);border-color:rgba(255,255,255,.55)}
.porque .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--vt-white)}
@media (max-width:900px){.porque-lista{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.porque-lista{grid-template-columns:1fr}}

/* Entradilla de las páginas de solución: el párrafo que resume de qué va. */
.entradilla{font-size:1.15rem;line-height:1.55;color:var(--vt-ink);max-width:66ch;
            margin-bottom:var(--vt-space-4);border-left:3px solid var(--vt-orange);
            padding-left:var(--vt-space-3)}
.prose-block .prose{margin-bottom:var(--vt-space-3)}
.lista-puntos{font-size:var(--vt-fs-body)}
.lista-puntos li{padding:5px 0 5px 26px}
.lista-puntos li::before{top:11px}

/* ---------- tarjetas de producto parejas ---------- */
/* En una rejilla, títulos y descripciones de distinto largo dejaban los botones
   a distinta altura. La tarjeta se estira a la fila, el cuerpo crece y el
   espacio sobrante se acumula ANTES de los botones: quedan siempre alineados,
   sin importar cuánto texto tenga cada producto. */
.grid > .card.prod{display:flex;flex-direction:column;height:100%}
.prod .thumb{flex:none}
.prod-body{flex:1;display:flex;flex-direction:column;gap:var(--vt-space-3)}
.prod-body h3{min-height:2.6em}          /* 2 renglones de título: la base pareja */
.prod-body .desc{flex:1}                 /* la descripción absorbe la diferencia */
.prod-body .btn-row{margin-top:auto}     /* y los botones se van al fondo */
/* El SKU y los atributos tampoco deben bailar entre tarjetas. */
.prod-body .attrs{min-height:2em;align-content:flex-start}
@media (max-width:640px){
  .prod-body h3{min-height:0}
  .prod-body .attrs{min-height:0}
}