/*
Theme Name: Oralmaax
Theme URI: https://oralmaax.com.co
Author: Stiven Ramirez
Description: Tema a medida para Oralmaax, odontologia y cirugia maxilofacial en Medellin. Sitio multi-pagina (Inicio, Servicios, Nosotros, Turismo Dental, Blog, Contacto).
Version: 1.54.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: oralmaax
*/

:root {
  /* Paleta oficial de marca (Manual de Logo Oralmaax): Ocean Blue, Sky Blue,
     White Quartz, Blue Night, Red Cherry. --primary es el color con carga de
     marca: texto de enfasis, links, botones. Verificado: blanco-sobre-primary
     = 9.17:1, primary-sobre-blanco = 9.17:1 (ambos muy por encima de AA 4.5:1). */
  --primary: #1e458d; /* Ocean Blue, oficial */
  --primary-deep: #16346a; /* Ocean Blue oscurecido, hover/activo */
  --primary-surface: #3ec7f4; /* Sky Blue, oficial — decorativo: washes/gradientes grandes, nunca texto */
  --primary-on-dark: #3ec7f4; /* Sky Blue funciona directo como texto sobre --slate-navy: 7.21:1 */
  --primary-tint: #edf0f6;
  --accent-cherry: #ef486f; /* Red Cherry, oficial — un solo detalle deliberado por pagina, nunca en texto pequeno (3.6:1, falla AA en cuerpo) */
  /* CTA: Sky Blue solido + texto oscuro (no blanco) — deliberadamente distinto de --primary,
     que ya se usa en fondos degradados (page-header, service-cta, franjas de cifras). Un
     boton --primary encima de esos modulos se perdia (azul sobre azul); Sky Blue + texto
     oscuro da ~8:1 de contraste y resalta sobre cualquier fondo azul oscuro del sitio. */
  --cta: #3ec7f4;
  --cta-hover: #35a9cf;
  --cta-ink: #232c34;
  --ink: #232c34; /* Blue Night, oficial */
  --slate-navy: #232c34; /* Blue Night, mismo tono usado como fondo de secciones oscuras */
  --muted: #70767b;
  --neutral-bg: #fdfeff; /* White Quartz, oficial */
  --neutral-surface: #FFFFFF;
  --neutral-border: #e5e6e7;

  --rounded-sm: 8px;
  --rounded-md: 12px;
  --rounded-pill: 999px;

  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 96px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--neutral-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
section { position: relative; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
@media (max-width: 640px) {
  .container { padding: 0 var(--space-md); }
}

/* ---------- Typography roles ---------- */
.display {
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.headline {
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.title { font-weight: 700; font-size: 1.375rem; line-height: 1.32; letter-spacing: -0.005em; }
.body-text { font-weight: 400; font-size: 1.0625rem; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.label {
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 16px 32px;
  border-radius: var(--rounded-sm);
  border: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; }

.btn-primary { background: var(--cta); color: var(--cta-ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--cta-hover); color: var(--cta-ink); }

.btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); padding: 15px 31px; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--primary-tint); }

.btn-ghost-dark { background: transparent; color: var(--neutral-surface); border: 1px solid rgba(255,255,255,0.35); padding: 15px 31px; }
.btn-ghost-dark:hover, .btn-ghost-dark:focus-visible { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }
.btn-ghost-dark:focus-visible { outline-color: var(--neutral-surface); }

/* ---------- Nav ---------- */
/* Padding is constant; the "shrink" comes from a transform on the inner
   row instead, so the scroll-state change never triggers layout/reflow. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 48px 0;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.scrolled {
  background: rgba(247, 249, 250, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--neutral-border);
}
.nav .container {
  display: flex; align-items: center; justify-content: space-between;
  transform-origin: top center;
  transition: transform 0.3s var(--ease);
}
.nav.scrolled .container { transform: scale(0.93) translateY(-4px); }
/* Lockup oficial del manual de marca (WhatsApp Image 2026-08-26 19.07.49):
   dos bloques de color solidos, "Oral" sobre Ocean Blue y "Maax" sobre Sky
   Blue, texto blanco. A diferencia del wordmark de texto plano que tenia
   antes, estos bloques traen su propio fondo — se leen igual de bien sobre
   una foto, un header oscuro o el nav ya scrolleado, sin depender de la
   regla body.has-page-header/has-photo-hero para forzar contraste. */
.brand-lockup { display: inline-flex; align-items: center; }
.brand-blocks {
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.brand-block { padding: 8px 10px; color: var(--neutral-surface); }
.brand-block--o { background: var(--primary); display: inline-flex; align-items: center; gap: 0.02em; }
.brand-block--m { background: var(--primary-surface); }
.brand-mark { flex: none; font-size: 1.35em; color: var(--neutral-surface); }
.footer-brand .brand-blocks { font-size: 1.0625rem; }
.footer-brand .brand-block { padding: 10px 13px; }
/* Logo real (manual de marca) reemplazando la reconstruccion en CSS de bloques de color. */
.brand-logo-img { display: block; height: 30px; width: auto; }
.footer-brand .brand-logo-img { height: 30px; }
/* Manual de logo oficial: sobre fondo claro va el bloque ORAL azul con letras
   blancas (logo-om-horizontal.png); sobre fondo azul (Ocean Blue) va la variante
   "Osc" con el bloque ORAL blanco y letras azules (logo-om-horizontal-osc.png).
   Se intercambian con las mismas clases de contraste que usan los links del
   nav: sobre el hero/page-header sin scroll, y en el footer siempre. */
.brand-logo-img--osc { display: none; }
body.has-page-header .nav:not(.scrolled):not(.menu-open) .brand-logo-img--base,
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .brand-logo-img--base { display: none; }
body.has-page-header .nav:not(.scrolled):not(.menu-open) .brand-logo-img--osc,
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .brand-logo-img--osc { display: block; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a:not(.btn) {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav-links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav-links a:not(.btn):hover, .nav-links a:not(.btn):focus-visible { color: var(--primary); }
.nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-links a:not(.btn):focus-visible { outline: none; }

/* ---------- Nav: dropdown de Servicios (flyout en hover/focus, desktop) ---------- */
/* padding-bottom + margin-bottom negativo: extiende el area "hoverable" del
   li hasta pegar con el submenu, sin dejar un hueco muerto entre el link y
   el flyout (si no, el cursor pierde el hover a mitad de camino y el menu
   se cierra antes de llegar). El margen negativo cancela el alto extra para
   que no empuje el resto del nav. */
.nav-item-dropdown { position: relative; padding-bottom: 14px; margin-bottom: -14px; }
.nav-item-dropdown-row { display: contents; }
.nav-item-dropdown > .nav-item-dropdown-row > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-dropdown-caret { flex: none; transition: transform 0.25s var(--ease); }
.nav-submenu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin: -8px;
  color: var(--ink);
}
.nav-submenu-caret { transition: transform 0.25s var(--ease); }
.nav-submenu-toggle[aria-expanded="true"] .nav-submenu-caret { transform: rotate(180deg); }
.nav-item-dropdown:hover .nav-dropdown-caret,
.nav-item-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  width: max-content;
  min-width: 220px;
  max-width: 260px;
  background: var(--neutral-surface);
  border-radius: var(--rounded-md);
  box-shadow: 0 8px 24px rgba(29, 38, 46, 0.08);
  padding: var(--space-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 40;
}
.nav-item-dropdown:hover .nav-submenu,
.nav-item-dropdown:focus-within .nav-submenu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.nav-submenu li { list-style: none; }
.nav-submenu a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--rounded-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover, .nav-submenu a:focus-visible { background: var(--primary-tint); color: var(--primary); outline: none; }

/* Internal pages open on a solid dark page-header; the home hero opens on
   a real photo instead — pero el gorro/tapabocas del staff en esa foto es
   claro y queda directamente detras del nav, asi que el ink oscuro por
   defecto tambien pierde contraste ahi (no solo en el page-header solido).
   Mismo mecanismo para ambos: forzar blanco mientras el nav no ha hecho
   scroll; .nav.scrolled ya trae su propio fondo claro donde el ink oscuro
   vuelve a ser correcto. El brand-lockup ya no necesita esto (trae su
   propio fondo de color), solo los links de texto. */
body.has-page-header .nav:not(.scrolled):not(.menu-open) .nav-links > li > a:not(.btn),
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .nav-links > li > a:not(.btn),
body.has-page-header .nav:not(.scrolled):not(.menu-open) .nav-links > li > .nav-item-dropdown-row > a:not(.btn),
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .nav-links > li > .nav-item-dropdown-row > a:not(.btn) {
  color: var(--neutral-surface);
}
body.has-page-header .nav:not(.scrolled):not(.menu-open) .nav-links > li > a:not(.btn)::after,
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .nav-links > li > a:not(.btn)::after,
body.has-page-header .nav:not(.scrolled):not(.menu-open) .nav-links > li > .nav-item-dropdown-row > a:not(.btn)::after,
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .nav-links > li > .nav-item-dropdown-row > a:not(.btn)::after {
  background: var(--neutral-surface);
}
.nav-cta-mobile { display: none; }
.nav-cta { display: flex; align-items: center; gap: var(--space-md); }
.nav-cta .btn { padding: 12px 24px; font-size: 0.875rem; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 12px; margin: -12px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
body.has-page-header .nav:not(.scrolled):not(.menu-open) .nav-toggle span,
body.has-photo-hero .nav:not(.scrolled):not(.menu-open) .nav-toggle span { background: var(--neutral-surface); }

@media (max-width: 860px) {
  .nav-links { position: fixed; inset: 0; background: var(--neutral-bg); flex-direction: column; justify-content: center; gap: var(--space-xl); transform: translateY(-100%); opacity: 0; transition: transform 0.35s var(--ease), opacity 0.3s var(--ease); }
  .nav-links.open { transform: translateY(0); opacity: 1; }
  .nav-links a:not(.btn) { font-size: 1.5rem; }
  .nav-dropdown-caret { display: none; }
  .nav-item-dropdown { padding-bottom: 0; margin-bottom: 0; }
  .nav-item-dropdown-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
  .nav-submenu-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-submenu {
    position: static;
    opacity: 1; pointer-events: auto; transform: none;
    box-shadow: none; background: transparent; padding: 0;
    width: 100%; min-width: 0; max-width: none;
    max-height: 0; overflow: hidden;
    text-align: center;
    transition: max-height 0.3s var(--ease);
  }
  .nav-item-dropdown.open .nav-submenu { max-height: 480px; }
  .nav-submenu a { font-size: 1.0625rem; padding: 10px 0; }
  .nav-cta-mobile { display: block; margin-top: var(--space-md); }
  .nav-toggle { display: block; z-index: 60; }
  .nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav-submenu { transition: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: min(92vh, 900px);
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--primary-deep);
}
/* .hero-media es el que se mueve con el parallax (data-parallax en JS);
   la imagen adentro mantiene su propia animacion de entrada (scale) sin
   pisar el transform del scroll — son elementos distintos a proposito. */
.hero-media { position: absolute; left: 0; right: 0; top: -6%; height: 112%; overflow: hidden; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Doble capa: la vertical (abajo->arriba) mas la horizontal (izq->der,
   donde vive el texto) — una sola direccion no bastaba, el titular caia
   sobre gorros/tapabocas claros del staff y perdia contraste incluso con
   el scrim vertical al 50-60% en esa zona. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22,52,106,0.74) 0%, rgba(22,52,106,0.24) 48%, rgba(22,52,106,0) 72%),
    linear-gradient(0deg, rgba(22,52,106,0.94) 0%, rgba(22,52,106,0.6) 42%, rgba(22,52,106,0.08) 72%);
}
.hero-content {
  position: relative;
  width: 100%;
  padding-top: 140px;
  padding-bottom: var(--space-2xl);
  color: var(--neutral-surface);
}
.hero-content .display {
  color: var(--neutral-surface);
  max-width: 30ch;
  margin-bottom: var(--space-lg);
  text-wrap: pretty;
}
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.22);
}
.hero-foot .body-text { color: rgba(255,255,255,0.78); font-size: 1.0625rem; max-width: 46ch; margin: 0; }
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; flex: none; }
@media (max-width: 900px) {
  .hero { height: auto; min-height: min(88vh, 680px); align-items: stretch; flex-direction: column; }
  .hero-media img { object-position: 82% 35%; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(22,52,106,0.84) 0%, rgba(22,52,106,0.6) 42%, rgba(22,52,106,0.87) 100%);
  }
  .hero-content { padding-top: 120px; order: 1; }
  .hero-content .display { max-width: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .hero-badge { left: var(--space-md); bottom: var(--space-md); max-width: calc(100% - 32px); }
}

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--neutral-border); border-bottom: 1px solid var(--neutral-border); background: var(--neutral-surface); }
.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.trust-item { padding: 0 var(--space-md); border-left: 1px solid var(--neutral-border); }
.trust-item:first-child { border-left: none; padding-left: 0; }
.trust-item .title { color: var(--primary); margin-bottom: 4px; }
.trust-item .body-text { font-size: 0.9375rem; }

