/* Cendra Smash Burgers · estilo.css
   Receta: recursos/referencias/street-energia/impossible-foods (DESIGN.md + scrapeo 2026-09-21), paleta variada hacia "brasa".
   Una familia (Archivo variable) en tres anchos: condensada 62 % (display, nav, botones), normal 100 % (cuerpo), expandida 125 % (wordmark).
   Plano: sin sombras ni degradados. Píldoras 19 px, tarjetas 12 px, caja de pestañas 38 px. */

:root {
  --cendra: #160A0D;      /* lienzo (Velvet Wine → ceniza) */
  --brasa: #3A0F1A;       /* superficie (Burgundy Stage) */
  --ascua: #F03A1E;       /* acción y display (Impossible Red → ascua) */
  --rosa: #FFC9B8;        /* texto secundario, píldoras inactivas (Blush) */
  --negro: #000000;
  --blanco: #FFFFFF;
  --f: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio-pildora: 19px; --radio-tarjeta: 12px; --radio-caja: 38px;
  --ancho: 1280px; --gutter: 16px;
  --e-1: 8px; --e-2: 16px; --e-3: 24px; --e-4: 40px; --e-5: 64px; --e-6: 100px; --e-7: 148px;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cendra); color: var(--blanco); font-family: var(--f); font-size: 1.0625rem; line-height: 1.45; font-stretch: 100%; overflow-x: clip; }
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.salto { position: absolute; left: -9999px; top: 8px; background: var(--ascua); color: var(--blanco); padding: .5rem 1rem; border-radius: var(--radio-pildora); z-index: 200; }
.salto:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.contenedor { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.contenedor--estrecho { max-width: 52rem; }
.centrado { text-align: center; }
.seccion { padding-block: var(--e-5); }
@media (min-width: 900px) { .seccion { padding-block: var(--e-6); } }
.secundario { color: var(--rosa); }

/* ---- tipografía ---- */
.display { font-stretch: 62%; font-weight: 800; text-transform: uppercase; line-height: .8; letter-spacing: .02em; color: var(--ascua); }
.display--lg { font-size: clamp(4.5rem, 14vw, 10rem); }
.display--md { font-size: clamp(2.75rem, 7vw, 4.5rem); }
.eyebrow { font-stretch: 62%; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--ascua); margin-bottom: var(--e-2); }
.eyebrow--rosa { color: var(--rosa); }
.eyebrow--flechas::before { content: "◂ "; } .eyebrow--flechas::after { content: " ▸"; }
h3 { font-stretch: 62%; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: .95; }
.lead, .pagcab__intro { font-size: 1.125rem; color: var(--rosa); }

