/* MOVA Studio Dental — cleaned stylesheet */
:root {
  --bg: #F5F0E6;
  --paper: #FFFFFF;
  --text: #2C1810;
  --muted: rgba(44,24,16,.68);
  --green: #B8956A;
  --green-ink: #856640;      /* AA sobre crema (4,66:1), sobre tarjeta (5,07:1) y con blanco encima (5,29:1) */
  --green-light: rgba(184,149,106,.16);
  --wood: #D2B48C;
  --shadow: 0 8px 32px rgba(44,24,16,.10);
  --shadow-lg: 0 20px 60px rgba(44,24,16,.15);
  --radius: 20px;
  --radius-lg: 28px;
  --max: 1160px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --font: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --header-mobile: 77px;   /* respaldo; manda --header-h, que se mide */
  --header-h: 80px;      /* la mide script.js al cargar y al redimensionar */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(210,180,140,.28), transparent 60%),
    radial-gradient(ellipse 800px 500px at 85% 5%, rgba(184,149,106,.12), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 12px; }
ul { margin: 0; padding: 0; list-style: none; }

.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.section {
  padding: 80px 0;
  padding-bottom: 20px;
}

/* ── HEADER ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245,240,230,.80);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(44,24,16,.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}
.brand-logo { height: 48px; width: auto; }
.navlinks { display: flex; align-items: center; gap: 4px; }
.navlinks a {
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 500;
  font-size: .97rem;
  color: rgba(44,24,16,.75);
  transition: background .2s, color .2s;
}
.navlinks a:hover,
.navlinks a[aria-current="page"] {
  background: rgba(255,255,255,.8);
  color: var(--text);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: .97rem;
  font-weight: 600;
  border: 1px solid rgba(44,24,16,.12);
  background: rgba(255,255,255,.85);
  box-shadow: 0 4px 16px rgba(44,24,16,.08);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn.primary {
  background: linear-gradient(135deg, var(--green-ink), #7A5C39);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 24px rgba(184,149,106,.30);
}
.btn.primary:hover { box-shadow: 0 10px 32px rgba(184,149,106,.40); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.7); }
/* Sobre el vídeo, un botón totalmente transparente se pierde. Dentro del
   hero lleva un fondo semiopaco que garantiza que siempre se distinga. */
.hero .btn.ghost,
.hero-mobile-sequence .btn.ghost {
  background: rgba(255,255,255,.72);
  border-color: rgba(44,24,16,.18);
  backdrop-filter: blur(6px);
}
.hero .btn.ghost:hover { background: rgba(255,255,255,.92); }

.menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ── KICKER / PILL ── */
.kicker {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(44,24,16,.55);
  font-weight: 500;
  margin-bottom: 8px;
}
.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(44,24,16,.10);
  font-size: .84rem;
  font-weight: 500;
  color: rgba(44,24,16,.7);
  backdrop-filter: blur(8px);
  margin-bottom: 16px;
}
.kicker-pill.green {
  background: rgba(184,149,106,.12);
  border-color: rgba(184,149,106,.22);
  color: #8F6F4A;
}

/* ── HERO — desktop base ── */
.hero-scroll-wrapper {
  position: relative;
  height: 300vh;
}
.hero {
  position: sticky;
  top: var(--header-h);
  width: 100%;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* La misma foto del póster, detrás del vídeo. Si el navegador no llega a
     decodificar ningún fotograma (iOS con la pestaña recién abierta, ahorro
     de datos, conexión lenta), se ve la clínica en vez de un rectángulo
     gris. En cuanto el vídeo pinta, lo tapa. */
  background: url('/assets/img/Local1.jpg') center 70% / cover no-repeat;
  background-color: #EDE7DC;
}
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  display: block;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Velo (scrim) bajo el texto del hero.
     El degradado anterior tenía TODAS las paradas en 0%, así que no velaba
     nada: el titular y el botón "Ver servicios" desaparecían sobre las zonas
     claras del vídeo. El texto del hero es oscuro, así que el velo es color
     crema, no negro.
     La opacidad no es estética: con 0,85 el peor fotograma (uno casi negro)
     deja el texto secundario en 4,69:1, por encima del mínimo AA de 4,5.
     Se desvanece hacia la derecha para no tapar el vídeo. */
  background:
    linear-gradient(to right,
      rgba(245,240,230,.88) 0%,
      rgba(245,240,230,.85) 28%,
      rgba(245,240,230,.55) 46%,
      rgba(245,240,230,.18) 62%,
      rgba(245,240,230,0) 78%),
    linear-gradient(to top, rgba(44,24,16,.22) 0%, transparent 34%);
}
.hero-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 80px 0;
  min-height: 100vh;
  flex-wrap: wrap;
}
.hero-text {
  max-width: 540px;
  flex: 0 0 auto;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
}
.hero-bottom-badges {
  position: absolute;
  bottom: 32px;
  /* Con left:50% + translateX el contenedor solo podia ocupar la mitad del
     ancho, asi que las tres insignias se partian en dos filas. Estirandolo
     de lado a lado se centran igual y disponen del ancho completo. */
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 20px;
}

