/* ==========================================================================
   Viva Chapata — FOTOGRAFÍA
   Las fotos del local entran en marcos de la marca: arco, panorámica, inserto,
   polaroid, puerta y a sangre. En movimiento, solo transform y opacity: nada
   de filter, blend ni máscaras (ver «Rendimiento del scroll» en el README).
   ========================================================================== */

.foto{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--menta)}
.foto img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}

.marco{position:relative;margin:0}
.marco-in{position:relative;overflow:hidden;isolation:isolate;background:var(--menta)}
.marco-in > .foto{position:absolute;inset:0}
.marco figcaption{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-60);margin-top:.8rem;max-width:46ch;line-height:1.5}
.band--ink .marco figcaption{color:var(--menta)}

.marco--arco .marco-in{aspect-ratio:4/5;border-radius:999px 999px 22px 22px}
.marco--pano .marco-in{aspect-ratio:21/9;border-radius:24px}
.marco--inset .marco-in{aspect-ratio:4/3;border-radius:20px}
.marco--cuadro .marco-in{aspect-ratio:1;border-radius:20px}
.marco--alto .marco-in{aspect-ratio:4/5;border-radius:22px}
.marco--grande .marco-in{aspect-ratio:3/2;border-radius:26px}

/* sello de precio sobre la foto */
.chip-foto{
  position:absolute;z-index:3;display:inline-flex;align-items:baseline;gap:.55rem;
  padding:.55rem 1rem .6rem;background:var(--coral-ui);color:#fff;border-radius:999px;
  font-family:var(--f-mono);font-size:.76rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 12px 26px rgba(58,36,79,.28);
}
.chip-foto b{font-family:var(--f-display);font-size:1.3rem;font-weight:400;letter-spacing:0;line-height:1}

/* hojas que invaden el marco: la foto queda «dentro» de la selva */
.hoja-borde{position:absolute;z-index:4;pointer-events:none;height:auto}

/* ---------- home: hero con foto en arco ---------- */
.hero--foto .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.hero--foto .d1{font-size:clamp(2.6rem,5.1vw,5rem)}
.hero--foto h1 .l{white-space:normal}
.hero-texto .lede{max-width:40ch;margin:clamp(1.2rem,2.4vw,1.8rem) 0 1.6rem}
.hero-texto .hero-acciones{margin-top:0}
.hero-texto .micro{margin-top:1rem}
.hero-foto{justify-self:end;width:min(100%,520px)}
.hero-foto .chip-foto{left:-8%;bottom:16%}
.hero-foto .hoja-borde--a{width:44%;left:-26%;top:30%;rotate:-18deg}
.hero-foto .hoja-borde--b{width:40%;right:-16%;bottom:-12%;rotate:160deg}

/* ---------- home: la carta con su panel de fotos ---------- */
.carta-dos{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cat-panel{position:sticky;top:calc(var(--top-h) + 1.6rem)}
.cat-panel .marco-in{aspect-ratio:4/5;border-radius:26px}
.cat-panel .foto{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.cat-panel .foto.on{opacity:1}
.cat-panel .foto img{transform:scale(1.07);transition:transform 1.6s var(--ease)}
.cat-panel .foto.on img{transform:scale(1)}
.cat-panel .chip-foto{left:1.2rem;bottom:1.2rem}
.cat.activa .cat-t{color:var(--coral-ui);transform:translateX(14px)}
.cat-thumb{display:none}
.cat-thumb--hoja img{object-fit:contain !important;padding:10px}

/* ---------- home: dentro de la taberna ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,.62fr);gap:clamp(1.2rem,3vw,2.6rem);align-items:end}
.duo .marco--alto{margin-bottom:clamp(3rem,10vw,9rem)}
.duo .hoja-borde{width:clamp(150px,17vw,240px);right:-14%;top:-18%;rotate:24deg}

/* ---------- cierre a sangre ---------- */
.cierre-foto{position:relative;overflow:clip;background:var(--ink);color:var(--papel);
  min-height:min(92svh,840px);display:grid;place-items:center;padding-block:var(--seccion)}
.fondo-foto{position:absolute;inset:0;z-index:0}
.fondo-foto .foto{position:absolute;inset:0;background:var(--ink)}
.cierre-foto::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(58,36,79,.5) 0%,rgba(58,36,79,.74) 52%,rgba(38,22,54,.94) 100%)}
.cierre-foto .wrap{position:relative;z-index:2}
.cierre-foto h2{color:var(--papel)}
.cierre-foto .txt{color:color-mix(in srgb,var(--papel) 90%,transparent)}
.cierre-foto .micro{color:var(--menta)}
.cierre-foto .btn-linea{color:var(--papel)}
.cierre-foto .btn-linea:hover{background:var(--papel);color:var(--ink);border-color:var(--papel)}

/* ---------- carta ---------- */
.hero-pano{margin-top:clamp(2rem,4vw,3.2rem)}
.hero-pano .chip-foto{left:43%;top:9%}
.hero-pano .hoja-borde{width:clamp(150px,17vw,250px);right:-4%;bottom:-20%;rotate:150deg}
.grupo-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,26vw,340px);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.grupo-foto{position:sticky;top:calc(var(--top-h) + 74px)}
.grupo-foto .chip-foto{left:1rem;bottom:1rem}
.bebidas-foto{margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.dish-foto-tag{display:inline-block;margin-left:.5rem;padding:.1rem .45rem;border-radius:999px;
  background:var(--menta);color:var(--ink);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;vertical-align:middle}
.detalle-foto{margin:0 0 .3rem;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--menta)}
.detalle-foto img{width:100%;height:100%;object-fit:cover;display:block}
.detalle-foto[hidden]{display:none}

