/* VIDA SANA, COMUNIDAD FUERTE - estilos generales */
:root {
  --verde: #27865c;
  --verde-oscuro: #176344;
  --verde-claro: #e8f5ed;
  --azul: #287ca5;
  --azul-claro: #eaf5fa;
  --naranja: #e89b4b;
  --texto: #263b32;
  --suave: #64766d;
  --fondo: #f4f8f5;
  --blanco: #ffffff;
  --borde: #dce9df;
  --sombra: 0 12px 32px rgba(34, 76, 53, .08);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { min-height: 76px; padding: 12px max(5%, calc((100% - 1180px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--verde-oscuro); }
.marca-icono { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: white; background: var(--verde); font-size: 25px; font-weight: bold; }
.marca strong, .marca small { display: block; line-height: 1.2; letter-spacing: .7px; }
.marca small { font-size: 10px; color: var(--suave); margin-top: 3px; }
.topbar-acciones { display: flex; align-items: center; gap: 12px; }
.nombre-sesion { color: var(--verde-oscuro); font-weight: 700; }
.contenedor { width: min(1120px, 92%); margin: 30px auto 60px; }
.pantalla { display: none; }
.pantalla.activa { display: block; }
.oculto { display: none !important; }
.hero { min-height: 370px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 30px; padding: 42px 5%; border-radius: 28px; background: linear-gradient(115deg, #e6f4eb, #e8f4fa); overflow: hidden; }
.etiqueta { display: inline-block; color: var(--verde); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }
.hero h1 { margin: 12px 0; font-size: clamp(32px, 5vw, 54px); line-height: 1.08; letter-spacing: -1.8px; }
.hero h1 span { color: var(--verde); }
.hero p { max-width: 570px; color: #566c60; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.btn { border: 0; border-radius: 12px; padding: 12px 19px; font-weight: 700; transition: transform .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(.97); }
.btn-principal { background: var(--verde); color: white; }
.btn-secundario { background: #eef5f0; color: var(--verde-oscuro); border: 1px solid var(--borde); }
.btn-contorno { background: white; color: var(--verde-oscuro); border: 1px solid #b8d6c2; }
.btn-ancho { width: 100%; margin-top: 8px; }
.hero-imagen { min-height: 260px; position: relative; display: grid; place-items: center; }
.circulo-grande { width: 220px; height: 220px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.75); font-size: 100px; box-shadow: var(--sombra); }
.mini-tarjeta { position: absolute; padding: 10px 14px; border-radius: 14px; background: white; box-shadow: var(--sombra); font-size: 23px; }
.mini-tarjeta span { font-size: 12px; font-weight: 700; margin-left: 4px; }
.tarjeta-uno { top: 12px; left: 0; }.tarjeta-dos { right: 0; top: 105px; }.tarjeta-tres { bottom: 5px; left: 15px; }
.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.beneficio, .tarjeta { background: white; border: 1px solid var(--borde); border-radius: 20px; padding: 23px; box-shadow: var(--sombra); }
.beneficio h3 { margin: 10px 0 4px; }.beneficio p, .texto-suave { color: var(--suave); font-size: 13px; }
.beneficio-icono { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-size: 24px; }.verde { background: var(--verde-claro); }.azul { background: var(--azul-claro); }.naranja { background: #fff2e3; }
.nota, .pie-app { text-align: center; color: #819087; font-size: 12px; margin-top: 28px; }
.panel-formulario { max-width: 720px; margin: 0 auto; padding: 30px; background: white; border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra); }
.volver, .enlace { border: 0; background: transparent; color: var(--verde-oscuro); font-weight: 700; padding: 4px 0; }
.encabezado-seccion { margin: 18px 0 24px; }.encabezado-seccion h1 { margin: 4px 0; font-size: 32px; }.encabezado-seccion p { color: var(--suave); margin: 0; }
form label { display: block; color: #43574b; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 13px; border: 1px solid #d6e3da; border-radius: 10px; background: #fbfdfb; color: var(--texto); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(39,134,92,.12); }
textarea { resize: vertical; }
.rejilla-formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }.campo-completo { grid-column: 1 / -1; }
.mensaje { min-height: 22px; margin: 8px 0; font-size: 13px; }.mensaje.error { color: #b83232; }.mensaje.exito { color: var(--verde-oscuro); }
.texto-centro { text-align: center; color: var(--suave); font-size: 14px; margin-bottom: 0; }
.bienvenida-usuario { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-radius: 20px; background: linear-gradient(110deg, #e5f3e9, #e9f4fa); }
.bienvenida-usuario h1 { margin: 4px 0; font-size: 30px; }.bienvenida-usuario p { margin: 0; color: var(--suave); }.bienvenida-icono { font-size: 54px; }
.menu-modulos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 28px; }
.nav-modulo { display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--borde); border-radius: 14px; padding: 14px 8px; background: white; color: var(--texto); font-weight: 700; }
.nav-modulo.seleccionado { color: var(--verde-oscuro); background: var(--verde-claro); border-color: #a9d3b7; }
.modulo { display: none; }.modulo.activa { display: block; }
.titulo-modulo { margin: 0 0 18px; }.titulo-modulo h2 { margin: 3px 0; font-size: 27px; }.titulo-modulo p { margin: 0; color: var(--suave); font-size: 14px; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.tarjeta h3 { margin: 5px 0 12px; font-size: 20px; }.tarjeta h4 { margin: 20px 0 8px; }.icono-tarjeta { font-size: 30px; }
.resultado { margin-top: 15px; padding: 13px; border-radius: 12px; background: var(--azul-claro); color: #245b76; font-weight: 700; min-height: 48px; }
.lista-registros { padding-left: 20px; color: #53665b; font-size: 13px; }.lista-registros li { margin: 7px 0; overflow-wrap: anywhere; }
.pestanas-menu { display: flex; gap: 8px; margin: 15px 0; }.pestana { border: 1px solid var(--borde); border-radius: 9px; padding: 8px 12px; background: white; color: var(--texto); }.pestana.activa { background: var(--azul-claro); border-color: #9bcce0; color: #205f7b; font-weight: 700; }
.consejos { padding-left: 20px; color: var(--suave); }.consejos li { margin: 10px 0; }
.dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }.dias-semana label { margin: 0; text-align: center; font-size: 11px; }.dias-semana input { accent-color: var(--verde); margin: 0 auto 7px; width: 18px; height: 18px; }
.respiracion { display: grid; place-items: center; min-height: 120px; margin: 16px 0; border-radius: 18px; background: var(--azul-claro); color: #236582; font-size: 20px; font-weight: 700; text-align: center; }
.respiracion.activa { animation: pulso 4s ease-in-out infinite alternate; }
@keyframes pulso { from { transform: scale(.97); } to { transform: scale(1.02); } }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 30px 7%; }.hero-imagen { min-height: 230px; }
  .beneficios, .dos-columnas { grid-template-columns: 1fr; }
  .menu-modulos { grid-template-columns: repeat(2, 1fr); }
  .panel-formulario { padding: 22px 17px; }
}
@media (max-width: 440px) {
  .topbar { padding: 10px 4%; }.nombre-sesion { display: none; }
  .contenedor { width: 94%; margin-top: 18px; }
  .rejilla-formulario { grid-template-columns: 1fr; }.campo-completo { grid-column: auto; }
  .bienvenida-usuario { padding: 18px; }.bienvenida-usuario h1 { font-size: 24px; }.bienvenida-icono { font-size: 40px; }
  .nav-modulo { font-size: 13px; }.dias-semana { gap: 2px; }
}

.beneficio-imagen { display: block; width: 100%; height: 135px; object-fit: cover; border-radius: 13px; margin-bottom: 12px; }