/* ============================================================
   OURO · estilos de la portada
   Guía rápida:
   - Colores y medidas generales: bloque :root
   - Largo del scroll (cuánto hay que bajar para completar el giro): --largo-escena
   ============================================================ */

:root{
  --negro:      #07100f;
  --negro-suave:#0d1a18;
  --oro:        #c8a24a;
  --oro-claro:  #e8d2a0;
  --texto:      #f4f2ec;
  --texto-tenue:rgba(244,242,236,.72);

  /* La mitad de abajo de la web va sobre fondo claro. El dorado del logo se
     oscurece: el #c8a24a se lee sobre negro, sobre el hueso desaparece. */
  --hueso:       #fdfcf9;
  --tinta:       #16201e;
  --tinta-media: rgba(22,32,30,.72);
  --tinta-suave: rgba(22,32,30,.65);
  --linea:       rgba(22,32,30,.14);
  --oro-tierra:  #9a7824;
  --oro-hondo:   #7d6320;

  /* Altura total de la portada. 100vh = una pantalla.
     Más alto = el giro se completa más lento. */
  --largo-escena: 180vh;

  --borde: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }

/* El fondo general es el claro: es lo que se ve si alguien rebota el scroll
   al final. La portada no depende de esto, se pinta sola (.escena y .plano). */
html{ background:var(--hueso); }

body{
  margin:0;
  background:var(--hueso);
  color:var(--texto);
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Mientras carga, bloqueamos el scroll para que nadie llegue a un cuadro sin descargar */
body.cargando{ overflow:hidden; height:100%; }

/* ---------- Pantalla de carga ---------- */

.carga{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  background:var(--negro);
  transition:opacity .8s ease, visibility .8s;
}
body.listo .carga{ opacity:0; visibility:hidden; }

.carga__marca{
  width:clamp(130px, 34vw, 190px);
  height:auto;
  display:block;
}

.carga__barra{
  width:min(180px, 40vw); height:1px;
  background:rgba(244,242,236,.16);
  overflow:hidden;
}
.carga__barra span{
  display:block; width:0; height:100%;
  background:var(--oro);
  transition:width .3s ease;
}

.carga__pct{
  margin:0;
  font-size:11px; letter-spacing:.28em;
  color:var(--texto-tenue);
  font-variant-numeric:tabular-nums;
}

/* ---------- La escena: pista de scroll + plano fijo ---------- */

.escena{
  position:relative;
  height:var(--largo-escena);
  background:var(--negro);
}

.plano{
  position:sticky; top:0;
  /* lvh, NO dvh: dvh cambia cada vez que el celular esconde o muestra la barra
     del navegador, y con eso se recalculaba la portada entera en pleno scroll
     (se veía como una vibración). lvh es un valor fijo, así nada se mueve.
     Sus hijos ya venían en lvh: el que estaba desparejo era éste. */
  height:100vh; height:100lvh;
  overflow:hidden;
  background:var(--negro);
}

/* El lienzo tiene altura FIJA (lvh = la pantalla con la barra del navegador
   escondida). Así, cuando en el celular la barra aparece o desaparece, el lienzo
   no cambia de tamaño y la imagen no se estira ni pega saltos. Lo que sobra queda
   recortado por el overflow del plano, como cualquier foto de fondo.
   El object-fit es un seguro extra: si por lo que sea la caja cambiara, la imagen
   se recorta en vez de deformarse. */
.plano__lienzo{
  position:absolute; top:0; left:0;
  display:block;
  width:100%;
  height:100vh;
  height:100lvh;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.4s ease;
}
body.listo .plano__lienzo{ opacity:1; }

/* Oscurecido suave para que los textos se lean sobre la foto */
/* Antes esto oscurecía toda la foto un 44% y con un gris verdoso, que le corría
   los colores. Ahora es solo el borde de abajo, para que la foto no corte en seco
   contra el pie de página. El oscurecido para leer los textos lo trae cada texto. */
.plano__velo{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, rgba(7,16,15,.96) 0%, rgba(7,16,15,.4) 4%, rgba(7,16,15,0) 13%);
}

/* ---------- Textos que se van sumando con el scroll ----------
   Cada bloque aparece cuando el scroll llega a su punto y se queda: al final del
   giro se ven todos juntos alrededor de la botella. Por eso cada uno tiene su
   lugar fijo y no se pisan entre sí. */

.textos{ position:absolute; inset:0; pointer-events:none; }

.texto{
  position:absolute;
  max-width:min(30ch, 30vw);
  opacity:0;
  will-change:opacity, transform;
}
.texto > *{ margin:0; position:relative; }

/* Detrás de cada bloque va un oscurecido del tamaño justo del bloque, con los
   bordes desvanecidos. "closest-side" hace que el degradado termine en el borde de
   la caja del texto, así no invade la foto más allá de lo necesario. */
.texto--tabla::before{
  background:radial-gradient(closest-side at 50% 50%,
              rgba(0,0,0,.86) 0%, rgba(0,0,0,.7) 52%, rgba(0,0,0,.28) 82%, rgba(0,0,0,0) 100%) !important;
}
.texto::before{
  content:''; position:absolute; inset:-16px -34px;
  background:radial-gradient(closest-side at 50% 50%,
              rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.22) 78%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
/* Dónde va cada uno */
/* La frase se apoya a la izquierda de la tapa de la botella. La tapa cae
   siempre cerca del 59% del ancho y del 9% de la altura, así que el bloque
   termina en el 52,5% y queda a un costado sin taparla. */
.texto--marca{
  right:47.5%;
  top:calc(8.9% - 17px);
  text-align:right;
}

/* El índice de la web: cada nombre aparece con el scroll y lleva a su sección */
.texto--indice{
  display:flex; align-items:baseline; gap:14px;
  text-decoration:none;
  pointer-events:auto;               /* los demás bloques no reciben clics, estos sí */
  padding:6px 0;
}
.indice__n{
  font-size:clamp(10px, 1.1vw, 12px);
  letter-spacing:.2em;
  color:var(--oro);
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8);
}
.indice__t{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(22px, 3vw, 36px);
  /* peso 500 y sombra reforzada: la serif tiene trazos mas finos que la sans
     y sobre las zonas iluminadas del agua se perdia */
  font-weight:500;
  letter-spacing:0;
  color:var(--texto);
  text-shadow:0 1px 2px rgba(0,0,0,.98), 0 0 7px rgba(0,0,0,.92), 0 0 18px rgba(0,0,0,.75), 0 0 34px rgba(0,0,0,.5);
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.texto--indice:hover .indice__t{ color:var(--oro-claro); border-bottom-color:rgba(200,162,74,.6); }

/* Dónde va cada uno: dos a la izquierda, dos a la derecha, sin tocar la botella */
.texto--i1{ left:16%; top:29%; }
.texto--i2{ right:9%;  top:25%; }
.texto--i3{ left:16%; top:47%; }
.texto--i4{ right:9%;  top:45%; }
.texto--i5{ left:16%; top:65%; }
.texto--i2, .texto--i4{ flex-direction:row-reverse; }

.volanta{
  color:rgba(242,223,180,.95);
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 7px rgba(0,0,0,.8);
}

.volanta{
  font-size:clamp(9px, 1.5vw, 12px);
  letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase;
  color:var(--texto-tenue);
}

.bajada{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(17px, 2.4vw, 24px);
  font-weight:400;
  font-style:italic;
  letter-spacing:.01em;
  color:var(--texto);
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 7px rgba(0,0,0,.75), 0 0 20px rgba(0,0,0,.45);
}

.dato{
  font-size:clamp(26px, 4.4vw, 46px);
  font-weight:300;
  letter-spacing:.04em;
  line-height:1;
  color:var(--oro-claro);
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.7), 0 0 22px rgba(0,0,0,.45);
  margin-bottom:.3em !important;
}

.titulo{
  font-size:clamp(18px, 2.6vw, 27px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.2;
  margin-bottom:.45em !important;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.72), 0 0 22px rgba(0,0,0,.45);
}

.parrafo{
  font-size:clamp(13px, 1.6vw, 16px);
  font-weight:400;
  line-height:1.6;
  color:rgba(244,242,236,.94);
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.7), 0 0 16px rgba(0,0,0,.4);
}

/* ---------- Indicador de "scrolleá" ---------- */

.pista{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:var(--texto-tenue);
  text-shadow:0 1px 4px rgba(0,0,0,.9), 0 2px 18px rgba(0,0,0,.7);
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
body.listo .pista{ opacity:1; transition-delay:1.4s; }
body.listo .pista.oculta{ opacity:0; transition-delay:0s; }

.pista i{
  width:1px; height:38px;
  background:linear-gradient(to bottom, var(--oro), transparent);
  animation:baja 2.4s ease-in-out infinite;
}
@keyframes baja{
  0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.4; }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}

/* ---------- Entrada de la portada al terminar de cargar ---------- */

body.listo .texto--portada > *{ animation:entra 1.5s cubic-bezier(.16,1,.3,1) both; }
body.listo .texto--portada .volanta { animation-delay:.35s; }
body.listo .texto--portada .logotipo{ animation-delay:.5s; }
body.listo .texto--portada .bajada  { animation-delay:.75s; }

@keyframes entra{
  from{ opacity:0; transform:translateY(22px); filter:blur(6px); }
  to  { opacity:1; transform:none;             filter:none; }
}

/* ---------- Pie ---------- */

