/* ==========================================================================
   OLMED · CLÍNICA DENTAL — HOJA DE ESTILOS
   --------------------------------------------------------------------------
   Índice de secciones
     01. Tokens de diseño (variables)
     02. Reset y estilos base
     03. Utilidades y componentes compartidos
     04. Barra superior (app-bar)
     05. Navegación inferior (tab-bar)
     06. Secciones (espaciado general)
     07. Portada (hero · inicio)
     08. Servicios (grid de tiles)
     09. Casos (antes / después)
     10. Especialista (doctor)
     11. Contacto, horario y CTA
     12. Pie de página
     13. Media queries (responsive)
     14. Tema oscuro
   ========================================================================== */

/* ==========================================================
   01. TOKENS DE DISEÑO (VARIABLES)
   ========================================================== */
:root {
  --teal-900: #134e4a;
  --teal-800: #0f766e;
  --teal-700: #0d9488;
  --teal-600: #14b8a6;
  --teal-500: #2dd4bf;
  --teal-100: #ccfbf1;
  --teal-50: #f0fdfa;

  --ink: #0b1f2a;
  --muted: #5b6f78;
  --bg: #f4fbf9;
  --surface: #fff;
  --line: #e2edeb;
  --wa: #25d366;

  /* Tokens semánticos: cambian con el tema oscuro (sección 14) */
  --accent: var(--teal-700);
  --accent-soft: var(--teal-50);
  --accent-line: var(--teal-100);
  --app-bar-bg: rgba(255, 255, 255, 0.9);
  --tab-bar-bg: rgba(255, 255, 255, 0.96);
  --hero-glow: var(--teal-100);
  --hero-top: #eefbf8;
  --hero-fade-rgb: 238, 251, 248;

  /* Iconos de la cabecera: tema y acceso al sistema */
  --header-icon: var(--teal-700);
  --header-icon-hover: var(--teal-800);
  --header-halo: var(--teal-100);

  /* Muelita animada (cabecera y sistema) */
  --tooth-fill: var(--teal-100);
  --tooth-stroke: var(--teal-700);
  --tooth-glow-fill: #fff;
  --tooth-glow-stroke: var(--teal-600);

  --shadow-sm:
    0 1px 2px rgba(15, 61, 59, 0.05), 0 4px 12px rgba(15, 61, 59, 0.06);
  --shadow-lg: 0 18px 45px rgba(15, 61, 59, 0.14);

  --radius: 20px;

  --font-sans:
    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-display: "Fraunces", Georgia, serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================
   02. RESET Y ESTILOS BASE
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(76px + var(--safe-top));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(78px + var(--safe-bottom));
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

/* ==========================================================
   03. UTILIDADES Y COMPONENTES COMPARTIDOS
   ========================================================== */

/* Accesibilidad — enlace para saltar al contenido */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
}
.skip-link:focus {
  top: 12px;
}

/* Contenedor principal */
.container {
  width: min(100% - 36px, 1080px);
  margin-inline: auto;
}

/* Sprite SVG e iconos */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon-fill {
  fill: currentColor;
  stroke: none;
}

/* Kicker (etiqueta decorativa de sección) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal-500);
}

/* Encabezado de sección */
.section-heading {
  margin-bottom: 20px;
}
.section-heading h2 {
  font-size: clamp(24px, 6vw, 30px);
  margin-top: 8px;
}

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.btn:active {
  transform: scale(0.97);
}
.btn .icon {
  width: 21px;
  height: 21px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--teal-700), var(--teal-600));
  color: #fff;
  box-shadow: 0 12px 26px rgba(13, 148, 136, 0.35);
}
.btn-primary:hover {
  box-shadow: 0 16px 32px rgba(13, 148, 136, 0.45);
}
.btn-lg {
  padding: 17px 26px;
  font-size: 17px;
}
.btn-block {
  width: 100%;
}

/* Foco visible para teclado */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal-500);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Nota al pie para los casos */
.note {
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
}

