/* ==================================================
   1. FUENTES Y ESTILOS BASE
   (Nunito + Caveat se cargan vía <link> en el <head> de cada página,
   no aquí, para evitar la doble descarga y el bloqueo de render del @import)
================================================== */

:root {
  --morado: #432759;
  --morado-med: #6b3a8a;
  --fucsia: #d064c6;
  --menta: #8ee0ce;
  --crema: #f7f3fa;
  --blanco: #ffffff;
  --texto: #2d1a3e;
  --sub: #7a6090;
  --verde: #27ae60;
  --amarillo: #f39c12;
  --rojo: #e74c3c;
  --lavanda: #e6d8f3;
  --lavanda-suave: #f3ecf9;

  /* Acentos adicionales (antes repetidos como hex sueltos en varios archivos) */
  --naranja-acento: #f5a623;
  --morado-oscuro: #5b3a71;
  --lila-acento: #cda5e5;
  --lavanda-media: #c0a8d8;
  --morado-grisaceo: #a690b8;
  --rojo-error: #d9534f;
  --rojo-claro: #ef5350;
  --fondo-suave: #faf7fc;
  --fondo-calido: #fdf6ee;

  /* Badges de estado (éxito / aviso / error) */
  --badge-exito-bg: #e8f5e9;
  --badge-exito-fg: #2e7d32;
  --badge-aviso-bg: #fff8e1;
  --badge-aviso-fg: #e65100;
  --badge-error-bg: #fde8e8;
  --badge-error-fg: #b71c1c;
  --badge-naranja-bg: #fef3dc;
  --badge-naranja-fg: #9a6b1e;

  /* Zonas de la plataforma: lo que es para el cuidador y lo que se hace con
     el adulto mayor se distinguen por color en el menú, las migas y el hub */
  --zona-cuidador: var(--morado-med);
  --zona-cuidador-suave: var(--lavanda-suave);
  --zona-adulto: #0f7a66;
  --zona-adulto-suave: #e0f5f0;
  --zona-adulto-degradado: linear-gradient(135deg, #0b5a4c 0%, #0f7a66 55%, #26a58c 100%);
}

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

body {
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--crema);
  color: var(--morado);
  /* Con la letra grande (js/letra.js) una palabra larga puede no caber en
     un celular: se parte en vez de desbordar la página */
  overflow-wrap: break-word;
}

h2 {
  color: var(--morado);
}

section {
  padding: 30px 20px;
}

/* ==================================================
   2. SECCIÓN HERO TIPO WIREFRAME
================================================== */

/* ==================================================
   2. NUEVO HERO SECTION ESTILO ED-TECH (PLATZI)
================================================== */
.hero-moderno {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 5% 120px;
  background: linear-gradient(135deg, var(--crema) 0%, var(--lavanda) 100%);
  min-height: 85vh;
  gap: 80px;
  overflow: hidden;
}

.hero-texto {
  flex: 1;
  max-width: 600px;
}

.badge-novedad {
  background-color: var(--menta);
  color: var(--morado);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 20px;
}

.hero-texto h1 {
  font-family: 'Caveat', cursive;
  font-size: 3rem;
  line-height: 1.2;
  color: var(--morado);
  margin-bottom: 20px;
}

.hero-texto p {
  font-size: 1.1rem;
  color: var(--morado-oscuro);
  margin-bottom: 35px;
  line-height: 1.6;
}

.hero-botones {
  display: flex;
  gap: 15px;
  align-items: center;
}