.pie{
  position:relative; z-index:2;
  background:var(--negro);
  border-top:1px solid rgba(200,162,74,.16);
  padding:clamp(46px, 9vw, 88px) var(--borde) calc(clamp(34px, 6vw, 60px) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center;
}
.pie__marca{
  width:150px; height:auto; display:block;
}
.pie__datos{ margin:0; display:flex; gap:12px; align-items:center; font-size:14px; color:var(--texto-tenue); }
.pie__datos a{ color:var(--texto); text-decoration:none; border-bottom:1px solid rgba(200,162,74,.45); padding-bottom:2px; transition:color .25s; }
.pie__datos a:hover{ color:var(--oro); }
.pie__legal{ margin:0; font-size:11px; letter-spacing:.16em; color:rgba(244,242,236,.38); }

/* ---------- Celulares y pantallas angostas ---------- */

@media (max-width:820px){
  /* En vertical la botella ocupa el centro, así que los bloques se apilan abajo */
  .texto{ max-width:none !important; left:var(--borde); right:var(--borde); top:auto; text-align:left; }
  /* baja lo que ocupa el logo mas su linea legal de dos renglones */
  .texto--marca{ top:calc(var(--borde) + 22vw + 82px); bottom:auto; }
  .texto--i1{ bottom:calc(34vh + env(safe-area-inset-bottom)); }
  .texto--i2{ bottom:calc(27vh + env(safe-area-inset-bottom)); }
  .texto--i3{ bottom:calc(20vh + env(safe-area-inset-bottom)); }
  .texto--i4{ bottom:calc(13vh + env(safe-area-inset-bottom)); }
  .texto--i5{ bottom:calc(6vh  + env(safe-area-inset-bottom)); }
  .texto--i2, .texto--i4{ flex-direction:row; }
  .texto::before{ inset:-22px -40px; }
  /* En vertical los textos van todos abajo: una sola banda, negra neutra */
  .texto::before{
    background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 26%, rgba(0,0,0,.14) 48%, rgba(0,0,0,0) 62%) !important;
  }

  /* En vertical la botella ocupa el centro: los textos van abajo */
  .texto--portada{
    justify-content:flex-end; align-items:center; text-align:center;
    padding-bottom:calc(var(--borde) + 96px + env(safe-area-inset-bottom));
    gap:12px;
  }
  .texto--portada > *{ max-width:100%; }
  .texto--portada .logotipo{ width:clamp(150px, 48vw, 219px); }
  .texto--lado{ padding-bottom:calc(var(--borde) + 18px + env(safe-area-inset-bottom)); }
  .texto--cierre{ padding-bottom:calc(var(--borde) + 18px + env(safe-area-inset-bottom)); }
}

/* ---------- Si el sistema pide menos animaciones ----------
   Mostramos la foto quieta de fondo y los textos uno debajo del otro. */

@media (prefers-reduced-motion: reduce){
  .escena{ height:auto; }
  .plano{ position:static; height:auto; overflow:visible; }
  .plano__lienzo{ position:fixed; inset:0; width:100vw; height:100vh; }
  .plano__velo{ position:fixed; }
  .textos{ position:relative; inset:auto; }
  .texto{
    position:relative; inset:auto;
    opacity:1 !important; transform:none !important;
    min-height:100vh; min-height:100lvh;
  }
  .pista{ display:none; }
  .plano__lienzo, .carga{ transition:none; }
  body.listo .texto--portada > *{ animation:none; }
  .pista i{ animation:none; }
}


/* ============================================================
   SEGUNDA PARTE: las secciones que aparecen cuando termina el giro
   ============================================================ */

.capitulo{
  position:relative; z-index:2;
  background:var(--negro);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(28px, 5vw, 72px);
  padding:clamp(60px, 10vw, 130px) var(--borde);
  max-width:1400px;
  margin:0 auto;
}
/* Una sí y una no, la foto va del otro lado */
.capitulo--invertido .capitulo__foto{ order:2; }

.capitulo__foto img{
  width:100%; height:auto; display:block;
  border-radius:3px;
}

/* La foto de la seccion "Ouro" venia 0,56 de ancho/alto, muy alargada.
   La recortamos a 0,78 (mas cuadrada, sin llegar a cuadrado) dejando ver
   la cara de la persona arriba, que es lo que mas responde a "Nosotros". */
#agua .capitulo__foto{ position:relative; }
#agua .capitulo__foto img{
  aspect-ratio:0.78 / 1;
  object-fit:cover;
  object-position:50% 28%;
  /* La foto original es fria y clinica (guardapolvo, luz de planta): la
     entonamos hacia el dorado del resto de la web para que no desentone
     con la portada. */
  filter:sepia(.22) saturate(1.12) contrast(1.02) brightness(1.01);
}
#agua .capitulo__foto::after{
  content:'';
  position:absolute; inset:0;
  border-radius:3px;
  background:linear-gradient(165deg, rgba(168,133,47,.16) 0%, rgba(168,133,47,.04) 45%, rgba(22,32,30,.1) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Marca dónde va cada foto mientras no estén las de verdad */
.hueco{
  aspect-ratio:4 / 3;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  border:1px dashed rgba(200,162,74,.4);
  border-radius:3px;
  background:rgba(200,162,74,.05);
  color:rgba(200,162,74,.7);
  font-size:13px; letter-spacing:.08em;
}

.capitulo__texto{ max-width:56ch; }

/* Los titulos van en serif (Playfair Display) y el resto en Jost. La serif
   se ve mas grande a igual tamano, por eso baja de 42 a 40, y no lleva
   separacion extra entre letras: las serifas ya dan el aire. */
.capitulo__titulo{
  margin:.35em 0 .7em;
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size:clamp(26px, 3.4vw, 40px);
  font-weight:400;
  letter-spacing:0;
  line-height:1.18;
  color:var(--texto);
}

/* La linea corta dorada que separa el titulo de lo que sigue */
.capitulo__titulo::after{
  content:'';
  display:block;
  width:50%; height:1px;
  margin-top:.62em;
  background:var(--oro);
}
/* En contacto el texto va centrado, asi que la linea tambien: sin esto se
   pega al borde izquierdo de la pantalla, porque el titulo ocupa todo el ancho */
.contacto .capitulo__titulo::after{ margin-inline:auto; }

/* Bajada de "Proceso": una linea corta en itálica entre el título y los
   párrafos, a modo de lema. Vive solo en el lado claro, por eso no necesita
   los valores oscuros de base que sí lleva ".bajada" (esa es de la portada). */
.proceso__bajada{
  margin:.5em 0 0;
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(16px, 1.8vw, 19px);
  color:var(--oro-hondo);
}

.parrafo--largo{
  text-shadow:none;
  color:rgba(244,242,236,.72);
  margin-bottom:1.35em !important;
  font-size:clamp(15px, 1.55vw, 17px);
  letter-spacing:.035em;
  line-height:1.85;
}
.parrafo--largo:last-child{ margin-bottom:0 !important; }

/* Acento dorado puntual dentro de un parrafo: para resaltar un hecho de
   marca (el lugar, una propiedad) sin agregar un color nuevo al sistema. */
.acento{ color:var(--oro-hondo); font-weight:500; }

/* Remate de la seccion "Ouro": la foto es mas alta que el bloque de texto
   (recorte 0,78:1) y con align-items:center sobraba mucho aire arriba y
   abajo. En vez de forzar el layout, se llena ese lugar con un dato de
   marca en vez de dejarlo vacio. */
#agua .capitulo__desde{
  margin:clamp(48px, 8vw, 100px) 0 0;
  padding-top:clamp(20px, 3vw, 32px);
  border-top:1px solid var(--linea);
  font-family:'Playfair Display', Georgia, serif;
  font-weight:400;
  font-size:clamp(21px, 2.4vw, 28px);
  letter-spacing:.01em;
  color:var(--tinta-media);
}

/* Los pasos del proceso */
.pasos{
  list-style:none; margin:26px 0 0; padding:0;
  display:grid; gap:12px;
}
.pasos li{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(244,242,236,.1);
  font-size:clamp(15px, 1.6vw, 17px);
  color:rgba(244,242,236,.85);
}
.pasos span{
  color:var(--oro); font-size:12px; letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
}

.capitulo--propiedades{
  grid-template-columns:1fr;
  gap:clamp(10px, 1.4vw, 18px);
  padding-top:clamp(56px, 6vw, 76px);
  padding-bottom:clamp(20px, 3vw, 32px);
}
.capitulo--propiedades > .volanta{ margin:0; line-height:1; }
.capitulo--propiedades .capitulo__titulo{ max-width:44ch; margin:0; line-height:1.05; }
.capitulo--propiedades .capitulo__titulo::after{ margin-top:.3em; }

/* Cards de vidrio: relleno traslucido con un degrade dorado que va de un
   brillo claro arriba-izquierda a un tono mas profundo abajo-derecha, como
   luz atravesando un panel de vidrio. El reflejo interior (::before) y la
   sombra calida son lo que venden la transparencia -- sin ellos seria solo
   un rectangulo con color plano. */
.agua-rasgos{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px, 2vw, 22px);
  margin-top:clamp(10px, 1.6vw, 18px);
}
/* Las tres columnas del agua: manda el dato. La cifra va arriba, grande y en
   dorado, porque es lo unico duro que tiene esta seccion (son numeros de
   laboratorio reales); debajo el nombre y la explicacion. Sin caja: el
   degradado dorado con desenfoque venia del diseno oscuro y sobre el crema
   solo agregaba ruido. */
