/**
 * SISTEMA DE DISEÑO CRUZ ESTUDIO ® 2026
 * Tipografías: Neue Haas Grotesk + IBM Plex Sans + Cofo Sans Mono
 */

/* --- 1. VARIABLES Y FUENTES SISTEMATIZADAS --- */
:root {
    --bg-dark: #1D1E1C;
    --crema: #FFFDF3;
    --amarillo-acento: #f2c335;
    
    /* Tipografías */
    --font-header: 'neue-haas-grotesk-display', sans-serif;
    --font-reading: 'IBM Plex Sans', sans-serif;
    --font-mono: 'cofo-sans-mono-variable', monospace;

    /* Escala */
  /* ESCALA DE IMPACTO SUIZO */
    --h1-size: clamp(4.2rem, 10vw, 150px); /* Tamaño masivo según referencia */
    --h1-leading: 0.90;                   /* Interlineado extremadamente cerrado */
    --h1-spacing: -0.05rem;                /* Tensión en el kerning */
    --body-size: 18px;
    --detail-size: 14px;
    
    --loader-yellow: #f2c335;
    --loader-black: #1D1E1C;
    --loader-transition: cubic-bezier(0.77, 0, 0.175, 1);
    --loader-margin: 45px;
}

/* --- 2. RESET & BASE --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-header), var(--font-mono), sans-serif;
}

body {
    font-family: var(--font-reading), sans-serif;
    background-color: var(--bg-dark);
    color: var(--crema);
    cursor: crosshair;
    overflow-x: hidden;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Activa el desplazamiento suave en toda la web */
html {
    scroll-behavior: smooth;
}

/* Evita que el menú fijo tape el inicio de la sección */
section[id] {
    scroll-margin-top: 100px; /* Ajusta según la altura de tu navbar */
}

/* Opcional: Mejora la sensación de la animación al llegar */
#featured-works, #contact {
    transition: all 0.5s ease-in-out;
}

/* Modifica esto en tu style.css */
body.scroll-locked {
    overflow: hidden !important;
    /* Elimina 'position: fixed' si ves que el scroll salta a lugares raros al hacer clic */
}
/* TRANSICION */


.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    pointer-events: none;
}

.page-transition.entering {
    transform: scaleX(1);
}

.page-transition.exiting {
    transform: scaleX(0);
}

.page-transition.returning {
    transform: scaleX(1);
    transform-origin: right;
}

.page-transition.returning ~ * {
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

.page-transition.exit-to-index {
    transform: scaleX(1);
    transform-origin: right;
}

:root {
    --loader-yellow: #f2c335;
    --loader-black: #1D1E1C;
    --loader-transition: cubic-bezier(0.77, 0, 0.175, 1);
    --loader-margin: 45px;
}

/* Estado del loader cuando termina la animación */
#loader.loaded {
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 1.1s cubic-bezier(0.77, 0, 0.175, 1), visibility 1.1s;
}

/* Forzamos que si se saltó el loader, el body sea visible de inmediato */
.skip-loader body {
    overflow-y: auto !important;
}

#loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background-color: var(--loader-yellow);
    color: var(--loader-black);
    z-index: 10000;
    display: flex;
    padding: var(--loader-margin);
    transition: transform 1.1s var(--loader-transition), visibility 1.1s;
}

#loader.loaded {
    transform: translateY(-100%);
    visibility: hidden;
}

.loader-grid {
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%;
}

.loader-row {
    width: 100%;
    border-top: 1px solid rgba(29, 30, 28, 0.2);
    display: flex;
}

.top-bar {
    height: 60px;
    align-items: center;
    justify-content: space-between;
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.main-title-row {
    flex-grow: 1;
    align-items: center;
}

.loader-welcome {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: clamp(3.5rem, 11vw, 10rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
}

.footer-row {
    height: 35vh;
    align-items: flex-end;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.mono-text {
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: clamp(12px, 1.1vw, 15px);
    line-height: 1.6;
    max-width: 550px;
    text-align: justify;
}

.percentage-container {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}

.loader-percentage {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: clamp(8rem, 18vw, 22rem);
    font-weight: 700;
    line-height: 0.75;
    font-variant-numeric: tabular-nums; /* Bloqueo de ancho tipográfico */
    min-width: 1.1em;
    text-align: right;
}

.loader-symbol {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-size: clamp(3rem, 6vw, 7rem);
    font-weight: 700;
    margin-left: 10px;
}

@media (max-width: 768px) {
    #loader { padding: 25px; }
    .footer-row { grid-template-columns: 1fr; height: auto; padding-top: 40px; gap: 40px; }
    .loader-percentage { font-size: 10rem; }
}

/*------------------ Contenedor del tipo de letra y cursor */
#typewriter {


font-family: 'Chivo';
display: inline-block; /* Permite que el cursor esté alineado con el texto */
position: relative; /* Posiciona el cursor relativo al texto */
}


/* Estilo para el texto */
#text {
font-family: "neue-haas-grotesk-display", sans-serif;
font-size: 120px;
font-weight: 700;
color: #FFFDF3;
white-space: nowrap; /* Evita saltos de línea */
margin: 0; /* Elimina margen */
display: inline; /* Permite que el cursor esté al lado */
}


/* Estilos para la barra titilante */
#cursor {
display: inline-block; /* Permite que se comporte como un elemento en línea */
border-bottom: 0.05em solid #FFFDF3; /* Cursor parpadeante horizontal */
margin-left: 5px; /* Espacio entre el texto y el cursor */
animation: blink-caret 0.90s step-end infinite; /* Animación del cursor */
height: 1em; /* Ajusta la altura del cursor */
}


/* Animación del cursor parpadeante */
@keyframes blink-caret {
from, to {
    border-color: transparent;
}
50% {
    border-color: #FFFDF3;
}
}


/*estilo cursor*/


.crosshair {
cursor: crosshair;
}


/* color cursor */


::selection {
    background-color: #FFD700; /* Color de fondo al seleccionar */
    color: #000; /* Color del texto al seleccionar */
}


::-moz-selection {
    background-color: #FFD700;
    color: #1D1E1C;
}




/* Cursor en forma de localización */
.link-location {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="%23FFF"/></svg>') 5 5, auto; /* Ajusta el tamaño si es necesario */
}




/*Pagina en construccion*/

.construction-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #FFFDF3;
    text-align: center;
    padding: 2rem;
}

