@charset "UTF-8";
/* ==========================================================================
   PHYSIO IRENE RODRÍGUEZ — Hoja de estilos compartida
   Centro de Terapia Avanzada PHYSIO — Carboneras, Almería
   Estética: naturalista editorial, cálida, azul mar + verde salvia sutil
   ========================================================================== */

/* Transiciones de página nativas entre documentos (Parte 18): declarativa y
   sin JS — document.startViewTransition() no sirve aquí porque su callback
   debe actualizar el DOM in-place, no navegar a otro documento. Chrome
   126+ la aplica automáticamente; el resto de navegadores la ignora y
   navega con normalidad, sin romper nada. */
@view-transition {
  navigation: auto;
}

/* ---------- Fuentes locales (autoalojadas, sin Google Fonts) ----------
   Mismos archivos WOFF2 variables (subconjunto latin) que servía Google
   Fonts: un archivo por familia/estilo cubre todos los pesos declarados. */
@font-face{
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-variable-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;
}
@font-face{
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-variable-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;
}
@font-face{
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-variable-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;
}
@font-face{
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-italic-variable-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;
}
@font-face{
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-italic-variable-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;
}
@font-face{
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/work-sans-variable-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;
}
@font-face{
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/work-sans-variable-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;
}
@font-face{
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/work-sans-variable-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;
}
@font-face{
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/work-sans-variable-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;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img{ height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Variables ---------- */
:root{
  --color-primary: #3D5A66;
  --color-primary-dark: #2A3E47;
  --color-accent: #8A9A7B;
  --color-accent-dark: #6E7F62;
  --color-bg: #FAF7F1;
  --color-bg-alt: #F1F4EE;
  --color-bg-tint: #E7ECEE;
  --color-text: #26312D;
  --color-text-soft: rgba(38,49,45,.68);
  --color-text-strong: rgba(38,49,45,.86);
  --color-white: #ffffff;
  --color-line: rgba(61,90,102,.16);
  --color-footer: #1E2B27;

  --font-heading: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-soft: 0 10px 30px rgba(38,49,45,.08);
  --shadow-strong: 0 20px 44px rgba(38,49,45,.18);
  --transition: .3s ease;
  --section-py: clamp(4rem, 8vw, 7.5rem);
  --container-w: 1240px;
}

/* ---------- Base ---------- */
body{
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, h4{
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.14;
  color: var(--color-text);
}
p { color: var(--color-text-soft); }

/* ---------- Foco visible (solo navegación por teclado) ---------- */
:focus-visible{ outline: 2px solid var(--color-primary-dark); outline-offset: 3px; }
.site-footer :focus-visible, .section.bg-primary :focus-visible{ outline-color: var(--color-white); }
.faq-q:focus-visible{ outline-offset: -3px; }

.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-track{ background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb{ background: var(--color-primary); border-radius: 10px; }
html{ scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-bg-alt); }

/* ---------- Utilidades tipográficas de sección ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  font-weight: 600;
  margin-bottom: 1rem;
}
.eyebrow::before{
  content: '';
  width: 22px; height: 1px;
  background: var(--color-accent-dark);
}
.section-head{ max-width: 700px; margin-bottom: 3rem; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.section-title{
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  margin-bottom: .9rem;
  letter-spacing: -.01em;
  font-weight: 500;
}
.section-title em{ font-style: italic; color: var(--color-primary); }
.section-sub{ font-size: 1.04rem; color: var(--color-text-soft); max-width: 56ch; }
.section-head.center .section-sub{ margin: 0 auto; }

.section{ padding: var(--section-py) 0; }
.section.bg-alt{ background: var(--color-bg-alt); }
.section.bg-tint{ background: var(--color-bg-tint); }
.section.bg-tint .about-text p{ color: var(--color-text-strong); }
.section.bg-tint .about-text .service-link{ color: var(--color-primary-dark); }
.section.bg-primary{
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
}
.section.bg-primary p{ color: rgba(255,255,255,.85); }
.section.bg-primary .section-title{ color: var(--color-white); }
.section.bg-dark{ background: var(--color-footer); color: rgba(255,255,255,.9); }
.section.bg-dark p{ color: rgba(255,255,255,.62); }
.section.bg-dark .section-title{ color: var(--color-white); }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: 0 2.1rem;
  font-size: .88rem;
  letter-spacing: .04em;
  font-weight: 600;
  border-radius: 999px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary{ background: var(--color-primary); color: var(--color-white); }
.btn-primary:hover{ background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-strong); }
.btn-ghost{ background: transparent; border-color: rgba(255,255,255,.7); color: var(--color-white); }
.btn-ghost:hover{ background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-outline{ background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover{ background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-accent{ background: var(--color-accent); color: var(--color-white); }
.btn-accent:hover{ background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-strong); }
.btn-sm{ min-height: 42px; padding: 0 1.4rem; font-size: .8rem; }
.btn-block{ width: 100%; }

/* ==========================================================================
   HEADER / NAVEGACIÓN
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(250,247,241,.98);
  transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}
.site-header.scrolled{
  background: rgba(250,247,241,.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
}
.nav-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 1.5rem;
}
.logo-link{ display: flex; align-items: center; flex-shrink: 0; }
.logo-img{ height: 60px; width: auto; }
@media (min-width: 960px){ .logo-img{ height: 68px; } }

.main-nav > ul{ display: flex; align-items: center; gap: 2.1rem; }
.nav-link{
  position: relative;
  font-size: .93rem;
  letter-spacing: .01em;
  font-weight: 500;
  padding: .4rem 0;
  color: var(--color-text);
  transition: color var(--transition);
}
.nav-link::after{
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--color-accent-dark);
  transition: width var(--transition);
}
.nav-link:hover{ color: var(--color-primary); }
.nav-link:hover::after{ width: 100%; }
.nav-link.active{ color: var(--color-primary); }
.nav-link.active::after{ width: 100%; }

.nav-cta{ flex-shrink: 0; }

.has-dropdown{ position: relative; }
.dropdown-arrow{ font-size: .6rem; margin-left: .3rem; transition: transform var(--transition); display: inline-block; }

.dropdown{
  display: none;
  background: var(--color-bg-alt);
  border-radius: 8px;
  margin: 0 0 .5rem;
  padding: 0 0 0 1rem;
}
.has-dropdown.dd-open .dropdown{ display: block; }
.has-dropdown.dd-open .dropdown-arrow{ transform: rotate(180deg); }
.dropdown li a{
  display: block;
  padding: .75rem .6rem;
  border-radius: 6px;
  font-size: .92rem;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition);
}
.dropdown li a:hover{ background: var(--color-white); color: var(--color-primary); }
.dropdown-viewall{ font-weight: 600; color: var(--color-primary) !important; }

.menu-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  flex-shrink: 0;
}
.menu-toggle span{ display: block; width: 24px; height: 2px; background: var(--color-text); transition: transform var(--transition), opacity var(--transition); }
.menu-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity: 0; }
.menu-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  color: var(--color-white);
  overflow: hidden;
}
.hero-secondary{ min-height: 50vh; align-items: center; }
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.hero-media.hero-media-gradient{ background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-footer) 100%); }
.hero-media-gradient .hero-horizon{ position: absolute; left: 0; right: 0; bottom: 18%; height: 40%; opacity: .5; }
.hero-media::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,43,39,.32) 0%, rgba(30,43,39,.5) 55%, rgba(30,43,39,.86) 100%);
}
.hero-secondary .hero-media::after{ background: linear-gradient(120deg, rgba(30,43,39,.78), rgba(61,90,102,.62)); }

.hero-content{ position: relative; z-index: 1; padding: 5rem 0 4.5rem; width: 100%; }
.hero-secondary .hero-content{ padding: 3rem 0; text-align: center; }
.hero-secondary .hero-content .container{ display: flex; flex-direction: column; align-items: center; }

.hero-panel{ display: block; max-width: 660px; }
.hero-secondary .hero-panel{ max-width: 580px; margin: 0 auto; }

.hero-kicker{ font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: #cdd9c9; margin-bottom: 1.2rem; }
.hero-title{
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.6rem, 6.4vw, 4.8rem);
  max-width: 17ch;
  margin-bottom: 1.7rem;
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero-secondary .hero-title{ max-width: 20ch; font-size: clamp(2.3rem, 5vw, 3.5rem); }
.hero-text{ font-size: 1.1rem; color: #e4e8e1; max-width: 46ch; margin-bottom: 2.3rem; }
.hero-secondary .hero-text{ margin: 0 auto; }
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.hero-secondary .hero-actions{ justify-content: center; }
.hero-actions .btn{ min-height: 48px; padding: 0 1.7rem; font-size: .84rem; }

.hero-sentinel{ position: absolute; top: 50%; left: 0; width: 1px; height: 1px; }

.hero-scroll-cue{ position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 1; width: 1px; height: 48px; background: rgba(255,255,255,.4); }
.hero-scroll-cue::after{ content: ''; position: absolute; top: 0; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: scrollCue 2.2s ease-in-out infinite; }
@keyframes scrollCue{ 0%{ top: 0; opacity: 1; } 100%{ top: 44px; opacity: 0; } }

/* ==========================================================================
   HERO — VARIANTE CLARA (fondo casi blanco/pastel, texto oscuro)
   Usada en el hero partido de inicio y en los héroes secundarios que
   llevan de fondo una textura clara (blog, contacto) en vez de una foto.
   ========================================================================== */
.hero-light .hero-media::after{ background: rgba(255,255,255,.2); }
.hero-light .hero-kicker{ color: var(--color-accent-dark); }
.hero-light .hero-title{ color: var(--color-text); text-shadow: none; }
.hero-light .hero-text{ color: var(--color-text-soft); }
.hero-light .service-hero-tags span{ color: var(--color-text); border-color: rgba(38,49,45,.28); }

/* ---------- Hero partido (solo inicio): logo a un lado, texto al otro ---------- */
.hero-split{
  position: relative;
  min-height: 0;
  display: block;
  overflow: visible;
  background: var(--color-bg);
  color: var(--color-text);
}
/* Solo padding vertical: el margen lateral lo pone .container */
.hero-split-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  text-align: left;
  padding-top: clamp(2.75rem, 8vw, 5rem);
  padding-bottom: clamp(2.75rem, 7vw, 4rem);
}
/* En móvil y tablet el logo ya está en el header: el hero abre con el mensaje */
.hero-split-media{ display: none; }
.hero-split-media img{ width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.hero-split-text{ max-width: 640px; }
.hero-split-text .hero-kicker{ color: var(--color-accent-dark); letter-spacing: .18em; line-height: 1.6; }
.hero-split-text .hero-title{ color: var(--color-text); text-shadow: none; margin-bottom: 1.2rem; font-size: clamp(2.6rem, 1.6rem + 5.2vw, 4.2rem); }
.hero-split-text .hero-text{ color: var(--color-text-soft); margin: 0 0 1.8rem; }
.hero-split-text .hero-actions{ justify-content: flex-start; }
@media (min-width: 960px){
  .hero-split-inner{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(4rem, 7vw, 6rem);
  }
  .hero-split-text{ order: 1; flex: 0 1 58%; }
  .hero-split-text .hero-title{ font-size: clamp(3.6rem, 5.4vw, 4.8rem); }
  /* Logo recortado del banner para mostrarlo a escala editorial */
  .hero-split-media{ display: block; order: 2; flex: 0 0 36%; max-width: 420px; aspect-ratio: 6/5; }
}

/* ==========================================================================
   QUIÉNES SOMOS (home)
   ========================================================================== */
.about-grid{ display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.about-text .section-head{ margin-bottom: 1.6rem; }
.about-text p + p{ margin-top: 1rem; }
.about-signature{
  margin-top: 2rem; padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--color-primary-dark);
}
.about-media{ display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 380px; margin: 0 auto; }
.team-card{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; background: var(--color-bg-alt); }
.team-card img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.team-caption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1rem .9rem; background: linear-gradient(0deg, rgba(30,43,39,.78), transparent); color: var(--color-white); }
.team-caption .role{ display: block; font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; line-height: 1.1; }
.team-caption .name{ display: block; font-size: .76rem; letter-spacing: .04em; color: rgba(255,255,255,.78); margin-top: .2rem; }

/* ==========================================================================
   MARQUESINA (scroll infinito)
   ========================================================================== */
.marquee{
  overflow: hidden;
  background: var(--color-primary);
  padding: 1.2rem 0;
  white-space: nowrap;
}
.marquee-track{
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}
.marquee-track span{
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(255,255,255,.92);
  letter-spacing: .01em;
}
.marquee-track span.dot{ color: var(--color-accent); font-style: normal; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; overflow-x: auto; } }

/* ==========================================================================
   SERVICIOS (tarjetas con vídeo/imagen)
   ========================================================================== */
.services-grid{ display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.service-card{
  display: block;
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: translate var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.service-card:hover{ box-shadow: var(--shadow-strong); border-color: transparent; }
.service-media{ position: relative; aspect-ratio: 4/3; background: var(--color-bg-alt); overflow: hidden; }
.service-media video, .service-media img{ width: 100%; height: 100%; object-fit: cover; }
.service-media img.kenburns{ animation: kenBurns 14s ease-in-out infinite alternate; }
@keyframes kenBurns{ from{ transform: scale(1); } to{ transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce){ .service-media img.kenburns{ animation: none; } }
.service-num{
  position: absolute; top: .9rem; left: .9rem;
  font-family: var(--font-heading); font-style: italic; font-size: 1rem;
  color: var(--color-white);
  background: rgba(38,49,45,.42);
  backdrop-filter: blur(4px);
  padding: .3rem .7rem;
  border-radius: 999px;
}
.service-body{ padding: 1.6rem 1.5rem 1.8rem; }
.service-card h3{ font-size: 1.5rem; margin-bottom: .5rem; font-weight: 500; }
.service-keywords{ font-size: .8rem; letter-spacing: .03em; color: var(--color-accent-dark); font-weight: 600; margin-bottom: .9rem; }
.service-card p{ margin-bottom: 1.2rem; font-size: .95rem; }
.service-link{
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-primary); display: inline-flex; align-items: center; gap: .4rem;
  transition: gap var(--transition);
}
.service-link:hover{ gap: .7rem; }
.service-card:hover .service-link{ gap: .7rem; }
.services-more{ text-align: center; margin-top: 3rem; }

/* ==========================================================================
   DIFERENCIALES
   ========================================================================== */
.diff-grid{ display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.diff-card{ padding: 2.1rem 1.8rem; border-radius: var(--radius); background: var(--color-white); border-left: 3px solid var(--color-accent); }
.diff-card:nth-child(even){ background: var(--color-bg-alt); border-left-color: var(--color-primary); }
.diff-num{ font-family: var(--font-heading); font-style: italic; font-size: 2rem; color: var(--color-primary); margin-bottom: .9rem; line-height: 1; display: block; }
.diff-card h3{ font-size: 1.18rem; margin-bottom: .55rem; font-weight: 500; }
.diff-card p{ font-size: .95rem; }

/* ==========================================================================
   BLOQUE EDITORIAL — notificación de blog
   ========================================================================== */
.blog-teaser{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
  max-width: 620px;
  margin: 3.5rem auto 0;
}
.blog-teaser-thumb{ width: 84px; height: 84px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--color-bg-alt); }
.blog-teaser-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.blog-teaser-body{ flex-grow: 1; }
.blog-teaser-eyebrow{ font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 700; margin-bottom: .3rem; }
.blog-teaser-title{ font-size: 1.02rem; font-weight: 600; margin-bottom: .3rem; color: var(--color-text); font-family: var(--font-body); }
.blog-teaser-link{ font-size: .84rem; color: var(--color-primary); font-weight: 600; }
.blog-teaser-arrow{ font-size: 1.4rem; color: var(--color-accent); flex-shrink: 0; }

.js .reveal.pop-side{ opacity: 0; transform: translateX(46px) rotate(1.5deg) scale(.94); transition: opacity .6s cubic-bezier(.2,.9,.3,1.4), transform .6s cubic-bezier(.2,.9,.3,1.4); }
.js .reveal.pop-side.is-visible{ opacity: 1; transform: none; }

/* ==========================================================================
   RESEÑAS
   ========================================================================== */
.reviews-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.6rem; }
.reviews-score{ display: flex; align-items: center; gap: 1rem; }
.reviews-score .stars{ color: var(--color-primary); font-size: 1.3rem; letter-spacing: .12em; }
.reviews-score .score-num{ font-family: var(--font-heading); font-size: 2.8rem; line-height: 1; }
.reviews-score .score-label{ font-size: .8rem; color: var(--color-text-soft); }

.reviews-track-wrap{ position: relative; }
.reviews-track{ display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; }
.reviews-track::-webkit-scrollbar{ display: none; }
.review-card{ scroll-snap-align: start; flex: 0 0 min(340px, 84vw); background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 2rem 1.7rem; display: flex; flex-direction: column; }
.review-card .stars{ color: var(--color-primary); margin-bottom: 1rem; font-size: 1.05rem; letter-spacing: .14em; }
.review-card p{ font-size: .95rem; flex-grow: 1; }
.review-author{ margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--color-line); font-size: .88rem; font-weight: 600; color: var(--color-text); }
.reviews-nav{ display: flex; gap: .8rem; justify-content: center; margin-top: 2rem; }
.reviews-nav button{ width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line); display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition), transform var(--transition); }
.reviews-nav button:hover{ background: var(--color-primary); color: var(--color-white); transform: translateY(-2px); }

