/* =============================================================
   Centro CALMA — Fisioterapia integrativa · Castellón
   Paleta derivada del logo: terracota #d48144 · azul #7199ce · arena #e6b991
   Cormorant Garamond + Inter
   ============================================================= */

/* =============================================================
   0. Tipografias (alojadas en esta web)
   Cormorant Garamond e Inter se sirven desde assets/fonts/ en vez de
   desde Google: la web carga antes y ninguna visita envia su IP a
   un tercero. Solo se incluyen los subconjuntos latin y latin-ext.
   ============================================================= */

/* latin-ext · Cormorant Garamond 500 italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin · Cormorant Garamond 500 italic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext · Cormorant Garamond 500 normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin · Cormorant Garamond 500 normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext · Cormorant Garamond 600 normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin · Cormorant Garamond 600 normal */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/cormorant-garamond-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext · Inter 400 normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin · Inter 400 normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext · Inter 500 normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin · Inter 500 normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext · Inter 600 normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin · Inter 600 normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  /* Fondos */
  --bg:        #faf7f1;
  --bg-2:      #f2ece1;
  --paper:     #fffdfa;

  /* Tinta (todas cumplen AA sobre --bg) */
  --ink:       #22211c;   /* 15.1:1 */
  --ink-soft:  #45433b;   /*  9.3:1 */
  --ink-mute:  #6f6a5f;   /*  5.0:1 */

  /* Marca — terracota */
  --terra:      #d48144;  /* color del logo, solo decorativo */
  --terra-mid:  #b45f28;  /* fondo de botón (blanco encima 4.6:1) */
  --terra-ink:  #a85623;  /* texto sobre crema 4.9:1 */
  --terra-soft: rgba(212, 129, 68, 0.13);

  /* Marca — azul */
  --blue:      #7199ce;   /* color del logo, solo decorativo */
  --blue-ink:  #4d7099;   /* texto sobre crema 4.8:1 */
  --blue-deep: #44648a;   /* panel oscuro (crema encima 5.8:1) */
  --blue-soft: rgba(113, 153, 206, 0.15);

  --sand:      #e6b991;
  --line:      rgba(34, 33, 28, 0.09);
  --line-soft: rgba(34, 33, 28, 0.055);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
  --nav-h: 76px;
  --radius: 20px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  position: relative;  /* referencia para la capa de aura, que cubre todo el alto */
  font-family: var(--sans);
  font-size: 1rem;   /* = 16px; en rem para que el panel de accesibilidad pueda escalarlo */
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; text-wrap: balance; line-height: 1.08; letter-spacing: -0.01em; }
em { font-style: italic; }
::selection { background: var(--terra-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--terra-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--paper);
  z-index: 9999; border-radius: 8px; font-weight: 500; font-size: 0.9rem;
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: min(1180px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - var(--gutter) * 2); margin-inline: auto; }

.kicker {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-ink);
}

.section { padding-block: var(--section); position: relative; }

/* Tinte suave: se funde por arriba y por abajo, sin línea dura */
.section--tint {
  background: linear-gradient(180deg,
    rgba(242, 236, 225, 0) 0%,
    var(--bg-2) 14%,
    var(--bg-2) 86%,
    rgba(242, 236, 225, 0) 100%);
}

.section-head { max-width: 640px; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.section-head .kicker { margin-bottom: 0.9rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.section-head p { margin-top: 1rem; color: var(--ink-soft); }

.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;
}

/* =============================================================
   4. Buttons & links
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out);
}
.btn-primary {
  background: var(--terra-mid);
  color: #fff;
  box-shadow: 0 12px 28px -16px rgba(168, 86, 35, 0.7);
}
.btn-primary:hover { background: var(--terra-ink); transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(168, 86, 35, 0.72); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: rgba(255, 253, 250, 0.6);
}
.btn-ghost:hover { border-color: var(--terra-mid); color: var(--terra-ink); transform: translateY(-2px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 500; font-size: 0.95rem; color: var(--blue-ink);
}
.link-arrow .arr { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover .arr { transform: translateX(5px); }

.u-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.4s var(--ease-out);
  padding-bottom: 2px;
}
.u-line:hover { background-size: 100% 1px; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft),
              backdrop-filter 0.4s var(--ease-soft);
}
.nav.is-scrolled {
  background: rgba(250, 247, 241, 0.92);
  box-shadow: 0 1px 0 var(--line-soft), 0 10px 30px -24px rgba(34, 33, 28, 0.5);
}
@supports (backdrop-filter: blur(14px)) {
  .nav.is-scrolled { background: rgba(250, 247, 241, 0.8); backdrop-filter: blur(14px) saturate(1.1); }
}
.nav-inner {
  width: min(1240px, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.7rem; }
.nav-logo img { width: 40px; height: auto; flex: none; }
.nav-logo .logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo .logo-name {
  font-family: var(--serif);
  font-size: 1.4rem; font-weight: 600; letter-spacing: 0.16em;
}
.nav-logo .logo-sub {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-mute);
}
.nav-links { display: none; align-items: center; gap: 1.9rem; list-style: none; padding: 0; }
.nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { border-bottom: 1px solid var(--terra-mid); padding-bottom: 2px; }
.nav-cta { display: none; }
.nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; align-items: center;
  border-radius: 10px;
}
.nav-burger span {
  display: block; width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; padding: 0.7rem 1.4rem; font-size: 0.88rem; }
  .nav-burger { display: none; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu ul { list-style: none; padding: 0; display: grid; gap: 1.4rem; }
.mobile-menu a {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.1;
}
.mobile-menu a[aria-current="page"] { color: var(--terra-ink); font-style: italic; }
.mobile-menu .mobile-menu-cta { margin-top: 2.2rem; }
@media (min-width: 960px) { .mobile-menu { display: none; } }

/* =============================================================
   6. Halo que respira — efecto firma
   ============================================================= */
.halo {
  position: absolute;
  width: min(58vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    var(--blue-soft) 0%,
    rgba(212, 129, 68, 0.07) 48%,
    transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  animation: breathe 7.5s var(--ease-soft) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  45%      { transform: scale(1.16); opacity: 1; }
  60%      { transform: scale(1.16); opacity: 1; }
}

/* =============================================================
   7. Hero (home)
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: var(--nav-h);
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%;
  transform: scale(1.04);
}
/* En vertical el <picture> sirve hero-movil.webp, que es solo la banda
   central de la foto (del 40 % al 86 % del ancho). El 66 % reproduce el
   mismo encuadre que daba el 72 % sobre la foto completa. */
@media (max-width: 720px) and (orientation: portrait) {
  .hero-bg img { object-position: 66% 50%; }
}
/* Velo en varias paradas: sin corte duro al llegar al final del hero */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(250, 247, 241, 0.96) 0%,
      rgba(250, 247, 241, 0.88) 30%,
      rgba(250, 247, 241, 0.55) 52%,
      rgba(250, 247, 241, 0.12) 74%,
      rgba(250, 247, 241, 0) 100%),
    linear-gradient(180deg,
      rgba(250, 247, 241, 0) 40%,
      rgba(250, 247, 241, 0.25) 68%,
      rgba(250, 247, 241, 0.72) 87%,
      var(--bg) 100%);
}
/* ⚠️ .hero-inner NO debe pisar el ancho de .container:
   antes tenía width:100% y el texto quedaba pegado al borde. */
.hero-inner { position: relative; z-index: 1; }
.hero-content { max-width: 40rem; position: relative; }
.hero-content .halo { top: -20%; left: -26%; z-index: -1; }
.hero-title {
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  margin-top: 1.3rem;
  /* Dos líneas holgadas: el titular necesita aire, no apelmazarse */
  max-width: 22ch;
  line-height: 1.22;
}
.hero-sub {
  margin-top: 1.4rem;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 44ch;
}
.hero-actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 1;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
}
.hero-scroll::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(var(--ink-mute), transparent);
  animation: scrollHint 2.6s var(--ease-soft) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Page hero (páginas interiores) */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 5.5rem));
  padding-bottom: clamp(2.6rem, 6vw, 4.2rem);
  position: relative;
}
.page-hero .halo { top: -40%; right: -10%; opacity: 0.6; }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); margin-top: 1rem; max-width: 16ch; }
.page-hero .lead {
  margin-top: 1.4rem;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 60ch;
}
/* Foto del equipo, centrada y enmarcada bajo la intro */
.team-hero-photo {
  margin: clamp(2rem, 5vw, 3.2rem) auto 0;
  max-width: 780px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 34px 66px -42px rgba(34, 33, 28, 0.55);
}
.team-hero-photo img { width: 100%; height: auto; display: block; }

/* =============================================================
   8. Cards — servicios
   ============================================================= */
