/* =================================================================== */
/*      ESTILOS MAESTROS - GABRIEL DURÉ (FINAL INTEGRADO)              */
/* =================================================================== */

:root {
    /* --- PALETA DE COLORES --- */
    /* Tu color exacto BRONZE / ORO */
    --color-acento: #B9976F; 
    --color-acento-hover: #9e7f5b;

    /* Fondos y Textos */
    --color-fondo-principal: #F9F9F9; 
    --color-blanco-puro: #FFFFFF;
    --color-texto-principal: #555555;
    --color-titulos: #222222;
    
    /* Footer (Más elegante) */
    --color-footer-fondo: #1a1a1a;
    --color-footer-texto: #B9976F; /* Usamos tu dorado aquí */

    /* Tipografía y Estructura */
    --fuente-titulos: 'Playfair Display', serif;
    --fuente-cuerpo: 'Montserrat', sans-serif;
    --ancho-contenedor: 1200px;
    --radio-borde: 20px; /* Tarjetas redondeadas */
    --sombra-suave: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- RESETEO BÁSICO --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; scroll-behavior: smooth; }
body {
    font-family: var(--fuente-cuerpo);
    font-size: 1.55rem;
    line-height: 1.8;
    color: var(--color-texto-principal);
    background-color: var(--color-fondo-principal);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    display: flex; flex-direction: column; min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }
main { flex-grow: 1; }

.contenedor { width: 100%; max-width: var(--ancho-contenedor); margin: 0 auto; padding: 0 2.5rem; }
.seccion { padding: 8rem 0; }

/* --- TIPOGRAFÍA --- */
h1, h2, h3, h4 { 
    font-family: var(--fuente-titulos); 
    color: var(--color-titulos); 
    font-weight: 700; 
    line-height: 1.2; 
    letter-spacing: -0.5px;
}
h2.titulo-seccion { font-size: 3.6rem; text-align: center; margin-bottom: 5rem; }


/* =========================================
   HEADER DEFINITIVO (Horizontal y Legible)
   ========================================= */

.header-final {
    background-color: #ffffff;
    width: 100%;
    border-bottom: 1px solid #f0f0f0; /* Una línea sutil abajo para separar */
}

/* EL CONTENEDOR MÁGICO: Esto evita que se disperse */
.contenedor-limite {
    max-width: 1200px;      /* Ancho máximo estándar de industria */
    margin: 0 auto;         /* Centra el contenido en la pantalla */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;     /* Relleno cómodo */
}

/* 1. LOGO */
.logo img {
    height: 55px;           /* Tamaño equilibrado */
    width: auto;
    display: block;
}

/* 2. MENÚ (Letra más grande) */
.nav-menu ul {
    display: flex;
    gap: 30px;              /* Espacio entre items */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;        /* TAMAÑO AUMENTADO: Se leerá perfecto ahora */
    font-weight: 500;
}

.nav-menu a:hover {
    color: #C19A6B;
}

