/* Pizza Dorada — la página es una carta impresa de trattoria.
   Colores de marca: logo_colores/. Tipografía: EB Garamond (texto y titulares) + Pinyon Script (lema). */
:root {
  --cafe: #4E342E;
  --cafe-deep: #2e211d;
  --cafe-soft: #43302a;
  --crema: #EAE3DA;           /* fondo único, hueso apagado */
  --crema-2: #E0D6CA;         /* un paso de tono */
  --papel: #F6F2EC;           /* la hoja de la carta */
  --dorado: #C9A24A;          /* dorado de marca, menos saturado en áreas grandes */
  --dorado-claro: #E7C987;    /* dorado sobre fondo oscuro */
  --dorado-deep: #8a6a24;
  --oliva: #6B8E23;
  --oliva-deep: #4d6819;
  --tomate: #B22222;
  --tomate-deep: #8f1a1a;

  --ink: var(--cafe);
  --muted: #6f5a50;
  --accent: var(--cafe-deep);
  --accent-ink: var(--dorado-claro);
  --on-dark: #EFE3C8;
  --on-dark-muted: #cdbb98;

  --font-text: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;

  --step-small: 0.9375rem;                              /* 15px */
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem); /* 17–19px */
  --step-lead: clamp(1.375rem, 1.1rem + 1vw, 2rem);     /* 22–32px */
  --step-head: clamp(2.25rem, 1.4rem + 3vw, 4rem);      /* 36–64px */
  --step-display: clamp(2.5rem, 1rem + 4vw, 4.5rem);    /* 40–72px */

  --margin: clamp(1rem, 2.6vw, 2.5rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(5.5rem, 9vw, 9rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --crust: #d9a23a;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
body { margin: 0; background: var(--crema); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.65; font-kerning: normal; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--dorado); color: var(--cafe); }
:focus-visible { outline: 3px solid var(--dorado); outline-offset: 3px; }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; line-height: 1.05; letter-spacing: -0.01em; }
/* título de dos voces: una palabra en la cursiva del lema y el resto en Jost; debajo, una barra dorada corta */
h1 .script, h2 .script { display: block; font-family: var(--font-script); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dorado-deep); font-size: 0.78em; line-height: 1.1; margin-bottom: 0.04em; }
h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 0.45em; background: var(--dorado); }
p { max-width: 54ch; text-wrap: pretty; }
.nums { font-variant-numeric: lining-nums tabular-nums; }
.shutter { overflow: clip; }

/* ---------- controles ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.75rem; letter-spacing: 0.02em; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; font-size: var(--step-body); font-weight: 500; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.06em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--cafe); }
  .link:hover { text-decoration-color: currentColor; }
}

/* Bordes troquelados: festón y perforación de puntos (formas rellenas, no líneas). */

/* ---------- barra superior ---------- */
.top { position: absolute; inset: 0 0 auto; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 28px var(--margin); color: var(--crema); }
.top__mark { font-family: var(--font-script); font-size: var(--step-lead); line-height: 1; color: var(--dorado-claro); text-decoration: none; justify-self: start; }
.top__links { display: flex; gap: 2.2rem; }
.top .button { justify-self: end; background: var(--dorado-claro); color: var(--cafe-deep); }
@media (hover: hover) and (pointer: fine) { .top .button:hover { background: var(--crema); } }