/* ---------- brunch: polaroid ---------- */
.hero--polaroid .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.polaroid{background:var(--papel);padding:14px 14px 60px;rotate:-3deg;justify-self:center;width:min(100%,440px);
  box-shadow:0 30px 60px rgba(58,36,79,.22),0 6px 14px rgba(58,36,79,.12)}
.polaroid .marco-in{aspect-ratio:4/5;border-radius:3px}
.polaroid figcaption{position:absolute;left:14px;right:14px;bottom:14px;margin:0;max-width:none;
  font-family:var(--f-display);font-size:1.4rem;letter-spacing:0;color:var(--ink);text-align:center}
.polaroid .precio-sello{position:absolute;right:-44px;top:-40px;width:152px;z-index:3}
.polaroid .precio-sello b{font-size:2.05rem;white-space:nowrap}

/* ---------- nosotros: hero a sangre + hitos con foto ---------- */
.hero--sangre{min-height:min(88svh,780px);display:flex;align-items:flex-end;background:var(--ink);
  padding-block:clamp(7rem,14vw,11rem) clamp(3rem,6vw,5rem)}
.hero--sangre::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(226,239,218,.97) 0%,rgba(226,239,218,.9) 33%,rgba(226,239,218,.3) 60%,rgba(226,239,218,0) 78%)}
.hero--sangre > .wrap{position:relative;z-index:2}
.hero--sangre .hero-grid{max-width:640px}
.hitos-dos{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.hitos-foto{position:sticky;top:calc(var(--top-h) + 2rem)}

/* ---------- contacto: la puerta ---------- */
.hero--puerta .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.puerta-foto{justify-self:end;width:min(100%,450px)}
.puerta-foto .marco-in{aspect-ratio:4/5;border-radius:26px}
.sello-dir{position:absolute;left:-48px;bottom:40px;z-index:3;width:152px;aspect-ratio:1;border-radius:50%;
  background:var(--ink);color:var(--papel);display:grid;place-content:center;text-align:center;rotate:-8deg;padding:1rem;
  font-family:var(--f-display);font-size:1.45rem;line-height:.95;box-shadow:0 16px 30px rgba(58,36,79,.3)}
.sello-dir small{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.45rem;color:var(--menta)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero--foto .hero-grid,.hero--polaroid .hero-grid,.hero--puerta .hero-grid{grid-template-columns:1fr}
  .hero-foto,.puerta-foto{justify-self:stretch;width:100%}
  .hero-foto .marco-in{aspect-ratio:5/4;border-radius:220px 220px 20px 20px}
  .hero-foto .chip-foto{left:1rem;bottom:1rem}
  .hero-foto .hoja-borde--a{width:30%;left:-8%;top:-10%}
  .hero-foto .hoja-borde--b{width:28%;right:-6%;bottom:-10%}
  .carta-dos{grid-template-columns:1fr}
  .cat-panel{display:none}
  .cat{grid-template-columns:72px minmax(0,1fr) !important;align-items:center;column-gap:1rem}
  .cat-thumb{display:block;width:72px;height:72px;border-radius:16px;overflow:hidden;grid-row:1/3;background:var(--menta)}
  .cat-thumb .foto,.cat-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .cat-p{grid-column:2}
  .cat.activa .cat-t{transform:none}
  .duo{grid-template-columns:1fr}
  .duo .marco--alto{margin:0}
  .duo .hoja-borde{right:-4%;width:120px}
  .grupo-cuerpo{grid-template-columns:1fr}
  .grupo-foto{position:relative;top:0;order:-1;margin-bottom:.4rem}
  .polaroid{width:min(84%,370px);margin-top:1.4rem}
  .polaroid .precio-sello{right:-18px;top:-26px;width:104px}
  .hitos-dos{grid-template-columns:1fr}
  .hitos-foto{position:relative;top:0}
  .sello-dir{left:.8rem;bottom:.8rem;width:118px;font-size:1.15rem}
  .marco--pano .marco-in{aspect-ratio:4/3}
  .hero-pano .chip-foto{left:1rem;top:1rem}
}
@media (max-width:760px){
  .hero--sangre{min-height:0;padding-top:clamp(16rem,70vw,22rem)}
  .hero--sangre::after{background:linear-gradient(0deg,rgba(226,239,218,.98) 0%,rgba(226,239,218,.92) 46%,rgba(226,239,218,.15) 82%,rgba(226,239,218,0) 100%)}
}
@media print{.marco,.fondo-foto,.cat-panel,.cat-thumb,.detalle-foto,.dish-foto-tag{display:none !important}}

/* ---------- hero rotativo: el arco va cambiando de plato ---------- */
.hero-rota .foto{position:absolute;inset:0;opacity:0}
.hero-rota .foto.on{opacity:1}
.hero-foto .chip-foto .chip-n,.hero-foto .chip-foto .chip-p{display:inline-block}
.rota-puntos{position:absolute;z-index:3;right:1.3rem;bottom:1.3rem;display:flex;gap:6px;align-items:center}
/* el punto activo se estira con transform, no con width: nada de layout en la animación */
.rota-puntos i{display:block;position:relative;width:24px;height:8px}
.rota-puntos i::before{content:'';position:absolute;left:0;top:0;width:8px;height:8px;border-radius:999px;
  background:rgba(246,249,241,.6);box-shadow:0 1px 4px rgba(0,0,0,.25);transform-origin:0 50%;
  transition:transform .5s var(--ease),background-color .3s}
.rota-puntos i.on::before{transform:scaleX(3);background:var(--papel)}
@media (max-width:900px){.rota-puntos{right:1rem;bottom:1rem}}