.agua-rasgo{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 clamp(8px, 1.4vw, 16px);
  border-left:1px solid var(--linea);
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease-out, transform .45s ease-out;
}
.agua-rasgo:first-child{ border-left:0; }

.agua-rasgo__dato{
  margin:0 0 .28em;
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1;
  letter-spacing:.005em;
  color:var(--oro-hondo);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:4px;
}
/* Cuando el dato es una palabra y no una cifra, va mas chico: "Manantial"
   tiene nueve letras y al tamano de un numero se sale de la columna. */
.agua-rasgo__dato--palabra{ font-size:clamp(17px, 1.9vw, 26px); }

.agua-rasgo__unidad{
  font-family:'Jost', sans-serif;
  font-weight:400;
  font-size:.82em;
  letter-spacing:.06em;
  color:var(--tinta-suave);
}

.agua-rasgo:nth-child(1){ transition-delay:0s; }
.agua-rasgo:nth-child(2){ transition-delay:.15s; }
.agua-rasgo:nth-child(3){ transition-delay:.3s; }
.visible .agua-rasgo{ opacity:1; transform:none; }

/* Abajo va el dato. Sin mayusculas forzadas: "pH +8" en versalita se leeria
   "PH +8" y se pierde la notacion quimica. */
.agua-rasgo h3{
  margin:0;
  font-family:'Jost', sans-serif;
  font-weight:400;
  letter-spacing:.06em;
  font-size:clamp(11px, 1.2vw, 13px);
  color:var(--tinta-media);
  display:flex; align-items:baseline; gap:3px;
}
/* El renglon se corta a unos 24 caracteres: en pantalla grande cada columna
   mide casi 370px y el texto se estiraba en renglones larguisimos, incomodos
   de leer. En celular la columna ya es mas angosta que este tope, asi que ahi
   no cambia nada. */
.agua-rasgo p:not(.agua-rasgo__dato){
  margin:9px auto 0;
  max-width:24ch;
  font-size:13px; line-height:1.5;
  color:var(--tinta-media);
}

/* El relato usa el mismo tamaño y tipo de letra que el texto de la sección
   anterior ("Ouro"): hereda .parrafo--largo tal cual, sin override propio. */
.agua-relato{ max-width:56ch; }

/* Vuelve a ir en fila junto al texto: columna de texto mas ancha, el panel
   de analisis a la derecha con su propio ancho maximo (no estira). */
.agua-fila{
  display:grid;
  grid-template-columns:minmax(0, 560px) 1fr;
  gap:clamp(24px, 4vw, 48px);
  align-items:center;
  margin-top:clamp(10px, 1.6vw, 18px);
}

/* Panel de analisis quimico: sin borde, sin caja, solo tipografia, aire y
   lineas finas separando filas/columnas. */
.agua-analisis{
  position:relative;
  overflow:hidden;
  max-width:620px;
  margin:0 auto;
  padding:0 clamp(6px, 1.4vw, 16px);
  text-align:center;
}
.agua-analisis__cabecera{ position:relative; z-index:1; }
.agua-analisis__titulo{
  margin:0;
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:clamp(14px, 1.6vw, 17px);
  color:var(--tinta);
}
.agua-analisis__regla{
  display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:150px; margin:9px auto 0;
}
.agua-analisis__regla::before, .agua-analisis__regla::after{
  content:''; flex:1; height:1px; background:rgba(200,162,74,.4);
}
.agua-analisis__regla span{
  flex:none; width:4px; height:4px; background:var(--oro);
  transform:rotate(45deg);
}
.agua-analisis__sub{
  margin:8px 0 0;
  font-size:9px;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:var(--oro-hondo);
}

/* La tabla del análisis: cuadro acostado, cuatro columnas de dos filas,
   separadas solo por lineas finas (verticales entre columnas, una
   horizontal entre las dos filas) -- sin cajas, sin bordes gruesos. */
.analisis{
  position:relative; z-index:1;
  margin:clamp(18px, 2.6vw, 28px) 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:clamp(10px, 1.8vw, 20px);
  row-gap:0;
}
.analisis__item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:clamp(11px, 1.7vw, 15px) clamp(4px, 1vw, 10px);
  border-top:1px solid var(--linea);
  border-left:1px solid var(--linea);
}
.analisis__item:nth-child(-n+4){
  border-top:0; padding-top:0;
}
.analisis__item:nth-child(4n+1){
  border-left:0;
}
.analisis dt{
  margin:0; font-weight:400;
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform:uppercase; letter-spacing:.14em; text-indent:.14em;
  font-size:10px;
  color:var(--tinta-media);
}
.analisis dd{
  margin:0; font-weight:500;
  display:flex; align-items:baseline; justify-content:center; gap:4px;
  font-family:'Playfair Display', Georgia, serif;
  color:var(--oro-hondo);
  font-variant-numeric:tabular-nums;
  font-size:clamp(15px, 2vw, 20px);
  line-height:1;
}
.analisis__unidad{
  font-family:'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:10px;
  letter-spacing:.02em;
  color:var(--tinta-suave);
}

.agua-analisis__pie{
  position:relative; z-index:1;
  margin:clamp(16px, 2.5vw, 24px) auto 0;
  padding-top:clamp(10px, 1.5vw, 13px);
  max-width:48ch;
  border-top:1px solid var(--linea);
  font-size:10px;
  letter-spacing:.02em;
  color:var(--tinta-suave);
}

@media (max-width:820px){
  .agua-rasgos{ grid-template-columns:1fr; }
  .agua-fila{ grid-template-columns:1fr; }
}

/* Debajo de los 480px, el cuadro acostado (4 columnas) queda muy apretado:
   pasa a 2 columnas de 4 filas, con lineas verticales solo en la columna
   derecha y horizontales entre cada fila. */
@media (max-width:480px){
  .analisis{ grid-template-columns:repeat(2, 1fr); }
  .analisis__item{ border-left:0; }
  .analisis__item:nth-child(even){ border-left:1px solid var(--linea); }
  .analisis__item:nth-child(3), .analisis__item:nth-child(4){
    border-top:1px solid var(--linea);
    padding-top:clamp(11px, 1.7vw, 15px);
  }
}

.volanta--interna{ display:block; margin-top:36px !important; color:var(--oro); }

/* "La Carolina": el texto es mas largo que en las otras secciones (4
   parrafos) y la galeria de fotos tiene su propia altura, asi que en vez
   del centrado vertical que usan Ouro/Proceso, arrancan las dos columnas
   parejas arriba. La columna de texto se angosta un poco: el mosaico
   desordenado de al lado necesita mas aire para que el corrimiento de
   las fotos no choque contra el texto. */
.capitulo--carolina{
  align-items:start;
  grid-template-columns:.85fr 1.15fr;
}

/* Mosaico de 4 fotos "desordenado" a propósito: distintas proporciones y
   un corrimiento (transform) individual en cada una para que no queden
   alineadas en una grilla prolija -- como fotos dejadas sobre una mesa,
   no un catalogo. El transform no mueve a las vecinas (no como cambiar
   el grid), asi que no hay riesgo de que se pisen. object-fit recorta
   cada foto a su proporcion sin importar el encuadre original. */
/* El collage va en proporciones, no en medidas fijas, asi es el mismo dibujo
   en el celular y en la computadora: el contenedor tiene una proporcion fija
   (350 x 495, la que quedo armada en celular) y las filas se reparten ese alto
   en partes de 95, 195 y 185. Con cualquier ancho, el resultado es identico. */
.carolina__galeria{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  grid-template-rows:95fr 195fr 185fr;
  aspect-ratio:350 / 495;
  column-gap:2.86%;
  row-gap:2%;
}
.carolina__foto{
  margin:0;
  overflow:hidden;
  background:var(--linea);
  box-shadow:0 24px 40px -30px rgba(22,32,30,.4);
}
.carolina__foto img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
}
/* Quien va en cada casillero. Los nth-child son el orden en el HTML:
   1 manantial · 2 calle · 3 arco · 4 camino aereo */
.carolina__galeria > .carolina__foto{
  width:100%;
  margin:0;
  aspect-ratio:auto;
  transform:none;
}
.carolina__galeria > .carolina__foto:nth-child(4){ grid-column:1; grid-row:1 / 3; }
.carolina__galeria > .carolina__foto:nth-child(2){ grid-column:2; grid-row:1; }
.carolina__galeria > .carolina__foto:nth-child(1){ grid-column:2; grid-row:2; }
.carolina__galeria > .carolina__foto:nth-child(3){ grid-column:1 / 3; grid-row:3; }
/* el recorte del arco sale casi todo de abajo, para no perder el cielo */
.carolina__galeria > .carolina__foto:nth-child(3) img{ object-position:50% 20%; }
@media (max-width:820px){
  /* El collage ya viene en proporciones desde la regla general: en celular
     solo cambia que el texto y las fotos se apilan. */
  .capitulo--carolina{ grid-template-columns:1fr; }
}

/* Contacto */
.contacto{
  position:relative; z-index:2;
  background:var(--negro);
  padding:clamp(60px, 10vw, 130px) var(--borde);
  text-align:center;
  border-top:1px solid rgba(200,162,74,.16);
}
.contacto .volanta{ display:block; }
.contacto__intro{ margin:0 auto 40px !important; max-width:46ch; letter-spacing:.035em; line-height:1.85; }

