/* OASIS · landing v2
   Dirección: campaña deportiva oscura (referencias: catapult.com y meta.com/quest). Imagen a sangre,
   capítulos que cambian con el scroll y tarjetas grandes y redondeadas. Paleta y tipografía de la
   identidad v2 de OASIS, que se mantienen por encima de la regla de «sin violeta». */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/BarlowCondensed-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/Barlow-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* identidad v2 */
  --noche-prof: #12071a;
  --noche: #1e0b29;
  --morado: #5d2a8a;
  --violeta: #8a4fd1;
  --lavanda: #b9a0dc;
  --niebla: #f4f0f8;
  --blanco: #ffffff;
  --verde: #3ef0a0;

  /* superficies: la noche profunda, un punto más neutra para que las veladuras sobre foto no tiñan */
  --bg: #110816;
  --scrim: 17 8 22;
  --surface: #1c0e26;
  --surface-2: #29143a;
  --ink: var(--blanco);
  --muted: #cdbfe2;
  --niebla-rgb: 244 240 248;          /* la niebla, para mezclarla con transparencia sobre la noche */
  --line: rgb(var(--niebla-rgb) / 0.16);
  --verde-hover: #74f6bb;
  --morado-hondo: #3a1a5a;
  --lila-claro: #e7def1;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", system-ui, sans-serif;

  /* tamaños: cartel, titular, título, entrada, texto, pequeño */
  /* el min() solo actúa con el texto agrandado del sistema: el titular crece hasta donde cabe su palabra más larga */
  --s-poster: min(clamp(3.6rem, 15.5vw, 10.5rem), 17vw);
  --s-head: min(clamp(2.5rem, 1.45rem + 4.4vw, 5.25rem), 12vw);
  --s-title: min(clamp(1.75rem, 1.4rem + 1.3vw, 2.625rem), 9vw);
  --s-lead: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --s-body: 1.125rem;
  --s-small: 0.875rem;

  --m: 16px;
  --g: max(var(--m), calc((100vw - 1360px) / 2));
  --section: clamp(96px, 11vw, 168px);
  --r-card: 24px;
  --r-media: 14px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (min-width: 48em) { :root { --m: 24px; } }
