/* ==========================================================================
   ENAYA SALUD INTEGRAL — Hoja de estilos
   Identidad basada en el Brandboard oficial (Serandu Studio, junio 2026).
   Orden: 1 Tokens · 2 Reset · 3 Tipografía · 4 Layout · 5 Componentes
          6 Secciones · 7 Responsive · 8 Movimiento
   ========================================================================== */

/* 1 · TOKENS ============================================================== */
:root {
  /* Paleta oficial */
  --cacao:        #A97E53;
  --lino:         #EDE5D1;
  --miel:         #F6ECBB;
  --olivo:        #9A9D50;
  --rosa:         #F5D7D9;

  /* Derivados (fondos cálidos y variantes accesibles para texto/UI) */
  --crema:        #FBF8F2;
  --lino-suave:   #F4EDDF;
  --miel-suave:   #FAF3D4;
  --rosa-suave:   #FAEBEC;
  --cacao-oscuro: #8A6440;
  --olivo-oscuro: #6E7139;   /* 4.9:1 sobre crema — uso en texto y botones */
  --olivo-hondo:  #585B2C;
  --tinta:        #33291F;   /* texto principal, negro cálido */
  --tinta-suave:  #6A5B4C;   /* texto secundario, 6.2:1 sobre crema */
  --oscuro:       #2C241C;   /* footer */

  --linea:        rgba(169, 126, 83, 0.22);
  --linea-tenue:  rgba(169, 126, 83, 0.14);

  /* Tipografía */
  --serif: "Cormorant Garamond", Cormorant, Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Ritmo */
  --container: 1280px;
  --pad-x: clamp(1.25rem, 4.5vw, 4.5rem);
  --seccion-y: clamp(4.5rem, 9vw, 10rem);
  --radio: 4px;

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 420ms;
}

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

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

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* El atributo hidden debe ganar a cualquier display de clase */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:target { scroll-margin-top: 6.5rem; }

:focus-visible {
  outline: 2px solid var(--olivo-oscuro);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--miel); color: var(--tinta); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--tinta);
  color: var(--crema);
  font-size: 0.875rem;
  border-radius: var(--radio);
  transition: top 200ms var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* 3 · TIPOGRAFÍA ========================================================== */
.display,
h1, h2, h3 {
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--tinta);
  text-wrap: balance;
}

h1 { font-size: clamp(3rem, 6.1vw, 5.6rem); font-weight: 300; }
h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 1.6vw, 1.5rem); line-height: 1.2; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cacao-oscuro);
  margin-bottom: 1.35rem;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 0.9rem;
  background: var(--cacao);
  opacity: 0.55;
}

.lead {
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--tinta-suave);
  max-width: 46ch;
}

.lead + .lead { margin-top: 1.15rem; }

em.acento {
  font-style: italic;
  color: var(--olivo-oscuro);
}

/* 4 · LAYOUT ============================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.seccion { padding-block: var(--seccion-y); position: relative; }
.seccion--lino { background: var(--lino-suave); }
.seccion--rosa { background: var(--rosa-suave); }

.marca-agua {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* 5 · COMPONENTES ========================================================= */

/* Botones ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.9rem 1.85rem;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color 260ms var(--ease),
              border-color 260ms var(--ease),
              color 260ms var(--ease),
              transform 260ms var(--ease);
}
.btn .flecha { flex: none; transition: transform 300ms var(--ease); }
.btn:hover .flecha { transform: translateX(4px); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primario {
  background: var(--olivo-oscuro);
  color: var(--crema);
}
.btn--primario:hover { background: var(--olivo-hondo); }

.btn--contorno {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}
.btn--contorno:hover {
  border-color: var(--cacao);
  background: rgba(169, 126, 83, 0.06);
}

.btn--claro {
  background: var(--crema);
  color: var(--tinta);
}
.btn--claro:hover { background: #fff; }

.btn--grande {
  min-height: 60px;
  padding: 1.1rem 2.5rem;
  font-size: 1rem;
}

/* Enlace con flecha ------------------------------------------------------ */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--olivo-oscuro);
  padding-block: 0.25rem;
}
.enlace-flecha .flecha { transition: transform 300ms var(--ease); }
.enlace-flecha:hover { color: var(--olivo-hondo); }
.enlace-flecha:hover .flecha { transform: translateX(4px); }

/* Etiquetas del hero ----------------------------------------------------- */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--linea);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta-suave);
  background: rgba(251, 248, 242, 0.55);
}
.etiqueta svg { flex: none; color: var(--cacao); }

/* 6 · SECCIONES =========================================================== */