.contacto__datos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(24px, 6vw, 80px);
}
.contacto__datos a{
  display:flex; flex-direction:column; gap:8px;
  color:var(--texto); text-decoration:none;
  font-size:clamp(16px, 1.9vw, 20px);
  transition:color .25s;
}
.contacto__datos a:hover{ color:var(--oro); }
.contacto__datos .volanta{ color:rgba(200,162,74,.75); }

/* Aparecen suavemente al llegar scrolleando */
.capitulo, .contacto{ --entrada:0; }
.capitulo__texto, .capitulo__foto, .capitulo__cuerpo, .contacto > *{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.visible .capitulo__texto, .visible .capitulo__foto, .visible .capitulo__cuerpo, .visible > *{
  opacity:1; transform:none;
}
.visible .capitulo__texto{ transition-delay:.12s; }
.visible .capitulo__texto{ transition-delay:.12s; }

/* En "Ouro" el bloque de texto no aparece todo junto: cada linea entra por
   separado y en cascada (volanta, titulo, parrafo 1, parrafo 2), reusando
   la misma clase "visible" que ya pone el IntersectionObserver. Se apaga
   el fade del bloque entero (ya lo hacen los hijos) para que no se sume
   una segunda transicion de opacidad encima. */
/* Ya no depende de un reloj ni de la clase "visible": el script mide cuanto
   scrolleaste vos y mueve la opacidad de cada linea en directo, igual que el
   parrafo de la portada. Sin transition: si hubiera una, la linea llegaria
   siempre un poco atrasada respecto de tu scroll real, y se sentiria pegado
   en vez de agarrado a la rueda del mouse. Si el JS no corre, quedan a la
   vista (abajo, en @media reduced-motion, se fuerza lo mismo por las dudas). */
#agua .capitulo__texto{ opacity:1; transform:none; transition:none; }
/* La foto de "Ouro" tambien se controla por scroll, no por la clase
   "visible" generica: se apaga esa transicion y el JS pone los valores. */
#agua .capitulo__foto{ opacity:1; transform:none; transition:none; }
#agua .capitulo__texto > *{ opacity:1; transform:none; }


@media (max-width:820px){
  .capitulo{ grid-template-columns:1fr; gap:26px; }
  .capitulo--invertido .capitulo__foto{ order:0; }
  .capitulo__texto{ max-width:none; }
  .contacto__datos{ gap:28px; flex-direction:column; align-items:center; }
}

@media (prefers-reduced-motion: reduce){
  .capitulo__texto, .capitulo__foto, .capitulo__cuerpo, .contacto > *,
  #agua .capitulo__texto > *, .agua-rasgo{
    opacity:1; transform:none; transition:none;
  }
}

/* ============================================================
   PALETA CLARA · todo lo que va debajo de la portada
   El contenedor .claro pinta el fondo de borde a borde y acá adentro
   se invierte el color de cada texto, línea y borde. Para volver al
   fondo oscuro alcanza con borrar este bloque entero.
   ============================================================ */

.claro{
  position:relative; z-index:2;
  background:var(--hueso);
  color:var(--tinta);
}

/* Las secciones ya no pintan fondo: lo pone .claro, que sí llega a los bordes */
.claro .capitulo,
.claro .contacto,
.claro .pie{ background:transparent; }

.claro .contacto,
.claro .pie{ border-top-color:var(--linea); }

/* Títulos y textos corridos */
.claro .capitulo__titulo{ color:var(--tinta); }
.claro .parrafo--largo{ color:var(--tinta-media); }
.claro .volanta{ color:var(--oro-hondo); text-shadow:none; }
.claro .contacto__intro{ color:var(--tinta-media); }

/* Los pasos del proceso */
.claro .pasos li{ color:var(--tinta-media); border-bottom-color:var(--linea); }
.claro .pasos span{ color:var(--oro-hondo); }

/* El marcador de dónde va cada foto */
.claro .hueco{
  border-color:rgba(22,32,30,.22);
  background:rgba(22,32,30,.03);
  color:var(--tinta-suave);
}

/* Contacto */
.claro .contacto__datos a{ color:var(--tinta); }
.claro .contacto__datos a:hover{ color:var(--oro-tierra); }
.claro .contacto__datos .volanta{ color:var(--oro-hondo); }

/* Pie */
.claro .pie__datos{ color:var(--tinta-media); }
.claro .pie__datos a{ color:var(--tinta); border-bottom-color:rgba(154,120,36,.5); }
.claro .pie__datos a:hover{ color:var(--oro-tierra); }
.claro .pie__legal{ color:rgba(22,32,30,.65); }

/* ============================================================
   BARRA DE NAVEGACIÓN
   Fija arriba, acompaña toda la web. Tiene dos estados:
   - sobre la portada: transparente, letras claras, sin logo
   - .barra--clara (de las secciones para abajo): fondo crema,
     letras oscuras y aparece el logo chico
   El cambio de estado lo pone script.js según el scroll.
   ============================================================ */

.barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--borde);
  /* menos aire arriba que abajo: el contenido queda mas pegado al borde */
  padding-top:calc(7px + env(safe-area-inset-top));
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}

/* El oscurecido de la portada vive en un pseudo-elemento que se estira 52px
   por debajo de la barra: asi el desvanecido es largo y no se ve el corte,
   sin que la barra crezca de alto. En las secciones se apaga. */
.barra::before{
  content:''; position:absolute; z-index:-1;
  top:0; left:0; right:0; bottom:-52px;
  background:linear-gradient(to bottom,
              rgba(7,16,15,.7) 0%, rgba(7,16,15,.52) 34%,
              rgba(7,16,15,.24) 66%, rgba(7,16,15,0) 100%);
  transition:opacity .4s ease;
  pointer-events:none;
}
.barra--clara::before{ opacity:0; }

/* El logo chico: no está en la portada (ahí ya está el grande) y entra al
   llegar a las secciones */
.barra__marca{
  margin:0;
  display:flex; align-items:center; gap:clamp(12px, 1.3vw, 18px);
  line-height:0;
}
.barra__marca a{ display:block; line-height:0; }
.barra__marca img{
  width:clamp(104px, 10vw, 142px); height:auto; display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.55));
  transition:filter .4s ease;
}
.barra--clara .barra__marca img{ filter:none; }

.barra__menu{ display:flex; align-items:center; gap:clamp(18px, 2.6vw, 40px); }
.barra__menu a{
  font-family:'Jost', sans-serif;
  font-size:13px; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase;
  color:rgba(244,242,236,.92);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  text-shadow:0 1px 3px rgba(0,0,0,.75);
  transition:color .25s, border-color .25s;
  white-space:nowrap;
}
.barra__menu a:hover{ color:var(--oro-claro); border-bottom-color:rgba(200,162,74,.65); }

/* Estado claro: de las secciones para abajo */
.barra--clara{
  background:var(--hueso);
  border-bottom-color:var(--linea);
  /* Aca vivia un backdrop-filter:saturate(1.1). Se saco: no se veia -el
     fondo crema opaco de .barra::after lo tapa entero- y en cambio rompia
     el menu de celular. backdrop-filter convierte al elemento en el marco
     de referencia de sus hijos position:fixed, asi que el panel del menu
     dejaba de medir la pantalla entera y se encogia al alto de la barra:
     el fondo negro desaparecia y los nombres quedaban flotando sueltos
     sobre la seccion. */
}
.barra--clara .barra__menu a{ color:var(--tinta); text-shadow:none; }
.barra--clara .barra__menu a:hover{ color:var(--oro-hondo); border-bottom-color:rgba(154,120,36,.6); }

/* El botón del menú en celular: dos rayitas que se cruzan al abrir */
.barra__boton{
  display:none;
  width:42px; height:34px;
  padding:0; margin:0; border:0; background:none; cursor:pointer;
  position:relative;
}
.barra__boton span{
  position:absolute; left:9px; right:9px; height:1px;
  background:var(--texto);
  transition:transform .3s ease, opacity .3s ease, background .4s ease;
}
.barra__boton span:nth-child(1){ top:13px; }
.barra__boton span:nth-child(2){ top:20px; }
.barra--clara .barra__boton span{ background:var(--tinta); }
.barra--abierta .barra__boton span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.barra--abierta .barra__boton span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

@media (max-width:900px){
  .barra__boton{ display:block; }
  /* El menú pasa a ser un panel a pantalla completa */
  .barra__menu{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; align-items:center;
    gap:clamp(20px, 5vh, 40px);
    background:var(--negro);
    opacity:0; visibility:hidden;
    transition:opacity .35s ease, visibility .35s;
  }
  .barra--abierta .barra__menu{ opacity:1; visibility:visible; }
  .barra__menu a{
    font-family:'Playfair Display', Georgia, serif;
    font-size:clamp(24px, 7vw, 34px);
    letter-spacing:.01em; text-transform:none;
    color:var(--texto) !important;
    text-shadow:none;
  }
  /* con el menú abierto la barra siempre va en claro-sobre-oscuro */
  .barra--abierta .barra__boton span{ background:var(--texto); }
  .barra--abierta.barra--clara{ background:transparent; border-bottom-color:transparent; }
  .barra--abierta .barra__marca{ opacity:0; }
}

/* Con el menú abierto no se scrollea el fondo */
body.menu-abierto{ overflow:hidden; }

