/* =========================================
   1. IMPORTACIÓN DE FUENTES (Custom Fonts)
   ========================================= */
@font-face {
    font-family: 'Strong';
    /* Asegúrese que el nombre del archivo coincida exactamente (mayúsculas/minúsculas) */
    src: url('fonts/Strong.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

/* =========================================
   2. VARIABLES DE DISEÑO (Su Paleta)
   ========================================= */
:root {
    /* Paleta de Colores Bonaparte */
    --color-deep-black: #1c1a1b;      /* Fondo Principal */
    --color-dark-blue-black: #1b1f23; /* Fondos Secundarios (Footer/Nav) */
    --color-slate-gray: #4d455c;      /* Textos secundarios o bordes */
    --color-dark-purple: #201927;     /* Detalles sutiles */
    --color-light-gray: #eeeef2;      /* Texto Principal */
    --color-deep-red: #4d0b0f;        /* Acentos y Títulos destacados */
    --color-old-gold: #D4AF37; 
    --color-imperial-blue: #1B2631; 
    --color-success-green: #1E5631; 

    /* --- NUEVOS GRADIENTES --- */
    /* Un gradiente dorado para botones premium o detalles */
    --gradient-gold: linear-gradient(135deg, #F1D475 0%, #D4AF37 50%, #B8860B 100%);

    /* Estilo Cromado/Plateado para Botones */
    --gradient-chrome: linear-gradient(135deg, #e0e0e0 0%, #9e9e9e 50%, #e0e0e0 100%);
    --color-text-dark: #000000;       /* Texto sobre botones cromados */

    /* Tipografías */
    --font-primary: 'Strong', Impact, sans-serif; /* Fallback a Impact si falla Strong */
    --font-secondary: 'Century Gothic', 'Tw Cen MT', sans-serif;

    /* Lenguaje Visual */
    --border-radius: 12px; /* Esquinas redondeadas */
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra elegante y profunda */
}

/* =========================================
   3. ESTILOS GENERALES (Reset & Body)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-deep-black);
    color: var(--color-light-gray);
    font-family: var(--font-secondary); /* Century Gothic para lectura */
    line-height: 1.6;
    overflow-x: hidden;
}

/* CLASES DE UTILIDAD DE COLOR */
.texto-dorado { color: var(--color-old-gold) !important; }
.texto-azul { color: #3498DB !important; /* Un tono más claro para lectura sobre negro */ }
.bg-azul-imperio { background-color: var(--color-imperial-blue) !important; }
.borde-dorado { border-color: var(--color-old-gold) !important; }

/* =========================================
   4. TIPOGRAFÍA DE IMPACTO
   ========================================= */
h1, h2, h3, h4 {
    font-family: var(--font-primary); /* Strong para títulos */
    letter-spacing: 1px; /* Un poco de aire para elegancia */
    margin-bottom: 1rem;
}

h1 {
    color: var(--color-deep-black);
    font-size: 2rem; /* Grande e imponente */
}

h2 {
    color: var(--color-light-gray); /* Opcional: Probar con Deep Red */
    border-bottom: 2px solid var(--color-deep-red); /* Detalle de marca */
    display: inline-block;
    padding-bottom: 5px;
}

/* Resalte de palabras clave en párrafos */
strong {
    color: var(--color-deep-red);
}



/* =========================================
   5. COMPONENTES VISUALES
   ========================================= */
   
/* Imágenes */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Botones dorados con efecto shimmer al hover */
.btn-principal, .btn-servicio, button {
    display: inline-block;
    background: var(--gradient-gold);
    color: var(--color-deep-black);
    padding: 12px 24px;
    font-family: var(--font-secondary);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}

/* Rayo de luz que cruza el botón al hacer hover */
.btn-principal::after, .btn-servicio::after, button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.btn-principal:hover::after, .btn-servicio:hover::after, button:hover::after {
    left: 140%;
}

.btn-principal:hover, .btn-servicio:hover, button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 28px rgba(212, 175, 55, 0.55), 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* =========================================
   6. HEADER Y NAVEGACIÓN
   ========================================= */

header {
    /* Usamos el color Dark Blue Black (#1b1f23) para la barra, contrastando con el Deep Black (#1c1a1b) del body */
    background-color: var(--color-light-gray);
    padding: 0.2rem 5%;
    /* Convertimos el header en un contenedor flexible */
    display: flex;
    align-items: center;

    justify-content: space-between; /* Empuja el h1/p a la izquierda y el nav a la derecha */

    position: fixed; /* Mantiene la barra fija al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que la navegación esté siempre por encima de otros elementos */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
    /* ... más reglas ... */
    /* AÑADIR ESTA LÍNEA: Prepara el header para animar el cambio de fondo y sombra */
    /* CLAVE: La transición. Esto suaviza todos los cambios de estilo. */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* style.css (Añadir a la sección de Header o Utilidades) */

/* Clase para invertir el color del contenido del header */
.invert-content .header-brand h1,
.invert-content nav a {
    /* El texto de la marca y los  enlaces de navegación cambian a un color oscuro cuando se activa */
    color: var(--color-light-gray) !important; 
    transition: color 0.3s ease; /* Transición suave para el cambio de color de la fuente */
}

/* Manejar el hover para que siga siendo visible (Ejemplo: Oro Viejo) */
.invert-content nav a:hover {
    color: var(--color-old-gold) !important;
}

/* Invertir el color de la línea inferior del hover */
.invert-content nav a::after {
    background-color: var(--color-old-gold); 
}

.header-scrolled .header-brand h1,
.header-scrolled nav a {
color: var(--color-light-gray) !important; /* O el color claro de su paleta */
}

/* 2. Los enlaces del menú */
.header-scrolled nav ul li a {
    color: var(--color-light-gray) !important;
}

/* 3. Asegurar que el hover siga funcionando en el estado scroll */
.header-scrolled nav ul li a:hover {
    color: var(--color-old-gold) !important;
}

.header-scrolled .logo-header.logo-dark {
    opacity: 0;
    visibility: hidden;
}

.header-scrolled .logo-header.logo-light {
    opacity: 1;
    visibility: visible;
}

.header-brand {
    position: relative; /* Base para el posicionamiento de los hijos */
    display: flex; /* Convierte este contenedor en Flexbox */
    align-items: center; /* Alinea verticalmente el logo y el h1 */
}

header h1 {
    font-size: 1.2rem; /* Tamaño más pequeño para que no compita tanto con el logo */
    margin: 0; /* Aseguramos que no tenga márgenes extras */
}

/* Aplicamos un padding lateral para que el contenido no toque los bordes */
/* Se aplica el padding a la clase del nuevo contenedor y al nav */

/* Estilo del logo (imagen) */
.logo-header {
    height: 70px; 
    width: auto;
    transition: opacity 0.3s ease; /* Transición suave de visibilidad */ 
    /* AJUSTADO: Sombra más sutil para que no sea tan brillante estando solo */
    /* Opcional: para un look más "plano" sin brillo, simplemente elimine la línea box-shadow */
}

/* Por defecto: Ocultar el logo claro */
.logo-header.logo-light {
    position: absolute;
    left: 0;
    opacity: 0; /* Invisible por defecto */
    visibility: hidden;
}

/* Cuando se activa la inversión: 
   1. Ocultar el logo oscuro
   2. Mostrar el logo claro
*/
.invert-content .logo-header.logo-dark {
    display: none;
}
.invert-content .logo-header.logo-light {
    display: block;
}

/* Estilo del logo (h1 y p) en el encabezado */
header h1 {
    font-size: 1.2rem; /* O 1.2rem si prefiere más pequeño, pero 1.5 es para que destaque más solo */
    margin: 0; /* Eliminamos el margen por defecto */
    /* El color y font-family ya los hereda del selector h1 general */
}

header p {
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    color: var(--color-slate-gray);
    margin-top: -5px; /* Acercamos el eslogan al h1 */
}

/* Ocultamos el título pequeño por defecto para un look más limpio */
header p {
    display: none;
}

/* Estilos de la navegación (nav) */
nav ul {
    list-style: none; /* Elimina las viñetas */
    display: flex; /* Coloca los ítems horizontalmente */
    gap: 20px; /* Espacio entre los ítems */
}

/* Estilo de los enlaces (<a>) dentro del menú */
nav a {
    color: var(--color-dark-blue-black);
    text-decoration: none; /* Elimina el subrayado */
    text-transform: uppercase;
    font-size: 0.9rem;
    padding: 5px 0;
    position: relative;
    /* Transición de color para el hover minimalista */
    transition: color 0.3s ease;
}

/* EFECTO HOVER: Movimiento y sutilidad */
nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-deep-red);
    transform: scaleX(0); /* Inicialmente oculto */
    transition: transform 0.3s ease-in-out; /* Animación suave */
    border-radius: 1px;
}

nav a:hover {
    color: var(--color-old-gold);
}

/* La animación al pasar el ratón */
nav a:hover::after {
    transform: scaleX(1); /* Muestra la línea de abajo */
}

/* =========================================
   HAMBURGER MENU (Mobile Navigation)
   ========================================= */

/* Botón hamburger — oculto en desktop */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 18px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1100;
    position: relative;
    box-shadow: none;
    overflow: visible;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-deep-black);
    border-radius: 2px;
    transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
                opacity  0.32s ease,
                background 0.3s ease;
    transform-origin: center;
}

/* Las líneas del hamburger cambian de color tras hacer scroll */
.header-scrolled .menu-toggle span {
    background: var(--color-light-gray);
}

/* Hamburger → X cuando el menú está abierto */
.menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Overlay oscuro detrás del menú lateral */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.nav-overlay.is-open {
    display: block;
    opacity: 1;
}

/* =========================================
   AJUSTES PARA LA NECESIDAD 6 (SCROLL REVEAL)
   ========================================= */

/* ESTADO INICIAL (OCULTO) */
.scroll-reveal {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out; /* Duración de la animación */
}

/* 1. MOVIMIENTO: Nace de la IZQUIERDA */
.fade-left {
    transform: translateX(-50px); /* Inicialmente movido 50px hacia la izquierda */
}

/* 2. MOVIMIENTO: Nace de la DERECHA */
.fade-right {
    transform: translateX(50px); /* Inicialmente movido 50px hacia la derecha */
}

/* ESTADO FINAL (VISIBLE) - Común a todos */
/* Esta clase será añadida por JavaScript cuando el elemento entre al viewport */
.scroll-reveal.visible {
    opacity: 1; /* Se vuelve visible */
    transform: translateX(0); /* Vuelve a su posición original (transform: none) */
}


/* Compensar el contenido de la página por la barra fija */

/* =========================================
   7. SECCIÓN DE INICIO (#inicio)
   ========================================= */

#inicio {
    /* 1. CREAMOS UN CONTENEDOR FLEXIBLE */
    display: flex; /* Convierte a #inicio en un contenedor flexible */
    flex-direction: column; /* Apila el contenido verticalmente (h2, h3, img, p) */
    align-items: center; /* Centra horizontalmente todo el contenido dentro de #inicio */
    text-align: center; /* Centra el texto de los párrafos y títulos */
    padding: 200px 5% 100px; /* Añade espacio arriba (más allá del header fijo), a los lados y abajo */
    min-height: 100vh; /* Asegura que esta sección ocupe al menos el 100% de la altura de la pantalla (vh = viewport height) */
    justify-content: center; /* Centra el contenido verticalmente si la altura es > 100vh */
    position: relative; /* CRUCIAL: Necesario para posicionar el overlay (capa oscura) */
    z-index: 1; /* Asegura que el contenido quede por encima del overlay */
    overflow: hidden; /* ¡VITAL! Evita que el zoom de la imagen se salga de la sección */
}

