/* ==========================================================================
   Sitio público — Home, Consulta, Terapia física, Prueba de esfuerzo.
   Se carga DESPUÉS de sport-performance.css: reutiliza sus variables --sp-*
   y sus clases .sp-btn/.sp-eyebrow/.sp-rule-orange en vez de redeclarar
   colores. Ver docs/FASE_WEB_PAGINAS.md §3.
   ========================================================================== */

body { background: var(--sp-surface); }

/* ── Animaciones de entrada — sutiles, CSS puro, sin librerías ──────────── */
@keyframes sp-pub-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero: entra solo al cargar la página */
.sp-pub-hero-content {
  animation: sp-pub-fade-in .6s ease-out both;
}

/* Secciones bajo el pliegue: entran al hacer scroll (ver assets/js/publico.js) */
.sp-pub-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.sp-pub-reveal.is-visible {
  opacity: 1;
  /* transform: none, NO translateY(0) — aunque visualmente son el mismo
     resultado (0px de desplazamiento), translateY(0) sigue computando a
     una matriz distinta de "none", y CUALQUIER transform que no sea
     literalmente "none" crea un nuevo stacking context (spec de CSS). Con
     translateY(0) cada sección revelada quedaba aislada en su propio
     contexto de apilamiento; una sección más abajo en el DOM (también
     revelada) pintaba por encima de la anterior completa — dropdowns
     incluidos, sin importar su z-index, porque ese z-index sólo compite
     dentro del contexto de su propia sección. Confirmado reproduciendo el
     bug real: el selector "¿Nápoles o Anzures?" del CTA de Terapia física
     quedaba detrás de la sección de "paciente real" siguiente. No era
     overflow (ambas secciones miden overflow:visible) ni z-index del
     dropdown (ya tenía 1000) — era esto. Transicionar a "none" es válido
     (los navegadores interpolan against la matriz identidad) y dejó de
     crear el contexto en cuanto termina la animación de entrada. */
  transform: none;
}

/* Respeta accesibilidad — nunca fuerces movimiento a quien lo desactivó */
@media (prefers-reduced-motion: reduce) {
  .sp-pub-hero-content,
  .sp-pub-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.sp-pub-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header: blanco sólido, sticky, sombra al hacer scroll ─────────────── */
.sp-pub-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.sp-pub-header.is-scrolled {
  box-shadow: var(--sp-shadow-sm);
  border-bottom-color: var(--sp-line);
}
.sp-pub-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
/* Bug real del scroll horizontal en móvil: esto forzaba height:30px sin
   tocar el width, y como el archivo real (1400×189) tiene una relación de
   aspecto distinta a los atributos width/height="176/24" del <img>, el
   navegador recalculaba el ancho a ~222px — más ancho que el logo real y
   más ancho que lo que cabía en el header. Sin altura fija, se respetan los
   atributos width/height del HTML (mismo patrón que el logo del footer). */
.sp-pub-logo img { display: block; height: auto; }
.sp-pub-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto 0 12px; }
.sp-pub-nav a {
  font-family: var(--sp-body);
  font-weight: 600;
  font-size: .9rem;
  color: var(--sp-ink-soft);
  text-decoration: none;
}
.sp-pub-nav a:hover, .sp-pub-nav a.is-active { color: var(--sp-orange); }