/* ---------- héroe: la tarjeta de la casa junto al video de la cocina ---------- */
.hero { position: relative; background: var(--cafe); padding: 140px var(--margin) 0; overflow: clip; }
.hero__photo { position: absolute; inset: 0; z-index: 0; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.35) brightness(0.42) contrast(1.05); }
.hero__stage { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.card { grid-column: 1 / 8; position: relative; background: var(--crema); padding: 40px clamp(28px, 4vw, 56px) 56px; text-align: center; }
.card__logo { width: min(100%, 250px); margin: 0 auto; mix-blend-mode: multiply; }
.hero h1 { margin-top: 12px; font-size: var(--step-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.hero h1 .script { font-size: 0.95em; margin: 0.06em 0 0; }
.hero h1 .l1, .hero h1 .l2 { display: block; white-space: nowrap; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 [data-line] { display: block; }
.hero__lead { margin: 24px auto 0; line-height: 1.6; max-width: 38ch; }
.hero__facts { margin-top: 20px; color: var(--muted); }
.hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: center; align-items: center; }
.hero__actions .link { text-decoration-color: currentColor; }
.hero__reel { grid-column: 8 / 13; position: sticky; top: 24px; }
.hero__reel video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cafe-deep); }
.hero__reel figcaption { margin-top: 12px; font-size: var(--step-small); font-style: italic; color: var(--crema); }

/* el medidor del horno, en la parte de la tarjeta bajo el pliegue */
.oven { margin: 56px calc(clamp(28px, 4vw, 56px) * -1) -56px; padding: 48px clamp(28px, 4vw, 56px) 56px; background: var(--crema-2); }
.oven h2 { font-size: var(--step-lead); }
.oven h2::after { margin-inline: auto; }
.oven__intro { margin: 10px auto 0; max-width: 40ch; }
.oven__stage { margin: 28px auto 0; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 28px; align-items: center; text-align: left; max-width: 540px; }
.oven__pizza { width: 100%; aspect-ratio: 1; }
.oven__pizza .cheese { transition: fill 400ms var(--ease-out); }
.oven__pizza .slice { transform: translate(6px, -5px); }
.oven__pizza.is-golden .slice { transform: translate(16px, -14px); }
.oven__read { font-size: var(--step-lead); line-height: 1.1; font-weight: 600; }
.oven__note { margin-top: 10px; }
.oven__time { margin-top: 14px; color: var(--muted); }
.oven__control { margin: 28px auto 0; max-width: 540px; text-align: left; }
.oven__control label { display: flex; justify-content: space-between; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin-top: 8px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: #d3c4ab; }
input[type="range"]::-moz-range-track { height: 6px; background: #d3c4ab; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: var(--cafe-deep); border: 0; transition: transform var(--t-press) var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--cafe-deep); border: 0; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* ---------- de la masa al horno: cuatro videos ---------- */
.ritual { background: var(--crema); padding: var(--section) var(--margin); }
.ritual__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.ritual__head h2 { grid-column: 1 / 8; font-size: var(--step-head); }
.ritual__head p { grid-column: 8 / 13; }
ol.ritual__row { margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.moment { padding-top: var(--gap, 0px); }
.moment__fig { background: var(--cafe-deep); }
.moment__fig video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.moment h3 { margin-top: 18px; font-size: var(--step-body); text-transform: uppercase; letter-spacing: 0.06em; }
.moment p { color: var(--ink); }
.moment p { margin-top: 8px; }

/* ---------- la carta: categorías a la izquierda, hoja impresa a la derecha ---------- */
.carta { background: var(--crema-2); color: var(--ink); padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; overflow: clip; }
.carta__side { grid-column: 1 / 6; position: sticky; top: 32px; }
.carta h2 { font-size: var(--step-head); }
.carta__side > p { margin-top: 16px; max-width: 34ch; }
.tabs { margin-top: 36px; display: grid; gap: 10px; }
.tab { width: 100%; display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center; padding: 10px; background: var(--crema); color: var(--ink); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tab:active { transform: scale(0.985); }
.tab img { width: 96px; height: 96px; object-fit: cover; filter: sepia(0.12); }
.tab__name { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; }
.tab__note { display: block; margin-top: 4px; color: var(--muted); }
.tab[aria-selected="true"] { background: var(--cafe-deep); color: var(--on-dark); }
.tab[aria-selected="true"] .tab__note { color: var(--on-dark-muted); }
@media (hover: hover) and (pointer: fine) { .tab[aria-selected="false"]:hover { background: var(--papel); } }
.carta__menu { grid-column: 7 / 13; position: relative; }
.plate { position: relative; z-index: 1; width: clamp(180px, 18vw, 250px); margin: 0 auto -110px; aspect-ratio: 1; border-radius: 50%; background: var(--dorado); padding: 8px; }
.plate img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sheet { background: var(--papel); color: var(--cafe); padding: 150px clamp(24px, 4vw, 56px) 64px; text-align: center;
  --s: 14px; /* taste-skill-ignore: festón inferior de la hoja */
  -webkit-mask: /* taste-skill-ignore */ radial-gradient(var(--s) at 50% 100%, #0000 98%, #000) 50% 100% / calc(var(--s) * 2.6) 100% repeat-x;
  mask: /* taste-skill-ignore */ radial-gradient(var(--s) at 50% 100%, #0000 98%, #000) 50% 100% / calc(var(--s) * 2.6) 100% repeat-x; }
.sheet h3 { font-size: var(--step-body); text-transform: uppercase; letter-spacing: 0.12em; }
.sheet__note { margin: 8px auto 0; color: var(--muted); }
.panel { margin-top: 40px; }
.panel[hidden] { display: none; }
.panel h4 { margin: 0 0 16px; font-family: var(--font-script); font-weight: 400; font-size: var(--step-head); letter-spacing: 0; color: var(--dorado-deep); }
.dish { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; text-align: left; max-width: 460px; margin: 0 auto; }
.dish + .dish { margin-top: 16px; }
.dish__name { font-weight: 600; }
.dish__price { font-variant-numeric: lining-nums tabular-nums; }
.dish__desc { grid-column: 1 / -1; color: var(--muted); line-height: 1.4; }
.dish--star .dish__name::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 10px; background: var(--dorado); transform: rotate(45deg); vertical-align: 0.15em; }
.sheet__hours { margin: 40px auto 0; }
.sheet__cta { margin-top: 24px; }

/* ---------- visítanos ---------- */
.visit { position: relative; min-height: 100svh; background: var(--cafe-deep); }
.visit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.35); }
.visit__inner { position: relative; padding: 60px 0; }
.visit__card { position: relative; margin-left: auto; margin-right: var(--margin); width: 400px; background: var(--papel); padding: 36px 32px 0; z-index: 1; }
.visit h2 { font-size: var(--step-lead); }
.visit address { font-style: normal; margin-top: 14px; }
.hours { margin-top: 20px; }
.hours div { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: lining-nums tabular-nums; }
.hours div + div { margin-top: 4px; }
.visit__phone { margin-top: 20px; }
.visit__card .button { display: flex; margin: 28px -32px 0; min-height: 56px; }
.visit__credit { position: absolute; left: var(--margin); bottom: 16px; font-size: var(--step-small); color: var(--crema); font-style: italic; z-index: 1; }

/* ---------- pie: el reverso de la tarjeta ---------- */
.footer { background: var(--cafe-deep); color: var(--on-dark); padding: 88px var(--margin) 96px; } /* abajo, sitio para la insignia flotante de Netlify */
.back { margin: 0 auto; max-width: calc(100% - 16.6%); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.back__sign { font-family: var(--font-script); font-size: var(--step-head); line-height: 1.05; color: var(--dorado-claro); }
.back__msg { margin-top: 18px; }
.back__right { position: relative; padding-right: 110px; }
.back__links { display: grid; gap: 12px; }
.stamp { position: absolute; top: 0; right: 0; width: 88px; padding: 6px; background: var(--on-dark); transform: rotate(4deg); }
.stamp img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: sepia(0.4); }
.back__imprint { grid-column: 1 / -1; justify-self: center; text-align: center; font-size: var(--step-small); color: var(--on-dark-muted); }
.back__credits { grid-column: 1 / -1; justify-self: center; text-align: center; font-size: var(--step-small); line-height: 1.5; color: var(--on-dark-muted); max-width: 75ch; }
.back__credits a { color: inherit; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) and (min-width: 861px) {
  .card { grid-column: 1 / 9; }
  .hero__reel { grid-column: 9 / 13; }
  ol.ritual__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- teléfono ---------- */
@media (max-width: 860px) {
  .top { grid-template-columns: 1fr auto; padding: 18px 16px; }
  .top__links { display: none; }
  .top .button { min-height: 2.75rem; padding: 0 1rem; }
  .hero { padding: 96px 12px 0; }
  .hero__stage { display: block; }
  .hero__reel { display: none; }
  .card { padding: 36px 22px 48px; }
  .card__logo { width: min(100%, 220px); }
  .hero h1 { font-size: 9.6vw; }
  .oven__stage { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .oven__pizza { max-width: 220px; }
  .oven { margin-inline: -22px; padding-inline: 22px; margin-bottom: -48px; }

  .ritual { padding-inline: 16px; }
  .ritual__head { display: block; }
  .ritual__head p { margin-top: 16px; }
  ol.ritual__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; margin-top: 40px; }
  .moment { padding-top: calc(var(--gap, 0px) / 2.5); }
  .moment h3 { font-size: var(--step-small); margin-top: 12px; }
  .moment p { font-size: var(--step-small); }

  .carta { display: block; padding-inline: 16px; }
  .carta__side { position: static; }
  .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
  .tab { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  .tab img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .tab__name { font-size: var(--step-small); }
  .tab__note { font-size: var(--step-small); }
  .carta__menu { margin-top: 48px; }
  .sheet { padding: 130px 22px 56px; }

  .visit { min-height: 0; padding-top: 70svh; }
  .visit > img { height: 70svh; }
  .visit__inner { padding-top: 0; }
  .visit__card { margin: -80px 16px 0; width: auto; }
  .visit__credit { top: calc(70svh - 110px); bottom: auto; }

  .footer { padding: 48px 0 96px; }
  .footer { padding-inline: 16px; }
  .back { max-width: none; grid-template-columns: 1fr; gap: 28px; }
  .back__right { padding-right: 0; }
  .stamp { position: static; width: 64px; margin-bottom: 20px; }
}

/* ---------- movimiento (el contenido queda visible sin JavaScript) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-line] { transform: translateY(105%); animation: load-line 900ms var(--ease-expo) forwards; animation-delay: calc(200ms + var(--i) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(14px); animation: load-rise 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .card { transform: translateY(60px); animation: card-up 1100ms var(--ease-expo) 40ms forwards; }
  .js .hero__photo img { transform: scale(1.08); animation: settle 2400ms var(--ease-soft) forwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .panel:not([hidden]) { animation: panel-in 420ms var(--ease-out); }
  .oven__pizza .slice { transition: transform 600ms var(--ease-out); }
  @supports (animation-timeline: view()) {
    .spin { animation: spin linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes load-line { to { transform: none; } }
@keyframes load-rise { to { opacity: 1; transform: none; } }
@keyframes card-up { to { transform: none; } }
@keyframes settle { to { transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes spin { from { transform: rotate(-40deg); } to { transform: rotate(40deg); } }