/* 2. OVERLAY OSCURO — Vignette cinematográfico */
#inicio::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to bottom,
            rgba(10, 10, 10, 0.80) 0%,
            rgba(28, 26, 27, 0.50) 30%,
            rgba(28, 26, 27, 0.50) 65%,
            rgba(10, 10, 10, 0.92) 100%
        ),
        url("bck/back_ground.jpg");
    background-size: cover;
    background-position: center;
    z-index: -1;

}

/* KEYFRAMES EXACTOS (con un pequeño ajuste de 'alternate' para que sea fluido) */
@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
}

@keyframes kenburns-top {
  0% {
    transform: scale(1.06);
    transform-origin: 50% 50%;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 50%;
  }
}

/* 2. ESTILO DE LOS TÍTULOS DE IMPACTO (H3) */
/* =========================================
   AJUSTES PARA LA NECESIDAD (TÍTULO STROKE ANIMADO)
   ========================================= */
/* =========================================
   EFECTO MELTING TEXT (CÓDIGO ORIGINAL)
   ========================================= */

.melting-text-container {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    background: transparent;
}

.melting-text {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    margin: 0;
    animation: melt 2.5s infinite ease-in-out;
    background: linear-gradient(90deg, #B8860B, #F1D475, var(--color-old-gold), #F1D475, #B8860B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Pseudo-elementos para el efecto de goteo */
.melting-text::before,
.melting-text::after {
    content: 'MOVILIZAMOS. RESGUARDAMOS TU REPUTACIÓN, PODER Y VENTAS.';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #B8860B, #F1D475, var(--color-old-gold), #F1D475, #B8860B);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    z-index: -1;
    transform: scaleY(1);
    opacity: 0.5;
    animation: drip 2.5s infinite ease-in-out;
}

.melting-text::after {
    filter: blur(10px);
    opacity: 0.2;
}

/* Keyframes exactos del código compartido */
@keyframes melt {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

@keyframes drip {
    0%, 100% {
        transform: scaleY(1);
        opacity: 0.5;
    }
    50% {
        transform: scaleY(1.2);
        opacity: 0.7;
    }
}

/* 4. BLOQUES DE TEXTO — base para párrafos en inicio */
#inicio p {
    max-width: 830px;
    margin: 10px auto;
    font-size: 1rem;
    color: var(--color-light-gray);
    line-height: 1.7;
}


/* MANIFESTO EDITORIAL: 3 columnas de principios en la sección hero */
.manifesto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    max-width: 960px;
    width: 100%;
    margin: 40px auto 10px;
    background: rgba(212, 175, 55, 0.15); /* El gap se vuelve una línea dorada */
}

.manifesto-item {
    padding: 28px 28px 24px;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(8px);
    text-align: left;
    border-top: 2px solid var(--color-old-gold);
    transition: background 0.3s ease;
}

.manifesto-item:hover {
    background: rgba(212, 175, 55, 0.06);
}

.manifesto-label {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-old-gold);
    margin-bottom: 12px;
    opacity: 0.9;
}