/* ── HERO mobile cinematic UI ── */
.hero-mobile-scroll-indicator,
.hero-mobile-sequence {
  display: none;
}

/* ── TYPE ── */
.h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.02;
  margin: 0 0 20px;
  letter-spacing: -.03em;
}
.h1 .accent { color: var(--green-ink); }
.h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 14px;
}
.lead {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 52ch;
  margin-bottom: 28px;
}

/* ── HERO cards ── */
.stat-card {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(44,24,16,.09);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease);
  min-width: 190px;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card.highlight {
  background: rgba(255,255,255,.85);
  border-color: rgba(184,149,106,.20);
}
.stat-row { display: flex; align-items: baseline; gap: 2px; }
.stat-num {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}
.stat-suf {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--green-ink);
}
.stat-lbl {
  display: block;
  font-size: .85rem;
  color: var(--muted);
  margin-top: 4px;
}
.team-preview { display: flex; margin-bottom: 10px; }
.team-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  margin-left: -8px;
}
.team-thumb:first-child { margin-left: 0; }
.mini-link {
  font-size: .85rem;
  color: var(--green-ink);
  font-weight: 600;
  margin-top: 6px;
  display: inline-block;
}
.float-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.95);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(44,24,16,.14);
  white-space: nowrap;
  animation: floatY 4s ease-in-out infinite;
}
.float-badge:nth-child(2) { animation-delay: 1.5s; }
.float-badge:nth-child(3) { animation-delay: 3s; }
.float-icon { font-size: 1.3rem; }
.float-num {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.2;
}
.float-label { font-size: .76rem; color: var(--muted); }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── SERVICES ── */
.svc-section { padding: 80px 0; }
.section-header { margin-bottom: 32px; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
.svc-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(44,24,16,.09);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  cursor: pointer;
  text-decoration: none;
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  background: rgba(255,255,255,.92);
}
.svc-card.dark {
  /* Antes: linear-gradient(135deg, var(--green), #A78358) con texto blanco
     = 2,78:1, muy por debajo del minimo AA. Con estos dos tonos el blanco
     queda en 5,29:1 y 6,14:1 sin perder el caracter calido. */
  background: linear-gradient(135deg, var(--green-ink), #7A5C39);
  color: white;
  border-color: transparent;
}
.svc-card.dark .svc-tag {
  background: rgba(255,255,255,.20);
  color: white;
  border-color: rgba(255,255,255,.2);
}
.svc-card.dark p { color: rgba(255,255,255,.8); }
.svc-card.dark .svc-arrow {
  background: rgba(255,255,255,.20);
  color: white;
}
.svc-emoji {
  font-size: 2rem;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(184,149,106,.10);
  display: grid;
  place-items: center;
}
.svc-card.dark .svc-emoji { background: rgba(255,255,255,.15); }
.svc-body { flex: 1; }
.svc-tag {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(184,149,106,.10);
  color: var(--green-ink);
  border: 1px solid rgba(184,149,106,.18);
  margin-bottom: 6px;
}
.svc-body h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; }
.svc-body p { margin: 0; font-size: .88rem; color: var(--muted); }
.svc-arrow {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(184,149,106,.12);
  color: var(--green-ink);
  display: grid;
  place-items: center;
  font-size: 1rem;
  transition: background .2s, transform .2s;
}
.svc-card:hover .svc-arrow {
  background: var(--green-ink);
  color: white;
  transform: rotate(-45deg);
}
.svc-card.dark:hover .svc-arrow {
  background: rgba(255,255,255,.3);
  color: white;
}

