/* ═══ 01 · Superficie ═══════════════════════════════════════════════════════ */

#superficie {
  --sup-pie: clamp(84px, 13vh, 132px);
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
}

/* ─── Lienzo del agua: fijo mientras te hundes, debajo del contenido ────── */
#superficie .sup-agua {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--agua-ease);
}
#superficie.sup--vivo .sup-agua { opacity: 1; }
#superficie.sup--hundido .sup-agua { visibility: hidden; }

/* marcador para la pareja de delfines (lo lee el ecosistema) */
#superficie .sup-delfines {
  position: absolute;
  right: 0;
  top: 30%;
  width: 40%;
  height: 26%;
  pointer-events: none;
}

/* ─── Respaldo quieto ──────────────────────────────────────────────────── */
#superficie .sup-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: none;
  pointer-events: none;
}
#superficie.sup--quieto .sup-fondo { display: block; }
html.sin-js #superficie .sup-fondo { display: block; }
#superficie .sup-fondo__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(1.08) brightness(1.08) blur(1.5px);
  transform: scale(1.04);
}
/* superficie luminosa arriba, agua clara donde va el texto */
#superficie .sup-fondo__luz {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 42% at 50% -6%, rgba(250, 255, 254, .92), rgba(205, 250, 245, .35) 48%, transparent 76%),
    linear-gradient(180deg, rgba(181, 242, 238, .18) 0%, rgba(143, 233, 228, .5) 46%, rgba(143, 233, 228, .86) 72%, #8FE9E4 100%);
}
#superficie .sup-fondo__causticas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: soft-light;
  opacity: .7;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .4) 60%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .4) 60%, transparent);
}
#superficie .sup-fondo__causticas i {
  position: absolute;
  top: -520px; left: -520px; right: 0; bottom: 0;
  background-image: var(--causticas-img);
  background-size: 520px 520px;
  animation: sup-deriva 60s linear infinite;
}
#superficie .sup-fondo__causticas i + i {
  top: -380px; left: 0; right: -380px;
  background-size: 380px 380px;
  opacity: .6;
  animation: sup-deriva-b 44s linear infinite;
}
@keyframes sup-deriva { to { transform: translate3d(520px, 520px, 0); } }
@keyframes sup-deriva-b { to { transform: translate3d(-380px, 380px, 0); } }
#superficie .sup-fondo__mascara {
  position: absolute;
  left: 50%;
  top: 9%;
  width: auto;
  height: 58%;
  aspect-ratio: 1;
  translate: -50% 0;
  color: #0B4A57;
  opacity: .14;
  filter: blur(1px);
}

/* ─── Contenido ────────────────────────────────────────────────────────── */
#superficie .sup-contenido {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: end;
  padding-top: calc(var(--nav-alto) + 4vh);
  padding-bottom: 1vh;
}
#superficie .sup-rotulo { margin-bottom: clamp(1rem, 2.6vh, 2rem); }
#superficie .sup-titulo {
  font-size: min(var(--t-mega), 11vh, calc((100vw - 2 * var(--margen)) / 6.7));
  line-height: .86;
}
#superficie .sup-linea {
  display: block;
  /* la máscara deja aire para tildes y para el pincel */
  overflow: clip;
  overflow-clip-margin: .2em;
  padding-block: .08em .02em;
  margin-block: -.08em -.02em;
}
#superficie .sup-linea__in { display: inline-block; }
#superficie .sup-linea--pincel { overflow: visible; }
#superficie .sup-linea--pincel .sup-linea__in { white-space: nowrap; }
#superficie .sup-pincel { --pincel-tam: 1.42em; color: var(--petroleo); margin-left: -.02em; }

#superficie .sup-bajada { margin-top: clamp(1.4rem, 3.4vh, 2.4rem); }
#superficie .sup-lead { font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.5; max-width: 30rem; color: var(--tinta-2); opacity: 1; }
#superficie .sup-lead .serif { font-size: 1.26em; color: var(--tinta); line-height: 1.1; }
#superficie .sup-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(1.1rem, 2.8vh, 1.9rem);
}

/* ─── Pie: lectura, descenso, pista ────────────────────────────────────── */
#superficie .sup-pie {
  position: relative;
  z-index: 2;
  grid-row: 2;
  height: var(--sup-pie);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
