/* ==========================================================================
   Green Garden Wellness Lounge
   sections.css · header, secciones, menú de servicios y footer
   Depende de los tokens de base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--gg-green-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  transition: box-shadow var(--t-base);
}
.header.is-stuck { box-shadow: 0 6px 24px rgba(10, 58, 38, .3); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}

/* El lockup del header va sobre verde oscuro */
.header .lockup,
.header .lockup:hover { color: var(--gg-white); }
.header .lockup__sub { color: var(--gg-amber); }

/* `stretch` iguala el alto del selector al del CTA sin números mágicos: la fila
   la mide el botón, que es el más alto, y el selector se ajusta solo en cada
   breakpoint aunque cambie el padding del botón. */
.header__actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  flex: none;
}

.header__cta { flex: none; }

/* Selector de idioma — desplegable: píldora con icono + código sobre el verde
   oscuro, y panel claro con las dos opciones. El punto ámbar que marca la
   activa es el mismo punto del isotipo. */
.lang {
  position: relative;      /* ancla del panel */
  display: flex;           /* traslada el alto de la fila al disparador */
  flex: none;
}

/* El padding vertical es sólo el respaldo si no hay estirado: con `stretch` el
   alto lo manda la fila y el contenido se centra dentro. */
.lang__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: .45rem .7rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.lang__toggle:hover,
.lang__toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, .13);
  border-color: var(--gg-gold);
  color: var(--gg-white);
}

.lang__icon    { width: 16px; height: 16px; flex: none; }
.lang__chevron { width: 10px; height: 6px; flex: none; transition: transform var(--t-fast); }
.lang__toggle[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }

.lang__code {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}

