:root {
    --brand-red: #cc0000;
    --brand-yellow: #ff9900;
    --brand-dark: #1A1A1A;
    --brand-light: #ffffff;
    --brand-dark-red: #aa0000;
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    margin: 0; padding: 0;
    background-color: var(--brand-red);
    color: var(--brand-light);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* NAVEGACIÓN - FIX: Padding fluido */
.navbar {
    position: fixed; top: 0; width: 100%; padding: 15px clamp(15px, 5vw, 50px);
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(204, 0, 0, 0.95); backdrop-filter: blur(10px);
    z-index: 1000; box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.navbar-logo img { height: clamp(40px, 5vw, 50px); }
.navbar-links a {
    color: var(--brand-light); text-decoration: none; margin-left: clamp(10px, 2vw, 20px);
    font-family: var(--font-display); font-size: clamp(0.9rem, 1.5vw, 1.1rem); text-transform: uppercase;
    transition: color 0.3s ease;
}
.navbar-links a:hover { color: var(--brand-yellow); }

/* SECCIONES GENERALES - FIX: Padding fluido */
.section-block { padding: clamp(60px, 10vw, 100px) clamp(20px, 5vw, 50px); }
.bg-dark-red { background-color: var(--brand-dark-red); }

.grid-2-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); 
    max-width: 1200px; margin: 0 auto; align-items: center;
}

/* TEXTOS - FIX: clamp() y break-word para que no se corten */
.text-content h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1.1; margin-top: 0; margin-bottom: 20px; overflow-wrap: break-word; }
.text-content h4 { font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 5px; }
.text-content p { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; margin-bottom: 15px; }
.text-content ul { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; }
.tag { background-color: var(--brand-yellow); color: var(--brand-dark); display: inline-block; padding: 5px 15px; font-family: var(--font-display); border-radius: 5px; }
.highlight-text { background-color: var(--brand-yellow); color: var(--brand-dark); padding: 10px; font-family: var(--font-display); display: inline-block; }
.bold-text { font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.3rem) !important; }

/* MARCOS DE IMÁGENES */
.image-frame { border: 5px solid var(--brand-yellow); border-radius: 20px; overflow: hidden; box-shadow: 10px 10px 0px rgba(0,0,0,0.2); }
.framed-img { width: 100%; display: block; transition: transform 0.5s ease; }
.image-frame:hover .framed-img { transform: scale(1.05); }

/* CARRUSEL UNIFICADO */
.slider-frame {
    position: relative; 
    height: clamp(250px, 40vw, 350px); 
    overflow: hidden; 
    display: block; 
}
.slide-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    object-fit: cover; object-position: center center; margin: 0; opacity: 0; 
    animation: crossfade 12s infinite; will-change: opacity, transform; 
}
.slider-frame img:nth-child(2) { animation-delay: 4s; object-position: center 20%; }
.slider-frame img:nth-child(1) { animation-delay: 0s; }
.slider-frame img:nth-child(3) { animation-delay: 8s; }
@keyframes crossfade { 0% { opacity: 0; transform: scale(1.05); } 10% { opacity: 1; transform: scale(1); } 28% { opacity: 1; transform: scale(1); } 38% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }

/* HERO - FIX: Fluid typography y sin cortes */
.hero {
    position: relative; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding-top: 80px; 
}
.hero-title {
    font-family: var(--font-display); font-size: clamp(3rem, 12vw, 7rem); line-height: 0.9; margin: 0;
    color: var(--brand-yellow); text-shadow: 5px 5px 0px var(--brand-dark); text-align: center;
    overflow-wrap: break-word;
}
.text-line { display: inline-block; }
.highlight { color: #87CEEB; }
.hero-subtitle { font-family: var(--font-display); font-size: clamp(1rem, 3vw, 1.5rem); letter-spacing: 3px; text-align: center; margin-top: 15px; }

/* HAMBURGUESA EXPLOSIVA (TUS CAPAS ORIGINALES) */
/* HAMBURGUESA EXPLOSIVA */
.burger-explosion-section {
    /* Usamos svh para proteger contra la barra de Safari en iPhone */
    height: 150svh; 
    background-color: var(--brand-red); 
    position: relative;
    z-index: 2;
}

.burger-sticky-container {
    position: sticky; top: 0; width: 100%; 
    height: 100svh; /* Anclaje perfecto en móviles */
    display: flex; justify-content: center; align-items: center; 
}

.burger-wrapper {
    position: relative; width: 100%; max-width: 400px; height: 400px; transform: rotate(5deg); 
}

.burger-layer {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    width: 100%; object-fit: contain; will-change: transform;
}

/* Tus márgenes originales */
.layer-1 { z-index: 60; margin-top: -45px; } 
.layer-2 { z-index: 50; margin-top: -20px; } 
.layer-3 { z-index: 40; margin-top: -5px; }  
.layer-4 { z-index: 30; margin-top: 10px; }  
.layer-5 { z-index: 20; margin-top: 25px; }  
.layer-6 { z-index: 10; margin-top: 45px; }  

/* FIX: TEXTOS DESACOPLADOS SEGUROS */
.burger-text {
    position: absolute; width: 100%; left: 0;
    font-family: var(--font-display); 
    /* Reducimos ligeramente el clamp máximo para evitar desbordes laterales */
    font-size: clamp(1.2rem, 5vw, 2rem); 
    color: var(--brand-yellow); text-transform: uppercase;
    text-shadow: 3px 3px 0px var(--brand-dark); opacity: 0; z-index: 100; text-align: center;
    pointer-events: none;
    /* Añadimos padding para que el texto respire en pantallas pequeñas */
    padding: 0 15px;
    box-sizing: border-box;
}

/* Usamos porcentajes (%) en lugar de vh para un anclaje matemático exacto */
.text-top { top: 12%; }
.text-bottom { bottom: 8%; }

/* Tus márgenes originales que funcionaban bien */
.layer-1 { z-index: 60; margin-top: -45px; } 
.layer-2 { z-index: 50; margin-top: -20px; } 
.layer-3 { z-index: 40; margin-top: -5px; }  
.layer-4 { z-index: 30; margin-top: 10px; }  
.layer-5 { z-index: 20; margin-top: 25px; }  
.layer-6 { z-index: 10; margin-top: 45px; }  

/* FIX: TEXTOS DESACOPLADOS */
.burger-text {
    position: absolute; width: 100%; left: 0;
    font-family: var(--font-display); font-size: clamp(1.5rem, 6vw, 2.5rem);
    color: var(--brand-yellow); text-transform: uppercase;
    text-shadow: 3px 3px 0px var(--brand-dark); opacity: 0; z-index: 100; text-align: center;
    pointer-events: none;
}
.text-top { top: 15vh; }
.text-bottom { bottom: -20vh; }

/* FOOTER - FIX: Tamaños dinámicos y centrado correcto */
.footer { background-color: var(--brand-dark); padding: clamp(40px, 8vw, 80px) 20px; text-align: center; }
.footer-title { font-family: var(--font-display); font-size: clamp(3rem, 12vw, 6rem); color: var(--brand-light); margin: 0; overflow-wrap: break-word; }
.footer-subtitle { background-color: var(--brand-yellow); color: var(--brand-dark); display: inline-block; padding: 10px 30px; font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.5rem); margin-bottom: 40px; }
.locations-grid { display: flex; justify-content: center; gap: clamp(30px, 5vw, 80px); flex-wrap: wrap; }
.location-card { text-align: left; font-style: normal; min-width: 250px; }
.location-card h4 { color: var(--brand-light); font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.5rem); margin-bottom: 5px; }

/* MÓVILES */
@media (max-width: 768px) {
    .grid-2-col { grid-template-columns: 1fr; gap: 30px; }
    .reverse-mobile { display: flex; flex-direction: column-reverse; }
    .navbar { flex-direction: column; padding: 10px; }
    .navbar-links { margin-top: 10px; text-align: center; }
    .navbar-links a { margin: 0 5px; font-size: 0.85rem; }
    .burger-layer { max-width: 300px; } 
    .location-card { text-align: center; } /* Centra las sucursales en móviles */
}

@media (min-width: 768px) {
    /* 1. Reducimos ligeramente el volumen base de la hamburguesa 
          para que la explosión vertical no consuma todo el 'svh' */
    .burger-wrapper {
        max-width: 320px; 
        height: 320px;
    }

    /* 2. Empujamos el texto inferior más cerca del límite de la pantalla */
    .text-bottom {
        bottom: 3%; /* Bajamos del 8% al 3% para despejar el radio de explosión del pan */
        /* Reducimos sutilmente el tamaño máximo de la fuente para evitar colisiones laterales */
        font-size: clamp(1.2rem, 3.5vw, 2rem); 
    }
    
    /* 3. Subimos el texto superior para balancear el diseño */
    .text-top {
        top: 6%; 
    }
}