/* ════════════════════════════════════════════════════════════════
   SAQUIMI · Portafolio Empresarial — V2 "Composición Química"
   Sistema de marca oficial (manual de identidad):
   · Display  → Special Gothic Expanded One
   · Cuerpo   → Teachers
   · Color    → Pantone 541C #12507F · 3385U #29DEA1 · 7716C #27A089 · 649U #E9EFF4
   · Device   → molécula de agua (1 nodo grande + 2 chicos)
   Motion: ease-out exponencial, sin rebote. Reveals varían por sección.
   ════════════════════════════════════════════════════════════════ */

/* ───────── Tokens ───────── */
:root {
  /* color — paleta oficial + sombras derivadas para profundidad */
  --navy-950: #061d33;
  --navy-900: #0a2a47;
  --navy-800: #0e3760;
  --blue-541: #12507f;
  --mint:     #29dea1;   /* 3385 U — acento único */
  --mint-deep:#1fb487;
  --teal:     #27a089;   /* 7716 C */
  --mist:     #e9eff4;   /* 649 U */
  --paper:    #f3f8fc;
  --ink:      #0a2138;
  --ink-soft: #2d4a64;
  --white:    #ffffff;

  --line-light: rgba(10, 33, 56, .12);
  --line-dark:  rgba(255, 255, 255, .14);

  /* tipografía */
  --font-display: 'Special Gothic Expanded One', system-ui, sans-serif;
  --font-body: 'Teachers', system-ui, sans-serif;

  /* ritmo de espacio fluido */
  --space-sec: clamp(4.5rem, 9vw, 9rem);
  --wrap: 1240px;
  --gut: clamp(1.25rem, 4vw, 3rem);

  /* motion — curvas Emil (ease-out exponencial, sin rebote) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  /* z-index escala semántica */
  --z-cue: 20;
  --z-nav: 50;
  --z-progress: 60;
  --z-splash: 100;

  /* constelación química de fondo (patrón composición química, sutil) */
  --net: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='620'%3E%3Cg fill='none' stroke='%2374c8b3' stroke-width='1.1' opacity='.16'%3E%3Cpath d='M70 90 L320 60 L540 180 L700 120 M320 60 L260 300 L70 90 M540 180 L260 300 L430 470 M700 120 L640 360 L540 180 M640 360 L430 470 L520 580 M260 300 L120 520'/%3E%3C/g%3E%3Cg fill='%2329dea1' opacity='.14'%3E%3Ccircle cx='70' cy='90' r='5'/%3E%3Ccircle cx='320' cy='60' r='7'/%3E%3Ccircle cx='540' cy='180' r='6'/%3E%3Ccircle cx='700' cy='120' r='4'/%3E%3Ccircle cx='260' cy='300' r='9'/%3E%3Ccircle cx='640' cy='360' r='6'/%3E%3Ccircle cx='430' cy='470' r='7'/%3E%3Ccircle cx='120' cy='520' r='5'/%3E%3Ccircle cx='520' cy='580' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ───────── Reset / base ───────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .55rem + .6vw, 1.15rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--navy-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }

::selection { background: var(--mint); color: var(--navy-950); }

:focus-visible {
  outline: 2.5px solid var(--mint);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ───────── Tipografía ───────── */
.h2, .h3, .h4, .h5, .hero-title, .cta-title { text-wrap: balance; }
.body, .note, p { text-wrap: pretty; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 1rem + 6vw, 5rem);
  line-height: .96;
  letter-spacing: -.012em;
  color: var(--white);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 1rem + 3.1vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
}
.sec-dark .h2 { color: var(--white); }

.h3 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.h4 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); font-weight: 700; line-height: 1.2; }
.h5 { font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; }

.body { max-width: 60ch; color: var(--ink-soft); }
.body.wide { max-width: 72ch; }
.sec-dark .body { color: rgba(255, 255, 255, .82); }
.note { font-size: .95rem; color: var(--ink-soft); }
.sec-dark .note { color: rgba(255, 255, 255, .66); }