/* Header ----------------------------------------------------------------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 400ms var(--ease),
              box-shadow 400ms var(--ease);
}
.cabecera::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}
.cabecera.esta-fijo::before { opacity: 1; }
.cabecera.esta-fijo { box-shadow: 0 1px 0 var(--linea-tenue); }

.cabecera__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 92px;
  transition: height 400ms var(--ease);
}
.cabecera.esta-fijo .cabecera__inner { height: 76px; }

.cabecera__logo { flex: none; }
.cabecera__logo img {
  width: clamp(132px, 12vw, 168px);
  transition: width 400ms var(--ease);
}
.cabecera.esta-fijo .cabecera__logo img { width: clamp(124px, 10.5vw, 148px); }

.nav { margin-left: clamp(1.5rem, 5.5vw, 5rem); margin-right: auto; }
.nav__lista { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav__enlace {
  white-space: nowrap;
  position: relative;
  display: block;
  padding: 0.4rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-suave);
  transition: color 240ms var(--ease);
}
.nav__enlace::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--olivo-oscuro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease);
}
.nav__enlace:hover { color: var(--tinta); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="location"]::after { transform: scaleX(1); }
.nav__enlace[aria-current="location"] { color: var(--olivo-oscuro); }

.cabecera__cta {
  flex: none;
  min-height: 44px;
  padding: 0.65rem 1.4rem;
  font-size: 0.8125rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease), visibility 360ms;
}
.cabecera.esta-fijo .cabecera__cta {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Botón hamburguesa */
.hamburguesa {
  display: none;
  flex: none;
  margin-left: auto;
  width: 48px; height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hamburguesa span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--tinta);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease);
}
.hamburguesa span + span { margin-top: 5px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menú móvil */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--crema);
  padding: 120px var(--pad-x) 3rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 340ms var(--ease), visibility 340ms;
}
.menu-movil.esta-abierto { opacity: 1; visibility: visible; }
/* Cierre sin desvanecido al seguir un enlace del panel: ver cerrarMenu()
   en main.js. */
.menu-movil.sin-transicion { transition: none; }
.menu-movil__lista { display: flex; flex-direction: column; }
.menu-movil__lista a {
  display: block;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linea-tenue);
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--tinta);
}
.menu-movil__pie { margin-top: auto; padding-top: 2.5rem; }
.menu-movil__pie .btn { width: 100%; }
.menu-movil__tel {
  display: block;
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}
body.menu-abierto { overflow: hidden; }

/* Selector de idioma ----------------------------------------------------- */
.idiomas { flex: none; }
.idiomas__lista { display: flex; align-items: center; }
.idiomas__lista li { display: flex; align-items: center; }
.idiomas__lista li + li::before {
  content: "";
  flex: none;
  width: 1px;
  height: 10px;
  margin-inline: 0.45rem;
  background: var(--linea);
}
.idiomas__enlace {
  display: block;
  padding: 0.35rem 0.15rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--tinta-suave);
  transition: color 240ms var(--ease);
}
.idiomas__enlace:hover { color: var(--tinta); }
.idiomas__enlace[aria-current="page"] { color: var(--olivo-oscuro); }

/* Dentro del menú móvil: más aire y área táctil de 44 px */
.idiomas--menu { margin-top: 1.75rem; }
.idiomas--menu .idiomas__lista { justify-content: center; }
.idiomas--menu .idiomas__enlace {
  padding: 0.75rem 0.6rem;
  font-size: 0.75rem;
}
.idiomas--menu .idiomas__lista li + li::before { height: 12px; margin-inline: 0.25rem; }

