/* ============================================================
   Colores de Esperanza
   Design system: "Casa, not center"
   Built by LeeGStudios.com
   Tokens, ratios and rationale are documented in DESIGN.md
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Ground. Warm paper, tinted toward the yellow ribbon. Never #fff / #000. */
  --paper:        oklch(97.7% 0.0114 84.6);   /* #FBF7EF */
  --paper-deep:   oklch(94.8% 0.0188 83.1);   /* #F4EDE0 */
  --paper-edge:   oklch(87.5% 0.0215 82.0);   /* rules, hairlines */
  --ink:          oklch(24.2% 0.0097 67.3);   /* #231F1B  15.31:1 on paper */
  --ink-soft:     oklch(39.0% 0.0155 75.2);   /* #4A443C   9.00:1 on paper */

  /* Brand exact, sampled from the letterhead. Fills and display type only. */
  --green:        oklch(58.5% 0.1557 149.7);  /* #159445 */
  --magenta:      oklch(61.5% 0.1997 352.9);  /* #D8418F */
  --yellow:       oklch(88.9% 0.1823 100.5);  /* #F6DC15 */
  --gold:         oklch(83.9% 0.1646  92.5);  /* #F0C624 */
  --orange:       oklch(76.5% 0.1644  64.6);  /* #F99920 */
  --sky:          oklch(71.9% 0.1275 233.2);  /* #3EB1E7 */
  --indigo:       oklch(45.9% 0.1331 269.6);  /* #3B50A1   6.90:1 on paper */
  --purple:       oklch(43.9% 0.1590 319.3);  /* #762B88   7.95:1 on paper */

  /* Text-safe variants re-derived for THIS paper ground.
     BRAND.md's values were computed against white and drop to 4.24 here. */
  --green-text:     oklch(51.7% 0.1376 149.7); /* #107D39  4.74 paper / 4.50 deep */
  --magenta-text:   oklch(55.5% 0.1802 352.9); /* #BC377C  4.76 paper / 4.52 deep */
  --sky-text:       oklch(52.5% 0.0931 233.2); /* #257397  4.77 paper / 4.53 deep */
  --green-strong:   oklch(43.5% 0.1158 149.7); /* #0A622B  7.05 paper */
  --magenta-strong: oklch(46.9% 0.1523 352.9); /* #962A62  7.01 paper */

  /* Type */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body:    "Literata", Georgia, "Times New Roman", serif;

  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem);
  --step-2:  clamp(1.6rem,  1.42rem + 0.9vw,  2.1rem);
  --step-3:  clamp(2.1rem,  1.74rem + 1.8vw,  3rem);
  --step-4:  clamp(2.7rem,  2.16rem + 2.7vw,  4.2rem);

  /* Space: 4pt base, named by relationship */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --shell:   1180px;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 140ms;
  --dur-mid:  240ms;

  /* The signature: quilt binding. Three stacked bands, stitched across. */
  --tape-bands: linear-gradient(to bottom,
      var(--yellow)  0 33.34%,
      var(--sky)     33.34% 66.67%,
      var(--magenta) 66.67% 100%);
  --tape-thread: var(--paper);
  --tape-stitch: repeating-linear-gradient(90deg,
      var(--tape-thread) 0 2px, transparent 2px 9px);
  --tape-stitch-wide: repeating-linear-gradient(90deg,
      var(--tape-thread) 0 2px, transparent 2px 15px);
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }

a {
  color: var(--indigo);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--magenta-strong);
  outline-offset: 3px;
}

/* On the dark grounds the magenta ring is 2.19:1 and fails the WCAG 2.2
   non-text 3:1 floor. Gold on ink is 9.98:1. The footer is on every page
   and holds eight links, so this is the most-tabbed region on the site. */
.band--ink :focus-visible,
.foot :focus-visible { outline-color: var(--gold); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-md); top: -100px;
  z-index: 50;
  background: var(--green-strong); color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-md); }

/* ---------- 3. The woven tape ---------- */

.tape {
  height: 12px;
  background-image: var(--tape-stitch), var(--tape-bands);
  border: 0;
  margin: 0;
}
.tape--page { height: 14px; }

/* Short segment used as a section marker */
.tape-mark {
  display: block;
  width: 72px; height: 15px;
  background-image: var(--tape-stitch-wide), var(--tape-bands);
  margin-bottom: var(--space-md);
}

/* ---------- 4. Shell ---------- */