.services-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .services-grid { grid-template-columns: repeat(6, 1fr); }
  /* Primera fila: 2 servicios (span 3) · Segunda fila: 3 servicios (span 2) */
  .services-grid .card:nth-child(-n+2) { grid-column: span 3; }
  .services-grid .card:nth-child(n+3)  { grid-column: span 2; }
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px -6px rgba(34, 33, 28, 0.14);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 129, 68, 0.3);
  box-shadow: 0 28px 52px -28px rgba(168, 86, 35, 0.4);
}
.card-media { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
/* Difuminado inferior: la foto entra en la tarjeta sin corte seco */
.card-media::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 38%;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0) 0%, rgba(255, 253, 250, 0.55) 72%, var(--paper) 100%);
  pointer-events: none;
}
.card:hover .card-media img { transform: scale(1.05); filter: saturate(1.08); }
.card-body { padding: 1.4rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
.card-body h3 { font-size: 1.45rem; }
.card-body p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.card-link { position: absolute; inset: 0; z-index: 1; }
.card .link-arrow { position: relative; }

/* =============================================================
   9. ¿Por qué CALMA?
   ============================================================= */
.why { text-align: center; overflow: clip; }
/* Centrado sin transform: la animación breathe (que usa transform) ya no lo
   descoloca, así el halo no se sale por la derecha ni se corta con overflow:clip */
.why .halo { inset: 0; margin: auto; }
.why h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.why .btn { margin-top: clamp(2.4rem, 5vw, 3.2rem); }
.why .container { position: relative; z-index: 1; }

/* =============================================================
   10. Opiniones
   ============================================================= */
/* Móvil: carrusel con scroll-snap. Escritorio: rejilla de 3. Sin JS. */
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(266px, 82%);
  gap: 1.2rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding-block: 0.4rem 1.6rem;
  padding-inline: 0.15rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  touch-action: pan-x;
}
.reviews-track > * { scroll-snap-align: center; }
.reviews-track::-webkit-scrollbar { height: 5px; }
.reviews-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
@media (min-width: 960px) {
  .reviews-track {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0; padding-inline: 0;
    gap: 1.4rem;
  }
}

.review {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.9rem 1.8rem;
  display: flex; flex-direction: column; gap: 1.05rem;
  box-shadow: 0 2px 10px -6px rgba(34, 33, 28, 0.14);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.review:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(34, 33, 28, 0.3); }
.stars { display: flex; gap: 0.15rem; color: var(--terra); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.review blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: 1.16rem; line-height: 1.46;
  color: var(--ink-soft);
  flex: 1;
}
.review figcaption { font-size: 0.85rem; color: var(--ink-mute); }
.review figcaption strong { color: var(--ink); font-weight: 600; }
.reviews-more { margin-top: 1.4rem; text-align: center; }
.reviews-hint {
  display: block; text-align: center; margin-top: 0.2rem;
  font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.04em;
}
@media (min-width: 960px) { .reviews-hint { display: none; } }

/* =============================================================
   11. CTA final + menciones
   ============================================================= */
.cta { overflow: clip; }
.cta-panel {
  display: grid;
  border-radius: 26px;
  overflow: hidden;
  background: var(--blue-deep);
  color: var(--bg);
  box-shadow: 0 40px 80px -50px rgba(68, 100, 138, 0.85);
}
@media (min-width: 960px) { .cta-panel { grid-template-columns: 1.05fr 1fr; } }
.cta-media { position: relative; min-height: 300px; }
.cta-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fundido entre la foto y el panel de color: termina en el azul EXACTO del
   panel a opacidad total, para que no quede ninguna línea de corte. */
.cta-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(68, 100, 138, 0) 36%,
    rgba(68, 100, 138, 0.5) 66%,
    rgba(68, 100, 138, 0.88) 86%,
    var(--blue-deep) 99%);
}
@media (min-width: 960px) {
  .cta-media::after {
    background: linear-gradient(90deg,
      rgba(68, 100, 138, 0) 28%,
      rgba(68, 100, 138, 0.5) 60%,
      rgba(68, 100, 138, 0.88) 85%,
      var(--blue-deep) 99%);
  }
}
.cta-content {
  position: relative;
  padding: clamp(2.4rem, 5vw, 4rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
}
.cta-content .halo {
  top: -30%; right: -25%;
  background: radial-gradient(circle at center, rgba(250, 247, 241, 0.18) 0%, transparent 70%);
}
.cta-content h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.cta-content p { color: rgba(250, 247, 241, 0.88); max-width: 42ch; }
.cta-content .btn-primary {
  background: var(--bg); color: var(--blue-deep);
  align-self: flex-start;
  box-shadow: none;
}
.cta-content .btn-primary:hover { background: #fff; color: var(--terra-ink); }

.mentions { padding-block: var(--section); }
.mentions-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .mentions-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.mention-activities h2, .mention-events h2 { font-size: 1.7rem; }
.mention-activities p { margin-top: 0.8rem; color: var(--ink-soft); max-width: 48ch; }
.mention-activities .link-arrow, .mention-events .link-arrow { margin-top: 1.2rem; }

.mini-events { margin-top: 1.4rem; display: grid; gap: 0.9rem; }
.mini-event {
  display: flex; gap: 1.1rem; align-items: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 10px -7px rgba(34, 33, 28, 0.16);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.mini-event:hover { border-color: rgba(212, 129, 68, 0.34); transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(168, 86, 35, 0.5); }
.mini-event .date { flex: none; text-align: center; min-width: 58px; font-weight: 600; }
.mini-event .date .d { font-family: var(--serif); font-size: 1.6rem; line-height: 1; display: block; }
.mini-event .date .m { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terra-ink); }
.mini-event .info h3 { font-family: var(--sans); font-size: 0.98rem; font-weight: 600; }
.mini-event .info p { font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.15rem; }

/* =============================================================
   12. Footer
   ============================================================= */
.footer {
  background: linear-gradient(180deg, rgba(242, 236, 225, 0) 0%, var(--bg-2) 22%, var(--bg-2) 100%);
  padding-block: clamp(3.4rem, 7vw, 5rem) 2rem;
  font-size: 0.92rem;
}
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; } }
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-brand img { width: 52px; height: auto; flex: none; }
.footer h2 { font-size: 1.5rem; letter-spacing: 0.14em; }
.footer .logo-sub { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.footer p, .footer li { color: var(--ink-soft); }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.5rem; margin-top: 1rem; }
.footer h3 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
}
.footer a:hover { color: var(--terra-ink); }
.footer-contact { margin-top: 1rem; display: grid; gap: 0.45rem; }
.footer-bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
  font-size: 0.8rem; color: var(--ink-mute);
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   13. Índice de tratamientos — filas alternas
   ============================================================= */
.treatment-row {
  display: grid; gap: 1.8rem;
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
  align-items: center;
  position: relative;
}
/* Separador que se desvanece hacia los lados */
.treatment-row + .treatment-row::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
@media (min-width: 860px) {
  .treatment-row { grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); }
  .treatment-row:nth-child(even) .treatment-media { order: 2; }
}
.treatment-media {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 20px 44px -34px rgba(34, 33, 28, 0.5);
}
.treatment-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.treatment-row:hover .treatment-media img { transform: scale(1.04); }
.treatment-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 0.6rem; }
.treatment-text p { margin-top: 0.9rem; color: var(--ink-soft); }
.treatment-text .link-arrow { margin-top: 1.3rem; }

/* Listas de dos columnas en las fichas de servicio */
.spec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem 1.8rem; }
@media (min-width: 560px) { .spec-list { grid-template-columns: repeat(2, 1fr); } }
.spec-list li {
  display: flex; align-items: baseline; gap: 0.7rem;
  color: var(--ink-soft); font-size: 0.98rem;
  padding-block: 0.62rem;
  border-bottom: 1px solid var(--line-soft);
}
.spec-list li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra);
  transform: translateY(-2px);
}
.spec-list--blue li::before { background: var(--blue); }

/* =============================================================
   14. Páginas de detalle
   ============================================================= */
.detail-figure {
  border-radius: 24px; overflow: hidden;
  max-height: 480px;
  box-shadow: 0 30px 60px -44px rgba(34, 33, 28, 0.55);
}
.detail-figure img { width: 100%; height: 100%; object-fit: cover; max-height: 480px; }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.2rem; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 2.6rem; margin-bottom: 1rem; }
.prose ul { padding-left: 1.2rem; margin-top: 1rem; display: grid; gap: 0.55rem; color: var(--ink-soft); }
.prose ::marker { color: var(--terra); }

.method {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  position: relative;
  overflow: clip;
  box-shadow: 0 3px 14px -8px rgba(34, 33, 28, 0.16);
}
.method .halo { top: -50%; right: -20%; opacity: 0.5; }
.method h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.method ol {
  margin-top: 1.4rem;
  padding: 0; list-style: none;
  display: grid; gap: 1rem;
  counter-reset: paso;
}
.method li {
  display: flex; gap: 1rem; align-items: baseline;
  counter-increment: paso;
  color: var(--ink-soft);
}
.method li::before {
  content: "0" counter(paso);
  font-family: var(--serif); font-style: italic;
  color: var(--terra-ink);
  flex: none;
}

.detail-cta { margin-top: var(--section); text-align: center; position: relative; }
.detail-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.detail-cta p { margin-top: 0.9rem; color: var(--ink-soft); }
.detail-cta .actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

.other-treatments { margin-top: var(--section); padding-top: 2.4rem; position: relative; }
.other-treatments::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.other-treatments h2 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.other-treatments ul { list-style: none; padding: 0; margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.other-treatments a {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
  background: var(--paper);
  transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.other-treatments a:hover { border-color: var(--terra-mid); color: var(--terra-ink); transform: translateY(-2px); }

/* =============================================================
   15. Actividades
   ============================================================= */
.activities-grid { display: grid; gap: 1.4rem; }
@media (min-width: 720px)  { .activities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .activities-grid { grid-template-columns: repeat(3, 1fr); } }
.activity .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.2rem; }
.tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--blue-soft);
  /* --blue-deep, no --blue-ink: sobre el fondo azulado de la píldora
     el segundo se quedaba en 4.4:1, por debajo del mínimo exigible. */
  color: var(--blue-deep);
}
.tag--terra { background: var(--terra-soft); color: var(--terra-ink); }

/* =============================================================
   16. Eventos — calendario + lista
   ============================================================= */