/* Sobre el pie oscuro */
.idiomas--pie .idiomas__enlace { color: rgba(237, 229, 209, 0.55); }
.idiomas--pie .idiomas__enlace:hover { color: #fff; }
.idiomas--pie .idiomas__enlace[aria-current="page"] { color: var(--lino); }
.idiomas--pie .idiomas__lista li + li::before { background: rgba(237, 229, 209, 0.25); }

/* Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Alto de pantalla completa. Con 88vh el hero terminaba antes del borde
     inferior y asomaba una franja de la sección siguiente justo debajo de la
     foto, que se leía como si la imagen estuviese cortada. La foto ocupa el
     alto del hero, así que llenándolo llega hasta abajo. */
  min-height: 100vh;
  padding-block: 150px clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

.hero__lirio {
  left: -120px;
  bottom: -60px;
  width: clamp(280px, 26vw, 420px);
  opacity: 0.05;
  transform: rotate(-8deg);
}

.hero__inner { position: relative; z-index: 2; }
.hero__contenido { max-width: 39rem; }

.hero__titulo { margin-bottom: 1.75rem; }
.hero__titulo .linea { display: block; }

.hero__lead { margin-bottom: 2.1rem; max-width: 30rem; }

.hero .etiquetas { margin-bottom: 2.5rem; }

.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* El ancho lo marca la proporción de la foto, no un porcentaje del viewport.

   Con un 46% fijo el hueco casi nunca tenía la forma de la fotografía y
   `cover` recortaba la diferencia: en monitores anchos sobraba altura y la
   imagen se cortaba por abajo, llevándose el vaso y las manos. Atando el
   ancho al alto por `aspect-ratio` el hueco tiene siempre la forma exacta de
   la foto, así que se ve entera a cualquier tamaño.

   Si se cambia la foto hay que actualizar esta proporción. El `max-width`
   mantiene el 46% que la columna tenía antes, para no invadir el texto en
   pantallas altas y estrechas. Como solo puede estrechar, nunca ensanchar,
   el sobrante cae siempre en los lados: la foto no se corta ni por arriba
   ni por abajo a ningún tamaño. */
.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  width: auto;
  aspect-ratio: 827 / 941;
  max-width: 46%;
  z-index: 1;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Solo entra en juego cuando el max-width recorta: anclado por encima del
     centro para que lo que se pierda sea el bajo de la foto y no el aire
     sobre la cabeza. */
  object-position: 35% 15%;
}
/* Difuminado suave del borde izquierdo hacia el fondo crema.

   La foto actual ya trae el degradado quemado en el píxel, así que este
   velo se aplicaría encima del que ya tiene y el desvanecido saldría al
   doble de ancho: el arco y el jarrón del fondo se perdían en el crema.
   Se deja a la mitad para rematar el empalme sin comerse la composición.
   Si algún día se sustituye la foto por una sin degradado incrustado,
   hay que devolver este ancho a clamp(90px, 26%, 200px). */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(45px, 13%, 100px);
  background: linear-gradient(to right, var(--crema) 8%, rgba(251, 248, 242, 0));
  z-index: 2;
}

/* Sobre mí --------------------------------------------------------------- */
.sobre__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.sobre__figura { position: relative; }
.sobre__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: var(--radio);
}
.sobre__figura::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  z-index: -1;
}
.sobre__texto p { max-width: 44ch; }
.sobre__acciones { margin-top: 2.25rem; }

/* Formación. Va debajo del texto y no en una columna aparte: se lee como la
   continuación natural de «quién soy», no como un bloque de méritos. El filete
   izquierdo la separa del párrafo sin necesidad de caja ni de fondo. */
.credenciales {
  margin-top: 2.25rem;
  display: grid;
  gap: 1.1rem;
  max-width: 46ch;
}
.credenciales li {
  padding-left: 1.1rem;
  border-left: 1px solid var(--linea);
}
.credenciales__titulo {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tinta);
}
.credenciales__detalle {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* Con la formación debajo, la columna de texto crece y ya no hace falta
   centrarla contra la foto: alineadas arriba las dos se leen mejor. */
@media (min-width: 861px) {
  .sobre__grid { align-items: start; }
  .sobre__figura { position: sticky; top: 7.5rem; }
}

/* Servicios -------------------------------------------------------------- */
/* Cabecera centrada: la fotografía es aquí el elemento que manda, y una
   cabecera a un lado competiría con la rejilla de círculos. */
.servicios__cabecera {
  max-width: 40rem;
  margin-inline: auto;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}
/* El antetítulo va en olivo, no en cacao como el resto: es el único apoyo de
   color de la sección, ya que las tarjetas no tienen ni borde ni fondo. */
.servicios__cabecera .eyebrow { color: var(--olivo-oscuro); }
.servicios__cabecera .eyebrow::after {
  margin-inline: auto;
  background: var(--olivo);
}
.servicios__cabecera h2 {
  font-size: clamp(2.5rem, 4.4vw, 3.875rem);
  margin-bottom: 1.25rem;
}
.servicios__intro {
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--tinta-suave);
  max-width: 54ch;
  margin-inline: auto;
}

.servicios__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  row-gap: clamp(3.5rem, 6vw, 5.5rem);
}

.servicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* El círculo lo hace el contenedor, no el archivo: las fotografías originales
   son cuadradas y se quedan intactas. `overflow: hidden` es lo que mantiene el
   zoom del hover dentro del círculo. */