.construction-title {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-family: 'Chivo', sans-serif;
}

.construction-text {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    line-height: 1.6;
}

.construction-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
    animation: rotate 4s infinite linear;
}

.return-link {
    color: #FFFDF3;
    text-decoration: none;
    border: 1px solid #FFFDF3;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
    font-family: 'Chivo', sans-serif;
}

.return-link:hover {
    background-color: #FFFDF3;
    color: #000;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/* --- ESTILO DEL LOGO (FIX) --- */
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1001;
}

.logo-vectorial {
    /* Si no defines altura, el SVG no se visualiza */
    height: 20px; 
    width: auto;
    display: block;
    /* Mantenemos la pureza del color crema de Cruz Diseño */
    filter: brightness(1.1); 
}

/* --- NAVBAR BRAND (ESPACIADO) --- */
.navbar-brand {
    /* Cambiamos 0px por 30px arriba/abajo para que respire */
    padding: 0px 45px !important; 
    border-bottom: 1px solid rgba(255, 255, 243, 0.1);
    background-color: #1D1E1C;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.containerNav {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}


/* Botón hamburguesa */
.menu-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    order: 2;
    z-index: 1000;
}


.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 4px auto;
    background-color: #FFFDF3;
    transition: 0.3s;
}


/* --- EL MENÚ DERECHO --- */
.nav-links-brands {
    list-style: none;
    display: flex;
    align-items: center;
    margin-left: auto; /* Empuja todo hacia la derecha */
    margin-top: 0;     /* Alineamos verticalmente con el logo */
    padding-right: 0;  /* Eliminamos el exceso de 150px */
}

.nav-links-brands li {
    /* Reducimos el margen entre links para que no se amontonen pero respiren */
    margin-left: 50px; 
    margin-right: 0;
}

.nav-links-brands a {
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: 14px;
    color: #FFFDF3;
    text-decoration: none !important;
    
    /* Aumentamos el padding vertical para mejorar el área de clic (UX) */
    /* El 15px arriba/abajo le da el "aire" que buscabas */
    padding: 30px 0; 
    
    display: inline-block;
    line-height: 1;
    transition: opacity 0.3s ease;
}
/*-----responsive menu*/


/* Estilo para el botón de menú hamburguesa */
.menu-toggle {
display: none; /* Oculto por defecto */
flex-direction: column;
cursor: pointer;
}


/* Estilos de las barras del menú hamburguesa */
.menu-toggle .bar {
height: 3px;
width: 25px;
background-color: #FFFDF3;
margin: 3px 0;
}


/* --- EL MENÚ DERECHO (HOVER ACTUALIZADO) --- */

.nav-links-brands a {
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: 14px;
    color: #FFFDF3; /* Color Crema base */
    text-decoration: none !important;
    padding: 30px 0; 
    display: inline-block;
    line-height: 1;
    transition: color 0.3s ease, opacity 0.3s ease;
    position: relative; /* Necesario para posicionar los corchetes */
}

/* --- ESTADO HOVER: COLOR AMARILLO #f2c335 --- */
.nav-links-brands a:hover {
    color: #f2c335 !important;
    opacity: 1;
}

/* --- EFECTO DE CORCHETES EN AMARILLO --- */
.nav-links-brands a::before,
.nav-links-brands a::after {
    content: '';
    position: absolute;
    opacity: 0;
    color: #f2c335; /* Color corporativo para los corchetes */
    transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav-links-brands a:hover::before {
    content: '[';
    left: -18px; /* Ajuste de aire para que no toque la letra */
    opacity: 1;
}

.nav-links-brands a:hover::after {
    content: ']';
    right: -18px; /* Ajuste de aire */
    opacity: 1;
}

/* Ajuste para el estado activo (página actual) */
.nav-links-brands .active {
    color: #f2c335;
    font-weight: bold;
    opacity: 0.8;
}


/* Estilos para la animación de la cruz */
.menu-toggle.open .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Estilos para el menú desplegable */
.nav-links-brands {
    display: flex;
    list-style: none;
}

.nav-links-brands li {
    margin-left: 20px;
}

.nav-links-brands a {
    color: #FFFDF3;
    text-decoration: none;
    font-size: 14px;
}

/* --- SECCIÓN HERO (AJUSTE SISTEMATIZADO) --- */
.hero {
    background-color: #1D1E1C;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center; 
    z-index: 1;
}

#hero-3d-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
}

.hero-main-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100% !important;
    padding: 0 40px !important;
    transform: translateY(-8vh) !important; /* Ajuste para respiro suizo */
    pointer-events: none;
    z-index: 2;
    position: relative;
}

.hero-left {
    pointer-events: auto;
    width: 65%;
}

.hero-title {
    font-family: var(--font-header);
    font-size: var(--h1-size);
    font-weight: 700;
    line-height: var(--h1-leading);
    letter-spacing: var(--h1-spacing);
    color: var(--crema);
    
    /* ALINEACIÓN SUIZA */
    padding-top: 10%;
    text-align: left; 
    max-width: 90%;      /* Evita que el texto toque el borde derecho */
    margin-bottom: 3rem;
    display: block;
}

/* Palabra kinética: Usamos Cofo Mono para resaltar el sistema */
.word-slider {
    font-family: var(--font-mono);
    color: var(--amarillo-acento);
    display: inline-block;
    transition: transform 0.6s var(--loader-transition), opacity 0.3s;
    text-transform: uppercase;
}

.hero-subtitle {
    font-family: var(--font-reading);
    font-size: 20px; /* Tamaño editorial reducido para notebooks */
    font-weight: 300;
    max-width: 600px;
    color: rgba(255, 253, 243, 0.7);
    line-height: 1.6;
}

.hero-right {
    pointer-events: auto;
    text-align: right;
  
    
    
}
.hero-links{
   font-size: 40%;
}

