/* =====================
FUENTES LOCALES
===================== */
@font-face {
font-family: 'DMSerif';
src: url('DMSerifDisplay-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DMSerif';
src: url('DMSerifDisplay-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Mont';
src: url('Mont-Book.otf') format('opentype');
font-weight: 300;
}
@font-face {
font-family: 'Mont';
src: url('Mont-Regular.otf') format('opentype');
font-weight: 400;
}
@font-face {
font-family: 'Mont';
src: url('Mont-Bold.otf') format('opentype');
font-weight: 700;
}

/* =====================
VARIABLES Y RESET
===================== */
:root {
--marron: #3C2219;
--naranja: #F38660;
--beige: #FDF6EE;
--blanco: #FFFFFF;
--texto: #3C2219;
}

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

html { scroll-behavior: smooth; }

body {
font-family: 'Mont', sans-serif;
font-weight: 400;
color: var(--texto);
background-color: var(--marron);
overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

/* =====================
   NAVEGACIÓN
===================== */
.nav-wrapper {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    min-width: 850px;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 8px 40px;
    background-color: var(--beige);
    border-radius: 50px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

.nav-logo {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 15px;
    color: var(--marron);
    white-space: nowrap;
    flex: 1;
}

.nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
    justify-content: center;
    flex: 2;
}

.nav-links a {
    font-family: 'Mont', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--marron);
    transition: color 0.3s;
}

.nav-links a:hover { color: var(--naranja); }

.nav-btn-container {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.nav-btn {
    background-color: var(--naranja) !important;
    color: var(--blanco) !important;
    padding: 10px 28px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 13px;
    transition: transform 0.2s ease, opacity 0.3s !important;
    display: inline-block;
    white-space: nowrap;
}

.nav-btn:hover { 
    opacity: 0.9 !important;
    transform: scale(1.03); 
}

/* =====================
HERO
===================== */
.hero-wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
background-color: var(--marron);
}

/* --- COLUMNA IZQUIERDA --- */
.hero-izq {
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 100px;
padding-bottom: 60px;
padding-left: calc(17.5vw + 40px);
padding-right: 48px;
}

.hero-titulo {
font-family: 'DMSerif', serif;
font-size: 52px;
line-height: 1.08;
margin-bottom: 24px;
}

.hero-titulo .linea1 {
font-style: normal;
font-weight: normal;
color: var(--naranja);
display: block;
}

.hero-titulo .linea2 {
font-style: italic;
font-weight: normal;
color: var(--beige);
display: block;
}

.hero-subtag {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Mont', sans-serif;
font-size: 16px;
color: var(--beige);
margin-bottom: 24px;
}

.estrella {
color: var(--naranja);
font-size: 20px;
}

.hero-subtag em {
color: var(--naranja);
font-style: italic;
font-family: 'DMSerif', serif;
font-size: 20px;
}

.hero-texto {
font-family: 'Mont', sans-serif;
font-size: 15px;
color: var(--beige);
line-height: 1.85;
max-width: 500px; /* Lo hacemos más ancho para que la tercera línea entre completa */
margin-bottom: 32px;
opacity: 0.9;
}

.hero-texto .naranja {
color: var(--naranja);
font-style: italic;
}

.hero-btn {
display: inline-block;
background-color: transparent;
color: var(--beige);
font-family: 'Mont', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 14px 32px;
border: 1.5px solid rgba(255,255,255,0.3);
border-radius: 6px;
width: fit-content;
margin-bottom: 48px;
transition: all 0.3s;
}

.hero-btn:hover {
border-color: var(--naranja);
color: var(--naranja);
}

.hero-avatares {
display: flex;
align-items: center;
}

.avatares-imgs {
display: flex;
align-items: center;
}

.avatares-imgs img {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid var(--marron);
margin-right: -10px;
object-fit: cover;
display: block;
}

.avatares-texto {
margin-left: 20px;
}

.avatares-texto p {
font-family: 'Mont', sans-serif;
font-size: 12px;
color: var(--beige);
line-height: 1.7;
opacity: 0.85;
}

.avatares-texto .num {
color: var(--naranja);
font-weight: 700;
}

/* --- COLUMNA DERECHA --- */
.hero-der {
position: relative;
height: 100vh;
background-image: url('manos.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: calc(-50vw + 50%);
width: calc(50vw);
display: flex;
flex-direction: column;
/* ALINEACIÓN IGUAL A LA IZQUIERDA */
justify-content: center; 
gap: 280px; /* ESTE ES EL ANCLAJE. Ajusta este número para subir/bajar los textos a las líneas rojas */
padding-top: 100px;
padding-bottom: 60px;
}

.hero-der::before {
content: '';
position: absolute;
inset: 0;
background: transparent; /* Quitamos el fondo oscuro para ver la foto clara */
z-index: 1;
}

/* =====================
   CAMBIOS AQUÍ - TEXTO DERECHO
===================== */
.hero-cita {
position: relative;
padding: 0 calc(17.5vw + 10px) 0 0;
text-align: right;
z-index: 2;
margin: 0; /* Quitamos márgenes para que el gap sea exacto */
}

.hero-cita p {
font-family: 'DMSerif', serif;
font-style: italic;
font-size: 34px;
color: var(--blanco);
line-height: 1.4;
margin-bottom: 14px;
text-shadow: 0 2px 20px rgba(0,0,0,0.7);
display: inline-block;
}

.hero-cita span {
font-family: 'DMSerif', serif;
font-style: italic;
font-size: 15px;
color: var(--beige);
opacity: 0.9;
text-shadow: 0 1px 10px rgba(0,0,0,0.6);
display: block;
text-align: right;
}

.hero-texto-der {
position: relative; /* Cambiado para que se ancle al borde inferior */
padding: 0 calc(17.5vw + 10px) 0 0;
z-index: 2;
/* Degradado eliminado por completo */
}

.hero-texto-der p {
font-family: 'Mont', sans-serif;
font-size: 14px;
color: var(--beige);
line-height: 1.85;
opacity: 0.92;
text-align: right;
/* Caja más angosta para que no choque con el centro */
max-width: 400px; 
margin-left: auto; /* Mantiene el texto pegado a la derecha */
}

.hero-texto-der p strong {
font-weight: 700;
color: var(--blanco);
}
/* =====================
   SECCIÓN CONTENIDO
===================== */
.info-section {
    background-color: var(--beige);
    padding: 100px 0;
    color: var(--marron);
}

.info-container {
    /* Alineación con la sección HERO */
    padding-left: calc(17.5vw + 40px);
    padding-right: calc(17.5vw + 40px);
    width: 100%;
}

/* Bloque 1 */
.info-grid-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.info-titulo-grande {
    font-family: 'DMSerif', serif;
    font-style: italic; /* Cambio a Itálica */
    font-size: 72px;
    line-height: 0.95;
    color: var(--marron);
}

.info-icono {
    width: 200px;
    height: auto;
}

/* Bloque 2 */
.info-grid-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 100px;
}

.info-grid-intro p {
    font-size: 15px;
    line-height: 1.6;
}

.naranja-text {
    color: var(--naranja);
    font-weight: 700;
}

/* Bloque 3 */
.info-grid-programa {
    display: flex;
    align-items: baseline;
    gap: 30px;
    margin-bottom: 30px;
}

.prog-naranja {
    font-family: 'DMSerif', serif;
    font-size: 60px;
    color: var(--naranja);
}

.prog-italic {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 40px;
    color: var(--marron);
}

/* Bloque 4 */
.info-programa-desc {
    width: 100%;
    max-width: none; /* Asegura que no se detenga a mitad de camino */
    margin-bottom: 100px;
}

.info-programa-desc p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Bloque 5: Destinado a */
.destinado-header {
    text-align: center;
    margin-bottom: 40px;
    padding-right: 15%; /* Para centrarlo respecto al contenido de abajo */
}

.destinado-header h4 {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 24px;
}

.destinado-content {
    display: flex;
    gap: 0; /* Quitamos el hueco para que la imagen y el blanco se unan */
    align-items: stretch; /* Para que la imagen y el texto tengan la misma altura */
    background-color: var(--blanco); /* El fondo blanco de la tarjeta */
    border-radius: 40px; /* Bordes redondeados de la tarjeta */
    overflow: hidden; /* Importante: esto "recorta" la imagen con la forma de la tarjeta */
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Sombra suave para efecto tarjeta */
}

.destinado-img img {
    width: 480px; /* Ajustado para que se vea similar a tu referencia */
    height: 100%;
    object-fit: cover;
    /* Solo redondeamos los bordes del extremo izquierdo */
    border-radius: 40px 0 0 40px; 
    display: block;
}

.destinado-lista {
    list-style: none;
    flex: 1;
    padding: 60px 80px 60px 60px; /* Espacio interno dentro de la tarjeta blanca */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.destinado-lista li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    display: flex;
    gap: 15px;
}

.destinado-lista .estrella {
    color: var(--naranja);
    flex-shrink: 0;
}
/* =====================
   SECCIÓN PROPUESTA
===================== */
.propuesta-section {
    background-color: var(--marron);
    padding: 120px 0;
    color: var(--beige);
}

.propuesta-container {
    padding-left: calc(17.5vw + 40px);
    padding-right: calc(17.5vw + 40px);
}

.propuesta-header {
    font-family: 'DMSerif', serif;
    font-size: 52px;
    text-align: center;
    line-height: 1.1;
    margin-bottom: 80px;
}

.propuesta-header .naranja-italic {
    color: var(--naranja);
    font-style: italic;
}

.propuesta-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* La columna del SI es un poco más ancha */
    gap: 100px;
    margin-bottom: 60px;
}

.col-titulo {
    font-family: 'Mont', sans-serif; 
    font-size: 1.8rem; 
    font-weight: 600; 
    font-style: normal;
    text-transform: none;
    margin-top: 0;
    margin-bottom: 45px; /* Aumentado a 45px para que se note el cambio */
    display: block;
}

.propuesta-col ul {
    list-style: none;
}

.propuesta-col li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
}

