/* ==========================================================================
   Patasol (fictional brand, demo). Slug: huella-petshop
   Sunny and playful pet shop: cream page, full-bleed teal and sun-yellow bands with
   scalloped edges, a centered hero with floating stickers and a drawn "shelf" of pets,
   leaf-shaped tiles (two big corners, two small), fully round pill buttons that turn
   teal on hover, a staircase step list and a hours board.
   Yellow and coral are shape colours; text and buttons use darker "ink" variants.
   Fonts: Lilita One 400 (chunky display) + Jost 400/500 (body, declared in base.css).
   ========================================================================== */

@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lilita-one-latin-400-normal.woff2") format("woff2");
}
/* Metric-matched fallback (Arial Bold / Liberation Sans Bold: both are the heavy cut, like Lilita).
   size-adjust = frequency-weighted advance of Lilita One / Arial Bold on Spanish sample text
   (0.4156 / 0.4781 = 86.9%); vertical overrides = hhea metrics (923 / 220 per 1000) / size-adjust. */
@font-face {
  font-family: "Lilita Fallback";
  font-weight: 400;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Helvetica Bold");
  size-adjust: 86.9%;
  ascent-override: 106.2%;
  descent-override: 25.3%;
  line-gap-override: 0%;
}

:root {
  /* Brand palette (as briefed) */
  --patasol-sun: #f5b83d;
  --patasol-teal: #0f5257;
  --patasol-cream: #fff6e5;
  --patasol-coral: #f2694b;

  /* AA-adjusted shades. Sun on cream is 1.66:1 and coral on cream is 2.84:1, and white on coral is
     3.0:1, so sun and coral stay as fills/shapes and these inks carry text and buttons. */
  --patasol-coral-ink: #b83e22;     /* coral text/button fill: 5.22:1 on cream, white on it 5.60:1 */
  --patasol-teal-deep: #0a3a3e;     /* footer, eyebrow chips, strong text: cream 11.59:1, sun 7.00:1 */
  --patasol-teal-soft: #3e6b6e;     /* muted text: 5.54:1 on cream, 5.94:1 on white */
  --patasol-mist: #c9e3e0;          /* muted text on teal: 6.57:1; on teal-deep 9.21:1 */
  --patasol-sand: #ffe9b8;          /* pale sun tile: teal text 7.44:1 */
  --patasol-peach: #ffd2c6;         /* pale coral tile: teal text 6.46:1 */
  --patasol-field: #5b7f82;         /* form control borders: 4.37:1 on white (UI >= 3:1) */

  --color-bg: var(--patasol-cream);
  --color-surface: var(--patasol-sand);
  --color-text: var(--patasol-teal);              /* 8.27:1 on cream */
  --color-text-muted: var(--patasol-teal-soft);
  --color-border: #e9d9b6;
  --color-border-strong: var(--patasol-field);
  --color-accent: var(--patasol-coral-ink);       /* buttons: white on it 5.60:1 */
  --color-accent-ink: var(--patasol-coral-ink);
  --color-on-accent: #ffffff;

  --color-dark-bg: var(--patasol-teal);
  --color-dark-surface: var(--patasol-teal-deep);
  --color-dark-text: var(--patasol-cream);
  --color-dark-muted: var(--patasol-mist);
  --color-dark-border: #2a6e72;

  --color-error: #9b2c23;                         /* 7.56:1 on white */
  --color-success: #1f6b42;                       /* 6.48:1 on white */

  --font-display: "Lilita One", "Lilita Fallback", "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif;
  --font-body: "Jost", "Jost Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --text-base: 1.125rem;
  --leading-normal: 1.55;

  --leaf-a: 3rem 1rem 3rem 1rem;
  --leaf-b: 1rem 3rem 1rem 3rem;

  --section-space: clamp(3rem, 2rem + 3.5vw, 5rem);
  --hero-space: 0px;
  --hero-bg: var(--patasol-teal);
  --header-bg: var(--patasol-cream);
  --header-border: transparent;
  --button-font: var(--font-display);
  --button-size: 1.125rem;
  --button-weight: 400;
  --button-tracking: 0.01em;
  --button-transform: none;
  --button-radius: 999px;
  --button-padding: 0.6rem 1.625rem;
  --card-radius: 2rem;
  --footer-bg: var(--patasol-teal-deep);
  --footer-text: var(--patasol-mist);
  --footer-border: var(--patasol-teal-deep);
  --field-radius: 1.25rem;

  /* Button palette per context (light page by default) */
  --btn-bg: var(--patasol-coral-ink);
  --btn-fg: #ffffff;
  --btn-hover-bg: var(--patasol-teal);
  --btn-hover-fg: var(--patasol-cream);
  --ghost-fg: var(--patasol-teal);
  --ghost-hover-bg: var(--patasol-teal);
  --ghost-hover-fg: var(--patasol-cream);
  --eyebrow-bg: var(--patasol-sun);
  --eyebrow-fg: var(--patasol-teal);       /* 4.99:1 */
}