/* Panel */
.lang__menu {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  z-index: 10;
  min-width: 170px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--gg-white);
  border: 1px solid var(--gg-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.lang.is-open .lang__menu { opacity: 1; transform: none; }

.lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: .6rem .8rem;
  background: transparent;
  border: 0;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lang__option:hover { background: var(--gg-cream); color: var(--gg-green); }

/* El punto: reservado siempre, así el rótulo no se desplaza al cambiar */
.lang__option::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.lang__option[aria-checked="true"] {
  color: var(--gg-green);
  font-weight: 700;
}
.lang__option[aria-checked="true"]::before { background: var(--gg-amber); }

@media (max-width: 480px) {
  .header__inner { gap: var(--space-3); }
  .header__actions { gap: var(--space-2); }
  .header__cta { padding-inline: 1.1rem; letter-spacing: .06em; }
  .lang__toggle { gap: 6px; padding: .4rem .55rem; }
  /* 31px y no 34: el isotipo vectorizado del logotipo oficial es más ancho que
     alto (1000:918) y venía recortado a la tinta, así que a la misma altura de
     caja ocupa ~3px más de fila que el provisional. En el header no sobra ni
     eso — a 360px en español quedaban 14px de holgura y con este ajuste vuelven
     a ser los 17px medidos antes. */
  .lockup__mark { height: 31px; }
  .lockup__name { font-size: 1.125rem; }
  .lockup__sub { font-size: .5625rem; letter-spacing: .2em; }
}

/* El selector se come ~66px de la fila del header, y en un móvil estrecho ese
   ancho salía del lockup: «Green Garden» se partía en dos líneas por debajo de
   390px (medido). Se recupera encogiendo a la vez los tres elementos —lockup,
   selector y CTA— y prohibiendo el salto de línea de la marca. */
@media (max-width: 400px) {
  .header__inner  { gap: var(--space-2); }
  .header__actions { gap: 6px; }

  .header .lockup { gap: var(--space-2); }
  .header .lockup__name,
  .header .lockup__sub { white-space: nowrap; }
  .header .lockup__name { font-size: 1.0625rem; }
  .header .lockup__sub  { font-size: .5rem; letter-spacing: .16em; }

  /* El chevron es el primero en caer: el icono de traducción ya dice que esto
     abre algo, y son 16px que necesita el lockup. */
  .lang__chevron { display: none; }
  .lang__toggle { gap: 5px; padding: .38rem .5rem; }
  .lang__icon { width: 15px; height: 15px; }
  .lang__code { font-size: .625rem; letter-spacing: .08em; }

  .header__cta { padding-inline: .85rem; font-size: var(--fs-xs); }
}

/* Por debajo de 360px ya no dan los tres: se retira el «WELLNESS LOUNGE» del
   header, que el hero repite dos líneas más abajo. */
@media (max-width: 360px) {
  .header .lockup__sub { display: none; }
  .header .lockup__name { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   1 · Hero — portada del menú
   -------------------------------------------------------------------------- */
/* El hero cabe en una pantalla sin scroll: alto = viewport menos el header,
   y todo el ritmo vertical interno se mide en vh además de vw, de modo que en
   una pantalla de portátil (≈800px de alto) los datos de abajo siguen visibles. */
.hero {
  /* Escala vertical del hero — se encoge en pantallas bajas */
  --hero-pad:   clamp(1.25rem, 3.5vh, 3.5rem);
  --hero-gap-1: clamp(0.5rem,  1.4vh, 1rem);
  --hero-gap-2: clamp(0.75rem, 2.2vh, 1.5rem);
  --hero-gap-3: clamp(1rem,    3vh,   2rem);
  --hero-gap-4: clamp(1.25rem, 4vh,   4rem);

  position: relative;
  display: flex;
  align-items: center;
  min-height: 600px;
  min-height: calc(100svh - var(--header-h));
  padding-block: var(--hero-pad) calc(var(--hero-pad) + 1.5rem);
  background: var(--gg-green-deep);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(10, 58, 38, .55) 0%, rgba(10, 58, 38, .88) 72%),
    linear-gradient(180deg, rgba(10, 58, 38, .75) 0%, rgba(10, 58, 38, .45) 40%, rgba(10, 58, 38, .9) 100%);
}

.hero__inner { position: relative; z-index: 1; }

.hero__content {
  max-width: 760px;
  margin-inline: auto;
  color: var(--gg-white);
  text-align: center;
}

.hero__mark {
  width: auto;
  height: clamp(44px, 7vh, 78px);
  margin: 0 auto var(--hero-gap-1);
  color: var(--gg-white);
}

.hero__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.6vw + 2.4vh, 3.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--gg-white);
}
.hero__brand-sub {
  margin: var(--space-2) 0 0;
  font-size: clamp(.75rem, .62rem + .45vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gg-amber);
}

.hero__rule {
  display: block;
  width: clamp(120px, 14vw, 180px);
  height: 2px;
  margin: var(--hero-gap-2) auto;
  background: var(--gg-amber);
}

.hero__title {
  margin-bottom: var(--hero-gap-2);
  color: var(--gg-white);
  font-weight: 500;
  font-size: clamp(2rem, 2.5vw + 2.9vh, 4.75rem);
}

.hero__lead {
  max-width: 64ch;
  text-wrap: balance;
  margin-inline: auto;
  margin-bottom: var(--hero-gap-3);
  color: rgba(255, 255, 255, .86);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--hero-gap-4);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) clamp(1.5rem, 1rem + 3vw, 4rem);
  margin: 0;
  padding: var(--hero-gap-2) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.hero__facts li { display: flex; flex-direction: column; gap: 2px; }