/* Animación de aparición al hacer scroll */
.reveal {
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
html.js .reveal:not(.in-view) {
  opacity: 0;
  transform: translateY(18px);
}

/* Movimiento reducido (accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* El tintineo de la muelita tiene su propia excepción: ver
     "Variante suave para «movimiento reducido»" al final de la sección 04 */
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  /* Excepción: el resumen de los servicios conserva un movimiento muy corto.
     Sin animación, al abrirlo la sección de abajo salta ~100 px de golpe,
     que desorienta más que una transición breve. La curva arranca despacio
     para que el desplazamiento no se perciba como un salto. */
  .tile-more {
    transition:
      max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.24s ease,
      visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* ==========================================================
   04. BARRA SUPERIOR (APP-BAR)
   ========================================================== */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(62px + var(--safe-top));
  padding: var(--safe-top) 20px 0;
  background: var(--app-bar-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.brand img {
  height: 85px;
  width: auto;
}
.brand-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--teal-900);
}
/* Acciones de la cabecera: botón de tema + acceso al sistema */
.appbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
/* Tema y acceso al sistema comparten aspecto: iconos de línea sin aro.
   El halo solo aparece al pasar el cursor o al enfocar con teclado. */
.theme-toggle,
.appbar-cta {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--header-icon);
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}
.theme-toggle:hover,
.appbar-cta:hover,
.theme-toggle:focus-visible,
.appbar-cta:focus-visible {
  background: var(--header-halo);
  color: var(--header-icon-hover);
}
.theme-toggle:active,
.appbar-cta:active {
  transform: scale(0.94);
}
/* Botón de tema claro / oscuro (muestra luna o sol según el tema) */
.theme-toggle .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}
.theme-toggle .icon-sun {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

/* Acceso al sistema: muelita que tintinea (solo ella está animada) */
.appbar-cta {
  position: relative;
}
.appbar-cta .icon-tooth-jingle {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transform-origin: 50% 90%;
  animation: tooth-jingle 3.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.appbar-cta:hover .icon-tooth-jingle,
.appbar-cta:focus-visible .icon-tooth-jingle {
  animation-duration: 1.3s;
}
/* Destellos que acompañan al tintineo */
.appbar-spark {
  position: absolute;
  width: 11px;
  height: 11px;
  fill: var(--teal-500);
  stroke: none;
  opacity: 0;
  pointer-events: none;
  animation: spark-twinkle 3.8s ease-in-out infinite;
}
.appbar-spark-a {
  top: 6px;
  right: 6px;
  width: 9px;
  height: 9px;
}
.appbar-spark-b {
  bottom: 8px;
  left: 6px;
  width: 7px;
  height: 7px;
  animation-delay: 0.22s;
}

/* Sacudida tipo campanilla: se mueve y descansa */
@keyframes tooth-jingle {
  0%,
  58% {
    transform: rotate(0deg) scale(1);
  }
  64% {
    transform: rotate(-16deg) scale(1.07);
  }
  70% {
    transform: rotate(14deg) scale(1.07);
  }
  76% {
    transform: rotate(-10deg) scale(1.04);
  }
  82% {
    transform: rotate(7deg) scale(1.03);
  }
  88% {
    transform: rotate(-3deg) scale(1.01);
  }
  94%,
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes spark-twinkle {
  0%,
  56% {
    opacity: 0;
    transform: scale(0.3) rotate(0deg);
  }
  63% {
    opacity: 1;
    transform: scale(1.15) rotate(25deg);
  }
  74% {
    opacity: 0.85;
    transform: scale(1) rotate(40deg);
  }
  86%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(55deg);
  }
}

/* Variante suave para «movimiento reducido»: la muelita no se sacude
   ni destella, solo lanza dos destellos de luz (relleno y trazo más
   claros) con un brillo lento en el aro del botón. Sin giros ni
   desplazamientos, que es lo que molesta a quien pide menos movimiento. */
@keyframes tooth-soft-glow {
  0%,
  52%,
  100% {
    opacity: 1;
    fill: var(--tooth-fill);
    stroke: var(--tooth-stroke);
  }
  64% {
    opacity: 0.94;
    fill: var(--tooth-glow-fill);
    stroke: var(--tooth-glow-stroke);
  }
  76% {
    opacity: 1;
    fill: var(--tooth-fill);
    stroke: var(--tooth-stroke);
  }
  88% {
    opacity: 0.96;
    fill: var(--tooth-glow-fill);
    stroke: var(--tooth-glow-stroke);
  }
}
/* Variante suave para «movimiento reducido» de la muelita de la cabecera:
   es un icono de línea, así que no se rellena ni gira; solo pulsa el brillo
   de su contorno. Sin desplazamientos, que es lo que molesta a quien pide
   menos movimiento. */
@keyframes tooth-line-glow {
  0%,
  52%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
  64% {
    opacity: 0.9;
    filter: drop-shadow(0 0 6px var(--tooth-glow-stroke));
  }
  76% {
    opacity: 1;
    filter: drop-shadow(0 0 0 transparent);
  }
  88% {
    opacity: 0.94;
    filter: drop-shadow(0 0 4px var(--tooth-glow-stroke));
  }
}

/* Excepción a la regla global de la sección 03: el tintineo completo se
   mantiene para todos, salvo para quien pide movimiento reducido, que
   recibe un pulso suave. */
@media (prefers-reduced-motion: reduce) {
  /* La muelita de la cabecera es un icono de línea: pulsa su brillo. */
  .appbar-cta .icon-tooth-jingle {
    animation: tooth-line-glow 4.6s ease-in-out infinite !important;
  }
  /* En sistema.html el badge lleva relleno y conserva su variante. */
  .sys-badge .icon-tooth-jingle {
    animation: tooth-soft-glow 4.6s ease-in-out infinite !important;
  }
  /* Sin movimiento no hay destellos que acompañen: se ocultan */
  .appbar-cta .appbar-spark,
  .sys-badge .appbar-spark {
    display: none;
  }
  /* El pulso no se acelera al pasar el cursor */
  .appbar-cta:hover .icon-tooth-jingle,
  .appbar-cta:focus-visible .icon-tooth-jingle {
    animation-duration: 4.6s !important;
  }
}

/* ==========================================================
   05. NAVEGACIÓN INFERIOR (TAB-BAR)
   ========================================================== */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  background: var(--tab-bar-bg);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(8px + var(--safe-bottom));
  box-shadow: 0 -8px 30px rgba(15, 61, 59, 0.08);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0;
  font-weight: 600;
  color: var(--muted);
  border-radius: 14px;
}
.tab .icon {
  width: 24px;
  height: 24px;
}
.tab small {
  font-size: 10.5px;
  line-height: 1;
}
.tab.active {
  color: var(--accent);
}
.tab-cta {
  justify-self: center;
  width: 56px;
  height: 56px;
  margin-top: -26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-600));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px rgba(13, 148, 136, 0.4);
  border: 4px solid var(--surface);
}
.tab-cta .icon {
  width: 26px;
  height: 26px;
}

