/* =========================================================================
   ATALARA SPA — Hoja de estilos
   Mobile-first: todo está escrito primero para 375px de ancho y luego crece.
   Los breakpoints están al final de cada bloque de componente.

   Orden del archivo:
   1. Tokens (variables CSS) — claro y oscuro
   2. Reset y base
   3. Utilidades de layout y accesibilidad
   4. Componentes
   5. Animaciones de entrada
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   Paleta terrosa: verde profundo, arena, crema.
   Todos los pares texto/fondo están verificados a 4.5:1 o más.
   ========================================================================= */
:root {
  /* --- Color: modo claro --- */
  --fondo:            #FAF5EE;  /* crema */
  --fondo-alt:        #F3EBE0;  /* crema tostada, para alternar secciones */
  --superficie:       #FFFFFF;
  --texto:            #23312A;  /* verde casi negro — 13:1 sobre crema */
  --texto-suave:      #5A6B61;  /* 5.2:1 sobre crema */
  --borde:            #E2D7C8;
  --acento:           #8A5F33;  /* ocre oscuro, seguro para texto (5.1:1) */
  --acento-deco:      #B08A5A;  /* ocre claro, solo para filetes y adornos */
  --primario:         #1E4034;  /* verde profundo */
  --sobre-primario:   #F6F0E6;
  --anillo-base:      #1E4034;  /* color del foco de teclado sobre fondos claros */
  --anillo:           var(--anillo-base);

  /* Botón principal */
  --btn-fondo:        #1E4034;
  --btn-texto:        #F6F0E6;
  --btn-fondo-hover:  #2A5744;

  /* Sombras suaves (Soft UI Evolution: más claras que neumorfismo, más definidas que flat) */
  --sombra-1: 0 1px 2px rgba(35, 49, 42, .05), 0 4px 16px rgba(35, 49, 42, .06);
  --sombra-2: 0 2px 4px rgba(35, 49, 42, .06), 0 16px 40px rgba(35, 49, 42, .10);
  --sombra-flotante: 0 6px 24px rgba(18, 38, 30, .28);

  /* --- Tipografía --- */
  --fuente-display: 'Cormorant Garamond', Cormorant, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fs-hero:    clamp(2.75rem, 11vw, 5.5rem);
  --fs-h2:      clamp(1.9rem, 7vw, 3.1rem);
  --fs-h3:      clamp(1.15rem, 3.5vw, 1.35rem);
  --fs-cuerpo:  1.0625rem;      /* 17px */
  --fs-grande:  clamp(1.125rem, 2.6vw, 1.3rem);
  --fs-peque:   0.9375rem;      /* 15px */
  --fs-micro:   0.75rem;        /* 12px, solo antetítulos en mayúsculas */

  /* --- Espaciado (escala amplia: mucho aire, estética de spa) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radio-s: 4px;
  --radio-m: 10px;
  --radio-l: 20px;
  --radio-pill: 999px;

  --ancho-contenedor: 1200px;
  --ancho-lectura: 62ch;

  --trans: 220ms cubic-bezier(.22, .61, .36, 1);
}

/* --- Color: modo oscuro (oscuro cálido, no gris azulado) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:          #131512;
    --fondo-alt:      #1A1D18;
    --superficie:     #1F231D;
    --texto:          #ECE4D8;
    --texto-suave:    #A9A396;
    --borde:          #333A31;
    --acento:         #D9B487;
    --acento-deco:    #A87F52;
    --primario:       #22402F;
    --sobre-primario: #ECE4D8;
    --anillo-base:    #D9B487;

    --btn-fondo:       #E4D3B4;   /* arena clara: máximo contraste sobre fondo oscuro */
    --btn-texto:       #17362A;
    --btn-fondo-hover: #F0E2C8;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --sombra-2: 0 2px 4px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .4);
    --sombra-flotante: 0 6px 24px rgba(0, 0, 0, .55);
  }
}


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* para que los anclajes no queden bajo la cabecera fija */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--fs-cuerpo);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }

h3 {
  font-family: var(--fuente-texto);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { margin: 0 0 var(--space-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

blockquote { margin: 0; }

/* Foco visible de teclado — nunca se elimina */
:focus-visible {
  outline: 2px solid var(--anillo);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

/* Sobre fondos verdes oscuros el anillo verde no se vería:
   en esos bloques el foco pasa a color arena */
.hero,
.cabecera,
.contacto,
.servicio--principal,
.testimonio--destacado { --anillo: #DFC59C; }

.cabecera.is-fija { --anillo: var(--primario); }

::selection {
  background: var(--primario);
  color: var(--sobre-primario);
}


/* =========================================================================
   3. UTILIDADES DE LAYOUT Y ACCESIBILIDAD
   ========================================================================= */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.seccion {
  padding-block: var(--space-6);
}

.seccion__encabezado {
  max-width: 40ch;
  margin-bottom: var(--space-5);
}

/* Antetítulo: etiqueta pequeña en mayúsculas sobre cada H2 */
.antetitulo {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.antetitulo::after {
  content: "";
  flex: 1;
  max-width: 3.5rem;
  height: 1px;
  background: var(--acento-deco);
  opacity: .6;
}

.antetitulo--claro { color: #DFC59C; }
.antetitulo--claro::after { background: #DFC59C; }

/* Enlace de salto para usuarios de teclado y lector de pantalla */
.salto-contenido {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--primario);
  color: var(--sobre-primario);
  border-radius: var(--radio-m);
  text-decoration: none;
  font-size: var(--fs-peque);
  transition: top var(--trans);
}
.salto-contenido:focus { top: var(--space-2); }

/* Marco de imagen con placeholder.
   Si la foto no existe todavía, script.js marca .sin-imagen y se ve una
   caja con la descripción de la foto en vez del icono de imagen rota. */
.figura {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--fondo-alt), var(--borde));
  border-radius: var(--radio-l);
}
.figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figura.sin-imagen img { display: none; }
.figura.sin-imagen::after {
  content: attr(data-etiqueta);
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--space-3);
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border: 1px dashed var(--borde);
  border-radius: inherit;
}
/* Retrato de Deisy: marco 3:4.
   En la foto original Deisy está a la derecha del encuadre (su rostro cae al ~58 %
   del ancho). El marco es más ancho que la foto, así que object-position no puede
   moverla: por eso la imagen se agranda al 125 % y se desplaza a mano.
     · left -23.75 %  → deja el rostro y el torso en el centro horizontal del marco
     · top  -10 %     → conserva cabeza, letrero del fondo y manos; recorta la camilla
   Si cambias la foto, estos tres números (width, left, top) hay que recalcularlos. */
.figura--retrato { aspect-ratio: 3 / 4; }
.figura--retrato img {
  position: absolute;
  width: 125%;
  height: auto;
  max-width: none;
  left: -23.75%;
  top: -10%;
}
.figura--paisaje { aspect-ratio: 4 / 3; }


/* =========================================================================
   4. COMPONENTES
   ========================================================================= */

/* ---------- 4.1 Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;                 /* objetivo táctil cómodo */
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radio-pill);
  font-family: var(--fuente-texto);
  font-size: var(--fs-peque);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--trans), color var(--trans),
              border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}

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

.btn--acento {
  background: var(--btn-fondo);
  color: var(--btn-texto);
  box-shadow: var(--sombra-1);
}
.btn--acento:hover { background: var(--btn-fondo-hover); }

.btn--claro {
  background: #F6F0E6;
  color: #17362A;
}
.btn--claro:hover { background: #FFFFFF; }

.btn--contorno {
  background: transparent;
  color: var(--texto);
  border-color: var(--borde);
}
.btn--contorno:hover { border-color: var(--acento-deco); background: var(--fondo-alt); }

.btn--fantasma {
  background: rgba(255, 255, 255, .06);
  color: #F6F0E6;
  border-color: rgba(246, 240, 230, .45);
  backdrop-filter: blur(6px);
}
.btn--fantasma:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(246, 240, 230, .8);
}

.btn--grande { min-height: 54px; padding: 1rem 1.75rem; font-size: 1rem; }
.btn--compacto { min-height: 42px; padding: 0.5rem 1rem; font-size: var(--fs-micro); }
.btn--bloque { display: flex; width: 100%; }

.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition: none; transform: none; }
}


