/* =========================================================================
   Crooke Microsites — sistema de diseño
   Basado en docs/design.md (tokens reales del kit de Elementro de la web madre)
   Sin frameworks. Sin @import. Mobile-first.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color de marca */
  --c-gold: #b38c36;
  --c-gold-dark: #8c653c;
  --c-gold-soft: #beac80;
  /* Dorado oscurecido: única variante válida para TEXTO sobre blanco (AA 5.9:1) */
  --c-gold-ink: #6e5522;

  --c-cream: #f5efe3;
  --c-cream-deep: #ece2cf;
  --c-white: #ffffff;

  --c-ink: #0a0a0a;
  --c-body: #333333;
  --c-muted: #54595f;
  --c-line: #e2d9c8;
  --c-accent-alt: #5a6793;

  /* Semánticos */
  --c-bg: var(--c-white);
  --c-bg-alt: var(--c-cream);
  --c-bg-dark: var(--c-ink);
  --c-text: var(--c-ink);
  --c-text-soft: var(--c-body);
  --c-focus: var(--c-gold-dark);
  --c-error: #a3261f;
  --c-ok: #1f6b45;

  /* Tipografía */
  --f-head: "Anek Gujarati", "Segoe UI", system-ui, sans-serif;
  --f-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.1875rem, 1.40rem + 3.40vw, 3.4375rem);  /* 35 → 55 */
  --fs-h2: clamp(1.8750rem, 1.35rem + 2.30vw, 2.8125rem);  /* 30 → 45 */
  --fs-h3: clamp(1.7500rem, 1.50rem + 1.00vw, 2.1875rem);  /* 28 → 35 */
  --fs-h4: clamp(1.3750rem, 1.25rem + 0.55vw, 1.8750rem);  /* 22 → 30 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);  /* 18 → 22 */
  --fs-body: clamp(1.0625rem, 1.00rem + 0.30vw, 1.25rem);  /* 17 → 20 */
  --fs-sm: 1rem;
  --fs-xs: 0.875rem;

  --lh-head: 1.12;
  --lh-body: 1.55;
  --ls-kicker: 0.08em;

  /* Espaciado — escala 4px */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6rem;   --s-12: 7.5rem;

  /* Ritmo de sección: 48 → 112 */
  --s-section: clamp(3rem, 1.8rem + 5vw, 7rem);

  /* Layout */
  --w-container: 1140px;
  --w-container-wide: 1320px;   /* sólo la cabecera */
  --w-narrow: 760px;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 1.5rem);
  --gap: 1.25rem;

  /* Identidad angular: esquinas rectas (design.md §3) */
  --radius: 0;
  --radius-pill: 999px;

  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  --header-h: 72px;
  --z-header: 100;
  --z-mobilebar: 90;
  --z-overlay: 200;
}

@media (min-width: 1024px) {
  :root { --header-h: 96px; }
}

/* ---------- 2. Fuentes (auto-alojadas, subset latin + latin-ext) ---------- */
@font-face {
  font-family: "Anek Gujarati";
  src: url("../fonts/anek-gujarati-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Respaldo métricamente ajustado: evita el CLS del swap */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial");
  ascent-override: 105%; descent-override: 35%; line-gap-override: 0%; size-adjust: 96%;
}

/* ---------- 3. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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;
  }
}
body {
  font-family: var(--f-body), "Poppins Fallback", sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-soft);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { background-color: var(--c-cream); }
img[src$=".svg"], .footer__logo img, .header__logo { background-color: transparent; }
/* Sobre fondo negro el hueco crema de la imagen sin cargar son seis rectángulos
   claros parpadeando: en la sección de casos se nota mucho en móvil. */
.on-dark img { background-color: #1A1A1A; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
ul[class], ol[class] { list-style: none; padding: 0; }
:target { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }

/* ---------- 4. Tipografía ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-head), var(--f-body), sans-serif;
  font-weight: 500;
  line-height: var(--lh-head);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-lead); }

.kicker {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--c-gold-ink);
  margin-bottom: var(--s-3);
}
.on-dark .kicker { color: var(--c-gold-soft); }

.lead { font-size: var(--fs-lead); color: var(--c-body); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.light { font-weight: 300; }
.muted { color: var(--c-muted); }

/* Salto editorial de titular: activo en desktop, plano en móvil (design.md §2) */
.br-lg { display: inline; }
.br-lg::after { content: " "; }
@media (min-width: 768px) {
  .br-lg { display: block; }
  .br-lg::after { content: none; }
}

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-8); }
.prose h3 { margin-top: var(--s-6); }
.prose ul { list-style: none; padding: 0; }
.prose ul li {
  position: relative; padding-left: var(--s-5); margin-top: var(--s-3);
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; background: var(--c-gold);
}
.prose strong { font-weight: 600; color: var(--c-ink); }

