/* COGNILAB - PÁGINA NEWSLETTER - TEMA UNIFICADO */

/* Estilos específicos para la página de newsletter */
.newsletter-hero .title-section {
    margin-top: var(--s8);
}

.newsletter-hero .subtitle {
    color: #ffffff;
}

.newsletter-hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - var(--nh));
    padding: var(--s8) 0 var(--s12);
    display: flex;
    align-items: center;
}

.newsletter-hero::before { display: none; }

.newsletter-hero .container {
    position: relative;
    z-index: 1;
    margin-top: var(--s6); /* empuja ligeramente hacia abajo para centrado visual */
}

/* Tarjeta central con efecto glass */
.tarjeta-newsletter {
    width: 100%;
    max-width: 520px;
    margin: var(--s20) auto;
    padding: var(--s4);
    background:
        linear-gradient(135deg, rgba(59,130,246,0.15), rgba(79,70,229,0.12)),
        linear-gradient(135deg, rgba(168,85,247,0.1), rgba(59,130,246,0.08)),
        rgba(0,0,0,0.4);
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Permite que toda la tarjeta funcione como enlace clickeable */
.tarjeta-newsletter-enlace {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tarjeta-newsletter-enlace:hover,
.tarjeta-newsletter-enlace:focus {
    text-decoration: none;
}

/* Banner alargado y compacto (portada) */
.tarjeta-newsletter-enlace {
    max-width: 1040px; /* alargado en desktop */
    padding: var(--s2) var(--s6); /* compacto vertical, algo más de aire lateral */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
}

.tarjeta-newsletter-enlace .newsletter-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0; /* elimina espacio entre texto y logos */
    text-align: center;
}

.tarjeta-newsletter-enlace .newsletter-copy {
    flex: 1 1 auto;
}

.tarjeta-newsletter-enlace .newsletter-logos {
    flex: 0 0 auto;
}

.tarjeta-newsletter-enlace .subtitle {
    margin: 0;
}

.tarjeta-newsletter-enlace .cta-newsletter {
    margin: 0;
}

.tarjeta-newsletter-enlace .boton-substack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    margin: 0; /* anula margen superior heredado */
}

.tarjeta-newsletter-enlace img.logo-substack {
    width: 56px;
}

.tarjeta-newsletter-enlace img.logo-cognilab {
    width: 180px;
}

/* Más aire alrededor de la sección completa */
#newsletter.section.hero {
    padding: var(--s16) 0;
}

/* Efecto hover simple de color para tarjeta newsletter */
.tarjeta-newsletter:hover {
    border-color: rgba(59,130,246,0.4);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.1);
}

.tarjeta-newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(59,130,246,0.8), rgba(168,85,247,0.8));
    opacity: 0.9;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

/* Contenido de newsletter simplificado */
.newsletter-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.tarjeta-newsletter .title-section {
    margin: 0 0 var(--s4) 0;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
}

.tarjeta-newsletter .subtitle {
    margin: 0;
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Título compacto para el bloque de newsletter en portada */
.title-newsletter {
    margin: 0;
    font-size: 1.25rem;
}

.cta-newsletter { 
    margin-top: 0; /* compacta espacio superior del bloque de logos */
    text-align: center; 
}
.microtexto { display: none; }

.boton-substack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: var(--s4) auto 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-decoration: none;
    position: relative;
}

.boton-substack:hover {
    filter: brightness(1.05);
}

/* Hover de color sobre logos combinados (sin movimiento) */
.boton-substack img.logo-substack,
.boton-substack img.logo-cognilab {
    transition: filter .25s ease, opacity .25s ease;
    will-change: filter;
}

.boton-substack:hover .logo-substack {
    filter: brightness(1.08) saturate(1.06) drop-shadow(0 0 8px rgba(59,130,246,.35));
}

.boton-substack:hover .logo-cognilab {
    filter: brightness(1.08) saturate(1.06) drop-shadow(0 0 10px rgba(59,130,246,.25));
}

.boton-substack i {
    font-size: 1.5rem;
    color: #ffffff;
}

.boton-substack img.logo-substack {
    width: 64px;
    height: auto;
    display: inline-block;
}

.boton-substack img.logo-cognilab {
    width: 200px;
    height: auto;
    display: inline-block;
}

/* insignia-substack eliminada */

.boton-substack .boton-centro {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton-substack .espaciador {
    display: inline-block;
    width: 18px; /* igual al logo substack para centrar visualmente */
}

.contenedor-boton-newsletter {
    text-align: center;
    margin: var(--s12) 0;
}

.newsletter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s6) var(--s8);
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--r5);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, var(--cognilab-pink), var(--cognilab-pink-light));
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(255, 107, 157, 0.3);
}

.newsletter-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);
    background: linear-gradient(135deg, var(--cognilab-pink-dark), var(--cognilab-pink));
}

.newsletter-btn i {
    font-size: 1.5rem;
    color: var(--cognilab-white);
}

/* Efectos de hover adicionales */
.newsletter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--cognilab-purple), var(--cognilab-blue));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.45s ease;
    z-index: -1;
}