/* Estilo Columna SI */
.icon-check {
    color: var(--naranja);
    font-weight: bold;
    font-size: 20px;
}

/* Estilo Columna NO */
.col-atenuada {
    color: #A17364; /* Color café suave solicitado */
}

.icon-x {
    color: #A17364; 
    font-size: 20px;
}

/* Footer de la sección */
.propuesta-footer {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.btn-propuesta {
    background-color: var(--naranja);
    color: var(--blanco);
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    transition: transform 0.2s, opacity 0.3s;
}

.btn-propuesta:hover {
    opacity: 0.9;
    transform: scale(1.03);
}

.cupos {
    font-size: 14px;
    opacity: 0.8;
}
/* =====================
   SECCIÓN ACOMPAÑAMOS
===================== */
.acompanamos-section {
    background-color: var(--beige);
    padding: 80px 0;
    text-align: center;
}

.acompanamos-container {
    padding-left: calc(17.5vw + 40px);
    padding-right: calc(17.5vw + 40px);
}

.acompanamos-titulo {
    font-family: 'DMSerif', serif;
    font-size: 52px;
    color: var(--marron);
    margin-bottom: 60px;
    font-weight: normal;
}

.acompanamos-titulo .naranja-italic {
    color: var(--naranja);
    font-style: italic;
}

/* Cuadrícula de 2x2 */
.acompanamos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.acompanamos-card {
    background-color: transparent;
    border: 1px solid rgba(60, 34, 25, 0.2); /* Borde finito color marrón */
    border-radius: 30px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.acompanamos-icono {
    width: 80px;
    height: auto;
    margin-bottom: 25px;
}

.acompanamos-card p {
    font-family: 'Mont', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--marron);
    max-width: 280px;
}

.naranja-italic-small {
    color: var(--naranja);
    font-style: italic;
    font-family: 'DMSerif', serif;
    font-size: 18px;
}

/* Barra inferior blanca */
.acompanamos-bar {
    background-color: var(--blanco);
    border: 1px solid rgba(60, 34, 25, 0.1);
    border-radius: 15px;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bar-item {
    font-family: 'Mont', sans-serif;
    font-size: 14px;
    color: var(--marron);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.bar-item .check {
    color: var(--naranja);
    font-weight: bold;
}
/* =====================
   SECCIÓN EJES (CONTENIDO)
===================== */
.ejes-section {
    background-color: #F7EFE6; /* Un beige un poquito más oscuro para que resalte la tarjeta */
    padding: 100px 0;
}

.ejes-container {
    padding-left: calc(17.5vw + 40px);
    padding-right: calc(17.5vw + 40px);
}

.ejes-main-titulo {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 24px;
    color: var(--marron);
    text-align: center;
    margin-bottom: 40px;
}

.ejes-card-blanca {
    background-color: var(--blanco);
    border-radius: 40px;
    padding: 80px 100px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.03);
}

.eje-bloque {
    margin-bottom: 60px;
}

.eje-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.eje-titulo {
    font-family: 'DMSerif', serif;
    font-size: 42px;
    line-height: 1.1;
    color: var(--marron);
    max-width: 600px;
    margin-bottom: 20px;
}

.eje-subtitulo {
    font-family: 'Mont', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--naranja);
    line-height: 1.4;
}

/* Badge del costado */
.eje-badge {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.badge-naranja {
    background-color: var(--naranja);
    color: var(--blanco);
    padding: 6px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
}

.badge-texto {
    font-size: 11px;
    color: #A17364;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Lista de ítems */
.eje-lista {
    list-style: none;
    margin-bottom: 40px;
}

.eje-lista li {
    font-family: 'Mont', sans-serif;
    font-size: 15px;
    color: var(--marron);
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    line-height: 1.5;
}

/* Cita y divisor */
.eje-cita {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--naranja);
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
}

.eje-divisor {
    border: none;
    border-top: 1px solid rgba(60, 34, 25, 0.1);
    margin-top: 60px;
}

.no-border .eje-divisor { display: none; }
/* =====================
   SECCIÓN COORDINACIÓN
===================== */
.coordinacion-section {
    background-color: var(--beige);
    padding: 80px 0 0 0; /* Sin padding abajo para que el banner se acerque */
}

.coordinacion-container {
    padding-left: calc(17.5vw + 40px);
    padding-right: calc(17.5vw + 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seccion-tag {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 24px;
    color: var(--marron);
    margin-bottom: 40px;
}

/* LA TARJETA BLANCA */
.lili-card {
    background-color: var(--blanco);
    border-radius: 50px;
    overflow: hidden;
    display: block;
    max-width: 1100px;
    margin: 0 auto -100px auto; /* El -100px hace que la tarjeta pise al banner */
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}

.lili-card-cuerpo {
    display: grid;
    grid-template-columns: 1.6fr 1fr; /* El texto ahora es mucho más ancho que la foto */
    align-items: stretch;
}

.lili-textos {
    padding: 50px 70px; /* Bajamos de 80px a 50px para acortar la altura */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.lili-titulo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.icono-cert {
    width: 38px;
    height: auto;
}

.lili-soy {
    font-family: 'DMSerif', serif;
    font-size: 34px;
    color: var(--marron);
}

.lili-textos p {
    font-family: 'Mont', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 16px;
    color: var(--marron);
}

.lili-textos strong {
    font-weight: 700;
}

/* FOTO DE LILI */
.lili-foto img {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
}

/* FOOTER NARANJA DE LA TARJETA */

  /* Botón de Psicoterapia Individual con Degradado */
.btn-psicoterapia {
    display: inline-block;
    background: linear-gradient(135deg, #ED6CAF, #5813AD); /* Aquí está la magia del degradado diagonal */
    color: #FFFFFF;
    font-family: 'Mont', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 16px 35px;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

/* Efecto al pasar el mouse */
.btn-psicoterapia:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(88, 19, 173, 0.4); /* Le agregué una sombrita morada para que se vea más premium */
}

/* BANNER DE LUZ (EL OSCURO CON FOTO) */
.banner-luz {
    background-image: linear-gradient(rgba(60, 34, 25, 0.7), rgba(60, 34, 25, 0.7)), url('banner2.png');
    background-size: cover;
    background-position: center;
    padding: 220px 0 120px 0; /* Aumentamos el padding superior para compensar el pisado */
    text-align: center;
    color: var(--blanco);
}

.tag-blanco {
    font-family: 'Mont', sans-serif;
    font-size: 13px;
    letter-spacing: 4px;
    color: #F38660;
    opacity: 1;
    margin-bottom: 22px;
    font-weight: 700;
}

.titulo-luz {
    font-family: 'DMSerif', serif;
    font-size: 68px;
    margin-bottom: 6px;
    color: #FFF8F1;
    line-height: 1.05;
}

.subtitulo-luz {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 30px;
    color: #FFF8F1;
    opacity: 1;
    line-height: 1.1;
}
.naranja-italic-banner {
    color: #F38660;
    font-style: italic;
}
/* =====================
   BANNER LUZ ACTUALIZADO
===================== */
.banner-luz {
    background-image: linear-gradient(rgba(60, 34, 25, 0.75), rgba(60, 34, 25, 0.75)), url('banner2.png');
    background-size: cover;
    background-position: center;
    padding: 180px 0 140px 0;
    text-align: center;
    color: var(--blanco);
}

.banner-luz-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px;
}

.titulo-luz {
    font-family: 'DMSerif', serif;
    font-size: 62px;
    line-height: 1.05;
    margin-bottom: 30px;
    color: #FFF8F1;
}

.banner-texto {
    font-family: 'Mont', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 50px;
    color: #F5EDE4;
}

.btn-inscribite {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--naranja);
    color: white;
    font-family: 'Mont', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 18px 52px;
    border-radius: 50px;
    margin-bottom: 40px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-inscribite:hover {
    transform: scale(1.05);
    background-color: #e06a4a;
}

.cupos-btn {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.red-texto {
    font-family: 'Mont', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #F5EDE4;
} /* <-- ¡Esta llave te faltaba en tu código! */

.red-texto strong {
    color: var(--naranja);
}

/* =====================
   FOOTER (Ajustado al diseño original)
===================== */
.footer {
    background-color: #2C1C16; /* Fondo marrón oscuro */
    color: #F5EDE4; /* Texto claro */
    padding: 80px 0 80px 0;
    font-family: 'Mont', sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 80px; /* Separación entre columnas */
    max-width: 900px; /* Ancho máximo para centrar el contenido */
    margin: 0 auto; /* Esto centra el bloque en la pantalla */
    padding: 0 40px;
}

/* Títulos del footer */
.footer-col h4, .redes-titulo {
    font-family: 'Mont', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    margin-bottom: 2px; /* Reduje el espacio aquí */
    font-weight: 700;
}

.footer-col p {
    font-family: 'Mont', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

.footer-sub {
    margin-bottom: 12px; /* Reduje el espacio aquí */
}

/* --- Formulario --- */
.footer-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 420px; /* Hice la caja más ancha (antes 320px) */
    width: 100%;
}

#footerEmail {
    width: 100%;
    padding: 14px 18px; /* Hice la cajita un poquito más alta */
    border: none;
    border-radius: 6px; /* Bordes un poco más rectos, como en el diseño */
    font-size: 14px;
    background-color: #FFFFFF;
    color: #333333;
    font-family: 'Mont', sans-serif;
}

#footerEmail::placeholder {
    color: #A98A75;
}

.btn-enviar {
    background-color: #F38660; /* Botón naranja */
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    width: max-content; /* Hace que el botón sea pequeño, del tamaño del texto */
}

.btn-enviar:hover {
    background-color: #e06a4a; /* Naranja más oscuro al pasar el mouse */
    transform: translateY(-2px);
}

/* --- Redes Sociales --- */
.redes-titulo {
    margin-top: 40px; /* Espacio por encima de la palabra "Redes" */
}

.redes-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-start; /* Alineados a la izquierda */
}

/* Círculos naranjas para los iconos */
.redes-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background-color: #F38660; /* Fondo naranja */
    border-radius: 50%; /* Esto hace que sea un círculo perfecto */
    transition: transform 0.3s ease;
    text-decoration: none;
}

/* Tamaño de las imágenes y color */
.redes-icons img {
    width: 20px; 
    height: 20px;
    object-fit: contain;
    /* Este filtro es magia: toma cualquier imagen blanca/clara y la vuelve del color marrón del fondo (#2C1C16) */
    filter: brightness(0) invert(13%) sepia(16%) saturate(1915%) hue-rotate(338deg) brightness(91%) contrast(93%);
}

.redes-icons a:hover {
    transform: scale(1.1); /* Efecto al pasar el mouse */
}
/* Estilo especial para Testimonios en el menú */
.nav-links .nav-resaltado {
    color: var(--naranja) !important; /* Pinta el texto de tu naranja exacto */
    font-weight: bold !important; /* Lo pone en negrita */
}
/* =====================
   BOTÓN "QUIERO INSCRIBIRME" (Centrado)
===================== */
.btn-centro-wrapper {
    display: flex; /* Esto nos permite alinear las líneas y el botón */
    align-items: center; /* Centra las líneas justo a la mitad del botón */
    justify-content: center;
    margin: 50px 0; 
    grid-column: 1 / -1;
    gap: 25px; /* Este es el aire/espacio que separa la línea del botón */
}

/* La magia que crea la línea izquierda y derecha */
.btn-centro-wrapper::before,
.btn-centro-wrapper::after {
    content: ""; /* Crea un elemento invisible */
    flex-grow: 1; /* Hace que la línea se estire hasta los bordes */
    height: 1.5px; /* Grosor de la línea */
    background-color: #2C1C16; /* Tu color marrón oscuro */
    opacity: 0.9; /* Lo hace penitas suave para que quede elegante */
}

.btn-primario {
    display: inline-block;
    background-color: var(--naranja);
    color: #FFFFFF;
    font-family: 'Mont', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 45px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap; /* Evita que el texto del botón se parta en dos renglones */
}

.btn-primario:hover {
    transform: scale(1.05);
    background-color: #e06a4a;
}
/* Espacio amplio para que el botón respire (UX) */
.espacio-extra {
    margin-top: 80px; /* Mucho aire por arriba para separarlo de la barra blanca */
    margin-bottom: 20px; /* Un poco de aire por abajo */
}
/* =====================
   BOTÓN FLOTANTE DE WHATSAPP
===================== */

/* Contenedor principal: se queda fijo en la esquina inferior derecha */
.whatsapp-flotante {
    position: fixed; /* Esto lo hace "pegajoso", siempre visible */
    bottom: 30px; /* Distancia desde abajo */
    right: 30px; /* Distancia desde la derecha */
    display: flex;
    align-items: center;
    gap: 12px; /* Espacio entre el botón verde y la foto */
    z-index: 9999; /* Esto asegura que siempre esté POR ENCIMA de todo */
}

/* El botón verde con el texto y el ícono */
.whatsapp-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #25D366; /* Tu verde de WhatsApp */
    color: #FFFFFF;
    font-family: 'Mont', sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 16px 28px;
    border-radius: 50px; /* Forma de pastilla redondeada */
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4); /* Sombra verde suave */
    transition: all 0.3s ease;
}

