html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* OJO: usuario/ListaUsuarios.css pone `body { display: flex }` para TODAS las
   paginas (css_core lo carga siempre). Mientras la landing tuvo un unico hijo
   en el body no se noto, pero al anadir el contenido de debajo del hero los
   dos bloques se ponian en fila y el panel verde estiraba toda la pagina.
   Aqui volvemos a flujo normal: el hero ya se apana solo con su propio flex. */
body.LandingBody {
  display: block;
  background: var(--eg-bg, #fff);
}

/* ===================== Layout general (desktop) ===================== */
.contenedor {
    display: flex;
    width: 100%;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- Panel izquierdo: verde, presentación --- */
.MitadIzquierda {
    width: 50%;
    background: linear-gradient(160deg, var(--eg-green, #35CB83), var(--eg-green-dark, #2EAE6F));
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 0;
    box-sizing: border-box;
}

.TituloMenu {
    text-align: center;
    font-family: var(--eg-font-display, "Passion One", sans-serif);
    font-weight: 400;
    font-size: 56px;
    letter-spacing: 0.5px;
    margin: 0 0 18px;
    color: #ffffff;
}

.ImagenLanding {
    width: 78%;
    display: block;
    margin: 0 auto 24px;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.DescripcionWeb {
    font-family: var(--eg-font-body, "Roboto", sans-serif);
    margin: 0 48px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.95);
}

.DescripcionWeb em {
    font-style: normal;
    font-weight: 700;
    color: #ffffff;
}

/* --- Panel derecho: blanco, llamada a la acción --- */
.MitadDerecha {
    width: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px 0;
    box-sizing: border-box;
    background: var(--eg-bg, #ffffff);
}

.LandingPanel {
    width: 100%;
    max-width: 380px;
    padding: 0 24px;
    box-sizing: border-box;
}

.LogoEgiteko {
    width: 64%;
    max-width: 240px;
    padding: 0;
    display: block;
    margin: 0 auto 14px;
}

.Subtitulo {
    text-align: center;
    font-family: var(--eg-font-body, "Roboto", sans-serif);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--eg-green-ink, #00541C);
    margin: 0 auto 18px;
    max-width: 320px;
}

.MitadDerecha hr {
    border: none;
    border-top: 1px solid var(--eg-border, rgba(0, 0, 0, 0.1));
    width: 72%;
    margin: 0 auto 22px;
}

.MitadDerecha ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.LiBarra {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.TextoLanding {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--eg-text-muted, #6b7280);
    font-family: var(--eg-font-body, "Roboto", sans-serif);
}

/* ===================== Botones CTA ===================== */
.BotonBarraMenu {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 22px;
    border-radius: var(--eg-radius-pill, 999px);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.BotonBarraMenu .Icono {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Primario: Registro */
.BotonRegistro {
    background: linear-gradient(135deg, var(--eg-green, #35CB83), var(--eg-green-darker, #0BA243));
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(53, 203, 131, 0.34);
}
.BotonRegistro:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(53, 203, 131, 0.44);
}

/* Secundario: Iniciar sesión */
.BotonLogin {
    background: var(--eg-bg);
    color: var(--eg-green-darker, #0BA243);
    border: 2px solid var(--eg-green, #35CB83);
}
.BotonLogin:hover {
    background: var(--eg-green-light, #E0F7EA);
    transform: translateY(-1px);
}

/* Terciario / fantasma: Entrar */
.BotonEntrar {
    background: transparent;
    color: var(--eg-green-ink, #00541C);
    border: 1.5px solid var(--eg-border-mid, rgba(0, 0, 0, 0.14));
}
.BotonEntrar:hover {
    background: var(--eg-bg-alt, #f9fafb);
    border-color: var(--eg-green, #35CB83);
}

.BotonBarraMenu:active {
    transform: translateY(1px);
}

/* ===================== Footer legal / cookies ===================== */
.FooterLegal a {
    color: var(--eg-green-darker, #0BA243);
    text-decoration: none;
    font-weight: 600;
    margin: 0 4px;
}
.FooterLegal a:hover { text-decoration: underline; }

/* ===================== Responsive ===================== */
/* En móvil ocultamos el panel izquierdo (descripción + ilustración) y dejamos
   una tarjeta blanca centrada sobre fondo verde de marca. */
@media (max-width: 850px) {
    .contenedor {
        min-height: 100vh;
        min-height: 100dvh;
    }
    .MitadIzquierda {
        display: none;
    }
    .MitadDerecha {
        position: relative;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 28px 18px;
        background:
            linear-gradient(180deg, rgba(0, 84, 28, 0.55), rgba(11, 162, 67, 0.42)),
            url("../../images/bilbao.5a080e2fa1cf.webp") center / cover no-repeat;
    }
    .LandingPanel {
        background: var(--eg-bg, #ffffff);
        border-radius: var(--eg-radius-lg, 14px);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
        padding: 22px 20px 20px;
        max-width: 300px;
    }
    .LogoEgiteko {
        width: 56%;
        max-width: 160px;
        margin: 2px auto 10px;
    }
    .Subtitulo {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    .MitadDerecha hr {
        margin-bottom: 14px;
    }
    .MitadDerecha ul {
        gap: 12px;
    }
    .TextoLanding {
        margin-bottom: 6px;
        font-size: 0.78rem;
    }
    .BotonBarraMenu {
        padding: 12px 18px;
    }
    /* Crédito de la foto (CC BY-SA 2.0) */
    .CreditoFoto {
        position: absolute;
        bottom: 8px;
        right: 10px;
        font-size: 0.62rem;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        font-family: var(--eg-font-body, "Roboto", sans-serif);
    }
    .CreditoFoto a { color: inherit; text-decoration: underline; }
}

/* El crédito solo se muestra cuando la foto es visible (móvil) */
.CreditoFoto { display: none; }
@media (max-width: 850px) { .CreditoFoto { display: block; } }

/* Móvil pequeño: aún más compacto */
@media (max-width: 480px) {
    .LandingPanel {
        padding: 26px 18px 22px;
    }
    .LogoEgiteko {
        width: 62%;
        max-width: 180px;
    }
    .Subtitulo {
        font-size: 0.95rem;
    }
    .BotonBarraMenu {
        font-size: 0.95rem;
        padding: 13px 18px;
    }
}

/* =====================================================================
   Contenido de la home anonima (debajo del hero)

   La landing era solo el hero de acceso: pantalla completa, cero texto.
   Debajo va ahora el contenido real del sitio (ver
   partials/_landing_contenido.html). Todo con tokens, asi el tema oscuro
   sale solo.
   ===================================================================== */

.LandingContenido {
  background: var(--eg-bg, #fff);
  color: var(--eg-text, #2a2a2a);
  padding: var(--eg-space-8, 64px) var(--eg-space-4, 16px) var(--eg-space-6, 32px);
  font-family: var(--eg-font-body);
}

.LandingSeccion {
  max-width: 860px;
  margin: 0 auto var(--eg-space-8, 64px);
}

.LandingSeccion > h2 {
  font-family: var(--eg-font-display, "Passion One", sans-serif);
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  letter-spacing: 0.5px;
  color: var(--eg-green-ink, #00541C);
  margin: 0 0 var(--eg-space-4, 16px);
  line-height: 1.2;
}

.LandingSeccion > p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 var(--eg-space-4, 16px);
  color: var(--eg-text, #2a2a2a);
}

.LandingSubtexto {
  color: var(--eg-text-muted, #6b7280) !important;
}

/* --- Como funciona: tres pasos --- */
.LandingPasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--eg-space-4, 16px);
}

.LandingPaso {
  border: 1px solid var(--eg-border, rgba(0,0,0,.08));
  border-radius: var(--eg-radius-lg, 14px);
  padding: var(--eg-space-5, 24px) var(--eg-space-4, 16px);
  background: var(--eg-bg-alt, #f9fafb);
}

.LandingPasoNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--eg-green, #35CB83);
  color: #fff;
  font-family: var(--eg-font-display, sans-serif);
  font-size: 1.2rem;
  margin-bottom: var(--eg-space-3, 12px);
}

.LandingPaso h3 {
  font-size: 1.1rem;
  margin: 0 0 var(--eg-space-2, 8px);
  color: var(--eg-text, #2a2a2a);
}

.LandingPaso p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--eg-text-muted, #6b7280);
}

/* --- Planes recientes --- */
.LandingPlanes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--eg-space-4, 16px);
}

.LandingPlan {
  border: 1px solid var(--eg-border, rgba(0,0,0,.08));
  border-radius: var(--eg-radius-lg, 14px);
  background: var(--eg-bg, #fff);
  box-shadow: var(--eg-shadow-sm);
  transition: transform var(--eg-motion-base), box-shadow var(--eg-motion-base);
}

.LandingPlan:hover {
  transform: translateY(-3px);
  box-shadow: var(--eg-shadow-md);
}

.LandingPlanLink {
  display: block;
  padding: var(--eg-space-4, 16px);
  color: inherit;
  text-decoration: none;
}

.LandingPlanTipo {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--eg-radius-pill, 999px);
  font-size: 0.72rem;
  text-transform: lowercase;
  color: #1a1a1a;
  margin-bottom: var(--eg-space-2, 8px);
}

.LandingPlanTitulo {
  font-size: 1.05rem;
  margin: 0 0 var(--eg-space-2, 8px);
  line-height: 1.3;
  color: var(--eg-text, #2a2a2a);
}

.LandingPlanDesc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--eg-text-muted, #6b7280);
  margin: 0 0 var(--eg-space-2, 8px);
}

.LandingPlanFecha {
  font-size: 0.78rem;
  color: var(--eg-text-soft, #9ca3af);
}

.LandingMas {
  margin: var(--eg-space-4, 16px) 0 0;
}

.LandingMas a {
  color: var(--eg-green-darker, #0BA243);
  font-weight: 600;
  text-decoration: none;
}

.LandingMas a:hover { text-decoration: underline; }

/* --- Tipos de actividad --- */
.LandingTipos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--eg-space-2, 8px);
}

.LandingTipos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--eg-radius-pill, 999px);
  color: #1a1a1a;
  text-decoration: none;
  font-size: 0.92rem;
  border: 1px solid var(--eg-border, rgba(0,0,0,.08));
}

.LandingTipos a:hover { filter: brightness(0.95); }

.LandingTipoN {
  font-size: 0.75rem;
  opacity: 0.65;
}

/* --- Guias --- */
.LandingGuias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--eg-space-4, 16px);
}

.LandingGuia {
  border: 1px solid var(--eg-border, rgba(0,0,0,.08));
  border-radius: var(--eg-radius-lg, 14px);
  background: var(--eg-green-pale, #F4FFF9);
  transition: transform var(--eg-motion-base);
}

.LandingGuia:hover { transform: translateY(-3px); }

.LandingGuiaLink {
  display: block;
  padding: var(--eg-space-4, 16px);
  color: inherit;
  text-decoration: none;
}

.LandingGuiaIcono {
  display: inline-flex;
  font-size: 1.6rem;
  color: var(--eg-green-darker, #0BA243);
  margin-bottom: var(--eg-space-2, 8px);
}

.LandingGuia h3 {
  font-size: 1.05rem;
  margin: 0 0 var(--eg-space-2, 8px);
  line-height: 1.3;
  color: var(--eg-text, #2a2a2a);
}

.LandingGuia p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--eg-text-muted, #6b7280);
  margin: 0;
}

/* --- Preguntas frecuentes --- */
.LandingFaq {
  border: 1px solid var(--eg-border, rgba(0,0,0,.08));
  border-radius: var(--eg-radius-md, 10px);
  padding: var(--eg-space-3, 12px) var(--eg-space-4, 16px);
  margin-bottom: var(--eg-space-3, 12px);
  background: var(--eg-bg, #fff);
}

.LandingFaq summary {
  cursor: pointer;
  font-weight: 600;
  line-height: 1.5;
  color: var(--eg-text, #2a2a2a);
}

.LandingFaq[open] summary { color: var(--eg-green-darker, #0BA243); }

.LandingFaq p {
  margin: var(--eg-space-3, 12px) 0 0;
  color: var(--eg-text-muted, #6b7280);
  line-height: 1.7;
}

/* --- Pie --- */
.LandingPie {
  max-width: 860px;
  margin: 0 auto;
  padding-top: var(--eg-space-5, 24px);
  border-top: 1px solid var(--eg-border, rgba(0,0,0,.08));
  text-align: center;
}

.LandingPie nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--eg-space-2, 8px) var(--eg-space-4, 16px);
  margin-bottom: var(--eg-space-3, 12px);
}

.LandingPie a {
  color: var(--eg-text-muted, #6b7280);
  text-decoration: none;
  font-size: 0.92rem;
}

.LandingPie a:hover {
  color: var(--eg-green-darker, #0BA243);
  text-decoration: underline;
}

.LandingPie p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--eg-text-soft, #9ca3af);
}

/* Enlace "saber mas" dentro del panel del hero */
.LandingSaberMas {
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--eg-text-muted, #6b7280);
  text-decoration: none;
}

.LandingSaberMas:hover { color: var(--eg-green-darker, #0BA243); }

@media (max-width: 600px) {
  .LandingContenido { padding-top: var(--eg-space-6, 32px); }
  .LandingSeccion { margin-bottom: var(--eg-space-7, 48px); }
}