/* ==========================================================================
   Waterway Group Corp. — Sistema de diseño
   Paleta extraída del escudo del logotipo.
   ========================================================================== */

/* ---------- Fuentes autoalojadas ---------- */
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ---------- Variables ---------- */
:root{
  /* Color. Azul de marca #00234E; cian y verde tomados del escudo del logo.
     Un solo acento (verde) en todo el sitio. Tema claro bloqueado: el sitio se
     consulta de día, en oficina y a pie de obra, y manda la fotografía. */
  --navy:#00234e;
  --navy-deep:#001833;
  --navy-soft:#0b3a74;
  --cyan:#2ba8e0;
  --green:#6abf3f;
  --green-deep:#4e9a28;

  --ink:#0d1520;
  --body:#45505f;
  --muted:#6b7686;

  --surface:#ffffff;
  --surface-alt:#f2f5f9;
  --surface-dark:#0b1118;
  --line:#dfe4ec;
  --line-dark:#20262f;

  /* Tipografía */
  --font-title:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-eyebrow:clamp(.78rem,.74rem + .18vw,.88rem);
  --fs-body:clamp(1rem,.97rem + .14vw,1.075rem);
  --fs-lead:clamp(1.06rem,1rem + .3vw,1.2rem);
  --fs-h4:clamp(1.1rem,1.04rem + .3vw,1.28rem);
  --fs-h3:clamp(1.3rem,1.18rem + .5vw,1.6rem);
  --fs-h2:clamp(1.85rem,1.45rem + 1.7vw,3rem);
  --fs-h1:clamp(2.35rem,1.6rem + 3.1vw,4.4rem);
  --fs-stat:clamp(2.2rem,1.7rem + 2vw,3.2rem);

  /* Espacio */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;
  --section-y:clamp(3.5rem,2rem + 6vw,7rem);

  /* Forma. Regla única: toda superficie es recta (0). El radio completo queda
     reservado a lo que flota sobre la página (botones flotantes) y a las
     insignias circulares de icono. No hay estados intermedios. */
  --radius-xs:0;
  --radius-sm:0;
  --radius-md:0;
  --shadow-sm:0 1px 2px rgba(0,35,78,.07),0 4px 12px rgba(0,35,78,.06);
  --shadow-md:0 8px 16px rgba(0,35,78,.10),0 20px 44px rgba(0,35,78,.14);

  --container:1240px;
  --rail:74px;

  /* Movimiento. Curvas propias: las nativas de CSS son demasiado blandas.
     Nunca ease-in en interfaz: retrasa justo el instante que el usuario mira. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease:var(--ease-out);

  --t-press:160ms;    /* respuesta de pulsación */
  --t-fast:180ms;     /* desplegables, acordeones */
  --t-base:240ms;     /* cambios de estado */
  --t-panel:300ms;    /* panel móvil */
}

/* ---------- Superficies del navegador ----------
   Selección, cursor, barra de desplazamiento, anillo de foco, subrayado y
   numerales los pinta el navegador con valores que no pertenecen a ningún
   sistema de diseño. Se tematizan desde la paleta. */
::selection{background:var(--navy);color:#fff}
::-moz-selection{background:var(--navy);color:#fff}
:root{
  accent-color:var(--navy);
  caret-color:var(--navy);
  scrollbar-color:#b9c3d2 var(--surface-alt);
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--surface-alt)}
::-webkit-scrollbar-thumb{background:#b9c3d2;border:3px solid var(--surface-alt)}
::-webkit-scrollbar-thumb:hover{background:#94a2b8}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--body);
  background:var(--surface);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%;height:auto}
picture{display:contents}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-title);
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-.025em;
  margin:0 0 var(--sp-4);
  font-weight:800;
  text-wrap:balance;
}
h3,h4{letter-spacing:-.015em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700}
h4{font-size:var(--fs-h4);font-weight:700;line-height:1.25}
p{margin:0 0 var(--sp-4);max-width:70ch;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 5px rgba(0,35,78,.16)}
a:focus-visible{text-underline-offset:4px}
/* Cifras alineadas en columna: los números proporcionales bailan */
.stat__value,.tabla-productos tbody th,time{font-variant-numeric:tabular-nums}

.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;z-index:999;
  background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:var(--radius-sm);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:var(--sp-4)}

/* ---------- Utilidades ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.section{padding-block:var(--section-y)}
.section--alt{background:var(--surface-alt)}
.section--dark{background:var(--surface-dark);color:#c3c8d2}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.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}

.lead{font-size:var(--fs-lead);color:var(--body)}
.section-head{max-width:42rem;margin-bottom:clamp(2rem,1rem + 3vw,3.25rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center p{margin-inline:auto}

/* Regla de acento bajo los títulos de sección */
.rule{width:62px;height:4px;background:var(--green);border-radius:2px;margin-bottom:var(--sp-5)}
.section-head--center .rule{margin-inline:auto}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-title);font-weight:700;font-size:.95rem;line-height:1.2;
  padding:.9rem 1.5rem;border:2px solid transparent;border-radius:var(--radius-xs);
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background var(--t-press) var(--ease-out),
             color var(--t-press) var(--ease-out),
             border-color var(--t-press) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn svg{flex:none;transition:transform var(--t-base) var(--ease-out)}
/* El botón tiene que acusar la pulsación: sin esto la interfaz no parece escuchar */
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover svg{transform:translateX(3px)}
}
.btn--primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn--green{background:var(--green);color:#08240b;border-color:var(--green)}
.btn--green:hover{background:var(--green-deep);border-color:var(--green-deep);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--block{width:100%;justify-content:center}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3)}

/* ---------- Barra lateral de contacto (escritorio) ---------- */
.rail{
  position:fixed;inset-block:0;left:0;width:var(--rail);z-index:60;
  background:#15181f;color:#fff;
  display:none;flex-direction:column;align-items:center;
  padding-block:calc(var(--sp-6) + 62px) var(--sp-5);
}
.rail__item{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.78rem;letter-spacing:.06em;padding:var(--sp-5) 0;
  color:#d6dae2;transition:color var(--t-fast) var(--ease);
  border-block-end:1px solid var(--line-dark);
}
.rail__item:first-of-type{border-block-start:1px solid var(--line-dark)}
.rail__item:hover{color:var(--green)}
.rail__social{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.rail__social a{color:#d6dae2;transition:color var(--t-fast) var(--ease)}
.rail__social a:hover{color:var(--green)}

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky;top:0;z-index:70;background:#fff;
  border-bottom:1px solid var(--line);
}
.site-header__inner{display:flex;align-items:stretch;min-height:80px}
.brand{
  background:var(--navy);display:flex;align-items:center;justify-content:center;
  padding:var(--sp-3) clamp(1rem,2.4vw,1.6rem);flex:none;
}
.brand img{height:clamp(44px,4.6vw,58px);width:auto;object-fit:contain}
.primary-nav{flex:1;display:flex;align-items:center;justify-content:center}
.primary-nav > ul{display:flex;align-items:center;gap:clamp(.45rem,1.3vw,1.4rem)}
.primary-nav a{
  font-family:var(--font-title);font-weight:600;font-size:.93rem;color:var(--ink);white-space:nowrap;
  padding:.5rem .35rem;position:relative;
  transition:color var(--t-fast) var(--ease);
}
.primary-nav a::after{
  content:"";position:absolute;left:.35rem;right:.35rem;bottom:.15rem;height:2px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-base) var(--ease);
}
.primary-nav a:hover::after,.primary-nav a[aria-current="page"]::after{transform:scaleX(1)}
.primary-nav a[aria-current="page"]{color:var(--navy)}

.has-sub{position:relative}
.has-sub > button{
  display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  font-family:var(--font-title);font-weight:600;font-size:.93rem;color:var(--ink);padding:.5rem .35rem;white-space:nowrap;
}
.has-sub > button svg{transition:transform var(--t-base) var(--ease)}
.has-sub[data-open="true"] > button svg{transform:rotate(180deg)}
.subnav{
  position:absolute;top:calc(100% + .4rem);left:50%;min-width:264px;
  background:var(--navy-deep);padding:.5rem;box-shadow:var(--shadow-md);
  transform-origin:top center;
  opacity:0;visibility:hidden;transform:translateX(-50%) scale(.97) translateY(-4px);
  transition:opacity var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out),
             visibility var(--t-fast);
}
.has-sub[data-open="true"] .subnav{opacity:1;visibility:visible;transform:translateX(-50%) scale(1) translateY(0)}
.subnav a{display:block;color:#dfe3ea;font-size:.92rem;padding:.6rem .8rem;border-radius:var(--radius-xs)}
.subnav a::after{display:none}
.subnav a:hover{background:var(--navy);color:#fff}

.header-cta{
  background:var(--navy);color:#fff;display:flex;align-items:center;gap:.6rem;
  padding-inline:clamp(1.1rem,2.6vw,2rem);font-family:var(--font-title);font-weight:700;
  flex:none;transition:background var(--t-fast) var(--ease);
}
.header-cta:hover{background:var(--green);color:#08240b}
.nav-toggle{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:64px;background:none;border:0;border-left:1px solid var(--line);cursor:pointer;
  transition:transform var(--t-press) var(--ease-out);
}
.nav-toggle:active{transform:scale(.94)}
.nav-toggle__bars{display:block;width:24px;height:2px;background:var(--ink);position:relative;transition:background var(--t-fast)}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:"";position:absolute;left:0;width:24px;height:2px;background:var(--ink);
  transition:transform var(--t-base) var(--ease);
}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)}