a { color: var(--c-gold-ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--c-gold-dark); }
.on-dark a:not(.btn) { color: var(--c-gold-soft); }

/* ---------- 5. Accesibilidad ---------- */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-200%);
  background: var(--c-ink); color: var(--c-white);
  padding: var(--s-3) var(--s-5); z-index: var(--z-overlay);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); color: var(--c-white); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 6. Layout ---------- */
.container {
  width: 100%; max-width: var(--w-container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--w-narrow); }

.section { padding-block: var(--s-section); }
.section--tight { padding-block: calc(var(--s-section) * 0.6); }
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-bg-dark); }
.on-dark, .section--dark { color: rgba(255, 255, 255, 0.86); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--c-white); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--gap); }
/* Cada celda es una columna flexible para que las tarjetas midan lo mismo y
   el enlace quede alineado abajo.
   El `flex: 1` va sólo en la tarjeta: aplicado a todos los hijos estiraba
   también los retratos del equipo y les rompía la proporción 3:4. */
.grid > * { display: flex; flex-direction: column; }
.grid > * > .card { flex: 1 1 auto; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
/* 5 tratamientos: el primero (ancla) ocupa un bloque 2×2, el resto 1×1 cada
   uno. En móvil se apila: el ancla arriba a todo el ancho, los otros cuatro
   en 2 columnas debajo. */
.grid--featured { grid-template-columns: repeat(2, 1fr); }
.grid--featured > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .grid--featured { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); }
  .grid--featured > :first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
}
.grid--team { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
/* 4 tarjetas de tratamiento: 2×2 fijo en vez de 4 columnas, para que las
   tarjetas queden lo bastante anchas y el resumen no desborde. */
.grid--2x2 { grid-template-columns: repeat(2, 1fr); }

.split { display: grid; gap: var(--s-7); align-items: center; }
.split--top { align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split--wide-text { grid-template-columns: 1.15fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

.section__head { max-width: 46rem; margin-bottom: var(--s-7); }
.section__head--center { margin-inline: auto; text-align: center; }

/* ---------- 7. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
  min-height: 48px; padding: var(--s-3) var(--s-6);
  border: 2px solid transparent; border-radius: var(--radius);
  font-family: var(--f-body); font-size: var(--fs-sm); font-weight: 600;
  line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
/* Texto oscuro sobre dorado: blanco sobre #B38C36 no llega a AA (design.md §1) */
.btn--primary { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--c-gold-dark); border-color: var(--c-gold-dark); color: var(--c-white);
}
.btn--outline { background: transparent; color: var(--c-gold-ink); border-color: var(--c-gold); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--c-gold); color: var(--c-ink); }
.on-dark .btn--outline { color: var(--c-white); border-color: var(--c-gold-soft); }
.on-dark .btn--outline:hover { background: var(--c-gold); color: var(--c-ink); }
.btn--ghost { background: var(--c-white); color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-white); }
.btn--block { width: 100%; }

.link-more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--fs-sm); color: var(--c-gold-ink);
  text-decoration: none; min-height: 44px;
}
.link-more::after {
  content: ""; width: 1.1em; height: 0.65em; background: currentColor;
  clip-path: polygon(0 40%, 62% 40%, 62% 12%, 100% 50%, 62% 88%, 62% 60%, 0 60%);
  transition: transform var(--dur) var(--ease);
}
.link-more:hover::after { transform: translateX(4px); }
.link-more:hover { text-decoration: underline; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.section__head--center .cta-row { justify-content: center; }

/* ---------- 8. Header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
}
.header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--header-h);
  max-width: var(--w-container-wide);
}
/* La nav no se encoge por debajo de su contenido: si lo hiciera, la lista
   desbordaría por encima del selector de idioma. El ajuste se hace mostrando
   más o menos entradas según el ancho (.nav__item--wide). */
.nav { flex: 0 1 auto; }
.nav__list { flex-wrap: nowrap; }
/* El margin-right:auto que empuja el resto del header a la derecha vive ahora
   en .sede, que va justo detrás del logo: así logo y selector quedan pegados
   como un solo bloque de identidad. */
.header__brand { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; text-decoration: none; }
.header__cta { flex: 0 0 auto; }
.lang { flex: 0 0 auto; }
.header__logo, .header__logo svg { height: 40px; width: auto; }
@media (min-width: 1024px) { .header__logo, .header__logo svg { height: 44px; } }
@media (min-width: 1280px) { .header__logo, .header__logo svg { height: 52px; } }

.header__city {
  display: block;
  font-family: var(--f-head); font-size: 0.7rem;
  letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--c-gold-ink); padding-left: var(--s-2);
  border-left: 1px solid var(--c-line);
  white-space: nowrap;
}
@media (min-width: 400px) { .header__city { padding-left: var(--s-3); } }
@media (min-width: 640px) { .header__city { font-size: var(--fs-xs); } }
@media (min-width: 1200px) { .header__city { font-size: var(--fs-sm); } }