/* Efectos de Hover para Botones */
.boton-principal {
  background-color: var(--fucsia);
  color: white;
  padding: 12px 25px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(208, 100, 198, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.boton-principal:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(208, 100, 198, 0.6);
}

.boton-secundario {
  background-color: transparent;
  border: 2px solid var(--morado);
  color: var(--morado);
  padding: 10px 25px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.boton-secundario:hover {
  color: var(--blanco);
  transform: translateY(-3px);
}

/* Gráficos y animaciones flotantes */
.hero-grafico {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  /* Sin esto el estirado por defecto de flex (align-items:stretch) impondría
     la altura de la columna al <img> e ignoraría su proporción. */
  align-items: center;
}

.img-hero {
  width: 100%;
  /* height:auto es imprescindible: el <img> lleva los atributos width/height
     (para reservar espacio y evitar saltos de layout) y sin esto el alto del
     atributo se aplicaría tal cual, deformando la foto. */
  height: auto;
  max-width: 520px;
  /* Marco vertical: la foto es apaisada, así que se recorta por los lados
     (cover) en lugar de deformarse. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 65% center;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(67, 39, 89, 0.15);
  z-index: 2;
  position: relative;
}

.flotante {
  position: absolute;
  background: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  font-weight: bold;
  color: var(--morado);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: flotar 4s ease-in-out infinite;
}

.card-f1 {
  top: 20px;
  left: -20px;
  animation-delay: 0s;
}

.card-f2 {
  bottom: 40px;
  right: -10px;
  animation-delay: 2s;
}

@keyframes flotar {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.fade-in-up {
  animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.fade-in-left {
  animation: fadeInLeft 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ==================================================
   3. SECCIÓN: ¿PARA QUIÉN ES ESTA PLATAFORMA?
================================================== */

.publico-meta h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
}

.tres-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.tarjetas {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.tarjeta {
  flex: 1;
  background-color: white;
  border: 2px solid var(--lila-acento);
  border-radius: 10px;
  padding: 20px;
  min-width: 200px;
  text-align: center;
  font-weight: bold;
  color: var(--morado);
}

/* ==================================================
   4. SECCIÓN: MÓDULOS DE APRENDIZAJE
================================================== */

#modulos h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
}

.modulos-dos-columnas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 800px;
  margin: 20px auto;
}

.modulo {
  background-color: var(--blanco);
  border: 2px solid var(--lila-acento);
  padding: 20px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  color: var(--morado);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}

/* ==================================================
   5. TESTIMONIOS Y COMUNIDAD (2 COLUMNAS)
================================================== */

.testimonios-comunidad {
  padding: 60px 20px;
}

.contenedor-testimonio-comunidad {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* ambas tarjetas con la misma altura */
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  justify-content: center;
}

/* Mismo lenguaje que .modulo-card: línea superior degradada, sombra
   generosa y elevación al pasar el cursor. */
.tarjeta-info {
  flex: 1;
  min-width: 280px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--blanco);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 10px 30px rgba(67, 39, 89, 0.08);
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.tarjeta-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--fucsia), var(--menta));
}

.tarjeta-info:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(208, 100, 198, 0.2);
}

.tarjeta-info .emoji {
  width: 64px;
  height: 64px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background-color: var(--crema);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tarjeta-info h3 {
  margin: 0 0 10px;
  color: var(--morado);
  font-size: 1.35rem;
  font-weight: 900;
}

.tarjeta-info p {
  color: var(--sub);
  line-height: 1.6;
  margin: 0 0 18px;
}

.tarjeta-info .etiqueta {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 14px;
  border-radius: 30px;
  background: var(--lavanda);
  color: var(--morado);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.comentario {
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--texto);
  margin: 0 0 16px;
}

.autor {
  display: block;
  margin-top: auto;
  font-weight: 800;
  color: var(--fucsia);
}

/* Llamada a la acción de la tarjeta de comunidad */
.btn-comunidad {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--fucsia), var(--morado-med));
  color: var(--blanco);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(208, 100, 198, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-comunidad:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(208, 100, 198, 0.45);
}

/* ==================================================
   6. BOTONES SECUNDARIOS
   (definición única — la del Hero más arriba es la canónica)
================================================== */

/* ==================================================
   7. PIE DE PÁGINA (FOOTER PREMIUM)
================================================== */
footer {
  background-color: var(--morado);
  color: var(--lavanda);
  padding: 40px 20px 20px;
  text-align: center;
  margin-top: 60px;
}

.footer-contenido {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(230, 216, 243, 0.2);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.footer-logo {
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--blanco);
  font-weight: bold;
}

.footer-enlaces {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 20px;
}