.sp-btn-orange { background: var(--sp-orange); color: #fff; }
.sp-btn-orange:hover, .sp-btn-orange:focus-visible { background: var(--sp-orange-600); color: #fff; }

/* .sp-btn se usa aquí también como <a> (CTAs a WhatsApp/páginas), no solo
   <button> como en el resto de la plataforma — sport-performance.css no
   necesita este reset porque ahí .sp-btn siempre es un <button>. */
a.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }

.sp-pub-toggler {
  display: none;
  border: 1px solid var(--sp-line);
  background: #fff;
  border-radius: var(--sp-r-sm);
  padding: .5rem .65rem;
  font-size: 1.1rem;
  color: var(--sp-ink);
}

/* CTA del header: "Agendar cita" completo en escritorio, "Cita" a secas en
   móvil — nunca sin texto (ver 520px más abajo, ya no lo oculta del todo). */
.sp-pub-cta-label-corto { display: none; }

@media (max-width: 860px) {
  .sp-pub-nav { display: none; }
  .sp-pub-toggler { display: inline-flex; }
  /* Sin .sp-pub-nav, el margin-left:auto que normalmente empuja nav+CTA a
     la derecha desaparece (vivía en .sp-pub-nav, ver arriba) — sin esto
     los 3 elementos que quedan (logo, hamburguesa, CTA) se apilan pegados
     a la izquierda con todo el espacio sobrante a la derecha. */
  .sp-pub-header-inner { justify-content: space-between; }
  .sp-pub-cta-label-full { display: none; }
  .sp-pub-cta-label-corto { display: inline; }
}

/* ── Drawer móvil (offcanvas de Bootstrap) ──────────────────────────────
   Patrón visual de la referencia del cliente: ítems icono+etiqueta con
   indicador de página activa (borde izquierdo naranja + fondo tenue), y
   un bloque de contacto fijo al fondo del panel. ──────────────────────── */
.sp-pub-drawer { width: min(320px, 86vw); }
.sp-pub-drawer .offcanvas-header { border-bottom: 1px solid var(--sp-line); padding: 14px 20px; }
.sp-pub-drawer .offcanvas-body { padding: 20px; }

.sp-pub-drawer-nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 28px; }
.sp-pub-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--sp-r-sm);
  border-left: 3px solid transparent;
  font-family: var(--sp-body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--sp-ink);
  text-decoration: none;
}
.sp-pub-drawer-link .bi { font-size: 1.15rem; color: var(--sp-ink-soft); flex: 0 0 auto; }
.sp-pub-drawer-link:hover { background: var(--sp-canvas); }
.sp-pub-drawer-link.is-active {
  background: var(--sp-orange-050);
  border-left-color: var(--sp-orange);
  color: var(--sp-orange-600);
}
.sp-pub-drawer-link.is-active .bi { color: var(--sp-orange); }

.sp-pub-drawer-contacto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--sp-line);
}
.sp-pub-drawer-contacto-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-md);
  background: #fff;
  text-decoration: none;
  color: var(--sp-ink);
  font-family: var(--sp-body);
  text-align: left;
  appearance: none;
}
.sp-pub-drawer-contacto-item:hover { border-color: var(--sp-orange); }
.sp-pub-drawer-contacto-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sp-orange-050);
  color: var(--sp-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1.05rem;
}
.sp-pub-drawer-contacto-icon-wa { background: #e7f6ed; color: #2fa25a; }
.sp-pub-drawer-contacto-texto { display: flex; flex-direction: column; }
.sp-pub-drawer-contacto-titulo { font-weight: 700; font-size: .9rem; }
.sp-pub-drawer-contacto-sub { font-size: .8rem; color: var(--sp-muted); }
.sp-pub-drawer-contacto-item > .bi-chevron-right { margin-left: auto; color: var(--sp-muted); font-size: .85rem; }

/* Header angosto (teléfonos): con justify-content:space-between (arriba)
   los 3 elementos ya no compiten por el mismo espacio apretado, así que
   el CTA puede conservar el texto "Cita" — sólo se ajustan gap/padding
   para que quede cómodo en ~390px de ancho real. */
@media (max-width: 520px) {
  .sp-pub-header-inner { gap: 10px; padding: 12px 16px; }
  .sp-pub-header-inner .dropdown .sp-btn { padding-left: .85rem; padding-right: .85rem; }
}

/* ── Hero fijo (sin carrusel) ───────────────────────────────────────────── */
.sp-pub-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sp-navy-900), var(--sp-navy-700));
  color: #fff;
  padding: 64px 0 56px;
  min-height: 560px;
  display: flex;
  align-items: center;
}
/* Foto real de fondo (hero_imagen, docs/FASE_WEB_PAGINAS.md §4.1) — ahora un
   <img> real (PageSpeed móvil: LCP del hero, ver docs/FASE_WEB_PAGINAS.md
   §11), no background-image: un background-image en CSS no lo descubre el
   preload scanner del navegador hasta parsear el CSS completo, así que la
   foto tardaba en empezar a pedirse. Como <img>, con fetchpriority="high"
   en la vista, el navegador la pide de inmediato. Se posiciona absolute
   detrás del contenido; el velo direccional pasa a ser un pseudo-elemento
   encima de la foto y debajo del texto. Opaco a la izquierda (donde vive
   el texto, para contraste) y transparente de verdad más pronto (70%) en
   vez de arrastrarse casi hasta el borde. En prueba-esfuerzo-hero.jpg la
   máscara/rostro están centro-izquierda (~40% del ancho, más abajo del
   centro vertical) — object-position explícito para que "cover" no la
   recorte por arriba ni la empuje fuera del encuadre en anchos angostos. */