.servicio__figura {
  width: clamp(200px, 19vw, 264px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 1.75rem;
}
.servicio__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.servicio:hover .servicio__foto,
.servicio:focus-within .servicio__foto { transform: scale(1.03); }

.servicio h3 { margin: 0 0 0.7rem; }
.servicio p {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--tinta-suave);
  max-width: 32ch;
  margin: 0 0 1.35rem;
}
/* `auto` empuja el enlace abajo, así los seis quedan a la misma altura dentro
   de cada fila aunque los textos midan distinto. */
.servicio .enlace-flecha { margin-top: auto; }

/* Precios ---------------------------------------------------------------- */
.precios__cabecera { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.precios__cabecera h2 { margin-bottom: 0.9rem; }
.precios__intro { color: var(--tinta-suave); }

/* Dos servicios, uno al lado del otro. `1fr 1fr` y no `auto`: las dos tarjetas
   miden lo mismo aunque una tenga tres puntos más que la otra, que es lo que
   permite comparar precios de un vistazo. */
.precios__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}

.precio {
  display: flex;
  flex-direction: column;
  background: var(--miel-suave);
  border-radius: var(--radio);
  padding: clamp(2rem, 3.6vw, 3.25rem);
}

/* Con dos tarjetas de contenido desigual, el flujo normal deja el importe de
   una a media altura del texto de la otra y no hay forma de compararlas. Con
   subgrid las cuatro bandas —cabecera, importe, «¿qué incluye?» y CTA— caen a
   la misma altura en ambas. El flex de arriba sigue siendo el respaldo para
   navegadores sin subgrid. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .precios__grid { grid-template-rows: auto auto auto auto; }
    .precio {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
    }
    /* En subgrid los márgenes entre bandas los pone el propio grid. */
    .precio__cabecera,
    .precio__bloque { margin-bottom: 0; }
    .precios__grid { row-gap: 1.9rem; }
  }
}

/* La deportiva se distingue por color, no por tamaño ni por una etiqueta de
   «recomendado»: no hay una mejor que otra, son objetivos distintos. */
.precio--destacado { background: var(--rosa-suave); }

.precio__cabecera { margin-bottom: 1.9rem; }
.precio__cabecera h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  line-height: 1.15;
  margin: 0.35rem 0 0.9rem;
}
.precio__intro { color: var(--tinta-suave); font-size: 0.9375rem; line-height: 1.7; }
.precio__nota-intro {
  margin-top: 0.9rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--linea);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}

/* Bloque de importe */
.precio__bloque {
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  margin-bottom: 1.9rem;
}
.precio__importe {
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: clamp(2.75rem, 4.6vw, 3.9rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}
.precio__duracion {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}
.precio__duracion-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cacao-oscuro);
  margin-bottom: 0.3rem;
}
.precio__importe-nota {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--tinta-suave);
}

.precio__subtitulo {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cacao-oscuro);
  margin-bottom: 1.1rem;
}

/* Una sola columna dentro de la tarjeta: con dos, las líneas quedaban de seis
   palabras y se leían a saltos. */
.precio__lista { display: grid; row-gap: 0.1rem; }
.precio__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta);
  border-bottom: 1px solid rgba(169, 126, 83, 0.16);
}
.precio__lista svg { flex: none; margin-top: 0.4rem; color: var(--olivo-oscuro); }

.precio__extra {
  margin-top: 1.6rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}
.precio__extra strong { color: var(--tinta); font-weight: 600; }

/* `margin-top: auto` empuja el botón al fondo: las dos tarjetas tienen los
   CTA a la misma altura aunque el contenido de arriba mida distinto. */
.precio__cta { margin-top: auto; align-self: flex-start; }
.precio__lista + .precio__cta,
.precio__extra + .precio__cta { margin-top: 2rem; }

/* Dentro de su banda el cuerpo se alinea arriba: el hueco sobrante de la
   tarjeta más corta queda abajo, junto al CTA, y no repartido en medio. */
.precio__cuerpo { align-self: start; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    .precio__cuerpo + .precio__cta { margin-top: 2rem; }
    /* En grid `align-self` ya no controla el eje horizontal: sin esto el
       botón se estira de lado a lado de la tarjeta. */
    .precio__cta { justify-self: start; align-self: start; }
  }
}

/* Evoluciona ------------------------------------------------------------- */
.evoluciona__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}
.evoluciona__texto h2 { margin-bottom: 1.5rem; max-width: 14ch; }
.evoluciona__figura img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  object-position: center 32%;
  border-radius: var(--radio);
}

