/* ==========================================================================
   ANDREA GUEVEA · ESTÉTICA CONSCIENTE
   Sistema de diseño compartido — Neuquén, Argentina
   Estilo: Soft UI evolution + minimalismo editorial
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Marca (extraída del isologo) */
  --teal-900: #06373a;
  --teal-800: #054f53;
  --teal-700: #06777c;   /* texto y botones — AA en fondo claro */
  --teal-600: #0a9a9e;   /* color de marca, uso decorativo */
  --teal-500: #21b3b6;
  --teal-200: #a9e0e1;
  --teal-50:  #eaf6f6;

  /* Neutros cálidos */
  --cream:   #fbf8f5;
  --sand:    #f2ebe4;
  --sand-dk: #e4d9ce;
  --ink:     #1c2426;
  --ink-2:   #4e5b5d;
  --ink-3:   #626d6f;
  --white:   #ffffff;

  /* Acento cálido — UNA sola familia, todas alrededor de hue 30-37°.
     No agregar un acento de otro tono: el sitio tiene el teal de marca y este
     cálido, y nada más. */
  --gold:      #b08a4f;   /* líneas de acento y detalles decorativos */
  --gold-deep: #8f6a2e;   /* el mismo tono, oscurecido para cuando lleva contraste */
  --blush:     #e8d8c8;   /* velo cálido de la familia, solo para gradientes */
  --blush-rgb: 232, 216, 200;   /* el mismo, para rgba() con alfa */
  --star:      var(--gold-deep);   /* 4,92:1 sobre blanco · 4,16:1 sobre --sand */

  /* Verde de WhatsApp. Es color funcional de un tercero, no un acento de la
     marca: solo puede aparecer en el botón y en el flotante de WhatsApp. */
  --wa:        #1a8550;   /* 4,65:1 con texto blanco (AA); antes #25a566 = 3,16:1 */
  --wa-dark:   #146b40;
  --wa-shadow: rgba(28, 130, 80, 0.28);

  /* Semánticos */
  --bg:          var(--cream);
  --surface:     var(--white);
  --text:        var(--ink);
  --text-muted:  var(--ink-2);
  --border:      var(--sand-dk);
  --brand:       var(--teal-700);
  --brand-vivid: var(--teal-600);

  /* Tipografía
     Petrona (Eduardo Tunni, Buenos Aires) para los títulos: serif de contraste
     moderado, pensada para textos en español. Jost, geométrica, para el resto.
     El par contrasta por eje (serif humanista vs. sans geométrica), no por tamaño. */
  --font-display: 'Petrona', Georgia, 'Times New Roman', serif;
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.3rem, 1.75rem + 2.7vw, 4.2rem);
  --step-5:  clamp(2.8rem, 1.9rem + 4.2vw, 5.6rem);

  /* Espaciado (ritmo de 4 / 8) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --maxw: 1200px;
  --maxw-narrow: 760px;

  /* Formas */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --r-organic: 48% 52% 40% 60% / 55% 45% 55% 45%;

  /* Elevación */
  --sh-1: 0 1px 2px rgba(28, 36, 38, 0.05), 0 2px 8px rgba(28, 36, 38, 0.04);
  --sh-2: 0 2px 6px rgba(28, 36, 38, 0.05), 0 12px 28px rgba(28, 36, 38, 0.07);
  --sh-3: 0 6px 14px rgba(28, 36, 38, 0.06), 0 26px 56px rgba(28, 36, 38, 0.1);
  --sh-teal: 0 10px 30px rgba(6, 119, 124, 0.22);

  /* Capas */
  --z-base: 1; --z-sticky: 40; --z-nav: 100; --z-drawer: 200; --z-top: 1000;

  /* Movimiento — solo curvas de desaceleración exponencial, sin rebote */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);      /* ease-out-quart */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-expo */
  --t-fast: 160ms;
  --t-mid: 260ms;
  --t-slow: 480ms;
  --t-slower: 720ms;

  /* Foco — se redefine en superficies oscuras para mantener contraste */
  --focus-ring: var(--teal-600);
  --focus-halo: rgba(255, 255, 255, 0.95);
}

/* Superficies oscuras: el anillo de foco cambia para seguir siendo visible */
.section--teal, .cta, .footer, .drawer__panel {
  --focus-ring: #a9e0e1;
  --focus-halo: rgba(6, 55, 58, 0.9);
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  /* Blindaje contra scroll horizontal: ninguna capa decorativa debe
     ensanchar el documento. clip no crea contexto de scroll (a diferencia
     de hidden), así que position:sticky sigue funcionando. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, no hidden: hidden convertiría al body en contenedor de scroll y
     rompería position:sticky del nav en algunos navegadores. */
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
/* Tamaño base de los íconos SVG: evita que un ícono sin regla propia se
   dibuje a 300×150 px mientras carga la hoja completa (salto de diseño). */
.ico { width: 1.15em; height: 1.15em; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

/* Los tamaños grandes necesitan menos aire entre letras que los chicos */
h1 { font-size: var(--step-4); letter-spacing: -0.026em; line-height: 1.06; }
h2 { font-size: var(--step-3); letter-spacing: -0.022em; line-height: 1.08; }
h3 { font-size: var(--step-2); letter-spacing: -0.016em; }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; text-wrap: pretty; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-800); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

strong { font-weight: 600; }

/* Foco visible en cualquier fondo: anillo de color + halo de contraste.
   Nunca se elimina; solo se hace más legible. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
/* El foco por puntero no muestra anillo, pero el foco por teclado sí */
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--teal-200); color: var(--teal-900); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: var(--z-top);
  background: var(--teal-800); color: #fff; padding: 0.7rem 1.2rem;
  border-radius: var(--r-sm); font-weight: 500; text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; }

/* ---------- 3. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1400px; }

.section { padding-block: var(--section-y); position: relative; }
.section--sand { background: var(--sand); }
.section--teal { background: var(--teal-800); color: #eef7f7; }
.section--teal h2, .section--teal h3 { color: #fff; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.center p { margin-inline: auto; }

.grid { display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* ---------- 4. TIPOGRAFÍA UTILITARIA ---------- */

/* Cabecera de sección. El título abre la sección: no hay etiqueta previa.
   El ritmo se rompe alternando la variante centrada y la partida, no
   repitiendo el mismo bloque en cada sección. */
.section-head { margin-bottom: var(--sp-7); }
.section-head > :last-child { margin-bottom: 0; }
.section-head--center { text-align: center; }
.section-head--center .lead, .section-head--center p { margin-inline: auto; }
.section-head--wide { margin-bottom: var(--sp-8); }

@media (min-width: 900px) {
  /* Título a la izquierda, bajada a la derecha alineadas por la línea de base:
     rompe la columna centrada sin perder la relación entre ambos. */
  .section-head--split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
    align-items: end;
    text-align: left;
  }
  .section-head--split > h2 { margin-bottom: 0; }
  .section-head--split > .lead { margin-bottom: 0.35rem; max-width: 46ch; }
}

/* Línea de ubicación del hero. Es un dato (ciudad y año), no una etiqueta
   decorativa: por eso va en minúsculas y solo aparece una vez por sitio. */
.locus {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.locus::before {
  content: ''; width: 30px; height: 1px; background: var(--gold); flex: none;
}

.lead { font-size: var(--step-1); line-height: 1.6; color: var(--text-muted); font-weight: 400; text-wrap: pretty; }
.muted { color: var(--text-muted); }
.small { font-size: var(--step--1); }
.serif-accent { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.brand-text { color: var(--brand); }

/* Estrellas de valoración. Siempre acompañadas de la cifra en texto: el color
   nunca es el único portador del dato. */
.stars { color: var(--star); }
.stars--lg { font-size: 1.15rem; }

/* Título que envuelve un enlace: el color y el subrayado los pone el título,
   no el <a>. Evita repetir el mismo style="" en cada tarjeta. */
.link-plain { color: inherit; text-decoration: none; }

.divider {
  width: 60px; height: 1px; background: var(--gold); border: 0;
  margin: var(--sp-5) 0;
}
.divider--center { margin-inline: auto; }

/* ---------- 5. BOTONES ---------- */
.btn {
  --btn-bg: var(--teal-700);
  --btn-fg: #fff;
  --btn-bd: var(--teal-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 50px;
  padding: 0.85rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
              border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; box-shadow: var(--sh-teal); }
.btn:active { transform: scale(0.975); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--teal-800); --btn-bd: var(--sand-dk); }
.btn--ghost:hover { background: var(--teal-50); border-color: var(--teal-600); color: var(--teal-800); box-shadow: none; }

.btn--light { --btn-bg: #fff; --btn-fg: var(--teal-800); --btn-bd: #fff; }
.btn--light:hover { background: var(--teal-50); border-color: var(--teal-50); color: var(--teal-900); }

.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.45); }
.btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; box-shadow: none; }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #fff; --btn-bd: var(--wa); }
.btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); box-shadow: 0 10px 30px var(--wa-shadow); }

.btn--sm { min-height: 42px; padding: 0.6rem 1.2rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.btn .ico { width: 18px; height: 18px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row--center { justify-content: center; }

/* Enlace con flecha */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; color: var(--brand); text-decoration: none;
  min-height: 44px;
}
.arrow-link .ico { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
.arrow-link:hover .ico { transform: translateX(5px); }

/* Reparto parejo de líneas en títulos: sin viudas ni renglones colgando. */
h1, h2, h3 { text-wrap: balance; }

/* ---------- 6. NAVEGACIÓN ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(251, 248, 245, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--sand-dk); box-shadow: var(--sh-1); }

.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 76px;
  width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter);
}

.nav__brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; flex: none;
  min-height: 44px; /* área táctil mínima */
}
.nav__brand img { width: 38px; height: auto; }
.nav__brand-txt { display: flex; flex-direction: column; line-height: 1.05; }
.nav__brand-name {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-700);
}
.nav__brand-sub {
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400;
}

.nav__links { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav__links li { margin: 0; }

.nav__link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.7rem; min-height: 44px;
  font-size: 0.95rem; font-weight: 400; color: var(--ink-2);
  text-decoration: none; border-radius: var(--r-sm);
  background: none; border: 0; font-family: var(--font-sans); cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--teal-800); background: var(--teal-50); }
.nav__link[aria-current="page"] { color: var(--teal-800); font-weight: 500; }

.nav__item { position: relative; }
.nav__item--current > .nav__link { color: var(--teal-800); font-weight: 500; }

.nav__caret { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease); }
[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 250px; padding: 0.6rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
  /* Son diez áreas: en pantallas bajas el menú se desplaza en vez de cortarse */
  max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain;
}
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }

.nav__menu a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.62rem 0.8rem; min-height: 44px;
  font-size: 0.94rem; color: var(--ink-2); text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__menu a:hover { background: var(--teal-50); color: var(--teal-800); }
.nav__menu a[aria-current="page"] { background: var(--teal-50); color: var(--teal-800); font-weight: 500; }
.nav__menu .ico { width: 17px; height: 17px; color: var(--teal-600); flex: none; }

.nav__cta { flex: none; }