/* ==========================================================
   06. SECCIONES (ESPACIADO GENERAL)
   ========================================================== */
section {
  padding: 34px 0;
}

/* ==========================================================
   07. PORTADA (HERO · INICIO)
   ========================================================== */
.home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 30px 0 40px;
  background:
    radial-gradient(900px 380px at 90% -10%, var(--hero-glow), transparent 60%),
    linear-gradient(180deg, var(--hero-top), var(--bg));
}

/* Foto sonriente detrás de los textos.
   Se funde de izquierda (transparente) a derecha (visible) con mask-image
   y con un velo del color de la portada para no perder legibilidad. */
.home-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.home-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 8% 20%;
  opacity: 1;
  -webkit-mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 38%,
      rgba(0, 0, 0, 0.55) 64%,
      #000 84%);
  mask-image: linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 38%,
      rgba(0, 0, 0, 0.55) 64%,
      #000 84%);
}
.home-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(var(--hero-fade-rgb), 0.42) 0%,
      rgba(var(--hero-fade-rgb), 0) 24%,
      rgba(var(--hero-fade-rgb), 0) 70%,
      var(--bg) 100%),
    linear-gradient(to right,
      var(--hero-top) 0%,
      rgba(var(--hero-fade-rgb), 0.9) 38%,
      rgba(var(--hero-fade-rgb), 0.7) 56%,
      rgba(var(--hero-fade-rgb), 0.32) 72%,
      rgba(var(--hero-fade-rgb), 0.06) 88%,
      rgba(var(--hero-fade-rgb), 0) 100%);
}
.home-head {
  position: relative;
  z-index: 1;
}
.home-head h1 {
  font-size: clamp(36px, 10vw, 52px);
  margin: 12px 0 10px;
}
.home-head h1 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.home-head .lead {
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 22px;
}
.home-head .btn {
  max-width: 420px;
}