.whatsapp-boton:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55); /* Sombra más fuerte al pasar mouse */
}

/* Ícono de WhatsApp (el logo blanco) */
.whatsapp-icono {
    width: 26px;
    height: 26px;
}

/* ---- Foto de Lili (Avatar circular) ---- */
.whatsapp-avatar {
    position: relative; /* Necesario para posicionar el puntito verde */
    width: 55px;
    height: 55px;
    flex-shrink: 0; /* Evita que se achique */
}

.whatsapp-avatar img {
    width: 55px;
    height: 55px;
    border-radius: 50%; /* Hace la foto circular */
    object-fit: cover; /* Recorta la foto para que se vea bien */
    border: 3px solid #1a5c57; /* Borde verde oscuro como en tu diseño */
}

/* Puntito verde de "en línea" */
.avatar-online {
    position: absolute; /* Lo posiciona relativo a la foto */
    bottom: 2px; /* Pegado abajo */
    right: 2px; /* Pegado a la derecha */
    width: 14px;
    height: 14px;
    background-color: #25D366; /* Verde WhatsApp */
    border-radius: 50%; /* Lo hace circular */
    border: 2px solid #FFFFFF; /* Bordecito blanco para que resalte */
}

/* ---- Animación sutil de entrada ---- */
@keyframes rebote-suave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.whatsapp-flotante {
    animation: rebote-suave 3s ease-in-out infinite; /* Rebota suavecito cada 3 segundos */
}
/* =====================
   BOTÓN TESTIMONIOS (Ghost Button)
===================== */
.btn-testimonios-wrapper {
    text-align: center; /* Centra el botón */
    margin-top: 60px; /* Le da el espacio de respiro respecto a la tarjeta blanca */
    margin-bottom: 20px;
}

