/* ==========================================================================
   ONA Salud Integrativa
   0. Fuentes         1. Tokens           2. Reset / base
   3. Tipografía      4. Utilidades       5. Cabecera
   6. Botones         7. Secciones        8. Componentes
   9. Pie             10. Responsive     11. Contenido genérico
   ========================================================================== */

/* 0. Fuentes -------------------------------------------------------------
   Autoalojadas: evita la conexión extra a fonts.googleapis.com/gstatic.com.
   Solo los pesos/estilos que realmente usa este CSS (ver 3. Tipografía). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/raleway-400-normal.woff2") format("woff2");
}

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --c-burdeos: #6b333c;
  --c-burdeos-osc: #4a2229;
  --c-burdeos-clr: #7c424b;
  --c-acento: #a05f55;
  --c-rosa: #e2a096;
  --c-rosa-osc: #d9968d;
  --c-arena: #dcd2c4;
  --c-crema: #f7f3ee;
  --c-crema-2: #f2ebe3;
  --c-crema-3: #e9dfd4;
  --c-texto: #3a2a2c;
  --c-texto-2: #5a4548;
  --c-texto-3: #7a5d60;
  --c-texto-4: #8a6b6e;
  --c-sobre-osc: #ebd9d2;

  --linea: rgba(107, 51, 60, 0.16);
  --linea-suave: rgba(107, 51, 60, 0.1);
  --linea-fuerte: rgba(107, 51, 60, 0.28);
  --linea-clara: rgba(242, 231, 224, 0.4);

  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-texto: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --e-1: 8px;
  --e-2: 14px;
  --e-3: 22px;
  --e-4: 32px;
  --e-5: 56px;
  --e-6: 72px;
  --marco: 56px;
  --seccion-y: 120px;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 12px;
  --r-pill: 999px;

  --sombra-card: 0 18px 38px rgba(107, 51, 60, 0.14);
  --sombra-btn: 0 10px 24px rgba(107, 51, 60, 0.22);
  --sombra-modal: 0 30px 80px rgba(58, 42, 44, 0.34);

  --t-rapida: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-media: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-lenta: 900ms cubic-bezier(0.22, 1, 0.36, 1);

  --alto-cabecera: 85px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  /* clip, no hidden: hidden crea un contenedor de scroll y rompe el sticky. */
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background: var(--c-crema);
  color: var(--c-texto);
  font-family: var(--f-texto);
  font-size: 16px;
  /* El diseño aprobado no fija interlineado global: cada componente declara
     el suyo. Heredar 1.8 engordaba rótulos, chips y botones. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
  max-width: 100%;
}

img,
video {
  display: block;
  height: auto;
}

a {
  color: var(--c-burdeos);
  text-decoration: none;
  transition: color var(--t-rapida), background-color var(--t-rapida),
    border-color var(--t-rapida), transform var(--t-rapida), opacity var(--t-rapida);
}

a:hover {
  color: var(--c-acento);
}

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

button {
  font: inherit;
  cursor: pointer;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3. Tipografía --------------------------------------------------------- */
/* Estilo por clase, no por etiqueta: así ona.css no toca encabezados que
   no sean nuestros (contenido por defecto de WordPress, widgets, etc.). */
.titulo-1,
.titulo-2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 300;
  color: var(--c-burdeos);
  text-wrap: pretty;
}

.titulo-1 {
  font-size: 62px;
  line-height: 1.06;
}

/* El titular de la home es un punto mayor que el de las interiores. */
.hero .titulo-1 {
  font-size: 64px;
  letter-spacing: -0.01em;
}

.titulo-2 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.1;
}

/* Rótulos que son encabezados por semántica pero etiquetas por diseño:
   recuperan la sans y el interlineado normal del build aprobado.
   pie__titulo/dato__titulo/subgrupo__titulo van sobre <h2>/<h3>: al no
   llevar clase .titulo-1/2, necesitan su propio margin/text-wrap. */