.nav__burger {
  display: none; flex: none;
  width: 46px; height: 46px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.nav__burger:hover { background: var(--teal-50); border-color: var(--teal-200); }
.nav__burger span {
  display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px;
  position: relative;
  transition: transform var(--t-mid) var(--ease), background var(--t-fast) linear;
}
.nav__burger span::before, .nav__burger span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), top var(--t-mid) var(--ease);
}
.nav__burger span::before { top: -6px; }
.nav__burger span::after { top: 6px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Drawer móvil */
.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  visibility: hidden; pointer-events: none;
  /* El panel cerrado vive en translateX(100%), fuera del viewport:
     sin este recorte ensancharía el documento en móvil. */
  overflow: hidden;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer__scrim {
  position: absolute; inset: 0; background: rgba(6, 55, 58, 0.5);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
  backdrop-filter: blur(2px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(89vw, 380px);
  background: var(--cream);
  box-shadow: -20px 0 60px rgba(28, 36, 38, 0.18);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--sp-5) + env(safe-area-inset-top)) var(--sp-5)
           calc(var(--sp-6) + env(safe-area-inset-bottom));
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.drawer__close {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.drawer__close:hover { background: var(--teal-50); }
.drawer__close .ico { width: 20px; height: 20px; }

.drawer__nav { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.drawer__nav li { margin: 0; border-bottom: 1px solid var(--sand-dk); }
.drawer__nav > li:last-child { border-bottom: 0; }
.drawer__nav a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 0.25rem; min-height: 52px;
  font-size: 1.05rem; color: var(--ink); text-decoration: none;
}
.drawer__nav a[aria-current="page"] { color: var(--teal-800); font-weight: 500; }
.drawer__nav .ico { width: 18px; height: 18px; color: var(--teal-600); flex: none; }

.drawer__group-title {
  font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; padding: 1.1rem 0.25rem 0.4rem; margin: 0;
}
.drawer__sub { list-style: none; margin: 0; padding: 0 0 0.4rem 0; }
.drawer__sub a { font-size: 0.98rem; color: var(--ink-2); padding-left: 0.25rem; }

.drawer__foot { margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--sand-dk); }
.drawer__foot .btn { width: 100%; margin-bottom: var(--sp-3); }
.drawer__social { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); }

/* Con ocho ítems en el menú, por debajo de 1100px no entran en una fila:
   pasa al menú hamburguesa. Entre 1100 y 1279px el isologo queda solo, sin
   el nombre al lado, para dejarle lugar a los enlaces. */
@media (max-width: 1099px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav__brand-txt { display: none; }
}

/* 32.8 Nav en teléfonos angostos (360-414 px): isologo + nombre + buscar +
   menú tienen que entrar sin empujar nada fuera de la pantalla. */
@media (max-width: 480px) {
  .nav__inner { gap: 0.5rem; }
  .nav__brand { min-width: 0; flex: 0 1 auto; }
  .nav__brand-txt { min-width: 0; }
  .nav__search, .nav__burger { flex: none; }
}
@media (max-width: 400px) {
  .nav__brand-name, .nav__brand-sub { white-space: nowrap; }
  .nav__brand-name { letter-spacing: 0.1em; }
  .nav__brand-sub { letter-spacing: 0.12em; }
}

/* Con "Colorimetría e imagen" el menú es más largo: desde 1100 px los
   enlaces se compactan y se oculta la tecla "/" del buscador para que todo
   entre en una fila sin empujar el botón fuera de la pantalla. */
@media (min-width: 1100px) {
  .nav__inner { gap: 0.75rem; }
  .nav__links { gap: 0; }
  .nav__link { padding: 0.6rem 0.5rem; font-size: 0.9rem; }
  .nav__search kbd { display: none; }
}

/* ---------- 6.1 Botón del buscador (va en el CSS crítico: está arriba de todo) ---------- */
.nav__search {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 0.95rem; min-height: 44px; flex: none;
  font-family: var(--font-sans); font-size: 0.92rem; color: var(--ink-2);
  background: var(--white); border: 1px solid var(--sand-dk); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__search:hover { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }
.nav__search .ico { width: 16px; height: 16px; color: var(--teal-600); flex: none; }
.nav__search kbd {
  font-family: var(--font-sans); font-size: 0.7rem; color: var(--ink-3);
  padding: 0.1rem 0.35rem; border: 1px solid var(--sand-dk); border-radius: 5px;
  background: var(--cream);
}
@media (max-width: 1099px) {
  .nav__search { margin-left: auto; }
  .nav__search__txt, .nav__search kbd { display: none; }
  .nav__search { padding: 0.6rem; width: 46px; justify-content: center; border-radius: var(--r-sm); }
}
/* Buscador destacado. Ocupa el lugar que tenía el botón "Reservar turno"
   del encabezado: botón lleno en el teal de marca, con el texto completo y
   el atajo "/" en escritorio, y como ícono lleno en móvil y tablet. */
.nav__search {
  background: var(--teal-700); border-color: var(--teal-700); color: #fff;
  font-weight: 500; letter-spacing: 0.01em;
  box-shadow: 0 6px 18px rgba(6, 119, 124, 0.18);
}
.nav__search:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; box-shadow: var(--sh-teal); }
.nav__search .ico { color: #fff; width: 17px; height: 17px; }
.nav__search kbd {
  color: #fff; background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}
@media (min-width: 1100px) {
  .nav__search { padding: 0.65rem 1.1rem 0.65rem 1rem; min-height: 46px; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .nav__search kbd { display: none; }
}

/* ---------- 7. HERO ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) clamp(3.5rem, 2rem + 7vw, 7rem);
  overflow: hidden;
}
.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero__title { font-size: var(--step-5); margin-bottom: var(--sp-5); }
.hero__title em { font-style: italic; color: var(--brand); font-weight: 500; }
/* H1 de marca (SEO): más largo que el lema anterior, un escalón más chico. */
.hero__title--brand { font-size: var(--step-4); max-width: none; }
.hero__title--brand em { display: block; }
.hero__lead { font-size: var(--step-1); color: var(--text-muted); font-weight: 400; text-wrap: pretty; margin-bottom: var(--sp-6); max-width: 46ch; }

/* Credenciales del hero. Son datos verificables escritos como frase, no un
   tablero de métricas: la cifra se destaca dentro de la línea, no encima de
   una etiqueta. */
.creds {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.4rem clamp(1rem, 0.5rem + 1.6vw, 1.9rem);
  font-size: var(--step--1); color: var(--ink-2); line-height: 1.5;
}
.creds li { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.creds li + li { padding-left: clamp(1rem, 0.5rem + 1.6vw, 1.9rem); position: relative; }
.creds li + li::before {
  content: ''; position: absolute; left: 0; top: 0.1em; bottom: 0.1em;
  width: 1px; background: var(--sand-dk);
}
.creds b {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--teal-700); line-height: 1;
}
@media (max-width: 560px) {
  .creds { flex-direction: column; gap: 0.55rem; }
  .creds li + li { padding-left: 0; }
  .creds li + li::before { display: none; }
}
/* Desde 561px: registro alineado, cifra en columna fija y frase al lado. Vive
   acá (CSS crítico) y no al final para que el hero no salte al cargar la hoja. */
@media (min-width: 561px) {
  .creds { display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 0.9rem; align-items: baseline; }
  .creds li { display: contents; }
  .creds li + li { padding-left: 0; }
  .creds li + li::before { display: none; }
  .creds b { text-align: right; font-size: var(--step-2); }
}

/* Collage de imágenes del hero */
.hero__art { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero__blob {
  position: absolute; width: 92%; aspect-ratio: 1; border-radius: var(--r-organic);
  background: linear-gradient(140deg, var(--teal-50) 0%, var(--blush) 55%, var(--sand) 100%);
  animation: drift 26s ease-in-out infinite alternate;
  z-index: 0;
}
/* Antes la forma "respiraba" animando border-radius: eso no lo resuelve la
   GPU, obliga a recalcular estilo y repintar en cada frame, para siempre, y en
   un celular se traduce en batería. Ahora la forma orgánica queda fija y gira
   y escala apenas con rotate/scale, que corren en el compositor sin tocar el
   hilo principal. rotate/scale individuales se suman al transform del
   parallax en vez de pisarlo. */
@keyframes drift {
  from { rotate: 0deg; scale: 1; }
  to   { rotate: 14deg; scale: 1.045; }
}

.hero__photos { position: relative; z-index: 1; display: grid; width: 100%; max-width: 460px; }
.hero__photo {
  border-radius: var(--r-lg); overflow: hidden; background: var(--sand);
  box-shadow: var(--sh-3); border: 5px solid #fff;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo--a { grid-area: 1 / 1 / 5 / 4; aspect-ratio: 4/5; }
.hero__photo--b { grid-area: 3 / 3 / 6 / 6; aspect-ratio: 1; z-index: 2; }
.hero__photos { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); }

.hero__badge {
  position: absolute; z-index: 3; right: -4px; top: 8px;
  display: flex; align-items: center; gap: 0.5rem;
  background: #fff; border-radius: var(--r-pill); padding: 0.55rem 1rem;
  box-shadow: var(--sh-2); font-size: var(--step--1); font-weight: 500; color: var(--ink);
}
.hero__badge .stars { letter-spacing: -1px; }

/* ---------- 8. PAGE HEADER (páginas internas) ---------- */
.pagehead {
  position: relative;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(2.25rem, 1.2rem + 4vw, 4rem);
  background: linear-gradient(180deg, var(--teal-50) 0%, var(--cream) 100%);
  overflow: hidden;
}
/* Orbe decorativo del encabezado. Es un elemento real (y no un ::after)
   para poder darle parallax propio; nunca contiene información. */
.pagehead__orb {
  position: absolute; right: -8%; top: -35%;
  width: min(52vw, 480px); aspect-ratio: 1; border-radius: var(--r-organic);
  background: radial-gradient(circle at 35% 35%, rgba(169, 224, 225, 0.55), rgba(var(--blush-rgb), 0.3) 65%, transparent 72%);
  pointer-events: none;
  animation: drift 32s ease-in-out infinite alternate-reverse;
  transform: translate3d(0, var(--py, 0px), 0);
}
.pagehead__orb--b {
  right: auto; left: -12%; top: auto; bottom: -55%;
  width: min(38vw, 340px);
  background: radial-gradient(circle at 60% 40%, rgba(var(--blush-rgb), 0.5), transparent 70%);
  animation-duration: 26s; animation-direction: reverse;
}
.pagehead__inner { position: relative; z-index: 1; }
.pagehead h1 { max-width: 16ch; }
.pagehead .lead { max-width: 56ch; }
/* Código de error de la 404: es un dato del sistema, no un título */
.pagehead__code {
  display: block; font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--ink-3); margin-bottom: var(--sp-3);
}

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; list-style: none; margin: 0 0 var(--sp-4); padding: 0; font-size: var(--step--1); }
.breadcrumb li { margin: 0; color: var(--ink-3); display: flex; align-items: center; gap: 0.45rem; }
.breadcrumb a {
  color: var(--ink-3); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.breadcrumb a:hover { color: var(--teal-700); text-decoration: underline; }
.breadcrumb li + li::before { content: '/'; color: var(--sand-dk); }
.breadcrumb [aria-current] { color: var(--teal-700); }

/* ---------- 9. CARDS ---------- */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: var(--sp-2); font-size: var(--step-1); }
.card__body p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: var(--sp-4); }
.card__body .arrow-link { margin-top: auto; }
/* Icono de categoría. Sin caja redondeada detrás: el ícono va suelto, del
   tamaño de un título chico, y el bloque se abre con una línea fina. La caja
   con esquinas redondeadas encima de cada encabezado es una plantilla, no una
   decisión. */
.card__icon {
  display: block; color: var(--teal-700);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.card__icon .ico { width: 28px; height: 28px; }

/* Bloque de rasgo: ícono, título corto y una línea de texto. Sin caja ni
   sombra — vive directamente sobre el fondo de la sección. */
.feature h3 { font-size: var(--step-1); }
.feature p:last-child { margin-bottom: 0; }

/* Card enlazada por completo */
.card--link { cursor: pointer; }
.card--link .card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card--link:hover, .card:focus-within { border-color: var(--teal-200); }
.card--link:hover .card__media img { transform: scale(1.05); }
@media (hover: hover) {
  .card--link:hover { transform: translateY(-4px); }
}

.card__tag {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2;
  background: rgba(255,255,255,0.94); color: var(--teal-800);
  padding: 0.3rem 0.75rem; border-radius: var(--r-pill);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}

/* Card de servicio con lista */
.svc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 1rem + 1.2vw, 2.25rem);
  display: flex; flex-direction: column;
}
.svc:hover { border-color: var(--teal-200); }
.svc h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.svc__list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.svc__list li {
  position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem;
  color: var(--text-muted); font-size: 0.98rem; line-height: 1.55;
}
.svc__list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-500);
}
.svc__list li b { color: var(--ink); font-weight: 500; }
.svc .btn, .svc .arrow-link { margin-top: auto; align-self: flex-start; }