/* ── ABOUT / SPLIT ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.about-grid.reverse .about-img-side { order: -1; }
.about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.about-img-wrap img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.about-float {
  position: absolute;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 8px 28px rgba(44,24,16,.14);
}
.about-float-icon { font-size: 1.4rem; }
.about-text p { color: var(--muted); }
.about-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.contact-quick { display: flex; align-items: center; gap: 10px; }
.cq-icon { font-size: 1.3rem; }
.cq-label { font-size: .8rem; color: var(--muted); }
.cq-num { font-weight: 700; font-size: 1rem; color: var(--green-ink); }

/* ── STATS BAND ── */
.stats-band {
  padding: 60px 0;
  background: rgba(255,255,255,.45);
  border-top: 1px solid rgba(44,24,16,.08);
  border-bottom: 1px solid rgba(44,24,16,.08);
}
.stats-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.stat-item {
  text-align: center;
  flex: 1;
  min-width: 160px;
  padding: 20px;
}
.stat-big-row { display: flex; align-items: baseline; gap: 2px; justify-content: center; }
.stat-big {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
}
.stats-band .stat-suf {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green-ink);
}
.stat-desc {
  display: block;
  font-size: .9rem;
  color: var(--muted);
  margin-top: 6px;
}
.stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(44,24,16,.10);
  flex: 0 0 auto;
}

/* ── TEAM ── */
.team-grid {
  display: grid;
  gap: 16px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.team-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(44,24,16,.09);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  text-decoration: none;
  color: inherit;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.team-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f3efe9;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .5s var(--ease);
}
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-info { padding: 16px; flex: 1; }
.team-info h3 { margin: 6px 0 4px; font-size: 1.04rem; }
.team-info p { font-size: .87rem; color: var(--muted); margin: 0; }
.team-card .svc-arrow { margin: 0 16px 16px auto; }

/* ── ESTÉTICA SECTION ── */
.estetica-section {
  background: linear-gradient(135deg, rgba(184,149,106,.05), rgba(210,180,140,.08));
  border-top: 1px solid rgba(184,149,106,.10);
  border-bottom: 1px solid rgba(184,149,106,.10);
}
.modern-list { display: grid; gap: 10px; margin-top: 16px; }
.modern-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(44,24,16,.08);
  font-size: .92rem;
}
.dot-green {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: 0 0 auto;
  margin-top: 6px;
}

/* ── CONTACT ── */
.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(44,24,16,.10);
  background: rgba(255,255,255,.75);
  margin-top: 32px;
}
.contact-info-block { padding: 32px; }
.contact-info-block h3 { margin: 0 0 16px; font-size: 1.2rem; }
.contact-items { display: grid; gap: 12px; margin-bottom: 8px; }
.ci { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.ci a { color: var(--green-ink); font-weight: 600; }
/* Sin min-height fijo: cuando el mapa aún no tiene consentimiento solo hay
   un placeholder de ~200 px y el resto quedaba en blanco. La altura la pone
   el iframe al cargar. */
.contact-map-block { min-height: 0; }
.contact-map-block iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

/* ── FOOTER ── */
.footer {
  padding: 30px 0 28px;
  border-top: 1px solid rgba(44,24,16,.08);
  background: rgba(255,255,255,.35);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-tagline { font-size: .9rem; color: var(--muted); margin-bottom: 8px; }
.footer-contact { font-size: .88rem; color: rgba(44,24,16,.6); line-height: 1.7; }
.footer-contact a { color: var(--green-ink); font-weight: 600; }
.footer-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-nav a {
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(44,24,16,.7);
  font-size: .9rem;
  transition: background .2s;
}
.footer-nav a:hover { background: rgba(255,255,255,.7); }
.footer-hr { height: 1px; background: rgba(44,24,16,.08); margin: 20px 0 16px; }
.footer-mini { font-size: .85rem; color: rgba(44,24,16,.5); }

/* ── MODAL ── */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(44,24,16,.5);
  z-index: 200;
}
.modal[open] { display: flex; }
.dialog {
  width: min(560px, 100%);
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(44,24,16,.12);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  overflow: hidden;
}
.dialog header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(210,180,140,.18), rgba(184,149,106,.10));
  border-bottom: 1px solid rgba(44,24,16,.10);
}
.close {
  background: none;
  border: 0;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1rem;
}
.close:hover { background: rgba(0,0,0,.06); }
.form { padding: 20px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
label { font-weight: 600; font-size: .92rem; }
input, textarea {
  font: inherit;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(44,24,16,.14);
  background: rgba(255,255,255,.9);
  transition: border-color .2s;
}
input:focus,
textarea:focus { outline: none; border-color: var(--green-ink); }
textarea { min-height: 100px; resize: vertical; }
.form .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }



