/* ============================================================
   Piscinas Bayer — sistema de diseño
   Tokens heredados del sitio anterior para mantener el estilo.
   ============================================================ */

:root {
  --ink:        #0B2444;
  --navy:       #003068;
  --navy-deep:  #001C3F;
  --blue:       #009ACF;
  --blue-dark:  #007BAA;
  --sky:        #7FD0EE;
  --sky-pale:   #A9DFF3;
  --steel:      #00669C;
  --paper:      #F2F8FB;
  --line:       #D5E5EF;
  --muted:      #5A7290;
  --white:      #FFFFFF;

  --wrap: 1240px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-sm: 0 2px 10px rgba(11, 36, 68, .06);
  --shadow-md: 0 14px 40px rgba(11, 36, 68, .10);
  --shadow-lg: 0 28px 70px rgba(11, 36, 68, .16);

  --ease: cubic-bezier(.16, .84, .32, 1);

  --f-head: Manrope, Inter, system-ui, sans-serif;
  --f-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto es obligatorio: sin el, el atributo height="641" de una <img>
   se aplica como altura CSS y la foto se deforma. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--steel); text-underline-offset: 3px; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- tipografía ---------- */

h1, h2, h3, h4 { font-family: var(--f-head); color: var(--navy); margin: 0; line-height: 1.12; text-wrap: balance; }

h1 { font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.015em; }
h3 { font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-weight: 700; font-size: 1.02rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 .85rem;
}

.lead { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand { flex: none; display: inline-flex; text-decoration: none; }
/* ---------- marca ----------
   El monograma va como imagen y la palabra como texto real: asi queda
   nitida en cualquier densidad de pantalla, en vez de depender de un
   raster de 235 px. La familia es Manrope, la misma de los titulares.
   Todo va en em, asi que basta cambiar font-size para escalar la marca. */

.marca {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  line-height: 1;
}

.marca img { display: block; height: 3.1em; width: auto; }

.marca .palabra {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: 1em;
  line-height: 1.16;
  letter-spacing: .075em;
  white-space: nowrap;
  color: var(--navy);
}

/* mismo reparto de tono que el logo de origen: el nombre pesa en navy y el
   descriptor acompana en el azul medio */
.marca .palabra b { display: block; font-weight: 400; color: var(--steel); }

/* Variante apilada: cabe en un circulo, donde la horizontal no. */
.marca-apilada { flex-direction: column; gap: .42em; text-align: center; }
.marca-apilada img { height: 2.5em; }

/* la cabecera fija la escala; el resto esta en em */
.brand .marca { font-size: 15px; }


.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  padding: 0;
}

.nav-links a {
  display: inline-block;
  padding: .6rem .95rem;
  border-radius: var(--r-sm);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .93rem;
  color: var(--navy);
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}

.nav-links a:hover { background: var(--paper); color: var(--steel); }

.nav-links a[aria-current="page"] { background: var(--navy); color: var(--white); }

.nav-toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: .5rem;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: var(--r-sm);
  padding: .6rem .9rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    margin: 0;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .85rem 1rem; }
}

/* ---------- botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--blue); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--blue-dark); box-shadow: var(--shadow-md); }

.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-deep); }

.btn-outline { border-color: var(--line); color: var(--navy); background: var(--white); }
.btn-outline:hover { border-color: var(--blue); color: var(--steel); }

.btn svg { width: 20px; height: 20px; flex: none; }
.btn-wa { background: #25D366; color: #05331A; }
.btn-wa:hover { background: #1FBA59; }

/* ---------- hero partido ---------- */

.hero { padding: 0; border-bottom: 1px solid var(--line); background: var(--white); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1.05fr; min-height: 84vh; }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(3.25rem, 7vw, 6.5rem) clamp(1.25rem, 4vw, 4rem);
  padding-left: max(1.25rem, calc((100vw - var(--wrap)) / 2));
}

.hero-copy h1 span { color: var(--blue); }

.hero-rule { width: 62px; height: 4px; background: var(--blue); border-radius: 2px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }

.hero-media { position: relative; min-height: 320px; background: var(--paper); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
  position: absolute;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--navy);
  color: var(--white);
  padding: .8rem 1.2rem;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

.hero-badge strong { font-family: var(--f-head); font-size: 1rem; display: block; line-height: 1.2; }
.hero-badge span { font-size: .82rem; opacity: .8; }

/* ---------- hero a sangre ----------
   La foto ocupa toda la primera pantalla y el texto va encima. El velo
   oscuro no es decoracion: es lo unico que sostiene el contraste del
   texto blanco, y esta foto es de mediodia, con cielo y toldos claros. */

.hero-cine {
  position: relative;
  isolation: isolate;
  min-height: min(80vh, 720px);
  display: flex;
  align-items: flex-end;
  background: var(--navy-deep);
  padding: 0;
}

.hero-cine picture,
.hero-cine img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-cine img { object-fit: cover; object-position: 50% 55%; }

/* dos capas: una de abajo hacia arriba y otra desde la izquierda, para que
   el bloque de texto tenga fondo propio sin oscurecer la foto entera */
.hero-cine::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top,
      rgba(0, 20, 45, .62) 0%,
      rgba(0, 20, 45, .34) 28%,
      rgba(0, 20, 45, .10) 55%,
      rgba(0, 20, 45, 0) 76%,
      rgba(0, 20, 45, .22) 100%),
    linear-gradient(to right,
      rgba(0, 20, 45, .92) 0%,
      rgba(0, 20, 45, .88) 30%,
      rgba(0, 20, 45, .74) 45%,
      rgba(0, 20, 45, .34) 60%,
      rgba(0, 20, 45, 0) 75%);
}

.hero-cine-copy {
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

/* En pantallas angostas el texto ocupa todo el ancho, asi que el velo
   lateral no lo cubre: ahi manda uno de abajo hacia arriba. El tercio
   superior queda limpio, que es donde estan el cielo y la cordillera. */
@media (max-width: 700px) {
  .hero-cine::after {
    background: linear-gradient(to top,
      rgba(0, 20, 45, .93) 0%,
      rgba(0, 20, 45, .89) 32%,
      rgba(0, 20, 45, .84) 54%,
      rgba(0, 20, 45, .50) 72%,
      rgba(0, 20, 45, .10) 90%,
      rgba(0, 20, 45, .30) 100%);
  }
}

/* El tope va en los hijos, no en el bloque: .wrap trae margin-inline:auto,
   asi que limitar el ancho del bloque lo CENTRA y manda el texto a la zona
   clara de la foto. Limitando los hijos, la caja sigue alineada al margen. */
.hero-cine-copy > * { max-width: 34rem; }

/* el celeste de marca no llega al contraste minimo sobre foto */
.hero-cine .eyebrow { color: rgba(255, 255, 255, .92); }
.hero-cine h1 { color: var(--white); margin-bottom: 1.1rem; }
.hero-cine h1 span { color: var(--sky); }
.hero-cine .lead { color: rgba(255, 255, 255, .90); margin-bottom: 1.7rem; max-width: 46ch; }

/* el boton de contorno claro no se lee sobre foto: se aclara el borde */
.hero-cine .btn-outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .6); }
.hero-cine .btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: var(--white); color: var(--white); }

.hero-cine-marca {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: clamp(1.25rem, 3vw, 2.5rem);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  color: var(--white);
  font-family: var(--f-head);
}

.hero-cine-marca strong { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.hero-cine-marca span { font-size: .8rem; opacity: .82; }

/* en movil la marca chocaria con el menu pegajoso */
@media (max-width: 860px) { .hero-cine-marca { display: none; } }

/* ---------- hero partido: texto y una foto ----------
   La foto va en su propia columna, sin texto encima: no hace falta velo,
   asi que el agua conserva el color real. El pie con la comuna es la parte
   que convence: dice que la obra existe y donde. */

.hero-duo { padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(3rem, 6vw, 4.5rem); }

.hero-duo-grid { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: center; }

@media (min-width: 940px) {
  .hero-duo-grid { grid-template-columns: 1fr 1.15fr; }
}

.hero-duo h1 span { color: var(--blue); }
.hero-duo .hero-rule { margin: 1.2rem 0; }
.hero-duo .lead { margin-bottom: 1.6rem; }

.hero-duo-foto { margin: 0; }

.hero-duo-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.hero-duo-foto figcaption {
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .6rem;
  font-size: .86rem;
  color: var(--muted);
}

.hero-duo-foto figcaption b {
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--navy);
}