/* ==========================================================
   08. SERVICIOS (GRID DE TILES)
   Cada tarjeta muestra un resumen breve: se abre al pasar el mouse
   (escritorio), al tocarla (móvil) o con Enter/Espacio (teclado).
   El estado abierto por clic o toque es la clase .is-open.
   La altura del resumen se mide con JS (--panel-alto) para que la
   animación dure lo mismo en todas las tarjetas y la sección de abajo
   baje de forma gradual, sin saltos.
   ========================================================== */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  /* Cada tarjeta conserva su altura: al abrir una, la vecina no se estira */
  align-items: start;
  /* Evita que el navegador "ancle" el scroll mientras se abre un resumen */
  overflow-anchor: none;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}
.tile-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 18px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* El destello del toque entra y sale suave, sin parpadeo */
  transition: background-color 0.25s ease;
}
.tile-head:active {
  background: var(--accent-soft);
}
/* El foco se dibuja dentro de la tarjeta porque el borde la recorta */
.tile-head:focus-visible {
  outline-offset: -3px;
  border-radius: calc(var(--radius) - 2px);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--teal-500);
  }
  .tile:hover .tile-more {
    max-height: var(--panel-alto, 240px);
    opacity: 1;
    visibility: visible;
    padding-bottom: 18px;
  }
  /* Al salir con el cursor, el resumen espera 0.2 s antes de plegarse: al
     pasar de una tarjeta a otra, la sección de abajo no sube y baja a la vez
     (eso era lo que se veía como parpadeo). Al entrar, se abre al instante. */
  .menu-grid .tile-more {
    --panel-espera: 0.2s;
  }
  .menu-grid .tile:hover .tile-more {
    --panel-espera: 0s;
  }
  .tile:hover .tile-hint .icon {
    transform: rotate(180deg);
  }
}
.tile-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
}
.tile-icon .icon {
  width: 26px;
  height: 26px;
}
.tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-text strong {
  font-size: 15.5px;
}
.tile-text small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
/* Pista de que hay un resumen detrás */
.tile-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.tile-hint .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  transition: transform 0.25s ease;
}
/* Resumen plegado: alto, opacidad y visibilidad animados a la vez.
   "visibility: hidden" lo saca del árbol de accesibilidad cuando está cerrado.
   La duración es la misma para el alto y el relleno, y el alto máximo es el
   real del contenido (--panel-alto), así el movimiento se reparte en todo el
   tiempo y la sección de abajo no se desplaza de golpe.
   La curva arranca despacio y frena al final (ease-in-out de Material). */