/* ---------- 4.2 Marca ---------- */
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
  font-family: var(--fuente-display);
  line-height: 1;
  margin: 0;
}
.marca__nombre {
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.marca__sub {
  font-family: var(--fuente-texto);
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: .75;
}


/* ---------- 4.3 Cabecera ---------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: #F6F0E6;                         /* arranca sobre el hero oscuro */
  transition: background-color var(--trans), box-shadow var(--trans), color var(--trans);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 68px;
}

/* Al hacer scroll, script.js añade .is-fija */
.cabecera.is-fija {
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--borde);
  color: var(--texto);
}

/* Respaldo para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .cabecera.is-fija { background: var(--fondo); }
}

.cabecera.is-fija .btn--claro {
  background: var(--btn-fondo);
  color: var(--btn-texto);
}

/* Botón de WhatsApp + selector de idioma, agrupados a la derecha */
.cabecera__acciones { display: flex; align-items: center; gap: 0.6rem; }

/* Selector de idioma ES | EN. El idioma activo va relleno; el color de relleno cambia
   igual que el botón de WhatsApp cuando la cabecera pasa de transparente a sólida. */
.cabecera { --idioma-fondo: #F6F0E6; --idioma-texto: #17362A; }
.cabecera.is-fija { --idioma-fondo: var(--btn-fondo); --idioma-texto: var(--btn-texto); }
.idioma {
  display: inline-flex;
  border: 1px solid currentColor;
  border-radius: var(--radio-pill);
  padding: 2px;
}
.idioma__btn {
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--radio-pill);
  min-width: 38px;
  min-height: 38px;          /* con el borde, el selector completo mide 44 px: cómodo de tocar */
  padding: 0 0.45rem;
  cursor: pointer;
  transition: background-color var(--trans), color var(--trans);
}
.idioma__btn[aria-pressed="true"] { background: var(--idioma-fondo); color: var(--idioma-texto); }
.idioma__btn:not([aria-pressed="true"]):hover { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .idioma__btn { transition: none; } }

/* En pantallas angostas la cabecera no alcanza para la marca, el selector de idioma y el
   botón con texto: el botón de WhatsApp queda solo con su ícono (tiene aria-label). */
@media (max-width: 29.99rem) {
  .cabecera .btn--compacto span { display: none; }
  .cabecera .btn--compacto { padding: 0; width: 44px; min-height: 44px; }
}

.nav { display: none; }

.nav a {
  text-decoration: none;
  font-size: var(--fs-peque);
  padding: 0.5rem 0;
  position: relative;
  opacity: .9;
  transition: opacity var(--trans);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--trans);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }

@media (min-width: 62rem) {         /* 992px */
  .nav { display: flex; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .nav a::after { transition: none; }
}


/* ---------- 4.4 Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  /* El padding inferior deja aire suficiente para que el botón flotante
     no se monte sobre la nota final del hero en móvil */
  padding-block: calc(var(--space-5) + 68px) var(--space-6);
  overflow: hidden;
  color: #F6F0E6;
}

.hero__media {
  position: absolute;
  inset: 0;
  border-radius: 0;
  /* Si la foto aún no está, queda este degradado verde: el texto sigue legible */
  background: linear-gradient(155deg, #2A5744 0%, #1E4034 45%, #12261E 100%);
}
.hero__media img { height: 100%; object-fit: cover; }
/* La etiqueta del placeholder del hero va arriba, no centrada:
   así no se cruza con el titular mientras no exista la foto real */
.hero__media.sin-imagen::after {
  place-content: start center;
  padding-top: 4.6rem;
  color: rgba(246, 240, 230, .55);
  border-color: rgba(246, 240, 230, .22);
}

/* Capa oscura: sin esto el texto blanco no pasa contraste sobre una foto clara */
.hero__degradado {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 26, 20, .92) 0%, rgba(12, 26, 20, .74) 38%, rgba(12, 26, 20, .40) 70%, rgba(12, 26, 20, .55) 100%);
}