.footer-enlaces a {
  color: var(--lavanda);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-enlaces a:hover {
  color: var(--menta);
}

.footer-legal {
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0;
}

/* ==================================================
   8. COLORES DE FONDO POR SECCIÓN
================================================== */

.fondo-marfil {
  background-color: var(--crema);
}

.fondo-beige {
  background-color: var(--lavanda);
}

.fondo-marfil-claro {
  background-color: var(--lavanda-suave);
}

.fondo-blanco {
  background-color: var(--blanco);
}

/* ==================================================
   9. BARRA DE NAVEGACIÓN SUPERIOR + LOGO
================================================== */

.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: var(--blanco);
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Al saltar desde el menú, el título de la sección no queda bajo la barra fija */
section[id] {
  scroll-margin-top: 100px;
}

/* Sin max-width ni centrado: el logo queda pegado al borde izquierdo de la
   ventana y el menú al derecho. */
.navbar-container {
  width: 100%;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo:hover {
  opacity: 0.8;
}

.logo-img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
}

/* La barra de navegación y las migas usan px y no rem: no crecen con el
   tamaño de letra que elige el usuario (js/letra.js), porque más grandes
   ya no caben en una línea. Solo crece el contenido. */
.logo-nombre {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  color: var(--morado);
  font-weight: bold;
}

.menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.menu li a {
  text-decoration: none;
  color: var(--morado);
  font-weight: 500;
  transition: color 0.3s ease;
}

.menu li a:hover {
  color: var(--fucsia);
}

/* ==================================================
   9b. NAVEGACIÓN DE LA PLATAFORMA (menú por zonas y migas)
   El marcado es el mismo en todas las páginas con sesión:
   <ul class="menu"> con .menu-zona y, debajo de la navbar,
   <nav class="migas migas--cuidador|adulto">.
================================================== */
.menu-zona {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 20px;
  font-weight: 800 !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.menu-zona--inicio:hover,
.menu-zona--inicio.activo { background: var(--lavanda-suave); }
.menu-zona--cuidador:hover,
.menu-zona--cuidador.activo { background: var(--zona-cuidador-suave); color: var(--zona-cuidador) !important; }
.menu-zona--adulto:hover,
.menu-zona--adulto.activo { background: var(--zona-adulto-suave); color: var(--zona-adulto) !important; }
.menu-zona.activo { box-shadow: inset 0 0 0 2px currentColor; }

.migas {
  border-bottom: 3px solid var(--zona-color, var(--morado-med));
  background: var(--zona-fondo, var(--lavanda-suave));
}
.migas--cuidador { --zona-color: var(--zona-cuidador); --zona-fondo: var(--zona-cuidador-suave); }
.migas--adulto { --zona-color: var(--zona-adulto); --zona-fondo: var(--zona-adulto-suave); }
.migas-in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 14px;
}
.migas-zona {
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--zona-color);
  color: var(--blanco);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.3px;
}
.migas ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
}
.migas li + li::before { content: '›'; margin-right: 6px; color: var(--sub); }
.migas a { color: var(--zona-color); font-weight: 800; text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas li[aria-current] { color: var(--texto); font-weight: 700; }

/* Etiqueta de zona en los encabezados (p. ej. modulos.html) */
.zona-etiqueta {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 16px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: var(--blanco);
  font-size: 0.82rem;
  font-weight: 900;
}

.menu-corto { display: none; }

.menu-zona, .btn-salir { white-space: nowrap; }

@media (max-width: 1200px) {
  /* "Para el cuidador" → "cuidador" y "Cerrar sesión" → "Salir" para que
     el menú quepa en una línea en tabletas y celulares */
  .menu-largo { display: none; }
  .menu-corto { display: inline; }
}

@media (max-width: 768px) {
  .menu-zona { padding: 6px 10px; }
  .migas-in { padding: 8px 16px; font-size: 13px; }
}

/* ==================================================
   10. MENÚ DESPLEGABLE EN MÓDULOS (HOVER INFO)
================================================== */

.modulo-hover {
  position: relative;
  z-index: 10;
  background-color: var(--blanco);
  border: 2px solid var(--lila-acento);
  padding: 20px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  color: var(--morado);
  font-size: 1.1rem;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  overflow: visible;
}

.modulo-hover:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  z-index: 100;
}

.info-hover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background-color: var(--blanco);
  border: 1px solid #ccc;
  padding: 12px;
  width: 240px;
  font-weight: normal;
  font-size: 0.95rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
  white-space: normal;
}