/* eyebrow = sistema de etiqueta-molécula de marca (no eyebrow tracked-caps genérico) */
.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--blue-541);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 9px;
  background: var(--net) -2px -82px / 760px 620px no-repeat;
  flex: none;
  opacity: .9;
}
.eyebrow-mint, .sec-dark .eyebrow { color: var(--mint); }
.kicker { color: var(--mint); }
.kicker::before { display: none; }
.kicker-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(41, 222, 161, .22);
}

/* ───────── Layout ───────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

.sec { position: relative; padding-block: var(--space-sec); overflow: hidden; scroll-margin-top: 74px; }
.sec-light { background: var(--mist); color: var(--ink); }
.sec-dark  { background: var(--navy-900); color: var(--white); }
.sec-dark.has-net::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--net) center / 880px auto repeat;
  opacity: .5;
  pointer-events: none;
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 78%);
}

.grid-2 { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.grid-2 > * { min-width: 0; } /* evita que hijos con contenido ancho desborden la celda */
@media (min-width: 820px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.align-start  { align-items: start; }
.align-center { align-items: center; }

.sec-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.col-intro > * + * { margin-top: 1.4rem; }

/* ───────── Botones ───────── */
.btn {
  --pad-y: .92em; --pad-x: 1.5em;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px;
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--font-body);
  font-weight: 700; font-size: 1rem; line-height: 1;
  letter-spacing: .005em;
  border: 2px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn-mint {
  background: var(--mint); color: var(--navy-950);
  box-shadow: 0 8px 26px -10px rgba(41, 222, 161, .65);
}
.btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, .35); }
.btn-lg { font-size: 1.06rem; --pad-y: 1.05em; --pad-x: 1.9em; }
.ico-wa { width: 1.22em; height: 1.22em; fill: currentColor; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .btn-mint:hover { background: var(--mint-deep); box-shadow: 0 12px 30px -8px rgba(41, 222, 161, .7); }
  .btn-ghost:hover { border-color: var(--mint); color: var(--mint); }
}

/* ───────── Marca molécula (SVG inline) ───────── */
.mol-mark { width: 40px; height: 34px; }
.mol-mark line { stroke: var(--mint); stroke-width: 3; }
.mol-mark circle { fill: none; stroke: var(--white); stroke-width: 3; }
.mol-mark circle:nth-of-type(2) { fill: var(--mint); stroke: var(--mint); }

/* ───────── Barra progreso ───────── */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-progress); background: transparent; }
.progress #progressBar { display: block; height: 100%; width: 0; background: var(--mint); transition: width 90ms linear; }