@media (max-width: 700px) {
  .trust-strip .container { grid-template-columns: 1fr; gap: var(--space-md); }
  .trust-item { border-left: none; border-top: 1px solid var(--neutral-border); padding: var(--space-md) 0 0; }
  .trust-item:first-child { border-top: none; padding-top: 0; }
}

/* ---------- Section shell ---------- */
.section { padding: 80px 0; }
.section-head { margin-bottom: var(--space-lg); }
.section-head .headline { margin-bottom: 0; }
.section-head--center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-2xl); }
.section-head--center .headline { margin-bottom: var(--space-md); }
.section-head--center .body-text { max-width: none; margin: 0 auto; }

/* ---------- Badge de reseñas reales de Doctoralia (221 reseñas, 5.0) ---------- */
.doctoralia-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--space-md);
  padding: 10px 18px;
  border-radius: var(--rounded-pill);
  border: 1px solid var(--neutral-border);
  color: var(--ink);
  font-size: 0.875rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.doctoralia-badge svg { color: var(--primary); }
.doctoralia-badge:hover { background: var(--primary-tint); border-color: var(--primary-tint); }
.doctoralia-badge strong { color: var(--ink); }

/* ---------- Page header (paginas internas) ---------- */
.page-header {
  position: relative;
  background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: var(--neutral-surface);
  padding: 168px 0 var(--space-2xl);
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 0%, rgba(62,199,244,0.3) 0%, rgba(62,199,244,0) 55%);
  pointer-events: none;
}
.page-header .container { position: relative; }
.page-header .breadcrumb {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.page-header .breadcrumb a { color: rgba(255,255,255,0.75); }
.page-header .breadcrumb a:hover { color: var(--neutral-surface); }
.page-header .headline { color: var(--neutral-surface); max-width: 26ch; margin-bottom: var(--space-md); }
.page-header .body-text { color: rgba(255,255,255,0.7); font-size: 1.0625rem; max-width: 58ch; }
@media (max-width: 640px) {
  .page-header { padding: 140px 0 var(--space-xl); }
}

/* ---------- Buscador "¿que necesitas?" (home) — alternativa a la
   calculadora de cotizacion que el cliente rechazo. Chips planos
   (Flat-At-Rest Rule: sin sombra hasta hover/activo), un solo resultado
   visible a la vez, sin recarga de pagina. ---------- */
.finder-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-lg); }
.finder-chip {
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 20px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.finder-chip:hover, .finder-chip:focus-visible { border-color: var(--primary); }
.finder-chip[aria-pressed="true"] { background: var(--primary); color: var(--neutral-surface); }
.finder-chip:focus-visible { outline: 2px solid var(--primary-deep); outline-offset: 2px; }

.finder-result {
  max-width: 560px;
  margin: 0 auto;
  background: var(--neutral-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--rounded-md);
  padding: var(--space-lg);
  text-align: left;
  animation: finder-result-in 0.25s var(--ease);
}
.finder-result .title { font-size: 1.0625rem; margin-bottom: 6px; }
.finder-result .body-text { margin-bottom: var(--space-md); }
.finder-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes finder-result-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Nosotros ---------- */
.about .container { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: center; }
.about-image { border-radius: var(--rounded-md); overflow: hidden; }
.about-image img { width: 100%; object-fit: cover; }
.about-copy .body-text { margin-bottom: var(--space-md); font-size: 1.0625rem; }
.pull-quote {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--ink);
  margin: var(--space-lg) 0;
  letter-spacing: -0.01em;
}
.pull-quote span { color: var(--accent-cherry); font-weight: 700; }