.manifesto-item p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(238, 238, 242, 0.85);
    margin: 0;
    max-width: none;
    text-align: left;
}

/* Mobile: el manifesto se convierte en 1 columna */
@media (max-width: 700px) {
    .manifesto-grid {
        grid-template-columns: 1fr;
    }
}


/* 5. DISEÑO DE LAS LISTAS DEL SECTOR PÚBLICO/PRIVADO (H4) */

#inicio h4 {
    color: var(--color-light-gray);
    font-size: 1rem;
    margin-top: 30px;
}

/* =========================================
   LISTAS 3D HORIZONTALES (ESTILO BONAPARTE)
   ========================================= */

.lista-3d-horizontal {
    display: flex; /* Mantiene los cubos uno enseguida del otro */
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.box-3d {
    position: relative;
    width: 220px; /* Ancho suficiente para tus palabras */
    height: 50px;
    transition: 1.5s; /* Cambiado a 2s para que no sea tan lento como el 4s original */
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(0deg);
    cursor: pointer;
}

.box-3d:hover {
    transform: perspective(1000px) rotateX(360deg);
}

.box-3d span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Colores Bonaparte */
    color: var(--color-old-gold); 
    background: rgba(0, 0, 0, 0.9); /* Deep Black */
    border: 1px solid var(--color-old-gold);
    
    font-family: var(--font-primary);
    text-transform: uppercase;
    font-size: 13.5px;
    letter-spacing: 1px;
    transition: 0.5s;
    box-sizing: border-box;
    box-shadow: inset 0 0 15px rgba(184, 134, 11, 0.2);
}

/* Color al girar (Hover) */
.box-3d:hover span {
    color: #fff;
    background: var(--color-deep-red); /* Sazón Bonaparte */
    border-color: #fff;
}

/* Posicionamiento de las 4 caras del cubo */
/* translateZ debe ser la mitad de la altura (50px / 2 = 25px) */
.box-3d span:nth-child(1) { transform: rotateX(0deg) translateZ(25px); }
.box-3d span:nth-child(2) { transform: rotateX(90deg) translateZ(25px); }
.box-3d span:nth-child(3) { transform: rotateX(180deg) translateZ(25px); }
.box-3d span:nth-child(4) { transform: rotateX(270deg) translateZ(25px); }

/* =========================================
   8. SECCIÓN DE SERVICIOS/METODOLOGÍA (#soluciones)
   ========================================= */

#soluciones {
    padding: 80px 0;
    background-color: var(--color-dark-blue-black);
    color: var(--color-light-gray);
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}

#soluciones > h2.neon-text {
    padding: 0 5%;
    box-sizing: border-box;
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
}

.soluciones-subtitulo {
    text-align: center;
    padding: 0 5%;
    color: rgba(238, 238, 242, 0.45);
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 20px;
}

/* --- CENTRADO Y ESTILO BASE --- */
.neon-text {
    text-align: center;
    width: 100%;
    display: block;
    margin: 50px auto;
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: #fff;
    opacity: 0;
    transition: all 0.5s ease;
}

/* --- ESTADO ACTIVADO (Neon Glow) --- */
/* Esta clase la añade el JS al hacer scroll */
.text-pop-up-top.neon-text {
    opacity: 1;
    animation: neon-flicker 2s infinite alternate, text-pop-up-top 0.5s forwards;
    
    /* Capas de sombra para el efecto Neón Oro Viejo */
text-shadow:
        0 0 4px #fff,                         /* Núcleo blanco nítido */
        0 0 12px var(--color-old-gold),       /* Brillo interno suave */
        0 0 25px var(--color-old-gold);       /* Aura exterior contenida */
}

/* --- ANIMACIÓN DE PARPADEO (Opcional para realismo) --- */
@keyframes neon-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0.7; /* Simula un pequeño fallo de energía muy elegante */
    }
}