@media (min-width: 75em) { :root { --m: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; scrollbar-color: var(--surface-2) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--s-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
:where(ul[class], ol[class], ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 80px; }
::selection { background: var(--verde); color: var(--noche); }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
p { max-width: 62ch; text-wrap: pretty; overflow-wrap: break-word; }
summary, li { text-wrap: pretty; }
.area__name, .bloque__name, .miembro__name, .fase__name { text-wrap: balance; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 50; background: var(--verde); color: var(--noche); padding: 0.6rem 1rem; font-weight: 700; border-radius: var(--r-pill); }
.skip:focus { top: var(--m); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.shout, .head { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: -0.005em; text-wrap: balance; }
.shout { font-size: var(--s-poster); line-height: 0.86; }
.head { font-size: var(--s-head); line-height: 0.9; }

/* ---------- botón: uno solo, en píldora y macizo ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 3.5rem; padding: 0 1.75rem; border-radius: var(--r-pill); background: var(--verde); color: var(--noche); font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: 1.25rem; line-height: 1; letter-spacing: 0.01em; text-align: center; text-decoration: none; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.btn:has(svg) { padding-right: calc(1.75rem - 2px); }
.btn:active { transform: scale(0.96); }
.btn svg { width: 1em; height: 1em; flex: none; transition: transform 200ms var(--ease-out); }
.btn--sm { min-height: 2.75rem; padding: 0 1.25rem; font-size: var(--s-body); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--verde-hover); }
  .btn:hover svg { transform: translateX(4px); }
}
.link, .cookies p a { padding-block: 13px; }
.link { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }

/* cabecera de cada sección: titular y una entrada */
.sec-head { display: grid; gap: 16px; margin-bottom: 40px; }
.sec-head__lead { font-size: var(--s-lead); line-height: 1.3; font-weight: 500; max-width: 36ch; }
@media (min-width: 64em) {
  .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 48px; margin-bottom: 56px; }
  .sec-head__lead { justify-self: end; padding-bottom: 0.3em; }
}

/* ---------- cabecera fija: transparente sobre la portada, opaca al bajar ---------- */
.top { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 28px; padding: 0 var(--g); transition: background-color 300ms ease, -webkit-backdrop-filter 300ms ease, backdrop-filter 300ms ease; }
.top.is-solid { background: rgb(var(--scrim) / 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.top__logo { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; }
.top__logo img { width: 116px; height: auto; }
.top__nav, .top__cta { display: none; }
.top__nav a { text-decoration: none; font-weight: 600; font-size: var(--s-small); padding: 12px 6px; }
@media (min-width: 48em) {
  .top { height: 72px; }
  .top__logo img { width: 136px; }
  .top__nav { display: flex; gap: 16px; }
  .top__cta { display: inline-flex; }
}
@media (hover: hover) and (pointer: fine) { .top__nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; } }

/* ---------- portada: imagen a sangre y el lema centrado sobre el túnel ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; min-height: 100svh; display: grid; align-items: end; justify-items: center; text-align: center; padding: 96px var(--g) 36px; }
.hero__media { position: absolute; inset: 0; z-index: -1; display: block; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim)) 0%, rgb(var(--scrim) / 0.82) 24%, rgb(var(--scrim) / 0) 58%), linear-gradient(to bottom, rgb(var(--scrim) / 0.6), rgb(var(--scrim) / 0) 16%); } /* taste-skill-ignore: veladura neutra sobre foto */
.hero__body { display: grid; gap: 18px; justify-items: center; width: 100%; max-width: 64rem; }
.hero__title { font-size: var(--s-poster); }
.hero__title .linea { display: block; }
.hero__title .palabra, .hero__title .palabra > span { display: inline-block; }
.hero__lead { font-size: var(--s-lead); line-height: 1.3; font-weight: 500; max-width: 30ch; }
.hero__act { display: grid; gap: 12px; justify-items: center; width: 100%; margin-top: 6px; }
.hero__act .btn { width: 100%; }
@media (min-width: 48em) {
  .hero { padding-bottom: 56px; }
  .hero__title { font-size: min(clamp(4.5rem, 9.2vw, 8.125rem), 11vw); }   /* 8,125rem: el titular cabe en dos líneas dentro de los 64rem de la portada */
  .hero__title .linea { display: inline; }
  .hero__act .btn { width: auto; }
}

/* ---------- cinta: las áreas pasan de lado ---------- */
.cinta { background: var(--surface); overflow: hidden; padding: 20px 0; }
.cinta__track { display: flex; width: max-content; font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-head); line-height: 1; color: var(--lavanda); }
.cinta__track span { display: inline-flex; align-items: center; }
.cinta__track span::after { content: ""; width: 0.28em; height: 0.28em; border-radius: 50%; background: var(--verde); margin: 0 0.7em; }

/* ---------- ¿te suena?: la imagen queda fija y cada dolor pasa por encima ---------- */
.suena { position: relative; }
.suena__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.suena__media { position: absolute; inset: 0; }
.suena__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: 0; transition: opacity 500ms var(--ease-in-out); }
.suena__media img.is-on { opacity: 1; }
.suena__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(var(--scrim) / 0.7) 0%, rgb(var(--scrim) / 0) 20%, rgb(var(--scrim) / 0) 40%, rgb(var(--scrim) / 0.88) 74%, rgb(var(--scrim)) 100%); } /* taste-skill-ignore: veladura neutra sobre foto */
.suena.is-fin .suena__media img.is-on { opacity: 0.28; }
.suena__hud { position: absolute; z-index: 1; top: 80px; left: var(--g); right: var(--g); display: grid; gap: 10px; }
.suena__barras { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.suena__barras li { position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: rgb(var(--niebla-rgb) / 0.26); }
.suena__barras li::after { content: ""; position: absolute; inset: 0; background: var(--blanco); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out), background-color 200ms ease; }
.suena__barras li.is-on::after { transform: none; }
.suena__barras li.is-marked::after { background: var(--verde); }
.suena__cuenta { font-size: var(--s-small); font-weight: 700; font-variant-numeric: tabular-nums; }
.suena__pasos { position: relative; z-index: 2; margin-top: -100svh; }
.paso { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 140px var(--g) calc(40px + env(safe-area-inset-bottom)); }
.paso__intro { font-size: var(--s-poster); margin-bottom: 14px; }
.paso__card { width: 100%; max-width: 32rem; background: rgb(var(--scrim) / 0.86); border-radius: var(--r-card); padding: 22px 20px 20px; }
.paso__title { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-title); line-height: 0.95; text-wrap: balance; }
.paso__detail { margin-top: 8px; }
.paso__btn { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 12px; border-radius: var(--r-pill); background: rgb(var(--niebla-rgb) / 0.14); font-weight: 700; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease; }
.paso__btn:active { transform: scale(0.96); }
.paso__check { width: 26px; height: 26px; border-radius: 50%; background: rgb(var(--niebla-rgb) / 0.22); display: grid; place-items: center; transition: background-color 200ms ease; }
.paso__check::after { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5' fill='none' stroke='%233ef0a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; scale: 0.25; filter: blur(4px); transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), scale 300ms cubic-bezier(0.2, 0, 0, 1), filter 300ms cubic-bezier(0.2, 0, 0, 1); }
.paso__btn[aria-pressed="true"] { background: var(--verde); color: var(--noche); }
.paso__btn[aria-pressed="true"] .paso__check { background: var(--noche); }
.paso__btn[aria-pressed="true"] .paso__check::after { opacity: 1; scale: 1; filter: blur(0); }
@media (hover: hover) and (pointer: fine) { .paso__btn:hover { background: rgb(var(--niebla-rgb) / 0.24); } .paso__btn[aria-pressed="true"]:hover { background: var(--verde-hover); } }
.paso--fin { min-height: 64svh; justify-content: center; align-items: center; text-align: center; padding-bottom: 96px; }
@media (max-height: 35em) {
  .suena__hud { top: 60px; }
  .suena__cuenta { display: none; }
  .paso { padding-top: 84px; padding-bottom: 20px; }
  .paso__intro { font-size: var(--s-head); }
  .paso__card { padding: 16px 18px; }
}
.paso__result { font-size: var(--s-lead); line-height: 1.3; font-weight: 600; max-width: 22ch; font-variant-numeric: tabular-nums; }
.paso__result strong { color: var(--verde); font-weight: 700; }
@media (min-width: 64em) {
  .cinta__track { font-size: var(--s-title); }
  .suena__media { left: 50%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%); mask-image: linear-gradient(to right, transparent 0, #000 24%); } /* taste-skill-ignore: máscara del borde de la foto, no un relleno */
  .suena__media::after { display: none; }
  .suena__pasos { width: 50%; }
  .suena__hud { top: 104px; right: auto; width: calc(50% - var(--g) - 56px); }
  .paso { min-height: 72svh; justify-content: center; padding: 120px 56px 72px var(--g); }
  .paso__intro { font-size: var(--s-head); }
  .paso__card { background: var(--surface); padding: 36px; }
  .paso__detail { font-size: var(--s-lead); line-height: 1.3; }
  .paso--fin { align-items: flex-start; text-align: left; }
}

/* ---------- el giro: la frase se enciende al leerla ---------- */
.giro { padding: var(--section) var(--g) 0; }
.giro__sub { margin-top: 24px; font-size: var(--s-lead); line-height: 1.3; font-weight: 600; max-width: 34ch; }
@media (min-width: 64em) {
  .giro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: end; }
  .giro__sub { margin-top: 0; max-width: 44ch; justify-self: end; }
}