.shell {
  width: min(var(--shell), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.prose { max-width: var(--measure); }

.band { padding-block: clamp(var(--space-2xl), 7vw, var(--space-4xl)); }
.band--tight { padding-block: clamp(var(--space-xl), 5vw, var(--space-3xl)); }
.band--deep  { background: var(--paper-deep); --tape-thread: var(--paper-deep); }
.band--ink   { background: var(--ink); color: var(--paper); --tape-thread: var(--ink); }

/* An interior page head sits directly on top of its first content band,
   otherwise the two paddings stack into a 121px hole. */
main > .band:first-child { padding-bottom: 0; }

.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink a { color: var(--gold); }
.band--ink p { line-height: 1.72; letter-spacing: 0.006em; }

/* ---------- 5. Masthead ---------- */

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}

.lockup {
  display: flex; align-items: center; gap: var(--space-sm);
  text-decoration: none; color: inherit;
}
.lockup__mark { width: 54px; height: 54px; flex: none; }
.lockup__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--green-strong);
}
.lockup__sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta-strong);
  margin-top: 3px;
}

/* Language switch */
.langswitch {
  display: inline-flex;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.langswitch__btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.langswitch__btn + .langswitch__btn { border-left: 2px solid var(--ink); }
.langswitch__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) {
  .langswitch__btn[aria-pressed="false"]:hover { background: var(--paper-deep); }
}

/* Nav: flat, all eight pages visible, wraps */
.nav { border-top: 1px solid var(--paper-edge); }
.nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
  padding-block: var(--space-2xs);
}
.nav__link {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-sm) 0;
  border-bottom: 3px solid transparent;
  transition: color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
@media (hover: hover) {
  .nav__link:hover { color: var(--ink); border-bottom-color: var(--paper-edge); }
}
.nav__link[aria-current="page"] {
  color: var(--green-strong);
  border-bottom-color: var(--green);
}

/* Site-wide test notice. The content below it is still placeholder, so the
   visitor is told before the masthead, not after the fold.
   Temporary: remove this block, and the .testbar markup in every page,
   before launch. */
.testbar {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-sm);
}
.testbar p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  line-height: 1.45;
}
.testbar__tag {
  flex: none;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 3px var(--space-xs);
}

/* ---------- 6. Type helpers ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta-strong);
  margin: 0;
}
.band--ink .eyebrow { color: var(--gold); }

.display { font-size: var(--step-4); }
.h2 { font-size: var(--step-3); }
.h3 { font-size: var(--step-2); }
.h4 { font-size: var(--step-1); }

.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.band--ink .lead { color: oklch(86% 0.014 80); }

.fine { font-size: var(--step--1); color: var(--ink-soft); }
.band--ink .fine { color: oklch(80% 0.016 80); }

.stack > * + *    { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

/* ---------- 7. Fact block: the most important component on the site ---------- */