/* Entrada desde abajo: el texto sube a su posición natural */
@keyframes text-pop-up-top {
  0% { transform: translateY(25px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}


/* =========================================
   SOLUCIONES: FILAS ALTERNADAS EDITORIAL
   (Inspiración: Patagonia / North Face)
   ========================================= */

.lista-metodologia {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cada servicio: fila de 2 columnas iguales */
.servicio-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 500px;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    position: relative;
    overflow: hidden;
    background: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

.servicio-item:last-child {
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
}

/* Número decorativo de fondo: da escala y drama */
.servicio-item:nth-child(1)::before { content: "01"; }
.servicio-item:nth-child(2)::before { content: "02"; }
.servicio-item:nth-child(3)::before { content: "03"; }

.servicio-item::before {
    position: absolute;
    font-family: var(--font-primary);
    font-size: 16rem;
    color: rgba(212, 175, 55, 0.05);
    right: 3%;
    bottom: -2rem;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    line-height: 1;
}

/* Ítems pares: imagen izquierda → número también a la izquierda */
.servicio-item:nth-child(even)::before {
    right: auto;
    left: 3%;
}

/* ALTERNANCIA: ítems pares → imagen a la izquierda */
.servicio-item:nth-child(even) .box-superior { order: 2; }
.servicio-item:nth-child(even) .box-inferior { order: 1; }

/* COLUMNA DE TEXTO */
.box-superior {
    padding: 60px 55px;
    background: var(--color-dark-blue-black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    position: relative;
    z-index: 1;
}

.box-superior h3 {
    font-size: 1.7rem;
    color: var(--color-old-gold);
    margin-bottom: 20px;
    font-family: var(--font-primary);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-left: 18px;
    border-left: 3px solid var(--color-old-gold);
    line-height: 1.3;
}

.box-superior p {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(238, 238, 242, 0.82);
    margin-bottom: 20px;
    max-width: none;
    text-align: left;
}

/* Puntos clave: lista con ícono Bonaparte */
.puntos-clave {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    padding: 18px 20px;
    border-radius: 10px;
    border-left: 2px solid rgba(212, 175, 55, 0.3);
    margin-top: 12px;
    list-style: none;
}

.puntos-clave li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 22px;
    font-size: 0.88rem;
    color: rgba(238, 238, 242, 0.7);
    line-height: 1.65;
}

.puntos-clave li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--color-old-gold);
    font-size: 0.72rem;
    top: 3px;
}

/* COLUMNA DE IMAGEN */
.box-inferior {
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.box-inferior img {
    width: 82%;
    max-width: 360px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.75));
    margin: 0;
    border-radius: 0;
    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.servicio-item:hover .box-inferior img {
    transform: scale(1.07) translateY(-6px);
}

/* Botón dorado en la columna imagen */
.btn-servicio {
    padding: 13px 36px;
    background: linear-gradient(135deg, var(--color-old-gold), #b8860b);
    color: var(--color-deep-black);
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.82rem;
    transition: all 0.3s ease;
    border: none;
    width: auto;
    display: inline-block;
    margin-top: 0;
}

.btn-servicio:hover {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
    transform: scale(1.05);
}

/* Responsive: colapsa a 1 columna en móvil */
@media (max-width: 768px) {
    .servicio-item {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .servicio-item:nth-child(even) .box-superior { order: 1; }
    .servicio-item:nth-child(even) .box-inferior { order: 2; }
    .box-superior { padding: 40px 25px; }
    .box-inferior { padding: 35px 25px; min-height: 280px; }
    .box-superior h3 { font-size: 1.35rem; }
    .servicio-item::before { font-size: 8rem; }
}

/* =========================================
   9. SECCIÓN NOSOTROS (#nosotros)
   ========================================= */

#nosotros {
    padding: 0;
    background-color: var(--color-deep-black);
    color: var(--color-light-gray);
    text-align: center;
}

/* === NOSOTROS HERO: Napoleón como fondo total — fundido continuo === */
.nosotros-hero {
    display: flex;
    align-items: center;
    min-height: 78vh;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    /* La pintura cubre toda la sección */
    background-image: url('img/napoleon.jpg');
    background-size: cover;
    background-position: 75% 5%;
}

/* Capa de fundido: oscuro desde la izquierda, desaparece hacia la derecha */
.nosotros-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 12% 65%, rgba(77, 11, 15, 0.45) 0%, transparent 52%),
        linear-gradient(to right,
            #111012 0%,
            #111012 28%,
            rgba(17, 16, 18, 0.90) 40%,
            rgba(17, 16, 18, 0.60) 55%,
            rgba(17, 16, 18, 0.25) 70%,
            transparent 88%
        ),
        linear-gradient(to bottom, #111012 0%, transparent 22%),
        linear-gradient(to top,    #111012 0%, transparent 20%);
    z-index: 0;
    pointer-events: none;
}

/* Columna de texto: flota sobre el fondo */
.nosotros-hero-text {
    width: 55%;
    max-width: 700px;
    padding: 120px 80px 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Palabra decorativa "ÓPERA" en el área del texto */
.nosotros-hero-text::before {
    content: 'ÓPERA';
    position: absolute;
    font-family: var(--font-primary);
    font-size: 18vw;
    color: rgba(212, 175, 55, 0.03);
    bottom: -1rem;
    left: 0;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.1em;
    z-index: 0;
    line-height: 1;
}

/* El div imagen ahora es solo un espaciador visual, la imagen viene del padre */
.nosotros-hero-imagen {
    flex: 1;
    position: relative;
    z-index: 1;
    min-height: 1px;
}

.nosotros-hero-imagen::before,
.nosotros-hero-imagen::after {
    display: none;
}

.nosotros-overline {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.68rem;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--color-old-gold);
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* El H2 épico — tipografía monumental */
#nosotros .nosotros-hero h2 {
    font-family: var(--font-primary);
    font-size: clamp(3.2rem, 6vw, 5.5rem);
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-light-gray);
    border-bottom: none;
    border-color: transparent;
    display: block;
    line-height: 1.05;
    margin-bottom: 28px;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
}

.nosotros-tagline {
    font-size: 0.78rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.58);
    display: block;
    margin: 0;
    max-width: none;
    position: relative;
    z-index: 1;
}

/* === NOSOTROS MANIFESTO: El párrafo sagrado === */
.nosotros-manifesto {
    max-width: 780px;
    margin: 0 auto;
    padding: 60px 5%;
    text-align: center;
    position: relative;
}

/* Línea dorada superior — como una invocación */
.nosotros-manifesto::before {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-old-gold);
    margin: 0 auto 38px;
    opacity: 0.55;
}

/* Línea dorada inferior */
.nosotros-manifesto::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-old-gold);
    margin: 38px auto 0;
    opacity: 0.55;
}

.nosotros-manifesto p {
    font-size: 1.12rem;
    line-height: 2.05;
    color: rgba(238, 238, 242, 0.84);
    margin: 0;
    text-align: center;
    max-width: none;
}

/* 1. ESTILO DE LOS TÍTULOS Y PÁRRAFOS INTRODUCTORIOS */
#nosotros h2 {
    margin-bottom: 30px;
    border-color: var(--color-slate-gray); /* Cambiamos el color de la línea bajo el título */
}

#nosotros > p {
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.2rem;
    line-height: 1.9;
    opacity: 0.85;
}

/* 2. LAYOUT DE LOS BLOQUES DE INFORMACIÓN (Experiencia, Valores, Historia) */
.bloque-experiencia, .bloque-valores, .bloque-historia {
    background-color: var(--color-dark-blue-black);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Efecto lift: las tarjetas se elevan con anillo dorado sutil */
.bloque-historia:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.22);
}