.btn-outline-naranja {
    display: inline-block;
    background-color: transparent; /* Fondo transparente */
    color: var(--naranja); /* Letras color naranja */
    border: 1.5px solid var(--naranja); /* Borde naranja */
    font-family: 'Mont', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px; /* Separa apenitas las letras para que se lea mejor en mayúscula */
    padding: 16px 45px;
    border-radius: 50px; /* Bordes redondeados */
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse */
.btn-outline-naranja:hover {
    background-color: var(--naranja); /* Se rellena de naranja */
    color: #FFFFFF; /* Las letras se vuelven blancas */
    transform: translateY(-3px); /* Se eleva un poquito (efecto UX) */
}
/* Hacer la segunda línea del título más pequeña */
.propuesta-header .texto-chico {
    font-size: 0.75em; /* Esto significa que será un 25% más chica que la línea de arriba */
    display: inline-block;
    margin-top: 8px; /* Le da un poquitito de aire para que no choque con la de arriba */
}
.texto-chico {
    font-weight: normal; /* Esto quita la negrita */
    font-size: 0.8em;    /* Opcional: ajusta el tamaño si lo ves muy grande */
    display: block;      /* Opcional: ayuda a que se comporte bien como segunda línea */
    font-style: italic
}
.serif-banner {
    font-family: 'DMSerif', serif; /* Usamos la fuente Serif de tus títulos */
    font-size: 32px;               /* Ajusta el tamaño para que resalte más que el texto de arriba */
    font-style: italic;            /* Opcional: queda muy bien en Serif para dar énfasis */
    display: block;                /* Asegura que respete el espacio de bloque */
    margin-top: 10px;              /* Un pequeño ajuste de espacio extra */
    color: var(--beige);           /* Mantiene el color o puedes usar var(--naranja) si quieres que resalte más */
}
/* =========================================
   PÁGINA DE INSCRIPCIÓN (CHECKOUT)
   ========================================= */

.bg-inscripcion {
    background-color: #fcfaf8; /* Un beige muy clarito para el fondo */
    font-family: 'Mont', sans-serif;
    color: var(--marron);
    margin: 0;
}

.checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Botón Volver */
.top-nav { margin-bottom: 30px; }
.btn-volver {
    text-decoration: none;
    color: var(--marron);
    font-size: 14px;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 20px;
    transition: 0.3s;
}
.btn-volver:hover { background: #eee; }

/* Grid Principal */
.checkout-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr; /* 70% - 30% aprox */
    gap: 50px;
    align-items: start;
}

/* Encabezado */
.checkout-header { margin-bottom: 40px; }
.titulo-serif {
    font-family: 'DMSerif', serif;
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 15px;
}
.subtitulo-mont { font-size: 16px; opacity: 0.8; line-height: 1.5; }

/* Bloques de Formulario */
.form-bloque {
    background: white;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.form-seccion-titulo { font-size: 20px; margin-bottom: 20px; font-weight: 700; }

/* Inputs */
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.input-group {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 15px;
    background: #f9f9f9;
}
.input-group.full-width { margin-bottom: 20px; }
.input-group input {
    border: none;
    background: transparent;
    width: 100%;
    margin-left: 10px;
    outline: none;
    font-family: 'Mont', sans-serif;
}

/* Tarjetas de Pago */
.pago-opciones { display: flex; flex-direction: column; gap: 15px; }
.pago-card {
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: 0.3s;
    position: relative;
}
.pago-card:hover { border-color: var(--naranja); }
.pago-card input[type="radio"] { margin-top: 5px; accent-color: var(--naranja); }

/* Estado seleccionado de la tarjeta */
.pago-card.selected {
    border-color: var(--naranja);
    background-color: #fff9f7;
}

.pago-header { display: flex; justify-content: space-between; width: 100%; font-weight: 700; font-size: 18px; }
.pago-detalles { margin: 5px 0; display: flex; gap: 10px; align-items: center; }
.pago-descuento { color: var(--naranja); font-size: 14px; font-weight: 600; }
.pago-tag { background: #ffece5; color: var(--naranja); font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.pago-nota { font-size: 13px; opacity: 0.6; margin: 0; }

/* Botón Mercado Pago */
.btn-mercadopago {
    background-color: #f28d6c; /* El naranja coral del diseño */
    color: white;
    width: 100%;
    border: none;
    padding: 20px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
}
.btn-mercadopago:hover { opacity: 0.9; transform: translateY(-2px); }
.pago-seguro-footer { text-align: center; font-size: 13px; opacity: 0.5; margin-top: 15px; }

/* =========================================
   SIDEBAR (RESUMEN)
   ========================================= */
.resumen-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    position: sticky;
    top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.resumen-titulo { font-size: 20px; margin-bottom: 25px; }
.resumen-producto { display: flex; gap: 15px; margin-bottom: 25px; }
.resumen-img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; }
.resumen-producto-info h4 { font-size: 14px; margin: 0 0 5px 0; line-height: 1.3; }
.tag-online { color: var(--naranja); font-size: 12px; font-weight: 600; }

.resumen-lista { list-style: none; padding: 0; margin-bottom: 25px; }
.resumen-lista li { font-size: 14px; margin-bottom: 12px; display: flex; gap: 10px; }
.check-circulo { color: #f28d6c; font-weight: bold; }

.resumen-divisor { border-top: 1px solid #eee; margin: 20px 0; }
.label { font-size: 13px; opacity: 0.6; margin-bottom: 5px; }
.total-monto { font-size: 32px; font-weight: 700; margin: 0; }

.resumen-alerta {
    background: #fff9f7;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    gap: 15px;
    margin-top: 25px;
}
.resumen-alerta p { font-size: 12px; margin: 5px 0 0 0; line-height: 1.4; opacity: 0.8; }

/* =========================================
   FOOTER INSCRIPCIÓN
   ========================================= */
.footer-inscripcion {
    background-color: var(--marron);
    color: white;
    padding: 80px 20px;
    margin-top: 80px;
    text-align: center;
}
.footer-frase { font-family: 'DMSerif', serif; font-size: 32px; margin-bottom: 60px; font-weight: 400; }
.footer-beneficios-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}
.beneficio-item { display: flex; gap: 15px; }
.beneficio-item h4 { margin: 0 0 5px 0; font-size: 16px; }
.beneficio-item p { margin: 0; font-size: 13px; opacity: 0.7; }
.icon-sec { font-size: 24px; }
.copyright { margin-top: 60px; font-size: 12px; opacity: 0.4; }

/* RESPONSIVE */
@media (max-width: 900px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .input-grid { grid-template-columns: 1fr; }
    .footer-beneficios-grid { grid-template-columns: 1fr 1fr; }
}
/* Corregimos el contenedor para que crezca según el contenido */
.resumen-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    position: sticky;
    top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: auto; /* Asegura que no tenga alto fijo */
    display: flex;
    flex-direction: column;
}

/* Línea divisoria clara */
.resumen-divisor {
    border-top: 1px solid #eee;
    margin: 25px 0;
    width: 100%;
}

/* Estilos de la sección de dudas */
.resumen-soporte {
    text-align: left;
}

.soporte-titulo {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--marron);
}

.soporte-sub {
    font-size: 14px;
    opacity: 0.6;
    margin-bottom: 20px;
}

.soporte-links-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.soporte-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--marron);
    font-size: 15px;
    cursor: default; /* El mouse no cambia a mano de click */
    pointer-events: none; /* Desactiva cualquier acción de click por seguridad */
}

