/* Capa por capa: el hero REAL de impastonapolettana.pages.dev, armado en capas.
   Medidas tomadas del sitio a 1280×800 y pasadas a cqw (ancho del escenario).
   Estructura: header crema (logo Josefin Sans + "Pizza Artigianale" + bandera, links, pastilla roja)
   y una tarjeta oscura redondeada con la foto a sangre y el texto encima, abajo a la izquierda. */
.capas__stage { container-type: inline-size; }
.mock__page {
  --bg: #FFFFFF; --fg: #1a1a1a; --mutefg: #777; --linea: rgba(0, 0, 0, 0.1);
  --card: #ececec; --hfg: #1a1a1a; --hmute: #666; --oro: #1a1a1a; --rojo: #1a1a1a;
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); color: var(--fg);
  transition: background-color 0.6s ease, color 0.6s ease;
}
.m-grid { position: absolute; inset: 0 3.4%; z-index: 3; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.6%; pointer-events: none; transition: opacity 0.5s ease; }
.m-grid i { background: rgba(255, 64, 64, 0.07); border-left: 1px solid rgba(255, 64, 64, 0.25); border-right: 1px solid rgba(255, 64, 64, 0.25); }

/* header */
.m-nav { position: absolute; left: 3.4%; right: 3.4%; top: 0; height: 9.5%; display: flex; align-items: center; gap: 2.2cqw; border-bottom: 1px solid var(--linea); font: 500 1.15cqw/1 var(--f-text); transition: border-color 0.6s ease; }
.m-brand { display: grid; justify-items: center; gap: 0.38cqw; margin-right: auto; }
.m-brand b { font: 700 2cqw/1 "Josefin Sans", "Inter", sans-serif; letter-spacing: 0.1em; padding-left: 0.1em; text-transform: uppercase; }
.m-brand small { font: 600 0.62cqw/1 var(--f-text); letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; color: var(--mutefg); }
.m-brand i { width: 2.6cqw; height: 0.24cqw; border-radius: 1px; background: linear-gradient(90deg, #3d8b3d 0 33.3%, #f4f1ea 33.3% 66.6%, #c8352b 66.6%); }
.m-links { display: flex; gap: 2.2cqw; color: var(--mutefg); }
.m-links i { font-style: normal; }
.m-pill { padding: 0.95cqw 1.6cqw; border-radius: 99px; background: var(--rojo); color: #fff; font: 700 1.05cqw/1 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; transition: background-color 0.6s ease; }

/* tarjeta del hero */
.m-card { position: absolute; left: 1.4%; right: 1.4%; top: 10.5%; bottom: 2.3%; border-radius: 1.9cqw; overflow: hidden; background: var(--card); transition: background-color 0.6s ease; }
.m-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(32deg, transparent 49.8%, #c9c9c9 49.8% 50.2%, transparent 50.2%), linear-gradient(-32deg, transparent 49.8%, #c9c9c9 49.8% 50.2%, transparent 50.2%); transition: opacity 0.5s ease; }
.m-img { position: absolute; inset: 0; background: url("../assets/impasto-hero.jpg") 60% center / cover no-repeat; opacity: 0; transition: opacity 0.9s ease; }
.m-shade { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; background: linear-gradient(90deg, rgba(20, 16, 13, 0.82) 0%, rgba(20, 16, 13, 0.5) 34%, rgba(20, 16, 13, 0) 66%), linear-gradient(0deg, rgba(20, 16, 13, 0.55), rgba(20, 16, 13, 0) 40%); }
.m-hero { position: absolute; z-index: 2; left: 3.2%; top: 24%; width: 48%; display: flex; flex-direction: column; align-items: flex-start; color: var(--hfg); transition: color 0.6s ease; }
.m-eb { margin-bottom: 1.5cqw; font: 700 0.98cqw/1 var(--f-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--oro); transition: color 0.6s ease; }
.m-h1 { font: 400 5cqw/1.12 "Seramonde", Georgia, serif; letter-spacing: -0.005em; }
.m-h1 em { font-style: normal; color: var(--oro); transition: color 0.6s ease; }
.m-sub { margin-top: 1.5cqw; max-width: 31ch; font: 400 1.3cqw/1.55 var(--f-text); color: var(--hmute); }
.m-btns { display: flex; gap: 1cqw; margin-top: 2.5cqw; }
.m-btns b, .m-btns i { padding: 1.3cqw 2cqw; border-radius: 99px; font: 700 1.05cqw/1 var(--f-text); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.m-btns b { background: var(--rojo); color: #fff; transition: background-color 0.6s ease; }
.m-btns i { border: 1px solid currentColor; opacity: 0.75; }
.m-hint { margin-top: 3.2cqw; padding-left: 1cqw; border-left: 1px solid currentColor; font: 600 0.84cqw/1 var(--f-text); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hmute); }

/* la capa invisible y el resultado */
.m-code { position: absolute; z-index: 4; right: 4%; top: 18%; width: 42%; bottom: 8%; margin: 0; padding: 2cqw; border-radius: 1.2cqw; background: rgba(10, 10, 10, 0.92); color: #cfcfcf; font: 1.08cqw/1.6 ui-monospace, Menlo, monospace; white-space: pre-wrap; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s var(--ease-out); }
.m-code .k { color: var(--lime); }
.m-chat { position: absolute; z-index: 5; left: 50%; bottom: 7%; width: 62%; transform: translate(-50%, 16px); padding: 1.8cqw 2.2cqw; border-radius: 1.4cqw; background: #111; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 1.35cqw; line-height: 1.5; opacity: 0; transition: opacity 0.5s ease, transform 0.6s var(--ease-out); box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.45); }
.m-q { margin: 0 0 1cqw; color: rgba(255, 255, 255, 0.6); }
.m-a { margin: 0; }
.m-a b { display: inline-block; margin-right: 0.6cqw; padding: 0.3cqw 0.7cqw; border-radius: 0.5cqw; background: rgba(255, 255, 255, 0.1); font-size: 1.05cqw; }
.m-a mark { padding: 0 0.5cqw; border-radius: 0.4cqw; background: var(--lime); color: var(--ink); font-weight: 600; }

/* paso 0 · grilla: todo es caja gris (wireframe) */
.capas__stage[data-step="0"] :is(.m-brand > *, .m-links i, .m-pill, .m-hero > *, .m-btns > *) { color: transparent !important; background: #dcdcdc !important; border-color: transparent !important; border-radius: 0.4cqw; }
.capas__stage[data-step="0"] .m-brand i { background: #dcdcdc !important; }
.capas__stage[data-step="0"] .m-btns { background: none !important; }
.capas__stage[data-step="0"] .m-h1 em { color: transparent; }
.capas__stage:not([data-step="0"]) .m-grid { opacity: 0; }
/* paso 1 · tipografía: aparecen los textos, todavía en blanco y negro */
/* paso 2+ · color */
.capas__stage:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .mock__page {
  --bg: #F4EADB; --fg: #2A211B; --mutefg: #6E5F52; --linea: rgba(42, 33, 27, 0.12);
  --card: #211915; --hfg: #F4EADB; --hmute: rgba(244, 234, 219, 0.78); --oro: #D8A24A; --rojo: #B8321F;
}
.capas__stage:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .m-card::after { opacity: 0; }
/* paso 3+ · imagen */
.capas__stage:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) :is(.m-img, .m-shade) { opacity: 1; }
/* paso 4+ · movimiento */
.capas__stage:is([data-step="4"], [data-step="5"], [data-step="6"]) .m-img { animation: m-respira 6s ease-in-out infinite alternate; }
.capas__stage[data-step="4"] .m-h1 { animation: latido 2.4s var(--ease-out) infinite; }
@keyframes m-respira { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }
@keyframes latido { 0% { opacity: 0.2; transform: translateY(8px); filter: blur(6px); } 35%, 100% { opacity: 1; transform: none; filter: blur(0); } }
/* paso 5 · la capa invisible */
.capas__stage[data-step="5"] .m-code { opacity: 1; transform: none; }
/* paso 6 · resultado */
.capas__stage[data-step="6"] .m-chat { opacity: 1; transform: translate(-50%, 0); }

/* inspector: contorno y etiqueta sobre los elementos semánticos (paso 5) */
.m-h1[data-tag], .m-btns b[data-tag] { position: relative; }
[data-tag] { outline: 1px dashed transparent; outline-offset: 0.6cqw; transition: outline-color 0.4s ease; }
[data-tag]::before { content: attr(data-tag); position: absolute; left: -0.6cqw; bottom: calc(100% + 0.9cqw); padding: 0.3cqw 0.6cqw; border-radius: 0.4cqw; background: var(--lime); color: var(--ink); font: 600 0.95cqw/1 ui-monospace, Menlo, monospace; letter-spacing: 0; text-transform: none; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s var(--ease-out); pointer-events: none; }
.capas__stage[data-step="5"] [data-tag] { outline-color: var(--lime); }
.capas__stage[data-step="5"] [data-tag]::before { opacity: 1; transform: none; }
.m-nav[data-tag]::before { bottom: auto; top: calc(100% + 0.9cqw); left: 0; }

/* ---------- en el celular: el mismo hero, pero como se ve de verdad en el teléfono ----------
   Medidas tomadas de impastonapolettana.pages.dev a 390×844 y pasadas a cqw (1px = 0,256cqw). */
@container (max-width: 560px) {
  .mock { border-radius: 7cqw; border: 2px solid rgba(255, 255, 255, 0.18); }
  .mock__bar { display: none; }
  .mock__page { aspect-ratio: 390 / 844; }
  .m-grid { inset: 0 4.1%; grid-template-columns: repeat(4, 1fr); gap: 4%; }
  .m-grid i:nth-child(n + 5) { display: none; }
  .m-nav { left: 4.1%; right: 4.1%; height: 7.6%; gap: 2.6cqw; font-size: 3.2cqw; }
  .m-nav::after { content: ""; width: 10.3cqw; height: 10.3cqw; border-radius: 50%; background: linear-gradient(var(--fg) 0 0) 50% 42% / 4.2cqw 0.5cqw no-repeat, linear-gradient(var(--fg) 0 0) 50% 58% / 4.2cqw 0.5cqw no-repeat, #fff; box-shadow: 0 0 0 1px var(--linea); }
  .m-brand { gap: 1.2cqw; }
  .m-brand b { font-size: 5.4cqw; }
  .m-brand small { font-size: 1.7cqw; }
  .m-brand i { width: 7cqw; height: 0.7cqw; }
  .m-links { display: none; }
  .m-pill { padding: 3cqw 5cqw; font-size: 0; }
  .m-pill::after { content: "Pedir"; font-size: 3.4cqw; }   /* en el celular real el botón dice "Pedir" */
  .m-card { left: 2%; right: 2%; top: 8%; bottom: 1%; border-radius: 5cqw; }
  .m-img { background-position: 50% 70%; }
  .m-shade { background: linear-gradient(0deg, rgba(20, 16, 13, 0.92) 0%, rgba(20, 16, 13, 0.62) 50%, rgba(20, 16, 13, 0.25) 100%); }
  .m-hero { left: 5.1%; right: 5.1%; top: 35%; width: auto; }
  .m-eb { margin-bottom: 4cqw; font-size: 3.1cqw; letter-spacing: 0.12em; }
  .m-h1 { font-size: 11.6cqw; }
  .m-sub { margin-top: 4cqw; max-width: none; font-size: 4.1cqw; }
  .m-btns { flex-direction: column; align-items: flex-start; gap: 4cqw; margin-top: 8cqw; }
  .m-btns b, .m-btns i { padding: 3.8cqw 6.4cqw; font-size: 3.6cqw; }
  .m-hint { margin-top: 13cqw; font-size: 2.8cqw; }
  .m-code { left: 4%; right: 4%; width: auto; top: 30%; bottom: auto; padding: 4.5cqw; border-radius: 3.5cqw; font-size: 3cqw; }
  .m-chat { width: 90%; bottom: 3%; padding: 4.5cqw; border-radius: 3.5cqw; font-size: 3.6cqw; }
  .m-q { margin-bottom: 2.4cqw; }
  .m-a b { font-size: 3cqw; padding: 0.8cqw 1.6cqw; border-radius: 1.2cqw; margin-right: 1.6cqw; }
  .m-a mark { padding: 0 1.2cqw; border-radius: 1cqw; }
  .capas__stage[data-step="0"] :is(.m-brand > *, .m-pill, .m-hero > *, .m-btns > *) { border-radius: 1.2cqw; }
  [data-tag]::before { font-size: 2.6cqw; padding: 0.8cqw 1.4cqw; border-radius: 1cqw; bottom: calc(100% + 2cqw); }
  [data-tag] { outline-offset: 1.4cqw; }
}
/* la etiqueta <h1> va a la derecha del título para no tapar el texto de arriba */
.m-h1[data-tag]::before { left: auto; right: -0.6cqw; }