/* Ítem de menú de servicios (lista larga) */
.menu-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); }
.menu-list li {
  margin: 0; padding: clamp(1rem, 0.8rem + 0.6vw, 1.45rem) clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.45rem clamp(1rem, 0.6rem + 1.4vw, 2.25rem);
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .menu-list li:hover { background: var(--white); }
}
/* El nombre ocupa su propia línea: es lo que la persona busca con la vista */
.menu-list__name {
  flex: 1 1 100%; font-size: var(--step-1); font-family: var(--font-display);
  color: var(--ink); font-weight: 500; line-height: 1.25;
}
.menu-list__desc {
  flex: 1 1 300px; max-width: 68ch;
  color: var(--text-muted); font-size: 0.96rem; line-height: 1.6;
}
.menu-list__meta { color: var(--brand); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
/* Duración de la sesión. Es un dato, no una etiqueta: va en gris y sin
   versalitas, para que no compita con el nombre del tratamiento. */
.menu-list__dur {
  display: inline-flex; align-items: center; gap: 0.38rem; white-space: nowrap;
  color: var(--ink-3); font-size: var(--step--1); letter-spacing: 0.01em;
}
.menu-list__dur .ico { width: 14px; height: 14px; color: var(--teal-600); flex: none; }
/* Cuando la fila solo tiene nombre + duración, la duración se va a la derecha */
.menu-list li > .menu-list__dur:last-child { margin-left: auto; }

/* Columna derecha de cada ficha: duración, etiqueta y control de cantidad.
   La arma js/reservas.js moviendo los datos que ya estaban en la fila. */
.menu-list__rail {
  flex: none; margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
  padding-top: 0.15rem;
}
.menu-list__rail .menu-list__meta { text-align: right; white-space: normal; }
/* Fila elegida: se marca para reconocerla al volver a recorrer la lista */
.menu-list li.is-picked {
  background: var(--teal-50);
  box-shadow: inset 3px 0 0 var(--teal-600);
}
.svc.is-picked { border-color: var(--teal-200); }

/* Título de familia dentro de una lista larga de servicios */
.menu-group {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--step-1); margin: var(--sp-7) 0 var(--sp-3);
}
.menu-group:first-of-type { margin-top: 0; }
.menu-group .ico { width: 20px; height: 20px; color: var(--teal-600); flex: none; }

/* ---------- 10. ACORDEÓN / FAQ ---------- */
.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: clamp(1rem, 0.8rem + 0.5vw, 1.4rem) 0; min-height: 56px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.acc__btn:hover { color: var(--teal-700); }
.acc__ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); display: grid; place-items: center; color: var(--teal-700);
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.acc__ico .ico { width: 16px; height: 16px; }
.acc__btn[aria-expanded="true"] .acc__ico { transform: rotate(45deg); background: var(--teal-50); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-mid) var(--ease); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p, .acc__panel ul { padding-bottom: var(--sp-4); color: var(--text-muted); margin-bottom: 0; }

/* ---------- 11. TESTIMONIOS ---------- */
.quote {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  display: flex; flex-direction: column; height: 100%;
}
.quote__stars { color: var(--star); font-size: 0.95rem; letter-spacing: 1px; margin-bottom: var(--sp-3); }
.quote__text { font-size: 1.02rem; color: var(--ink-2); line-height: 1.65; margin-bottom: var(--sp-4); flex: 1; }
.quote__who { display: flex; align-items: center; gap: 0.7rem; }
.quote__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--teal-50); color: var(--teal-700);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
}
.quote__name { font-weight: 500; font-size: 0.95rem; color: var(--ink); line-height: 1.2; }
.quote__src { font-size: 0.82rem; color: var(--ink-3); }

.rating-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 1rem; margin-bottom: var(--sp-6);
}
.rating-strip__score { font-family: var(--font-display); font-size: var(--step-3); color: var(--teal-700); line-height: 1; }

/* ---------- 12. GALERÍA ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-4); }
.gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--sand); box-shadow: var(--sh-1); }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.06); } }

.photo-round {
  width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 6px solid #fff; box-shadow: var(--sh-2); background: var(--sand);
}
.photo-round img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 13. PASOS / PROCESO ---------- */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step { position: relative; padding-left: 4.2rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -0.15rem;
  font-family: var(--font-display); font-size: var(--step-2); color: var(--teal-200);
  line-height: 1;
}
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.step p { color: var(--text-muted); margin-bottom: 0; font-size: 0.98rem; }

/* ---------- 14. CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-900) 100%);
  color: #eef7f7;
  border-radius: var(--r-xl);
  padding: clamp(2.25rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  text-align: center;
}
.cta::before, .cta::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.cta::before {
  width: 340px; height: 340px; top: -140px; right: -110px;
  background: radial-gradient(circle, rgba(33,179,182,0.35), transparent 68%);
}
.cta::after {
  width: 280px; height: 280px; bottom: -130px; left: -90px;
  background: radial-gradient(circle, rgba(var(--blush-rgb),0.22), transparent 68%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; margin-bottom: var(--sp-4); }
.cta p { color: rgba(238,247,247,0.85); margin-inline: auto; margin-bottom: var(--sp-6); max-width: 52ch; }
.cta .btn-row { justify-content: center; }

/* ---------- 15. INFO / CONTACTO ---------- */
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.info-list li { display: flex; gap: var(--sp-4); margin: 0; }
.info-list .ico-box {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--teal-50); color: var(--teal-700); display: grid; place-items: center;
}
.info-list .ico-box .ico { width: 22px; height: 22px; }
.info-list dt, .info-list .info-lbl {
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 0.15rem;
}
.info-list dd, .info-list .info-val { margin: 0; color: var(--ink); font-size: 1.02rem; }
/* Teléfono, dirección y agenda son acciones: necesitan altura táctil */
.info-list a {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.info-list a:hover { color: var(--teal-700); text-decoration: underline; }

/* La dirección enlaza al mapa. Va en bloque (no inline-flex) porque son dos
   renglones con <br>. El subrayado vive en el span de la dirección, no en el
   <a>: text-decoration se hereda y taparía también la pista de abajo. */
.info-list a.map-link { display: block; min-height: 0; padding-block: 0.2rem; text-decoration: none; }
.map-link__addr {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(6, 119, 124, 0.35); text-underline-offset: 4px;
}
.info-list a.map-link:hover { color: var(--teal-700); }
.map-link:hover .map-link__addr { text-decoration-color: currentColor; }
.map-link__hint {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.4rem; color: var(--teal-700);
  font-size: var(--step--1); letter-spacing: 0.02em;
}
.map-link__hint .ico { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-out); }
.map-link:hover .map-link__hint .ico { transform: translateX(3px); }

.map-frame {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--sh-1); background: var(--sand); line-height: 0;
}
.map-frame iframe { width: 100%; height: clamp(300px, 45vw, 440px); border: 0; }

.hours { list-style: none; padding: 0; margin: 0; }
.hours li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 0.7rem 0; border-bottom: 1px dashed var(--border); margin: 0;
  font-size: 0.98rem;
}
.hours li:last-child { border-bottom: 0; }
.hours span:first-child { color: var(--ink-2); }
.hours span:last-child { color: var(--ink); font-weight: 500; }

/* ---------- 16. FOOTER ---------- */
.footer {
  background: var(--teal-900); color: rgba(238,247,247,0.75);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: 0.95rem;
}
.footer a { color: rgba(238,247,247,0.75); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
/* Títulos de columna del footer: h2 por orden de encabezados (accesibilidad), con el mismo look. */
.footer h4, .footer .footer__h {
  line-height: 1.12;
  color: #fff; font-family: var(--font-sans); font-size: var(--step--1);
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--sp-4);
}
.footer__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-bottom: var(--sp-7);
}
.footer__brand img { width: 132px; margin-bottom: var(--sp-4); }
.footer__brand p { max-width: 34ch; color: rgba(238,247,247,0.65); font-size: 0.93rem; }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: 0.15rem; }
/* Enlaces del pie con altura táctil suficiente en móvil */
.footer__list a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-block: 0.15rem;
}
.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.footer__social a {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2); display: grid; place-items: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer__social a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.45); }
.footer__social .ico { width: 19px; height: 19px; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between; align-items: center;
  font-size: 0.86rem; color: rgba(238,247,247,0.55);
}

/* ---------- 17. BARRA MÓVIL FIJA ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; gap: 0.6rem;
  padding: 0.6rem var(--sp-4) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 248, 245, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--sand-dk);
}
.mobile-bar .btn {
  flex: 1; min-height: 48px; padding-inline: 0.75rem;
  font-size: 0.92rem; white-space: nowrap; gap: 0.4rem;
}
@media (max-width: 400px) { .mobile-bar .btn { font-size: 0.85rem; padding-inline: 0.55rem; } }
/* El botón de teléfono es solo el icono: el ancho lo necesitan los dos primeros */
.mobile-bar__tel { flex: 0 0 52px !important; padding-inline: 0 !important; }
.mobile-bar__num {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 0.3rem;
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--teal-900); background: var(--teal-200); border-radius: var(--r-pill);
}
/* Sin JS el botón de selección no hace nada, así que no se muestra */
.mobile-bar__sel { display: none; }
html.js .mobile-bar__sel { display: inline-flex; }
@media (max-width: 767px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 76px; }
}