/* Selector de sede. Envuelve a .header__city: dice exactamente lo mismo que el
   texto plano que había antes y además abre la red completa de clínicas.
   Patrón <details>, igual que el menú móvil: funciona sin JavaScript. */
.sede { position: relative; flex: 0 0 auto; margin-right: auto; }
.sede > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px;   /* objetivo táctil */
}
.sede > summary::-webkit-details-marker { display: none; }
.sede > summary::after {
  content: ""; flex: 0 0 auto;
  width: 0.42em; height: 0.42em;
  border-right: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold);
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.sede[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.sede__panel {
  position: absolute; top: calc(100% + var(--s-2)); left: 0;
  z-index: var(--z-header);
  min-width: 15rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--s-4);
  box-shadow: 0 12px 28px rgba(10, 10, 10, 0.12);
  max-height: calc(100dvh - var(--header-h) - var(--s-6));
  overflow-y: auto;
}
.sede__title {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--ls-kicker); color: var(--c-muted);
  margin-bottom: var(--s-2);
}
.sede__list { list-style: none; padding: 0; }
.sede__list a {
  display: block; padding: var(--s-2) var(--s-3);
  font-size: var(--fs-sm); color: var(--c-ink);
  text-decoration: none; white-space: nowrap;
}
.sede__list a:hover { background: var(--c-cream); color: var(--c-gold-ink); }
.sede__list [aria-current="true"] {
  font-weight: 600; color: var(--c-gold-ink); background: var(--c-cream);
}
.sede__group {
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.sede__group a { font-size: var(--fs-xs); color: var(--c-muted); text-decoration: none; }
.sede__group a:hover { color: var(--c-gold-ink); }

.nav { display: none; }
@media (min-width: 1200px) {
  .nav { display: block; }
  .nav__list { display: flex; align-items: center; gap: var(--s-4); }
  .nav__link {
    display: inline-block; padding: var(--s-2) 0;
    /* Los nombres de tratamiento son largos: a 1024 px el menú se partía en
       dos líneas. Se compacta y se impide el salto dentro de cada entrada. */
    font-size: 0.9375rem; font-weight: 400; color: var(--c-ink);
    white-space: nowrap;
    text-decoration: none; border-bottom: 2px solid transparent;
  }
}
@media (min-width: 1280px) {
  .nav__list { gap: var(--s-5); }
  .nav__link { font-size: var(--fs-sm); }
}
/* Equipo queda fuera del menú de escritorio estrecho: sigue en el menú móvil
   y en el pie, así que no se pierde ningún enlace interno. */
.nav__item--wide { display: none; }
@media (min-width: 1024px) {
  .nav__link:hover, .nav__link[aria-current="page"] {
    color: var(--c-gold-ink); border-bottom-color: var(--c-gold);
  }
  .nav__item--has-sub { position: relative; }
  .nav__sub {
    position: absolute; top: 100%; left: 0; min-width: 16rem;
    background: var(--c-white); border: 1px solid var(--c-line);
    padding: var(--s-3); display: none;
  }
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub { display: block; }
  .nav__sub a {
    display: block; padding: var(--s-2) var(--s-3);
    font-size: var(--fs-sm); color: var(--c-ink); text-decoration: none;
  }
  .nav__sub a:hover { background: var(--c-cream); color: var(--c-gold-ink); }
}

.lang {
  display: none; gap: var(--s-1); align-items: center;
  margin-inline: var(--s-3);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.lang a { color: var(--c-muted); text-decoration: none; padding: var(--s-2); }
.lang a:hover { color: var(--c-gold-ink); }
.lang [aria-current="true"] { color: var(--c-ink); font-weight: 600; }
/* Va después de la regla de arriba a propósito: una media query no añade
   especificidad, así que si se declara antes, el `display:none` base la pisa y el
   selector de idioma no aparece nunca en la cabecera. Ocurrió hasta el 2026-09-22. */
@media (min-width: 1200px) { .lang { display: flex; } }

.header__cta { display: none; }
@media (min-width: 768px) {
  .header__cta { display: inline-flex; padding-inline: var(--s-5); }
}

/* Menú móvil: <details> — funciona sin JS */
.menu-toggle { display: block; }
@media (min-width: 1200px) { .menu-toggle { display: none; } }
.menu-toggle > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1px solid var(--c-line);
}
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle > summary::after {
  content: ""; width: 22px; height: 2px; background: var(--c-ink);
  box-shadow: 0 -7px 0 var(--c-ink), 0 7px 0 var(--c-ink);
}
.menu-toggle[open] > summary::after {
  box-shadow: none; transform: rotate(45deg);
  position: relative;
}
.menu-toggle[open] > summary { background: var(--c-cream); }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-white); border-bottom: 1px solid var(--c-line);
  padding: var(--s-5) var(--gutter) var(--s-7);
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
}
.menu-panel a {
  display: block; padding: var(--s-3) 0; font-size: var(--fs-lead);
  color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line);
}
.menu-panel details > summary {
  padding: var(--s-3) 0; font-size: var(--fs-lead); cursor: pointer;
  border-bottom: 1px solid var(--c-line); list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.menu-panel details > summary::after { content: "+"; font-size: 1.4em; color: var(--c-gold-ink); }
.menu-panel details[open] > summary::after { content: "–"; }
.menu-panel details ul { padding-left: var(--s-4); }
.menu-panel .lang {
  display: flex; gap: var(--s-4); margin: var(--s-5) 0 0;
  font-size: var(--fs-sm);
}
.menu-panel .lang a { border: 0; padding: var(--s-2) 0; }

/* ---------- 9. B1 · Hero ---------- */
.hero {
  position: relative;
  display: grid; align-items: end;
  min-height: min(78dvh, 640px);
  color: var(--c-white);
  background: var(--c-ink);
}
.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.50) 0%, rgba(10,10,10,0.32) 38%, rgba(10,10,10,0.88) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 62%, transparent 100%);
}
.hero__inner {
  /* .container ya centra y alinea al mismo ancho que las migas de pan y el
     resto de secciones (var(--w-container)). Antes .hero__inner ponía su
     propio max-width:46rem encima, que ganaba en cascada y dejaba el bloque
     de texto centrado y más estrecho que el resto de la caja — desalineado
     con la breadcrumb. El ancho de lectura se limita en el h1/párrafo, no
     en el contenedor. */
  position: relative; z-index: 2;
  padding-block: var(--s-11) var(--s-9);
}
.hero h1 { color: var(--c-white); max-width: 46rem; }
.hero__text { margin-top: var(--s-4); font-size: var(--fs-lead); color: rgba(255,255,255,0.9); max-width: 46rem; }
.hero .cta-row { margin-top: var(--s-6); }