/* ---- Contexts: teal band / sun band ---- */
.band--teal,
.contact--card {
  --color-text: var(--patasol-cream);
  --color-text-muted: var(--patasol-mist);   /* 6.57:1 on teal */
  --color-accent: var(--patasol-sun);
  --color-accent-ink: var(--patasol-sun);    /* 4.99:1 on teal */
  --color-on-accent: var(--patasol-teal);
  --btn-bg: var(--patasol-sun);
  --btn-fg: var(--patasol-teal);              /* 4.99:1 */
  --btn-hover-bg: var(--patasol-cream);
  --btn-hover-fg: var(--patasol-teal);        /* 8.27:1 */
  --ghost-fg: var(--patasol-cream);
  --ghost-hover-bg: var(--patasol-cream);
  --ghost-hover-fg: var(--patasol-teal);
  --eyebrow-bg: var(--patasol-teal-deep);
  --eyebrow-fg: var(--patasol-sun);           /* 7.00:1 */
  color: var(--patasol-cream);
}
.band--sun {
  --band-bg: var(--patasol-sun);
  --color-text: var(--patasol-teal);          /* 4.99:1 on sun */
  --color-text-muted: var(--patasol-teal-deep); /* 7.00:1 on sun */
  --color-accent: var(--patasol-teal);
  --color-accent-ink: var(--patasol-teal-deep);
  --color-on-accent: var(--patasol-cream);
  --btn-bg: var(--patasol-teal);
  --btn-fg: var(--patasol-cream);             /* 8.27:1 */
  --btn-hover-bg: var(--patasol-teal-deep);
  --btn-hover-fg: var(--patasol-cream);
  --eyebrow-bg: var(--patasol-teal);
  --eyebrow-fg: var(--patasol-cream);
  background: var(--patasol-sun);
  color: var(--patasol-teal);
}
.band--teal { --band-bg: var(--patasol-teal); background: var(--patasol-teal); }
.contact--card { background: var(--patasol-teal); }

/* ---- Typography ---- */
body { font-weight: 400; }
strong, b { font-weight: 500; }
h1, h2, h3 {
  font-weight: 400;                         /* Lilita One has a single weight: never faux-bold */
  letter-spacing: 0.005em;
  line-height: 1.05;
}
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); text-wrap: balance; }
h3 { font-size: 1.5rem; line-height: 1.15; }
.eyebrow {
  justify-self: start;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: var(--eyebrow-bg);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--eyebrow-fg);
}
.lead { font-size: 1.1875rem; }
.section__header { justify-items: start; margin-bottom: var(--space-6); max-width: 44rem; }
.note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---- Bands: full-bleed colour with scalloped edges ---- */
.band {
  position: relative;
  padding-block: calc(var(--section-space) + 0.5rem);
}
.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  pointer-events: none;
}
.band::before {
  top: -19px;
  background: radial-gradient(circle at 50% 100%, var(--band-bg) 0 19.5px, transparent 20px) 0 0 / 40px 20px repeat-x;
}
.band::after {
  bottom: -19px;
  background: radial-gradient(circle at 50% 0, var(--band-bg) 0 19.5px, transparent 20px) 0 0 / 40px 20px repeat-x;
}
.band--hero::before { display: none; }

