/* Alberto Aparicio Music · «Mar adentro» v2
   Escrito desde cero para este embudo. Marca: Bodoni Moda (manual) + Jost (sustituto web de
   Century Gothic). Universo: olas del mar, filtro Midnight, LED azul del estudio.
   Sistema de forma: botones y etiquetas en píldora; contenedores con doble marco
   (carcasa 28/36 px + núcleo concéntrico); nada de bloques de color de borde a borde. */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root {
  --bg: #0A1426;
  --bg-deep: #070E1B;
  --surface: #0F1C33;
  --surface-2: #14243F;
  --hair: rgba(200, 205, 212, 0.12);
  --line: rgba(200, 205, 212, 0.16);
  --line-strong: rgba(200, 205, 212, 0.34);
  --text: #EEF1F6;
  --text-dim: #A9B3C4;
  --silver: #C8CDD4;
  --accent: #3460F2;          /* fondo de botón: 4,7:1 con --on-accent */
  --accent-hover: #2F57E6;
  --accent-text: #6E8FFF;     /* azul LED como texto: 6,2:1 sobre --bg */
  --on-accent: #F4F6FA;
  --glow: rgba(52, 96, 242, 0.32);

  --display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --sans: "Jost", "Century Gothic", system-ui, sans-serif;

  --fs-pill: 0.72rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --fs-h3: clamp(1.45rem, 1.2rem + 1vw, 2.1rem);
  --fs-h2: clamp(2.3rem, 1.5rem + 3vw, 4.4rem);
  --fs-h2-xl: clamp(2.7rem, 1.6rem + 4.4vw, 6rem);
  --fs-hero: clamp(3rem, 1.6rem + 5.6vw, 7.6rem);

  --maxw: 1240px;
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
  --space-section: clamp(6rem, 4rem + 7vw, 12rem);
  --topbar-h: 60px;

  --r-shell: 28px;
  --r-shell-xl: 36px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-deep); color: var(--text);
  font: 400 var(--fs-body) / 1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Grano de película: capa fija sin eventos ni blend (gotcha A2); fuera en móvil */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--space-section); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1rem; background: var(--accent); color: var(--on-accent); border-radius: var(--r-pill); }
.skip:focus { top: 1rem; }
#nav-sentinel { position: absolute; top: 100px; height: 1px; width: 1px; }

.pill {
  display: inline-flex; align-items: center; align-self: flex-start; margin: 0 0 1.6rem; padding: 0.42rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(200, 205, 212, 0.06);
  font: 500 var(--fs-pill) / 1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver);
}
.h2 { font-family: var(--display); font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.h2--xl { font-size: var(--fs-h2-xl); line-height: 1.02; }
.h2 em, .hero__title em, .manifesto em { font-style: italic; color: var(--silver); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-dim); max-width: 44ch; }