.pie__titulo,
.dato__titulo,
.subgrupo__titulo,
.eyebrow,
.eyebrow--s {
  margin: 0;
  font-family: var(--f-texto);
  font-weight: 400;
  line-height: normal;
  text-wrap: pretty;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.eyebrow--s {
  font-size: 10px;
  letter-spacing: 0.22em;
}

.lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-texto-2);
  max-width: 48ch;
}

.nota {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-texto-3);
}

.cita {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.5;
  color: var(--c-acento);
  max-width: 42ch;
}

.servicio .cita {
  font-size: 26px;
}

.destacado {
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.5;
  color: var(--c-burdeos);
}

.prosa {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.8;
  color: var(--c-texto-2);
}

.seccion--burdeos .prosa {
  gap: var(--e-3);
}

.prosa--intro {
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.8;
}

.lista-display {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1.35;
  color: var(--c-burdeos);
}

.regla {
  width: 100%;
  height: 1px;
  margin: var(--e-1) 0;
  border: 0;
  background: var(--linea);
}

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

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.marca__nombre {
  font-family: var(--f-display);
  font-size: 34px;
  letter-spacing: 0.02em;
  color: var(--c-burdeos);
}

.marca__claim {
  font-size: 8px;
  letter-spacing: 0.34em;
  color: var(--c-burdeos);
}

/* 5. Cabecera ----------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--marco);
  background: rgba(247, 243, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea-suave);
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav__enlace {
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}

.nav__enlace:hover {
  border-bottom-color: var(--c-acento);
  transform: translateY(-1px);
}

.nav__enlace[aria-current="page"] {
  border-bottom-color: var(--c-burdeos);
}

.hamburguesa {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-burdeos);
  font-size: 16px;
  line-height: 1;
  transition: background-color var(--t-rapida), color var(--t-rapida),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 6. Botones ------------------------------------------------------------ */
/* Alto fijo para todos los botones; el borde transparente iguala el ancho
   entre variantes rellenas y de contorno. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Alias histórico: mismo alto y padding que el botón base. */
.btn--s {
  font-size: 11px;
}

/* Única excepción: el botón de la cabecera. */
.btn--xs {
  min-height: 38px;
  padding: 0 22px;
  font-size: 11px;
}

.btn--primario {
  background: var(--c-burdeos);
  color: var(--c-crema);
}

.btn--primario:hover {
  background: var(--c-acento);
  color: var(--c-crema);
  transform: translateY(-2px);
  box-shadow: var(--sombra-btn);
}

.btn--fantasma {
  border-color: rgba(107, 51, 60, 0.35);
  color: var(--c-burdeos);
}

.btn--fantasma:hover {
  background: var(--c-burdeos);
  border-color: var(--c-burdeos);
  color: var(--c-crema);
  transform: translateY(-2px);
}

.btn--claro {
  background: var(--c-crema);
  color: var(--c-burdeos);
}

.btn--claro:hover {
  background: var(--c-rosa);
  color: var(--c-burdeos-osc);
  transform: translateY(-2px);
}

.btn--borde-claro {
  border-color: var(--linea-clara);
  color: var(--c-crema);
}