/* ───────── Nav ───────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: 1.5rem;
  padding: clamp(.75rem, 1.6vw, 1.1rem) var(--gut);
  transition: background-color 280ms ease, box-shadow 280ms ease, padding 280ms ease;
}
.nav.scrolled {
  background: rgba(8, 33, 56, .92);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 12px 30px -18px rgba(0, 0, 0, .7);
  padding-block: .6rem;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: .65rem;
  opacity: 0; transform: translateY(-9px); pointer-events: none;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.nav.past-hero .nav-brand { opacity: 1; transform: none; pointer-events: auto; }
.nav-logo { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-brand:hover .nav-logo { transform: scale(1.05); } }
.nav-word { font-family: var(--font-display); font-size: 1.18rem; color: var(--white); letter-spacing: .01em; }
.nav-links { display: none; margin-left: auto; gap: 1.7rem; }
.nav-links a { font-weight: 600; font-size: .98rem; color: rgba(255, 255, 255, .82); position: relative; padding: .3rem 0; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--mint); transition: right 240ms var(--ease-out);
}
@media (min-width: 980px) {
  .nav-links { display: flex; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover { color: var(--white); }
  .nav-links a:hover::after { right: 0; }
}

/* ───────── 1 · HERO ───────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 16vh, 11rem) var(--gut) clamp(3rem, 8vh, 5rem);
  background:
    radial-gradient(120% 90% at 18% 12%, #103a63 0%, transparent 55%),
    radial-gradient(130% 100% at 90% 100%, #0c3050 0%, transparent 60%),
    var(--navy-950);
  isolation: isolate;
  scroll-margin-top: 74px;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-video { object-fit: cover; }

/* ───────── Intro splash ───────── */
.splash {
  position: fixed; inset: 0; z-index: var(--z-splash);
  background: var(--navy-950);
  display: grid; place-items: center; overflow: hidden;
  opacity: 1; transition: opacity .6s var(--ease-out);
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-vid { width: 100%; height: 100%; object-fit: cover; }
.splash-skip {
  position: absolute; bottom: clamp(1.4rem, 4vh, 3rem); right: clamp(1.4rem, 4vw, 3rem);
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .65em 1.25em;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  color: var(--white); background: rgba(8, 33, 56, .5);
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: transform 160ms var(--ease-out), border-color .2s ease, color .2s ease;
}
.splash-skip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .splash-skip:hover { border-color: var(--mint); color: var(--mint); }
}
body.splash-on { overflow: hidden; }
.hero-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: var(--net) center / 820px auto repeat;
  mask-image: radial-gradient(130% 100% at 50% 40%, #000 25%, transparent 80%);
}
.hero-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }
.hero-title { margin: .4rem 0 1.4rem; }
.hero-title span { display: block; }
.hero-accent { color: var(--mint); }
.hero-lead { max-width: 46ch; font-size: clamp(1.08rem, .9rem + .7vw, 1.4rem); color: rgba(255, 255, 255, .85); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.hero-facts {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; padding: 0;
  margin-top: clamp(2.5rem, 5vw, 3.6rem);
  border-top: 1px solid var(--line-dark); padding-top: 1.4rem;
}
.hero-facts li { font-size: .98rem; color: rgba(255, 255, 255, .7); }
.hero-facts b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--mint); margin-right: .45em; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.8rem; translate: -50% 0;
  width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px;
  display: grid; place-items: start center; padding-top: 7px; z-index: var(--z-cue);
}
.scroll-cue span { width: 4px; height: 8px; border-radius: 2px; background: var(--mint); animation: cue 1.6s var(--ease-in-out) infinite; }
@keyframes cue { 0%,100% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 70% { opacity: 0; transform: translateY(11px); } }

/* ───────── 2 · CERTIFICADOS ───────── */
.cert-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.cert {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.3rem;
  padding: 1.4rem 1.6rem; background: var(--white); border-radius: 16px;
  box-shadow: 0 18px 40px -28px rgba(10, 33, 56, .4);
}
.cert-tag {
  font-family: var(--font-display); font-size: .9rem; color: var(--white);
  background: var(--blue-541); padding: .85em .7em; border-radius: 11px; text-align: center;
  min-width: 92px; line-height: 1.1;
}
.cert:nth-child(2) .cert-tag { background: var(--teal); }
.cert:nth-child(3) .cert-tag { background: var(--navy-900); }
.cert p { font-size: .98rem; color: var(--ink-soft); }
.cert b { color: var(--ink); }

/* ───────── 3 · ENFOQUE + INDUSTRIAS ───────── */
.enfoque-cards { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.card-solid {
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: var(--navy-800);
  border: 1px solid var(--line-dark); border-radius: 18px;
  position: relative; overflow: hidden;
}
.card-solid::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 56px;
  background: var(--mint); border-radius: 0 4px 0 0;
}
.card-solid h3 { color: var(--white); margin-bottom: .7rem; }
.card-solid p { color: rgba(255, 255, 255, .8); font-size: 1rem; }

.inds-block { display: grid; gap: 1.5rem; }
.inds { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.inds li {
  font-weight: 600; font-size: .88rem; color: var(--white);
  padding: .5em .9em; border: 1px solid var(--line-dark); border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease;
}
.inds li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: .6em; vertical-align: middle; }
@media (hover: hover) and (pointer: fine) {
  .inds li:hover { border-color: var(--mint); background: rgba(41, 222, 161, .1); }
}