.calendar {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  box-shadow: 0 3px 16px -9px rgba(34, 33, 28, 0.18);
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem);
  max-width: 560px;
  margin-inline: auto;
}
.calendar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.calendar-month { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
/* Solo la inicial: con `capitalize` salía "Septiembre De 2026" */
.calendar-month::first-letter { text-transform: uppercase; }
.calendar-nav { display: flex; gap: 0.5rem; }
.calendar-nav button {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.calendar-nav button:hover:not(:disabled) { border-color: var(--terra-mid); color: var(--terra-ink); background: var(--terra-soft); }
.calendar-nav button:disabled { opacity: 0.32; cursor: default; }

/* minmax(0, 1fr): con `aspect-ratio` las celdas imponen un ancho mínimo y en
   pantallas de 320 px la rejilla se salía del recuadro */
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.calendar-dow {
  text-align: center;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 0.5rem;
}
.calendar-day {
  aspect-ratio: 1 / 0.82;
  min-width: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  position: relative;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.calendar-day.is-empty { visibility: hidden; }
.calendar-day.is-past { color: rgba(111, 106, 95, 0.5); }
.calendar-day.is-today { box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; }
.calendar-day .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--terra); flex: none;
}
button.calendar-day {
  cursor: pointer;
  background: var(--terra-soft);
  color: var(--terra-ink);
  font-weight: 600;
}
button.calendar-day:hover {
  background: var(--terra-mid); color: #fff; transform: translateY(-2px);
}
button.calendar-day:hover .dot { background: #fff; }
.calendar-legend {
  margin-top: 1.1rem; display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--ink-mute);
}
.calendar-legend .swatch { width: 14px; height: 14px; border-radius: 5px; background: var(--terra-soft); border: 1px solid rgba(212,129,68,.35); }

.events-list { display: grid; gap: 1.1rem; }
.event {
  display: grid; gap: 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  box-shadow: 0 2px 12px -7px rgba(34, 33, 28, 0.16);
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.event:hover { border-color: rgba(212, 129, 68, 0.34); transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(168, 86, 35, 0.5); }
.event.is-highlight { border-color: var(--terra-mid); box-shadow: 0 0 0 3px var(--terra-soft), 0 24px 46px -30px rgba(168, 86, 35, 0.5); }
@media (min-width: 720px) { .event { grid-template-columns: 92px 1fr auto; align-items: center; } }
.event-date { text-align: center; position: relative; }
@media (min-width: 720px) {
  .event-date::after {
    content: ""; position: absolute; right: -0.6rem; top: 10%; bottom: 10%; width: 1px;
    background: linear-gradient(180deg, transparent, var(--line) 25%, var(--line) 75%, transparent);
  }
}
.event-date .d { font-family: var(--serif); font-size: 2.2rem; line-height: 1; display: block; }
.event-date .m { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra-ink); font-weight: 600; }
.event-info h3 { font-size: 1.35rem; }
.event-info .event-desc { margin-top: 0.4rem; color: var(--ink-soft); font-size: 0.94rem; max-width: 60ch; }
.event-info .event-meta { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.82rem; color: var(--ink-mute); }
.event-side { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.event-side:empty { display: none; }   /* eventos informativos, sin estado ni botón */
@media (min-width: 720px) { .event-side { align-items: flex-end; } }
.estado { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.32rem 0.8rem; border-radius: 999px; }
/* --blue-deep: con --blue-ink este texto pequeño se quedaba en 4.4:1 */
.estado--abierto { background: var(--blue-soft); color: var(--blue-deep); }
.estado--completo { background: rgba(34, 33, 28, 0.07); color: var(--ink-mute); }
.estado--pronto { background: var(--terra-soft); color: var(--terra-ink); }
.event .btn { padding: 0.6rem 1.3rem; font-size: 0.85rem; }

.past-events { margin-top: var(--section); padding-top: clamp(2.2rem, 5vw, 3rem); position: relative; }
.past-events::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}
.past-events h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.past-list { margin-top: 1.6rem; display: grid; gap: 0; list-style: none; padding: 0; }
.past-list li {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; align-items: baseline;
  padding: 0.95rem 0.2rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
}
.past-list .past-date { font-size: 0.8rem; color: var(--ink-mute); min-width: 110px; }
.past-list .past-title { font-weight: 500; color: var(--ink); }
.past-list .past-kind { font-size: 0.8rem; color: var(--blue-ink); }

/* =============================================================
   17. Equipo
   ============================================================= */
.team-grid { display: grid; gap: 1.6rem; }
@media (min-width: 720px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.member {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px -7px rgba(34, 33, 28, 0.16);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.member:hover { transform: translateY(-5px); box-shadow: 0 28px 52px -30px rgba(34, 33, 28, 0.38); }
.member-photo { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.7s var(--ease-out); }
.member-photo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 26%;
  background: linear-gradient(180deg, rgba(255, 253, 250, 0) 0%, rgba(255, 253, 250, 0.6) 70%, var(--paper) 100%);
  pointer-events: none;
}
.member:hover .member-photo img { transform: scale(1.04); }
.member-info { padding: 1.3rem 1.5rem 1.6rem; }
.member-info h3 { font-size: 1.4rem; }
.member-info .role { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terra-ink); margin-top: 0.3rem; }
.member-info .cred { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-mute); }
.member-info .bio { margin-top: 0.7rem; font-size: 0.93rem; color: var(--ink-soft); }

/* =============================================================
   18. Contacto
   ============================================================= */
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; } }
.contact-block h2 { font-size: 1.35rem; margin-bottom: 0.8rem; }
.contact-block + .contact-block { margin-top: 2.2rem; }
.contact-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; color: var(--ink-soft); }
.contact-list a { color: var(--blue-ink); font-weight: 500; }
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.hours-table th, .hours-table td { text-align: left; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--line-soft); }
.hours-table th { font-weight: 500; color: var(--ink); width: 40%; }
.hours-table td { color: var(--ink-soft); }
.map-frame {
  border: 0; width: 100%; height: 100%;
  min-height: 420px;
  border-radius: 22px;
  filter: saturate(0.82) contrast(0.96);
  box-shadow: 0 24px 50px -38px rgba(34, 33, 28, 0.55);
}
.contact-note {
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--terra);
  background: var(--paper);
  border-radius: 0 14px 14px 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* =============================================================
   19. Créditos
   ============================================================= */
.credits-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 2rem; }
.credits-list li {
  padding: 1.1rem 1.3rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.credits-list a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   20. Reveal al hacer scroll
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Defensivo: los elementos marcados con data-split nunca deben quedar ocultos */
.reveal[data-split] { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
/* Sin JS: mostrar todo */
html:not(.is-ready) .reveal { opacity: 1; transform: none; }

/* =============================================================
   21. View transitions
   ============================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) { animation-name: vtFadeOut; }
::view-transition-new(root) { animation-name: vtFadeIn; }
@keyframes vtFadeOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtFadeIn { from { opacity: 0; transform: translateY(10px); } }

/* =============================================================
   22. Reduced motion — solo efectos intrusivos
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll::after { animation: none; }
  .halo { animation-duration: 12s; }
  /* Reveals, hovers y transiciones se mantienen: son feedback funcional */
}

/* =============================================================
   23. Ajustes finos
   ============================================================= */
@media (max-width: 539px) {
  .hero-actions .btn { width: 100%; }
  .detail-cta .actions .btn { width: 100%; }
  .calendar-day { font-size: 0.8rem; border-radius: 9px; }
  /* En móvil, el texto se queda en la zona despejada de la izquierda */
  .hero-sub { max-width: 16rem; }
}

/* =============================================================
   24. Cookies — banner, panel de preferencias y contenido externo
   ============================================================= */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: var(--gutter);
  background: rgba(250, 247, 241, 0.97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 40px -30px rgba(34, 33, 28, 0.55);
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}
@supports (backdrop-filter: blur(14px)) {
  .cookie-banner { background: rgba(250, 247, 241, 0.9); backdrop-filter: blur(14px) saturate(1.1); }
}
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner-inner {
  width: min(1180px, 100%); margin-inline: auto;
  display: grid; gap: 1.2rem; align-items: center;
}
@media (min-width: 960px) { .cookie-banner-inner { grid-template-columns: 1.6fr 1fr; gap: 2rem; } }
.cookie-banner-text h2 { font-size: 1.3rem; }
.cookie-banner-text p {
  margin-top: 0.5rem; color: var(--ink-soft);
  font-size: 0.92rem; line-height: 1.6; max-width: 68ch;
}
.cookie-banner-text a { color: var(--blue-ink); text-decoration: underline; }

/* Aceptar y Rechazar: mismo tamaño y jerarquía (exigencia AEPD) */
.cookie-actions { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cookie-actions { grid-template-columns: repeat(3, 1fr); } }
.cookie-actions .btn { width: 100%; padding-inline: 1rem; font-size: 0.9rem; text-align: center; }

/* IMPORTANTE: estas reglas declaran display, que gana sobre el display:none
   que el navegador aplica a [hidden]. Sin esto, el panel oculto seguiría
   ocupando la pantalla y bloquearía todos los clics de la página. */
.cookie-banner[hidden],
.cookie-modal[hidden],
.consent-placeholder[hidden] { display: none !important; }

/* Panel de preferencias */
.cookie-modal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: var(--gutter); }
.cookie-modal-backdrop { position: absolute; inset: 0; background: rgba(34, 33, 28, 0.45); }
@supports (backdrop-filter: blur(3px)) { .cookie-modal-backdrop { backdrop-filter: blur(3px); } }
.cookie-modal-panel {
  position: relative;
  width: min(640px, 100%); max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 24px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 40px 80px -50px rgba(34, 33, 28, 0.8);
}
.cookie-modal-panel h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); padding-right: 2.4rem; }
.cookie-modal-intro { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.92rem; }
.cookie-cats { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1.1rem; }
.cookie-cats > li { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.cookie-cats > li:last-child { border-bottom: 0; padding-bottom: 0; }
.cookie-cats p { margin-top: 0.4rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; }
.cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-cat-name { font-weight: 600; font-size: 0.98rem; }
.cookie-cat-fixed { font-size: 0.76rem; color: var(--ink-mute); }

.cookie-switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.cookie-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-switch-ui {
  flex: none; width: 42px; height: 24px; border-radius: 999px;
  background: rgba(34, 33, 28, 0.16); position: relative;
  transition: background-color 0.3s var(--ease-out);
}
.cookie-switch-ui::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  transition: transform 0.3s var(--ease-out);
  box-shadow: 0 1px 3px rgba(34, 33, 28, 0.3);
}
.cookie-switch input:checked + .cookie-switch-ui { background: var(--terra-mid); }
.cookie-switch input:checked + .cookie-switch-ui::after { transform: translateX(18px); }
.cookie-switch input:focus-visible + .cookie-switch-ui { outline: 2px solid var(--terra-ink); outline-offset: 3px; }

