/* ============================================================
   ESTILOS GLOBALES — Comidas Rápidas Emanuel
   ============================================================ */

@import url('variables.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-base);
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rojo); text-decoration: none; transition: color var(--transicion-rapida); }
a:hover { color: var(--rojo-oscuro); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; outline: none; font-family: var(--fuente-cuerpo); }
input, textarea, select { font-family: var(--fuente-cuerpo); outline: none; }

.contenedor { width: 100%; max-width: var(--ancho-maximo); margin: 0 auto; padding: 0 var(--espacio-md); }

/* ── Botones ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-sm);
    padding: 11px 26px;
    border-radius: var(--radio-full);
    font-family: var(--fuente-condensada);
    font-size: var(--texto-sm);
    font-weight: 700;
    letter-spacing: 1px;
    transition: all var(--transicion-normal);
    text-transform: uppercase;
    border: 2px solid transparent;
}

.btn-rojo { background: var(--rojo); color: var(--blanco); border-color: var(--rojo); }
.btn-rojo:hover { background: var(--rojo-oscuro); border-color: var(--rojo-oscuro); color: var(--blanco); }

.btn-amarillo { background: var(--amarillo); color: var(--granate); border-color: var(--amarillo); }
.btn-amarillo:hover { background: var(--amarillo-oscuro); border-color: var(--amarillo-oscuro); color: var(--granate); }

.btn-outline { background: transparent; color: var(--rojo); border-color: var(--rojo); }
.btn-outline:hover { background: var(--rojo); color: var(--blanco); }

.btn-granate { background: var(--granate); color: var(--blanco); border-color: var(--granate); }
.btn-granate:hover { background: var(--granate-claro); color: var(--amarillo); }

.btn-whatsapp { background: var(--whatsapp); color: var(--blanco); border-color: var(--whatsapp); }
.btn-whatsapp:hover { background: var(--whatsapp-oscuro); border-color: var(--whatsapp-oscuro); color: var(--blanco); }

.btn-sm { padding: 6px 16px; font-size: var(--texto-xs); }
.btn-lg { padding: 13px 30px; font-size: var(--texto-base); }
.btn-bloque { width: 100%; }
.mt-sm { margin-top: var(--espacio-sm); }
.mt-md { margin-top: var(--espacio-md); }
.oculto { display: none !important; }

/* ── Header ── */
.header-principal {
    background: var(--granate);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    box-shadow: var(--sombra-md);
    height: var(--altura-header);
    display: flex;
    align-items: center;
}

.header-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 var(--espacio-xl);
}

.header-logo { display: flex; align-items: center; gap: var(--espacio-sm); }
.header-logo img { height: 44px; width: auto; }
.header-logo span {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-lg);
    color: var(--amarillo);
    letter-spacing: 1.5px;
}

.header-nav { display: flex; align-items: center; gap: var(--espacio-sm); }
.header-nav a {
    color: #F0E5DD;
    font-family: var(--fuente-condensada);
    font-size: var(--texto-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    border-radius: var(--radio-sm);
    transition: all var(--transicion-rapida);
}
.header-nav a:hover { color: var(--amarillo); background: rgba(255,255,255,0.08); }

/* ── Footer ── */
.footer-principal {
    background: var(--granate);
    color: #F0E5DD;
    margin-top: auto;
    padding: var(--espacio-2xl) 0 0;
}

.footer-contenido {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    padding: 0 var(--espacio-xl) var(--espacio-xl);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--espacio-xl);
}

.footer-marca { text-align: left; }
.footer-logo { height: 72px; width: auto; margin-bottom: var(--espacio-sm); }
.footer-slogan {
    font-family: var(--fuente-titulo);
    font-size: var(--texto-lg);
    color: var(--amarillo);
    letter-spacing: 1.5px;
    margin-bottom: var(--espacio-xs);
}
.footer-desc { font-size: var(--texto-sm); color: #C9B8AE; line-height: 1.6; }

.footer-col-titulo {
    font-family: var(--fuente-condensada);
    font-size: var(--texto-md);
    font-weight: 700;
    color: var(--amarillo);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--espacio-md);
}