/* --hero-pos: 38% 42% por default (afinado para prueba-esfuerzo-hero.jpg
   en home) — funciona razonablemente bien también en consulta/terapia/
   prueba-esfuerzo (verificado, sujetos ya centrados en esas fotos). Sólo
   agendar-hero.jpg necesita su propio valor vía --hero-pos inline: tiene
   al sujeto a la derecha, justo la composición opuesta. */
/* .sp-pub-hero-bg vive ahora en el <picture> (WebP + fallback jpg,
   PageSpeed móvil ronda 2 — docs/FASE_WEB_PAGINAS.md §11), no en el <img>
   directamente: <picture> por spec es inline por default y no acepta
   object-fit, así que necesita su propio position:absolute + display:block;
   el <img> adentro sólo llena ese wrapper al 100%. */
.sp-pub-hero-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.sp-pub-hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 38% 42%);
}
.sp-pub-hero.has-img::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(90deg, rgba(11, 20, 38, .92) 0%, rgba(11, 20, 38, .75) 35%, rgba(11, 20, 38, .1) 58%, transparent 70%);
}
.sp-pub-hero h1 {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08;
  color: #fff;
  margin: .5rem 0 1rem;
  max-width: 720px;
}
.sp-pub-hero p {
  font-family: var(--sp-body);
  font-size: 1.05rem;
  color: #cfd8ee;
  max-width: 620px;
  margin: 0 0 1.75rem;
}
.sp-pub-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Checks bajo el subtítulo del hero — sólo Consulta los usa (§4 de esta
   ronda); lista genérica, mismo criterio que el resto del sitio de "texto
   editable, glifo/estructura fijos en la vista". */
.sp-pub-hero-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.sp-pub-hero-checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
}
.sp-pub-hero-checks .bi { color: var(--sp-orange); }

/* width:100% es necesario ahora que .sp-pub-hero es flex (arriba, para
   centrar verticalmente con el min-height nuevo) — un hijo flex no toma
   ancho completo por default como sí lo hace un bloque normal, y sin esto
   max-width+margin:auto dejaría de centrar horizontalmente. */
.sp-pub-hero-inner { position: relative; z-index: 2; width: 100%; padding: 0 24px; max-width: 1180px; margin: 0 auto; }
/* min-height:0 — el min-height:560px de .sp-pub-hero (arriba) se pensó
   para el hero de home; "slim" es justamente la variante MÁS BAJA que
   usan Consulta/Terapia/Prueba de esfuerzo/Agendar, así que aquí se
   resetea para que vuelvan a su alto natural según su propio contenido. */
.sp-pub-hero.sp-pub-hero-slim { padding: 48px 0; min-height: 0; }

/* ── Secciones ───────────────────────────────────────────────────────────── */
.sp-pub-section { padding: 56px 0; }
.sp-pub-section.is-navy { background: var(--sp-navy-900); color: #fff; }
.sp-pub-section.is-canvas { background: var(--sp-canvas); }
.sp-pub-section-head { max-width: 640px; margin: 0 0 32px; }
.sp-pub-section-head h2 {
  font-family: var(--sp-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: .4rem 0 0;
}
.sp-pub-section.is-navy .sp-pub-section-head h2 { color: #fff; }

.sp-pub-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sp-pub-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) {
  .sp-pub-grid-3, .sp-pub-grid-2 { grid-template-columns: 1fr; }
}

.sp-pub-card {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-lg);
  padding: 24px;
  box-shadow: var(--sp-shadow-sm);
}
.sp-pub-card h3 {
  font-family: var(--sp-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: .6rem 0 .4rem;
}
.sp-pub-card p { color: var(--sp-ink-soft); font-size: .92rem; margin: 0; }

/* Ícono de servicio — círculo navy sólido, glifo blanco (docs/FASE_WEB_PAGINAS.md §10.2) */
.sp-pub-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sp-navy-900);
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: .2rem;
}