.hero__cuerpo {
  position: relative;
  z-index: 2;
}

.hero__titulo {
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  /* El titular es una frase larga (palabra clave + lugar + diferencia), así que va un paso
     más pequeño que --fs-hero y con una columna más ancha */
  font-size: clamp(2.25rem, 8.5vw, 4.25rem);
  max-width: 20ch;
}

.hero__sub {
  font-size: var(--fs-grande);
  line-height: 1.55;
  max-width: 46ch;
  color: rgba(246, 240, 230, .92);
  margin-bottom: var(--space-4);
}

.hero__acciones {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Línea de apoyo bajo los botones del hero (qué pasa al escribir; sin compromiso) */
.hero__apoyo {
  font-size: var(--fs-peque);
  color: rgba(246, 240, 230, .92);
  max-width: 44ch;
  margin-bottom: var(--space-3);
}

.hero__nota {
  font-size: var(--fs-peque);
  color: rgba(246, 240, 230, .72);
  max-width: 44ch;
  padding-top: var(--space-2);
  /* En móvil el texto corta antes de llegar a la zona del botón flotante */
  padding-right: 8.5rem;
  border-top: 1px solid rgba(246, 240, 230, .22);
}

@media (min-width: 40rem) {          /* 640px */
  .hero__acciones { flex-direction: row; flex-wrap: wrap; }
  .hero__titulo { max-width: 22ch; }
}

@media (min-width: 48rem) {          /* 768px */
  .hero__nota { padding-right: 0; }
}

@media (min-width: 64rem) {          /* 1024px */
  .hero { padding-block: var(--space-7) var(--space-6); }
  .hero__cuerpo { max-width: 46rem; }
}


/* ---------- 4.5 El diferenciador ---------- */
.metodo {
  background: var(--fondo-alt);
  position: relative;
}

.metodo__encabezado h2 { font-style: italic; font-weight: 300; }

.metodo__texto {
  max-width: var(--ancho-lectura);
  font-size: var(--fs-grande);
  line-height: 1.7;
  color: var(--texto-suave);
}
.metodo__texto p { margin-bottom: var(--space-3); }

/* Cita de Deisy: filete ocre a la izquierda, sin comillas decorativas gigantes */
.cita {
  border-left: 2px solid var(--acento-deco);
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
  margin-block: var(--space-4);
}
.cita p {
  font-family: var(--fuente-display);
  font-size: clamp(1.5rem, 5.5vw, 2.1rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--texto);
  margin-bottom: var(--space-1);
}
.cita cite {
  font-family: var(--fuente-texto);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}

@media (min-width: 62rem) {
  .metodo__rejilla {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-5);
    align-items: start;
  }
  .metodo__encabezado { position: sticky; top: 7rem; margin-bottom: 0; }
}


/* ---------- 4.6 Servicios ---------- */
.servicios__rejilla {
  display: grid;
  gap: var(--space-3);
}

.servicio {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radio-l);
}

.servicio__etiqueta {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  opacity: .8;
}

.servicio__titulo {
  font-family: var(--fuente-display);
  font-size: clamp(1.75rem, 6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 0.35rem;
}

.servicio__duracion {
  font-size: var(--fs-peque);
  margin-bottom: var(--space-3);
  opacity: .85;
}

.servicio__precio {
  font-family: var(--fuente-display);
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.servicio__moneda { font-size: .55em; opacity: .7; }
.servicio__cop {
  font-family: var(--fuente-texto);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  opacity: .7;
  margin-left: 0.35rem;
}

/* Cuenta por hora, pegada al precio del premium */
.servicio__ancla {
  font-size: var(--fs-peque);
  line-height: 1.5;
  max-width: 38ch;
  opacity: .92;
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
}

.servicio__desc { margin-bottom: var(--space-3); }

.servicio__lista {
  display: grid;
  gap: 0.65rem;
  margin-bottom: var(--space-4);
  font-size: var(--fs-peque);
}
.servicio__lista li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.5;
}
/* Línea de cierre del masaje premium: dice de forma explícita con qué termina la sesión
   (masaje de relajación y piedras calientes). Va separada de la lista por un filete. */
.servicio--principal .servicio__lista { margin-bottom: var(--space-3); }
.servicio__cierre {
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.35;
  color: #DFC59C;
  padding-top: var(--space-3);
  margin-bottom: var(--space-4);
  border-top: 1px solid rgba(246, 240, 230, .22);
}
.servicio__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .55;
}