/* ---- botones y píldoras ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: .55rem 1.1rem .5rem; border-radius: var(--radio-pildora); font-stretch: 62%; font-weight: 800; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn--ascua { background: var(--ascua); color: var(--blanco); }
.btn--ascua:hover { background: var(--blanco); color: var(--ascua); }
.btn--blanco { background: var(--blanco); color: var(--cendra); }
.btn--blanco:hover { background: var(--ascua); color: var(--blanco); }
.btn--ghost { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.btn--ghost:hover { background: var(--blanco); color: var(--cendra); }
.btn--estatico { cursor: default; }
.btn--peq { min-height: 2.25rem; font-size: .95rem; padding: .35rem .85rem .3rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--e-3); }
.acciones--peq { justify-content: flex-start; margin-top: var(--e-2); }

/* ---- cabecera píldora ---- */
.cab { position: sticky; top: 0; z-index: 100; padding: 12px var(--gutter) 0; }
.cab__pildora { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); max-width: var(--ancho); margin-inline: auto; background: var(--ascua); color: var(--blanco); border-radius: var(--radio-pildora); padding: .55rem .9rem .55rem 1.1rem; min-height: 3.25rem; }
.cab__logo { font-stretch: 125%; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.25rem; text-decoration: none; }
.cab__nav { display: none; }
.cab__nav ul { display: flex; gap: 1.6rem; }
.cab__nav a { font-stretch: 62%; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.05rem; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.cab__nav a:hover, .cab__nav a[aria-current="page"] { border-bottom-color: var(--blanco); }
.cab__acc { display: none; align-items: center; gap: .8rem; }
.cab__acc .btn { min-height: 2.4rem; font-size: 1rem; padding: .35rem .9rem .3rem; }
.cab__idioma { display: inline-flex; gap: .15rem; background: var(--brasa); border-radius: var(--radio-pildora); padding: .2rem; }
.cab__idioma a { font-stretch: 62%; font-weight: 700; font-size: .9rem; text-decoration: none; padding: .25rem .55rem; border-radius: 15px; color: var(--rosa); }
.cab__idioma a[aria-current] { background: var(--blanco); color: var(--cendra); }
.cab__idioma a:hover { color: var(--blanco); }
.cab__idioma a[aria-current]:hover { color: var(--cendra); }
.cab__burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; padding: .5rem; }
.cab__burger span { display: block; height: 2px; background: var(--blanco); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.cab__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cab__movil { max-width: var(--ancho); margin: 8px auto 0; background: var(--brasa); border-radius: var(--radio-caja); padding: var(--e-3); }
.cab__movil ul { display: grid; gap: .4rem; margin-bottom: var(--e-3); }
.cab__movil ul a { display: block; font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 1.6rem; text-decoration: none; padding: .35rem 0; border-bottom: 1px solid rgba(255,201,184,.25); }
.cab__movil .btn { width: 100%; }
.cab__idioma--movil { margin-top: var(--e-2); }
.an-header.compacto { padding-top: 6px; background: transparent; }
.an-header.compacto .cab__pildora { min-height: 2.9rem; padding-block: .4rem; }
@media (min-width: 1100px) { .cab__nav, .cab__acc { display: flex; } .cab__burger, .cab__movil { display: none !important; } }

/* ---- hero ---- */
.hero { position: relative; padding: var(--e-6) var(--gutter) var(--e-5); overflow: clip; }
.hero__int { position: relative; max-width: var(--ancho); margin-inline: auto; text-align: center; min-height: 68vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero__eyebrow { color: var(--rosa); font-stretch: 100%; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 1.05rem; }
.hero__titulo { font-size: clamp(5.5rem, 17vw, 14rem); line-height: .78; letter-spacing: .04em; margin: 0; }
.hero__titulo span { display: block; }
.hero__l2 { font-size: .62em; letter-spacing: .01em; }
.hero__plato { width: clamp(90px, 12vw, 160px); margin: -1.2em auto 0; position: relative; z-index: 2; }
.hero__plato img { border-radius: 50%; }
.hero__sub { margin-top: var(--e-3); font-size: 1.25rem; color: var(--rosa); }
.hero__foto { position: absolute; width: clamp(110px, 16vw, 230px); aspect-ratio: 1; z-index: 1; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto--h1 { top: 4%; left: 6%; clip-path: polygon(8% 12%, 55% 0, 100% 10%, 92% 58%, 100% 100%, 45% 92%, 0 100%, 6% 55%); }
.hero__foto--h2 { top: 10%; right: 5%; clip-path: polygon(0 20%, 40% 0, 100% 8%, 96% 62%, 70% 100%, 20% 96%, 0 70%); }
.hero__foto--h3 { bottom: 6%; left: 4%; clip-path: polygon(10% 0, 100% 6%, 90% 50%, 100% 100%, 50% 92%, 0 100%, 8% 45%); }
.hero__foto--h4 { bottom: 4%; right: 7%; clip-path: polygon(0 10%, 60% 0, 100% 30%, 92% 100%, 30% 92%, 0 60%); }
@media (max-width: 899px) { .hero__int { min-height: 0; padding-block: var(--e-4); } .hero__foto { width: clamp(84px, 24vw, 120px); opacity: .95; } .hero__foto--h1 { top: -6%; } .hero__foto--h2 { top: -4%; } .hero__foto--h3, .hero__foto--h4 { bottom: -4%; } }

/* ---- pestañas y tarjetas de carta ---- */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; margin: var(--e-3) 0 var(--e-4); }
.tabs__btn { display: inline-flex; align-items: flex-start; gap: .4rem; font-stretch: 62%; font-weight: 600; text-transform: uppercase; font-size: 1.6rem; color: var(--rosa); padding: .2rem 0; border-bottom: 2px solid transparent; }
.tabs__btn.es-activa { color: var(--blanco); border-bottom-color: var(--blanco); }
.tabs__num { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; background: var(--brasa); color: var(--blanco); font-size: .75rem; font-stretch: 100%; font-weight: 600; margin-top: .1rem; }
.filtro .tabs__num { margin-left: .4rem; }
.tarjetas { display: grid; gap: var(--e-2); grid-template-columns: 1fr; }
@media (min-width: 600px) { .tarjetas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .tarjetas { grid-template-columns: repeat(3, 1fr); } }
.tarjetas--compacta { grid-template-columns: 1fr; }
@media (min-width: 600px) { .tarjetas--compacta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .tarjetas--compacta { grid-template-columns: repeat(4, 1fr); } }
.tarjetas--compacta .tarjeta__foto--texto { aspect-ratio: auto; padding: var(--e-3) var(--e-2) 0; }
.tarjetas--compacta .tarjeta__foto--texto span { font-size: 1.8rem; }
.tarjeta { background: var(--brasa); border: 1px solid var(--negro); border-radius: var(--radio-tarjeta); overflow: hidden; display: flex; flex-direction: column; }
.tarjeta__foto { aspect-ratio: 1; background: var(--cendra); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__foto--texto { display: grid; place-items: center; padding: var(--e-3); text-align: center; }
.tarjeta__foto--texto span { font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: 2.4rem; line-height: .85; color: var(--ascua); }
.tarjeta__cuerpo { padding: var(--e-2) var(--e-2) var(--e-3); display: grid; gap: .5rem; align-content: start; }
.tarjeta__nombre { font-size: 1.5rem; color: var(--rosa); }
.tarjeta__desc { font-size: .95rem; color: var(--blanco); }
.tarjeta__precio { font-stretch: 62%; font-weight: 800; font-size: 1.6rem; }
.al { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.al b { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--cendra); border: 1px solid var(--rosa); color: var(--rosa); font-size: .78rem; font-weight: 600; font-stretch: 100%; }
.al--ninguno { font-size: .85rem; color: var(--rosa); }

/* ---- favoritas ---- */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: var(--e-3) 0 var(--e-4); }
.filtro { display: inline-flex; align-items: center; padding: .55rem 1rem .5rem; border-radius: var(--radio-pildora); border: 1px solid var(--rosa); color: var(--rosa); font-stretch: 62%; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; text-decoration: none; transition: background .2s, color .2s; }
.filtro:hover { color: var(--blanco); border-color: var(--blanco); }
.filtro.es-activa { background: var(--ascua); border-color: var(--ascua); color: var(--blanco); }
.fav__rejilla { display: grid; gap: var(--e-4) var(--e-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .fav__rejilla { grid-template-columns: 1fr 1fr; } }
.fav__item[hidden] { display: none; }
.fav__enlace { position: relative; display: block; border-radius: var(--radio-tarjeta); overflow: hidden; background: var(--brasa); aspect-ratio: 4 / 3; }
.fav__enlace img { width: 100%; height: 100%; object-fit: cover; }
.fav__etq { position: absolute; left: 12px; top: 12px; background: var(--cendra); color: var(--rosa); border-radius: var(--radio-pildora); padding: .3rem .7rem; font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
.fav__nombre { font-size: clamp(1.75rem, 3vw, 2.4rem); margin-top: var(--e-2); }
.fav__nombre a { text-decoration: none; }
.fav__nombre a:hover { color: var(--ascua); }
.fav__meta { color: var(--rosa); font-size: .95rem; margin-top: .35rem; }

/* ---- nuestra cosa ---- */
.cosa__texto { font-size: 1.2rem; margin-top: var(--e-3); }
.cosa__cita { margin-top: var(--e-4); }
.cosa__cita p { font-stretch: 62%; font-weight: 600; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.05; color: var(--rosa); }
.cosa__cita cite { display: block; margin-top: var(--e-2); font-style: normal; font-size: .95rem; color: var(--rosa); }

/* ---- caja de pestañas verticales ---- */
.vtabs .seccion { padding-top: 0; }
.vtabs__caja { background: var(--brasa); border: 1px solid var(--negro); border-radius: var(--radio-caja); padding: var(--e-3); display: grid; gap: var(--e-3); }
@media (min-width: 900px) { .vtabs__caja { grid-template-columns: 200px 1fr 1fr; padding: var(--e-4); align-items: start; } }
.vtabs__lista { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (min-width: 900px) { .vtabs__lista { flex-direction: column; } }
.vtabs__btn { text-align: left; padding: .6rem 1rem .55rem; border-radius: var(--radio-pildora); font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: 1.1rem; color: var(--rosa); border: 1px solid transparent; }
.vtabs__btn:hover { border-color: var(--rosa); }
.vtabs__btn.es-activa { background: var(--cendra); color: var(--blanco); }
.vtabs__panel h3 { font-size: 2.2rem; color: var(--blanco); margin-bottom: var(--e-2); }
.vtabs__panel p { font-size: 1.1rem; }
.vtabs__foto { border-radius: var(--radio-tarjeta); overflow: hidden; aspect-ratio: 4 / 3; }
.vtabs__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---- FAQ ---- */
.faq__lista { display: grid; gap: .6rem; margin-top: var(--e-4); }
.faq__item { background: var(--negro); border-radius: var(--radio-pildora); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: 1rem 1.25rem; font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: 1.15rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "⌄"; color: var(--rosa); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item p { padding: 0 1.25rem 1.1rem; color: var(--rosa); }

/* ---- dónde ---- */
.donde__caja { background: var(--brasa); border: 1px solid var(--negro); border-radius: var(--radio-caja); overflow: hidden; display: grid; }
@media (min-width: 900px) { .donde__caja { grid-template-columns: 1fr 1fr; } }
.donde__texto { padding: var(--e-4); }
.donde__dir { font-size: 1.2rem; margin: var(--e-2) 0 var(--e-3); }
.donde__horario { display: grid; gap: .35rem; margin-bottom: var(--e-3); }
.donde__horario div { display: flex; justify-content: space-between; gap: var(--e-2); border-bottom: 1px solid rgba(255,201,184,.2); padding-bottom: .35rem; }
.donde__horario dt { color: var(--rosa); }
.donde__horario dd { margin: 0; font-weight: 600; }
.donde__foto { aspect-ratio: 4 / 3; }
.donde__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---- reservar / pedir ---- */
.reservar p, .pedir p { font-size: 1.15rem; margin-top: var(--e-2); }

/* ---- pie ---- */
.pie { position: relative; padding: var(--e-6) var(--gutter) 0; overflow: clip; }
.pie__int { max-width: var(--ancho); margin-inline: auto; }
.pie__rejilla { display: grid; gap: var(--e-4); }
@media (min-width: 720px) { .pie__rejilla { grid-template-columns: 1.5fr 1fr 1fr; } }
.pie__marca { font-stretch: 125%; font-weight: 900; text-transform: uppercase; font-size: 1.5rem; margin-bottom: var(--e-2); }
.pie__texto { color: var(--rosa); font-size: .95rem; margin-bottom: var(--e-2); }
.pie h3 { font-size: 1rem; color: var(--rosa); margin-bottom: var(--e-2); }
.pie ul { display: grid; gap: .4rem; }
.pie ul a { font-stretch: 62%; font-weight: 700; text-transform: uppercase; text-decoration: none; font-size: 1.05rem; }
.pie ul a:hover { color: var(--ascua); }
.pie__demo { display: inline-block; margin-top: var(--e-3); background: var(--blanco); color: var(--cendra); border-radius: var(--radio-pildora); padding: .45rem .9rem; font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: .9rem; letter-spacing: .03em; text-decoration: none; }
.pie__demo:hover { background: var(--ascua); color: var(--blanco); }
.pie__copy { color: var(--rosa); font-size: .85rem; margin: var(--e-4) 0 var(--e-4); }
.pie__wordmark { font-stretch: 125%; font-weight: 900; text-transform: uppercase; color: var(--ascua); font-size: clamp(3.4rem, 12.6vw, 11.5rem); line-height: .8; text-align: center; letter-spacing: -.03em; position: relative; z-index: 1; }
.pie__manos { max-width: 1000px; margin: -5vw auto 0; position: relative; z-index: 2; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%); mask-image: linear-gradient(to bottom, transparent 0, #000 42%); }
.pie__manos img { width: 100%; }

/* ---- página carta ---- */
.pagcab { padding: var(--e-5) 0 var(--e-3); }
.pagcab__intro { max-width: 40rem; margin: var(--e-2) auto 0; }
.menu__lista { display: grid; gap: .5rem; margin-top: var(--e-3); }
.menu__item { display: grid; grid-template-columns: 1fr auto; gap: .6rem var(--e-2); align-items: start; padding: var(--e-2) 0; border-bottom: 1px solid rgba(255,201,184,.2); scroll-margin-top: 90px; }
.menu__item:has(.menu__foto) { grid-template-columns: 72px 1fr auto; }
.menu__foto { width: 72px; aspect-ratio: 1; border-radius: var(--radio-tarjeta); overflow: hidden; }
.menu__foto img { width: 100%; height: 100%; object-fit: cover; }
.menu__nombre { font-size: 1.4rem; }
.menu__desc { color: var(--rosa); margin: .25rem 0 .5rem; }
.menu__precio { font-stretch: 62%; font-weight: 800; font-size: 1.4rem; white-space: nowrap; }
.leyenda__lista { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: var(--e-3); }
.leyenda__lista li { display: flex; align-items: center; gap: .6rem; }
.leyenda__lista b { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid var(--rosa); color: var(--rosa); font-size: .85rem; }
.legal h1 { margin-bottom: var(--e-3); }
.legal h2 { font-stretch: 62%; font-weight: 700; text-transform: uppercase; font-size: 1.4rem; margin-top: var(--e-3); margin-bottom: .4rem; }
.legal__demo { background: var(--brasa); border-radius: var(--radio-tarjeta); padding: var(--e-2); color: var(--rosa); }
.legal p { margin-bottom: .6rem; }

/* ---- modo demo (?demo=1): sin cabecera pegajosa ni chip, para el marco del hero de Sala Llena ---- */
.modo-demo .cab { position: static; }
.modo-demo .pie__demo { display: none; }
.modo-demo body { pointer-events: none; }

/* ---- animaciones: ajustes sobre el pool ---- */
.hero__foto.an-flota { animation-duration: 5.5s; }
@media (prefers-reduced-motion: reduce) { .hero__foto { animation: none; } }