/* ---- Buttons: round pills that flip to teal on hover ---- */
.button {
  border: 3px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  line-height: 1.1;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.button:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  transform: rotate(-1.5deg);
}
.button--ghost {
  background: transparent;
  color: var(--ghost-fg);
  border-color: var(--ghost-fg);
}
.button--ghost:hover {
  background: var(--ghost-hover-bg);
  border-color: var(--ghost-hover-bg);
  color: var(--ghost-hover-fg);
}
.site-nav .button {
  min-height: 44px;
  padding: 0.4rem 1.25rem;
  font-size: 1.0625rem;
}
.nav-toggle {
  border: 3px solid var(--patasol-teal);
  border-radius: 999px;
}

/* ---- Header ---- */
.site-header__inner { min-height: 4.25rem; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--patasol-teal);
}
.wordmark svg { width: 2.25rem; height: 2.25rem; }
.site-nav a:not(.button) {
  padding: 0.4rem 0.875rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0;
}
.site-nav a:not(.button):hover,
.site-header--light .site-nav a:not(.button):hover {
  background: var(--patasol-sand);
  color: var(--patasol-teal);               /* 7.44:1 */
}
@media (min-width: 52rem) {
  .site-nav ul { gap: var(--space-1); }
  .site-nav li:last-child { margin-inline-start: var(--space-3); }
}

/* ---- Hero: centered on teal, stickers + shelf of pets ---- */
.hero { padding-top: clamp(2rem, 1rem + 4vw, 4rem); padding-bottom: var(--space-8); }   /* clear teal gap under the photo, before the scallops */
.hero__inner {
  position: relative;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
}
.hero__inner > * { max-width: none; }
.hero .eyebrow { justify-self: center; }
.hero h1 {
  max-width: 15ch;
  font-size: clamp(2.75rem, 1.7rem + 5.2vw, 5.5rem);
  line-height: 1;
  color: var(--patasol-cream);
}
.hero h1 em {
  font-style: normal;
  color: var(--patasol-sun);
  text-decoration: underline wavy var(--patasol-coral);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.12em;
}
.hero .lead {
  max-width: 36rem;
  margin-inline: auto;
  color: var(--patasol-cream);               /* 8.27:1 */
}
.hero__actions { justify-content: center; margin-top: var(--space-2); }
.stickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.sticker {
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--patasol-teal);
}
.sticker--a { background: var(--patasol-sun); }        /* 4.99:1 */
.sticker--b { background: var(--patasol-peach); }      /* 6.46:1 */
.sticker--c { background: var(--patasol-cream); }      /* 8.27:1 */
@media (min-width: 72rem) {
  .stickers { display: block; margin: 0; }
  .sticker {
    position: absolute;
    z-index: 2;                              /* stickers sit above the hero photo, never behind it */
    font-size: 1.375rem;
    padding: 0.5rem 1.375rem;
  }
  .sticker--a { left: 1%; top: 30%; transform: rotate(-8deg); }
  .sticker--b { right: 1%; top: 36%; transform: rotate(6deg); }
  .sticker--c { right: 7%; top: 56%; transform: rotate(-5deg); }
}
.shelf {
  width: min(100%, 60rem);
  margin: var(--space-5) auto 0;
}
.shelf__img { position: relative; }
.shelf .ph {
  aspect-ratio: 3 / 2;
  border-radius: 2rem 2rem 0 0;
}
@media (min-width: 40rem) {
  .shelf .ph { aspect-ratio: 16 / 9; border-radius: 3rem 3rem 0 0; }
}