/* ---------- Doble marco (carcasa + núcleo concéntrico) ---------- */
.bezel {
  margin: 0; padding: 6px; border-radius: var(--r-shell);
  background: linear-gradient(160deg, rgba(200, 205, 212, 0.1), rgba(200, 205, 212, 0.03));
  border: 1px solid var(--hair);
  box-shadow: 0 40px 90px -50px var(--glow), 0 2px 0 rgba(255, 255, 255, 0.03) inset;
}
.bezel__core {
  position: relative; height: 100%; overflow: hidden;
  border-radius: calc(var(--r-shell) - 6px); background: var(--surface);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.bezel--xl { padding: 8px; border-radius: var(--r-shell-xl); }
.bezel--xl > .bezel__core { border-radius: calc(var(--r-shell-xl) - 8px); }
.bezel picture, .bezel img, .bezel video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Botones: píldora con icono anidado ---------- */
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn svg.fill, .btn--round svg { fill: currentColor; stroke: none; }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.9rem;
  min-height: 56px; padding: 0 0.45rem 0 1.6rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font: 500 1rem / 1 var(--sans); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 18px 40px -18px rgba(52, 96, 242, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 500ms var(--ease-drawer), background-color var(--dur) ease;
}
.btn:active { transform: scale(0.98); }
.btn--ghost { background: rgba(7, 14, 27, 0.35); color: var(--text); border-color: var(--line-strong); box-shadow: none; }
.btn--ghost .btn__icon { background: rgba(200, 205, 212, 0.1); }
.btn--sm { min-height: 42px; padding: 0 1.15rem; font-size: 0.94rem; box-shadow: none; }
.btn--round { width: 56px; padding: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-hover); }
  .btn:hover .btn__icon { transform: translate(3px, -2px) scale(1.06); background: rgba(255, 255, 255, 0.24); }
  .btn--ghost:hover { background: rgba(200, 205, 212, 0.08); border-color: var(--silver); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Topbar: isla flotante ---------- */
.topbar { position: fixed; top: 14px; left: 0; right: 0; z-index: 40; padding-inline: var(--gutter); transition: transform 600ms var(--ease-drawer); }
.topbar.is-hidden { transform: translateY(calc(-100% - 20px)); }
.topbar__island {
  position: relative; overflow: hidden;
  max-width: var(--maxw); height: var(--topbar-h); margin-inline: auto; padding: 0 9px 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: background-color 500ms var(--ease-out), border-color 500ms var(--ease-out);
}
.topbar.is-scrolled .topbar__island {
  background: rgba(7, 14, 27, 0.62); border-color: var(--hair);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 50px -30px rgba(0, 0, 0, 0.8);
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__icon { width: 30px; height: 30px; }
.brand__name { font: 500 0.78rem / 1.15 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.brand__name span { display: block; color: var(--text-dim); letter-spacing: 0.34em; }
.topbar__progress { position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px; background: var(--accent-text); transform: scaleX(0); transform-origin: left; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 14, 27, 0.55) 0%, rgba(7, 14, 27, 0.1) 30%, rgba(7, 14, 27, 0.55) 62%, var(--bg-deep) 100%),
    linear-gradient(90deg, rgba(7, 14, 27, 0.78) 0%, rgba(7, 14, 27, 0.25) 60%, rgba(7, 14, 27, 0.1) 100%);
}
.hero__mist { position: absolute; left: -20%; width: 140%; max-width: none; height: auto; pointer-events: none; }
.hero__mist--a { bottom: -18%; opacity: 0.2; animation: drift 46s linear infinite alternate; }
.hero__mist--b { bottom: -8%; opacity: 0.1; transform: scaleX(-1); animation: drift-b 60s linear infinite alternate; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes drift-b { from { transform: scaleX(-1) translateX(-5%); } to { transform: scaleX(-1) translateX(7%); } }

.hero__content {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--topbar-h) + 6rem); padding-bottom: clamp(3rem, 9vh, 6.5rem);
}
.hero__title { font-family: var(--display); font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.025em; max-width: 12.5ch; margin-bottom: clamp(1.6rem, 4vh, 2.8rem); text-wrap: balance; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 4rem; align-items: end; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.hero__sub { font-size: var(--fs-lead); color: var(--silver); max-width: 42ch; margin: 0; }

.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.word > span { display: inline-block; }
.is-split .word > span { animation: word-in 1.2s var(--ease-enter) both; animation-delay: calc(200ms + var(--i) * 70ms); }
@keyframes word-in { from { transform: translateY(110%) rotate(4deg); filter: blur(6px); } to { transform: none; filter: blur(0); } }
.hero .pill, .hero__foot { animation: fade-up 1.2s var(--ease-enter) both; }
.hero .pill { animation-delay: 80ms; }
.hero__foot { animation-delay: 650ms; }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Marquesina cinética ---------- */
.tagline { position: relative; overflow: hidden; padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-block: 1px solid var(--hair); background: var(--bg-deep); }
.tagline__track { display: flex; align-items: center; width: max-content; gap: clamp(1.5rem, 3vw, 3rem); will-change: transform; }
.tagline__track span { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.8rem) / 1 var(--display); white-space: nowrap; color: var(--text); }
.tagline__track span em { color: var(--silver); }
.tagline__track i {
  flex: none; width: 54px; height: 14px; opacity: 0.7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 14'%3E%3Cpath d='M1 7c6.5-8 13-8 19.5 0S33.5 15 40 7s9.5-6 13 0' fill='none' stroke='%236E8FFF' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Reveal (main.js) ---------- */
[data-reveal] { opacity: 0; transform: translateY(36px); filter: blur(10px); transition: opacity 1100ms var(--ease-enter), transform 1100ms var(--ease-enter), filter 1100ms var(--ease-enter); }
[data-reveal].is-revealed { opacity: 1; transform: none; filter: blur(0); }
[data-reveal="clip"] { opacity: 1; transform: none; filter: none; clip-path: inset(100% 0 0 0); transition: clip-path 1500ms var(--ease-enter); }
[data-reveal="clip"].is-revealed { clip-path: inset(0 0 0 0); }

/* ---------- 2 · La orilla ---------- */
.shore { overflow: hidden; background: radial-gradient(70% 60% at 90% 20%, rgba(52, 96, 242, 0.12), transparent 70%), var(--bg-deep); }
.shore__wave { position: absolute; right: -8%; bottom: 2%; width: min(78vw, 1120px); max-width: none; opacity: 0.15; pointer-events: none; }
.shore__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.shore__collage { position: relative; aspect-ratio: 5 / 6; }
.shore__photo { position: absolute; }
.shore__photo picture { transform: scale(1.14); }
.shore__photo--tall { left: 0; top: 0; width: 62%; aspect-ratio: 2 / 3; rotate: -2.5deg; }
.shore__photo--wide { right: 0; bottom: 2%; width: 64%; aspect-ratio: 3 / 2; rotate: 2deg; }
.shore__copy .h2 { max-width: 14ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.worries { list-style: none; margin: 0; padding: 0; }
.worry { padding: 1.7rem 0; border-top: 1px solid var(--line); }
.worry__fear { font: italic 400 var(--fs-h3) / 1.2 var(--display); color: var(--text); margin-bottom: 0.55rem; }
.worry__answer { color: var(--text-dim); max-width: 46ch; margin: 0; }

/* ---------- 3 · Escucha la diferencia ---------- */
.listen { background: var(--bg-deep); }
.listen__core { isolation: isolate; }
.listen__sea { position: absolute; inset: 0; z-index: -1; }
.listen__sea img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; opacity: 0.62; }
.listen__core::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(7, 14, 27, 0.94) 0%, rgba(7, 14, 27, 0.72) 48%, rgba(7, 14, 27, 0.35) 100%); }
.listen__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 5vw, 5rem); }
.listen__head .h2 { margin-bottom: 1.2rem; }
.ab__tracks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ab__track {
  min-height: 44px; padding: 0 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: rgba(7, 14, 27, 0.4); color: var(--text-dim); font-size: 0.95rem; cursor: pointer;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ab__track:active { transform: scale(0.97); }
.ab__track[aria-pressed="true"] { color: var(--text); border-color: var(--accent-text); background: rgba(52, 96, 242, 0.2); }
@media (hover: hover) and (pointer: fine) { .ab__track:hover { color: var(--text); } }
.ab__scope { display: block; width: 100%; height: clamp(90px, 12vw, 140px); margin: 1.4rem 0 1rem; }
.ab__deck { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.4rem; }
.ab__play {
  position: relative; width: 76px; height: 76px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 20px 40px -16px rgba(52, 96, 242, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ab__play svg { width: 28px; height: 28px; fill: currentColor; }
.ab__play::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent-text); opacity: 0; }
.ab.is-playing .ab__play::after { animation: ring 2.2s var(--ease-out) infinite; }
@keyframes ring { from { opacity: 0.7; transform: scale(0.92); } to { opacity: 0; transform: scale(1.35); } }
.ab__play:active { transform: scale(0.95); }
.ab__icon-pause { display: none; }
.ab.is-playing .ab__icon-pause { display: block; }
.ab.is-playing .ab__icon-play { display: none; }
.ab__switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: rgba(7, 14, 27, 0.5); }
.ab__switch button { position: relative; z-index: 1; min-height: 46px; min-width: 8.4rem; padding: 0 1.2rem; border: 0; background: none; color: var(--text-dim); font-weight: 500; cursor: pointer; transition: color var(--dur) ease; }
.ab__switch button[aria-pressed="true"] { color: var(--on-accent); }
.ab__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--accent); transition: transform 460ms var(--ease-drawer); }
.ab[data-version="after"] .ab__thumb { transform: translateX(100%); }
.ab__timeline { margin-top: 1.4rem; }
.ab__line { position: relative; height: 22px; cursor: pointer; touch-action: none; }
.ab__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.ab__fill { position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--accent-text); transform: scaleX(0); transform-origin: left; }
.ab__time { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ---------- 4 · Proceso ---------- */
.process { background: linear-gradient(180deg, var(--bg-deep), var(--bg) 40%, var(--bg-deep)); }
.process__title { max-width: 16ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.process__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 7rem); }
.process__bezel { position: sticky; top: calc(var(--topbar-h) + 8vh); }
.process__frame { margin: 0; aspect-ratio: 4 / 5; max-height: 72vh; width: 100%; }
.process__img { position: absolute; inset: 0; z-index: 1; clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--ease-enter); }
.process__img img { transform: scale(1.1); transition: transform 1600ms var(--ease-enter); }
.process__img.is-active { z-index: 2; clip-path: inset(0 0 0 0); }
.process__img.is-active img { transform: scale(1); }
.process__list { position: relative; padding-left: clamp(1.5rem, 3vw, 2.6rem); }
.process__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.process__rail-fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--accent-text), var(--silver)); transform: scaleY(0); transform-origin: top; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.28; transform: translateX(-8px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-enter); }
.step:last-child { min-height: 52vh; }
.step.is-active { opacity: 1; transform: none; }
.step__title { font-family: var(--display); font-size: var(--fs-h3); line-height: 1.15; margin-bottom: 0.9rem; max-width: 18ch; }
.step p { color: var(--text-dim); max-width: 40ch; margin: 0; }
.step__img { display: none; }