.band-photo { margin-top: clamp(3rem, 6vw, 4.5rem); }
.band-inner { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 8; }
.band-inner img, .band-inner video { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-photo::after, .ops-photo::after { } /* placeholder */

/* ───────── 4 · SERVICIOS CLAVE ───────── */
.svc-grid { gap: clamp(2rem, 5vw, 4rem); }
.num-list { list-style: none; padding: 0; display: grid; gap: .2rem; }
.num-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--line-light);
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); font-weight: 600; color: var(--ink);
}
.num-list li span {
  font-family: var(--font-display); font-size: .95rem; color: var(--mint-deep);
  font-feature-settings: "tnum"; line-height: 1.6;
}
.svc-side {
  background: var(--white); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: 0 22px 50px -30px rgba(10, 33, 56, .4);
}
.svc-side-tit { font-weight: 700; color: var(--ink); margin: 0 0 .7rem; }
.svc-side-tit + * { margin-bottom: 1.6rem; }
.svc-side > .svc-side-tit ~ .svc-side-tit { margin-top: 0; }
.dot-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.dot-list li { position: relative; padding-left: 1.4rem; font-size: .98rem; color: var(--ink-soft); }
.dot-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue-541); }
.dot-mint li::before { background: var(--mint-deep); border-radius: 50%; }

/* ───────── 5 · PRODUCTOS ───────── */
.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .4rem; }
.chip-list li {
  font-weight: 600; font-size: .96rem; color: var(--navy-950);
  background: var(--mint); padding: .55em 1em; border-radius: 999px;
}
.prod-fig { position: relative; border-radius: 20px; overflow: hidden; background: var(--navy-950); aspect-ratio: 9 / 16; width: min(100%, 360px); margin-inline: auto; }
.prod-fig img, .prod-fig video { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-fig figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.5rem .9rem;
  font-size: .9rem; color: rgba(255, 255, 255, .9); font-weight: 600;
  background: linear-gradient(to top, rgba(6, 29, 51, .9), transparent);
}

/* ───────── 6 · OPERACIONES ───────── */
.ops-grid { gap: clamp(2rem, 5vw, 4rem); }
.feature-list { list-style: none; padding: 0; display: grid; gap: 1.6rem; }
.feature-list li { padding-left: 1.7rem; position: relative; }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 11px; height: 11px;
  border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(41, 222, 161, .18);
}
.feature-list h4 { color: var(--ink); margin-bottom: .25rem; }
.feature-list p { font-size: .98rem; color: var(--ink-soft); }
.ops-visual { display: grid; gap: 1.2rem; min-width: 0; }
.circ-row { display: flex; gap: 1rem; min-width: 0; }
.circ { flex: 1 1 0; min-width: 0; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid var(--white); box-shadow: 0 14px 30px -18px rgba(10, 33, 56, .5); }
.ops-photo { border-radius: 18px; overflow: hidden; }
.ops-photo .band-inner { aspect-ratio: 9 / 16; border-radius: 18px; width: min(100%, 300px); margin-inline: auto; }
.ops-photo .band-inner video { object-position: center; }

