/* Patients First Dentures & Implants — template 3, "the appointment card"
   Direction: the page is the object (seed 799551235). The patient's file: tabbed folders,
   a bilingual price-list sheet, an itinerary slip, a letter with a tear-off stub, a visit card,
   a reply card, and the back of the card. Brand palette kept exactly. */

/* ---------- tokens ---------- */
:root {
  --black: #000000;      /* page ground, matches the logo's ground */
  --night: #07090C;      /* text on paper and on colour */
  --lime: #7BD62B;       /* action */
  --blue: #2A9DF4;       /* small accents only, never a field */
  --link: #62B8FF;       /* links on dark */
  --panel: #11161C;      /* black, one step up: a field */
  --panel-2: #1A2129;    /* black, two steps up */
  --ink: #EEF2F6;        /* running text on dark; also the paper */
  --muted: #A9B4C0;      /* the second language on dark */
  --paper: var(--ink);
  --es: var(--muted);    /* the second language: quieter. On paper it becomes --es-paper */
  --es-paper: #4E5965;   /* night, softened for the Spanish on paper (7:1 on #EEF2F6) */
  --lime-ink: #3B7712;   /* the lime, deepened for Spanish headings on paper (4.9:1 on #EEF2F6) */
  --perf: rgba(78, 89, 101, 0.55); /* dashed tear-off lines on paper */
  --card-r: 14px;
  --float: 0 24px 60px rgba(0, 0, 0, 0.45);

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-text: "EB Garamond", Georgia, serif;

  /* five steps */
  --s-small: 0.875rem;                                   /* 14 */
  --s-body: clamp(1.1875rem, 1.12rem + 0.2vw, 1.3125rem); /* 19–21 */
  --s-es: clamp(1.0625rem, 1.02rem + 0.15vw, 1.125rem);  /* 17–18: the Spanish beside the English */
  --s-lead: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);  /* 22–30 */
  --s-head: clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem);     /* 44–92 */
  --s-display: clamp(2.25rem, 9.2vw, 7.25rem);           /* 36–116 */

  --margin: clamp(1rem, 2.6vw, 2.5rem);
  --wrap: 100rem;                                          /* content never wider than 1600px */
  --edge: max(var(--margin), calc((100% - var(--wrap)) / 2)); /* side padding/margin on a full-width box: centres the 1600px column */
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(8rem, 14vw, 14rem);
  --tab-h: 2.375rem;
  --strip: 2.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--ink);
  font-family: var(--font-text); font-size: var(--s-body); line-height: 1.5;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--lime); color: var(--night); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* EN at full ink; ES directly beside or below it, in the quieter colour (roman, no italics) */
.es { color: var(--es); }
.front, .sheet--menu, .slip, .letter__sheet, .stub, .contact__card, .reply, .back { --es: var(--es-paper); }
.cta { --es: var(--night); }
:where(p.es) { font-size: var(--s-es); }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }

/* ---------- buttons: square, one fill ---------- */
.btn {
  display: inline-block; vertical-align: middle;
  min-height: 3.25rem; padding: 0.9rem 1.5rem 0.85rem;
  background: var(--lime); color: var(--night);
  font-family: var(--font-text); font-weight: 600; font-size: var(--s-body); line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover) ease;
}
.btn span[lang] { font-weight: 400; }
.btn { transition: translate var(--t-hover) var(--ease-out), scale var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.btn:hover { translate: 0 -2px; background: #8FE043; }
.btn:active { translate: 0 0; scale: 0.98; }
.btn:focus-visible { outline-color: var(--night); }
.btn--ink { background: var(--night); color: var(--ink); }
.btn--ink:hover { background: #1B2027; }
.btn--ink:focus-visible { outline-color: var(--night); }

/* ---------- announcement bar ---------- */
.bar { background: var(--panel); color: var(--ink); padding: 0.55rem var(--edge); font-size: var(--s-small); line-height: 1.35; }
.bar p { display: flex; justify-content: space-between; gap: 0.25rem var(--gutter); flex-wrap: wrap; }
.bar .en { font-weight: 600; }

/* ---------- top row ---------- */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gutter);
  padding: 0.5rem var(--edge);
}
.top__nav { display: flex; gap: 1.75rem; }
.top a { text-decoration: none; transition: color var(--t-hover) ease; }
.top__nav a, .top__call { font-size: var(--s-body); padding-block: 0.5rem; }
.top__nav a span, .top__call span { color: var(--muted); font-weight: 400; }
.top__nav a:hover, .top__call:hover { color: var(--lime); }
.top__call { justify-self: end; font-weight: 600; }
.top__logo img { width: auto; height: clamp(3rem, 4vw, 4rem); transition: transform var(--t-ui) var(--ease-out); }
.top__logo:hover img { transform: scale(1.03); }

/* ---------- hero ---------- */
.hero { position: relative; }
/* the headline block sits on a blurred, darkened photograph with a faint lime and blue glow;
   its bottom 7rem runs under the appointment card, which floats over the edge */
.hero__words {
  position: relative; isolation: isolate; text-align: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--margin) calc(clamp(2.5rem, 4vw, 4rem) + 7rem);
}
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--black); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.04); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(55% 45% at 50% 38%, rgba(123, 214, 43, 0.13), transparent 70%),
    radial-gradient(35% 40% at 82% 18%, rgba(42, 157, 244, 0.14), transparent 70%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.92));
}
.hero__title {
  font-family: var(--font-display); font-size: var(--s-display); line-height: 0.88;
  letter-spacing: -0.01em; max-width: 11.2em; margin-inline: auto;
}
.hero__es { font-size: var(--s-lead); color: var(--lime); margin-top: 1rem; line-height: 1.25; }
.hero__lede {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter) calc(var(--gutter) * 1.5);
  max-width: 60rem; margin: 1.5rem auto 0; text-align: left;
}
.hero__lede .es { color: var(--muted); }
.hero__line { font-size: var(--s-body); color: var(--muted); margin-bottom: 1.1rem; }
.hero__btn { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* the appointment card and the town, one row, tops and bottoms aligned */
.hero__row {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: stretch;
  padding-inline: var(--edge); margin-top: -7rem; position: relative; z-index: 1;
}
/* rounded paper cards that float: one radius, one soft shadow, used on every card */
.front, .plate, .stub, .contact__card, .contact__photo, .reply { border-radius: var(--card-r); box-shadow: var(--float); }
.plate, .contact__photo, .contact__card { overflow: hidden; }
.front { grid-column: 1 / 8; position: relative; background: var(--paper); color: var(--night); }
.front__body { padding: clamp(1.75rem, 3.5vw, 3.5rem); }
.card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; }
.card__title { font-family: var(--font-display); font-size: var(--s-lead); line-height: 1; letter-spacing: 0.01em; }
.card__title-es { font-size: var(--s-lead); line-height: 1.1; }
.card__phone {
  display: block; width: fit-content; margin-top: 0.5rem;
  font-family: var(--font-display); font-size: var(--s-head); line-height: 1.2; text-decoration: none;
  transition: color var(--t-hover) ease;
}
.card__phone:hover { color: #1F6FB0; }
.card__phone:focus-visible, .front a:focus-visible { outline-color: var(--night); }
.card__rows { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px dashed var(--perf); display: grid; gap: 1.1rem; font-size: var(--s-lead); line-height: 1.25; }
/* a card row: the English line, the Spanish directly under it, quieter */
.pair .en, .pair .es { display: block; }
.pair .es { font-size: var(--s-body); margin-top: 0.1rem; }
.pair .pair__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: pre; }
/* the price list keeps its dot leaders; nothing else on the page has them */
.menu__name { display: flex; align-items: baseline; gap: 0 0.6rem; flex-wrap: wrap; }
.menu__name h3, .slip__name h3, .menu__name p, .slip__name p { font: inherit; }
.menu__name h3 { flex: 0 0 auto; }
.menu__name .es { margin-left: auto; }
.lead { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 4px dotted currentColor; transform: translateY(-0.28em); opacity: 0.5; }
.slip__name .lead { display: none; }
.slip__name .es { font-weight: 400; color: var(--es); }
.card__hours { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.4rem; padding-top: 1.25rem; border-top: 1px dashed var(--perf); }
.card__hours > span:first-child span { color: var(--es-paper); }

/* the live thing: today, stamped on the card */
.week { display: inline-flex; gap: 0.3rem; }
.week i { display: block; width: 1.6rem; height: 1.6rem; background: var(--night); transition: transform var(--t-ui) var(--ease-out), background-color var(--t-ui) ease; }
.week i.off { background: var(--muted); }
.week i.is-today { background: var(--lime); outline: 3px solid var(--night); outline-offset: 0; }
.week.is-open i.is-today { animation: beat 1.6s var(--ease-soft) infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.plate { grid-column: 8 / 13; align-self: stretch; position: relative; min-height: 22rem; }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; background: var(--muted); }

/* ---------- shared headings ---------- */
.h2 { font-family: var(--font-display); font-size: var(--s-head); line-height: 0.9; letter-spacing: -0.005em; }
.h2-es { font-size: var(--s-lead); line-height: 1.25; margin-top: 0.6rem; }
/* the Spanish heading lines in green, as on the clinic's own site: lime on dark, deep green on paper */
.how .h2-es, .contact .h2-es { color: var(--lime); }
.sheet--menu .h2-es, .letter__sheet .h2-es, .reply__es, .stub__es, .card__title-es,
.menu__name .es, .slip__name .es, .letter__row h3.es { color: var(--lime-ink); }
.slip__name--bar .es { color: var(--lime); }
.tab { font-size: var(--s-lead); line-height: 1.2; margin-bottom: 1.25rem; }
.tab span { color: var(--es); }

