/* ===========================================================
   BASE.CSS  – El Mana Supermercado v2
   Reset + Layout base + Header + Footer + Animaciones globales
   =========================================================== */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--primary-font, 'Poppins', system-ui, -apple-system, sans-serif);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color .35s ease, color .35s ease;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

/* ============ HEADER ============ */
.site-header {
    background-color: var(--header-bg);
    color: #fff;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ============ v2.6 - LANGUAGE SWITCHER (esquina superior derecha) ============ */
.lang-switcher {
    position: absolute;
    top: .7rem;
    right: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,0,0,0.28);
    padding: 4px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 999px;
    text-decoration: none;
    color: rgba(255,255,255,0.82);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.lang-btn:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    transform: translateY(-1px);
}
.lang-btn.is-active {
    background: var(--accent-green, #64B232);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.35) inset;
}
.lang-btn .lang-flag {
    width: 22px;
    height: 15px;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}
.lang-btn .lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
.lang-btn .lang-code {
    font-family: 'Poppins', system-ui, sans-serif;
}

/* En pantallas chicas, hacemos el switcher un poco más compacto */
@media (max-width: 600px) {
    .lang-switcher { top: .5rem; right: .5rem; padding: 3px; gap: 3px; }
    .lang-btn      { padding: 3px 7px; font-size: .72rem; }
    .lang-btn .lang-flag { width: 18px; height: 12px; }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: 1800px;
    margin: 0 auto;
}

.header-logo { flex: 0 0 auto; }
.header-logo img {
    /* v2.6.11 - Ancla de tamaño FIJO (height + max-width) para que los SVGs
       con `width="100%" height="100%"` tengan un contenedor con dimensiones
       explícitas de donde derivar su tamaño. Antes: `max-height: 90px` +
       `width: auto` — un SVG en % dentro de un flex `0 0 auto` sin dimensión
       colapsaba a 0×0. Ahora height fijo funciona igual con JPG/PNG raster
       (dimensiones intrínsecas se ajustan) Y con SVG en porcentaje. */
    height: 90px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 6px;
    transition: transform .3s ease;
}
.header-logo img:hover { transform: scale(1.05); }

.header-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.header-title h1 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1.15;
    margin-bottom: .3rem;
}

.header-tagline {
    color: rgba(255,255,255,0.75);
    font-size: .95rem;
    font-weight: 500;
    margin-bottom: .6rem;
    font-style: italic;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 1.6rem;
    justify-content: center;
    flex-wrap: wrap;
}
nav a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 6px 4px;
    position: relative;
    transition: color .25s ease;
}
nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 0%;
    background: var(--accent-green);
    transition: width .3s ease;
}
nav a:hover { color: var(--accent-green); }
nav a:hover::after,
nav a.is-active::after { width: 100%; }
nav a.is-active { color: var(--accent-green); }
nav a.nav-admin { color: var(--accent-orange); }
nav a.nav-admin:hover { color: #ffab8a; }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: absolute;
    top: 4px; right: 0;
}
.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ MAIN LAYOUT ============ */
main {
    /* v2.3.1: antes width:96% -> creaba ~2% de margen horizontal que
       impedía que el "Margen externo de la galería" fuese realmente 2px
       horizontalmente. Ahora usamos 100% con un padding responsivo mínimo,
       para que la sección respete el outer_padding elegido en el Back Office. */
    width: 100%;
    max-width: 1800px;
    margin: 2.5rem auto;
    padding: 0 clamp(4px, 0.4vw, 12px);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    box-sizing: border-box;
}

/* ============ FOOTER ============ */
.site-footer {
    background-color: var(--footer-bg);
    color: #fff;
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
    margin-top: 4rem;
    border-top: 4px solid var(--accent-green);
}
.footer-main-text {
    font-size: 1rem;
    margin-bottom: 1.2rem;
    opacity: 0.9;
}
.footer-social-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.footer-message {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}
.footer-sep { opacity: 0.4; }