.soporte-icon {
    width: 20px; /* Tamaño del icono según tu imagen */
    height: 20px;
    object-fit: contain;
}
.resumen-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    position: sticky;
    top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.soporte-icon {
    width: 20px;
    height: 20px;
    color: var(--naranja); /* Esto le dará el color naranja de tu web */
    flex-shrink: 0; /* Evita que el icono se achique si el texto es largo */
}

.soporte-item:hover .soporte-icon {
    color: var(--marron); /* Cambia de color al pasar el mouse */
}
.resumen-producto {
    display: flex;
    align-items: center; /* Centra el texto verticalmente con la imagen */
    gap: 20px;           /* Más espacio entre imagen y texto */
    margin-bottom: 25px;
}

.resumen-img {
    width: 90px;         /* Un poco más grande para que se aprecie */
    height: 90px;        /* La hacemos cuadrada */
    object-fit: cover;   /* Si la foto no es cuadrada, esto evita que se estire */
    border-radius: 10px; /* Bordes redondeados para que quede profesional */
    background-color: #eee; /* Color de fondo por si la imagen tarda en cargar */
    flex-shrink: 0;      /* Evita que la imagen se achique si el texto es largo */
}
/* =========================================
   ESTILOS PARA EL AULA (aula.html)
   ========================================= */