.hero__facts strong {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, .95rem + .55vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--gg-white);
}
.hero__facts span {
  font-size: clamp(.8125rem, .75rem + .2vw, .9375rem);
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gg-amber);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(.5rem, 1.5vh, 1.5rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  transform: translateX(-50%);
}
.hero__scroll span {
  width: 12px; height: 12px;
  border: solid rgba(255, 255, 255, .7);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: nudge 2s infinite;
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .7; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* Móvil: el hero entra completo —marca, titular, CTA y los tres datos— con un
   solo recorte, el botón «Agendar ahora». Reservar sigue a un toque en el CTA
   del header pegajoso, que nunca sale de pantalla; los ~70px que ahorra el botón
   son justo los que dejaban los datos por debajo del pliegue. Todo lo demás
   conserva su escala: tocar además tipografía y gaps vaciaba el hero. */
@media (max-width: 640px) {
  .hero__cta    { display: none; }
  .hero__scroll { display: none; }

  /* Sin pareja, el botón que queda se ve huérfano centrado a su ancho natural */
  .hero__actions .btn { width: min(100%, 320px); }

  /* …y pasa a dorado: es la única acción del hero, el contorno claro lo dejaba
     en segundo plano. En escritorio sigue siendo secundario junto al CTA de
     reserva, así que el cambio vive sólo aquí. */
  .hero__actions .btn--light,
  .hero__actions .btn--light:hover {
    --btn-bg: var(--gg-gold);
    --btn-fg: var(--gg-white);
    --btn-bd: var(--gg-gold);
  }
}

/* Pantallas muy bajas (portátil con dock, móvil apaisado): el isotipo y el
   filete son decorativos — se retiran antes que sacrificar datos o CTA. */
@media (max-height: 620px) and (min-width: 641px) {
  .hero__mark  { display: none; }
  .hero__rule  { margin-block: var(--hero-gap-1); }
  .hero__lead  { display: none; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   2 · Split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
}

.split__media { position: relative; }
.split__media img {
  width: 100%;
  /* Más recta que las fotos del menú: aquí es un retrato grande y el radio de
     28px se leía como un recorte, no como una esquina suave */
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.split__badge {
  position: absolute;
  right: -1rem;
  bottom: 1.75rem;
  padding: var(--space-4) var(--space-5);
  background: var(--gg-green);
  color: var(--gg-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.25;
}
.split__badge em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gg-amber);
}

.split__body p { color: var(--text-muted); }

.checklist {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem;
  background: var(--gg-green);
  border-radius: 50%;
}
.checklist li::after {
  content: "";
  position: absolute;
  left: .4rem; top: .68em;
  width: .32rem; height: .6rem;
  border: solid var(--gg-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* En una sola columna el texto se centra bajo la foto: alineado a la izquierda
   dejaba el filete y el botón descolgados contra el borde. La checklist conserva
   su alineación interna —con el check a la izquierda de cada línea— y es el
   bloque entero el que se centra; centrar cada ítem rompía la columna de checks. */
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .split__badge { right: 1rem; }

  .split__body { text-align: center; }
  .split__body .rule { margin-inline: auto; }
  .split__body p { margin-inline: auto; max-width: 56ch; }

  .checklist {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   3 · Menú de servicios
   -------------------------------------------------------------------------- */

/* Cabecera destacada — evoca la portada del menú impreso */
.menu-head {
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-align: center;
}

.menu-head__eyebrow {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gg-gold-dark);
}

/* Titular a una sola línea en todos los anchos. «Catálogo de Servicios» —el más
   largo de los dos idiomas— mide entre 8.6 y 9.6 veces el tamaño de fuente en
   Fraunces (el eje óptico ensancha los cuerpos pequeños), así que el tramo
   fluido se ata al ancho de ventana en vez de a un `rem + vw`: es lo único que
   lo mantiene dentro del contenedor por debajo de ~640px. A 8vw el texto ocupa
   como mucho el 85% del contenedor a 320px, holgura suficiente para que no
   recorte ni con la Georgia de respaldo. Medido con Chrome headless de 320 a
   1920px en los dos idiomas. */
.menu-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 8vw, 4.75rem);
  font-weight: 400;
  line-height: 1.02;
  color: var(--gg-green);
  white-space: nowrap;
}
.menu-head__title span { display: inline; }

.menu-head__rule {
  display: block;
  width: 150px;
  height: 2px;
  margin: var(--space-5) auto;
  background: var(--gg-gold);
}

.menu-head__lead {
  max-width: 54ch;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

/* Seis servicios en dos filas de tres. Todas las tarjetas son idénticas: sin
   destacadas, sin spans y sin filas huérfanas en ningún breakpoint. */
.services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, .9rem + 1.4vw, 2rem);
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gg-white);
  border: 1px solid var(--gg-line);
  /* Esquina más recta que el radio de marca — a 28px la foto superior se veía
     recortada y el conjunto perdía el aire de menú impreso (igual que la foto
     de «la experiencia», que también bajó a 12px) */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.service:hover,
.service:focus-within {
  transform: translateY(-6px);
  border-color: rgba(201, 162, 104, .6);
  box-shadow: var(--shadow-lg);
}

/* --- Media ---------------------------------------------------------------- */
.service__media { position: relative; overflow: hidden; }

.service__media img {
  width: 100%;
  aspect-ratio: 4 / 3;          /* proporción nativa de las fotos del PDF */
  object-fit: cover;
  transition: transform var(--t-slow);
}
.service:hover .service__media img { transform: scale(1.06); }

/* Velo inferior: asienta la foto sobre el cuerpo blanco de la tarjeta */
.service__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(10, 58, 38, .34), rgba(10, 58, 38, 0));
  pointer-events: none;
}