/* ---------- 18. WHATSAPP FLOTANTE ---------- */
.wa-float {
  position: fixed; right: var(--sp-4); bottom: var(--sp-5); z-index: var(--z-sticky);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px var(--wa-shadow);
  transition: transform var(--t-mid) var(--ease), background var(--t-fast) var(--ease);
}
.wa-float:hover { background: var(--wa-dark); transform: scale(1.06); color: #fff; }
.wa-float .ico { width: 28px; height: 28px; }
/* En móvil el WhatsApp ya está en la barra fija de abajo: el flotante encima
   del contenido sobra y tapa el final de cada ficha. */
@media (max-width: 767px) { .wa-float { display: none; } }

/* ---------- 19. UTILIDADES DE MEDIA ---------- */
.media-frame {
  border-radius: var(--r-lg); overflow: hidden; background: var(--sand);
  box-shadow: var(--sh-2); border: 5px solid #fff;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--organic { border-radius: var(--r-organic); border-width: 0; box-shadow: var(--sh-3); }

.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first > :first-child { order: -1; }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
}

.pill-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: var(--sp-5); padding: 0; list-style: none; }
.pill-row li { margin: 0; }
.pill {
  display: inline-block; padding: 0.42rem 0.95rem;
  background: var(--teal-50); color: var(--teal-800);
  border: 1px solid var(--teal-200); border-radius: var(--r-pill);
  font-size: 0.86rem; letter-spacing: 0.02em;
}
.pill--sand { background: var(--sand); border-color: var(--sand-dk); color: var(--ink-2); }

/* Aviso. Se distingue por superficie y borde completo, no por una barra
   lateral de color. */
.note {
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink-2); font-size: 0.97rem;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--teal-800); }
.section--sand .note { background: var(--white); }

/* ---------- 20. SELECTOR DE TRATAMIENTO (user-flow guiado) ---------- */
.finder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 3vw, 3.25rem);
  box-shadow: var(--sh-2);
  max-width: 860px;
  margin-inline: auto;
}
.finder__progress {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: var(--sp-5);
}
.finder__dot {
  width: 34px; height: 4px; border-radius: 2px;
  background: var(--sand-dk);
  transition: background var(--t-mid) var(--ease);
}
.finder__dot.is-done { background: var(--teal-500); }
.finder__step-lbl {
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); margin-left: auto;
}

.finder__q { display: none; }
.finder__q.is-active { display: block; animation: finderIn var(--t-slow) var(--ease-out) both; }
@keyframes finderIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.finder__q h3 { font-size: var(--step-2); margin-bottom: var(--sp-5); }

.finder__opts { display: grid; gap: 0.7rem; list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
@media (min-width: 640px) { .finder__opts { grid-template-columns: 1fr 1fr; } }
.finder__opts li { margin: 0; }

.finder__opt {
  width: 100%; min-height: 56px;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  text-align: left; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.finder__opt:hover { border-color: var(--teal-500); background: var(--teal-50); }
.finder__opt:active { transform: scale(0.99); }
.finder__opt[aria-pressed="true"] { border-color: var(--teal-600); background: var(--teal-50); font-weight: 500; }
.finder__opt .ico { width: 20px; height: 20px; color: var(--teal-700); flex: none; }

.finder__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.finder__back {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink-3);
  min-height: 44px; padding: 0 0.5rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.finder__back:hover { color: var(--teal-700); text-decoration: underline; }

.finder__result { display: none; }
.finder__result.is-active { display: block; animation: finderIn var(--t-slow) var(--ease-out) both; }
.finder__result-card {
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  margin-bottom: var(--sp-5);
}
.finder__result-lbl {
  display: block; font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--teal-700); margin-bottom: var(--sp-2);
}
.finder__result-card h3 { color: var(--teal-900); margin-bottom: var(--sp-2); }
.finder__result-card p { color: var(--ink-2); margin-bottom: 0; }

/* ---------- 21. PARALLAX Y EFECTOS DE SCROLL ---------- */

/* Barra de progreso de lectura, anclada bajo el nav */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: calc(var(--z-nav) + 1);
  background: transparent;
  pointer-events: none;
}
/* Se escala en X en lugar de animar el ancho: el ancho provoca recálculo de
   layout en cada frame de scroll, la transformada se resuelve en el compositor. */
.scroll-progress__bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-500), var(--gold));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Capas de parallax. El desplazamiento lo escribe el JS en --py.
   Sin JS, sin desktop o con reduced-motion, el valor queda en 0 y todo
   se ve exactamente en su sitio: el efecto nunca es necesario para leer. */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
}
html.parallax-on [data-parallax] { will-change: transform; }

/* Fondo con textura que se desplaza más lento que el contenido */
.section--parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--parallax .parallax-bg {
  position: absolute; inset: -18% 0;
  z-index: -1;
  background: radial-gradient(60% 55% at 22% 28%, rgba(169, 224, 225, 0.5), transparent 65%),
              radial-gradient(50% 50% at 82% 72%, rgba(var(--blush-rgb), 0.55), transparent 68%);
  transform: translate3d(0, var(--py, 0px), 0);
  pointer-events: none;
}

/* Zoom lento de la imagen dentro de su marco (efecto Ken Burns al scrollear) */
.zoom-scroll { overflow: hidden; }
.zoom-scroll img {
  transform: scale(var(--zs, 1.06));
  transition: transform 120ms linear;
}

/* Revelado de imagen con cortina.
   Solo existe si el JS arrancó (html.js). Sin JS la foto se ve desde el
   primer momento: la animación nunca decide si el contenido es visible. */
.curtain { position: relative; overflow: hidden; }
html.js .curtain::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: var(--cream);
  transform: scaleX(1); transform-origin: right center;
  transition: transform var(--t-slower) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.js .curtain.is-in::after { transform: scaleX(0); }

/* Encabezado que se fija mientras la columna acompañante hace scroll */
@media (min-width: 900px) {
  .sticky-col { position: sticky; top: 110px; align-self: start; }
}

/* Contador animado */
.count-up { font-variant-numeric: tabular-nums; }

/* ---------- 22. ANIMACIÓN DE ENTRADA ----------
   El estado por defecto es visible. El punto de partida oculto solo se aplica
   cuando html.js está presente, es decir cuando hay un IntersectionObserver
   que va a devolverlo a su sitio. Si el JS falla, no carga o el navegador es
   un rastreador sin scroll, la página se lee completa igual.
   Los títulos y los textos no se animan: solo entran las piezas que llegan
   (imágenes, tarjetas, listas), y con desplazamientos cortos. */
.reveal { opacity: 1; transform: none; }

html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Variantes de entrada, por si la dirección aporta sentido espacial */
html.js .reveal--left { transform: translateX(-22px); }
html.js .reveal--right { transform: translateX(22px); }
html.js .reveal--scale { transform: scale(0.965); }
html.js .reveal--left.is-in,
html.js .reveal--right.is-in,
html.js .reveal--scale.is-in { transform: none; }

/* Toda la capa de movimiento decorativo se apaga si el sistema lo pide */
@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;
    scroll-behavior: auto !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .hero__blob { animation: none; }
  [data-parallax], .section--parallax .parallax-bg { transform: none !important; }
  .zoom-scroll img { transform: none !important; }
  html.js .curtain::after { display: none; }
  .scroll-progress { display: none; }
}

/* ---------- 23. IMPRESIÓN ---------- */
@media print {
  .nav, .drawer, .mobile-bar, .wa-float, .cta, .footer__social, .scroll-progress,
  .cart-fab, .cart, .buscador, .add-btn { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .curtain::after { display: none; }
}

/* ==========================================================================
   24. RESERVA POR WHATSAPP — botón por servicio, selección y buscador
   La persona arma su propia lista recorriendo el sitio y la manda entera en
   un solo mensaje. Todo esto lo monta js/reservas.js: sin JS no aparece nada
   y las páginas se leen igual que siempre.
   ========================================================================== */

/* ---------- 21.1 Botón "Agregar" al lado de cada servicio ---------- */
.add-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.85rem; min-height: 38px;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.01em; white-space: nowrap; cursor: pointer;
  color: var(--teal-800); background: var(--white);
  border: 1px solid var(--sand-dk); border-radius: var(--r-pill);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.add-btn:hover { background: var(--teal-50); border-color: var(--teal-200); }
.add-btn:active { transform: scale(0.96); }
.add-btn .ico { width: 15px; height: 15px; flex: none; color: var(--teal-600); }
.add-btn.is-in {
  background: var(--teal-700); border-color: var(--teal-700); color: #fff;
}
.add-btn.is-in .ico { color: #fff; }
.add-btn.is-in:hover { background: var(--teal-800); border-color: var(--teal-800); }

/* Contenedor del control: es botón hasta que el servicio está elegido, y
   después pasa a ser un contador para poder pedir dos o más del mismo. */
.add-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.add-wrap__ok {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.74rem; letter-spacing: 0.04em; color: var(--teal-700);
}
.add-wrap__ok .ico { width: 13px; height: 13px; }

.qty {
  display: inline-flex; align-items: center;
  background: var(--white); border: 1px solid var(--teal-200); border-radius: var(--r-pill);
  overflow: hidden;
}
.qty__btn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; color: var(--teal-800);
  transition: background var(--t-fast) var(--ease);
}
.qty__btn:hover { background: var(--teal-50); }
.qty__btn .ico { width: 15px; height: 15px; }
.qty__num {
  min-width: 2ch; padding: 0 0.35rem; text-align: center;
  font-size: 0.98rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--teal-900);
}
.qty--sm .qty__btn { width: 32px; height: 32px; }
.qty--sm .qty__num { font-size: 0.92rem; }

/* En las tarjetas, abajo a la izquierda, alineado con el resto de los CTA */
.svc .add-wrap { margin-top: auto; align-self: flex-start; align-items: flex-start; padding-top: var(--sp-4); }
.svc .arrow-link + .add-wrap { padding-top: var(--sp-3); }

@media (max-width: 599px) {
  .menu-list__rail {
    margin-left: 0; width: 100%;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--sp-3); padding-top: var(--sp-2);
  }
  .menu-list__rail .add-wrap { align-items: flex-end; }
}

/* ---------- 21.2 Botón flotante de la selección ---------- */
.cart-fab {
  position: fixed; left: var(--sp-4); bottom: var(--sp-5);
  z-index: var(--z-sticky);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem; min-height: 52px;
  font-family: var(--font-sans); font-size: 0.94rem; font-weight: 500;
  color: #fff; background: var(--teal-700);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--sh-teal);
  transition: background var(--t-fast) var(--ease), transform var(--t-mid) var(--ease);
}
.cart-fab:hover { background: var(--teal-800); transform: translateY(-2px); }
.cart-fab .ico { width: 19px; height: 19px; flex: none; }
.cart-fab__num {
  display: inline-grid; place-items: center;
  min-width: 24px; height: 24px; padding: 0 0.35rem;
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--teal-900); background: var(--teal-200); border-radius: var(--r-pill);
}
/* Sin nada elegido el botón está, pero discreto: no promete un carrito lleno */
.cart-fab:not(.is-active) {
  background: var(--white); color: var(--teal-800);
  border: 1px solid var(--sand-dk); box-shadow: var(--sh-2);
}
.cart-fab:not(.is-active):hover { background: var(--teal-50); }
.cart-fab:not(.is-active) .cart-fab__num { background: var(--sand); color: var(--ink-3); }