.btn--borde-claro:hover {
  background: var(--c-crema);
  border-color: var(--c-crema);
  color: var(--c-burdeos);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-grupo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

/* Un botón suelto dentro de una pila no debe estirarse a lo ancho. */
.pila > .btn,
.pila > .enlace-linea,
.servicio .btn {
  align-self: flex-start;
  margin-top: var(--e-1);
}

.enlace-linea {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(107, 51, 60, 0.35);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.enlace-linea:hover {
  border-bottom-color: var(--c-acento);
  transform: translateX(4px);
}

.enlace-linea--claro {
  border-bottom-color: var(--linea-clara);
  color: var(--c-crema);
}

.enlace-linea--claro:hover {
  border-bottom-color: var(--c-rosa);
  color: var(--c-crema);
}

/* 7. Secciones ---------------------------------------------------------- */
.seccion {
  padding: var(--seccion-y) var(--marco);
}

.seccion--crema-2 {
  background: var(--c-crema-2);
}

.seccion--arena {
  background: var(--c-arena);
}

.seccion--rosa {
  background: var(--c-rosa);
  color: var(--c-burdeos-osc);
}

.seccion--burdeos {
  background: var(--c-burdeos);
  color: var(--c-sobre-osc);
}

/* "Cómo empezamos" respira algo menos que las secciones vecinas (10px menos
   que --seccion-y) — calc() en vez de un valor fijo, misma razón que
   .servicio: para que escale con --seccion-y en cada breakpoint en vez de
   quedarse con el padding de escritorio hasta el salto a 767px. */
.seccion--crema-2.seccion--linea-sup {
  padding-block: calc(var(--seccion-y) - 10px);
}

.seccion--linea-sup {
  border-top: 1px solid var(--linea-suave);
}

.seccion--rosa .titulo-2 {
  color: var(--c-burdeos-osc);
}

.seccion--rosa .eyebrow,
.seccion--rosa .eyebrow--s {
  color: var(--c-burdeos);
}

.seccion--rosa .prosa,
.seccion--rosa .lead {
  color: var(--c-burdeos-osc);
}

.seccion--rosa .cita {
  color: var(--c-burdeos);
}

.seccion--burdeos .titulo-2 {
  color: var(--c-crema);
}

.seccion--burdeos .eyebrow,
.seccion--burdeos .eyebrow--s {
  color: var(--c-rosa);
}

.seccion--burdeos .prosa,
.seccion--burdeos .lead {
  color: var(--c-sobre-osc);
}

.seccion--burdeos .cita {
  color: var(--c-rosa);
}

.seccion__cabeza {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  max-width: 62ch;
}

.seccion--cabecera {
  padding-top: 96px;
  padding-bottom: var(--e-6);
}

.seccion--continua {
  padding-top: 0;
  padding-bottom: 110px;
}

/* Panel partido a sangre: media a un lado, texto al otro. */
.seccion--partida {
  padding: 0;
}

/* Panel a sangre: sin gap de por medio, a diferencia del resto de .duo —
   el espacio entre foto y texto lo pone solo el padding de .panel-texto.
   Selector combinado (no solo .seccion--partida) para ganarle a .duo pase
   lo que pase el orden en el archivo. A partir de 767px vuelve a tomar el
   gap normal de .duo (la sección se apila en una columna y ese hueco entre
   foto y texto sí hace falta ahí). */
.duo.seccion--partida {
  gap: 0;
}

.panel-media {
  position: relative;
  height: 100%;
  min-height: 460px;
  overflow: hidden;
}

.panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#enfoque .pila {
  gap: 24px;
}

.panel-texto {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 96px var(--e-6);
}

.panel-texto .lead {
  max-width: 46ch;
}

/* Rejillas */
/* Los hijos de rejilla y flex conservan min-width:auto, así que su
   contenido intrínseco (carruseles, listas largas) desborda la pista.
   min-width:0 deja que la pista mande. */
.duo > *,
.auto-cols > *,
.auto-cols--estrecho > *,
.servicio > *,
.pila,
.prosa,
.carrusel,
.subgrupos > * {
  min-width: 0;
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-6);
  align-items: start;
}

.duo--centrado {
  align-items: center;
}

.duo--texto-ancho {
  grid-template-columns: 1.15fr 1fr;
}

.duo--media-ancho {
  grid-template-columns: 0.85fr 1.15fr;
}

/* Bloque de servicios de la home: texto corto y carrusel ancho. */
.bloque-servicios {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
  margin-top: var(--e-5);
}

.bloque-servicios > * {
  min-width: 0;
}

.bloque-servicios .lead {
  max-width: 38ch;
}

.bloque-pasos {
  margin-top: var(--e-5);
}

/* Carrusel y mandos del equipo, dentro de la banda burdeos. */
.seccion--burdeos .carrusel {
  margin-top: 64px;
}

.seccion--burdeos .carrusel-mandos {
  margin-top: 24px;
}

.auto-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}