.cookie-modal-actions { margin-top: 1.8rem; display: grid; gap: 0.7rem; }
@media (min-width: 560px) { .cookie-modal-actions { grid-template-columns: repeat(3, 1fr); } }
.cookie-modal-actions .btn { width: 100%; padding-inline: 1rem; font-size: 0.9rem; }
.cookie-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.cookie-modal-close:hover { background: var(--terra-soft); color: var(--terra-ink); }

/* Hueco del contenido externo mientras no hay consentimiento */
.consent-embed { position: relative; }
.consent-placeholder {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center;
}
.consent-placeholder h3 { font-size: 1.25rem; }
.consent-placeholder p { color: var(--ink-soft); font-size: 0.9rem; max-width: 46ch; }
.consent-placeholder .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 0.3rem; }
.consent-embed .embed-slot { display: block; }

/* =============================================================
   25. Páginas legales
   ============================================================= */
.legal { max-width: 76ch; }
.legal h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-top: clamp(2.2rem, 5vw, 3rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6rem; }
.legal h3 { font-size: 1.12rem; margin-top: 1.6rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal p { margin-top: 0.9rem; line-height: 1.75; }
.legal ul, .legal ol { margin-top: 0.9rem; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.legal ::marker { color: var(--terra); }
.legal a { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); }
.legal-meta { font-size: 0.86rem; color: var(--ink-mute); margin-top: 2.4rem; }

/* Dato identificativo pendiente de completar antes de publicar */
.dato-pendiente {
  background: rgba(212, 129, 68, 0.18);
  color: var(--terra-ink);
  font-weight: 600;
  padding: 0.05em 0.4em;
  border-radius: 5px;
  border: 1px dashed rgba(168, 86, 35, 0.5);
}

/* Tabla de cookies */
.cookie-table-wrap { overflow-x: auto; margin-top: 1.2rem; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
.cookie-table th, .cookie-table td {
  text-align: left; padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.cookie-table th { font-weight: 600; color: var(--ink); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }
.cookie-table td { color: var(--ink-soft); }
.cookie-table code { font-size: 0.86em; background: var(--bg-2); padding: 0.12em 0.4em; border-radius: 5px; color: var(--ink); }

/* Enlaces legales del pie */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.footer-legal button {
  font: inherit; font-size: inherit; color: inherit;
  padding: 0; text-decoration: underline; text-underline-offset: 2px;
}

/* =============================================================
   26. Revisión CALMA 28/08/2026
   ============================================================= */
/* Descriptor del logo más largo: se ajusta sin romper la cabecera */
.nav-logo .logo-sub {
  font-size: 0.5rem;
  letter-spacing: 0.13em;
  max-width: 15ch;
  line-height: 1.25;
}
@media (min-width: 500px) { .nav-logo .logo-sub { max-width: none; font-size: 0.52rem; } }
@media (min-width: 960px) { .nav-logo .logo-sub { font-size: 0.55rem; letter-spacing: 0.15em; } }

/* Horario completo en el pie */
.footer-hours { display: grid; gap: 0.35rem; }
.footer-hours li {
  display: flex; justify-content: space-between; gap: 0.8rem;
  font-size: 0.86rem;
}
.footer-hours li span:first-child { color: var(--ink); font-weight: 500; flex: none; }
.footer-hours li span:last-child { text-align: right; }

/* En ventanas bajas, "Desliza" chocaría con los botones del hero */
/* (antes se ocultaba en pantallas de menos de 800 px de alto) */

/* Fichas de servicio — listas de herramientas y sub-bloques */
.tool-list { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: 0.9rem; }
.tool-list li {
  display: flex; gap: 0.8rem; align-items: baseline;
  color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6;
}
.tool-list li::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra); transform: translateY(-2px);
}
.tool-list strong { color: var(--ink); }

.sub-services { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.sub-service {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.4vw, 2.2rem);
  box-shadow: 0 4px 20px -12px rgba(34, 33, 28, 0.25);
}
/* h2 en las fichas que no llevan un h2 de sección antes (para no saltar
   de h1 a h3); h3 en Materno-infantil, que sí lo lleva. Mismo aspecto. */
.sub-service h2, .sub-service h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 0.5rem; }
.sub-service-lead { margin-top: 0.7rem; color: var(--ink); font-weight: 500; }
.sub-service .prose p { margin-top: 0.8rem; font-size: 0.96rem; }
.sub-service .spec-list { margin-top: 1.1rem; }
.sub-service-figure { margin-top: 1.2rem; border-radius: 16px; overflow: hidden; }
.sub-service-figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Sello de Google en las opiniones */
.google-badge {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 3.5vw, 2.2rem);
  padding: 0.6rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: 0 3px 14px -8px rgba(34, 33, 28, 0.18);
}
.google-logo { display: inline-flex; flex: none; }
.google-stars { display: inline-flex; gap: 2px; }
.google-stars svg { width: 15px; height: 15px; fill: #f5a623; }
.google-text { font-size: 0.88rem; color: var(--ink-soft); }
.google-text strong { color: var(--ink); font-weight: 600; }

/* Etiquetas de categoría de los eventos (paleta CALMA) */
.evento-tag {
  display: inline-block;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
/* --blue-deep en lugar de --blue-ink: con --blue-ink el contraste
   sobre el fondo de la etiqueta se quedaba en 4.4:1, por debajo del
   4.5:1 que exige la norma para texto pequeño. */
.evento-tag--charla      { background: var(--blue-soft);  color: var(--blue-deep); }
.evento-tag--taller      { background: var(--terra-soft); color: var(--terra-ink); }
.evento-tag--circulo     { background: rgba(230, 185, 145, 0.28); color: #8a5320; }
.evento-tag--familias    { background: rgba(113, 153, 206, 0.22); color: var(--blue-deep); }
.evento-tag--experiencia { background: rgba(34, 33, 28, 0.07); color: var(--ink-soft); }

/* =============================================================
   27. El azul del logo como color de apoyo
   -------------------------------------------------------------
   Aporta contraste y personalidad sin romper la calma del diseño.
   Todos los tonos usados cumplen contraste AA sobre crema.
   ============================================================= */

/* Botón secundario: pasa de gris neutro a azul de marca */
.btn-ghost { border-color: rgba(113, 153, 206, 0.45); }
/* El texto pasa a --blue-deep: sobre --blue-soft, --blue-ink daba 4.2:1 */
.btn-ghost:hover { border-color: var(--blue-ink); color: var(--blue-deep); background: var(--blue-soft); }

/* Numeración y detalles del método */
.method li::before { color: var(--blue-ink); }
.method { border-color: rgba(113, 153, 206, 0.22); }

/* Bloques de actividades y eventos: un poco más de presencia */
.mention-activities, .mention-events { position: relative; }
.mention-activities::before, .mention-events::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 46px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--terra));
}
.mention-activities h2, .mention-events h2 { margin-top: 1.4rem; }

/* Fecha de los mini-eventos de la portada */
.mini-event .date .m { color: var(--blue-ink); }

/* Enlaces del pie: subrayado azul al pasar */
.footer a:hover { color: var(--blue); }

/* Separador superior de las tarjetas de servicio al pasar el ratón */
.card:hover { border-color: rgba(113, 153, 206, 0.35); }

/* Foco de teclado: azul, más visible sobre fondos cálidos */
:focus-visible { outline-color: var(--blue-ink); }

/* =============================================================
   28. Equipo y Contacto — textos de la revisión CALMA
   ============================================================= */

/* Titulares de página algo más largos: dejarles respirar */
.page-hero h1 { max-width: 22ch; }

/* Varios párrafos de entrada seguidos: menos aire entre ellos */
.page-hero .lead + .lead { margin-top: 0.9rem; }

/* Escucha · Presencia · Integración · Cercanía
   Cuatro apuntes ligeros, sin competir con el resto de la página */
.values-notes {
  list-style: none;
  padding: 0;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  display: grid;
  gap: 1.4rem 2rem;
}
@media (min-width: 720px) {
  .values-notes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .values-notes { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
}
.values-notes li {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.9rem;
  border-top: 2px solid rgba(113, 153, 206, 0.4);
}
.values-notes strong {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.values-notes span {
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}

/* Frase de bienvenida sobre la dirección del centro */
.contact-note {
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
  max-width: 46ch;
}

/* Viñeta azul también en las listas con descripción, para que las
   cinco fichas de servicio compartan el mismo acabado */
.tool-list--blue li::before { background: var(--blue); }
.sub-service .tool-list { margin-top: 1.1rem; }
.sub-service .prose + .tool-list,
.sub-service .spec-list + .prose { margin-top: 1.2rem; }

/* Lámina ilustrada (ficha de PNI): un dibujo circular no funciona
   recortado en banda apaisada, así que se muestra entero y centrado */
.detail-plate {
  margin: 0 auto;
  max-width: 620px;
  text-align: center;
}
.detail-plate img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 30px 60px -46px rgba(34, 33, 28, 0.6);
}
.detail-plate figcaption {
  margin-top: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-mute);
  max-width: 52ch;
  margin-inline: auto;
  text-align: left;
}
@media (min-width: 700px) { .detail-plate figcaption { text-align: center; } }