/* Cómo funciona ---------------------------------------------------------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.paso { padding-top: 1.75rem; border-top: 1px solid var(--linea); }
.paso__numero {
  display: block;
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: clamp(2.75rem, 4vw, 3.75rem);
  font-weight: 300;
  line-height: 1;
  color: var(--cacao);
  opacity: 0.7;
  margin-bottom: 1.4rem;
}
.paso h3 {
  font-family: var(--sans);
  min-height: 3em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--tinta);
  margin-bottom: 0.85rem;
}
.paso p { font-size: 0.9375rem; line-height: 1.72; color: var(--tinta-suave); }

/* Testimonios ------------------------------------------------------------ */
/* Carrusel de uno en uno. Las citas no se sacan del DOM al cambiar: se apilan
   todas en la misma celda de un grid y sólo cambia la opacidad. Así la altura
   la fija siempre la cita más larga y la página no da un salto al pasar de
   una a otra. */
.testimonios__cabecera {
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.testimonios__cabecera .eyebrow::after { margin-inline: auto; }
.testimonios__cabecera h2 { margin: 0; }

.testimonios { max-width: 52rem; margin-inline: auto; }
.testimonios__visor { display: grid; }

.testimonio {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
.testimonio[data-activo] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.testimonio__titular {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--olivo-hondo);
  max-width: 26ch;
  margin: 0 0 1.5rem;
}
.testimonio__texto {
  font-size: clamp(1rem, 1.15vw, 1.0625rem);
  line-height: 1.8;
  color: var(--tinta-suave);
  max-width: 58ch;
  margin: 0;
}
/* Las comillas las pone el CSS y no el texto: la cita se puede traducir sin
   arrastrar los signos de cada idioma. */
.testimonio__texto::before { content: "“"; }
.testimonio__texto::after  { content: "”"; }
/* En francés son guillemets, con espacio fino dentro. */
:lang(fr) .testimonio__texto::before { content: "« "; }
:lang(fr) .testimonio__texto::after  { content: " »"; }

.testimonio__pie { margin-top: 2rem; }
.testimonio__nombre {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta);
}
.testimonio__dato {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.testimonios__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.testimonios__flecha {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.testimonios__flecha:hover {
  background: var(--olivo-oscuro);
  border-color: var(--olivo-oscuro);
  color: var(--crema);
}

.testimonios__puntos { display: flex; align-items: center; gap: 0.6rem; }
.testimonios__punto {
  position: relative;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tinta);
  opacity: 0.22;
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.testimonios__punto[aria-current="true"] {
  background: var(--olivo-oscuro);
  opacity: 1;
}
/* El punto mide 7 px: se le da un area tactil de 44 sin agrandarlo. */
.testimonios__punto::before { content: ""; position: absolute; inset: -18px; }

/* Con una sola resena los mandos sobran. */
.testimonios[data-unico] .testimonios__controles { display: none; }

/* FAQ -------------------------------------------------------------------- */
/* Acordeón con <details>: se abre sin JavaScript, es accesible con teclado y
   el buscador ve el texto de la respuesta aunque esté plegada. */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.faq__lista { border-top: 1px solid var(--linea); }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--olivo-oscuro); }
.faq__item[open] .faq__pregunta { color: var(--olivo-oscuro); }

/* El signo lo dibuja el CSS con dos filetes: una cruz que gira a menos. */
.faq__icono {
  flex: none;
  position: relative;
  width: 13px;
  height: 13px;
  margin-top: 0.45rem;
}
.faq__icono::before,
.faq__icono::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.faq__icono::after { transform: rotate(90deg); }
.faq__item[open] .faq__icono::after { transform: rotate(0deg); }

