/* =====================================================================
   Club Tenis Lebrija — hoja de estilos única.
   Los colores salen del escudo: azul marino y naranja.
   ===================================================================== */

:root {
    --marino:       #10233F;
    --marino-claro: #1B3560;
    --naranja:      #E2622B;
    --naranja-osc:  #C24E1C;
    --arena:        #F6F3EE;
    --tinta:        #1D2733;
    --gris:         #5F6B7A;
    --gris-borde:   #E2E6EB;
    --blanco:       #FFFFFF;
    --radio:        14px;
    --sombra:       0 2px 14px rgba(16, 35, 63, 0.08);
    --sombra-alta:  0 8px 30px rgba(16, 35, 63, 0.14);
    --ancho:        1140px;
}

*, *::before, *::after { box-sizing: border-box }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--tinta);
    background: var(--blanco);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block }
a   { color: var(--naranja-osc) }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6rem; color: var(--marino) }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.02em }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -0.01em }
h3 { font-size: 1.2rem }
p  { margin: 0 0 1rem }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem }
.centrado   { text-align: center }
.estrecho   { max-width: 720px; margin-left: auto; margin-right: auto }

/* ── Botones ──────────────────────────────────────────────────── */
.boton {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    background: var(--naranja);
    color: var(--blanco);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--naranja);
    transition: background .18s, border-color .18s, transform .18s;
}
.boton:hover { background: var(--naranja-osc); border-color: var(--naranja-osc); transform: translateY(-1px) }
.boton.linea  { background: transparent; color: var(--marino); border-color: var(--marino) }
.boton.linea:hover { background: var(--marino); color: var(--blanco) }
.boton.clara  { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,.6) }
.boton.clara:hover { background: var(--blanco); color: var(--marino); border-color: var(--blanco) }
.botonera { display: flex; gap: .8rem; flex-wrap: wrap }
.centrado .botonera { justify-content: center }

/* ── Cabecera ─────────────────────────────────────────────────── */
.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--gris-borde);
}
.cabecera .contenedor {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 74px;
}
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none }
.marca img { height: 52px; width: auto }
.marca span { font-weight: 800; color: var(--marino); font-size: 1.02rem; letter-spacing: -0.01em }

.menu { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0 }
.menu a {
    display: block; padding: .5rem .8rem; border-radius: 8px;
    color: var(--marino); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.menu a:hover  { background: var(--arena) }
.menu a.activo { color: var(--naranja-osc); font-weight: 700 }
.menu .destacado a {
    background: var(--marino); color: var(--blanco); font-weight: 600; margin-left: .4rem;
}
.menu .destacado a:hover { background: var(--marino-claro) }

.hamburguesa {
    display: none; background: none; border: 0; cursor: pointer;
    padding: .4rem; color: var(--marino);
}
.hamburguesa svg { width: 28px; height: 28px }

@media (max-width: 900px) {
    .hamburguesa { display: block }
    .menu {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--blanco); border-bottom: 1px solid var(--gris-borde);
        padding: .5rem 1.25rem 1rem; display: none;
        box-shadow: var(--sombra);
    }
    .menu.abierto { display: flex }
    .menu a { padding: .75rem .4rem; border-radius: 0 }
    .menu li + li { border-top: 1px solid var(--gris-borde) }
    .menu .destacado a { margin: .6rem 0 0; border-radius: 8px; text-align: center }
}

/* ── Portada ──────────────────────────────────────────────────── */
.portada {
    position: relative;
    background: var(--marino);
    color: var(--blanco);
    overflow: hidden;
}
.portada .foto {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: .38;
}
.portada::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(16,35,63,.55) 0%, rgba(16,35,63,.88) 100%);
}
.portada .contenedor { position: relative; z-index: 2; padding-top: 5rem; padding-bottom: 5rem }
.portada h1 { color: var(--blanco); margin-bottom: 1rem }
.portada p  { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 660px }
.portada.centrado p { margin-left: auto; margin-right: auto }
.portada.corta .contenedor { padding-top: 3.4rem; padding-bottom: 3.4rem }

/* ── Secciones ────────────────────────────────────────────────── */
section { padding: 4rem 0 }
section.arena { background: var(--arena) }
.seccion-titulo { margin-bottom: 2.2rem }
.seccion-titulo p { color: var(--gris); font-size: 1.05rem }

.rejilla { display: grid; gap: 1.4rem }
.rejilla.dos    { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.rejilla.tres   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
.rejilla.cuatro { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }

/* ── Tarjetas ─────────────────────────────────────────────────── */
.tarjeta {
    background: var(--blanco); border: 1px solid var(--gris-borde);
    border-radius: var(--radio); overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px) }