.service__num {
  position: absolute;
  z-index: 1;
  left: var(--space-4);
  top: var(--space-4);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(10, 58, 38, .82);
  border: 1px solid rgba(201, 162, 104, .65);
  color: var(--gg-cream);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Distintivo ámbar sobre la foto (p. ej. «Desde US$1») */
.service__flag {
  position: absolute;
  z-index: 1;
  right: var(--space-4);
  top: var(--space-4);
  margin: 0;
  padding: .3rem .75rem;
  background: var(--gg-amber);
  color: var(--gg-green-deep);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

/* --- Cuerpo --------------------------------------------------------------- */
.service__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}

/* Título y descripción miden lo mismo en todas las tarjetas —dos y cuatro
   líneas— para que el filete de «Duración y precio» caiga a la misma altura en
   toda la fila. Antes el aire sobrante se acumulaba justo encima del filete y
   una tarjeta de cuatro duraciones lo dejaba un escalón por encima del de su
   vecina de tres. El `line-clamp` es sólo una red: a 4 líneas cabe entera la
   descripción más larga (Normatec, 137 caracteres) en la columna más estrecha
   de este tramo. */
.service__title {
  margin-bottom: var(--space-2);
  min-height: calc(2em * var(--lh-tight));
  font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem);
  text-wrap: balance;
}

.service__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  min-height: calc(4em * 1.55);
  /* 4px de respiro antes del filete. Con subgrid la pista mide justo lo que
     ocupa el texto, así que en la tarjeta más larga de la fila la raya quedaba
     pegada a la última línea. */
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  /* 1.55 en vez del 1.7 del cuerpo: en una columna estrecha la descripción se
     lee mejor apretada, y de paso la reserva de 4 líneas mide 8px menos. */
  line-height: 1.55;
}

/* --- Precios en píldoras -------------------------------------------------- */
/* El aire sobrante de la tarjeta va bajo las píldoras (`margin-bottom: auto` en
   `.service__prices`), no sobre el filete: así el rótulo arranca a la misma
   altura en toda la fila y el botón sigue anclado al pie. La diferencia entre
   una lista de cuatro duraciones y otra de dos se absorbe en el hueco neutro
   que queda antes del botón, donde no hay ninguna línea que delate el desfase. */
.service__meta {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--gg-line);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gg-gold-dark);
}

/* Una fila por duración: en columnas de ~250px las píldoras en línea se
   rompían a tres alturas y estiraban la tarjeta. Apiladas y justificadas
   recuperan la lectura «Tiempo | Precio» del menú impreso. */
.service__prices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
}