/* ---- Product categories: leaf-shaped tiles ---- */
.cats {
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .cats { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cat--food, .cat--care { grid-column: span 7; }
  .cat--toys, .cat--acc { grid-column: span 5; }
}
.cat {
  position: relative;
  overflow: hidden;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: 0;
  border-radius: var(--leaf-a);
  color: var(--patasol-teal);
}
.cat:nth-child(even) { border-radius: var(--leaf-b); }
.cat::after {
  content: "";
  position: absolute;
  right: -3.5rem;
  bottom: -3.5rem;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.22);
  pointer-events: none;
}
.cat > * { position: relative; z-index: 1; }
.cat p { color: var(--patasol-teal-deep); max-width: 30rem; }   /* 7.00:1 on sun */
.cat h3 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.125rem); padding-right: 4.5rem; }
.cat .feature__icon {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  box-sizing: content-box;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.875rem;
  border-radius: 50%;
  margin: 0;
}
.cat--food { background: var(--patasol-sun); }
.cat--food .feature__icon { background: var(--patasol-teal); color: var(--patasol-cream); }
.cat--toys { background: var(--patasol-peach); }
.cat--toys .feature__icon { background: var(--patasol-coral); color: var(--patasol-teal-deep); }
.cat--acc { background: var(--patasol-teal); color: var(--patasol-cream); }
.cat--acc::after { background: rgb(0 0 0 / 0.18); }
.cat--acc p { color: var(--patasol-mist); }                       /* 6.57:1 */
.cat--acc .feature__icon { background: var(--patasol-sun); color: var(--patasol-teal); }
.cat--care { background: var(--patasol-sand); }
.cat--care p { color: var(--patasol-teal); }                      /* 7.44:1 */
.cat--care .feature__icon { background: #ffffff; color: var(--patasol-coral-ink); }
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chips li {
  padding: 0.2rem 0.875rem;
  border-radius: 999px;
  background: rgb(255 246 229 / 0.8);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--patasol-teal);
}
.cat--acc .chips li {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgb(255 246 229 / 0.55);
  color: var(--patasol-cream);
}
.cat__price {
  justify-self: start;
  margin-top: var(--space-2);
  padding: 0.25rem 1rem;
  border-radius: 999px;
  background: var(--patasol-teal);
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--patasol-cream);              /* 8.27:1 */
}
.cat--acc .cat__price { background: var(--patasol-sun); color: var(--patasol-teal); }

/* ---- Grooming: teal band with a staircase of steps ---- */
.groom {
  display: grid;
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 60rem) {
  .groom { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-8); }
}
.groom__intro { display: grid; gap: var(--space-4); justify-items: start; }
.groom__intro .note { margin-top: 0; }
.chips--solid li {
  padding: 0.3rem 1.125rem;
  background: var(--patasol-sun);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--patasol-teal);               /* 4.99:1 */
}
.stair {
  counter-reset: step;
  display: grid;
  gap: var(--space-3);
}
.stair li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) var(--space-5);
  border-radius: 2rem;
  background: var(--patasol-teal-deep);
}
.stair li::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--patasol-sun);
  font-family: var(--font-display);
  font-size: 1.875rem;
  color: var(--patasol-teal);               /* 4.99:1 */
}
.stair h3 { font-size: 1.5rem; color: var(--patasol-cream); }       /* 11.59:1 */
.stair p { color: var(--patasol-mist); }                              /* 9.21:1 */
@media (min-width: 60rem) {
  .stair li:nth-child(2) { margin-left: 2rem; }
  .stair li:nth-child(3) { margin-left: 4rem; }
  .stair li:nth-child(4) { margin-left: 6rem; }
}