/* ============================================================
   PORTADA EN DOS MITADES
   Izquierda: la marca sobre fondo claro. Derecha: la botella girando.
   Los cuadros de esta versión están recortados en vertical (frames/v),
   así pesan la mitad que los de pantalla completa.
   ============================================================ */

.plano{ background:var(--hueso); }

/* El lienzo deja de ocupar todo: vive en la mitad derecha, y arranca DEBAJO
   de la barra para que no le corte la punta a la botella. --alto-barra la mide
   script.js en vivo, así no depende de un número clavado. */
.plano__lienzo{
  left:50%;
  width:50%;
  top:0;
  height:100vh; height:100lvh;
}
/* El oscurecido de abajo ya no hace falta: no hay texto sobre la foto */
.plano__velo{ display:none; }

.portada__lado{
  position:absolute; top:0; left:0; bottom:0; width:50%;
  z-index:4;
  display:flex; flex-direction:column; justify-content:center;
  /* El bloque va centrado, asi que el espacio de abajo lo empuja hacia arriba:
     con este valor el conjunto sube unos 70px respecto del centro exacto. */
  padding:var(--alto-barra, 80px) clamp(28px, 5vw, 84px) clamp(80px, 16vh, 160px);
}

/* Playfair Display: la misma serif que usan todos los demas titulos del
   sitio. Antes iba en Fraunces, una serif distinta que no se repetia en
   ningun otro lado. --oro-hondo es el dorado "de verdad" que ya usan el
   analisis y el contacto (5,56 de contraste, sobra margen): --oro-fino
   solo se eligio en su momento por ser el mas clarito que pasaba el
   minimo, no por como se veia. */
.portada__etiqueta{
  margin:0 0 .9em;
  font-family:'Jost', sans-serif;
  font-size:11px;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  color:var(--tinta);
}

.portada__titulo{
  margin:0;
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight:500;
  font-size:clamp(31px, 4.9vw, 74px);
  /* 1.1 dejaba muy poco margen para el descendente de la "g" (origen): el
     degrade recortado en texto lo pintaba cortado contra el borde de la
     caja de linea. Con mas aire vertical entra completo. */
  line-height:1.22;
  letter-spacing:-.005em;
  color:var(--oro-hondo);
  background:linear-gradient(160deg, #1a1408 0%, #7d6320 28%, #e8d2a0 50%, #9a7824 70%, #1a1408 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* De 901px para arriba el titulo va en dos renglones. Sin este tope, en un
   monitor de 1920 la columna crece pero el tamano se frena en 74px y el
   titulo volvia a entrar en una sola linea. 8em corta siempre igual. */
@media (min-width:901px){
  .portada__titulo{ max-width:8em; }
}

/* Cada palabra del parrafo se enciende a medida que se scrollea la portada.
   Los <span class="palabra"> los crea el script: si el JS no corre, no hay
   spans, esta regla no aplica y el parrafo se ve entero como siempre. */
.portada__texto .palabra{ opacity:.07; }
@media (prefers-reduced-motion: reduce){
  .portada__texto .palabra{ opacity:1 !important; }
}

.portada__texto{
  margin:1.5em 0 0;
  max-width:36ch;
  font-size:clamp(15px, 1.55vw, 17px);
  line-height:1.85;
  letter-spacing:.035em;
  color:var(--tinta-media);
}

/* No es un enlace: es un aviso de que hay que seguir bajando. Por eso es un
   <span> y no un <a>, no tiene hover ni cursor de mano, y no se puede clickear.
   El peso 500 es porque heredaba el 300 del body y casi no se veia. */
.portada__pista{
  margin-top:clamp(40px, 5.6vw, 80px);
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:14px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--oro-hondo);
}
/* aria-hidden en el SVG para que el lector de pantalla lea solo el texto.
   Como ya no es clickeable no hay hover que dispare nada, asi que el movimiento
   va solo: la flecha baja y vuelve, en ciclo. Anima solo transform y opacidad,
   que el navegador resuelve sin recalcular el resto de la pagina. */
/* El salto: se agacha, sube rapido, cae acelerando, da un rebote chico y
   descansa hasta cerrar el ciclo. Cada tramo lleva su propia curva para que
   la subida frene y la caida acelere, como caeria algo de verdad. */
@keyframes saltaFlecha{
  0%   { transform:translateY(0);    animation-timing-function:cubic-bezier(.4,0,.6,1); }
  8%   { transform:translateY(2px);  animation-timing-function:cubic-bezier(.2,.6,.3,1); }
  24%  { transform:translateY(-9px); animation-timing-function:cubic-bezier(.7,0,.9,.6); }
  38%  { transform:translateY(0);    animation-timing-function:cubic-bezier(.2,.6,.3,1); }
  46%  { transform:translateY(-3px); animation-timing-function:cubic-bezier(.7,0,.9,.6); }
  54%  { transform:translateY(0); }
  100% { transform:translateY(0); }
}
.portada__flecha{
  width:13px; height:15px; flex:none; stroke-width:1.5;
  animation:saltaFlecha 2s infinite;
}
@media (prefers-reduced-motion: reduce){
  .portada__flecha{ animation:none; }
}

/* En pantalla grande el enlace se muda al pie de la mitad izquierda: al lugar
   exacto que ocupaba la pista de "Scrolleá", que ya no existe. Sale del flujo,
   asi que el titulo y el parrafo quedan centrados entre ellos dos. */
@media (min-width:901px){
  .portada__pista{
    position:absolute;
    left:clamp(28px, 5vw, 84px);
    bottom:clamp(22px, 4vh, 40px);
    margin-top:0;
  }
}

/* La barra ahora siempre va en claro: la mitad izquierda de la portada es
   crema, y sobre crema las letras blancas no se leen. */
.barra{ background:var(--hueso); border-bottom-color:var(--linea); }
.barra::before{ display:none; }
.barra__marca img{ filter:none; }
.barra__menu a{ color:var(--tinta); text-shadow:none; }
.barra__menu a:hover{ color:var(--oro-hondo); border-bottom-color:rgba(154,120,36,.6); }
.barra__boton span{ background:var(--tinta); }

/* La pista de scroll pasa al lado claro */
.pista{ color:var(--tinta-suave); }

@media (max-width:900px){
  /* En celular no hay dos mitades: el texto arriba y la botella abajo.

     Antes la franja no podia achatarse mas de 0,92 de proporcion: la foto se
     dibujaba tapando toda la franja y, si quedaba mas ancha que alta, el
     recorte se comia la base de la botella. Ahora la foto entra entera
     (script.js, ENCUADRE), asi que ese limite ya no rige y la franja puede
     achicarse para darle mas aire al texto. Lo que crece en cambio son las
     bandas a los costados, porque la foto es mas angosta que la pantalla.

     El calc con 1.05 es el nuevo freno: evita que en una tablet parada la
     franja se estire tanto que la botella quede perdida entre bandas. */
  :root{ --alto-foto: clamp(50lvh, calc(100vw / 1.05), 78lvh); }

  .plano__lienzo{
    left:0; width:100%;
    top:auto; bottom:0;
    height:60vh; height:var(--alto-foto);
  }
  .portada__lado{
    width:auto; right:0; bottom:auto;
    height:40vh; height:calc(100lvh - var(--alto-foto));
    justify-content:flex-end;
    padding:calc(var(--alto-barra, 64px) + 10px) var(--borde) clamp(18px, 3vh, 30px);
  }
  .portada__texto{ max-width:none; }
  /* La pista caía sobre la botella y no se leía. En celular sobra: nadie
     necesita que le expliquen que hay que scrollear. */
  .pista{ display:none; }
}

/* Donde al texto de portada le queda poco alto -celulares cortos tipo
   iPhone SE, y tablets paradas- el titulo se metia abajo de la barra:
   arrancaba 39px por encima de su borde. Aca se compacta el interlineado
   y los espacios, que es lo unico que se puede ceder sin achicar la foto. */
@media (max-width:900px) and (max-height:760px),
       (min-width:600px) and (max-width:900px){
  .portada__titulo{ font-size:clamp(27px, 4.3vw, 40px); }
  .portada__texto{ margin-top:1em; line-height:1.55; }
  .portada__pista{ margin-top:18px; }
  .portada__lado{ padding-bottom:16px; }
}

/* ============================================================
   LA BARRA NO LE COME ESPACIO A LA FOTO
   La foto arranca en el borde de arriba y la barra le pasa por encima.
   El fondo crema de la barra llega solo hasta la mitad: del otro lado
   los nombres van en claro, apoyados sobre la parte oscura de la foto.
   Al entrar en las secciones el fondo se estira a todo el ancho y los
   nombres se dan vuelta a oscuro.
   ============================================================ */

.barra{
  right:0;
  flex-direction:row;
  align-items:center;
  gap:24px;
  padding-bottom:16px;
  background:none;
  border-bottom-color:transparent;
}

.barra::after{
  content:''; position:absolute; z-index:-1;
  top:0; bottom:0; left:0; right:50%;
  background:var(--hueso);
  border-bottom:1px solid var(--linea);
  transition:right .4s ease;
}
.barra--clara::after{ right:0; }

/* Los nombres viven sobre la foto: van en claro y con sombra.
   Medido cuadro por cuadro: esa franja se mantiene oscura en los 62,
   así que nunca se pierden. */
.barra__menu{ gap:clamp(18px, 2.6vw, 40px); }
.barra__menu a{
  font-size:13px;
  letter-spacing:.17em;
  color:rgba(244,242,236,.94);
  text-shadow:0 1px 5px rgba(0,0,0,.9), 0 0 16px rgba(0,0,0,.6);
}
.barra__menu a:hover{ color:var(--oro-claro); border-bottom-color:rgba(200,162,74,.65); }

/* Entre 901 y 1279px de ancho el indice se le venia encima al lado crema:
   a 901px el primer nombre quedaba entero sobre el crema, blanco sobre
   claro, ilegible. Aca la letra y los espacios se achican lo justo para
   que el indice quede siempre del lado de la foto (a 901px sobran 25px). */
@media (min-width:901px) and (max-width:1279px){
  .barra__menu{ gap:clamp(14px, 1.8vw, 24px); }
  .barra__menu a{ font-size:12px; letter-spacing:.12em; }
}

/* En las secciones, fondo claro de punta a punta y letras oscuras */
.barra--clara .barra__menu a{ color:var(--tinta); text-shadow:none; }
.barra--clara .barra__menu a:hover{ color:var(--oro-hondo); border-bottom-color:rgba(154,120,36,.6); }

/* El logo siempre cae del lado crema */
.barra__marca img{ filter:none; }
.barra__boton span{ background:var(--tinta); }

/* La pista de scroll quedaba partida justo en el borde entre las dos
   mitades: se muda al lado claro */
.pista{
  left:clamp(28px, 5vw, 84px);
  transform:none;
  align-items:flex-start;
  bottom:clamp(22px, 4vh, 40px);
  color:var(--tinta-suave);
}

@media (max-width:900px){
  /* En celular no hay dos mitades: fondo crema de punta a punta */
  .barra::after{ right:0; }
  .barra__menu a{ font-size:clamp(24px, 7vw, 34px); letter-spacing:.01em; }
}

/* ============================================================
   EL "CONOCE MAS" EN CELULAR

   En la computadora vive al final del bloque de texto, sobre el fondo claro.
   En celular se muda a la esquina de abajo a la izquierda, encima de la foto:
   por eso pasa a blanco y lleva sombra, porque sobre el agua brillante del
   arroyo el blanco solo no se lee.

   Va fixed igual que el lienzo, asi queda pegado a la franja de la foto; el
   bloque .claro (z-index 2) lo tapa al entrar en las secciones. El bottom
   suma el area segura del iPhone para no quedar debajo de la rayita de inicio.
   ============================================================ */

@media (max-width:900px){
  .portada__pista{
    position:fixed;
    left:var(--borde);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);
    z-index:1;
    margin-top:0;
    color:#fff;
    text-shadow:0 1px 16px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.35);

    /* Sobre la foto no necesita el peso que tenia en el bloque de texto:
       ahi competia con el parrafo, aca esta solo. La flecha no se toca. */
    font-size:10px;
  }

  /* El titulo gana peso y la volanta lo cede: en una pantalla angosta la
     volanta, con su espaciado de .24em, ocupaba casi todo el ancho y le
     competia al titulo. Van juntos a proposito, uno sube y el otro baja. */
  /* A 40px "Pura desde el origen" ya no entra en un renglon y corta solo:
     "origen" cae a la segunda linea, que es como se quiere leer. */
  .portada__titulo{ font-size:40px; }
  .portada__etiqueta{ font-size:10px; }

  /* El bloque venia apoyado contra la foto (flex-end) y todo el aire sobrante
     se juntaba arriba, contra la barra. Centrado, ese aire se reparte y el
     texto queda parado en el medio de su mitad de pantalla. */
  .portada__lado{ justify-content:center; }
}

