/* ==========================================================================
   Web pública de DragonGest — portada, precios y páginas legales.
   Paleta propia y luminosa (turquesa, sol, coral) con contornos de tinta y sombras
   planas, a propósito distinta de la aplicación, que es sobria. Siempre en claro:
   la web de venta no sigue el modo oscuro del sistema.
   ========================================================================== */

.web {
    color-scheme: light;
    /* Se redefinen los tokens de app.css solo dentro de la web pública */
    --tinta: #0a3340;
    --agua: #f4fcfc;
    --superficie: #ffffff;
    --superficie-2: #e1f6f6;
    --linea: #b3dfe2;
    --lago: #3b6a75;
    --laca: #f0402f;
    --laca-fuerte: #d62f20;
    --laca-texto: #c42a1c;
    --laca-tenue: #ffe1dc;
    --jade: #0b8f6f;
    --jade-tenue: #d3f5e8;
    --oro: #ffc928;
    --oro-tenue: #fff0b8;
    --oro-texto: #5c4000;
    --sombra: 5px 5px 0 var(--tinta);

    --w-turquesa: #3fcfd3;
    --w-cielo: #d2f4f4;
    --w-sol: #ffd23f;
    --w-coral: #ff6b57;

    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--agua);
    color: var(--tinta);
}
.web main { flex: 1; }

.web-contenedor { width: 100%; max-width: var(--ancho-pagina); margin-inline: auto; padding-inline: 1.25rem; }
.web-estrecho { max-width: 46rem; }

.web-saltar { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--superficie); padding: .5rem 1rem; border-radius: var(--radio-chico); }
.web-saltar:focus { left: .5rem; }
.web :focus-visible { outline-color: var(--tinta); }

/* ---------- Botones: pastilla con contorno de tinta y sombra plana ---------- */

.web .boton:not(.fantasma) { border: 2px solid var(--tinta); border-radius: 99px; }
.web .boton.primario { background: var(--w-sol); color: var(--tinta); box-shadow: 3px 3px 0 var(--tinta); }
.web .boton.primario:hover { background: #ffdf70; border-color: var(--tinta); }
.web .web-boton-claro { box-shadow: 3px 3px 0 var(--tinta); }
.web .boton.primario:active, .web .web-boton-claro:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.web .boton.chico.primario { box-shadow: 2px 2px 0 var(--tinta); }
.web .boton.fantasma { color: var(--tinta); border-radius: 99px; }
.web .boton.fantasma:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }

/* ---------- Cabecera y pie ---------- */

.web-cabecera {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--agua) 85%, transparent);
    backdrop-filter: blur(12px);
}
.web-cabecera-fila { display: flex; align-items: center; gap: 1rem; min-height: var(--alto-barra); }
.web-cabecera .marca { font-size: 1.25rem; }
.web-menu { display: none; gap: .25rem; margin-left: 1.5rem; }
.web-menu a { color: var(--tinta); text-decoration: none; font-weight: 500; padding: .45rem .9rem; border-radius: 99px; }
.web-menu a:hover { background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.web-cabecera-acciones { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.web-cabecera-acciones .boton { white-space: nowrap; }

@media (min-width: 48rem) {
    .web-menu { display: flex; }
}

.web-pie { border-top: 2px solid var(--tinta); padding-block: 2rem; color: var(--tinta); font-size: .9375rem; background: var(--w-cielo); }
.web-pie-fila { display: grid; gap: 1rem; }
.web-pie nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.web-pie nav a { color: var(--tinta); }
.web-pie p { margin: 0; }
@media (min-width: 48rem) {
    .web-pie-fila { grid-template-columns: auto 1fr auto; align-items: center; }
    .web-pie nav { justify-content: center; }
}

/* ---------- Portada ---------- */

.web-heroe {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--w-cielo) 0%, var(--agua) 100%);
    padding-block: 1.5rem 3.5rem;
}
/* El sol asoma por la esquina: lo único decorativo de la portada */
.web-heroe::after {
    content: ""; position: absolute; z-index: 0;
    width: clamp(10rem, 22vw, 19rem); aspect-ratio: 1; border-radius: 50%;
    right: clamp(-4rem, -2vw, -1rem); top: clamp(-6rem, -5vw, -3rem);
    background: var(--w-sol); border: 2px solid var(--tinta);
}
.web-heroe .web-contenedor { position: relative; z-index: 1; }