.footer-contacto, .footer-links { display: flex; flex-direction: column; gap: var(--espacio-sm); }
.footer-contacto a, .footer-links a, .footer-contacto span {
    color: #D8C8BE;
    font-size: var(--texto-sm);
    transition: color var(--transicion-rapida);
    display: flex;
    align-items: center;
    gap: var(--espacio-sm);
}
.footer-contacto a:hover, .footer-links a:hover { color: var(--amarillo); }

.footer-copy {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: var(--espacio-md) var(--espacio-xl);
    text-align: center;
    font-size: var(--texto-xs);
    color: #B8A89E;
}
.footer-dev { margin-top: 2px; }
.footer-dev strong { color: var(--amarillo); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .header-nav a { padding: 6px 10px; font-size: var(--texto-xs); }
    .header-logo span { display: none; }
    .header-contenido { padding: 0 var(--espacio-md); }
    .footer-contenido { grid-template-columns: 1fr; text-align: center; gap: var(--espacio-lg); padding: 0 var(--espacio-md) var(--espacio-xl); }
    .footer-marca { text-align: center; }
    .footer-logo { margin: 0 auto var(--espacio-sm); }
    .footer-contacto a, .footer-links a, .footer-contacto span { justify-content: center; }
}

/* ============================================================
   AJUSTE FINAL — Header blanco + Footer hueso (estilo KFC real)
   ============================================================ */

.header-principal {
    background: var(--blanco);
    border-bottom: 3px solid var(--rojo);
    box-shadow: var(--sombra-sm);
}

.header-logo span {
    color: var(--rojo);
    font-family: var(--fuente-titulo);
}

.header-nav a {
    color: var(--texto);
}

.header-nav a:hover {
    color: var(--rojo);
    background: var(--fondo-alt);
}

.header-nav a.btn-whatsapp {
    color: var(--blanco);
}
.header-nav a.btn-whatsapp:hover {
    color: var(--blanco);
}

/* ── Footer color hueso ── */
.footer-principal {
    background: var(--hueso);
    color: var(--texto);
    border-top: 3px solid var(--rojo);
}

.footer-slogan { color: var(--rojo); }
.footer-desc { color: var(--texto-suave); }

.footer-col-titulo {
    color: var(--texto);
    font-weight: 900;
}

.footer-contacto a, .footer-links a, .footer-contacto span {
    color: var(--texto-suave);
}
.footer-contacto a:hover, .footer-links a:hover { color: var(--rojo); }

.footer-copy {
    border-top: 1px solid var(--hueso-borde);
    color: var(--texto-tenue);
}
.footer-dev strong { color: var(--rojo); }

/* ============================================================
   AJUSTE FINAL — Header blanco + Footer hueso (estilo KFC real)
   ============================================================ */

.header-principal {
    background: var(--blanco);
    border-bottom: 3px solid var(--rojo);
    box-shadow: var(--sombra-sm);
}

.header-logo span {
    color: var(--rojo);
    font-family: var(--fuente-titulo);
}

.header-nav a {
    color: var(--texto);
}

.header-nav a:hover {
    color: var(--rojo);
    background: var(--fondo-alt);
}

.header-nav a.btn-whatsapp {
    color: var(--blanco);
}
.header-nav a.btn-whatsapp:hover {
    color: var(--blanco);
}

/* ── Footer color hueso ── */
.footer-principal {
    background: var(--hueso);
    color: var(--texto);
    border-top: 3px solid var(--rojo);
}

.footer-slogan { color: var(--rojo); }
.footer-desc { color: var(--texto-suave); }

.footer-col-titulo {
    color: var(--texto);
    font-weight: 900;
}

.footer-contacto a, .footer-links a, .footer-contacto span {
    color: var(--texto-suave);
}
.footer-contacto a:hover, .footer-links a:hover { color: var(--rojo); }

.footer-copy {
    border-top: 1px solid var(--hueso-borde);
    color: var(--texto-tenue);
}
.footer-dev strong { color: var(--rojo); }

/* ============================================================
   MARCO LOGO — anillo circular tipo insignia
   ============================================================ */

.header-logo img {
    border-radius: 50%;
    border: 2px solid var(--rojo);
}

.footer-logo {
    border-radius: 50%;
    border: 2px solid var(--rojo);
}