/* ==========================================================================
   FAQ HUMANIZADA
   ========================================================================== */
.faq-list{ max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .9rem; }
.faq-item{ background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; }
.faq-q{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 1.3rem 1.5rem; font-weight: 600; font-size: .98rem; }
.faq-q .who{ color: var(--color-primary); font-weight: 700; }
.faq-q .plus{ font-size: 1.3rem; color: var(--color-accent-dark); flex-shrink: 0; transition: transform var(--transition); }
.faq-item.open .faq-q .plus{ transform: rotate(45deg); }
.faq-a{ max-height: 0; overflow: hidden; transition: max-height .35s ease, padding var(--transition); padding: 0 1.5rem; }
.faq-item.open .faq-a{ max-height: 320px; padding: 0 1.5rem 1.4rem; }
.faq-a p{ font-size: .94rem; }

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
.cta-final{ text-align: center; }
.cta-final .section-title{ margin-bottom: 1.2rem; }
.cta-final p{ max-width: 50ch; margin: 0 auto 2.2rem; }

/* ==========================================================================
   PÁGINAS DE SERVICIO
   ========================================================================== */
.service-hero-tags{ display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.service-hero-tags span{ font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-white); border: 1px solid rgba(255,255,255,.4); border-radius: 999px; padding: .4rem .9rem; }

.detail-block{ padding: 2.4rem 0; border-bottom: 1px solid var(--color-line); }
.detail-block:last-of-type{ border-bottom: none; }
.detail-block h2{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: .3rem 0 1rem; font-weight: 500; }
.detail-block p + p{ margin-top: .9rem; }

.detail-grid{ display: grid; grid-template-columns: 1fr; gap: 2.6rem; align-items: center; }
.detail-grid img{ border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.checklist{ display: flex; flex-direction: column; gap: .7rem; margin-top: 1.2rem; }
.checklist li{ display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: var(--color-text); list-style: none; }

.service-cta{ background: var(--color-bg-alt); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; margin-top: 2rem; }

.info-gap{
  border: 1px dashed rgba(61,90,102,.4);
  background: rgba(61,90,102,.05);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: .84rem;
  color: var(--color-primary-dark);
  margin-top: 1rem;
}

/* ---------- Sub-áreas de Suelo Pélvico ---------- */
.subarea-grid{ display: grid; grid-template-columns: 1fr; gap: 1rem; }
.subarea-card{ background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.6rem 1.5rem; scroll-margin-top: 100px; }
.subarea-card h3{ font-size: 1.12rem; font-weight: 600; margin-bottom: .5rem; color: var(--color-primary-dark); }
.subarea-card p{ font-size: .92rem; }
.subarea-nav{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
.subarea-nav a{ font-size: .8rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-white); color: var(--color-text); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.subarea-nav a:hover{ background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* ==========================================================================
   FRASE DE MARCA (bloque cita)
   ========================================================================== */
.quote-block{ text-align: center; max-width: 780px; margin: 0 auto; }
.quote-block p{ font-family: var(--font-heading); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--color-text); line-height: 1.3; }
.quote-block cite{ display: block; margin-top: 1.2rem; font-style: normal; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-dark); }

/* ==========================================================================
   FORMACIÓN / CREDENCIALES
   ========================================================================== */
.credentials-grid{ display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-top: 2rem; }
.credential-card{ display: flex; gap: 1.1rem; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.4rem; }
.credential-thumb{ width: 74px; height: 74px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--color-bg-alt); }
.credential-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.credential-body h3{ font-size: .98rem; font-weight: 600; margin-bottom: .25rem; }
.credential-body p{ font-size: .84rem; }

