@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,700&family=Plus+Jakarta+Sans:wght@600&display=swap');
/* Fallback for Holimount script if not loaded via @font-face */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');

@font-face {
    font-family: 'Holimount';
    src: url('../assets/fonts/Holimount.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* RESET Y BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--fuente-cuerpo);
    background-color: var(--color-fondo-general);
    color: var(--color-texto-principal);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* TYPOGRAPHY */
:root {
    --fuente-h1-h2: 'Fraunces', serif;
    --fuente-h3-h4: 'Plus Jakarta Sans', sans-serif;
    --fuente-cuerpo: 'DM Sans', sans-serif;
    --fuente-script: 'Holimount', 'Dancing Script', cursive;
    
    /* Default theme (LAB Original) */
    --color-fondo-general: #FFF8F0;
    --color-fondo-secundario: #F5E6D0;
    --color-naranja-primario: #E8913A;
    --color-naranja-claro: #F5C88A;
    --color-texto-principal: #2D2016;
    --color-texto-secundario: #6B5744;
    --color-blanco: #FFFBF7;
    --color-oliva: #8B9A6B;
}

h1, h2 {
    font-family: var(--fuente-h1-h2);
    font-weight: 400;
}

h3, h4 {
    font-family: var(--fuente-h3-h4);
    font-weight: 600;
}

.text-light { font-weight: 300; }
.text-bold { font-weight: 700; }

.font-script {
    font-family: var(--fuente-script);
    color: var(--color-naranja-primario);
    font-size: 3rem;
    font-weight: 400;
}

.text-giant {
    font-size: 7vw;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin: 1rem 0;
    line-height: 1.1;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* BUTTONS */
.btn {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--color-naranja-primario);
    color: var(--color-blanco);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    font-family: var(--fuente-h3-h4);
    border-radius: 50px; /* Pill shape */
    border: 1px solid var(--color-naranja-primario);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn:hover {
    background-color: transparent;
    color: var(--color-naranja-primario);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.2);
    color: var(--color-texto-principal);
}

.btn-outline:hover {
    background-color: var(--color-texto-principal);
    border-color: var(--color-texto-principal);
    color: var(--color-fondo-general);
}

/* NAVBAR */
header {
    padding: 1.5rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

header.scrolled {
    position: fixed;
    background-color: var(--color-fondo-general);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.logo img {
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 3rem;
}

nav a {
    text-decoration: none;
    color: var(--color-texto-principal);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-family: var(--fuente-h3-h4);
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

nav a:hover, nav a.active {
    opacity: 0.5;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-texto-principal);
}

/* HERO EDITORIAL */
.hero-editorial {
    min-height: 110vh;
    padding: 8rem 5% 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--color-fondo-general);
    overflow: hidden;
}

.hero-premium-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-bg-text-top, .hero-bg-text-bottom {
    font-family: var(--fuente-h1-h2);
    font-size: 11vw; /* enlarged text */
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--color-naranja-claro);
    text-transform: uppercase;
    line-height: 1;
    z-index: 1;
    text-align: center;
    margin: 0;
}

/* Floating lines for heros and blocks */
.floating-line-hero {
    width: 70vw;
    max-width: 900px;
    min-width: 320px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-naranja-primario) 50%, transparent);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    opacity: 0.35;
}

/* Margen específico según su posición en el hero */
/* Línea superior (debajo del texto de arriba) */
.hero-bg-text-top + .floating-line-hero {
    margin: 1.1rem auto 1.5rem;
}

/* Línea inferior (debajo de la imagen, arriba del texto de abajo) */
.hero-image-center + .floating-line-hero {
    margin: 1.5rem auto 1.1rem;
}

.floating-line-block {
    width: 100%;
    max-width: 1100px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-naranja-primario) 50%, transparent);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    opacity: 0.35;
}

/* Espaciados asimétricos para la Bio: 1.1rem al texto y 1.5rem al frame */
.bio-bg-text + .floating-line-block {
    margin: 1.1rem auto 1.5rem;
}

.bio-landscape-frame + .floating-line-block {
    margin: 1.5rem auto 1.1rem;
}

.hero-image-center {
    position: relative;
    width: 70vw;
    max-width: 900px;
    min-width: 320px;
    height: 30vw; /* set height to 30vw */
    max-height: 420px;
    min-height: 200px;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.hero-image-center img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-script-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg); /* inclined 5 degrees */
    font-family: var(--fuente-script);
    color: var(--color-naranja-primario);
    font-size: 4.5vw;
    font-weight: 400;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.hero-citation-container {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 800px;
    margin: 4rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hero-citation {
    font-family: var(--fuente-h1-h2);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-texto-secundario);
    line-height: 1.5;
}

/* PRESENTACIÓN EDITORIAL (DESPUÉS DEL HERO) */
.metodo-preview-editorial {
    padding: 8rem 5%;
    background-color: var(--color-fondo-general); /* matches hero background */
    display: flex;
    justify-content: center;
    position: relative;
}

.presentacion-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 6rem;
    max-width: 950px; /* compressed width */
    width: 100%;
    align-items: center;
}

.presentacion-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.presentacion-linea {
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-naranja-primario) 50%, transparent);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    opacity: 0.35;
}

.presentacion-frase {
    font-family: var(--fuente-h1-h2);
    font-size: 1.65rem;
    line-height: 1.5;
    color: var(--color-texto-principal);
    font-style: italic;
    padding: 2.5rem 1rem;
    max-width: 100%;
    font-weight: 300;
}

.presentacion-refuerzo {
    font-family: var(--fuente-cuerpo);
    font-size: 0.85rem;
    color: var(--color-texto-secundario);
    margin-top: 1.5rem;
    max-width: 80%;
    line-height: 1.5;
    font-weight: 300;
}

.presentacion-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
}

.circular-frame {
    width: 25vw;
    height: 25vw;
    max-width: 420px;
    max-height: 420px;
    min-width: 280px;
    min-height: 280px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); /* soft shadow */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.circular-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* REDIRECCIÓN MÉTODO LAB (BANNER ANCHO COMPLETO) */
.metodo-redireccion-editorial {
    width: 100%;
    position: relative;
    background-color: var(--color-fondo-general);
    padding-bottom: 6rem;
}

.redir-bg {
    width: 100%;
    height: 95vh;
    min-height: 750px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* aligns content to the right */
    padding: 0 10% 14rem 10%; /* increased bottom padding to make room for overlap */
}

