/* ==========================================================
   TEMA DÍA DE MUERTOS  (solo index.html)
   Se carga DESPUÉS de global.css e index.css y los sobreescribe.
   Para quitar el tema: borra la línea <link ... muertos.css>
   y los bloques marcados "DÍA DE MUERTOS" en index.html.
   (Respaldo completo en la carpeta _respaldo-antes-dia-de-muertos)
========================================================== */

:root{
    --rojo:#c2185b;          /* rosa mexicano */
    --amarillo:#ff9800;      /* cempasúchil */
    --negro:#2a1038;         /* morado profundo */
    --morado:#4a1a63;
    --cempa:#ff9800;
    --crema:#fff6e8;
}

/* ---------- HERO ---------- */
.hero{
    background:
        radial-gradient(circle at 85% 15%, rgba(255,152,0,.30), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(194,24,91,.18), transparent 45%),
        linear-gradient(135deg, #fff3e0 0%, #ffe3c2 55%, #f9d3e3 100%);
    padding-bottom:110px;
}

.hero-overlay{
    background:radial-gradient(rgba(255,152,0,.28), transparent 70%);
}

.hero-title{ color:var(--negro); }
.title-accent{
    color:var(--rojo);
    text-shadow:3px 3px 0 rgba(255,152,0,.35);
}
.hero-desc{ color:#5a3b66; }

.hero-image-wrapper{
    border:6px solid var(--cempa);
    outline:3px dashed var(--rojo);
    outline-offset:6px;
    box-shadow:0 30px 80px rgba(74,26,99,.35);
}

/* Etiqueta Día de Muertos */
.muertos-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--negro);
    color:#ffd180;
    font-family:'Oswald',sans-serif;
    font-size:.95rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:8px 18px;
    border-radius:50px;
    margin-bottom:18px;
    border:2px solid var(--cempa);
    box-shadow:0 6px 18px rgba(42,16,56,.25);
}
.muertos-tag i{ color:#fff; }

/* Flores y pétalos de cempasúchil (SVG propio, img/) */
.petalo{
    position:absolute;
    top:-60px;
    width:56px;
    height:56px;
    background:url('../img/cempasuchil.svg') center/contain no-repeat;
    opacity:0;
    z-index:1;
    pointer-events:none;
    animation:petaloCae 12s linear infinite;
    filter:drop-shadow(0 3px 3px rgba(120,50,0,.25));
}
/* los pares son pétalos sueltos */
.petalo:nth-of-type(even){
    width:22px;
    height:38px;
    background-image:url('../img/petalo-cempasuchil.svg');
}
.petalo:nth-of-type(1){ left:6%;  animation-delay:0s;   width:48px; height:48px; }
.petalo:nth-of-type(2){ left:18%; animation-delay:3s;   animation-duration:14s; }
.petalo:nth-of-type(3){ left:32%; animation-delay:7s;   width:40px; height:40px; }
.petalo:nth-of-type(4){ left:47%; animation-delay:1.5s; animation-duration:15s; }
.petalo:nth-of-type(5){ left:61%; animation-delay:5s;   width:72px; height:72px; }
.petalo:nth-of-type(6){ left:74%; animation-delay:9s;   animation-duration:13s; }
.petalo:nth-of-type(7){ left:86%; animation-delay:2.5s; width:44px; height:44px; }
.petalo:nth-of-type(8){ left:95%; animation-delay:6s;   animation-duration:16s; }

@keyframes petaloCae{
    0%{   transform:translateY(0) rotate(0deg) translateX(0); opacity:0; }
    10%{  opacity:.9; }
    50%{  transform:translateY(55vh) rotate(180deg) translateX(30px); }
    90%{  opacity:.8; }
    100%{ transform:translateY(110vh) rotate(360deg) translateX(-20px); opacity:0; }
}

/* ---------- PAPEL PICADO ---------- */
.papel-picado{
    display:flex;
    width:100%;
    height:48px;
    overflow:hidden;
    position:relative;
    z-index:3;
    pointer-events:none;
    border-top:3px solid var(--morado);
}
.papel-picado.en-hero{
    position:absolute;
    left:0;
    bottom:0;
    border-top:none;
    border-bottom:none;
    transform:rotate(180deg);   /* banderines hacia arriba sobre la sección */
}
.papel-picado.en-hero i{ animation:none; }

.papel-picado i{
    flex:1 0 56px;
    height:100%;
    background-color:#ff9800;
    background-image:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,.7) 0 5px, transparent 6px),
        radial-gradient(circle at 24% 62%, rgba(255,255,255,.6) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 76% 62%, rgba(255,255,255,.6) 0 2.5px, transparent 3.5px);
    clip-path:polygon(0 0, 100% 0, 100% 80%, 87% 100%, 75% 80%, 62% 100%, 50% 80%, 38% 100%, 25% 80%, 12% 100%, 0 80%);
    margin-right:2px;
    transform-origin:top center;
    animation:papelBalanceo 3.2s ease-in-out infinite alternate;
}
.papel-picado i:nth-child(5n+1){ background-color:#ff9800; }
.papel-picado i:nth-child(5n+2){ background-color:#c2185b; animation-delay:-.6s; }
.papel-picado i:nth-child(5n+3){ background-color:#7b1fa2; animation-delay:-1.2s; }
.papel-picado i:nth-child(5n+4){ background-color:#ffd54f; animation-delay:-1.8s; }
.papel-picado i:nth-child(5n+5){ background-color:#26a69a; animation-delay:-2.4s; }

@keyframes papelBalanceo{
    from{ transform:rotate(-2.5deg); }
    to{   transform:rotate(2.5deg); }
}

/* ---------- DIVISOR DE CEMPASÚCHIL ---------- */
.divisor-cempa{
    text-align:center;
    background:var(--crema);
    padding:14px 10px;
    font-size:1.5rem;
    letter-spacing:10px;
    white-space:nowrap;
    overflow:hidden;
    border-top:2px dashed rgba(194,24,91,.35);
    border-bottom:2px dashed rgba(194,24,91,.35);
}
.fl{
    display:inline-block;
    width:34px;
    height:34px;
    margin:0 5px;
    vertical-align:middle;
    background:url('../img/cempasuchil.svg') center/contain no-repeat;
    filter:drop-shadow(0 2px 2px rgba(120,50,0,.25));
}
.cal-az{
    display:inline-block;
    width:36px;
    height:43px;
    margin:0 5px;
    vertical-align:middle;
    background:url('../img/calavera-azucar.svg') center/contain no-repeat;
    filter:drop-shadow(0 2px 2px rgba(42,16,56,.3));
}
.cta-calaveras .cal-az{ width:56px; height:67px; }
.cta-calaveras .fl{ width:60px; height:60px; }
.divisor-cempa .cal{ color:var(--negro); font-size:1.3rem; }

/* ---------- SECCIONES ---------- */
.facebook-feed{
    background:linear-gradient(180deg, #fff6e8 0%, #ffffff 100%);
}

.stats{
    background:
        radial-gradient(ellipse at 20% 50%, rgba(194,24,91,.25), transparent 55%),
        radial-gradient(ellipse at 80% 50%, rgba(255,152,0,.20), transparent 55%),
        var(--negro);
}
.stat-number{ color:#ffb74d; }
.stat-label{ color:rgba(255,255,255,.75); }
.stat-divider{ background:rgba(255,183,77,.35); }

.experience{ background:var(--crema); }

.cta{
    background:
        linear-gradient(135deg, #4a1a63 0%, #8e1d6b 55%, #c2185b 100%);
}
.cta-particles{
    background:
        radial-gradient(ellipse at 30% 0%, rgba(255,152,0,.35), transparent 55%),
        radial-gradient(ellipse at 70% 100%, rgba(255,214,0,.15), transparent 55%);
}
.cta .btn-primary{ color:var(--morado); }

.cta-calaveras{
    font-size:2rem;
    letter-spacing:12px;
    margin-bottom:6px;
}

/* ---------- PIE ---------- */
footer{ border-top:4px solid var(--cempa); }

/* ---------- MÓVIL ---------- */
@media (max-width:768px){
    .papel-picado{ height:36px; }
    .papel-picado i{ flex:1 0 42px; }
    .muertos-tag{ font-size:.8rem; padding:6px 14px; }
    .divisor-cempa{ font-size:1.2rem; letter-spacing:8px; }
    .hero-image-wrapper{ outline-offset:4px; }
}

@media (prefers-reduced-motion:reduce){
    .petalo, .papel-picado i{ animation:none; }
    .petalo{ display:none; }
}

/* ==========================================================
   RELOJ DE HORARIO -> VELADORA DE OFRENDA
   Abierto = veladora encendida con llama y halo.
   Cerrado = veladora apagada con hilito de humo.
   (el HTML lo genera js/script.js)
========================================================== */
.status-chip{
    position:relative;
    background:linear-gradient(135deg, #2a1038 0%, #4a1a63 100%);
    border:2px solid #ff9800;
    box-shadow:
        0 0 0 5px rgba(255,152,0,.18),
        0 12px 32px rgba(42,16,56,.45),
        inset 0 0 22px rgba(255,152,0,.12);
    font-size:.85rem;
    overflow:hidden;
}
/* destello que cruza el chip cuando está abierto */
.status-chip::after{
    content:'';
    position:absolute;
    top:0; bottom:0; left:-60%;
    width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,214,128,.28), transparent);
    transform:skewX(-20deg);
    animation:chipBrillo 5s ease-in-out infinite;
    pointer-events:none;
}
.status-chip.is-closed::after{ display:none; }

@keyframes chipBrillo{
    0%,55%{ left:-60%; }
    100%{ left:140%; }
}

.status-chip-state,
.status-chip.is-closed .status-chip-state{
    background:transparent;
    gap:14px;
    padding:10px 20px 10px 16px;
    border-right:2px dashed rgba(255,152,0,.55);
    letter-spacing:0;
}

.status-texto{
    display:flex;
    flex-direction:column;
    gap:5px;
    font-family:'Oswald',sans-serif;
    font-size:1.25rem;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    line-height:1;
    color:#ffcc80;
    text-shadow:0 0 12px rgba(255,152,0,.85);
}
.status-texto small{
    font-family:'Poppins',sans-serif;
    font-size:.58rem;
    font-weight:500;
    letter-spacing:1.4px;
    color:rgba(255,255,255,.65);
    text-shadow:none;
}
.status-chip.is-closed .status-texto{
    color:#d1b3e0;
    text-shadow:none;
}

.status-chip-detail{
    position:relative;
    color:#fff;
    font-weight:500;
    padding:12px 20px 14px;
}
.status-chip-detail i{ color:#ffb74d; font-size:.95em; }

/* ---------- la veladora ---------- */
.status-vela{
    position:relative;
    width:26px;
    height:50px;
    flex-shrink:0;
}
/* halo de luz */
.status-vela::before{
    content:'';
    position:absolute;
    left:50%; top:2px;
    width:64px; height:64px;
    margin-left:-32px;
    background:radial-gradient(circle, rgba(255,183,77,.65) 0%, rgba(255,152,0,.25) 40%, transparent 70%);
    animation:haloLatido 1.6s ease-in-out infinite alternate;
    pointer-events:none;
}
.cirio{
    position:absolute;
    left:4px; bottom:0;
    width:18px; height:25px;
    border-radius:3px 3px 5px 5px;
    background:linear-gradient(90deg, #ffe0b2 0%, #fff3e0 45%, #ffcc80 100%);
    box-shadow:inset -3px 0 5px rgba(120,60,0,.18), 0 3px 6px rgba(0,0,0,.35);
}
.cirio::before{                       /* cerita derretida */
    content:'';
    position:absolute;
    top:0; left:2px;
    width:5px; height:9px;
    border-radius:0 0 5px 5px;
    background:#fff8e1;
}
.mecha{
    position:absolute;
    left:12px; bottom:25px;
    width:2px; height:6px;
    background:#3e2723;
    border-radius:1px;
}
.llama{
    position:absolute;
    left:7px; bottom:29px;
    width:12px; height:20px;
    transform-origin:50% 100%;
    animation:llamaBaila 1.1s ease-in-out infinite alternate;
    filter:drop-shadow(0 0 7px #ff9800) drop-shadow(0 0 14px rgba(255,152,0,.7));
}
.llama::before{                       /* gota con punta hacia arriba */
    content:'';
    position:absolute;
    left:1px; bottom:0;
    width:10px; height:10px;
    border-radius:50% 0 50% 50%;
    transform:rotate(-45deg) scale(1.35);
    transform-origin:50% 100%;
    background:radial-gradient(circle at 50% 70%, #fffde7 0 22%, #ffd54f 48%, #ff9800 75%, #e65100 100%);
}
.humo{ display:none; }

@keyframes llamaBaila{
    0%  { transform:scale(1,1) rotate(-3deg); }
    35% { transform:scale(.92,1.08) rotate(2deg); }
    70% { transform:scale(1.05,.95) rotate(-2deg); }
    100%{ transform:scale(.95,1.1) rotate(3deg); }
}
@keyframes haloLatido{
    from{ opacity:.7; transform:scale(.9); }
    to{   opacity:1;  transform:scale(1.12); }
}

/* cerrado: sin llama, sin halo, con humito */
.status-chip.is-closed .llama,
.status-chip.is-closed .status-vela::before{ display:none; }
.status-chip.is-closed .mecha{ background:#1a1a1a; box-shadow:0 -1px 0 #ff5722; }
.status-chip.is-closed .cirio{
    filter:grayscale(.45) brightness(.85);
}
.status-chip.is-closed .humo{
    display:block;
    position:absolute;
    left:11px; bottom:31px;
    width:4px; height:26px;
    border-radius:50%;
    background:linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0));
    filter:blur(1.5px);
    transform-origin:50% 100%;
    animation:humoSube 3.2s ease-in-out infinite;
}
@keyframes humoSube{
    0%  { transform:translateX(0) scaleY(.4) skewX(0deg);  opacity:0; }
    30% { opacity:.9; }
    60% { transform:translateX(3px) scaleY(1) skewX(14deg); opacity:.6; }
    100%{ transform:translateX(-3px) scaleY(1.3) skewX(-14deg); opacity:0; }
}

@media (max-width:576px){
    .status-chip{ font-size:.75rem; }
    .status-texto{ font-size:1.05rem; }
    .status-chip-state, .status-chip.is-closed .status-chip-state{ padding:8px 14px 8px 12px; gap:10px; }
    .status-chip-detail{ padding:10px 14px 12px; }
}
@media (prefers-reduced-motion:reduce){
    .status-chip::after, .llama, .status-vela::before, .humo{ animation:none; }
}

/* ==========================================================
   NAVBAR TEMÁTICA DÍA DE MUERTOS
========================================================== */
.navbar {
    background: rgba(42, 16, 56, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 2px solid var(--cempa);
    box-shadow: 0 4px 25px rgba(42, 16, 56, 0.4) !important;
}

.navbar.scrolled {
    background: rgba(30, 10, 40, 0.98) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Tira mini de papel picado decorativa bajo el navbar */
.navbar::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 100%;
    height: 9px;
    background-image: 
        radial-gradient(circle at 10px 0, #ff9800 6px, transparent 7px),
        radial-gradient(circle at 25px 0, #c2185b 6px, transparent 7px),
        radial-gradient(circle at 40px 0, #7b1fa2 6px, transparent 7px),
        radial-gradient(circle at 55px 0, #ffd54f 6px, transparent 7px),
        radial-gradient(circle at 70px 0, #26a69a 6px, transparent 7px);
    background-size: 75px 9px;
    background-repeat: repeat-x;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

.navbar .nav-link {
    color: #f7eafc !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.navbar .nav-link:hover {
    color: #ffd54f !important;
    text-shadow: 0 0 10px rgba(255, 152, 0, 0.7);
    transform: translateY(-1px);
}

.navbar .nav-link.active {
    color: #ff9800 !important;
    font-weight: 600;
}

.navbar .nav-link::after {
    background: linear-gradient(90deg, #ff9800, #c2185b) !important;
    height: 3px !important;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.8);
}

/* Botón reservar en rojo */
.navbar .btn-reservar,
.mobile-reservar {
    background: #d50000 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(213, 0, 0, 0.45) !important;
    font-weight: 600;
}

.navbar .btn-reservar:hover,
.mobile-reservar:hover {
    background: #b70000 !important;
    box-shadow: 0 6px 24px rgba(213, 0, 0, 0.65) !important;
    transform: translateY(-2px) scale(1.03);
}

/* Botón hamburguesa móvil */
.hamburger span {
    background: #ffb74d !important;
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}

.hamburger:hover {
    background: rgba(255, 152, 0, 0.15) !important;
}

/* Menú móvil temático */
.mobile-menu {
    background: linear-gradient(180deg, #2a1038 0%, #1e0929 100%) !important;
    border-left: 2px solid var(--cempa);
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.6) !important;
}

.mobile-menu a {
    color: #f3e5f5 !important;
    border-bottom: 1px solid rgba(255, 152, 0, 0.15) !important;
}

.mobile-menu a:hover {
    color: #ffd54f !important;
    padding-left: 8px;
}

/* ==========================================================
   OPTIMIZACION DE RENDIMIENTO (sin quitar el estilo)
   - Las animaciones decorativas se PAUSAN cuando no se ven
     (ver bloque "MUERTOS: pausar animaciones" en js/script.js)
   - Efectos pesados solo en pantallas grandes
========================================================== */

/* La imagen principal respeta su proporcion real */
.hero-image img,
.gallery-item img{ height:auto; }
.hero-image-wrapper img{
    aspect-ratio:1280 / 590;
    object-fit:cover;
}

/* Menu: efecto vidrio ligero solo en pantallas grandes */
.navbar,
.navbar.scrolled{
    background:rgba(42,16,56,.96) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
}
@media (min-width:1025px){
    .navbar,
    .navbar.scrolled{
        background:rgba(42,16,56,.88) !important;
        -webkit-backdrop-filter:blur(8px) !important;
        backdrop-filter:blur(8px) !important;
    }
}
.navbar::after{ filter:none; }

/* Capas propias para que animar no repinte toda la pagina */
.petalo{ filter:none; will-change:transform, opacity; }
.papel-picado{ contain:paint; }
.papel-picado i{ will-change:transform; }
.smoke{ filter:blur(40px); will-change:transform; }
.hero-image-shine{ will-change:transform; }

/* Secciones de abajo: no se pintan hasta acercarse con el scroll */
.facebook-feed,
.stats,
.experience,
.cta{
    content-visibility:auto;
    contain-intrinsic-size:auto 600px;
}

/* ---- PAUSA de animaciones cuando no estan a la vista ---- */
body.fuera-hero .petalo,
body.fuera-hero .smoke,
body.fuera-hero .hero-overlay,
body.fuera-hero .hero-image-shine,
body.pestana-oculta *,
body.pestana-oculta *::before,
body.pestana-oculta *::after{
    animation-play-state:paused !important;
}
.papel-picado:not(.visible) i{ animation-play-state:paused; }

/* ---- VELADORA: el humo siempre se queda ---- */
.status-chip.is-closed .humo{
    display:block !important;
    animation:humoSube 3.2s ease-in-out infinite !important;
}

@media (max-width:768px){
    /* Imagen principal en celular: cuadro mas alto y bien encuadrado */
    .hero-image{
        max-width:100%;
        transform:none;
        animation:none;
        opacity:1;
    }
    .hero-image-wrapper{
        border-width:4px;
        outline-offset:3px;
        border-radius:22px;
    }
    .hero-image-wrapper img{
        aspect-ratio:4 / 3;
        width:100%;
        object-position:center;
    }
    /* En celular: menos capas, no ninguna */
    .smoke-2, .smoke-3{ display:none; }
    .smoke{ filter:blur(28px); }
    .cursor-glow{ display:none !important; }
    .petalo:nth-of-type(n+7){ display:none; }
}

@media (prefers-reduced-motion:reduce){
    .petalo, .smoke, .hero-overlay, .hero-image-shine, .papel-picado i{ animation:none !important; }
}