/* La web de bathyria.com: una hoja, sin JavaScript. Los colores salen de la app (nativa/src/comun/paleta.ts) y de la
   escala de las isobatas. La letra de los titulares va alojada aquí, no en Google, para no darle la IP de nadie.

   El descenso: la página empieza en la orilla (blanco) y cada tramo es un poco más hondo que el anterior, hasta el
   azul del final. Eso es fijo y se ve siempre. Con scroll-driven animations y sin «reducir movimiento», además:
   el agua sube en el teléfono de la portada y, en el embalse dibujado, las franjas se encienden de la orilla a lo
   hondo mientras la sonda cuenta de 0 a 50 m. Si no, todo se ve quieto y entero. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("fuentes/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fuentes/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

@property --metros { syntax: "<integer>"; inherits: false; initial-value: 0; }
/* Altura del agua en el teléfono de la portada: el corte y la línea salen de este mismo valor, así no se separan */
@property --nivel { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

:root {
  --hondo: #0E2A47;
  --tinta: #0E2A47;
  --suave: #3B4A5C;
  --azul: #0066CC;
  --coral: #C4422A;
  --agua: #8FE3E8;
  --claro: #E6EEF6;
  --isobatas: #D7372B 0%, #F2A23A 14%, #E6DA55 26%, #6CC47A 40%, #3BB39A 54%, #2F86C6 72%, #2B4FA0 100%;
  --titular: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ancho: 68rem;
  --margen: max(1rem, calc((100% - var(--ancho)) / 2));
  --margen-dcha: var(--margen);
  --sombra: 0 1.75rem 3rem -1.25rem rgba(16, 24, 32, 0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--tinta);
  font: 1.0625rem/1.6 var(--texto);
}

h1, h2 { font-family: var(--titular); font-weight: 800; line-height: 1; margin: 0 0 0.5em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
p { margin: 0 0 1em; max-width: 34em; }
a { color: var(--azul); text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
::selection { background: var(--agua); color: var(--hondo); }

.boton {
  display: inline-block;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  background: var(--coral);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.boton:hover { background: #A93620; }

/* Cada tramo ocupa todo el ancho y lleva su agua: el final de uno es el principio del siguiente */
.tramo { padding-left: var(--margen); padding-right: var(--margen-dcha); }

.telefono {
  --ancho-tel: 18rem;
  width: 100%;
  max-width: var(--ancho-tel);
  margin: 0;
  padding: calc(var(--ancho-tel) * 0.035);
  border-radius: calc(var(--ancho-tel) * 0.16);
  background: #16202B;
  box-shadow: var(--sombra);
}
.telefono > img, .pantalla {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: calc(var(--ancho-tel) * 0.13);
}

/* Portada: la orilla. El icono y el nombre, grandes; al lado, la app. */
.portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F5F2 100%);
}
.sello { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.icono-app {
  width: clamp(5rem, 9.5vw, 9.5rem);
  height: auto;
  /* la forma de iOS va recortada en la propia imagen (sitio/herramientas/icono.py); la sombra sigue su borde */
  filter: drop-shadow(0 0.6rem 1rem rgba(16, 24, 32, 0.28));
}
.marca {
  font-size: clamp(4.25rem, 11vw, 10.5rem);
  letter-spacing: -0.01em;
  line-height: 0.85;
  margin: 0;
}
.titular {
  font: 800 clamp(1.7rem, 3.2vw, 2.75rem)/1.05 var(--titular);
  color: var(--azul);
  max-width: 16em;
  margin-bottom: 0.6em;
  text-wrap: balance;
}
.lema { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--suave); max-width: 30em; margin-bottom: 1.75rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 0; }
.plataformas { font: 600 1.05rem/1.2 var(--titular); color: var(--suave); }

.portada-telefono { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.telefono-grande { --ancho-tel: clamp(14rem, 23vw, 21rem); }
.portada-telefono figcaption { font: 600 0.95rem/1.3 var(--titular); color: var(--suave); text-align: center; max-width: 24em; }
.pantalla { position: relative; }
.pantalla img { display: block; width: 100%; height: auto; }
.pantalla-fondo {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--nivel) 0 0 0);
}
.nivel {
  position: absolute;
  inset: 0;
  border-top: 2px solid #FFFFFF;
  transform: translateY(var(--nivel));
  pointer-events: none;
}

/* El descenso: un embalse dibujado (sitio/herramientas/ilustracion.py), con una franja por profundidad */
.descenso { background: linear-gradient(180deg, #F2F5F2 0%, #E3F0F2 100%); }
.escena {
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.escena-texto p { color: var(--suave); }
.nota { font: 600 0.95rem/1.3 var(--titular); color: #4A5868; }
.escena-mapa {
  aspect-ratio: 6 / 5;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.embalse { display: block; width: 100%; height: 100%; }
.embalse text {
  font: 600 26px var(--titular);
  fill: var(--hondo);
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 5px;
  stroke-linejoin: round;
}

/* Lo que hace la app: una captura y su texto */
.fila {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, #E3F0F2 0%, #CCE5EC 100%);
}
.fila-al-reves { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); background: linear-gradient(180deg, #CCE5EC 0%, #ACD4E2 100%); }
.fila-al-reves .telefono { order: 2; }
.fila-texto p { color: #2F3F52; }

/* La termoclina: el paso de lo somero a lo hondo, sin texto encima */
.termoclina { height: clamp(4rem, 8vw, 6rem); background: linear-gradient(180deg, #ACD4E2, #2B6A9A); }

/* Los mapas hechos: ya en lo hondo, el texto es claro */
.mapas {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  background: linear-gradient(180deg, #2B6A9A 0%, #1F5583 100%);
  color: #FFFFFF;
}
.embalses {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.25rem 1.5rem;
  font: 600 clamp(1.5rem, 3vw, 2rem)/1.4 var(--titular);
}
.embalses li { white-space: nowrap; }
.pais { font: 400 0.9rem var(--texto); color: var(--claro); margin-left: 0.3em; }
.mapas > p { color: var(--claro); }

.beta {
  padding-top: clamp(3rem, 8vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 4rem);
  background: linear-gradient(180deg, #1F5583 0%, #123659 100%);
  color: #FFFFFF;
}
.beta p { color: var(--claro); }

.pie {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
  background: var(--hondo);
  color: var(--claro);
  font-size: 0.9rem;
}
.pie nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1rem; }
.pie a { color: #FFFFFF; }
.mapas :focus-visible, .beta :focus-visible, .pie :focus-visible { outline-color: var(--agua); }

.sonda { display: none; }

@media (max-width: 52rem) {
  .portada { grid-template-columns: 1fr; }
  .telefono-grande { --ancho-tel: min(16rem, 72vw); }
  .escena { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .fila, .fila-al-reves { grid-template-columns: 1fr; }
  .fila-al-reves .telefono { order: 0; }
  .fila .telefono { max-width: 15rem; }
}

/* El descenso, solo donde el navegador lo sabe hacer y nadie ha pedido quietud. El scroll es el del navegador:
   cambian opacidad, transform y clip-path, y la cifra de la sonda. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* La sonda: la escala de las isobatas en el borde, que se llena hasta donde has bajado */
    .sonda {
      display: block;
      position: fixed;
      z-index: 5;
      top: 50%;
      right: 1.5rem;
      width: 0.4rem;
      height: min(56vh, 30rem);
      translate: 0 -50%;
      font: 600 0.95rem/1 var(--titular);
    }
    .sonda-escala {
      position: absolute;
      inset: 0;
      border-radius: 0.2rem;
      background: rgba(120, 138, 156, 0.45);
    }
    .sonda-color {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, var(--isobatas));
    }
    .sonda-marca { position: absolute; inset: 0; }
    .sonda-cifra {
      position: absolute;
      top: 0;
      right: -0.45rem;
      translate: 0 -50%;
      padding: 0.3em 0.5em;
      border-radius: 0.35rem;
      background: #FFFFFF;
      color: var(--hondo);
      font: 800 1.3rem/1 var(--titular);
      white-space: nowrap;
      box-shadow: 0 0.3rem 0.8rem -0.2rem rgba(16, 24, 32, 0.45), 0 0 0 1px rgba(16, 24, 32, 0.08);
      counter-reset: metros var(--metros);
    }
    .sonda-cifra::after { content: counter(metros) " m"; }
    .sonda-raya { display: none; }

    .sonda-color, .sonda-marca, .sonda-cifra {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-duration: auto;
      animation-timeline: --descenso;
      animation-range: contain 5% contain 85%;
    }
    .sonda-color { animation-name: llena; }
    .sonda-marca { animation-name: baja; }
    .sonda-cifra { animation-name: metros; }

    @media (min-width: 52.01rem) {
      :root { --margen-dcha: max(5rem, calc((100% - var(--ancho)) / 2)); }
    }

    /* En el móvil, la sonda va arriba y en horizontal: una línea fina y la cifra a la derecha */
    @media (max-width: 52rem) {
      .sonda { top: 0; left: 0; right: 0; width: auto; height: 0.3rem; translate: none; }
      .sonda-escala, .sonda-color { border-radius: 0; }
      .sonda-color { background: linear-gradient(90deg, var(--isobatas)); animation-name: llena-ancho; }
      .sonda-marca { animation: none; }
      .sonda-cifra { top: 0.75rem; right: 0.75rem; translate: none; font-size: 1.15rem; }
    }

    /* El agua sube en el teléfono de la portada mientras bajas la primera pantalla */
    .pantalla {
      animation: sube linear both;
      animation-duration: auto;
      animation-timeline: scroll(root);
      animation-range: 0 70svh;
    }

    /* El descenso: la escena se queda fija mientras se recorre su pista y las franjas se encienden de la orilla a
       lo hondo, cada una cuando la sonda llega a su profundidad (0, 2, 5, 10, 15, 20, 30, 40 y 50 m) */
    .descenso { height: 300svh; view-timeline: --descenso block; }
    .escena { position: sticky; top: 0; height: 100svh; padding: 1.5rem 0; }
    .escena-mapa { aspect-ratio: auto; height: min(84svh, 46rem); }
    .franja {
      animation: enciende linear both;
      animation-timeline: --descenso;
    }
    .f0 { animation-range: contain 1% contain 5%; }
    .f1 { animation-range: contain 4% contain 8.2%; }
    .f2 { animation-range: contain 9% contain 13%; }
    .f3 { animation-range: contain 17% contain 21%; }
    .f4 { animation-range: contain 25% contain 29%; }
    .f5 { animation-range: contain 33% contain 37%; }
    .f6 { animation-range: contain 49% contain 53%; }
    .f7 { animation-range: contain 65% contain 69%; }
    .f8 { animation-range: contain 81% contain 85%; }

    @media (max-width: 52rem) {
      .descenso { height: 260svh; }
      .escena { grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; padding: 3.25rem 0 1.25rem; }
      .escena-mapa { order: -1; height: auto; min-height: 0; align-self: stretch; }
      .escena-texto h2 { font-size: 1.9rem; }
      .escena-mas { display: none; }
    }
  }
}

@keyframes llena { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes llena-ancho { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes baja { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes metros { from { --metros: 0; } to { --metros: 50; } }
@keyframes sube { to { --nivel: 0%; } }
@keyframes enciende { from { opacity: 0; } }