.redir-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 55%, var(--color-fondo-general) 100%);
    z-index: 1;
}

.redir-content {
    position: relative;
    z-index: 2;
    max-width: 550px;
    color: var(--color-blanco);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.redir-subtitle {
    font-family: var(--fuente-h3-h4);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-naranja-claro);
}

.redir-title {
    font-family: var(--fuente-h1-h2);
    font-size: 3.5rem;
    line-height: 1.1;
    color: var(--color-naranja-claro);
    font-weight: 400;
}

.redir-text {
    font-family: var(--fuente-cuerpo);
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    font-weight: 300;
}

.metodo-text p {
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
    margin-bottom: 3rem;
}

.productos-seccion {
    padding: 8rem 5%;
    background-color: transparent;
}

#servicios.productos-seccion,
#asesorias.productos-seccion {
    padding-top: 8rem;
}

#asesorias .productos-grid {
    grid-template-columns: repeat(3, 1fr);
}

.productos-seccion .section-title {
    font-family: var(--fuente-h3-h4);
    font-weight: 600;
    text-align: left;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
}

.seccion-linea {
    width: 100%;
    max-width: 1200px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-naranja-primario) 50%, transparent);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    margin: 0.8rem auto 1.8rem;
    opacity: 0.35;
}

.productos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.producto-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.producto-img {
    width: 100%;
    height: 320px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.2rem;
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

.producto-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.producto-card:hover .producto-img img {
    transform: scale(1.03);
}

/* ==========================================================================
   NUEVA MAQUETACIÓN ASESORÍAS (ESTILO EDITORIAL Y SEAMLESS)
   ========================================================================== */
.asesorias-intro-section, .asesorias-list-section {
    background-color: var(--color-fondo-general);
    color: var(--color-texto-principal);
    transition: background-color 0.3s ease;
}

.asesorias-intro-section {
    padding: 8rem 5% 6rem;
}

.asesorias-list-section {
    padding: 2rem 5% 8rem;
}

/* Ajustes de foto e imagen circular en círculo de asesorías */
.asesorias-intro-section .main-portrait-frame {
    aspect-ratio: 1 / 1.35; /* Más alto */
    border-radius: 48px;
}

.asesorias-intro-section .overlapping-circle-frame {
    width: 180px; /* Más grande */
    height: 180px;
    border: none; /* Sin borde ni marco */
    box-shadow: -15px -15px 35px rgba(0,0,0,0.15); /* Sombra negativa en -XY */
    bottom: -35px;
    right: -35px;
}

/* Frase introductoria en un único H2 con dos estilos */
.intro-heading {
    text-align: right;
    line-height: 1.25;
    margin: 0;
    max-width: 700px;
    margin-left: auto;
}

.intro-heading-light {
    font-family: var(--fuente-h1-h2); /* Serif */
    font-size: 3rem;
    font-weight: 300;
    color: var(--color-naranja-primario);
    letter-spacing: -0.02em;
}

.intro-heading-bold {
    font-family: var(--fuente-h1-h2); /* Serif */
    font-size: 3rem;
    font-weight: 600;
    color: var(--color-naranja-primario);
    letter-spacing: -0.03em;
}

/* Grilla Asimétrica de las Consultorías */
.consultancy-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4.5rem 0;
    align-items: start;
}

/* Grid específico de planes Método LAB con áreas para reorder en mobile */
.plan-grid {
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
        "header para"
        "accordion para";
    gap: 1rem 4rem; /* row-gap reducido, col-gap igual */
    padding: 3rem 0;
}

.plan-grid .plan-header-col  { grid-area: header; }
.plan-grid .plan-accordion-col { grid-area: accordion; }
.plan-grid .plan-para-col   { grid-area: para; }

/* Cabecera del Listado de Asesorías */
.asesorias-section-header {
    max-width: 1200px;
    margin: 0 auto 4rem;
    text-align: left;
}

.asesorias-main-title {
    font-family: var(--fuente-h1-h2);
    font-size: 5.5rem; /* Más grande */
    font-weight: 500; /* Cuerpo 500 */
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.asesorias-main-subtitle {
    font-family: var(--fuente-h3-h4);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Envoltorio de Grilla con línea vertical continua a la izquierda */
.consultancies-timeline-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    border-left: 1px solid rgba(232, 145, 58, 0.25); /* Línea vertical continua simple a la izquierda */
    padding-left: 4.5rem;
}

.consultancy-grid:first-of-type {
    padding-top: 1rem;
}

.consultancy-left-col {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.consultancy-right-col {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-top: 15.5rem; /* Aligned with description text line */
}

.consultancy-number {
    font-family: var(--fuente-h1-h2);
    font-size: 8rem;
    line-height: 1;
    color: var(--color-naranja-primario);
    opacity: 0.6;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.consultancy-subtitle {
    font-family: var(--fuente-h3-h4);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}

.consultancy-title {
    font-family: var(--fuente-h1-h2);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-texto-principal);
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.consultancy-desc {
    font-family: var(--fuente-cuerpo);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-texto-secundario);
    margin-bottom: 1.8rem;
    font-weight: 300;
}

.consultancy-para-area {
    margin-bottom: 1.8rem;
}

.list-title {
    font-family: var(--fuente-h3-h4);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}

.consultancy-cta-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: nowrap;
    text-align: left;
    margin-top: 1rem;
}

.consultancy-cta-wrapper .btn,
.consultancy-cta-wrapper .btn-brochure {
    padding: 1rem 1.6rem !important; /* Compact padding to fit side-by-side */
    font-size: 0.78rem !important; /* Smaller text size */
    letter-spacing: 0.08em !important;
    border-radius: 50px;
    display: inline-block;
    width: auto !important;
    white-space: nowrap;
}

.consultancy-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.consultancy-list li {
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    color: var(--color-texto-secundario);
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    line-height: 1.35;
    font-weight: 300;
}

.consultancy-list li::before {
    content: "✓";
    color: var(--color-naranja-primario);
    font-weight: bold;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .consultancies-timeline-wrapper {
        border-left: none;
        padding-left: 0;
    }

    .consultancy-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    
    .consultancy-right-col {
        padding-top: 0;
    }

    /* Reorder plan grid in mobile: header → para → accordion */
    .plan-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "para"
            "accordion";
    }
    
    .intro-quote-light {
        font-size: 2.2rem;
    }
    
    .intro-quote-bold {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .consultancy-subgrid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .consultancy-number {
        font-size: 6rem;
    }
    
    .consultancy-title {
        font-size: 2rem;
    }
    
    .consultancy-cta-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 0.8rem;
    }

    .consultancy-cta-wrapper .btn,
    .consultancy-cta-wrapper .btn-brochure {
        width: 100% !important;
        text-align: center;
    }
}