/* En móvil la selección vive en la barra fija de abajo: un tercer flotante
   sobre el contenido sería demasiado. */
@media (max-width: 767px) {
  .cart-fab { display: none; }
}

/* ---------- 21.3 Panel de la selección ---------- */
.cart { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; pointer-events: none; }
.cart.is-open { visibility: visible; pointer-events: auto; }
.cart__scrim {
  position: absolute; inset: 0; background: rgba(6, 55, 58, 0.42);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.cart.is-open .cart__scrim { opacity: 1; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  display: flex; flex-direction: column;
  background: var(--cream); border-left: 1px solid var(--sand-dk);
  box-shadow: var(--sh-3);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
}
.cart.is-open .cart__panel { transform: translateX(0); }

.cart__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--sand-dk);
}
.cart__eyebrow {
  margin: 0 0 0.2rem; font-size: 0.68rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--teal-600);
}
.cart__title { margin: 0; font-size: var(--step-2); }
.cart__close {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--sand-dk); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.cart__close:hover { background: var(--teal-50); border-color: var(--teal-200); }
.cart__close .ico { width: 18px; height: 18px; }

.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5); }
.cart__cat {
  margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-sans);
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-700); font-weight: 600;
}
.cart__cat:first-child { margin-top: 0; }
.cart__list { list-style: none; margin: 0; padding: 0; }
.cart__item {
  display: flex; align-items: center; gap: 0.5rem var(--sp-3); flex-wrap: wrap;
  padding: 0.7rem 0; border-bottom: 1px solid var(--sand-dk);
}
.cart__item-txt { flex: 1 1 160px; min-width: 0; }
.cart__item-nom { margin: 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3; color: var(--ink); }
.cart__item-dur { margin: 0.15rem 0 0; font-size: var(--step--1); color: var(--ink-3); }
.cart__quitar {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--sand-dk); border-radius: 50%;
  color: var(--ink-3); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cart__quitar:hover { background: var(--sand); color: var(--ink); }
.cart__quitar .ico { width: 13px; height: 13px; }

.cart__vacio { text-align: center; padding: var(--sp-6) var(--sp-2); }
.cart__vacio p { margin-bottom: var(--sp-3); }
.cart__vacio .btn { margin-top: var(--sp-3); }

.cart__foot {
  padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sand-dk); background: var(--white);
}
.cart__label { display: block; font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0.35rem; }
.cart__nota {
  width: 100%; padding: 0.65rem 0.8rem; margin-bottom: var(--sp-3);
  font-family: var(--font-sans); font-size: 0.94rem; color: var(--ink);
  background: var(--cream); border: 1px solid var(--sand-dk); border-radius: var(--r-sm);
  resize: vertical;
}
.cart__nota:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cart__resumen { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--ink-3); }
.cart__acciones {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  align-items: center; justify-content: space-between;
  margin-top: var(--sp-3); font-size: var(--step--1);
}
.cart__vaciar {
  background: none; border: 0; padding: 0; cursor: pointer; min-height: 44px;
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px;
}
.cart__vaciar:hover { color: var(--ink); }
.cart__agenda { color: var(--teal-700); }
.btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* ---------- 21.4 Buscador (panel) ---------- */
.buscador { position: fixed; inset: 0; z-index: var(--z-top); visibility: hidden; pointer-events: none; }
.buscador.is-open { visibility: visible; pointer-events: auto; }
.buscador__scrim {
  position: absolute; inset: 0; background: rgba(6, 55, 58, 0.45);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.buscador.is-open .buscador__scrim { opacity: 1; }
.buscador__panel {
  position: relative; margin: min(9vh, 90px) auto 0;
  width: min(680px, calc(100% - 2 * var(--gutter)));
  max-height: min(74vh, 640px);
  display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid var(--sand-dk); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(0.985);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.buscador.is-open .buscador__panel { opacity: 1; transform: translateY(0) scale(1); }

.buscador__campo {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5); background: var(--white);
  border-bottom: 1px solid var(--sand-dk);
}
.buscador__lupa { width: 20px; height: 20px; flex: none; color: var(--teal-600); }
.buscador__input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--step-1); color: var(--ink);
}
.buscador__input::placeholder { color: var(--ink-3); opacity: 1; }
.buscador__input:focus { outline: none; }
.buscador__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscador__cerrar {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--sand-dk); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer;
}
.buscador__cerrar:hover { background: var(--teal-50); border-color: var(--teal-200); }
.buscador__cerrar .ico { width: 17px; height: 17px; }
.buscador__ayuda {
  margin: 0; padding: 0.6rem var(--sp-5); background: var(--sand);
  font-size: var(--step--1); color: var(--ink-3);
  border-bottom: 1px solid var(--sand-dk);
}
.buscador__res { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-5) var(--sp-5); }

.busq-titulo {
  margin: 0 0 var(--sp-3); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal-700); font-weight: 600;
}
.busq-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.busq-cat {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0.45rem 0.95rem; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--sand-dk);
  color: var(--ink-2); text-decoration: none; font-size: 0.92rem;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.busq-cat:hover { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-800); }

.busq-list { list-style: none; margin: 0; padding: 0; }
.busq-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: 0.75rem 0; border-bottom: 1px solid var(--sand-dk);
}
.busq-item:last-child { border-bottom: 0; }
.busq-item__txt { flex: 1 1 240px; min-width: 0; }
.busq-item__nom { margin: 0; font-family: var(--font-display); font-size: 1.06rem; color: var(--ink); }
.busq-item__meta { margin: 0.1rem 0 0; font-size: var(--step--1); color: var(--teal-700); }
.busq-item__desc {
  margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted);
  max-width: 60ch;
}
.busq-item.is-picked { background: var(--teal-50); box-shadow: inset 3px 0 0 var(--teal-600); border-radius: var(--r-sm); padding-inline: 0.6rem; }
.busq-item__acc { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.busq-item__ver {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: var(--step--1); color: var(--teal-700); text-decoration: none; white-space: nowrap;
}
.busq-item__ver:hover { text-decoration: underline; text-underline-offset: 3px; }
.busq-item__ver .ico { width: 14px; height: 14px; }

.busq-vacio { text-align: center; padding: var(--sp-6) var(--sp-2); }
.busq-vacio p { margin-bottom: var(--sp-3); }

@media (max-width: 599px) {
  .buscador__panel { margin-top: 0; width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .busq-item__acc { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .cart__panel, .buscador__panel, .cart-fab, .add-btn, .menu-list li, .qty__btn { transition: none; }
}

/* ==========================================================================
   25. MOVIMIENTO CON INTENCIÓN
   El sitio ya tenía entradas por scroll y parallax. Esta capa cubre lo que
   faltaba: la respuesta a lo que hace la persona. Cada regla existe para
   confirmar una acción o para dar profundidad al pasar el mouse, nunca para
   adornar. Solo transform y opacity; nada dura más de 900 ms.
   ========================================================================== */

:root {
  /* Desaceleración exponencial (ease-out-quart) para confirmaciones. Sin rebote. */
  --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---------- 25.1 Elevación en capa aparte ----------
   Animar box-shadow obliga al navegador a repintar la sombra en cada frame.
   La sombra vive en un ::after y lo único que cambia es su opacidad. */
.card, .svc, .menu-list li { position: relative; }

.card::after, .svc::after, .menu-list li::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.card::after, .svc::after { box-shadow: var(--sh-3); }
.menu-list li::after { box-shadow: var(--sh-1); }

@media (hover: hover) {
  .card--link:hover, .card:focus-within,
  .svc:hover, .svc:focus-within { transform: translateY(-4px); }
  .card--link:hover::after, .card:focus-within::after,
  .svc:hover::after, .svc:focus-within::after,
  .menu-list li:hover::after { opacity: 1; }
}
.card, .svc { transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease); }

/* ---------- 25.2 Confirmación al elegir un servicio ----------
   Cuando alguien agrega algo, tres cosas se lo confirman: el control cambia,
   la fila se marca y el contador de la selección salta. Sin eso, en una lista
   de veintiséis tratamientos no se sabe si el toque llegó. */

@keyframes ag-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.cart-fab__num.is-pop, .mobile-bar__num.is-pop {
  animation: ag-pop 420ms var(--ease-spring);
}

@keyframes ag-qty-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
.qty { animation: ag-qty-in 220ms var(--ease-spring) both; transform-origin: 100% 50%; }
.qty--sm { transform-origin: 50% 50%; }

@keyframes ag-ok-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.add-wrap__ok { animation: ag-ok-in 300ms var(--ease-out) 60ms both; }

/* Destello del borde teal en la fila o la tarjeta recién agregada */
@keyframes ag-flash {
  from { box-shadow: inset 4px 0 0 var(--teal-600), 0 0 0 6px rgba(10, 154, 158, 0.16); }
  to   { box-shadow: inset 3px 0 0 var(--teal-600), 0 0 0 0 rgba(10, 154, 158, 0); }
}
.menu-list li.is-just-added { animation: ag-flash 620ms var(--ease-out); }
@keyframes ag-flash-card {
  from { box-shadow: 0 0 0 6px rgba(10, 154, 158, 0.16); }
  to   { box-shadow: 0 0 0 0 rgba(10, 154, 158, 0); }
}
.svc.is-just-added { animation: ag-flash-card 620ms var(--ease-out); }

/* Botón: presión perceptible. Es lo que más se toca del sitio. */
.add-btn { transform: translateY(0); }
@media (hover: hover) {
  .add-btn:hover { transform: translateY(-2px); }
}
.add-btn:active { transform: scale(0.94); transition-duration: 80ms; }
.qty__btn:active { transform: scale(0.88); transition-duration: 80ms; }

/* Onda al tocar: en táctil no hay hover y este es el único aviso de que el
   dedo dio en el botón. */
.add-btn, .qty__btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; opacity: 0.28;
  transform: translate(-50%, -50%); pointer-events: none;
  animation: ag-ripple 560ms var(--ease-out) forwards;
}
@keyframes ag-ripple {
  to { transform: translate(-50%, -50%) scale(22); opacity: 0; }
}

/* ---------- 25.3 Listas que aparecen escalonadas ----------
   Los resultados del buscador y los ítems de la selección entran de a uno.
   Un bloque que aparece entero de golpe se lee como un salto; escalonado se
   lee como una lista que se va armando. */
@keyframes ag-item-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
.busq-item, .cart__item, .busq-cat {
  animation: ag-item-in 340ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}
.cart__item { animation-duration: 280ms; animation-delay: calc(var(--i, 0) * 26ms); }
.busq-cat { animation-duration: 300ms; animation-delay: calc(var(--i, 0) * 24ms); }

/* ---------- 25.4 Links de contenido con subrayado que entra ----------
   El origen del transform cambia entre hover y reposo: la línea entra por la
   izquierda y sale por la derecha, así el gesto se lee continuo. */
.arrow-link { position: relative; }
.arrow-link::after {
  content: ''; position: absolute; left: 0; right: 22px; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t-mid) var(--ease-out);
}
@media (hover: hover) {
  .arrow-link:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}

/* ---------- 25.5 Detalles de la barra superior ---------- */
@media (hover: hover) {
  .nav__search:hover .ico { transform: scale(1.12) rotate(-6deg); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.975); }
  .cart-fab:hover .ico { transform: scale(1.1); }
}
.nav__search .ico, .cart-fab .ico { transition: transform var(--t-fast) var(--ease-spring); }