/* Carga de tus fuentes (Asegúrate de que los nombres de los archivos coincidan) */
@font-face {
    font-family: 'Mont';
    src: url('Mont-Regular.otf') format('opentype');
    font-weight: normal;
}
@font-face {
    font-family: 'Mont';
    src: url('Mont-Bold.otf') format('opentype');
    font-weight: bold;
}
@font-face {
    font-family: 'DMSerif';
    src: url('DMSerifDisplay-Italic.ttf') format('truetype');
    font-style: italic;
}

/* Variables de colores exactos que me diste */
:root {
    --fondo-aula: #FDF6EE;
    --fondo-recuadro: #FDEFE9;
    --naranja-ah: #F58059;
    --whatsapp-verde: #25D366;
    --texto-oscuro: #333333;
}

.aula-body {
    background-color: var(--fondo-aula);
    font-family: 'Mont', sans-serif;
    color: var(--texto-oscuro);
    margin: 0;
    padding: 0;
}

/* Contenedor central para que se vea como en el diseño (tipo móvil/centrado) */
.contenedor-principal {
    max-width: 600px; /* Ancho máximo para que no se estire de más en PC */
    margin: 0 auto;
    padding: 20px;
}

/* HEADER */
.header-aula {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 20px;
}
.logo-header {
    width: 250px; /* Ajusta este tamaño según como veas tu logoAH.png */
}
.btn-tutorias {
    background-color: var(--naranja-ah);
    color: white;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
}

/* BIENVENIDA */
.bienvenida {
    text-align: center;
    margin-bottom: 30px;
    font-size: 15px;
    line-height: 1.6;
}
.texto-naranja {
    color: var(--naranja-ah);
}

/* TARJETA IMPORTANTE (WHATSAPP) */
.tarjeta-importante {
    background-color: var(--fondo-recuadro);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    margin-bottom: 40px;
}
.icono-campana {
    position: absolute;
    top: 20px;
    left: -20px;
    background-color: var(--naranja-ah);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 4px 10px rgba(245, 128, 89, 0.4);
}
.contenido-importante {
    padding-left: 20px; /* Espacio para la campana */
}
.subtitulo-importante {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}
.titulo-importante {
    font-size: 18px;
    margin: 0 0 10px 0;
}
.texto-importante {
    font-size: 13px;
    margin-bottom: 20px;
}
.btn-whatsapp {
    background-color: var(--whatsapp-verde);
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
}
.lista-check {
    list-style: none;
    padding: 0;
    font-size: 13px;
    line-height: 1.8;
}
.lista-check li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.texto-importante-final {
    font-size: 12px;
    color: #555;
    margin-top: 20px;
}

/* EXPLICACIÓN SECCIÓN */
.explicacion-seccion {
    text-align: center;
    margin-bottom: 40px;
}
.titulo-seccion {
    color: var(--naranja-ah);
    margin-bottom: 30px;
    font-size: 16px;
}
.item-explicacion {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
}
.icono-grande {
    font-size: 28px;
    color: var(--texto-oscuro);
}