.auto-cols--estrecho {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.pila--ancha {
  gap: var(--e-4);
}

.pila--estrecha {
  gap: var(--e-2);
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  min-height: 620px;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 96px 64px 96px var(--marco);
}

.hero__texto .lead {
  max-width: 46ch;
  line-height: 1.75;
}

.hero__media {
  position: relative;
  overflow: hidden;
  background: var(--c-arena);
}

.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media video {
  opacity: 0;
  transition: opacity var(--t-lenta);
}

.hero__media video.esta-lista {
  opacity: 1;
}

.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(247, 243, 238, 0.45) 0%,
    rgba(247, 243, 238, 0) 34%
  );
  pointer-events: none;
}

.banda-media {
  height: 420px;
  overflow: hidden;
  background: var(--c-arena);
}

.banda-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* 8. Componentes -------------------------------------------------------- */

/* Barra de disciplinas */
.disciplinas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  background: var(--c-crema-2);
}

.disciplinas__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px 24px;
  border-right: 1px solid var(--linea-suave);
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.25;
  text-align: center;
  transition: background-color 320ms ease;
}

.disciplinas__item:last-child {
  border-right: 0;
}

.disciplinas__item:hover {
  background: var(--c-crema-3);
}

/* Carrusel */
.carrusel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px;
  scrollbar-width: none;
}

.carrusel::-webkit-scrollbar {
  display: none;
}

.carrusel > * {
  flex: 0 0 max(240px, calc(50% - 10px));
  min-width: 0;
  scroll-snap-align: start;
}

.carrusel--cuatro > * {
  flex: 0 0 max(200px, calc(25% - 15px));
}

.carrusel-mandos {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mando {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-burdeos);
  font-size: 17px;
  transition: background-color var(--t-rapida), color var(--t-rapida),
    transform var(--t-rapida), opacity var(--t-rapida);
}

.mando:hover {
  background: var(--c-burdeos);
  color: var(--c-crema);
  transform: translateY(-2px);
}

.mando[disabled] {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.mando--claro {
  border-color: var(--linea-clara);
  color: var(--c-crema);
}

.mando--claro:hover {
  background: var(--c-crema);
  color: var(--c-burdeos);
}

.carrusel-nota {
  margin-left: var(--e-1);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-acento);
}

/* Tarjeta de servicio */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: 34px 30px 28px;
  background: var(--c-crema-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-m);
  min-height: 320px;
  transition: background-color var(--t-media), border-color var(--t-media),
    transform var(--t-media), box-shadow var(--t-media);
}

.tarjeta:hover {
  background: var(--c-arena);
  border-color: var(--linea-fuerte);
  transform: translateY(-8px);
  box-shadow: var(--sombra-card);
}

.tarjeta__quien {
  min-height: 13px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.tarjeta__titulo {
  font-family: var(--f-display);
  font-size: clamp(23px, 2vw, 30px);
  line-height: 1.14;
  color: var(--c-burdeos);
  overflow-wrap: break-word;
}

.tarjeta__texto {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-texto-2);
}

/* Tarjeta sin “Con …”: mantiene el ritmo sin un span vacío. */
.tarjeta--sin-quien .tarjeta__titulo {
  margin-top: 27px;
}

.tarjeta__cta {
  margin-top: auto;
  padding-top: 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-burdeos);
}

/* Tarjeta de proceso */
.paso {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: 32px 26px;
  background: var(--c-crema);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-s);
  transition: transform var(--t-media), box-shadow var(--t-media);
}

.paso:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(107, 51, 60, 0.1);
}

.paso__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-acento);
}

.paso__titulo {
  margin: 0;
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1.2;
  color: var(--c-burdeos);
  text-wrap: pretty;
}

.paso__texto {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-texto-2);
}

/* Retratos */
.retrato {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-s);
  background: var(--c-arena);
}

/* 8px en el original, distinto del --r-m (10px) que usan las tarjetas. */
.retrato--m {
  border-radius: 8px;
}

.retrato img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--t-lenta), filter 500ms ease;
}

.retrato--sobre-osc {
  background: var(--c-burdeos-clr);
}

.retrato--sobre-rosa {
  background: var(--c-rosa-osc);
}

/* Ficha de persona (rejilla del equipo) */
.persona {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  text-align: left;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  transition: transform var(--t-rapida);
}

.persona:hover {
  transform: translateY(-6px);
}