/* Fotografía de la recepción (página de Contacto).
   Banda ancha que se funde por abajo con el fondo de la página, para que
   la transición al bloque de datos de contacto no tenga un corte duro. */
.contact-photo {
  position: relative;
  margin: 0 0 clamp(2.4rem, 5vw, 3.4rem);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}
.contact-photo img {
  display: block;
  width: 100%;
  height: auto;               /* el recorte ya viene hecho en el archivo */
  /* El turquesa de la silla se calma un poco para entonar con la paleta */
  filter: saturate(0.92) sepia(0.07) brightness(1.02);
}
.contact-photo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(250, 247, 241, 0) 0%,
    rgba(250, 247, 241, 0.45) 62%,
    rgba(250, 247, 241, 0.85) 88%,
    var(--bg) 100%);
  pointer-events: none;
}
@media (max-width: 620px) {
  .contact-photo { border-radius: 18px; }
  /* En móvil sí acortamos la banda, centrando en la persona */
  .contact-photo img { height: 280px; object-fit: cover; object-position: 62% center; }
}

/* Diagrama de salud (portada). El PNG/WebP viene con fondo transparente,
   así que se apoya directamente sobre el tinte de la sección; la sombra
   proyectada sobre los propios trazos lo despega del fondo. */
.health-diagram {
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  max-width: 540px;
}
.health-diagram img {
  display: block;
  width: 100%;
  height: auto;
  /* Un solo halo claro pegado al trazo: despega el dibujo del fondo
     tostado y ya está. Sin animación ni sombra proyectada, que obligan
     al navegador a repintar la imagen entera de forma continua. */
  filter: drop-shadow(0 0 3px rgba(255, 253, 250, 0.95));
}

@media (max-width: 620px) { .health-diagram { max-width: 100%; } }

/* La lámina de PNI ahora es cuadrada: algo más de ancho le sienta bien */
.detail-plate { max-width: 660px; }

/* =============================================================
   29. Fichas del equipo: botón y pop-up "Conoce más"
   ============================================================= */

/* El bloque "Nuestra manera de acompañar" y "Conoce al equipo" quedaban
   demasiado separados: dos paddings de sección seguidos sumaban ~270 px */
#forma-de-trabajar { padding-bottom: clamp(3rem, 6vw, 4.6rem); }
#forma-de-trabajar + .section { padding-top: clamp(3rem, 6vw, 4.6rem); }

.no-scroll { overflow: hidden; }

.member-more {
  margin-top: 1.1rem;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue-ink);
  cursor: pointer;
  border-bottom: 1px solid rgba(113, 153, 206, 0.5);
  transition: color 0.25s, border-color 0.25s;
}
.member-more::after { content: " →"; }
.member-more:hover { color: var(--terra-ink); border-color: var(--terra); }

.member-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(0.8rem, 3vw, 2rem);
}
.member-modal[hidden] { display: none !important; }
.member-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(34, 33, 28, 0.5);
  backdrop-filter: blur(3px);
}
.member-modal-panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 780px);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: 22px;
  border: 1px solid var(--line-soft);
  box-shadow: 0 40px 90px -40px rgba(34, 33, 28, 0.6);
  overflow: hidden;
}
.member-modal-close {
  position: absolute; top: 0.7rem; right: 0.9rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  font-size: 1.35rem; line-height: 1; color: var(--ink-soft);
  cursor: pointer;
}
.member-modal-close:hover { background: var(--bg-2); color: var(--ink); }

.member-modal-head {
  display: flex; align-items: center; gap: 1.1rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  padding-right: 3.6rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}
.member-modal-head img {
  width: 78px; height: 98px; flex: none;
  object-fit: cover; object-position: center top;
  border-radius: 12px;
}
.member-modal-head h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); }
.member-modal-head .role {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terra-ink); margin-top: 0.3rem;
}

.member-modal-body {
  overflow-y: auto;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  -webkit-overflow-scrolling: touch;
}
.member-modal-body section + section { margin-top: 1.7rem; }
.member-modal-body h4 {
  font-family: var(--sans);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--blue-deep);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.member-modal-body ul {
  list-style: none; padding: 0;
  margin-top: 0.9rem; display: grid; gap: 0.5rem;
}
.member-modal-body li {
  display: flex; gap: 0.65rem; align-items: baseline;
  color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55;
}
.member-modal-body li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); transform: translateY(-2px);
}
.member-modal-body p {
  margin-top: 0.9rem;
  color: var(--ink-soft); font-size: 0.96rem; line-height: 1.7;
}
.member-modal-body em { color: var(--ink-mute); }

.member-modal-foot {
  padding: 1.1rem clamp(1.3rem, 3vw, 1.9rem);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}
@media (max-width: 520px) {
  .member-modal-head { gap: 0.9rem; }
  .member-modal-head img { width: 60px; height: 76px; }
  .member-modal-foot .btn { width: 100%; justify-content: center; }
}

/* =============================================================
   30. Aura del diagrama de los pilares
   La sección conserva su degradado normal (.section--tint); el relieve
   se aplica solo al diagrama, no al fondo.
   ============================================================= */

.health-diagram { position: relative; }



/* =============================================================
   31. Aura de fondo
   Una capa fija a pantalla completa, por detrás de todo el contenido.
   Cuatro núcleos —dos terracota y dos azules, dos grandes y dos
   pequeños— que vagan cada uno con su propio recorrido, duración y
   desfase, así que nunca coinciden y el conjunto no se repite.
   La capa cubre toda la altura del documento y sus núcleos se reparten de
   arriba abajo, así que al hacer scroll van apareciendo otros distintos.
   ============================================================= */

.aura-fondo {
  position: absolute;       /* pertenece a la página entera, no a la ventana:
                               al bajar aparecen núcleos distintos */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;              /* sobre el fondo de página, bajo el contenido */
  overflow: hidden;
  pointer-events: none;
}
.aura-fondo span {
  position: absolute;
  display: block;
  will-change: transform;
}

/* Dithering: un grano imperceptible que rompe los escalones del
   degradado. Sin él, una caída tan tenue y tan ancha bandea siempre,
   porque el color varía menos de un nivel cada veinte píxeles. */
.aura-fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23d)'/%3E%3C/svg%3E");
}
/* Los dos colores de la marca, con el núcleo en el tono profundo */
/* Un solo tono por mancha con una caída de nueve paradas: mezclar dos
   colores dentro del degradado era parte del bandeado que se veía. */
.aura-fondo .t {
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(199, 116, 58, 0.341) 0%,
    rgba(199, 116, 58, 0.313) 12%,
    rgba(199, 116, 58, 0.267) 24%,
    rgba(199, 116, 58, 0.205) 36%,
    rgba(199, 116, 58, 0.143) 48%,
    rgba(199, 116, 58, 0.088) 60%,
    rgba(199, 116, 58, 0.045) 72%,
    rgba(199, 116, 58, 0.017) 84%,
    rgba(199, 116, 58, 0.000) 100%);
}
.aura-fondo .a {
  background: radial-gradient(circle closest-side at 50% 50%,
    rgba(95, 132, 180, 0.310) 0%,
    rgba(95, 132, 180, 0.285) 12%,
    rgba(95, 132, 180, 0.242) 24%,
    rgba(95, 132, 180, 0.186) 36%,
    rgba(95, 132, 180, 0.130) 48%,
    rgba(95, 132, 180, 0.081) 60%,
    rgba(95, 132, 180, 0.040) 72%,
    rgba(95, 132, 180, 0.016) 84%,
    rgba(95, 132, 180, 0.000) 100%);
}

/* Núcleos pequeños: el color acompaña, no invade. Los tamaños se repiten
   cada cuatro, así que valen para los ocho núcleos de cada página. */
.aura-fondo span:nth-child(4n+1) { width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; }
.aura-fondo span:nth-child(4n+2) { width: 39vmax; height: 39vmax; margin: -19.5vmax 0 0 -19.5vmax; }
.aura-fondo span:nth-child(4n+3) { width: 27vmax; height: 27vmax; margin: -13.5vmax 0 0 -13.5vmax; }
.aura-fondo span:nth-child(4n+4) { width: 22vmax; height: 22vmax; margin: -11vmax 0 0 -11vmax; }

/* Cuatro recorridos distintos. Combinados con duraciones y desfases
   diferentes, el conjunto tarda mucho en repetir la misma imagen. */