.producto-categoria {
    font-family: var(--fuente-h3-h4);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    display: block;
}

.producto-titulo {
    font-family: var(--fuente-h3-h4);
    font-size: 1.15rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-texto-principal);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
}

.producto-descripcion {
    font-family: var(--fuente-cuerpo);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--color-texto-secundario);
    font-weight: 300;
}

/* BANNER Y BIO */
.banner-laura {
    padding: 8rem 0;
    overflow: hidden;
    background-color: var(--color-fondo-secundario);
}

.quien-soy-editorial {
    padding: 12rem 5%;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 6rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
}

.bio-img {
    position: relative;
}

.bio-img img {
    width: 100%;
    height: auto;
}

.bio-text p {
    font-size: 1.2rem;
    color: var(--color-texto-secundario);
    margin: 2rem 0 3rem;
}

/* PREMIUM BIO SECTION (Landing Page) */
.bio-premium-section {
    padding: 8rem 5%;
    background-color: transparent;
    position: relative;
}

.bio-header-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 2;
}

.bio-bg-text {
    font-family: var(--fuente-h1-h2);
    font-size: 11vw;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-naranja-claro);
    text-transform: uppercase;
    line-height: 1;
    z-index: 1;
    text-align: center;
    margin-bottom: 0;
    white-space: nowrap; /* Ensure it stays in a single line */
}

.bio-landscape-frame {
    position: relative;
    width: 100%;
    height: 32vw;
    max-height: 420px;
    min-height: 200px;
    z-index: 2;
    overflow: visible; /* Needed for portrait overlap */
}

.bio-landscape-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.bio-content-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem; /* Reduced gap from 6rem */
    max-width: 1000px;
    margin: 2.5rem auto 0; /* Reduced top margin from 4rem */
    position: relative;
    z-index: 3; /* Placed above the landscape header wrapper to overlap profile picture */
}

.bio-col-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bio-subtitle {
    color: var(--color-naranja-primario);
    font-family: var(--fuente-h3-h4);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.7rem; /* Reduced gap between subtitle and title */
}

.bio-headline {
    font-family: var(--fuente-h1-h2);
    font-style: italic;
    font-weight: 400;
    font-size: 1.85rem;
    line-height: 1.25; /* Reduced line-height from 1.4 */
    color: var(--color-naranja-primario);
    margin-bottom: 1.5rem; /* Reduced space */
    letter-spacing: -0.01em;
}

.bio-description {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    line-height: 1.55; /* Reduced line-height from 1.7 */
    color: var(--color-texto-secundario);
}

.bio-col-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.bio-portrait-frame {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1.15;
    border-radius: 20px;
    overflow: hidden;
    /* Shifts it up to overlap the landscape banner */
    margin-top: -150px; 
    z-index: 10;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    margin-bottom: 2.5rem;
}

.bio-portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bio-instagram-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    z-index: 5;
}

.bio-instagram-link {
    font-family: var(--fuente-h1-h2);
    font-style: italic;
    color: var(--color-naranja-primario);
    font-size: 1.25rem;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bio-instagram-link:hover {
    opacity: 0.75;
}

.bio-instagram-icon {
    width: 24px;
    height: 24px;
    fill: var(--color-naranja-primario);
}

/* RESPONSIVE FOR PREMIUM BIO */
@media (max-width: 992px) {
    .bio-content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin-top: 3rem;
    }
    
    .bio-portrait-frame {
        margin-top: 0; /* Reset negative margin on mobile */
        margin-inline: auto;
    }
    
    .bio-col-text {
        align-items: center;
        text-align: center;
    }
}

/* BANNER DE PAÍSES (Trayectoria Internacional) */
.countries-banner {
    width: 100%;
    padding: 1.5rem 0;
    text-align: center;
    margin: 3rem 0;
    position: relative;
    border-top: 1px solid rgba(232, 145, 58, 0.15);
    border-bottom: 1px solid rgba(232, 145, 58, 0.15);
}

.countries-list-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.countries-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.country-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.country-item:hover {
    transform: scale(1.1);
}

