/* Custom CSS variables based on site theme and style - Vida Visual Design Theme: Light Split */
:root {
    --claridad-fondo-claro: #fcfbf9;
    --claridad-superficie: #f3f0ea;
    --claridad-acento-principal: #2c5e43;
    --claridad-acento-claro: #e8f2ec;
    --claridad-texto-oscuro: #1b2a21;
    --claridad-texto-secundario: #4d5b52;
    --claridad-borde-suave: #dfdacd;
    --claridad-sombras-elevadas: 0 10px 30px rgba(44, 94, 67, 0.08);
    --claridad-borde-redondeado: 16px;
    
    --fuente-cabecera: 'Raleway', sans-serif;
    --fuente-cuerpo: 'Open Sans', sans-serif;
}

/* Base Restets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--fuente-cuerpo);
    scroll-behavior: smooth;
}

body.cuerpo-principal-ojo {
    background-color: var(--claridad-fondo-claro);
    color: var(--claridad-texto-oscuro);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Headings font implementation */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-cabecera);
    font-weight: 700;
    color: var(--claridad-texto-oscuro);
    line-height: 1.25;
}

/* Scroll-driven animations (CSS only) */
@keyframes focusScrollFade {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.ocular-scroll-reveal {
    animation: focusScrollFade linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
}

@keyframes progress-grow {
    to { width: 100%; }
}

.barra-progreso-ocular-contenedor {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 10000;
    background: transparent;
}

.barra-progreso-ocular-relleno {
    height: 100%;
    width: 0;
    background: var(--claridad-acento-principal);
    animation: progress-grow linear;
    animation-timeline: scroll();
}

/* 1. Header & Navigation Styles (Preset B: Light Split) */
.anuncio-superior-comunidad {
    background-color: var(--claridad-acento-principal);
    padding: 10px 20px;
    text-align: center;
}

.anuncio-texto-enlace {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

.anuncio-flecha-enlace {
    color: #ffffff;
    text-decoration: underline;
    margin-left: 5px;
}

.cabecera-marcar-navegacion {
    background-color: var(--claridad-fondo-claro);
    border-bottom: 1px solid var(--claridad-borde-suave);
    position: sticky;
    top: 0;
    z-index: 999;
}

.cabecera-limitador-interno {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enlace-logotipo-principal {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--claridad-texto-oscuro);
}

.icono-svg-ojo-logo {
    width: 32px;
    height: 32px;
    stroke: var(--claridad-acento-principal);
}

.nombre-marca-texto {
    font-family: var(--fuente-cabecera);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hamburger menu (CSS-Only) */
.controlador-hamburguesa-input {
    display: none;
}

.icono-hamburguesa-visual {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
}

.icono-hamburguesa-visual span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--claridad-texto-oscuro);
    border-radius: 9px;
    transition: all 0.3s ease;
}

.esquema-navegacion-principal {
    display: block;
}

.lista-enlaces-cabecera {
    display: flex;
    list-style: none;
    gap: 30px;
}

.elemento-enlace-cabecera {
    text-decoration: none;
    color: var(--claridad-texto-secundario);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
    text-transform: uppercase;
}

.elemento-enlace-cabecera:hover,
.elemento-enlace-cabecera.activo {
    color: var(--claridad-acento-principal);
}

/* 2. Hero Split Preset B Styles */
.seccion-hero-split {
    display: flex;
    min-height: 85vh;
}

.hero-split-lado-informacion {
    flex: 1 1 55%;
    background-color: var(--claridad-superficie);
    display: flex;
    align-items: center;
    padding: 10dvh 5%;
}

.caja-interna-hero-info {
    max-width: 600px;
}

.etiqueta-pequena-tema {
    font-family: var(--fuente-cabecera);
    font-size: 0.85rem;
    color: var(--claridad-acento-principal);
    font-weight: 800;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 15px;
}

.encabezado-hero-gigante {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.descripcion-corta-hero {
    font-size: 1.15rem;
    color: var(--claridad-texto-secundario);
    margin-bottom: 35px;
}

.bloque-acciones-hero {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.boton-primario-accion {
    display: inline-block;
    background-color: var(--claridad-acento-principal);
    color: #ffffff;
    text-decoration: none;
    padding: 15px 35px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--claridad-borde-redondeado);
    box-shadow: var(--claridad-sombras-elevadas);
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    text-align: center;
}

.boton-primario-accion:hover {
    background-color: var(--claridad-texto-oscuro);
    transform: translateY(-2px);
}

.boton-secundario-accion {
    display: inline-block;
    background-color: transparent;
    color: var(--claridad-texto-oscuro);
    text-decoration: none;
    padding: 15px 35px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--claridad-borde-redondeado);
    border: 2px solid var(--claridad-texto-oscuro);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
    text-align: center;
}

.boton-secundario-accion:hover {
    background-color: var(--claridad-texto-oscuro);
    color: #ffffff;
    transform: translateY(-2px);
}

.hero-split-lado-imagen {
    flex: 1 1 45%;
    background-size: cover;
    background-position: center;
}

/* 3. Magazine Content Strip (Preset B) */
.seccion-mosaico-revista {
    padding: 10dvh 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.imagen-decorativa-ancho-completo-caja {
    width: 100%;
    height: 45vh;
    border-radius: var(--claridad-borde-redondeado);
    overflow: hidden;
    margin-bottom: 50px;
}

.imagen-ancho-completo-fondo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bloque-limite-columnas-revista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.columna-revista-individual {
    border-top: 3px solid var(--claridad-acento-principal);
    padding-top: 25px;
}

.titulo-columna-revista {
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.texto-columna-revista {
    color: var(--claridad-texto-secundario);
    font-size: 0.95rem;
}

/* 4. Masonry Features Section (Preset B) */
.seccion-masoneria-beneficios {
    background-color: var(--claridad-superficie);
    padding: 10dvh 30px;
}

.encabezado-seccion-centrado {
    max-width: 700px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.titulo-seccion-general {
    font-size: 2rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.subtexto-seccion-general {
    font-size: 1.1rem;
    color: var(--claridad-texto-secundario);
}

.red-masoneria-contenedor {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.tarjeta-masoneria-item {
    background-color: var(--claridad-fondo-claro);
    border-radius: var(--claridad-borde-redondeado);
    padding: 40px;
    box-shadow: var(--claridad-sombras-elevadas);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s ease;
}

.tarjeta-masoneria-item:hover {
    transform: translateY(-5px);
}

.altura-pequena {
    min-height: 250px;
}

.altura-grande {
    min-height: 340px;
}

.icono-tarjeta-contenedor {
    background-color: var(--claridad-acento-claro);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.icono-svg-tarjeta {
    width: 28px;
    height: 28px;
    stroke: var(--claridad-acento-principal);
}

.titulo-tarjeta-masoneria {
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.cuerpo-tarjeta-masoneria {
    color: var(--claridad-texto-secundario);
    font-size: 0.95rem;
}

/* 5. Horizontal Progress Track (Preset B) */
.seccion-ruta-aprendizaje {
    padding: 10dvh 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.contenedor-pistas-progreso-horizontal {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 30px;
}

.contenedor-pistas-progreso-horizontal::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    border-top: 2px dashed var(--claridad-borde-suave);
    z-index: 1;
}

.paso-ruta-individual {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}

.circulo-numero-ruta {
    width: 80px;
    height: 80px;
    background-color: var(--claridad-fondo-claro);
    border: 3px solid var(--claridad-acento-principal);
    color: var(--claridad-acento-principal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-family: var(--fuente-cabecera);
    font-weight: 800;
    margin: 0 auto 25px auto;
    box-shadow: var(--claridad-sombras-elevadas);
}

.paso-ruta-individual:first-of-type .circulo-numero-ruta {
    background-color: var(--claridad-acento-principal);
    color: #ffffff;
}

.titulo-paso-ruta {
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.descripcion-paso-ruta {
    font-size: 0.9rem;
    color: var(--claridad-texto-secundario);
}

/* 6. CTA Strip (Preset B) */
.franja-accion-colores-acento {
    background-color: var(--claridad-acento-principal);
    padding: 10dvh 5%;
    text-align: center;
}

.caja-limite-accion-franja {
    max-width: 800px;
    margin: 0 auto;
}

.titulo-franja-accion-primaria {
    color: #ffffff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.descripcion-franja-accion-primaria {
    color: var(--claridad-acento-claro);
    font-size: 1.1rem;
    margin-bottom: 40px;
}

.boton-accion-franja-blanco {
    display: inline-block;
    background-color: #ffffff;
    color: var(--claridad-acento-principal);
    text-decoration: none;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--claridad-borde-redondeado);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-transform: uppercase;
}

.boton-accion-franja-blanco:hover {
    background-color: var(--claridad-superficie);
    transform: translateY(-2px);
}

/* 7. Cookie Banner */
.banner-cookies-fijo-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--claridad-texto-oscuro);
    color: #ffffff;
    padding: 20px 30px;
    z-index: 9999;
}

.contenido-banner-cookies-caja {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.texto-banner-cookies {
    font-size: 0.95rem;
    line-height: 1.4;
}

.enlace-cookies-politica {
    color: var(--claridad-acento-claro);
    text-decoration: underline;
}

.botones-banner-cookies-grupo {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.boton-cookie-aceptar {
    background-color: var(--claridad-acento-principal);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
}

.boton-cookie-rechazar {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
}

/* 8. Footer */
.pie-pagina-sitio-completo {
    background-color: var(--claridad-texto-oscuro);
    color: #ffffff;
    padding: 8dvh 30px 4dvh 30px;
}

.pie-pagina-contenido-interno {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}

.bloque-pie-marca-social {
    flex: 1 1 50%;
}

.enlace-logotipo-principal.color-invertido {
    color: #ffffff;
}

.enlace-logotipo-principal.color-invertido .icono-svg-ojo-logo {
    stroke: #ffffff;
}

.parrafo-descargo-responsabilidad-legal {
    color: #b0c0b5;
    font-size: 0.82rem;
    line-height: 1.5;
    margin-top: 25px;
}

.bloque-pie-enlaces-legales {
    flex: 1 1 30%;
}

.titulo-lista-enlaces-pie {
    color: #ffffff;
    font-size: 1.1rem;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.lista-enlaces-legales-pie {
    list-style: none;
}

.lista-enlaces-legales-pie li {
    margin-bottom: 12px;
}

.enlace-legal-pie-item {
    color: #b0c0b5;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.enlace-legal-pie-item:hover {
    color: #ffffff;
}

.pie-pagina-zona-derechos {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid #2d3f34;
    padding-top: 30px;
    text-align: center;
}

.texto-derechos-reservados-ano {
    color: #83978b;
    font-size: 0.85rem;
}

/* 9. Expert Page Styles */
.cabecera-generica-seccion {
    background-color: var(--claridad-superficie);
    padding: 10dvh 30px;
    text-align: center;
}

.limitador-generico-seccion-cabecera {
    max-width: 800px;
    margin: 0 auto;
}

.descripcion-seccion-centro {
    font-size: 1.15rem;
    color: var(--claridad-texto-secundario);
    margin-top: 15px;
}

.seccion-mitad-biografia {
    display: flex;
}

.biografia-lado-imagen {
    flex: 1 1 50%;
    background-size: cover;
    background-position: center;
}

.biografia-lado-informacion {
    flex: 1 1 50%;
    padding: 10dvh 7%;
    display: flex;
    align-items: center;
}

.caja-texto-biografia {
    max-width: 550px;
}

.titulo-biografia {
    font-size: 2.2rem;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.parrafo-biografia {
    color: var(--claridad-texto-secundario);
    font-size: 1rem;
    margin-bottom: 20px;
}

.firma-declarativa-caja {
    margin-top: 35px;
    border-left: 2px solid var(--claridad-acento-principal);
    padding-left: 15px;
}

.nombre-firma-experto {
    display: block;
    font-size: 1.1rem;
    color: var(--claridad-texto-oscuro);
}

.rol-firma-experto {
    font-size: 0.85rem;
    color: var(--claridad-texto-secundario);
}

/* 10. Stats Blocks (Preset B) */
.seccion-bloques-estadisticos {
    background-color: var(--claridad-superficie);
    padding: 8dvh 30px;
}

.red-estadisticas-horizontal {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

.bloque-estadistico-item {
    flex: 1;
    text-align: center;
}

.numero-estadistico-valor {
    font-family: var(--fuente-cabecera);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: var(--claridad-acento-principal);
    line-height: 1;
    margin-bottom: 10px;
}

.descripcion-estadistico-texto {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--claridad-texto-secundario);
}

/* 11. CSS Accordion Approaches (Preset B) */
.seccion-acordeones-enfoque {
    padding: 10dvh 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.acordeon-grupo-contenedor {
    display: grid;
    gap: 20px;
}

.elemento-tarjeta-acordeon {
    background-color: var(--claridad-fondo-claro);
    border: 1px solid var(--claridad-borde-suave);
    border-radius: var(--claridad-borde-redondeado);
    overflow: hidden;
    box-shadow: var(--claridad-sombras-elevadas);
}

.cabecera-acordeon-interactiva {
    padding: 25px 30px;
    font-family: var(--fuente-cabecera);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--claridad-texto-oscuro);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--claridad-fondo-claro);
    transition: background-color 0.3s ease;
    text-transform: uppercase;
}

.cabecera-acordeon-interactiva::-webkit-details-marker {
    display: none;
}

.numero-acordeon-indicativo {
    color: var(--claridad-acento-principal);
    margin-right: 10px;
    font-weight: 800;
}

.icono-flecha-acordeon {
    width: 20px;
    height: 20px;
    stroke: var(--claridad-texto-secundario);
    transition: transform 0.3s ease;
}

.elemento-tarjeta-acordeon[open] .icono-flecha-acordeon {
    transform: rotate(180deg);
}

.cuerpo-acordeon-contenido {
    padding: 0 30px 30px 30px;
    font-size: 0.95rem;
    color: var(--claridad-texto-secundario);
    border-top: 1px solid transparent;
}

/* 12. Reserve Split Columns & Form Styles (Preset B) */
.seccion-formulario-split {
    padding: 10dvh 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.contenedor-columnas-formulario-asimetrico {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.columna-informacion-detalles {
    flex: 1 1 45%;
    display: grid;
    gap: 30px;
}

.tarjeta-detalles-reserva {
    background-color: var(--claridad-superficie);
    border-radius: var(--claridad-borde-redondeado);
    padding: 40px;
}

.cabecera-tarjeta-detalles {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.circulo-icono-detalles {
    width: 48px;
    height: 48px;
    background-color: var(--claridad-acento-claro);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-svg-reserva {
    width: 24px;
    height: 24px;
    stroke: var(--claridad-acento-principal);
}

.titulo-detalle-tarjeta {
    font-size: 1.25rem;
    margin: 0;
    text-transform: uppercase;
}

.lista-viñetas-reserva {
    list-style: none;
}

.lista-viñetas-reserva li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--claridad-texto-secundario);
    margin-bottom: 12px;
}

.punto-color-viñeta {
    width: 10px;
    height: 10px;
    background-color: var(--claridad-acento-principal);
    border-radius: 50%;
    flex-shrink: 0;
}

.descripcion-tarjeta-detalles-breve {
    font-size: 0.95rem;
    color: var(--claridad-texto-secundario);
    margin-bottom: 20px;
}

.contacto-directo-parrafo-correo {
    font-size: 0.9rem;
    font-weight: 600;
}

.enlace-correo-directo {
    color: var(--claridad-acento-principal);
    text-decoration: underline;
}

.columna-formulario-interactivo {
    flex: 1 1 55%;
}

.formulario-reserva-caja {
    background-color: var(--claridad-fondo-claro);
    border: 1px solid var(--claridad-borde-suave);
    border-radius: var(--claridad-borde-redondeado);
    padding: 50px;
    box-shadow: var(--claridad-sombras-elevadas);
}

.titulo-cabecera-formulario {
    font-size: 1.7rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.instruccion-formulario-sub {
    font-size: 0.95rem;
    color: var(--claridad-texto-secundario);
    margin-bottom: 35px;
}

.grupo-campo-formulario {
    margin-bottom: 25px;
}

.etiqueta-campo-formulario {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: var(--claridad-texto-oscuro);
}

.input-campo-texto {
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--claridad-borde-suave);
    background-color: var(--claridad-superficie);
    color: var(--claridad-texto-oscuro);
    font-size: 1rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.input-campo-texto:focus {
    outline: none;
    border-color: var(--claridad-acento-principal);
    background-color: var(--claridad-fondo-claro);
}

.input-campo-textarea {
    width: 100%;
    height: 120px;
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--claridad-borde-suave);
    background-color: var(--claridad-superficie);
    color: var(--claridad-texto-oscuro);
    font-size: 1rem;
    resize: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.input-campo-textarea:focus {
    outline: none;
    border-color: var(--claridad-acento-principal);
    background-color: var(--claridad-fondo-claro);
}

.grupo-checkbox-formulario {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 35px;
}

.checkbox-formulario-input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--claridad-acento-principal);
}

.etiqueta-checkbox-formulario {
    font-size: 0.85rem;
    color: var(--claridad-texto-secundario);
    line-height: 1.4;
}

.enlace-checkbox-legal {
    color: var(--claridad-texto-oscuro);
    text-decoration: underline;
    font-weight: 600;
}

.ancho-total-boton {
    width: 100%;
}

/* 13. Legal texts & Terms pages */
.seccion-texto-legal-completo {
    padding: 10dvh 30px;
}

.limitador-legal-interno {
    max-width: 800px;
    margin: 0 auto;
}

.limitador-legal-interno h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.fecha-actualizacion-legal {
    font-size: 0.9rem;
    color: var(--claridad-texto-secundario);
    margin-bottom: 40px;
}

.limitador-legal-interno h2 {
    font-size: 1.8rem;
    margin: 40px 0 20px 0;
    text-transform: uppercase;
}

.limitador-legal-interno h3 {
    font-size: 1.3rem;
    margin: 30px 0 15px 0;
    text-transform: uppercase;
}

.limitador-legal-interno p {
    color: var(--claridad-texto-secundario);
    font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.7;
}

.divisor-legal-seccion {
    border: none;
    border-top: 1px solid var(--claridad-borde-suave);
    margin: 50px 0;
}

/* Responsive Tablet and Mobile layout adjustments */
@media (max-width: 991px) {
    .cabecera-limitador-interno {
        padding: 15px 20px;
    }

    .icono-hamburguesa-visual {
        display: flex;
    }

    .esquema-navegacion-principal {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100dvh;
        background-color: var(--claridad-fondo-claro);
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        padding: 100px 30px;
        transition: left 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 1000;
    }

    .lista-enlaces-cabecera {
        flex-direction: column;
        gap: 25px;
    }

    .controlador-hamburguesa-input:checked ~ .esquema-navegacion-principal {
        left: 0;
    }

    .controlador-hamburguesa-input:checked ~ .icono-hamburguesa-visual span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .controlador-hamburguesa-input:checked ~ .icono-hamburguesa-visual span:nth-child(2) {
        opacity: 0;
    }

    .controlador-hamburguesa-input:checked ~ .icono-hamburguesa-visual span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }

    /* Hero */
    .seccion-hero-split {
        flex-direction: column;
    }

    .hero-split-lado-imagen {
        min-height: 350px;
    }

    /* Magazine columns */
    .bloque-limite-columnas-revista {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Masonry Feature columns */
    .red-masoneria-contenedor {
        grid-template-columns: 1fr;
    }

    /* Horizontal Progress Track -> Verticalized for Mobile */
    .contenedor-pistas-progreso-horizontal {
        flex-direction: column;
        gap: 40px;
    }

    .contenedor-pistas-progreso-horizontal::before {
        display: none;
    }

    /* Stats blocks */
    .red-estadisticas-horizontal {
        flex-wrap: wrap;
        gap: 30px;
    }

    .bloque-estadistico-item {
        flex: 1 1 45%;
    }

    /* Bio splits */
    .seccion-mitad-biografia {
        flex-direction: column;
    }

    .biografia-lado-imagen {
        min-height: 300px;
    }

    /* Reserve split column */
    .contenedor-columnas-formulario-asimetrico {
        flex-direction: column;
        gap: 50px;
    }

    .columna-informacion-detalles,
    .columna-formulario-interactivo {
        width: 100%;
    }

    .contenido-banner-cookies-caja {
        flex-direction: column;
        text-align: center;
    }

    .pie-pagina-contenido-interno {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 575px) {
    .bloque-estadistico-item {
        flex: 1 1 100%;
    }

    .formulario-reserva-caja {
        padding: 25px;
    }
}