/* =========================================================
   INICIO (INDEX) — Solo afecta a .page-inicio
   ========================================================= */

/* Tipografía y helpers del index */
.page-inicio h1{font-size:48px;line-height:1.1;margin:0 0 12px}
.page-inicio h2{font-size:32px;margin:0 0 10px}
.page-inicio h3{font-size:20px;margin:0 0 6px}
.page-inicio p{font-size:16px;line-height:1.75;margin:0 0 12px}
.page-inicio .wrap{max-width:1180px;margin:0 auto;padding:0 18px}
.page-inicio .text-brand{color:var(--brand)}
.page-inicio .btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:800;cursor:pointer;transition:filter .2s}
.page-inicio .btn-primary{background:var(--brand);color:#111}
.page-inicio .btn-primary:hover{filter:brightness(1.08)}
.page-inicio .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}

/* HERO oscuro (desktop) */
.page-inicio{ --nav-band: 1.7vh; }
.page-inicio .hero-dark{ position:relative; min-height: calc(88vh - var(--nav-band)); display:flex; align-items:center; overflow:hidden; }
.page-inicio .hero-dark::before{ content:"";position:absolute;inset:0; background:var(--bg) center/cover no-repeat; will-change:transform; }
.page-inicio .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.35))}
.page-inicio .hero-dark-grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; z-index:60;}
@media (max-width:980px){.page-inicio .hero-dark-grid{grid-template-columns:1fr}}
.page-inicio .grad{background:linear-gradient(90deg,#fff,var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-inicio .hero-copy p{color:var(--text-dim);max-width:560px}
.page-inicio .hero-actions{display:flex;gap:10px;margin-top:12px}

/* Panel glass del hero */
.page-inicio .hero-card{
  position:relative; padding:22px 22px 18px; border-radius:18px;
  background:radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.12), rgba(255,255,255,.08)), rgba(15,15,16,.55);
  backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.page-inicio .hero-card::before{
  content:""; position:absolute; inset:-14px -18px -18px -18px;
  background: radial-gradient(60% 60% at 12% 18%, var(--glow), transparent 60%);
  filter: blur(18px); z-index:-1; border-radius:24px;
}
.page-inicio .hero-title{ margin:0 0 8px; }
.page-inicio .nowrap{ white-space:nowrap; }
.page-inicio .hero-sub{ color:#d8d8d8; max-width:620px; }

/* Badges + íconos compactos */
.page-inicio .i{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; vertical-align:-2px; margin-right:8px }
.page-inicio .i path{ vector-effect:non-scaling-stroke }
/* Badges + íconos compactos */
.page-inicio .i-img{
  width:18px; height:18px; flex:0 0 18px;
  display:inline-block; object-fit:contain;
  vertical-align:-2px; margin-right:8px;
  filter: invert(1) brightness(2); /* negros → blancos */
}
.page-inicio .i-img--lg{ width:20px; height:20px; flex:0 0 20px; margin-right:-3px; }

/* mismo elemento, no descendiente */
.btn-hero--primary.img_black .i-img{
  filter: none !important;         /* o filter: invert(0) brightness(1) */
  -webkit-filter: none !important;
}

.page-inicio .hero-badges{ display:flex; gap:8px; list-style:none; margin:14px 0 10px; padding:0; flex-wrap:wrap; }
.page-inicio .hero-badges li{
  display:flex; align-items:center; gap:6px; font-size:13px; color:#f3f3f3;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); padding:6px 10px; border-radius:999px;
}

/* Horario */
.page-inicio .hero-hours-pill{
  display:flex; align-items:center; gap:8px; margin-top:12px; padding:8px 12px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#e9e9e9;
}
.page-inicio .hero-hours-pill .i{ width:18px; height:18px; }

/* Pizza en HERO (desktop) */
.page-inicio .hero-visual{ position:absolute; top:50%; right:calc(-45vh); height:85vh; transform:translateY(-50%); pointer-events:none; z-index:40; }
@media (max-width:980px){ .page-inicio .hero-visual{ right:calc(-50vh); height:100vh; } }
.page-inicio .hero-visual img{ height:100%; width:auto; max-width:none; filter:drop-shadow(0 28px 70px rgba(0,0,0,.35)); transform-origin:center center; }

/* Efecto vórtice */
@keyframes vortexOut{0%{opacity:1;transform:rotate(0) scale(1);filter:blur(0)}100%{opacity:0;transform:rotate(540deg) scale(.65);filter:blur(2px)}}
@keyframes vortexIn {0%{opacity:0;transform:rotate(-180deg) scale(.8);filter:blur(2px)}100%{opacity:1;transform:rotate(0) scale(1);filter:blur(0)}}
.page-inicio .pizza-vortex-out{animation:vortexOut 600ms ease forwards}
.page-inicio .pizza-vortex-in{animation:vortexIn 600ms ease forwards}

/* Secciones */
.page-inicio .section-dark{ background:var(--page-bg-2); padding:72px 0; border-top:1px solid var(--border); position:relative; }
.page-inicio .section-dark-soft{ background:var(--page-bg-muted); padding:72px 0; border-top:1px solid var(--border); position:relative; }
.page-inicio .section-full{ min-height:100vh; display:flex; align-items:center }

/* Promociones — solo imágenes */
.page-inicio .promos-wrap{position:relative;width:100%; z-index:60;}
.page-inicio .promos-grid{ display:grid; gap:16px; margin-top:12px; width:100%; grid-template-columns:repeat(2,1fr); }
@media (max-width:700px){ .page-inicio .promos-grid{ grid-template-columns:1fr; } }

.page-inicio .promo-tile{
  position:relative; display:block; overflow:hidden; border-radius:18px; background:#0f0f10;
  border:1px solid rgba(255,255,255,.08); transform:translateZ(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s, filter .45s;
}
.page-inicio .promo-tile::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px;
  background: conic-gradient(from 210deg, rgba(212,175,55,.55), rgba(212,175,55,.30), rgba(212,175,55,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.65; pointer-events:none; transition:opacity .3s;
}
.page-inicio .promo-tile--wide{ aspect-ratio:16/7; }
.page-inicio .promo-tile img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease }
.page-inicio .promo-tile:hover,
.page-inicio .promo-tile:focus-visible{
  transform:perspective(900px) rotateX(1.2deg) rotateY(-1.6deg) translateY(-2px);
  border-color:rgba(212,175,55,.35);
  box-shadow:0 18px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(212,175,55,.18) inset, 0 0 24px var(--glow);
}
.page-inicio .promo-tile:hover::before,.page-inicio .promo-tile:focus-visible::before{opacity:.9}
.page-inicio .promo-tile:hover img,.page-inicio .promo-tile:focus-visible img{transform:scale(1.08); filter:saturate(1.06) contrast(1.05)}

/* “Lo que la pizzería tiene para ti” */
.page-inicio .offers-grid{ display:grid; gap:24px; align-items:center; grid-template-columns:1.05fr .95fr; }
@media (max-width:980px){ .page-inicio .offers-grid{ grid-template-columns:1fr; } }
.page-inicio .offers-copy p{ color:#d9d9d9; max-width:620px; }
.page-inicio .offers-points{ list-style:none; padding:0; margin:10px 0 16px; display:grid; gap:8px; }
.page-inicio .offers-points li{ display:flex; align-items:center; gap:10px; color:#ececec; }
.page-inicio .offers-points .dot{ width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--brand2), var(--brand)); box-shadow:0 0 8px var(--glow) }
.page-inicio .offers-cta{ margin-top:6px }

/* =========================================================
   CARRUSEL "OFRECE" — centrado y sin desbordes
   ========================================================= */

.page-inicio .offers-carousel{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:12px;
  box-shadow:0 16px 50px rgba(0,0,0,.35);
  overflow:hidden;                      /* nada se sale */
}
.page-inicio .offers-carousel::before{
  content:""; position:absolute; inset:0; border-radius:18px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(212,175,55,.55), rgba(212,175,55,.28), rgba(212,175,55,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.65;
}

/* Viewport + track */
.page-inicio .oc-viewport{
  position:relative; width:100%; height:auto; aspect-ratio:16/9;
  overflow:hidden; border-radius:14px;
}
.page-inicio .oc-track{
  display:flex; height:100%; gap:0;
  will-change:transform; transition:transform .6s cubic-bezier(.2,.8,.2,1);
}

/* Slides */
.page-inicio .oc-slide{
  flex:0 0 100%; min-width:100%; height:100%;
  margin:0; padding:0; border:0; position:relative; overflow:hidden; border-radius:12px;
  background:#0f0f10;
  display:grid; place-items:center;              /* centra el contenido */
}
.page-inicio .oc-slide img{
  width:100%; height:100%; object-fit:cover; object-position:center !important;
  display:block; transform:none !important;      /* sin zoom que rompa bordes */
}

/* Flechas y dots */
.page-inicio .oc-arrow{
  position:absolute; left:auto; right:auto;
  top:calc(50% - 18px);                          /* centradas verticalmente */
  transform:translateY(-50%);
  width:38px; height:38px; border-radius:999px;
  background:rgba(17,17,17,.72); color:#eee;
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.page-inicio .oc-prev{ left:8px; }
.page-inicio .oc-next{ right:8px; }
.page-inicio .oc-arrow:hover{ filter:brightness(1.06) }

.page-inicio .oc-dots{
  display:flex; gap:8px; justify-content:center; margin-top:12px;
}
.page-inicio .oc-dot{
  width:8px; height:8px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.25);
  transition:transform .25s, background .25s
}
.page-inicio .oc-dot.is-active{
  background:radial-gradient(circle at 30% 30%, var(--brand2), var(--brand));
  transform:scale(1.25); box-shadow:0 0 10px var(--glow)
}

/* Reveal */
.page-inicio .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.page-inicio .reveal.show{opacity:1;transform:none}

/* Responsive utilidades */
@media (max-width:980px){ .page-inicio .hero-card{padding:18px} .page-inicio .hero-sub{max-width:100%} }
@media (prefers-reduced-motion:reduce){ .page-inicio *{animation:none!important; transition:none!important} }

/* =========================================================
   BOTONES DEL HERO (solo en la sección inicio)
   ========================================================= */
.hero-actions a,
.offers-cta { text-decoration: none !important; }
.hero-actions .btn-hero{
  --gold: var(--brand, #D4AF37);
  --gold2: var(--brand2, #B9931A);
  --ink:#f6f6f6; --ink-d:#111;

  position: relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:.78rem 1.15rem;
  border-radius:9999px; font-weight:800; font-size:15px; line-height:1;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 2px solid rgba(212,175,55,.70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 20px rgba(0,0,0,.20), inset 1px -1px 0 rgba(255,255,255,.06);
  cursor:pointer; user-select:none; overflow:hidden;
  transition: transform .22s, border-color .22s, background .22s, box-shadow .22s, color .22s;
}
.hero-actions .btn-hero .i{ width:20px; height:20px; }
.hero-actions .btn-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  width:110px; left:-140px; opacity:.55; transform:skewX(-12deg);
  border-radius:inherit;
}
.hero-actions .btn-hero:hover{
  transform: translateY(-1px);
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.95);
  box-shadow: 0 16px 30px rgba(0,0,0,.30), 0 0 0 1px rgba(212,175,55,.18) inset;
  color:#fff;
}
@keyframes heroBtnShine{ 0%{left:-140px;} 60%,100%{left:110%;} }
.hero-actions .btn-hero:hover::before{ animation: heroBtnShine 1.4s ease-out 1; }
.hero-actions .btn-hero.is-active,
.hero-actions .btn-hero:active{
  color: var(--ink-d);
  border-color: rgba(0,0,0,.3);
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  box-shadow: 0 16px 32px rgba(212,175,55,.35), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.55);
}
.offers-cta.btn-hero{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:9999px; border:2px solid rgba(212,175,55,.70);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:.72rem 1.1rem; font-weight:800;
}
.offers-cta.btn-hero:hover{
  background: rgba(212,175,55,.18);
  border-color: rgba(212,175,55,.95);
}

/* =========================================================
   MÓVIL — pizza centrada, más abajo y detrás de #promos
   ========================================================= */
@media (max-width: 700px){

  .page-inicio{
    --vh-safe: 86vh;
    --hero-h-mob: var(--vh-safe);
    --pizza-mob-h: 45vh;
    --pizza-overlap: 5vh;
    --pizza-drop: 43vh;              /* controla qué tan abajo va */
  }

  .page-inicio .hero-dark{
    min-height: var(--hero-h-mob);
    padding: 4px 0 36px;
    overflow: visible;               /* deja asomar la pizza por abajo */
  }

  .page-inicio .hero-dark-grid{
    display:flex; flex-direction:column; gap:12px; align-items:stretch;
    top:-10vh;
  }
  .page-inicio .hero-copy{ transform: translateY(-78px); }

  .hero-actions{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    justify-items:stretch; align-items:stretch;
  }
  .hero-actions .btn-hero{ width:100%; justify-content:center; padding:.7rem 1rem; font-size:14px; }

  /* Pizza centrada y abajo */
  .page-inicio .hero-visual{
    position:absolute;
    left:50%; right:auto !important; top:auto;
    transform: translateX(-50%);
    height: var(--pizza-mob-h);
    width: min(100dvw, 100vw); max-width:100%;
    bottom: calc(-1 * var(--pizza-overlap) - var(--pizza-drop));
    z-index:0 !important; pointer-events:none;
    display:flex; justify-content:center; align-items:flex-end;
  }
  .page-inicio .hero-visual img{ display:block; height:100%; width:auto; max-width:100%; }

  #promos{
    position:relative; z-index:100 !important;
    margin-top: calc(-1 * var(--pizza-overlap));
    padding-top: calc(var(--pizza-overlap) + 22px);
    overflow-x:hidden;
  }

  /* Carrusel: layout móvil */
  .page-inicio .offers-carousel{ padding:10px; }
  .page-inicio .oc-viewport{ aspect-ratio:16/10; }
  .page-inicio .oc-slide{ border-radius:12px; }
  .page-inicio .oc-arrow{
    width:34px; height:34px; top:calc(50% - 17px); /* centradas */
    border:1px solid rgba(255,255,255,.16);
    background:rgba(17,17,17,.68);
  }
}

/* Anti-scroll lateral (cinturón y tirantes) */
html, body { overflow-x:hidden; }
.page-inicio { position:relative; overflow-x:clip; }
.page-inicio, .page-inicio * , .page-inicio *::before, .page-inicio *::after{ box-sizing:border-box; }
.page-inicio img, .page-inicio video, .page-inicio svg{ max-width:100%; }

/* Ajustes de hero en móvil */
@media (max-width: 700px){
  .page-inicio .hero-title {
    font-size: clamp(34px, 6vw, 48px);
    line-height: 1.2;
  }

  .page-inicio .hero-sub {
    font-size: clamp(16px, 4vw, 16px);
    line-height: 1.6;
  }

  .page-inicio .eslogan {
    font-size: clamp(29px, 4vw, 16px);
    line-height: 1.6;
  }

  .page-inicio .hero-hours-pill span {
    font-size: clamp(12px, 3.2vw, 15px);
    line-height: 1.4;
  }

}