.hero-link {
    
    font-family: var(--font-mono);
    
    color: var(--crema) !important;
    opacity: 0.4;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.hero-link:hover { opacity: 1; color: var(--amarillo-acento) !important; transform: translateX(-5px); }

.hero-arrow img {
    width: 250px;
    height: auto;
    margin-top: 60px;
    filter: brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(1093%) hue-rotate(354deg) brightness(103%) contrast(93%);
}

.hero-fecha {
    font-family: var(--font-mono);
    color: var(--crema);
    font-size: 18px;
    font-weight: 700;
}

/* --- BLOQUE DERECHO --- */
.hero-right {
    pointer-events: auto;
    text-align: right;
    /* Ajustamos el padding-top para que los links sigan nivelados con el H1 */
    padding-top: 8.5%; 
    
}

.hero-link {
    color: #FFFDF3 !important; /* Limpieza de azul Bootstrap */
    text-decoration: none !important;
    font-family: 'cofo-sans-mono-variable', monospace;
    font-size: 8 rem;
    display: block;
    margin-bottom: 12px;
    transition: opacity 0.3s;
}

.hero-link:hover {
    opacity: 0.5;
    color: #FFFDF3 !important;
}

/* --- FLECHA --- */
.hero-arrow img {
    width: 250px; /* Tamaño según referencia visual */
    height: auto;
    margin-top: 40px;
}



/* --- FOOTER (Copyright y Año) --- */
.hero-footer {
    position: absolute;
    bottom: 140px;
    right: 30px;
    z-index: 2;
    text-align: right;
}

.hero-fecha {
    color: #FFFDF3;
    font-family: 'cofo-sans-mono-variable', monospace;
    font-size: 20px;
    font-weight: 700;
}


/* ==========================================================================
   AJUSTES MOBILE: HERO (CRUZ ESTUDIO ®)
   ========================================================================== */

@media (max-width: 768px) {
    /* Eliminamos la flecha para limpiar el encuadre */
  .hero-main-wrapper { flex-direction: column; padding-top: 180px !important; transform: none !important; }
    .hero-title { font-size: 3.5rem; }
    .hero-subtitle { font-size: 1.1rem; max-width: 100%; }
}

/*-----Animación*/


.nav-links li::after {
content: ''; /* Crear un pseudo-elemento para la línea */
display: block; /* Hacerlo un bloque */
width: 100%; /* Ancho del elemento */
height: 3px; /* Altura de la línea */
background-color: #FFFDF3; /* Color de la línea */
position: absolute; /* Posicionarlo de forma absoluta */
left: 0; /* Alinear a la izquierda */
bottom: -5px; /* Espacio debajo del enlace */
transform: scaleX(0); /* Ocultar inicialmente */
transition: transform 0.3s; /* Animación suave */
}


.nav-links li:hover::after {
transform: scaleX(1); /* Mostrar la línea al hacer hover */
}


.nav-links li::before {


position: absolute; /* Posicionarlo de forma absoluta */
left: 50%; /* Centrar horizontalmente */
transform: translateX(-50%); /* Ajustar para centrar */
bottom: -25px; /* Ajustar la posición debajo del enlace */
opacity: 0; /* Ocultar inicialmente */
transition: opacity 0.3s; /* Animación suave */
}


.nav-links li:hover::before {
opacity: 1; /* Mostrar el número al hacer hover */
}



.hero-button:hover {
background-color: #444; /* Color de fondo al pasar el mouse */
color: #FFFDF3; /* Cambia el color del texto al pasar el mouse */
text-decoration: none;
}






/*----boton lenguaje style----*/


.language-switch {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
}


.language-switch button {
padding: 10px 15px;
background-color: #1D1E1C; /* Color de fondo del botón */
border-color: #FFFDF3;
color: #FFFDF3; /* Color del texto */
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}


.language-switch button:hover {
background-color: #444; /* Color al pasar el ratón */
}

/* ==========================================================================
   4. BOTÓN SCROLL DOWN (EFECTO DROP)
   ========================================================================== */
.scroll-down-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 253, 243, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.3s ease;
    /* Animación de invitación */
    animation: bounce-drop 3s infinite;
}

.scroll-down-btn svg {
    fill: #FFFDF3;
    width: 30px;
    height: 30px;
}

.scroll-down-btn:hover {
    border-color: #FFFDF3;
    background-color: rgba(255, 253, 243, 0.1);
}

@keyframes bounce-drop {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(10px); }
    60% { transform: translateX(-50%) translateY(5px); }
}

/* ==========================================================================
   5. MEDIA QUERIES (ADAPTACIÓN MOBILE)
   ========================================================================== */
@media (max-width: 768px) {
    .navbar-brand { padding: 40px !important; }
    
    .hero-main-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        transform: translateY(-5vh);
        padding: 0 0px !important;
    }

   
    .hero-title { font-size: 3.5rem; }
    .hero-subtitle { font-size: 1.1rem; max-width: 100%; }
    
    .nav-links-brands { display: none; } /* Ocultar para menú móvil */
    
    .scroll-down-btn { bottom: 80px; }
}

/* ==========================================================================
   CLASE DE UTILIDAD: BLOQUEO DE SCROLL
   ========================================================================== */
/* Esta clase se añade vía JS al cargar la página */
body.scroll-locked {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%;
}


/* ==========================================================================
   SECCIÓN STUDIO INTRO (VIDEO + REVEAL)
   ========================================================================== */

/* Contenedor Maestro: Ocupa el 100% de la pantalla sin scroll interno */
.studio-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #1D1E1C; /* Fondo negro puro según referencia visual */
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* --- BLOQUE DE VIDEO (60% de la altura) --- */
.studio-video-container {
    flex: 6; /* Proporción ajustada para dar más aire al texto inferior */
    width: 100%;
    position: relative;
    overflow: hidden;
}

.studio-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que el video llene el área cinematográficamente */
    display: block;
}

/* --- BLOQUE DE TEXTO (40% de la altura) --- */
.studio-text-container {
    flex: 4; /* Espacio ampliado para evitar desbordes de texto */
    background-color: #1D1E1C;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 45px; /* Alineación milimétrica con el logo de 45px */
    text-align: center;
    box-sizing: border-box;
}

/* --- TIPOGRAFÍA CON EFECTO REVEAL (Dots and Lines Style) --- */
.studio-statement {
    overflow: hidden; /* Actúa como máscara para el efecto de emergencia */
    display: block;
    width: 100%;
    max-width: 1200px; /* Limita el ancho de línea para mejorar la legibilidad */
}

.reveal-text {
    display: inline-block;
    /* DINÁMICA DE ENCUADRE: El uso de 'vh' asegura que la letra se 
       ajuste a la altura de la pantalla, evitando que se corte abajo */
    font-size: clamp(1.9rem, 5.0vh, 3.8rem); 
    font-family: 'neue-haas-grotesk-display', sans-serif;
    font-weight: 700;
    color: #FFFDF3; /* Color crema institucional */
    line-height: 1.1;
    letter-spacing: -0.02em;
    
    /* Estado Inicial: Oculto bajo la máscara */
    transform: translateY(110%); 
    opacity: 0;
    
    /* Curva de transición profesional (Cubic Bezier) */
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 1s ease;
}