/* Iconos de "¿Por qué elegirnos?" — blancos, sin círculo, sobre fondo navy (§10.3) */
.sp-pub-porque-icon { display: block; font-size: 1.8rem; color: #fff; margin-bottom: .5rem; }

/* Ícono con badge circular durazno — mismo patrón que .sp-pub-card-icon
   (círculo + glifo centrado) pero en el tono durazno del mockup original
   (mismos valores que .sp-icon-orange en sport-performance.css) en vez de
   navy sólido; para listas en línea (ícono + texto), no para el header de
   una tarjeta, por eso es más chico. */
.sp-pub-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sp-orange-050);
  color: var(--sp-orange);
  font-size: 1.15rem;
  flex: 0 0 auto;
}

.sp-pub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-pub-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95rem;
  color: var(--sp-ink-soft);
}
.sp-pub-list li .bi { color: var(--sp-orange); margin-top: .2rem; flex: 0 0 auto; }

/* Listas largas (>6 ítems, ver home.php: count($items) > 6) pasan a 2
   columnas automáticas — no es exclusivo de Terapia física, cualquier
   tarjeta de servicio que crezca a una lista larga lo recibe igual sin
   tocar este CSS. .sp-pub-list es flex (arriba); CSS multicolumna no
   aplica sobre un contenedor flex, así que aquí se vuelve a block, y el
   gap vertical que daba el flex se reemplaza por margin-bottom en cada li
   (el "gap" de flexbox no separa líneas dentro del flujo de columnas). */
.sp-servicio-lista--larga {
  display: block;
  columns: 2;
  column-gap: 32px;
}
.sp-servicio-lista--larga li {
  break-inside: avoid;
  margin-bottom: 12px;
}

.sp-pub-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: sp-step; }
@media (max-width: 860px) { .sp-pub-steps { grid-template-columns: 1fr; } }
.sp-pub-step { position: relative; padding-left: 44px; }
.sp-pub-step::before {
  counter-increment: sp-step;
  content: counter(sp-step);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sp-orange-050);
  color: var(--sp-orange);
  font-family: var(--sp-display);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sp-pub-step h3 { font-family: var(--sp-display); font-weight: 600; font-size: 1rem; margin: 0 0 .3rem; }
.sp-pub-step p { color: var(--sp-ink-soft); font-size: .88rem; margin: 0; }
/* Línea punteada conectora entre círculos — mejora compartida por
   .sp-pub-steps, así que Consulta y Terapia física la reciben igual que
   Prueba de esfuerzo sin tocar sus vistas (mismo componente, de verdad).
   Sólo tiene sentido con las 4 columnas en línea; se oculta junto con el
   grid de 1 columna en el breakpoint de abajo. */
.sp-pub-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 32px;
  width: calc(100% - 12px);
  border-top: 2px dotted var(--sp-line);
}
@media (max-width: 860px) {
  .sp-pub-step::after { display: none; }
}

.sp-pub-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sp-pub-badges li {
  background: var(--sp-canvas);
  border: 1px solid var(--sp-line);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .85rem;
  color: var(--sp-ink-soft);
}

/* ── Precios (prueba de esfuerzo) ───────────────────────────────────────── */
.sp-pub-plan {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-pub-plan.is-premium { border-color: var(--sp-orange); box-shadow: var(--sp-shadow-md); }
.sp-pub-plan-price { font-family: var(--sp-display); font-weight: 700; font-size: 2.4rem; color: var(--sp-navy-900); }
.sp-pub-plan-price span { font-family: var(--sp-body); font-weight: 500; font-size: .95rem; color: var(--sp-muted); }

/* ── Testimonios ─────────────────────────────────────────────────────────── */
.sp-pub-testi {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-r-lg);
  padding: 22px;
}
.sp-pub-testi .bi-star-fill { color: var(--sp-orange); font-size: .8rem; }
.sp-pub-testi p { color: var(--sp-ink-soft); font-size: .92rem; margin: .6rem 0; }
.sp-pub-testi-autor { font-weight: 600; font-size: .88rem; }
.sp-pub-testi-rol { font-size: .78rem; color: var(--sp-muted); }

/* Reseñas de Google — avatar + nombre/fecha (§10.4) */
.sp-pub-testi-google-head { display: flex; align-items: center; gap: 10px; margin-bottom: .5rem; }
.sp-pub-testi-google-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

/* Carrusel de reseñas de Google — casero (scroll-snap), no el componente
   Carousel de Bootstrap: ver el comentario en publico/home.php sobre el
   build de Bootstrap purgado del sitio público. 3 tarjetas visibles por
   "página" en escritorio, 1 en móvil (mismo breakpoint que .sp-pub-grid-3);
   los botones desplazan por el ancho visible del track, así que se agrupan
   solas sin detectar el breakpoint en JS. */