/* ============================================================
   LA SECCION "OURO" EN CELULAR

   Objetivo: que entre entera en una pantalla, sin scrollear y sin tocar una
   palabra del texto. De los ~1025px que medía, la foto sola se llevaba 449:
   pasa a una franja panoramica de ~195. El resto sale de juntar un poco los
   espacios, que en una pantalla chica sobran.
   ============================================================ */

@media (max-width:820px){
  /* La foto deja de ser casi cuadrada y pasa a franja ancha. El encuadre va
     bien abajo: midiendo el brillo franja por franja, esta foto es cielo
     hasta el 63% de su alto (brillo 210-241) y recien ahi aparecen las
     sierras y el camino (brillo 88, 58, 42). Encuadrar al medio mostraba
     puro cielo. Con 95% se ve el horizonte y todo el camino. */
  /* El texto va primero y la foto cierra la seccion */
  #agua .capitulo__texto{ order:1; }
  #agua .capitulo__foto{ order:2; }

  /* La foto respeta el margen lateral, igual que el texto: lo que pierde de
     ancho contra los bordes lo recupera en alto (proporcion mas baja). */
  /* La foto se pasa un poco de los margenes del texto: queda mas ancha, pero
     sin llegar al borde de la pantalla (10px de aire a cada lado). */
  #agua .capitulo__foto{
    margin-left:-6px;
    margin-right:-6px;
  }
  #agua .capitulo__foto img{
    aspect-ratio:1.4 / 1;
    object-position:50% 95%;
  }

  #agua{
    /* Aire contra la foto de la portada: pegada quedaba como si la seccion
       fuera parte de la portada en vez de empezar algo nuevo. */
    padding-top:72px;
    padding-bottom:24px;
    gap:20px;
  }

  /* 1,85 de interlineado luce bien en una columna angosta de escritorio; en
     el celular, con renglones cortos, deja demasiado aire entre lineas. */
  #agua .parrafo--largo{
    line-height:1.62;
    margin-bottom:1em !important;
  }

  /* El remate "OURO, desde 2020" colgaba a 48px del parrafo anterior */
  #agua .capitulo__desde{
    margin-top:22px;
    padding-top:14px;
  }
}

/* ============================================================
   LA SECCION "EL AGUA" EN CELULAR

   Medía ~1400px: dos pantallas largas que se cortaban en cualquier lado. La
   partimos en dos bloques que entran cada uno en su pantalla, sin sacar una
   palabra y sin tocar el HTML (en la computadora relato y analisis siguen
   yendo lado a lado, que es como estan pensados).

   Bloque 1: volanta + titulo + los tres rasgos + el relato.
   Bloque 2: el analisis quimico, que arranca separado.
   ============================================================ */

@media (max-width:820px){
  #manantial{
    padding-top:28px;
    padding-bottom:16px;
    gap:0;
  }

  /* El titulo de esta seccion tiene margen cero por diseno, asi que las
     separaciones van una por una en vez de un espacio unico para todo:
     el titulo necesita aire contra las columnas, y el relato no tanto. */
  #manantial > .volanta{ margin-bottom:12px; }
  #manantial .capitulo__titulo{ margin-bottom:24px; }
  #manantial .agua-fila{ margin-top:20px; }
  #manantial .agua-relato > .parrafo:first-child{ margin-top:0; }
  /* El ultimo parrafo arrastraba su propio margen de abajo, asi que la
     separacion contra el analisis daba 26px cuando arriba eran 20. */
  #manantial .agua-relato > .parrafo:last-child{ margin-bottom:0 !important; }

  /* El titulo baja un escalon: sigue siendo el mas grande de la seccion */
  #manantial .capitulo__titulo{ font-size:20px; line-height:1.12; }

  /* Las tres tarjetas van una al lado de la otra. En 350px de ancho cada una
     queda en ~110px, asi que todo adentro se achica: menos relleno, titulo y
     texto mas chicos, y el texto centrado para que los renglones cortos no se
     vean desflecados. */
  #manantial .agua-rasgos{
    grid-template-columns:repeat(3, 1fr);
    gap:0;
  }

  /* Las tarjetas dejan de ser cajas y pasan a ser tres columnas separadas por
     una linea fina: el mismo recurso que usa la tabla del analisis unas lineas
     mas abajo, en esta misma seccion. El degradado dorado con desenfoque venia
     del diseno oscuro; sobre el crema mete ruido y le compite al texto.
     No se toca la opacidad ni el transform: son los de la animacion de entrada. */
  #manantial .agua-rasgo{ padding:0 7px; }
  #manantial .agua-rasgo:first-child{ padding-left:0; }
  #manantial .agua-rasgo:last-child{ padding-right:0; }
  #manantial .agua-rasgo__dato{ font-size:22px; }
  #manantial .agua-rasgo__dato--palabra{ font-size:15px; }
  #manantial .agua-rasgo h3{ font-size:13px; line-height:1.15; }
  #manantial .agua-rasgo h3::after{ margin-top:6px; width:20px; }
  #manantial .agua-rasgo p{
    margin-top:7px;
    font-size:12.5px;
    line-height:1.45;
    letter-spacing:0;
  }

  /* Mismo criterio que en la seccion Ouro: 1,85 de interlineado es mucho
     para renglones cortos de celular. */
  /* El relato se lee completo, sin recortar palabras: lo que cede es el
     tamano de letra y el aire entre renglones. A 12,5px entran unos 54
     caracteres por renglon en vez de 45, asi que el bloque baja de 13
     renglones a unos 9. */
  #manantial .parrafo--largo{
    font-size:13.5px;
    line-height:1.5;
    letter-spacing:.02em;
    margin-bottom:.75em !important;
  }

  /* El analisis empieza como bloque aparte: el aire de arriba es lo que lo
     separa del relato y lo hace caer en su propia pantalla. */
  #manantial .agua-analisis{ margin-top:20px; }

  /* La cabecera y el pie del analisis, mas juntos */
  #manantial .agua-analisis__cabecera{ margin-bottom:0; }
  #manantial .agua-analisis__titulo{ font-size:11px; letter-spacing:.1em; }
  #manantial .agua-analisis__regla{ margin:5px auto; }
  #manantial .agua-analisis__sub{ font-size:9px; }
  #manantial .agua-analisis__pie{
    margin-top:12px;
    padding-top:9px;
    font-size:9px;
  }
}