/* ───────── 7 · ALCANCE ───────── */
.alc-grid { gap: clamp(2rem, 5vw, 4rem); }
.model-card {
  margin-top: 1.8rem; padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--navy-800); border: 1px solid var(--line-dark); border-radius: 18px;
  position: relative; overflow: hidden;
}
.model-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 56px; background: var(--mint); }
.model-card h3 { color: var(--mint); margin-bottom: .8rem; }
.model-card p { color: rgba(255, 255, 255, .8); font-size: 1rem; }
.model-card p + p { margin-top: .9rem; }
.model-foot b { color: var(--white); }
.map-fig { display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); }
.map-fig .mx-map { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }
.mx-map .bg { fill: #28b68c; stroke: none; }
.mx-map .st { fill: #28b68c; stroke: #cdeee0; stroke-width: 0.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mx-map .cov { cursor: pointer; transition: fill .28s var(--ease-out), filter .28s var(--ease-out); outline: none; }
.mx-map .cov:hover, .mx-map .cov:focus { fill: #29dea1; stroke: #9dffdd; filter: drop-shadow(0 0 5px rgba(41, 222, 161, .95)); }
/* Alcance · mapa ultrawide sangrado (detrás de la card, bleed en bordes) */
#alcance { position: relative; }
#alcance .map-fig { position: absolute; top: 1.5%; right: -5%; left: auto; transform: none; width: min(1080px, 74%); max-width: none; padding: 0; margin: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 92%, transparent 100%); }
#alcance .map-fig .mx-map { max-width: none; width: 100%; }
#alcance .mx-map .cov { pointer-events: auto; }
@media (max-width: 860px) {
  #alcance .map-fig { position: static; transform: none; left: auto; top: auto; width: 100%; max-width: 420px; margin: 1.6rem auto 0; z-index: 0; }
  #alcance .map-fig .mx-map { max-width: 420px; margin-inline: auto; }
}
#alcance .body strong { color: var(--mint); font-weight: 700; }

/* ───────── 8 · CONTACTO ───────── */
.contacto {
  background: radial-gradient(120% 100% at 50% 0%, #103a63 0%, transparent 55%), var(--navy-950);
  color: var(--white); text-align: center; isolation: isolate; padding-bottom: 0;
}
.contacto .hero-canvas { opacity: .9; }
.contacto-inner { display: grid; justify-items: center; gap: 1.6rem; max-width: 760px; }
.mol-big { width: clamp(64px, 12vw, 96px); height: auto; }
.mol-big circle { stroke-width: 2.4; }
.cta-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1rem + 3.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.01em; }
.contacto-data { font-style: normal; color: rgba(255, 255, 255, .8); line-height: 1.7; margin-top: .4rem; }
.contacto-data a { color: var(--mint); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .contacto-data a:hover { text-decoration: underline; } }

.foot {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  border-top: 1px solid var(--line-dark);
  padding: 1.6rem var(--gut);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
  font-size: .85rem; color: rgba(255, 255, 255, .55);
}

/* ════════ Reveal system (varía por sección; visible sin JS) ════════ */
.js .rv, .js .rv-card, .js .rv-photo, .js .rv-pop { opacity: 0; }
.js .rv      { transform: translateY(30px); filter: blur(5px); }
.js .rv-card { transform: translateY(30px) scale(.97); filter: blur(5px); }
.js .rv-pop  { transform: scale(.9); }
.js .rv-photo .band-inner img,
.js .rv-photo > img { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out-quart); }

.js .rv.in, .js .rv-card.in, .js .rv-pop.in {
  opacity: 1; transform: none; filter: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js .rv-photo.in { opacity: 1; }
.js .rv-photo.in .band-inner img,
.js .rv-photo.in > img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv-card, .js .rv-pop, .js .rv-photo { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .rv-photo .band-inner img, .js .rv-photo > img { clip-path: none !important; }
  .scroll-cue span { animation: none; }
  .progress #progressBar { transition: none; }
}

/* ════════ Responsive ════════ */
@media (max-width: 600px) {
  .cert { grid-template-columns: 1fr; gap: .8rem; }
  .cert-tag { justify-self: start; }
  .circ-row { gap: .6rem; }
  .hero-facts { gap: .7rem 1.4rem; }
  .foot { flex-direction: column; }
}
@media (min-width: 900px) {
  .ops-visual { gap: 1.6rem; }
  .alc-grid { grid-template-columns: 1.05fr .95fr; }
}

/* ───────── Logos oficiales + utilidades (marca) ───────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-logo { height: clamp(26px, 3.4vw, 34px); width: auto; }
.hero-logo, .hero-quimica, .contacto-logo, .contacto-quimica { display: block; }
.hero-logo { width: clamp(220px, 33vw, 420px); height: auto; margin: .2rem 0 clamp(.9rem, 2vw, 1.5rem); }
.hero-quimica { width: clamp(160px, 22vw, 280px); height: auto; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
.cert-badge { width: 86px; height: auto; max-height: 72px; object-fit: contain; }
.lead-line { margin-top: 1.5rem; font-weight: 700; color: var(--white); font-size: 1.05rem; max-width: 52ch; }
.contacto-logo { width: clamp(200px, 32vw, 320px); height: auto; }
.contacto-quimica { width: clamp(150px, 24vw, 230px); height: auto; margin-top: .2rem; }

/* ───────── Hover-lift (efectos de interacción) ───────── */
@media (hover: hover) and (pointer: fine) {
  .cert, .card-solid, .svc-side, .model-card, .prod-fig {
    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s ease;
  }
  .cert:hover, .svc-side:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -28px rgba(10, 33, 56, .5); }
  .card-solid:hover, .model-card:hover { transform: translateY(-4px); border-color: rgba(41, 222, 161, .45); }
  .prod-fig:hover { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .cert, .card-solid, .svc-side, .model-card, .prod-fig { transition: none; }
}

/* ───────── Hero centrado ───────── */
.hero-inner { text-align: center; }
.hero-logo, .hero-quimica { margin-inline: auto; }
.hero-lead { margin-inline: auto; }
.hero-actions, .hero-facts { justify-content: center; }

/* ───────── Ondas separadoras de sección (estilo landing operaciones) ───────── */
.wave-separator { line-height: 0; margin: -1px 0; position: relative; z-index: 2; }
.wave-separator svg { display: block; width: 100%; height: 70px; }
@media (max-width: 768px) { .wave-separator svg { height: 40px; } }

/* ───────── Onda como borde DENTRO de la sección (el video/imagen sangra bajo la onda) ───────── */
.wave-edge { position: absolute; left: 0; width: 100%; height: 70px; display: block; z-index: 2; pointer-events: none; }
.wave-edge-bottom { bottom: -1px; }
.wave-edge-top { top: -1px; transform: scaleY(-1); }
@media (max-width: 768px) { .wave-edge { height: 40px; } }

/* refinería full-bleed que toca la onda */
.sec:has(.band-photo-flush) { padding-bottom: 0; }
.band-photo-flush { margin-bottom: 0; }
.band-photo-flush .band-inner { border-radius: 0; }

/* nav: logo centrado en mobile/tablet (links ocultos) */
@media (max-width: 979px) { .nav { justify-content: center; } }

/* operaciones: heading gap reducido (#165 Rosa) */
#operaciones .sec-head { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }

/* operaciones: 3 columnas (texto | video técnico | resina) */
.ops-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; grid-template-columns: 1fr; }
.ops-grid > * { min-width: 0; }
@media (min-width: 900px) { .ops-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.ops-resina { margin: 0; position: relative; z-index: 1; }
.ops-resina .band-inner { aspect-ratio: 3 / 4; border-radius: 18px; width: min(100%, 300px); margin-inline: auto; }
#operaciones + .wave-separator { display: none; }

/* ───────── Moléculas de agua (canvas) — réplica landing operaciones ───────── */
.mol-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero .mol-canvas, .contacto .mol-canvas { z-index: -1; }
.sec > .wrap, .sec > .band-photo, .hero-inner, .contacto-inner, .foot { position: relative; z-index: 1; }

/* moléculas H2O flotantes (SVG en esquinas) */
.h2o-mol { position: absolute; pointer-events: none; z-index: 0; }
.hero .h2o-mol { z-index: -1; }
.mol-tl { top: 9%;  left: 7%;  width: 72px; height: 72px; color: rgba(41,222,161,.22); animation: molBounce 5s ease-in-out infinite; }
.mol-bl { bottom: 16%; left: 13%; width: 92px; height: 92px; color: rgba(18,80,127,.22); animation: molPulse 7s ease-in-out infinite; }
.mol-tr { top: 19%; right: 9%;  width: 80px; height: 80px; color: rgba(41,222,161,.16); animation: molBounce 6s ease-in-out infinite 1s; }
.mol-br { bottom: 12%; right: 16%; width: 54px; height: 54px; color: rgba(41,222,161,.20); animation: molPulse 4s ease-in-out infinite; }
@keyframes molBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes molPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.94); } }
@media (max-width: 600px) { .mol-bl, .mol-br { display: none; } }
@media (prefers-reduced-motion: reduce) { .h2o-mol { animation: none !important; } }