/* La selección vacía es discreta; con algo adentro, entra empujando. */
@keyframes ag-fab-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cart-fab.is-active { animation: ag-fab-in 380ms var(--ease-out); }

/* ---------- 25.6 Nada de esto es imprescindible ----------
   Con movimiento reducido queda el cambio de estado, que sí informa, y se van
   los desplazamientos y los rebotes. */
@media (prefers-reduced-motion: reduce) {
  .qty, .add-wrap__ok, .busq-item, .cart__item, .busq-cat,
  .cart-fab.is-active, .menu-list li.is-just-added, .svc.is-just-added {
    animation: none !important;
  }
  .ripple { display: none; }
  .card--link:hover, .svc:hover, .btn:hover, .add-btn:hover { transform: none; }
  .arrow-link::after { display: none; }
}

/* ==========================================================================
   26. CAPA DE MATERIALIDAD Y FÍSICA DE PUNTERO
   Pase de refinamiento. Todo lo de acá es prescindible: sin JS, en táctil o
   con movimiento reducido, la página se lee exactamente igual. Ninguna regla
   introduce un color nuevo ni una sombra fuera de la escala.
   ========================================================================== */

/* ---------- 26.1 Grano ----------
   Una capa fija de ruido sobre todo el documento. Es lo que separa una
   superficie de papel de un rectángulo de color plano: rompe el degradado
   perfecto del crema y del teal, que a pantalla completa se lee sintético.
   Va en un pseudo-elemento FIJO y sin eventos de puntero: al no participar
   del scroll, el navegador la compone una sola vez y no vuelve a pintarla. */
body::after {
  content: '';
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
@media print { body::after { display: none; } }

/* ---------- 26.2 Vidrio con refracción ----------
   El desenfoque solo no alcanza: un vidrio real satura un poco lo que hay
   detrás y devuelve una línea de luz en el canto superior. Son dos detalles
   de un píxel que hacen la diferencia entre "capa con blur" y "material". */
.nav {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.nav::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.buscador__panel {
  /* El panel es opaco: acá el material se firma con la línea de luz del canto,
     no con backdrop-filter (que sobre un fondo sólido no hace nada y encima
     crea una capa de composición de más). */
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------- 26.3 Reflector en el borde de la tarjeta ----------
   El borde se ilumina donde está el cursor, no entero. La luz vive en el
   marco de 1px (mask-composite recorta el relleno), así que no hay ningún
   velo sobre el texto y el contraste medido en el punto 3 no se mueve.
   Sin soporte de máscara compuesta, la regla no se aplica y queda el hover
   de siempre. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  @media (hover: hover) and (min-width: 1025px) {
    .card::before, .svc::before {
      content: ''; position: absolute; inset: 0; z-index: 3;
      border-radius: inherit; padding: 1px;
      pointer-events: none; opacity: 0;
      background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
                  var(--teal-500), rgba(33, 179, 182, 0) 62%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      transition: opacity var(--t-mid) var(--ease);
    }
    .card--link:hover::before, .svc:hover::before { opacity: 1; }
  }
}

/* ---------- 26.4 Botones magnéticos ----------
   El botón se acerca al cursor unos pocos píxeles antes del clic. Se acerca,
   nunca se aleja: un objetivo que escapa del puntero es una broma, no una
   interacción. El JS solo escribe --magx / --magy; el desplazamiento vertical
   del hover se suma acá para que no se pisen dos transform. */
@media (hover: hover) and (min-width: 1025px) {
  .btn[data-magnetic] {
    transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0);
    transition: transform var(--t-mid) var(--ease-out), background var(--t-mid) var(--ease),
                color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  }
  .btn[data-magnetic]:hover {
    transform: translate3d(var(--magx, 0px), calc(var(--magy, 0px) - 2px), 0);
  }
  .btn[data-magnetic]:active {
    transform: translate3d(var(--magx, 0px), var(--magy, 0px), 0) scale(0.975);
  }
  /* Mientras el puntero está encima, el botón sigue al cursor sin suavizado:
     una transición acá haría que persiga con retraso. */
  .btn[data-magnetic].is-pulling { transition: none; }
}

/* ---------- 26.5 Grilla editorial ----------
   Tres columnas idénticas y alineadas al milímetro leen como plantilla. La
   columna del medio baja, y el recorte de las fotos alterna entre vertical,
   apaisado y 4:3, así que la fila tiene un ritmo propio sin perder la grilla.
   Por debajo de 900px vuelve a ser una columna limpia. */
@media (min-width: 900px) {
  .grid--editorial {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .grid--editorial > :nth-child(3n+2) { margin-top: clamp(1.25rem, 3vw, 3rem); }
  .grid--editorial > :nth-child(3n+1) .card__media { aspect-ratio: 4/5; }
  .grid--editorial > :nth-child(3n+3) .card__media { aspect-ratio: 16/11; }
}

/* ---------- 26.6 Canales de contacto sin caja ----------
   Eran tres tarjetas idénticas en fila: el formato que delata una plantilla.
   La caja no aportaba nada acá —no hay que elevar nada por encima de nada—,
   así que lo que separa un canal del siguiente es una línea de 1px y el aire.
   Queda una tabla de tres filas legible de un vistazo, con la acción de cada
   canal alineada a la derecha en escritorio. */
.channels {
  border-top: 1px solid var(--border);
}
.channels > .channel {
  display: grid;
  gap: var(--sp-3) clamp(1rem, 0.6rem + 1.6vw, 2.25rem);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.channel__ico { color: var(--teal-700); line-height: 0; }
.channel__ico .ico { width: 28px; height: 28px; }
.channel__body h3 { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.channel__body p { margin-bottom: 0; }
.channel .btn { justify-self: start; }

@media (min-width: 760px) {
  .channels > .channel {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
  }
  .channel__ico { align-self: start; margin-top: 0.35rem; }
  .channel .btn { justify-self: end; }
}

/* ---------- 26.7 Testimonios en mampostería ----------
   Las opiniones tienen largos muy distintos. En grilla, la fila la marca la
   más larga y las otras quedan con un hueco muerto abajo. En columnas cada
   cita ocupa lo que necesita y el bloque se cierra parejo. */
@media (min-width: 900px) {
  .quotes-masonry {
    display: block;
    column-count: 3;
    column-gap: var(--sp-5);
  }
  .quotes-masonry > .quote {
    display: block; height: auto;
    break-inside: avoid; -webkit-column-break-inside: avoid;
    margin: 0 0 var(--sp-5);
  }
  .quotes-masonry > .quote .quote__text { flex: none; }
}

/* ---------- 26.8 Nada de esto informa ----------
   Con movimiento reducido se van la persecución del cursor y el reflector.
   El grano se queda: es textura, no movimiento. */
@media (prefers-reduced-motion: reduce) {
  .btn[data-magnetic] { transform: none !important; }
  .card::before, .svc::before { display: none; }
}


/* ---------- 27. GALERÍA DE FOTOS REALES + VISOR ----------
   Fotos propias del centro (septiembre 2026). Grilla de columnas tipo
   mampostería: cada foto conserva su proporción (vertical 4:5, apaisada 3:2),
   así nada queda recortado a la fuerza y la galería no deja huecos.
   Cada foto es un enlace a su versión grande: sin JS abre la imagen sola;
   con JS abre el visor (<dialog>), con teclado, flechas y gesto de deslizar. */
.gallery--masonry {
  display: block;
  columns: var(--cols, 4) var(--colw, 220px);
  column-gap: var(--sp-4);
}
.gallery--masonry figure {
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--sp-4);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--sh-1);
  isolation: isolate;
}
.gallery--masonry img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.gallery--masonry .is-wide img { aspect-ratio: 3/2; }
.gallery__link { display: block; color: inherit; text-decoration: none; cursor: zoom-in; }
.gallery__link:focus-visible { outline-offset: -5px; box-shadow: inset 0 0 0 8px var(--focus-halo); }
.gallery--masonry figcaption {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  max-width: calc(100% - 2 * var(--sp-3));
  padding: 0.28rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(251, 248, 245, 0.93);
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.35;
  letter-spacing: 0.01em;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(28, 36, 38, 0.12);
}
@media (hover: hover) {
  .gallery--masonry figure:hover img { transform: scale(1.045); }
}
@media (max-width: 599px) {
  .gallery--masonry { columns: 2; column-gap: var(--sp-3); }
  .gallery--masonry figure { margin-bottom: var(--sp-3); border-radius: var(--r-sm); }
  .gallery--masonry figcaption { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 0.2rem 0.55rem; font-size: 0.78rem; }
}

/* Visor */
.lightbox {
  --focus-ring: #a9e0e1;
  --focus-halo: rgba(6, 55, 58, 0.9);
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(6, 30, 32, 0.95);
  color: #fff;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(6, 30, 32, 0.6); }
.lightbox[open] { animation: lb-in var(--t-mid) var(--ease-out); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 4.5rem clamp(1rem, 7vw, 6.5rem) 5rem;
  touch-action: pan-y;
}
.lightbox__img {
  /* Medidas explícitas del viewport: el 100% de una celda de grid con alto
     automático no se resuelve y la foto se salía por abajo. */
  max-width: min(100%, calc(100vw - 2 * clamp(1rem, 7vw, 6.5rem)));
  max-height: calc(100vh - 9.5rem);
  max-height: calc(100dvh - 9.5rem);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.lightbox__img.is-loading { opacity: 0; transform: scale(0.985); }
.lightbox__btn {
  position: absolute; z-index: 2;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); }
.lightbox__btn .ico { width: 20px; height: 20px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev, .lightbox__next { top: 50%; margin-top: -24px; }
.lightbox__prev { left: 16px; }
.lightbox__prev .ico { transform: rotate(180deg); }
.lightbox__next { right: 16px; }
.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none;
  padding: 1.1rem 5rem calc(1.1rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.35rem 1rem;
  text-align: center; font-size: 0.95rem;
}
.lightbox__caption { color: #fff; }
.lightbox__count { color: var(--teal-200); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
@media (max-width: 599px) {
  .lightbox__stage { padding: 4rem 0.75rem 5.5rem; }
  .lightbox__img { max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 9.5rem); max-height: calc(100dvh - 9.5rem); }
  .lightbox__prev, .lightbox__next { top: auto; margin-top: 0; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .lightbox__bar { padding-bottom: calc(1.6rem + env(safe-area-inset-bottom)); font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox[open] { animation: none; }
  .lightbox__img { transition: none; }
  .gallery--masonry img { transition: none; }
}

/* Pares de fotos junto a un texto: siempre dos columnas. Con el minmax de
   .grid--2 (320px) la mitad de un .split no alcanza y las fotos se apilaban
   en una sola columna larguísima. */
.grid--photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Galería "bento" de Coaching de imagen personal: una foto por servicio, sin repetir.
   La principal (coaching de imagen) ocupa dos filas; las otras seis
   completan la grilla de 4 columnas (2 en móvil) sin dejar huecos. */
.gallery--bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.gallery--bento figure {
  position: relative; margin: 0;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--sand); box-shadow: var(--sh-1); isolation: isolate;
}
.gallery--bento img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4/5; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.gallery--bento .is-tall { grid-row: span 2; }
.gallery--bento .is-tall .gallery__link { position: absolute; inset: 0; }
.gallery--bento .is-tall img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.gallery--bento figcaption {
  position: absolute; z-index: 1; left: var(--sp-3); bottom: var(--sp-3);
  max-width: calc(100% - 2 * var(--sp-3));
  padding: 0.28rem 0.75rem; border-radius: var(--r-pill);
  background: rgba(251, 248, 245, 0.93); color: var(--ink);
  font-size: var(--step--1); line-height: 1.35; letter-spacing: 0.01em;
  pointer-events: none; box-shadow: 0 2px 10px rgba(28, 36, 38, 0.12);
}
@media (hover: hover) { .gallery--bento figure:hover img { transform: scale(1.045); } }
@media (max-width: 599px) {
  .gallery--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .gallery--bento figure { border-radius: var(--r-sm); }
  .gallery--bento figcaption { left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 0.2rem 0.55rem; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { .gallery--bento img { transition: none; } }

/* Subtítulo bajo el h2 de una sección (p. ej. "Qué vas a aprender" en
   colorimetría). Misma serif en itálica y color de marca: se lee como
   continuación del título, no como una etiqueta encima. */
.section-head__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--brand);
  margin: calc(var(--sp-3) * -1) 0 var(--sp-4);
}
.section-head--center .section-head__sub { margin-inline: auto; }

/* ---------- 28. OPINIONES (agenda online + Google) ---------- */
.rating-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--sp-4); max-width: 760px; margin: 0 auto var(--sp-6);
}
.rating-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
a.rating-card:hover { border-color: var(--teal-200); box-shadow: var(--sh-2); transform: translateY(-2px); }
.rating-card__score {
  font-family: var(--font-display); font-size: var(--step-4); line-height: 1;
  color: var(--teal-700); font-weight: 600; min-width: 2.2ch; text-align: center;
}
.rating-card__body { display: flex; flex-direction: column; gap: 0.15rem; }
.rating-card__lbl { font-size: 0.95rem; color: var(--ink-2); }
.rating-card__lbl b { color: var(--ink); font-weight: 600; }
.rating-card__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; color: var(--teal-700); font-weight: 500; }
.rating-card__link .ico { width: 14px; height: 14px; transition: transform var(--t-mid) var(--ease); }
a.rating-card:hover .rating-card__link .ico { transform: translateX(3px); }

.filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: var(--sp-6); }
.filter-row[hidden] { display: none; }
.filter-chip {
  min-height: 44px; padding: 0.5rem 1.05rem;
  border-radius: var(--r-pill); border: 1px solid var(--sand-dk);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 0.925rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.filter-chip:hover { border-color: var(--teal-600); color: var(--teal-800); }
.filter-chip[aria-pressed="true"] { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }

.quote__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; margin-bottom: var(--sp-3); }
.quote__top .quote__stars { margin-bottom: 0; }
.quote__tag {
  font-size: 0.8rem; line-height: 1.3; color: var(--teal-800);
  background: var(--teal-50); border-radius: var(--r-pill); padding: 0.22rem 0.65rem;
}
.quote__avatar--google { background: var(--blush); color: var(--gold-deep); }
.quote[hidden] { display: none !important; }
.quotes-more { text-align: center; margin-top: var(--sp-5); }
.quotes-more[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rating-card, .rating-card__link .ico { transition: none; }
  .rating-card:hover { transform: none; }
}

/* ---------- 29. KINESIOLOGÍA ----------
   Encabezado con foto al costado, tarjetas de "¿en qué te ayudamos?" y la
   ficha de la profesional. */
@media (min-width: 900px) {
  .pagehead__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
}
.pagehead__media { margin-top: var(--sp-6); }
@media (min-width: 900px) { .pagehead__media { margin-top: 0; } }
.pagehead__media .media-frame { max-width: 520px; margin-inline: auto; }

.help-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.help-card p { margin-bottom: 0; }

.pro-card {
  display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); align-items: center;
  max-width: 960px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
@media (min-width: 720px) { .pro-card { grid-template-columns: auto 1fr; } }
.pro-card__avatar {
  width: clamp(96px, 70px + 6vw, 150px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--teal-50), var(--blush));
  color: var(--teal-700); font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem); letter-spacing: 0.02em;
  box-shadow: var(--sh-2);
}
.pro-card__body h2 { margin-bottom: var(--sp-2); }
.pro-card__body .lead { margin-bottom: var(--sp-3); }

