/* ==========================================================================
   Template_04.css - Edición Psicología Clásica, Psicoanálisis y Alta Academia
   Paleta: Vino Profundo (#721c24), Gris Perla (#f4f4f6) y Grafito (#1a1a1a)
   ========================================================================== */

:root {
    --primary-burgundy: #721c24;
    --primary-burgundy-hover: #58141a;
    --dark-graphite: #1a1a1a;
    --light-pearl: #f4f4f6;
    --border-editorial: #d1d1d6;
    --text-muted-gray: #6e6e73;
    --transition-deliberate: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reseteo y Base Global de Estilo Editorial --- */
body { 
    font-family: 'Montserrat', sans-serif; 
    overflow-x: hidden; 
    background-color: #ffffff;
    color: var(--dark-graphite);
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Títulos principales con Serif para emular formato de libro/paper */
h1, h2, h3, .title-section-profile {
    font-family: 'Times New Roman', Times, Baskerville, Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: 0px !important;
}

/* Header de Líneas Finas Minimalistas */
header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-editorial);
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}
.nav-link-menu {
    color: var(--dark-graphite);
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
}
.nav-link-menu:hover {
    color: var(--primary-burgundy) !important;
}
.social-icons-header i {
    color: var(--primary-burgundy);
}

/* --- Hero Section - Sobriedad e Historia --- */
.hero-section {
    background: linear-gradient(rgba(26, 26, 26, 0.75), rgba(26, 26, 26, 0.75)), 
                url('https://images.unsplash.com/photo-1457369804613-52c61a468e7d?q=80&w=2070') no-repeat center center/cover;
    height: 75vh;
    display: flex;
    align-items: center;
    color: white;
}

.hero-section h1 {
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.btn-contactanos {
    display: inline-block;
    background: transparent;
    color: white !important;
    padding: 16px 45px;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    border: 1px solid white; /* Botón tipo contorno clásico de lujo */
    transition: var(--transition-deliberate);
    text-decoration: none;
    cursor: pointer;
}

.btn-contactanos:hover { 
    background: white; 
    color: var(--dark-graphite) !important;
    transform: translateY(0px); 
    box-shadow: none;
}

/* --- Perfil Mask - Enfoque de Galería de Arte Fino --- */
.title-section-profile {
    font-size: 2.8rem !important;
    color: var(--dark-graphite) !important;
}
.title-section-profile .accent-italic {
    color: var(--primary-burgundy) !important;
    font-style: italic !important;
    font-family: 'Times New Roman', serif !important;
}
.sub-name-profile {
    color: var(--text-muted-gray) !important;
    font-size: 13px !important;
    letter-spacing: 0.3em !important;
}
.bullet-accent {
    color: var(--primary-burgundy) !important;
}
.profile-mask img {
    border-radius: 0px; /* Estricta geometría clásica */
    border: 1px solid var(--border-editorial);
    padding: 14px; /* Simula un paspartú de cuadro fotográfico */
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

/* --- Acordeón Integrado de Línea de Prensa --- */
.accordion-title {
    color: var(--dark-graphite) !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
}
.accordion-icon {
    color: var(--primary-burgundy) !important;
}
button[onclick^="toggleAccordion"] {
    border-bottom: 1px solid var(--border-editorial) !important;
}
button[onclick^="toggleAccordion"]:hover {
    background-color: var(--light-pearl) !important;
}

/* --- Servicios / Áreas de Atención --- */
#capacitaciones {
    background-color: var(--light-pearl) !important;
    border-top: 1px solid var(--border-editorial);
    border-bottom: 1px solid var(--border-editorial);
}
#capacitaciones h2 {
    color: var(--dark-graphite);
    font-size: 2.2rem;
}
.icon-area {
    color: var(--primary-burgundy);
}
.card-area {
    background: white;
    padding: 60px 40px;
    text-align: center;
    border: 1px solid var(--border-editorial);
    border-radius: 0px;
    transition: var(--transition-deliberate);
}
.card-area-title {
    color: var(--dark-graphite) !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 1.3rem;
}
.card-area:hover { 
    border-color: var(--dark-graphite); 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
}