@media (max-width: 900px) {
  .about .container { grid-template-columns: 1fr; }
}

/* ---------- Testimonios ----------
   Encabezado centrado + 3 cards iguales (pedido explicito del cliente,
   reemplaza el layout asimetrico anterior de 1 destacado + 2 chicas). Sin
   sombra en reposo (Flat-At-Rest Rule), sin Red Cherry (ya usado una vez
   en Nosotros — The Two Accent Rule prohibe un segundo momento por pagina).
   La comilla grande tipografica es el unico adorno, no un icono generico. */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.testimonial-card {
  background: var(--primary-tint);
  border-radius: var(--rounded-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.testimonial-card::before {
  content: '"';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--primary-surface);
  font-weight: 700;
}
.testimonial-quote {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.testimonial-meta { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-surface); color: var(--primary);
  font-weight: 700; font-size: 0.8125rem;
}
.testimonial-name { font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.testimonial-context { font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ---------- Servicios ---------- */
.services-list { border-top: 1px solid var(--neutral-border); }
.service-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--neutral-border);
  transition: background-color 0.2s var(--ease);
}
.service-row:hover { background: var(--primary-tint); }
.service-index { font-weight: 600; font-size: 1.5rem; color: var(--neutral-border); font-variant-numeric: tabular-nums; }
.service-row:hover .service-index { color: var(--primary); }
.service-body .title { margin-bottom: 6px; }
.service-body .body-text { font-size: 1rem; }
.service-link { align-self: center; color: var(--primary); font-weight: 600; font-size: 0.9375rem; display: flex; align-items: center; gap: 6px; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.service-row:hover .service-link, .service-row:focus-within .service-link { opacity: 1; transform: translateX(0); }

@media (max-width: 700px) {
  .service-row { grid-template-columns: 44px 1fr auto; }
  .service-link { opacity: 1; transform: none; padding: 10px; margin: -10px; }
  .service-link span { display: none; }
}

/* .service-link por defecto vive dentro de .service-row y solo se revela en
   hover/focus (ver arriba) — en el buscador del home no hay row que revele
   nada, necesita estar visible siempre. */
.finder-result-actions .service-link {
  opacity: 1;
  transform: none;
}

/* ---------- Servicios (home): grid con icono, reemplaza el listado
   numerado plano — mismo espiritu de .service-card (foto) que usa
   /servicios/, pero con icono en vez de foto para esta version resumen. ---------- */
.services-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.service-icon-card {
  display: block;
  background: var(--neutral-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--rounded-md);
  padding: var(--space-lg);
  box-shadow: none;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.service-icon-card:hover, .service-icon-card:focus-visible { box-shadow: 0 12px 28px rgba(29, 38, 52, 0.1); transform: translateY(-3px); border-color: transparent; }
.service-icon-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--rounded-sm);
  background: var(--primary-tint);
  color: var(--primary);
  margin-bottom: var(--space-md);
}
.service-icon-img { width: 28px; height: 28px; object-fit: contain; }
.service-icon-card .title { font-size: 1.1875rem; margin-bottom: 8px; }
.service-icon-card .body-text { font-size: 0.9375rem; margin-bottom: var(--space-md); }
.service-icon-card:hover .service-card-cta svg { transform: translateX(4px); }

/* ---------- Turismo dental ---------- */
.tourism { background: var(--primary-deep); color: var(--neutral-surface); }
.tourism .section-head .headline { color: var(--neutral-surface); }
.tourism .section-head .body-text { color: rgba(255,255,255,0.72); }
.tourism-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.tourism-featured {
  border-radius: var(--rounded-md);
  padding: var(--space-xl);
  background: linear-gradient(160deg, rgba(31,107,135,0.35), rgba(31,107,135,0.06));
  border: 1px solid rgba(168,201,217,0.28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tourism-featured .title { font-size: 1.75rem; color: var(--neutral-surface); margin-bottom: 10px; }
.tourism-featured .body-text { color: rgba(255,255,255,0.75); font-size: 1rem; }
.tourism-side { display: flex; flex-direction: column; gap: var(--space-md); }
.tourism-card { border-top: 1px solid rgba(255,255,255,0.16); padding-top: var(--space-md); }
.tourism-card .title { color: var(--neutral-surface); margin-bottom: 6px; font-size: 1.125rem; }
.tourism-card .body-text { color: rgba(255,255,255,0.68); font-size: 0.9375rem; }
.tourism-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

@media (max-width: 800px) {
  .tourism-grid { grid-template-columns: 1fr; }
  .tourism-featured { padding: var(--space-lg); }
}

/* ---------- Equipo ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
.team-card {
  background: var(--neutral-surface);
  border-radius: var(--rounded-md);
  padding: var(--space-md);
  box-shadow: none;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.team-card:hover { box-shadow: 0 8px 24px rgba(29, 38, 46, 0.08); transform: translateY(-2px); }
.team-photo-wrap {
  border-radius: var(--rounded-sm);
  overflow: hidden;
  margin-bottom: var(--space-md);
  background: var(--ink);
}
.team-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--neutral-bg);
  transition: transform 0.45s var(--ease), filter 0.3s var(--ease);
  filter: grayscale(22%) saturate(1.05) contrast(1.04) brightness(1.01);
}
.team-card:hover .team-photo { filter: grayscale(0%) saturate(1.1) contrast(1.04) brightness(1.02); transform: scale(1.06); }
/* Variante sin foto real todavia (mismo criterio que .service-card-mark):
   inicial del especialista sobre panel de color, nunca una imagen equivocada
   ni un icono generico mientras llega la foto real. */
.team-photo-mark {
  aspect-ratio: 1;
  border-radius: var(--rounded-sm);
  background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 3rem;
  color: rgba(255,255,255,0.16);
}
.team-name { margin-bottom: 4px; font-size: 1.0625rem; }
.team-specialty { color: var(--primary); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.02em; margin-bottom: 10px; display: block; }
.team-bio { font-size: 0.875rem; line-height: 1.6; color: var(--muted); }

/* ---------- Financing banner ---------- */
.financing { background: var(--primary-tint); }
.financing .container { display: grid; grid-template-columns: 1fr auto; gap: var(--space-lg); align-items: center; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.financing .headline { margin-bottom: 8px; }
.financing .body-text { color: var(--ink); opacity: 0.75; }

@media (max-width: 700px) {
  .financing .container { grid-template-columns: 1fr; text-align: left; }
}

/* ---------- Home: banner sutil de turismo dental (antes era una seccion
   completa duplicando el contenido de /turismo-dental/ — se redujo a un
   link con contexto, el detalle real vive solo en la pagina dedicada). ---------- */
.tourism-teaser { background: var(--neutral-surface); border-top: 1px solid var(--neutral-border); border-bottom: 1px solid var(--neutral-border); }
.tourism-teaser-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); padding-bottom: var(--space-lg); flex-wrap: wrap; }
.tourism-teaser-copy { display: flex; align-items: center; gap: var(--space-md); }
.tourism-teaser-copy .icon-badge { margin-bottom: 0; flex: none; }
.tourism-teaser-copy .title { font-size: 1.0625rem; margin-bottom: 2px; }
.tourism-teaser-copy .body-text { font-size: 0.9375rem; }

/* ---------- Contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-info-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); }
.contact-info-item .label { color: var(--primary); display: block; margin-bottom: 6px; }
.contact-map { border-radius: var(--rounded-md); overflow: hidden; border: 1px solid var(--neutral-border); }
.contact-map iframe { display: block; width: 100%; height: 340px; border: 0; }
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-form label { font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; display: block; }
.contact-form input, .contact-form textarea {
  width: 100%; font-family: var(--font); font-size: 0.9375rem;
  padding: 13px 16px; border-radius: var(--rounded-sm);
  border: 1px solid var(--neutral-border); background: var(--neutral-surface);
  color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.contact-form textarea { min-height: 120px; resize: vertical; }

/* Contact Form 7 renders each field inside <label>text <span class="wpcf7-form-control-wrap">
   <input></span></label> — la etiqueta ya recibe el estilo de .contact-form label, aquí solo se
   ajusta el wrapper del input para que caiga en su propia línea y el resto herede lo ya definido. */
.contact-form .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.contact-form p { margin: 0; }
.contact-form .wpcf7-submit { align-self: flex-start; cursor: pointer; }
.contact-form .wpcf7-spinner { margin-left: 10px; }
.contact-form .wpcf7-not-valid-tip { font-size: 0.8125rem; margin-top: 4px; }
.contact-form .wpcf7-response-output {
  margin: 0; padding: 12px 16px; border-radius: var(--rounded-sm);
  font-size: 0.875rem; border-width: 1px; border-style: solid;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.blog-card { background: var(--neutral-surface); border-radius: var(--rounded-md); overflow: hidden; transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); }
.blog-card:hover { box-shadow: 0 8px 24px rgba(29, 38, 46, 0.08); transform: translateY(-2px); }
.blog-card-media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card .title { padding: var(--space-md) var(--space-md) 8px; font-size: 1.125rem; }
.blog-card .title a { transition: color 0.2s var(--ease); }
.blog-card .title a:hover { color: var(--primary); }
.blog-card .body-text { padding: 0 var(--space-md) var(--space-md); font-size: 0.9375rem; }
.post-content { max-width: 68ch; }
.post-content p { color: var(--ink); font-size: 1.0625rem; line-height: 1.75; margin-bottom: var(--space-md); }
.post-content h2 { font-size: 1.625rem; font-weight: 700; margin: var(--space-lg) 0 var(--space-sm); }
.post-meta { color: var(--muted); font-size: 0.875rem; margin-bottom: var(--space-md); }

/* ---------- Footer ---------- */
footer { background: var(--primary-deep); color: rgba(255,255,255,0.85); padding: var(--space-2xl) 0 var(--space-lg); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand .brand-lockup { margin-bottom: var(--space-md); }
.footer-brand .body-text { color: rgba(255,255,255,0.62); font-size: 0.9375rem; }
.footer-col .label { color: var(--primary-on-dark); display: block; margin-bottom: var(--space-md); }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.75); font-size: 0.9375rem; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--neutral-surface); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-lg); flex-wrap: wrap; gap: var(--space-md); }
.footer-bottom .body-text { color: rgba(255,255,255,0.5); font-size: 0.8125rem; }

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; top: -100px; left: var(--space-md); z-index: 100;
  background: var(--primary); color: var(--neutral-surface); padding: 12px 20px;
  border-radius: var(--rounded-sm); font-weight: 600; font-size: 0.9375rem;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-md); }