/* --- ESTADO ACTIVO: Gatillado por el botón Drop --- */
.studio-section.visible .reveal-text {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================================================
   ADAPTACIÓN PARA DISPOSITIVOS MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    .studio-video-container {
        flex: 4; /* En móvil priorizamos el espacio para el texto */
    }
    .studio-text-container {
        flex: 6;
        padding: 20px 30px;
    }
    .reveal-text {
        /* Ajuste de tamaño para lectura vertical cómoda */
        font-size: clamp(1.2rem, 3.8vh, 1.8rem);
        line-height: 1.2;
    }
}


/*----- Carrusell -----*/

.carousel-item {
    transition: none !important;
}

.carousel {
    transition: none !important;
}

.carousel-fade .carousel-item {
    transition: none !important;
}


#carouselExample {
    width: 100%;
    max-height: 600px; /* Ajusta la altura del carrusel según sea necesario */
    overflow: hidden;
    margin: 0 auto; /* Centra el carrusel horizontalmente */
}

.carousel-inner {
    height: 600px; /* Ajusta la altura del carrusel según sea necesario */
}

.carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Asegura que el contenedor del carrusel ocupe toda la altura */
}

.carousel-item img {
    height: 100%;
    width: auto; /* Mantiene la proporción de la imagen */
    object-fit: cover; /* Asegura que la imagen cubra todo el contenedor */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejor visibilidad */
    border-radius: 50%; /* Opcional: redondea los bordes */
    width: 50px; /* Ajusta el tamaño del icono */
    height: 50px; /* Ajusta el tamaño del icono */
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Ajusta el ancho del área de control */
}


/*Bullets------------------*/

.carousel-indicators li {
    width: 12px;
    height: 12px;    
    background-color: #f0f0f0; /* Color de los bullets */
    border: 1px solid #000000; /* Borde de los bullets */
}

.carousel-indicators .active {
    background-color: #1D1E1C; /* Color del bullet activo */
}




/*----- Trabajos Destacados -----*/
/* --- Estilos para la Preview de Imágenes --- */
.preview-inner {
    position: relative;
    width: 100%;
    height: 500px;
    background-color: #1D1E1C;
    overflow: hidden;
}

.preview-inner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Ocultas por defecto */
    transition: opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1), transform 1.2s ease;
    transform: scale(1.05);
}

.preview-inner img.active {
    opacity: 1; /* Se muestra la activa */
    transform: scale(1);
    z-index: 1;
}

/* --- Cortina de Transición (Asegura estos valores) --- */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    z-index: 9999;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
    pointer-events: none;
}

.page-transition.entering {
    transform: scaleX(1);
}

/* Estilo para los ítems de la lista */
.featured-work-item {
    cursor: pointer;
}

.featured-work-item:hover .work-title {
    color: #000000 !important; /* Amarillo corporativo en hover */
}

/* --- TRABAJOS DESTACADOS REFORMADO --- */
.featured-works {
    background-color: #f7f7f7;
    padding: 100px 45px; /* Alineado a tu cuadrícula de 45px */
}

.works-header {
    margin-bottom: 60px;
}

.featured-works-container {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Columna Izquierda: Imagen Fija */
.works-preview {
    flex: 1;
    position: sticky;
    top: 150px; /* Se queda quieta al scrollear */
    height: 500px;
    overflow: hidden;
    border-radius: 2px; /* Minimalismo puro */
}

.preview-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.preview-inner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.preview-inner img.active {
    opacity: 1;
    transform: scale(1);
}

/* Columna Derecha: Lista */
.featured-works-list {
    flex: 1;
    list-style: none;
    padding: 0;
}

.featured-work-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.work-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
    transition: transform 0.3s ease;
}

.work-category {
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: 12px;
    color: rgba(29, 30, 28, 0.5);
    text-transform: uppercase;
}

.work-title {
    font-family: 'neue-haas-grotesk-display', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #1D1E1C;
    flex-grow: 1;
    margin: 0 40px;
}

.work-year {
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: 14px;
    color: #1D1E1C;
}

/* Hover Effects */
.featured-work-item:hover .work-item-content {
    transform: translateX(20px);
}

.featured-work-item:hover .work-title {
    color: #1D1E1C;
}

.featured-work-item:hover .work-category {
    color: #1D1E1C;
}
 
.decorative-line {
    border: none;
    height: 1px;
    background-color: rgba(29, 30, 28, 0.1);
}
/* --- FORZAR VISIBILIDAD DEL BOTÓN TRABAJOS --- */
.works-preview {
    flex: 1;
    position: sticky;
    top: 150px;
    height: auto !important; /* Permite que el contenedor crezca para mostrar el botón */
    display: flex;
    flex-direction: column;
    gap: 35px; /* Espacio entre imagen y botón */
    overflow: visible !important; /* EVITA QUE EL BOTÓN SE CORTE */
    z-index: 10;
}

.preview-inner {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
    background-color: #eee; /* Color de carga */
}

.works-cta {
    display: flex !important; /* Forzamos visualización */
    justify-content: flex-start;
    padding-left: 5px;
    opacity: 1 !important;
    visibility: visible !important;
}

.view-all-link {
    font-family: "cofo-sans-mono-variable", monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1D1E1C !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(29, 30, 28, 0.2);
    transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.view-all-link .btn-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    transition: transform 0.4s ease;
}

/* EFECTO HOVER */
.view-all-link:hover {
    color: #f2c335 !important; /* Amarillo institucional en hover */
    border-bottom-color: #1D1E1C;
    gap: 25px;
}

.view-all-link:hover .btn-icon {
    transform: translate(4px, -4px);
}

/* Ajuste para móvil: Si no lo ves en el celular es por esto */
@media (max-width: 768px) {
    .works-preview {
        position: static !important;
        margin-bottom: 50px;
    }
    .preview-inner {
        height: 350px;
    }
    .works-cta {
        margin-top: 15px;
    }
}
/*----- Sección About Me -----*/


.about-me {
display: flex;
justify-content: space-between; /* Espacio entre columnas */
padding: 50px;
background-color: #f7f7f7; /* Color de fondo de la sección */
}


