/* ============================================================
   FUEGO SAGRADO — capa compartida (v2.1)
   La usan index.html y restaurantes.html. Todo se apaga con
   prefers-reduced-motion y sin JS el contenido queda visible.
   ============================================================ */

/* --- títulos palabra por palabra --- */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mx-w>span{display:inline-block;transform:translateY(108%);transition:transform 1s cubic-bezier(.16,.84,.44,1);
  transition-delay:calc(var(--i,0) * 55ms)}
.mx-in .mx-w>span{transform:none}

/* --- fotos que se descubren con una cortina ---
   El doble selector le gana a las transiciones propias de cada página (.gal-grid img, .ag-card .ph). */
.mx .mx-clip.mx-clip{clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path 1.25s cubic-bezier(.77,0,.18,1),transform 1.6s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--d,0ms)}
.mx .mx-clip.mx-clip.mx-in{clip-path:inset(0 0 0 0);transform:none}

/* --- portada: zoom lento de entrada --- */
.mx-kb{animation:mxKb 2.6s cubic-bezier(.16,.84,.44,1) both}
@keyframes mxKb{from{transform:scale(1.14)}to{transform:scale(1)}}
[data-par]{will-change:transform}

/* --- videos: vista previa muda en loop --- */
.vid-card.mx-prev .vid-ov{background:linear-gradient(180deg,rgba(11,11,12,0) 40%,rgba(11,11,12,.75))}
.vid-card .mx-mute{position:absolute;top:14px;right:14px;z-index:3;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:#fff;background:rgba(11,11,12,.55);backdrop-filter:blur(6px);
  padding:6px 10px;border-radius:100px;display:flex;align-items:center;gap:6px;pointer-events:none;opacity:0;transition:.4s}