/* ---------- WhatsApp float ---------- */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(31, 107, 135, 0.35);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.06); background: var(--primary-deep); }

/* ---------- Reveal ----------
   Dos variantes a proposito, no la misma animacion pegada en todo: texto
   y tarjetas suben (reveal-rise), fotografia grande entra con un scale-in
   mas lento (reveal-media) — el "tell" de IA no es el reveal-on-scroll en
   si, es aplicar la misma entrada identica sin importar que se revela. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-init.in-view {
    animation: reveal-rise 0.55s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal-init--media.in-view {
    animation: reveal-media 0.9s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}
@keyframes reveal-rise {
  from { opacity: 0.35; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes reveal-media {
  from { opacity: 0.5; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Hero entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: hero-media-in 1.4s var(--ease) both; }
  .hero-content .display { animation: hero-rise 0.8s var(--ease) both 0.15s; }
  .hero-foot { animation: hero-rise 0.8s var(--ease) both 0.32s; }
  .hero-badge { animation: hero-rise 0.8s var(--ease) both 0.5s; }
}
@keyframes hero-rise {
  from { opacity: 0.3; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-media-in {
  from { opacity: 0.6; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Servicios: grid de catálogo (interna /servicios/) -----------
   Deliberadamente distinto del listado vertical numerado del home
   (.services-list/.service-row): aquí es un grid de exploración con foto,
   no una lista de texto con CTA directo a WhatsApp. */
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.service-card {
  display: block;
  background: var(--neutral-surface);
  border-radius: var(--rounded-md);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--neutral-border);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.service-card:hover, .service-card:focus-visible { box-shadow: 0 12px 28px rgba(29, 38, 46, 0.1); transform: translateY(-3px); }