/* Panel móvil */
.mobile-nav{
  position:fixed;inset:80px 0 0;z-index:65;background:#15181f;color:#fff;
  padding:var(--sp-6) clamp(1.15rem,5vw,2rem) var(--sp-8);
  overflow-y:auto;
  transform:translateX(100%);visibility:hidden;
  transition:transform var(--t-panel) var(--ease-drawer),visibility var(--t-panel);
}
.mobile-nav[data-open="true"]{transform:translateX(0);visibility:visible}
.mobile-nav a{display:block;font-family:var(--font-title);font-weight:700;font-size:1.2rem;
  padding:.85rem 0;border-bottom:1px solid var(--line-dark);color:#fff}
.mobile-nav .sub a{font-size:1rem;font-weight:500;color:#c3c8d2;padding-left:var(--sp-4)}
.mobile-nav__contact{margin-top:var(--sp-6);display:grid;gap:var(--sp-3);font-size:.95rem;color:#c3c8d2}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;color:#fff;display:flex;align-items:center;
  min-height:clamp(520px,76dvh,720px);padding-block:clamp(2.5rem,5vw,5rem)}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(6,20,48,.92) 0%,rgba(6,20,48,.78) 45%,rgba(6,20,48,.42) 100%);
}
.hero h1{color:#fff;max-width:15ch}
.hero__content{max-width:40rem}
.hero p{color:#dbe2ee;font-size:var(--fs-lead);max-width:42ch}
.hero .btn-row{margin-top:var(--sp-6)}
/* Banda de respaldo. Vive BAJO el hero, no dentro: el hero es la propuesta de
   valor y una acción, no una lista de sellos. */
.respaldo{background:var(--navy);color:#cfdaec}
.respaldo__lista{display:grid;gap:0}
@media (min-width:760px){
  .respaldo__lista{grid-template-columns:repeat(3,1fr)}
  .respaldo__item + .respaldo__item{border-left:1px solid rgba(255,255,255,.14)}
}
.respaldo__item{display:flex;align-items:center;gap:var(--sp-4);
  padding:1.35rem clamp(1rem,2vw,1.75rem);font-size:.97rem}
@media (max-width:759px){
  .respaldo__item{padding-inline:0}
  .respaldo__item + .respaldo__item{border-top:1px solid rgba(255,255,255,.14)}
}
.respaldo__item svg{color:var(--green);flex:none}
.respaldo__item strong{color:#fff;font-family:var(--font-title);font-weight:700}

/* ---------- Pilares ---------- */
/* Tres garantías de servicio. Una fila separada por filetes, no tres tarjetas
   iguales: la tarjeta es el contenedor perezoso y aquí no aporta jerarquía. */
.pillars{display:grid;gap:0}
@media (min-width:860px){
  .pillars{grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .pillar + .pillar{border-left:1px solid var(--line)}
}
.pillar{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4) var(--sp-5);align-items:start;
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2rem)}
@media (max-width:859px){
  .pillar{padding-inline:0;border-top:1px solid var(--line)}
  .pillar:last-child{border-bottom:1px solid var(--line)}
}
.pillar__icon{
  grid-row:span 2;isolation:isolate;position:relative;
  width:clamp(96px,9vw,118px);aspect-ratio:1.04/1;
  display:grid;place-items:center;
}
.pillar__icon::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--surface-alt);
  clip-path:polygon(0 0,0 100%,100% 100%);
  transition:transform 340ms var(--ease-out);
}
.section--alt .pillar__icon::after{background:#fff}
.pillar__icon img{width:68%;height:auto}
@media (hover:hover) and (pointer:fine){
  .pillar:hover .pillar__icon::after{transform:rotate(180deg)}
}
.pillar h3{font-size:clamp(1.12rem,1rem + .5vw,1.35rem);margin:0;align-self:center}
.pillar p{margin:0;grid-column:2;font-size:.97rem}

/* ---------- Nosotros ---------- */
.about{display:grid;gap:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.75rem);
  grid-template-columns:minmax(0,1fr)}
.about figure{margin:0}
.about__foto-grande img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about__foto-chica img{width:100%;aspect-ratio:1/1;object-fit:cover}
.about__titulo h2{margin-bottom:var(--sp-4)}
.about__titulo .rule{margin-bottom:0}

@media (max-width:1039px){
  .about__titulo{grid-row:1}
  .about__foto-grande{grid-row:2}
  .about__foto-chica{grid-row:3}
  .about__texto{grid-row:4}
  .about .stats{grid-row:5}
  .about__foto-chica img{aspect-ratio:4/3}
}
@media (min-width:1040px){
  .about{grid-template-columns:minmax(0,.95fr) 232px minmax(0,1.1fr);align-items:start}
  .about__foto-grande{grid-column:1;grid-row:1 / span 2;align-self:center}
  .about__titulo{grid-column:2 / -1;grid-row:1}
  .about__foto-chica{grid-column:2;grid-row:2}
  .about__texto{grid-column:3;grid-row:2}
  .about .stats{grid-column:1 / -1;grid-row:3;margin-top:var(--sp-5)}
}

.stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5);
  margin-top:var(--sp-6);padding-top:var(--sp-6);border-top:1px solid var(--line);
}
@media (min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat__value{display:flex;align-items:baseline;gap:.04em;
  font-family:var(--font-title);font-weight:800;font-size:var(--fs-stat);
  color:var(--navy);line-height:1;letter-spacing:-.03em}
.stat__plus{color:var(--navy)}
.stat__label{display:block;font-size:.86rem;color:var(--muted);margin-top:var(--sp-2);line-height:1.4}

/* ---------- Diferenciadores (pestañas) ---------- */
.edge{position:relative;background:var(--surface-dark);isolation:isolate;overflow:hidden}
.edge__media{position:absolute;inset:0;z-index:-2}
.edge__media img{width:100%;height:100%;object-fit:cover}
.edge__wrap{display:grid;gap:var(--sp-5);grid-template-columns:auto minmax(0,1fr);
  align-items:start;padding-block:clamp(3rem,6vw,5.5rem)}
.edge__nums{display:flex;flex-direction:column;gap:var(--sp-5);
  border-right:3px solid rgba(2,18,6,.62);padding-right:var(--sp-5);
  align-self:stretch;min-height:clamp(240px,26vw,340px)}
.edge__num{
  background:none;border:0;cursor:pointer;font-family:var(--font-title);font-weight:700;
  font-size:1.05rem;color:rgba(255,255,255,.72);padding:.2rem 0;
  transition:color var(--t-press) var(--ease-out);
}
.edge__num:active{transform:scale(.94)}
.edge__num[aria-selected="true"]{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.edge__panel{max-width:31rem}
.edge__panel h2{font-size:clamp(2.1rem,1.5rem + 2.4vw,3.6rem);line-height:1.04}
.edge__panel[hidden]{display:none}
.edge__panel:not([hidden]){animation:panel-entra 420ms var(--ease-out) both}
@keyframes panel-entra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .edge__panel:not([hidden]){animation:none}
}
.edge__panel h2{color:#fff;max-width:12ch}
.edge__panel p{color:#e2e7f0}
.edge__accent{
  position:absolute;inset:0;z-index:-1;
  background:var(--green);opacity:.95;
  clip-path:polygon(6.3% 0,36.5% 0,55.5% 100%,6.3% 100%);
}
@media (max-width:900px){
  .edge__accent{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:.93}
}
.edge__panel h2,.edge__panel p,.edge__num{position:relative}

/* ---------- Servicios ---------- */
/* Bento de servicios. Dos celdas llevan fotografía de obra y el resto texto;
   el recuento de celdas cuadra exacto en los tres anchos, sin huecos. */
.services{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:660px){
  .services{grid-template-columns:repeat(2,1fr)}
  .service:first-child,.service:last-child{grid-column:span 2}
}
@media (min-width:1060px){
  .services{grid-template-columns:repeat(3,1fr)}
  .service:first-child{grid-column:span 2;grid-row:span 2}
  .service:last-child{grid-column:auto}
}
.service{
  position:relative;background:var(--surface);
  padding:clamp(1.5rem,2.8vw,2.1rem);
  display:flex;flex-direction:column;gap:var(--sp-3);
  transition:background var(--t-base) var(--ease-out);
}
.service__icon{display:block;margin-bottom:var(--sp-2)}
.service__icon img{width:52px;height:52px;object-fit:contain}
.service h3{font-size:var(--fs-h4);margin:0}
.service h3 a{color:inherit}
.service h3 a::after{content:"";position:absolute;inset:0}
.service p{margin:0;font-size:.97rem}
.service__link{
  margin-top:auto;padding-top:var(--sp-4);display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-title);font-weight:700;font-size:.9rem;color:var(--navy);
}
.service__link::after{
  content:"";width:30px;height:2px;background:currentColor;
  transform:scaleX(.6);transform-origin:left center;
  transition:transform var(--t-base) var(--ease-out);
}

/* Las dos celdas con foto: el texto va sobre un velo navy legible */
.service--foto{color:#dbe3f0;isolation:isolate;min-height:clamp(260px,26vw,340px);justify-content:flex-end}
.service--foto picture{position:absolute;inset:0;z-index:-2}
.service--foto img{width:100%;height:100%;object-fit:cover}
.service--foto::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(0,24,51,.93) 0%,rgba(0,35,78,.72) 55%,rgba(0,35,78,.38) 100%);
}
.service--foto h3{color:#fff}
.service--foto .service__link{color:var(--green)}
.service--foto .service__icon{display:none}

@media (hover:hover) and (pointer:fine){
  .service:hover .service__link::after{transform:scaleX(1)}
  .service--foto:hover img{transform:scale(1.04)}
  .service--foto img{transition:transform 600ms var(--ease-out)}
}

/* ---------- Franja TPO ---------- */
.tpo{background:var(--navy);color:#e4ebf7;position:relative;overflow:hidden}
.tpo__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:920px){.tpo__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.tpo h2{color:#fff}
.tpo__list{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.tpo__list li{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem}
.tpo__list svg{color:var(--green);flex:none;margin-top:.28rem}
.tpo__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-xs)}

/* ---------- Proyectos ---------- */
.projects{display:grid;gap:var(--sp-5)}
@media (min-width:680px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.projects{grid-template-columns:repeat(3,1fr)}}
.project{position:relative;overflow:hidden;display:block;background:var(--ink)}
.project img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 520ms var(--ease),opacity var(--t-base) var(--ease)}
.project:hover img{transform:scale(1.05);opacity:.85}
.project__caption{
  position:absolute;inset-inline:0;bottom:0;padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:linear-gradient(transparent,rgba(6,20,48,.88) 42%);
}
.project__caption h3{color:#fff;font-size:1.15rem;margin:0 0 .25rem}
.project__caption span{font-size:.88rem;color:#c9d3e6;display:inline-flex;align-items:center;gap:.4rem}

/* ---------- Contacto ---------- */
.contact{position:relative;isolation:isolate;color:#fff}
.contact__media{position:absolute;inset:0;z-index:-2}
.contact__media img{width:100%;height:100%;object-fit:cover}
.contact::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,42,107,.9)}
.contact__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:940px){.contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,480px)}}
.contact h2{color:#fff}
.contact p{color:#dbe2ee}
.contact__direct{display:grid;gap:var(--sp-4);margin-top:var(--sp-6)}
.contact__direct a{display:flex;gap:var(--sp-4);align-items:center;color:#fff}
.contact__direct svg{color:var(--green);flex:none}
.contact__direct strong{display:block;font-family:var(--font-title);font-size:1.05rem}
.contact__direct small{color:#b9c6de;font-size:.85rem}

.form-card{background:#0c0f14;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--radius-xs)}
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:.85rem;font-weight:600;color:#c9d1de;margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;background:transparent;color:#fff;
  border:1px solid #343a47;border-radius:var(--radius-xs);
  padding:.85rem 1rem;
  transition:border-color var(--t-press) var(--ease-out),background var(--t-press) var(--ease-out),
             box-shadow var(--t-press) var(--ease-out);
}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9d1de' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.field select option{background:#0c0f14}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--green);background:rgba(106,191,63,.06);
  box-shadow:0 0 0 3px rgba(106,191,63,.18);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#7a8294}
.field--error input,.field--error select,.field--error textarea{border-color:#ff6b6b}
.field__error{display:none;color:#ff9b9b;font-size:.82rem;margin-top:.35rem}
.field--error .field__error{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:var(--sp-4);font-size:.92rem;display:none}
.form-status[data-state="ok"]{display:block;color:#9be27a}
.form-status[data-state="error"]{display:block;color:#ff9b9b}

/* ---------- FAQ ---------- */
.faq-grid{max-width:46rem;margin-inline:auto}
.faq-grid > figure{display:none}
.faq{border-bottom:1px solid var(--line)}
.faq__q:active{transform:scale(.995)}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  font-family:var(--font-title);font-weight:700;font-size:1.05rem;color:var(--ink);
  padding:1.15rem .2rem;transition:color var(--t-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.faq__q:hover{color:var(--navy)}}
.faq__q svg{flex:none;color:var(--navy);transition:transform var(--t-fast) var(--ease-out)}
.faq[data-open="true"] .faq__q svg{transform:rotate(45deg)}
.faq[data-open="true"] .faq__q{color:var(--navy)}
.faq__a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-fast) var(--ease-out)}
.faq[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden;min-height:0}
.faq__a p{padding:0 .2rem 1.2rem;margin:0;font-size:.98rem;max-width:68ch}

/* ---------- Marcas ---------- */
.brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem,5vw,4rem)}
.brands img{max-height:62px;width:auto;opacity:.88;
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.brands img:hover{opacity:1;transform:scale(1.04)}

/* ---------- Pie ---------- */
.site-footer{background:#0c0f14;color:#a8b0bd;padding-block:clamp(3rem,5vw,4.5rem) 0}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.footer__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.footer__brand img{height:64px;width:auto;margin-bottom:var(--sp-4)}
.footer__brand p{font-size:.94rem;max-width:44ch}
.site-footer h4{color:#fff;font-size:1.05rem;margin-bottom:var(--sp-4)}
.footer__links{display:grid;gap:.7rem}
.footer__links a{font-size:.94rem;transition:color var(--t-fast) var(--ease)}
.footer__links a:hover{color:var(--green)}
.footer__contact{display:grid;gap:1px;background:var(--line-dark);margin-top:clamp(2.5rem,4vw,3.5rem)}
@media (min-width:760px){.footer__contact{grid-template-columns:repeat(3,1fr) minmax(0,.9fr)}}
.footer__contact > *{background:#fff;color:var(--ink);padding:1.35rem 1.5rem;
  display:flex;align-items:center;gap:var(--sp-4)}
.footer__contact svg{flex:none;color:var(--navy)}
.footer__contact strong{display:block;font-family:var(--font-title);font-size:.98rem}
.footer__contact span{font-size:.92rem;color:var(--body)}
.footer__contact .footer__wa{background:var(--navy);color:#fff;justify-content:center;
  font-family:var(--font-title);font-weight:700;text-align:center;
  transition:background var(--t-fast) var(--ease)}
.footer__contact .footer__wa:hover{background:var(--green);color:#08240b}
.footer__legal{border-top:1px solid var(--line-dark);margin-top:clamp(2rem,3vw,2.5rem);
  padding-block:1.4rem;font-size:.85rem;text-align:center}

/* ---------- WhatsApp flotante y volver arriba ---------- */
.fab{
  position:fixed;right:clamp(1rem,3vw,1.75rem);z-index:80;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--shadow-md);border:0;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
@media (hover:hover) and (pointer:fine){.fab:hover{transform:translateY(-3px)}}
.fab:active{transform:scale(.94)}
.fab--wa{bottom:clamp(1rem,3vw,1.75rem);background:#25d366;color:#fff}
.fab--top{bottom:calc(clamp(1rem,3vw,1.75rem) + 66px);background:var(--navy);color:#fff;
  opacity:0;visibility:hidden}
.fab--top[data-visible="true"]{opacity:1;visibility:visible}

/* ---------- Revelado al hacer scroll ---------- */
/* Entrada al hacer scroll. Se reserva a las dos piezas donde la secuencia
   comunica algo (la rejilla de servicios y la galería de proyectos); repetir la
   misma entrada en cada sección deja de ser diseño y pasa a ser ruido.
   El contenido nunca depende de JavaScript para ser visible. */
.reveal > *{opacity:0;transform:translateY(16px);
  transition:opacity 560ms var(--ease-out),transform 560ms var(--ease-out)}
.reveal > *:nth-child(2){transition-delay:60ms}
.reveal > *:nth-child(3){transition-delay:120ms}
.reveal > *:nth-child(4){transition-delay:180ms}
.reveal > *:nth-child(5){transition-delay:240ms}
.reveal > *:nth-child(6){transition-delay:300ms}
.reveal > *:nth-child(n+7){transition-delay:340ms}
.reveal.is-visible > *{opacity:1;transform:none}
.no-js .reveal > *{opacity:1;transform:none}

/* ---------- Puntos de quiebre de la cabecera ---------- */
@media (max-width:1259px){
  .primary-nav,.header-cta{display:none}
}
@media (min-width:1260px){
  .nav-toggle{display:none}
  .mobile-nav{display:none}
}
@media (min-width:1400px){
  .rail{display:flex}
  body{padding-left:var(--rail)}
  .site-header{margin-left:0}
}

/* ---------- Movimiento reducido ---------- */
/* Movimiento reducido: se eliminan desplazamientos, no las transiciones de
   color y opacidad que ayudan a entender un cambio de estado. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
  .reveal > *{opacity:1;transform:none;transition:none}
  .marca-agua__logo,.marca-agua__brillo,.marca-agua__sombra,
  .marca-agua__gota,.marca-agua__perla,.marca-agua__onda,.rain{animation:none}
  .marca-agua__gota,.marca-agua__perla,.marca-agua__salpica,.marca-agua__onda{display:none}
  .marca-agua__brillo{opacity:.25}
  .btn:active{transform:none}
}

/* Etiqueta de grupo dentro del menú móvil */
.mobile-nav__label{display:block;font-family:var(--font-title);font-weight:700;font-size:1.2rem;
  color:#fff;padding:.85rem 0;border-bottom:1px solid var(--line-dark)}

/* ==========================================================================
   LA MARCA REPELIENDO EL AGUA
   Único momento autoral de movimiento del sitio. El logotipo completo flota
   sobre la cubierta, la lluvia cae sobre él, impacta en la punta del escudo y
   se desvía por los dos costados; sobre la palabra quedan perlas que ruedan y
   caen, y cada cierto tiempo una lámina de agua barre toda la marca.
   Se apaga entero con prefers-reduced-motion.
   ========================================================================== */

.rain{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero > .container{position:relative;z-index:1}
.rain span{
  position:absolute;top:-18%;left:var(--x);
  width:1.6px;height:var(--h);
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(214,236,255,var(--op)));
  transform:translate3d(0,0,0) rotate(9deg);
  animation:caer var(--dur) linear var(--delay) infinite;
  will-change:transform;
}
@keyframes caer{
  from{transform:translate3d(0,-20vh,0) rotate(9deg)}
  to{transform:translate3d(-3vw,125vh,0) rotate(9deg)}
}

.hero__layout{display:grid;gap:var(--sp-7);align-items:center}
@media (min-width:1180px){
  .hero__layout{grid-template-columns:minmax(0,1fr) 462px}
}
@media (min-width:1440px){
  .hero__layout{grid-template-columns:minmax(0,1fr) 532px}
}

.marca-agua{
  display:none;position:relative;width:380px;height:340px;justify-self:center;
  transform:scale(var(--escala,1));transform-origin:center center;
}
@media (min-width:1180px){.marca-agua{display:block;--escala:1.22}}
@media (min-width:1440px){.marca-agua{--escala:1.4}}

.marca-agua__logo{
  position:absolute;left:20px;top:80px;
  width:340px;height:166px;
  filter:drop-shadow(0 16px 30px rgba(0,10,26,.6));
  animation:flotar 7s var(--ease-in-out) infinite;
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Sombra proyectada contra la cubierta */
.marca-agua__sombra{
  position:absolute;left:50%;top:286px;translate:-50% 0;
  width:250px;height:22px;border-radius:50%;
  background:rgba(0,10,26,.5);filter:blur(14px);
  animation:sombra 7s var(--ease-in-out) infinite;
}
@keyframes sombra{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.86);opacity:.32}}

/* Lámina de agua barriendo la marca. Se recorta con la silueta del propio
   logotipo, así que el brillo solo existe sobre la marca y nunca fuera. */
.marca-agua__brillo{
  position:absolute;left:20px;top:80px;width:340px;height:166px;
  -webkit-mask:url('../img/logo-waterway-blanco.png') no-repeat center/contain;
  mask:url('../img/logo-waterway-blanco.png') no-repeat center/contain;
  background:linear-gradient(104deg,
    transparent 28%,rgba(120,205,255,.18) 38%,rgba(168,228,255,.72) 47%,
    rgba(255,255,255,.55) 51%,rgba(120,205,255,.18) 60%,transparent 70%);
  background-size:260% 100%;
  animation:flotar 7s var(--ease-in-out) infinite,
            lamina 7s var(--ease-in-out) 1.2s infinite;
  pointer-events:none;
}
@keyframes lamina{
  0%,62%{background-position:140% 0}
  100%{background-position:-60% 0}
}

/* Gota genérica: lágrima invertida con un reflejo alto */
.marca-agua__gota,.marca-agua__perla{
  position:absolute;left:0;top:0;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(circle at 34% 26%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.5) 26%,transparent 42%),
    linear-gradient(160deg,rgba(236,248,255,.95),rgba(150,205,250,.78));
  box-shadow:0 0 7px rgba(200,232,255,.75);
  opacity:0;
  offset-rotate:0deg;
  animation-timing-function:cubic-bezier(.4,0,.72,1);
  animation-iteration-count:infinite;
  will-change:offset-distance,opacity,transform;
}

/* Las que caen del cielo, impactan en la punta del escudo y se desvían */
.marca-agua__gota{
  width:10px;height:13px;margin:-6.5px 0 0 -5px;
  animation-name:desviar;
  animation-duration:var(--dur,2.9s);
  animation-delay:var(--delay,0s);
}
.marca-agua__gota--izq{
  offset-path:path("M92,-50 L92,78 C76,100 50,124 42,164 C34,206 22,268 16,360");
}
.marca-agua__gota--der{
  offset-path:path("M92,-50 L92,78 C108,104 152,120 232,128 C304,135 352,142 366,186 C374,226 376,292 377,360");
}
@keyframes desviar{
  0%   {offset-distance:0%;   opacity:0;   transform:scale(.5)}
  7%   {opacity:1;            transform:scale(1)}
  24%  {offset-distance:24%;  transform:scale(1)}
  28%  {offset-distance:28%;  transform:scale(1.5,.55)}   /* impacto */
  34%  {transform:scale(.82,1.2)}
  100% {offset-distance:100%; opacity:0;   transform:scale(.62)}
}

/* Las que quedan sobre la palabra y ruedan hasta caer */
.marca-agua__perla{
  width:7px;height:9px;margin:-4.5px 0 0 -3.5px;
  animation-name:rodar;
  animation-duration:var(--dur,4.2s);
  animation-delay:var(--delay,0s);
}
.marca-agua__perla--1{offset-path:path("M206,198 C207,208 206,216 206,226 C205,256 204,302 204,360")}
.marca-agua__perla--2{offset-path:path("M268,202 C269,212 268,220 268,230 C267,260 266,304 266,360")}
.marca-agua__perla--3{offset-path:path("M322,194 C323,204 322,212 322,222 C321,252 320,300 320,360")}
@keyframes rodar{
  0%   {offset-distance:0%;  opacity:0;  transform:scale(.4)}
  10%  {opacity:.95;         transform:scale(1)}
  52%  {offset-distance:26%; opacity:.95}     /* se queda un momento sobre la marca */
  72%  {offset-distance:52%}
  100% {offset-distance:100%;opacity:0;  transform:scale(.7)}
}

/* Salpicadura: dos partículas que saltan al romper la gota contra el escudo */
.marca-agua__salpica{
  position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:rgba(236,250,255,.95);
  box-shadow:0 0 5px rgba(190,232,255,.8);
  opacity:0;offset-rotate:0deg;
  animation:salpicar var(--dur,2.9s) cubic-bezier(.17,.67,.5,1) var(--delay,0s) infinite;
}
.marca-agua__salpica--a{offset-path:path("M92,80 C70,62 50,68 40,100")}
.marca-agua__salpica--b{offset-path:path("M92,80 C116,62 140,70 150,104")}
@keyframes salpicar{
  0%,26%{offset-distance:0%;opacity:0;transform:scale(.3)}
  30%  {opacity:1;transform:scale(1)}
  52%  {offset-distance:100%;opacity:0;transform:scale(.4)}
  100% {offset-distance:100%;opacity:0;transform:scale(.4)}
}

/* Onda expansiva en el punto de impacto */
.marca-agua__onda{
  position:absolute;left:92px;top:80px;
  width:16px;height:9px;margin:-4.5px 0 0 -8px;
  border:2px solid rgba(222,242,255,.8);border-radius:50%;
  opacity:0;
  animation:onda 2.9s ease-out var(--delay,0s) infinite;
}
@keyframes onda{
  0%   {transform:scale(.25);opacity:0}
  10%  {opacity:.9}
  100% {transform:scale(7);opacity:0}
}

/* Sin soporte de trayectorias CSS se ocultan las gotas; el resto sigue vivo */
@supports not (offset-path: path("M0,0 L1,1")){
  .marca-agua__gota,.marca-agua__perla,.marca-agua__salpica{display:none}
}

/* ==========================================================================
   SECCIÓN ORIENTAL YUHONG
   ========================================================================== */
.yuhong__intro{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center;
  margin-bottom:clamp(2.5rem,4vw,3.5rem)}
@media (min-width:900px){.yuhong__intro{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr)}}

.yuhong__logo{margin:0;text-align:center}
.yuhong__logo img{margin:0 auto;height:clamp(66px,7vw,92px);width:auto}
.yuhong__logo figcaption{margin-top:var(--sp-4);font-size:.86rem;color:var(--muted);
  letter-spacing:.04em}

/* Familias de producto: lista dividida por filetes, con el icono en línea.
   No son tarjetas, son entradas de un mismo catálogo. */
.yuhong__grid{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:720px){.yuhong__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.yuhong__grid{grid-template-columns:repeat(4,1fr)}}
.yuhong__card{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem var(--sp-4);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--line);
}
@media (min-width:720px){
  .yuhong__card{padding:var(--sp-5) var(--sp-5) var(--sp-5) 0;border-bottom:0}
  .yuhong__card + .yuhong__card{border-left:1px solid var(--line);padding-left:var(--sp-5)}
}
@media (min-width:720px) and (max-width:1099px){
  .yuhong__card:nth-child(2n+1){border-left:0;padding-left:0}
  .yuhong__card:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.yuhong__icon{grid-row:span 2;color:var(--navy);align-self:start;margin-top:.15rem}
.yuhong__card h3{font-size:1.02rem;margin:0;align-self:center}
.yuhong__card p{margin:0;grid-column:2;font-size:.94rem}

.yuhong__nota{
  display:grid;gap:var(--sp-4);align-items:center;
  margin-top:clamp(2.5rem,4vw,3.5rem);padding:clamp(1.5rem,3vw,2rem);
  background:var(--surface-alt);border-top:1px solid var(--line);
}
@media (min-width:860px){
  .yuhong__nota{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-5)}
}
.yuhong__nota-icono{color:var(--navy);display:block}
.yuhong__nota p{margin:0;font-size:1rem}

/* ==========================================================================
   AJUSTES FINALES
   ========================================================================== */

/* La tarjeta de servicio entera es clicable a través del enlace del título */
.service{position:relative}
.service h3 a{color:inherit}
.service h3 a::after{content:"";position:absolute;inset:0}
.service:hover h3 a{color:var(--navy)}

.form-card h3{color:#fff;margin-bottom:var(--sp-5);font-size:1.25rem}

/* Los logotipos de marca llegan en tamaños distintos: igualar por altura */
.brands li{display:flex;align-items:center}
.brands img{max-height:74px}

/* Apagado total del movimiento decorativo */
@media (prefers-reduced-motion:reduce){
  .rain{display:none}
}

/* En pantallas pequeñas la lluvia se aligera para no gastar batería */
@media (max-width:640px){
  .rain span:nth-child(2n){display:none}
}


/* ==========================================================================
   CABECERA DE PÁGINAS INTERIORES
   ========================================================================== */
.page-hero{
  position:relative;isolation:isolate;color:#fff;text-align:center;
  background:var(--navy);
  padding-block:clamp(3.5rem,7vw,6rem) clamp(6rem,11vw,9rem);
  clip-path:polygon(50% 0,100% 0,100% 90%,50% 100%,0 90%,0 0);
}
.page-hero__media{
  position:absolute;inset:0;z-index:-2;
  clip-path:polygon(50% 0,100% 0,100% 87.5%,50% 97.5%,0 87.5%,0 0);
}
.page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(0,35,78,.78);
  clip-path:polygon(50% 0,100% 0,100% 87.5%,50% 97.5%,0 87.5%,0 0);
}
@media (min-width:760px){
  .page-hero{clip-path:polygon(50% 0,100% 0,100% 85%,50% 100%,0 85%,0 0)}
  .page-hero__media,.page-hero::after{clip-path:polygon(50% 0,100% 0,100% 82.5%,50% 97.5%,0 82.5%,0 0)}
}
@media (min-width:1100px){
  .page-hero{clip-path:polygon(50% 0,100% 0,100% 75%,50% 100%,0 75%,0 0)}
  .page-hero__media,.page-hero::after{clip-path:polygon(50% 0,100% 0,100% 72.5%,50% 97.5%,0 72.5%,0 0)}
}
.page-hero h1{color:#fff;margin:0}
.page-hero__intro{margin:var(--sp-4) auto 0;max-width:52ch;color:#d9e2f0;font-size:var(--fs-lead)}

.migas{margin-bottom:var(--sp-5)}
.migas ol{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;font-size:.88rem}
.migas li{color:#c3d0e4}
.migas li + li::before{content:"/";margin-right:.5rem;color:#7d93b8}
.migas a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.migas a:hover{color:var(--green)}
.migas [aria-current="page"]{color:#c3d0e4}

/* ==========================================================================
   CIFRAS EN VERSIÓN GRANDE (página Nosotros)
   ========================================================================== */
.stats--grandes{margin:0;padding:0;border:0}
.stats--grandes .stat__value{font-size:clamp(3rem,2rem + 4.5vw,5.2rem)}
/* Número calado, signo macizo: igual que en el sitio actual */
.stats--grandes .stat__num{-webkit-text-stroke:2px var(--navy);color:transparent}
.stats--grandes .stat__plus{
  -webkit-text-stroke:0;color:var(--navy);
  font-size:.55em;align-self:center;margin-left:.06em;
}
.stats--grandes .stat__label{
  font-family:var(--font-title);font-weight:700;color:var(--ink);font-size:1rem;
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);
}

/* ==========================================================================
   PROCESO DE TRABAJO
   ========================================================================== */
.proceso{display:grid;gap:var(--sp-5);counter-reset:paso}
@media (min-width:640px){.proceso{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.proceso{grid-template-columns:repeat(4,1fr)}}
.proceso__paso{
  position:relative;padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:var(--surface-alt);
  border-top:3px solid var(--navy);
  transition:transform var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.proceso__paso:hover{transform:translateY(-4px);border-top-color:var(--green)}
.proceso__num{
  display:block;font-family:var(--font-title);font-weight:800;font-size:2.4rem;
  line-height:1;color:var(--green);margin-bottom:var(--sp-3);
}
.proceso__paso h3{font-size:1.1rem;margin-bottom:var(--sp-2)}
.proceso__paso p{margin:0;font-size:.96rem}

/* ==========================================================================
   MARCAS EN DOS COLUMNAS + LLAMADA FINAL
   ========================================================================== */
.marcas-split{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){.marcas-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.brands--grid{display:grid;justify-content:stretch;gap:var(--sp-5)}
@media (min-width:520px){.brands--grid{grid-template-columns:repeat(3,1fr)}}
.brands--grid li{justify-content:center;padding:var(--sp-5) var(--sp-4);
  background:var(--surface-alt);border:1px solid var(--line)}
.brands--grid img{max-height:56px}

.cta-final{background:var(--navy);color:#dce5f5;padding-block:clamp(2.5rem,5vw,4rem)}
.cta-final__inner{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:900px){.cta-final__inner{grid-template-columns:minmax(0,1fr) auto}}
.cta-final h2{color:#fff;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);margin-bottom:var(--sp-2)}
.cta-final p{margin:0;color:#c2d0e8}

/* ==========================================================================
   PÁGINA DE CONTACTO
   ========================================================================== */
.contacto-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:920px){.contacto-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

.datos{display:grid;gap:var(--sp-5)}
.dato{display:flex;gap:var(--sp-4);align-items:flex-start}
.dato__icono{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:#fff;
}
.dato h3{font-size:1.02rem;margin:0 0 .2rem}
.dato p{margin:0;font-size:.98rem}
.dato a{color:var(--navy);font-weight:500}
.dato a:hover{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.dato small{color:var(--muted);font-size:.86rem}

/* Variante clara del formulario, para fondo blanco */
.form-card--claro{background:var(--surface-alt);border:1px solid var(--line)}
.form-card--claro h3{color:var(--ink)}
.form-card--claro .field label{color:var(--body)}
.form-card--claro .field input,
.form-card--claro .field select,
.form-card--claro .field textarea{
  background:#fff;color:var(--ink);border-color:var(--line);
}
.form-card--claro .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23464c58' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.form-card--claro .field select option{background:#fff}
.form-card--claro .field input:focus,
.form-card--claro .field select:focus,
.form-card--claro .field textarea:focus{
  border-color:var(--green-deep);background:#fff;box-shadow:0 0 0 3px rgba(78,154,40,.18)}
.form-card--claro .field input::placeholder,
.form-card--claro .field textarea::placeholder{color:#9aa2b1}
.form-card--claro .form-status[data-state="ok"]{color:var(--green-deep)}
.form-card--claro .form-status[data-state="error"]{color:#c53030}
.req{color:#c53030;margin-left:.15rem}

.mapa{line-height:0;border-top:4px solid var(--green)}
.mapa iframe{display:block;width:100%;filter:grayscale(.25)}

/* ==========================================================================
   HUB DE SERVICIOS
   ========================================================================== */
.servicios-lista{display:grid;gap:var(--sp-6)}
@media (min-width:660px){.servicios-lista{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.servicios-lista{grid-template-columns:repeat(3,1fr)}}
.servicio-card{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);position:relative;
  transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.servicio-card:hover{border-color:var(--navy);transform:translateY(-4px)}
.servicio-card__foto{display:block;overflow:hidden}
.servicio-card__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 520ms var(--ease)}
.servicio-card:hover .servicio-card__foto img{transform:scale(1.05)}
.servicio-card__cuerpo{padding:clamp(1.3rem,2.5vw,1.8rem);display:flex;flex-direction:column;
  gap:var(--sp-2);flex:1}
.servicio-card__icono{margin-top:-3.4rem;margin-bottom:var(--sp-2);
  width:70px;height:70px;background:#fff;display:grid;place-items:center;
  border:1px solid var(--line);position:relative}
.servicio-card__icono img{width:48px;height:48px;object-fit:contain}
.servicio-card h3{font-size:1.12rem;margin:0}
.servicio-card h3 a{color:inherit}
.servicio-card h3 a::after{content:"";position:absolute;inset:0}
.servicio-card:hover h3 a{color:var(--navy)}
.servicio-card p{margin:0;font-size:.95rem}
.servicio-card .service__link{margin-top:auto;padding-top:var(--sp-4)}

.servicios-mini{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:640px){.servicios-mini{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.servicios-mini{grid-template-columns:repeat(3,1fr)}}
.servicios-mini a{display:flex;align-items:center;gap:var(--sp-4);background:#fff;
  padding:1.1rem 1.3rem;font-family:var(--font-title);font-weight:600;font-size:.97rem;
  color:var(--ink);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.servicios-mini a span{flex:1}
.servicios-mini a > img{width:34px;height:34px;object-fit:contain;flex:none}
.servicios-mini a > svg:last-child{color:var(--green);flex:none;
  transition:transform var(--t-base) var(--ease)}
.servicios-mini a:hover{background:var(--navy);color:#fff}
.servicios-mini a:hover > img{filter:brightness(0) invert(1)}
.servicios-mini a:hover > svg:last-child{transform:translateX(4px)}

/* ==========================================================================
   FICHA DE SERVICIO
   ========================================================================== */
.ficha{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (min-width:960px){.ficha{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.ficha__cuerpo h3{margin-top:var(--sp-7)}
.ficha__cuerpo > h2 + .rule + .lead{font-size:var(--fs-lead)}

.lista-check{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.lista-check li{display:flex;gap:.8rem;align-items:flex-start}
.lista-check svg{color:var(--green);flex:none;margin-top:.28rem}
.lista-check span{flex:1}

.ficha__lado{display:grid;gap:var(--sp-5)}
@media (min-width:960px){.ficha__lado{position:sticky;top:92px}}
.ficha__foto{margin:0}
.ficha__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}

.ficha__cta{background:var(--navy);color:#d8e2f3;padding:clamp(1.5rem,3vw,2rem);text-align:center}
.ficha__cta-icono{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.1);color:var(--green);margin-bottom:var(--sp-3)}
.ficha__cta h3{color:#fff;margin:0 0 var(--sp-2);font-size:1.2rem}
.ficha__cta p{margin:0 0 var(--sp-5);font-size:.95rem;color:#c3d0e8}
.ficha__cta .btn{margin-bottom:var(--sp-3)}
.ficha__cta .btn--outline{color:#fff;border-color:rgba(255,255,255,.5)}
.ficha__cta .btn--outline:hover{background:#fff;color:var(--navy);border-color:#fff}
.ficha__cta-pie{display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin:0;font-size:.86rem;color:#9fb3d6}
.ficha__cta-pie svg{color:var(--green)}

.ficha__otros{border:1px solid var(--line);padding:clamp(1.3rem,2.5vw,1.7rem)}
.ficha__otros h3{margin:0 0 var(--sp-4);font-size:1.05rem}
.ficha__otros ul{display:grid;gap:.2rem}
.ficha__otros a{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;
  font-size:.95rem;color:var(--body);border-bottom:1px solid var(--line);
  transition:color var(--t-fast) var(--ease)}
.ficha__otros li:last-child a{border-bottom:0}
.ficha__otros svg{color:var(--green);flex:none;margin-top:.28rem;
  transition:transform var(--t-base) var(--ease)}
.ficha__otros a:hover{color:var(--navy)}
.ficha__otros a:hover svg{transform:translateX(3px)}

/* ==========================================================================
   MOSAICO DE PROYECTOS
   ========================================================================== */
.mosaico{display:grid;gap:var(--sp-5)}
@media (min-width:660px){.mosaico{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){
  .mosaico{grid-template-columns:repeat(3,1fr)}
  .mosaico__item--ancho{grid-column:span 2}
}
.mosaico figure{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.mosaico img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform 560ms var(--ease),opacity var(--t-base) var(--ease)}
.mosaico__item--ancho img{aspect-ratio:8/3}
@media (max-width:1059px){.mosaico__item--ancho img{aspect-ratio:4/3}}
.mosaico figure:hover img{transform:scale(1.04);opacity:.9}
.mosaico figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--navy);color:#fff;
  font-family:var(--font-title);font-weight:700;font-size:1rem;
  padding:.85rem 1.1rem;
  transform:translateY(100%);
  transition:transform var(--t-base) var(--ease);
}
.mosaico figure:hover figcaption,
.mosaico figure:focus-within figcaption{transform:translateY(0)}
/* En táctil no hay hover: el rótulo va siempre visible */
@media (hover:none){
  .mosaico figcaption{transform:none;font-size:.92rem}
}

/* ==========================================================================
   VENTAJAS (página Membrana TPO)
   ========================================================================== */
.ventajas{display:grid;gap:var(--sp-5)}
@media (min-width:620px){.ventajas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.ventajas{grid-template-columns:repeat(3,1fr)}}
.ventaja{background:#fff;border:1px solid var(--line);padding:clamp(1.4rem,2.6vw,1.9rem);
  transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.ventaja:hover{border-color:var(--navy);transform:translateY(-3px)}
.ventaja__icono{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--sp-4);
  background:var(--surface-alt);color:var(--navy);
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.ventaja h3{font-size:1.08rem;margin-bottom:var(--sp-2)}
.ventaja p{margin:0;font-size:.95rem}

/* ==========================================================================
   PÁGINA ORIENTAL YUHONG
   ========================================================================== */
.familias{display:grid;gap:var(--sp-5)}
@media (min-width:600px){.familias{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.familias{grid-template-columns:repeat(3,1fr)}}
.familia{background:#fff;border:1px solid var(--line);padding:clamp(1.4rem,2.6vw,1.9rem);
  display:flex;flex-direction:column;gap:var(--sp-2);
  border-top:3px solid var(--navy);
  transition:border-top-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.familia:hover{border-top-color:var(--green);transform:translateY(-3px)}
.familia h3{font-size:1.08rem;margin:0}
.familia p{margin:0;font-size:.95rem;flex:1}
.familia__link{display:inline-flex;align-items:center;gap:.45rem;margin-top:var(--sp-3);
  font-family:var(--font-title);font-weight:700;font-size:.88rem;color:var(--navy)}
.familia__link svg{transition:transform var(--t-base) var(--ease)}
.familia:hover .familia__link svg{transform:translateX(3px)}

.tabla-productos{overflow-x:auto;border:1px solid var(--line)}
.tabla-productos table{width:100%;border-collapse:collapse;min-width:640px}
.tabla-productos th,.tabla-productos td{text-align:left;padding:.9rem 1.1rem;
  border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.tabla-productos thead th{background:var(--navy);color:#fff;font-family:var(--font-title);
  font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:0}
.tabla-productos tbody th{font-family:var(--font-title);font-weight:700;color:var(--ink);
  white-space:nowrap}
.tabla-productos tbody tr:last-child th,
.tabla-productos tbody tr:last-child td{border-bottom:0}
.tabla-productos tbody tr:hover{background:var(--surface-alt)}
.etiqueta{display:inline-block;background:var(--surface-alt);border:1px solid var(--line);
  padding:.2rem .6rem;font-size:.82rem;color:var(--body);white-space:nowrap}
.tabla-productos__ficha a{display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-title);font-weight:700;font-size:.86rem;color:var(--navy);white-space:nowrap}
.tabla-productos__ficha a:hover{color:var(--green-deep)}
.nota-fuente{margin-top:var(--sp-4);font-size:.86rem;color:var(--muted)}
.nota-fuente a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}

/* Figura con pie en la página de Oriental Yuhong */
.yuhong__figura{margin:0}
.yuhong__figura img{width:100%;aspect-ratio:4/3;object-fit:cover}
.yuhong__figura figcaption{margin-top:var(--sp-3);font-size:.88rem;color:var(--muted)}

/* ==========================================================================
   REBOTEC
   ========================================================================== */
.rebotec-intro{background:var(--navy);color:#cfdaec}
.rebotec-intro h2{color:#fff}
.rebotec-intro p{color:#cfdaec}
.rebotec-intro .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.rebotec-logo{height:clamp(44px,5vw,58px);width:auto;margin-bottom:var(--sp-5)}

.rebotec-envases{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(1rem,3vw,2.5rem)}
.rebotec-envases picture{display:contents}
.rebotec-envases img{
  width:auto;max-height:clamp(170px,18vw,250px);
  filter:drop-shadow(0 18px 28px rgba(0,8,22,.5));
}
.rebotec-envases picture:last-child img{max-height:clamp(150px,16vw,220px)}

/* ==========================================================================
   VÍDEO
   ========================================================================== */
.video-seccion{padding-top:0}
.video{position:relative;aspect-ratio:16/9;background:var(--navy-deep);overflow:hidden;
  max-width:62rem;margin-inline:auto}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Banda de Rebotec en el inicio: composición centrada, para no encadenar
   otro bloque de imagen más texto después de TPO y Oriental Yuhong. */
.rebotec-banda{background:var(--navy);color:#cfdaec;text-align:center}
.rebotec-banda__inner{display:flex;flex-direction:column;align-items:center;
  max-width:60rem;margin-inline:auto}
.rebotec-banda h2{color:#fff;max-width:18ch}
.rebotec-banda p{color:#cfdaec;max-width:58ch;margin-bottom:var(--sp-6)}
.rebotec-banda .rebotec-envases{margin-bottom:var(--sp-6)}
.rebotec-banda .rebotec-envases img{max-height:clamp(150px,15vw,200px)}
.rebotec-banda .rebotec-envases picture:last-child img{max-height:clamp(132px,13vw,176px)}
.rebotec-banda .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)}

/* ==========================================================================
   PANTALLA DE CARGA
   El logotipo se llena de agua de abajo arriba mientras caen unas gotas.
   La animación de salida corre sola a los 2,6 s: si el JavaScript no llega a
   ejecutarse, la pantalla se retira igual y nadie se queda mirando un fondo azul.
   ========================================================================== */
.preloader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--navy);
  overflow:hidden;
  animation:preloader-salida 420ms var(--ease-out) 2.6s forwards;
}
.preloader--fuera{animation:preloader-salida 380ms var(--ease-out) forwards}
@keyframes preloader-salida{
  to{opacity:0;visibility:hidden;pointer-events:none}
}

.preloader__marca{position:relative;width:min(340px,62vw);isolation:isolate}
.preloader__base{width:100%;height:auto;opacity:.2}

/* La lámina de agua va recortada con la silueta del logotipo */
.preloader__agua,
.preloader__linea{
  position:absolute;inset:0;
  -webkit-mask:url('../img/logo-waterway-blanco.png') no-repeat center/contain;
  mask:url('../img/logo-waterway-blanco.png') no-repeat center/contain;
  pointer-events:none;
}
.preloader__agua{
  background:linear-gradient(to top,#1f8fd0 0%,#2ba8e0 45%,#6abf3f 100%);
  clip-path:inset(100% 0 0 0);
  animation:preloader-llenar 1.5s var(--ease-out) .15s forwards;
}
@keyframes preloader-llenar{to{clip-path:inset(0 0 0 0)}}

/* Brillo en el borde del agua, para que la línea de llenado se lea */
.preloader__linea{
  background:linear-gradient(to top,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
  background-size:100% 14px;background-repeat:no-repeat;
  background-position:0 100%;
  animation:preloader-borde 1.5s var(--ease-out) .15s forwards;
}
@keyframes preloader-borde{to{background-position:0 -7px}}

.preloader__gota{
  position:absolute;top:-40px;left:var(--x);
  width:2px;height:46px;
  background:linear-gradient(to bottom,transparent,rgba(206,230,255,.55));
  animation:preloader-gota var(--t) linear var(--d) infinite;
}
@keyframes preloader-gota{
  from{transform:translate3d(0,-10vh,0) rotate(8deg)}
  to{transform:translate3d(-2vw,120vh,0) rotate(8deg)}
}

@media (prefers-reduced-motion:reduce){
  .preloader{animation:preloader-salida 1ms linear .4s forwards}
  .preloader__agua{clip-path:inset(0 0 0 0);animation:none}
  .preloader__linea,.preloader__gota{display:none}
  .preloader__base{opacity:1}
}

/* ==========================================================================
   CARRUSEL DE LÁMINAS TÉCNICAS
   Scroll-snap nativo: se puede arrastrar y recorrer con teclado aunque el
   JavaScript no cargue. Los esquemas van sobre blanco con `contain`, porque
   recortarlos cortaría los rótulos.
   ========================================================================== */
.carrusel{position:relative}
.carrusel__pista{
  display:grid;grid-auto-flow:column;grid-auto-columns:100%;
  gap:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.carrusel__pista::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.carrusel__pista{scroll-behavior:auto}}

.carrusel__lamina{margin:0;scroll-snap-align:center;scroll-snap-stop:always}
.carrusel__lamina picture{display:block;background:#fff;border:1px solid var(--line)}
.carrusel__lamina img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;
  background:#fff;padding:clamp(.5rem,1.5vw,1rem);
}
.carrusel__lamina figcaption{padding-top:var(--sp-5)}
.carrusel__lamina h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);margin:0 0 var(--sp-2)}
.carrusel__lamina p{margin:0;font-size:.97rem;max-width:62ch}

.carrusel__mandos{
  display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);
}
.carrusel__flecha{
  flex:none;width:46px;height:46px;display:grid;place-items:center;
  background:transparent;color:var(--navy);
  border:2px solid var(--navy);border-radius:var(--radius-xs);cursor:pointer;
  transition:background var(--t-press) var(--ease-out),color var(--t-press) var(--ease-out),
             transform var(--t-press) var(--ease-out),opacity var(--t-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .carrusel__flecha:hover:not(:disabled){background:var(--navy);color:#fff}
}
.carrusel__flecha:active:not(:disabled){transform:scale(.94)}
.carrusel__flecha:disabled{opacity:.3;cursor:default}
.carrusel__flecha--prev svg{transform:rotate(180deg)}

.carrusel__puntos{display:flex;gap:.55rem;margin-right:auto}
.carrusel__punto{
  width:30px;height:4px;padding:0;border:0;cursor:pointer;
  background:var(--line);
  transition:background var(--t-press) var(--ease-out);
}
.carrusel__punto[aria-selected="true"]{background:var(--green)}
@media (hover:hover) and (pointer:fine){
  .carrusel__punto:hover{background:var(--muted)}
  .carrusel__punto[aria-selected="true"]:hover{background:var(--green)}
}
.carrusel__contador{font-family:var(--font-title);font-weight:700;font-size:.88rem;
  color:var(--muted);font-variant-numeric:tabular-nums}

/* Dentro de la franja navy del inicio */
.yuhong-oscuro .carrusel__lamina figcaption h3{color:#fff}
.yuhong-oscuro .carrusel__lamina p{color:#cfdaec}
.yuhong-oscuro .carrusel__mandos{border-top-color:rgba(255,255,255,.18)}
.yuhong-oscuro .carrusel__flecha{color:#fff;border-color:rgba(255,255,255,.55)}
.yuhong-oscuro .carrusel__punto{background:rgba(255,255,255,.25)}
.yuhong-oscuro .carrusel__contador{color:#9fb3d6}
@media (hover:hover) and (pointer:fine){
  .yuhong-oscuro .carrusel__flecha:hover:not(:disabled){background:#fff;color:var(--navy);border-color:#fff}
}

/* El logotipo de marca nunca debe desbordar su contenedor */
.yuhong__logo img{max-width:100%}

/* Bloque del carrusel dentro de la sección Oriental Yuhong del inicio */
.yuhong__sistemas{margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.yuhong__sistemas > h3{font-size:clamp(1.15rem,1rem + .6vw,1.4rem);margin-bottom:var(--sp-5)}

/* ==========================================================================
   CARRUSEL DE NORMAS
   Varias fichas por vista: con seis elementos, pasarlas de una en una
   escondería el conjunto, que es justo lo que da la señal de respaldo.
   ========================================================================== */
.carrusel--normas .carrusel__pista{gap:var(--sp-5);grid-auto-columns:86%;
  scroll-snap-type:x proximity;padding-bottom:var(--sp-2)}
@media (min-width:700px){.carrusel--normas .carrusel__pista{grid-auto-columns:46%}}
@media (min-width:1100px){.carrusel--normas .carrusel__pista{grid-auto-columns:31.5%}}

.norma{
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);
  padding:clamp(1.3rem,2.4vw,1.8rem);
}
.norma__marca{
  height:76px;display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:var(--sp-5);
}
.norma__marca img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.norma h3{font-size:1.08rem;margin:0 0 .15rem}
.norma__sub{
  font-family:var(--font-title);font-weight:600;font-size:.9rem;
  color:var(--green-deep);margin:0 0 var(--sp-3);
}
.norma p:last-child{margin:0;font-size:.93rem;line-height:1.65}


/* ==========================================================================
   CARRUSEL EN TIRA
   Las tres láminas a la vez. A este tamaño los rótulos del esquema no se leen,
   así que la tira funciona como escaparate y el detalle legible vive en la
   página de Oriental Yuhong, donde cada lámina ocupa el ancho completo.
   ========================================================================== */
.carrusel--tira .carrusel__pista{gap:var(--sp-5);grid-auto-columns:84%;
  scroll-snap-type:x proximity}
@media (min-width:680px){.carrusel--tira .carrusel__pista{grid-auto-columns:47%}}
@media (min-width:1040px){.carrusel--tira .carrusel__pista{grid-auto-columns:31.6%}}
.carrusel--tira .carrusel__lamina{scroll-snap-align:start}
.carrusel--tira .carrusel__lamina img{aspect-ratio:3/2;padding:.4rem}
.carrusel--tira .carrusel__lamina figcaption{padding-top:var(--sp-4)}
.carrusel--tira .carrusel__lamina h3{font-size:1.04rem}
.carrusel--tira .carrusel__lamina p{font-size:.92rem;line-height:1.6}

/* El bloque de sistemas del inicio lleva un párrafo de entrada */
.yuhong__sistemas > p{margin-bottom:var(--sp-5);max-width:70ch}

/* ==========================================================================
   ACORDEÓN DE LÁMINAS
   La lámina activa se expande y las demás se contraen. Se anima `flex-grow`,
   no el ancho, y la zona de texto tiene altura reservada para que al cambiar
   de lámina no salte el resto de la página.
   ========================================================================== */
.acordeon{display:grid;gap:var(--sp-5)}
@media (min-width:860px){
  .acordeon{display:flex;align-items:flex-start}
}
.acordeon__hoja{
  position:relative;margin:0;min-width:0;
  flex:1 1 0;
  transition:flex-grow 560ms var(--ease-out);
}
@media (min-width:860px){
  .acordeon__hoja[aria-current="true"]{flex-grow:2.6}
}
/* Zona pulsable sobre la lámina entera, sin un botón visible encima */
.acordeon__zona{
  position:absolute;inset:0;z-index:2;
  background:none;border:0;padding:0;cursor:pointer;
}
.acordeon__zona:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.acordeon__hoja picture{display:block;background:#fff;overflow:hidden}
.acordeon__hoja img{
  width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;
  background:#fff;padding:.4rem;
  transition:opacity 560ms var(--ease-out);
  opacity:.55;
}
.acordeon__hoja[aria-current="true"] img{opacity:1}

.acordeon__hoja figcaption{padding-top:var(--sp-4)}
.acordeon__hoja h3{
  font-size:1.02rem;margin:0 0 var(--sp-2);
  color:var(--muted);
  transition:color 560ms var(--ease-out);
}
.acordeon__hoja[aria-current="true"] h3{color:var(--ink)}
.acordeon__hoja p{
  margin:0;font-size:.93rem;line-height:1.6;
  opacity:0;transition:opacity 420ms var(--ease-out);
}
.acordeon__hoja[aria-current="true"] p{opacity:1}
@media (min-width:860px){
  /* Altura de imagen común a las tres: si cada caja creciera con su ancho, los
     títulos quedarían a alturas distintas y la fila se vería escalonada. */
  .acordeon__hoja img{height:clamp(250px,27vw,420px);aspect-ratio:auto}
  /* Altura reservada: la descripción más larga marca el alto de la zona */
  .acordeon__hoja figcaption{min-height:11.5rem}
  .acordeon__hoja:not([aria-current="true"]) p{visibility:hidden}
}
@media (max-width:859px){
  /* Sin acordeón en pantallas pequeñas: las tres se leen completas */
  .acordeon__hoja img,.acordeon__hoja p{opacity:1}
  .acordeon__hoja h3{color:var(--ink)}
  .acordeon__zona{display:none}
}
@media (prefers-reduced-motion:reduce){
  .acordeon__hoja,.acordeon__hoja img,.acordeon__hoja h3,.acordeon__hoja p{transition:none}
}

/* ==========================================================================
   CINTA DE NORMAS
   Franja continua de logotipos, al modo de una fila de aliados.
   ========================================================================== */
.aliados{
  overflow:hidden;padding-block:var(--sp-5);
  border-block:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.aliados__cinta{display:flex;width:max-content;animation:aliados-correr 34s linear infinite}
.aliados__grupo{display:flex;align-items:center}
.aliados__grupo li{display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(1.75rem,4vw,3.25rem)}
.aliados__grupo img{height:clamp(46px,5vw,62px);width:auto;max-width:none}
@keyframes aliados-correr{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){
  .aliados:hover .aliados__cinta{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .aliados__cinta{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .aliados{-webkit-mask:none;mask:none}
  .aliados__grupo:last-child{display:none}
}

/* En la página de marca la cinta precede a las fichas con el detalle */
.aliados + .carrusel--normas{margin-top:clamp(2rem,3.5vw,2.75rem)}

/* ==========================================================================
   ALCANCE DE TRABAJO
   Rejilla dividida por filetes, sin fotografía: el bento de servicios ya está
   más arriba en la página y repetir tarjetas con imagen sería el mismo bloque
   dos veces.
   ========================================================================== */
.alcance{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:720px){.alcance{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.alcance{grid-template-columns:repeat(4,1fr)}}
.alcance__tipo{
  padding:var(--sp-6) 0;border-bottom:1px solid var(--line);
}
@media (min-width:720px){
  .alcance__tipo{padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;border-bottom:0}
  .alcance__tipo + .alcance__tipo{border-left:1px solid var(--line);padding-left:var(--sp-5)}
}
@media (min-width:720px) and (max-width:1099px){
  .alcance__tipo:nth-child(2n+1){border-left:0;padding-left:0}
  .alcance__tipo:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
.alcance__icono{display:block;margin-bottom:var(--sp-4)}
.alcance__icono img{width:54px;height:54px;object-fit:contain}
.alcance__tipo h3{font-size:1.06rem;margin:0 0 var(--sp-2)}
.alcance__tipo p{margin:0;font-size:.95rem}