/* ---------- services: the price-list sheet ---------- */
.services { padding: var(--section) var(--edge) 0; }
.index { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start; }
.sheet--menu {
  grid-column: 1 / 8; background: var(--paper); color: var(--night);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.75rem);
  clip-path: var(--cut-menu);
}
.sheet__head { text-align: center; margin-bottom: 2.5rem; }
.sheet--menu .tab { text-align: center; }
.sheet__intro { margin: 1.25rem auto 0; max-width: 40rem; }
.sheet__intro .es { display: block; margin-top: 0.5rem; }
.menu__row { padding: 1.1rem 0; outline-offset: 6px; transition: opacity var(--t-ui) ease; cursor: default; }
.menu__row:focus-visible { outline: 3px solid var(--night); }
.menu__name { font-family: var(--font-text); font-size: var(--s-lead); line-height: 1.2; }
.menu__name .en { font-weight: 600; text-wrap: nowrap; }
.menu__name .es { text-align: right; font-size: var(--s-body); }
.menu__desc { margin-top: 0.35rem; max-width: 36rem; }
.menu__desc.es { margin-top: 0.2rem; }
/* one picture for the whole list: it follows the row being read (pointer, keyboard or scroll) */
.menu__thumb { display: none; }
.index__frame {
  display: block; grid-column: 8 / 13; grid-row: 1; align-self: start; position: relative; z-index: 1;
  pointer-events: none; overflow: hidden; background: var(--night);
  transition: transform 420ms var(--ease-out);
}
.index__frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: opacity var(--t-ui) ease, scale 1.2s var(--ease-soft); }
.index__frame.is-swapping img { opacity: 0; scale: 1.04; }
@media (hover: hover) and (pointer: fine) {
  .menu:has(.menu__row:hover, .menu__row:focus-visible) .menu__row:not(:hover, :focus-visible) { opacity: 0.4; }
}

/* ---------- how it works: the slip on a dark field ---------- */
.how {
  margin-top: clamp(5rem, 9vw, 9rem); background: var(--panel); color: var(--ink);
  padding: clamp(6rem, 9vw, 9rem) var(--edge);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: start;
}
.how__head { grid-column: 1 / 6; position: sticky; top: 2.5rem; }
.how__intro { margin-top: 1.5rem; max-width: 30rem; }
.how__intro.es { margin-top: 0.5rem; color: var(--muted); }
.how .tab { color: var(--link); }
.slip {
  grid-column: 7 / 13; background: var(--paper); color: var(--night);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 5vw, 4rem);
  clip-path: var(--cut-slip); font-variant-numeric: tabular-nums;
}
.slip__step + .slip__step { margin-top: 1.75rem; }
.slip__step + .slip__step { margin-top: 2rem; padding-top: 2rem; border-top: 1px dashed var(--perf); }
.slip__name { font-family: var(--font-text); font-size: var(--s-lead); line-height: 1.2; font-weight: 600; margin-bottom: 0.6rem; }
.slip__name p.es { font-size: var(--s-body); font-weight: 400; margin-top: 0.1rem; }
.slip__step p.es { margin-top: 0.3rem; }
.slip__name--bar { background: var(--night); color: var(--paper); padding: 0.7rem 1rem; margin-inline: -1rem; --es: var(--muted); }

/* ---------- why: the letter and its stub ---------- */
.why { padding: calc(var(--section) + var(--tab-h)) var(--edge) 0; }
.letter { width: 100%; }
.letter__sheet {
  position: relative; background: var(--paper); color: var(--night);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem) clamp(3.5rem, 6vw, 5rem);
  clip-path: var(--cut-letter);
}
.letter__sheet .tab {
  position: absolute; bottom: 100%; left: 0; margin: 0; height: var(--tab-h);
  display: block; line-height: var(--tab-h); padding: 0 1.75rem; background: var(--paper);
  font-size: var(--s-body); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 100%, 0 100%);
}
.letter__cols { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.letter__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.letter__row h3.en { grid-column: 1; grid-row: 1; }
.letter__row h3.es { grid-column: 2; grid-row: 1; }
.letter__row p.en { grid-column: 1; grid-row: 2; }
.letter__row p.es { grid-column: 2; grid-row: 2; }
.letter__row--open { margin-bottom: 1rem; }
.letter__row--open p.en, .letter__row--open p.es { grid-row: 1; }
.letter__open { font-size: var(--s-lead); line-height: 1.3; }
.letter__row h3 { font-family: var(--font-text); font-size: var(--s-body); font-weight: 600; line-height: 1.4; }
.letter__row h3.es { font-weight: 400; }
.letter__open.es { font-size: var(--s-body); line-height: 1.45; }
.stub { margin-top: 0.75rem; }
.perf { display: none; }
.stub {
  background: var(--paper); color: var(--night);
  display: grid; grid-template-columns: 1fr auto; gap: var(--gutter) calc(var(--gutter) * 2); align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 5vw, 4.5rem);
}
.stub__title { font-family: var(--font-display); font-size: var(--s-lead); line-height: 1; letter-spacing: 0.01em; }
.stub__es { margin-bottom: 0.6rem; }
.stub .es + .en { margin-top: 0; }
.stub p.en + p.es { margin-top: 0.25rem; }