/* ---------- 5 · Mar adentro (zoom fijado) ---------- */
.sea { padding-block: clamp(2rem, 4vw, 4rem); background: var(--bg-deep); }
.sea__pin { position: relative; height: 100svh; min-height: 560px; width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; overflow: hidden; }
.sea__frame { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-shell-xl); background: var(--surface); }
.sea__img, .sea__img img { width: 100%; height: 100%; object-fit: cover; }
.sea__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 14, 27, 0.1) 25%, rgba(7, 14, 27, 0.92) 100%); }
.sea__mist { position: absolute; left: -15%; bottom: -10%; width: 130%; max-width: none; opacity: 0.28; animation: drift 52s linear infinite alternate; }
.sea__copy { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 8vh, 5.5rem); }
.sea__copy .h2 { max-width: 12ch; margin-bottom: 1.2rem; }
.sea__copy .lead { color: var(--silver); }

/* ---------- 6 · Alberto ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.about__mask { aspect-ratio: 4 / 5; }
.about__mask picture { transform: scale(1.12); }
.about__mask img { object-position: 80% center; }
.about__copy .h2 { margin-bottom: 1.6rem; max-width: 12ch; }
.about__copy > p { color: var(--text-dim); max-width: 48ch; }
.about__quote { margin: 2.4rem 0 0; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.about__quote p { font: italic 400 var(--fs-h3) / 1.25 var(--display); color: var(--silver); max-width: 22ch; margin: 0; }

/* ---------- 7 · Sesiones ---------- */
.sessions { background: radial-gradient(60% 50% at 15% 85%, rgba(52, 96, 242, 0.1), transparent 70%), var(--bg-deep); }
.manifesto { font: 400 clamp(2rem, 1.1rem + 3.4vw, 4.6rem) / 1.12 var(--display); letter-spacing: -0.015em; max-width: 22ch; margin: 0 0 clamp(3.5rem, 7vw, 6rem); text-wrap: balance; }
.manifesto.is-scrub .w { opacity: 0.16; transition: opacity 120ms linear; }
.sessions__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.sessions__note { margin: 0 0 2rem; }
.sessions__reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.6vw, 2.4rem); align-items: start; }
.reel { aspect-ratio: 9 / 16; }
.reel--a { rotate: -2.5deg; }
.reel--b { rotate: 3deg; margin-top: 22%; }