/* separa la obra de la etiqueta de rubro */
.hero-duo-foto figcaption .rubro::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line);
  margin-right: .6rem;
  vertical-align: middle;
}

/* ---------- hero enmarcado ----------
   El aire alrededor de la foto es lo que la hace leer como cara, y al
   mostrarse mas chica que a sangre se ve a resolucion nativa. */

.hero-marco-seccion { padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }

.hero-cab {
  display: grid;
  gap: 1.5rem 3.5rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 940px) {
  .hero-cab { grid-template-columns: 1.35fr 1fr; }
}

.hero-cab h1 { margin-bottom: 0; }
.hero-cab h1 span { color: var(--blue); }
.hero-cab .eyebrow { margin-bottom: 1rem; }
.hero-cab .lead { margin-bottom: 1.5rem; }

.hero-marco {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}

.hero-marco img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.hero-sello {
  position: absolute;
  left: 0; bottom: 0;
  background: var(--white);
  border-top-right-radius: var(--r-md);
  padding: 1.1rem 1.6rem 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-sello strong {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1;
  color: var(--navy);
  letter-spacing: -.02em;
}

.hero-sello span {
  font-size: .84rem;
  line-height: 1.3;
  color: var(--muted);
  max-width: 12ch;
}

/* en pantallas chicas el sello encima tapa demasiada foto: baja debajo */
@media (max-width: 560px) {
  .hero-sello { position: static; padding: 1.1rem 0 0; }
}

/* ---------- franja de cifras ----------
   Va pegada al hero, sin el padding de seccion: es una barra, no un bloque. */

.cifras {
  background: var(--navy);
  color: var(--white);
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

.cifras .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
}

@media (min-width: 800px) {
  .cifras .wrap { grid-template-columns: repeat(3, 1fr); }
}

.cifra { padding: clamp(1.35rem, 3vw, 2.1rem) 0 clamp(1.45rem, 3vw, 2.2rem); position: relative; }

@media (min-width: 800px) {
  .cifra { padding-inline: clamp(1rem, 2.4vw, 2rem); }
  .cifra:first-child { padding-left: 0; }

  /* en fila, el filete va vertical y sin tocar el borde exterior */
  .cifra + .cifra::before {
    content: "";
    position: absolute;
    left: -.5px; top: 18%; bottom: 18%;
    width: 1px;
    background: rgba(255, 255, 255, .18);
  }
}

/* apiladas, el mismo filete tiene que ser horizontal */
@media (max-width: 799px) {
  .cifra + .cifra { border-top: 1px solid rgba(255, 255, 255, .14); }
}

.cifra .dato {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--white);
  /* los digitos no cambian de ancho mientras corre el contador */
  font-variant-numeric: tabular-nums;
}

.cifra .dato .signo { color: var(--sky); }

.cifra .rotulo {
  display: block;
  margin-top: .55rem;
  font-size: .87rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .72);
  max-width: 22ch;
}

/* ---------- secciones ---------- */

section { padding: clamp(4rem, 9vw, 7.5rem) 0; }

.section-alt { background: var(--paper); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  max-width: 66ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.section-head .eyebrow { margin-bottom: 0; }

/* ---------- rejillas ---------- */

.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  display: flex;
  flex-direction: column;
}