.bloque-experiencia:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.3), inset 0 0 0 0 transparent;
}

.bloque-valores-plano:hover {
    background: rgba(212, 175, 55, 0.03);
}

/* Estilo para los títulos H3 dentro de los bloques */
#nosotros h3 {
    color: var(--color-light-gray);
    font-size: 1.4rem;
    margin-bottom: 20px;
    border-bottom: none;
    display: block; /* Aseguramos que ocupe todo el ancho */
}

/* 3. Columna del Texto Principal */
.nosotros-texto-principal {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    
    /* Opcional: Ajustar el texto para que fluya mejor */
    padding-top: 10px; 
}

/* Opcional: Si el texto dentro del bloque es muy largo, puedes ajustar su alineación */
.nosotros-texto-principal p {
    text-align: justify; /* Si desea que el párrafo principal también esté justificado */
}

/* CENTRADO DE LA EXPERIENCIA */
.contenedor-centrado {
    /* Usamos Flexbox para centrar el bloque hijo */
    display: flex;
    justify-content: center; 
    margin-bottom: 50px;
}

/* Layout interno del bloque dominante: columna izq (título+CTA) | columna der (lista) */
.bloque-experiencia {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "titulo lista"
        "boton  lista";
    gap: 20px 60px;
    padding: 55px 60px;
    background: linear-gradient(135deg, var(--color-dark-blue-black) 60%, rgba(77, 11, 15, 0.08) 100%);
    border-left: 4px solid var(--color-old-gold);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#nosotros .bloque-experiencia h3 {
    grid-area: titulo;
    align-self: end;
    font-size: 1.6rem;
    color: var(--color-old-gold);
    letter-spacing: 2px;
    border-bottom: none;
    margin-bottom: 0;
}

.bloque-experiencia > .btn-principal {
    grid-area: boton;
    align-self: start;
    margin-top: 10px;
    width: fit-content;
}

.bloque-experiencia .lista-experiencia {
    grid-area: lista;
    align-self: center;
    margin-bottom: 0;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

/* ============================================
   VALORES: Lista tipográfica editorial numerada
   ============================================ */
.bloque-valores-plano {
    background: var(--color-dark-blue-black);
    box-shadow: none;
    padding: 80px 8%;
    margin: 0;
    border: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    grid-column: 1 / -1;
}

/* Marca de agua "VALORES" en el fondo */
.bloque-valores-plano::before {
    content: 'VALORES';
    position: absolute;
    font-family: var(--font-primary);
    font-size: 20vw;
    color: rgba(212, 175, 55, 0.025);
    right: -3%;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.08em;
    z-index: 0;
    line-height: 1;
}

/* Título overline: pequeño, dorado, espaciado */
#nosotros .bloque-valores-plano h3 {
    font-size: 0.80rem;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--color-old-gold);
    text-align: left;
    margin-bottom: 60px;
    opacity: 0.75;
    position: relative;
    z-index: 1;
    display: block;
    border-bottom: none;
}

.bloque-valores-plano .lista-valores {
    display: block;
    list-style: none;
    padding: 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
    text-align: left;
}

/* Cada valor: fila editorial completa */
.bloque-valores-plano .lista-valores li {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 22px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    background: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--color-light-gray);
    cursor: default;
    position: relative;
    overflow: hidden;
    transition: none;
}

.bloque-valores-plano .lista-valores li:last-child {
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

/* Línea dorada que barre de izquierda a derecha al hacer hover */
.bloque-valores-plano .lista-valores li::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0%;
    height: 1px;
    background: linear-gradient(to right, var(--color-old-gold), rgba(212, 175, 55, 0.3));
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bloque-valores-plano .lista-valores li:hover::after {
    width: 100%;
}

/* Número decorativo grande */
.valor-num {
    font-family: var(--font-primary);
    font-size: clamp(2.8rem, 4.5vw, 4rem);
    color: rgba(212, 175, 55, 0.13);
    min-width: 80px;
    line-height: 1;
    transition: color 0.4s ease, transform 0.4s ease;
    user-select: none;
}

.bloque-valores-plano .lista-valores li:hover .valor-num {
    color: var(--color-old-gold);
    transform: scale(1.08);
}

/* Texto del valor: grande, mayúsculas, espaciado */
.valor-txt {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 2.2vw, 1.65rem);
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-light-gray);
    transition: transform 0.4s ease, color 0.4s ease;
    line-height: 1.2;
}

.bloque-valores-plano .lista-valores li:hover .valor-txt {
    transform: translateX(12px);
    color: var(--color-old-gold);
}

/* Stagger de animación al hacer scroll (reveal escalonado) */
.bloque-valores-plano .lista-valores li:nth-child(1) { transition-delay: 0s; }
.bloque-valores-plano .lista-valores li:nth-child(2) { transition-delay: 0.1s; }
.bloque-valores-plano .lista-valores li:nth-child(3) { transition-delay: 0.2s; }
.bloque-valores-plano .lista-valores li:nth-child(4) { transition-delay: 0.3s; }
.bloque-valores-plano .lista-valores li:nth-child(5) { transition-delay: 0.4s; }
.bloque-valores-plano .lista-valores li:nth-child(6) { transition-delay: 0.5s; }

.bloque-valores-plano .btn-principal {
    position: relative;
    z-index: 1;
}

/* 4. ESTILO DE LAS LISTAS (Experiencia y Valores) */
.lista-experiencia, .lista-valores {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    text-align: left; /* Alineamos el texto de las listas a la izquierda */
}

.lista-experiencia li {
    padding: 13px 0 13px 0;
    border-bottom: 1px solid rgba(77, 69, 92, 0.4);
    font-size: 1rem;
    position: relative;
    transition: color 0.3s ease, padding-left 0.3s ease;
    overflow: hidden;
}

/* Línea dorada que crece desde arriba al hacer hover */
.lista-experiencia li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--color-old-gold);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.3s ease;
    border-radius: 2px;
}

.lista-experiencia li:hover {
    color: var(--color-old-gold);
    padding-left: 16px;
}

.lista-experiencia li:hover::before {
    transform: scaleY(1);
}

/* Regla base vacía — el estilo real de .lista-valores li lo define .bloque-valores-plano */
.lista-valores {
    list-style: none;
    padding: 0;
}

/* ============================================
   HISTORIA: Sección cinematográfica editorial
   ============================================ */