.about-content {
flex: 0.5; /* Ocupa el 50% del ancho de la sección */
padding-left: 80px; /* Espacio a la izquierda para separarlo de la imagen */
}


.about-image {
max-width: 49%; /* Ajusta el tamaño de la imagen (puedes cambiar el porcentaje) */
flex: 0.5%; /* Ocupa el 50% del ancho de la sección */
display: flex;
align-items: center; /* Centrar verticalmente */
justify-content: center; /* Centrar horizontalmente */
font-weight: 700;
}


.about-image img {
max-width: 100%; /* Ajusta la imagen al contenedor */
height: auto; /* Mantiene la proporción de la imagen */
}


.decorative-line {
border: none;
height: 1px;
background-color: #979797; /* Color de la línea decorativa */
margin: 20px 0; /* Espaciado arriba y abajo de la línea */
}


.subtitulo {
font-size: 60px;
font-weight: 700;
}


.lectura {
font-family: "cofo-sans-mono-variable";
font-weight: 10;
font-size: 16px;
color: #838383;
font-display: swap;
}


.subtitulosIconos {
font-size: 20px;
font-weight: 700;
color: #1D1E1C;
}


.icons {
display: flex;
justify-content: start; /* Alinear los íconos a la izquierda */
margin-top: 20px; /* Espacio superior para los íconos */
}


.icon {
font-size: 24px; /* Tamaño de los íconos */
margin-right: 15px; /* Espaciado entre los íconos */
}


.icon2 {
margin-right: 15px; /* Espaciado entre los íconos */
width: 30px; /* Ajusta el ancho */
height: auto; /* Mantiene la proporción */
}


.iconSkills {
margin-right: 40px; /* Espaciado entre los íconos */
width: 20px; /* Ajusta el ancho */
height: auto; /* Mantiene la proporción */
}

/* --- INTERACCIÓN LINKS DERECHOS --- */
.hero-link {
    color: #FFFDF3 !important; /* Crema base */
    text-decoration: none !important;
    font-family: 'cofo-sans-mono-variable', monospace;
    font-size: 18px;
    display: block;
    margin-bottom: 12px;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    opacity: 0.6; /* Estado pasivo sutil */
}

.hero-link:hover {
    color: #FFD700 !important; /* Cambio a Amarillo en hover */
    opacity: 1; /* Brillo total */
    transform: translateX(-10px); /* Sutil desplazamiento técnico */
}


/*----- WORKS SECTION -----*/




.work {




padding: 40px;
background-color: #f7f7f7; /* Color de fondo de la sección */  


}


.works-section {
display: flex;
background-color: #f7f7f7; /* Fondo gris claro */
}


.works-image {
flex: 1;
padding: 20px;
display: flex;
justify-content: center; /* Centrar imagen horizontalmente */
align-items: center; /* Centrar imagen verticalmente */
}


.works-image img {
max-width: 100%;
height: auto;
border: 2px solid #ccc; /* Borde gris claro para las imágenes */
transition: opacity 0.5s ease-in-out;
}


.works-list {
flex: 1;
padding: 20px;
}


.works-list ul {
list-style-type: none; /* Sin viñetas */
padding: 0;


}


.works-list .accordion span {
font-family: "neue-haas-grotesk-display"; /* Tipografía específica */
font-size: 20px;
font-weight: 400;
color: #1D1E1C; /* Cambia el color del texto según tu diseño */
}


.works-list .accordion span:hover {
color: #f7f7f7; /* Cambia el color al pasar el ratón */
text-decoration: underline; /* Subrayar el texto al pasar el ratón (opcional) */
}


.accordion {


cursor: pointer;
padding: 10px;
border: none; /* Sin borde para el acordeón */
margin-bottom: 10px;
background-color: #f7f7f7; /* Fondo blanco para los ítems */
transition: background-color 0.3s;
}


.accordion:hover {
background-color: #1D1E1C; /* Fondo oscuro al pasar el ratón */
color: #f7f7f7; /* Color de texto blanco al pasar el ratón */
}


.accordion-content {
display: none; /* Ocultar contenido por defecto */
padding: 10px;


}


.accordion.active + .accordion-content {
display: block; /* Mostramos el contenido si el acordeón está activo */
}


hr.decorative-line {
border: 1px solid #f7f7f7; /* Línea decorativa gris claro */
}


.project-info {
text-align: center;
}


#project-button {
padding: 10px 20px;
background-color: #1D1E1C; /* Fondo azul para el botón */
color: #f7f7f7; /* Texto blanco en el botón */
border: none;
cursor: pointer;
border-radius: 5px; /* Bordes redondeados */
transition: background-color 0.3s;
}


#project-button:hover {
background-color: #696969; /* Fondo azul oscuro al pasar el ratón */
}




/* ==========================================================================
   SISTEMA DE DISEÑO CRUZ ESTUDIO ® 2026
   Arquitectura: Neue Haas (H) + IBM Plex (B) + Cofo Mono (D)
   ========================================================================== */

:root {
    --bg-dark: #1D1E1C;
    --crema: #FFFDF3;
    --amarillo-acento: #f2c335;
    --font-header: 'neue-haas-grotesk-display', sans-serif;
    --font-reading: 'IBM Plex Sans', sans-serif;
    --font-mono: 'cofo-sans-mono-variable', monospace;
    --swiss-easing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 1. CONTACT COMPONENT --- */
.contact-section {
    background-color: var(--bg-dark) !important;
    padding: 160px 45px;
    width: 100%;
    border-top: 1px solid rgba(255, 253, 243, 0.05);
}

.contact-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

.contact-display {
    font-family: var(--font-header);
    font-size: clamp(3.5rem, 8vw, 110px); 
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--crema) !important;
    margin-bottom: 25px;
    text-align: left;
}

/* --- 2. SEGMENTACIÓN Y CONTRASTE (FIXED) --- */
.form-segment { 
    margin-top: 100px; /* Espaciado generoso entre bloques */
}

.form-segment .reading-small {
    font-family: var(--font-reading);
    font-size: 1.1rem;
    color: var(--crema) !important; /* Contraste absoluto */
    line-height: 1.5;
    margin-bottom: 45px; /* Evita el amontonamiento con los inputs */
    display: block;
    letter-spacing: 0.01em;
}

.required-notice {
    font-family: var(--font-mono);
    color: var(--amarillo-acento);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-left: 10px;
    vertical-align: middle;
}