.country-item svg {
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.country-dot {
    width: 5px;
    height: 5px;
    background-color: var(--color-naranja-primario);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

/* FILAS INTERCALADAS CON SOLAPAMIENTO EDITORIAL (TIPO REVISTA) */
.bio-overlap-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto 6rem;
}

.bio-overlap-block {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: start;
    position: relative;
}

.bio-overlap-block.row-reverse {
    grid-template-columns: 1fr 1.1fr;
}

.bio-overlap-text {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Alineación 1: Justificación izquierda y abajo (con desfase a la izquierda exclusivo para la biografía) */
.bio-overlap-section .bio-overlap-text.align-bottom-left {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    margin-left: -2rem;
}

/* Alineación 2: Justificación derecha y al centro (con desfase a la derecha exclusivo para la biografía) */
.bio-overlap-section .bio-overlap-text.align-center-right {
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    margin-right: -2rem;
}

/* Alineación 3: Justificación izquierda y arriba (con desfase a la izquierda exclusivo para la biografía) */
.bio-overlap-section .bio-overlap-text.align-top-left {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    margin-left: -2rem;
}

.bio-overlap-img-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    z-index: 2;
}


/* ==========================================================================
   AJUSTES MOBILE (HEROS Y BLOQUES)
   ========================================================================== */

/* 1. Botón de Contacto en Menú Hamburguesa (Mobile) */
.mobile-only-contact {
    display: none;
}

@media (max-width: 992px) {
    .desktop-contact-btn {
        display: none !important;
    }

    .mobile-only-contact {
        display: block;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(0,0,0,0.06);
        width: 100%;
        text-align: center;
    }

    .mobile-contact-btn {
        display: inline-block;
        width: 100%;
        padding: 0.9rem 1.5rem;
        background-color: var(--color-naranja-primario);
        color: var(--color-blanco) !important;
        border-radius: 50px;
        text-align: center;
        font-weight: 600;
        text-decoration: none !important;
        box-shadow: 0 4px 15px rgba(232, 145, 58, 0.3);
    }
}

/* 2. Heros en Mobile: Páginas internas adaptadas, Landing Hero intacto */
@media (max-width: 768px) {
    /* Las páginas internas reducen padding superior */
    .hero-editorial:not(#hero) {
        min-height: auto !important;
        justify-content: flex-start !important;
        padding-top: 90px !important;
        padding-bottom: 2rem !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Landing Hero: Reducción de padding inferior en mobile para acercar la sección de presentación */
    #hero.hero-editorial {
        padding-top: 90px !important;
        padding-bottom: 1rem !important;
        min-height: auto !important;
    }

    /* Sección de Presentación después del Hero en Landing: Reducción de padding superior */
    .metodo-preview-editorial {
        padding-top: 1.5rem !important;
        padding-bottom: 4rem !important;
    }

    #hero .hero-image-center {
        width: 85vw !important;
        height: 45vw !important;
        max-height: 280px !important;
        min-height: 180px !important;
    }

    /* Heros con foto de páginas internas (Asesorías, Método LAB, Quién Soy): Foto de borde a borde */
    .hero-editorial:not(#hero) .hero-image-center {
        width: 100% !important;
        max-width: 100% !important;
        height: 260px !important;
        min-height: 260px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .hero-editorial:not(#hero) .hero-image-center img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .hero-editorial .floating-line-hero {
        margin: 1.2rem auto 0.8rem !important;
        width: 90% !important;
    }

    /* Hero Herramientas: Quitar la línea flotante */
    .hero-editorial .floating-line-hero[style*="margin: 1.5rem auto"] {
        display: none !important;
    }

    /* Hero Blog */
    .hero-text-only {
        padding-top: 100px !important;
        min-height: auto !important;
    }

    .hero-text-only h1 {
        font-size: 15vw !important;
        letter-spacing: 0.05em !important;
    }
}

/* 3. Método LAB y Asesorías: Eliminación de desbordamiento horizontal */
@media (max-width: 768px) {
    .consultancies-timeline-wrapper,
    .consultancies-container,
    .consultancy-grid,
    .metodo-program-card,
    .metodo-program-block,
    .plan-grid {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Botones de Asesorías: apilados verticalmente al 100% de ancho para evitar desborde */
    .consultancy-cta-wrapper {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.8rem !important;
    }

    .consultancy-cta-wrapper .btn,
    .consultancy-cta-wrapper .btn-brochure {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .consultancy-title {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }
}

/* 4. Herramientas: Reducción de Títulos dentro de tarjetas en Mobile */
@media (max-width: 768px) {
    .tool-card-title,
    .producto-titulo {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
    }

    .tool-title {
        font-size: 1.8rem !important;
        line-height: 1.15 !important;
    }
}

/* 5. Quién Soy: "Así nació LAB" en 1 sola columna (Mobile) */
@media (max-width: 768px) {
    div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* 6. Blog Grid (Mobile): Formato de Lista Título + Resumen + Link subrayado sin foto */
@media (max-width: 768px) {
    #blog-featured-container {
        display: none !important;
    }

    .hero-text-only {
        padding-bottom: 1rem !important;
    }

    .blog-editorial {
        padding-top: 1rem !important;
    }

    #blog-grid-container {
        margin-top: 1rem !important;
    }

    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        margin: 1rem auto !important;
    }

    .blog-grid-card {
        background-color: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 1.5rem 0 !important;
        transform: none !important;
    }

    .blog-grid-card-img {
        display: none !important;
    }

    .blog-grid-card-content {
        padding: 0 !important;
    }

    .blog-grid-card-title {
        font-size: 1.4rem !important;
        text-decoration: underline !important;
        text-underline-offset: 4px;
        color: var(--color-texto-principal) !important;
        margin-bottom: 0.8rem !important;
    }

    .blog-grid-card-excerpt {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
        color: var(--color-texto-secundario) !important;
    }

    .blog-grid-card-link {
        text-decoration: underline !important;
        text-underline-offset: 3px;
        font-weight: 600 !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
}

/* 7. Eliminación de grieta/separación entre Asesorías y Herramientas */
#asesorias-block + #herramientas,
.productos-seccion + .productos-seccion {
    margin-top: 0 !important;
}


/* Desfases verticales de las imágenes para el entrecruzamiento */
.bio-overlap-block:nth-child(1) .bio-overlap-img-frame {
    margin-top: -1rem;
}

.bio-overlap-block:nth-child(2) .bio-overlap-img-frame {
    margin-top: -2.5rem; /* Reduced from -6rem to avoid overlapping text above */
    margin-bottom: -1rem;
}

.bio-overlap-block:nth-child(3) .bio-overlap-img-frame {
    margin-top: -2rem;
}

.bio-overlap-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .bio-overlap-block, .bio-overlap-block.row-reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .bio-overlap-img-frame {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        aspect-ratio: 1.3 / 1;
    }
    
    .bio-overlap-text {
        padding: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* SLIDER DE FOTOS - SECCIÓN QUIÉN SOY */
.bio-slider-container {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1.15;
    border-radius: 20px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    margin-bottom: 2.5rem;
}

.bio-slides-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.bio-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    z-index: 1;
}

.bio-slide.active {
    opacity: 1;
    z-index: 2;
}

.bio-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botones de navegación del slider */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 251, 247, 0.8);
    border: none;
    color: var(--color-texto-principal);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.3s, color 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.slider-btn:hover {
    background: var(--color-texto-principal);
    color: var(--color-blanco);
}

.prev-btn {
    left: 15px;
}

.next-btn {
    right: 15px;
}

/* Puntos indicadores */
.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

.slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.slider-dots .dot.active {
    background: var(--color-blanco);
    transform: scale(1.2);
}


/* BLOG PREVIEW (Magazine style) */
.blog-editorial {
    padding: 8rem 5%;
    background-color: var(--color-fondo-general);
}

.blog-magazine-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start; /* Align at the top */
}

.blog-col-left {
    display: flex;
    justify-content: flex-end;
}