/* ---------- el proceso: tres pasos unidos por una línea que se llena al bajar ---------- */
.proceso { padding: var(--section) var(--g) 0; }
.fases { position: relative; display: grid; gap: 44px; padding-left: 40px; }
.fases-wrap { position: relative; }
.fases::before, .fases__linea { content: ""; position: absolute; left: 10px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--line); }
.fases__linea { z-index: 1; background: var(--verde); transform-origin: top; }
.fase { position: relative; display: grid; gap: 10px; }
.fase::before { content: ""; position: absolute; z-index: 1; left: -40px; top: 0.3em; width: 23px; height: 23px; border-radius: 50%; background: var(--verde); outline: 5px solid var(--bg); }
.fase__name { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-head); line-height: 0.9; }
.fase p { max-width: 34ch; }
.proceso__mas { margin-top: 48px; font-size: var(--s-lead); line-height: 1.3; font-weight: 600; max-width: 30ch; }
.proceso__mas::after { content: ""; display: block; width: 28px; height: 28px; margin-top: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v13M6 13l6 6 6-6' fill='none' stroke='%233ef0a0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.js .fase::before { background: var(--surface-2); transition: background-color 300ms ease; }
.js .fase.is-lit::before { background: var(--verde); }
@media (min-width: 64em) {
  .fases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 64px 0 0; }
  .fases::before, .fases__linea { left: 0; right: 0; top: 10px; bottom: auto; width: auto; height: 3px; }
  .fases__linea { transform-origin: left; }
  .fase::before { left: 0; top: -64px; }
  .proceso__mas { max-width: 40ch; }
}