/* ==========================================================================
   GALERÍA
   ========================================================================== */
.gallery-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.gallery-item{ position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; background: var(--color-bg-alt); }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item.wide{ grid-column: span 2; }
.gallery-item.tall{ grid-row: span 2; }
.gallery-item.placeholder{ display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(38,49,45,.25); text-align: center; padding: 1rem; }
.gallery-item.placeholder span{ font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-soft); }
.gallery-caption{ position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem; font-size: .74rem; letter-spacing: .04em; color: var(--color-white); background: linear-gradient(0deg, rgba(30,43,39,.6), transparent); }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-grid{ display: grid; grid-template-columns: 1fr; gap: 3rem; }
.contact-form{ background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 2.4rem; }
.form-row{ margin-bottom: 1.3rem; }
.form-row label{ display: block; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-soft); margin-bottom: .5rem; }
.form-row input, .form-row select, .form-row textarea{
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  background: var(--color-bg); font-size: 1rem; min-height: 48px; transition: border-color var(--transition);
}
.form-row textarea{ min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.form-check{ display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.3rem; }
.form-check input{ width: 18px; height: 18px; min-height: unset; margin-top: .2rem; accent-color: var(--color-primary); }
.form-check label{ font-size: .86rem; color: var(--color-text-soft); text-transform: none; letter-spacing: 0; }
.form-note{ margin-top: 1rem; font-size: .84rem; color: var(--color-text-soft); display: none; }
.form-note.show{ display: block; }

.contact-info{ display: flex; flex-direction: column; gap: 1.6rem; }
.info-card{ background: var(--color-bg-alt); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.info-card h3{ font-size: 1.02rem; font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .7rem; color: var(--color-primary-dark); }
.info-card a, .info-card p{ font-size: .96rem; }
.info-card a{ color: var(--color-text); transition: color var(--transition); }
.info-card a:hover{ color: var(--color-primary); }
.hours-row{ display: grid; grid-template-columns: 130px 1fr; column-gap: .6rem; font-size: .92rem; padding: .35rem 0; color: var(--color-text-soft); }
.hours-row span:last-child{ color: var(--color-text); text-align: left; }

.map-embed{ position: relative; margin-top: 3.5rem; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/6; background: var(--color-bg-alt); box-shadow: var(--shadow-soft); }
.map-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 959.98px){ .map-embed{ aspect-ratio: auto; height: 300px; } }

/* Placeholder del mapa: se muestra hasta que el usuario pulsa "Mostrar mapa" */
.map-placeholder{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.5rem; text-align: center;
  background-color: var(--color-bg-alt);
  background-image:
    linear-gradient(var(--color-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.map-placeholder-pin{ width: 34px; height: 34px; color: var(--color-primary); }
.map-placeholder-address{ font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.4; color: var(--color-text); }
.map-placeholder-note{ font-size: .78rem; color: var(--color-text-soft); }
.map-placeholder .btn:focus-visible{ outline: 2px solid var(--color-primary-dark); outline-offset: 3px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--color-footer); color: rgba(255,255,255,.82); padding: 4.5rem 0 0; }
.footer-grid{ display: grid; grid-template-columns: 1fr; gap: 2.6rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .logo-link{ display: inline-flex; background: rgba(255,255,255,.94); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1.1rem; }
.footer-brand .logo-img{ height: 42px; margin-bottom: 0; }
.footer-brand p{ color: rgba(255,255,255,.6); font-size: .92rem; max-width: 32ch; }
.footer-quote{ margin-top: 1.4rem; font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: rgba(255,255,255,.68); border-left: 2px solid var(--color-accent); padding-left: 1rem; }
.footer-col h4{ font-family: var(--font-body); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-white); margin-bottom: 1.2rem; font-weight: 600; }
.footer-col ul{ display: flex; flex-direction: column; gap: .7rem; }
.footer-col a{ font-size: .92rem; color: rgba(255,255,255,.65); transition: color var(--transition); }
.footer-col a:hover{ color: var(--color-white); }
.footer-social{ display: flex; gap: .8rem; margin-top: 1.3rem; }
.footer-social a{ width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition); }
.footer-social a:hover{ background: var(--color-accent); border-color: var(--color-accent); }
.footer-bottom{ display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; padding: 1.6rem 0; font-size: .8rem; color: rgba(255,255,255,.5); }
.footer-bottom a{ color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-bottom a:hover{ color: var(--color-white); }

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.whatsapp-float{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 600;
  display: flex; align-items: center; gap: .6rem;
  background: var(--color-primary); color: var(--color-white);
  padding: 0 1.1rem; height: 54px; border-radius: 999px;
  box-shadow: var(--shadow-strong);
  transition: transform var(--transition), background var(--transition);
}
.whatsapp-float:hover{ background: var(--color-primary-dark); transform: translateY(-3px); }
.whatsapp-float svg{ width: 24px; height: 24px; flex-shrink: 0; }
.wa-text{ font-size: .86rem; letter-spacing: .02em; }

/* ==========================================================================
   MODAL — TEST DE ORIENTACIÓN DE SUELO PÉLVICO
   ========================================================================== */
.pf-modal-backdrop{
  position: fixed; inset: 0; z-index: 900;
  background: rgba(30,43,39,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.pf-modal-backdrop.open{ opacity: 1; visibility: visible; }
.pf-modal{
  background: var(--color-white);
  border-radius: var(--radius);
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-strong);
  transform: translateY(18px) scale(.97);
  transition: transform var(--transition);
}
.pf-modal-backdrop.open .pf-modal{ transform: none; }
.pf-modal-media{ aspect-ratio: 16/9; background: linear-gradient(135deg, var(--color-primary), var(--color-accent-dark)); position: relative; }
.pf-modal-media img{ width: 100%; height: 100%; object-fit: cover; }
.pf-modal-close{
  position: absolute; top: .8rem; right: .8rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; z-index: 2;
}
.pf-modal-body{ padding: 1.8rem 1.9rem 2.1rem; text-align: center; }
.pf-modal-body h3{ font-size: 1.5rem; font-weight: 500; margin-bottom: .7rem; }
.pf-modal-body p{ font-size: .95rem; margin-bottom: 1.5rem; }
.pf-modal-actions{ display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.pf-modal-skip{ font-size: .82rem; color: var(--color-text-soft); text-decoration: underline; }

/* ==========================================================================
   PÁGINA TEST — ASISTENTE POR PASOS
   ========================================================================== */
.quiz-wrap{ max-width: 680px; margin: 0 auto; }
.quiz-progress{ height: 6px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; margin-bottom: 2.6rem; }
.quiz-progress-bar{ height: 100%; background: var(--color-primary); width: 0%; transition: width .4s ease; border-radius: 999px; }
.quiz-step{ display: none; }
.quiz-step.active{ display: block; }
.quiz-step-label{ font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 700; margin-bottom: .8rem; }
.quiz-step h2{ font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1.8rem; font-weight: 500; }
.quiz-options{ display: flex; flex-direction: column; gap: .8rem; margin-bottom: 2.4rem; }
.quiz-option{
  display: flex; align-items: center; gap: .9rem;
  border: 1px solid var(--color-line); border-radius: var(--radius);
  padding: 1rem 1.2rem; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.quiz-option:hover{ border-color: var(--color-primary); }
.quiz-option input{ width: 20px; height: 20px; accent-color: var(--color-primary); flex-shrink: 0; }
.quiz-option span{ font-size: .96rem; }
.quiz-option.checked{ background: var(--color-bg-alt); border-color: var(--color-primary); }
.quiz-other-input{ width: 100%; margin-top: .6rem; padding: .8rem 1rem; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-bg); display: none; }
.quiz-other-input.show{ display: block; }
.quiz-nav{ display: flex; justify-content: space-between; gap: 1rem; }
.quiz-intro-box{ background: var(--color-bg-alt); border-radius: var(--radius); padding: 1.4rem 1.5rem; font-size: .92rem; color: var(--color-text); margin-bottom: 2.2rem; }
.quiz-final{ text-align: center; padding: 2rem 0; }
.quiz-final .checkmark{ width: 68px; height: 68px; border-radius: 50%; background: var(--color-accent); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.6rem; }
.quiz-final h2{ font-size: 1.7rem; margin-bottom: .9rem; font-weight: 500; }
.quiz-final p{ font-size: .96rem; max-width: 46ch; margin: 0 auto 1.6rem; }
.quiz-final-actions{ display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.quiz-email-pending{ font-size: .78rem; color: var(--color-text-soft); margin-top: 1.6rem; }

/* ==========================================================================
   BLOG — LISTADO
   ========================================================================== */
.blog-filters{ display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 3rem; }
.blog-filter{ font-size: .82rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-white); color: var(--color-text); transition: background var(--transition), color var(--transition), border-color var(--transition); }
.blog-filter.active, .blog-filter:hover{ background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }
.blog-grid{ display: grid; grid-template-columns: 1fr; gap: 2rem; }
.blog-card{ display: block; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); overflow: hidden; transition: translate var(--transition), box-shadow var(--transition); }
.blog-card:hover{ box-shadow: var(--shadow-strong); }
@media (hover: hover){ .service-card:hover, .blog-card:hover{ translate: 0 -6px; } }
.blog-card-media{ aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg-alt); position: relative; }
.blog-card-media img{ width: 100%; height: 100%; object-fit: cover; }
.blog-card-cat{ position: absolute; top: .9rem; left: .9rem; background: var(--color-accent); color: var(--color-white); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; padding: .35rem .8rem; border-radius: 999px; }
.blog-card-body{ padding: 1.5rem 1.4rem 1.7rem; }
.blog-card-meta{ font-size: .78rem; color: var(--color-text-soft); margin-bottom: .6rem; }
.blog-card h3{ font-size: 1.2rem; font-weight: 500; margin-bottom: .6rem; line-height: 1.3; }
.blog-card p{ font-size: .9rem; }

/* ==========================================================================
   BLOG — ARTÍCULO
   ========================================================================== */
.post-header{ max-width: 760px; margin: 0 auto; text-align: center; }
.post-cat{ display: inline-block; background: var(--color-accent); color: var(--color-white); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.2rem; }
.post-meta{ font-size: .84rem; color: var(--color-text-soft); margin-top: 1rem; }
.post-cover{ margin: 2.6rem 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; background: var(--color-bg-alt); }
.post-cover img{ width: 100%; height: 100%; object-fit: cover; }
.post-body{ max-width: 700px; margin: 0 auto; }
.post-body h2{ font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 2.2rem 0 1rem; font-weight: 500; position: relative; }
.post-body h3{ font-size: 1.15rem; margin: 1.6rem 0 .7rem; font-weight: 600; }
.post-body p{ font-size: 1rem; margin-bottom: 1.1rem; }
.post-body ul{ display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0 1.4rem; }
.post-body ul li{ display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; color: var(--color-text); }
.post-leaf{ position: relative; }
.post-leaf::before{
  content: '';
  position: absolute; top: -1.5rem; right: -2rem;
  width: 70px; height: 70px;
  background: radial-gradient(circle at 30% 30%, rgba(138,154,123,.18), transparent 70%);
  pointer-events: none;
}
.post-source{ font-size: .78rem; color: var(--color-text-soft); font-style: italic; }
.post-cta{ background: var(--color-bg-alt); border-radius: var(--radius); padding: 2.4rem 2rem; text-align: center; margin-top: 3rem; }
.post-cta h3{ font-size: 1.3rem; margin-bottom: .8rem; font-weight: 500; }
.post-cta-actions{ display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.post-back{ display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--color-primary); font-weight: 600; margin-bottom: 2rem; }

/* ==========================================================================
   ANIMACIONES DE SCROLL
   ========================================================================== */
/* Solo se oculta el contenido cuando hay JavaScript (clase "js" en <html>,
   añadida en el <head>). Sin JS todo queda visible desde el principio. */
.js .reveal{ opacity: 0; transition: opacity .7s ease, transform .7s ease; will-change: transform, opacity; }
.js .reveal.fade-up{ transform: translateY(36px); }
.js .reveal.fade-left{ transform: translateX(-40px); }
.js .reveal.fade-right{ transform: translateX(40px); }
.js .reveal.zoom-in{ transform: scale(.94); }
.js .reveal.is-visible{ opacity: 1; transform: none; }
.js .reveal.reveal-done{ transition: opacity var(--transition), transform var(--transition), translate var(--transition), box-shadow var(--transition), border-color var(--transition); transition-delay: 0s; will-change: auto; }
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
.reveal-delay-4{ transition-delay: .32s; }
.reveal-delay-5{ transition-delay: .4s; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js .reveal, .js .reveal.fade-up, .js .reveal.fade-left, .js .reveal.fade-right,
  .js .reveal.zoom-in, .js .reveal.pop-side{ opacity: 1; transform: none; transition: none; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   PÁGINA AVISO LEGAL
   ========================================================================== */
.legal-content{ max-width: 780px; }
.legal-content h2{ font-size: 1.4rem; margin: 2rem 0 .8rem; font-weight: 500; }
.legal-content p{ margin-bottom: 1rem; font-size: .95rem; }

/* ==========================================================================
   RESPONSIVE — TABLET (≥640px)
   ========================================================================== */
@media (min-width: 640px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .diff-grid{ grid-template-columns: repeat(2, 1fr); }
  .diff-grid .diff-card:nth-child(5){ grid-column: 1 / -1; }
  .subarea-grid{ grid-template-columns: repeat(2, 1fr); }
  .credentials-grid{ grid-template-columns: repeat(2, 1fr); }
  .blog-grid{ grid-template-columns: repeat(2, 1fr); }
  .quiz-nav{ flex-wrap: nowrap; }
}

/* ==========================================================================
   RESPONSIVE — ESCRITORIO (≥960px)
   ========================================================================== */
@media (min-width: 960px){
  .menu-toggle{ display: none; }
  .main-nav{ display: block !important; }

  .has-dropdown:hover .dropdown-arrow{ transform: rotate(180deg); }
  .dropdown{
    display: block; position: absolute; top: calc(100% + .9rem); left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 250px; background: var(--color-white); border-radius: var(--radius);
    box-shadow: var(--shadow-strong); padding: .6rem; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .dropdown li a{ padding: .7rem .9rem; }
  .dropdown li a:hover{ background: var(--color-bg-alt); color: var(--color-primary); padding-left: 1.15rem; }
  .dropdown-viewall{ border-top: 1px solid var(--color-line); margin-top: .3rem; padding-top: .6rem !important; }

  .about-grid{ grid-template-columns: 1fr .85fr; }
  .about-media{ order: 2; max-width: none; margin: 0; }
  .about-text{ order: 1; }

  .services-grid{ grid-template-columns: repeat(3, 1fr); }
  .services-grid .service-card:nth-child(4), .services-grid .service-card:nth-child(5){ grid-column: span 1; }
  .diff-grid{ grid-template-columns: repeat(6, 1fr); }
  .diff-grid .diff-card:nth-child(-n+3){ grid-column: span 2; }
  .diff-grid .diff-card:nth-child(n+4){ grid-column: span 3; }

  .detail-grid{ grid-template-columns: 1fr 1fr; }
  .detail-grid.reverse .detail-media{ order: 2; }
  .detail-grid.reverse .detail-text{ order: 1; }

  .contact-grid{ grid-template-columns: 1.3fr .9fr; }
  .footer-grid{ grid-template-columns: 1.4fr .8fr .8fr 1fr; }
  .gallery-grid{ grid-template-columns: repeat(4, 1fr); }
  .subarea-grid{ grid-template-columns: repeat(3, 1fr); }
  .blog-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   RESPONSIVE — MÓVIL (<960px) — navegación
   ========================================================================== */
@media (max-width: 959.98px){
  .menu-toggle{ display: flex; }
  .main-nav{
    position: fixed; top: var(--header-h, 74px); left: .8rem; right: .8rem;
    background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-strong);
    max-height: calc(100vh - var(--header-h, 74px) - 1.6rem); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 400;
  }
  .main-nav.open{ opacity: 1; visibility: visible; transform: translateY(0); }
  .main-nav > ul{ flex-direction: column; align-items: stretch; gap: 0; padding: .6rem; }
  .main-nav > ul > li{ border-bottom: 1px solid var(--color-bg-alt); }
  .main-nav > ul > li:last-child{ border-bottom: none; }
  .nav-link{ display: block; padding: .95rem .6rem; font-size: 1rem; }
  .nav-link::after{ display: none; }
  .has-dropdown{ display: flex; flex-direction: column; }
  .dropdown-toggle{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .95rem .6rem; }
  .nav-cta{ display: none; }
}

/* ==========================================================================
   RESPONSIVE — reajustes generales móvil pequeño
   ========================================================================== */
@media (max-width: 640px){
  .hero-text{ font-size: 1rem; line-height: 1.5; margin-bottom: 1.8rem; }
  .hero-kicker{ font-size: .7rem; margin-bottom: .9rem; }
  .hero-actions .btn{ min-height: 44px; padding: 0 1.3rem; font-size: .78rem; }
  .marquee-track span{ font-size: 1.05rem; }
  .blog-teaser{ flex-direction: column; text-align: center; }
}
@media (max-width: 480px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-secondary .hero-actions{ align-items: center; }
  .whatsapp-float .wa-text{ display: none; }
  .whatsapp-float{ width: 54px; padding: 0; justify-content: center; }
  .reviews-head{ flex-direction: column; align-items: flex-start; }
  .quiz-nav{ flex-direction: column-reverse; }
  .quiz-nav .btn{ width: 100%; }
}

/* ==========================================================================
   HEADER — "Reservar cita" en móvil (menú) y tablet (junto a la hamburguesa)
   El <li class="nav-menu-cta"> lo añade main.js clonando .nav-cta.
   ========================================================================== */
.nav-menu-cta{ display: none; }
@media (max-width: 959.98px){
  .main-nav > ul > li.nav-menu-cta{ display: block; border-bottom: none; padding: .8rem .6rem .4rem; }
  .nav-menu-cta .btn{ width: 100%; }
}
@media (min-width: 640px) and (max-width: 959.98px){
  .nav-cta{ display: inline-flex; order: 2; margin-left: auto; min-height: 42px; padding: 0 1.3rem; font-size: .8rem; }
  .menu-toggle{ order: 3; }
  .main-nav > ul > li.nav-menu-cta{ display: none; }
}

/* ==========================================================================
   FOOTER — versión compacta en móvil y tablet (todas las páginas)
   Orden: marca → contacto → navegación | servicios
   ========================================================================== */
@media (max-width: 959.98px){
  .site-footer:has(.footer-grid){ padding-top: 3.2rem; }
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand brand" "contact contact" "nav services";
    gap: 2.2rem 1.5rem;
    padding-bottom: 2.2rem;
  }
  .footer-brand{ grid-area: brand; }
  .footer-grid > .footer-col:nth-child(2){ grid-area: nav; }
  .footer-grid > .footer-col:nth-child(3){ grid-area: services; }
  .footer-grid > .footer-col:nth-child(4){ grid-area: contact; }
  .footer-brand .logo-link{ margin-bottom: .9rem; }
  .footer-quote{ margin-top: 1rem; }
  .footer-col h4{ margin-bottom: .9rem; }
  .footer-col ul{ gap: .6rem; }
  /* Hueco para que el botón flotante de WhatsApp no tape la última línea */
  .footer-grid + .footer-bottom{ padding-bottom: calc(1.6rem + 76px); }
}
@media (min-width: 640px) and (max-width: 959.98px){
  .footer-grid{ grid-template-areas: "brand contact" "nav services"; }
}
@media (min-width: 960px){
  .footer-grid + .footer-bottom{ padding-right: 180px; }
}

/* ==========================================================================
   HOME — variantes propias de index.html (body.page-home)
   No afectan a las clases compartidas con las páginas internas.
   ========================================================================== */
.section-compact{ padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
.page-home .section-title{ font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem); }
.page-home .footer-quote{ display: none; } /* el lema ya cierra el CTA final */

/* ---------- Sobre Irene ---------- */
.home-about-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; grid-template-areas: "head" "photo" "body"; }
.home-about-head{ grid-area: head; margin-bottom: 0; }
.home-about-photo{
  grid-area: photo; position: relative; margin: 0; width: 100%; max-width: 460px;
  aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius); background: var(--color-white);
}
/* Reencuadre por CSS: Irene ocupa la parte inferior derecha de la foto original */
.home-about-photo img{ position: absolute; right: 0; bottom: 0; width: 140%; max-width: none; height: auto; }
.home-about-photo figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem .9rem;
  background: linear-gradient(0deg, rgba(30,43,39,.72), transparent);
  color: rgba(255,255,255,.9); font-size: .78rem; letter-spacing: .04em;
}
.home-about-body{ grid-area: body; }
.home-about-body > p{ color: var(--color-text-strong); }
.home-about-body > p + p{ margin-top: 1rem; }
.home-about-quote{ margin: 1.7rem 0; padding-left: 1.1rem; border-left: 2px solid var(--color-accent); }
.home-about-quote p{ font-family: var(--font-heading); font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem); line-height: 1.3; color: var(--color-primary-dark); }
.home-about-facts{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--color-line); list-style: none; }
.home-about-facts li{ display: flex; flex-direction: column; gap: .3rem; }
.home-about-facts strong{ font-family: var(--font-heading); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.15; color: var(--color-primary-dark); }
.home-about-facts span{ font-size: .75rem; line-height: 1.4; color: var(--color-text-soft); }
.home-about .service-link{ color: var(--color-primary-dark); }
@media (min-width: 960px){
  .home-about-grid{ grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 4.5rem; row-gap: 1.6rem; grid-template-areas: "head photo" "body photo"; align-items: start; }
  .home-about-photo{ max-width: none; aspect-ratio: 4/5; }
  .home-about-photo img{ width: 180%; }
}

