/* ==========================================================================
   Web pública de DragonGest — portada, precios y páginas legales.
   Usa las variables de app.css (laca, jade, oro, tinta, agua) para que la web y la
   aplicación se vean como una sola cosa. La portada abre con agua oscura y el barco
   en laca: es lo único que se mueve sin que nadie lo toque.
   ========================================================================== */

.web { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.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; }

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

.web-cabecera {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--agua) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
}
.web-cabecera-fila { display: flex; align-items: center; gap: 1rem; min-height: var(--alto-barra); }
.web-menu { display: none; gap: 1.5rem; margin-left: 1.5rem; }
.web-menu a { color: var(--tinta); text-decoration: none; font-weight: 500; }
.web-menu a:hover { color: var(--laca-texto); }
.web-cabecera-acciones { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.web-cabecera-acciones .boton { white-space: nowrap; }

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

.web-pie { border-top: 1px solid var(--linea); padding-block: 2rem; margin-top: 0; color: var(--lago); font-size: .9375rem; }
.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(--lago); }
.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 {
    --h-fondo: #0c2630;
    --h-fondo-2: #123a46;
    --h-texto: #f2f7f8;
    --h-suave: #a9c2ca;
    background:
        radial-gradient(60rem 30rem at 85% 0%, rgba(30, 127, 104, .28), transparent 60%),
        linear-gradient(180deg, var(--h-fondo), var(--h-fondo-2));
    color: var(--h-texto);
    padding-block: 2.5rem 3rem;
    position: relative;
    overflow: hidden;
}

/* Olas muy tenues que corren despacio detrás del barco */
.web-heroe::before {
    content: "";
    position: absolute; inset: 0;
    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='.06' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 120px 28px;
    animation: web-olas 40s linear infinite;
    pointer-events: none;
}
@keyframes web-olas { to { background-position: 120px 0; } }

.web-heroe-rejilla { position: relative; display: grid; gap: 2.5rem; align-items: center; }

.web-heroe h1 {
    font-size: clamp(2.35rem, 7.2vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -.005em;
    max-width: 14ch;
    text-wrap: balance;
}
.web-entradilla { font-size: 1.1875rem; line-height: 1.5; color: var(--h-suave); max-width: 34rem; margin: 1.25rem 0 1.75rem; }
.web-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.web-boton-claro { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--h-texto); }
.web-boton-claro:hover { background: rgba(255, 255, 255, .1); }
.web-nota { font-size: .9375rem; color: var(--lago); margin: 1rem 0 0; }
.web-heroe .web-nota { color: var(--h-suave); }

@media (min-width: 60rem) {
    .web-heroe { padding-block: 4.5rem 5rem; }
    .web-heroe-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 4rem; }
}

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

.web-demo {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 1.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    backdrop-filter: blur(4px);
}
.web-demo-titulo { font-family: var(--fuente-titulo); font-size: 1.125rem; font-weight: 600; line-height: 1.3; min-height: 3.2em; margin: 0 0 1rem; }

.web-demo-escena { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }

.web-barco {
    --forma: polygon(50% 0, 66% 3%, 80% 9%, 91% 18%, 98% 30%, 100% 44%, 100% 90%, 94% 98%, 82% 100%, 18% 100%, 6% 98%, 0 90%, 0 44%, 2% 30%, 9% 18%, 20% 9%, 34% 3%);
    position: relative;
    isolation: isolate;
    width: 12.5rem;
    padding: 2.4rem 1rem 1.4rem;
    display: flex; flex-direction: column; gap: .5rem; align-items: center;
    background: var(--laca);
    clip-path: var(--forma);
    color: #10262f;
}
.web-barco::before {
    content: ""; position: absolute; inset: .4rem; z-index: -1;
    background: #f4f9f9;
    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: #52707b; }
.web-fila { display: grid; grid-template-columns: 2.75rem 1rem 2.75rem; gap: .5rem; align-items: center; justify-items: center; }
.web-numero { font-size: .6875rem; font-weight: 600; color: #8aa0a8; }

.web-asiento {
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: grid; place-items: center;
    font: 600 .8125rem/1 var(--fuente-titulo);
    border: 2px solid transparent;
    background: #cfdbde; color: #10262f;
    padding: 0; cursor: default;
    transition: background-color .15s, border-color .15s, transform .15s;
}
.web-asiento.web-fijo { background: #fbf0d4; border-color: #e3a72f; color: #6b4a00; }
.web-asiento.libre { background: transparent; border: 2px dashed #7e9aa4; cursor: pointer; }
.web-asiento.libre:hover:not(:disabled) { background: #ddf1ea; border-color: #1e7f68; transform: scale(1.06); }
.web-asiento.libre:disabled { opacity: .55; cursor: default; }
.web-asiento.mio { background: #1e7f68; 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-barco :focus-visible { outline-color: #10262f; }

.web-lateral { display: grid; gap: 1.1rem; min-width: 0; }

.web-medidor-cabecera { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; align-items: baseline; }
.web-medidor-cabecera span { color: var(--h-suave); text-align: right; }
.web-medidor-cabecera span.ok { color: #7fd9bf; font-weight: 600; }
.web-medidor-pista { position: relative; height: .5rem; margin: .6rem 0 .35rem; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.web-medidor-pista::before { content: ""; position: absolute; left: 50%; top: -.25rem; bottom: -.25rem; width: 2px; background: rgba(255, 255, 255, .45); }
.web-medidor-pista i {
    position: absolute; top: 50%; left: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem;
    border-radius: 50%; background: var(--oro); border: 2px solid #fff;
    transition: left .45s cubic-bezier(.3, 1.3, .5, 1), background-color .3s;
}
.web-medidor-pista i.equilibrado { background: #48b79a; }
.web-medidor-lados { display: flex; justify-content: space-between; font-size: .75rem; color: var(--h-suave); }

.web-plazas { margin: 0; font-size: .9375rem; color: var(--h-suave); }
.web-plazas b { font: 700 1.75rem/1 var(--fuente-titulo); color: var(--h-texto); 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(--h-suave); }

.web-demo-boton { margin-top: 1.25rem; width: 100%; }
.web-demo .boton:not(.primario) { background: transparent; border-color: rgba(255, 255, 255, .35); color: var(--h-texto); }
.web-demo .boton:not(.primario):hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 24rem) {
    .web-demo-escena { grid-template-columns: 1fr; justify-items: center; }
    .web-lateral { width: 100%; }
}

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

.web-seccion { padding-block: clamp(3rem, 8vw, 6rem); }
.web-seccion-suave { background: var(--superficie-2); border-block: 1px solid var(--linea); }
.web-titulo { font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.05; margin-bottom: 2rem; max-width: 22ch; text-wrap: balance; }
.web-subtitulo { font-size: 1.125rem; color: var(--lago); max-width: 40rem; margin: -1rem 0 2rem; }

.web-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: paso; }
.web-pasos li { counter-increment: paso; padding-top: 1rem; border-top: 3px solid var(--linea); position: relative; }
.web-pasos li::before { content: counter(paso); position: absolute; top: -3px; left: 0; padding-top: .9rem; border-top: 3px solid var(--laca); font: 700 1.1rem/1 var(--fuente-titulo); color: var(--laca-texto); padding-right: .75rem; }
.web-pasos h3 { margin: 1.75rem 0 .4rem; font-size: 1.35rem; }
.web-pasos p { color: var(--lago); max-width: 26rem; }
@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.4rem; border-top: 1px solid var(--linea); }
.web-funciones .icono { width: 1.75rem; height: 1.75rem; color: var(--laca); margin-top: .1rem; }
.web-funciones h3 { margin-bottom: .3rem; font-size: 1.2rem; }
.web-funciones p { margin: 0; color: var(--lago); max-width: 30rem; }
@media (min-width: 48rem) {
    .web-funciones { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
}

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

.web-periodo-radio { position: absolute; opacity: 0; pointer-events: none; }
.web-periodo { display: inline-flex; padding: .25rem; border-radius: 99px; background: var(--superficie-2); border: 1px solid var(--linea); 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: 600; 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: var(--agua); }
#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.25rem; align-items: stretch; }
@media (min-width: 60rem) { .web-planes { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.web-plan { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; background: var(--superficie); border: 1px solid var(--linea); border-radius: 1.25rem; position: relative; }
.web-plan.destacado { border: 2px solid var(--laca); box-shadow: var(--sombra); }
.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 2.75rem/1 var(--fuente-titulo); color: var(--tinta); }
.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: 1.5rem; }

/* ---------- 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: var(--agua); font: 600 1.15rem/1.1 var(--fuente-titulo); opacity: .55; }
.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: var(--sombra); 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: 1px solid var(--linea); padding-block: 1rem; }
.web-faq details:last-child { border-bottom: 1px solid var(--linea); }
.web-faq summary { cursor: pointer; font: 600 1.15rem/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.5rem; 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(--laca-fuerte); color: #fff; padding-block: clamp(3rem, 8vw, 5rem); }
.web-cierre h2 { font-size: clamp(1.9rem, 5vw, 3rem); max-width: 18ch; margin-bottom: .75rem; text-wrap: balance; }
.web-cierre p { font-size: 1.125rem; opacity: .9; margin-bottom: 1.5rem; }
.web-cierre .boton.primario { background: #fff; color: var(--laca-fuerte); border-color: #fff; }
.web-cierre .boton.primario:hover { background: var(--oro-tenue); }
.web-cierre :focus-visible { outline-color: #fff; }

/* ---------- 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; }