/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ── UTILITIES ── */
.cta-band { margin-bottom: 40px; }
.cita-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  z-index: 9999;
}
.cita-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.cita-box {
  background: white;
  padding: 36px;
  border-radius: 20px;
  max-width: 420px;
  width: 90%;
  text-align: center;
}
.cita-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.cita-close {
  position: absolute;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

/* ── RESPONSIVE ── */
@media (min-width: 900px) {
  .hero-layout { justify-content: space-between; flex-wrap: nowrap; }
  .hero-text { max-width: 520px; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-grid.reverse .about-img-side { order: 0; }
  .contact-card { grid-template-columns: .85fr 1.15fr; }
  .contact-map-block { min-height: 0; }
}

@media (min-width: 1100px) {
  .team-grid {
    /* --team-cols lo pone la plantilla con el nº de profesionales activos.
       Estaba fijado a 6: con 5 fichas sobraba una columna y el bloque
       parecía pegado a la izquierda. */
    grid-template-columns: repeat(var(--team-cols, 5), minmax(0, 1fr));
    align-items: stretch;
    justify-content: center;
  }
}

@media (max-width: 820px) {
  .navlinks { display: none; }
  .navlinks.open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    left: 16px;
    right: 16px;
    top: 70px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(44,24,16,.12);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
  }
  .navlinks.open a { width: 100%; }
  .menu-btn { display: flex; }
  .nav-cta { display: none; }
  .stat-divider { display: none; }

  /* Cinematic mobile hero base */
  .hero-scroll-wrapper {
    height: calc(150vh + var(--header-h));
  }
  .hero {
    position: sticky;
    /* --header-h la mide script.js: en móvil la cabecera no siempre son
       los 77 px que se daban por supuestos. svh en vez de vh para que la
       barra del navegador no descuadre el alto. */
    top: var(--header-h);
    height: calc(100svh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: 50% 42%;
  }
  .hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    transform: none;
  }
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* En móvil el velo oscurecía el vídeo, pero el titular es oscuro
       (#2C1810): sobre un fondo oscurecido dejaba de leerse. Se cambia a un
       velo crema centrado, donde está el texto, que se desvanece hacia los
       bordes para que el vídeo siga viéndose. */
    background:
      radial-gradient(ellipse 118% 62% at 50% 46%,
        rgba(245,240,230,.86) 0%,
        rgba(245,240,230,.72) 42%,
        rgba(245,240,230,.28) 70%,
        rgba(245,240,230,0) 100%),
      linear-gradient(to top, rgba(44,24,16,.16) 0%, transparent 26%);
    z-index: 1;
  }

  /* Hide desktop hero UI on mobile */
  .hero .container,
  .hero-layout,
  .hero-text,
  .hero-stats,
  .hero-bottom-badges {
    display: none !important;
  }

  /* Mobile center sequence */
  .hero-mobile-sequence {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
  }
  .hero-mobile-step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease;
    text-align: center;
    max-width: 320px;
  }
  .hero-mobile-step.active {
    opacity: 1;
    transform: translateY(0);
  }
  .hero-mobile-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    line-height: .95;
    letter-spacing: -.04em;
    color: #2C1810;
    text-shadow: 0 8px 30px rgba(255,255,255,.18);
  }
  .hero-mobile-title span { color: var(--green-ink); }

  /* Mobile scroll indicator */
  .hero-mobile-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.92);
    text-align: center;
    pointer-events: none;
  }
  .scroll-icon {
    font-size: 1.4rem;
    line-height: 1;
    animation: scrollBounce 1.6s ease-in-out infinite;
  }
  .scroll-text {
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .btn,
  .svc-card,
  .team-card,
  .hero-mobile-step {
    transition: none;
  }
  @keyframes floatY {
    from, to { transform: none; }
  }
  @keyframes scrollBounce {
    from, to { transform: none; }
  }
}