/* ---- Delivery and pickup ---- */
.statement { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); max-width: 40rem; }
.ways {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 52rem) {
  .ways { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.way {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--patasol-teal);
}
.way--deliver { background: var(--patasol-sand); border-radius: var(--leaf-a); }
.way--pickup { background: #ffffff; border: 3px solid var(--patasol-teal); border-radius: var(--leaf-b); }
.way h3 { font-size: 2rem; }
.way__icon {
  box-sizing: content-box;
  width: 2rem;
  height: 2rem;
  padding: 0.75rem;
  border-radius: 50%;
  background: var(--patasol-teal);
  color: var(--patasol-cream);
}
.facts { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.facts div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 2px dotted rgb(15 82 87 / 0.45);
}
.facts dt { font-weight: 400; }
.facts dd { margin: 0; font-weight: 500; }

/* ---- Hours: sun band, board card + address ---- */
.visit {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 60rem) {
  .visit { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.visit__intro { display: grid; gap: var(--space-4); justify-items: start; }
.visit__address {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 500;
}
.visit__address svg { flex: none; width: 2.25rem; height: 2.25rem; }
.board {
  padding: var(--space-6);
  border-radius: var(--leaf-b);
  background: #ffffff;
  color: var(--patasol-teal);               /* 8.88:1 */
  --color-text-muted: var(--patasol-teal-soft);
}
.board__title { font-size: 1.875rem; margin-bottom: var(--space-3); }
.board__rows div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 2px dotted rgb(15 82 87 / 0.45);
}
.board__rows dt { font-family: var(--font-display); font-size: 1.25rem; }
.board__rows dd { margin: 0; font-weight: 500; align-self: center; }
.board__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--patasol-teal-soft);          /* 5.94:1 on white */
}

/* ---- Brands strip: neutral placeholder tiles ---- */
.brands {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.brand {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  min-height: 7.5rem;
  border: 2px dashed var(--patasol-field);
  border-radius: 1.75rem;
  background: #ffffff;
}
.brand::before {
  content: "";
  width: 2.25rem;
  height: 2.25rem;
  background: var(--patasol-sun);
}
.brand--a::before { border-radius: 50%; }
.brand--b::before { border-radius: 0.6rem; background: var(--patasol-coral); transform: rotate(12deg); }
.brand--c::before { width: 3.25rem; height: 1.5rem; border-radius: 999px; background: var(--patasol-teal); }
.brand span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--patasol-teal-soft);          /* 5.94:1 on white */
}

/* ---- FAQ: heading beside round-cornered rows ---- */
.faq-wrap {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 60rem) {
  .faq-wrap { grid-template-columns: 0.7fr 1.3fr; gap: var(--space-8); }
  .faq-wrap .section__header { position: sticky; top: 6rem; margin-bottom: 0; }
}
.faq { display: grid; gap: var(--space-3); border: 0; }
.faq details {
  border: 3px solid var(--patasol-teal);
  border-radius: 1.75rem;
  background: #ffffff;
}
.faq details[open] { background: var(--patasol-sand); }
.faq summary {
  align-items: center;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  font-size: 1.25rem;
  font-weight: 400;
}
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--patasol-coral-ink);
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: 1;
  color: #ffffff;                            /* 5.60:1 */
}
.faq details p {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--patasol-teal);                /* 7.44:1 on sand */
}

/* ---- Contact: teal leaf container, cream form card ---- */
.contact--card {
  padding: clamp(1.5rem, 0.5rem + 4vw, 3.5rem);
  border: 0;
  border-radius: var(--leaf-a);
  gap: var(--space-6);
}
.contact__intro h2 { color: var(--patasol-cream); }
.contact__details {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.contact__details div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.contact__details dt {
  min-width: 6rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--patasol-sun);                 /* 4.99:1 */
}
.contact__details dd { margin: 0; }
.contact-form {
  padding: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  border-radius: var(--leaf-b);
  background: var(--patasol-cream);
  color: var(--patasol-teal);
  /* light context again inside the teal container */
  --color-text: var(--patasol-teal);
  --color-text-muted: var(--patasol-teal-soft);
  --color-accent: var(--patasol-coral-ink);
  --color-accent-ink: var(--patasol-coral-ink);
  --color-on-accent: #ffffff;
  --btn-bg: var(--patasol-coral-ink);
  --btn-fg: #ffffff;
  --btn-hover-bg: var(--patasol-teal);
  --btn-hover-fg: var(--patasol-cream);
  --field-border: var(--patasol-field);
  --feedback-success: var(--color-success);
}
.contact-form--light .field input,
.contact-form--light .field textarea { border-width: 2px; }
.contact-form--light .field input:focus-visible,
.contact-form--light .field textarea:focus-visible { border-color: var(--patasol-teal); }
.field label { font-weight: 500; letter-spacing: 0; }