.stats {
  position: relative; z-index: 2;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(2px);
  border-top: 1px solid rgba(190, 172, 128, 0.35);
}
.stats__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  padding-block: var(--s-6);
}
/* Con cuatro cifras, tres columnas dejarían una huérfana en la segunda fila.
   Se reparten en 2×2 en tablet y en una sola fila a partir de 1024. */
@media (min-width: 640px)  { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num {
  display: block; font-family: var(--f-head); font-weight: 500;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); line-height: 1;
  color: var(--c-gold-soft);
}
.stat__label { display: block; margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-white); }
.stat__sub { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,0.7); }

/* Variante interior sin imagen */
.hero--page { min-height: auto; background: var(--c-cream); color: var(--c-ink); }
.hero--page::after { content: none; }
.hero--page h1 { color: var(--c-ink); }
.hero--page .hero__inner { padding-block: var(--s-9) var(--s-8); }
.hero--page .hero__text { color: var(--c-body); }

/* ---------- 10. B2 · Tarjetas de tratamiento ---------- */
.card {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-line);
  height: 100%;
}
.card__media {
  aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--c-cream); /* reserva el hueco aunque la imagen no cargue */
}
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); flex: 1;
}
.card__title { min-height: calc(2 * var(--lh-head) * 1em); }
.card__title { font-size: var(--fs-h4); }
.card__text { font-size: var(--fs-sm); color: var(--c-body); flex: 1; }
.card .link-more { margin-top: auto; }
.card--alt { background: var(--c-white); border-color: var(--c-line); }

/* Tarjeta enlazada entera, accesible: el enlace real cubre la tarjeta */
.card--link { position: relative; transition: border-color var(--dur) var(--ease); }
.card--link:hover { border-color: var(--c-gold); }
.card--link .stretched::after { content: ""; position: absolute; inset: 0; }

/* Tarjeta de tratamiento a foto completa. En reposo sólo se ve la imagen con
   un degradado (transparente arriba, negro abajo) y el título encima; al
   pasar el ratón el overlay se oscurece entero, aparece el resumen y la foto
   hace un zoom leve. Sin flecha ni "más información" aparte: el título es el
   enlace y cubre toda la tarjeta (.stretched). Mismo aspect-ratio en el
   ancla (2×2) y en las compactas (1×1) a propósito: con el doble de ancho y
   el doble de alto, la altura resultante coincide exacta con la de dos
   compactas apiladas — no hace falta forzar alturas a mano. */