/* ---------- Servicios: protagonista + segundo nivel + lista editorial ---------- */
.home-services .section-head{ margin-bottom: 2.4rem; }
.hs-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.hs-num{ display: block; font-family: var(--font-heading); font-style: italic; font-size: 1rem; line-height: 1; color: var(--color-accent-dark); margin-bottom: .6rem; }
.hs-keywords{ display: block; font-family: var(--font-heading); font-style: italic; font-weight: 400; font-size: 1rem; line-height: 1.4; color: var(--color-accent-dark); margin-bottom: .8rem; }
.hs-desc{ font-size: .95rem; margin-bottom: 1.1rem; }

.hs-feature{
  display: block; background: var(--color-white); border: 1px solid var(--color-line);
  border-radius: var(--radius); overflow: hidden;
  transition: translate var(--transition), box-shadow var(--transition);
}
.hs-media{ position: relative; aspect-ratio: 4/3; background: var(--color-bg-alt); overflow: hidden; }
.hs-media video, .hs-media img{ width: 100%; height: 100%; object-fit: cover; }
.hs-body{ padding: 1.5rem 1.4rem 1.7rem; }
.hs-feature h3{ font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 500; margin-bottom: .5rem; }

.hs-second{
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 250px;
  padding: 1.8rem 1.4rem; border-radius: var(--radius); color: var(--color-white);
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-dark));
  transition: translate var(--transition), box-shadow var(--transition);
}
.hs-second .hs-num{ color: rgba(255,255,255,.85); }
.hs-second h3{ color: var(--color-white); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); font-weight: 500; margin-bottom: .5rem; }
.hs-second .hs-keywords{ color: #cdd9c9; }
.hs-second .hs-desc{ color: rgba(255,255,255,.86); }
.hs-second .service-link{ color: var(--color-white); }

.hs-list{ list-style: none; margin-top: .8rem; border-top: 1px solid var(--color-line); }
.hs-list li{ border-bottom: 1px solid var(--color-line); }
.hs-row{ display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: 1.25rem .15rem; }
.hs-row .hs-num{ font-size: 1.25rem; margin: .2rem 0 0; }
.hs-row-main{ display: block; }
.hs-row-title{ display: block; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500; line-height: 1.2; color: var(--color-text); margin-bottom: .2rem; transition: color var(--transition); }
.hs-row .hs-keywords{ font-size: .95rem; margin-bottom: .35rem; }
.hs-row-desc{ display: block; font-size: .9rem; line-height: 1.55; color: var(--color-text-soft); }
.hs-row-arrow{ font-size: 1.2rem; line-height: 1; color: var(--color-primary); margin-top: .3rem; transition: translate var(--transition); }
.hs-row:hover .hs-row-title{ color: var(--color-primary); }
.hs-row:hover .hs-row-arrow{ translate: 4px 0; }
@media (hover: hover){
  .hs-feature:hover, .hs-second:hover{ translate: 0 -6px; box-shadow: var(--shadow-strong); }
}
@media (min-width: 768px){
  .hs-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .hs-feature{ grid-column: span 2; }
  .hs-media{ aspect-ratio: 16/10; }
  .hs-list{ grid-column: 1 / -1; }
}
@media (min-width: 1024px){
  .hs-list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.2rem; border-top: none; margin-top: 1rem; }
  .hs-list li{ border-bottom: none; border-top: 1px solid var(--color-line); }
  .hs-row{ padding: 1.4rem 0 .6rem; }
}