.magazine-cover {
    position: relative;
    width: 100%;
    max-width: 420px; /* Slightly wider */
    aspect-ratio: 3.6 / 5; /* Taller proportion to match right side */
    border-radius: 16px;
    overflow: hidden;
    /* Soft shadow to the left */
    box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.magazine-cover:hover {
    transform: translateY(-5px);
}

.magazine-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%; /* Centered at 35% as requested */
}

/* Gradient overlay to make text readable */
.magazine-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

.magazine-brand-logo {
    position: absolute;
    top: 2.2rem;
    left: 2rem;
    font-family: var(--fuente-h1-h2);
    font-size: 5rem;
    font-weight: 300;
    color: var(--color-blanco);
    line-height: 1;
    z-index: 2;
    letter-spacing: -0.02em;
}

.magazine-headline {
    position: absolute;
    bottom: 2.5rem;
    left: 2rem;
    right: 2rem;
    color: var(--color-blanco);
    font-family: var(--fuente-h3-h4);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
    z-index: 2;
    text-transform: uppercase;
}

.magazine-headline .italic-word {
    font-family: var(--fuente-h1-h2);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
}

.blog-col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1rem;
    padding-top: 1rem; /* Align nicely with cover top */
}

/* GRILLA DE ARTÍCULOS DE BLOG (3 COLUMNAS) */
.blog-featured-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 2rem auto 6rem;
    align-items: center;
    background-color: var(--color-blanco);
    border-radius: 16px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.04);
}

.blog-featured-left {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 3.6 / 5;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: -15px 20px 40px rgba(0, 0, 0, 0.12);
    justify-self: center;
}

.blog-featured-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transition: transform 0.5s ease;
}

.blog-featured-card:hover .blog-featured-left img {
    transform: scale(1.03);
}

.blog-featured-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-category {
    font-family: var(--fuente-h3-h4);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.blog-featured-title {
    font-family: var(--fuente-h1-h2);
    font-size: 2.8rem;
    color: var(--color-texto-principal);
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
    font-weight: 400;
}

.blog-featured-excerpt {
    font-family: var(--fuente-cuerpo);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-texto-secundario);
    margin-bottom: 2.5rem;
    font-weight: 300;
}

.blog-featured-link {
    font-family: var(--fuente-h3-h4);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-naranja-primario);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
    width: fit-content;
}

.blog-featured-link:hover {
    color: var(--color-texto-principal);
    transform: translateX(5px);
}

@media (max-width: 992px) {
    .blog-featured-card {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
    .blog-featured-left {
        height: 320px;
    }
    .blog-featured-title {
        font-size: 2.2rem;
    }
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 4rem auto;
}

.blog-grid-card {
    background-color: var(--color-blanco);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.blog-grid-card-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.blog-grid-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-grid-card:hover .blog-grid-card-img img {
    transform: scale(1.05);
}

.blog-grid-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-grid-card-category {
    font-family: var(--fuente-h3-h4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    display: inline-block;
}

.blog-grid-card-title {
    font-family: var(--fuente-h1-h2);
    font-size: 1.6rem;
    color: var(--color-texto-principal);
    line-height: 1.2;
    margin: 0 0 1rem 0;
    font-weight: 400;
}

.blog-grid-card-excerpt {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-texto-secundario);
    margin-bottom: 2rem;
    flex-grow: 1;
}

.blog-grid-card-link {
    font-family: var(--fuente-h3-h4);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-naranja-primario);
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease;
    width: fit-content;
}

.blog-grid-card-link:hover {
    color: var(--color-texto-principal);
    transform: translateX(5px);
}

@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 5%;
    }
}

.blog-tag {
    color: var(--color-naranja-primario);
    font-family: var(--fuente-h3-h4);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem; /* Reduced space */
    display: block;
}

.blog-main-title {
    font-family: var(--fuente-h1-h2);
    font-size: 2.8rem; /* Slightly smaller to fit nicely */
    line-height: 1.1; /* Tighter line-height */
    letter-spacing: -0.03em; /* Tight letter-spacing for premium editorial feel */
    color: var(--color-texto-principal);
    margin-bottom: 1.5rem; /* Reduced space */
    max-width: 480px;
}

.blog-main-excerpt {
    font-family: var(--fuente-cuerpo);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-texto-secundario);
    margin-bottom: 2rem; /* Reduced space */
    max-width: 480px;
}

.blog-others-title {
    margin-top: 2.5rem; /* Reduced space from 4rem */
    margin-bottom: 1.2rem;
    font-family: var(--fuente-h3-h4);
    font-size: 0.8rem;
    letter-spacing: 0.1em; /* Reduced letter-spacing from 0.15em */
    color: var(--color-texto-secundario);
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
}

.blog-others-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-others-item {
    margin-bottom: 0.8rem; /* Tighter spacing between links */
}

.blog-others-link {
    text-decoration: none;
    color: var(--color-texto-principal);
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    letter-spacing: -0.015em; /* Tighter letter-spacing */
    line-height: 1.4;
    transition: color 0.3s ease;
    display: inline-block;
}

.blog-others-link:hover {
    color: var(--color-naranja-primario);
}

.blog-others-link.disabled {
    cursor: default;
    color: var(--color-texto-secundario);
    opacity: 0.85;
}

.blog-others-link.disabled:hover {
    color: var(--color-texto-secundario);
}

/* RESPONSIVE FOR MAGAZINE BLOG */
@media (max-width: 992px) {
    .blog-magazine-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .blog-col-left {
        justify-content: center;
    }
    .blog-col-right {
        padding-left: 0;
        align-items: center;
        text-align: center;
    }
    .blog-main-excerpt {
        margin-inline: auto;
    }
}


/* FOOTER */
footer {
    background-color: var(--color-texto-principal);
    color: var(--color-blanco);
    padding: 8rem 5% 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto 4rem;
}