/* ---------- los 4 pilares: una pestaña por pilar ---------- */
.areas { padding: var(--section) var(--g) 0; }
.pestanas__lista { display: none; }
.js .pestanas__lista { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 16px; border-radius: 28px; background: var(--surface); }
.pestana { flex: 1 1 auto; min-height: 48px; padding: 6px 8px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: max(0.9375rem, min(var(--s-body), 4.6vw)); line-height: 1; color: var(--muted); transition: background-color 220ms ease, color 220ms ease, transform 160ms var(--ease-out); }
.pestana:active { transform: scale(0.96); }
.pestana { position: relative; z-index: 1; }
.pestana[aria-selected="true"] { color: var(--noche); }
.pestanas__marca { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: var(--r-pill); background: var(--verde); transition: transform 300ms var(--ease-out), width 300ms var(--ease-out), height 300ms var(--ease-out); }
.pestanas__lista.sin-transicion .pestanas__marca { transition: none; }
@media (hover: hover) and (pointer: fine) { .pestana:not([aria-selected="true"]):hover { color: var(--blanco); } }
.pestanas__paneles { display: grid; gap: 16px; }
.js .pestanas__paneles { grid-template-areas: "p"; }
.js .area { grid-area: p; opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms; }
.js .area.is-on { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out) 80ms; }
.area { border-radius: var(--r-card); overflow: hidden; display: grid; align-content: start; background: var(--morado); }
.area:nth-child(2) { background: var(--surface-2); }
.area:nth-child(3) { background: var(--noche); }
.area:nth-child(4) { background: var(--morado-hondo); }
.area__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--noche); }
.area__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.area__body { padding: 22px 20px 26px; display: grid; gap: 12px; align-content: start; }
.area__name { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-head); line-height: 0.9; }
.area ul { display: grid; gap: 8px; font-weight: 600; }
.area li { display: flex; gap: 10px; }
.area li::before { content: ""; width: 10px; height: 10px; margin-top: 0.5em; flex: none; border-radius: 50%; background: var(--verde); }
@media (min-width: 48em) {
  .js .pestanas__lista { display: inline-flex; flex-wrap: wrap; }
  .pestana { padding: 6px 28px; }
  .area { grid-template-columns: 1fr 1fr; min-height: 34rem; }
  .area__media { aspect-ratio: auto; order: 2; }
  .area__body { align-content: center; padding: 48px; }
  .area__body p { font-size: var(--s-lead); line-height: 1.3; }
}

/* ---------- «ya, pero…»: las dudas como una conversación ---------- */
.dudas { padding: var(--section) var(--g) 0; }
.chat { background: var(--surface); border-radius: var(--r-card); overflow: hidden; padding-bottom: 20px; }
.chat__top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--surface-2); font-weight: 700; }
.chat__top img { width: 36px; height: 36px; border-radius: 50%; background: var(--niebla); padding: 6px; }
.chat__hilo { display: grid; gap: 8px; padding: 20px 14px 0; }
.msg { max-width: 84%; padding: 12px 16px; border-radius: var(--r-card); line-height: 1.4; }
.msg--tu { justify-self: end; background: var(--morado); border-bottom-right-radius: 8px; font-weight: 600; }
.msg--oasis { justify-self: start; background: var(--niebla); color: var(--noche); border-bottom-left-radius: 8px; }
.msg--oasis + .msg--tu { margin-top: 14px; }
@media (min-width: 64em) {
  .dudas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .dudas .sec-head { grid-template-columns: 1fr; position: sticky; top: 120px; }
  .dudas .sec-head__lead { justify-self: start; }
  .chat__hilo { padding: 28px 28px 8px; gap: 10px; }
  .msg { max-width: 72%; padding: 14px 20px; }
}