.sp-pub-testi-carousel { position: relative; }
.sp-pub-testi-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sp-pub-testi-track::-webkit-scrollbar { display: none; }
.sp-pub-testi-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.sp-pub-testi-slide .sp-pub-testi { height: 100%; }
@media (min-width: 861px) {
  .sp-pub-testi-slide { flex: 0 0 calc((100% - 44px) / 3); }
}
.sp-pub-testi-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sp-line);
  background: #fff;
  color: var(--sp-navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sp-shadow-sm);
  cursor: pointer;
}
.sp-pub-testi-nav.is-prev { left: -14px; }
.sp-pub-testi-nav.is-prev i { display: inline-block; transform: scaleX(-1); }
.sp-pub-testi-nav.is-next { right: -14px; }
/* [hidden] necesita más especificidad que ".sp-pub-testi-nav{display:flex}"
   de arriba para ganarle — si no, el atributo hidden que pone
   publico.js (pocas tarjetas / contenido que ya cabe sin scroll) no
   ocultaría nada. */
.sp-pub-testi-nav[hidden] { display: none; }
@media (max-width: 860px) {
  /* En móvil el swipe nativo del scroll-snap ya cubre la navegación. */
  .sp-pub-testi-nav { display: none; }
}

/* ── Imagen secundaria junto a texto (secundaria_imagen, §4.1) ──────────── */
.sp-pub-media-figure { border-radius: var(--sp-r-lg); overflow: hidden; box-shadow: var(--sp-shadow-md); }
.sp-pub-media-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Aliados — franja de logos, sin carrusel (4 logos no necesitan scroll,
   docs/FASE_WEB_PAGINAS.md §10.5) ─────────────────────────────────────── */
.sp-pub-aliados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
/* Altura de contenedor común, NO tamaño fijo igual para los 4 — las
   proporciones van de casi 1:1 (borussia) a casi 3:1 (nutriperformance);
   forzar el mismo width/height era justo lo que se veía mal (recorte
   desigual). Cada logo escala proporcional dentro de esta altura vía
   object-fit:contain, con un techo de ancho para que el más horizontal
   (nutriperformance) no se alargue de más frente a los otros 3. */
.sp-aliados-logo {
  height: 110px;
  width: auto;
  max-width: 230px;
  object-fit: contain;
  opacity: .8;
  transition: opacity .15s ease;
}
.sp-aliados-logo:hover { opacity: 1; }
@media (max-width: 600px) {
  .sp-pub-aliados { gap: 28px; }
  .sp-aliados-logo { height: 88px; max-width: 180px; }
}

/* ── Formulario de contacto → WhatsApp, sin backend (§10.6) ─────────────
   Reutiliza .sp-field-label/.sp-input-group de sport-performance.css (ya
   estilan <input>) para nombre/teléfono; select/textarea se completan aquí
   porque esas reglas solo cubren <input>. ────────────────────────────── */
.sp-pub-form-card {
  background: #fff;
  border-radius: var(--sp-r-lg);
  padding: 28px;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
  box-shadow: var(--sp-shadow-lg);
}
.sp-pub-form-card .sp-field-label { color: var(--sp-ink); }
.sp-pub-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .sp-pub-form-row { grid-template-columns: 1fr; } }
.sp-pub-form-card select,
.sp-pub-form-card textarea {
  width: 100%;
  border: 1px solid #d8dee8;
  border-radius: var(--sp-r-sm);
  padding: .65rem .85rem;
  font-family: var(--sp-body);
  font-size: .92rem;
  color: var(--sp-ink);
  background: #fff;
}
.sp-pub-form-card select:focus,
.sp-pub-form-card textarea:focus { outline: 2px solid var(--sp-navy-600); outline-offset: 1px; }
.sp-pub-form-card textarea { resize: vertical; min-height: 90px; }
.sp-pub-form-card button[type="submit"] { width: 100%; margin-top: 6px; }

