/* Web pública de Flow Rolling. Design System Marea: un solo acento teal, Manrope para todo y
   Barlow Semi Condensed solo en etiquetas en mayúsculas. Cabecera con gradiente y ola.
   Tema claro siempre, también con el móvil en modo oscuro (decisión de Jorge, 06/11/2026). */
:root {
  --fondo: #ffffff;
  --superficie: #f4f8f9;
  --texto: #10262c;
  --suave: #4f666c;
  --linea: #d6e4e7;
  --acento: #009eb9;
  --acento-fuerte: #007e93;
  --acento-suave: #e1f4f7;
  --sobre-acento: #ffffff;
  --ok: #1f7a4a;
  --cuerpo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --etiqueta: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 38, 44, .06), 0 6px 20px rgba(16, 38, 44, .06);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.6 var(--cuerpo); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento-fuerte); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
ul { margin: 0; }

.envoltura { width: 100%; max-width: 72rem; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.lectura { max-width: 44rem; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--superficie); padding: 8px 12px; z-index: 20; }
.saltar:focus { left: 8px; }
.etiqueta { font-family: var(--etiqueta); font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-fuerte); }
.suave { color: var(--suave); }
.pequeno { font-size: .9rem; }

/* ── Cabecera Marea ── */
.cabecera { position: relative; background: linear-gradient(165deg, #00aecb, #007e93); color: #fff; padding-bottom: 72px; }
.cabecera a { color: #fff; }
.cabecera-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(14px, env(safe-area-inset-top, 0px)); padding-bottom: 14px; position: relative; z-index: 3; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 1.1rem; }
.marca img { border-radius: 50%; background: #fff; }
.ola { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 72px; display: block; }
.ola path { fill: var(--fondo); }

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: none; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font-weight: 700; }
.menu summary::-webkit-details-marker { display: none; }
.menu-icono, .menu-icono::before, .menu-icono::after { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative; }
.menu-icono::before, .menu-icono::after { content: ""; position: absolute; left: 0; }
.menu-icono::before { top: -6px; } .menu-icono::after { top: 6px; }
.menu nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.menu nav a { text-decoration: none; font-weight: 600; font-size: .98rem; padding: 6px 2px; }
.menu nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 #fff; }
/* Escritorio: menú en línea. Móvil: desplegable. Son dos <nav> porque el contenido de un
   <details> cerrado no se pinta, haga lo que haga el CSS. */
.menu-escritorio ul { list-style: none; padding: 0; display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; }
.menu-escritorio a { text-decoration: none; font-weight: 600; font-size: .98rem; padding: 6px 2px; }
.menu-escritorio a[aria-current="page"] { box-shadow: inset 0 -2px 0 #fff; }
@media (min-width: 64.01rem) { .menu { display: none; } }
@media (max-width: 64rem) { .menu-escritorio { display: none; } }
@media (max-width: 64rem) {
  .menu summary { display: inline-flex; }
  .menu:not([open]) > nav { display: none; }
  .menu[open] > nav { position: absolute; right: 0; top: calc(100% + 8px); background: var(--superficie); color: var(--texto); border-radius: var(--radio); box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 10px; min-width: 15rem; }
  .menu[open] nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu[open] nav a { color: var(--texto); display: block; padding: 10px 12px; border-radius: 10px; }
  .menu[open] nav a:hover { background: var(--acento-suave); }
  .menu[open] nav a[aria-current="page"] { box-shadow: none; background: var(--acento-suave); }
  .menu[open] .menu-cta { padding-top: 6px; }
  .menu[open] .menu-cta a { background: var(--acento-fuerte); color: #fff; text-align: center; font-weight: 700; }
}

.cabecera-cuerpo { position: relative; z-index: 2; padding-top: 28px; padding-bottom: 12px; display: grid; gap: 18px; }
.cabecera-cuerpo .etiqueta { color: rgba(255,255,255,.85); }
.cabecera-cuerpo p.entradilla { font-size: 1.15rem; max-width: 40rem; color: rgba(255,255,255,.92); }
.portada { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.portada-texto { display: grid; gap: 18px; }
@media (max-width: 52rem) { .portada { grid-template-columns: 1fr; } }

/* ── Botones ── */
.botones { display: flex; flex-wrap: wrap; gap: 10px; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: 999px; font: 700 1rem/1.2 var(--cuerpo); text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.boton-claro { background: #fff; color: #006a7c !important; }
.boton-claro:hover { background: #e9f8fb; }
.boton-linea { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.boton-linea:hover { background: rgba(255,255,255,.12); }
.boton-acento { background: var(--acento); color: var(--sobre-acento) !important; }
.boton-acento:hover { background: var(--acento-fuerte); }
.boton-borde { background: var(--superficie); color: var(--texto); border-color: var(--linea); }
.boton-borde:hover { border-color: var(--acento); }
.enlace { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Secciones ── */
main { display: block; }
.seccion { padding-top: 56px; padding-bottom: 56px; display: grid; gap: 22px; }
.seccion + .seccion { padding-top: 8px; }
.seccion-cabeza { display: grid; gap: 8px; max-width: 46rem; }
.prosa { display: grid; gap: 14px; max-width: 44rem; }
.prosa ul { padding-left: 1.2rem; display: grid; gap: 6px; }

.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.tarjeta { background: var(--fondo); box-shadow: var(--sombra); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.tarjeta-enlace { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.tarjeta-enlace:hover { border-color: var(--acento); }
@media (prefers-reduced-motion: no-preference) { .tarjeta-enlace:hover { transform: translateY(-2px); } }
.tarjeta-enlace .mas { font-weight: 700; color: var(--acento-fuerte); }
.tarjeta .edades { font-family: var(--etiqueta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--suave); }

/* Hueco de foto: se ve como una foto pendiente hasta que llegue la de verdad. */
.foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--acento-suave); max-width: 100%; position: relative; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-pendiente { display: grid; place-items: center; text-align: center; padding: 16px; color: var(--suave); font-size: .9rem; background: repeating-linear-gradient(135deg, var(--acento-suave) 0 14px, transparent 14px 28px), var(--superficie); border: 1px dashed var(--linea); }
.cabecera .foto-pendiente { border-color: rgba(255,255,255,.5); background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px); color: rgba(255,255,255,.9); }

.pasos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: paso; padding: 0; list-style: none; }
.pasos li { background: var(--fondo); box-shadow: var(--sombra); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: grid; gap: 6px; align-content: start; counter-increment: paso; }
.pasos li::before { content: counter(paso); font: 800 1.4rem/1 var(--cuerpo); color: var(--acento-fuerte); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 12px; }
.dato { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; display: grid; gap: 2px; }
.dato b { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.banda { background: var(--acento-suave); border-radius: calc(var(--radio) + 6px); padding: 28px; display: grid; gap: 14px; }
.banda .boton-borde { background: var(--superficie); }

/* ── Horario ── */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: 8px 14px; font: 600 .95rem var(--cuerpo); cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.semana { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.dia { background: var(--fondo); box-shadow: var(--sombra); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.dia h3 { font-size: 1rem; }
.dia.hoy { border-color: var(--acento); box-shadow: inset 0 3px 0 var(--acento); }
.clase { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 8px; padding: 8px 0; border-top: 1px solid var(--linea); font-size: .95rem; }
.clase:first-of-type { border-top: 0; }
.clase time { font-weight: 800; font-variant-numeric: tabular-nums; }
.clase .detalle { color: var(--suave); font-size: .85rem; }
.chip { display: inline-block; font-family: var(--etiqueta); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; padding: 1px 6px; border: 1px solid currentColor; }
.chip-prueba { color: var(--ok); }
.cargando, .vacio { color: var(--suave); }

/* ── Tarifas ── */
.tarifas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.tarifa { background: var(--fondo); box-shadow: var(--sombra); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: grid; gap: 8px; align-content: start; }
.tarifa .precio { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tarifa .precio small { font-size: .95rem; font-weight: 600; color: var(--suave); }
.tarifa.destacada { border-color: var(--acento); box-shadow: var(--sombra); }
.tarifa ul { padding-left: 1.1rem; display: grid; gap: 4px; color: var(--suave); font-size: .95rem; }

/* ── Eventos ── */
.eventos { display: grid; gap: 14px; }
.evento { background: var(--fondo); box-shadow: var(--sombra); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 14px; align-items: start; }
.evento .fecha { text-align: center; border-radius: 10px; background: var(--acento-suave); padding: 8px 4px; display: grid; }
.evento .fecha b { font-size: 1.6rem; line-height: 1; }
.evento .fecha span { font-family: var(--etiqueta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }
.evento h3 { font-size: 1.1rem; }

/* ── Preguntas ── */
.preguntas { display: grid; gap: 10px; max-width: 46rem; }
.preguntas details { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 18px; }
.preguntas summary { cursor: pointer; font-weight: 700; }
.preguntas details p { margin-top: 8px; color: var(--suave); }

/* ── Pie ── */
.pie { margin-top: 40px; background: var(--acento-suave); color: var(--texto); border-top: 1px solid var(--linea); padding-top: 40px; padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
.pie a, .pie .enlace { color: var(--texto); }
.pie .etiqueta { color: var(--acento-fuerte); margin-bottom: 6px; }
.pie-rejilla { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.pie-bloque { display: grid; gap: 6px; align-content: start; font-size: .95rem; }
.pie-legal { color: var(--suave); }

/* ── Banner de cookies ── */
.cookies { position: fixed; z-index: 30; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); max-width: 30rem; margin-left: auto; background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 12px 40px rgba(0,0,0,.2); padding: 16px 18px; display: grid; gap: 8px; font-size: .95rem; }
.cookies-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
[hidden] { display: none !important; }
[data-tarifas] { display: grid; gap: 40px; }
.seccion-tarifas { display: grid; gap: 14px; }
.foto { margin: 0; }
.foto-vertical { aspect-ratio: 3 / 4; width: 100%; max-width: 24rem; justify-self: center; }
.horario-semana { display: grid; gap: 24px; }
.filtros-grupo { display: grid; gap: 14px; }