.modulo-hover:hover .info-hover {
  opacity: 1;
  visibility: visible;
}

/* ==================================================
   11. POPUP DE AUTENTICACIÓN (ESTILO APP MODERNA)
================================================== */
.popup {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(30, 15, 45, 0.7); /* Fondo oscuro elegante */
  backdrop-filter: blur(6px); /* Efecto cristal (desenfoca lo de atrás) */
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  /* En pantallas bajas el formulario no cabe: se permite desplazar */
  overflow-y: auto;
  padding: 16px 0;
}

.popup-contenido {
  margin: auto; /* centra sin recortar el borde superior al desbordar */
  background-color: var(--blanco);
  padding: 40px;
  border-radius: 24px; /* Bordes más suaves */
  max-width: 420px;
  width: 90%;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: popup-animacion 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes popup-animacion {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.popup-contenido h2 {
  font-family: 'Caveat', cursive;
  color: var(--morado);
  margin-bottom: 25px;
  text-align: center;
  font-size: 1.8rem;
}

.popup-contenido label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--morado-oscuro);
  font-size: 0.95rem;
}

/* Campos de texto dinámicos */
.popup-contenido input {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  border: 2px solid var(--lavanda);
  border-radius: 12px;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  background-color: #fcfafc;
  transition: all 0.3s ease;
}

.popup-contenido input:focus {
  outline: none;
  border-color: var(--fucsia);
  box-shadow: 0 0 0 4px rgba(208, 100, 198, 0.15); /* Resplandor fucsia al escribir */
  background-color: var(--blanco);
}

.popup-contenido small {
  display: block;
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 0.8rem;
  color: #888;
  line-height: 1.4;
}

.popup-contenido button.boton-principal {
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  margin-top: 10px;
  border-radius: 12px;
}

.cerrar {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  line-height: 1;
  color: var(--lila-acento);
  cursor: pointer;
  transition: all 0.3s ease;
}

.cerrar:hover {
  color: var(--fucsia);
  transform: rotate(90deg); /* Pequeño giro divertido al pasar el mouse */
}

/* Pestañas (Tabs) estilo "Switch" */
.popup-pestañas {
  display: flex;
  margin-bottom: 30px;
  background-color: var(--crema);
  border-radius: 12px;
  padding: 6px;
}

.pestaña {
  flex: 1;
  padding: 10px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: #a08ab3;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pestaña.activa {
  color: var(--morado);
  background-color: var(--blanco);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Separador "o" entre el formulario y el botón de Google */
.separador-o {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--morado-grisaceo);
  font-size: 0.85rem;
  font-weight: 700;
}

.separador-o::before,
.separador-o::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lavanda);
}

.boton-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--lavanda);
  border-radius: 12px;
  background: var(--blanco);
  color: var(--texto);
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.boton-google:hover {
  border-color: var(--lila-acento);
  box-shadow: 0 4px 14px rgba(67, 39, 89, 0.1);
}

.aviso-legal-registro {
  margin: 18px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--sub);
  text-align: center;
}

.aviso-legal-registro a {
  color: var(--morado-med);
  font-weight: 700;
}

.forgot-password {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--morado-oscuro);
  text-decoration: none;
  font-weight: 600;
}

.forgot-password:hover {
  color: var(--fucsia);
  text-decoration: underline;
}

/* ==================================================
   12. MENSAJE DE VALIDACIÓN EN EL FORMULARIO
================================================== */

.mensaje-formulario {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 8px;
  display: none; /* Oculto por defecto */
}

.mensaje-formulario.visible {
  display: block; /* Visible cuando se necesita */
}

.mensaje-formulario.error {
  color: var(--rojo-error);
  background-color: #fdecea;
  border: 1px solid #f5c6cb;
}

.mensaje-formulario.exito {
  color: #28a745;
  background-color: #e6f4ea;
  border: 1px solid #c3e6cb;
}

/* ==================================================
   13. ESTILOS PARA LAS NUEVAS TARJETAS DE MÓDULO
================================================== */

