/* Vessel Solutions — hoja de estilo del sitio público
   Colores, tipos y medidas: no editar desde el panel. */

:root{
  --ink:#1B1C1E;
  --ink-2:#3A3B3D;
  --ink-3:#5D5D60;
  --ink-4:#77777A;
  --line:rgba(27,28,30,.14);
  --line-2:rgba(27,28,30,.24);
  --bg:#F4F4F4;
  --paper:#FFFFFF;
  --dark:#1B1C1E;
  --dark-2:#2C2D30;
  --acc:#F2E205;
  --acc-ink:#7A6E00;
  --pad:clamp(16px,4vw,48px);
  --max:1560px;
  --mono:'Outfit',system-ui,sans-serif; /* el sitio publico ya no usa mono */
  
  --cond:'Outfit',system-ui,sans-serif;
  --body:'Outfit',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--acc-ink)}
::selection{background:var(--acc);color:var(--ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;text-transform:uppercase;margin:0}
p{margin:0}
button{font:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc-ink)}
.kicker i{width:34px;height:3px;background:var(--acc);display:block}
.eyebrow{font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.mono{font-family:var(--cond);font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Marcas de registro (esquinas) ---------- */
.mk{position:relative}
.mk>i{position:absolute;width:11px;height:11px;color:var(--acc);z-index:2;pointer-events:none}
.mk>i::before{content:'';position:absolute;left:5px;top:0;width:1px;height:100%;background:currentColor}
.mk>i::after{content:'';position:absolute;top:5px;left:0;width:100%;height:1px;background:currentColor}
.mk>i.tl{top:-6px;left:-6px}.mk>i.tr{top:-6px;right:-6px}
.mk>i.bl{bottom:-6px;left:-6px}.mk>i.br{bottom:-6px;right:-6px}
.mk-ink>i{color:rgba(27,28,30,.6)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding:16px 28px;border:1px solid transparent;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-y{background:var(--acc);color:var(--ink);border-color:var(--acc)}
.btn-y:hover{background:var(--ink);color:var(--acc);border-color:var(--ink)}
.btn-o{border-color:var(--line-2);color:var(--ink)}
.btn-o:hover{border-color:var(--ink);background:var(--bg)}
.btn-d{background:var(--ink);color:var(--acc)}
.btn-d:hover{background:var(--bg);color:var(--ink)}
.btn-sm{padding:12px 18px;font-size:13.5px;letter-spacing:.12em}

/* ---------- Encabezado ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:600;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
.hdr.on{box-shadow:0 4px 22px rgba(27,28,30,.09)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:96px}
.hdr-logo img{height:clamp(54px,4.6vw,74px);width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.nav a{padding:4px 0;border-bottom:1px solid transparent;color:#4A4B4E}
.nav a:hover,.nav a.act{border-color:var(--acc);color:var(--ink)}
.hdr-cta{display:flex;align-items:center;gap:10px}
.dot{width:7px;height:7px;background:currentColor;border-radius:50%;animation:blink 1.8s infinite}
.spacer{height:96px}
.burger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line-2);background:transparent;cursor:pointer;margin-left:auto}
.burger span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(20,21,23,.55);z-index:700;animation:fadein .28s ease both}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);background:var(--dark);z-index:710;display:flex;flex-direction:column;padding:88px 0 24px;animation:drawerin .3s cubic-bezier(.2,.7,.2,1) both}
.drawer a{color:#F4F4F4;font-family:var(--cond);font-weight:600;font-size:22px;letter-spacing:.1em;text-transform:uppercase;padding:16px 26px;border-bottom:1px solid var(--dark-2);transition:background .2s ease,padding .2s ease}
.drawer a:hover{background:var(--acc);color:var(--ink);padding-left:34px}
.drawer .last{order:99;margin-top:auto;border:none;background:var(--acc);color:var(--ink);text-align:center;border-top:1px solid var(--acc)}

/* ---------- Selector de idioma ----------
   Dos pastillas chicas a la izquierda del boton de WhatsApp. El idioma
   activo va en tinta; el otro es el enlace. */
.lang{display:flex;align-items:center;font-family:var(--cond);font-weight:600;
  font-size:12px;letter-spacing:.1em;border:1px solid var(--line-2);flex:0 0 auto}
.lang > *{display:flex;align-items:center;gap:6px;padding:6px 9px;line-height:1;color:var(--ink-4);transition:background .16s ease,color .16s ease}
.lang .fl{width:17px;height:17px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 1px rgba(27,28,30,.22) inset;display:block}
.lang .on .fl{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}
.lang > * + *{border-left:1px solid var(--line-2)}
.lang .on{background:var(--ink);color:#F4F4F4}
.lang a:hover{background:var(--acc);color:var(--ink)}

/* En el menu movil va abajo, antes del boton de WhatsApp */
.drawer .lang-movil{display:flex;margin:14px 26px 0;border-color:#3A3B3E;font-size:14px}
.drawer .lang-movil > *{display:flex;align-items:center;gap:9px;padding:11px 14px;color:#9A9A9C;text-transform:uppercase;letter-spacing:.1em}
.drawer .lang-movil .fl{width:20px;height:20px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.3) inset;display:block}
.drawer .lang-movil > * + *{border-left:1px solid #3A3B3E}
.drawer .lang-movil .on{background:var(--acc);color:var(--ink)}
.drawer .lang-movil a{font-size:14px;border-bottom:none;padding:11px 14px}
.drawer .lang-movil a:hover{background:#2C2D30;color:#F4F4F4;padding-left:14px}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--paper);color:var(--ink);overflow:hidden;min-height:min(78vh,700px);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity .9s ease}
.hero-bg.on{opacity:1}
/* El velo se recoge: cubre solo el tercio izquierdo y se desvanece pronto,
   para que la foto del carrusel se vea casi completa. */
.hero-veil{position:absolute;inset:0;background:linear-gradient(94deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 18%,rgba(255,255,255,.52) 33%,rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 56%)}
.hero-in{position:relative;width:100%;max-width:var(--max);margin:0 auto;padding:clamp(60px,7vw,96px) var(--pad) clamp(40px,4.4vw,62px)}
.hero-txt{max-width:min(38ch,33%)}
.hero-txt h1{font-size:clamp(26px,2.9vw,40px);line-height:1.1;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.hero-txt .kicker{margin-bottom:16px}
.hero-txt p{max-width:36ch;font-size:clamp(17px,1.25vw,18.5px);line-height:1.55;color:var(--ink-3);margin:0 0 20px}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px}
.slide{display:none}
.slide.on{display:block;animation:slidefx .55s cubic-bezier(.2,.7,.2,1) both}
.dots{position:absolute;left:var(--pad);bottom:clamp(14px,2vw,22px);display:flex;gap:10px;z-index:3}
.dots button{cursor:pointer;border:none;padding:0;width:18px;height:3px;background:#C9C9CB;transition:width .3s ease,background .3s ease}
.dots button.on{width:46px;background:var(--acc)}

/* ---------- Bandas ---------- */
.band{padding:clamp(64px,8vw,124px) 0}
.band-sm{padding:clamp(44px,5vw,72px) 0}
.band-line{border-bottom:1px solid var(--line)}
.band-dark{background:var(--dark);color:#F4F4F4}
.band-dark .eyebrow{color:var(--acc)}
.band-paper{background:var(--paper)}
.band-y{background:var(--acc);color:var(--ink)}

.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.sec-head h2{font-size:clamp(26px,3.8vw,54px);line-height:.95;letter-spacing:-.02em}
.sec-head .eyebrow{margin-bottom:16px;display:block}
.sec-head p{max-width:38ch;color:var(--ink-3)}
.band-dark .sec-head p{color:#B4B4B6}

/* Certificaciones */
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(18px,2.4vw,34px)}
.certs .intro{align-self:center}
.certs .intro h2{font-size:clamp(23px,2.7vw,36px);line-height:1;margin:0 0 12px}
.certs .intro p{color:var(--ink-3);font-size:15px;max-width:36ch}
/* Certificación en formato diploma: más alto que ancho, con el texto
   repartido arriba y abajo de la imagen. Sin imagen, el bloque se centra
   como antes y no deja hueco. */
.cert{
  background:var(--paper);border:1px solid rgba(27,28,30,.16);
  padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,30px);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(14px,1.8vw,22px);text-align:center;
}
/* Sin proporción forzada: la tarjeta crece según la imagen, de modo que
   un certificado horizontal no queda con huecos arriba y abajo, y uno
   vertical no estira la tarjeta de más. */
.cert.con-img{justify-content:center}
.cert-top,.cert-btm{display:grid;gap:8px;flex:0 0 auto}
.cert-img{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(4px,.8vw,10px) 0;
}
/* La imagen se limita por alto, no por ancho: así manda su propia
   proporción y todas las certificaciones ocupan una franja pareja,
   sea el certificado vertical u horizontal. */
.cert-img img{
  max-height:clamp(120px,13vw,180px);
  max-width:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}
.cert .org{font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8A8A8C}
.cert .code{font-family:var(--cond);font-weight:700;font-size:clamp(30px,3.2vw,44px);line-height:.9}
.cert.con-img .code{font-size:clamp(28px,2.8vw,40px)}
.cert .nm{font-family:var(--cond);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;color:#4A4B4E}
.cert .note{font-size:14px;color:var(--ink-4)}

/* Líneas */
.lineas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.linea{background:var(--bg);display:block}
.linea:hover{background:#EDEDEE}
.linea-img{position:relative;aspect-ratio:5/4;background:var(--dark);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:14px}
.linea-img>img:not(.fondo){width:min(42%,140px);height:auto;display:block}
.linea-img.lg{aspect-ratio:16/10;padding:34px}
.linea-img.lg>img:not(.fondo){width:min(38%,190px)}

/* Con foto de la línea: la foto llena el bloque y el pictograma se va a la
   esquina superior derecha, sobre un cuadro del mismo fondo oscuro. */
.linea-img.con-foto{padding:0}
.linea-img .fondo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.linea-img.con-foto::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(27,28,30,.55) 0%,rgba(27,28,30,.12) 42%,rgba(27,28,30,.42) 100%);
}
/* El padding en % se resuelve contra el ANCHO DEL CONTENEDOR, no contra el
   propio elemento: un 16% del bloque de la línea era más grande que el
   cuadro del ícono y dejaba el área de contenido en cero. Va en píxeles. */
.linea-img .ico{
  position:absolute;top:0;right:0;z-index:2;
  width:clamp(62px,24%,92px);aspect-ratio:1;
  background:var(--dark);padding:clamp(11px,1.1vw,16px);
}
.linea-img.lg .ico{width:clamp(74px,22%,112px)}
.linea-img:not(.con-foto) .ico{position:static;width:auto;aspect-ratio:auto;background:none;padding:0}
.linea-img .ico img{width:100%;height:100%;object-fit:contain;display:block}
.linea-img:not(.con-foto) .ico img{width:min(42%,140px);margin:0 auto}
.linea-img.lg:not(.con-foto) .ico img{width:min(38%,190px)}
.linea-a{display:block;color:inherit;text-decoration:none}
.linea-txt{padding:26px 24px 16px}

/* Pie de la tarjeta: "Ver línea" a la izquierda y, cuando la línea tiene
   análisis cargados, el botón que los abre a la derecha. */
.linea-pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding:0 24px 28px;
}
.lab-btn{
  font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
  padding:8px 13px;cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.lab-btn:hover{border-color:var(--ink);color:var(--ink)}
.lab-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.linea-txt .code{font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.18em;color:#8A8A8C;margin-bottom:10px}
.linea-txt h3{font-size:24px;line-height:1;margin:0 0 12px}
.linea-txt p{color:var(--ink-3);font-size:15px;margin:0 0 18px}
.more{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--acc);padding-bottom:3px}

/* Por qué */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,80px)}
.two h2{font-size:clamp(26px,3.6vw,52px);line-height:.95;letter-spacing:-.02em;margin:0 0 22px}
.vent{display:grid;gap:1px;background:#333437;align-self:start}
.vent>div{background:var(--dark);padding:24px 4px;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start}
.vent>div:hover{background:#222325}
.vent .n{font-family:var(--cond);font-weight:500;font-size:12px;color:var(--acc);padding-top:5px}
.vent h4{font-weight:600;font-size:22px;letter-spacing:.04em;margin:0 0 6px}
.vent p{color:#95959A;font-size:15px}

/* Clientes */
.marq{display:grid;gap:14px;overflow:hidden}
.marq-row{display:flex;width:max-content;animation:marq 46s linear infinite}
.marq-row.rev{animation:marqrev 52s linear infinite}
.marq-row span{width:212px;height:92px;margin:0 7px;border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--cond);font-weight:600;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}

/* CTA */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:clamp(56px,7vw,104px) 0}
.cta h2{font-size:clamp(26px,3.9vw,56px);line-height:.92;margin:0 0 14px;max-width:20ch}
.cta p{max-width:44ch;font-size:18px}
.cta .btn{padding:22px 36px;font-size:18px}

/* ---------- Encabezado de página ---------- */
.page-head{background:var(--dark);color:#F4F4F4;padding:clamp(48px,6vw,90px) 0}
.page-head h1{font-size:clamp(30px,4.6vw,68px);line-height:.92;margin:0 0 18px}
.page-head p{max-width:56ch;color:#B4B4B6}
.crumb{font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#8A8A8C;margin-bottom:22px}
.crumb a{color:inherit}
.crumb a:hover{color:var(--acc)}
.crumb .now{color:var(--acc)}
.crumb-l{color:var(--ink-4)}
.crumb-l .now{color:var(--ink)}

/* ---------- Catálogo ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:36px}
.chip{font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid rgba(27,28,30,.2);color:var(--ink);cursor:pointer;background:transparent}
.chip:hover{border-color:var(--ink)}
.chip.on{border-color:var(--ink);background:var(--acc)}
.count{margin-left:auto;align-self:center;font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,30px)}
.pcard{display:block;border:1px solid var(--line);background:var(--paper)}
.pcard:hover{border-color:var(--ink)}
.pcard-img{position:relative;aspect-ratio:4/3;background:var(--paper);border-bottom:1px solid rgba(27,28,30,.1);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:22px}
.pcard-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;mix-blend-mode:multiply}
.pcard-img .ph{font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.12em;color:#A2A2A4}
.pcard-img .tag{position:absolute;top:0;left:0;font-family:var(--cond);font-weight:500;font-size:10.5px;letter-spacing:.14em;background:var(--acc);padding:4px 8px}
.pcard-txt{padding:20px}
.pcard-txt h4{font-weight:600;font-size:18.5px;line-height:1.05;margin:0 0 8px}
.pcard-txt .spec{font-family:var(--cond);font-weight:500;font-size:11.5px;color:var(--ink-4)}
.empty{padding:40px 16px;text-align:center;font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8A8A8C;border:1px solid var(--line)}

/* ---------- Ficha de producto ---------- */
.prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,64px);align-items:start}
.prod-main{position:relative;aspect-ratio:1;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:12px;padding:clamp(24px,4vw,56px);background:var(--paper)}
.prod-main img{position:relative;z-index:2;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;mix-blend-mode:multiply}
.prod-main .ph{font-family:var(--cond);font-weight:500;font-size:12px;color:#A2A2A4;position:relative;z-index:2}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.thumbs button{aspect-ratio:1;border:1px solid var(--line);background:var(--paper);padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumbs button.on,.thumbs button:hover{border-color:var(--ink)}
.thumbs img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.tagline{display:inline-block;font-family:var(--cond);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--acc);padding:4px 9px;margin-bottom:18px}
.prod h1{font-size:clamp(27px,3.3vw,46px);line-height:.95;margin:0 0 18px}
.prod .desc{color:var(--ink-3);max-width:52ch;margin:0 0 32px}
.specs{border-top:1px solid var(--line);margin-bottom:32px}
.specs>div{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.specs .k{font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.specs .v{font-size:15px}

/* ---------- Nosotros ---------- */
.about{position:relative;overflow:hidden;background:#141517}
.about-bg{position:absolute;left:0;right:0;top:-560px;height:calc(100% + 1120px);background-size:cover;background-position:center;will-change:transform}
.about-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,23,.82) 0%,rgba(20,21,23,.44) 26%,rgba(20,21,23,.5) 62%,rgba(20,21,23,.86) 100%)}
.about-in{position:relative;color:#F4F4F4}
.about h1{font-size:clamp(29px,4.6vw,68px);line-height:.92;margin:0 auto;max-width:22ch}
.about .kicker{justify-content:center;color:var(--acc);margin-bottom:20px}
.about-lead{max-width:min(78ch,1100px);margin:0 auto;padding:0 var(--pad) clamp(48px,6vw,90px);display:grid;gap:clamp(24px,3vw,42px);text-align:center}
.about-lead p,.about-txt{font-size:clamp(18px,1.55vw,23px);line-height:1.72;color:#F4F4F4;text-shadow:0 1px 18px rgba(12,13,14,.85);text-wrap:pretty}
.about h2{font-size:clamp(25px,3.2vw,44px);line-height:1;margin:0 0 24px;text-align:center}
.about h3{font-size:clamp(21px,2.3vw,30px);line-height:1;letter-spacing:.06em;margin:0 0 18px;color:var(--acc);text-align:center}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,80px)}
.contact h1{font-size:clamp(29px,4.1vw,60px);line-height:.94;margin:0 0 26px}
.rows{border-top:1px solid var(--line)}
.rows>div{display:grid;grid-template-columns:minmax(110px,.4fr) 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.rows .k{font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.rows .v{font-family:var(--cond);font-size:22px;font-weight:600}
.wa-card{border:1px solid var(--line);background:var(--paper);padding:clamp(22px,3vw,40px);display:grid;gap:18px;align-content:start;align-self:start}
.wa-card h2{font-size:clamp(21px,2.3vw,29px);line-height:1}
.wa-card p{color:var(--ink-3)}

/* ---------- Texto legal ---------- */
.legal{max-width:min(92ch,100%);display:grid;gap:20px}
.legal h1{font-size:clamp(25px,3.2vw,42px);line-height:1.04;margin:0 0 10px;letter-spacing:-.02em}
.legal p{color:var(--ink-2);font-size:16.5px;line-height:1.7;text-wrap:pretty}

/* ---------- Pie ---------- */
.ftr{background:var(--dark);color:#8A8A8C}
.ftr-in{max-width:var(--max);margin:0 auto;padding:clamp(48px,6vw,80px) var(--pad) 34px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px}
.ftr img{height:clamp(64px,5.2vw,88px);width:auto;display:block;margin-bottom:18px}
.ftr p{font-size:15px;max-width:32ch}
.ftr-col{display:grid;gap:8px;font-family:var(--cond);font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.ftr-col .h{font-family:var(--cond);font-weight:600;font-size:11px;letter-spacing:.18em;color:#55565A;text-transform:uppercase}
.ftr-col a{color:#C9C9CB}
.ftr-col a:hover{color:var(--acc)}
.ftr-data{display:grid;gap:8px;font-family:var(--cond);font-size:14.5px}
.ftr-data span{color:#C9C9CB}
.ftr-data .h{font-weight:600;font-size:11px;letter-spacing:.18em;color:#55565A;text-transform:uppercase}
.ftr-btm{max-width:var(--max);margin:0 auto;padding:18px var(--pad) 30px;border-top:1px solid var(--dark-2);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--cond);font-size:12px;letter-spacing:.08em}
.ftr-btm a{color:#8A8A8C}
.ftr-btm a:hover{color:var(--acc)}

/* ---------- WhatsApp flotante ---------- */
.wa{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:500;width:62px;height:62px;border-radius:50%;background:var(--acc);display:grid;place-items:center;box-shadow:0 6px 22px rgba(27,28,30,.32);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wa:hover{transform:scale(1.08)}
.wa .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:pulse 2.4s ease-out infinite}
.wa svg{width:32px;height:32px;display:block;position:relative}

/* ---------- Aparición al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marq-row,.wa .ring,.dot{animation:none}
}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqrev{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}
@keyframes slidefx{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes drawerin{from{transform:translateX(100%)}to{transform:translateX(0)}}

@media (max-width:1100px){.hero-txt{max-width:min(38ch,46%)}}
/* Entre el menu movil y ~1100px la barra va apretada y el boton verde se
   partia en dos renglones (mas todavia con el selector de idioma al lado).
   Ahi se encoge todo para que quepa en un solo renglon. */
@media (min-width:981px) and (max-width:1260px){
  .nav{gap:16px;font-size:14px;letter-spacing:.08em}
  .hdr-cta .btn-wa{padding:10px 13px;font-size:11px;letter-spacing:.05em;white-space:nowrap}
  .hdr-cta .btn-wa .ico-wa{width:14px;height:14px}
  .hdr-cta .btn-wa{gap:8px}
  .hdr-cta{gap:7px}
  .lang{font-size:11px}
  .lang > *{padding:5px 7px;gap:5px}
  .lang .fl{width:15px;height:15px}
}
@media (max-width:940px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
  .hero-txt{max-width:100%}
  .hero-veil{background:linear-gradient(94deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 52%,rgba(255,255,255,.55) 100%)}
}
@media (max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .grid3{grid-template-columns:minmax(0,1fr)}
  .specs>div{grid-template-columns:minmax(0,1fr);gap:4px}
  .rows>div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* Logos de clientes en la marquesina.
   El contenedor ya existe (212x92). Al reposo el logo va en gris y se
   colorea al pasar el cursor, para que la banda se lea como un conjunto
   y no como una colcha de colores. */
.marq-row span.haslogo{padding:16px 18px}
.marq-row span.haslogo img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:grayscale(1);opacity:.62;
  transition:filter .3s ease,opacity .3s ease;
  mix-blend-mode:multiply;
}
.marq-row span.haslogo:hover img{filter:grayscale(0);opacity:1}
@media (prefers-reduced-motion:reduce){
  .marq-row span.haslogo img{transition:none}
}

/* Ventana de análisis de laboratorio */
dialog.lab{
  border:1px solid var(--ink);padding:0;background:var(--paper);color:var(--ink);
  max-width:min(94vw,680px);width:100%;max-height:88vh;overflow:auto;
}
dialog.lab::backdrop{background:rgba(20,21,23,.78)}
.lab-cab{
  position:sticky;top:0;background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:clamp(22px,3vw,30px) clamp(20px,3vw,34px) 18px;
}
.lab-cab .eyebrow{display:block;margin-bottom:8px}
.lab-cab h2{font-size:clamp(24px,3vw,34px);line-height:1.02;margin:0}
.lab-x{
  flex:0 0 auto;background:var(--ink);color:var(--acc);border:none;
  width:34px;height:34px;cursor:pointer;font-family:var(--cond);font-weight:500;font-size:17px;line-height:1;
}
.lab-cuerpo{padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,34px) clamp(26px,3vw,34px)}
.lab-cuerpo p{color:var(--ink-2);font-size:15.5px;line-height:1.65;margin:0 0 18px;text-wrap:pretty}
.lab-item{
  border-top:1px solid var(--line);padding:15px 0 0;margin-bottom:15px;
  display:grid;gap:5px;
}
.lab-item b{font-family:var(--cond);font-weight:600;font-size:19px;line-height:1.12;letter-spacing:.01em}
.lab-item span{color:var(--ink-3);font-size:14.5px;line-height:1.6}
.lab-item:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){.lab-btn{transition:none}}

/* Textos legales con estructura: títulos de sección, viñetas simples y
   puntos con título. El texto plano de siempre sigue saliendo como párrafos. */
.legal-h{
  font-size:clamp(19px,2vw,25px);line-height:1.08;
  margin:clamp(30px,3.4vw,44px) 0 14px;
  padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line);
}
.legal-h:first-of-type{margin-top:8px;border-top:none;padding-top:0}
.legal-li{
  position:relative;padding-left:22px;margin:0 0 12px;
  color:var(--ink-2);font-size:16.5px;line-height:1.7;
}
.legal-li::before{
  content:'';position:absolute;left:2px;top:.72em;
  width:7px;height:1px;background:var(--acc-ink,#7A6E00);
}

/* Lista numerada: en la politica de devoluciones el cliente pidio numeros
   en lugar del guion. El numero lo imprime el PHP y vuelve a 1 en cada
   seccion; asi no depende de los contadores de CSS, que se portan distinto
   segun el navegador. */
.legal-num .legal-li{padding-left:32px}
.legal-num .legal-li::before{display:none}
.legal-li .num{
  position:absolute;left:0;top:0;font-style:normal;
  font-family:var(--cond);font-weight:600;font-size:16.5px;line-height:1.7;
  color:var(--acc-ink,#7A6E00);font-variant-numeric:tabular-nums;
}

/* Texto justificado en las paginas legales. Con guion automatico para que
   no se abran huecos entre palabras. */
.legal p,.legal-li,.legal-item span{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* En pantallas angostas la justificacion deja rios de espacio: ahi se
   alinea a la izquierda, que se lee mejor. */
@media (max-width:620px){
  .legal p,.legal-li,.legal-item span{text-align:left;hyphens:manual}
}
.legal-item{
  border-top:1px solid var(--line);padding-top:14px;margin-bottom:16px;
  display:grid;gap:4px;
}
.legal-item b{font-family:var(--cond);font-weight:600;font-size:19px;line-height:1.15}
/* Subtitulo dentro de una seccion legal ("Finalidades primarias:") */
.legal-sub{font-family:var(--cond);font-weight:600;font-size:17.5px;line-height:1.25;letter-spacing:-.005em;text-transform:none;margin:6px 0 -8px;color:var(--ink)}
/* Viñetas seguidas: se juntan un poco para que la lista no quede tan suelta */
.legal-li + .legal-li{margin-top:-9px}
.legal-item span{color:var(--ink-3);font-size:15.5px;line-height:1.65}

/* ---- Noticias ---- */
/* Fila deslizable en la portada: se arrastra con el dedo o el trackpad y
   se detiene en cada tarjeta. Sin flechas, así se ve bien con 2 o con 20. */
.posts-fila{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.posts-fila::-webkit-scrollbar{height:6px}
.posts-fila::-webkit-scrollbar-thumb{background:var(--line-2)}
.posts{
  display:flex;gap:clamp(16px,2vw,28px);
  padding:0 var(--pad);width:max-content;max-width:none;
}
.posts .post{
  flex:0 0 min(360px,78vw);scroll-snap-align:start;
}
/* Rejilla de la página de Noticias */
.posts-rej{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:clamp(20px,2.4vw,34px);
}
.post{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  color:inherit;text-decoration:none;
  transition:border-color .25s ease,transform .25s cubic-bezier(.2,.7,.2,1);
}
.post:hover{border-color:var(--line-2);transform:translateY(-3px)}
.post-img{
  aspect-ratio:16/9;background:var(--dark);overflow:hidden;flex:0 0 auto;
}
.post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.post:hover .post-img img{transform:scale(1.035)}
.post-txt{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.post-txt time{
  font-family:var(--cond);font-weight:500;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
}
.post-txt h3{font-size:19.5px;line-height:1.06;margin:0;text-wrap:balance}
.post-txt p{
  color:var(--ink-3);font-size:14.5px;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-txt .more{margin-top:auto;padding-top:6px;align-self:flex-start}

/* Nota completa */
.nota{padding:clamp(28px,3vw,44px) 0 clamp(50px,6vw,80px)}
.nota-cab{max-width:68ch;margin:0 0 clamp(26px,3vw,38px)}
.nota-cab time{
  font-family:var(--cond);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);display:block;margin-bottom:14px;
}
.nota-cab h1{font-size:clamp(26px,3.6vw,48px);line-height:.98;margin:0 0 18px;text-wrap:balance}
.nota-lead{font-size:clamp(17px,1.7vw,21px);line-height:1.6;color:var(--ink-2);margin:0}
.nota-img{margin:0 0 clamp(26px,3vw,40px);background:var(--dark)}
.nota-img img{width:100%;height:auto;display:block;max-height:62vh;object-fit:cover}
.nota-cuerpo{max-width:68ch}
.nota-cuerpo p{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin:0 0 18px;text-wrap:pretty}
.nota-pie{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(30px,3.4vw,46px);padding-top:clamp(22px,2.6vw,32px);
  border-top:1px solid var(--line);
}
@media (prefers-reduced-motion:reduce){
  .post,.post-img img{transition:none}
  .post:hover{transform:none}
  .post:hover .post-img img{transform:none}
}

/* Legales a lo ancho: los puntos con título se acomodan en dos columnas
   cuando hay espacio, y el texto corrido se queda en una medida legible. */
.legal p,.legal-li{max-width:74ch}
@media (min-width:900px){
  .legal-item{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
    gap:6px 28px;align-items:start;
  }
  .legal-item b{margin:0}
}

/* Botón de WhatsApp en su verde de marca. Reemplaza al flotante que vivía
   fijo en la esquina inferior derecha. */
.btn-wa{
  background:#25D366;border-color:#1EBE5A;color:#0B2E18;
}
.btn-wa:hover{background:#1EBE5A;border-color:#17A64D;color:#06230F}
.btn-wa .ico-wa{width:16px;height:16px;flex:0 0 auto;display:block}
.btn-sm .ico-wa{width:15px;height:15px}

/* Varios teléfonos de oficina, uno debajo del otro */
.contact .rows .tels{display:grid;gap:3px}
.contact .rows .v-wa{color:inherit;text-decoration-color:#25D366;text-underline-offset:3px}
.contact .rows .v-wa:hover{color:#1EBE5A}

/* Botones del hero en versión compacta: la foto manda, no la botonera. */
.hero-btns .btn{padding:13px 21px;font-size:14px;letter-spacing:.1em}