.card--photo {
  /* Anula el height:100% de .card: con aspect-ratio necesita altura auto, si
     no el padre (la <li>, sin alto propio) resuelve el 100% a 0 y la
     tarjeta desaparece. 1:1 y no 4:3: en las compactas (1×1, poco ancho) el
     resumen no cabía en el overlay al pasar el ratón y se recortaba. */
  aspect-ratio: 1 / 1; height: auto; overflow: hidden; border: 0; background: var(--c-ink);
  transform: scale(1); transition: transform 0.4s var(--ease);
}
.card--photo:hover,
.card--photo:focus-within { transform: scale(1.05); z-index: 2; }
.card--photo .card__media {
  /* .card__media (base) trae aspect-ratio:4/3 heredado del diseño anterior.
     Con inset:0 pero sin cancelarlo, el navegador seguía calculando la altura
     como ancho×3/4 en vez de llenar el padre entero — de ahí el hueco. */
  position: absolute; inset: 0; aspect-ratio: auto;
}
.card--photo .card__media img { width: 100%; height: 100%; object-fit: cover; }
.card--photo .card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-5);
  background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0) 55%);
  transition: background var(--dur) var(--ease);
}
.card--photo:hover .card__overlay,
.card--photo:focus-within .card__overlay { background: rgba(10,10,10,0.72); }
.card--photo .card__title { color: #fff; margin: 0; min-height: auto; }
.card--photo .card__title a { color: inherit; text-decoration: none; }
.card--photo .card__text {
  color: rgba(255,255,255,0.9); flex: none; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.card--photo:hover .card__text,
.card--photo:focus-within .card__text { max-height: 16em; opacity: 1; margin-top: var(--s-2); }
.card--photo.card--hero .card__title { font-size: var(--fs-h3); }
.card--photo.card--compact .card__text { font-size: var(--fs-xs); line-height: 1.35; }

/* ---------- 11. B3 · Banda de orientación ---------- */
.band {
  background: var(--c-cream);
  border-left: 4px solid var(--c-gold);
  padding: var(--s-6);
  display: grid; gap: var(--s-4); align-items: center;
}
@media (min-width: 800px) {
  .band { grid-template-columns: 1fr auto; gap: var(--s-7); padding: var(--s-7); }
}
.band__text { font-size: var(--fs-lead); color: var(--c-ink); }

/* ---------- 12. B10 · Pasos ---------- */
.steps {
  counter-reset: step; display: grid; gap: var(--s-7); margin-top: var(--s-6);
}
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
  /* 4 pasos: 2×2 en vez de 3+1 descuadrado, misma fórmula que treatments-grid. */
  .steps--2x2 { grid-template-columns: repeat(2, 1fr); }
}
/* El número iba con position:absolute + translateY(-100%) flotando por encima
   de la caja del step: con una sola fila quedaba pegado al título de arriba,
   y con 2 filas (steps--2x2) el número de la fila 2 flotaba sobre el texto
   de la fila 1. En flujo normal, antes del título, no puede solapar nada. */
.step { position: relative; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--f-head); font-size: var(--fs-h4);
  line-height: 1; color: var(--c-gold);
  margin-bottom: var(--s-3); padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-gold-soft);
}
.step__title { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.step__text { font-size: var(--fs-sm); }

/* ---------- 13. B17 · Beneficios con icono ---------- */
.benefits { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit { text-align: center; padding: var(--s-5); background: var(--c-cream); }
.benefit__icon { width: 40px; height: 40px; margin: 0 auto var(--s-3); color: var(--c-gold-dark); }
.benefit__title { font-size: var(--fs-h4); }

/* ---------- 14. B6 · Equipo ---------- */
.person {
  text-align: center;
  /* Nombre y cargo siempre seguidos, sin hueco artificial entre ellos. El
     grid ya iguala la altura de cada tarjeta dentro de la fila (stretch por
     defecto): el margen sobrante queda debajo del cargo, no entre los textos. */
  display: flex; flex-direction: column;
}
.person__photo {
  /* Origen: recorte circular de WordPress, casi cuadrado, círculo tocando los
     bordes del lienzo (ver data/media.json → perfil "avatar"). 1:1 + círculo,
     no 3:4: un recorte rectangular cortaba los lados del círculo. */
  aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-cream);
  border-radius: 50%; margin-inline: auto;
  width: 100%; max-width: 200px;
  margin-bottom: var(--s-3);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name {
  font-family: var(--f-head); font-size: var(--fs-lead); color: var(--c-ink);
}
.person__role { font-size: var(--fs-xs); color: var(--c-muted); }
.person__reg { font-size: var(--fs-xs); color: var(--c-muted); }

/* ---------- 15. B13 · FAQ (details, funciona sin JS) ---------- */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.5rem;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-5) 0; cursor: pointer; list-style: none;
  font-family: var(--f-head); font-size: var(--fs-h4); color: var(--c-ink);
  min-height: 48px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 0.35em;
  border-right: 2px solid var(--c-gold-dark); border-bottom: 2px solid var(--c-gold-dark);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__num { font-size: var(--fs-sm); color: var(--c-gold); }
.faq__a { grid-column: 2 / -1; }
.faq__a { padding-bottom: var(--s-5); max-width: 60ch; padding-left: calc(2.5rem + var(--s-3)); }

/* ---------- 16. B9 · Testimonios ---------- */
.quote {
  background: var(--c-cream); padding: var(--s-6);
  border-top: 3px solid var(--c-gold); height: 100%;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.quote__text { font-size: var(--fs-lead); color: var(--c-ink); }
.quote__cite { font-size: var(--fs-sm); color: var(--c-muted); font-style: normal; margin-top: auto; }
.rating { display: flex; gap: 2px; color: var(--c-gold-dark); }
.rating .muted { color: var(--c-line); }

/* Testimonio en vídeo: la cita es el contenido, el vídeo la prueba. */
.vquote { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; margin: 0; }
.vquote__text { font-size: var(--fs-lead); color: var(--c-ink); }
.vquote .quote__cite { margin-top: auto; }

.video-facade {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 16 / 9; overflow: hidden;
  border: 0; background: var(--c-ink); cursor: pointer;
}
.video-facade img,
.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-facade img { object-fit: cover; background-color: var(--c-ink); }
.video-facade__play {
  position: absolute; inset: 0; margin: auto;
  width: 4rem; height: 4rem; display: grid; place-items: center;
  background: rgba(10, 10, 10, .7); color: var(--c-white);
  transition: background .2s ease, transform .2s ease;
}
.video-facade__play svg { width: 2rem; height: 2rem; }
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  background: var(--c-gold); color: var(--c-ink); transform: scale(1.06);
}
/* El texto del botón es para el lector de pantalla: la señal visual es el
   triángulo, pero un botón sin nombre accesible no dice a dónde lleva. */
.video-facade__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .video-facade__play { transition: none; }
  .video-facade:hover .video-facade__play { transform: none; }
}