/* ---------- Teaser del blog como pieza editorial ---------- */
.home-blog{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--color-line); }
.home-blog-media{ aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; background: var(--color-bg); }
.home-blog-media img{ width: 100%; height: 100%; object-fit: cover; transition: scale .6s ease; }
.home-blog:hover .home-blog-media img{ scale: 1.04; }
.home-blog-eyebrow{ font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--color-accent-dark); margin-bottom: .6rem; }
.home-blog-title{ font-family: var(--font-heading); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.2; font-weight: 500; color: var(--color-text); margin-bottom: .9rem; }
.home-blog-link{ font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--color-primary); }
@media (min-width: 768px){
  .home-blog{ grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2.6rem; align-items: center; }
  .home-blog-media{ aspect-ratio: 4/3; }
}

/* ---------- Diferenciales como lista editorial ---------- */
.home-diff{ background: rgba(138,154,123,.14); }
.home-diff .section-head{ margin-bottom: 2rem; }
.home-diff-list{ list-style: none; border-top: 1px solid rgba(38,49,45,.16); }
.home-diff-item{ padding: 1.3rem 0; border-bottom: 1px solid rgba(38,49,45,.16); }
.home-diff-item h3{ font-size: 1.25rem; font-weight: 500; margin-bottom: .4rem; }
.home-diff-item p{ font-size: .95rem; color: var(--color-text-strong); }
.home-diff-item.is-key h3{ font-style: italic; font-size: 1.45rem; color: var(--color-primary-dark); }
@media (min-width: 768px){
  .home-diff-item{ display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); gap: 2.5rem; align-items: baseline; padding: 1.6rem 0; }
  .home-diff-item h3{ margin: 0; }
}
@media (min-width: 960px){
  .home-diff-grid{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 4rem; align-items: start; }
  .home-diff .section-head{ margin-bottom: 0; }
}

/* ---------- Reseñas ---------- */
.home-reviews{ padding: clamp(3.2rem, 6vw, 5.5rem) 0; }
@media (min-width: 768px){ .home-reviews .review-card{ flex-basis: calc((100% - 1.4rem) / 2); } }
@media (min-width: 1100px){ .home-reviews .review-card{ flex-basis: calc((100% - 2.8rem) / 3); } }

/* ---------- CTA final con la frase de marca ---------- */
.home-cta{ position: relative; overflow: hidden; text-align: left; background: linear-gradient(135deg, var(--color-primary), #34505B); }
.home-cta-lines{ position: absolute; right: -6%; bottom: .5rem; width: min(75%, 560px); height: 34px; fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1; pointer-events: none; }
.home-cta-lines line{ vector-effect: non-scaling-stroke; }
.home-cta-inner{ position: relative; display: grid; gap: 1.8rem; }
.home-cta .section-title{ font-size: clamp(2rem, 1.4rem + 3vw, 4rem); margin-bottom: .9rem; max-width: 16ch; }
.home-cta-text p{ max-width: 44ch; margin: 0; }
.home-cta-btn{ width: 100%; background: var(--color-white); color: var(--color-primary-dark); }
.home-cta-btn:hover{ background: var(--color-bg); transform: translateY(-2px); box-shadow: var(--shadow-strong); }
.home-cta-quote{ margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.18); }
.home-cta .home-cta-quote p{ font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; line-height: 1.35; color: rgba(255,255,255,.92); margin: 0; }
.home-cta-quote cite{ display: block; margin-top: .45rem; font-style: normal; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #cdd9c9; }
@media (min-width: 640px){ .home-cta-btn{ width: auto; } }
@media (min-width: 960px){
  .home-cta-inner{ grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: end; }
  .home-cta-lines{ bottom: auto; top: 18%; right: -2%; width: 38%; height: 70px; }
}

/* ==========================================================================
   CONTENIDO DEFINITIVO — componentes añadidos (servicios, suelo pélvico,
   contacto, aviso legal y footer)
   ========================================================================== */
.footer-pro{ margin-top: .7rem; font-size: .82rem !important; color: rgba(255,255,255,.5) !important; }

/* ---------- Suelo pélvico: bloque destacado de diástasis ---------- */
.sp-diastasis{
  margin: 0 0 2.4rem; padding: 2rem 1.5rem; border-radius: var(--radius);
  background: var(--color-white); border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-primary); scroll-margin-top: 100px;
}
.sp-diastasis-head h2{ font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); font-weight: 500; margin-bottom: .7rem; }
.sp-diastasis-head > p:not(.eyebrow){ max-width: 60ch; }
.sp-steps{ list-style: none; counter-reset: sp; display: grid; gap: 1.2rem; margin: 1.8rem 0 1.6rem; }
.sp-steps li{ counter-increment: sp; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .8rem; }
.sp-steps li::before{ content: counter(sp, decimal-leading-zero); grid-row: span 2; font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--color-accent-dark); }
.sp-steps strong{ font-family: var(--font-heading); font-weight: 500; font-size: 1.12rem; color: var(--color-text); }
.sp-steps span{ font-size: .93rem; color: var(--color-text-soft); line-height: 1.55; }
.sp-other{ margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--color-line); }
.sp-other h3{ font-size: 1.2rem; font-weight: 500; margin-bottom: .4rem; }
@media (min-width: 768px){
  .sp-diastasis{ padding: 2.6rem 2.4rem; }
  .sp-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
}