.modulo-card {
  background-color: var(--blanco);
  border: 2px solid var(--lila-acento);
  padding: 20px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  color: var(--morado);
  font-size: 1.1rem;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.modulo-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

.modulo-card h4, .modulo-card p {
  margin: 5px 0;
}

.modulo-card p {
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--morado-oscuro);
}


/* ==================================================
   15. ESTILOS MODERNOS PARA TARJETAS (Efecto Platzi)
================================================== */
.modulo-hover, .tarjeta {
  border: none !important;
  background: var(--blanco);
  box-shadow: 0 10px 30px rgba(67, 39, 89, 0.08);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
  overflow: hidden;
}

.modulo-hover:hover, .tarjeta:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 15px 35px rgba(208, 100, 198, 0.2) !important;
}

.modulo-hover::before, .tarjeta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--fucsia), var(--menta));
}

/* ==================================================
   16. ANIMACIONES AL HACER SCROLL (SCROLL REVEAL)
================================================== */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
/* ==================================================
   17. PÁGINA INTERIOR (PANEL DE ESTUDIANTE MODERNO)
================================================== */
.hero-interior {
  background: linear-gradient(135deg, var(--morado) 0%, var(--fucsia) 100%);
  color: white;
  text-align: center;
  padding: 80px 20px 120px; /* Un poco más de espacio abajo */
  margin-bottom: -80px; /* Superposición más pronunciada */
}

.hero-interior h1 {
  font-family: 'Caveat', cursive;
  font-size: 3.2rem; /* Título un poco más grande */
  margin-bottom: 15px;
  color: white;
  text-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Pequeña sombra para legibilidad */
}

.hero-interior p {
  font-size: 1.15rem;
  opacity: 0.95;
  max-width: 600px;
  margin: 0 auto;
}

#modulos-contenido {
  position: relative;
  z-index: 10;
  padding-top: 0;
  background-color: transparent;
}

.grid-modulos {
  max-width: 1000px; /* Hacemos la cuadrícula un poco más ancha */
  gap: 30px; /* Más espacio entre tarjetas */
}

/* --- Rediseño Total de la Tarjeta del Módulo --- */
.modulo-card {
  border: none !important;
  background: var(--blanco);
  box-shadow: 0 10px 30px rgba(67, 39, 89, 0.08);
  border-radius: 20px; /* Bordes más redondeados */
  padding: 30px;
  text-align: left; /* Alineación a la izquierda, más profesional */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Anula el align-items:center de la definición anterior, que centraba los
     textos cortos y dejaba a la izquierda los que ocupaban dos líneas */
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}

.modulo-card:hover {
  transform: translateY(-12px) !important; /* Salta un poco más alto */
  box-shadow: 0 20px 40px rgba(208, 100, 198, 0.25) !important;
}

/* La línea superior decorativa */
.modulo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--fucsia), var(--menta));
}