/* ---------- 30. TARJETAS CON FOTO (.svc--media) ----------
   La foto ocupa todo el ancho de la tarjeta, arriba, pegada a los bordes. */
.svc--media { --svc-pad: clamp(1.35rem, 1rem + 1.2vw, 2.25rem); overflow: hidden; }
.svc__media {
  margin: calc(var(--svc-pad) * -1) calc(var(--svc-pad) * -1) var(--sp-5);
  aspect-ratio: 16/10; overflow: hidden; background: var(--sand);
}
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .svc--media:hover .svc__media img { transform: scale(1.04); } }
.svc--media > .pill { margin-top: 0; }

/* Foto de la profesional en la ficha de kinesiología */
.pro-card__photo {
  margin: 0; width: clamp(180px, 140px + 10vw, 280px); aspect-ratio: 4/5;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); background: var(--sand);
  justify-self: center;
}
.pro-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
@media (prefers-reduced-motion: reduce) { .svc__media img { transition: none; } }

/* ==========================================================================
   31. SERVICIOS EN BENTO (solo portada, .grid--bento)
   Diez áreas no caben en una grilla de tres iguales sin dejar una huérfana.
   En escritorio: 12 columnas, tamaños distintos, filas que siempre cierran
   en 12, foto a sangre y texto sobre un velo teal oscuro (contraste AA).
   ========================================================================== */
@media (min-width: 900px) {
  .grid--bento {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(17rem, 22vw, 21rem);
    gap: clamp(0.9rem, 1.4vw, 1.5rem);
    align-items: stretch;
  }
  .grid--bento > .card { margin-top: 0; min-height: 0; border: 0; isolation: isolate; }
  .grid--bento > :nth-child(1)  { grid-column: span 5; grid-row: span 2; }
  .grid--bento > :nth-child(2)  { grid-column: span 4; }
  .grid--bento > :nth-child(3)  { grid-column: span 3; }
  .grid--bento > :nth-child(4)  { grid-column: span 4; }
  .grid--bento > :nth-child(5)  { grid-column: span 3; }
  .grid--bento > :nth-child(6)  { grid-column: span 3; }
  .grid--bento > :nth-child(7)  { grid-column: span 5; }
  .grid--bento > :nth-child(8)  { grid-column: span 4; }
  .grid--bento > :nth-child(9)  { grid-column: span 7; }
  .grid--bento > :nth-child(10) { grid-column: span 5; }

  .grid--bento .card__media,
  .grid--bento > :nth-child(n) .card__media { position: absolute; inset: 0; aspect-ratio: auto; z-index: -1; }
  .grid--bento .card__body {
    position: relative; margin-top: auto; flex: 0 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) clamp(1.1rem, 1.6vw, 1.75rem) clamp(1.1rem, 1.6vw, 1.6rem);
    background: linear-gradient(to top, rgba(4, 38, 41, 0.92) 0%, rgba(4, 38, 41, 0.72) 45%, rgba(4, 38, 41, 0) 100%);
  }
  .grid--bento .card__body h3 { color: #fff; font-size: var(--step-2); margin-bottom: 0.35rem; }
  .grid--bento .card__body .card__title-link { color: inherit; }
  .grid--bento .card__body p {
    color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; margin-bottom: var(--sp-3);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .grid--bento > :nth-child(1) .card__body h3,
  .grid--bento > :nth-child(9) .card__body h3 { font-size: var(--step-3); }
  .grid--bento > :nth-child(1) .card__body p,
  .grid--bento > :nth-child(9) .card__body p { -webkit-line-clamp: 4; font-size: var(--step-0); }
  .grid--bento > :nth-child(3) .card__body h3,
  .grid--bento > :nth-child(5) .card__body h3,
  .grid--bento > :nth-child(6) .card__body h3 { font-size: var(--step-1); overflow-wrap: anywhere; }
  .grid--bento > :nth-child(3) .card__body .arrow-link,
  .grid--bento > :nth-child(5) .card__body .arrow-link,
  .grid--bento > :nth-child(6) .card__body .arrow-link { font-size: 0.92rem; }
  .grid--bento .card__body .arrow-link { color: var(--teal-200); margin-top: 0; }
  .grid--bento .card--link:hover { transform: none; }
  .grid--bento .card--link:hover .arrow-link { color: #fff; }
}

/* ==========================================================================
   32. RENDIMIENTO Y COMODIDAD EN MÓVIL
   Todo lo de esta sección quita trabajo al teléfono o mejora el uso con el
   dedo. Nada cambia el diseño en escritorio.
   ========================================================================== */

/* 32.1 Toque: sin el flash gris de Android y con respuesta propia al presionar. */
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .card--link:active { transform: scale(0.985); transition: transform 90ms var(--ease); }
  .nav__burger:active, .drawer__close:active, .buscador__cerrar:active { background: var(--teal-50); transform: scale(0.96); }
  .drawer__nav a:active, .nav__menu a:active, .chip:active { background: var(--teal-50); }
}

/* 32.2 Scroll liviano. El desenfoque detrás del nav fijo y de la barra
   inferior se recalcula en cada frame de scroll y en gamas medias se nota
   como tirones. En pantallas táctiles o angostas, fondo casi opaco sin blur:
   visualmente es casi igual y el scroll queda libre. La capa de grano
   (imperceptible en una pantalla chica) también se apaga. */
@media (max-width: 899px), (hover: none) {
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 248, 245, 0.97); }
  .mobile-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(251, 248, 245, 0.98); }
  body::after { display: none; }
}

/* 32.3 Renderizado bajo demanda. Desde la tercera sección, el navegador no
   calcula layout ni pinta lo que está lejos de la pantalla hasta que se
   acerca. La portada en móvil mide ~13.000 px: esto recorta mucho trabajo de
   la carga inicial. contain-intrinsic-size reserva un alto estimado y luego
   recuerda el real (auto), así la barra de scroll no salta. */
.section ~ .section ~ .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* 32.4 Altura real de pantalla en móviles (la barra de direcciones de iOS y
   Android hace que 100vh quede más alto que lo visible). */
@media (max-width: 640px) {
  .buscador__panel { max-height: 100dvh; height: 100dvh; }
}

/* 32.5 Servicios en móvil: tarjeta horizontal compacta. Antes cada una
   medía ~520 px (foto 4:3 + texto) y las diez sumaban ~5.600 px de scroll.
   Ahora son filas de ~150 px: foto a la izquierda, título, dos líneas y la
   flecha. Toda la tarjeta sigue siendo un solo enlace táctil. */