/* ---------- Servicios: dos fichas + banda destacada + lista de clases ---------- */
.sv-grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.sv-highlight{
  display: grid; gap: .45rem; margin-top: 1.4rem; padding: 1.8rem 1.5rem; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-white);
  transition: translate var(--transition), box-shadow var(--transition);
}
.sv-highlight-label{ font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #cdd9c9; }
.sv-highlight-title{ font-family: var(--font-heading); font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); line-height: 1.15; }
.sv-highlight-text{ color: rgba(255,255,255,.86); font-size: .95rem; max-width: 60ch; }
.sv-highlight .service-link{ color: var(--color-white); margin-top: .4rem; }
@media (hover: hover){ .sv-highlight:hover{ translate: 0 -4px; box-shadow: var(--shadow-strong); } }
@media (min-width: 768px){
  .sv-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-highlight{ grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end; padding: 2rem 2.2rem; }
  .sv-highlight-label, .sv-highlight-title, .sv-highlight-text{ grid-column: 1; }
  .sv-highlight .service-link{ grid-column: 2; grid-row: 3; }
}
/* Lista de clases siempre en filas (también en escritorio) */
.hs-list.hs-list--rows{ display: block; max-width: 900px; margin-top: 0; border-top: 1px solid var(--color-line); }
.hs-list--rows li{ border-top: none; border-bottom: 1px solid var(--color-line); }
.hs-list--rows .hs-row{ padding: 1.25rem .15rem; }

/* ---------- Contacto: WhatsApp como vía principal ---------- */
.info-card-primary{ background: var(--color-white); border: 1px solid var(--color-line); border-left: 3px solid var(--color-primary); }
.info-card-primary p{ margin-bottom: 1rem; }
.info-card-primary .btn{ color: var(--color-white); white-space: normal; text-align: center; padding: .7rem 1.2rem; }

/* ---------- Aviso legal ---------- */
.legal-data{ list-style: none; display: grid; gap: .45rem; margin-bottom: 1.2rem; }
.legal-data li{ font-size: .95rem; color: var(--color-text-soft); }
.legal-data strong{ color: var(--color-text); font-weight: 600; }
/* Las direcciones de email largas pueden partirse en pantallas estrechas */
a[href^="mailto:"]{ overflow-wrap: anywhere; }
.hero-light .hero-actions{ margin-top: 1.6rem; }

/* ==========================================================================
   AJUSTES DE PROPORCIÓN Y RITMO — servicios, páginas de servicio y blog
   ========================================================================== */
:root{ --space-sm: 1.1rem; --space-md: 2rem; --space-lg: clamp(2.2rem, 4vw, 3rem); }

/* ---------- Servicios: dos fichas compactas e iguales ----------
   Cabecera visual de altura fija + título + descripción (máx. 2-3 líneas) + CTA */
.sv-grid{ gap: 1.2rem; }
.sv-grid .service-card{ display: flex; flex-direction: column; }
.sv-grid .service-media{ aspect-ratio: auto; height: 160px; flex: 0 0 auto; }
.sv-grid .service-body{ padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.sv-grid .service-card h3{ font-size: 1.4rem; margin-bottom: .45rem; }
.sv-grid .service-card .service-keywords{ display: none; }
.sv-grid .service-card p{
  margin-bottom: .9rem; font-size: .95rem; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.sv-grid .service-link{ margin-top: auto; }
@media (min-width: 768px){
  .sv-grid .service-media{ height: 170px; }
}
@media (min-width: 1024px){
  .sv-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1120px; gap: 1.4rem; }
  .sv-highlight{ max-width: 1120px; }
  .sv-grid .service-media{ height: 200px; }
  .sv-grid .service-body{ padding: 1.3rem 1.5rem 1.4rem; }
  .sv-grid .service-card p{ -webkit-line-clamp: 2; }
}

/* ---------- Páginas de servicio (fisioterapia general, clases, suelo pélvico) ---------- */
.content-section{ padding-top: clamp(3rem, 6vw, 5rem); }
.content-section .detail-block{ padding: var(--space-lg) 0; }
.content-section .container > .detail-block:first-child{ padding-top: 0; }
.content-section .detail-block > h2{ margin: 0 0 var(--space-sm); }
.content-section .detail-block p,
.content-section .detail-block .checklist{ max-width: 760px; }
.content-section .detail-block p + p{ margin-top: 1rem; }
.content-section .checklist{ margin-top: 1.4rem; gap: .85rem; }
.content-section .subarea-nav{ gap: .6rem .55rem; margin: var(--space-md) 0 0; }
.content-section .section-head + .subarea-nav{ margin-top: 0; margin-bottom: var(--space-lg); }
.content-section .detail-block + .subarea-grid{ margin-top: var(--space-md); }
.content-section .subarea-grid{ gap: 1.25rem; }
.content-section .subarea-card h3{ margin-bottom: .65rem; }
.content-section .section-head .section-title{ margin-bottom: 1.2rem; }
.content-section .service-cta{ margin-top: var(--space-lg); }


/* Diástasis: pasos más legibles (número | título / descripción) */
.sp-diastasis{ margin-bottom: var(--space-lg); }
.sp-diastasis-head h2{ margin-bottom: 1rem; }
.sp-steps{ gap: 1.6rem 2.6rem; margin: 2.2rem 0 2rem; }
.sp-steps li{ grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-areas: "num title" "num desc"; column-gap: .9rem; row-gap: .35rem; align-content: start; }
.sp-steps li::before{ grid-area: num; align-self: start; line-height: 1.25; }
.sp-steps strong{ grid-area: title; display: block; line-height: 1.3; }
.sp-steps span{ grid-area: desc; display: block; }
.sp-other{ margin-top: var(--space-lg); padding-top: var(--space-md); }
.sp-other h3{ margin-bottom: .8rem; }

/* ---------- Blog: portada del artículo contenida en escritorio ---------- */
.post-cover{ width: 100%; max-width: 600px; margin: 2.2rem auto; } /* 600×300 en escritorio; en móvil, el ancho de la pantalla */

/* ==========================================================================
   CORRECCIONES VISUALES — servicios compactos, diástasis móvil, listas sin
   marcador decorativo y hero móvil de apertura
   ========================================================================== */

/* ---------- Listas: sin marcador decorativo, texto limpio ---------- */
.checklist, .post-body ul{ list-style: none; padding-left: 0; }

/* ---------- Servicios: tarjetas a la mitad de tamaño ---------- */
.sv-grid .service-media{ height: 130px; }
.sv-grid .service-body{ padding: .95rem 1.1rem 1.1rem; }
.sv-grid .service-card h3{ font-size: 1.25rem; margin-bottom: .35rem; }
.sv-grid .service-card p{ font-size: .9rem; line-height: 1.5; margin-bottom: .7rem; }
@media (min-width: 768px){ .sv-grid .service-media{ height: 140px; } }
@media (min-width: 1024px){
  .sv-grid .service-media{ height: 150px; }
  .sv-grid .service-body{ padding: 1rem 1.3rem 1.15rem; }
}

/* ---------- Diástasis: número → título → descripción en todas las anchuras ---------- */
.sp-diastasis{ padding: 2rem 1.35rem 2.1rem; margin-bottom: 2.5rem; }
.sp-diastasis-head .eyebrow{ margin-bottom: 1rem; }
.sp-diastasis-head h2{ margin-bottom: 1.35rem; }
.sp-diastasis-head > p:not(.eyebrow){ max-width: 62ch; line-height: 1.7; }
.sp-steps{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 2.1rem 0 2.1rem; }
.sp-steps li{ display: block; padding-top: 1.6rem; border-top: 1px solid var(--color-line); }
.sp-steps li + li{ margin-top: 1.75rem; }
.sp-steps li::before{ display: block; font-size: 1.15rem; line-height: 1; margin-bottom: .7rem; }
.sp-steps strong{ display: block; font-size: 1.18rem; line-height: 1.3; margin-bottom: .65rem; }
.sp-steps span{ display: block; font-size: .95rem; line-height: 1.65; max-width: 52ch; }
@media (min-width: 768px){
  .sp-diastasis{ padding: 3rem 3rem 3.1rem; margin-bottom: 3rem; }
  .sp-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2.4rem; }
  .sp-steps li + li{ margin-top: 0; }
}

/* ---------- "Otras áreas": separada de la rejilla anterior y con aire interno ---------- */
.sp-other{ margin-top: clamp(2.75rem, 5vw, 4.25rem); padding-top: clamp(2rem, 3vw, 2.5rem); border-top: 1px solid var(--color-line); }
.sp-other h3{ font-size: 1.35rem; margin-bottom: 1.1rem; }
.sp-other .checklist{ max-width: 760px; margin-top: 0; gap: 1rem; }
.sp-other .checklist li{ line-height: 1.6; }

/* ---------- Home: hero móvil de apertura con logo, separado de "Sobre mí" ---------- */
@media (max-width: 767.98px){
  .hero-split-inner{ align-items: center; text-align: center; }
  .hero-split-media{ display: block; width: min(58vw, 230px); aspect-ratio: 6/5; }
  .hero-split-text .hero-text{ margin-left: auto; margin-right: auto; }
  .hero-split-text .hero-actions{ justify-content: center; }
}
@media (max-width: 767.98px){
  .hero-split{ display: flex; align-items: center; min-height: calc(100vh - var(--header-h, 82px)); min-height: calc(100svh - var(--header-h, 82px)); }
  .hero-split-inner{ width: 100%; gap: 1.8rem; padding-top: 2.5rem; padding-bottom: 3rem; }
}

/* ==========================================================================
   ACTUALIZACIÓN FOTOGRÁFICA — fotos reales del centro y de Carboneras
   Originales en /Imagenes/actualización imágenes; aquí se usan derivados
   WebP de img/fotos/. Los fondos con texto encima llevan el velo en un
   pseudo-elemento: el texto conserva siempre opacidad 1.
   ========================================================================== */