/* 3. ACCIONES */
.acciones {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* Login Discreto */
.login-texto {
    text-decoration: none;
    color: #666;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Botón Sólido y Visible */
.btn-agendar {
    background-color: #C19A6B;
    color: white;
    padding: 12px 24px;     /* Botón más grande */
    border-radius: 6px;     /* Bordes apenas redondeados (más elegante) */
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    transition: background 0.3s;
}

.btn-agendar:hover {
    background-color: #a07e54;
}

/* RESPONSIVE (Celular) */
@media (max-width: 900px) {
    .contenedor-limite {
        flex-direction: column;
        gap: 20px;
    }
    .nav-menu ul {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* --- HEADER --- */
.sitio-header { 
    background-color: var(--color-blanco-puro); 
    padding: 1.5rem 0; 
    position: sticky; top: 0; z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.03); 
}
.sitio-header .contenedor { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 75px; }

.navegacion-principal { display: flex; gap: 3rem; }
.navegacion-principal a { 
    font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: #888; 
}
.navegacion-principal a:hover, .navegacion-principal a.activo { color: var(--color-acento); }

.header-extras { display: flex; align-items: center; gap: 2rem; }
.iconos-sociales-header a { font-size: 1.4rem; color: #333; }
.botones-header-cta { display: flex; gap: 1rem; }
.boton-header { 
    font-size: 1.1rem; font-weight: 700; padding: 1.1rem 2.2rem; 
    text-transform: uppercase; letter-spacing: 1px; 
    background-color: var(--color-acento); color: white; 
    border-radius: 4px;
}
.boton-header:hover { background-color: var(--color-acento-hover); }
.menu-movil-icono { display: none; } /* Se activa en responsive */

/* --- HOME: PERFIL + CURSO --- */
.presentacion-home-v2 { padding: 8rem 0; background-color: var(--color-blanco-puro); }
.presentacion-home-v2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.foto-perfil-presentacion { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin-bottom: 2rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.presentacion-home-v2__titulo { font-size: 3.8rem; margin-bottom: 2rem; }
.enlace-presentacion { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--color-titulos); border-bottom: 2px solid var(--color-acento); padding-bottom: 5px; }

.curso-slider-contenedor { background-color: #222; border-radius: var(--radio-borde); overflow: hidden; position: relative; min-height: 350px; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.15); color: white; }
.curso-slide__contenido { position: relative; z-index: 2; padding: 3rem; }
.curso-slide__fondo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.boton-curso { display: inline-block; background-color: var(--color-acento); color: white; padding: 1rem 2.5rem; border-radius: 4px; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; margin-top: 2rem; }

/* --- HOME: ARTÍCULOS (Estilo Captura) --- */
.articulos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 3rem; }
.tarjeta-articulo { 
    background-color: var(--color-blanco-puro); 
    border-radius: var(--radio-borde); 
    overflow: hidden; 
    box-shadow: var(--sombra-suave); 
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex; flex-direction: column; height: 100%;
}
.tarjeta-articulo:hover { transform: translateY(-7px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.contenedor-img { width: 100%; aspect-ratio: 3/2; overflow: hidden; }
.tarjeta-articulo__imagen { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tarjeta-articulo:hover .tarjeta-articulo__imagen { transform: scale(1.08); }
.tarjeta-articulo__contenido { padding: 2.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.tarjeta-articulo__titulo { font-size: 2rem; margin-bottom: 1.2rem; line-height: 1.3; }
.tarjeta-articulo__extracto { font-size: 1.35rem; color: #777; margin-bottom: 2rem; }
.enlace-discreto { margin-top: auto; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-acento); }

/* --- PÁGINA SOBRE MÍ (ESTO ESTABA ROTO EN TU CAPTURA) --- */
.sobre-mi-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; margin-bottom: 4rem; }

.foto-sobre-mi-grande { 
    width: 100%; 
    max-width: 480px; /* Limitamos el ancho para que no se vea gigante */
    border-radius: var(--radio-borde); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    object-fit: cover;
    aspect-ratio: 3/4; /* Formato vertical ideal para retrato */
    display: block;
    margin: 0 auto;
}

.titulo-sobre-mi { font-size: 4rem; color: var(--color-titulos); margin-bottom: 1rem; }
.subtitulo-sobre-mi { font-family: var(--fuente-cuerpo); font-size: 1.6rem; color: var(--color-acento); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3rem; }
.texto-lectura p { margin-bottom: 2rem; font-size: 1.6rem; text-align: justify; color: #666; }
.frase-destacada { font-family: var(--fuente-titulos); font-size: 2.4rem; font-style: italic; color: var(--color-titulos); border-left: 4px solid var(--color-acento); padding-left: 2.5rem; margin-top: 4rem; }

/* --- SECCIÓN CREDENCIALES (ICONOS) --- */
.seccion-credenciales { background-color: var(--color-blanco-puro); padding: 8rem 0; }
/* Aquí arreglamos la grilla que se veía vertical */
.credenciales-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 3rem; 
    margin-top: 4rem;
}
.credencial-card { 
    background: #fff;
    text-align: center; 
    padding: 4rem 2.5rem; 
    border: 1px solid #f0f0f0; 
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s ease;
}
.credencial-card:hover { transform: translateY(-5px); border-color: var(--color-acento); }
.icono-credencial { font-size: 3.5rem; color: var(--color-acento); margin-bottom: 2rem; }
.credencial-card h4 { font-size: 1.8rem; margin-bottom: 1.2rem; }

/* --- FOOTER (ARREGLADO) --- */
.sitio-footer { 
    background-color: var(--color-footer-fondo); 
    color: #999; 
    padding: 6rem 0; 
    text-align: center; 
    border-top: 4px solid var(--color-acento); /* Línea dorada arriba para darle vida */
}
.footer-info h3 { 
    color: white; /* Título en blanco */
    font-size: 2.6rem; margin-bottom: 0.5rem; 
}
.footer-info p { color: var(--color-acento); font-size: 1.4rem; margin-bottom: 2.5rem; letter-spacing: 1px; text-transform: uppercase; font-size: 1.1rem;}

.footer-links { margin-bottom: 3rem; }
.footer-links a { color: #ccc; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 15px; }
.footer-links a:hover { color: var(--color-acento); }

.footer-social p { font-size: 1.2rem; color: #666; }

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .navegacion-principal, .header-extras { display: none; }
    .menu-movil-icono { display: block; font-size: 2rem; cursor: pointer; }
    .sobre-mi-grid, .presentacion-home-v2__grid { grid-template-columns: 1fr; text-align: center; }
    .foto-sobre-mi-grande { width: 80%; margin-bottom: 3rem; }
    .texto-lectura p { text-align: left; }
}/* =================================================================== */
/*          NUEVOS ESTILOS - BLOG Y BOTONES (SEGÚN CAPTURAS)           */
/* =================================================================== */

/* 1. Cabecera del Blog (Título centrado arriba) */
.seccion-titulo-blog {
    text-align: center;
    padding: 6rem 0 2rem 0;
    background-color: var(--color-fondo-principal);
}
.seccion-titulo-blog h1 { font-size: 4rem; margin-bottom: 1rem; }
.seccion-titulo-blog p { font-size: 1.6rem; color: #777; max-width: 600px; margin: 0 auto; }

/* 2. Fechas en las Tarjetas (Como en Captura 1) */
.tarjeta-articulo__fecha {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: 1.1rem;
    font-weight: 600;
    color: #999; /* Gris suave */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
}

/* 3. Botón "Ver Todos los Artículos" (Como en Captura 2) */
.contenedor-boton-central {
    text-align: center;
    margin-top: 5rem;
}

.boton-ancho-dorado {
    display: inline-block;
    background-color: var(--color-acento); /* Tu color dorado */
    color: white;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 1.3rem;
    padding: 1.5rem 4rem; /* Más grande y ancho */
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 10px rgba(185, 151, 111, 0.3);
    transition: all 0.3s ease;
}

.boton-ancho-dorado:hover {
    background-color: var(--color-acento-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(185, 151, 111, 0.4);
}/* =================================================================== */
/*          AJUSTES FINALES BLOG (Alineación Perfecta)                 */
/* =================================================================== */

/* Títulos de cabecera centrados */
.seccion-titulo-blog {
    text-align: center;
    padding: 6rem 0 2rem 0;
    background-color: var(--color-fondo-principal);
}
.seccion-titulo-blog h1 { font-size: 4rem; margin-bottom: 1rem; color: var(--color-titulos); }
.seccion-titulo-blog p { font-size: 1.6rem; color: #777; max-width: 600px; margin: 0 auto; }

/* AJUSTE CLAVE: Tarjetas de igual altura */
.articulos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 3.5rem;
    align-items: stretch; /* Esto estira todas las tarjetas al mismo alto */
}

.tarjeta-articulo {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa todo el alto disponible */
}

.tarjeta-articulo a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.tarjeta-articulo__contenido {
    padding: 2.5rem;
    flex-grow: 1; /* Esto empuja el contenido para llenar el espacio */
    display: flex;
    flex-direction: column;
}

.tarjeta-articulo__extracto {
    margin-bottom: 2rem;
    flex-grow: 1; /* Esto asegura que el botón "Leer más" siempre quede abajo */
}

/* Fecha pequeña y elegante */
.tarjeta-articulo__fecha {
    font-size: 1.1rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: block;
}

/* Paginación (Parte inferior) */
.paginacion-blog {
    margin-top: 6rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-family: var(--fuente-cuerpo);
}

.paginacion-blog span, .paginacion-blog a {
    font-size: 1.4rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    text-decoration: none;
}

.pagina-actual {
    color: var(--color-titulos);
    border-bottom: 2px solid var(--color-acento);
}

.pagina-link, .pagina-siguiente {
    color: #999;
    transition: color 0.3s;
}

.pagina-link:hover, .pagina-siguiente:hover {
    color: var(--color-acento);
}
/* =================================================================== */
/*          CORRECCIÓN ESPACIADO HEADER                                */
/* =================================================================== */

/* Separación entre el grupo de iconos y los botones */
.header-extras {
    gap: 3rem !important; /* Más espacio entre redes y botones */
}

/* Separación entre cada icono de red social */
.iconos-sociales-header {
    gap: 1.8rem !important; /* Más aire entre cada icono */
}

/* Aseguramos tamaño visible */
.iconos-sociales-header a {
    font-size: 1.5rem;
    color: #555; /* Color gris oscuro elegante */
    transition: color 0.3s ease;
}

.iconos-sociales-header a:hover {
    color: var(--color-acento); /* Dorado al pasar el mouse */
}/* =================================================================== */
/*      ESTILOS ARTÍCULO PREMIUM (VIDEO MARCO + RECURSOS 2 COL)        */
/* =================================================================== */

/* 1. VIDEO CON MARCO (Estilo Captura 3) */
.articulo-video-marco {
    max-width: 750px; /* Ancho controlado, no pantalla completa */
    margin: 4rem auto; /* Centrado horizontalmente */
    padding: 15px; /* El "borde" blanco interno */
    background-color: #fff; /* Fondo blanco del marco */
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Sombra elegante */
    border-radius: 4px;
}

.articulo-video-marco video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* =================================================================== */
/*      SECCIÓN RECURSOS: ESTRUCTURA Y COLORES DEFINITIVOS             */
/* =================================================================== */

/* 1. ESTRUCTURA GENERAL (2 Columnas) */
.articulo-recursos-adicionales {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 6rem;
    padding-top: 4rem;
    border-top: 1px solid var(--color-borde-sutil);
}

/* Títulos de las columnas (H3) */
.articulo-recursos-adicionales h3 {
    font-family: var(--fuente-titulos);
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--color-titulos);
    display: flex; align-items: center; gap: 1rem;
}
/* Icono grande del título (Marrón/Dorado) */
.articulo-recursos-adicionales h3 i {
    color: var(--color-acento); 
    font-size: 1.8rem;
}

/* 2. ESTILOS DE LISTA (Base para ambas columnas) */
.articulo-recursos-adicionales ul {
    list-style: none; /* Sin puntos por defecto */
    padding-left: 0;
}

.articulo-recursos-adicionales ul li {
    margin-bottom: 1.2rem;
    font-size: 1.45rem;
    color: #666;
    display: flex; align-items: flex-start; gap: 1rem;
}

/* 3. ICONOS DE LA DERECHA (Libros - Mantienen el Marrón) */
/* Esta regla solo afecta a la columna derecha de lecturas */
.lecturas-recursos-recomendados ul li i {
    color: var(--color-acento); 
    margin-top: 5px;
    min-width: 20px;
}

/* 4. ICONOS DE LA IZQUIERDA (Ayuda - Colores Específicos) */

/* Títulos de Instituciones (Ej: Línea Nacional) */
.titulo-institucion {
    font-weight: 700;
    color: #333;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 5px;
}
.titulo-institucion i {
    color: var(--color-acento); /* Icono de la institución en dorado */
}

/* Contenedor de los números */
.datos-contacto {
    margin-left: 25px; /* Sangría para los números */
    font-size: 0.95em;
}

.tabla-contacto {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 5px;
}

/* --- AQUI ESTAN LOS COLORES QUE NO TE TOMABA --- */
/* Usamos !important para asegurar que nada lo sobrescriba */

/* Teléfonos y Camión (MAGENTA / ROSA) */
.icono-telefono-antiguo,
.icono-camion {
    color: #d63384 !important; 
    font-size: 1.2rem;
}

.icono-telefono-antiguo {
    transform: rotate(90deg); /* Teléfono acostado */
}

/* Mundo (CELESTE) */
.icono-mundo-celeste {
    color: #3498db !important; 
    font-size: 1.3rem;
}

/* Enlace Web (Celeste y subrayado) */
.enlace-web-ayuda {
    color: #3498db !important;
    text-decoration: underline;
}

/* 5. RESPONSIVE (Celular) */
@media (max-width: 768px) {
    .articulo-recursos-adicionales {
        grid-template-columns: 1fr; /* Una sola columna */
        gap: 3rem;
    }
    .articulo-imagen-intermedia {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 2rem 0;
    }
}/* =================================================================== */
/*      CORRECCIÓN FINAL: TAMAÑO IMAGEN CEREBRO                        */
/* =================================================================== */

.articulo-imagen-intermedia {
    float: right;           /* La manda a la derecha */
    width: 35%;             /* Ocupa un porcentaje chico */
    max-width: 220px;       /* TAMAÑO MÁXIMO FIJO (Esto la achica) */
    margin-left: 4rem;      /* Espacio para que el texto no se pegue */
    margin-bottom: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Para que en celular se vea grande y centrada de nuevo */
@media (max-width: 768px) {
    .articulo-imagen-intermedia {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 2rem 0;
        margin-left: 0;
    }
}/* 1. Video COMPACTO (Tipo Postal) */
.articulo-video-marco {
    max-width: 500px; /* Antes era 680px. Esto lo hace más contenido */
    margin: 2rem auto; /* Menos espacio arriba y abajo (antes era 3rem) */
    padding: 8px; /* Marco un poquito más fino */
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Sombra un poco más suave */
    border-radius: 4px;
}
/* =================================================================== */
/*          ESTILOS PÁGINA CONTACTO (FORMULARIO PREMIUM)               */
/* =================================================================== */

.seccion-contacto {
    padding-top: 4rem;
    padding-bottom: 8rem;
}

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Formulario un poco más ancho */
    gap: 6rem;
    align-items: start;
}

/* Info Izquierda */
.contacto-info h3 { font-size: 2.4rem; margin-bottom: 2rem; }
.contacto-info p { margin-bottom: 3rem; color: #666; }

.info-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    color: var(--color-titulos);
}
.info-item i {
    color: var(--color-acento); /* Dorado */
    font-size: 1.8rem;
    width: 25px;
    text-align: center;
}

.redes-contacto { margin-top: 4rem; border-top: 1px solid #eee; padding-top: 2rem; }
.redes-contacto h4 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }

/* Formulario Derecha */
.contacto-formulario {
    background-color: white;
    padding: 4rem;
    border-radius: var(--radio-borde);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05); /* Sombra suave */
}

.campo { margin-bottom: 2.5rem; }

.campo label {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    color: var(--color-titulos);
}

.campo input, .campo textarea {
    width: 100%;
    padding: 1.5rem;
    border: 1px solid #eee;
    background-color: #fafafa; /* Fondo muy suave */
    border-radius: 6px;
    font-family: var(--fuente-cuerpo);
    font-size: 1.4rem;
    transition: all 0.3s ease;
}

/* Efecto al escribir (Línea dorada) */
.campo input:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(185, 151, 111, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .contacto-grid { grid-template-columns: 1fr; gap: 4rem; }
    .contacto-formulario { padding: 2.5rem; }
}
/* =================================================================== */
/*      CORRECCIÓN FINAL: REDES EN PÁGINA DE CONTACTO                  */
/* =================================================================== */

/* Estilo para los iconos sociales de la columna izquierda en Contacto */
.redes-contacto .iconos-sociales-header {
    display: flex;
    gap: 1.5rem; /* Espacio entre iconos */
    margin-top: 1rem;
}

.redes-contacto .iconos-sociales-header a {
    font-size: 1.8rem; /* Más grandes */
    color: #555;       /* Color base gris */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;       /* Círculo contenedor */
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ddd; /* Borde suave */
}

.redes-contacto .iconos-sociales-header a:hover {
    color: white;
    background-color: var(--color-acento); /* Fondo dorado al pasar mouse */
    border-color: var(--color-acento);
    transform: translateY(-3px);
}/* =================================================================== */
/*      CORRECCIÓN ESPACIADO: CTA FINAL (Sobre Mí)                     */
/* =================================================================== */

.seccion-cta-simple {
    text-align: center;
    padding-top: 8rem;    /* Espacio arriba (separar de los iconos) */
    padding-bottom: 10rem; /* Espacio abajo (separar del footer negro) */
    background-color: var(--color-fondo-principal);
}

.seccion-cta-simple h2 {
    margin-bottom: 1.5rem;
    font-size: 3rem;
}

.seccion-cta-simple p {
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}/* =================================================================== */
/*      ESTILOS SEO: FECHA Y ETIQUETAS (Para todos los artículos)      */
/* =================================================================== */

/* 1. FECHA (Arriba del título) */
.articulo-fecha-cabecera {
    display: block;
    font-family: var(--fuente-cuerpo);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-acento); /* Tu color dorado/marrón */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

/* 2. CONTENEDOR DE ETIQUETAS (Abajo del todo) */
.articulo-footer-seo {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.lista-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0.5rem;
}

/* Estilo "Pastilla" para las etiquetas (Muy bueno para UX) */
.etiqueta-pill {
    background-color: #f4f4f4;
    color: #666;
    font-size: 1.1rem;
    padding: 0.5rem 1.2rem;
    border-radius: 20px; /* Redondeado */
    transition: all 0.3s ease;
    font-weight: 500;
}

.etiqueta-pill:hover {
    background-color: var(--color-acento);
    color: white;
    transform: translateY(-2px);
}

.titulo-tags {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-titulos);
    text-transform: uppercase;
    margin-right: 1rem;
}/* ========================================= */
/*      ESTILOS CARRUSEL (Galería)           */
/* ========================================= */

.carrusel-nomofobia {
    margin: 4rem 0;
    position: relative;
}

.carrusel-nomofobia__contenedor {
    display: flex; /* ESTO pone las imágenes en fila */
    overflow-x: auto; /* ESTO permite deslizar */
    scroll-snap-type: x mandatory; /* ESTO hace que se detenga en cada tarjeta */
    gap: 2rem;
    padding: 2rem 1rem;
    
    /* Barra de scroll fina y dorada */
    scrollbar-width: thin;
    scrollbar-color: #B9976F #f0f0f0;
}

/* Tarjeta Individual (Controla el tamaño) */
.carrusel-nomofobia__slide {
    flex: 0 0 300px; /* Ancho FIJO de 300px (evita que sean gigantes) */
    scroll-snap-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin: 0; /* Quita márgenes por defecto del figure */
}

.carrusel-nomofobia__slide:hover {
    transform: translateY(-5px);
}

/* Imagen dentro de la tarjeta */
.carrusel-nomofobia__slide img {
    width: 100%;
    height: 250px; /* Altura fija para que todas sean iguales */
    object-fit: cover; /* Recorta si sobra para no deformar */
    display: block;
    border-bottom: 3px solid #B9976F;
}

/* Texto al pie de la tarjeta */
.carrusel-nomofobia__slide figcaption {
    padding: 1.5rem;
    font-size: 1.3rem;
    color: #555;
    text-align: center;
    line-height: 1.5;
}

.carrusel-nomofobia__slide figcaption strong {
    color: #B9976F;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
}

/* Estilo de la barra para Chrome/Safari */
.carrusel-nomofobia__contenedor::-webkit-scrollbar { height: 8px; }
.carrusel-nomofobia__contenedor::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.carrusel-nomofobia__contenedor::-webkit-scrollbar-thumb { background: #B9976F; border-radius: 4px; }

/* Celular: Tarjetas más anchas */
@media (max-width: 768px) {
    .carrusel-nomofobia__slide {
        flex: 0 0 85%; /* Ocupa casi toda la pantalla en el celu */
    }
}
/* --- ESTILOS FOOTER INFERIOR --- */

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea separadora sutil */
    margin-top: 3rem;
    padding-top: 2rem;
    text-align: center;
}

.footer-bottom .copyright {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 1rem;
}

.footer-bottom .hashtags {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #B9976F; /* Tu color dorado para destacar */
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    word-spacing: 5px; /* Separa un poco los hashtags */
}

.footer-bottom .creditos {
    font-size: 0.9rem;
    opacity: 0.5;
    color: #666;
}

/* Ajuste para móvil para que los hashtags no se amontonen feo */
@media (max-width: 768px) {
    .footer-bottom .hashtags {
        font-size: 1rem;
        line-height: 1.6;
    }
/* --- HERO VIDEO FINAL (Estilo Fondo) --- */

.hero-video-container {
    position: relative;
    width: 100%;
    height: 50vh; /* Altura: Mitad de la pantalla */
    min-height: 500px; /* Mínimo para que no quede muy chico */
    overflow: hidden; /* Corta lo que sobre del video */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 0;
}

/* ESTO ES LO QUE FALTABA: */
.video-fondo {
    position: absolute; /* Lo saca del flujo normal para que sea fondo */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Lo centra exactamente */
    
    /* Estas 4 líneas obligan al video a cubrir todo el hueco */
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* Clave: Evita que se deforme */
    
    z-index: 0; /* Nivel más bajo (Fondo) */
}

.video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(16, 38, 66, 0.4); /* Filtro oscuro para leer el texto */
    z-index: 1; /* Nivel medio */
    pointer-events: none; /* Permite dar clic al video para activar sonido */
}

.hero-content-video {
    position: relative;
    z-index: 2; /* Nivel superior (Texto y botón) */
    width: 100%;
    max-width: 900px;
    padding: 0 20px;
    pointer-events: none; /* Para que no bloquee clics al video si quieres */
}

/* Habilitar clic en el botón y enlaces */
.hero-content-video a {
    pointer-events: auto;
}

/* Tipografías */
.titulo-principal {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.subtitulo-principal {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    text-shadow: 0 2px 5px rgba(0,0,0,0.6);
}

/* --- PAGINACIÓN MODERNA --- */
#paginacion-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4rem;
}

.pagina-link {
    background-color: #fff;
    border: 1px solid #eee;
    color: #555;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Círculos perfectos */
    font-family: var(--fuente-cuerpo);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.pagina-link:hover {
    border-color: var(--color-acento);
    color: var(--color-acento);
    transform: translateY(-2px);
}

.pagina-link.pagina-actual {
    background-color: var(--color-acento);
    color: white;
    border-color: var(--color-acento);
    box-shadow: 0 5px 15px rgba(185, 151, 111, 0.3);
}
/* ========================================= */
/*      ESTILOS SLOT VIDEO (TARJETA)         */
/* ========================================= */

.slot-video-card {
    position: relative;
    /* Tamaño fijo vertical (tipo historia de Instagram) */
    width: 300px; 
    height: 480px; 
    
    /* Estética */
    border-radius: 20px;
    overflow: hidden; /* Corta lo que sobre del video */
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    background: #000;
    margin: 0 auto; /* Centrado horizontal */
    
    /* TRUCO IMPORTANTE: Elimina espacios fantasma abajo */
    font-size: 0; 
}

/* Eliminar borde azul y subrayado de los enlaces */
.slot-video-card a {
    text-decoration: none;
    border: none;
    outline: none;
    display: block;
    width: 100%;
    height: 100%;
}

/* Asegurar que no aparezca borde al hacer clic */
.slot-video-card a:focus, 
.slot-video-card a:active {
    outline: none;
    border: none;
}

/* Estilo común para todos los videos dentro del slide */
.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace zoom para llenar el hueco sin deformar */
    border: none;
    display: block;
}

/* Ajuste del botón flotante "VER CURSO" */
.slot-video-card span {
    font-size: 14px; /* Restauramos el tamaño de letra para el botón */
}
.hero-video-container {
  height: auto;         /* Deja que crezca según su contenido */
  min-height: 0;        /* Quitamos el mínimo de 500px */
  padding-bottom: 3rem; /* Un poco de espacio bajo el hero */
}

/* Overlay más corto y degradado */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%; /* solo los 2/3 superiores, no llega a los artículos */
  background: linear-gradient(
    to bottom,
    rgba(16, 38, 66, 0.35),
    rgba(16, 38, 66, 0)
  );
  z-index: 1;
}
.hero-video-container {
  height: auto;
  min-height: 0;
  padding-bottom: 5rem;  /* un poco más de espacio bajo el hero */
}

/* Puedes borrar por completo este bloque si ya no usas overlay */
.video-overlay {
  display: none;
}
.texto-intro-ayuda { font-size: 1.2rem; margin-bottom: 1.5rem; color: #666; }
.item-institucion { padding: 0.6rem 0; }
.lista-recursos-online li { margin-bottom: 0.4rem; }
.nota-recurso { font-size: 0.85rem; color: #777; }
.nota-disclaimer { font-size: 0.85rem; color: #888; margin-top: 1rem; }

/* --- Estilos para la sección de Ayuda y Recursos --- */

/* Contenedor Principal (GRID) */
.ayuda-recursos-grid {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 columna */
    gap: 2rem;
    margin-bottom: 2rem;
    background-color: #fcfcfc; /* Fondo muy sutil para diferenciar */
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* En PC/Tablet: 2 columnas iguales */
@media (min-width: 768px) {
    .ayuda-recursos-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start; /* Alinea al inicio, evita estiramientos raros */
    }
}

/* Títulos de las secciones h3 */
.ayuda-recursos-grid h3 {
    font-size: 1.1rem;
    color: #B9976F; /* Tu color dorado/beige */
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    margin-top: 0;
}

/* Listas generales sin puntos feos */
.ayuda-recursos-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- Estilos Columna Ayuda (Izquierda) --- */
.texto-intro-ayuda {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 1rem;
    font-style: italic;
}

.item-institucion {
    margin-bottom: 1.2rem;
    border-bottom: 1px dashed #eee; /* Separador sutil entre países */
    padding-bottom: 0.8rem;
}

.item-institucion:last-child {
    border-bottom: none;
}

.titulo-pais {
    font-weight: 700;
    color: #444;
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.titulo-pais i {
    color: #B9976F;
}

.datos-contacto {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 1.5rem; /* Indentación para jerarquía */
    font-size: 0.95rem;
    color: #555;
}

.datos-contacto i {
    font-size: 0.8rem;
    width: 15px;
    color: #999;
}

.datos-contacto a {
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
}

.datos-contacto a:hover {
    color: #B9976F;
    border-bottom: 1px solid #B9976F;
}

/* --- Estilos Columna Recursos (Derecha) --- */
.lista-simple li {
    margin-bottom: 0.8rem;
}

.lista-simple a {
    color: #444;
    text-decoration: none;
    font-weight: 500;
}

.lista-simple a:hover {
    color: #B9976F;
}

.lista-simple i {
    font-size: 0.8rem;
    color: #ccc;
    margin-left: 5px;
}

.lista-libros li {
    margin-bottom: 0.8rem;
    color: #666;
    font-size: 0.95rem;
    padding-left: 0.5rem;
}

.lista-libros i {
    color: #B9976F;
    margin-right: 8px;
}

/* Disclaimer final */
.nota-disclaimer {
    text-align: center;
    font-size: 0.8rem;
    color: #999;
    margin-top: 1rem;
    font-style: italic;
}/* Estilo para el mensaje sutil de responsabilidad */
.disclaimer-sutil {
    margin-top: 1.5rem;          /* Separación del bloque de USA */
    padding-top: 1rem;           /* Espacio interno arriba */
    border-top: 1px solid #f0f0f0; /* Línea separadora casi invisible */
    font-size: 0.75rem;          /* Letra pequeñita */
    color: #999;                 /* Gris claro para que sea sutil */
    line-height: 1.4;
    font-style: italic;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.disclaimer-sutil i {
    color: #ccc; /* Ícono aún más suave */
    margin-top: 3px;
}
/* Estilo "tipo línea telefónica" para el mensaje de advertencia */
.disclaimer-linea {
    margin-top: 1.5rem;          /* Separación del bloque anterior */
    padding-top: 1rem;           /* Espacio interno */
    border-top: 1px solid #eee;  /* Una línea divisoria muy finita */
    
    display: flex;               /* ESTO LO PONE EN UNA LÍNEA (Lado a lado) */
    align-items: flex-start;     /* Alinea el ícono con la primera línea de texto */
    gap: 10px;                   /* Espacio entre el ícono y el texto */
    
    font-size: 0.8rem;           /* Letra un poco más chica que los teléfonos */
    color: #999;                 /* Gris suave */
    line-height: 1.4;            /* Altura de línea para buena lectura */
    font-style: italic;          /* Cursiva para diferenciarlo */
}

.disclaimer-linea i {
    color: #ccc;                 /* Ícono gris muy pálido */
    font-size: 0.9rem;           /* Tamaño del ícono */
    margin-top: 3px;             /* Pequeño ajuste para que quede centrado con el texto */
}



/* 1. GRILLA DE ARTÍCULOS (Para que se vean de a 3 o 2 según pantalla) */
.articulos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 2. RESPONSIVIDAD DE LA NUEVA SECCIÓN (BIO + TARJETA) 
   Esto hace que en celulares la foto, el texto y la tarjeta 
   se pongan uno debajo del otro y no aplastados. */
@media (max-width: 992px) {
    .presentacion-grid {
        /* Fuerza a ser 1 sola columna en vez de 3 */
        grid-template-columns: 1fr !important; 
        text-align: center;
        gap: 2rem !important;
    }

    /* Centrar la tarjeta en celulares */
    .columna-tarjeta {
        justify-content: center !important;
    }

    /* Ajuste visual para la tarjeta en móviles */
    .card-horizontal {
        max-width: 100% !important;
        height: 250px !important; /* Un poco más baja en celular */
    }
    
    /* Centrar la foto en móviles */
    .columna-foto {
        margin: 0 auto;
    }
}
.hecho-seccion p a, 
.hecho-seccion li a {
    color: #B9976F; /* Tu color dorado de marca */
    text-decoration: none; /* Quitamos el subrayado feo por defecto */
    border-bottom: 1px solid rgba(185, 151, 111, 0.4); /* Una línea muy sutil abajo */
    transition: all 0.3s ease; /* Animación suave */
    font-weight: 600; /* Un poquito más grueso para que se vea */
}

/* Efecto al pasar el mouse por encima */
.hecho-seccion p a:hover, 
.hecho-seccion li a:hover {
    background-color: #B9976F; /* Fondo dorado */
    color: #fff; /* Letra blanca */
    border-bottom-color: transparent;
    padding: 0 3px; /* Un pequeño respiro a los lados */
    border-radius: 3px; /* Bordes suavemente redondeados */

    /* --- ESTILO PARA ENLACES EN EL TEXTO (SEO) --- */
/* Esto aplicará a cualquier enlace dentro del contenido de tus artículos */
.hecho-seccion p a, 
.hecho-seccion li a,
.articulo-individual__contenido p a {
    color: #B9976F; 
    text-decoration: none;
    border-bottom: 1px solid rgba(185, 151, 111, 0.4);
    font-weight: 600;
    transition: all 0.3s ease;
}

.hecho-seccion p a:hover, 
.hecho-seccion li a:hover,
.articulo-individual__contenido p a:hover {
    background-color: #B9976F;
    color: #fff;
    border-bottom-color: transparent;
    padding: 0 3px;
    border-radius: 3px;
}
/* Esto fuerza que "Espacio de Aprendizaje" tenga un ancho máximo y el texto caiga */
.enlace-aprendizaje {
    max-width: 100px; /* Ajusta este número */
    text-align: center;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
}
/* --- BARRA DE CONFIANZA REFINADA (Minimalista) --- */
.badges-pago {
    margin-top: 15px;
    padding-top: 10px;
    /* Quitamos el borde para que no se vea "cargado" */
    /* border-top: 1px solid #eee; */ 
    text-align: center;
}

.texto-confianza {
    font-size: 0.7rem; /* Letra más pequeña y fina */
    color: #999;       /* Gris más suave */
    margin-bottom: 8px;
    font-weight: 400;
}

.iconos-pago {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;         /* Un poco más de espacio entre iconos */
    color: #ccc;       /* Iconos en gris muy claro (elegantes) */
    font-size: 1.1rem; /* Tamaño sutil */
    transition: color 0.3s;
}

/* Al pasar el mouse, que cobren color (detalle pro) */
.producto-card:hover .iconos-pago {
    color: #666;
}

/* Badge de Mercado Pago más sutil */
.mp-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: #009ee3;
    background: transparent; /* Sin fondo para limpiar */
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    /* Solo texto celeste, queda más limpio */
}
/* BOTÓN SUTIL "SABER MÁS" */
.boton-saber-mas {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    background-color: white;
}

.boton-saber-mas:hover {
    border-color: #B9976F;
    color: #B9976F;
    transform: translateX(5px); /* Pequeño movimiento a la derecha */
}
/* BOTÓN "SABER MÁS" (Sutil y elegante) */
.boton-saber-mas {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: white;
    margin-top: auto; /* Empuja el botón al fondo si la tarjeta es larga */
}

.boton-saber-mas:hover {
    border-color: #B9976F;
    color: #B9976F;
    transform: translateX(5px); /* Pequeño movimiento a la derecha */
}/* BOTÓN ELEGANTE (Tipo Vitrina) */
.boton-saber-mas {
    display: inline-block;
    padding: 12px 30px;      /* Un poco más ancho */
    border: 1px solid #ddd;
    border-radius: 50px;
    color: #444;
    text-decoration: none;
    
    /* AQUÍ ESTÁ LA MAGIA PARA QUE NO SE VEA BÁSICO: */
    font-size: 0.75rem;       /* Letra un poco más chica */
    font-weight: 700;         /* Más negrita */
    text-transform: uppercase;/* Mayúsculas */
    letter-spacing: 2px;      /* Espacio entre letras (Elegancia) */
    
    transition: all 0.3s ease;
    background-color: white;
    margin-top: auto;
}

.boton-saber-mas:hover {
    border-color: #B9976F;
    color: #fff;              /* Texto blanco al pasar mouse */
    background-color: #B9976F;/* Fondo dorado al pasar mouse */
    transform: translateY(-3px);
}/* ========================= */
/*   BUY BOX (pro / clear)   */
/* ========================= */

.buy-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 42px 34px;
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.buy-box .buy-kicker{
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: #999;
  margin: 0 0 10px;
}

.buy-box .buy-title{
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin: 0 0 8px;
}

.buy-box .buy-subtitle{
  color: #666;
  margin: 0 0 26px;
}

.buy-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 10px;
  align-items: stretch;
}

.buy-card{
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.buy-card--primary{
  border-color: rgba(185,151,111,0.45);
  box-shadow: 0 10px 25px rgba(185,151,111,0.12);
}

.buy-card h3{
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  margin: 0 0 6px;
}

.buy-card .buy-desc{
  margin: 0 0 14px;
  color: #777;
  font-size: 0.98rem;
}

.buy-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 6px 0 16px;
}

.buy-price .buy-currency{
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.buy-price .buy-amount{
  font-size: 2.35rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}

.buy-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  color: #555;
  font-size: 1rem;
}

.buy-list li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0;
  line-height: 1.45;
}

.buy-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 7px;
  background: rgba(185,151,111,0.95);
  flex: 0 0 auto;
}

/* Botones */
.buy-btn{
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.3s;
  border: 1px solid rgba(185,151,111,0.55);
  color: var(--accent);
  background: #fff;
}

.buy-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* CTA principal (mantenemos tu naranja) */
.buy-btn--hotmart{
  background-color: #ff5a16;
  color: #fff;
  border-color: #ff5a16;
  box-shadow: 0 10px 20px rgba(255, 90, 22, 0.18);
}

.buy-btn--hotmart:hover{
  background-color: #e04b0f;
  border-color: #e04b0f;
}

/* CTA Gold más sobrio */
.buy-btn--gold{
  background: #111;
  color: #fff;
  border-color: #111;
}

.buy-btn--gold:hover{
  background: #000;
  border-color: #000;
}

.buy-note{
  margin-top: 14px;
  color: #777;
  font-size: 0.92rem;
  text-align: left;
}

/* Barra de confianza dentro del card principal */
.buy-card .badges-pago{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  text-align: center;
}

.buy-card .texto-confianza{
  font-size: 0.95rem;
  color: #777;
  margin: 0 0 10px;
}

.buy-card .iconos-pago{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #333;
}

.buy-card .mp-badge{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  border: 1px solid #eee;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Responsive */
@media (max-width: 768px){
  .buy-box{ padding: 34px 18px; }
  .buy-grid{ grid-template-columns: 1fr; }
}
.header-minimalista {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%; /* Más aire a los costados */
    background-color: #fff;
}

.nav-principal ul {
    display: flex;
    gap: 2rem; /* Separación limpia entre links */
    list-style: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Espacio entre el login y el botón */
}

/* El Login sutil */
.login-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333; /* Color oscuro pero no negro */
    text-decoration: none;
    font-size: 0.9rem;
}

/* Botón Principal */
.btn-primario {
    background-color: #C19A6B; /* Tu color marrón/dorado */
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 4px; /* O 30px si prefieres redondeado */
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s;
}
/* Aumentar tamaño base de todo el header */
.nav-principal a {
    font-size: 1.1rem; /* Antes era 0.95rem, esto lo hará más grande */
    font-weight: 600;  /* Letra un poco más gruesa */
}

.btn-primario {
    font-size: 1rem;   /* Botón más grande */
    padding: 12px 25px; /* Botón más gordo */
}