.servicio .btn { margin-top: auto; }

/* Tarjeta principal: panel verde profundo, el ancla visual de la sección */
.servicio--principal {
  background: var(--primario);
  color: var(--sobre-primario);
  box-shadow: var(--sombra-2);
}
.servicio--principal .servicio__etiqueta { color: #DFC59C; opacity: 1; }
.servicio--principal .servicio__desc { color: rgba(246, 240, 230, .86); }

/* Tarjeta secundaria: una "carta" al estilo de un menú de spa (nombre, duración y precio
   en filas separadas por filetes). Deliberadamente más liviana que la principal, y evita
   la fila de tarjetas idénticas. */
.servicio--carta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
}
.servicio--carta .servicio__etiqueta { color: var(--acento); }
.servicio--carta .servicio__titulo { margin-bottom: var(--space-3); }

.carta { margin-bottom: var(--space-4); }
.carta__item {
  padding-block: var(--space-2);
  border-top: 1px solid var(--borde);
}
.carta__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.carta__nombre {
  font-family: var(--fuente-texto);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0;
}
.carta__precio {
  font-family: var(--fuente-display);
  font-size: 1.55rem;
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.carta__meta {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0.35rem 0 0.3rem;
}
.carta__desc {
  font-size: var(--fs-peque);
  color: var(--texto-suave);
  margin: 0;
  max-width: 42ch;
}

/* Desplegable "Ver qué incluye" (masaje deportivo). Usa <details>, que funciona sin
   JavaScript y con teclado. La flechita por defecto se cambia por un + / − . */
.carta__detalle { margin-top: 0.25rem; }
.carta__detalle summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;                 /* objetivo táctil cómodo */
  font-size: var(--fs-peque);
  font-weight: 500;
  color: var(--acento);
  cursor: pointer;
  list-style: none;
}
.carta__detalle summary::-webkit-details-marker { display: none; }
.carta__detalle summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
}
.carta__detalle[open] summary::after { content: "\2212"; }
/* Párrafos dentro del desplegable (el protocolo de la limpieza facial) */
.carta__detalle p {
  font-size: var(--fs-peque);
  color: var(--texto-suave);
  line-height: 1.55;
  margin: 0 0 0.75rem;
}
.carta__detalle .carta__paso {
  font-weight: 600;
  color: var(--texto);
  margin-top: 0.9rem;
  margin-bottom: 0.25rem;
}
/* El primer título del desplegable no necesita el espacio extra de arriba */
.carta__detalle .carta__paso--inicial { margin-top: 0.25rem; }
.carta__detalle ul {
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 var(--space-1);
  font-size: var(--fs-peque);
  color: var(--texto-suave);
}
.carta__detalle li {
  position: relative;
  padding-left: 1.15rem;
  line-height: 1.5;
}
.carta__detalle li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento-deco);
}

.servicios__pie {
  margin-top: var(--space-4);
  max-width: 52ch;
  font-size: var(--fs-peque);
  color: var(--texto-suave);
  padding-top: var(--space-2);
  border-top: 1px solid var(--borde);
}

@media (min-width: 56rem) {          /* 896px */
  .servicios__rejilla {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-4);
    align-items: start;
  }
  .servicio { padding: var(--space-5) var(--space-4); }
  /* La secundaria arranca más abajo: rompe la simetría de "dos tarjetas iguales" */
  .servicio--carta { margin-top: var(--space-5); }
}