.persona:hover .retrato img {
  transform: scale(1.05);
  filter: saturate(1);
}

.persona__nombre {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1.1;
  color: var(--c-burdeos);
}

.persona__rol {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.persona--claro .persona__nombre {
  font-size: 26px;
  color: var(--c-crema);
}

.persona--claro .persona__rol {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--c-rosa);
}

.persona--claro .retrato img {
  filter: saturate(0.96);
}

/* Índice de servicios */
.indice {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 20;
  display: flex;
  gap: var(--e-1);
  padding: 18px var(--marco) 13px;
  overflow-x: auto;
  scroll-behavior: smooth;
  background: rgba(242, 235, 227, 0.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea-suave);
  border-bottom: 1px solid var(--linea-suave);
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 51, 60, 0.35) transparent;
}

.indice::-webkit-scrollbar {
  height: 5px;
}

.indice::-webkit-scrollbar-track {
  background: transparent;
}

.indice::-webkit-scrollbar-thumb {
  background: rgba(107, 51, 60, 0.3);
  border-radius: var(--r-pill);
}

.chip {
  flex: none;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid rgba(107, 51, 60, 0.22);
  border-radius: var(--r-pill);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-burdeos);
}

.chip:hover,
.chip[aria-current="true"] {
  background: var(--c-burdeos);
  border-color: var(--c-burdeos);
  color: var(--c-crema);
}

.chip--estatico {
  border-color: rgba(107, 51, 60, 0.25);
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 22px;
}

.chip--sobre-osc {
  border-color: rgba(242, 231, 224, 0.3);
  color: var(--c-crema);
}

/* Etiqueta, no enlace: sin hover ni foco. Además, en el diseño original
   estos temas van en texto normal (sin versalitas ni tracking), más grandes
   y legibles que los chips del índice — no comparten el mismo tamaño. */
.chip--inerte {
  padding: 11px 20px;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  pointer-events: none;
}

.chip-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Servicio */
/* Los bloques de servicio respiran algo menos que las secciones de la home
   (10px menos que --seccion-y), pero deben seguir su misma escala
   responsive — calc() en vez de un valor fijo, para no quedarse con el
   padding de escritorio en los anchos donde --seccion-y ya se ha reducido. */
.servicio {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--e-6);
  align-items: start;
  padding: calc(var(--seccion-y) - 10px) var(--marco);
  scroll-margin-top: 110px;
}

.servicio--media-dcha {
  grid-template-columns: 1.1fr 0.9fr;
}

.servicio .lead,
.servicio .nota {
  max-width: 54ch;
}

.servicio__lista {
  max-width: 56ch;
}

.servicio__lista li {
  padding: 18px 4px;
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-display);
  font-size: 24px;
  line-height: normal;
  color: var(--c-burdeos);
  transition: padding-left 300ms ease;
}

.servicio__lista li:first-child {
  border-top: 1px solid var(--linea);
}

.servicio__lista li:hover {
  padding-left: var(--e-2);
}

.subgrupos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  margin-top: var(--e-1);
}

.subgrupos--tres {
  grid-template-columns: repeat(3, 1fr);
}

.subgrupo__titulo {
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.subgrupo__lista {
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-texto-2);
}

/* La misma pieza cuando el contenido es un párrafo y no una lista. */
.subgrupo__lista--parrafo {
  line-height: 1.8;
}

.seccion--rosa .subgrupo__titulo {
  color: var(--c-burdeos);
}

.seccion--rosa .subgrupo__lista {
  color: var(--c-burdeos-osc);
  line-height: 1.95;
}

/* Cruce de fotos (dos profesionales, un hueco) */
.cruce {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-m);
  background: var(--c-arena);
}

.cruce img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.cruce img.esta-visible {
  opacity: 1;
}

.cruce-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-texto-3);
}

.puntos {
  display: flex;
  gap: 7px;
  flex: none;
}

.punto {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: rgba(107, 51, 60, 0.25);
  transition: background-color 600ms ease;
}

.punto.esta-activo {
  background: var(--c-burdeos);
}

/* Cierre */
.cierre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 120px var(--marco);
  background: var(--c-arena);
  text-align: center;
}