a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.card-media { aspect-ratio: 4 / 3; background: var(--paper); }
/* El aspect-ratio se hereda del contenedor a proposito. Sin esa linea, una
   <img> con atributos width/height trae su propio aspect-ratio, el height:100%
   no resuelve (la altura del padre dependeria de la foto) y la tarjeta se
   estira al ratio de la foto en vez de recortarla. Paso de verdad: dejo
   asomando la marca de agua que el recorte tenia que esconder. */
.card-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: inherit; }

.card-body { padding: 1.7rem 1.8rem 1.95rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-body p { color: var(--muted); font-size: .96rem; }

.card-more {
  margin-top: auto;
  padding-top: .35rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--steel);
}

/* ---------- marcadores de imagen pendiente ---------- */

.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, var(--paper) 0 12px, #E9F2F7 12px 24px);
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  padding: 1.25rem;
  min-height: 230px;
}

.ph strong { font-family: var(--f-head); font-size: .9rem; color: var(--steel); }
.ph span { font-size: .78rem; }

.ph-wide { aspect-ratio: 16 / 9; min-height: 0; }
.ph-square { aspect-ratio: 1 / 1; min-height: 0; }
.ph-tall { aspect-ratio: 3 / 4; min-height: 0; }

/* ---------- bloque partido texto+imagen ---------- */

.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

/* El texto va primero en el markup en todos los .split, sin excepcion: es el
   orden en que se lee en una columna y el que anuncia un lector de pantalla.
   El zigzag de escritorio se consigue moviendo el texto a la derecha, no
   reordenando el HTML. */
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-media-izq > .split-copy { order: 1; }
}
.split-media img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.split-copy > * + * { margin-top: 1rem; }
.split-copy > h2 + *, .split-copy > h3 + * { margin-top: 1.25rem; }
.split-copy > .eyebrow + h2 { margin-top: .35rem; }

/* ---------- páginas legales ---------- */

/* Prosa larga: los 1240px de .wrap son ilegibles para leer seguido, y aqui
   no se puede poner el tope en .wrap porque trae margin-inline:auto y en vez
   de acotar, centraria. El tope va en este hijo. */
.legal { max-width: 66ch; counter-reset: cl; }

/* Numeracion por contador, no escrita en el markup: una politica gana y
   pierde secciones segun lo que el sitio haga de verdad, y renumerar ocho
   titulos a mano es justo el paso que alguien olvida. */
.legal h2::before {
  counter-increment: cl;
  content: counter(cl) ". ";
}

/* Los h2 del sitio son de 2.5rem: correctos para una portada, desmedidos
   para el subtitulo de una clausula. */
.legal h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: .85rem;
}

.legal h2:first-of-type { margin-top: 0; }

.legal p { color: var(--muted); }
.legal p strong { color: var(--ink); }

.legal a {
  color: var(--blue);
  text-underline-offset: .18em;
}

.legal .actualizado {
  font-size: .9rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

/* ---------- lista con vistos ---------- */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.checks li { position: relative; padding-left: 1.9rem; color: var(--ink); }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: .8em;
  width: 16px; height: 2px;
  border-radius: 1px;
  background: var(--blue);
}

/* ---------- galería ---------- */

.gallery { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gallery img, .gallery .ph { border-radius: var(--r-md); aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- contacto ---------- */

.contact-list { display: grid; gap: 1.25rem; max-width: 820px; }

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.9rem;
}

.contact-icon {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--steel);
}

.contact-icon svg { width: 24px; height: 24px; }

.contact-text { flex: 1 1 210px; min-width: 0; }
.contact-text h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.contact-text .value {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--ink);
  word-break: break-word;
}

.contact-row .btn { flex: none; }

/* ---------- icono de teléfono animado ---------- */

/* Equivalente en CSS del componente de AnimateIcons (React + motion/react):
   mismo glifo phone-call de Lucide y los mismos fotogramas —el auricular
   rota 0/-10/10/-6/6/0 y las ondas laten opacidad 1/.6/1 con escala 1/1.1/1,
   ambas en 0.9s—. No hace falta JS: es hover, y el hover ya lo resuelve CSS.

   Las ondas escalan desde 13,11, que es el centro comun de los dos arcos
   (radios 9 y 5). Asi se abren siguiendo su propio radio en vez de
   desplazarse, que es lo que pasaria escalando desde el centro del viewBox. */