/* ---------- 4.7 Qué incluye ---------- */
.incluye { background: var(--fondo-alt); }

.incluye__lista {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--borde);
}

.incluye__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--borde);
}

.incluye__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--acento-deco);
  color: var(--acento);
  flex: none;
}
.incluye__ico svg { width: 24px; height: 24px; }

.incluye__item h3 { margin-bottom: 0.3rem; }
.incluye__item p {
  font-size: var(--fs-peque);
  color: var(--texto-suave);
  margin: 0;
  max-width: 48ch;
}

@media (min-width: 48rem) {          /* 768px */
  .incluye__lista {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
  }
  /* La lista tiene 6 ítems (3 filas de 2): la última fila no lleva filete inferior.
     Si la lista pasa a tener un número impar de ítems, cambia esta regla a
     :last-child para que solo el último pierda el filete. */
  .incluye__item:nth-last-child(-n+2) { border-bottom: none; }
  .incluye__item { padding-block: var(--space-4); }
}


/* ---------- 4.8 Sobre Deisy ---------- */
.deisy__rejilla { display: grid; gap: var(--space-4); }

.deisy__media { position: relative; }

/* En tablet (una sola columna) el retrato se acota y se centra: sin esto ocupa
   todo el ancho y mide casi una pantalla completa de alto (960 px a 768 px de ancho) */
@media (min-width: 40rem) and (max-width: 55.99rem) {
  /* width explícito (no max-width): como elemento de rejilla con margen automático,
     un max-width lo encogería a 0, porque la foto está posicionada en absoluto */
  .deisy__media { width: min(100%, 26rem); margin-inline: auto; }
}

/* Filete ocre que enmarca el retrato, simétrico en los cuatro lados para que el
   bloque quede centrado (antes estaba desplazado y se veía corrido a la derecha) */
.deisy__media::before {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid var(--acento-deco);
  border-radius: calc(var(--radio-l) + 12px);
  opacity: .5;
  pointer-events: none;
}

.deisy__rol {
  font-size: var(--fs-peque);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: var(--space-3);
}

.deisy__texto p { color: var(--texto-suave); max-width: var(--ancho-lectura); }

.datos {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--borde);
}
.datos__item dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.2rem;
}
.datos__item dd {
  font-family: var(--fuente-display);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--texto);
}

@media (min-width: 30rem) {
  /* La tercera columna ("Dónde atiendo: El Poblado y a domicilio en el área
     metropolitana") es la más larga, por eso recibe más ancho que las otras dos */
  .datos { grid-template-columns: 0.8fr 1fr 1.5fr; gap: var(--space-3); }
}

@media (min-width: 56rem) {
  .deisy__rejilla {
    grid-template-columns: 0.85fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }
  .deisy__texto h2 { margin-bottom: var(--space-2); }
}


/* ---------- 4.9 Testimonios ---------- */
/* ---------- 4.9b Preguntas frecuentes ---------- */
/* Fondo alterno; si la sección de testimonios se muestra justo antes (también alterna),
   las preguntas pasan al fondo base para que no se junten dos bloques del mismo color. */
.faq { background: var(--fondo-alt); }
.testimonios:not([hidden]) + .faq { background: var(--fondo); }

.faq__rejilla { display: grid; gap: var(--space-4); }
.faq .seccion__encabezado { margin-bottom: 0; }

.faq__lista { border-top: 1px solid var(--borde); max-width: 46rem; }
.faq__item { border-bottom: 1px solid var(--borde); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 3.5rem;                 /* objetivo táctil cómodo */
  padding-block: 0.6rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--acento);
  border-radius: 50%;
  color: var(--acento);
  font-size: 1.05rem;
  line-height: 1;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p {
  color: var(--texto-suave);
  max-width: 62ch;
  padding-bottom: var(--space-3);
  margin: 0;
}

@media (min-width: 56rem) {          /* 896px */
  .faq__rejilla { grid-template-columns: 1fr 1.7fr; gap: var(--space-6); align-items: start; }
}

.testimonios { background: var(--fondo-alt); }