/* ---------- 8 · Dudas ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq__grid .h2 { max-width: 11ch; position: sticky; top: calc(var(--topbar-h) + 4rem); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; position: relative; padding: 1.5rem 3.2rem 1.5rem 0; font-weight: 500; font-size: 1.1rem; line-height: 1.4; transition: color var(--dur) ease; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 14px; height: 1.5px; background: var(--silver); transition: transform 400ms var(--ease-drawer); }
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
@media (hover: hover) and (pointer: fine) { .faq__item summary:hover { color: var(--accent-text); } }
.faq__item p { color: var(--text-dim); max-width: 56ch; padding-bottom: 1.5rem; margin: 0; }

/* ---------- 9 · Cierre: la marea ---------- */
.final { padding: clamp(2rem, 4vw, 3rem) var(--gutter) var(--space-section); background: var(--bg-deep); }
.final__stage { position: relative; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; border-radius: var(--r-shell-xl); overflow: hidden; border: 1px solid var(--hair); background: var(--bg); isolation: isolate; }
.final__tide { position: absolute; inset: 0; z-index: -1; }
.final__tide picture, .final__tide img { width: 100%; height: 100%; object-fit: cover; object-position: center 75%; }
.final__tide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 14, 27, 0.92) 0%, rgba(7, 14, 27, 0.6) 55%, rgba(7, 14, 27, 0.3) 100%); }
.final__foam { position: absolute; left: -5%; top: 0; width: 110%; max-width: none; opacity: 0; pointer-events: none; z-index: 0; }
.final__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: clamp(560px, 86svh, 820px); padding-block: clamp(3rem, 7vw, 6rem); }
.final__title { max-width: 12ch; margin-bottom: 1.4rem; }
.final .lead { margin-bottom: 2.4rem; color: #D6DCE6; }
.final__portrait { aspect-ratio: 4 / 5; rotate: 2.5deg; }
.final__portrait img { object-position: 72% center; }

/* ---------- Footer ---------- */
.footer { padding: 3.5rem 0 calc(3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); background: var(--bg-deep); }
.footer__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.footer__logo { width: 92px; height: auto; opacity: 0.9; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center; }
.footer__nav a, .footer__nav button { color: var(--text-dim); text-decoration: none; font-size: 0.92rem; background: none; border: 0; padding: 0.3rem 0; cursor: pointer; transition: color var(--dur) ease; }
.footer__nav a:hover, .footer__nav button:hover { color: var(--text); }
.footer__copy { margin: 0; color: var(--text-dim); font-size: 0.86rem; }

.sticky-cta { display: none; }

/* ---------- Banner de cookies ---------- */
.cookie-banner {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 60; max-width: 540px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 1rem; align-items: center;
  padding: 1.1rem 1.2rem; border: 1px solid var(--line-strong); border-radius: 22px;
  background: rgba(15, 28, 51, 0.94); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(14px); transition: opacity var(--dur) ease, transform 500ms var(--ease-drawer);
}
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner__icon { width: 40px; height: 40px; }
.cookie-banner__body { fill: var(--surface-2); stroke: var(--silver); stroke-width: 1.2; }
.cookie-banner__chip { fill: var(--accent-text); }
.cookie-banner__text { margin: 0; font-size: 0.9rem; color: var(--text-dim); }
.cookie-banner__text a { color: var(--text); }
.cookie-banner__text--short { display: none; }
.cookie-banner__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 0.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .listen__inner { grid-template-columns: minmax(0, 1fr); }
  .final__grid { grid-template-columns: minmax(0, 1fr); }
  .final__portrait { display: none; }
}