/* El contenedor del ícono */
.icono-modulo {
  font-size: 2.5rem;
  margin-bottom: 20px;
  background-color: var(--crema); /* Círculo de fondo */
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.modulo-card h4 {
  font-size: 1.3rem;
  color: var(--morado);
  margin-top: 0;
  margin-bottom: 10px;
}

.modulo-card p {
  font-size: 0.95rem;
  color: var(--morado-oscuro);
  line-height: 1.5;
  margin-bottom: 25px; /* Empuja el botón hacia abajo */
  flex-grow: 1; /* Hace que todas las tarjetas midan igual aunque el texto varíe */
}

/* Botón de acción principal dentro de la tarjeta */
.btn-empezar {
  display: inline-block;
  align-self: flex-start; /* Botón a la izquierda */
  margin-top: auto;       /* y siempre al fondo de la tarjeta */
  padding: 10px 20px;
  background-color: transparent;
  color: var(--fucsia);
  border: 2px solid var(--fucsia);
  border-radius: 25px;
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modulo-card:hover .btn-empezar {
  background-color: var(--fucsia);
  color: white;
  box-shadow: 0 4px 15px rgba(208, 100, 198, 0.4);
}

/* Botón especial para cerrar sesión en la navbar */
.btn-salir {
  display: inline-block; /* que el padding cuente en la altura y no se recorte en el menú móvil */
  background-color: transparent !important;
  border: 2px solid var(--rojo-error);
  color: var(--rojo-error) !important;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-salir:hover {
  background-color: var(--rojo-error) !important;
  color: white !important;
}

/* ==================================================
   18. PANEL DE ADMINISTRADOR EXCLUSIVO
================================================== */
.admin-panel {
  background: var(--blanco);
  border: 2px dashed var(--fucsia); /* Un borde punteado para diferenciarlo */
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 10px 30px rgba(208, 100, 198, 0.1);
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.admin-header {
  text-align: center;
  margin-bottom: 25px;
}

.admin-badge {
  background-color: #fdecea;
  color: var(--rojo-error);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 15px;
}

.admin-header h3 {
  color: var(--morado);
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  margin: 0 0 10px 0;
}

.admin-header p {
  color: var(--morado-oscuro);
  margin: 0;
  font-size: 1rem;
}

.admin-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-admin {
  background-color: var(--crema);
  color: var(--morado);
  border: 1px solid var(--lila-acento);
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.btn-admin:hover {
  background-color: var(--morado);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(67, 39, 89, 0.2);
  border-color: var(--morado);
}
/* ==================================================
   19. LANDING: DOS CAMINOS, EQUIPO Y CARTILLA
================================================== */

.seccion-intro {
  max-width: 640px;
  margin: -14px auto 34px;
  text-align: center;
  color: var(--sub);
  font-size: 1.1rem;
  line-height: 1.6;
}

/* Etiqueta en mayúsculas (misma que .tarjeta-info .etiqueta) */
.camino .etiqueta,
.directora .etiqueta,
.cartilla-texto .etiqueta {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 14px;
  border-radius: 30px;
  background: var(--lavanda);
  color: var(--morado);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* --- Dos caminos --- */
.caminos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1040px;
  margin: 0 auto;
}

.camino,
.directora {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(67, 39, 89, 0.08);
}

.camino::before,
.directora::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--fucsia), var(--menta));
}

.camino {
  padding: 34px 30px 30px;
}

.camino-icono {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  background-color: var(--crema);
  border-radius: 50%;
}

.camino h3 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--morado);
}

.camino > p {
  margin: 0 0 18px;
  color: var(--sub);
  line-height: 1.6;
}

.camino-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.camino-lista li {
  position: relative;
  padding-left: 26px;
  color: var(--texto);
  line-height: 1.5;
}

.camino-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--fucsia);
  font-weight: 900;
}

.chip-pronto {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 10px;
  border-radius: 20px;
  background: var(--badge-naranja-bg);
  color: var(--badge-naranja-fg);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.caminos-nota {
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
  color: var(--sub);
  font-style: italic;
}

/* --- Equipo --- */
#equipo h2,
.publico-meta h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
}

#equipo {
  padding-top: 50px;
  padding-bottom: 60px;
}

.equipo {
  max-width: 1000px;
  margin: 0 auto;
}

.directora {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 38px 36px 32px;
}

.directora h3 {
  margin: 0 0 6px;
  font-family: 'Caveat', cursive;
  font-size: 2.3rem;
  color: var(--morado);
}

.directora p {
  margin: 0 0 14px;
  color: var(--texto);
  line-height: 1.65;
}

.credenciales {
  color: var(--morado-med) !important;
  font-weight: 700;
  font-size: 0.95rem;
}

.directora blockquote {
  margin: 18px 0 0;
  padding: 4px 0 4px 18px;
  border-left: 4px solid var(--fucsia);
  font-style: italic;
  color: var(--morado-oscuro);
  font-size: 1.05rem;
}

.directora-foto {
  flex: none;
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--blanco);
  box-shadow: 0 0 0 3px var(--fucsia), 0 8px 20px rgba(67, 39, 89, 0.15);
}

.equipo-subtitulo {
  margin: 44px 0 20px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--morado);
}


/* Equipo del proyecto: tarjetas que se voltean (script al final de
   index.html). Las dos caras ocupan la misma celda de la grilla, así la
   tarjeta mide lo que la cara más alta. */
.equipo-ayuda {
  margin: -10px 0 20px;
  text-align: center;
  color: var(--sub);
  font-size: 0.95rem;
}