.reviews__summary { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.reviews__summary strong { font-size: var(--fs-lead); }

/* Carrusel nativo con scroll-snap (sin JS) */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(min(84%, 20rem), 1fr);
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding-bottom: var(--s-4);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 900px) {
  .rail { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row;
          grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* ---------- 17. B5 · Casos: antes y después ---------- */
/* Desde el 2026-09-22 cada caso es UNA sola imagen: el montaje completo de la
   diseñadora, con las dos fotos y la banda del logotipo. Antes eran dos mitades
   recortadas, y el rail iba a dos columnas para que cada mitad no bajara de
   ~170 px. Con el montaje entero eso ya no hace falta, pero se mantienen las dos
   columnas: el montaje es cuadrado y a tres por fila el resultado no se aprecia. */
@media (min-width: 900px) { .rail--pairs { grid-template-columns: repeat(2, 1fr); } }

.ba { margin: 0; }
.ba figcaption {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-kicker);
  color: var(--c-muted); padding-top: var(--s-2);
}
.on-dark .ba figcaption { color: rgba(255,255,255,.72); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.tag {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-kicker);
  padding: var(--s-2) var(--s-3); border: 1px solid var(--c-gold-soft); color: var(--c-gold-ink);
}
/* Sobre fondo negro el oro oscuro de texto no llega al contraste AA. */
.on-dark .tag { color: var(--c-gold-soft); border-color: rgba(190,172,128,.5); }

/* ---------- 18. B12 · Localización ---------- */
.map-facade {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border: 1px solid var(--c-line);
  background: var(--c-cream); cursor: pointer; padding: 0; overflow: hidden;
}
.map-facade img { width: 100%; height: 100%; object-fit: cover; }
.map-facade__label {
  position: absolute; inset-inline: 0; bottom: 0;
  background: rgba(10,10,10,0.78); color: var(--c-white);
  padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); text-align: left;
}
.map-facade iframe { width: 100%; height: 100%; border: 0; }