.footer-col h4 {
    color: rgba(255,255,255,0.4);
    margin-bottom: 2rem;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

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

.footer-col li {
    margin-bottom: 1rem;
}

.footer-col a {
    color: var(--color-blanco);
    text-decoration: none;
    font-family: var(--fuente-cuerpo);
    transition: opacity 0.3s ease;
}

.footer-col a:hover {
    opacity: 0.6;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
}

/* DROPDOWN / ACCORDION (Método LAB) */
.accordion {
    margin-top: 3rem;
}

.accordion-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.accordion-header {
    width: 100%;
    text-align: left;
    padding: 2rem 0;
    background: none;
    border: none;
    font-family: var(--fuente-h1-h2);
    font-size: 1.5rem;
    color: var(--color-texto-principal);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: var(--color-naranja-primario);
}

.accordion-header::after {
    content: '+';
    font-family: var(--fuente-cuerpo);
    font-size: 1.5rem;
    font-weight: 300;
}

.accordion-header.active::after {
    content: '−';
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.accordion-content-inner {
    padding: 0 0 2rem 0;
    color: var(--color-texto-secundario);
    font-size: 1.1rem;
}

/* THEME SELECTOR */
.theme-selector {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-blanco);
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: var(--fuente-h3-h4);
}
.theme-selector select {
    padding: 0.5rem;
    border: 1px solid rgba(0,0,0,0.1);
    font-family: var(--fuente-cuerpo);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .hero-img-wrapper {
        position: relative;
        width: 100%;
        right: 0;
        transform: none;
        height: 50vh;
        margin-bottom: 2rem;
    }
    .hero-content {
        max-width: 100%;
        padding-top: 0;
    }
    .metodo-container, .presentacion-container, .quien-soy-editorial, .servicio-item, .servicio-item:nth-child(even), .productos-grid {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 3rem;
    }
    .cards-wrapper {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .text-giant { font-size: 12vw; }
}

@media (max-width: 768px) {
    .mobile-menu-btn { display: block; }
    
    nav ul {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-fondo-general);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    nav ul.active {
        opacity: 1;
        visibility: visible;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* FILOSOFÍA L-A-B */
.filosofia-section {
    padding: 6rem 5% 8rem; /* Slightly less top since it follows the hero citation */
    background-color: var(--color-fondo-secundario); /* Matches the hero background color */
    text-align: center;
    position: relative;
}

.filosofia-container-wrapper {
    position: relative;
    max-width: 1000px;
    margin: 2rem auto 0;
}

.filosofia-wavy-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5.4rem; /* Matches the line-height of the h1 (6rem * 0.9 = 5.4rem) */
    pointer-events: none;
    z-index: 1;
}

.filosofia-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.filosofia-item h1 {
    font-size: 6rem;
    color: var(--color-naranja-primario);
    font-family: var(--fuente-h1-h2);
    line-height: 0.9;
    margin: 0 0 0.5rem;
    position: relative;
    display: inline-block;
    background-color: var(--color-fondo-secundario);
    padding: 0 1.5rem;
    z-index: 2;
    transition: background-color 0.5s ease;
}

.filosofia-item h3 {
    margin: 0.5rem 0;
    font-family: var(--fuente-h3-h4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.2;
}

.filosofia-item p {
    color: var(--color-texto-secundario);
    font-size: 1rem;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .filosofia-wavy-line {
        display: none;
    }
    .filosofia-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .filosofia-item h1 {
        padding: 0;
        background-color: transparent;
    }
}

/* SELECTOR SECCIÓN DE PLANES */
.selector-section {
    padding: 8rem 5%;
    background-color: var(--color-fondo-secundario);
    text-align: center;
}

.selector-heading {
    font-family: var(--fuente-h1-h2);
    font-size: 3rem;
    color: var(--color-naranja-primario);
    margin-bottom: 5rem;
    line-height: 1.2;
    max-width: 800px;
    margin-inline: auto;
    font-weight: 400;
}

.selector-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0; /* Align directly to center border */
    max-width: 1000px;
    margin: 0 auto;
}

.selector-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.selector-col.col-left {
    align-items: flex-end;
    text-align: right;
    border-right: 1px solid rgba(232, 145, 58, 0.25);
    padding-right: 4rem;
}

.selector-col.col-right {
    align-items: flex-start;
    text-align: left;
    border-left: 1px solid rgba(232, 145, 58, 0.25);
    padding-left: 4rem;
}

.selector-col .btn-wrapper {
    margin-bottom: 0.5rem;
}

.btn-selector-solid {
    background-color: var(--color-naranja-primario);
    color: var(--color-blanco);
    border-color: var(--color-naranja-primario);
    padding: 0.9rem 2.8rem;
    font-size: 0.8rem;
}

.btn-selector-solid:hover {
    background-color: transparent;
    color: var(--color-naranja-primario);
}

.btn-selector-outline {
    background-color: transparent;
    border: 1px solid var(--color-texto-principal);
    color: var(--color-texto-principal);
    padding: 0.9rem 2.8rem;
    font-size: 0.8rem;
}

.btn-selector-outline:hover {
    background-color: var(--color-texto-principal);
    color: var(--color-fondo-secundario);
}

.selector-desc {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
    line-height: 1.6;
    max-width: 380px;
}

@media (max-width: 768px) {
    .selector-section {
        padding: 5rem 5% 6rem;
    }
    .selector-heading {
        font-size: 2.2rem;
        margin-bottom: 3rem;
    }
    .selector-container {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
    .selector-col.col-left, .selector-col.col-right {
        align-items: center;
        text-align: center;
        border: none;
        padding: 0;
    }
    .selector-desc {
        max-width: 100%;
    }
}

/* PLAN SECTIONS (GASTRONOMY / HOSPITALITY) */
.plan-section {
    padding: 8rem 5% 3rem;
    background-color: transparent; /* inherits body background */
}

/* Second plan section gets less top padding to tighten the gap */
.plan-section + .plan-section {
    padding-top: 3rem;
    padding-bottom: 8rem;
}

.plan-header-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    z-index: 2;
}

.plan-bg-text {
    font-family: var(--fuente-h1-h2);
    font-size: 14vw;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-naranja-claro);
    text-transform: uppercase;
    line-height: 1;
    z-index: 1;
    text-align: center;
    margin-bottom: 0;
    white-space: nowrap;
}

.plan-landscape-frame {
    position: relative;
    width: 100%; /* Restored to original full width */
    height: 32vw;
    max-height: 420px;
    min-height: 200px;
    z-index: 2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.plan-landscape-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%; /* Position adjusted vertically to 60% */
}

.plan-content-grid {
    display: grid;
    grid-template-columns: 4.5fr 7.5fr;
    gap: 5rem;
    max-width: 1100px;
    margin: 3.5rem auto 0; /* Small separation as requested */
    text-align: left; /* Explicitly align all column content to the left */
}

.plan-nicho-col {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.nicho-list-wrapper h3 {
    font-family: var(--fuente-h3-h4);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    color: var(--color-texto-principal);
}

.nicho-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0;
}

.nicho-list li {
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    color: var(--color-texto-secundario);
    display: flex;
    align-items: center;
    gap: 0.8rem;
    line-height: 1.4;
}

.nicho-list li::before {
    content: "✓";
    color: var(--color-naranja-primario);
    font-weight: bold;
}

.plan-brochure-centered {
    text-align: center;
    margin-top: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.plan-brochure-centered p {
    font-family: var(--fuente-h1-h2);
    font-size: 1.35rem;
    color: var(--color-texto-secundario);
    max-width: 600px;
    line-height: 1.45;
    margin: 0;
}

.btn-brochure {
    background-color: var(--color-texto-principal);
    color: var(--color-blanco);
    border: 2px solid var(--color-texto-principal);
    padding: 1.2rem 2.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    border-radius: 50px;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--fuente-h3-h4);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn-brochure:hover {
    background-color: transparent;
    color: var(--color-texto-principal);
}

.que-trabajamos-sublist {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-top: 1rem;
    text-align: left;
}

.que-trabajamos-subitem {
    border-left: 2px solid var(--color-naranja-primario);
    padding-left: 1.2rem;
}

.que-trabajamos-subitem h4 {
    font-family: var(--fuente-h3-h4);
    font-size: 1.1rem;
    color: var(--color-texto-principal);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.que-trabajamos-subitem p {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    color: var(--color-texto-secundario);
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.que-trabajamos-subitem .objetivo {
    font-family: var(--fuente-h3-h4);
    font-size: 0.88rem;
    color: var(--color-naranja-primario);
    margin: 0;
}

@media (max-width: 992px) {
    .plan-content-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
}

/* ==========================================================================
   SECCIÓN DE ASESORÍAS (INTRO & GRILLA DESPLAZADA)
   ========================================================================== */
.asesorias-intro-section {
    padding: 8rem 5% 6rem;
    background-color: var(--color-fondo-general);
}

.asesorias-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 6rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}

.intro-media-wrapper {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.main-portrait-frame {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.main-portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.overlapping-circle-frame {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid var(--color-fondo-general);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    z-index: 10;
}

.overlapping-circle-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.intro-text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.intro-quote {
    font-size: 2.5rem !important;
    line-height: 1.35;
    color: var(--color-naranja-primario);
}

.asesorias-products-section {
    padding: 6rem 5% 8rem;
    background-color: var(--color-fondo-secundario);
}

.asesorias-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.product-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.product-col.col-right {
    margin-top: 12rem; /* Vertical offset as requested */
}

.product-number {
    font-family: var(--fuente-h1-h2);
    font-size: 8rem;
    line-height: 1;
    color: var(--color-naranja-primario);
    opacity: 0.8;
}

.product-title {
    font-family: var(--fuente-h1-h2);
    font-size: 2.2rem;
    color: var(--color-texto-principal);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.02em;
}

.product-subtitle {
    font-family: var(--fuente-h3-h4);
    font-size: 0.95rem;
    color: var(--color-naranja-primario);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    font-weight: 600;
}

.product-desc {
    font-family: var(--fuente-cuerpo);
    font-size: 1rem;
    color: var(--color-texto-secundario);
    line-height: 1.6;
}

.product-details-grid {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.product-details-grid h4 {
    font-family: var(--fuente-h3-h4);
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
    color: var(--color-texto-principal);
    font-weight: 600;
}

.product-footer {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.product-price {
    font-family: var(--fuente-h1-h2);
    font-size: 2.2rem;
    color: var(--color-naranja-primario);
}

@media (max-width: 992px) {
    .asesorias-intro-grid, .asesorias-products-grid {
        grid-template-columns: 1fr;
        gap: 5rem;
    }
    .product-col.col-right {
        margin-top: 0; /* Remove vertical offset on mobile */
    }
    .overlapping-circle-frame {
        width: 120px;
        height: 120px;
        bottom: -20px;
        right: -20px;
    }
    .asesorias-products-section {
        padding-bottom: 8rem;
    }
}

/* ==========================================================================
   DROPDOWN MENU (NAVEGACIÓN MULTINIVEL)
   ========================================================================== */
#nav-links li {
    position: relative;
}

/* Dropdown Container */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--color-blanco);
    min-width: 260px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 1rem 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background-color: var(--color-blanco);
    border-left: 1px solid rgba(0, 0, 0, 0.04);
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

#nav-links li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.85rem !important;
    font-family: var(--fuente-h3-h4) !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    color: var(--color-texto-secundario) !important;
    text-transform: uppercase;
    transition: all 0.25s ease;
    text-align: center;
}

.dropdown-menu li a:hover {
    color: var(--color-naranja-primario) !important;
    background-color: rgba(0,0,0,0.02);
}

/* ==========================================================================
   ICONO DEL CARRITO EN EL NAVBAR
   ========================================================================== */
.cart-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0.5rem;
    color: var(--color-texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    margin-left: 1rem;
}

.cart-nav-btn:hover {
    color: var(--color-naranja-primario);
}

.cart-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.cart-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--color-naranja-primario);
    color: var(--color-blanco);
    font-size: 0.7rem;
    font-family: var(--fuente-h3-h4);
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ==========================================================================
   CART DRAWER (CARRITO LATERAL)
   ========================================================================== */
.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -450px;
    width: 100%;
    max-width: 450px;
    height: 100%;
    background-color: var(--color-fondo-general);
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cart-drawer.active {
    right: 0;
}

.cart-header {
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h3 {
    font-family: var(--fuente-h1-h2);
    font-size: 1.8rem;
    margin: 0;
}

.cart-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--color-texto-secundario);
    transition: color 0.25s ease;
    display: flex;
    align-items: center;
}

.cart-close-btn:hover {
    color: var(--color-naranja-primario);
}

/* Cart Body & Items List */
.cart-body {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.cart-empty-message {
    text-align: center;
    color: var(--color-texto-secundario);
    font-family: var(--fuente-cuerpo);
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.cart-item {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.cart-item-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-family: var(--fuente-h3-h4);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-texto-principal);
    margin: 0 0 0.3rem 0;
}

.cart-item-subtitle {
    font-family: var(--fuente-cuerpo);
    font-size: 0.8rem;
    color: var(--color-texto-secundario);
    margin: 0 0 0.5rem 0;
}

.cart-item-price {
    font-family: var(--fuente-h1-h2);
    font-size: 1.1rem;
    color: var(--color-naranja-primario);
    margin: 0;
}

/* Quantity Control & Remove */
.cart-item-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
}

.cart-item-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-texto-secundario);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.25s ease;
}

.cart-item-remove:hover {
    color: var(--color-naranja-primario);
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.quantity-btn {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-texto-secundario);
    transition: background-color 0.25s ease;
}

.quantity-btn:hover {
    background-color: rgba(0,0,0,0.03);
}

.quantity-value {
    width: 30px;
    text-align: center;
    font-family: var(--fuente-h3-h4);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Cart Footer */
.cart-footer {
    padding: 2.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
    background-color: rgba(0,0,0,0.01);
}

.currency-selector-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.currency-label {
    font-family: var(--fuente-h3-h4);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-texto-secundario);
    letter-spacing: 0.05em;
}

.currency-options {
    display: flex;
    background-color: rgba(0,0,0,0.04);
    padding: 2px;
    border-radius: 6px;
}

.currency-btn {
    background: none;
    border: none;
    padding: 0.4rem 1rem;
    font-family: var(--fuente-h3-h4);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-texto-secundario);
    transition: all 0.25s ease;
}