/* Dos versiones del mismo texto: la larga para pantallas donde hay lugar y la
   corta para el celular, donde las tarjetas quedan en columnas angostas. */
.en-chico{ display:none; }

@media (max-width:820px){
  .en-grande{ display:none; }
  .en-chico{ display:inline; }
}

/* ============================================================
   EL ANALISIS QUIMICO EN CELULAR: CUADRO ACOSTADO

   En pantallas chicas caia a dos columnas y quedaba un bloque alto de cuatro
   filas. Vuelve al cuadro acostado de cuatro columnas por dos filas, como en
   la computadora. Para que ocho datos entren en ~87px por columna, el valor y
   su unidad se apilan (1,28 arriba, mg/L abajo) en vez de ir uno al lado del
   otro, y las letras bajan un escalon.
   ============================================================ */

@media (max-width:820px){
  #manantial .analisis{
    grid-template-columns:repeat(4, 1fr);
    column-gap:8px;
    margin-top:10px;
  }
  #manantial .analisis__item{
    padding:6px 3px;
    border-top:1px solid var(--linea);
    border-left:1px solid var(--linea);
    gap:3px;
  }
  #manantial .analisis__item:nth-child(-n+4){ border-top:0; padding-top:0; }
  #manantial .analisis__item:nth-child(4n+1){ border-left:0; }

  #manantial .analisis dt{ font-size:9px; letter-spacing:.08em; text-indent:.08em; }
  #manantial .analisis dd{
    flex-direction:column;
    align-items:center;
    gap:1px;
    font-size:14px;
    line-height:1.05;
  }
  #manantial .analisis__unidad{ font-size:9px; }
}

/* ============================================================
   LA CAROLINA EN COMPUTADORA: QUE LA SECCION ENTRE EN PANTALLA

   El collage tiene proporcion fija, asi que si toma todo el ancho de su
   columna (unos 660px) se estira a 930 de alto y la seccion no entra en una
   pantalla. Aca se invierte la referencia: manda el alto de la ventana y el
   ancho sale del aspect-ratio. Asi la galeria siempre entra, sea cual sea la
   pantalla, y el dibujo interno no cambia.
   ============================================================ */

@media (min-width:821px){
  .capitulo--carolina{
    grid-template-columns:1.25fr 1fr;
    padding-top:clamp(44px, 4.5vw, 66px);
    padding-bottom:clamp(44px, 4.5vw, 66px);
  }

  .carolina__galeria{
    height:84vh;
    width:auto;
    max-width:100%;
    margin-left:auto;   /* el sobrante de la columna queda del lado del texto */
  }
}


/* ============================================================
   MOVIMIENTO DE LAS SECCIONES · entradas, reacciones y paralaje

   Todo lo de aca adentro vive dentro de
   @media (prefers-reduced-motion: no-preference). O sea que si el visitante
   pidio "reducir movimiento" en su sistema -o si su navegador es viejo y no
   entiende la consulta- nada de esto se aplica y las secciones quedan
   quietas y a la vista. No hace falta ningun bloque que lo desarme despues.

   Las entradas se cuelgan de la clase "visible", que el IntersectionObserver
   de script.js le pone a cada seccion cuando llegas scrolleando. Los
   transition-delay son los que arman la cascada: cada parte entra un pelin
   despues que la anterior.

   Todos los selectores arrancan con el # de la seccion. No es capricho: las
   reglas de base que estoy pisando llevan dos clases, y un # pesa mas que
   cualquier cantidad de clases. Sin el #, varias de estas reglas perderian.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

/* ------------------------------------------------------------
   EL AGUA · la seccion se desdobla de arriba hacia abajo
   ------------------------------------------------------------ */

/* La volanta entra con las letras juntandose: arrancan mas separadas de lo
   normal (.52em contra .34em) y se van acomodando. Es el unico lugar donde
   animo letter-spacing, porque son dos palabras cortas: en un parrafo largo
   esto obliga al navegador a recalcular el texto en cada cuadro y se nota. */
#manantial > .volanta{
  opacity:0;
  letter-spacing:.52em; text-indent:.52em;
  transition:opacity .9s ease,
             letter-spacing 1.1s cubic-bezier(.16,1,.3,1),
             text-indent 1.1s cubic-bezier(.16,1,.3,1);
}
#manantial.visible > .volanta{ opacity:1; letter-spacing:.34em; text-indent:.34em; }

#manantial > .capitulo__titulo{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1) .08s;
}
#manantial.visible > .capitulo__titulo{ opacity:1; transform:none; }

/* Las 3 cards ya entraban en cascada (arriba, .agua-rasgo:nth-child).
   Aca solo corro los tiempos para que arranquen despues del titulo. */
#manantial .agua-rasgo:nth-child(1){ transition-delay:.18s; }
#manantial .agua-rasgo:nth-child(2){ transition-delay:.27s; }
#manantial .agua-rasgo:nth-child(3){ transition-delay:.36s; }

/* La linea divisoria entre cards se DIBUJA de arriba hacia abajo. Un borde
   no se puede dibujar, asi que el borde de siempre se vuelve transparente
   -sigue ocupando su pixel, por eso nada se corre de lugar- y la linea que
   se ve es este ::before, que arranca achatado en cero y se estira. */
#manantial .agua-rasgo{ border-left-color:transparent; }
#manantial .agua-rasgo::before{
  content:''; position:absolute;
  left:-1px; top:0; bottom:0; width:1px;
  background:var(--linea);
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform .85s cubic-bezier(.16,1,.3,1), background .35s ease;
}
#manantial .agua-rasgo:first-child::before{ display:none; }
#manantial.visible .agua-rasgo:nth-child(2)::before{ transform:scaleY(1); transition-delay:.34s; }
#manantial.visible .agua-rasgo:nth-child(3)::before{ transform:scaleY(1); transition-delay:.43s; }

#manantial .agua-relato{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s ease .30s, transform .9s cubic-bezier(.16,1,.3,1) .30s;
}
#manantial.visible .agua-relato{ opacity:1; transform:none; }

#manantial .agua-analisis{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s ease .38s, transform .9s cubic-bezier(.16,1,.3,1) .38s;
}
#manantial.visible .agua-analisis{ opacity:1; transform:none; }

/* La rayita de "Analisis quimico" son dos lineas finas con un rombo en el
   medio. Las lineas se dibujan desde el rombo hacia los costados (de ahi el
   transform-origin pegado al centro) y el rombo entra girando media vuelta. */
#manantial .agua-analisis__regla::before{
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .9s cubic-bezier(.16,1,.3,1) .60s;
}
#manantial .agua-analisis__regla::after{
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.16,1,.3,1) .60s;
}
#manantial.visible .agua-analisis__regla::before,
#manantial.visible .agua-analisis__regla::after{ transform:scaleX(1); }

#manantial .agua-analisis__regla span{
  transform:rotate(-135deg) scale(0);
  transition:transform .8s cubic-bezier(.16,1,.3,1) .52s;
}
#manantial.visible .agua-analisis__regla span{ transform:rotate(45deg) scale(1); }

/* Los 8 valores del cuadro entran uno atras del otro cada 45 milisegundos:
   el cuadro se dibuja solo, con sus lineas y todo. */
#manantial .analisis__item{
  opacity:0; transform:translateY(10px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
#manantial.visible .analisis__item{ opacity:1; transform:none; }
#manantial.visible .analisis__item:nth-child(1){ transition-delay:0.480s; }
#manantial.visible .analisis__item:nth-child(2){ transition-delay:0.525s; }
#manantial.visible .analisis__item:nth-child(3){ transition-delay:0.570s; }
#manantial.visible .analisis__item:nth-child(4){ transition-delay:0.615s; }
#manantial.visible .analisis__item:nth-child(5){ transition-delay:0.660s; }
#manantial.visible .analisis__item:nth-child(6){ transition-delay:0.705s; }
#manantial.visible .analisis__item:nth-child(7){ transition-delay:0.750s; }
#manantial.visible .analisis__item:nth-child(8){ transition-delay:0.795s; }

#manantial .agua-analisis__pie{ opacity:0; transition:opacity .8s ease .86s; }
#manantial.visible .agua-analisis__pie{ opacity:1; }


/* ------------------------------------------------------------
   PROCESO · la foto se descubre como una cortina, de abajo hacia arriba
   ------------------------------------------------------------ */

/* Antes esta foto se descubria como una cortina. Se cambio: una cortina que
   sube lee como "la imagen todavia esta cargando", que es justo lo que no
   queremos. Ahora la foto entra CORRIDA desde la izquierda y se acomoda.

   El movimiento va sobre la imagen y no sobre el marco por dos razones: el
   marco ya usa su transform para el paralaje, y el marco recorta (overflow
   hidden), asi que la imagen puede venir de afuera sin ensanchar la pagina.
   Arranca 4% mas a la izquierda y 10% mas grande: ese 10% de sobra es lo que
   evita que, mientras viaja, quede una franja vacia en el borde opuesto.
   Termina en transform:none, o sea en el encuadre exacto de siempre.

   El marco, aparte, lleva el paralaje: el translate3d toma su valor de la
   variable --paralaje, que script.js va moviendo segun cuanto scrolleaste. */
#proceso .capitulo__foto{
  opacity:1;
  transform:translate3d(0, var(--paralaje, 0px), 0);
  transition:none;
  overflow:hidden; border-radius:3px;
  will-change:transform;
}
#proceso .capitulo__foto img{
  opacity:0;
  transform:translateX(-4%) scale(1.1);
  transition:opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