#nosotros .bloque-historia {
    grid-column: 1 / -1;
    position: relative;
    padding: 90px 8%;
    background: linear-gradient(135deg, #111012 0%, var(--color-dark-blue-black) 50%, rgba(77, 11, 15, 0.06) 100%);
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0;
    border-top: 1px solid rgba(212, 175, 55, 0.08);
}

/* Año "1801" como marca de agua de impacto */
#nosotros .bloque-historia::before {
    content: '1801';
    position: absolute;
    font-family: var(--font-primary);
    font-size: 28vw;
    color: rgba(212, 175, 55, 0.022);
    right: -3%;
    bottom: -4rem;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
    letter-spacing: -0.02em;
}

/* Título overline dorado */
#nosotros .bloque-historia h3 {
    font-size: 0.80rem;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--color-old-gold);
    margin-bottom: 50px;
    opacity: 0.75;
    position: relative;
    z-index: 1;
    display: block;
    border-bottom: none;
    font-size: 0.68rem;
}

/* Primer párrafo: pull-quote épico */
#nosotros .bloque-historia p:first-of-type {
    font-size: clamp(1.1rem, 1.8vw, 1.32rem);
    line-height: 2;
    color: var(--color-light-gray);
    border-left: 3px solid var(--color-old-gold);
    padding-left: 30px;
    margin-bottom: 50px;
    font-style: italic;
    position: relative;
    z-index: 1;
    max-width: 800px;
}

/* Divisor dorado entre el pull-quote y el cuerpo */
#nosotros .bloque-historia p:first-of-type::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background: var(--color-old-gold);
    margin-top: 50px;
    opacity: 0.45;
}

/* Párrafos restantes: cuerpo editorial */
#nosotros .bloque-historia p:not(:first-of-type) {
    font-size: 1rem;
    line-height: 2;
    color: rgba(238, 238, 242, 0.7);
    margin-bottom: 22px;
    text-align: left;
    position: relative;
    z-index: 1;
    max-width: 780px;
}

#nosotros .bloque-historia .btn-principal {
    position: relative;
    z-index: 1;
    margin-top: 40px;
}

/* LAYOUT DE LA SECCIÓN NOSOTROS: experiencia dominante + fila secundaria */
.contenedor-nosotros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5% 80px;
    text-align: left;
}

/* Experiencia: ocupa el ancho completo — es el bloque dominante */
.bloque-experiencia {
    grid-column: 1 / -1;
    max-width: none;
}

/* Historia: comparte fila con Valores (columna derecha) */
.bloque-historia {
    grid-column: auto;
}

/* =========================================
   10. SECCIÓN DE CONTACTO (#contacto) — Editorial de dos columnas
   ========================================= */
#contacto {
    padding: 0;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    background: var(--color-deep-black);
}

/* Grid principal: columna editorial | columna formulario */
.contacto-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 85vh;
}

/* ─── Columna izquierda: editorial ─── */
.contacto-editorial {
    padding: 100px 70px 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #111012 0%, var(--color-dark-blue-black) 100%);
    border-right: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    overflow: hidden;
}

/* Marca de agua "B" — monograma Bonaparte */
.contacto-editorial::before {
    content: 'B';
    position: absolute;
    font-family: var(--font-primary);
    font-size: 55vw;
    color: rgba(212, 175, 55, 0.018);
    right: -15%;
    bottom: -10%;
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}

.contacto-overline {
    display: block;
    font-family: var(--font-primary);
    font-size: 0.65rem;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--color-old-gold);
    margin-bottom: 28px;
    opacity: 0.75;
    position: relative;
    z-index: 1;
}

#contacto .contacto-editorial h2 {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--color-light-gray);
    border-bottom: none;
    display: block;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.contacto-editorial > p {
    font-size: 1rem;
    line-height: 1.85;
    color: rgba(238, 238, 242, 0.65);
    margin-bottom: 40px;
    max-width: 400px;
    position: relative;
    z-index: 1;
}

/* Email directo con ícono */
.contacto-email {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(238, 238, 242, 0.55);
    text-decoration: none;
    font-size: 0.88rem;
    font-family: var(--font-secondary);
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.contacto-email i {
    color: var(--color-old-gold);
    font-size: 1rem;
}

.contacto-email:hover {
    color: var(--color-old-gold);
}

/* Redes en el contacto */
.contacto-redes {
    position: relative;
    z-index: 1;
    justify-content: flex-start;
}

.contacto-redes a i {
    font-size: 1.4rem;
    color: rgba(238, 238, 242, 0.4);
    transition: color 0.3s ease, transform 0.3s ease;
}

.contacto-redes a:hover i {
    color: var(--color-old-gold);
    transform: translateY(-3px);
}

/* ─── Columna derecha: formulario ─── */
.contacto-form-wrap {
    padding: 100px 8% 100px 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(27, 31, 35, 0.6);
}

/* ─── Grupos de campo con etiqueta flotante ─── */
.form-group {
    position: relative;
    margin-bottom: 28px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 22px 16px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-bottom: 2px solid rgba(212, 175, 55, 0.25);
    border-radius: 6px 6px 0 0;
    color: var(--color-light-gray);
    font-family: var(--font-secondary);
    font-size: 0.95rem;
    transition: border-color 0.3s ease, background 0.3s ease;
    outline: none;
    resize: none;
}

.form-group textarea {
    min-height: 110px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--color-old-gold);
    background: rgba(212, 175, 55, 0.04);
}

/* Etiqueta flotante — empieza dentro del campo */
.form-group label {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(238, 238, 242, 0.38);
    font-size: 0.88rem;
    font-family: var(--font-secondary);
    font-weight: normal;
    transition: top 0.22s ease, font-size 0.22s ease, color 0.22s ease, transform 0.22s ease;
    background: transparent;
}

.form-group--textarea label {
    top: 18px;
    transform: none;
}

/* Cuando el campo tiene foco o contenido: etiqueta sube */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: 7px;
    transform: none;
    font-size: 0.68rem;
    color: var(--color-old-gold);
    letter-spacing: 1px;
}

.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: 6px;
    transform: none;
    font-size: 0.68rem;
    color: var(--color-old-gold);
    letter-spacing: 1px;
}

/* Mensaje de estado (éxito / error) */
.form-status {
    min-height: 24px;
    font-size: 0.88rem;
    margin-bottom: 10px;
    text-align: center;
    transition: opacity 0.4s ease;
}