.web-heroe-cabeza { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 2.25rem; }
.web-heroe h1 {
    font-size: clamp(2.6rem, 9.5vw, 6.5rem);
    line-height: .96;
    letter-spacing: -.012em;
    max-width: 13ch;
    text-wrap: balance;
}
.web-entradilla { font-size: 1.1875rem; line-height: 1.5; color: var(--tinta); max-width: 32rem; margin: 0 0 1.5rem; }
.web-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.web-acciones .boton { padding-inline: 1.5rem; }
.web-boton-claro { background: var(--superficie); }
.web-nota { font-size: .9375rem; color: var(--lago); margin: 1rem 0 0; }

@media (min-width: 60rem) {
    .web-heroe { padding-block: 2.5rem 5rem; }
    .web-heroe-cabeza { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; margin-bottom: 3rem; }
    .web-entradilla { margin-bottom: 1.75rem; }
}

/* ---------- Barco de demostración ---------- */

.web-demo {
    --asiento: clamp(2rem, 8.2vw, 2.75rem);
    --lago: #0b4552; /* sobre el turquesa el gris azulado de siempre no llega a contraste */
    background-color: var(--w-turquesa);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 14c10 0 10-8 20-8s10 8 20 8 10-8 20-8 10 8 20 8 10-8 20-8 10 8 20 8' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 120px 28px;
    border: 2px solid var(--tinta);
    border-radius: 1.75rem;
    box-shadow: 6px 6px 0 var(--tinta);
    padding: clamp(1.1rem, 3vw, 2rem);
    display: grid; gap: 1.25rem;
}
.web-demo-titulo { font-family: var(--fuente-titulo); font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 600; line-height: 1.25; min-height: 2.5em; margin: 0; max-width: 40rem; }

.web-demo-escena { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 60rem) {
    .web-demo-escena { grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; }
}