.nap { display: grid; gap: var(--s-4); }
.nap__row { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); align-items: start; }
.nap__row svg { width: 1.25rem; height: 1.25rem; color: var(--c-gold-dark); margin-top: 0.2em; }
.hours { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours th, .hours td { text-align: left; padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.hours th { font-weight: 400; color: var(--c-muted); }

/* ---------- 19. B14 · Formulario ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink); }
.field .req { color: var(--c-error); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-muted); border-radius: var(--radius);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--c-gold-dark); outline: 3px solid var(--c-focus); outline-offset: 1px;
}
.field__hint { font-size: var(--fs-xs); color: var(--c-muted); }
.field__error { font-size: var(--fs-xs); color: var(--c-error); font-weight: 600; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--c-error); border-width: 2px; }
.field--check { grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.field--check input { width: 22px; height: 22px; min-height: 0; margin-top: 0.2em; }
.field--check label { font-weight: 400; font-size: var(--fs-xs); line-height: 1.5; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: var(--s-4) var(--s-5); border-left: 4px solid; font-size: var(--fs-sm); }
.alert--error { background: #fbeceb; border-color: var(--c-error); color: #6d1a15; }
.alert--ok { background: #e9f4ee; border-color: var(--c-ok); color: #10462d; }

/* ---------- 20. B15 · Tira de contacto y footer ---------- */
.footer { background: var(--c-ink); color: rgba(255,255,255,0.78); padding-block: var(--s-9) var(--s-6); }
.footer h2, .footer h3 { color: var(--c-white); font-size: var(--fs-h4); margin-bottom: var(--s-4); }
.footer a { color: rgba(255,255,255,0.78); text-decoration: none; }
.footer a:hover { color: var(--c-gold-soft); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--s-8); } }
.footer__links li { margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.footer__logo img { height: 46px; width: auto; }
.footer__bottom {
  /* Sin borde propio: el marquee ya separa visualmente esta franja del resto
     del footer. */
  margin-top: var(--s-8);
  display: grid; gap: var(--s-3); font-size: var(--fs-xs); color: rgba(255,255,255,0.6);
}
.footer__credit {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
}
.footer__credit a { color: rgba(255,255,255,0.78); }
.footer__link-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: rgba(255,255,255,0.78); text-decoration: none;
}
.footer__link-btn:hover { color: var(--c-gold-soft); text-decoration: underline; }
.social { display: flex; gap: var(--s-4); }
.social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.social svg { width: 22px; height: 22px; }

/* Marquesina de ciudades — se detiene con reduced-motion.
   Dos copias idénticas de la lista, cada una en su propio .marquee__set con
   el hueco de conexión como padding-right (no como gap del track). Con
   `display:flex; gap` en el track, el ancho total incluye un gap "extra"
   entre copias que no coincide con el 50% exacto: la animación saltaba en
   cada vuelta porque -50% no caía justo en el borde entre copias. Con esta
   estructura las dos copias miden exactamente lo mismo y -50% cae ahí. */
.marquee { overflow: hidden; border-block: 1px solid rgba(255,255,255,0.14); padding-block: var(--s-4); }
.marquee__track {
  display: flex; width: max-content;
  font-family: var(--f-head); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  animation: marquee 38s linear infinite;
}
.marquee__set { display: flex; gap: var(--s-6); padding-right: var(--s-6); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* ---------- 21. Barra móvil de conversión ---------- */
.actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-mobilebar);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--c-white); border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding: var(--s-2);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink); text-decoration: none;
}
.actionbar a + a { border-left: 1px solid var(--c-line); }
.actionbar svg { width: 20px; height: 20px; color: var(--c-gold-dark); }
.actionbar a:last-child { background: var(--c-gold); }
@media (min-width: 1024px) { .actionbar { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 56px; } }

/* ---------- 22. Migas de pan ---------- */
.crumbs { font-size: var(--fs-xs); color: var(--c-muted); padding-block: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--s-2); color: var(--c-gold-soft); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-gold-ink); text-decoration: underline; }

/* ---------- 22b. Galería de instalaciones ---------- */
/* Rejilla simple: 1 columna en móvil, 2 en tablet, 3 en escritorio. Las fotos
   van en 4:3 (perfil "content" del manifiesto) y con aspect-ratio declarado
   para que el hueco esté reservado antes de que la imagen cargue. */
.gallery {
  display: grid; gap: var(--s-4); list-style: none; padding: 0; margin: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery__item { display: grid; gap: var(--s-2); }
.gallery__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--c-cream);
}
.gallery__caption { margin: 0; }

/* ---------- 22c. B21 · Planes con precio ---------- */

.plans { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 760px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  background: var(--c-cream);
  border-top: 3px solid var(--c-gold);
}