/* ---- Footer ---- */
.site-footer { margin-top: 0; }
.site-footer a:hover { color: var(--patasol-sun); }  /* 7.00:1 on teal-deep */

/* ---- Images from the pipeline (illustrative, AI-generated: the label is always visible) ---- */
.card-img {
  position: relative;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2);
}
.card-img .ph { aspect-ratio: 3 / 2; }
.card-img--flat {
  margin: 0;
  width: 100%;
  border-radius: var(--leaf-a);
  overflow: hidden;
}
.way { overflow: hidden; }
.img-tag {
  position: absolute;
  z-index: 2;
  left: var(--space-3);
  bottom: var(--space-3);
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  background: rgb(255 246 229 / 0.94);
  color: var(--patasol-teal-deep);          /* 11.59:1 on the label */
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
.visit__side { display: grid; gap: var(--space-5); }

/* ==========================================================================
   Premium tuning for this landing (applies only with "premium": true)
   Light and warm: Lilita One keeps its natural tracking, images settle softly.
   ========================================================================== */
[data-premium] {
  --selection-bg: var(--patasol-sun);
  --selection-text: var(--patasol-teal-deep);   /* 7.00:1 */
  --footer-border: var(--patasol-teal-deep);
}
[data-premium] h1,
[data-premium] h2,
[data-premium] h3 { letter-spacing: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-premium] .cat,
  [data-premium] .way { transition: transform 400ms var(--ease); }
  [data-premium] .cat:hover,
  [data-premium] .way:hover { transform: translateY(-4px); }
  [data-premium] .cat:hover .ph img,
  [data-premium] .way:hover .ph img { transform: scale(1.03); }
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-huella-01-hero{background-color:#767868;background-image:url(data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAADQBACdASoYABAAPu1iqU2ppaOiMAgBMB2JbACdMoHgdAcDySJ3TswEyzMjnu8WAADieu2UPvR1mwh8WeQZSvZMg+YM4VpRABGeboKmmvhP70tsvBE5hpuXhRktwc9K0hEDGGPmzcKR+8UObKdcmavQoXhie5aq/1D+yb8tCVveuDHKNC0OBeyIDSZiNX4cP3lAyzmkaK3YAA==)}
.ph-huella-02-alimento{background-color:#7a7c6a;background-image:url(data:image/webp;base64,UklGRqoAAABXRUJQVlA4IJ4AAACwBACdASoYABAAPu1iqU2ppaOiMAgBMB2JagCdMoMjmJndmYEDHQRYPBDb9/JgAOJqnamdSkpcVeB/p/S8mxAIIjt5wDTBoDOhrAHMWG8PHr0QaJqN5iTDcqSOBGdd+SipOZPEYrl6+atL8zL5xoT+wyViWp1CyaGjx6sTLnGQoZUYTmbc9zSv5xs5LnfG0Qk2ueqe418fJURiIuAAAA==)}
.ph-huella-03-juguetes{background-color:#d6b59b;background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAwBACdASoYABAAPu1iqU2ppaOiMAgBMB2JQBOmUABiat/DDBu6cF13cDAA/Gecr3h87tH2+Uv0r98+HIs8DXd6eiSul92iiG0h/xk/YwBYZvm1A8Y68J9SllroFDbP+557tFwg3iHXv9p9QT3uh75q0Yz+mMs/a20a7IbPmuEtu7y+Y4kw/2ifzp+ndkth31AAAA==)}
.ph-huella-04-accesorios{background-color:#7e7562;background-image:url(data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAACQBACdASoYABAAPu1iqk2ppaQiMAgBMB2JbACdMoR4GCWRuiZW6Do3w9OCKtAA4nrtlREPJ0R1CWEaQxIlypB2xBPaG4kReU05C1EUdh/igzypszdUaBKZXiw9lxUVxstKiZjIPcy10B+RwZvJ05ZloglGfWctQzOcTm2sQz2Wic0sExKy8t3i4DAv9a4Yj3xJgRjBbhEoAAAA)}
.ph-huella-05-higiene{background-color:#d0b297;background-image:url(data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAADwAwCdASoYABAAPu1iqU2ppaQiMAgBMB2JQBYdhDva4RArIURAUgIAAP7e+6xIWlHQ89IH6PM9SgAcKEgeKfC9IrWO/7X4h0dC0jV8ee4MvlQ+ioZZIDanFm/kKjZY9W4NMlIIhRyvnCjovD3YAAAA)}
.ph-huella-06-peluqueria{background-color:#949589;background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAABwBACdASoYABAAPu1iqU2ppaOiMAgBMB2JYgCsIIIJ/2SARG4iMxQ1Ko8fmAD+50aI8afjw2xor2xMh/VHU4FVslGhlXxgjp7MhZT7QA5m2Z8lXhwvTKDr0fJkoSQS9z60GEnbKW5ol5tWq+jxHJC+wgEkXPFYP4mpruTeRZesyxDe2QjepHLJXhNIfpFALxC2PxaXjUsJyiyN86Ybi3EAAAA=)}
.ph-huella-07-entrega{background-color:#cdaf92;background-image:url(data:image/webp;base64,UklGRsQAAABXRUJQVlA4ILgAAABQBQCdASoYABAAPu1iqU2ppaOiMAgBMB2JZACdMoRwJoBXge9I809tX3SSTaHRWxTeGWAA4nRwPhOVHiZkmdAceTa3IXJ+BcNjeVYdo5zyjt3Sft+z59qIanvMEFGW3VAuP59DGc+tMd27TQStDvHpBIlX5Sg+rc6f+76+g0EzEYVOf9i/SYuHdZrYgvjTBTKiSagtBF12QNKckKI1YZilIxlmcudF4NLMFe9M44p4M7q29tAUQAAA)}
.ph-huella-08-retiro{background-color:#847f69;background-image:url(data:image/webp;base64,UklGRsoAAABXRUJQVlA4IL4AAABwBQCdASoYABAAPu1iqU2ppaOiMAgBMB2JbACdMoR3GKAdP+pQVQAZxRa7tIfPycjolyd4AP6UcDl/t2bljLz1LlTdcykVXAaoNJ0yXLjGIn5doj0qZCkWJplrqes4oG4dzS4euKk4dUJ4LflewC/YhbZyGASwzeEYEM2sD4nCdX40Ui52ju2FniibFjQGz7vTnIxV8ZRDHcXG+M6QvC49AtdnoRRe8PWEynEXMyggVod/jYrUr/pLslJrYgAA)}
.ph-huella-09-tienda{background-color:#7f7255;background-image:url(data:image/webp;base64,UklGRsgAAABXRUJQVlA4ILwAAAAQBQCdASoYABAAPu1iqU2ppaOiMAgBMB2JbACdMoHgA56oWx233E9nWxg0gJKBKPoAAP4HI5pyd0ppsoMNfAEoagKEnVWKHhHGFcXfwZFwT2ew6wdfmP0MGvDEi5nRE1rqnoG0lIjo5AkHoictw3uhUX+7N6TE4U51Iaur6Txlm0VbvfjawLUyVAB1R+L3QNWuFLK0rl39s0d531x3rQhm9+XFacN7xXnIwiqie/r66HthDD6UARuBtAAAAA==)}