/* chips/industrias: pop escalonado al entrar */
.js .inds li, .js .chip-list li { opacity: 0; transform: translateY(12px); }
.js .inds.in li, .js .chip-list.in li { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js .inds.in li:nth-child(1), .js .chip-list.in li:nth-child(1) { transition-delay: .05s; }
.js .inds.in li:nth-child(2), .js .chip-list.in li:nth-child(2) { transition-delay: .10s; }
.js .inds.in li:nth-child(3), .js .chip-list.in li:nth-child(3) { transition-delay: .15s; }
.js .inds.in li:nth-child(4), .js .chip-list.in li:nth-child(4) { transition-delay: .20s; }
.js .inds.in li:nth-child(5), .js .chip-list.in li:nth-child(5) { transition-delay: .25s; }
.js .inds.in li:nth-child(6), .js .chip-list.in li:nth-child(6) { transition-delay: .30s; }
.js .inds.in li:nth-child(7) { transition-delay: .35s; }
.js .inds.in li:nth-child(8) { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  .js .inds li, .js .chip-list li { opacity: 1 !important; transform: none !important; }
}

/* ── Hero background (planta de agua) · art-direction responsive ── */
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(75% 65% at 50% 48%,rgba(6,29,51,.62),rgba(6,29,51,.30) 60%,rgba(6,29,51,.14) 100%),linear-gradient(180deg,rgba(6,29,51,.45) 0%,rgba(6,29,51,.10) 35%,rgba(10,42,71,.55) 100%)}
.hero .mol-canvas,.hero .h2o-mol{display:none}
/* ── Servicios · cards animadas (reels en acción) ── */
.svc-reels-wrap{margin-top:clamp(2rem,5vw,3.4rem)}
.svc-reels{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.svc-reel{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--navy-950)}
.svc-reel video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.svc-reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.05rem 1.1rem .85rem;font-weight:700;color:#fff;font-size:1rem;background:linear-gradient(to top,rgba(6,29,51,.92),rgba(6,29,51,.35) 55%,transparent)}
@media (hover:hover){.svc-reel{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}.svc-reel:hover{transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(10,33,56,.55)}}
/* ── Hero · refuerzo de contraste (scrim más fuerte + texto) ── */
.hero-scrim{background:radial-gradient(88% 78% at 50% 44%,rgba(6,29,51,.86),rgba(6,29,51,.58) 54%,rgba(6,29,51,.42) 100%),linear-gradient(180deg,rgba(6,29,51,.72) 0%,rgba(6,29,51,.36) 32%,rgba(6,29,51,.44) 60%,rgba(10,42,71,.88) 100%)}
.hero .hero-lead{color:rgba(255,255,255,.97)}
.hero .hero-facts{color:#eaf3f0}
/* Hero foto clara (torres): legibilidad del wordmark/textos sobre fondo variable */
.hero .hero-logo,.hero .hero-quimica{filter:drop-shadow(0 2px 12px rgba(6,29,51,.7))}
.hero .kicker,.hero .hero-lead,.hero .hero-facts{text-shadow:0 1px 14px rgba(6,29,51,.72)}
/* ── Quiénes · Luis cutout (personaje superpuesto) ── */
.quienes-lz{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
.quienes-content{display:grid;gap:1.8rem;align-content:start;min-width:0}
.luis-stand{margin:0;justify-self:center}
.luis-stand img{display:block;width:100%;max-width:230px;height:auto;filter:drop-shadow(0 20px 30px rgba(10,33,56,.22))}
@media (min-width:820px){.quienes-lz{grid-template-columns:.8fr 1.2fr;align-items:end;gap:clamp(1rem,2vw,1.6rem)}.luis-stand{align-self:end;justify-self:end}.luis-stand img{max-width:390px}}
/* ── Operaciones · acomodo (medios parejos) ── */
.ops-photo .band-inner, .ops-resina .band-inner{aspect-ratio:4/5}
/* ── Luis cutout · limpio (sin sombra/box, tamaño ajustado) ── */
.luis-stand img{filter:none;max-width:150px}
@media (min-width:820px){.luis-stand img{max-width:225px}}
/* ── Operaciones · títulos en los videos ── */
.ops-cap{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem .8rem;font-weight:700;color:#fff;font-size:.95rem;background:linear-gradient(to top,rgba(6,29,51,.92),rgba(6,29,51,.35) 55%,transparent);z-index:2}
/* ── Enfoque · composición póster (Luis + Gota Pro flanquean las cards) ── */
#enfoque{padding-bottom:0}
#enfoque .enfoque-char{position:absolute;z-index:2;pointer-events:none;height:auto;user-select:none}
#enfoque .enfoque-luis{left:0;bottom:0;width:clamp(230px,25vw,360px);opacity:1;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
#enfoque .enfoque-gota{right:2.5%;bottom:0;width:clamp(150px,16vw,235px);opacity:1;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
@media (max-width:900px){#enfoque .enfoque-char{display:none}}