.facts { font-variant-numeric: tabular-nums; }
.facts__row {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--paper-edge);
  align-items: baseline;
}
.facts__row:first-child { border-top: 1px solid var(--paper-edge); }
.facts__key {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.facts__val { margin: 0; }
.facts__val a { color: var(--green-strong); font-weight: 600; }
.band--ink .facts__row { border-color: oklch(36% 0.012 70); }
.band--ink .facts__key { color: oklch(78% 0.02 82); }
.band--ink .facts__val a { color: var(--gold); }

/* ---------- 8. Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out-quart),
              background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.btn--primary   { background: var(--green-strong); color: var(--paper); }
.btn--secondary { background: transparent; color: var(--magenta-strong); border-color: var(--magenta-strong); }
.btn--onink     { background: var(--gold); color: var(--ink); }

/* Buttons keep their own colour inside the dark bands. Without this,
   `.band--ink a` wins on specificity and paints gold text on a gold button. */
.band--ink a.btn--onink,   .foot a.btn--onink     { color: var(--ink); }
.band--ink a.btn--primary, .foot a.btn--primary   { color: var(--paper); }
.band--ink a.btn--secondary                       { color: var(--gold); border-color: var(--gold); }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--secondary:hover { background: var(--magenta-strong); color: var(--paper); }
}
.btn:active { transform: translateY(0); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- 9. Photo with binding ---------- */

.photo { margin: 0; }
.photo__tape {
  height: 12px;
  background-image: var(--tape-stitch), var(--tape-bands);
}
.photo img { width: 100%; }

/* Stand-in for a photograph nobody has taken yet. It holds the same aspect
   ratio as the picture that will replace it, so nothing reflows on the day
   the real one lands. Deliberately untranslated: this is a production
   marker, not copy a parent is ever meant to read. */
.sample {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--paper-edge);
  border-top: 0;
  background-color: var(--paper-deep);
  background-image: repeating-linear-gradient(45deg,
      transparent 0 14px, oklch(87.5% 0.0215 82 / 0.55) 14px 16px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: 0.24em;
  text-indent: 0.12em;          /* half the trailing letter-space, to re-centre */
  color: var(--ink-soft);
  width: 100%;                  /* the <img> used to size the figure; now this does */
}

.sample--square { aspect-ratio: 1 / 1; }

/* ---------- Quoted from the provider's own earlier website ----------
   coloresdesperanza.com, the one-"e" domain printed on the letterhead,
   is dead, and the Wayback Machine holds exactly one usable capture of it:
   28 December 2021. That capture is the only surviving record of the
   provider's own words about this home. Every one of those passages was
   already cut short by the old WordPress theme's excerpt length, so each is
   quoted verbatim, ellipsis and all. What is here is hers. What is missing
   is missing, and no one on this end gets to finish her sentences. */
.quote {
  margin: 0;
  max-width: var(--measure);
  border-left: 4px solid var(--green);
  padding-left: var(--space-md);
}

.quote p {
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.6;
}

.quote__src {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.band--ink .quote      { border-left-color: var(--gold); }
.band--ink .quote__src { color: oklch(80% 0.016 80); }

/* On the ink band the deep-paper fill disappears; give it its own ground. */
.band--ink .sample {
  background-color: transparent;
  background-image: repeating-linear-gradient(45deg,
      transparent 0 14px, oklch(40% 0.012 70) 14px 16px);
  border-color: var(--gold);
  color: oklch(84% 0.016 80);
}
.photo figcaption {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: var(--space-xs);
}

/* ---------- 10. Hero ---------- */

.hero { padding-block: clamp(var(--space-xl), 5vw, var(--space-3xl)); }
.hero__grid {
  display: grid;
  gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
  align-items: start;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero h1 { font-size: var(--step-4); }
.hero__accent { display: block; color: var(--green-strong); }

/* ---------- 11. Section heading ---------- */

.sechead { margin-bottom: var(--space-xl); }
.sechead .lead { margin-top: var(--space-sm); max-width: var(--measure); }

/* ---------- 12. Route list (deliberately not a card grid) ---------- */

.routes { list-style: none; }
.routes__item { border-bottom: 1px solid var(--paper-edge); }
.routes__item:first-child { border-top: 1px solid var(--paper-edge); }
.routes__link {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-xs) var(--space-md);
  align-items: baseline;
  padding: var(--space-lg) var(--space-sm) var(--space-lg) 0;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
@media (min-width: 40rem) {
  .routes__link { grid-template-columns: 2.4rem 1fr auto; }
}
.routes__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--magenta);
  font-variant-numeric: tabular-nums;
}
.routes__body { display: block; }
.routes__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.routes__desc {
  display: block;
  margin-top: var(--space-2xs);
  color: var(--ink-soft);
}
.routes__go {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--green-strong);
  white-space: nowrap;
  grid-column: 2;
}
@media (min-width: 40rem) {
  .routes__go { grid-column: 3; }
}
@media (hover: hover) {
  .routes__link:hover { background: var(--paper-deep); }
  .routes__link:hover .routes__go { text-decoration: underline; text-decoration-thickness: 2px; }
}

/* ---------- 13. Split: photo beside text ---------- */

.split {
  display: grid;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
}
@media (min-width: 54rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}

/* ---------- 14. Seal (the licence stamp) ---------- */

.seal {
  display: inline-block;
  border: 2px dashed var(--purple);
  padding: var(--space-md) var(--space-lg);
  color: var(--purple);
  font-family: var(--font-display);
  max-width: 100%;
}
.seal__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.seal__num {
  display: block;
  font-size: var(--step-2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2xs);
  line-height: 1.1;
}

/* ---------- 15. Tables ---------- */

.tablewrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
/* The table is an inset object: every cell keeps the same left padding so the
   dark header label and the times below it sit on one optical line. */
caption {
  text-align: left;
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: 0 0 var(--space-sm) var(--space-md);
}
th, td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--paper-edge);
  vertical-align: top;
}
thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border-bottom: 0;
  padding-left: var(--space-md);
}
tbody tr:nth-child(even) { background: var(--paper-deep); }
tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
.t-time { color: var(--green-strong); }