/* ---------- dentro: la imagen de los directos y la interfaz real de Skool ---------- */
.dentro { padding: var(--section) var(--g) 0; }
.bento { display: grid; gap: 16px; }
.bloque { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-card); background: var(--surface); padding: 26px 22px 0; display: grid; gap: 22px; align-content: space-between; }
.bloque__name { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-title); line-height: 0.95; }
.bloque__text p { margin-top: 8px; }
.bloque--directos { padding-top: 64vw; background: var(--noche); }
.bloque__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bloque--directos::after, .bloque--foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgb(var(--scrim) / 0) 30%, rgb(var(--scrim) / 0.9) 56%, rgb(var(--scrim)) 100%); } /* taste-skill-ignore: veladura neutra sobre foto */
.bloque--directos, .bloque--foto { outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
.bloque--foto { min-height: 30rem; padding: 0 22px 26px; align-content: end; background: var(--noche); }
.bloque--foto .bloque__bg { object-position: 50% 30%; }
.pantalla { border-radius: var(--r-media) var(--r-media) 0 0; overflow: hidden; background: var(--niebla) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8'%3E%3Ccircle cx='4' cy='4' r='3.2' fill='%23c9c2d2'/%3E%3Ccircle cx='16' cy='4' r='3.2' fill='%23c9c2d2'/%3E%3Ccircle cx='28' cy='4' r='3.2' fill='%23c9c2d2'/%3E%3C/svg%3E") 12px 8px / 40px 8px no-repeat; padding-top: 24px; transition: transform 300ms var(--ease-out); }
.pantalla img { width: 100%; }
.dentro__act { margin-top: 32px; }
.dentro__act .btn { width: 100%; }
@media (hover: hover) and (pointer: fine) { .bloque:hover .pantalla { transform: translateY(-6px); } }
@media (min-width: 48em) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bloque--directos { grid-column: 1 / -1; padding-top: 34vw; }
  .bloque--directos .pantalla { width: 62%; }
  .dentro__act .btn { width: auto; }
}
@media (min-width: 64em) {
  .bento { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 20px; }
  .bloque { padding: 36px 36px 0; }
  .bloque--directos { grid-column: 1; grid-row: 1 / span 2; padding-top: 36px; align-content: end; min-height: 46rem; }
  .bloque--directos::after { background: linear-gradient(to bottom, rgb(var(--scrim) / 0) 22%, rgb(var(--scrim) / 0.92) 62%, rgb(var(--scrim)) 100%); } /* taste-skill-ignore: veladura neutra sobre foto */
  .bloque--directos .pantalla { width: 74%; }
  .bloque--foto { padding: 0 36px 36px; min-height: 24rem; }
}

/* ---------- equipo: fotos profesionales y una ficha por persona ---------- */
.equipo { padding: var(--section) var(--g) 0; }
.equipo__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 12px; align-items: stretch; }   /* dos columnas, o una si el texto está agrandado */
.miembro { border-radius: var(--r-card); overflow: hidden; background: var(--surface); display: grid; align-content: start; }
.miembro--fundador { grid-column: 1 / -1; }
.miembro__fotos { position: relative; }
.miembro__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--noche); }
.miembro__info { padding: 16px 14px 20px; display: grid; gap: 6px; }
.miembro__name { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-title); line-height: 0.95; }
.miembro__rol { color: var(--verde); font-size: var(--s-small); font-weight: 700; }
.miembro__info p:last-child { font-size: var(--s-small); line-height: 1.45; }
.miembro--fundador .miembro__info { padding: 22px 20px 24px; }
.miembro--fundador .miembro__info p:last-child { font-size: var(--s-body); }
@media (min-width: 48em) {
  .equipo__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .miembro--fundador { grid-template-columns: 1fr 1fr; }
  .miembro--fundador .miembro__info { align-content: center; padding: 40px; }
  .miembro__info { padding: 22px 22px 26px; }
  .miembro__info p:last-child { font-size: var(--s-body); line-height: 1.5; }
}
/* en el ordenador, un mosaico: Ariel ocupa media fila y dos alturas, y los cuatro profesionales el resto */
@media (min-width: 64em) {
  .equipo__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .miembro--fundador { grid-column: 1 / span 2; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .miembro--fundador .miembro__fotos { flex: 1; min-height: 0; }
  .miembro--fundador .miembro__foto { height: 100%; aspect-ratio: auto; object-position: 50% 20%; }
  .miembro--fundador .miembro__info { padding: 28px 32px 32px; }
}

/* ---------- padres ---------- */
.padres { padding: var(--section) var(--g) 0; display: grid; gap: 32px; }
.padres__media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
.padres__media img { width: 100%; height: 100%; object-fit: cover; }
.padres__lead { margin-top: 14px; font-size: var(--s-lead); line-height: 1.3; font-weight: 500; }
.padres__lista { margin-top: 28px; display: grid; gap: 22px; }
.padres__lista li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; row-gap: 2px; }
.padres__lista li::before { content: ""; grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3L12.5 5' fill='none' stroke='%233ef0a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.padres__lista h3 { font-size: var(--s-body); font-weight: 700; line-height: 1.4; }
@media (min-width: 64em) {
  .padres { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; align-items: center; }
  .padres__lista { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
}

/* ---------- casos: el único sitio con testimonios ---------- */
.casos { padding: var(--section) 0 0; }
.casos .sec-head { padding: 0 var(--g); grid-template-columns: 1fr; }
.muro { padding: 32px var(--g) 0; display: grid; gap: 0 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.caso { grid-column: span 3; }
.caso:nth-child(5n + 3), .caso:nth-child(5n + 4), .caso:nth-child(5n + 5) { grid-column: span 2; }
.caso:nth-child(n + 8) { grid-column: span 3; }
.caso a { display: block; text-decoration: none; color: inherit; transition: opacity 200ms ease; }
.caso__img { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-media); background: var(--noche); outline: 1px solid oklch(1 0 0 / 0.1); outline-offset: -1px; }
.caso__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms var(--ease-out); }
.caso__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caso__play { position: absolute; left: 50%; top: 88%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--verde); color: var(--noche); display: grid; place-items: center; transition: transform 160ms var(--ease-out); }
.caso__play svg { width: 22px; height: 22px; margin-left: 2px; }
.caso__cap { display: grid; gap: 2px; padding: 10px 2px 18px; font-size: var(--s-small); line-height: 1.3; }
.caso__cap span:first-child { font-weight: 700; }
.caso__cap span:last-child { color: var(--muted); }
.caso a:active .caso__play { transform: scale(0.96); }
.casos__note { padding: 18px var(--g) 0; max-width: none; font-size: var(--s-small); color: var(--muted); }
.casos__note a { color: var(--blanco); font-weight: 700; margin-left: 0.4em; }
@media (hover: hover) and (pointer: fine) {
  .muro:hover .caso a { opacity: 0.7; }
  .muro .caso a:hover, .muro .caso a:focus-visible { opacity: 1; }
  .caso a:hover .caso__img img { transform: scale(1.03); }
}
@media (min-width: 48em) {
    .muro { gap: 0 12px; grid-template-columns: repeat(20, minmax(0, 1fr)); }
  .caso__cap { display: flex; justify-content: space-between; gap: 8px; }
  .caso__cap span:last-child { text-align: right; }
  .caso, .caso:nth-child(5n + 3), .caso:nth-child(5n + 4), .caso:nth-child(5n + 5), .caso:nth-child(n + 8) { grid-column: span 4; }
  .caso:nth-child(n + 6) { grid-column: span 5; }
  .caso__play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}