/* ---------- contact: the visit card on the town ---------- */
.contact {
  position: relative; margin-top: clamp(5rem, 9vw, 9rem); padding: clamp(6rem, 9vw, 9rem) var(--edge);
  background: var(--panel); color: var(--ink);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: stretch;
}
.contact__head { grid-column: 1 / -1; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.contact__head .tab { color: var(--link); }
.contact__card .visit { margin-top: 0; }
.contact__photo { grid-column: 1 / 8; position: relative; overflow: hidden; min-height: 28rem; background: var(--panel); }
.contact__photo img { display: block; width: 100%; height: 100%; min-height: 28rem; object-fit: cover; object-position: 50% 60%; transform-origin: 50% 40%; will-change: transform; }
.contact__card {
  grid-column: 8 / 13; position: relative; z-index: 1;
  background: var(--paper); color: var(--night); padding: clamp(2rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem) 0;
  display: flex; flex-direction: column;
}
.contact__card .btn--block { margin-top: auto; }
.contact__card .note { margin-bottom: 1.75rem; }
.visit { margin-top: 1.5rem; display: grid; gap: 0.6rem; }
.visit dt { font-weight: 600; }
.visit dt span, .hours span[lang] { color: var(--es-paper); font-weight: 400; }
.visit a, .visit__dir { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.visit__dir { display: inline-block; margin-top: 0.75rem; font-weight: 600; padding-block: 0.25rem; transition: color var(--t-hover) ease; }
.visit__dir span { color: var(--es-paper); font-weight: 400; }
.visit a:hover, .visit__dir:hover { color: #1F6FB0; }
.contact__card a:focus-visible { outline-color: var(--night); }
.hours { margin-top: 1.5rem; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours caption { text-align: left; font-weight: 600; padding-bottom: 0.4rem; }
.hours caption span { font-weight: 500; }
.hours th, .hours td { padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; font-weight: 400; }
.hours th { padding-left: 0; }
.hours td { text-align: right; white-space: nowrap; padding-right: 0; }
.hours tr.is-today { background: var(--lime); }
.hours tr.is-today span[lang] { color: var(--night); }
.hours tr.is-today th { padding-left: 0.6rem; }
.hours tr.is-today td { padding-right: 0.6rem; }
.note { margin-top: 1.25rem; }
.btn--block { display: block; width: auto; margin-inline: calc(-1 * clamp(2rem, 3vw, 3rem)); min-height: 3.5rem; }

/* ---------- cta: the reply card on a lime field ---------- */
.cta {
  position: relative; background: var(--lime); color: var(--night); overflow: hidden;
  padding: clamp(4.5rem, 8vw, 7.5rem) var(--edge);
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center;
}
.cta__aside { grid-column: 1 / 6; font-size: var(--s-lead); line-height: 1.3; }
.cta__aside .es { margin-top: 0.75rem; font-size: var(--s-body); }
.reply {
  grid-column: 6 / 13; background: var(--paper); text-align: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  rotate: 2deg;
}
.reply__title { font-family: var(--font-display); font-size: var(--s-head); line-height: 0.9; }
.reply__es { font-size: var(--s-lead); margin-top: 0.75rem; }
.btn--bar { display: block; width: 100%; margin-top: 2rem; min-height: 3.5rem; }

/* ---------- footer: the back of the card ---------- */
.foot { padding: clamp(6rem, 10vw, 10rem) var(--edge) 2rem; }
.foot__logo { width: min(36rem, 78vw); height: auto; margin: 0 auto clamp(3rem, 6vw, 5rem); }
/* the back of the card: address, links and stamp on top; the SMS terms small underneath, EN beside ES */
.back {
  width: 100%; background: var(--paper); color: var(--night);
  padding: clamp(3rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem) 1.75rem;
  clip-path: var(--cut-back);
  display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem);
}
.back__address { grid-row: 1; display: grid; grid-template-columns: 1fr 1fr auto; align-items: start; gap: 0.6rem var(--gutter); }
.back__address > p { grid-column: 1; }
.back__links { grid-column: 2; grid-row: 1 / span 3; }
.stamp { grid-column: 3; grid-row: 1 / span 3; }
.back__message { grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem var(--gutter); font-size: var(--s-small); line-height: 1.55; color: var(--es-paper); }
.back__message p { font-size: inherit; max-width: 32rem; }
.back__message .runin { color: var(--night); }
.stamp { width: 9rem; padding: 6px; background: var(--night); transition: scale var(--t-ui) var(--ease-out); }
.stamp:hover { scale: 1.05; }
.back__address a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.back__address a:hover { color: #1F6FB0; }
.back a:focus-visible { outline-color: var(--night); }
.back__links { display: grid; gap: 0.35rem; align-content: start; }
.back__links a { display: inline-block; padding-block: 0.2rem; }
.back__links span, .back__address span[lang] { color: var(--es-paper); }
.back__imprint { grid-row: 3; text-align: center; font-size: var(--s-small); }
.credits { width: 100%; margin: 1.5rem 0 0; font-size: var(--s-small); color: var(--muted); line-height: 1.45; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem var(--gutter); }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .sheet--menu { grid-column: 1 / 9; }
  .index__frame { grid-column: 9 / 13; }
  .front { grid-column: 1 / 9; }
  .plate { grid-column: 9 / 13; }
  .how__head { grid-column: 1 / 6; }
  .slip { grid-column: 6 / 13; }
  .reply { grid-column: 5 / 13; }
}

@media (max-width: 860px) {
  .hero__lede { grid-template-columns: 1fr; gap: 0.75rem; }
  .top { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
  .top__logo { grid-column: 1; grid-row: 1; }
  .top__call { grid-column: 2; grid-row: 1; text-align: right; }
  .top__nav { grid-column: 1 / -1; grid-row: 2; gap: 1.25rem; }
  .front, .plate { grid-column: 1 / -1; }
  .plate { aspect-ratio: 4 / 3; min-height: 0; }
  .sheet--menu { grid-column: 1 / -1; }
  .index__frame { grid-column: 1 / -1; grid-row: 1; transform: none !important; margin-bottom: 1.5rem; }
  .index__frame img { aspect-ratio: 16 / 10; }
  .sheet--menu { grid-row: 2; }
  .how { display: block; }
  .how__head { position: static; margin-bottom: 2.5rem; }
  .letter__row { grid-template-columns: 1fr; }
  .letter__row > * { grid-column: 1 !important; grid-row: auto !important; }
  .letter__row p.en { margin-top: 0.35rem; }
  .letter__row--open p.es { margin-top: 0.75rem; }
  .cta { display: flex; flex-direction: column; align-items: stretch; }
  .cta__aside { padding-bottom: 2.5rem; }
  .reply { width: 100%; }
  .contact { display: block; }
  .contact__photo { min-height: 0; aspect-ratio: 16 / 10; }
  .contact__card .btn--block { margin-top: 0; }
  .back__address { grid-template-columns: 1fr auto; }
  .back__links { grid-column: 1; grid-row: auto; margin-top: 0.5rem; }
  .stamp { grid-column: 2; grid-row: 1 / span 4; width: 6.5rem; }
}

/* ---------- phone ---------- */
@media (max-width: 600px) {
  :root { --tab-h: 2.25rem; --strip: 2rem; }
  .top { grid-template-columns: 1fr auto; row-gap: 0.25rem; }
  .top__logo { grid-column: 1; grid-row: 1; }
  .top__call { grid-column: 2; grid-row: 1; text-align: right; font-size: var(--s-small); }
  .top__nav { grid-column: 1 / -1; grid-row: 2; gap: 1.25rem; }
  .top__nav a { font-size: var(--s-small); }
  .hero__title { max-width: none; }
  .front__body { padding: 1.5rem var(--margin) 1.75rem; }
  .hero__btn { display: block; width: 100%; }
  .hero__row { margin-top: 2.5rem; }
  .menu__name .es { flex-basis: 100%; text-align: left; margin-left: 0; font-size: var(--s-body); }
  .lead { display: none; }
  .sheet--menu { margin-inline: calc(var(--margin) * -1 + 12px); clip-path: var(--cut-menu-sm); }
  .slip { clip-path: var(--cut-slip-sm); }
  .letter__sheet { clip-path: var(--cut-letter-sm); }
  .letter__sheet .tab { white-space: normal; height: auto; min-height: var(--tab-h); padding: 0.35rem 1.5rem 0.35rem 1rem; max-width: calc(100% - 2rem); line-height: 1.3; }
  .why { padding-top: calc(var(--section) + 3.5rem); }
  .stub { grid-template-columns: 1fr; }
  .stub .btn { width: 100%; }
  .contact__photo { aspect-ratio: 4 / 3; }
  .contact__photo img { min-height: 0; }
  .contact__card { padding: 1.75rem 1.25rem 0; }
  .btn--block { margin-inline: -1.25rem; }
  :root { --section: 6rem; }
  .hours th, .hours td { display: block; text-align: left; padding: 0.15rem 0; }
  .hours tr { display: block; padding: 0.4rem 0; }
  .hours tr.is-today { padding-inline: 0.6rem; }
  .hours tr.is-today th, .hours tr.is-today td { padding-inline: 0; }
  .cta { min-height: 0; }
  .reply { width: 94%; align-self: center; }
  .back { clip-path: var(--cut-back-sm); }
  .stamp { width: 5rem; }
  .back__message { grid-template-columns: 1fr; }
  .hero { padding-top: 0.75rem; }
  .hero__es { margin-top: 0.6rem; }
  .hero__lede { margin-top: 1rem; }
  .bar { padding-block: 0.4rem; }
  .credits { grid-template-columns: 1fr; }
}

/* ---------- motion (only when the script runs and motion is welcome) ---------- */
/* One pop-in for every component on the page. script.js marks them [data-pop] and adds .is-in once each
   enters the screen; siblings that enter together are staggered 70ms apart. Hover moves use the separate
   translate/scale properties so they never fight this transform. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-pop] { opacity: 0; transform: translateY(24px) scale(0.96); }
  .js [data-pop].is-in {
    opacity: 1; transform: none;
    transition: opacity 600ms var(--ease-out) var(--d, 0ms), transform 600ms var(--ease-out) var(--d, 0ms);
  }
  .js [data-pop="small"].is-in { transition-timing-function: var(--ease-out), cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; }
}

/* ---------- cut edges (generated: zigzags and scallops for the paper) ---------- */
:root {
  --cut-menu: polygon(0% 10px,2.083% 0px,4.167% 10px,6.25% 0px,8.333% 10px,10.417% 0px,12.5% 10px,14.583% 0px,16.667% 10px,18.75% 0px,20.833% 10px,22.917% 0px,25% 10px,27.083% 0px,29.167% 10px,31.25% 0px,33.333% 10px,35.417% 0px,37.5% 10px,39.583% 0px,41.667% 10px,43.75% 0px,45.833% 10px,47.917% 0px,50% 10px,52.083% 0px,54.167% 10px,56.25% 0px,58.333% 10px,60.417% 0px,62.5% 10px,64.583% 0px,66.667% 10px,68.75% 0px,70.833% 10px,72.917% 0px,75% 10px,77.083% 0px,79.167% 10px,81.25% 0px,83.333% 10px,85.417% 0px,87.5% 10px,89.583% 0px,91.667% 10px,93.75% 0px,95.833% 10px,97.917% 0px,100% 10px,100% calc(100% - 10px),97.917% calc(100% - 0px),95.833% calc(100% - 10px),93.75% calc(100% - 0px),91.667% calc(100% - 10px),89.583% calc(100% - 0px),87.5% calc(100% - 10px),85.417% calc(100% - 0px),83.333% calc(100% - 10px),81.25% calc(100% - 0px),79.167% calc(100% - 10px),77.083% calc(100% - 0px),75% calc(100% - 10px),72.917% calc(100% - 0px),70.833% calc(100% - 10px),68.75% calc(100% - 0px),66.667% calc(100% - 10px),64.583% calc(100% - 0px),62.5% calc(100% - 10px),60.417% calc(100% - 0px),58.333% calc(100% - 10px),56.25% calc(100% - 0px),54.167% calc(100% - 10px),52.083% calc(100% - 0px),50% calc(100% - 10px),47.917% calc(100% - 0px),45.833% calc(100% - 10px),43.75% calc(100% - 0px),41.667% calc(100% - 10px),39.583% calc(100% - 0px),37.5% calc(100% - 10px),35.417% calc(100% - 0px),33.333% calc(100% - 10px),31.25% calc(100% - 0px),29.167% calc(100% - 10px),27.083% calc(100% - 0px),25% calc(100% - 10px),22.917% calc(100% - 0px),20.833% calc(100% - 10px),18.75% calc(100% - 0px),16.667% calc(100% - 10px),14.583% calc(100% - 0px),12.5% calc(100% - 10px),10.417% calc(100% - 0px),8.333% calc(100% - 10px),6.25% calc(100% - 0px),4.167% calc(100% - 10px),2.083% calc(100% - 0px),0% calc(100% - 10px));
  --cut-menu-sm: polygon(0% 8px,4.167% 0px,8.333% 8px,12.5% 0px,16.667% 8px,20.833% 0px,25% 8px,29.167% 0px,33.333% 8px,37.5% 0px,41.667% 8px,45.833% 0px,50% 8px,54.167% 0px,58.333% 8px,62.5% 0px,66.667% 8px,70.833% 0px,75% 8px,79.167% 0px,83.333% 8px,87.5% 0px,91.667% 8px,95.833% 0px,100% 8px,100% calc(100% - 8px),95.833% calc(100% - 0px),91.667% calc(100% - 8px),87.5% calc(100% - 0px),83.333% calc(100% - 8px),79.167% calc(100% - 0px),75% calc(100% - 8px),70.833% calc(100% - 0px),66.667% calc(100% - 8px),62.5% calc(100% - 0px),58.333% calc(100% - 8px),54.167% calc(100% - 0px),50% calc(100% - 8px),45.833% calc(100% - 0px),41.667% calc(100% - 8px),37.5% calc(100% - 0px),33.333% calc(100% - 8px),29.167% calc(100% - 0px),25% calc(100% - 8px),20.833% calc(100% - 0px),16.667% calc(100% - 8px),12.5% calc(100% - 0px),8.333% calc(100% - 8px),4.167% calc(100% - 0px),0% calc(100% - 8px));
  --cut-slip: polygon(0% 0%,100% 0%,100% calc(100% - 10px),97.222% calc(100% - 0px),94.444% calc(100% - 10px),91.667% calc(100% - 0px),88.889% calc(100% - 10px),86.111% calc(100% - 0px),83.333% calc(100% - 10px),80.556% calc(100% - 0px),77.778% calc(100% - 10px),75% calc(100% - 0px),72.222% calc(100% - 10px),69.444% calc(100% - 0px),66.667% calc(100% - 10px),63.889% calc(100% - 0px),61.111% calc(100% - 10px),58.333% calc(100% - 0px),55.556% calc(100% - 10px),52.778% calc(100% - 0px),50% calc(100% - 10px),47.222% calc(100% - 0px),44.444% calc(100% - 10px),41.667% calc(100% - 0px),38.889% calc(100% - 10px),36.111% calc(100% - 0px),33.333% calc(100% - 10px),30.556% calc(100% - 0px),27.778% calc(100% - 10px),25% calc(100% - 0px),22.222% calc(100% - 10px),19.444% calc(100% - 0px),16.667% calc(100% - 10px),13.889% calc(100% - 0px),11.111% calc(100% - 10px),8.333% calc(100% - 0px),5.556% calc(100% - 10px),2.778% calc(100% - 0px),0% calc(100% - 10px));
  --cut-slip-sm: polygon(0% 0%,100% 0%,100% calc(100% - 8px),95% calc(100% - 0px),90% calc(100% - 8px),85% calc(100% - 0px),80% calc(100% - 8px),75% calc(100% - 0px),70% calc(100% - 8px),65% calc(100% - 0px),60% calc(100% - 8px),55% calc(100% - 0px),50% calc(100% - 8px),45% calc(100% - 0px),40% calc(100% - 8px),35% calc(100% - 0px),30% calc(100% - 8px),25% calc(100% - 0px),20% calc(100% - 8px),15% calc(100% - 0px),10% calc(100% - 8px),5% calc(100% - 0px),0% calc(100% - 8px));
  --cut-letter: polygon(0% -90px,100% -90px,100% calc(100% - 9px),99.762% calc(100% - 5.556px),99.085% calc(100% - 2.636px),98.071% calc(100% - 0.685px),96.875% calc(100% - 0px),95.679% calc(100% - 0.685px),94.665% calc(100% - 2.636px),93.988% calc(100% - 5.556px),93.75% calc(100% - 9px),93.512% calc(100% - 5.556px),92.835% calc(100% - 2.636px),91.821% calc(100% - 0.685px),90.625% calc(100% - 0px),89.429% calc(100% - 0.685px),88.415% calc(100% - 2.636px),87.738% calc(100% - 5.556px),87.5% calc(100% - 9px),87.262% calc(100% - 5.556px),86.585% calc(100% - 2.636px),85.571% calc(100% - 0.685px),84.375% calc(100% - 0px),83.179% calc(100% - 0.685px),82.165% calc(100% - 2.636px),81.488% calc(100% - 5.556px),81.25% calc(100% - 9px),81.012% calc(100% - 5.556px),80.335% calc(100% - 2.636px),79.321% calc(100% - 0.685px),78.125% calc(100% - 0px),76.929% calc(100% - 0.685px),75.915% calc(100% - 2.636px),75.238% calc(100% - 5.556px),75% calc(100% - 9px),74.762% calc(100% - 5.556px),74.085% calc(100% - 2.636px),73.071% calc(100% - 0.685px),71.875% calc(100% - 0px),70.679% calc(100% - 0.685px),69.665% calc(100% - 2.636px),68.988% calc(100% - 5.556px),68.75% calc(100% - 9px),68.512% calc(100% - 5.556px),67.835% calc(100% - 2.636px),66.821% calc(100% - 0.685px),65.625% calc(100% - 0px),64.429% calc(100% - 0.685px),63.415% calc(100% - 2.636px),62.738% calc(100% - 5.556px),62.5% calc(100% - 9px),62.262% calc(100% - 5.556px),61.585% calc(100% - 2.636px),60.571% calc(100% - 0.685px),59.375% calc(100% - 0px),58.179% calc(100% - 0.685px),57.165% calc(100% - 2.636px),56.488% calc(100% - 5.556px),56.25% calc(100% - 9px),56.012% calc(100% - 5.556px),55.335% calc(100% - 2.636px),54.321% calc(100% - 0.685px),53.125% calc(100% - 0px),51.929% calc(100% - 0.685px),50.915% calc(100% - 2.636px),50.238% calc(100% - 5.556px),50% calc(100% - 9px),49.762% calc(100% - 5.556px),49.085% calc(100% - 2.636px),48.071% calc(100% - 0.685px),46.875% calc(100% - 0px),45.679% calc(100% - 0.685px),44.665% calc(100% - 2.636px),43.988% calc(100% - 5.556px),43.75% calc(100% - 9px),43.512% calc(100% - 5.556px),42.835% calc(100% - 2.636px),41.821% calc(100% - 0.685px),40.625% calc(100% - 0px),39.429% calc(100% - 0.685px),38.415% calc(100% - 2.636px),37.738% calc(100% - 5.556px),37.5% calc(100% - 9px),37.262% calc(100% - 5.556px),36.585% calc(100% - 2.636px),35.571% calc(100% - 0.685px),34.375% calc(100% - 0px),33.179% calc(100% - 0.685px),32.165% calc(100% - 2.636px),31.488% calc(100% - 5.556px),31.25% calc(100% - 9px),31.012% calc(100% - 5.556px),30.335% calc(100% - 2.636px),29.321% calc(100% - 0.685px),28.125% calc(100% - 0px),26.929% calc(100% - 0.685px),25.915% calc(100% - 2.636px),25.238% calc(100% - 5.556px),25% calc(100% - 9px),24.762% calc(100% - 5.556px),24.085% calc(100% - 2.636px),23.071% calc(100% - 0.685px),21.875% calc(100% - 0px),20.679% calc(100% - 0.685px),19.665% calc(100% - 2.636px),18.988% calc(100% - 5.556px),18.75% calc(100% - 9px),18.512% calc(100% - 5.556px),17.835% calc(100% - 2.636px),16.821% calc(100% - 0.685px),15.625% calc(100% - 0px),14.429% calc(100% - 0.685px),13.415% calc(100% - 2.636px),12.738% calc(100% - 5.556px),12.5% calc(100% - 9px),12.262% calc(100% - 5.556px),11.585% calc(100% - 2.636px),10.571% calc(100% - 0.685px),9.375% calc(100% - 0px),8.179% calc(100% - 0.685px),7.165% calc(100% - 2.636px),6.488% calc(100% - 5.556px),6.25% calc(100% - 9px),6.012% calc(100% - 5.556px),5.335% calc(100% - 2.636px),4.321% calc(100% - 0.685px),3.125% calc(100% - 0px),1.929% calc(100% - 0.685px),0.915% calc(100% - 2.636px),0.238% calc(100% - 5.556px),0% calc(100% - 9px));
  --cut-letter-sm: polygon(0% -90px,100% -90px,100% calc(100% - 8px),99.524% calc(100% - 4.939px),98.169% calc(100% - 2.343px),96.142% calc(100% - 0.609px),93.75% calc(100% - 0px),91.358% calc(100% - 0.609px),89.331% calc(100% - 2.343px),87.976% calc(100% - 4.939px),87.5% calc(100% - 8px),87.024% calc(100% - 4.939px),85.669% calc(100% - 2.343px),83.642% calc(100% - 0.609px),81.25% calc(100% - 0px),78.858% calc(100% - 0.609px),76.831% calc(100% - 2.343px),75.476% calc(100% - 4.939px),75% calc(100% - 8px),74.524% calc(100% - 4.939px),73.169% calc(100% - 2.343px),71.142% calc(100% - 0.609px),68.75% calc(100% - 0px),66.358% calc(100% - 0.609px),64.331% calc(100% - 2.343px),62.976% calc(100% - 4.939px),62.5% calc(100% - 8px),62.024% calc(100% - 4.939px),60.669% calc(100% - 2.343px),58.642% calc(100% - 0.609px),56.25% calc(100% - 0px),53.858% calc(100% - 0.609px),51.831% calc(100% - 2.343px),50.476% calc(100% - 4.939px),50% calc(100% - 8px),49.524% calc(100% - 4.939px),48.169% calc(100% - 2.343px),46.142% calc(100% - 0.609px),43.75% calc(100% - 0px),41.358% calc(100% - 0.609px),39.331% calc(100% - 2.343px),37.976% calc(100% - 4.939px),37.5% calc(100% - 8px),37.024% calc(100% - 4.939px),35.669% calc(100% - 2.343px),33.642% calc(100% - 0.609px),31.25% calc(100% - 0px),28.858% calc(100% - 0.609px),26.831% calc(100% - 2.343px),25.476% calc(100% - 4.939px),25% calc(100% - 8px),24.524% calc(100% - 4.939px),23.169% calc(100% - 2.343px),21.142% calc(100% - 0.609px),18.75% calc(100% - 0px),16.358% calc(100% - 0.609px),14.331% calc(100% - 2.343px),12.976% calc(100% - 4.939px),12.5% calc(100% - 8px),12.024% calc(100% - 4.939px),10.669% calc(100% - 2.343px),8.642% calc(100% - 0.609px),6.25% calc(100% - 0px),3.858% calc(100% - 0.609px),1.831% calc(100% - 2.343px),0.476% calc(100% - 4.939px),0% calc(100% - 8px));
  --cut-back: polygon(0% 14px,0.317% 8.642px,1.22% 4.101px,2.572% 1.066px,4.167% 0px,5.761% 1.066px,7.113% 4.101px,8.016% 8.642px,8.333% 14px,8.651% 8.642px,9.554% 4.101px,10.905% 1.066px,12.5% 0px,14.095% 1.066px,15.446% 4.101px,16.349% 8.642px,16.667% 14px,16.984% 8.642px,17.887% 4.101px,19.239% 1.066px,20.833% 0px,22.428% 1.066px,23.78% 4.101px,24.683% 8.642px,25% 14px,25.317% 8.642px,26.22% 4.101px,27.572% 1.066px,29.167% 0px,30.761% 1.066px,32.113% 4.101px,33.016% 8.642px,33.333% 14px,33.651% 8.642px,34.554% 4.101px,35.905% 1.066px,37.5% 0px,39.095% 1.066px,40.446% 4.101px,41.349% 8.642px,41.667% 14px,41.984% 8.642px,42.887% 4.101px,44.239% 1.066px,45.833% 0px,47.428% 1.066px,48.78% 4.101px,49.683% 8.642px,50% 14px,50.317% 8.642px,51.22% 4.101px,52.572% 1.066px,54.167% 0px,55.761% 1.066px,57.113% 4.101px,58.016% 8.642px,58.333% 14px,58.651% 8.642px,59.554% 4.101px,60.905% 1.066px,62.5% 0px,64.095% 1.066px,65.446% 4.101px,66.349% 8.642px,66.667% 14px,66.984% 8.642px,67.887% 4.101px,69.239% 1.066px,70.833% 0px,72.428% 1.066px,73.78% 4.101px,74.683% 8.642px,75% 14px,75.317% 8.642px,76.22% 4.101px,77.572% 1.066px,79.167% 0px,80.761% 1.066px,82.113% 4.101px,83.016% 8.642px,83.333% 14px,83.651% 8.642px,84.554% 4.101px,85.905% 1.066px,87.5% 0px,89.095% 1.066px,90.446% 4.101px,91.349% 8.642px,91.667% 14px,91.984% 8.642px,92.887% 4.101px,94.239% 1.066px,95.833% 0px,97.428% 1.066px,98.78% 4.101px,99.683% 8.642px,100% 14px,100% 100%,0% 100%);
  --cut-back-sm: polygon(0% 12px,0.634% 7.408px,2.441% 3.515px,5.144% 0.913px,8.333% 0px,11.522% 0.913px,14.226% 3.515px,16.032% 7.408px,16.667% 12px,17.301% 7.408px,19.107% 3.515px,21.811% 0.913px,25% 0px,28.189% 0.913px,30.893% 3.515px,32.699% 7.408px,33.333% 12px,33.968% 7.408px,35.774% 3.515px,38.478% 0.913px,41.667% 0px,44.856% 0.913px,47.559% 3.515px,49.366% 7.408px,50% 12px,50.634% 7.408px,52.441% 3.515px,55.144% 0.913px,58.333% 0px,61.522% 0.913px,64.226% 3.515px,66.032% 7.408px,66.667% 12px,67.301% 7.408px,69.107% 3.515px,71.811% 0.913px,75% 0px,78.189% 0.913px,80.893% 3.515px,82.699% 7.408px,83.333% 12px,83.968% 7.408px,85.774% 3.515px,88.478% 0.913px,91.667% 0px,94.856% 0.913px,97.559% 3.515px,99.366% 7.408px,100% 12px,100% 100%,0% 100%);
}