/* --- Equipo / Retratos en Blanco y Negro Puro --- */
#equipo h2 {
    color: var(--dark-graphite);
    font-size: 2.2rem;
}
.team-card .image-container {
    border-radius: 0px;
    background-color: #000000;
}
.team-card img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2); /* Blanco y negro dramático/clásico */
    transition: var(--transition-deliberate);
}
.team-card:hover img { 
    filter: grayscale(0%) contrast(1);
    transform: scale(1.01);
}
.team-overlay {
    background: rgba(114, 28, 36, 0.95) !important; /* Capa vino traslúcida al hover */
}
.team-role {
    color: var(--primary-burgundy) !important;
    font-size: 11px !important;
    letter-spacing: 0.15em;
}

/* --- Carrusel Artículos / Catálogo Escrito --- */
#articulos {
    background-color: #ffffff !important;
}
#articulos h2 {
    color: var(--dark-graphite);
    font-size: 2.2rem;
}
.cms-card {
    min-width: 340px;
    background: white;
    padding: 45px;
    border: 1px solid var(--border-editorial);
    border-radius: 0px;
    transition: var(--transition-deliberate);
}
.card-article-border {
    border-top: 3px solid var(--primary-burgundy) !important;
}
.cms-card h4 {
    font-family: 'Times New Roman', serif !important;
    font-size: 1.4rem;
    font-weight: 400;
}
.cms-card:hover {
    border-color: var(--dark-graphite);
    box-shadow: 0 15px 30px rgba(0,0,0,0.03) !important;
}
.link-read-article {
    color: var(--primary-burgundy);
    border-bottom: 1px solid var(--primary-burgundy);
    font-weight: 600;
}
.link-read-article:hover {
    color: var(--dark-graphite);
    border-color: var(--dark-graphite);
}

.nav-btn {
    background: white;
    color: var(--dark-graphite);
    width: 50px;
    height: 50px;
    border: 1px solid var(--border-editorial);
    border-radius: 0px;
}
.nav-btn:hover { 
    background: var(--dark-graphite); 
    color: white;
}

/* --- Secciones de UI, Video y Formularios --- */
.bullet-video {
    background-color: var(--primary-burgundy) !important;
}
#contacto h2 {
    color: var(--dark-graphite);
    font-size: 2.2rem;
}
.title-contact-box {
    color: var(--dark-graphite);
}
#contacto .bg-gray-50 {
    background-color: var(--light-pearl) !important;
    border: 1px solid var(--border-editorial);
    border-radius: 0px;
}
#contacto .bg-white {
    border: 1px solid var(--border-editorial);
    border-radius: 0px;
    box-shadow: none;
}
.input-form {
    border-bottom: 1px solid var(--border-editorial) !important;
}
.input-form:focus {
    border-color: var(--primary-burgundy) !important;
}
.btn-submit-form {
    background: var(--dark-graphite);
    border-radius: 0px;
    font-size: 10px !important;
    letter-spacing: 3px !important;
}
.btn-submit-form:hover {
    background: var(--primary-burgundy) !important;
}

/* --- Footer Académico Completo --- */
.footer-eprofesional {
    background: var(--dark-graphite);
    padding: 90px 0 45px;
    color: #a2a2a6;
    border-top: 1px solid #333;
}
.footer-social-icons i {
    color: #6e6e73;
}
.footer-social-icons i:hover {
    color: white !important;
}

/* --- Corrección Estructural del Carrusel (Template 3) --- */
.cms-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.cms-carousel-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    gap: 24px;
    padding: 20px 5px;
    scrollbar-width: none; /* Oculta barra en Firefox */
}
.cms-carousel-wrapper::-webkit-scrollbar {
    display: none; /* Oculta barra en Chrome/Safari */
}
.cms-card {
    min-width: 320px !important;
    max-width: 350px !important;
    flex: 0 0 auto !important; /* Evita que las tarjetas se deformen o se encojan */
}