.testimonios__rejilla { display: grid; gap: var(--space-3); }

.testimonio {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  padding: var(--space-4) var(--space-3);
  margin: 0;
  box-shadow: var(--sombra-1);
}

.testimonio blockquote p {
  font-family: var(--fuente-display);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--texto);
  margin-bottom: var(--space-3);
}

/* La comilla de apertura, como filete y no como icono gigante */
.testimonio blockquote::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--acento-deco);
  margin-bottom: var(--space-2);
}

.testimonio figcaption { display: grid; gap: 0.15rem; }
.testimonio__nombre { font-weight: 600; font-size: var(--fs-peque); }
.testimonio__meta {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.testimonio--destacado {
  background: var(--primario);
  border-color: transparent;
  color: var(--sobre-primario);
}
.testimonio--destacado blockquote p { color: var(--sobre-primario); font-size: 1.5rem; }
.testimonio--destacado blockquote::before { background: #DFC59C; }
.testimonio--destacado .testimonio__meta { color: #C9D6CC; }

@media (min-width: 56rem) {
  .testimonios__rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); align-items: start; }
  /* Desfase vertical: evita la fila de tres tarjetas idénticas */
  .testimonios__rejilla > :nth-child(2) { margin-top: var(--space-4); }
  .testimonios__rejilla > :nth-child(3) { margin-top: var(--space-2); }
  .testimonio { padding: var(--space-4); }
}


/* ---------- 4.10 Ubicación y contacto ---------- */
.contacto {
  background: var(--primario);
  color: var(--sobre-primario);
  /* Se redefinen los tokens dentro de la sección para que todo el texto
     interno herede los colores correctos sobre el verde profundo */
  --texto: var(--sobre-primario);
  --texto-suave: #C9D6CC;
  --borde: rgba(246, 240, 230, .2);
  --acento: #DFC59C;
  --acento-deco: #DFC59C;
}

.contacto__rejilla { display: grid; gap: var(--space-4); }

.contacto__intro {
  font-size: var(--fs-grande);
  color: rgba(246, 240, 230, .88);
  max-width: 46ch;
  margin-bottom: var(--space-4);
}

.contacto__datos {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.contacto__datos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--borde);
}
.contacto__datos li:last-child { border-bottom: none; padding-bottom: 0; }

.contacto__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(223, 197, 156, .5);
  color: #DFC59C;
  flex: none;
}
.contacto__ico svg { width: 22px; height: 22px; }

.contacto__datos h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.contacto__datos p {
  font-size: var(--fs-peque);
  color: rgba(246, 240, 230, .82);
  margin: 0;
}
.contacto__aparte { color: rgba(246, 240, 230, .62); }

.contacto .btn--acento {
  background: #F6F0E6;
  color: #17362A;
}
.contacto .btn--acento:hover { background: #FFFFFF; }

.contacto__media .figura { background: rgba(246, 240, 230, .08); }
.contacto__media .figura.sin-imagen::after {
  color: rgba(246, 240, 230, .7);
  border-color: rgba(246, 240, 230, .28);
}

@media (min-width: 56rem) {
  .contacto__rejilla {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-6);
    align-items: center;
  }
  .contacto__media .figura--paisaje { aspect-ratio: 3 / 4; }

  /* Mientras la foto del espacio está oculta, el contacto va en una sola columna
     (si no, quedaría media sección vacía). Al mostrar la foto, se borra esta clase. */
  .contacto__rejilla--sin-foto { grid-template-columns: minmax(0, 44rem); }
}

/* Garantiza que lo marcado con el atributo hidden nunca se vea, aunque otra regla
   le ponga display (así las secciones ocultas no se cuelan por error). */
[hidden] { display: none !important; }