.currency-btn.active {
    background-color: var(--color-blanco);
    color: var(--color-naranja-primario);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.cart-totals {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
}

.cart-total-label {
    font-family: var(--fuente-h3-h4);
    font-weight: 700;
    font-size: 1.1rem;
}

.cart-total-value {
    font-family: var(--fuente-h1-h2);
    font-size: 2.2rem;
    color: var(--color-naranja-primario);
}

.cart-checkout-btn {
    width: 100%;
    text-align: center;
    font-family: var(--fuente-h3-h4);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 1.2rem;
}

/* ==========================================================================
   4-COLUMN GRID LAYOUT (HERRAMIENTAS DE GESTIÓN)
   ========================================================================== */
#herramientas .productos-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Card Button Styling */
.card-actions-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: auto;
    width: 100%;
}

.btn-secondary-outline {
    background: none;
    border: 1.5px solid var(--color-texto-secundario);
    color: var(--color-texto-secundario);
    padding: 0.8rem 1.5rem;
    font-family: var(--fuente-h3-h4);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-secondary-outline:hover {
    border-color: var(--color-naranja-primario);
    color: var(--color-naranja-primario);
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ========================================================================== */
@media (max-width: 1100px) {
    #herramientas .productos-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    /* Mobile Dropdown styles */
    #nav-links li:hover .dropdown-menu {
        opacity: 0;
        visibility: hidden;
    }

    #nav-links li.active-mobile-dropdown .dropdown-menu {
        display: flex;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding-left: 1.5rem;
        background: transparent;
        border: none;
        text-align: left;
    }

    #nav-links li.active-mobile-dropdown .dropdown-menu li a {
        text-align: left;
        padding: 0.6rem 0 !important;
    }

    #nav-links li.active-mobile-dropdown .dropdown-menu::before {
        display: none;
    }
    
    .cart-drawer {
        max-width: 100%;
        right: -100%;
    }
}