@media (max-width: 820px){
  .hero-mobile-step{
    position: absolute;
    left: 24px;
    right: 24px;
    max-width: 320px;
    margin: 0 auto;
  }

  .hero-mobile-stat{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: white;
  }

  .hero-mobile-stat-number{
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 14vw, 5rem);
    line-height: .9;
    letter-spacing: -.05em;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,.18);
  }

  .hero-mobile-stat-number span{
    color: var(--green-ink);
  }

  .hero-mobile-stat-label{
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255,255,255,.92);
  }

  .hero-mobile-cta-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .hero-mobile-cta-text{
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,.94);
    text-align: center;
  }

  .hero-mobile-cta-btn{
    pointer-events: auto;
  }
}






/* ── SITE INTRO · PREMIUM WITH TOOTH + LOADER ── */
.site-intro{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(210,180,140,.18), transparent 60%),
    radial-gradient(ellipse 800px 500px at 85% 5%, rgba(184,149,106,.10), transparent 55%),
    #F5F0E6;
  opacity: 1;
  visibility: visible;
  overflow: hidden;
  transition:
    opacity .9s cubic-bezier(.2,.8,.2,1),
    visibility .9s cubic-bezier(.2,.8,.2,1);
  animation: introBgMove 2.2s ease-out both;
}

.site-intro::before{
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 50% 60%, rgba(184,149,106,.08), transparent 34%);
  opacity: .9;
  filter: blur(10px);
  animation: introGlow 2.4s ease-in-out both;
  pointer-events: none;
}

.site-intro.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-intro-inner{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    transform .9s cubic-bezier(.2,.8,.2,1),
    opacity .9s cubic-bezier(.2,.8,.2,1);
  animation: introReveal .95s cubic-bezier(.2,.8,.2,1) forwards;
}

.site-intro.is-hidden .site-intro-inner{
  transform: translateY(-16px) scale(.985);
  opacity: 0;
}

/* ICONO / DIENTE */
.site-intro-mark{
  width: 74px;
  height: 86px;
  display: grid;
  place-items: center;
}

.site-intro-tooth{
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 8px 24px rgba(44,24,16,.08));
}

.tooth-outline{
  fill: none;
  stroke: rgba(44,24,16,.78);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: toothDraw 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards;
}

.tooth-fill{
  fill: rgba(255,255,255,.72);
  opacity: 0;
  transform-origin: center;
  animation: toothFillIn .6s ease .85s forwards;
}

/* LOGO */
.site-intro-logo{
  width: min(340px, 68vw);
  height: auto;
  display: block;
  opacity: 0;
  transform: scale(.965);
  filter: blur(10px) drop-shadow(0 12px 36px rgba(44,24,16,.10));
  animation: introLogoFocus 1.05s cubic-bezier(.2,.8,.2,1) .22s forwards;
  will-change: transform, opacity, filter;
}

/* LOADER */
.site-intro-loader{
  width: min(220px, 52vw);
  height: 6px;
  border-radius: 999px;
  background: rgba(44,24,16,.08);
  overflow: hidden;
  position: relative;
}

.site-intro-loader-bar{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #B8956A 0%, #D1B38B 100%);
  box-shadow: 0 0 18px rgba(184,149,106,.25);
  animation: introLoadBar 1.45s cubic-bezier(.2,.8,.2,1) .35s forwards;
}

.site-intro-text{
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(44,24,16,.58);
  opacity: 0;
  animation: introTextIn .55s ease .45s forwards;
}

/* bloquea scroll mientras está activa */
body.intro-active{
  overflow: hidden;
}

@keyframes introBgMove{
  0%{ transform: scale(1.035); }
  100%{ transform: scale(1); }
}

@keyframes introGlow{
  0%{
    opacity: .2;
    transform: scale(.96);
  }
  100%{
    opacity: .9;
    transform: scale(1);
  }
}