.tel-anim .fono { transform-box: fill-box; transform-origin: center; }
.tel-anim .onda { transform-box: view-box; transform-origin: 13px 11px; }

/* La solapa del sobre mide 23.43 unidades (getTotalLength), asi que un guion
   de 24 la cubre entera: en reposo se ve como una linea continua y solo el
   dashoffset la esconde. Con offset positivo se dibuja de izquierda a
   derecha, siguiendo la lectura. */
.mail-anim .solapa { stroke-dasharray: 24; }

/* Dispara toda la fila, no solo el circulo de 48px: asi tambien se anima al
   apuntar el boton Llamar. El focus-within cubre a quien llega con teclado. */
@media (prefers-reduced-motion: no-preference) {
  .contact-row:hover .tel-anim .fono,
  .contact-row:focus-within .tel-anim .fono { animation: tel-agita .9s ease-in-out; }

  .contact-row:hover .tel-anim .onda,
  .contact-row:focus-within .tel-anim .onda { animation: tel-onda .9s ease-out; }

  .contact-row:hover .mail-anim .solapa,
  .contact-row:focus-within .mail-anim .solapa { animation: mail-traza .7s ease-in-out; }
}

/* Sin cursor no hay hover, y el icono nunca se moveria. En esos aparatos la
   misma animacion corre una vez, cuando la fila entra en pantalla; la clase
   la pone el script. El (hover: none) evita que en escritorio convivan las
   dos reglas peleandose por la misma propiedad. */
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  .contact-row.visto .tel-anim .fono { animation: tel-agita .9s ease-in-out; }
  .contact-row.visto .tel-anim .onda { animation: tel-onda .9s ease-out; }
  .contact-row.visto .mail-anim .solapa { animation: mail-traza .7s ease-in-out; }
}

@keyframes tel-agita {
    0% { transform: rotate(0deg); }
   20% { transform: rotate(-10deg); }
   40% { transform: rotate(10deg); }
   60% { transform: rotate(-6deg); }
   80% { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes mail-traza {
  from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

@keyframes tel-onda {
  0%, 100% { opacity: 1;  transform: scale(1); }
       50% { opacity: .6; transform: scale(1.1); }
}

/* ---------- botón flotante de WhatsApp ---------- */

.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 28px rgba(5, 51, 26, .35);
  transition: transform .2s var(--ease);
}

.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }

@media (max-width: 600px) { .wa-float { right: 14px; bottom: 14px; width: 54px; height: 54px; } }

/* ---------- CTA de cierre ---------- */

.cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  text-align: center;
}

.cta h2 { color: var(--white); }
.cta h2 + p { margin-top: 1.35rem; }
.cta p { color: rgba(255, 255, 255, .78); max-width: 54ch; margin-inline: auto; }
.cta .hero-actions { justify-content: center; margin-top: 1.6rem; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .74); padding: 3rem 0 1.75rem; font-size: .93rem; }
.site-footer a { color: var(--sky); }

/* Bloque superior: la marca ocupa su propia columna a la izquierda y los
   enlaces se agrupan a la derecha, en vez de cuatro columnas iguales. */
.footer-top { display: flex; flex-direction: column; gap: 2.75rem; }

.footer-marca p { margin: 0; max-width: 46ch; }

.footer-cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }

@media (min-width: 620px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; }
}

@media (min-width: 960px) {
  .footer-top { flex-direction: row; align-items: flex-start; gap: 4.5rem; }
  .footer-marca { flex: 1 1 0; }
  .footer-cols { flex: 1.4 1 0; }
}

.site-footer h4 { color: var(--white); margin-bottom: .7rem; font-size: .95rem; }
/* La marca sobre el navy del pie no puede ir aplanada a blanco: se pierde
   el monograma. Va dentro de un disco blanco, con los colores de arriba. */