.proyecto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.carta-equipo { perspective: 1200px; }

.carta-interior {
  display: grid;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.3, 0.8, 0.3, 1);
  transform-style: preserve-3d;
}
.carta-equipo.volteada .carta-interior { transform: rotateY(180deg); }

.carta-cara {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 24px 24px;
  border-radius: 20px;
  background: var(--blanco);
  box-shadow: 0 10px 30px rgba(67, 39, 89, 0.08);
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.carta-cara::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--fucsia), var(--menta));
}
.carta-reverso {
  transform: rotateY(180deg);
  justify-content: center;
  background: var(--lavanda-suave);
}

.carta-frente img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--blanco);
  box-shadow: 0 0 0 3px var(--fucsia), 0 8px 20px rgba(67, 39, 89, 0.15);
}

.carta-cara h4 {
  margin: 4px 0 0;
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--morado);
}
.carta-cara .credenciales { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.carta-reverso p { margin: 0; color: var(--texto); font-size: 0.95rem; line-height: 1.6; }
.carta-reverso a { color: var(--morado-med); font-weight: 800; }

.carta-girar {
  margin-top: auto;
  padding: 8px 18px;
  border: 2px solid var(--fucsia);
  border-radius: 30px;
  background: var(--blanco);
  color: var(--fucsia);
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.carta-girar:hover,
.carta-girar:focus-visible { background: var(--fucsia); color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  .carta-interior { transition: none; }
}

/* En tabletas y celulares las tarjetas se deslizan de lado */
@media (max-width: 860px) {
  .proyecto {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 16px;
    scrollbar-width: thin;
  }
  .carta-equipo {
    flex: 0 0 min(300px, 82%);
    scroll-snap-align: center;
  }
}

/* --- Cartilla --- */
#cartilla {
  padding-top: 60px;
  padding-bottom: 60px;
}

.cartilla {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}

.cartilla-portada {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(67, 39, 89, 0.2);
}

.cartilla-texto h2 {
  margin: 0 0 14px;
  font-size: 1.9rem;
  line-height: 1.25;
}

.cartilla-texto p {
  color: var(--texto);
  line-height: 1.65;
  margin: 0 0 18px;
}

.cartilla-areas {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cartilla-areas li {
  padding: 5px 13px;
  border-radius: 20px;
  background: var(--blanco);
  border: 1.5px solid var(--lila-acento);
  color: var(--morado);
  font-size: 0.88rem;
  font-weight: 700;
}

.cartilla-nota {
  color: var(--sub) !important;
  font-style: italic;
}

@media (max-width: 900px) {
  .caminos,
  .cartilla {
    grid-template-columns: 1fr;
  }

  .cartilla {
    gap: 28px;
  }
}

@media (max-width: 600px) {
  .directora {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 22px 26px;
  }

  .directora blockquote {
    text-align: left;
  }

  .camino {
    padding: 30px 22px 24px;
  }

  .cartilla-texto h2,
  #equipo h2,
  .publico-meta h2 {
    font-size: 1.6rem;
  }
}

/* ==================================================
   20. RESPONSIVE
   index.css no tenía media queries: en móvil la navbar desbordaba
   (scroll horizontal) y el hero no se apilaba.
================================================== */

/* --- Tablet y móvil: el hero pasa a una sola columna --- */
@media (max-width: 900px) {
  .hero-moderno {
    flex-direction: column;
    gap: 40px;
    padding: 50px 6% 70px;
    min-height: 0; /* el 85vh dejaba huecos enormes al apilar */
    text-align: center;
  }

  .hero-texto {
    max-width: 100%;
  }

  .hero-texto h1 {
    font-size: 2.3rem;
  }

  .hero-botones {
    justify-content: center;
    flex-wrap: wrap;
  }

  .img-hero {
    max-width: 100%;
    /* Marco más bajo que en escritorio para no ocupar toda la pantalla */
    aspect-ratio: 16 / 10;
  }
}

/* --- Navbar: el menú se envuelve en vez de desbordar --- */
@media (max-width: 768px) {
  .navbar-container {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px 16px;
  }

  /* El menú baja a su propia fila en una sola línea. Si no cabe, se desliza
     horizontalmente en vez de partirse en dos filas (que hacía la barra
     fija demasiado alta). Los márgenes auto lo centran cuando sí cabe. */
  .menu {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    align-items: center;
    padding: 2px 0;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 15px;
    white-space: nowrap;
  }

  .menu::-webkit-scrollbar {
    display: none;
  }

  .menu li:first-child { margin-left: auto; }
  .menu li:last-child  { margin-right: auto; }

  section[id] {
    scroll-margin-top: 110px;
  }

  .modulos-dos-columnas {
    grid-template-columns: 1fr;
  }
}

/* --- Móvil pequeño --- */
@media (max-width: 480px) {
  .logo-img {
    width: 44px;
    height: 44px;
  }

  .logo-nombre {
    font-size: 17px;
  }

  .hero-texto h1 {
    font-size: 1.9rem;
  }

  .flotante {
    font-size: 0.8rem;
    padding: 8px 14px;
  }

  .card-f1 { left: 0; }
  .card-f2 { right: 0; }

  .popup-contenido {
    padding: 48px 22px 32px; /* espacio arriba para la × de cerrar */
  }

  .menu {
    gap: 12px;
    font-size: 14px;
  }

  section {
    padding: 30px 16px;
  }
}

/* Bandera de Colombia dibujada con CSS: Windows no muestra el emoji 🇨🇴
   (aparece como las letras "CO"). Se dimensiona con em para heredar el
   tamaño del emoji al que reemplaza. */
.bandera-co {
  display: inline-block;
  width: 1.3em; height: 0.87em;
  vertical-align: -0.08em;
  border-radius: 0.1em;
  background: linear-gradient(#FCD116 0 50%, #003893 50% 75%, #CE1126 75%);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}

/* ==================================================
   RECUERDO DEL DÍA (js/recuerdo-del-dia.js) — hub.html y bienestar.html
   Foto tipo polaroid y texto con lo que el adulto mayor guardó en
   reminiscencias.
================================================== */
.recuerdo-dia[hidden] { display: none; }
.recuerdo-dia {
  display: flex;
  gap: 22px;
  align-items: center;
  margin: 0 0 18px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #fbf6ec;
  border: 1px solid #eadfca;
  box-shadow: 0 8px 24px rgba(67, 39, 89, 0.08);
}
.recuerdo-dia-foto {
  flex: none;
  width: 130px;
  height: 150px;
  padding: 8px 8px 24px;
  background: var(--blanco);
  box-shadow: 0 5px 14px rgba(67, 39, 89, 0.18);
  transform: rotate(-2deg);
}
.recuerdo-dia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recuerdo-dia-foto--emoji { display: grid; place-items: center; font-size: 3rem; }
.recuerdo-dia-texto { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.recuerdo-dia-eyebrow {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zona-adulto, var(--fucsia));
}
.recuerdo-dia-pregunta { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--sub); }
.recuerdo-dia-titulo {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--morado);
  overflow-wrap: anywhere;
}
.recuerdo-dia--vacio .recuerdo-dia-titulo { font-size: 1.6rem; }
.recuerdo-dia-ayuda { margin: 0; font-size: 0.92rem; color: var(--texto); line-height: 1.5; }
.recuerdo-dia-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.recuerdo-dia-boton {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--zona-adulto, var(--morado));
  color: var(--blanco);
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
}
.recuerdo-dia-boton:hover, .recuerdo-dia-boton:focus-visible { filter: brightness(1.1); }
.recuerdo-dia-modulo { font-size: 0.85rem; font-weight: 700; color: var(--sub); }

/* En bienestar.html la tarjeta se monta sobre el encabezado, como la grilla */
.bi-recuerdo { max-width: 1000px; margin: -32px auto 0; padding: 0 20px; position: relative; z-index: 11; }
.bi-recuerdo:has(.recuerdo-dia:not([hidden])) + .bi-grid { margin-top: 4px; }

@media (max-width: 600px) {
  .recuerdo-dia { flex-direction: column; text-align: center; padding: 22px 18px; }
  .recuerdo-dia-texto { align-items: center; }
  .recuerdo-dia-boton { align-self: center; }
  .recuerdo-dia-pie { justify-content: center; }
}