.service-card-photo-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--ink); }
.service-card-photo {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(30%) saturate(1.05) contrast(1.03);
  transition: transform 0.5s var(--ease), filter 0.3s var(--ease);
}
.service-card:hover .service-card-photo { transform: scale(1.06); filter: grayscale(0%) saturate(1.1); }
.service-card-body { padding: var(--space-lg); }
.service-card-body .title { font-size: 1.1875rem; margin-bottom: 8px; }
.service-card-body .body-text { font-size: 0.9375rem; margin-bottom: var(--space-md); }
.service-card-cta { display: flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 0.9375rem; }
.service-card-cta svg { transition: transform 0.2s var(--ease); }
.service-card:hover .service-card-cta svg { transform: translateX(4px); }

/* Variante sin foto real de especialista (Endodoncia) — panel de color con
   la inicial del servicio como marca tipografica, nunca un icono generico. */
.service-card--solo .service-card-mark {
  aspect-ratio: 4/3;
  background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 4rem;
  color: rgba(255,255,255,0.14);
  letter-spacing: -0.02em;
}

/* ---------- Servicio (detalle individual) -----------
   Hero tipografico a pantalla completa: un wash de marca (Ocean Blue ->
   Sky Blue), nunca una foto de especialista de fondo (una cara no
   representa un tratamiento). La foto real del especialista vive mas abajo,
   en la linea "A cargo de", donde si tiene sentido contextual. */