/* Con subgrid las cinco filas —condición, nombre, descripción, precio y lo
   que incluye— se alinean entre las cuatro tarjetas, que es lo que permite
   comparar de un vistazo. Donde no haya subgrid cae en la columna flexible
   de arriba: se ve bien, sólo que cada precio a su altura. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .plans { grid-auto-rows: auto; }
    .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  }
}
.plan__condition {
  font-size: var(--fs-xs); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--c-gold-ink);
}
.plan__name { font-size: var(--fs-h4); margin-top: var(--s-2); }
.plan__text { color: var(--c-text-soft); margin-top: var(--s-3); }
.plan__price {
  padding-top: var(--s-5); align-self: end;
  display: flex; flex-direction: column; gap: 2px;
}
.plan__unit, .plan__from { font-size: var(--fs-xs); color: var(--c-muted); }
.plan__amount { font-family: var(--f-head); font-size: var(--fs-h3); line-height: var(--lh-head); }

.plan__includes {
  list-style: none; padding: 0;
  margin: var(--s-4) 0 0; border-top: 1px solid var(--c-line); padding-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--c-text-soft);
}
.plan__includes li { position: relative; padding-left: var(--s-4); margin-top: var(--s-2); }
.plan__includes li::before { content: "–"; position: absolute; left: 0; color: var(--c-gold-dark); }

.plans__note {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c-gold-soft); color: var(--c-text-soft);
}

/* ---------- 23. Banner de cookies ---------- */
/* Muro bloqueante: el usuario no llega al contenido sin declarar su decision.
   Replica la estetica del plugin Crooke Consent v1.1 de crookedentalclinic
   (velo oscuro, tarjeta centrada, filo dorado superior) con los tokens de
   este sitio, no con los valores fijos del plugin.
   Alli todo iba con !important porque Elementor inyectaba reglas encima;
   aqui no hay tema que pelee, asi que se omite a proposito. */

/* Fondo bloqueado mientras el modal esta abierto. Basta la clase: aqui no hay
   WP Rocket depurando CSS no usado, que es lo que en el plugin obligo a
   escribir ademas overflow en linea desde JS. */
html.cookies-locked, html.cookies-locked body { overflow: hidden; overscroll-behavior: none; }

/* El velo */
.cookies {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
  background: rgba(17, 15, 10, 0.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto;
  animation: cookies-fade 0.18s var(--ease) both;
}
.cookies[hidden] { display: none; }

/* La tarjeta */
.cookies__inner {
  width: 100%; max-width: 560px; margin: auto;
  max-height: calc(100vh - var(--s-5) * 2); overflow-y: auto;
  display: grid; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--c-white);
  border-radius: var(--radius);
  border-top: 4px solid var(--c-gold);
  box-shadow: 0 18px 50px rgba(10, 10, 10, 0.35);
  animation: cookies-rise 0.22s var(--ease) both;
}
/* Recibe el foco al abrir para el lector de pantalla, pero sin pintar anillo:
   se confundia con un segundo borde del boton de rechazar. */
.cookies__inner:focus, .cookies__inner:focus-visible { outline: none; }

@keyframes cookies-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cookies-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cookies, .cookies__inner { animation: none; }
}

.cookies__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cookies__actions[hidden] { display: none; }

/* Aceptar y rechazar: mismo tamano y misma fila, sin jerarquia entre ellos.
   Solo cambia el relleno. Un muro donde rechazar cueste mas es justo lo que
   sanciona la AEPD, y Google exige paridad para Consent Mode. */
#cookie-quick-actions [data-consent="accept"],
#cookie-quick-actions [data-consent="reject"] { flex: 1 1 200px; }

/* "Configurar" es terciario: no compite con la decision, pero sigue visible. */
.cookies__configure {
  flex: 1 1 100%;
  min-height: 0; padding: var(--s-2) 0;
  background: none; border: 0;
  color: var(--c-gold-ink); text-decoration: underline;
  font-weight: 500; font-size: var(--fs-sm);
}
.cookies__configure:hover { background: none; color: var(--c-gold-dark); }

.cookies__panel { display: grid; gap: var(--s-4); }
.cookies__panel[hidden] { display: none; }
.cookies__category label { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; }
.cookies__category input { width: 16px; height: 16px; accent-color: var(--c-gold); cursor: pointer; }
.cookies__category p { margin: 2px 0 0 26px; }

@media (max-width: 700px) {
  .cookies { align-items: flex-end; padding: var(--s-3); }
  .cookies__inner { max-height: calc(100vh - var(--s-3) * 2); padding: var(--s-5); }
  #cookie-quick-actions [data-consent="accept"],
  #cookie-quick-actions [data-consent="reject"] { flex: 1 1 100%; }
}

/* ---------- 23b. Burbuja flotante de WhatsApp (sólo escritorio) ---------- */
.whatsapp-float { display: none; }
@media (min-width: 1024px) {
  .whatsapp-float {
    display: flex; position: fixed; right: 24px; bottom: 24px; z-index: var(--z-mobilebar);
    width: 56px; height: 56px; border-radius: 50%; background: #25D366;
    align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(10,10,10,0.25);
  }
  .whatsapp-float svg { width: 30px; height: 30px; color: #fff; }
  .whatsapp-float:hover { filter: brightness(1.05); }
}

/* ---------- 24. Utilidades ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.ratio-16-9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.ratio-4-3 { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
[hidden] { display: none !important; }

/* ---------- 25. Impresión ---------- */
@media print {
  .header, .actionbar, .whatsapp-float, .cookies, .marquee, .map-facade, .form { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}