.service__prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .45rem;
  padding: .3rem .85rem;
  background: var(--gg-cream);
  border: 1px solid var(--gg-line);
  border-radius: var(--radius-pill);
  line-height: 1.3;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.service:hover .service__prices li {
  background: var(--gg-white);
  border-color: rgba(201, 162, 104, .45);
}

.service__dur {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.service__amt {
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--gg-green);
  font-variant-numeric: tabular-nums;   /* las cifras alinean entre píldoras */
  white-space: nowrap;
}

/* --- Acción --------------------------------------------------------------- */
/* El margen superior es el mínimo: el `auto` de las píldoras añade el resto */
.service__cta { width: 100%; margin-top: var(--space-5); }

/* --- Adaptación ----------------------------------------------------------- */

/* Tablet y móvil: dos por fila — 6 servicios = tres filas limpias.
   La rejilla NO baja a una columna: en el móvil se ven dos servicios a la vez,
   que es como se lee un menú. La tarjeta se compacta más abajo. */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tarjeta compacta — sólo por debajo de ~480px, donde la columna baja de 200px
   y la tarjeta de tamaño natural se rompe: el título a cuatro líneas, las
   píldoras «30 min | US$110» partidas en dos alturas y el botón sin aire.
   Por encima de 480px la columna mide ≥215px y la escala original aguanta. */
@media (max-width: 480px) {
  .services { gap: clamp(.625rem, 2.5vw, 1rem); }

  .service { border-radius: 10px; }

  /* Los distintivos sobre la foto comparten un ancho de ~150px: ambos encogen
     y se pegan a la esquina para no chocar entre sí. */
  .service__num {
    left: var(--space-2);
    top: var(--space-2);
    width: 1.75rem;
    height: 1.75rem;
    font-size: .6875rem;
  }
  .service__flag {
    right: var(--space-2);
    top: var(--space-2);
    padding: .2rem .5rem;
    font-size: .5625rem;
    letter-spacing: .04em;
  }

  .service__body { padding: .875rem .75rem 1rem; }

  .service__title { margin-bottom: var(--space-1); font-size: .9375rem; }

  /* En una columna de ~135px la descripción más larga ocupa 6 líneas: ese es el
     alto fijo aquí, para que el filete siga alineado entre las dos tarjetas. */
  .service__text {
    -webkit-line-clamp: 6;
    min-height: calc(6em * 1.45);
    margin-bottom: var(--space-1);
    font-size: .75rem;
    line-height: 1.45;
  }

  .service__meta {
    margin-bottom: var(--space-2);
    padding-top: var(--space-2);
    font-size: .5625rem;
    letter-spacing: .12em;
  }

  .service__prices { gap: .35rem; }
  .service__prices li { padding: .25rem .5rem; gap: .25rem; }
  .service__dur { font-size: .6875rem; letter-spacing: .02em; }
  .service__amt { font-size: .8125rem; }

  .service__cta {
    margin-top: var(--space-4);
    padding: .55rem .5rem;
    font-size: .6875rem;
    letter-spacing: .06em;
  }
}

/* --- Alineación por fila con subgrid --------------------------------------
   Lo de arriba (alto fijo de 2 y 4 líneas + `line-clamp`) es el plan B para
   navegadores sin subgrid: alinea el filete, pero reserva siempre el mismo
   número de líneas, que nunca coincide con lo que la fila necesita. Medido con
   Chrome headless sobre esta misma página: a 1280px la primera fila usa 2
   líneas y la segunda 3 (43px de blanco muerto), y a 520px las tarjetas 4, 5 y
   6 se recortaban.

   Con subgrid, las cinco filas internas de la tarjeta (título, descripción,
   rótulo, píldoras y botón) son pistas de la rejilla de `.services`, así que
   cada una mide lo que pide la tarjeta más alta DE SU FILA: el filete queda
   alineado, el blanco sobrante cae a 0 en la tarjeta más larga y a una línea
   como mucho en las demás, y ninguna descripción se recorta.

   El `row-gap` se anula porque separaría también las pistas internas; la
   distancia entre filas de tarjetas la pone el `margin-bottom` de la tarjeta,
   que el algoritmo de pistas suma a la última. */