@media (max-width: 580px) {
    #herramientas .productos-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DELICATE TEXT LINKS FOR SERVICES / PRODUCTS
   ========================================================================== */
.link-details {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--fuente-h3-h4);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-texto-secundario);
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 1.2rem;
    padding-bottom: 2px;
    border-bottom: 1.5px solid transparent;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.link-details:hover {
    color: var(--color-naranja-primario);
    border-bottom-color: var(--color-naranja-primario);
}

#asesorias-block .productos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem 4rem;
}

@media (max-width: 992px) {
    #asesorias-block .productos-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

/* ==========================================================================
   HERRAMIENTAS DE GESTIÓN LAB: DISEÑO PREMIUM SPLIT
   ========================================================================== */
.tools-section-highlighted {
    background-color: var(--color-fondo-secundario) !important;
    margin-top: 8rem;
}

.herramientas-split-header {
    display: grid;
    grid-template-columns: 1fr auto 1.3fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto 5rem auto;
    align-items: center;
}

.header-col-left {
    text-align: left;
}

.tools-subtitle {
    font-family: var(--fuente-h3-h4);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-naranja-primario);
    margin-bottom: 0.5rem;
    display: block;
}

.tools-main-title {
    font-family: var(--fuente-h1-h2);
    font-size: 3.2rem;
    line-height: 1.1;
    font-weight: 300;
    color: var(--color-texto-principal);
    margin: 0;
}

.header-divider {
    width: 2px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--color-naranja-primario) 50%, transparent);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    opacity: 0.35;
}

.header-col-right {
    text-align: left;
}

.tools-quote {
    font-family: var(--fuente-h1-h2);
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--color-texto-secundario);
    font-style: italic;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.tools-desc {
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-texto-secundario);
    font-weight: 300;
}

.tools-4-cols-clean {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3rem 2rem !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tarjetas limpias, sin envoltorio de tarjeta tradicional */
.tools-column-card {
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left;
}

.tools-column-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

@media (max-width: 1100px) {
    .herramientas-split-header {
        grid-template-columns: 1fr auto 1fr;
        gap: 2.5rem;
    }
    
    .tools-4-cols-clean {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3rem 2.5rem !important;
    }
}

@media (max-width: 768px) {
    .herramientas-split-header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .header-divider {
        width: 100%;
        height: 1px;
    }
    
    .tools-4-cols-clean {
        grid-template-columns: 1fr !important;
        gap: 3.5rem !important;
    }
}

/* Ocultar carrito hasta lanzamiento */
.cart-nav-btn {
    display: none !important;
}

/* Botón flotante de WhatsApp */
.whatsapp-btn-floating {
    position: fixed;
    bottom: 4.5rem;
    right: 2rem;
    background-color: #25D366;
    color: #FFFFFF !important;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    text-decoration: none;
}

.whatsapp-btn-floating svg {
    width: 32px;
    height: 32px;
}

.whatsapp-btn-floating:hover {
    transform: scale(1.1) translateY(-3px);
    background-color: #20BA56;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

@media (max-width: 768px) {
    .whatsapp-btn-floating {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }
    .whatsapp-btn-floating svg {
        width: 26px;
        height: 26px;
    }
}