.service-hero-full {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--primary-deep);
  color: var(--neutral-surface);
}
/* Foto real del servicio detras del wash (feedback del cliente: "el banner
   deberia tener imagen, como la tiene el home"). El wash se vuelve un
   tinte semitransparente sobre la foto en vez de un color solido — si no
   hay banner para un servicio, sigue funcionando igual de bien como fondo
   solido (el fallback de .service-hero-full es --primary-deep). */
.service-hero-full-media { position: absolute; inset: 0; overflow: hidden; }
.service-hero-full-media img { width: 100%; height: 100%; object-fit: cover; }
.service-hero-full-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(62,199,244,0.35) 0%, rgba(62,199,244,0) 55%),
    linear-gradient(100deg, var(--primary-deep) 0%, rgba(30,69,141,0.72) 45%, rgba(30,69,141,0.42) 100%);
}
.service-hero-full-inner { position: relative; padding-top: 96px; padding-bottom: 96px; }
.service-hero-full .breadcrumb--dark { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 500; color: rgba(255,255,255,0.62); margin-bottom: var(--space-md); }
.service-hero-full .breadcrumb--dark a { color: rgba(255,255,255,0.9); }
.service-hero-full .breadcrumb--dark a:hover { color: var(--neutral-surface); }
.service-hero-full .display { color: var(--neutral-surface); max-width: 16ch; margin-bottom: var(--space-md); }
.service-hero-full .body-text { color: rgba(255,255,255,0.78); font-size: 1.125rem; max-width: 46ch; margin-bottom: var(--space-lg); }
.service-hero-full .hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

.service-specialist-line { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-xl); max-width: 68ch; }
.service-specialist-line img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.service-specialist-line p { font-size: 1rem; color: var(--ink); }
.service-specialist-avatars { display: flex; flex: none; }
.service-specialist-avatars img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--neutral-surface);
}
.service-specialist-avatars img:not(:first-child) { margin-left: -16px; }
.service-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-xl);
  border-top: 1px solid var(--neutral-border);
  border-bottom: 1px solid var(--neutral-border);
}
.service-fact { padding-left: var(--space-md); border-left: 1px solid var(--neutral-border); }
.service-fact:first-child { border-left: none; padding-left: 0; }
.service-fact .label { color: var(--primary); display: block; margin-bottom: 6px; }
.service-fact .value { font-weight: 600; font-size: 1.0625rem; color: var(--ink); line-height: 1.4; }
@media (max-width: 700px) {
  .service-facts { grid-template-columns: 1fr; gap: var(--space-md); padding: var(--space-md) 0; }
  .service-fact { border-left: none; padding-left: 0; border-top: 1px solid var(--neutral-border); padding-top: var(--space-md); }
  .service-fact:first-child { border-top: none; padding-top: 0; }
}