.marca-disco {
  display: grid;
  place-items: center;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: var(--white);
  margin-bottom: 1.25rem;
  text-decoration: none;
}

.marca-disco .marca { font-size: 16px; }
.footer-marca img { margin: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }

/* Los logos de las tarjetas son a color y sobre blanco, asi que van en su
   propia tarjeta clara en vez de sueltos sobre el azul del footer. */
.pay {
  display: inline-block;
  margin-top: .9rem;
  padding: .6rem .75rem;
  background: var(--white);
  border-radius: var(--r-sm);
  max-width: 100%;
}

.pay img {
  display: block;
  width: 232px;
  max-width: 100%;
  height: auto;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-size: .85rem;
}

.footer-bottom p { margin: 0; }

/* gana a `.site-footer ul`, que es grid */
.site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  /* Aparta los enlaces del botón flotante de WhatsApp, que está fijo a 20px
     del borde y mide 60px. Solo reserva lo que falte: en pantallas anchas el
     margen del .wrap ya alcanza y esto vale 0. */
  padding-right: max(0px, calc(106px - (100vw - min(100vw - 2.5rem, var(--wrap))) / 2));
}

@media (min-width: 700px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ---------- etapas del proceso ---------- */

.steps-grid { grid-template-columns: 1fr; }

@media (min-width: 760px) {
  .steps-grid { grid-template-columns: 1fr 1fr; }
}

.card-body .step-num {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}

.steps-grid .card-media { aspect-ratio: 16 / 10; }

/* ---------- galería con etiqueta ---------- */

.gallery .shot { position: relative; margin: 0; }

.gallery .shot img { display: block; width: 100%; }

.gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem .95rem .8rem;
  background: linear-gradient(to top, rgba(0, 28, 63, .85), rgba(0, 28, 63, 0));
  color: var(--white);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .04em;
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}

/* ---------- columna de imágenes apiladas ---------- */

.media-stack { display: grid; gap: 1.5rem; align-content: start; }

.media-stack img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

.media-stack img:first-child { aspect-ratio: 9 / 10; }
.media-stack img:last-child  { aspect-ratio: 4 / 3; }

/* ---------- sello del fabricante ---------- */

.sello {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.05rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.5rem 1.6rem;
  margin-top: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.sello img { width: min(280px, 100%); height: auto; border-radius: 4px; }

.sello p { margin: 0; font-size: .92rem; color: var(--muted); max-width: 46ch; }
.sello strong { color: var(--ink); }

/* ---------- muestras de mosaico ---------- */

.muestras {
  display: grid;
  gap: 1.5rem 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.muestras figure { margin: 0; }

/* el marco recorta el agua y aísla los blend modes de las cáusticas */
.muestra-vis {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--white);
}

.muestras img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.muestras figcaption {
  margin-top: .7rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.3;
  color: var(--navy);
  text-wrap: balance;
}

/* ---------- muestra "bajo el agua" ----------
   La foto seca miente sobre el color final: el agua absorbe el rojo y
   sube el turquesa. Al pasar el cursor la muestra se sumerge.
   Solo en puntero fino — en táctil no existe el estado hover. */

.agua { display: none; }

@media (hover: hover) and (pointer: fine) {

  .muestras img { transition: transform .5s var(--ease), filter .5s var(--ease); }

  .muestra-vis:hover img {
    transform: scale(1.04);
    filter: saturate(1.3) contrast(1.06) brightness(.94) hue-rotate(-8deg);
  }

  /* el cuerpo de agua sobre la muestra */
  .agua {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s var(--ease);
    background: linear-gradient(to bottom,
      rgba(0, 154, 207, .28) 0%,
      rgba(0, 102, 156, .38) 55%,
      rgba(0, 48, 104, .50) 100%);
  }

  /* dos mallas de cáusticas, distinta escala y deriva */
  .agua::before,
  .agua::after {
    content: "";
    position: absolute;
    inset: -360px;
    mix-blend-mode: screen;
    will-change: transform;
  }

  .agua::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='0' y='0' width='260' height='260'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.013' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0.9 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23c)'/%3E%3C/svg%3E");
    background-size: 260px 260px;
    opacity: .45;
  }

  .agua::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='0' y='0' width='170' height='170'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.026' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0.8 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23c)'/%3E%3C/svg%3E");
    background-size: 170px 170px;
    opacity: .26;
  }

  /* la deriva avanza tiles enteros, así el patrón calza al reiniciar */
  @keyframes deriva-caustica-a {
    to { transform: translate3d(260px, 260px, 0); }
  }

  @keyframes deriva-caustica-b {
    to { transform: translate3d(-340px, 170px, 0); }
  }

  .muestra-vis:hover .agua { opacity: 1; }

  /* las cáusticas solo corren mientras se mira la muestra: 15 muestras
     animando en vacío no aportan nada y consumen GPU */
  .muestra-vis:hover .agua::before { animation: deriva-caustica-a 9s linear infinite; }
  .muestra-vis:hover .agua::after  { animation: deriva-caustica-b 13s linear infinite; }

  /* sin movimiento: se conserva el tinte, que es la información */
  @media (prefers-reduced-motion: reduce) {
    .muestra-vis:hover .agua::before,
    .muestra-vis:hover .agua::after { animation: none; }
    .agua::before { opacity: .3; }
    .agua::after  { opacity: .18; }
  }
}