/* Barco visto desde arriba, con la proa a la derecha: quien rema mira a la proa, así que su izquierda queda arriba. */
.web-barco {
    --forma: polygon(0 50%, 2% 32%, 6% 18%, 12% 8%, 22% 1%, 78% 1%, 88% 8%, 94% 18%, 98% 32%, 100% 50%, 98% 68%, 94% 82%, 88% 92%, 78% 99%, 22% 99%, 12% 92%, 6% 82%, 2% 68%);
    position: relative;
    isolation: isolate;
    display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;
    gap: clamp(.15rem, 1.4vw, .6rem);
    padding: 1.75rem calc(var(--asiento) * .9);
    background: var(--laca);
    clip-path: var(--forma);
    color: #0a3340;
    filter: drop-shadow(0 8px 10px rgba(10, 51, 64, .3));
}
.web-barco::before {
    content: ""; position: absolute; inset: .5rem; z-index: -1;
    background: #fff;
    clip-path: var(--forma);
}
.web-extremo { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.web-extremo small { font-size: .6875rem; font-weight: 600; color: #3b6a75; white-space: nowrap; }
.web-fila { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.web-numero { font-size: .6875rem; font-weight: 600; color: #7a9ba3; line-height: 1; }
@media (max-width: 30rem) {
    .web-extremo small { display: none; }
}

.web-asiento {
    width: var(--asiento); height: var(--asiento); border-radius: 50%;
    display: grid; place-items: center;
    font: 600 clamp(.6875rem, 2.4vw, .8125rem)/1 var(--fuente-titulo);
    border: 2px solid transparent;
    background: #cdeaec; color: #0a3340;
    padding: 0; cursor: default;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.web-asiento.web-fijo { background: var(--w-sol); border-color: var(--tinta); color: var(--tinta); }
.web-asiento.libre { background: transparent; border: 2px dashed #5f8c96; cursor: pointer; }
.web-asiento.libre:hover:not(:disabled) { background: #d3f5e8; border-color: #0b8f6f; transform: scale(1.06); }
.web-asiento.libre:disabled { opacity: .55; cursor: default; }
.web-asiento.mio { background: #0b8f6f; color: #fff; }
.web-asiento.nuevo { animation: web-entra .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes web-entra { from { transform: scale(.4); } to { transform: scale(1); } }

.web-lateral { display: grid; gap: 1.1rem; min-width: 0; }
@media (max-width: 59.99rem) {
    .web-lateral { grid-template-columns: 1fr 1fr; align-items: start; }
    .web-medidor { grid-column: 1 / -1; }
}

.web-medidor-cabecera { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; align-items: baseline; }
.web-medidor-cabecera span { color: var(--lago); text-align: right; }
.web-medidor-cabecera span.ok { color: #06573f; font-weight: 700; }
.web-medidor-pista { position: relative; height: .6rem; margin: .6rem 0 .35rem; border-radius: 99px; background: rgba(255, 255, 255, .6); border: 2px solid var(--tinta); box-sizing: content-box; }
.web-medidor-pista::before { content: ""; position: absolute; left: 50%; top: -.35rem; bottom: -.35rem; width: 2px; background: var(--tinta); }
.web-medidor-pista i {
    position: absolute; top: 50%; left: 50%; width: 1.2rem; height: 1.2rem; margin: -.6rem 0 0 -.6rem;
    border-radius: 50%; background: var(--w-sol); border: 2px solid var(--tinta);
    transition: left .45s cubic-bezier(.3, 1.3, .5, 1), background-color .3s;
}
.web-medidor-pista i.equilibrado { background: #4ee0a6; }
.web-medidor-lados { display: flex; justify-content: space-between; font-size: .75rem; color: var(--lago); }

.web-plazas { margin: 0; font-size: .9375rem; color: var(--lago); }
.web-plazas b { font: 700 2.25rem/1 var(--fuente-titulo); color: var(--tinta); margin-right: .25rem; }

.web-cola { font-size: .875rem; display: grid; gap: .4rem; }
.web-cola-lista { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.75rem; align-items: center; }
.web-cola-vacia { color: var(--lago); }

.web-demo-boton { width: 100%; }
@media (min-width: 40rem) { .web-demo-boton { width: auto; justify-self: start; padding-inline: 1.75rem; } }

/* ---------- Secciones ---------- */

.web-seccion { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }
.web-seccion-suave { background: var(--superficie-2); }
.web-seccion-cielo { background: var(--w-cielo); }
.web-seccion-mar { background: var(--w-turquesa); --lago: #0b4552; }
.web-seccion-sol { background: var(--w-sol); --lago: #4a3a00; }
/* Borde de ola sobre la sección amarilla */
.web-seccion-sol::before {
    content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 28V14c10 0 10-8 20-8s10 8 20 8 10-8 20-8 10 8 20 8 10-8 20-8 10 8 20 8V28z' fill='%23ffd23f'/%3E%3C/svg%3E") repeat-x bottom left / 120px 28px;
}
.web-titulo { font-size: clamp(2rem, 5.5vw, 3.75rem); line-height: 1; letter-spacing: -.01em; margin-bottom: 2.5rem; max-width: 18ch; text-wrap: balance; }
.web-subtitulo { font-size: 1.125rem; color: var(--lago); max-width: 40rem; margin: -1.25rem 0 2.25rem; }

.web-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; counter-reset: paso; }
.web-pasos li { counter-increment: paso; padding-top: 1.25rem; border-top: 2px solid var(--tinta); }
.web-pasos li::before {
    content: counter(paso); display: block; margin-bottom: 1rem;
    font: 700 clamp(4rem, 9vw, 6.5rem)/.9 var(--fuente-titulo);
    color: #fff; -webkit-text-stroke: 2px var(--tinta); paint-order: stroke fill;
}
.web-pasos h3 { margin: 0 0 .4rem; font-size: 1.5rem; }
.web-pasos p { color: var(--tinta); max-width: 26rem; margin: 0; }
@media (min-width: 48rem) { .web-pasos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

.web-funciones { display: grid; gap: 0; }
.web-funciones article { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-block: 1.5rem 1.75rem; border-top: 1px solid var(--linea); align-content: start; }
.web-funciones .icono { box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: .6rem; border-radius: 50%; background: var(--w-cielo); border: 2px solid var(--tinta); color: var(--tinta); }
.web-funciones article:nth-child(3n+1) .icono { background: var(--w-sol); }
.web-funciones article:nth-child(3n+2) .icono { background: var(--w-turquesa); }
.web-funciones article:nth-child(3n) .icono { background: #ffb3a8; }
.web-funciones h3 { margin-bottom: .35rem; font-size: 1.25rem; }
.web-funciones p { margin: 0; color: var(--lago); max-width: 30rem; }
@media (min-width: 48rem) {
    .web-funciones { grid-template-columns: repeat(3, 1fr); column-gap: 3rem; }
    .web-funciones article { grid-template-columns: 1fr; gap: 1.25rem; }
    .web-funciones article:first-child, .web-funciones article:last-child { grid-column: span 2; }
    .web-funciones article:first-child { border-top: 2px solid var(--tinta); }
    .web-funciones article:first-child h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; }
    .web-funciones article:first-child p { font-size: 1.125rem; }
    .web-funciones article:first-child .icono { width: 2rem; height: 2rem; }
}

/* ---------- Precios ---------- */

.web-periodo-radio { position: absolute; opacity: 0; pointer-events: none; }
.web-periodo { display: inline-flex; padding: .25rem; border-radius: 99px; background: var(--superficie); border: 2px solid var(--tinta); margin-bottom: 2rem; }
.web-periodo label { padding: .5rem 1.1rem; border-radius: 99px; cursor: pointer; font-weight: 600; display: flex; align-items: baseline; gap: .4rem; }
.web-periodo small { font-size: .75rem; font-weight: 700; color: var(--jade); }
#precios:has(#periodo-mes:checked) label[for="periodo-mes"],
#precios:has(#periodo-anio:checked) label[for="periodo-anio"] { background: var(--tinta); color: #fff; }
#precios:has(#periodo-mes:checked) label[for="periodo-mes"] small,
#precios:has(#periodo-anio:checked) label[for="periodo-anio"] small { color: inherit; }
#precios:has(#periodo-mes:focus-visible) label[for="periodo-mes"],
#precios:has(#periodo-anio:focus-visible) label[for="periodo-anio"] { outline: 3px solid var(--laca); outline-offset: 2px; }
#precios:has(#periodo-mes:checked) .solo-anio { display: none; }
#precios:has(#periodo-anio:checked) .solo-mes { display: none; }

.web-planes { display: grid; gap: 1.5rem; align-items: stretch; padding-right: 5px; }
@media (min-width: 60rem) { .web-planes { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

.web-plan { display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem; background: var(--superficie); border: 2px solid var(--tinta); border-radius: 1.5rem; box-shadow: var(--sombra); position: relative; }
.web-plan .chip { align-self: flex-start; }
.web-plan h3 { font-size: 1.5rem; }
.web-plan-para { color: var(--lago); min-height: 3em; margin: 0; }
.web-precio { margin: .5rem 0 1rem; display: flex; flex-direction: column; min-height: 4.6rem; }
.web-precio b { font: 700 3.25rem/1 var(--fuente-titulo); color: var(--tinta); letter-spacing: -.01em; }
.web-precio span { color: var(--lago); }
.web-precio small { display: block; font-size: .875rem; color: var(--lago); margin-top: .2rem; }
.web-plan ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .6rem; }
.web-plan li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.web-plan li .icono { width: 1.2rem; height: 1.2rem; color: var(--jade); margin-top: .2rem; }
.web-nota-centro { text-align: center; margin-top: 2rem; }

/* El plan recomendado va en amarillo sol y con el botón en blanco, para que sea lo primero que se ve */
.web-plan.destacado { background: var(--w-sol); --lago: #4a3a00; }
.web-plan.destacado .chip { background: var(--tinta); color: #fff; }
.web-plan.destacado li .icono { color: var(--tinta); }
.web-plan.destacado .boton.primario { background: var(--superficie); }
.web-plan.destacado .boton.primario:hover { background: var(--w-cielo); }

/* ---------- App móvil ---------- */

.web-app { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 48rem) { .web-app { grid-template-columns: 1.2fr .8fr; } }
.web-tiendas { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.web-tienda { display: flex; flex-direction: column; padding: .55rem 1.1rem; border-radius: .75rem; background: var(--tinta); color: #fff; font: 600 1.15rem/1.1 var(--fuente-titulo); opacity: .6; }
.web-tienda small { font: 500 .6875rem/1.2 var(--fuente); }

.web-movil { justify-self: center; width: 15rem; padding: .6rem; border-radius: 2.2rem; background: var(--tinta); box-shadow: 6px 6px 0 rgba(10, 51, 64, .35); transform: rotate(3deg); }
.web-movil-pantalla { background: var(--agua); color: var(--tinta); border-radius: 1.7rem; padding: 1.6rem 1rem 1.2rem; display: grid; gap: .7rem; min-height: 22rem; align-content: start; }
.web-movil-pantalla > b { font: 700 1.35rem/1 var(--fuente-titulo); }
.web-movil-sesion { display: grid; grid-template-columns: auto 1fr; gap: .7rem; padding: .7rem; border-radius: .9rem; background: var(--superficie); border: 1px solid var(--linea); }
.web-movil-sesion.apuntado { border-left: 4px solid var(--jade); }
.web-movil-sesion > span { font: 700 1rem/1.1 var(--fuente-titulo); }
.web-movil-sesion b { display: block; font-size: .9rem; }
.web-movil-sesion small { color: var(--lago); font-size: .75rem; }
.web-movil-sesion i { display: block; height: .3rem; background: var(--linea); border-radius: 99px; margin-top: .4rem; overflow: hidden; }
.web-movil-sesion u { display: block; height: 100%; background: var(--jade); }
.web-movil-pantalla .chip { justify-self: start; }

/* ---------- Preguntas y cierre ---------- */

.web-faq details { border-top: 2px solid var(--tinta); padding-block: 1.1rem; }
.web-faq details:last-child { border-bottom: 2px solid var(--tinta); }
.web-faq summary { cursor: pointer; font: 600 1.2rem/1.3 var(--fuente-titulo); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 2.75rem; }
.web-faq summary::-webkit-details-marker { display: none; }
.web-faq summary::after { content: "+"; font-size: 1.75rem; color: var(--laca); transition: transform .2s; }
.web-faq details[open] summary::after { transform: rotate(45deg); }
.web-faq p { color: var(--lago); margin: .5rem 0 0; max-width: 36rem; }

.web-cierre { background: var(--w-coral); color: var(--tinta); padding-block: clamp(4rem, 10vw, 8rem); border-top: 2px solid var(--tinta); }
.web-cierre h2 { font-size: clamp(2.5rem, 8vw, 5.5rem); line-height: .96; letter-spacing: -.012em; max-width: 14ch; margin-bottom: 1rem; text-wrap: balance; }
.web-cierre p { font-size: 1.25rem; margin-bottom: 2rem; max-width: 30rem; }
.web-cierre .boton.primario { padding-inline: 1.75rem; }

/* ---------- Páginas de texto (legal, alta) ---------- */

.web-texto { padding-block: clamp(2rem, 6vw, 4rem); }
.web-texto h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1.5rem; }
.web-texto h2 { margin: 2rem 0 .5rem; }
.web-texto p, .web-texto li { max-width: 42rem; color: var(--tinta); }
.web-texto ul { padding-left: 1.25rem; }
.web-borrador { padding: .9rem 1.1rem; border-radius: var(--radio-chico); background: var(--oro-tenue); color: var(--oro-texto); border: 1px solid var(--oro); margin-bottom: 1.5rem; max-width: 42rem; }

/* ---------- Alta de clubes (/empezar) ---------- */

.web-alta .web-subtitulo { margin: -.75rem 0 1.75rem; }
.web-formulario { display: grid; gap: 1.1rem; max-width: 30rem; }
.web-formulario small { display: block; margin-top: .25rem; }
.web-contrasena { display: flex; gap: .5rem; align-items: stretch; }
.web-contrasena .control { flex: 1; min-width: 0; }
.web-contrasena .boton { flex: none; }

/* La trampa para robots queda fuera de la pantalla (no con display:none, que algunos robots detectan) */
.web-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.web-alta-hecho { display: grid; gap: .75rem; justify-items: start; max-width: 32rem; }
.web-alta-hecho > .icono { width: 3rem; height: 3rem; color: var(--jade); }
.web-alta-hecho .web-borrador a { overflow-wrap: anywhere; }