/* ---------- Servicio: layout de 2 columnas — el texto ya no vive solo en
   una columna angosta centrada con margenes muertos a los lados; la galeria
   real del tratamiento se mueve al costado (sticky en desktop) en vez de
   vivir hasta el fondo de la pagina, mucho despues de que el usuario ya
   dejo de leer. En mobile, order:-1 hace que la galeria aparezca primero
   (justo despues de los facts), sin duplicar markup para cada breakpoint. */
.service-body-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
.service-body-main { max-width: 68ch; }
.service-body-aside { order: -1; }
.service-aside-label { color: var(--primary); margin-bottom: var(--space-sm); }
@media (min-width: 961px) {
  .service-body-grid { grid-template-columns: 1fr 420px; column-gap: var(--space-2xl); align-items: start; }
  .service-body-aside { order: 0; position: sticky; top: 110px; }
}

/* ---------- Icono decorativo compartido por tarjetas de senales/tipos ---------- */
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  margin-bottom: var(--space-md);
}
/* Sobre el fondo tintado de .service-signals, el badge necesita su propio
   fondo blanco para no desaparecer (tint sobre tint = sin contraste). */
.service-signals .icon-badge { background: var(--neutral-surface); }

.service-content-html > .body-text { margin-bottom: var(--space-lg); }
.service-content-html > .body-text:first-child { font-size: 1.1875rem; color: var(--ink); max-width: none; margin-bottom: var(--space-xl); }
.service-content-html h2 { font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em; margin: 0 0 var(--space-md); }
.service-content-html .pull-quote { margin: var(--space-xl) 0; }

.process-list { display: flex; flex-direction: column; gap: var(--space-md); counter-reset: process; margin-bottom: var(--space-xl); }
.process-list li { list-style: none; display: grid; grid-template-columns: 36px 1fr; gap: var(--space-md); counter-increment: process; }
.process-list li::before {
  content: counter(process);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9375rem;
}
.process-list li span { color: var(--muted); font-size: 1.0625rem; line-height: 1.6; padding-top: 6px; }

.service-cta { background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%); }
.service-cta-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding-top: var(--space-xl); padding-bottom: var(--space-xl);
}
.service-cta .headline { color: var(--neutral-surface); }
.service-cta .body-text { color: rgba(255,255,255,0.68); }

/* ---------- Servicio: senales/sintomas ("¿como saber si necesito X?"),
   solo cuando el servicio se presta a auto-diagnostico por sintomas (no
   todos — endodoncia, por ejemplo, ya cubre esto en "¿Cuando tiene
   sentido?"). Fondo tintado en vez del borde de .service-variant-card,
   para que esta seccion (reconoce tu caso) se distinga visualmente de
   "Tipos de tratamiento" (compara opciones) aunque ambas sean grids. */
.service-signals { background: var(--primary-tint); }
.service-signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}
.service-signal-card { padding: var(--space-md) 0; }
.service-signal-card .title { font-size: 1rem; margin-bottom: 6px; }
.service-signal-card .body-text { font-size: 0.9375rem; }

/* ---------- Servicio: tipos de tratamiento (variantes reales, solo cuando
   el servicio tiene mas de una tecnica/aparato entre los que elegir — no
   todos los servicios necesitan esta seccion). Tarjetas planas, sin link,
   sin hover-lift (Flat-At-Rest Rule: la sombra de hover es solo para
   elementos clicables como .service-card). */
.service-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.service-variant-card {
  background: var(--neutral-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--rounded-md);
  padding: var(--space-lg);
}
.service-variant-card .title { font-size: 1.0625rem; margin-bottom: 8px; }
.service-variant-card .body-text { font-size: 0.9375rem; }

/* ---------- Servicio: carrusel de galeria (bloque Gallery nativo de
   Gutenberg cuando existe; si no, slides placeholder que solo ilustran el
   espacio — nunca texto tipo "proximamente"). ---------- */
.service-carousel { position: relative; }
.service-carousel-track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.service-carousel-track::-webkit-scrollbar { display: none; }
.service-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  border-radius: var(--rounded-md);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4/3;
}
.service-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.service-carousel-slide:hover img { transform: scale(1.04); }
.service-carousel-slide--placeholder {
  background: linear-gradient(155deg, var(--primary-tint) 0%, rgba(62,199,244,0.16) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-surface);
}
.service-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--neutral-surface); border: 1px solid var(--neutral-border);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 14px rgba(35,44,52,0.12);
  transition: background-color 0.2s var(--ease);
}
.service-carousel-nav:hover { background: var(--primary-tint); }
.service-carousel-nav--prev { left: -8px; }
.service-carousel-nav--next { right: -8px; }
@media (max-width: 640px) { .service-carousel-nav { display: none; } }