/* ── "Estamos para ti" — banda de contacto con foto de fondo (contacto_fondo) ──
   Foto real (<picture>+WebP) en vez de background-image — mismo motivo y
   mismo patrón que el hero (PageSpeed móvil, ronda de cierre —
   docs/FASE_WEB_PAGINAS.md §11): un background-image no lo descubre el
   preload scanner ni admite <source type="image/webp">. Como esta sección
   no es LCP (va debajo del pliegue), la foto es loading="lazy", a
   diferencia del hero. Orden de pintado explícito por z-index porque
   ::before siempre se pinta como si fuera el primer hijo pase lo que pase
   en el DOM — sin esto, el nuevo <picture> (hijo real, después del
   ::before en el marcado) taparía el degradado en vez de quedar debajo. */
.sp-pub-contacto {
  position: relative;
  overflow: hidden;
  padding: 64px 24px;
  text-align: center;
  color: #fff;
}
.sp-pub-contacto-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.sp-pub-contacto-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sp-pub-contacto::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(10, 29, 63, .82), rgba(23, 49, 92, .85));
}
.sp-pub-contacto > *:not(.sp-pub-contacto-bg) { position: relative; z-index: 2; }
.sp-pub-contacto h2 { color: #fff; margin: .4rem 0 1.4rem; }

/* ── "Pacientes reales" — tarjeta foto + título + texto + testimonio,
   reemplaza la banda simple original (docs/FASE_WEB_PAGINAS.md §4.1). El
   testimonio va con comillas grandes decorativas para que se lea como cita,
   distinto del texto descriptivo de arriba. ─────────────────────────────── */
.sp-pub-paciente-card {
  display: flex;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--sp-r-lg);
  box-shadow: var(--sp-shadow-md);
  overflow: hidden;
}
.sp-pub-paciente-card img {
  width: 320px;
  flex: 0 0 320px;
  object-fit: cover;
}
.sp-pub-paciente-card-body { padding: 32px 40px; display: flex; flex-direction: column; justify-content: center; }
.sp-pub-paciente-card-nombre { font-family: var(--sp-display); font-weight: 700; font-size: 1.3rem; color: var(--sp-ink); margin: 0; }
.sp-pub-paciente-card-rol {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sp-orange);
  margin: .25rem 0 .9rem;
}
.sp-pub-paciente-card-texto { color: var(--sp-ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 1.1rem; }
.sp-pub-paciente-card-quote {
  position: relative;
  margin: 0;
  padding-left: 22px;
  border-left: 3px solid var(--sp-orange);
  font-style: italic;
  color: var(--sp-ink);
  font-size: .98rem;
  line-height: 1.6;
}
.sp-pub-paciente-card-quote cite {
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-weight: 600;
  font-size: .85rem;
  color: var(--sp-muted);
}
@media (max-width: 760px) {
  .sp-pub-paciente-card { flex-direction: column; }
  .sp-pub-paciente-card img { width: 100%; height: 260px; flex-basis: auto; }
  .sp-pub-paciente-card-body { padding: 28px; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.sp-pub-footer { background: var(--sp-navy-900); color: #cfd8ee; padding: 48px 0 24px; }
.sp-pub-footer h2 {
  font-family: var(--sp-display);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  margin: 0 0 12px;
}
/* 4 columnas (Logo, Nápoles, Anzures, Servicios) — Nápoles/Anzures ya no
   comparten columna (antes se apilaban ahí y esa columna quedaba mucho
   más alta que las otras 3). Un solo salto a 1 columna en móvil; entre
   860-680px pasa a 2x2 antes de apilarse del todo, para que no se
   aprieten los textos de dirección en ese rango intermedio. */
.sp-pub-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .sp-pub-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sp-pub-footer-grid { grid-template-columns: 1fr; } }
.sp-pub-footer address { font-style: normal; font-size: .88rem; line-height: 1.6; margin: 0 0 10px; color: #b9c4dd; }
.sp-pub-wa {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; text-decoration: none; font-size: .85rem; font-weight: 600;
}
.sp-pub-wa .bi { color: #2fa25a; }
.sp-pub-wa:hover { color: var(--sp-orange); }
/* Redes sociales — solo se renderiza el ícono con URL capturada (§10.7) */
.sp-pub-footer-social { display: flex; gap: 10px; margin-top: 14px; }
.sp-pub-footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none;
  transition: background .15s ease;
}
.sp-pub-footer-social a:hover { background: var(--sp-orange); }

.sp-pub-footer-bottom {
  max-width: 1180px; margin: 32px auto 0; padding: 18px 24px 0 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: .78rem; color: #8b9ab3;
}