@supports (grid-template-rows: subgrid) {
  .services {
    row-gap: 0;
    --card-row-gap: clamp(1.25rem, .9rem + 1.4vw, 2rem);
    /* El margen de la última fila de tarjetas sobra: se descuenta aquí para que
       la distancia hasta la banda siga siendo la de la sección. */
    margin-bottom: calc(var(--card-row-gap) * -1);
  }

  .service {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;          /* foto + las 5 filas del cuerpo */
    margin-bottom: var(--card-row-gap);
  }

  .service__body {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
  }

  /* Sin reserva ni recorte: ahora la pista hace ese trabajo */
  .service__title { min-height: 0; }
  .service__text {
    display: block;
    overflow: visible;
    -webkit-line-clamp: none;
    min-height: 0;
  }

  /* Las píldoras se quedan arriba de su pista; el hueco entre listas de
     distinta longitud cae bajo la última píldora, no sobre el filete. */
  .service__prices { margin-bottom: 0; align-self: start; }
  .service__cta { align-self: end; }
}

@supports (grid-template-rows: subgrid) {
  @media (max-width: 480px) {
    .services { --card-row-gap: clamp(.625rem, 2.5vw, 1rem); }
    .service__text { min-height: 0; }
  }
}

/* --------------------------------------------------------------------------
   4 · Banda verde
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  padding-block: var(--section-y);
  background: var(--gg-green);
  color: var(--gg-white);
  overflow: hidden;
}
.band::before,
.band::after {
  content: "";
  position: absolute;
  width: clamp(200px, 26vw, 400px);
  aspect-ratio: 1;
  background: var(--leaf-watermark) center / contain no-repeat;
  opacity: .5;
  pointer-events: none;
}
.band::before { top: -12%; left: -5%; transform: rotate(150deg); }
.band::after  { bottom: -18%; right: -4%; }

.band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.band__title { color: var(--gg-white); font-weight: 400; }
.band__text { margin: 0; color: rgba(255, 255, 255, .82); }
.band__actions { text-align: right; }
.band__note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .55);
}

/* En una sola columna el botón y su nota van centrados bajo el texto: a la
   izquierda quedaban pegados al borde, sin nada que los sostuviera. */
@media (max-width: 880px) {
  .band__inner { grid-template-columns: 1fr; }
  .band__actions { text-align: center; }
}

/* --------------------------------------------------------------------------
   5 · Contacto
   -------------------------------------------------------------------------- */
/* 190px de mínimo: los 3 canales caben en una sola fila dentro del contenedor
   estrecho (720px útiles), sin dejar una tarjeta huérfana en la segunda línea. */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card {
  display: grid;            /* el enlace se estira hasta llenar la tarjeta */
  background: var(--gg-white);
  border: 1px solid var(--gg-line);
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 104, .55);
  box-shadow: var(--shadow-md);
}

/* El enlace ocupa la tarjeta entera: el área de toque es la tarjeta, no sólo
   el número. El padding vive aquí y no en .contact-card por ese motivo. */
.contact-card__link {
  display: block;
  padding: var(--space-5) var(--space-4);
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}
.contact-card__link:hover { color: inherit; }

/* El foco se dibuja alrededor de la tarjeta, no del contenido del enlace. */
.contact-card__link:focus-visible { outline: none; }
.contact-card:has(.contact-card__link:focus-visible) {
  outline: 2px solid var(--gg-gold);
  outline-offset: 3px;
}

.contact-card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin: 0 auto var(--space-3);
  background: var(--gg-cream);
  border: 1.5px solid var(--gg-gold);
  border-radius: 50%;
  color: var(--gg-green);
}