@keyframes introReveal{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toothDraw{
  to{
    stroke-dashoffset: 0;
  }
}

@keyframes toothFillIn{
  0%{
    opacity: 0;
    transform: scale(.96);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes introLogoFocus{
  0%{
    opacity: 0;
    transform: scale(.965);
    filter: blur(10px) drop-shadow(0 12px 36px rgba(44,24,16,.06));
  }
  100%{
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 12px 36px rgba(44,24,16,.10));
  }
}

@keyframes introLoadBar{
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

@keyframes introTextIn{
  0%{
    opacity: 0;
    transform: translateY(4px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px){
  .site-intro-mark{
    width: 62px;
    height: 72px;
  }

  .site-intro-logo{
    width: min(270px, 72vw);
  }

  .site-intro-inner{
    gap: 16px;
  }

  .site-intro-loader{
    width: min(180px, 48vw);
  }
}

@media (prefers-reduced-motion: reduce){
  .site-intro,
  .site-intro-inner,
  .site-intro-logo,
  .tooth-outline,
  .tooth-fill,
  .site-intro-loader-bar,
  .site-intro-text{
    transition: none;
    animation: none;
  }

  .tooth-outline{
    stroke-dashoffset: 0;
  }

  .tooth-fill,
  .site-intro-text{
    opacity: 1;
  }

  .site-intro-loader-bar{
    width: 100%;
  }

  .site-intro::before{
    animation: none;
  }
}
/* ── ACCESIBILIDAD: foco visible por teclado (WCAG 2.4.7) ── */
:focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--green-ink);
  outline-offset: 1px;
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--text);
  color: #fff;
  padding: 14px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--green-ink);
  outline-offset: 2px;
}

/* ── ÁREAS TÁCTILES MÍNIMAS (WCAG 2.5.8) ── */
@media (max-width: 900px) {
  .menu-btn { min-width: 44px; min-height: 44px; justify-content: center; }
  .ci a,
  .footer-contact a { display: inline-block; min-height: 44px; line-height: 44px; }
}

/* ── Subtítulo del H1: aporta contexto y keywords en texto visible ── */
.h1-sub {
  display: block;
  margin-top: 14px;
  font-family: var(--font);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--muted);
  line-height: 1.4;
}

/* ── PIE: bloque sanitario y logo ── */
.footer-logo { height: 40px; width: auto; margin-bottom: 14px; display: block; }
.footer-sanitario {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(44,24,16,.10);
}
.footer-sanitario .kicker { display: block; margin-bottom: 8px; }
.footer-sanitario p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 78ch;
}
.footer-sanitario strong { color: var(--text); font-weight: 600; }

/* ── PÁGINA 404 ── */
.error-section { padding-top: 140px; }
.error-wrap { max-width: 68ch; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(64px, 12vw, 128px);
  line-height: 1;
  margin: 0 0 8px;
  color: var(--green);
  opacity: .35;
  font-weight: 800;
}
.error-links { margin-top: 48px; padding-top: 28px; border-top: 1px solid rgba(44,24,16,.10); }
.error-links h2 { font-size: 1.05rem; margin: 0 0 16px; }
.error-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 10px 24px;
  list-style: none;
  padding: 0;
}
.error-list a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  color: var(--green-ink);
  font-weight: 600;
  border-bottom: 1px solid rgba(44,24,16,.08);
}
.error-list a:hover { color: var(--text); }

/* ── BARRA FIJA DE CONTACTO EN MÓVIL ── */
.mobile-bar { display: none; }
@media (max-width: 820px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9980;
    background: var(--paper);
    border-top: 1px solid rgba(44,24,16,.12);
    box-shadow: 0 -6px 24px rgba(44,24,16,.10);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 8px 4px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    border-right: 1px solid rgba(44,24,16,.08);
  }
  .mobile-bar a:last-child { border-right: none; }
  .mobile-bar a.is-primary { background: var(--green-ink); color: #fff; }
  .mobile-bar svg { width: 20px; height: 20px; }
  /* Deja sitio para la barra y para el banner de cookies */
  body { padding-bottom: 58px; }
  .mova-consent { bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px); }
}

/* ── FORMULARIO DE CITA ── */
.cita-section { background: rgba(255,255,255,.5); }
.cita-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .cita-layout { grid-template-columns: 1fr; gap: 32px; } }

.cita-points { margin-top: 24px; display: grid; gap: 12px; }
.cita-points li { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--muted); }