.cierre .titulo-2 {
  max-width: 26ch;
  font-size: clamp(34px, 4.4vw, 52px);
}

.cierre p {
  max-width: 52ch;
  color: var(--c-texto-2);
}

.cierre--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0;
  text-align: left;
}

.cierre--duo .cierre__texto {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 110px var(--e-6);
}

.cierre--duo .cierre__media {
  height: 100%;
  min-height: 380px;
  overflow: hidden;
}

.cierre--duo .cierre__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modal */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-3);
  background: rgba(58, 42, 44, 0.5);
  backdrop-filter: blur(6px);
  animation: ona-aparece 260ms ease both;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--c-crema);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-modal);
  animation: ona-sube 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal__cerrar {
  position: sticky;
  top: 0;
  float: right;
  margin: var(--e-2) var(--e-2) 0 0;
  width: 42px;
  height: 42px;
  z-index: 2;
  border: 1px solid rgba(107, 51, 60, 0.2);
  border-radius: var(--r-pill);
  background: rgba(247, 243, 238, 0.92);
  color: var(--c-burdeos);
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--t-rapida), color var(--t-rapida),
    transform var(--t-rapida);
}

.modal__cerrar:hover {
  background: var(--c-burdeos);
  color: var(--c-crema);
  transform: rotate(90deg);
}

.modal__cuerpo {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: clamp(20px, 5vw, 44px);
}

.modal__media {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 300px;
}

.modal__texto {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.modal__texto .titulo-2 {
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.08;
}

.modal__texto .cita {
  font-size: 25px;
  line-height: 1.45;
}

.modal__texto .prosa {
  font-size: 16px;
  line-height: 1.85;
}

/* Citas */
.widget-citas {
  position: relative;
  min-width: 0;
  min-height: 420px;
}

.widget-citas iframe {
  display: block;
  width: 100%;
}

/* Aviso que sustituye al calendario mientras no hay consentimiento de
   cookies de terceros (ver ona.js:doctoralia). */
.widget-citas__aviso {
  display: flex;
  height: 100%;
  min-height: 420px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-4);
  text-align: center;
  background: var(--c-crema-2);
  border-radius: var(--r-m);
}

.widget-citas__aviso p {
  max-width: 40ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-texto-2);
}

/* Banner de cookies */
.cookies {
  position: fixed;
  left: var(--marco);
  right: var(--marco);
  bottom: var(--e-3);
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  max-width: 860px;
  margin: 0 auto;
  padding: var(--e-3) var(--e-4);
  background: var(--c-crema);
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-modal);
  animation: ona-sube 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cookies[hidden] {
  display: none;
}

.cookies__texto {
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-texto-2);
}

.cookies__texto a {
  text-decoration: underline;
}

.cookies__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* Reutiliza la tipografía de .pie__enlace en un <button> (el resto de
   enlaces del pie son <a>): resetea lo propio de un botón nativo. */
button.pie__enlace {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
}

.datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-4);
  padding: 0 var(--marco) var(--seccion-y);
}

.dato__titulo {
  margin-bottom: 10px;
}

.dato__texto {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-texto-2);
}

/* 9. Pie ---------------------------------------------------------------- */
.pie {
  padding: 84px var(--marco) 36px;
  background: var(--c-crema-2);
  border-top: 1px solid var(--linea-suave);
}

.pie__cuerpo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
}

.pie__bloque {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  font-size: 15px;
}

.pie__bloque p {
  line-height: 1.7;
}

.pie .nota {
  max-width: 32ch;
}

.pie .btn-grupo {
  gap: 10px;
}

.pie__marca .marca {
  align-items: flex-start;
}

.pie__marca .marca__nombre {
  font-size: 38px;
}

.pie__marca .marca__claim {
  font-size: 9px;
}

.pie__titulo {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-acento);
}

.pie__enlace {
  color: var(--c-texto-2);
}

.pie__enlace:hover {
  color: var(--c-burdeos);
  transform: translateX(4px);
}

.pie__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(107, 51, 60, 0.14);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-texto-4);
}