/* ---------- Servicio: FAQ (con schema FAQPage inline en la plantilla) ---------- */
.faq-list { border-top: 1px solid var(--neutral-border); }
.faq-item { border-bottom: 1px solid var(--neutral-border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-md) 0;
  font-weight: 600; font-size: 1.0625rem; color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex: none; color: var(--primary); transition: transform 0.25s var(--ease); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item .body-text { padding-bottom: var(--space-md); max-width: 68ch; }

/* ---------- Inicio V2 (propuesta, page-inicio-v2.php) ---------- */
/* El hero ahora reutiliza el componente .hero/.hero-media/.hero-scrim del
   home (front-page.php) — pantalla completa en vez del hero claro partido
   en 2 columnas que tenia antes. Sin reglas hv2-hero propias. */

/* Rompe el tramo largo FAQ -> Blog -> CTA final, que corria todo en blanco
   con la misma energia — un tinte suave marca que "termino" la seccion de
   servicios/fotos y "empieza" la de cierre, sin tocar el componente FAQ en
   si (que tambien vive en single-servicio.php sobre fondo blanco). */
.hv2-faq { background: var(--primary-tint); }

.hv2-stats { background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%); padding: var(--space-xl) 0; }
.hv2-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); text-align: center; }
.hv2-stat-num { display: block; font-weight: 800; font-size: clamp(2rem, 4vw, 2.75rem); color: var(--neutral-surface); letter-spacing: -0.02em; }
.hv2-stat-label { display: block; color: rgba(255,255,255,0.75); font-size: 0.9375rem; margin-top: 4px; }
@media (max-width: 700px) { .hv2-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); } }

.service-icon-card--accent { background: linear-gradient(155deg, var(--primary) 0%, var(--primary-deep) 100%); border-color: transparent; }
.service-icon-card--accent .title, .service-icon-card--accent .body-text, .service-icon-card--accent .service-card-cta { color: var(--neutral-surface); }
.service-icon-card--accent .service-icon-box { background: rgba(255,255,255,0.16); color: var(--neutral-surface); }

.hv2-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.hv2-why-media { border-radius: var(--rounded-md); overflow: hidden; aspect-ratio: 4/3; }
.hv2-why-media img { width: 100%; height: 100%; object-fit: cover; }
.hv2-checklist { list-style: none; display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); }
.hv2-checklist li { display: flex; align-items: flex-start; gap: var(--space-md); }
.hv2-checklist .title { font-size: 1.0625rem; margin-bottom: 4px; }
.hv2-checklist .body-text { font-size: 0.9375rem; }
.hv2-check {
  flex: none; width: 28px; height: 28px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--primary); color: var(--neutral-surface);
}
@media (max-width: 900px) { .hv2-why-grid { grid-template-columns: 1fr; } .hv2-why-media { aspect-ratio: 16/10; } }

.hv2-services-cta { display: flex; justify-content: center; margin-top: var(--space-xl); }

/* Reutiliza el carrusel de .service-carousel (single-servicio.php) — la
   unica diferencia es el ancho del slide, mas grande aqui porque la tira
   va a lo ancho de la seccion en vez de vivir en un aside angosto. */
.hv2-carousel .service-carousel-slide { flex: 0 0 clamp(240px, 30vw, 380px); aspect-ratio: 3/4; }
.hv2-carousel .service-carousel-track { scroll-snap-type: x proximity; }
.hv2-carousel .service-carousel-nav--prev { left: -8px; }
.hv2-carousel .service-carousel-nav--next { right: -8px; }

.hv2-appointment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; background: var(--primary-tint); border-radius: var(--rounded-md); overflow: hidden; }
.hv2-appointment-media { aspect-ratio: 4/5; }
.hv2-appointment-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hv2-appointment-panel { padding: var(--space-xl) var(--space-xl) var(--space-xl) 0; }
.hv2-appointment-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: var(--space-md) 0 var(--space-lg); }
.hv2-appointment-list li { position: relative; padding-left: 24px; font-size: 0.9375rem; color: var(--ink); }
.hv2-appointment-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
@media (max-width: 900px) {
  .hv2-appointment-grid { grid-template-columns: 1fr; }
  .hv2-appointment-media { aspect-ratio: 16/10; }
  .hv2-appointment-panel { padding: var(--space-lg); }
}

/* Logros (donuts) — PLACEHOLDER, ver comentario en page-inicio-v2.php.
   El anillo se "llena" con una transicion CSS normal en vez de JS: el
   stroke-dashoffset arranca en la circunferencia completa (anillo vacio) y
   .in-view (ya la agrega el IntersectionObserver de reveal-init) lo baja al
   offset real vía la custom property --offset fijada inline por item. */
.hv2-achievements-grid { display: flex; justify-content: center; gap: var(--space-2xl); flex-wrap: wrap; text-align: center; }
.hv2-achievement { display: flex; flex-direction: column; align-items: center; max-width: 220px; }
.hv2-donut-wrap { position: relative; width: 120px; height: 120px; }
.hv2-donut { transform: rotate(-90deg); }
.hv2-donut-track { fill: none; stroke: var(--neutral-border); stroke-width: 10; }
.hv2-donut-value { fill: none; stroke: var(--primary); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.hv2-achievement.in-view .hv2-donut-value { stroke-dashoffset: var(--offset); }
.hv2-donut-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.75rem; letter-spacing: -0.01em; color: var(--ink); }
.hv2-achievement .title { margin-top: var(--space-sm); font-size: 1.0625rem; }
.hv2-achievement .body-text { font-size: 0.875rem; margin-top: 4px; }

.hv2-trustrow { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--neutral-border); }
.hv2-trustrow-names { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.hv2-trustrow-names span { font-weight: 700; font-size: 1.0625rem; color: var(--muted); letter-spacing: -0.01em; }

.hv2-subscribe-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; background: var(--primary-tint); border-radius: var(--rounded-md); padding: var(--space-lg) var(--space-xl); }
.hv2-subscribe-inner .title { margin-bottom: 4px; }
.hv2-subscribe-inner .body-text { margin: 0; }