@media (max-width: 820px) {
  body::after { display: none; }
  .brand__name { display: none; }
  .topbar { top: 10px; }
  .hero { min-height: 92svh; }
  .hero__content { padding-top: calc(var(--topbar-h) + 4rem); padding-bottom: 2.5rem; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .hero__shade { background: linear-gradient(180deg, rgba(7, 14, 27, 0.45) 0%, rgba(7, 14, 27, 0.35) 35%, rgba(7, 14, 27, 0.85) 70%, var(--bg-deep) 100%); }

  .shore__grid, .about__grid, .sessions__grid, .faq__grid, .process__grid { grid-template-columns: minmax(0, 1fr); }
  .shore__wave { width: 140vw; right: -40%; top: 2%; }
  .shore__collage { max-width: 520px; width: 100%; }
  .shore__photo--tall, .shore__photo--wide, .reel--a, .reel--b, .final__portrait { rotate: none; }

  .process__stage { display: none; }
  .process__list { padding-left: 1.4rem; }
  .step { min-height: 0; opacity: 1; transform: none; padding: 2rem 0; }
  .step__img { display: block; aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; margin-bottom: 1.4rem; }
  .step__img img { width: 100%; height: 100%; object-fit: cover; }

  .sea__pin { height: auto; min-height: 0; padding-inline: var(--gutter); }
  .sea__frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-shell); }
  .sea__copy { position: relative; bottom: auto; padding: 2rem 0 0; }

  .faq__grid .h2 { position: static; }
  .sessions__reels { max-width: 520px; }
  .reel--b { margin-top: 14%; }

  .final { padding-inline: var(--gutter); }
  .final__grid { min-height: 0; }

  .footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .footer__nav { justify-content: flex-start; }

  .sticky-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(7, 14, 27, 0.96); border-top: 1px solid var(--hair);
    transform: translateY(110%); transition: transform 500ms var(--ease-drawer);
  }
  .sticky-cta .btn { padding: 0 1.4rem; }
  .sticky-cta .btn--round { padding: 0; }
  .sticky-cta.is-visible { transform: none; }
  .cookie-banner { right: 1rem; bottom: calc(1rem + 76px); }
}

@media (max-width: 560px) {
  .pill { font-size: 0.64rem; letter-spacing: 0.13em; white-space: nowrap; }
  .hero .cta-row .btn { width: 100%; justify-content: space-between; }
  .final .cta-row .btn { width: 100%; justify-content: space-between; }
  .ab__switch button { min-width: 0; padding: 0 1rem; }
  .cookie-banner__text--full { display: none; }
  .cookie-banner__text--short { display: inline; }
}

@media (max-width: 820px) and (max-height: 740px) {
  .hero__sub { display: none; }
}

/* ---------- Movimiento reducido: todo visible, nada se mueve ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal], [data-reveal="clip"] { opacity: 1; transform: none; filter: none; clip-path: none; }
  .is-split .word > span, .hero .pill, .hero__foot { animation: none; }
  .hero__mist, .sea__mist { animation: none; }
  .shore__photo picture, .about__mask picture { transform: none; }
  .step { opacity: 1; transform: none; }
}