.faq__respuesta {
  padding: 0 0 1.5rem;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--tinta-suave);
}
.faq__respuesta p + p { margin-top: 0.9rem; }
.faq__respuesta a {
  color: var(--olivo-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq__pie {
  margin-top: 2.25rem;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}
/* Acceso secundario: sigue ahi, pero en tono apagado. El boton que debe
   destacar es el del cierre de la pagina. */
.faq__pie .enlace-flecha { font-weight: 500; color: var(--tinta-suave); }
.faq__pie .enlace-flecha:hover { color: var(--olivo-oscuro); }

/* La altura de la respuesta la anima el JS; `overflow` evita que el texto
   asome mientras se pliega. */
.faq__respuesta { overflow: hidden; }

/* CTA final -------------------------------------------------------------- */
.cierre { overflow: hidden; }
.cierre__inner {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.cierre__sello {
  top: 50%;
  left: 50%;
  width: clamp(340px, 42vw, 520px);
  transform: translate(-50%, -52%);
  opacity: 0.06;
}
.cierre h2 { margin-bottom: 1.4rem; }
.cierre .lead { margin-inline: auto; }

.cierre__precios {
  display: flex;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 4rem);
  margin-block: 2.75rem;
  padding-block: 1.85rem;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.cierre__precio-nombre {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cacao-oscuro);
  margin-bottom: 0.7rem;
}
.cierre__precio-importe {
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  color: var(--tinta);
}
/* Cierre final. Va mas holgado que el bloque de precios: es lo ultimo que se
   lee antes del pie y necesita aire para funcionar como final de verdad y no
   como un bloque mas. */
.cierre--final { padding-block: clamp(5.5rem, 11vw, 11rem); }
.cierre--final .cierre__inner { max-width: 40rem; }
.cierre--final h2 { margin-bottom: 1.6rem; }
.cierre--final .lead { max-width: 44ch; }
.cierre--final .btn { margin-top: 2.75rem; }
.cierre__monograma {
  top: 50%;
  left: 50%;
  width: clamp(300px, 34vw, 430px);
  transform: translate(-50%, -50%);
  opacity: 0.05;
}

.cierre__nota {
  margin-top: 1.35rem;
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

/* Footer ----------------------------------------------------------------- */
.pie {
  background: var(--oscuro);
  color: var(--lino);
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
}
.pie__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(237, 229, 209, 0.16);
}
.pie__logo img { width: 176px; }
.pie__claim {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(237, 229, 209, 0.72);
  max-width: 30ch;
}
.pie__titulo {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237, 229, 209, 0.55);
  margin-bottom: 1.25rem;
}
.pie__lista li + li { margin-top: 0.7rem; }
.pie__lista a,
.pie__tel {
  font-size: 0.9375rem;
  color: rgba(237, 229, 209, 0.88);
  transition: color 240ms var(--ease);
}
.pie__lista a:hover, .pie__tel:hover { color: #fff; }
.pie__tel { display: inline-block; font-weight: 600; }
.pie__whatsapp { margin-top: 1rem; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.85rem;
  font-size: 0.8125rem;
  color: rgba(237, 229, 209, 0.55);
}

/* Páginas legales y error 404 -------------------------------------------- */
.legal { padding-block: clamp(9rem, 16vw, 12rem) var(--seccion-y); }
.legal__inner { max-width: 42rem; }
.legal h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); margin-bottom: 1.5rem; }
.legal .lead { margin-bottom: 2.5rem; }
/* Cuerpo del documento legal. Son textos largos y de lectura seguida: prima la
   medida corta, el interlineado holgado y una jerarquia clara entre apartados. */
.legal__texto { font-size: 0.9375rem; line-height: 1.8; color: var(--tinta-suave); }
.legal__texto > *:first-child { margin-top: 0; }

.legal__texto h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--tinta);
  margin: 3.25rem 0 1rem;
}
.legal__texto h2:first-of-type { margin-top: 2.5rem; }
.legal__texto h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--tinta);
  margin: 2rem 0 0.6rem;
}
.legal__texto p { margin: 0 0 1rem; }
/* El reset general quita las viñetas; aquí sí se quieren: son textos de
   lectura seguida donde la enumeración tiene que verse. */
.legal__texto ul { margin: 0 0 1.25rem; padding-left: 1.15rem; list-style: disc; }
.legal__texto li { margin-bottom: 0.5rem; }
.legal__texto li::marker { color: var(--cacao); }
.legal__texto strong { color: var(--tinta); font-weight: 600; }
.legal__texto a {
  color: var(--olivo-oscuro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__texto a:hover { color: var(--olivo-hondo); }

/* Datos identificativos y fichas de tratamiento: pares etiqueta / valor. */
.legal__datos {
  margin: 0 0 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--lino-suave);
  border-radius: var(--radio);
}
.legal__datos div { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.legal__datos div + div { margin-top: 0.6rem; }
.legal__datos dt {
  flex: none;
  min-width: 9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinta);
}
.legal__datos dd { margin: 0; }

/* Tabla de tratamientos: en movil cada fila se apila. */
.legal__tabla { margin: 0 0 1.5rem; }
.legal__tabla > div {
  padding: 1.15rem 0;
  border-top: 1px solid var(--linea-tenue);
}
.legal__tabla > div:last-child { border-bottom: 1px solid var(--linea-tenue); }
.legal__tabla dt {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 0.35rem;
}
/* Flex y no `inline-block`: así la segunda línea del valor se alinea bajo la
   primera en vez de volver al margen, que es lo que hace legible la ficha. */
.legal__tabla dd { display: flex; gap: 0.75rem; margin: 0 0 0.35rem; }
.legal__tabla dd span {
  flex: none;
  min-width: 7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cacao-oscuro);
}