.cita-form-panel {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
@media (max-width: 560px) { .cita-form-panel { padding: 22px; } }

.cita-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}
.cita-form .field { margin-bottom: 16px; }
.cita-form label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.cita-form .opt { font-weight: 400; color: var(--muted); }
.cita-form input[type="text"],
.cita-form input[type="tel"],
.cita-form input[type="email"],
.cita-form select,
.cita-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font: inherit;
  font-size: .9375rem;
  color: var(--text);
  background: #FCFAF6;
  border: 1px solid rgba(44,24,16,.18);
  border-radius: 12px;
  transition: border-color .2s, background .2s;
}
.cita-form textarea { min-height: 110px; resize: vertical; }
.cita-form input:hover,
.cita-form select:hover,
.cita-form textarea:hover { border-color: rgba(44,24,16,.32); }
.cita-form input:focus,
.cita-form select:focus,
.cita-form textarea:focus { background: #fff; border-color: var(--green-ink); }
.cita-form [aria-invalid="true"] { border-color: #B3261E; background: #FCEEED; }

.field-error { margin: 6px 0 0; font-size: .8125rem; color: #B3261E; font-weight: 500; }
.form-error-box {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: #FCEEED;
  border: 1px solid rgba(179,38,30,.30);
  border-radius: 10px;
  font-size: .875rem;
  color: #8C1D18;
}

/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consents { margin: 22px 0 18px; display: grid; gap: 14px; }
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--green-ink); cursor: pointer;
}
.consent label { font-size: .8125rem; font-weight: 400; line-height: 1.55; color: var(--muted); margin: 0; cursor: pointer; }
.consent label a { color: var(--green-ink); font-weight: 600; text-decoration: underline; }

.privacy-layer1 {
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted);
  background: rgba(184,149,106,.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 20px;
}
.privacy-layer1 strong { color: var(--text); font-weight: 600; }
.privacy-layer1 a { color: var(--green-ink); text-decoration: underline; }

.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.form-actions .btn { min-height: 48px; }
.form-note { font-size: .8125rem; color: var(--muted); }
.form-note a { color: var(--green-ink); font-weight: 600; text-decoration: underline; }

/* ── PÁGINA DE AGRADECIMIENTO ── */
.gracias-section { padding-top: 140px; }
.gracias-wrap { max-width: 66ch; }
.gracias-check {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(74,107,87,.14);
  color: #3D6B52;
  margin-bottom: 24px;
}
.gracias-check svg { width: 32px; height: 32px; }
.gracias-next { margin: 40px 0; padding-top: 28px; border-top: 1px solid rgba(44,24,16,.10); }
.gracias-next h2 { font-size: 1.05rem; margin: 0 0 16px; }
.gracias-list { display: grid; gap: 14px; }
.gracias-list li { font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.gracias-list strong { color: var(--text); }
.gracias-list a { color: var(--green-ink); font-weight: 600; text-decoration: underline; }

/* ── ICONOS SVG ──────────────────────────────────────────────────
   El grosor se fija en píxeles REALES con vector-effect. Sin esto,
   el mismo icono sale a 3,7 px en una tarjeta de 56 px y a 1 px en
   el pie: grueso y tosco arriba, invisible abajo. */
.mova-icon {
  width: 1em;
  height: 1em;
  display: block;
  overflow: visible;
}
.mova-icon path,
.mova-icon circle,
.mova-icon rect,
.mova-icon line {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5px;
}

/* Contextos grandes: trazo aún más fino para que respire */
.svc-emoji .mova-icon path,
.svc-emoji .mova-icon circle,
.svc-emoji .mova-icon rect,
.about-float-icon .mova-icon path,
.about-float-icon .mova-icon circle,
.about-float-icon .mova-icon rect,
.precio-icon .mova-icon path,
.precio-icon .mova-icon circle,
.precio-icon .mova-icon rect,
.float-icon .mova-icon path,
.float-icon .mova-icon circle,
.float-icon .mova-icon rect { stroke-width: 1.25px; }

/* Contextos pequeños: un pelo más de cuerpo para que no desaparezca */
.ci-icon .mova-icon path,
.ci-icon .mova-icon circle,
.ci-icon .mova-icon rect,
.svc-sidebar-emoji .mova-icon path,
.svc-sidebar-emoji .mova-icon circle,
.svc-sidebar-emoji .mova-icon rect,
.mobile-bar svg { stroke-width: 1.7px; }

.ci-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  color: var(--green-ink);
  flex: 0 0 auto;
}
.cq-icon,
.float-icon,
.about-float-icon,
.precio-icon,
.hero-badge-ic,
.svc-img-badge-icon { color: var(--green-ink); display: inline-flex; align-items: center; }
.svc-sidebar-emoji { display: inline-flex; align-items: center; color: var(--green-ink); }

/* Horario en el pie y en la lista de contacto */
.footer-horario {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 500;
}
.contact-item-static { cursor: default; }
.contact-item-static:hover { transform: none; }