.form-status.success { color: #5cb85c; }
.form-status.error   { color: #e05c5c; }

/* Botón de envío: ancho completo */
#contacto-form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
    font-size: 1rem;
    letter-spacing: 1.5px;
    padding: 16px 24px;
}

/* =========================================
   11. PIE DE PÁGINA (Footer)
   ========================================= */

footer {
    background-color: var(--color-dark-blue-black);
    padding: 40px 5%;
    color: var(--color-slate-gray); /* Usamos el gris para un look sutil */
    text-align: center;
    border-top: 2px solid var(--color-deep-red); /* Línea de acento roja superior */
    font-size: 0.9rem;
}

/* Estilo para el párrafo de Derechos de Autor */
footer p {
    margin-bottom: 20px;
}

/* Estilo del contenedor de enlaces (Redes Sociales y Legales) */
.footer-links {
    margin-top: 15px;
}

.footer-links a {
    color: var(--color-slate-gray);
    text-decoration: none;
    margin: 0 10px;
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* Efecto hover minimalista */
.footer-links a:hover {
    color: var(--color-light-gray); /* Resaltamos en rojo al pasar el mouse */
}

/* Estilo para la nueva línea (el <br> en el HTML) */
.footer-links br {
    display: none; /* Ocultamos el <br> para poder usar Flexbox en pantallas grandes */
}

/* Diseño Flexbox para los enlaces legales, colocados uno al lado del otro */
.footer-links a:last-child {
    margin-left: 20px;
}

/* =========================================
   12. DISEÑO ADAPTATIVO (MEDIA QUERIES)
   ========================================= */

/* ── Tabletas anchas: 1024px ── */
@media screen and (max-width: 1024px) {
    .contacto-editorial { padding: 80px 5% 80px 6%; }
    .contacto-form-wrap  { padding: 80px 6% 80px 5%; }
}

/* ── Tabletas: 900px ── */
@media screen and (max-width: 900px) {

    /* NOSOTROS HERO */
    .nosotros-hero {
        min-height: 55vh;
        background-position: 60% 5%;
    }
    .nosotros-hero-text {
        width: 80%;
        padding: 100px 5% 70px;
    }
    .nosotros-hero-imagen { display: none; }

    /* EXPERIENCIA: layout interno colapsa a 1 columna */
    .bloque-experiencia {
        grid-template-columns: 1fr;
        grid-template-areas:
            "titulo"
            "lista"
            "boton";
        padding: 40px 30px;
        gap: 20px;
    }

    /* CONTACTO: colapsa a 1 columna */
    .contacto-inner { grid-template-columns: 1fr; }
    .contacto-editorial {
        padding: 70px 6% 50px;
        border-right: none;
        border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    }
    .contacto-form-wrap { padding: 50px 6% 70px; }
    #contacto .contacto-editorial h2 { font-size: 2.2rem; }
}

/* ── Hamburger + servicios: 768px ── */
@media screen and (max-width: 768px) {

    /* HAMBURGER: mostrar botón */
    .menu-toggle { display: flex; }

    /* NAV: panel lateral deslizable */
    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 78%;
        max-width: 300px;
        height: 100vh;
        background: var(--color-dark-blue-black);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 80px 40px 40px;
        transition: right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        z-index: 999;
        border-left: 1px solid rgba(212, 175, 55, 0.15);
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
        margin: 0;
    }

    nav.is-open { right: 0; }

    nav ul {
        flex-direction: column;
        gap: 28px;
    }

    nav a {
        font-size: 1.3rem;
        color: var(--color-light-gray) !important;
        letter-spacing: 3px;
    }

    nav a::after { background-color: var(--color-old-gold); }
}

/* ── Móviles: 600px ── */
@media screen and (max-width: 600px) {

    /* NOSOTROS HERO */
    .nosotros-hero {
        min-height: 50vh;
        background-position: 70% 5%;
    }
    .nosotros-hero-text {
        width: 100%;
        padding: 90px 5% 60px;
        text-align: center;
    }
    #nosotros .nosotros-hero h2 { font-size: clamp(2.2rem, 9vw, 3.5rem); }
    .nosotros-hero-imagen { display: none; }

    /* TIPOGRAFÍA */
    h2 { font-size: 1.6rem; }

    /* INICIO: textos principales */
    .split-text-container { font-size: clamp(1.2rem, 6.5vw, 2.8rem); }
    .melting-text { font-size: clamp(0.8rem, 3.2vw, 1.2rem); }

    /* CUBOS 3D: más pequeños en móvil */
    .box-3d { width: clamp(130px, 42vw, 200px); }

    /* NOSOTROS: colapsa a 1 col */
    .contenedor-nosotros { grid-template-columns: 1fr; }
    .bloque-experiencia, .bloque-valores-plano { grid-column: 1; }

    /* VALORES: escala en móvil */
    .valor-num  { font-size: 2rem; min-width: 48px; }
    .valor-txt  { font-size: clamp(0.9rem, 4vw, 1.15rem); letter-spacing: 2px; }
    .bloque-valores-plano { padding: 50px 5%; }
    #nosotros .bloque-historia { padding: 50px 5%; }

    /* MANIFESTO: 1 columna */
    .manifesto-grid { grid-template-columns: 1fr; }
}

/* ── Teléfonos pequeños: 480px ── */
@media screen and (max-width: 480px) {

    /* Header más compacto */
    header { padding: 0.2rem 4%; }
    .logo-header { height: 50px; }
    header h1 { font-size: 0.95rem; }

    /* Inicio */
    .split-text-container { font-size: clamp(1rem, 5.5vw, 1.8rem); padding: 20px 0; }
    #inicio { padding: 120px 4% 60px; }

    /* Cubos aún más pequeños */
    .box-3d { width: clamp(110px, 44vw, 160px); height: 44px; }

    /* Servicios: menos padding */
    .box-superior { padding: 30px 20px; }
    .box-inferior { padding: 25px 20px; }

    /* Contacto */
    .contacto-editorial { padding: 50px 4% 40px; }
    .contacto-form-wrap  { padding: 40px 4% 60px; }
}

/* =========================================
   13. ESTADOS DE INTERACCIÓN (JavaScript Triggers)
   ========================================= */

.header-scrolled {
    /* Usamos RGBA para aplicar transparencia (Alpha en 0.95 = 95% de opacidad) */
    /* El color base Dark Blue Black es #1b1f23 */
    background-color: rgba(27, 31, 35, 0.95); 
    
    /* Hacemos la sombra más fuerte y visible */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9); 
    
    /* Efecto moderno: desenfoca sutilmente el contenido que está detrás de la barra */
    backdrop-filter: blur(4px);
}

/* =========================================
   EFECTO SPLIT TEXT (PROYECTO BONAPARTE)
   ========================================= */

.split-text-container {
    display: flex;
    justify-content: center;
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 5.5vw, 5rem);
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    overflow: hidden;
    padding: 40px 0;
    white-space: nowrap;
}