/* ---------- par de imágenes ---------- */

.media-par { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-content: start; }

.media-par img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* ---------- visor de dos fotos ---------- */

.visor { position: relative; }

.visor img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

/* el display:block de arriba pisaria el atributo hidden */
.visor img[hidden] { display: none; }

/* oculta por defecto: el script la revela, para no dejar un boton muerto
   si el JS no corre */
.visor-flecha { display: none; }

.visor.activo .visor-flecha,
.proceso.activo .visor-flecha {
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  right: .9rem;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background .18s var(--ease), transform .18s var(--ease);
}

.visor.activo .visor-flecha:hover,
.proceso.activo .visor-flecha:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.08);
}

.visor-flecha svg { width: 22px; height: 22px; }

/* ---------- proceso por etapas ---------- */

/* No esconde etapas: las pone en fila y desplaza la pista. Sin JS queda
   una tira con barra de scroll, y en tactil el dedo la desliza sola. */
/* min-width:0 o la pista impone su ancho de contenido como minimo del item
   de grid y se come la columna de texto (317px contra 843px medidos). */
.proceso { position: relative; min-width: 0; }

.proceso-pista {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* aire para que la sombra de la tarjeta no se recorte arriba ni abajo */
  padding-block: .5rem;
}

.proceso-paso { flex: 0 0 100%; scroll-snap-align: start; }

.proceso .card-media { aspect-ratio: 16 / 10; }

/* la barra sobra solo cuando la flecha ya hace el trabajo */
.proceso.activo .proceso-pista { scrollbar-width: none; }
.proceso.activo .proceso-pista::-webkit-scrollbar { display: none; }

/* Capa con el alto exacto de la foto: la flecha se centra sobre la imagen
   y no sobre la tarjeta entera, que es mas alta y crece con el texto. */
.proceso-mando {
  position: absolute;
  inset: .5rem 0 auto 0;
  aspect-ratio: 16 / 10;
  pointer-events: none;
}

.proceso-mando .visor-flecha { pointer-events: auto; }

/* ============================================================
   Variantes de la página de contacto
   ============================================================ */

/* --- variante B: botones sobrios y uniformes --- */

.btn-quiet {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}

.btn-quiet:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

/* ---------- testimonios ---------- */

/* Solo guarda el degradado y el <symbol>: no debe ocupar sitio ni pintar. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.estrellas { display: flex; gap: 3px; }
.estrellas svg { display: block; width: 21px; height: 21px; }
/* van bajo el nombre y la comuna, dentro del pie de la tarjeta */
.testimonio .estrellas { margin-top: .35rem; }

.testimonios { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }

@media (min-width: 820px) { .testimonios { grid-template-columns: 1fr 1fr; } }