.tile-more {
  --panel-tiempo: 0.42s;
  --panel-curva: cubic-bezier(0.4, 0, 0.2, 1);
  /* Sin retardo por defecto (toque y teclado responden al instante);
     con mouse, la regla de hover lo ajusta para el plegado. */
  --panel-espera: 0s;
  max-height: 0;
  padding: 0 18px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height var(--panel-tiempo) var(--panel-curva) var(--panel-espera),
    padding-bottom var(--panel-tiempo) var(--panel-curva) var(--panel-espera),
    opacity 0.3s ease var(--panel-espera),
    visibility var(--panel-tiempo) var(--panel-curva) var(--panel-espera);
}
/* Medición: se muestra el resumen completo un instante, sin animar ni pintar,
   para conocer su altura real. No provoca parpadeo porque ocurre en el mismo
   fotograma del cálculo. "!important" en la transición es necesario para que
   también se mida bien con «reducir movimiento» activo. */
.tile-more.is-measuring {
  max-height: none;
  padding-bottom: 18px;
  opacity: 0;
  visibility: hidden;
  transition: none !important;
}
.tile-more p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.tile-link .icon {
  width: 15px;
  height: 15px;
}
.tile-link:hover {
  background: var(--accent-line);
}
.tile.is-open .tile-more {
  max-height: var(--panel-alto, 240px);
  padding-bottom: 18px;
  opacity: 1;
  visibility: visible;
}
.tile.is-open .tile-hint .icon {
  transform: rotate(180deg);
}

/* ==========================================================
   09. CASOS (ANTES / DESPUÉS)
   ========================================================== */
.cases {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-grid {
  display: grid;
  gap: 16px;
}
.case-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}
.ba-photo {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.ba-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 31, 42, 0.72);
  padding: 3px 9px;
  border-radius: 999px;
}
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  transform: translateX(-50%);
}
.case-body {
  padding: 13px 16px;
}
.case-body strong {
  font-size: 15px;
}

/* ==========================================================
   10. ESPECIALISTA (DOCTOR)
   ========================================================== */
.doctor-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.doctor-photo {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  max-width: 360px;
  width: 100%;
  margin-inline: auto;
}
.doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.doctor-info h2 {
  font-size: clamp(24px, 6vw, 30px);
  margin: 8px 0 4px;
}
.doctor-info .role {
  color: var(--accent);
  font-weight: 700;
}
.credentials {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.credentials li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--ink);
}
.credentials .icon {
  width: 20px;
  height: 20px;
  color: var(--teal-600);
  flex: none;
}

/* ==========================================================
   11. CONTACTO, HORARIO Y CTA
   ========================================================== */