/* ---------- reproductor ---------- */
.player { border: 0; padding: 0; background: transparent; width: min(92vw, calc(86svh * 9 / 16)); max-width: none; max-height: none; overflow: visible; opacity: 1; transition: opacity 160ms ease, scale 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete; }
.player:not([open]) { opacity: 0; }
.player[open] { transition: opacity 240ms var(--ease-out), scale 300ms var(--ease-out), overlay 240ms allow-discrete, display 240ms allow-discrete; }
@starting-style { .player[open] { opacity: 0; } }
.player::backdrop { background: rgb(var(--scrim) / 0.92); transition: background-color 240ms ease, overlay 240ms allow-discrete, display 240ms allow-discrete; }
@starting-style { .player[open]::backdrop { background: rgb(var(--scrim) / 0); } }
.player video { width: 100%; aspect-ratio: 9 / 16; height: auto; max-height: 86svh; background: var(--noche); border-radius: var(--r-media); }
.player__close:active { transform: scale(0.96); }
.player__close { transition: transform 160ms var(--ease-out); position: absolute; right: 0; top: -56px; min-width: 44px; height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--niebla); color: var(--noche); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }

/* ---------- garantía: banda a sangre con su imagen ---------- */
.garantia { position: relative; isolation: isolate; overflow: clip; min-height: 92svh; margin-top: var(--section); display: grid; align-items: end; padding: 120px var(--g) 64px; }
.garantia__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.garantia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--scrim)) 0%, rgb(var(--scrim) / 0.86) 42%, rgb(var(--scrim) / 0.15) 78%, rgb(var(--scrim) / 0.5) 100%); } /* taste-skill-ignore: veladura neutra sobre foto */
.garantia__body { display: grid; gap: 16px; max-width: 40rem; }
.garantia__text { font-size: var(--s-lead); line-height: 1.3; font-weight: 600; }
.garantia__fine { color: var(--muted); }
.garantia .btn { width: 100%; margin-top: 8px; }
@media (min-width: 48em) {
  .garantia { align-items: center; }
  .garantia::after { background: linear-gradient(to right, rgb(var(--scrim)) 0%, rgb(var(--scrim) / 0.84) 38%, rgb(var(--scrim) / 0) 72%); } /* taste-skill-ignore: veladura neutra sobre foto */
  .garantia .btn { width: auto; }
}