.newsletter-btn:hover::before {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-newsletter { padding: var(--s6); max-width: 95%; }
    .newsletter-hero { padding: var(--s6) 0; }
    .boton-substack { padding: 0; }
    .insignia-substack { top: -8px; right: -8px; width: 32px; height: 32px; }
    .insignia-substack img { width: 16px; height: 16px; }
    .tarjeta-newsletter-enlace { padding: var(--s3) var(--s5); max-width: 720px; }
    .tarjeta-newsletter-enlace .newsletter-content { flex-direction: column; text-align: center; gap: var(--s3); }
    .tarjeta-newsletter-enlace .newsletter-copy { width: 100%; }
    .tarjeta-newsletter-enlace .newsletter-logos { width: 100%; }
    .tarjeta-newsletter-enlace .boton-substack { justify-content: center; }
    .newsletter-btn {
        font-size: var(--font-size-base);
        padding: var(--s5) var(--s6);
    }
}

@media (max-width: 480px) {
    .tarjeta-newsletter { padding: var(--s5); max-width: 96%; }
    .newsletter-hero { padding: var(--s5) 0; }
    .boton-substack { padding: 0; }
    .insignia-substack { top: -6px; right: -6px; width: 28px; height: 28px; }
    .insignia-substack img { width: 14px; height: 14px; }
    .newsletter-btn {
        font-size: var(--font-size-sm);
        padding: var(--s4) var(--s5);
        flex-direction: column;
        gap: var(--s2);
    }
    .tarjeta-newsletter-enlace img.logo-substack { width: 48px; }
    .tarjeta-newsletter-enlace img.logo-cognilab { width: 160px; }
}

/* Ajuste de espaciado superior solo para esta página */
.pagina-newsletter .main-content > .section:first-of-type { padding-top: var(--s12); }

/* ========================================
   BANNER DE POMODORO - COGNIFOCUS
   Estilos similares a newsletter
   ======================================== */

.seccion-pomodoro-banner {
    padding: var(--s16) 0;
}

.tarjeta-pomodoro {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--s6) var(--s8);
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tarjeta-pomodoro-enlace {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tarjeta-pomodoro-enlace:hover,
.tarjeta-pomodoro-enlace:focus {
    text-decoration: none;
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.tarjeta-pomodoro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(59, 130, 246, 0.6);
    opacity: 1;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.pomodoro-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--s6);
    position: relative;
    z-index: 2;
}

.pomodoro-banner-copy {
    flex: 1 1 auto;
}

.pomodoro-banner-copy .title-section {
    margin: 0 0 var(--s4) 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
}

.pomodoro-banner-copy .subtitle {
    margin: 0;
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pomodoro-banner-cta {
    flex: 0 0 auto;
    margin-top: var(--s2);
}

.pomodoro-banner-cta .btn {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(20px);
}

.tarjeta-pomodoro-enlace:hover .pomodoro-banner-cta .btn {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-pomodoro {
        padding: var(--s5) var(--s6);
        max-width: 95%;
    }
    
    .pomodoro-banner-content {
        gap: var(--s4);
    }
    
    .pomodoro-banner-copy .title-section {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    
    .pomodoro-banner-copy .subtitle {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .tarjeta-pomodoro {
        padding: var(--s4) var(--s5);
        max-width: 96%;
    }
    
    .pomodoro-banner-content {
        gap: var(--s3);
    }
    
    .pomodoro-banner-copy .title-section {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }
}

/* Banner de CogniTest - Estilo similar pero con color diferente */
.seccion-cuestionario-banner {
    padding: var(--s16) 0;
}

.tarjeta-cuestionario {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--s6) var(--s8);
    background: rgba(255, 107, 157, 0.12);
    border: 1px solid rgba(255, 107, 157, 0.25);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tarjeta-cuestionario-enlace {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tarjeta-cuestionario-enlace:hover,
.tarjeta-cuestionario-enlace:focus {
    text-decoration: none;
    border-color: rgba(255, 107, 157, 0.4);
    background: rgba(255, 107, 157, 0.16);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    transform: translateY(-2px);
}

.tarjeta-cuestionario::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 107, 157, 0.5);
    opacity: 1;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.cuestionario-banner-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--s6);
    position: relative;
    z-index: 2;
}

.cuestionario-banner-copy {
    flex: 1 1 auto;
}

.cuestionario-banner-copy .title-section {
    margin: 0 0 var(--s4) 0;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: #ffffff;
}

.cuestionario-banner-copy .subtitle {
    margin: 0;
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.9);
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cuestionario-banner-cta {
    flex: 0 0 auto;
    margin-top: var(--s2);
}

.cuestionario-banner-cta .btn {
    display: inline-block;
    background: rgba(255, 107, 157, 0.15);
    border: 1px solid rgba(255, 107, 157, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(20px);
}

.tarjeta-cuestionario-enlace:hover .cuestionario-banner-cta .btn {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    background: rgba(255, 107, 157, 0.22);
    border-color: rgba(255, 107, 157, 0.45);
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-cuestionario {
        padding: var(--s5) var(--s6);
        max-width: 95%;
    }
    
    .cuestionario-banner-content {
        gap: var(--s4);
    }
    
    .cuestionario-banner-copy .title-section {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    
    .cuestionario-banner-copy .subtitle {
        font-size: var(--font-size-base);
    }
}

@media (max-width: 480px) {
    .tarjeta-cuestionario {
        padding: var(--s4) var(--s5);
        max-width: 96%;
    }
    
    .cuestionario-banner-content {
        gap: var(--s3);
    }
}