.mono-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--amarillo-acento); 
    margin-bottom: 35px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* --- 3. SELECCIÓN TÉCNICA (PILLS) --- */
.services-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 20px;
}

.service-chip input { display: none; }

.chip-box {
    display: inline-block;
    padding: 16px 32px;
    border: 1px solid rgba(255, 253, 243, 0.15);
    border-radius: 50px; /* Redondeado suave sistematizado */
    color: var(--crema) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--swiss-easing);
}

.service-chip:hover .chip-box { 
    border-color: var(--crema); 
    background-color: rgba(255, 253, 243, 0.05);
}

.service-chip input:checked + .chip-box {
    background-color: var(--crema);
    color: var(--bg-dark) !important;
    border-color: var(--crema);
}

/* --- 4. INPUTS FLOTANTES --- */
.fields-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 85px 45px; /* Tensión visual entre filas */
    margin-top: 80px;
}

.full-col { grid-column: 1 / -1; }

.input-container {
    position: relative;
    border-bottom: 1px solid rgba(255, 253, 243, 0.15);
    padding-bottom: 10px;
}

.input-container input, 
.input-container textarea {
    width: 100%;
    background: transparent;
    border: none;
    padding: 15px 0;
    color: var(--crema) !important;
    font-size: 22px;
    outline: none;
    font-family: var(--font-header);
}

.input-container label {
    position: absolute;
    top: 15px;
    left: 0;
    color: rgba(255, 253, 243, 0.3);
    font-family: var(--font-reading);
    font-size: 18px;
    font-weight: 300;
    pointer-events: none;
    transition: all 0.4s var(--swiss-easing);
}

.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label,
.input-container textarea:focus + label,
.input-container textarea:not(:placeholder-shown) + label {
    top: -25px;
    font-size: 10px;
    color: var(--amarillo-acento);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

/* --- 5. ACCIÓN FINAL (CTA) --- */
.cta-submit {
    margin-top: 100px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--crema) !important;
    cursor: pointer;
    transition: color 0.3s ease;
}

.cta-text {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
}

.cta-submit:hover { color: var(--amarillo-acento) !important; }

.cta-submit:hover .material-symbols-outlined {
    transform: translate(5px, -5px);
}

/* --- 6. WHATSAPP FIXED (5491161105751) --- */
.whatsapp-fixed {
    position: fixed;
    bottom: 40px;
    right: 45px;
    width: 60px;
    height: 60px;
    background-color: var(--bg-dark);
    border: 1px solid rgba(255, 253, 243, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    transition: all 0.4s var(--swiss-easing);
}

.whatsapp-fixed svg { width: 26px; height: 26px; fill: var(--crema); z-index: 2; }

.wa-tooltip {
    position: absolute;
    right: 75px;
    background-color: var(--amarillo-acento);
    color: var(--bg-dark);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 18px;
    white-space: nowrap;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.4s var(--swiss-easing);
}

.whatsapp-fixed:hover { background-color: var(--amarillo-acento); transform: scale(1.05); }
.whatsapp-fixed:hover .wa-tooltip { opacity: 1; visibility: visible; transform: translateX(0); }
.whatsapp-fixed:hover svg { fill: var(--bg-dark); }
/* ==========================================================================
   FOOTER GLOBAL - SISTEMA CRUZ ESTUDIO ®
   Inspiración: Mother Design / Studio Okay
   Fondo: Crema | Texto: Dark | Estilo: Swiss Editorial
   ========================================================================== */

.footer-global {
    background-color: var(--crema);
    color: var(--bg-dark);
    padding: 100px 45px 60px 45px;
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(29, 30, 28, 0.1);
    /* Rigor Flair Digital: el cursor personalizado toma el control */
    cursor: none; 
}

.footer-line {
    width: 100%;
    height: 1px;
    background-color: var(--bg-dark);
    margin-bottom: 60px;
    opacity: 0.1;
}

/* Grilla Técnica Asimétrica */
.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr 1.5fr;
    gap: 40px;
    align-items: flex-start;
}

/* --- ELEMENTOS DE TEXTO Y MARCA --- */
.copyright-text {
    font-family: var(--font-header);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--bg-dark);
    margin: 0;
}

.footer-link {
    font-family: var(--font-header);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bg-dark);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    transition: color 0.3s var(--swiss-easing);
}

.footer-link:hover {
    color: var(--amarillo-acento);
}

/* Visibilidad técnica de etiquetas */
.mono-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #1D1E1C !important; /* Forzamos contraste sobre crema */
    opacity: 0.5;
    display: block;
    margin-bottom: 30px;
    visibility: visible !important;
}

.reading-small {
    font-family: var(--font-reading);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(29, 30, 28, 0.7);
}

/* Sello Pluma */
.pluma-seal {
    height: 45px;
    width: auto;
    filter: brightness(0); /* Negro puro sobre fondo claro */
    margin-bottom: 20px;
    display: block;
}

/* --- CURSOR PERSONALIZADO --- */
.custom-cursor {
    width: 18px;
    height: 18px;
    background-color: var(--amarillo-acento);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: multiply; 
    transition: transform 0.15s ease-out;
}

/* ==========================================================================
   RESPONSIVE: FIX DE ENCUADRE Y GRIDS
   ========================================================================== */

/* Ajuste para Tablets y Laptops pequeñas (1024px) */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* Colapsamos a 2 columnas */
        gap: 60px 40px;
    }
}

/* Ajuste Crítico para Móviles (768px) */
@media (max-width: 768px) {
    .footer-global {
        padding: 60px 35px;
        cursor: auto; /* Devolvemos el cursor estándar en táctil */
    }

    .footer-grid {
        grid-template-columns: 1fr; /* Una sola columna vertical */
        gap: 50px;
    }

    .custom-cursor {
        display: none; /* Innecesario en mobile */
    }

    /* Reducción del sello para no saturar el encuadre */
    .pluma-seal {
        height: 30px; 
        margin-bottom: 15px;
    }

    .copyright-text {
        font-size: 1.6rem; 
        letter-spacing: -0.03em;
    }

    /* Forzamos alineación segura a la izquierda */
    .footer-col, 
    .footer-brand-end {
        align-items: flex-start !important;
        text-align: left !important;
    }
}