.vid-card.mx-prev .mx-mute{opacity:1}
.vid-card .mx-mute i{width:6px;height:6px;border-radius:50%;background:#E4571C;animation:mxRec 1.4s infinite}
@keyframes mxRec{50%{opacity:.25}}
.vid-card video:focus{outline:none}
@media(hover:hover){.vid-card{transition:transform .6s cubic-bezier(.16,.84,.44,1)}.vid-card:hover{transform:translateY(-6px)}}

/* --- halo difuminado detrás de cada video + título debajo --- */
.vid-halo{position:relative;isolation:isolate}
.vid-luz{position:absolute;inset:8% -10% -4%;z-index:-1;border-radius:40px;background:center/cover;
  filter:blur(46px) saturate(1.5);opacity:.5;transition:opacity .6s,transform .8s cubic-bezier(.16,.84,.44,1)}
.vid-halo:hover .vid-luz{opacity:.75;transform:scale(1.05)}
.vid-halo .vid-card.mx-prev~.vid-luz,.vid-halo:has(.mx-prev) .vid-luz{opacity:.72}
.vid-lbl.vid-pie{position:static;display:block;margin:16px 0 0 4px;text-align:left}
.vid-card .vid-ov{align-items:center}

/* --- toda la multimedia responde al mouse: se acerca apenas y gana luz --- */
@media(hover:hover){
  .mx .evt-imgs .mx-clip.mx-in:hover,.mx .ag-card:hover .ag-ph.mx-clip.mx-in{transform:scale(1.035);transition:transform .9s cubic-bezier(.16,.84,.44,1)}
  .mx .sol-media:hover .sol-img.on{transform:scale(1.04)}
  .mx .sol-img{transition:opacity .8s,transform 1.2s cubic-bezier(.16,.84,.44,1)}
}

/* --- botones magnéticos --- */
.mx-mag{transition:transform .35s cubic-bezier(.16,.84,.44,1),box-shadow .35s,background .35s}

/* --- cinta de frases de la marca --- */
.mx-band{overflow:hidden;padding:26px 0;background:var(--ink);border-top:1px solid rgba(244,237,226,.08);
  border-bottom:1px solid rgba(244,237,226,.08);position:relative}
.mx-band-tr{display:flex;width:max-content;animation:mxBand 38s linear infinite}
.mx-band:hover .mx-band-tr,.mx-oculta .mx-band-tr{animation-play-state:paused}
.mx-band span{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(34px,5.4vw,72px);line-height:1;
  white-space:nowrap;padding:0 .5em;color:transparent;-webkit-text-stroke:1px rgba(244,237,226,.32)}
.mx-band span.f{color:transparent;-webkit-text-stroke:0;background:linear-gradient(100deg,#B3200E,#E4571C 42%,#F0902B 70%,#EFC463);
  -webkit-background-clip:text;background-clip:text}
.mx-band span.dot{-webkit-text-stroke:0;color:#E4571C;padding:0 .1em}
@keyframes mxBand{to{transform:translateX(-50%)}}

/* --- tarjetas con inclinación 3D: sin la demora del revelado --- */
.mx .rv.in.mx-tilt,.mx .mx-tilt{transition:transform .5s cubic-bezier(.16,.84,.44,1);transition-delay:0s;transform-style:preserve-3d}

/* --- barra fija en celular --- */
.mbar{display:none}
@media(max-width:1080px){
  .mbar{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:145;padding:10px;border-radius:18px;
    background:rgba(11,11,12,.88);backdrop-filter:blur(14px);border:1px solid rgba(244,237,226,.12);
    box-shadow:0 18px 40px -16px #000;transform:translateY(140%);transition:transform .5s cubic-bezier(.16,.84,.44,1)}
  .mbar.on{transform:none}
  .mbar .btn{flex:1;padding:12px 10px;font-size:14px;min-height:48px;white-space:nowrap}
  .mbar .mbar-wa{flex:none;width:48px;height:48px;border-radius:14px;background:#1F9D55;display:grid;place-items:center}
  .mbar .mbar-wa svg{width:24px;height:24px;fill:#fff}
  .wa{display:none!important}
}

/* --- la línea de cada antetítulo se dibuja al aparecer --- */
.mx .rv .kicker::before{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,.84,.44,1) .2s}
.mx .rv.in .kicker::before{transform:none}

/* --- brillo que sigue al mouse (lo agrega motion.js solo con mouse) --- */
.mx-spot-host{position:relative;isolation:isolate}
/* z-index -1 dentro del contexto aislado: queda sobre el fondo de la tarjeta y debajo del texto */
.mx-spot{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(240,144,43,.16),transparent 65%)}
.mx-spot-host:hover>.mx-spot{opacity:1}

/* --- fotos de tarjetas: acercamiento suave al pasar el mouse --- */
@media(hover:hover){
  .mx .card:hover .card-img.mx-clip.mx-in,.mx .caso-img.mx-clip.mx-in:hover{transform:scale(1.045);transition:transform .9s cubic-bezier(.16,.84,.44,1)}
}

/* --- selector entre las dos páginas (Concesiones | Restaurantes) --- */
.sitio-switch{display:inline-flex;flex:none;margin-left:16px;padding:3px;border-radius:100px;border:1px solid rgba(244,237,226,.18);
  background:rgba(11,11,12,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sitio-switch a{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:8px 13px;
  border-radius:100px;color:#B4ACA3;white-space:nowrap;transition:color .25s,background .25s}
.sitio-switch a:hover{color:#fff;background:rgba(244,237,226,.08)}
.sitio-switch a[aria-current="page"]{background:#F4EDE2;color:#0B0B0C}
@media(max-width:1180px) and (min-width:1081px){.sitio-switch a{padding:8px 10px;letter-spacing:.04em}}
/* concesiones tiene más links: en pantallas medianas el logo queda sin el nombre al lado */
@media(min-width:1081px){.nav-in:has(.nav-cta){gap:16px}.nav-in:has(.nav-cta) nav.links{gap:17px}}
@media(max-width:1300px) and (min-width:1081px){.nav-in:has(.nav-cta) .logo b{display:none}}
@media(max-width:560px){.nav-in{gap:10px!important}header .logo,header .logo img{flex:none}header .logo b{display:none}header .logo img{height:46px!important;width:auto!important}
  .sitio-switch{margin-left:0}.sitio-switch a{font-size:10px;padding:8px 9px;letter-spacing:.04em}}
@media(max-width:350px){.nav-in{padding-left:14px!important;padding-right:14px!important}.burger{padding:4px!important}
  .sitio-switch a{font-size:9.5px;padding:8px 7px}}

/* --- menú: marca la sección en la que estás --- */
.mx nav.links a.activo{color:#fff}
.mx nav.links a.activo::after{width:100%}

/* --- menú de celular a pantalla completa, con los links en cascada --- */
@media(max-width:1080px){
  .mx nav.links{inset:0;width:100%;border-left:0;align-items:flex-start;justify-content:center;gap:4px;padding:90px 30px 40px;
    background:radial-gradient(90% 60% at 100% 100%,rgba(228,87,28,.28),transparent 60%),radial-gradient(70% 50% at 0% 0%,rgba(123,17,19,.45),transparent 60%),#0B0B0C}
  .mx nav.links a{font-family:var(--f-serif);font-weight:900;font-size:clamp(30px,8vw,44px);line-height:1.15;padding:8px 0;
    opacity:0;transform:translateY(24px);transition:opacity .5s,transform .6s cubic-bezier(.16,.84,.44,1),color .25s}
  .mx nav.links a::after{display:none}
  .mx nav.links.open a{opacity:1;transform:none}
  .mx nav.links.open a:nth-child(1){transition-delay:.12s}.mx nav.links.open a:nth-child(2){transition-delay:.18s}
  .mx nav.links.open a:nth-child(3){transition-delay:.24s}.mx nav.links.open a:nth-child(4){transition-delay:.30s}
  .mx nav.links.open a:nth-child(5){transition-delay:.36s}.mx nav.links.open a:nth-child(6){transition-delay:.42s}
  .mx nav.links.open a:nth-child(7){transition-delay:.48s}
  .mx nav.links a.btn{font-family:var(--f-sans);font-weight:600;font-size:16px;margin-top:22px;padding:15px 28px;line-height:1}
  .mx .burger[aria-expanded="true"] svg{transform:rotate(90deg);opacity:0}
  .mx .burger svg{transition:transform .35s,opacity .25s}
  .mx .burger::before{content:"";position:absolute;inset:0;margin:auto;width:24px;height:24px;opacity:0;transition:opacity .25s .1s;
    background:linear-gradient(45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%),linear-gradient(-45deg,transparent 46%,currentColor 46%,currentColor 54%,transparent 54%)}
  .mx .burger[aria-expanded="true"]::before{opacity:1}
  .mx-menu-abierto,.mx-menu-abierto body{overflow:hidden}
  /* el blur del encabezado convierte al menú fijo en hijo del encabezado: se apaga mientras está abierto */
  .mx-menu-abierto header.nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .mx-menu-abierto .mbar{transform:translateY(140%)!important}
}

/* --- transición suave entre las dos páginas (Chrome/Edge; el resto navega normal) --- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mxSale .35s ease both}
::view-transition-new(root){animation:mxEntra .5s cubic-bezier(.16,.84,.44,1) both}
@keyframes mxSale{to{opacity:0}}
@keyframes mxEntra{from{opacity:0;transform:translateY(12px)}}

/* --- portadas: el título se lee aunque el fondo sea claro --- */
.hero h1{filter:drop-shadow(0 2px 16px rgba(0,0,0,.55))}

/* --- foco visible para teclado --- */
.mx a:focus-visible,.mx button:focus-visible,.mx summary:focus-visible{outline:2px solid #F0902B;outline-offset:3px;border-radius:6px}

@media(prefers-reduced-motion:reduce){
  .mx-w>span,.mx .mx-clip.mx-clip{transform:none!important;clip-path:none!important;transition:none!important}
  .mx-kb,.mx-band-tr{animation:none!important}
  html{scroll-behavior:auto!important}
}