/* Aviso de borrador. Se ve a proposito: mientras esta puesto, el documento no
   deberia estar publicado. Se borra al rellenar los datos del titular. */
.legal__borrador {
  margin: 0 0 2.5rem;
  padding: 1.35rem 1.6rem;
  background: var(--miel-suave);
  border-left: 3px solid var(--cacao);
  border-radius: var(--radio);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--tinta);
}
.legal__borrador strong { display: block; margin-bottom: 0.3rem; }

/* Hueco por rellenar dentro del texto. */
.pendiente {
  background: var(--miel);
  color: var(--tinta);
  padding: 0.05em 0.4em;
  border-radius: 2px;
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

.legal__fecha {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.legal__otros {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}
.legal__otros p + p { margin-top: 0.6rem; }
.legal__otros a { color: var(--olivo-oscuro); font-weight: 600; }
.legal__otros a:hover { color: var(--olivo-hondo); }

/* Cabecera reducida de las páginas secundarias */
.cabecera__volver {
  margin-left: auto;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  font-size: 0.8125rem;
}

.pie--secundario { padding-block: 3rem 2rem; }
.pie--secundario .pie__legal { border: 0; padding-top: 0; }

/* 7 · RESPONSIVE ========================================================== */

/* ≤ 1365px — la navegación completa deja de caber cómodamente */
@media (max-width: 1365px) {
  .nav__lista { gap: 1.1rem; }
  .nav__enlace { font-size: 0.8125rem; }
  .hero__media { max-width: 41%; }
}

/* Tablet =================================================================
   El corte está en 1220px y no más abajo por el francés: «Forfait
   trimestriel» y «Comment ça marche» son bastante más largos que sus
   equivalentes en español, y con el selector de idioma en la cabecera la
   fila se quedaba sin holgura. Si se cambia este valor, hay que cambiar
   también el `window.innerWidth > 1220` de main.js, que cierra el menú al
   volver a escritorio. */
@media (max-width: 1220px) {
  .nav, .cabecera__cta, .cabecera .idiomas { display: none; }
  .hamburguesa { display: flex; }

  .hero {
    display: block;
    min-height: 0;
    padding-block: 118px 0;
  }
  .hero__contenido { max-width: none; }
  .hero__media {
    position: relative;
    inset: auto;
    /* Deshace el dimensionado por proporción del escritorio: aquí la foto va
       a ancho completo bajo el texto y la forma la fija .hero__media img. */
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    margin-top: clamp(2.5rem, 6vw, 3.5rem);
  }
  .hero__media::before { display: none; }
  /* La foto es casi cuadrada y la protagonista ocupa todo el alto: a 16/10
     se descartaba el 62% de la altura y el recorte entraba por la frente.
     Con 4/3 y el encuadre subido se conservan cara y batido. */
  .hero__media img { aspect-ratio: 4 / 3; height: auto; object-position: 50% 12%; }
  .hero__lirio { left: -140px; top: 4%; opacity: 0.06; }

  .sobre__grid,
  .evoluciona__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  .sobre__figura { max-width: 420px; }
  .evoluciona__figura { max-width: 460px; }

  .servicios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tres citas en una fila dejan líneas de cuatro palabras: mejor dos. */
  .faq__grid { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }

  /* Por debajo de 1220px dos columnas de tarjeta dejan lineas de cinco
     palabras: mejor una debajo de otra. */
  .precios__grid { grid-template-columns: 1fr; }

  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .pie__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__logo { grid-column: 1 / -1; }
}

/* Móvil ==================================================================
   El límite lleva decimales a propósito. Con zoom del navegador o densidades
   de pantalla fraccionarias el ancho del viewport no es entero, y entre
   `max-width: 719px` y `min-width: 720px` queda un hueco en el que no entra
   ninguno de los dos: a 719,5px se veía el hueco de la foto sin foto, porque
   el <picture> de la portada ya servía el píxel transparente y este bloque
   todavía no ocultaba el contenedor. El `.98` cierra ese hueco y tiene que
   coincidir con el `media` del <source> y el del preload. */
@media (max-width: 719.98px) {
  :root { --seccion-y: clamp(4.5rem, 14vw, 6rem); --pad-x: 1.375rem; }

  h1 { font-size: clamp(3rem, 12.8vw, 3.5rem); line-height: 1.02; }
  h2 { font-size: clamp(2rem, 8.4vw, 2.5rem); }

  /* Sin foto en el hero (ver .hero__media más abajo) el bloque se queda sin
     su cierre visual, así que recupera el margen inferior que la versión de
     tablet pone a cero por apoyarse en la imagen. */
  .hero { padding-block: 104px var(--seccion-y); }
  .hero__titulo { margin-bottom: 1.35rem; }
  .hero__lead { margin-bottom: 1.6rem; font-size: 0.9375rem; }
  .hero .etiquetas { margin-bottom: 2rem; gap: 0.5rem; }
  .etiqueta { padding: 0.45rem 0.9rem; font-size: 0.75rem; }

  .hero__acciones { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .hero__acciones .btn { width: 100%; }

  /* En una sola columna la foto del hero caía pegada al retrato de Eva de
     «Sobre mí»: dos mujeres seguidas, sin nada que las separase. Se quita la
     del hero, que es la decorativa de las dos. El <picture> de la portada
     evita además que se descargue. */
  .hero__media { display: none; }

  .sobre__figura { max-width: none; }
  .sobre__figura::after { inset: 10px -10px -10px 10px; }

  .servicios__grid { grid-template-columns: 1fr; row-gap: 3.25rem; }
  .servicio__figura { width: clamp(200px, 58vw, 240px); margin-bottom: 1.5rem; }

  .precio { padding: 1.9rem 1.35rem; }
  .testimonio__titular { font-size: 1.375rem; }
  .testimonios__controles { gap: 1.25rem; margin-top: 2.25rem; }
  /* Área táctil de 44 px en la fila de la pregunta. */
  .faq__pregunta { padding: 1.1rem 0; font-size: 1rem; min-height: 44px; }
  /* El CTA a ancho completo: en movil un boton alineado a la izquierda dentro
     de una tarjeta estrecha parece un enlace suelto. */
  .precio__cta { width: 100%; align-self: stretch; justify-content: center; }
  .cierre__precios { flex-direction: column; gap: 1.5rem; }
  .legal__datos { padding: 1.25rem 1.25rem; }
  .legal__datos div { flex-direction: column; gap: 0.1rem; }
  .legal__datos dt { min-width: 0; }
  .legal__tabla dd { flex-direction: column; gap: 0.1rem; }
  .legal__tabla dd span { min-width: 0; }

  .evoluciona__figura { max-width: none; }

  .pasos { grid-template-columns: 1fr; gap: 2.25rem; }
  .paso h3 { min-height: 0; }
  .paso__numero { font-size: 2.5rem; margin-bottom: 1rem; }

  .cierre .btn { width: 100%; }
  .cierre__sello { width: 300px; }

  .pie__grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .pie__legal { flex-direction: column; gap: 0.6rem; }
}

/* Pantallas muy anchas =================================================== */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* Escritorio de poca altura ==============================================
   El hero se dimensionaba solo en función del ancho, así que en portátiles
   de 1366×768 —que con la barra del navegador dejan unos 640 px útiles— la
   fila de botones caía por debajo del pliegue: el visitante veía el titular
   y la foto, pero no «Quiero empezar». Aquí se comprime el ritmo vertical
   del hero (y solo el del hero) para que las dos llamadas a la acción
   entren en la primera vista, como en el resto de tamaños.

   El corte de anchura es el mismo 1220px del bloque de tablet: por debajo
   el hero ya coloca la foto bajo el texto y los botones se ven siempre. */
@media (min-width: 1221px) and (max-height: 820px) {
  .hero { padding-block: 118px clamp(2.5rem, 6vh, 4rem); }

  /* El titular ocupa tres líneas: limitarlo también contra la altura evita
     que se coma la mitad del alto disponible en pantallas apaisadas. */
  .hero__titulo {
    font-size: min(clamp(3rem, 6.1vw, 5.6rem), 10.5vh);
    margin-bottom: clamp(0.9rem, 2.2vh, 1.75rem);
  }
  .hero__lead { margin-bottom: clamp(1.1rem, 2.6vh, 2.1rem); }
  .hero .etiquetas { margin-bottom: clamp(1.25rem, 3vh, 2.5rem); }
}

/* 8 · MOVIMIENTO ========================================================== */
.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  transition-delay: var(--retraso, 0ms);
}
.revelar.es-visible { opacity: 1; transform: none; }

@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;
  }
  .revelar { opacity: 1; transform: none; }
}

@media print {
  .cabecera, .menu-movil, .marca-agua { display: none !important; }
  body { background: #fff; }
}