/* --- BOTÓN WHATSAPP MONOCROMO --- */
.whatsapp-fixed {
    position: fixed;
    bottom: 40px; /* Alineación suiza con el footer */
    right: 45px;  /* Sigue tu grilla de 45px */
    width: 60px;
    height: 60px;
    background-color: var(--bg-dark); /* Fondo oscuro por defecto */
    border: 1px solid rgba(255, 253, 243, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.whatsapp-fixed svg {
    width: 28px;
    height: 28px;
    fill: var(--crema); /* Icono crema sobre fondo oscuro */
    transition: transform 0.4s ease, fill 0.4s ease;
}

/* Interacción: Aquí revelamos el Amarillo Acento */
.whatsapp-fixed:hover {
    background-color: var(--amarillo-acento);
    transform: translateY(-5px) scale(1.05);
    border-color: var(--amarillo-acento);
}

.whatsapp-fixed:hover svg {
    fill: var(--bg-dark); /* El icono se vuelve oscuro en hover */
    transform: rotate(10deg);
}

/* Ajuste Responsive */
@media (max-width: 768px) {
    .whatsapp-fixed {
        bottom: 25px;
        right: 25px;
        width: 50px;
        height: 50px;
    }
    .whatsapp-fixed svg {
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   SECCIÓN SERVICIOS (SISTEMA CRUZ ESTUDIO ®)
   Arquitectura: Neue Haas (H) + IBM Plex (B) + Cofo Mono (D)
   ========================================================================== */

:root {
    --bg-dark: #1D1E1C;
    --crema: #FFFDF3;
    --amarillo-acento: #f2c335;
    --font-header: 'neue-haas-grotesk-display', sans-serif;
    --font-reading: 'IBM Plex Sans', sans-serif;
    --font-mono: 'cofo-sans-mono-variable', monospace;
}

.services-v2 {
    background-color: var(--bg-dark);
    color: var(--crema);
    padding: 180px 5%;
    overflow: hidden; /* Evita que el sello rompa el layout */
}

.obys-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- HEADER STYLE --- */
.services-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 120px;
}

.display-title {
    font-family: var(--font-header);
    font-size: clamp(3rem, 5vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-weight: 600;
}

.bold-highlight {
    font-weight: 700; /* El bold que pediste */
    color: var(--amarillo-acento);
}

/* --- SELLO CIRCULAR (FIX) --- */
.circular-text-box {
    width: 150px;
    height: 150px;
    position: relative;
    flex-shrink: 0;
}

.rotating-svg {
    width: 100%;
    height: 100%;
    animation: spin 15s linear infinite;
}

.mono-label {
    font-family: var(--font-mono);
    font-size: 8px;
    fill: var(--amarillo-acento);
    letter-spacing: 2px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- SERVICES LIST (OBYS STYLE) --- */
.service-block {
    display: grid;
    grid-template-columns: 0.5fr 2fr;
    border-top: 1px solid rgba(255, 253, 243, 0.1);
    padding: 80px 0;
    transition: background 0.4s ease;
}

.service-block:hover {
    background-color: rgba(242, 195, 53, 0.03);
}

.block-number {
    font-family: var(--font-mono);
    color: var(--amarillo-acento);
    font-size: 1.2rem;
}

.block-main h3 {
    font-family: var(--font-header);
    font-size: clamp(2.5rem, 4vw, 4rem);
    margin-bottom: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.block-main p {
    font-family: var(--font-reading);
    font-size: 1.25rem;
    max-width: 700px;
    line-height: 1.5;
    opacity: 0.8;
}

/* Pills de Metodología */
.method-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.pill {
    border: 1px solid rgba(255, 253, 243, 0.2);
    padding: 20px;
    flex: 1;
    min-width: 250px;
}

.pill span {
    display: block;
    font-family: var(--font-mono);
    color: var(--amarillo-acento);
    font-size: 0.7rem;
    margin-bottom: 10px;
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE DEFINITIVA (CRUZ ESTUDIO ®)
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1600px) {

    /* --- 1. RESPIRO SUPERIOR (AIRE CON EL NAVBAR) --- */
    

    /* --- 2. ESCALA REDUCIDA DE H1 Y H2 (SOPHISTICATED LOOK) --- */
    .hero-main-wrapper {
        padding: 0 var(--container-padding) !important;
        /* Bajamos el bloque para que no compita con el Navbar en pantallas bajas */
        transform: translateY(-5vh) !important; 
    }

    .hero-left {
        width: 75%; /* Damos más aire a la derecha para que el texto "respire" */
    }

    .hero-title {
         font-size: 7rem !important;
        /* Ajuste fino de interlineado para evitar solapamiento de ascendentes */
        line-height: 0.88;
        letter-spacing: -0.05rem;
        margin-bottom: 2rem;
        padding-left: 3%;
    }
    
    .hero-link {
    
    
    font-size: 14px;

     }
    .hero-subtitle {
        /* IBM Plex Sans escalada para lectura cómoda en 13 pulgadas */
        font-size: 18px !important;
        max-width: 520px;
        line-height: 1.5;
    }

    .word-slider {
        /* En pantallas Retina, la mono regular puede verse muy delgada; 
           un sutil ajuste de escala ayuda a equilibrar el peso visual */
        transform: scale(1.02);
        
    }
    
        
        /* BLOQUEO RÍGIDO: 
        width: 480px !important; 
        max-width: 480px !important;
        flex-shrink: 0;
        display: block;*/
    }

   /* --- 4. ELEMENTOS PERIFÉRICOS --- */
    
    /* Footer Institucional Izquierda */
    .hero-footer {
        position: absolute;
        bottom: 35px;
        left: 45px;
        z-index: 2;
        text-align: left;
    }

    .hero-right {

    
        padding-right: 3%;

    }


 /* --- FLECHA HERO (IMAGEN SVG ANIMADA) --- */

.hero-arrow img {
    /* Tus estilos base */
    width: 250px;
    height: auto;
    margin-top: 250px;

    /* --- 1. COLOR AMARILLO (#f2c335) --- */
    /* Usamos un filtro para transformar el gris del SVG al amarillo corporativo */
    filter: brightness(0) saturate(100%) invert(82%) sepia(37%) saturate(1093%) hue-rotate(354deg) brightness(103%) contrast(93%);

    /* --- 2. ANIMACIÓN DE ENTRADA --- */
    /* Estado inicial: invisible y desplazada arriba-izquierda */
    opacity: 0;
    transform: translate(-30px, -30px); 
    
    /* Ejecución: 1.2s de duración, curva suave profesional, se queda en el estado final */
    animation: arrowEmergenceImg 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    
    /* Retraso: Aparece 1.5s después de que carga la página */
    animation-delay: 1.5s;
}

/* Definición del movimiento */
@keyframes arrowEmergenceImg {
    0% {
        opacity: 0;
        /* Empieza desplazada siguiendo la diagonal de la flecha */
        transform: translate(-30px, -30px);
    }
    100% {
        opacity: 1;
        /* Termina en su posición original */
        transform: translate(0, 0);
    }
}

    .hero-fecha {
        font-size: 18px;
        font-weight: 700;
    }

    /* Botón Idioma Derecha */
    .language-switch {
        position: fixed;
        right: 45px;
        bottom: 35px;
        z-index: 1000;
    }

    .language-switch button {
        font-size: 11px;
        padding: 6px 12px;
    }

    

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE DEFINITIVA (CRUZ ESTUDIO ®)
   ========================================================================== */

@media (max-width: 768px) {

    featured-works-container {
        grid-template-columns: 1fr; /* Columna única */
        gap: 40px;
    }

    /* Ocultamos la previsualización de imagen para priorizar la lista */
    .works-preview .preview-inner {
        display: none;
    }

    /* Posicionamos el botón al final de la sección */
    .works-preview {
        position: static;
        order: 2; /* Baja después de la lista */
        align-items: flex-start;
        padding-top: 20px;
    }

    .works-list-wrapper {
        order: 1;
    }

    .featured-work-item {
        padding: 35px 0;
    }

    .work-title {
        font-size: 1.6rem;
    }

    /* Forzamos visibilidad absoluta del botón en móvil */
    .works-cta {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100%;
    }

    .view-all-link {
        font-size: 14px;
        width: 100%;
        justify-content: space-between;
    }

    /* 1. Ocultamos el bloque de la imagen (lado izquierdo) */
    .works-preview {
        display: none !important;
    }

    /* 2. Hacemos que la lista ocupe el 100% del ancho */
    .works-list-wrapper {
        width: 100% !important;
        flex: none !important;
    }

    /* 3. Ajustamos el contenedor para que no tenga gaps innecesarios */
    .featured-works-container {
        display: block !important;
        padding: 0 !important;
    }

    /* 4. Opcional: Ajustar el padding de la sección para celulares */
    .featured-works {
        padding: 60px 25px !important;
    }

    /* 5. Ajustar el tamaño de los títulos en móvil para que no se pisen */
    .work-title {
        font-size: 1.5rem !important;
        margin: 0 15px !important;
    }

    /* --- 1. CONFIGURACIÓN BASE --- */
    body {
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* ELIMINAMOS EL BLOQUEO EXTERNO: 
       Si la clase .scroll-locked está activa, en móvil la ignoramos */
    body.scroll-locked {
        overflow-y: visible !important;
        position: static !important;
        height: auto !important;
    }

    /* Bloqueo de scroll cuando el menú está abierto */
    body.menu-open {
        overflow: hidden !important;
        height: 100vh;
        position: fixed;
        width: 100%;
    }

    /* --- 2. NAVBAR & HAMBURGER (CON RESPIRO LATERAL) --- */
    .navbar-brand {
        padding: 20px 35px !important; 
        height: 80px;
        background-color: #1D1E1C;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 2000;
    }

    .logo {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        font-size: 20px;
        color: #FFFDF3;
        text-decoration: none;
    }

    /* Hamburguesa corregida */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between; 
        width: 30px;
        height: 22px; 
        position: relative;
        cursor: pointer;
        z-index: 2100;
    }

    .bar {
        height: 2px;
        width: 100%;
        background-color: #FFFDF3;
        margin: 0 !important;
        transition: all 0.3s ease;
    }

    /* Animación a X */
    .menu-toggle.open .bar:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .menu-toggle.open .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.open .bar:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

    /* MENÚ OVERLAY CENTRADO */
    .nav-links-brands {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: #1D1E1C;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 3.5rem;
        transform: translateY(-100%);
        transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
        z-index: 1000;
    }
    .nav-links-brands.active { transform: translateY(0); }
    .nav-links-brands a {
        font-family: 'neue-haas-grotesk-display', sans-serif;
        font-size: 32px !important;
        font-weight: 700;
        text-transform: uppercase;
        color: #FFFDF3;
        text-decoration: none;
    }

    /* --- 3. HERO: ALINEACIÓN Y RESPIRO SUPERIOR --- */
    .hero {
        /* AJUSTE: Aumentado a 220px para separar del Navbar */
        padding: 220px 35px 60px 35px !important; 
        height: auto;
        min-height: 100vh;
        display: flex;
        align-items: flex-start;
    }    
    
    .hero-main-wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        text-align: left !important;
        transform: none !important;
        padding: 0;
        width: 100%;
    }

    .hero-left {
        width: 100% !important;
        display: block;
    }
 
    /* Título: Justificado a la izquierda y con espacio reservado */
    .hero-title {
        font-family: 'neue-haas-grotesk-display', sans-serif;
        font-weight: 700;
        font-size: clamp(3.2rem, 11vw, 4rem);
        line-height: 1.05;
        margin: 0 0 25px 0 !important;
        width: 100% !important;
        text-align: left !important;
        min-height: 3.5em; /* Bloqueo vertical typewriter */
        display: block;
    }
    
    /* Subtítulo: COLUMNA FIJA (No se deforma) */
    .hero-subtitle {
        font-family: 'cofo-sans-mono-variable', monospace;
        font-weight: 200;
        font-size: 1.3rem;
        line-height: 1.5;
        color: #FFFDF3;
        text-align: left !important;
        
        display: block;
        width: 100%;
        max-width: 280px !important; /* Ancho rígido constante */
        margin: 0 !important;
        
        opacity: 0.9;
        word-wrap: break-word;
    }

    /* Sacar "2018-2025" en Responsive */
    .hero-footer, .hero-fecha { display: none !important; }

    /* Flecha y Botones */
    .hero-arrow { margin-top: 40px; text-align: left; }
    .hero-arrow img { width: 140px; height: auto; }
    .hero-right { display: none !important; }
    .scroll-down-btn { bottom: 80px; }
    .language-switch { bottom: 20px; right: 35px; }
}



/* Animación de rebote */
@keyframes bounce-drop {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(10px); }
    60% { transform: translateX(-50%) translateY(5px); }
}