@keyframes vaga-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(12vw, 7vh, 0) scale(1.14); }
  66%  { transform: translate3d(-6vw, 14vh, 0) scale(0.92); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes vaga-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(-14vw, 10vh, 0) scale(0.9); }
  70%  { transform: translate3d(9vw, -8vh, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes vaga-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  40%  { transform: translate3d(16vw, -12vh, 0) scale(1.22); }
  75%  { transform: translate3d(-11vw, -5vh, 0) scale(0.88); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes vaga-4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(-9vw, -14vh, 0) scale(1.1); }
  68%  { transform: translate3d(13vw, 9vh, 0) scale(0.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .aura-fondo span:nth-child(1) { animation: vaga-1 38s ease-in-out  -5s infinite; }
  .aura-fondo span:nth-child(2) { animation: vaga-2 47s ease-in-out -18s infinite; }
  .aura-fondo span:nth-child(3) { animation: vaga-3 31s ease-in-out -11s infinite; }
  .aura-fondo span:nth-child(4) { animation: vaga-4 35s ease-in-out -24s infinite; }
  /* Los cuatro de la mitad inferior repiten recorrido pero con otra
     duración y otro desfase, así que nunca van a la vez que los de arriba. */
  .aura-fondo span:nth-child(5) { animation: vaga-3 43s ease-in-out -30s infinite; }
  .aura-fondo span:nth-child(6) { animation: vaga-1 52s ease-in-out  -9s infinite; }
  .aura-fondo span:nth-child(7) { animation: vaga-4 29s ease-in-out -16s infinite; }
  .aura-fondo span:nth-child(8) { animation: vaga-2 41s ease-in-out -33s infinite; }
}

/* --- Reparto de cada página --------------------------------------
   Ocho núcleos por página, escalonados de arriba abajo sobre toda la
   altura del documento: al bajar entran unos y salen otros. Cada
   página cambia los laterales para que no se repita la composición. */

.aura-fondo--servicios span:nth-child(1) { top: 4%; left: 96%; }
.aura-fondo--servicios span:nth-child(2) { top: 16%; left: 10%; }
.aura-fondo--servicios span:nth-child(3) { top: 28%; left: 74%; }
.aura-fondo--servicios span:nth-child(4) { top: 40%; left: 30%; }
.aura-fondo--servicios span:nth-child(5) { top: 52%; left: 16%; }
.aura-fondo--servicios span:nth-child(6) { top: 64%; left: 86%; }
.aura-fondo--servicios span:nth-child(7) { top: 77%; left: 44%; }
.aura-fondo--servicios span:nth-child(8) { top: 91%; left: 66%; }

.aura-fondo--grupos span:nth-child(1) { top: 4%; left: 88%; }
.aura-fondo--grupos span:nth-child(2) { top: 16%; left: 26%; }
.aura-fondo--grupos span:nth-child(3) { top: 28%; left: 58%; }
.aura-fondo--grupos span:nth-child(4) { top: 40%; left: 12%; }
.aura-fondo--grupos span:nth-child(5) { top: 52%; left: 72%; }
.aura-fondo--grupos span:nth-child(6) { top: 64%; left: 34%; }
.aura-fondo--grupos span:nth-child(7) { top: 77%; left: 92%; }
.aura-fondo--grupos span:nth-child(8) { top: 91%; left: 48%; }

.aura-fondo--eventos span:nth-child(1) { top: 4%; left: 84%; }
.aura-fondo--eventos span:nth-child(2) { top: 16%; left: 12%; }
.aura-fondo--eventos span:nth-child(3) { top: 28%; left: 40%; }
.aura-fondo--eventos span:nth-child(4) { top: 40%; left: 66%; }
.aura-fondo--eventos span:nth-child(5) { top: 52%; left: 24%; }
.aura-fondo--eventos span:nth-child(6) { top: 64%; left: 90%; }
.aura-fondo--eventos span:nth-child(7) { top: 77%; left: 52%; }
.aura-fondo--eventos span:nth-child(8) { top: 91%; left: 18%; }

.aura-fondo--equipo span:nth-child(1) { top: 4%; left: 18%; }
.aura-fondo--equipo span:nth-child(2) { top: 16%; left: 92%; }
.aura-fondo--equipo span:nth-child(3) { top: 28%; left: 34%; }
.aura-fondo--equipo span:nth-child(4) { top: 40%; left: 66%; }
.aura-fondo--equipo span:nth-child(5) { top: 52%; left: 80%; }
.aura-fondo--equipo span:nth-child(6) { top: 64%; left: 22%; }
.aura-fondo--equipo span:nth-child(7) { top: 77%; left: 58%; }
.aura-fondo--equipo span:nth-child(8) { top: 91%; left: 88%; }

.aura-fondo--contacto span:nth-child(1) { top: 4%; left: 94%; }
.aura-fondo--contacto span:nth-child(2) { top: 16%; left: 24%; }
.aura-fondo--contacto span:nth-child(3) { top: 28%; left: 8%; }
.aura-fondo--contacto span:nth-child(4) { top: 40%; left: 52%; }
.aura-fondo--contacto span:nth-child(5) { top: 52%; left: 70%; }
.aura-fondo--contacto span:nth-child(6) { top: 64%; left: 36%; }
.aura-fondo--contacto span:nth-child(7) { top: 77%; left: 86%; }
.aura-fondo--contacto span:nth-child(8) { top: 91%; left: 14%; }

.aura-fondo--integrativa span:nth-child(1) { top: 4%; left: 90%; }
.aura-fondo--integrativa span:nth-child(2) { top: 16%; left: 16%; }
.aura-fondo--integrativa span:nth-child(3) { top: 28%; left: 54%; }
.aura-fondo--integrativa span:nth-child(4) { top: 40%; left: 70%; }
.aura-fondo--integrativa span:nth-child(5) { top: 52%; left: 28%; }
.aura-fondo--integrativa span:nth-child(6) { top: 64%; left: 84%; }
.aura-fondo--integrativa span:nth-child(7) { top: 77%; left: 38%; }
.aura-fondo--integrativa span:nth-child(8) { top: 91%; left: 62%; }

.aura-fondo--pni span:nth-child(1) { top: 4%; left: 92%; }
.aura-fondo--pni span:nth-child(2) { top: 16%; left: 20%; }
.aura-fondo--pni span:nth-child(3) { top: 28%; left: 66%; }
.aura-fondo--pni span:nth-child(4) { top: 40%; left: 38%; }
.aura-fondo--pni span:nth-child(5) { top: 52%; left: 82%; }
.aura-fondo--pni span:nth-child(6) { top: 64%; left: 12%; }
.aura-fondo--pni span:nth-child(7) { top: 77%; left: 50%; }
.aura-fondo--pni span:nth-child(8) { top: 91%; left: 74%; }

.aura-fondo--materno span:nth-child(1) { top: 4%; left: 12%; }
.aura-fondo--materno span:nth-child(2) { top: 16%; left: 86%; }
.aura-fondo--materno span:nth-child(3) { top: 28%; left: 28%; }
.aura-fondo--materno span:nth-child(4) { top: 40%; left: 60%; }
.aura-fondo--materno span:nth-child(5) { top: 52%; left: 94%; }
.aura-fondo--materno span:nth-child(6) { top: 64%; left: 40%; }
.aura-fondo--materno span:nth-child(7) { top: 77%; left: 70%; }
.aura-fondo--materno span:nth-child(8) { top: 91%; left: 20%; }

.aura-fondo--urogine span:nth-child(1) { top: 4%; left: 24%; }
.aura-fondo--urogine span:nth-child(2) { top: 16%; left: 78%; }
.aura-fondo--urogine span:nth-child(3) { top: 28%; left: 6%; }
.aura-fondo--urogine span:nth-child(4) { top: 40%; left: 56%; }
.aura-fondo--urogine span:nth-child(5) { top: 52%; left: 88%; }
.aura-fondo--urogine span:nth-child(6) { top: 64%; left: 30%; }
.aura-fondo--urogine span:nth-child(7) { top: 77%; left: 64%; }
.aura-fondo--urogine span:nth-child(8) { top: 91%; left: 42%; }

.aura-fondo--yoga span:nth-child(1) { top: 4%; left: 70%; }
.aura-fondo--yoga span:nth-child(2) { top: 16%; left: 90%; }
.aura-fondo--yoga span:nth-child(3) { top: 28%; left: 34%; }
.aura-fondo--yoga span:nth-child(4) { top: 40%; left: 14%; }
.aura-fondo--yoga span:nth-child(5) { top: 52%; left: 58%; }
.aura-fondo--yoga span:nth-child(6) { top: 64%; left: 26%; }
.aura-fondo--yoga span:nth-child(7) { top: 77%; left: 80%; }
.aura-fondo--yoga span:nth-child(8) { top: 91%; left: 46%; }

/* En móvil el texto ocupa todo el ancho: bajamos la intensidad */
@media (max-width: 720px) {
  .aura-fondo { opacity: 0.85; }
}

/* =============================================================
   32. Anillo que acompaña al puntero
   No sustituye al cursor: el nativo sigue visible y el anillo no
   intercepta clics. Pequeño y de trazo fino.
   ============================================================= */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(180, 95, 40, 0.55);
  transition:
    opacity 0.35s ease,
    width 0.28s var(--ease-out),
    height 0.28s var(--ease-out),
    margin 0.28s var(--ease-out),
    border-color 0.28s ease,
    background-color 0.28s ease;
  will-change: transform;
}
.cursor-ring.is-on { opacity: 1; }

/* Sobre algo pulsable se abre y se tiñe de azul: informa, no adorna */
.cursor-ring.is-hot {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-color: rgba(77, 112, 153, 0.6);
  background-color: rgba(113, 153, 206, 0.10);
}

/* Al pulsar, se contrae */
.cursor-ring.is-down {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ring { display: none; }
}

/* Firma de autoría, discreta y separada del aviso de copyright */
.footer-author {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  /* 0.78 es el mínimo que mantiene 4.5:1 de contraste sobre el fondo
     del pie; por debajo incumplía la norma para texto pequeño */
  opacity: 0.78;
}
@media (min-width: 560px) {
  .footer-author {
    display: inline;
    margin-top: 0;
    margin-left: 0.9rem;
    padding-left: 0.9rem;
    border-left: 1px solid var(--line-soft);
  }
}

/* Horario semanal de grupos (página de Grupos): imagen de tabla, tiene
   que poder leerse, así que sin fundidos ni filtros. */
.schedule-figure {
  margin: var(--section) 0 0;   /* separa el horario de las tarjetas de arriba */
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 50px -38px rgba(34, 33, 28, 0.5);
  background: var(--paper);
}
.schedule-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Horario dentro de cada tarjeta de actividad: compacto, con el día
   destacado y el nombre del grupo cuando hay más de uno */
.activity-hours {
  list-style: none;
  padding: 0.9rem 0 0;
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.activity-hours li { display: flex; flex-wrap: wrap; gap: 0 0.55rem; align-items: baseline; }
.activity-hours span {
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  min-width: 5.6rem;
}
.activity-hours em { font-style: normal; color: var(--ink-mute); }

/* =============================================================
   33. Móvil
   Ajustes que solo actúan por debajo de 720 px (o de 960 px en la
   cabecera). En escritorio nada cambia.
   ============================================================= */

/* Descriptor del logo: con el texto corto cabe un punto más grande */
@media (max-width: 959px) {
  .nav-logo .logo-sub { font-size: 0.56rem; letter-spacing: 0.16em; }
}

/* Aviso de "desliza" bajo el horario en imagen (solo se ve en móvil) */
.schedule-hint {
  display: none;
  text-align: center; margin-top: 0.7rem;
  font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  /* "Desliza" abajo del todo del hero; el contenido deja sitio */
  .hero-inner { padding-bottom: 3.4rem; }
  .hero-scroll { bottom: 0.9rem; }
  .hero-scroll::after { height: 26px; }

  /* Zonas de pulsación de al menos 32 px en los enlaces de texto.
     Donde hay subrayado (que se movería con el padding) se amplía la
     zona con un pseudoelemento invisible; el resto lleva padding. */
  .link-arrow { padding-block: 0.35rem; }
  .member-more,
  .page-hero .kicker a { position: relative; }
  .member-more::before,
  .page-hero .kicker a::before { content: ""; position: absolute; inset: -9px 0; }
  .contact-list a,
  .footer ul a,
  .footer-legal a,
  .footer-legal button { display: inline-block; padding-block: 0.25rem; }
  .footer-contact a { display: inline-block; padding-block: 0.15rem; }
  .calendar-nav button { width: 44px; height: 44px; }

  /* Etiquetas de categoría: un punto más de cuerpo */
  .evento-tag { font-size: 0.72rem; }

  /* Ficha de evento: la fecha en línea y alineada con el texto, no
     centrada y sola arriba de la tarjeta */
  .event { gap: 0.9rem; }
  .event-date { display: flex; align-items: baseline; gap: 0.5rem; text-align: left; }
  .event-date .d { font-size: 1.9rem; }

  /* Horario semanal en imagen: a 335 px de ancho no se lee. Se muestra
     a 720 px con desplazamiento lateral y un aviso de que se puede deslizar */
  .schedule-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .schedule-figure img { min-width: 720px; }
  .schedule-hint { display: block; }
}

@media (max-width: 539px) {
  /* Botón del panel azul a todo el ancho, como los del hero */
  .cta-content .btn-primary { align-self: stretch; }

  /* Aviso de cookies más compacto: en un teléfono de 667 px de alto
     ocupaba más de media pantalla. Aceptar y Rechazar siguen siendo
     iguales en tamaño y jerarquía, ahora lado a lado. */
  .cookie-banner { padding: 1.1rem var(--gutter) 1.2rem; }
  .cookie-banner-inner { gap: 0.9rem; }
  .cookie-banner-text h2 { font-size: 1.15rem; }
  .cookie-banner-text p { font-size: 0.86rem; margin-top: 0.4rem; }
  .cookie-actions { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .cookie-actions .btn[data-cc="personalizar"] { grid-column: 1 / -1; }
  .cookie-actions .btn { padding-block: 0.85rem; }
}

/* =============================================================
   34. Grupos en escritorio: que cada tarjeta y el horario quepan
   en una pantalla de portátil (768 px de alto) sin desplazarse.
   Solo actúa con la rejilla de tres columnas (≥ 1080 px).
   ============================================================= */
.activity-more { margin-top: 0.9rem; }

@media (min-width: 1080px) {
  .activities-grid .card-media { aspect-ratio: 16 / 9; }
  .activity .card-body { padding: 1.2rem 1.4rem 1.4rem; gap: 0.5rem; }
  .activity .card-body p { font-size: 0.92rem; }
  .activity-more { margin-top: 0.3rem; }
  .activity-hours { margin-top: 0.8rem; padding-top: 0.7rem; gap: 0.25rem; font-size: 0.84rem; }
  .activity-hours span { min-width: 4.8rem; font-size: 0.7rem; }
}

/* El horario en imagen, más recogido: a 880 px se lee bien y entra
   entero en la pantalla de un portátil. En móvil sigue igual. */
@media (min-width: 960px) {
  .schedule-figure { max-width: 880px; margin-inline: auto; }
}

/* =============================================================
   35. Portada de bienvenida (solo en la home, una vez por sesión)
   El logo aparece, después el nombre y el descriptor, y la capa se
   retira sola a los ~2 s (o antes con un clic). El HTML ya la trae;
   lib/intro.js la oculta antes del primer pintado si ya se ha visto.
   ============================================================= */
.intro {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--bg);
  overflow: hidden;
  pointer-events: auto;
}
html.intro-vista .intro { display: none; }

/* Salida: el fondo se disuelve (deja ver la portada), el halo y los
   textos se van, y el logo viaja hasta la cabecera (transform lo pone
   main.js con las medidas reales). Nada desaparece de golpe. */
.intro.is-out { background: transparent; pointer-events: none; transition: background-color 0.7s var(--ease-soft) 0.15s; }
.intro.is-out::before { opacity: 0; transition: opacity 0.55s var(--ease-soft); animation: none; }
/* Logo y textos: los mueve main.js con element.animate(); aquí solo se
   evita que el logo de la cabecera tenga transición de opacidad. */
.intro.is-out img { will-change: transform; }

/* Halo de marca detrás del logo: los dos colores, muy diluidos */
.intro::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: min(72vmax, 900px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(113, 153, 206, 0.16) 0%,
    rgba(212, 129, 68, 0.10) 45%,
    rgba(250, 247, 241, 0) 100%);
  animation: introHalo 2.2s var(--ease-soft) both;
}
.intro-inner {
  position: relative;
  display: grid; justify-items: center; gap: 0.9rem;
  text-align: center;
  padding: var(--gutter);
}
.intro img {
  width: clamp(88px, 14vw, 132px); height: auto;
  opacity: 0; transform: scale(0.8); filter: blur(14px);
  animation: introLogo 1.1s var(--ease-soft) 0.05s forwards;
}
.intro-name {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 600; line-height: 1;
  letter-spacing: 0.24em; padding-left: 0.24em;   /* compensa el espaciado final */
  color: var(--ink);
  opacity: 0;
  animation: introSube 0.9s var(--ease-soft) 0.5s forwards;
}
.intro-sub {
  font-size: clamp(0.66rem, 1.4vw, 0.78rem);
  font-weight: 600; letter-spacing: 0.3em; padding-left: 0.3em;
  text-transform: uppercase; color: var(--ink-mute);
  opacity: 0;
  animation: introSube 0.9s var(--ease-soft) 0.8s forwards;
}
@keyframes introLogo { 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introSube { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introHalo { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

html.intro-volando .nav-logo img { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* =============================================================
   36. Interacción y accesibilidad (ronda 14/09, tarde)
   - Portada de bienvenida en cada visita a la home (breve si ya se vio)
   - Botón flotante de WhatsApp
   - Panel de accesibilidad: menos movimiento · texto · contraste
   - Iconos en los datos de contacto
   - Botones con relleno deslizante y subrayado que crece
   ============================================================= */

/* --- Portada breve (segunda vez en la misma sesión) --- */
html.intro-breve .intro img         { animation-duration: 0.5s; animation-delay: 0s; }
html.intro-breve .intro .intro-name { animation-duration: 0.5s; animation-delay: 0.12s; }
html.intro-breve .intro .intro-sub  { animation-duration: 0.5s; animation-delay: 0.24s; }
html.intro-breve .intro::before     { animation-duration: 1.2s; }

/* --- "Desliza" del hero como enlace a Servicios --- */
a.hero-scroll { transition: color 0.3s; }
a.hero-scroll:hover { color: var(--terra-ink); }
a.hero-scroll:hover::after { background: linear-gradient(var(--terra-ink), transparent); }

/* --- Botones: el tono oscuro entra deslizándose de izquierda a derecha --- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn-primary::before { background: var(--terra-ink); }
.btn-primary:hover { background: var(--terra-mid); }          /* el ::before pone el oscuro */
.btn-ghost::before { background: var(--blue-soft); }
.btn-ghost:hover { background: rgba(255, 253, 250, 0.6); }
.cta-content .btn-primary::before { background: #fff; }
.cta-content .btn-primary:hover { background: var(--bg); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }

/* Enlaces con flecha: subrayado que crece (en tarjetas, al pasar por la tarjeta) */
.link-arrow {
  background-image: linear-gradient(90deg, var(--terra), var(--blue));
  background-size: 0 2px; background-repeat: no-repeat;
  background-position: left calc(100% - 0.1em);
  transition: background-size 0.85s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.link-arrow:hover, .card:hover .link-arrow, .treatment-row:hover .link-arrow { background-size: 100% 2px; }

/* --- Iconos de contacto (máscara SVG teñida con el azul de marca) --- */
.ico { display: flex; align-items: flex-start; gap: 0.55rem; }
.ico::before {
  content: ""; flex: none;
  width: 17px; height: 17px; margin-top: 0.22em;
  background-color: var(--blue-ink);
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.ico-tel   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L8.1 9.7a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.ico-wa    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.5 14.4c-.3-.2-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.2-.2.2-.3.3-.5.1-.2.1-.4 0-.5-.1-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.4zM12 21.8a9.8 9.8 0 0 1-5-1.4l-.4-.2-3.7 1 1-3.6-.2-.4A9.9 9.9 0 1 1 12 21.8zm8.4-18.2A11.8 11.8 0 0 0 12 .2 11.8 11.8 0 0 0 1.9 17.9L.2 24l6.3-1.7a11.8 11.8 0 0 0 5.6 1.5A11.8 11.8 0 0 0 20.4 3.6z'/%3E%3C/svg%3E"); }
.ico-mail  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E"); }
.ico-insta { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.3' cy='6.7' r='0.6' fill='%23000'/%3E%3C/svg%3E"); }
.ico-lugar { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6.5-8 12.5-8 12.5S4 16.5 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ico-mapa  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2.5 6 2.5 6-2.5v15L15 21l-6-2.5L3 21z'/%3E%3Cpath d='M9 3.5v15M15 6v15'/%3E%3C/svg%3E"); }
.footer-contact .ico::before { width: 15px; height: 15px; margin-top: 0.28em; opacity: 0.85; }

/* --- Botón flotante de WhatsApp (abajo a la derecha) --- */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 0.55rem;
  height: 52px; padding: 0 1.15rem 0 0.85rem;
  border-radius: 999px;
  background: var(--terra-mid); color: #fff;
  font-weight: 500; font-size: 0.92rem;
  box-shadow: 0 14px 30px -14px rgba(168, 86, 35, 0.75);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.35s, background-color 0.35s;
}
.wa-flotante svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.wa-flotante:hover { background: var(--terra-ink); transform: translateY(-3px); box-shadow: 0 20px 36px -14px rgba(168, 86, 35, 0.8); }
@media (max-width: 720px) {
  .wa-flotante { width: 52px; padding: 0; justify-content: center; }
  .wa-flotante span { display: none; }
}

/* --- Botón y panel de accesibilidad (abajo a la izquierda) --- */
.a11y-boton {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -14px rgba(34, 33, 28, 0.5);
  transition: color 0.3s, border-color 0.3s, transform 0.35s var(--ease-out), opacity 0.35s;
}
.a11y-boton svg { width: 24px; height: 24px; }
.a11y-boton:hover, .a11y-boton[aria-expanded="true"] { color: var(--terra-ink); border-color: var(--terra-mid); transform: translateY(-2px); }

.a11y-panel {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 58px);
  z-index: 91;
  width: min(300px, calc(100vw - 2rem));
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: 0 30px 60px -30px rgba(34, 33, 28, 0.55);
}
.a11y-panel[hidden] { display: none !important; }
.a11y-panel h2 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.a11y-panel .a11y-cerrar {
  position: absolute; top: 0.6rem; right: 0.7rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 1.2rem; line-height: 1;
}
.a11y-panel .a11y-cerrar:hover { background: var(--bg-2); }
.a11y-fila { margin-top: 0.95rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; font-size: 0.92rem; }
.a11y-fila .cookie-switch { flex-direction: row-reverse; gap: 0.8rem; width: 100%; justify-content: space-between; }
.a11y-tamano { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.a11y-tamano button {
  padding: 0.35rem 0.7rem; font-size: 0.82rem; font-weight: 600;
  color: var(--ink-soft); background: var(--paper);
  transition: background-color 0.25s, color 0.25s;
}
.a11y-tamano button + button { border-left: 1px solid var(--line); }
.a11y-tamano button[aria-pressed="true"] { background: var(--terra-mid); color: #fff; }
.a11y-tamano button:hover:not([aria-pressed="true"]) { background: var(--bg-2); }
.a11y-restablecer { margin-top: 1rem; font-size: 0.82rem; color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.a11y-restablecer:hover { color: var(--terra-ink); }

/* Mientras está el aviso de cookies, los flotantes se apartan */
body:has(.cookie-banner.is-visible) .wa-flotante,
body:has(.cookie-banner.is-visible) .a11y-boton { opacity: 0; pointer-events: none; transform: translateY(16px); }
body:has(.cookie-banner.is-visible) .a11y-panel { display: none; }

/* --- Modo "menos movimiento" (elegido en el panel) --- */
html.a11y-quieto *, html.a11y-quieto *::before, html.a11y-quieto *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}
html.a11y-quieto .reveal { opacity: 1; transform: none; }
html.a11y-quieto .cursor-ring, html.a11y-quieto .intro { display: none !important; }
html.a11y-quieto .hero-bg img { transform: scale(1.04) !important; }

/* --- Tamaño del texto (todo el sitio está en rem, así que escala junto) --- */
html.a11y-texto-1 { font-size: 112.5%; }
html.a11y-texto-2 { font-size: 125%; }

/* --- Modo "más contraste": tinta negra, fondos planos, enlaces subrayados --- */
html.a11y-contraste {
  --ink: #000; --ink-soft: #141414; --ink-mute: #333;
  --bg: #fff; --bg-2: #f1efe9; --paper: #fff;
  --terra-mid: #8a4416; --terra-ink: #7a3a12; --terra-soft: rgba(138, 68, 22, 0.12);
  --blue-ink: #24446a; --blue-deep: #1c3654; --blue-soft: rgba(36, 68, 106, 0.12);
  --line: rgba(0, 0, 0, 0.45); --line-soft: rgba(0, 0, 0, 0.28);
}
html.a11y-contraste .aura-fondo, html.a11y-contraste .halo,
html.a11y-contraste .card-media::after, html.a11y-contraste .member-photo::after,
html.a11y-contraste .contact-photo::after { display: none; }
html.a11y-contraste .hero-bg img { opacity: 0.3; }
html.a11y-contraste .section--tint, html.a11y-contraste .footer { background: var(--bg-2); }
html.a11y-contraste main a:not(.btn):not(.card-link):not(.mini-event):not(.member-more),
html.a11y-contraste .footer a { text-decoration: underline; text-underline-offset: 3px; }
html.a11y-contraste .btn-ghost { border-color: #000; color: #000; background: #fff; }
html.a11y-contraste .btn-ghost::before { background: rgba(0, 0, 0, 0.08); }
html.a11y-contraste .tag, html.a11y-contraste .estado, html.a11y-contraste .evento-tag { border: 1px solid currentColor; }
html.a11y-contraste .nav.is-scrolled { background: #fff; backdrop-filter: none; }
html.a11y-contraste .cursor-ring { border-color: #000; }

/* =============================================================
   37. Escala general más contenida (16/09)
   Petición: "todo un poco más pequeño, que se vea más de una mirada",
   sobre todo en móvil. Se baja la raíz a 15 px (toda la web está en
   rem, así que baja junta) y se recorta el aire de secciones y titulares.
   ============================================================= */
html { font-size: 14.5px; }
:root { --section: clamp(3.2rem, 7.5vw, 6.2rem); }
@media (max-width: 720px) { html { font-size: 14px; } }

.section-head { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.hero-title { font-size: clamp(2.2rem, 5.2vw, 4rem); margin-top: 1.1rem; }
.hero-sub { margin-top: 1.2rem; font-size: clamp(0.98rem, 1.5vw, 1.1rem); }
.page-hero { padding-top: calc(var(--nav-h) + clamp(2.4rem, 6vw, 4.5rem)); padding-bottom: clamp(2rem, 5vw, 3.4rem); }
.page-hero h1 { font-size: clamp(2.05rem, 4.8vw, 3.3rem); }
.page-hero .lead { margin-top: 1.2rem; font-size: clamp(0.98rem, 1.4vw, 1.08rem); }
.card-body { padding: 1.2rem 1.4rem 1.5rem; gap: 0.55rem; }
.card-body h3 { font-size: 1.35rem; }
.mentions-grid { gap: 2.4rem; }
.footer { padding-block: clamp(2.8rem, 6vw, 4.2rem) 1.6rem; }

@media (max-width: 720px) {
  /* El hero no ocupa toda la pantalla: la siguiente sección asoma */
  .hero { min-height: 88svh; }
  .hero-title { font-size: clamp(2rem, 9.5vw, 2.4rem); }
  .hero-sub { font-size: 0.95rem; margin-top: 1rem; }
  .hero-actions { margin-top: 1.5rem; gap: 0.6rem; }
  .btn { padding: 0.8rem 1.5rem; }
  .kicker { font-size: 0.72rem; }
  .section-head { margin-bottom: 1.5rem; }
  .section-head h2 { font-size: 1.7rem; }
  .section-head p { margin-top: 0.7rem; }
  .page-hero h1 { font-size: 1.95rem; }
  .page-hero .lead { font-size: 0.95rem; margin-top: 1rem; }
  .card-body { padding: 1.05rem 1.15rem 1.25rem; gap: 0.5rem; }
  .card-body h3 { font-size: 1.25rem; }
  .card-body p { font-size: 0.92rem; }
  .mentions-grid { gap: 2rem; }
  .mention-activities h2, .mention-events h2 { font-size: 1.5rem; }
  .mini-events { margin-top: 1.1rem; gap: 0.7rem; }
}

/* =============================================================
   38. Ajustes del 16/09 (tarde)
   ============================================================= */

/* "Desliza": línea que crece y una pequeña flecha que respira debajo */
.hero-scroll::before {
  content: "";
  order: 3;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.35rem;
  animation: scrollFlecha 2.6s var(--ease-soft) infinite;
}
@keyframes scrollFlecha {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.55; }
  50% { transform: translateY(4px) rotate(45deg); opacity: 1; }
}
html.a11y-quieto .hero-scroll::before, html.a11y-quieto .hero-scroll::after { animation: none; }

/* Calendario: un mes cada vez. En escritorio ocupa todo el ancho del
   contenedor y las celdas son rectangulares (más anchas que altas), así
   el recuadro es un rectángulo apaisado y no un cuadrado en medio. */
.calendar-block-title { display: none; }   /* el mes ya está en la cabecera */
@media (min-width: 960px) {
  .calendar { max-width: none; }
  .calendar-grid { gap: 4px; }
  .calendar-day { aspect-ratio: 2.6 / 1; max-height: 64px; font-size: 0.9rem; border-radius: 10px; }
  .calendar-dow { padding-bottom: 0.7rem; }
}