/* landing.css — página de bienvenida (Birretón) + avatar animado.
   Adaptado desde vistas/modulos/avatar (styles.css) a la estructura del proyecto. */

.landing-page {
  --navy-darkest: #082257;
  --navy-dark:    #0d2d5e;
  --navy:         #123a72;
  --navy-light:   #1e4b91;
  --gold:         #e6ab1e;
  --gold-light:   #f4c443;
  --gold-dark:    #b98a10;
  --pupil:        #0b285a;
  --white:        #ffffff;
  background: radial-gradient(circle at 50% 20%, #ffffff 0%, #eaf0fb 75%);
  /* Contenedor con scroll propio (el body de la app es overflow:hidden).
     El alto va en dvh y no en vh: en el navegador de un celular, vh incluye la
     barra de direcciones, así que el contenedor mide de más y el pie se queda
     fuera de vista. Se deja vh antes como respaldo para navegadores viejos. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  /* La lista de "¿Por qué Birretón?" sale a todo el ancho en móvil con un
     margen "full-bleed" (calc(50% - 50vw)); esto evita una barra horizontal
     si el viewport lleva scrollbar visible. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Aprovechar el ancho en pantallas medianas y grandes: el contenedor de la
   landing (contenido y pie) usa casi todo el ancho disponible en vez del tope
   de 720/960/1140 px de Bootstrap, con un límite alto para que en monitores muy
   anchos no quede desmedido. Las líneas de texto largas siguen acotadas por su
   propio max-width (.landing-frase, .tarjeta-resena). */
@media (min-width: 576px) {
  .landing-page .container { max-width: 94vw; }
}
@media (min-width: 1320px) {
  .landing-page .container { max-width: 1240px; }
}
@media (min-width: 1650px) {
  .landing-page .container { max-width: 1400px; }
}

/* El logo y la frase van centrados en su columna mientras el bloque está
   apilado (celular): comparten el mismo eje que los botones, también centrados. */
.landing-logo {
  display: block;
  width: clamp(150px, 30vw, 230px);
  height: auto;
  margin-inline: auto;
}

/* Frase principal con diseño elegante. */
.landing-frase {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.35rem, 4.2vw, 2.1rem);
  font-weight: 300; line-height: 1.35; color: var(--navy-dark);
  letter-spacing: 0.3px; max-width: 30ch; margin-inline: auto;
}
.landing-frase::first-line { font-weight: 600; }

/* En escritorio, el bloque logo+frase toma el ancho de la frase (30ch) y se
   recorre un 5% a la derecha para no pegar al borde izquierdo. Dentro de ese
   bloque el logo va centrado (margin-inline:auto de .landing-logo), así queda
   centrado SOBRE la frase. En celular no aplica: todo va centrado en la columna. */
@media (min-width: 992px) {
  .landing-hero-texto .landing-hero-marca {
    width: fit-content;   /* se ciñe al ancho de la frase (su hijo más ancho) */
    max-width: 100%;
    margin-left: 5%;
  }
}
/* ============ BOTONES DE ENTRADA ============
   Llevan el color del encabezado del sistema (--c-cabezote, que publica
   vistas/plantilla.php desde "Colores del sistema"), para que lo primero que
   se ve de Birretón ya sea su color. El principal va relleno y el de invitado
   perfilado, y al pasar el cursor se rellena también. */
.landing-cta {
  border-radius: 999px;
  padding: 0.72rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.2px;
  border: 2px solid var(--c-cabezote, var(--navy));
  box-shadow: 0 8px 22px rgba(18, 58, 114, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease, color 0.15s ease;
}

/* El icono acompaña al texto en vez de irse al margen: son botones anchos y
   de una sola acción, y así el conjunto queda centrado. */
.landing-cta > i { margin-left: 0 !important; }

/* Se scopean con .landing-page para ganar en especificidad (0,3,0) al
   ".btn-primary:not(.opcion)" (0,2,0) del <style> en línea de plantilla.php,
   que va DESPUÉS de este archivo y, al empatar, teñía de teal el botón relleno.
   Así los dos botones de entrada comparten el índigo del cabezote, como el
   perfilado (que ya ganaba porque su regla en plantilla es más débil). */
.landing-page .landing-cta.btn-primary,
.landing-page .landing-cta.btn-primary:disabled {
  background-color: var(--c-cabezote, var(--navy));
  border-color: var(--c-cabezote, var(--navy));
  color: var(--c-cabezote-texto, #fff);
}

.landing-page .landing-cta.btn-primary:hover,
.landing-page .landing-cta.btn-primary:focus,
.landing-page .landing-cta.btn-primary:active {
  background-color: var(--c-cabezote, var(--navy));
  border-color: var(--c-cabezote, var(--navy));
  color: var(--c-cabezote-texto, #fff);
  filter: brightness(1.12);
}

.landing-cta.btn-outline-primary {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: var(--c-cabezote, var(--navy));
  color: var(--c-cabezote, var(--navy));
  box-shadow: 0 6px 16px rgba(18, 58, 114, 0.16);
}

.landing-cta.btn-outline-primary:hover,
.landing-cta.btn-outline-primary:focus {
  background-color: var(--c-cabezote, var(--navy));
  border-color: var(--c-cabezote, var(--navy));
  color: var(--c-cabezote-texto, #fff);
}

.landing-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18, 58, 114, 0.34); }
.landing-cta:active { transform: translateY(0); }

/* Foco de teclado: las reglas de arriba fijan su propia sombra, y como este
   archivo se carga después de Bootstrap, tapaban el anillo de foco que trae
   .btn:focus-visible. Se repone aquí, con un halo claro por dentro para que
   también se distinga cuando el botón va relleno del color del cabezote. */
.landing-cta:focus-visible {
  outline: 3px solid var(--c-cabezote, var(--navy));
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #fff, 0 8px 22px rgba(18, 58, 114, 0.28);
}

/* Títulos de sección. Antes usaban .text-primary, que es el azul de Bootstrap
   (#0d6efd): un cuarto azul que no pertenecía a la marca y que además rozaba
   el mínimo de contraste. Van en el azul del logo, y el icono que los
   acompaña en el dorado, que son los dos colores del propio Birretón. */
.landing-titulo {
  color: var(--navy);
  font-weight: 700;
}
.landing-titulo-icono { color: var(--gold); }

/* Subtítulo de cada grupo de planes ("Empieza gratis" y "Pásate a Birretón
   Premium cuando quieras"): cuelga de "Elige tu plan" y encabeza su fila. */
.landing-grupo-planes {
  text-align: center;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* La nota al pie de los planes es texto corrido: se acota para que no se
   estire de borde a borde en el contenedor ancho. */
.landing-nota-planes { max-width: 820px; }

/* Botón del plan gratis: acompaña a los "Elegir plan" dorados sin competir
   con ellos, y toma el color del cabezote como los botones de entrada. */
.btn-plan-gratis {
  border: 2px solid var(--c-cabezote, var(--navy));
  color: var(--c-cabezote, var(--navy));
  background-color: transparent;
  font-weight: 600;
}
.btn-plan-gratis:hover,
.btn-plan-gratis:focus {
  background-color: var(--c-cabezote, var(--navy));
  border-color: var(--c-cabezote, var(--navy));
  color: var(--c-cabezote-texto, #fff);
}
.btn-plan-gratis:focus-visible {
  outline: 3px solid var(--c-cabezote, var(--navy));
  outline-offset: 2px;
}

.landing-objetivo .card {
  border: none; border-radius: 1rem; box-shadow: 0 6px 20px rgba(11,40,90,0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.landing-objetivo .card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(11,40,90,0.16); }
.landing-objetivo .obj-icono { font-size: 2.1rem; color: var(--navy); }

/* Texto introductorio de "¿Por qué Birretón?": frase de entrada (centrada,
   bajo el título que también va centrado) y, debajo, los tres puntos en una
   lista vertical. El bloque ocupa todo el ancho disponible en cualquier
   tamaño; lo que cambia por breakpoint es el margen lateral de la lista (más
   abajo). Va antes de la pasarela de tarjetas. */
.landing-porque-intro {
  /* Margen superior negativo para pegar la frase al título "¿Por qué
     Birretón?": recorta el gutter vertical de la fila (g-4 = 1.5rem) y parte
     del margen inferior del <h2>. */
  margin: -1.25rem auto 0.5rem;
}
.landing-porque-lead {
  text-align: center;
  /* Peso de texto introductorio, no de titular: así no compite con el h2
     centrado de la sección ni con "Elige tu plan". */
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 1.25rem;
}
.landing-porque-puntos {
  list-style: none;
  /* En pantallas chicas la lista abarca todo el ancho disponible (sin sangría
     propia; solo el hueco del icono que da el padding de cada <li>). En
     medianas y grandes se recoge con un margen a los lados (más abajo). */
  padding: 0;
  margin: 0;
  /* Texto justificado en TODOS los tamaños: así cada renglón (salvo el último
     de cada punto) llega hasta el margen derecho y no queda hueco al lado. */
  text-align: justify;
  text-justify: inter-word;
}
.landing-porque-puntos li {
  position: relative;
  padding-left: 1.9rem;
  color: #33415c;
  line-height: 1.5;
}
.landing-porque-puntos li + li {
  margin-top: 0.6rem;   /* separación entre puntos (antes: gap del flex) */
}
.landing-porque-puntos li i {
  position: absolute;
  left: 0;
  top: 0.2rem;
  color: var(--gold-dark);
}

/* Tablet (768–991px): la lista se recoge solo un 4% a cada lado (margen del
   recuadro rojo de la captura). El texto va justificado en todos los tamaños
   (regla base). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .landing-porque-puntos { margin-inline: 4%; }
}

/* Pantallas grandes (≥992px): la lista se recoge con un 13% de margen a cada
   lado. */
@media (min-width: 992px) {
  .landing-porque-puntos { margin-inline: 13%; }
}

/* Pantallas chicas (<768px): la lista abarca todo el ancho de la PANTALLA,
   saliéndose del relleno lateral del contenedor (que en móvil deja franjas
   muertas) con la técnica de "full-bleed"; un relleno interno pequeño evita
   que el texto pegue al filo. */
@media (max-width: 767.98px) {
  .landing-porque-puntos {
    margin-inline: calc(50% - 50vw);
    padding-inline: 0.75rem;
  }
}

/* En pantallas chicas (tipo app móvil), el botón ocupa el ancho disponible. */
@media (max-width: 575.98px) {
  .landing-cta { display: inline-block; width: 100%; max-width: 340px; }
}

/* ============ ESCENA DEL AVATAR ============ */
.scene {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(4px, 1.5vw, 10px); width: 100%; max-width: 360px; margin: 0 auto;
}

/* ============ BURBUJA ============ */
.bubble {
  position: relative; background: var(--white);
  border: clamp(2.5px, 0.6vw, 4px) solid var(--navy); border-radius: 24px;
  padding: clamp(10px, 3vw, 15px) clamp(14px, 4vw, 18px);
  width: 100%; max-width: 260px; margin: 0 auto -2px auto;
  box-shadow: 0 8px 18px rgba(11, 40, 90, 0.16);
  animation: bubble-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both; z-index: 2;
}
.bubble p {
  margin: 0; font-size: clamp(0.7rem, 2.6vw, 0.85rem); font-weight: 500;
  color: var(--navy-dark); text-align: center; line-height: 1.4;
}
.bubble strong { color: var(--gold-dark); font-weight: 800; letter-spacing: 0.3px; }
.bubble::before {
  content: ''; position: absolute; bottom: -13px; left: 50%;
  width: 22px; height: 22px; background: var(--white);
  border-right: clamp(2.5px, 0.6vw, 4px) solid var(--navy);
  border-bottom: clamp(2.5px, 0.6vw, 4px) solid var(--navy);
  transform: translateX(-50%) rotate(45deg); border-radius: 0 0 5px 0;
}
@keyframes bubble-pop {
  0%   { transform: scale(0.3); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ============ AVATAR ============ */
.avatar {
  width: clamp(200px, 52vw, 300px); height: auto; cursor: pointer;
  overflow: visible;
  filter: drop-shadow(0 12px 20px rgba(11, 40, 90, 0.22));
  animation: bob 3.5s ease-in-out infinite;
}

/* El traje es azul marino y se pierde contra el fondo oscuro del sistema
   (esta escena se reutiliza en "avatares", que sí tiene modo oscuro —
   punto 11): un gris claro le da contraste y lo distingue del fondo. */
body.dark-mode .avatar {
  background: #cbd5e1;
  border-radius: 1.5rem;
  padding: 0.75rem;
  box-sizing: border-box;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.shoe-body { fill: var(--shoe, #14141f); }
.shoe-cap { fill: none; stroke: #2a2a38; stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.shoe-sole { fill: #454955; }
.shoe-seam { stroke: #2a2a38; stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.shoe-lace { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.leg { fill: var(--navy-dark); }
.body   { fill: var(--navy); }
.collar { fill: var(--white); }
.button { fill: var(--gold); }
/* El codo del brazo de la espalda hace una escuadra: sin unión redondeada,
   esa esquina saldría en punta. */
.arm-limb {
  stroke: var(--navy-dark); stroke-width: 42;
  stroke-linecap: round; stroke-linejoin: round; fill: none;
}

/* Rótula del codo: mismo color y mismo diámetro que el trazo del brazo
   (stroke-width 42 → r 21). Cubre la junta entre los dos trazos en cualquier
   ángulo del saludo, que es lo que hacía que el brazo se viera partido. */
.arm-joint { fill: var(--navy-dark); }

/* Manopla lisa, sin dedos. Un brazo saluda (.wave-forearm) y el otro descansa
   en escuadra detrás de la espalda, donde el traje le tapa la mano. */
.hand-cuff { fill: var(--navy-dark); }
.hand-palm { fill: var(--gold); }
/* El saludo pivota en el codo, que subió al acortar el brazo al 70%. */
.wave-forearm { transform-origin: 615px 683px; animation: wave 1.2s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
.wave-lines path {
  stroke: var(--gold-dark); stroke-width: 5; stroke-linecap: round; fill: none;
  opacity: 0; animation: wave-lines-fade 1.2s ease-in-out infinite;
}
.wave-lines path:nth-child(1) { animation-delay: 0s; }
.wave-lines path:nth-child(2) { animation-delay: 0.1s; }
.wave-lines path:nth-child(3) { animation-delay: 0.2s; }
@keyframes wave-lines-fade {
  0%, 60%, 100% { opacity: 0; transform: translateX(0); }
  30%           { opacity: 0.7; transform: translateX(4px); }
}
.cap-top-left    { fill: var(--navy); }
.cap-top-right   { fill: var(--navy-darkest); }
.cap-front-left  { fill: var(--navy-light); }
.cap-front-right { fill: var(--navy-dark); }
.cap-outline { fill: none; stroke: var(--white); stroke-width: 8; stroke-linejoin: round; stroke-linecap: round; }
#tassel { transform-origin: 600px 230px; animation: tassel-swing 3.2s ease-in-out infinite; }
@keyframes tassel-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
.tassel-cord { stroke: var(--gold); stroke-width: 7; stroke-linecap: round; }
.tassel-knot       { fill: var(--gold-dark); }
.tassel-knot-shine { fill: var(--gold-light); }
.tassel-strands { fill: var(--gold); stroke: var(--gold); stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.bridge, .temple { fill: none; stroke: var(--gold); stroke-width: 13; stroke-linecap: round; }
.lens { fill: none; stroke: var(--gold); stroke-width: 14; }
.eye-white { fill: var(--white); }
.pupil-group { transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform 0.15s ease-out; }
.pupil { fill: var(--pupil); }
.pupil-shine       { fill: var(--white); }
.pupil-shine-small { fill: var(--white); opacity: 0.85; }
.lid { fill: var(--navy-darkest); transform-origin: center 590px; transform: scaleY(0); }
.lid.blink { animation: blink 0.35s ease-in-out; }

/* Boca (igual a la del ánimo "celebrando" de avatarEstados.js: mismas
   coordenadas, es el mismo personaje a la misma escala). */
.boca-abierta { fill: var(--navy-darkest); }
.lengua        { fill: #ef6a7a; }
@keyframes blink {
  0%   { transform: scaleY(0); }
  40%  { transform: scaleY(1); }
  60%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ============ RESEÑAS (punto 11) ============
   Carrusel con los testimonios que un administrador aprobó desde
   vistas/modulos/resenas.php. */
.tarjeta-resena {
  background: var(--white);
  border: 1px solid rgba(18, 58, 114, 0.12);
  border-radius: 1.25rem;
  box-shadow: 0 8px 24px rgba(11, 40, 90, 0.12);
  /* El relleno de abajo deja sitio a los indicadores, que Bootstrap coloca
     flotando sobre el borde inferior del carrusel: sin este hueco las rayitas
     caen encima del nombre del autor. */
  padding: 2rem 2rem 3.25rem;
  max-width: 560px;
}

.resena-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gold);
}

.resena-estrellas { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.15em; }

.resena-texto {
  font-size: 1.02rem;
  font-style: italic;
  color: var(--navy-dark);
  line-height: 1.55;
}

.resena-autor { font-weight: 600; color: var(--navy); }

/* Los iconos de flecha de Bootstrap son blancos: sin un fondo oscuro se
   pierden contra la landing, que es clara. */
.seccion-resenas .carousel-control-prev,
.seccion-resenas .carousel-control-next {
  width: 3rem;
  opacity: 1;
}
.seccion-resenas .carousel-control-prev-icon,
.seccion-resenas .carousel-control-next-icon {
  background-color: var(--navy);
  border-radius: 50%;
  padding: 1.1rem;
  background-size: 55%;
}
.seccion-resenas .carousel-indicators {
  /* Los indicadores se ciñen al ancho de la tarjeta (que va centrada y es más
     angosta que el carrusel) y quedan dentro del hueco que ella les reserva. */
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
}
.seccion-resenas .carousel-indicators [data-bs-target] {
  background-color: var(--navy);
}

/* En celular no hay sitio a los lados de la tarjeta: las flechas se montaban
   encima del texto. Se bajan al pie, en fila y fuera del contenido. */
@media (max-width: 767.98px) {
  /* Aquí los indicadores caen ya fuera de la tarjeta (en el hueco que le abre
     el padding del carrusel), así que ella recupera su relleno normal. */
  .tarjeta-resena { padding-bottom: 1.75rem; }
  .seccion-resenas .carousel-indicators { margin-bottom: 1.6rem; }

  .seccion-resenas .carousel-control-prev,
  .seccion-resenas .carousel-control-next {
    top: auto;
    bottom: -1rem;
    width: 3.5rem;
    align-items: flex-end;
  }
  .seccion-resenas .carousel-control-prev { left: 15%; }
  .seccion-resenas .carousel-control-next { right: 15%; }
  .seccion-resenas .carousel { padding-bottom: 3rem; }
}

/* Foco de teclado de los controles del carrusel (flechas e indicadores): los
   iconos son claros y sin un contorno propio no se ve dónde está el cursor. */
.seccion-resenas .carousel-control-prev:focus-visible,
.seccion-resenas .carousel-control-next:focus-visible,
.seccion-resenas .carousel-indicators [data-bs-target]:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* ============ PASARELA "¿POR QUÉ BIRRETÓN?" ============
   Carril de tarjetas que gira solo y sin fin (vistas/js/landingPorque.js
   clona la tira y avanza de una en una). Cada tarjeta ocupa una fracción del
   ancho del carril —3 en pantallas grandes, 2 en medianas y 1 en chicas— y
   scroll-snap ayuda a que quede alineada al borde. Se prefirió esto al
   carrusel de Bootstrap porque ese solo desliza una "página" completa a la vez
   y no sabe enseñar varias tarjetas juntas sin trucos de CSS difíciles de
   mantener. El scroll-behavior NO se pone en "smooth" aquí: el JS lo pide
   explícito cuando toca animar, y la recolocación circular tiene que ser
   instantánea para que no se note. */
.porque-pasarela {
  position: relative;
  padding: 0 2.75rem;   /* deja hueco a las flechas de los lados */
}
.porque-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;              /* Firefox: sin barra de scroll */
  padding-bottom: 0.25rem;
}
.porque-track::-webkit-scrollbar { display: none; }   /* Chrome y Safari */

.porque-tarjeta {
  flex: 0 0 100%;                     /* pantallas chicas: 1 tarjeta a la vista */
  scroll-snap-align: start;
  min-height: 184px;
  justify-content: center;
}
@media (min-width: 768px) {          /* pantallas medianas: 2 tarjetas */
  .porque-tarjeta { flex-basis: calc((100% - 1rem) / 2); }
}
@media (min-width: 992px) {          /* pantallas grandes: 3 tarjetas */
  .porque-tarjeta { flex-basis: calc((100% - 2rem) / 3); }
}

/* Flechas: mismo círculo azul marino que las del carrusel de reseñas. */
.porque-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background-color: var(--navy);
  color: #fff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.porque-flecha-prev { left: 0; }
.porque-flecha-next { right: 0; }
.porque-flecha:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* Indicadores: un punto por tarjeta. */
.porque-indicadores {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.porque-indicadores button {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--navy);
  opacity: 0.3;
  transition: opacity 0.15s ease;
}
.porque-indicadores button.activo { opacity: 1; }
.porque-indicadores button:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}

/* En celular apenas hay aire a los lados: las flechas se montan un poco sobre
   las tarjetas en vez de comerse el ancho. */
@media (max-width: 575.98px) {
  .porque-pasarela { padding: 0 1.5rem; }
  .porque-flecha-prev { left: -0.25rem; }
  .porque-flecha-next { right: -0.25rem; }
}

/* ============ PIE DE PÁGINA DE LA LANDING ============
   Contenido configurable desde "configuracionSistema" → "Contacto y pie de
   página". Los colores salen de la paleta del propio avatar (--navy), para
   que el pie no se sienta de otra aplicación. */
.landing-footer {
  /* Sin margen propio: el contenido de arriba ya termina con el relleno del
     .container (py-5). Con los dos se juntaban casi 100px de vacío y el pie
     parecía desprendido de la página. */
  margin-top: 0;
  padding: 2.5rem 0 1.25rem;
  background: var(--navy-dark);
  color: rgba(255, 255, 255, 0.85);
}

.landing-footer-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.75rem;
}

/* Marca del pie: el birrete al lado, y el nombre con su eslogan en columna
   para que el eslogan quede centrado justo bajo "Birretón". */
/* .marca-birreton (vistas/css/tema.css) pone el icono arriba, centrado; aquí
   solo el ancho justo (para que el centrado no quede corrido por la columna). */
.landing-footer-marca {
  width: fit-content;
}
.landing-footer-marca-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.landing-footer-eslogan {
  font-size: 0.78rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}

.landing-footer-texto { font-size: 0.9rem; line-height: 1.6; }
.landing-footer-texto i { width: 1.1rem; color: var(--gold); }

.landing-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}
.landing-footer a:hover { color: var(--gold-light); }

/* Redes sociales: círculos que se iluminan al pasar el cursor. */
.landing-footer-redes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.landing-footer-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.05rem;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.landing-footer-redes a:hover {
  background: var(--gold);
  color: var(--navy-darkest);
  transform: translateY(-2px);
}

/* Botones de descarga de la app. */
.landing-footer-app {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.6rem;
  font-size: 0.9rem;
  width: -moz-fit-content;
  width: fit-content;
}
.landing-footer-app:hover { border-color: var(--gold-light); }
.landing-footer-app i { font-size: 1.2rem; }

/* Franja final: copyright a la izquierda y términos a la derecha; en celular
   se apilan centrados. */
.landing-footer-abajo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.85rem;
}

/* En celular las columnas del pie se apilan a lo ancho (hasta 768px, que es
   donde Bootstrap las pone en fila): todo su contenido va centrado, incluidos
   los bloques que se ajustan a su propio ancho (la marca y los botones de
   descarga), que si no se quedarían pegados a la izquierda. */
@media (max-width: 767.98px) {
  .landing-footer { text-align: center; }
  .landing-footer-marca { justify-content: center; margin-inline: auto; }
  .landing-footer-redes { justify-content: center; }
  .landing-footer-app { margin-inline: auto; }
  .landing-footer-texto { justify-content: center; }
  .landing-footer-abajo { justify-content: center; text-align: center; }
}