.text-part {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

/* Configuración de la parte izquierda */
.text-part.left {
    transform: translateX(-200%);
    animation-name: slide-in-left;
    margin-right: 10px;
}

/* Configuración de la parte derecha */
.text-part.right {
    transform: translateX(200%);
    animation-name: slide-in-right;
}

/* KEYFRAMES EXACTOS DEL CÓDIGO COMPARTIDO */
@keyframes slide-in-left {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}

/* =========================================
   15. ELEMENTOS DE DISEÑO Y DIVISORES
   ========================================= */

/* Separador creativo para la sección de Inicio */
#inicio .divisor-creativo {
    height: 2px; /* Altura del separador */
    width: 30%; /* Ancho del separador (solo en el centro) */
    margin: 40px auto; /* Centrado y espacio vertical */
    
    /* El truco del degradado: simula un borde que se desvanece */
    background: linear-gradient(
        to right,
        rgba(255, 0, 0, 0), /* Comienza transparente */
        var(--color-old-gold) 50%, /* Rojo en el centro */
        rgba(255, 0, 0, 0) /* Termina transparente */
    );
}

/* =========================================
   16. ÍCONOS DE REDES SOCIALES (Footer)
   ========================================= */

/* Estilo para los contenedores de los íconos si los necesita */
footer .redes-sociales ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    gap: 25px; /* Espacio entre cada ícono */
}

/* Estilo base para el elemento Ícono (<i>) */
footer .redes-sociales ul li a i {
    font-size: 1.8rem; /* Tamaño del ícono */
    color: var(--color-deep-red); /* Color inicial del ícono */
    transition: color 0.3s ease;
}

/* Efecto hover */
footer .redes-sociales ul li a:hover i {
    color: var(--color-deep-red); /* Color al pasar el mouse */
}

/* Estilo del nuevo contenedor de íconos para separarlos horizontalmente */
.footer-links .redes-sociales-iconos {
    display: flex; /* Activa el modo Flexbox */
    justify-content: center; /* Centra los íconos (si el footer está centrado) */
    gap: 30px; /* Espacio horizontal de separación entre los íconos */
    margin-bottom: 15px; /* Espacio debajo de los íconos antes de los enlaces legales */
}

/* Estilo para los propios íconos (ya cubierto en Paso 77, pero se repite para referencia) */
.footer-links .redes-sociales-iconos a i {
    font-size: 1.8rem; 
    color: var(--color-light-gray); 
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links .redes-sociales-iconos a:hover i {
    color: var(--color-deep-red);
    transform: rotate(-8deg);
}

/* =========================================
   AJUSTES PARA LA NECESIDAD (Íconos de Estrella en H4 de Inicio)
   ========================================= */

/* =========================================
   ANIMACIÓN: TRACKING IN CONTRACT BCK
   ========================================= */

/* Esta clase se añadirá mediante JS cuando el usuario haga scroll */
.tracking-in-contract-bck {
    -webkit-animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* Estado inicial: invisible para que no "parpadee" antes de la animación */
.reveal-h4 {
    opacity: 0;
}

@-webkit-keyframes tracking-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px);
            transform: translateZ(400px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

@keyframes tracking-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px);
            transform: translateZ(400px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}


/* =========================================
   ACCESIBILIDAD — SKIP LINK Y FOCUS DORADO
   ========================================= */

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: #D4AF37;
    color: #1c1a1b;
    padding: 12px 20px;
    font-family: var(--font-primary, Impact), sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    text-decoration: none;
    z-index: 10000;
    border-radius: 2px;
    transition: top 0.25s ease;
}
.skip-link:focus {
    top: 1rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Halo dorado al enfocar con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #D4AF37;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);
    border-radius: 2px;
}


/* =========================================
   PRELOADER — MONOGRAMA B OPERÍSTICO
   ========================================= */

.preloader {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #1b1f23 0%, #0a0a0c 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader-monogram {
    font-family: var(--font-primary, Impact), serif;
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: bold;
    background: linear-gradient(135deg, #D4AF37 0%, #f5d76e 45%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.05em;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    animation: preloader-pulse 1.4s ease-in-out infinite;
}
@keyframes preloader-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.85; }
}
.preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================
   REBEL MARKER — ACENTO EDITORIAL EXPLORADOR-REBELDE
   ========================================= */

.rebel-marker {
    display: inline-block;
    margin: 0 auto 20px;
    padding: 6px 14px;
    font-family: 'Courier New', monospace;
    font-size: clamp(0.65rem, 1.5vw, 0.8rem);
    letter-spacing: 3px;
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-left: 3px solid #D4AF37;
    text-transform: uppercase;
    background: rgba(212, 175, 55, 0.04);
    position: relative;
    z-index: 3;
}
#inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================
   GOLD FRAME CORNERS — MARCO BARROCO MÉTODO ÓPERA
   ========================================= */

.gold-frame-corners {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 60px 40px 40px;
}
.gold-frame-corners .corner {
    position: absolute;
    width: 42px;
    height: 42px;
    border: 2px solid #D4AF37;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.3));
}
.gold-frame-corners .corner.tl { top: 0;    left: 0;    border-right: none; border-bottom: none; }
.gold-frame-corners .corner.tr { top: 0;    right: 0;   border-left: none;  border-bottom: none; }
.gold-frame-corners .corner.bl { bottom: 0; left: 0;    border-right: none; border-top: none; }
.gold-frame-corners .corner.br { bottom: 0; right: 0;   border-left: none;  border-top: none; }
.gold-frame-corners > h2,
.gold-frame-corners > p {
    position: relative;
    z-index: 1;
}


/* =========================================
   ACTO WATERMARK — NUMERAL ROMANO DECORATIVO
   ========================================= */

.servicio-item { position: relative; }
.servicio-item::before {
    content: attr(data-acto);
    position: absolute;
    top: 20px;
    right: 30px;
    font-family: var(--font-primary, Impact), serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: bold;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.35);
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}
.servicio-item[data-acto]::after {
    content: "";
    position: absolute;
    top: 85px;
    right: 30px;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    opacity: 0.5;
    pointer-events: none;
}
.servicio-item .box-superior,
.servicio-item .box-inferior {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 600px) {
    .servicio-item::before { top: 12px; right: 16px; }
    .servicio-item[data-acto]::after { top: 62px; right: 16px; width: 28px; }
    .gold-frame-corners { padding: 40px 20px 20px; }
    .gold-frame-corners .corner { width: 28px; height: 28px; }
}