.contact-list {
  display: grid;
  gap: 12px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.contact-row:active {
  transform: scale(0.99);
}
.contact-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.contact-icon .icon {
  width: 24px;
  height: 24px;
}
.contact-row strong {
  display: block;
  font-size: 15.5px;
}
.contact-row small {
  color: var(--muted);
  font-size: 13px;
}
.contact-row .chevron {
  margin-left: auto;
  color: var(--teal-600);
  font-size: 22px;
  font-weight: 700;
}

/* Horario */
.hours {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.hours h3 {
  font-size: 15px;
  margin-bottom: 6px;
}
.hours li {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
  color: var(--muted);
}
.hours li:last-child {
  border-bottom: 0;
}
.hours li span {
  color: var(--ink);
  font-weight: 600;
}

/* Banner de CTA (agendar cita) */
.cta-banner {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  color: #fff;
  padding: 30px 20px;
  text-align: center;
}
.cta-banner h2 {
  font-size: clamp(24px, 6vw, 30px);
  margin-bottom: 6px;
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}
.cta-banner .btn {
  background: #fff;
  color: var(--teal-800);
}
.cta-banner .btn + .btn {
  margin-top: 10px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
}

/* ==========================================================
   12. PIE DE PÁGINA
   ========================================================== */
.site-footer {
  padding: 24px 0 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.footer-credit {
  margin-top: 6px;
}
.footer-credit a {
  color: var(--accent);
  font-weight: 600;
}
.footer-credit a:hover {
  text-decoration: underline;
}

/* ==========================================================
   13. MEDIA QUERIES (RESPONSIVE)
   ========================================================== */

/* Tableta y superior */
@media (min-width: 700px) {
  .container {
    width: min(100% - 56px, 1080px);
  }
  .home-head h1 {
    font-size: 48px;
  }
  /* La foto pasa al costado derecho y se funde hacia la izquierda */
  .home-photo {
    inset: 0 0 0 auto;
    width: 54%;
    max-width: 720px;
  }
  .home-photo img {
    opacity: 1;
    /* Foto horizontal: el recorte se centra en el rostro y los hombros */
    object-position: 50% 8%;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 12%,
        rgba(0, 0, 0, 0.8) 34%,
        #000 58%);
    mask-image: linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 12%,
        rgba(0, 0, 0, 0.8) 34%,
        #000 58%);
  }
  .home-photo::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--hero-fade-rgb), 0.16) 0%,
        rgba(var(--hero-fade-rgb), 0) 14%,
        rgba(var(--hero-fade-rgb), 0) 80%,
        var(--bg) 100%),
      linear-gradient(to right,
        var(--hero-top) 0%,
        rgba(var(--hero-fade-rgb), 0.8) 12%,
        rgba(var(--hero-fade-rgb), 0.4) 32%,
        rgba(var(--hero-fade-rgb), 0.04) 54%,
        rgba(var(--hero-fade-rgb), 0) 72%);
  }
  .home-head {
    max-width: 600px;
  }
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .doctor-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 36px;
  }
  .doctor-photo {
    flex: 1;
    max-width: 320px;
    margin-inline: 0;
  }
  .doctor-info {
    flex: 1.4;
  }
  .contact-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .contact-list .hours {
    grid-column: span 3;
  }
  .tab-bar {
    left: 50%;
    right: auto;
    bottom: 18px;
    width: min(460px, calc(100% - 40px));
    border-radius: 999px;
    border: 1px solid var(--line);
    transform: translateX(-50%);
    grid-template-columns: 1fr 1fr 72px 1fr 1fr;
    padding: 6px 12px;
  }
  .tab-cta {
    margin-top: -30px;
  }
}

/* Escritorio */
@media (min-width: 1024px) {
  .home {
    padding: 56px 0 60px;
  }
  .home-photo {
    width: 50%;
  }
  .home-photo img {
    object-position: 50% 6%;
  }
  section {
    padding: 52px 0;
  }
}

/* Cabecera en móviles muy estrechos (320 px): el logotipo y los botones
   se reducen para que quepan el tema, la muela y la marca. */
@media (max-width: 380px) {
  .brand img {
    height: 66px;
  }
  .appbar-actions {
    gap: 10px;
  }
  .theme-toggle,
  .appbar-cta {
    width: 40px;
    height: 40px;
  }
  .theme-toggle .icon,
  .appbar-cta .icon-tooth-jingle {
    width: 22px;
    height: 22px;
  }
}

/* Móvil: la portada ocupa la pantalla completa. El botón queda al pie y los
   servicios arrancan por debajo del pliegue. La foto cubre toda la portada
   por detrás de los textos. */
@media (max-width: 699px) {
  .home {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 62px - var(--safe-top));
    min-height: calc(100svh - 62px - var(--safe-top));
    padding-bottom: calc(78px + var(--safe-bottom));
  }
  .home > .container {
    display: flex;
    flex: 1;
  }
  .home-head {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  /* Baja el titular y el subtítulo (solo en móvil): el titular empuja todo
     el bloque al pie, así el texto queda a la altura del pecho de la foto,
     justo encima del botón. */
  .home-head h1 {
    margin-top: auto;
  }
  /* La foto cubre TODA la portada (de la barra superior al borde
     inferior); el encuadre se centra en el rostro sonriente. */
  .home-photo {
    inset: 0;
    height: auto;
  }
  .home-photo img {
    object-position: 57% 50%;
    -webkit-mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.92) 22%,
        #000 52%);
    mask-image: linear-gradient(to right,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.92) 22%,
        #000 52%);
  }
  .home-photo::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--hero-fade-rgb), 0.55) 0%,
        rgba(var(--hero-fade-rgb), 0.3) 12%,
        rgba(var(--hero-fade-rgb), 0.12) 28%,
        rgba(var(--hero-fade-rgb), 0.06) 46%,
        rgba(var(--hero-fade-rgb), 0.14) 66%,
        rgba(var(--hero-fade-rgb), 0.3) 84%,
        var(--bg) 100%),
      linear-gradient(to right,
        rgba(var(--hero-fade-rgb), 0.5) 0%,
        rgba(var(--hero-fade-rgb), 0.2) 30%,
        rgba(var(--hero-fade-rgb), 0.05) 56%,
        rgba(var(--hero-fade-rgb), 0) 80%);
  }
}