/* ---------- preguntas ---------- */
.faq { padding: var(--section) var(--g); }
.faq__lista { display: grid; gap: 10px; }
.pregunta { border-radius: var(--r-card); background: var(--surface); }
.pregunta summary { position: relative; list-style: none; cursor: pointer; padding: 22px 64px 22px 22px; font-weight: 700; line-height: 1.35; border-radius: var(--r-card); }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 240ms var(--ease-out), background-color 200ms ease; }
.pregunta[open] summary::after { transform: rotate(45deg); background-color: var(--morado); }
.pregunta p { padding: 0 22px 24px; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .pregunta::details-content { block-size: 0; overflow: clip; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
  .pregunta[open]::details-content { block-size: auto; }
}
@media (hover: hover) and (pointer: fine) { .pregunta summary:hover::after { background-color: var(--morado); } }
@media (min-width: 64em) {
  .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; }
  .faq .sec-head { grid-template-columns: 1fr; }
  .pregunta summary { padding: 26px 72px 26px 28px; }
  .pregunta p { padding: 0 28px 28px; }
}

/* ---------- pie: invitación sobre un fondo liso ---------- */
.pie { position: relative; background: var(--niebla); color: var(--noche); padding: 72px var(--g) 24px; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.pie__invite { display: grid; gap: 24px; justify-items: start; }
.pie__invite .btn { width: 100%; }
.pie__links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 0 22px; font-weight: 600; }
.pie__links a { overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.pie__legal { position: relative; z-index: 1; margin-top: 72px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; font-size: var(--s-small); padding-bottom: 10px; }
.pie__legal nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.pie__legal nav a, .pie__legal button { display: inline-flex; align-items: center; min-height: 44px; }
.pie__legal button { text-decoration: underline; text-underline-offset: 0.2em; font-size: inherit; }
@media (min-width: 48em) {
  .pie { min-height: 70svh; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--m); padding-top: 112px; padding-bottom: 32px; }
  .pie__invite { grid-column: 1 / -1; }
  .pie__invite .btn { width: auto; }
  .pie__links, .pie__legal { grid-column: 1 / -1; }
  .pie__legal { margin-top: 48px; align-self: end; }
  }
@media (min-width: 64em) {
  .pie__invite { grid-column: 1 / span 8; }
  .pie__links { grid-column: 9 / -1; grid-row: 1; justify-self: end; margin-top: 0; flex-direction: column; gap: 0; align-items: flex-end; }
}

/* ---------- barra fija del móvil ---------- */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px var(--m) calc(10px + env(safe-area-inset-bottom)); background: rgb(var(--scrim) / 0.94); transform: translateY(110%); transition: transform 200ms var(--ease-out); }
.barra .btn { width: 100%; min-height: 3.25rem; }
.barra.is-on { transform: none; transition: transform 340ms var(--ease-drawer); }
@media (min-width: 48em) { .barra { display: none; } }