.footer-signature {
    margin-top: 1.5rem;
    font-size: .82rem;
    opacity: .55;
    letter-spacing: .5px;
}

.social-icons-container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.social-icon-link {
    color: #fff;
    font-size: 1.4rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .3s ease;
}
.social-icon-link:hover {
    background: var(--accent-green);
    color: #fff;
    transform: translateY(-3px) scale(1.08);
}
.social-facebook:hover { background: #1877F2; }
.social-instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-whatsapp:hover  { background: #25D366; }
.social-tiktok:hover    { background: #010101; }
.social-youtube:hover   { background: #FF0000; }
.social-twitter:hover   { background: #000; }
.social-linkedin:hover  { background: #0A66C2; }
.social-telegram:hover  { background: #229ED9; }
/* v2.4 - Google Reviews (usa los colores del logo de Google) */
.social-google-reviews:hover,
.social-google:hover    { background: #4285F4; }

/* ============ v2.4 - REDES SOCIALES DEBAJO DEL SLOGAN (opcional) ============ */
/* v2.5 - Ahora replica el mismo layout "mensaje | iconos" del footer. */
/* v2.5.1 - Raya de separación TAMBIÉN debajo (simétrica con la superior). */
.header-social-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: .55rem;
    margin-bottom: .35rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
    border-top:    1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.14);
}
.header-social-message {
    color: rgba(255,255,255,0.92);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .2px;
}
.header-social-sep { opacity: 0.4; color: #fff; }

.header-social {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.header-social-link {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.header-social-link:hover {
    background: var(--accent-green);
    color: #fff;
    transform: translateY(-2px) scale(1.08);
}
/* Colores marca al hacer hover (reusa los tokens del footer arriba, pero
   escritos en la variante .header-social-link para no chocar con .social-icon-link) */
.header-social-link.social-facebook:hover     { background: #1877F2; }
.header-social-link.social-instagram:hover    { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.header-social-link.social-whatsapp:hover     { background: #25D366; }
.header-social-link.social-tiktok:hover       { background: #010101; }
.header-social-link.social-youtube:hover      { background: #FF0000; }
.header-social-link.social-twitter:hover      { background: #000; }
.header-social-link.social-linkedin:hover     { background: #0A66C2; }
.header-social-link.social-telegram:hover     { background: #229ED9; }
.header-social-link.social-google-reviews:hover,
.header-social-link.social-google:hover       { background: #4285F4; }

/* ============ v2.4/v2.5 - EFECTOS ANIMADOS PARA LOS LINKS DE LA NAV ============
   v2.4: la clase nav-fx-* iba en <nav> (efecto global). Todos los links del menú
         compartían el mismo efecto.
   v2.5: la clase nav-fx-* ahora va DIRECTAMENTE en cada <a>, para que cada link
         (Inicio, Taquería, Carnicería, Envíos) pueda tener su propio efecto.
   Los dos selectores conviven para no romper nada: la primera forma sigue
   funcionando si por algún motivo se aplica el efecto a <nav>, y la segunda
   forma cubre el modo per-link nuevo. */

/* Parpadeo tipo neón */
@keyframes navFxBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .18; }
}
nav.nav-fx-blink a.nav-main,
a.nav-main.nav-fx-blink {
    animation: navFxBlink 1s ease-in-out infinite;
}

/* Latido / pulso (escala) */
@keyframes navFxPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
nav.nav-fx-pulse a.nav-main,
a.nav-main.nav-fx-pulse {
    display: inline-block;
    transform-origin: center;
    animation: navFxPulse 1.4s ease-in-out infinite;
}

/* Brillo (glow) */
@keyframes navFxGlow {
    0%, 100% { text-shadow: 0 0 6px currentColor, 0 0 10px currentColor; }
    50%      { text-shadow: 0 0 14px currentColor, 0 0 22px currentColor, 0 0 32px currentColor; }
}
nav.nav-fx-glow a.nav-main,
a.nav-main.nav-fx-glow {
    animation: navFxGlow 1.8s ease-in-out infinite;
}

/* Rebote (bounce) */
@keyframes navFxBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
nav.nav-fx-bounce a.nav-main,
a.nav-main.nav-fx-bounce {
    display: inline-block;
    animation: navFxBounce 1.1s ease-in-out infinite;
}

/* Sacudir (shake) */
@keyframes navFxShake {
    0%, 100%       { transform: translateX(0); }
    20%, 60%       { transform: translateX(-3px); }
    40%, 80%       { transform: translateX(3px); }
}
nav.nav-fx-shake a.nav-main,
a.nav-main.nav-fx-shake {
    display: inline-block;
    animation: navFxShake 1.2s ease-in-out infinite;
}

/* Rainbow (arcoíris animado con background-clip) */
@keyframes navFxRainbowSlide {
    0%   { background-position: 0% 50%; }
    100% { background-position: 400% 50%; }
}
nav.nav-fx-rainbow a.nav-main,
a.nav-main.nav-fx-rainbow {
    background: linear-gradient(90deg, #ff004c, #ffbf00, #64b232, #22b5ff, #7a3cff, #ff004c);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;      /* pisa el color per-link solo aquí */
    -webkit-text-fill-color: transparent;
    animation: navFxRainbowSlide 4s linear infinite;
}

/* Ola (wave) - leve balanceo */
@keyframes navFxWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-3px) rotate(-2deg); }
    75%      { transform: translateY(3px) rotate(2deg); }
}
nav.nav-fx-wave a.nav-main,
a.nav-main.nav-fx-wave {
    display: inline-block;
    animation: navFxWave 1.6s ease-in-out infinite;
}

/* Respeta las preferencias del usuario que pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
    nav.nav-fx-blink   a.nav-main, a.nav-main.nav-fx-blink,
    nav.nav-fx-pulse   a.nav-main, a.nav-main.nav-fx-pulse,
    nav.nav-fx-glow    a.nav-main, a.nav-main.nav-fx-glow,
    nav.nav-fx-bounce  a.nav-main, a.nav-main.nav-fx-bounce,
    nav.nav-fx-shake   a.nav-main, a.nav-main.nav-fx-shake,
    nav.nav-fx-rainbow a.nav-main, a.nav-main.nav-fx-rainbow,
    nav.nav-fx-wave    a.nav-main, a.nav-main.nav-fx-wave {
        animation: none !important;
    }
}

/* ============ ANIMACIONES SCROLL ============ */
[data-animate] {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
}
[data-animate].is-visible { opacity: 1; transform: none; }

[data-animate="fade-up"]     { transform: translateY(40px); }
[data-animate="fade-down"]   { transform: translateY(-40px); }
[data-animate="fade-left"]   { transform: translateX(-40px); }
[data-animate="fade-right"]  { transform: translateX(40px); }
[data-animate="zoom-in"]     { transform: scale(.85); }
[data-animate="rotate-in"]   { transform: rotate(-6deg) scale(.9); }

/* ============ DARK MODE ============ */
body.theme-dark {
    background-color: #0f172a;
    color: #e2e8f0;
}
body.theme-dark .section-card {
    background: #1e293b !important;
    color: #e2e8f0;
}
body.theme-dark .card-frame {
    background-color: #1e293b !important;
}
body.theme-dark .card-img-wrapper {
    background-color: #0f172a;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 850px) {
    .site-header { padding: 2.4rem 1rem .8rem; } /* +top padding para que quepa el lang-switcher */
    .header-inner { flex-direction: column; gap: .6rem; }
    .header-logo img { height: 60px; max-width: 160px; }  /* v2.6.11 - height fijo también en mobile */
    .header-title h1 { font-size: 1.6rem; margin-bottom: .3rem; }
    .header-tagline { font-size: .8rem; }
    .nav-toggle { display: block; }
    nav {
        display: none;
        width: 100%;
        margin-top: .8rem;
    }
    nav.is-open { display: block; }
    nav ul {
        flex-direction: column;
        gap: .4rem;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-top: .8rem;
    }
    nav a { padding: 10px 8px; display: block; }
}