/* ---------- Home: hero con la playa de Carboneras de fondo ---------- */
.hero-photo{ isolation: isolate; overflow: hidden; background: var(--color-footer); color: var(--color-bg); }
.hero-photo-bg{ position: absolute; inset: 0; z-index: -2; }
.hero-photo-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: 60% 100%; }
/* Velo petróleo: más denso donde va el texto, casi nulo sobre palmeras e isla */
.hero-photo::before{
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,43,39,.68) 0%, rgba(30,43,39,.64) 50%, rgba(30,43,39,.4) 66%, rgba(30,43,39,.16) 78%, rgba(30,43,39,.38) 100%);
}
.hero-photo .hero-split-inner{ position: relative; z-index: 1; }
.hero-photo .hero-split-media img{ width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.hero-photo .hero-split-text .hero-kicker{ color: #cdd9c9; }
.hero-photo .hero-split-text .hero-title{ color: var(--color-bg); text-shadow: 0 2px 24px rgba(30,43,39,.35); }
.hero-photo .hero-split-text .hero-text{ color: rgba(250,247,241,.9); }
.hero-photo .btn-primary{ background: var(--color-primary); color: var(--color-bg); border-color: rgba(250,247,241,.35); }
.hero-photo .btn-primary:hover{ background: var(--color-primary-dark); }
.hero-photo .btn-outline{ background: rgba(30,43,39,.42); border-color: rgba(250,247,241,.85); color: var(--color-bg); }
.hero-photo .btn-outline:hover{ background: var(--color-bg); color: var(--color-primary-dark); }
.hero-photo :focus-visible{ outline-color: var(--color-bg); }

/* Móvil y tablet vertical: logo arriba, mensaje, botones y, abajo, palmeras e isla a la vista */
@media (max-width: 959.98px){
  .hero-photo{ display: flex; align-items: flex-start; min-height: calc(100vh - var(--header-h, 82px)); min-height: calc(100svh - var(--header-h, 82px)); }
  .hero-photo-bg img{ object-position: 76% 100%; }
  .hero-photo .hero-split-inner{ width: 100%; align-items: center; text-align: center; gap: 1.2rem; padding-top: clamp(1.4rem, 4svh, 2.6rem); padding-bottom: clamp(7.5rem, 25svh, 15rem); }
  .hero-photo .hero-split-media{ display: block; width: min(40vw, 164px, 22svh); aspect-ratio: 568/532; }
  .hero-photo .hero-split-text .hero-text{ margin-left: auto; margin-right: auto; }
  .hero-photo .hero-split-text .hero-actions{ justify-content: center; }
}
@media (min-width: 768px) and (max-width: 959.98px){
  .hero-photo .hero-split-media{ width: 220px; }
}

/* Escritorio: texto a la izquierda sobre el velo; logo en petróleo sobre el cielo,
   encima de la isla real (sin taparla) */
@media (min-width: 960px){
  .hero-photo{ display: flex; align-items: center; min-height: clamp(600px, calc(100svh - var(--header-h, 82px)), 860px); }
  .hero-photo::before{
    background:
      linear-gradient(0deg, rgba(30,43,39,.4) 0%, rgba(30,43,39,0) 22%),
      linear-gradient(90deg, rgba(30,43,39,.86) 0%, rgba(30,43,39,.8) 38%, rgba(30,43,39,.74) 52%, rgba(30,43,39,.24) 68%, rgba(30,43,39,0) 82%);
  }
  .hero-photo .hero-split-inner{ width: 100%; padding-top: 3rem; padding-bottom: 7rem; }
  .hero-photo .hero-split-media{ flex: 0 0 32%; max-width: 380px; aspect-ratio: 568/532; margin-right: 2%; }
}

/* ---------- Hero editorial de página (Fisioterapia General, Clases y movimiento):
   foto real en color como protagonista, texto sobre crema ---------- */
.hero-feature{ background: var(--color-bg); padding: 0 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero-feature-inner{ display: flex; flex-direction: column; gap: 1.7rem; }
.hero-feature-media{ position: relative; margin: 0 -1.5rem; aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg-alt); }
.hero-feature-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.hero-feature--reverse .hero-feature-media img{ object-position: center 72%; }
.hero-feature .hero-kicker{ color: var(--color-accent-dark); letter-spacing: .2em; margin-bottom: 1rem; }
.hero-feature .hero-title{ color: var(--color-text); text-shadow: none; font-size: clamp(2.4rem, 1.7rem + 3.4vw, 3.9rem); max-width: 14ch; margin-bottom: 1.1rem; }
.hero-feature .hero-text{ color: var(--color-text-soft); max-width: 46ch; margin: 0; }
.hero-feature .service-hero-tags span{ color: var(--color-text); border-color: rgba(38,49,45,.26); }
@media (min-width: 640px) and (max-width: 959.98px){
  .hero-feature-media{ margin: 1.25rem 0 0; aspect-ratio: 16/10; border-radius: var(--radius); }
}
@media (min-width: 960px){
  .hero-feature{ padding: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }
  .hero-feature-inner{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
  .hero-feature-text{ order: 1; }
  .hero-feature-media{ order: 2; margin: 0; aspect-ratio: 4/5; max-height: min(78svh, 720px); width: 100%; border-radius: 4px; box-shadow: 22px 22px 0 var(--color-bg-tint); }
  .hero-feature-media img{ object-position: center 55%; }
  .hero-feature--reverse .hero-feature-inner{ grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); }
  .hero-feature--reverse .hero-feature-media{ order: 0; box-shadow: -22px 22px 0 var(--color-bg-alt); }
  .hero-feature--reverse .hero-feature-media img{ object-position: center 60%; }
  .hero-feature--reverse .hero-feature-text{ order: 1; }
}

/* ---------- Servicios: fotos reales en las dos fichas (mismo alto y recorte) ---------- */
.sv-photo img{ animation: none; }
.sv-photo--botanica img{ object-position: center 56%; }
.sv-photo--camilla img{ object-position: center 50%; }

/* Servicios — clases: foto de la sala junto a la lista (fija al hacer scroll en escritorio) */
.sv-classes-photo{ margin: 0 0 1.6rem; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); }
.sv-classes-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
@media (min-width: 1024px){
  .sv-classes{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
  .sv-classes .hs-list{ grid-column: 1; grid-row: 1; max-width: none; }
  .sv-classes-photo{ grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 3/4; position: sticky; top: calc(var(--header-h, 82px) + 1.5rem); border-radius: 180px 180px var(--radius) var(--radius); }
  .sv-classes-photo img{ object-position: center 60%; }
}

/* ---------- Suelo pélvico: introducción + navegación de tratamientos ---------- */
.sp-intro{ display: flex; flex-direction: column; gap: 1.8rem; margin-bottom: var(--space-lg); }
.sp-intro .section-head{ order: 1; margin-bottom: 0; }
.sp-intro .sp-explore{ order: 2; }
@media (min-width: 960px){
  .sp-intro{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .sp-intro .section-head{ order: 0; grid-column: 1; grid-row: 1; padding-top: .5rem; }
}

/* Diástasis: fondo fotográfico muy sutil en un pseudo-elemento (el texto no pierde opacidad) */
.sp-diastasis{ position: relative; isolation: isolate; overflow: hidden; }
.sp-diastasis::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: -1; pointer-events: none;
  background: url('../img/fotos/consulta-plano-general-640.webp') center 45% / cover no-repeat;
  filter: grayscale(1); opacity: .09;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%);
}
@media (min-width: 768px){
  .sp-diastasis::after{
    top: 0; left: auto; height: auto; width: 46%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); mask-image: linear-gradient(90deg, transparent, #000 65%);
  }
}

/* ---------- Fisioterapia General: foto de detalle junto a las herramientas ---------- */
.photo-detail{ margin: 2rem 0 0 auto; width: min(62%, 260px); aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-sm); }
.photo-detail img{ width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
@media (min-width: 768px){
  .fg-tools{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .fg-tools .photo-detail{ margin: 0; width: 100%; }
}

/* Bloques CTA con foto de fondo (pseudo-elementos: imagen + velo) */
.service-cta--photo{ position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 7vw, 5rem) 1.5rem; }
.service-cta--photo::before, .service-cta--photo::after{ content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.service-cta--photo::after{ z-index: -1; }
.service-cta--winback::before{ background: url('../img/fotos/winback-camilla-rosa-1086.webp') center 55% / cover no-repeat; filter: grayscale(.9) contrast(1.05); }
.service-cta--winback::after{ background: linear-gradient(115deg, rgba(30,43,39,.88), rgba(42,62,71,.74)); }
.service-cta--winback h2{ color: var(--color-bg); }
.service-cta--winback p{ color: rgba(250,247,241,.9); }
.service-cta--winback .btn-primary{ background: var(--color-bg); color: var(--color-primary-dark); }
.service-cta--winback .btn-primary:hover{ background: var(--color-white); }
.service-cta--winback :focus-visible{ outline-color: var(--color-bg); }
.service-cta--sala::before{ background: url('../img/fotos/sala-clases-lateral-1086.webp') center 62% / cover no-repeat; filter: grayscale(.35); }
.service-cta--sala::after{ background: linear-gradient(180deg, rgba(250,247,241,.86), rgba(241,244,238,.8)); }

/* ---------- Clases y movimiento ---------- */
/* Pilates terapéutico: foto en arco a un lado, texto al otro */
.cm-split-photo{ margin: 0 0 1.8rem; width: min(78%, 320px); aspect-ratio: 4/5; overflow: hidden; border-radius: 160px 160px var(--radius) var(--radius); }
.cm-split-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
@media (min-width: 768px){
  .cm-split-photo{ margin: 0; width: 100%; max-width: 420px; border-radius: 999px 999px var(--radius) var(--radius); }
}
/* ---------- Preparación al parto: foto de embarazo protagonista ---------- */
.pp-feature{ display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 1rem; }
.pp-feature-photo{ margin: 0; aspect-ratio: 4/5; max-height: 72svh; overflow: hidden; border-radius: var(--radius-sm); }
.pp-feature-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.pp-feature-text > .detail-block:first-child{ padding-top: 0; }
@media (min-width: 768px){
  .pp-feature{ display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  .pp-feature-photo{ aspect-ratio: 720/1110; max-height: none; position: sticky; top: calc(var(--header-h, 82px) + 1.5rem); }
  .pp-feature-text > .detail-block:first-child{ padding-top: .4rem; }
}

/* ---------- Nosotros: la consulta como contexto, con menos peso que el retrato ---------- */
.about-context{ margin: 0; justify-self: end; width: 62%; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-sm); }
.about-context img{ width: 100%; height: 100%; object-fit: cover; object-position: 72% 38%; }

/* ---------- Contacto: foto real del centro junto al mapa ---------- */
.contact-place{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
.contact-place .map-embed{ margin-top: 0; }
.contact-place-photo{ position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.contact-place-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
@media (min-width: 960px){
  .contact-place{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1.5rem; align-items: stretch; }
  .contact-place-photo{ aspect-ratio: auto; min-height: 460px; }
  .contact-place .map-embed{ aspect-ratio: auto; height: auto; min-height: 460px; }
}

/* ---------- Galería editorial: tamaños distintos, sin huecos ---------- */
.gallery-editorial{ grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 31vw; grid-auto-flow: dense; gap: .7rem; }
.gallery-editorial .gallery-item{ aspect-ratio: auto; margin: 0; }
.gallery-editorial .g-big{ grid-column: span 2; grid-row: span 2; border-radius: 4px; }
.gallery-editorial .g-tall{ grid-row: span 2; }
.gallery-editorial .g-wide{ grid-column: span 2; }
.gallery-editorial .g-bw img{ filter: grayscale(1) contrast(1.06); }
.gallery-editorial .g-landscape img{ object-position: 62% center; }
@media (min-width: 640px){ .gallery-editorial{ grid-auto-rows: 200px; gap: .9rem; } }
@media (min-width: 960px){ .gallery-editorial{ grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 16vw, 225px); gap: 1rem; } }

/* ==========================================================================
   FASE 2 — RITMO EN MÓVIL: acordeones editoriales, exploración y
   microinteracciones. En escritorio el contenido sigue visible.
   ========================================================================== */

/* ---------- Acordeón editorial (js/main.js lo activa por debajo de 768px) ---------- */
.acc-head{ margin: 0; }
.acc-num{ font-family: var(--font-heading); font-style: italic; font-weight: 400; color: var(--color-accent-dark); }
.acc-btn{
  display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 56px; padding: .9rem .1rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-size: 1.16rem; font-weight: 500; line-height: 1.3; color: var(--color-text);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s ease;
}
.acc-btn .acc-num{ flex: 0 0 1.9rem; font-size: 1rem; }
.acc-btn .acc-title{ flex: 1 1 auto; }
.acc-btn:active{ background-color: rgba(61,90,102,.06); }
.acc-chevron{ flex: 0 0 18px; width: 18px; height: 18px; color: var(--color-primary); transition: transform .3s ease; }
.is-open > .acc-head .acc-chevron{ transform: rotate(180deg); }
.acc-on [data-acc] .acc-item{ border-bottom: 1px solid var(--color-line); }
.acc-on [data-acc] > .acc-item:first-child{ border-top: 1px solid var(--color-line); }
.acc-on [data-acc-panel]{ display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .32s ease, visibility 0s linear .32s; }
.acc-on .is-open > [data-acc-panel]{ grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s ease, visibility 0s; }
.acc-on .acc-inner{ overflow: hidden; min-height: 0; }
.acc-on .acc-inner::after{ content: ''; display: block; height: 1.2rem; }
.acc-on .acc-item:has(.acc-num) .acc-inner{ padding-left: 2.75rem; }
.acc-inner p{ max-width: 62ch; }
.acc-inner p + p{ margin-top: .9rem; }

/* ---------- "Explorar tratamientos ↓" / "Ver modalidades ↓" ---------- */
.explore-link{
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary);
}
.explore-link span{ display: inline-block; transition: translate .3s ease; }
@media (hover: hover) and (pointer: fine){ .explore-link:hover span{ translate: 0 4px; } }
.sp-explore .subarea-nav, .cm-explore .subarea-nav{ display: none; margin: 0; }
.cm-explore{ margin: 1.4rem 0 var(--space-md); }
@media (min-width: 768px){
  .sp-explore .subarea-nav, .cm-explore .subarea-nav{ display: flex; margin-top: 1rem; }
  .cm-explore{ margin: var(--space-md) 0 var(--space-lg); }
}

/* ---------- Suelo pélvico: hero con la consulta real (sin vídeo) ---------- */
.hero-sp .hero-media img{ object-position: center 52%; filter: saturate(.88); }
.hero-sp .hero-kicker{ color: var(--color-bg); }
.hero-sp .hero-media::after{ background: linear-gradient(180deg, rgba(30,43,39,.74) 0%, rgba(30,43,39,.72) 50%, rgba(42,62,71,.84) 100%); }
@media (min-width: 960px){
  .sp-intro .sp-explore{ grid-column: 2; grid-row: 1; padding-top: 2.6rem; }
}

/* ---------- Suelo pélvico: "Qué tratamos" ---------- */
.sp-treat{ scroll-margin-top: 100px; }
.sp-treat-head h2{ font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem); font-weight: 500; margin-bottom: 1.2rem; }
.tr-item{ scroll-margin-top: 100px; }
.tr-photo{ margin: 0; overflow: hidden; }
.tr-photo img{ width: 100%; height: 100%; object-fit: cover; }
.tr-stage{ margin-top: 2.2rem; }
.tr-photo--preparto{ width: min(64%, 260px); aspect-ratio: 4/5; border-radius: var(--radius-sm); margin-bottom: 1.2rem; }
.tr-photo--preparto img{ object-position: center 22%; }
.tr-photo--posparto{ aspect-ratio: 720/551; border-radius: var(--radius); margin-top: 1.4rem; }
.tr-photo--posparto img{ object-position: center 62%; }
/* Sin acordeón (escritorio o sin JS): número + título + texto, con líneas finas */
html:not(.acc-on) .tr-item, html:not(.acc-on) .mode-item{ padding: 1.4rem 0 1.5rem; border-top: 1px solid var(--color-line); }
html:not(.acc-on) .tr-item .acc-head{ display: flex; align-items: baseline; gap: .8rem; font-size: 1.22rem; font-weight: 500; line-height: 1.3; margin-bottom: .6rem; }
html:not(.acc-on) .tr-item .acc-num{ font-size: 1rem; flex: 0 0 auto; }
html:not(.acc-on) .tr-item .acc-inner p{ font-size: .95rem; }
@media (min-width: 768px){
  .tr-list--main{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .tr-list--main > .tr-item:first-child{ grid-column: 1 / -1; }
  .tr-list--main > .tr-item:first-child .acc-head{ font-size: 1.45rem; }
  .tr-stage{ display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: var(--space-lg); }
  .tr-stage--embarazo{ grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .tr-stage--posparto{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .tr-photo--preparto{ width: 100%; max-width: 340px; margin: 0; aspect-ratio: 720/1110; }
  .tr-photo--posparto{ margin: 0; }
}
/* "Otras áreas": mismo espacio previo; en móvil, plegable */
.acc-on .sp-other h3{ margin-bottom: 0; }
.acc-on .sp-other .acc-btn{ font-size: 1.28rem; padding-top: .2rem; }
.acc-on .sp-other .acc-item{ border-bottom: 0; }
.acc-on .sp-other > .acc-item:first-child{ border-top: 0; }

/* ---------- Clases y movimiento: modalidades con ritmo ---------- */
.cm-modes{ scroll-margin-top: 100px; }
.mode-item{ scroll-margin-top: 100px; }
.cm-group{ margin-bottom: 2rem; }
.cm-group--photo-left .cm-split-photo{ width: min(62%, 260px); margin-bottom: 1.4rem; }
html:not(.acc-on) .mode-item .acc-head{ display: flex; align-items: baseline; gap: .9rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); font-weight: 500; line-height: 1.25; margin-bottom: .8rem; }
html:not(.acc-on) .mode-item .acc-num{ font-size: 1.05rem; flex: 0 0 auto; }
.cm-strip{ margin: 0 0 2rem; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius); }
.cm-strip img{ width: 100%; height: 100%; object-fit: cover; object-position: center 45%; filter: grayscale(1) contrast(1.06); }
.cm-group--photo-right{ display: flex; flex-direction: column; }
.cm-side-photo{ order: -1; margin: 0 0 1.4rem auto; width: min(78%, 320px); aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); }
.cm-side-photo img{ width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px){
  .cm-group{ margin-bottom: var(--space-lg); }
  .cm-group--photo-left{ display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .cm-group--photo-left .cm-split-photo{ width: 100%; margin: 0; }
  .cm-strip{ aspect-ratio: auto; height: clamp(200px, 22vw, 280px); margin-bottom: var(--space-lg); }
  .mode-list--cols{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
  .cm-group--photo-right{ display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .cm-side-photo{ order: 0; margin: 0; width: 100%; max-width: 400px; aspect-ratio: 1/1; border-radius: 4px; box-shadow: 18px 18px 0 var(--color-bg-tint); }
}

/* ---------- Home: tarjeta Suelo Pélvico con foto real ---------- */
.hs-media img{ object-position: center 55%; }

/* ---------- Microinteracciones: hover solo con ratón; feedback al tocar ---------- */
@media (hover: hover) and (pointer: fine){
  .hs-media img, .sv-grid .service-media img{ transition: scale .6s ease; }
  .hs-feature:hover .hs-media img, .sv-grid .service-card:hover .service-media img{ scale: 1.02; }
  .acc-btn:hover .acc-title{ color: var(--color-primary); }
}
@media (hover: none){
  .hs-feature:active, .hs-second:active, .sv-grid .service-card:active, .sv-highlight:active{ scale: .985; }
  .hs-row:active{ background-color: rgba(61,90,102,.05); }
}

/* ---------- WhatsApp flotante: margen seguro en iPhone y aire bajo el pie ---------- */
.whatsapp-float{ right: max(1.4rem, calc(env(safe-area-inset-right) + 1rem)); bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + 1rem)); }
@media (max-width: 767.98px){
  .whatsapp-float{ right: max(1rem, calc(env(safe-area-inset-right) + .75rem)); bottom: max(1rem, calc(env(safe-area-inset-bottom) + .75rem)); }
  .site-footer{ padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
.whatsapp-float{ transition: transform var(--transition), background var(--transition), opacity .25s ease, visibility .25s ease; }
.whatsapp-float.is-tucked{ opacity: 0; visibility: hidden; pointer-events: none; }