.contact-card__title {
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gg-gold-dark);
}

.contact-card__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--gg-green);
  overflow-wrap: anywhere;
  transition: color var(--t-base);
}
.contact-card:hover .contact-card__value { color: var(--gg-gold-dark); }

/* --------------------------------------------------------------------------
   6 · CTA final
   -------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--gg-green-deep);
  color: var(--gg-white);
  text-align: center;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: var(--leaf-watermark) center / contain no-repeat;
  opacity: .35;
  pointer-events: none;
}

.cta-final__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.cta-final__mark { width: auto; height: 56px; margin: 0 auto var(--space-5); color: var(--gg-white); }
.cta-final__title { color: var(--gg-white); font-weight: 400; }
.cta-final__text { margin-bottom: var(--space-6); color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--gg-green);
  color: rgba(255, 255, 255, .72);
  padding-top: var(--space-8);
  font-size: var(--fs-sm);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(150px, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}

.lockup--footer { color: var(--gg-white); }
.lockup--footer .lockup__mark { height: 46px; }
.lockup--footer .lockup__sub { color: var(--gg-amber); }

.footer__slogan {
  margin: var(--space-4) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  color: rgba(255, 255, 255, .8);
}

.footer__title {
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gg-amber);
}

.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.footer a { color: rgba(255, 255, 255, .72); }
.footer a:hover { color: var(--gg-amber); }
.footer p { margin: 0 0 var(--space-2); }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .5);
}
.footer__legal p { margin: 0; }

@media (max-width: 880px) {
  .footer__inner { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* --------------------------------------------------------------------------
   Flotantes — volver arriba sobre WhatsApp

   La columna es la que va fija: así los dos comparten el mismo margen de
   pantalla y el hueco entre ellos lo pone el `gap`, sin desplazamientos
   calculados a mano. El de WhatsApp queda abajo —es el que siempre está— y el
   de volver arriba aparece encima cuando el hero ya quedó atrás.
   -------------------------------------------------------------------------- */
.floats {
  position: fixed;
  right: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: .625rem;
}

.wa {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  background: #25D366;
  color: var(--gg-white);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.wa:hover { color: var(--gg-white); transform: scale(1.08); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }

/* Más pequeño y sin el dorado de la marca: el CTA de la página es WhatsApp,
   este es sólo navegación. Va en crema con la flecha verde porque el botón
   sobrevuela secciones claras y las bandas de verde profundo —en verde sobre
   verde desaparecía— y el filete lo despega del fondo blanco. Sigue ocupando
   su sitio en la rejilla mientras está oculto —`visibility`, no `display`—
   para que el de WhatsApp no salte al aparecer. */
.to-top {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--gg-cream);
  color: var(--gg-green);
  border: 1px solid var(--gg-line);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity var(--t-base), transform var(--t-base),
              visibility var(--t-base), box-shadow var(--t-base);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top.is-visible:hover {
  color: var(--gg-green);
  background: var(--gg-white);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
/* El botón arranca hacia arriba con la página: el gesto y el viaje son uno. */
.to-top.is-visible:active {
  transform: translateY(-5px) scale(1.02);
  transition-duration: .18s;   /* el tiempo de --t-fast; el token lleva la curva dentro */
}

/* Excepción deliberada al `@media (prefers-reduced-motion)` de base.css, que
   deja todas las transiciones del sitio en .01ms. Estos dos flotantes conservan
   la suya: es lo que pidió el cliente y lo que hace su otro sitio. Hace falta
   `!important` porque la regla global lo lleva —un selector de clase gana al
   `*` cuando los dos son important— y hay que repetir el `:active`, que si no
   se queda con el .01ms de la regla global. El resto de la página (reveal,
   entradas, anclas del menú) sigue respetando el ajuste. */
@media (prefers-reduced-motion: reduce) {
  .to-top, .wa { transition-duration: .3s !important; }
  .to-top.is-visible:active { transition-duration: .18s !important; }
}