/* ---------- 4.10b Página de política de privacidad (privacidad.html) ---------- */
/* La cabecera es fija, así que el contenido arranca por debajo de ella (68 px). */
.politica { padding-block: calc(68px + var(--space-5)) var(--space-6); }
.politica__cuerpo { max-width: var(--ancho-lectura); }
.politica h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  text-wrap: balance;
  margin-bottom: var(--space-2);
}
.politica__fecha {
  font-size: var(--fs-peque);
  color: var(--texto-suave);
  margin-bottom: var(--space-4);
}
.politica h2 {
  font-size: clamp(1.3rem, 3.5vw, 1.65rem);
  margin: var(--space-5) 0 var(--space-2);
}
.politica p,
.politica li { color: var(--texto); line-height: 1.65; }
.politica ul {
  list-style: disc;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.55rem;
  margin: 0 0 var(--space-2);
}
.politica ul li::marker { color: var(--acento-deco); }
.politica a { color: var(--acento); text-underline-offset: 3px; }
.politica__volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-peque);
  font-weight: 500;
  text-decoration: none;
  color: var(--acento);
}
.politica__volver:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- 4.11 Pie de página ---------- */
.pie {
  background: var(--fondo-alt);
  /* El padding inferior extra evita que el botón flotante tape el aviso legal */
  padding-block: var(--space-5) calc(var(--space-4) + 3.5rem);
  border-top: 1px solid var(--borde);
}

.pie__fila {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.pie__linea {
  font-size: var(--fs-peque);
  color: var(--texto-suave);
  margin-top: 0.5rem;
}

.pie__enlaces { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
  font-size: var(--fs-peque);
  color: var(--texto);
  transition: color var(--trans);
}
.pie__enlaces a:hover { color: var(--acento); }
.pie__enlaces .ico { width: 20px; height: 20px; }

.pie__legal {
  padding-top: var(--space-3);
  border-top: 1px solid var(--borde);
  font-size: var(--fs-micro);
  color: var(--texto-suave);
  display: grid;
  gap: 0.35rem;
}
.pie__legal p { margin: 0; }
.pie__aviso { max-width: 60ch; }

@media (min-width: 48rem) {
  .pie__fila { grid-template-columns: 1fr auto; align-items: end; }
  .pie__legal { grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline; }
  .pie__aviso { text-align: right; }
}


/* ---------- 4.12 Botón flotante de WhatsApp ---------- */
.flotante {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  z-index: 110;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0 1.25rem 0 1rem;
  border-radius: var(--radio-pill);
  background: #1E4034;
  color: #F6F0E6;
  /* El filete arena hace que el botón siga siendo visible cuando pasa por
     encima de la sección de contacto, que también es verde profundo */
  border: 1px solid rgba(223, 197, 156, .55);
  text-decoration: none;
  font-size: var(--fs-peque);
  font-weight: 500;
  box-shadow: var(--sombra-flotante);
  transition: transform var(--trans), background-color var(--trans);
}
.flotante:hover { background: #2A5744; transform: translateY(-2px); }

/* El botón flotante pasa por encima de fondos claros y oscuros, así que su foco
   lleva doble anillo: uno crema y otro verde. Siempre se ve, esté donde esté. */
.flotante:focus-visible {
  outline: 2px solid #F6F0E6;
  outline-offset: 2px;
  box-shadow: var(--sombra-flotante), 0 0 0 5px rgba(23, 54, 42, .92);
}
.flotante__ico { width: 26px; height: 26px; flex: none; }

@media (prefers-color-scheme: dark) {
  .flotante { background: #E4D3B4; color: #17362A; border-color: transparent; }
  .flotante:hover { background: #F0E2C8; }
}

@media (prefers-reduced-motion: reduce) {
  .flotante, .flotante:hover { transition: none; transform: none; }
}

@media (min-width: 48rem) {
  .flotante { right: var(--space-3); bottom: var(--space-3); }
}


/* =========================================================================
   5. ANIMACIONES DE ENTRADA
   script.js añade .is-visible con IntersectionObserver.
   Si el usuario pide menos movimiento, todo aparece de una vez.
   ========================================================================= */
/* El estado oculto solo se aplica si hay JavaScript (la clase .js-activo la pone
   el script en línea del <head>). Sin JS, el contenido se ve siempre. */
.js-activo .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(.22, .61, .36, 1),
              transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.js-activo .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-activo .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}