/* Móviles cortos (p. ej. 320×568): el titular se apoya sobre la cara, así que
   se recupera un velo suave en la mitad inferior para no perder legibilidad.
   En pantallas altas (390×844, 375×667) no se aplica y la foto va más limpia. */
@media (max-width: 699px) and (max-height: 620px) {
  .home-photo::after {
    background:
      linear-gradient(to bottom,
        rgba(var(--hero-fade-rgb), 0.5) 0%,
        rgba(var(--hero-fade-rgb), 0.22) 14%,
        rgba(var(--hero-fade-rgb), 0.3) 34%,
        rgba(var(--hero-fade-rgb), 0.5) 50%,
        rgba(var(--hero-fade-rgb), 0.55) 70%,
        rgba(var(--hero-fade-rgb), 0.6) 88%,
        var(--bg) 100%),
      linear-gradient(to right,
        rgba(var(--hero-fade-rgb), 0.5) 0%,
        rgba(var(--hero-fade-rgb), 0.2) 30%,
        rgba(var(--hero-fade-rgb), 0.05) 56%,
        rgba(var(--hero-fade-rgb), 0) 80%);
  }
}

/* ==========================================================
   14. TEMA OSCURO
   Se activa con data-theme="dark" en <html> (ver theme.js).
   Mientras el usuario no elija, se respeta el sistema.
   ========================================================== */
:root[data-theme="dark"] {
  --ink: #e8f6f3;
  --muted: #a2b9bd;
  --bg: #071518;
  --surface: #0d2124;
  --line: rgba(148, 214, 208, 0.16);

  --accent: #5eead4;
  --accent-soft: rgba(45, 212, 191, 0.14);
  --accent-line: rgba(45, 212, 191, 0.28);
  --app-bar-bg: rgba(7, 21, 24, 0.86);
  --tab-bar-bg: rgba(7, 21, 24, 0.94);
  --hero-glow: rgba(45, 212, 191, 0.16);
  --hero-top: #05171a;
  --hero-fade-rgb: 7, 21, 24;

  --header-icon: var(--teal-500);
  --header-icon-hover: var(--teal-100);
  --header-halo: rgba(45, 212, 191, 0.16);

  --tooth-fill: rgba(45, 212, 191, 0.16);
  --tooth-stroke: var(--teal-500);
  --tooth-glow-fill: rgba(94, 234, 212, 0.55);
  --tooth-glow-stroke: var(--teal-100);

  --shadow-sm:
    0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.55);
}

/* El logotipo original es azul marino: en oscuro pasa a blanco */
:root[data-theme="dark"] .brand img {
  filter: brightness(0) invert(1);
  opacity: 0.94;
}
:root[data-theme="dark"] .brand-name {
  color: var(--teal-100);
}

/* Enlace «Saltar al contenido» (usa fondo --ink) */
:root[data-theme="dark"] .skip-link {
  background: var(--teal-500);
  color: #062321;
}

/* Sombras de botones sobre fondo oscuro */
:root[data-theme="dark"] .btn-primary {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .tab-cta {
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);
}

/* La foto de portada se atenúa un poco para no deslumbrar */
:root[data-theme="dark"] .home-photo img {
  filter: brightness(0.86) saturate(0.94);
}

/* El banner de cita ya es oscuro; se le da un borde interior sutil */
:root[data-theme="dark"] .cta-banner {
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.14);
}