/* Con tres tarjetas la ultima quedaria sola en la segunda columna: se estira
   a lo ancho y se centra, para que no se lea como un hueco. */
@media (min-width: 820px) and (max-width: 1019px) {
  .testimonios > .testimonio:last-child:nth-child(3) {
    grid-column: 1 / -1;
    max-width: calc(50% - .875rem);
    justify-self: center;
  }
}

@media (min-width: 1020px) { .testimonios { grid-template-columns: repeat(3, 1fr); } }

.testimonio {
  /* <figure> trae margin: 1em 40px del navegador: dejaba las tarjetas 80px
     mas angostas que su columna. El espaciado lo pone el gap de la grilla. */
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 2.1rem 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.testimonio blockquote {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.005em;
}

.testimonio figcaption {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.testimonio .inicial {
  flex: none;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--steel);
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1rem;
}

.testimonio .quien { line-height: 1.35; }
.testimonio .quien strong { display: block; font-family: var(--f-head); font-size: .97rem; color: var(--navy); }
.testimonio .quien > span:not(.estrellas) { font-size: .88rem; color: var(--muted); }

/* marcador de testimonio pendiente */
.testimonio.pendiente { border-style: dashed; box-shadow: none; background: var(--paper); }
.testimonio.pendiente blockquote { color: var(--muted); font-weight: 400; font-style: italic; }
.testimonio.pendiente .inicial { background: var(--line); color: var(--muted); }

/* ============================================================
   Botón con relleno líquido — el agua sube al pasar el mouse.
   Las ondas son del color del botón en reposo: al girar, muerden
   el borde superior del agua y generan la ondulación.
   ============================================================ */

.btn-liquid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.btn-liquid .rotulo { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .55rem; }

/* el cuerpo de agua, esperando bajo el botón */
.btn-liquid .liquido {
  position: absolute;
  z-index: 1;
  left: -20%;
  right: -20%;
  top: 100%;
  height: 260%;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--steel) 55%, var(--navy) 100%);
  transition: transform 1.25s cubic-bezier(.22, 1, .36, 1);
}

/* dos lóbulos girando justo sobre la línea de flotación */
.btn-liquid .liquido::before,
.btn-liquid .liquido::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  background: var(--white);
}

.btn-liquid .liquido::before {
  top: 11px;
  border-radius: 42%;
  animation: onda-liquida 6s linear infinite;
}

.btn-liquid .liquido::after {
  top: 6px;
  border-radius: 47%;
  opacity: .55;
  animation: onda-liquida 4s linear infinite reverse;
}

.btn-liquid:hover,
.btn-liquid:focus-visible {
  color: var(--white);
  border-color: var(--navy);
  background: var(--white);
}

.btn-liquid:hover .liquido,
.btn-liquid:focus-visible .liquido { transform: translateY(-100%); }

@keyframes onda-liquida {
  from { transform: translate(-50%, -100%) rotate(0deg); }
  to   { transform: translate(-50%, -100%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-liquid .liquido { transition: none; }
  .btn-liquid .liquido::before,
  .btn-liquid .liquido::after { animation: none; }
}

/* ============================================================
   Bloque con texto fijo y columna de imágenes que avanza.
   El texto queda pegado bajo el header mientras las fotos suben;
   cuando la última llega abajo, la página sigue normal.
   ============================================================ */

@media (min-width: 900px) {
  .split-sticky { align-items: start; }

  .split-sticky .split-copy {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
  }

  /* misma altura que el bloque de texto: al inicio solo se ve la primera */
  .split-sticky .media-stack { gap: 2rem; }
  .split-sticky .media-stack img:first-child,
  .split-sticky .media-stack img:last-child { aspect-ratio: 9 / 10; }
}

/* ---------- banda de foto a sangre completa ---------- */

.banda {
  padding: 0;
  height: clamp(300px, 46vh, 520px);
  overflow: hidden;
  background: var(--navy-deep);
}

.banda img { width: 100%; height: 100%; object-fit: cover; display: block; }