/* LISTA DE MATERIALES (BOTONES) */
.lista-materiales {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 50px;
}
.boton-tarjeta {
    background-color: white;
    border-radius: 15px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--texto-oscuro);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.2s;
}
.boton-tarjeta:hover {
    transform: translateY(-2px);
}
.izq-tarjeta {
    display: flex;
    align-items: center;
    gap: 15px;
}
.texto-tarjeta {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
.texto-tarjeta span {
    font-weight: normal;
    color: #666;
    font-size: 13px;
}
.icono-cuadro {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.icono-cuadro.pink { background-color: var(--fondo-recuadro); color: var(--naranja-ah); }
.icono-cuadro.circle { border-radius: 50%; border: 1px solid var(--naranja-ah); color: var(--naranja-ah); background-color: transparent; }
.icono-cuadro.white { background-color: transparent; border: 1px solid #eee; }
.flecha {
    color: var(--texto-oscuro);
    font-size: 18px;
}

/* MODULO 1 CONTENEDOR (La caja con PDFs) */
.modulo-contenedor {
    background-color: white;
    border-radius: 15px;
    display: flex;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    overflow: hidden;
}
.etiqueta-lateral {
    background-color: var(--fondo-recuadro);
    width: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    color: var(--naranja-ah);
    font-weight: bold;
    font-size: 12px;
    gap: 5px;
}
.contenido-modulo {
    padding: 20px;
    flex-grow: 1;
}
.titulo-modulo {
    margin: 0 0 20px 0;
    font-size: 18px;
}
.boton-tarjeta.interno {
    box-shadow: none;
    border: 1px solid #f0f0f0;
    margin-bottom: 10px;
    padding: 10px 15px;
}
.boton-tarjeta.interno:last-child {
    margin-bottom: 0;
}
.texto-interno {
    font-size: 13px;
    line-height: 1.4;
}

/* FOOTER */
.footer-aula {
    text-align: center;
    font-size: 13px;
    margin-bottom: 40px;
}
.icono-manos {
    width: 60px;
    margin-bottom: 15px;
}
.con-carino {
    margin-top: 20px;
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 18px;
}
.firma {
    font-family: 'DMSerif', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--naranja-ah);
    margin-top: -5px;
}
/* =========================================
   NUEVOS ESTILOS: VIDEO Y MODULOS BLOQUEADOS
   ========================================= */

/* Estilos para el video de bienvenida */
.video-seccion {
    margin-bottom: 40px;
    border-radius: 15px;
    overflow: hidden; /* Para que las puntas del video queden redondeadas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.video-reproductor {
    width: 100%;
    display: block;
    outline: none;
}

/* Estilos para módulos inhabilitados */
.contenedor-inhabilitado {
    margin-top: 20px;
}
.leyenda-inhabilitado {
    text-align: center;
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin-bottom: 10px;
}
.modulo-contenedor.bloqueado {
    background-color: #fcfcfc;
    border: 1px solid #eaeaea;
    box-shadow: none;
    opacity: 0.7; /* Lo hace ver un poco transparente (apagado) */
}
.etiqueta-lateral.inactivo {
    background-color: #eeeeee;
    color: #999;
}
.boton-tarjeta.interno.bloqueado {
    cursor: not-allowed; /* Muestra el icono de "prohibido" en el mouse */
    pointer-events: none; /* Bloquea cualquier intento de hacer clic */
    background-color: #fafafa;
}
.texto-gris {
    color: #aaa !important;
}
.flecha-gris {
    color: #ccc;
    font-size: 18px;
}
.icono-cuadro.circle.gris {
    border-color: #ccc;
    color: #ccc;
}
/* =========================================
   ESTILOS PANTALLA TUTORÍAS (tutorias.html)
   ========================================= */

/* Contenedor más ancho porque esta pantalla tiene 2 columnas */
.contenedor-amplio {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* HEADER TUTORIAS */
.header-tutorias {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.btn-volver {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--texto-oscuro);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
.btn-mi-cuenta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--texto-oscuro);
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
}

/* BARRA DE PROGRESO */
.barra-progreso {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fondo-recuadro);
    border-radius: 30px;
    padding: 15px 30px;
    margin-bottom: 40px;
    gap: 20px;
    font-size: 13px;
}
.paso {
    display: flex;
    align-items: center;
    gap: 10px;
}
.paso.activo {
    color: var(--naranja-ah);
    font-weight: bold;
}
.paso.inactivo {
    color: #999;
}
.numero-paso {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}
.paso.activo .numero-paso {
    background-color: var(--naranja-ah);
    color: white;
}
.paso.inactivo .numero-paso {
    background-color: #e5e5e5;
    color: #999;
}
.divisor-paso {
    color: #ccc;
}

/* TITULO Y ALERTA HORIZONTAL */
.titulo-principal {
    font-size: 36px;
    margin-bottom: 10px;
}
.texto-cursiva-naranja {
    font-family: 'DMSerif', serif;
    font-style: italic;
    color: var(--naranja-ah);
    font-weight: normal;
}
.subtitulo-tutorias {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 25px;
}
.alerta-cupo.horizontal {
    background-color: var(--fondo-recuadro);
    display: flex;
    align-items: center;
    padding: 20px;
    border-radius: 15px;
    gap: 20px;
    margin-bottom: 40px;
}
.icono-campana-pequena {
    background-color: var(--naranja-ah);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    flex-shrink: 0;
}
.texto-alerta {
    font-size: 13px;
    line-height: 1.5;
}

/* LAYOUT DE 2 COLUMNAS */
.grid-dos-columnas {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}
.tarjeta-blanca {
    background-color: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.mt-20 { margin-top: 20px; }
.mt-50 { margin-top: 50px; }
.mt-10 { margin-top: 10px; }

/* CALENDARIO */
.titulo-tarjeta {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 20px;
}
.navegacion-mes {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 16px;
}
.flecha-mes { cursor: pointer; color: var(--texto-oscuro); }
.grilla-calendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 10px 0;
}
.dia-semana {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}
.dia-numero {
    width: 36px;
    height: 36px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 14px;
    position: relative;
}
.dia-numero.gris { color: #ccc; }
.dia-numero.disponible {
    background-color: var(--fondo-recuadro);
}
.dia-numero.seleccionado {
    background-color: var(--naranja-ah);
    color: white;
    font-weight: bold;
}
.punto {
    width: 4px;
    height: 4px;
    background-color: var(--naranja-ah);
    border-radius: 50%;
    position: absolute;
    bottom: 4px;
}
.punto.blanco { background-color: white; }
.leyenda-calendario {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    font-size: 12px;
    color: #666;
}
.item-leyenda { display: flex; align-items: center; gap: 8px; }
.circulo-leyenda { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #ddd; }
.circulo-leyenda.naranja { border-color: var(--naranja-ah); }
.circulo-leyenda.gris { background-color: #f5f5f5; }

/* HORARIOS */
.texto-explicativo {
    font-size: 13px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}
.grilla-horarios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}
.opcion-horario {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.opcion-horario input[type="radio"] {
    accent-color: var(--naranja-ah); /* Color del circulito de selección */
}
.info-horario { display: flex; flex-direction: column; }
.info-horario strong { font-size: 14px; }
.info-horario .cupos { font-size: 11px; color: #66b070; margin-top: 3px; }
.opcion-horario.seleccionado {
    border-color: var(--naranja-ah);
    background-color: #fff9f6;
}

.btn-continuar {
    background-color: var(--naranja-ah);
    color: white;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* COLUMNA DERECHA (RESUMEN) */
.sticky {
    position: sticky;
    top: 20px;
}
.info-miniatura {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.img-miniatura {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
}
.info-miniatura strong { font-size: 15px; display: block; margin-bottom: 5px; }
.info-miniatura p { font-size: 12px; color: #666; margin: 0; }
.detalles-lista {
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}
.detalle-item { display: flex; align-items: center; gap: 10px; }
.linea-divisora {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}
.subtitulo-resumen { margin: 0 0 10px 0; font-size: 15px; }
.alerta-pequena {
    background-color: var(--fondo-recuadro);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-top: 20px;
}
.icono-alerta-pequena { color: var(--naranja-ah); font-size: 24px; }
.alerta-pequena strong { font-size: 13px; display: block; margin-bottom: 5px; }
.alerta-pequena p { font-size: 12px; margin: 0; line-height: 1.4; color: #555; }

/* SECCIÓN INFERIOR INFO */
.info-inferior {
    background-color: var(--fondo-recuadro);
    border-radius: 20px;
    padding: 40px;
}
.titulo-info-inferior {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 30px;
}
.grilla-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.item-info-inferior {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.icono-naranja { font-size: 28px; color: var(--naranja-ah); }
.item-info-inferior strong { display: block; font-size: 14px; margin-bottom: 5px; }
.item-info-inferior p { font-size: 12px; color: #555; margin: 0; line-height: 1.4; }

/* ADAPTACIÓN PARA CELULARES */
@media (max-width: 768px) {
    .grid-dos-columnas { grid-template-columns: 1fr; }
    .grilla-horarios { grid-template-columns: 1fr; }
    .grilla-info { grid-template-columns: 1fr; gap: 20px; }
    .barra-progreso { flex-direction: column; align-items: flex-start; padding: 20px; }
    .divisor-paso { display: none; }
    .alerta-cupo.horizontal { flex-direction: column; text-align: center; }
}
/* Espacio debajo del subtítulo de pagos */
.form-seccion-sub {
    margin-bottom: 20px;
    display: block;
    font-size: 14px;
    opacity: 0.7;
}
/* Contenedor que separa izquierda de derecha */
.pago-info-wrapper {
    display: flex;
    justify-content: space-between; /* Manda uno a cada punta */
    width: 100%;
    align-items: flex-start;
}

/* Columna de la izquierda (Textos) */
.pago-col-izq {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pago-nombre {
    font-size: 18px;
    font-weight: 700;
}

.pago-descuento {
    color: var(--naranja);
    font-size: 14px;
    font-weight: 600;
}

/* Columna de la derecha (Precio y Tag) */
.pago-col-der {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Alinea el texto y el tag a la derecha */
    gap: 8px;
}

.pago-precio {
    font-size: 25px;
    font-weight: 700;
    color: var(--marron);
}

.pago-tag {
    background: #ffece5;
    color: var(--naranja);
    font-size: 14px; /* Más grande como pediste */
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 6px;
    text-transform: uppercase;
}
.soporte-titulo {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px; /* Espacio entre el título y los iconos */
    color: var(--naranja);
    display: block;
}
/* =========================================
   ESTILOS ESPECÍFICOS REGISTRO / LOGIN
   ========================================= */

/* Centrado del contenedor */
.registro-card-wrapper {
    max-width: 480px; /* Ancho máximo para que sea prolijo */
    margin: 60px auto; /* Centrado horizontal y margen superior */
    text-align: center; /* Centra los textos */
}

/* Encabezado centrado */
.checkout-header.centrado {
    text-align: center;
    margin-bottom: 30px;
}

/* La tarjeta del formulario */
.registro-card {
    padding: 45px; /* Más aire interno */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra más suave y profunda */
    background: white;
}

/* Ajuste de inputs dentro de la tarjeta */
.registro-card .input-group {
    background: #fdfdfd;
    border: 1px solid #ececec;
    margin-bottom: 15px;
}

/* Caja de error */
.error-box {
    background: #fff0f0;
    color: #d93025;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid #ffdada;
}

/* Adaptación para móviles */
@media (max-width: 500px) {
    .registro-card-wrapper {
        margin: 20px auto;
        padding: 0 15px;
    }
    .registro-card {
        padding: 30px 20px;
    }
}
.header-btns { display: flex; gap: 10px; align-items: center; }
.btn-salir {
    background: none;
    border: 1px solid var(--naranja);
    color: var(--naranja);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
}
.btn-salir:hover { background: var(--naranja); color: white; }
/* ============================================================
   AJUSTE PARA MÓVILES (MANTENIENDO EL ORDEN ORIGINAL)
   ============================================================ */

@media (max-width: 768px) {
    
    /* 1. NAVEGACIÓN: Mantenemos el orden pero damos aire */
    .nav-wrapper {
        flex-direction: column;
        height: auto;
        padding: 20px 15px;
        gap: 15px;
    }
    .nav-links {
        flex-wrap: wrap; /* Si no caben, bajan solos sin romperse */
        justify-content: center;
        gap: 15px;
        font-size: 14px;
        padding: 0;
    }
    .nav-btn-container { width: 100%; text-align: center; }

    /* 2. HERO: Mantenemos Izquierda primero y Derecha después */
    .hero-wrapper {
        flex-direction: column; /* Apila uno abajo del otro */
        padding: 40px 20px;
        height: auto;
        text-align: left; /* Mantenemos tu alineación de texto */
    }
    .hero-izq, .hero-der { 
        width: 100%; 
        padding: 0; 
    }
    .hero-titulo { font-size: 34px; line-height: 1.1; }
    .hero-subtag { font-size: 13px; justify-content: flex-start; }
    
    /* La columna derecha aparece DEBAJO de la izquierda, como en el código */
    .hero-der { 
        margin-top: 40px; 
        border-left: none; 
        border-top: 1px solid #ddd; 
        padding-top: 30px; 
    }

    /* 3. SECCIÓN INFO: Título y Manos */
    .info-grid-top {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    /* Mantenemos el orden: Título arriba, Manos abajo */
    .info-titulo-grande { font-size: 30px; }
    .info-icono-wrapper { text-align: left; }
    
    .info-grid-intro { 
        display: flex;
        flex-direction: column;
        gap: 20px; 
    }

    /* 4. PROPUESTA SI/NO: Se apilan manteniendo el orden */
    .propuesta-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* 5. TARJETAS ACOMPAÑAMOS */
    .acompanamos-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .acompanamos-bar {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* 6. EJES DE CONTENIDO: Badge arriba del título para que no apriete */
    .eje-header {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .eje-badge { align-self: flex-start; }
    .ejes-card-blanca { padding: 25px 20px; }

    /* 7. SECCIÓN LILI: Mantenemos Texto a la izquierda (arriba) y Foto a la derecha (abajo) */
    .lili-card-cuerpo {
        display: flex;
        flex-direction: column; /* Esto mantiene el orden del HTML */
        padding: 30px 20px;
        gap: 30px;
    }
    .lili-textos, .lili-foto { 
        width: 100%; 
    }
    .lili-foto img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
        border-radius: 15px;
    }

    /* 8. FOOTER: Apilamos las columnas */
    .footer-container {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px;
    }
    
    /* 9. BOTÓN WHATSAPP: Más discreto para móvil */
    .whatsapp-texto { display: none; } 
    .whatsapp-boton { padding: 10px; border-radius: 50%; }
}