/* The menu table collapses to per-day blocks on narrow screens */
@media (max-width: 47.99rem) {
  .table--stack caption { padding-left: 0; }
  .table--stack thead { display: none; }
  .table--stack tr {
    display: block;
    border-bottom: 2px solid var(--ink);
    padding-block: var(--space-sm);
  }
  .table--stack tbody tr:nth-child(even) { background: transparent; }
  .table--stack th, .table--stack td { display: block; border: 0; padding: var(--space-2xs) 0; }
  .table--stack tbody th { font-size: var(--step-1); padding-bottom: var(--space-xs); }
  .table--stack td::before {
    content: attr(data-label-en);
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  html[lang="es"] .table--stack td::before { content: attr(data-label-es); }
}

/* ---------- 16. Download list ---------- */

.downloads { list-style: none; }
.downloads__item { border-bottom: 1px solid var(--paper-edge); }
.downloads__item:first-child { border-top: 1px solid var(--paper-edge); }
.downloads__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-md);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}
.downloads__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--indigo);
  flex: 1 1 14rem;
  line-height: 1.2;
}
.downloads__meta {
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.downloads__pdf {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--paper);
  background: var(--magenta-strong);
  padding: 3px var(--space-xs);
}
@media (hover: hover) {
  .downloads__link:hover .downloads__name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}

/* ---------- 17. Gallery ---------- */

.gallery {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

/* ---------- 18. Policy list ---------- */

.policy { border-top: 1px solid var(--paper-edge); }
.policy__row { border-bottom: 1px solid var(--paper-edge); padding-block: var(--space-lg); }
.policy__term {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}
.policy__def { color: var(--ink-soft); max-width: var(--measure); }

/* ---------- 19. Form ---------- */

.form { max-width: 34rem; }
.field { display: block; margin-bottom: var(--space-lg); }
.field__label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-xs);
}
.field__req { color: var(--magenta-strong); }
.field input, .field textarea, .field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper-deep);
  border: 2px solid var(--paper-edge);
  padding: var(--space-sm) var(--space-md);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--green-strong); }
.field__error {
  display: none;
  margin-top: var(--space-xs);
  font-size: var(--step--1);
  color: var(--magenta-strong);
  font-weight: 600;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: var(--magenta-strong); }
.field[data-invalid="true"] .field__error { display: block; }

.formresult {
  display: none;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 2px solid var(--green-strong);
  background: var(--paper-deep);
}
.formresult[data-shown="true"] { display: block; }
.formresult__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--green-strong);
  margin-bottom: var(--space-2xs);
}

/* ---------- 20. TODO marker ----------

   DO NOT "delete these rules" to hide the markers. The class only draws the
   dashed box and the label; the sentence inside is a real <p>. Delete the
   rules and "These age ranges are a guess" renders as ordinary body copy on
   a childcare site.

   To hide them for a client preview, uncomment the block below.
   Before the site actually goes live, delete the <p class="todo"> elements
   themselves from the HTML. There are 27 of them across the eight pages;
   `grep -c 'class="todo"' *.html` counts what is left.
*/

/*
.todo { display: none !important; }
*/

.todo {
  display: block;
  border: 2px dashed var(--purple);
  background: var(--paper-deep);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.todo::before {
  content: "TODO: CLIENTE";
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--purple);
  margin-bottom: var(--space-2xs);
}
.band--ink .todo { background: transparent; color: oklch(84% 0.016 80); border-color: var(--gold); }
.band--ink .todo::before { color: var(--gold); }

/* ---------- 21. Footer ---------- */

.foot { background: var(--ink); color: var(--paper); }
.foot__grid {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-3xl) var(--space-xl);
}
@media (min-width: 54rem) {
  .foot__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.foot h2 { font-size: var(--step-2); }
.foot a { color: var(--gold); }

/* The lockup carries the name here, so the <h2> beside it is visually hidden.
   The PNG is keyed transparent — including the counters of the letterforms —
   so it sits on the ink ground without a box. */
.foot__logo {
  display: block;
  width: min(280px, 62%);
  height: auto;
  margin-bottom: var(--space-lg);
}
.foot__links { list-style: none; display: grid; gap: var(--space-xs); }
.foot__links a {
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
}
.foot__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.foot__base {
  border-top: 1px solid oklch(36% 0.012 70);
  padding-block: var(--space-lg);
  padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  font-size: var(--step--1);
  color: oklch(80% 0.016 80);
}
.foot__base a { color: var(--gold); }

/* ---------- 22. Motion ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.rise {
  animation: rise 520ms var(--ease-out-quart) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover { transform: none; }
}

/* ---------- 23. Print ---------- */

@media print {
  .nav, .langswitch, .skip-link, .tape, .tape-mark { display: none; }
  body { background: #fff; color: #000; }
  .band--ink, .foot, .testbar { background: #fff; color: #000; }
  /* The tag loses its gold ground on paper, so it needs a rule to stay a tag. */
  .testbar { border-bottom: 2px solid #000; }
  .testbar__tag { background: #fff; border: 1px solid #000; }
  /* `.foot a` is gold and outranks `.foot`, so the printed phone number and
     address would come out near-invisible on white. */
  .band--ink a, .foot a, .foot__links a, .band--ink .eyebrow { color: #000; }
}