@media (max-width: 599px) {
  .grid--bento { gap: 0.75rem; }
  .grid--bento > .card { flex-direction: row; min-height: 9.25rem; border-radius: var(--r-md); }
  .grid--bento .card__media { flex: 0 0 34%; aspect-ratio: auto; position: relative; }
  .grid--bento .card__media img { position: absolute; inset: 0; }
  .grid--bento .card__body { padding: 0.9rem 1rem 0.85rem; justify-content: center; }
  .grid--bento .card__body h3 { font-size: 1.12rem; margin-bottom: 0.2rem; line-height: 1.25; }
  .grid--bento .card__body p {
    font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.35rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .grid--bento .card__body .arrow-link { min-height: 28px; font-size: 0.9rem; }
}

/* 32.6 Opiniones en móvil: carrusel horizontal con snap. Doce reseñas
   apiladas eran ~4.400 px; deslizando de costado queda en una pantalla.
   La siguiente tarjeta asoma a la derecha y eso ya avisa que hay más. En la
   página de Opiniones la lista sigue vertical (no lleva --swipe). */
@media (max-width: 899px) {
  .quotes-masonry--swipe {
    display: flex; gap: var(--sp-4);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 1rem;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .quotes-masonry--swipe::-webkit-scrollbar { display: none; }
  .quotes-masonry--swipe > .quote { flex: 0 0 min(84%, 360px); margin: 0; scroll-snap-align: start; height: auto; }
  html.js .quotes-masonry--swipe > .reveal { opacity: 1; transform: none; }
  .quotes-masonry--swipe:focus-visible { outline-offset: -3px; }
  .swipe-hint { display: flex; }
}
.swipe-hint {
  display: none; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0 0 var(--sp-4); font-size: var(--step--1); color: var(--ink-3);
}
.swipe-hint .ico { width: 16px; height: 16px; color: var(--teal-600); }

/* 32.7 Barra de progreso de lectura atada al scroll por CSS (Chrome, Edge,
   Android). Corre en el compositor: cero trabajo del hilo principal por
   frame. Safari y Firefox siguen con el motor JS de siempre. */
@supports (animation-timeline: scroll()) {
  .scroll-progress__bar { animation: ag-progress linear both; animation-timeline: scroll(root block); }
  @keyframes ag-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) { .scroll-progress__bar { animation: none; transform: scaleX(0); } }
}

/* ==========================================================================
   33. MENÚ DE SERVICIOS AGRUPADO (mega menú) Y DRAWER CON SUBPÁGINAS
   Con la arquitectura SEO cada área tiene su página y sus páginas hijas.
   En escritorio el desplegable muestra las áreas en tres columnas, cada una
   con sus hijas debajo; en el móvil el drawer lista todo, con sangría.
   ========================================================================== */
.nav__menu--mega {
  left: -1rem; transform: translateY(-6px);
  width: min(720px, calc(100vw - 2rem)); min-width: 0;
  padding: 0.9rem 0.9rem 0.6rem;
}
.nav__item.is-open .nav__menu--mega { transform: translateY(0); }
.mega__grid { columns: 3; column-gap: 0.75rem; }
.mega__group { break-inside: avoid; padding: 0.15rem 0 0.5rem; }
.nav__menu .mega__hub { font-weight: 500; color: var(--ink); }
.mega__hub--label {
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
  padding: 0.62rem 0.8rem; min-height: 44px; font-size: 0.94rem; font-weight: 500; color: var(--ink);
}
.mega__hub--label .ico { width: 17px; height: 17px; color: var(--teal-600); flex: none; }
.mega__kids { list-style: none; margin: -0.2rem 0 0; padding: 0 0 0 1.95rem; }
.mega__kids li { margin: 0; }
.nav__menu .mega__kids a { min-height: 34px; padding: 0.32rem 0.6rem; font-size: 0.9rem; }
.nav__menu .mega__all {
  justify-content: center; margin-top: 0.35rem; border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--teal-800); font-weight: 500;
}
.mega__all .ico { width: 15px; height: 15px; }

.drawer__label {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 0.25rem 0.35rem; font-size: 0.98rem; color: var(--ink); font-weight: 500;
}
.drawer__kids { list-style: none; margin: -0.35rem 0 0.4rem; padding: 0 0 0 2.15rem; }
.drawer__nav .drawer__kids li { border-bottom: 0; }
.drawer__nav .drawer__kids a { min-height: 42px; padding: 0.5rem 0.25rem; font-size: 0.94rem; color: var(--ink-2); }

/* 33.1 Enlaces nuevos de la arquitectura SEO */
.menu-more { margin: var(--sp-3) 0 var(--sp-6); font-size: var(--step--1); color: var(--ink-3); }
.menu-more a { font-weight: 500; }
.menu-list__desc a { font-weight: 500; }
a.quote__tag { text-decoration: none; }
a.quote__tag:hover { text-decoration: underline; }

/* ==========================================================================
   34. PORTADA CON LA JERARQUÍA SEO APROBADA (H1 + 6 H2)
   Títulos que antes eran h2/h3 y ahora son párrafos: se ven igual, pero no
   compiten en la jerarquía de encabezados.
   ========================================================================== */
.pillar__title, .step__title, .finder__qtitle, .finder__rec-title, .card__title, .cta__title {
  font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.012em; color: var(--ink); text-wrap: balance;
}
.pillar__title { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.steps .step__title, .step__title { font-size: var(--step-1); margin-bottom: var(--sp-2); color: var(--ink); }
.finder__qtitle { font-size: var(--step-2); margin-bottom: var(--sp-5); }
.finder__rec-title { font-size: var(--step-2); color: var(--teal-900); margin-bottom: var(--sp-2); }
.card__body .card__title { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.cta__title { font-size: var(--step-3); color: #fff; margin-bottom: var(--sp-4); max-width: none; }
.finder__kicker {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-3);
  line-height: 1.1; color: var(--ink); margin: 0 auto var(--sp-3); text-wrap: balance;
}
.h3-sm { font-size: var(--step-1); margin: var(--sp-5) 0 var(--sp-2); }
.h2-look { font-size: var(--step-3); letter-spacing: -0.022em; line-height: 1.08; }

/* Las tres áreas con texto enlazado, antes de las tarjetas con foto */
.areas { margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.area { padding-top: var(--sp-4); border-top: 1px solid var(--sand-dk); }
.area h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.area p { color: var(--ink-2); }
.area p a { font-weight: 500; }
.area__links { margin: 0; }

/* Tarjeta de Google con encabezado (el número grande es el H3) */
.rating-card__h { margin: 0; font: inherit; line-height: 1; }

/* Bento: el título de cada tarjeta ahora es .card__title */
@media (min-width: 900px) {
  .grid--bento .card__body .card__title { color: #fff; font-size: var(--step-2); margin-bottom: 0.35rem; }
  .grid--bento > :nth-child(1) .card__body .card__title,
  .grid--bento > :nth-child(9) .card__body .card__title { font-size: var(--step-3); }
  .grid--bento > :nth-child(3) .card__body .card__title,
  .grid--bento > :nth-child(5) .card__body .card__title,
  .grid--bento > :nth-child(6) .card__body .card__title { font-size: var(--step-1); overflow-wrap: anywhere; }
}
@media (max-width: 599px) {
  .grid--bento .card__body .card__title { font-size: 1.12rem; margin-bottom: 0.2rem; line-height: 1.25; }
}

/* ---------- 35. ÁREAS TÁCTILES (pantallas táctiles) ----------
   Mínimo ~44 px de zona tocable (WCAG 2.5.5 / guías de iOS y Android) sin
   cambiar el diseño: los botones chicos crecen apenas y los links de texto
   ganan una zona invisible más alta con un ::before (no mueve nada). */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .add-btn { min-height: 44px; padding-inline: 0.95rem; }
  .menu-more a, .menu-list__meta a, .menu-list__desc a, .area p a,
  a.quote__tag {
    position: relative;
  }
  .menu-more a::before, .menu-list__meta a::before, .menu-list__desc a::before, .area p a::before,
  a.quote__tag::before {
    content: ''; position: absolute; inset: -12px -6px;
  }
  /* Links dentro de texto corrido: zona más chica para no pisar la línea de abajo. */
  .area p a::before, .menu-list__desc a::before { inset: -6px -4px; }
}

/* 11.1 Mensajes por WhatsApp en testimonios (sin puntuación, verde suave) */
.quote__avatar--wa { background: #e3f3ea; color: #146b40; }
.quote__top:not(:has(.quote__stars)) { justify-content: flex-start; }

/* ---------- 36. Botón de la selección más visible ----------
   Siempre en teal lleno (también vacío), ícono de bolsa más grande y
   contador en dorado para que se lea de un vistazo. */
.cart-fab, .cart-fab:not(.is-active) {
  background: var(--teal-700); color: #fff; border: 0;
  box-shadow: 0 10px 28px rgba(6, 119, 124, 0.32);
  padding: 0.8rem 1.25rem 0.8rem 1.1rem; min-height: 56px; font-size: 1rem; font-weight: 600;
}
.cart-fab:hover, .cart-fab:not(.is-active):hover { background: var(--teal-800); }
.cart-fab .ico { width: 24px; height: 24px; }
.cart-fab__num, .cart-fab:not(.is-active) .cart-fab__num {
  min-width: 26px; height: 26px; font-size: 0.85rem; font-weight: 700;
  color: var(--teal-900); background: #f2d9a6;
}
.cart-fab:not(.is-active) .cart-fab__num { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mobile-bar__sel .ico { width: 22px; height: 22px; }

/* ---------- 37. Menú móvil: invitación a deslizar ---------- */
.drawer__hint {
  position: sticky; bottom: calc(-1 * (var(--sp-6) + env(safe-area-inset-bottom)));
  margin: auto calc(-1 * var(--sp-5)) calc(-1 * (var(--sp-6) + env(safe-area-inset-bottom)));
  padding: 2.6rem 0 calc(1rem + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  background: linear-gradient(to bottom, rgba(251, 248, 245, 0), var(--cream) 62%);
  pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.drawer.is-open .drawer__panel.has-more:not(.is-scrolled) .drawer__hint {
  opacity: 1; transform: none; transition-delay: 0.45s;
}
.drawer__hint-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.95rem; border-radius: var(--r-pill);
  font-size: 0.85rem; font-weight: 500; color: var(--teal-800);
  background: var(--white); border: 1px solid var(--sand-dk);
  box-shadow: 0 6px 18px rgba(28, 36, 38, 0.08);
}
.drawer__hint-pill .ico { width: 16px; height: 16px; color: var(--teal-600); animation: ag-hint-bob 1.6s var(--ease-out) infinite; }
@keyframes ag-hint-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
/* Asomo: el contenido sube un poco y vuelve, como diciendo "hay más abajo". */
.drawer__panel.is-peek > :not(.drawer__hint) { animation: ag-peek 1s cubic-bezier(.45, 0, .25, 1); }
@keyframes ag-peek { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-46px); } }
@media (prefers-reduced-motion: reduce) {
  .drawer__hint-pill .ico { animation: none; }
  .drawer__panel.is-peek > * { animation: none; }
}