.tarjeta .imagen {
    aspect-ratio: 16 / 10; background: var(--marino-claro);
    background-size: cover; background-position: center;
}
.tarjeta .cuerpo { padding: 1.3rem; display: flex; flex-direction: column; flex: 1 }
.tarjeta .cuerpo p { color: var(--gris); flex: 1 }
.tarjeta .enlace {
    color: var(--naranja-osc); font-weight: 600; text-decoration: none; font-size: .95rem;
}
.tarjeta .enlace:hover { text-decoration: underline }
.tarjeta .icono { font-size: 1.9rem; line-height: 1; margin-bottom: .5rem }

/* ── Bloques de texto + foto ──────────────────────────────────── */
.duo {
    display: grid; gap: 2.4rem; align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.duo .foto {
    border-radius: var(--radio); overflow: hidden;
    aspect-ratio: 4 / 3; background: var(--marino-claro);
    background-size: cover; background-position: center;
    box-shadow: var(--sombra);
}
.duo.invertido .texto { order: 2 }

/* ── Franja de llamada ────────────────────────────────────────── */
.franja {
    background: var(--marino); color: var(--blanco);
    border-radius: var(--radio); padding: 3rem 2rem; text-align: center;
}
.franja h2 { color: var(--blanco) }
.franja p  { color: rgba(255,255,255,.88); max-width: 620px; margin-left: auto; margin-right: auto }

/* ── Preguntas frecuentes ─────────────────────────────────────── */
.faq { border: 1px solid var(--gris-borde); border-radius: var(--radio); background: var(--blanco);
       overflow: hidden }
.faq details + details { border-top: 1px solid var(--gris-borde) }
.faq summary {
    padding: 1.1rem 1.3rem; cursor: pointer; font-weight: 600; color: var(--marino);
    list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--naranja); flex: none }
.faq details[open] summary::after { content: "–" }
.faq summary:hover { background: var(--arena) }
.faq .respuesta { padding: 0 1.3rem 1.2rem; color: var(--gris) }
.faq .respuesta p:last-child { margin-bottom: 0 }

/* ── Contacto ─────────────────────────────────────────────────── */
.persona {
    background: var(--blanco); border: 1px solid var(--gris-borde);
    border-radius: var(--radio); padding: 1.4rem;
}
.persona .cargo { color: var(--gris); font-size: .9rem; margin-bottom: .7rem }
.persona a { display: block; text-decoration: none; font-weight: 600; margin-bottom: .2rem }
.persona a:hover { text-decoration: underline }

/* ── Pie ──────────────────────────────────────────────────────── */
.pie { background: var(--marino); color: rgba(255,255,255,.78); padding: 3rem 0 1.5rem; margin-top: 0 }
.pie h4 { color: var(--blanco); font-size: 1rem; margin-bottom: .8rem }
.pie a  { color: rgba(255,255,255,.78); text-decoration: none }
.pie a:hover { color: var(--blanco); text-decoration: underline }
.pie ul { list-style: none; margin: 0; padding: 0 }
.pie li { margin-bottom: .35rem }
.pie .legal {
    border-top: 1px solid rgba(255,255,255,.16); margin-top: 2rem; padding-top: 1.2rem;
    font-size: .88rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ── Detalles ─────────────────────────────────────────────────── */
.aviso {
    background: #FFF6E8; border: 1px solid #F0D9B5; color: #7A5A1E;
    border-radius: var(--radio); padding: 1rem 1.2rem; font-size: .93rem;
}
.vacio {
    border: 2px dashed var(--gris-borde); border-radius: var(--radio);
    padding: 2.4rem 1.5rem; text-align: center; color: var(--gris);
}

/* ── Carteles ─────────────────────────────────────────────────
   Los carteles del club son verticales y llenos de texto. Con
   "cover" se recortarían por la mitad, así que se muestran enteros
   sobre fondo azul. */
.tarjeta .imagen.cartel {
    aspect-ratio: 3 / 4;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--marino);
}
.cartel-grande {
    display: block; border-radius: var(--radio); overflow: hidden;
    box-shadow: var(--sombra); background: var(--blanco);
    border: 1px solid var(--gris-borde);
}
.cartel-grande img { width: 100%; height: auto }
.pie-imagen { font-size: .85rem; color: var(--gris); margin-top: .6rem; text-align: center }

/* Lista de tarifas */
.tarifas { list-style: none; margin: 0; padding: 0 }
.tarifas li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .6rem 0; border-bottom: 1px solid var(--gris-borde);
}
.tarifas li:last-child { border-bottom: 0 }
.tarifas .que { color: var(--tinta) }
.tarifas .cuanto { font-weight: 800; color: var(--marino); font-size: 1.25rem; white-space: nowrap }
.tarifas .cuanto small { font-weight: 500; color: var(--gris); font-size: .8rem }
.nota-grupo { font-size: .85rem; color: var(--gris); margin: .8rem 0 0 }