/* ---------- movimiento: el contenido se ve igual sin JavaScript ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; translate: 0 20px; transition: opacity 600ms var(--ease-out), translate 750ms var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; translate: 0 0; }
  /* el chat: cada mensaje sale de su esquina, y la respuesta llega un momento después */
  .js .chat .msg[data-reveal] { translate: 0 10px; scale: 0.96; transition: opacity 260ms var(--ease-out), translate 420ms var(--ease-out), scale 420ms var(--ease-out); transition-delay: 0ms; }
  .js .chat .msg--tu[data-reveal] { transform-origin: 100% 100%; }
  .js .chat .msg--oasis[data-reveal] { transform-origin: 0 100%; transition-delay: 380ms; }
  .js .chat .msg[data-reveal].is-in { scale: 1; }
  /* la portada: la foto se acerca y cada palabra del titular sube desde su máscara */
  .js .hero__media img { animation: acercar 1800ms var(--ease-out) both; }
  .js .hero__title .palabra { clip-path: inset(-0.3em -0.4em -0.06em -0.4em); animation: soltar 0s linear 1.4s forwards; }
  .js .hero__title .palabra > span { translate: 0 108%; animation: linea 760ms var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 45ms + 80ms); }
  .js .hero__lead, .js .hero__act { opacity: 0; translate: 0 16px; animation: subir 700ms var(--ease-out) forwards; animation-delay: 380ms; }
  .js .hero__act { animation-delay: 480ms; }
  .suena__media img { transform: scale(1.06); transition: opacity 500ms var(--ease-in-out), transform 1400ms var(--ease-out); }
  .suena__media img.is-on { transform: none; }
  .js .area { translate: 0 8px; }
  .js .area.is-on { translate: 0 0; transition: opacity 320ms var(--ease-out) 80ms, translate 420ms var(--ease-out) 80ms; }
  .js .area.is-on .area__media img { animation: acercar 1400ms var(--ease-out) both; }
  .player:not([open]) { scale: 0.97; }
  @starting-style { .player[open] { scale: 0.96; } }
  .js .fase { opacity: 0.55; transition: opacity 500ms ease; }
  .js .fase.is-lit { opacity: 1; }
  .js [data-words] .w { opacity: 0.5; transition: opacity 240ms linear; }
  .js [data-words] .w.is-lit { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* menos movimiento no es ningún cambio: la barra y la marca de las pestañas cambian sin desplazarse */
  .barra, .barra.is-on { transform: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .barra.is-on { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
  .pestanas__marca { transition: none; }
}
@keyframes subir { to { opacity: 1; translate: 0 0; } }
@keyframes linea { to { translate: 0 0; } }
@keyframes soltar { to { clip-path: none; } }
@keyframes acercar { from { transform: scale(1.08); } }

/* ---------- aviso de cookies ---------- */
.cookies { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: var(--niebla); color: var(--noche); padding: 16px var(--m) calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 14px; }   /* 14 px: el toque ampliado del enlace no llega a los botones */
.cookies[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cookies { transition: translate 380ms var(--ease-drawer), opacity 240ms ease; }
  @starting-style { .cookies { translate: 0 100%; opacity: 0; } }
}
.cookies h2 { font-size: var(--s-body); font-weight: 700; }
.cookies p { font-size: var(--s-small); }
.cookies__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cookies__btns button { min-height: 46px; border-radius: var(--r-pill); background: var(--noche); color: var(--niebla); font-weight: 700; font-size: var(--s-small); padding: 0 8px; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
.cookies__btns button:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .cookies__btns button:hover { background: var(--morado); } }
.cookies__panel { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-media); background: var(--lila-claro); }
.cookies__panel[hidden] { display: none; }
.cookies__opt { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; font-size: var(--s-small); }
.cookies__opt strong { display: block; }
.cookies__opt input { width: 22px; height: 22px; accent-color: var(--morado); flex: none; margin-top: 2px; }
@media (min-width: 48em) {
  .cookies { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: 14px var(--m); }
  .cookies__panel { grid-column: 1 / -1; grid-row: 2; }
  .cookies__btns { grid-template-columns: repeat(3, 9rem); }
}


/* ---------- páginas legales ---------- */
.legal { background: var(--niebla); color: var(--noche); color-scheme: light; scrollbar-color: auto; }
.legal__top { background: var(--noche); color: var(--blanco); display: flex; align-items: center; justify-content: space-between; padding: 18px var(--m); }
.legal__top img { width: 140px; height: auto; }
.legal__back { font-weight: 600; font-size: var(--s-small); }
.legal__main { padding: 56px var(--m) 96px; max-width: 46rem; margin: 0 auto; }
.legal__main h1 { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; font-size: var(--s-head); line-height: 0.9; text-wrap: balance; }
.legal__main h1 + p { margin-top: 12px; color: #5b4a6e; font-size: var(--s-small); }
.legal__main h2 { margin-top: 48px; font-weight: 700; font-size: 1.375rem; line-height: 1.25; }
.legal__main h3 { margin-top: 28px; font-weight: 700; font-size: var(--s-body); }
.legal__main p, .legal__main ul, .legal__main .tabla { margin-top: 14px; }
.legal__main ul { padding-left: 1.2em; }
.legal__main li + li { margin-top: 6px; }
.legal__main a { color: var(--morado); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.legal__main code { font-family: inherit; font-weight: 600; }
.tabla { overflow-x: auto; }
.tabla table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--s-small); }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid #d9cde8; }
.tabla th { background: var(--lila-claro); font-weight: 700; }
.legal__foot { background: var(--noche); color: var(--blanco); padding: 24px var(--m) 120px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: var(--s-small); }
.legal__foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.legal__foot button { text-decoration: underline; text-underline-offset: 0.2em; font-size: inherit; }