#proceso.visible .capitulo__foto img{ opacity:1; transform:none; }

/* El bloque de texto ya no aparece de una sola pieza: se apaga su fade
   -si no, se sumarian dos transparencias una encima de la otra- y entra
   renglon por renglon. Son 7 partes en cada seccion: volanta, titulo,
   bajada, los parrafos y, en Proceso, la lista de pasos. */
#proceso .capitulo__texto,
#carolina .capitulo__texto{ opacity:1; transform:none; transition:none; }

#proceso .capitulo__texto > *,
#carolina .capitulo__texto > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .85s ease, transform .85s cubic-bezier(.16,1,.3,1);
}
#proceso.visible .capitulo__texto > *,
#carolina.visible .capitulo__texto > *{ opacity:1; transform:none; }
#proceso.visible .capitulo__texto > *:nth-child(1),
#carolina.visible .capitulo__texto > *:nth-child(1){ transition-delay:0.060s; }
#proceso.visible .capitulo__texto > *:nth-child(2),
#carolina.visible .capitulo__texto > *:nth-child(2){ transition-delay:0.135s; }
#proceso.visible .capitulo__texto > *:nth-child(3),
#carolina.visible .capitulo__texto > *:nth-child(3){ transition-delay:0.210s; }
#proceso.visible .capitulo__texto > *:nth-child(4),
#carolina.visible .capitulo__texto > *:nth-child(4){ transition-delay:0.285s; }
#proceso.visible .capitulo__texto > *:nth-child(5),
#carolina.visible .capitulo__texto > *:nth-child(5){ transition-delay:0.360s; }
#proceso.visible .capitulo__texto > *:nth-child(6),
#carolina.visible .capitulo__texto > *:nth-child(6){ transition-delay:0.435s; }
#proceso.visible .capitulo__texto > *:nth-child(7),
#carolina.visible .capitulo__texto > *:nth-child(7){ transition-delay:0.510s; }
#proceso.visible .capitulo__texto > *:nth-child(8),
#carolina.visible .capitulo__texto > *:nth-child(8){ transition-delay:0.585s; }

/* Los 4 pasos numerados entran corridos desde la izquierda, como una lista
   que se va escribiendo. Arrancan cuando el ultimo parrafo ya esta. */
#proceso .pasos li{
  opacity:0; transform:translateX(-16px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
#proceso.visible .pasos li{ opacity:1; transform:none; }
#proceso.visible .pasos li:nth-child(1){ transition-delay:0.600s; }
#proceso.visible .pasos li:nth-child(2){ transition-delay:0.685s; }
#proceso.visible .pasos li:nth-child(3){ transition-delay:0.770s; }
#proceso.visible .pasos li:nth-child(4){ transition-delay:0.855s; }


/* ------------------------------------------------------------
   LA CAROLINA · las 4 fotos se descubren, cada una desde un lado
   ------------------------------------------------------------ */

/* Las 4 fotos no se descubren: ENTRAN CORRIDAS, cada una desde un lado
   distinto, en el orden en que el ojo las lee. La que se descubria de a poco
   parecia estar cargando.

     la aerea grande (4)   viene desde la izquierda
     la calle (2)          viene desde arriba
     el manantial (1)      viene desde la derecha
     el arco (3)           viene desde abajo

   Aca el movimiento va en la FIGURA y no en la imagen -al revés que en
   Proceso- porque es la figura la que lleva la sombra: asi la foto entera,
   con su sombra, se desliza como una lamina. La imagen queda libre para el
   zoom del mouse, y de paso ninguno de los dos se pisa el transform.

   Las distancias no son iguales a proposito. Hacia la izquierda y hacia
   arriba puedo usar 26px sin riesgo, porque lo que se sale por ahi el
   navegador nunca lo deja scrollear. Hacia la derecha uso 16px, que entra
   holgado en el margen lateral de la pagina (20px en el celular mas angosto):
   si me pasara, apareceria una barra de scroll horizontal por medio segundo.

   El :nth-child va repetido porque las reglas de la galeria ya lo usan, y sin
   el estas no tendrian el peso suficiente para pisarlas. */
#carolina .carolina__galeria > .carolina__foto{
  opacity:0;
  transition:opacity .55s ease var(--espera, 0s),
             transform .7s cubic-bezier(.16,1,.3,1) var(--espera, 0s);
}
#carolina .carolina__galeria > .carolina__foto:nth-child(4){ transform:translateX(-26px) scale(.99); --espera:0s; }
#carolina .carolina__galeria > .carolina__foto:nth-child(2){ transform:translateY(-26px) scale(.99); --espera:.07s; }
#carolina .carolina__galeria > .carolina__foto:nth-child(1){ transform:translateX(16px) scale(.99);  --espera:.14s; }
#carolina .carolina__galeria > .carolina__foto:nth-child(3){ transform:translateY(26px) scale(.99);  --espera:.21s; }
/* Esta regla NO se cuelga de .visible de la seccion sino de .visto, que
   script.js le pone a la galeria cuando la galeria misma entra en pantalla.
   En el celular las fotos estan cuatro parrafos mas abajo que el titulo: con
   el aviso de la seccion, la animacion terminaba antes de que llegaras a
   verla. Lleva igual el .visible adelante para pesar mas que las cuatro
   reglas de arriba, que son las que ponen la foto corrida. */
#carolina.visible .carolina__galeria.visto > .carolina__foto{ opacity:1; transform:none; }

/* La imagen de adentro solo se ocupa del zoom del mouse */
#carolina .carolina__galeria > .carolina__foto img{ transition:transform 1.2s ease; }


/* ------------------------------------------------------------
   CONTACTO · los tres datos entran uno atras del otro
   ------------------------------------------------------------ */

#contacto > .volanta{ transition-delay:.05s; }
#contacto > .capitulo__titulo{ transition-delay:.15s; }

/* El bloque de los datos no se desvanece: se desvanecen los datos, para que
   puedan entrar en cascada. */
#contacto .contacto__datos{ opacity:1; transform:none; transition:none; }
#contacto .contacto__datos a{
  opacity:0; transform:translateY(16px);
  /* el color sigue en la lista: si lo dejo afuera, este transition pisa el de
     arriba y el dorado del hover pasaria a cambiar de golpe */
  transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1), color .25s;
}
#contacto.visible .contacto__datos a{ opacity:1; transform:none; }
#contacto.visible .contacto__datos a:nth-child(1){ transition-delay:.28s; }
#contacto.visible .contacto__datos a:nth-child(2){ transition-delay:.40s; }
#contacto.visible .contacto__datos a:nth-child(3){ transition-delay:.52s; }

/* El subrayado dorado se dibuja de izquierda a derecha. Va position:absolute
   a proposito: el enlace es un flex en columna, y un ::after normal se
   convertiria en una fila mas y empujaria el texto. */
#contacto .contacto__datos a{ position:relative; }
#contacto .contacto__datos a::after{
  content:''; position:absolute;
  left:0; right:0; bottom:-7px; height:1px;
  background:var(--oro);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}


/* ------------------------------------------------------------
   REACCIONES AL PASAR EL MOUSE

   Van encerradas en (hover:hover), que quiere decir "solo en aparatos con
   mouse de verdad". En el celular no hay mouse: si estas reglas se aplicaran,
   un dedo dejaria la foto con el zoom puesto hasta que toques otra cosa.
   ------------------------------------------------------------ */

@media (hover:hover){
  /* Las fotos de La Carolina se acercan despacio. El selector repite
     .carolina__galeria y .visible para pesar mas que la regla que deja la
     foto en su lugar al entrar: si pesara menos, el zoom no se aplicaria. */
  #carolina .carolina__foto img{ transform-origin:50% 50%; }
  #carolina.visible .carolina__galeria > .carolina__foto:hover img{ transform:scale(1.045); }

  /* La foto de Proceso, mas contenida: es mas grande y el zoom se nota mas */
  #proceso.visible .capitulo__foto:hover img{ transform:scale(1.03); }

  /* En las cards: el dato dorado sube un poco y las dos lineas que la
     enmarcan se ponen doradas (la de su izquierda y la de la card siguiente) */
  #manantial .agua-rasgo__dato{ transition:transform .4s ease; }
  #manantial .agua-rasgo:hover .agua-rasgo__dato{ transform:translateY(-3px); }
  #manantial .agua-rasgo:hover::before,
  #manantial .agua-rasgo:hover + .agua-rasgo::before{ background:rgba(200,162,74,.55); }

  /* En el cuadro de analisis, el valor se prende */
  #manantial .analisis__item dd{ transition:color .3s ease; }
  #manantial .analisis__item:hover dd{ color:var(--oro-hondo); }

  /* Y el subrayado de los contactos se dibuja */
  #contacto .contacto__datos a:hover::after{ transform:scaleX(1); }
}

}  /* fin de prefers-reduced-motion: no-preference */