.pie__legal-lista {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

/* Animaciones */
/* opacity: .3 en vez de 0 — Chrome solo excluye del cálculo de Largest
   Contentful Paint los elementos con opacity:0 (totalmente invisibles); con
   cualquier opacidad mayor ya cuenta como contenido pintado. Mantiene algo
   de fundido sin arriesgar el LCP. */
@keyframes ona-sube-seccion {
  from {
    opacity: 0.3;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ona-aparece {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ona-sube {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.seccion,
.servicio,
.hero,
.disciplinas,
.cierre,
.pie {
  animation: ona-sube-seccion 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 10. Responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  /* .btn always has white-space: nowrap, so a button's text itself never
     wraps — but below this width, two buttons side by side in a
     .btn-grupo (flex-wrap) no longer fit and break awkwardly mid-row.
     Stacking them full-width, one under the other, reads cleanly instead. */
  .btn-grupo {
    flex-direction: column;
    align-items: center;
  }

  .btn-grupo .btn {
    width: 100%;
    max-width: 250px;
  }
}

@media (max-width: 1000px) {
  .disciplinas {
    grid-template-columns: repeat(3, 1fr);
  }

  .disciplinas__item {
    border-bottom: 1px solid var(--linea-suave);
  }

  .subgrupos--tres {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  :root {
    --marco: 20px;
    --seccion-y: 68px;
    --alto-cabecera: 74px;
  }

  .titulo-1,
  .hero .titulo-1 {
    font-size: clamp(38px, 5.6vw, 62px);
  }

  /* El lado derecho va fijo a 64px en escritorio (no ligado a --marco);
     por debajo de 900px sí debe encogerse como el resto de márgenes. */
  .hero__texto {
    padding-right: var(--marco);
  }

  .cabecera {
    position: relative;
    position: sticky;
    padding: var(--e-2) var(--marco);
  }

  .hamburguesa {
    display: block;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: 0;
    padding: 0 var(--marco);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--c-crema);
    border-bottom: 1px solid transparent;
    transition: max-height var(--t-media), opacity 280ms ease,
      padding var(--t-media), box-shadow var(--t-media);
  }

  .cabecera[data-menu="abierto"] .nav {
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px var(--marco) var(--e-3);
    opacity: 1;
    pointer-events: auto;
    border-bottom-color: var(--linea-suave);
    box-shadow: 0 18px 34px rgba(58, 42, 44, 0.1);
  }

  .cabecera[data-menu="abierto"] .hamburguesa {
    background: var(--c-burdeos);
    color: var(--c-crema);
    transform: rotate(90deg);
  }

  .nav__enlace {
    padding: 15px 4px;
    border-bottom: 1px solid var(--linea-suave);
    font-size: 12px;
  }

  /* En móvil el botón de la cabecera pasa a 44px: es un objetivo táctil. */
  .nav .btn {
    margin-top: 12px;
    min-height: 44px;
    justify-content: center;
  }

  .marca__nombre {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .titulo-1,
  .hero .titulo-1 {
    font-size: clamp(32px, 9vw, 46px);
  }

  .titulo-2 {
    font-size: clamp(28px, 7.5vw, 40px);
  }
  .bloque-servicios,
  .duo,
  .duo--texto-ancho,
  .duo--media-ancho,
  .servicio,
  .servicio--media-dcha,
  .cierre--duo,
  .subgrupos,
  .subgrupos--tres,
  .datos {
    grid-template-columns: 1fr;
    gap: var(--e-4);
  }

  .servicio,
  .servicio--media-dcha {
    gap: var(--e-4);
  }

  /* En móvil todas las bandas comparten el mismo ritmo vertical. */
  .servicio,
  .seccion--crema-2.seccion--linea-sup {
    padding-block: var(--seccion-y);
  }

  /* La imagen del servicio siempre primero en móvil */
  .servicio__media {
    order: -1;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hero__media {
    order: -1;
    min-height: 62vh;
  }

  .hero__texto {
    padding: 40px var(--marco) var(--e-5);
  }

  .cierre--duo .cierre__texto {
    padding: var(--seccion-y) var(--marco);
  }

  .cierre--duo .cierre__media {
    min-height: 260px;
  }

  .seccion--partida {
    grid-template-columns: 1fr;
  }

  /* Misma especificidad que la regla de escritorio (.duo.seccion--partida):
     hace falta repetir el selector completo para recuperar aquí el gap
     entre foto y texto apilados, si no ganaría igualmente el gap:0. */
  .duo.seccion--partida {
    gap: var(--e-4);
  }

  .panel-media {
    min-height: 260px;
  }

  .panel-texto {
    padding: var(--seccion-y) var(--marco);
  }

  .banda-media {
    height: 260px;
  }

  .disciplinas {
    grid-template-columns: 1fr;
  }

  .disciplinas__item {
    padding: 22px 18px;
    border-right: 0;
  }

  .disciplinas__item:last-child {
    border-bottom: 0;
  }

  .carrusel > *,
  .carrusel--cuatro > * {
    flex-basis: min(88vw, 340px);
  }

  .modal__cuerpo {
    width: 100%;
    gap: 24px;
  }

  .modal__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  .modal__texto {
    flex: 1 1 100%;
    width: 100%;
  }

  .pie__cuerpo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4) var(--e-3);
  }

  .pie__marca {
    grid-column: 1 / -1;
  }

  /* Con 3 bloques (Servicios/Equipo/Citas), el último se queda impar tras
     que la marca ocupe la fila entera: mejor a todo lo ancho que compartir
     fila con solo uno. */
  .pie__bloque:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .cierre > .pila {
    padding-left: 0;
    padding-right: 0;
  }

  .cookies {
    left: var(--e-2);
    right: var(--e-2);
    bottom: var(--e-2);
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookies__botones {
    justify-content: center;
  }
}

/* Igual que en la propuesta aprobada: reduce-motion solo apaga el scroll
   suave y las animaciones de entrada. Los hover se mantienen. */
@media (prefers-reduced-motion: reduce) {
  html,
  .carrusel,
  .indice {
    scroll-behavior: auto;
  }

  .seccion,
  .servicio,
  .hero,
  .disciplinas,
  .cierre,
  .pie {
    animation: none;
  }
}

/* 11. Contenido genérico (WYSIWYG) ---------------------------------------
   Prosa de páginas de texto libre (Aviso legal, Política de privacidad,
   Política de cookies…), escritas desde un campo WYSIWYG que no permite
   añadir clases BEM a cada párrafo o título. Excepción deliberada y
   aislada a la regla de "nunca estilos por etiqueta" (ver LEEME.md): todo
   vive dentro de esta única clase, nunca suelto en el documento. El color y
   la fuente de los títulos ya vienen de theme.json (estilos globales de
   WordPress); aquí solo se repone lo que el reset global (sección 2) deja a
   cero y que un párrafo/lista sueltos necesitan para ser legibles. El ritmo
   vertical entre bloques lo da `.pila` (aplicada junto a esta clase en
   template-parts/content-page.php), no un margin aquí. */
.pagina-generica__cabecera,
.pagina-generica__contenido {
  max-width: 1024px;
  margin-inline: auto;
}

.pagina-generica__contenido p,
.pagina-generica__contenido li {
  line-height: 1.8;
  color: var(--c-texto-2);
}

.pagina-generica__contenido ul,
.pagina-generica__contenido ol {
  padding-left: 1.2em;
  list-style: disc;
}

.pagina-generica__contenido ol {
  list-style: decimal;
}

.pagina-generica__contenido li {
  margin-bottom: var(--e-1);
}

.pagina-generica__contenido li::marker {
  color: var(--c-acento);
}

.pagina-generica__contenido table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.pagina-generica__contenido th,
.pagina-generica__contenido td {
  padding: 12px 14px;
  border: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}

.pagina-generica__contenido th {
  font-family: var(--f-texto);
  font-weight: 700;
  color: var(--c-burdeos);
  background: var(--c-crema-2);
}

.pagina-generica__contenido code {
  padding: 2px 6px;
  background: var(--c-crema-2);
  border-radius: 4px;
  font-size: 0.9em;
}