#superficie .sup-lectura { white-space: nowrap; display: inline-flex; align-items: center; gap: .9em; justify-self: start; }
#superficie .sup-lectura__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--tinta) 40%, transparent);
  animation: sup-latido 2.6s var(--agua-ease) infinite;
}
@keyframes sup-latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tinta) 38%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; }
}
#superficie .sup-desciende {
  display: grid;
  justify-items: center;
  gap: .8em;
  text-decoration: none;
  color: inherit;
}
#superficie .sup-desciende__tubo {
  position: relative;
  width: 22px;
  height: 40px;
  border-radius: 999px;
  border: 1.4px solid color-mix(in srgb, var(--tinta) 55%, transparent);
}
#superficie .sup-desciende__tubo i {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 6px; height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--tinta);
  animation: sup-baja 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes sup-baja {
  0% { translate: 0 0; opacity: 0; }
  20% { opacity: 1; }
  70% { translate: 0 20px; opacity: 1; }
  100% { translate: 0 22px; opacity: 0; }
}
#superficie .sup-pista { justify-self: end; text-align: right; transition: opacity 1.2s var(--agua-ease); }
#superficie .sup-pista__toque { display: none; }
html.es-movil #superficie .sup-pista__fino { display: none; }
html.es-movil #superficie .sup-pista__toque { display: inline; }
#superficie.sup--tocado .sup-pista { opacity: 0; }
#superficie.sup--quieto .sup-pista { display: none; }

/* ─── Estado inicial de la entrada (lo anima el JS tras el cargador) ───── */
html.js:not(.es-reducido) #superficie:not(.sup--entrado) .sup-linea__in { transform: translateY(112%); }
html.js:not(.es-reducido) #superficie:not(.sup--entrado) .sup-rotulo .kicker,
html.js:not(.es-reducido) #superficie:not(.sup--entrado) .sup-lead,
html.js:not(.es-reducido) #superficie:not(.sup--entrado) .sup-acciones > *,
html.js:not(.es-reducido) #superficie:not(.sup--entrado) .sup-pie > * { opacity: 0; }
/* si el script no llega a tomar el control, todo aparece igual */
html.js:not(.es-reducido) #superficie:not(.sup--js) .sup-linea__in,
html.js:not(.es-reducido) #superficie:not(.sup--js) .sup-rotulo .kicker,
html.js:not(.es-reducido) #superficie:not(.sup--js) .sup-lead,
html.js:not(.es-reducido) #superficie:not(.sup--js) .sup-acciones > *,
html.js:not(.es-reducido) #superficie:not(.sup--js) .sup-pie > * { animation: sup-seguro .01s linear 4.5s forwards; }
@keyframes sup-seguro { to { opacity: 1; transform: none; } }

/* ─── Escritorio: titular en dos líneas a lo ancho, la bajada junto a la segunda ── */
@media (min-width: 1024px) {
  #superficie .sup-contenido { padding-right: calc(var(--margen) + 96px); }
  #superficie .sup-pie { padding-right: calc(var(--margen) + 96px); }
  #superficie .sup-titulo { font-size: min(12.5vh, 7.6vw, 11rem); }
  #superficie .sup-bajada {
    position: absolute;
    right: calc(var(--margen) + 96px);
    bottom: 1.4vh;
    width: min(25rem, 36%);
    margin: 0;
  }
  #superficie .sup-lead { font-size: clamp(1rem, 1.1vw, 1.15rem); }
}

/* ─── Móvil ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #superficie { --sup-pie: 76px; }
  #superficie .sup-contenido { padding-top: calc(var(--nav-alto) + 2vh); padding-bottom: 0; }
  #superficie .sup-titulo { font-size: min(var(--t-mega), 10.5vh, calc((100vw - 2 * var(--margen)) / 6.5)); }
  #superficie .sup-lead { font-size: 1.02rem; }
  #superficie .sup-acciones { flex-direction: column; gap: 10px; }
  #superficie .sup-acciones .btn { width: 100%; }
  #superficie .sup-pie { grid-template-columns: 1fr auto; }
  #superficie .sup-desciende { display: none; }
  #superficie .sup-delfines { top: 20%; width: 70%; height: 22%; }
  #superficie .sup-fondo__mascara { top: 12%; height: 34%; }
}
@media (max-height: 640px) and (max-width: 767px) {
  #superficie .sup-lead .serif { display: block; }
  #superficie .sup-lead { font-size: .95rem; }
}

/* ─── Movimiento reducido ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #superficie .sup-fondo__causticas i,
  #superficie .sup-lectura__punto,
  #superficie .sup-desciende__tubo i { animation: none; }
  #superficie .sup-desciende__tubo i { translate: 0 10px; }
}