/* ==========================================================================
   Consultorio Dental Santa María
   Tema claro, estilo glass. Sin dependencias de backend.
   ========================================================================== */

:root {
  --primary: #0284c7;
  --primary-light: #e0f2fe;
  --secondary: #0d9488;
  --secondary-light: #ccfbf1;
  --sky: #38bdf8;
  --bg: linear-gradient(135deg, #f0fdfa 0%, #f8fafc 40%, #e0f2fe 100%);
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 20px 40px -18px rgba(13, 148, 136, 0.14), 0 0 1px 1px rgba(255, 255, 255, 0.9) inset;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --grad: linear-gradient(135deg, #0284c7 0%, #0d9488 100%);
  --grad-text: linear-gradient(100deg, #0284c7 0%, #0ea5e9 40%, #0d9488 100%);
  --radius-lg: 26px;
  --radius-md: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-snap-type: y proximity; scroll-padding-top: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: 0.85rem; }
.center { text-align: center; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 860px; }

.grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Luces de fondo */
.ambient { position: fixed; z-index: -1; width: 460px; height: 460px; border-radius: 50%; filter: blur(120px); opacity: 0.55; pointer-events: none; }
.glow-1 { top: -120px; left: -120px; background: #99f6e4; animation: drift 18s ease-in-out infinite; }
.glow-2 { top: 35%; right: -160px; background: #bae6fd; animation: drift 22s ease-in-out infinite reverse; }
.glow-3 { bottom: 5%; left: 20%; background: #e0f2fe; animation: drift 26s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, -40px); } }

/* Glass */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), border-color 0.3s;
}

/* Brillo que sigue al cursor */
.spot { position: relative; overflow: hidden; }
.spot::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.2), rgba(45, 212, 191, 0.1) 45%, transparent 70%);
}
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; z-index: 1; }
.spot:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -18px rgba(2, 132, 199, 0.22); }

/* Botones */
.btn {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.8rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 0.92rem;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -8px rgba(13, 148, 136, 0.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(13, 148, 136, 0.55); }
.btn-glass { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(226, 232, 240, 0.9); backdrop-filter: blur(10px); }
.btn-glass:hover { background: #fff; transform: translateY(-2px); }
.btn-block { width: 100%; padding: 1rem; }
.icon-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); transition: transform 0.2s, background 0.2s; }
.icon-btn:hover { background: #fff; transform: scale(1.06); }

.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 16px;
  background: var(--secondary-light); color: var(--secondary); border-radius: 999px;
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.badge svg { width: 14px; height: 14px; }

/* ==========================================================================
   Menú superior glass
   ========================================================================== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; border-bottom: 1px solid transparent; transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s, box-shadow 0.3s; }
.header.scrolled {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 30px -18px rgba(2, 132, 199, 0.25);
}
.nav { max-width: 1320px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }
.nav-cta { padding: 0.7rem 1.25rem; font-size: 0.86rem; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-logo { width: 48px; height: 42px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 10px rgba(2, 132, 199, 0.18)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand-text strong { font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif; font-variant-caps: small-caps; font-weight: 600; font-size: 1.38rem; letter-spacing: 0.03em; line-height: 1; }
.brand-text small { font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif; font-variant-caps: small-caps; text-transform: none; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--muted); margin-top: 3px; font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.nav-links a:not(.btn) { position: relative; display: block; white-space: nowrap; padding: 9px 13px; font-size: 0.88rem; font-weight: 600; color: var(--muted); border-radius: 999px; transition: color 0.2s, background 0.2s; }
.nav-links a:not(.btn):hover { color: var(--text); background: rgba(2, 132, 199, 0.08); }
.nav-links a.active { color: var(--secondary); background: rgba(13, 148, 136, 0.1); }
.nav-mobile-cta { display: none; }
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 0 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); }
.menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.menu-btn[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Pantallas (cada sección ocupa toda la pantalla)
   ========================================================================== */
.screen {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 104px 0 48px; scroll-snap-align: start; overflow: hidden;
}
.screen > .container { position: relative; z-index: 2; }

.sec-head { max-width: 760px; margin-bottom: 34px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.035em; font-weight: 800; }
.sub { margin-top: 12px; color: var(--muted); font-size: 1.05rem; }
.lead { margin: 16px 0 26px; color: var(--muted); font-size: 1.12rem; max-width: 560px; }
.sec-head.center .sub { margin-left: auto; margin-right: auto; }

/* Animación de entrada */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* Hero */
.hero { padding-bottom: 28px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.2rem); line-height: 1.05; letter-spacing: -0.04em; font-weight: 800; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--muted); font-size: 0.9rem; font-weight: 600; }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts svg { width: 17px; height: 17px; color: var(--secondary); }
.hero-visual { position: relative; padding: 0 0 26px 26px; }
.hero-photo { padding: 14px; border-radius: 34px; }
.hero-photo img { width: 100%; height: min(54vh, 480px); object-fit: cover; border-radius: 22px; }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px; animation: bob 6s ease-in-out infinite; }
.float-card strong { display: block; font-size: 0.9rem; line-height: 1.2; }
.float-card small { color: var(--muted); font-size: 0.74rem; }
.fc-1 { left: -6px; bottom: 0; }
.fc-2 { right: -10px; top: 26px; animation-delay: -3s; }
.fc-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--primary-light); color: var(--primary); flex: none; }
.fc-icon.green { background: var(--secondary-light); color: var(--secondary); }
.fc-icon svg { width: 20px; height: 20px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Tags en carrusel animado */
.tag-rows { position: relative; z-index: 2; margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; min-width: 0; max-width: 100vw; }
.tag-marquee { min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.tm-track { display: flex; gap: 12px; width: max-content; will-change: transform; animation: tmLeft 55s linear infinite; }
.tm-track[data-dir='right'] { animation-name: tmRight; animation-duration: 62s; }
.tag-marquee:hover .tm-track { animation-play-state: paused; }
.tm-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
  box-shadow: 0 8px 18px -12px rgba(2, 132, 199, 0.3); font-size: 0.9rem; font-weight: 600; color: #334155;
  transition: color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tm-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.tm-pill:nth-child(even)::before { background: #2dd4bf; box-shadow: 0 0 10px #2dd4bf; }
.tm-pill:hover { color: var(--secondary); transform: translateY(-2px); box-shadow: 0 14px 24px -12px rgba(13, 148, 136, 0.4); }
@keyframes tmLeft { to { transform: translate3d(-50%, 0, 0); } }
@keyframes tmRight { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* Nosotros */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.about-media { position: relative; }
.about-photo { padding: 12px; border-radius: 32px; }
.about-photo img { width: 100%; height: min(60vh, 520px); object-fit: cover; border-radius: 22px; }
.about-badge { position: absolute; right: -14px; bottom: 28px; padding: 14px 20px; display: flex; flex-direction: column; border-radius: 20px; animation: bob 7s ease-in-out infinite; }
.about-badge strong { font-size: 1.5rem; line-height: 1.1; }
.about-badge span { font-size: 0.8rem; color: var(--muted); }
.checks { display: grid; gap: 12px; margin-bottom: 28px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.checks svg { width: 21px; height: 21px; color: var(--secondary); flex: none; margin-top: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { padding: 16px 12px; text-align: center; border-radius: 20px; }
.stat strong { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: 0.76rem; color: var(--muted); font-weight: 600; }

/* Servicios */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc { padding: 24px; display: flex; flex-direction: column; }
.svc-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; margin-bottom: 16px; color: var(--primary); background: linear-gradient(145deg, #e0f2fe, #ccfbf1); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 22px -10px rgba(2, 132, 199, 0.4); }
.svc-ico svg { width: 26px; height: 26px; }
.svc-ico.sm { width: 44px; height: 44px; border-radius: 14px; margin: 0; flex: none; }
.svc-ico.sm svg { width: 21px; height: 21px; }
.svc-ico.green { color: var(--secondary); }
.svc h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.svc p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; flex: 1; }
.svc-price { margin-top: 14px; font-size: 0.8rem; font-weight: 800; color: var(--secondary); }
.first-visit { margin-top: 18px; padding: 18px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.first-visit strong { display: block; font-size: 1.05rem; }
.first-visit span:not(.price-big) { color: var(--muted); font-size: 0.88rem; }
.price-big { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }

/* Especialistas */
.doctors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.doctors > .doctor { grid-column: 1 / -1; }
.doctor { display: grid; grid-template-columns: 0.8fr 1.2fr; overflow: hidden; }
.doc-photo { background: linear-gradient(160deg, #ffffff, #e0f2fe); }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.doc-body { padding: 30px; display: flex; flex-direction: column; }
.doc-role { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--secondary); }
.doc-body h3 { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 10px; }
.doc-body > p { color: var(--muted); font-size: 0.92rem; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.chips span { font-size: 0.76rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(2, 132, 199, 0.08); color: #0369a1; }
.doc-contact { display: grid; gap: 6px; margin-bottom: 20px; font-size: 0.88rem; font-weight: 600; }
.doc-contact li { display: flex; align-items: center; gap: 9px; }
.doc-contact svg { width: 16px; height: 16px; color: var(--secondary); }
.doc-contact a:hover { color: var(--secondary); }
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.doc-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 12px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--line); transition: color 0.2s, border-color 0.2s, background 0.2s; }
.doc-link img { width: 20px; height: 20px; border-radius: 6px; }
.doc-link:hover { color: #2f7a69; border-color: #2f7a69; background: #fff; }
.doctor-mini { display: flex; flex-direction: column; overflow: hidden; }
.doctor-mini .doc-photo { aspect-ratio: 1; }
.doctor-mini .doc-body { padding: 20px 22px 24px; }
.doctor-mini h3 { font-size: 1.15rem; margin-bottom: 10px; }
.doc-pending { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(2, 132, 199, 0.35); background: rgba(2, 132, 199, 0.05); color: var(--muted); font-size: 0.82rem; }
.doc-pending svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--secondary); }
.doctor-soon { padding: 30px; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; border-style: dashed; border-color: rgba(2, 132, 199, 0.35); }
.doctor-soon h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.doctor-soon p { color: var(--muted); font-size: 0.9rem; }

/* Galería deslizable */
.gallery {
  width: 100%; max-width: 100vw; min-width: 0;
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px max(24px, calc((100vw - 1200px) / 2 + 24px)) 18px; scrollbar-width: none; outline: none;
}
.gallery::-webkit-scrollbar { display: none; }
.shot { position: relative; flex: 0 0 clamp(260px, 30vw, 380px); height: clamp(320px, 52vh, 460px); margin: 0; padding: 8px; scroll-snap-align: center; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 19px; transition: transform 0.7s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot figcaption { position: absolute; left: 20px; bottom: 20px; padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(10px); }
.gallery-ctrl { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }
.gallery-ctrl svg { width: 20px; height: 20px; }

/* Ubicación */
.loc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: stretch; }
.loc-card { display: grid; grid-template-columns: 0.85fr 1.15fr; overflow: hidden; }
.loc-photo { width: 100%; height: 100%; object-fit: cover; }
.loc-info { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.info-row { display: flex; gap: 12px; }
.info-row svg { width: 20px; height: 20px; color: var(--secondary); flex: none; margin-top: 3px; }
.info-row strong { display: block; font-size: 0.9rem; }
.info-row p { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.loc-info .btn { margin-top: auto; }
.map-box { overflow: hidden; min-height: 380px; padding: 8px; }
.map-box iframe { width: 100%; height: 100%; min-height: 364px; border: 0; border-radius: 19px; }

/* Opiniones */
.rev-marquee { width: 100%; max-width: 100vw; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rev-track { display: flex; align-items: stretch; gap: 18px; width: max-content; animation: tmLeft 70s linear infinite; padding: 8px 0 18px; }
.rev-marquee:hover .rev-track { animation-play-state: paused; }
.rev-reverse { animation-name: tmRight; animation-duration: 80s; }
.rev-label { display: flex; align-items: center; gap: 12px; margin: 6px auto 8px; }
.rev-label a { font-size: 0.82rem; font-weight: 700; color: var(--primary); text-decoration: underline; }
.src-chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; background: var(--secondary-light); color: var(--secondary); }
.src-ico { width: 16px; height: 16px; margin-right: 7px; border-radius: 4px; flex: none; }
.rev-intro { display: none; }
.src-chip.google { background: #e8f0fe; color: #1a56c4; }
.review.rv-m { width: 560px; }
.review.rv-l { width: 820px; }
.review { width: 380px; padding: 22px; white-space: normal; }
.rv-badge { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; background: var(--secondary-light); color: #0f766e; }
.rv-badge svg { width: 12px; height: 12px; }
#revTrackG .rv-badge { background: #e8f0fe; color: #1a56c4; }
.review p { color: #334155; font-size: 0.92rem; line-height: 1.55; }
.review footer { margin-top: 14px; display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: var(--muted); }
.review .av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 800; color: #fff; background: var(--grad); }
.review footer strong { display: block; color: var(--text); font-size: 0.86rem; }

/* Citas y solicitudes */
.tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.8rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 0.93rem; color: var(--muted); background: rgba(255, 255, 255, 0.6); border: 1px solid var(--line); transition: all 0.25s var(--ease); }
.tab-btn svg { width: 18px; height: 18px; }
.tab-btn.active { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 12px 24px -10px rgba(13, 148, 136, 0.55); }
.pane { display: none; padding: 30px; }
.pane.active { display: block; animation: fadeUp 0.45s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 0.8rem; font-weight: 700; color: #334155; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.78rem 1rem; font: inherit; font-size: 0.92rem; color: var(--text);
  background: rgba(255, 255, 255, 0.88); border: 1px solid #cbd5e1; border-radius: 13px; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15); background: #fff; }
.field.error input, .field.error select, .field.error textarea { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.1); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.86rem; color: var(--muted); }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--secondary); flex: none; }
.check a { color: var(--primary); font-weight: 700; text-decoration: underline; }
.check.error { color: #e11d48; }
.form-msg { margin-top: 14px; padding: 12px 16px; border-radius: 13px; font-size: 0.9rem; font-weight: 600; background: var(--secondary-light); color: #0f766e; }
.form-msg.err { background: #ffe4e6; color: #be123c; }

/* Contacto y footer */
.contact { justify-content: space-between; padding-bottom: 0; }
.contact > .container { margin-top: auto; margin-bottom: 40px; }
.contact-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 38px; align-items: center; }
.contact-list { display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 14px; align-items: center; font-weight: 600; font-size: 0.95rem; }
.contact-list small { display: block; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
.contact-list a:hover { color: var(--secondary); }
.msg-form { display: grid; gap: 14px; padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 16px 36px -22px rgba(2, 132, 199, 0.35); }

.footer { margin-top: 0; padding: 48px 0 20px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 255, 255, 0.9); scroll-snap-align: end; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 28px; }
.foot-note { margin-top: 14px; color: var(--muted); font-size: 0.88rem; max-width: 300px; }
.footer h4 { font-size: 0.92rem; margin-bottom: 12px; }
.footer ul { display: grid; gap: 7px; }
.footer ul a { color: var(--muted); font-size: 0.88rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--secondary); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadeUp 0.3s var(--ease); }
.modal-box { position: relative; max-width: 620px; width: 100%; max-height: 82vh; overflow-y: auto; padding: 32px; background: rgba(255, 255, 255, 0.92); display: grid; gap: 12px; }
.modal-box h3 { font-size: 1.35rem; font-weight: 800; }
.modal-box p { color: #475569; font-size: 0.92rem; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; }

/* WhatsApp flotante */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #22c55e, #0d9488); box-shadow: 0 14px 28px -8px rgba(13, 148, 136, 0.6); transition: transform 0.25s var(--ease); }
.wa-fab:hover { transform: scale(1.08) translateY(-2px); }
.wa-fab svg { width: 26px; height: 26px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1279px) {
  .nav-cta { display: none; }
  .menu-btn { display: flex; }
  .nav-links {
    position: fixed; top: 70px; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 18px 18px;
    background: #fff; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 24px 40px -24px rgba(15, 23, 42, 0.3);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all 0.3s var(--ease);
    max-height: calc(100dvh - 70px); overflow-y: auto;
  }
  .nav-links.open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a:not(.btn) { padding: 13px 6px; font-size: 1rem; border-radius: 12px; }
  .nav-mobile-cta { display: block; padding-top: 12px; }
  .header, .header.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Móvil: sin blur pesado (iOS Safari se queda sin memoria y recarga la página) */
@media (max-width: 1020px) {
  .glass, .btn-glass, .shot figcaption, .footer { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass { background: rgba(255, 255, 255, 0.88); }
  .ambient { filter: blur(60px); animation: none !important; opacity: 0.4; }
  .spot:hover { transform: none; }
}

@media (max-width: 1020px) {
  html { scroll-snap-type: none; }
  .screen { padding: 104px 0 56px; min-height: auto; }
  .hero { min-height: 100svh; }
  .hero-grid, .about-grid, .loc-grid, .contact-card, .doctors { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-visual { padding: 0 0 26px 0; }
  .hero-photo img { height: 340px; }
  .about-photo img { height: 340px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .container { padding: 0 18px; }
  .services-grid { grid-template-columns: 1fr; }
  .doctor, .loc-card { grid-template-columns: minmax(0, 1fr); }
  .doc-photo { height: auto; aspect-ratio: 4 / 5; }
  .doc-photo img { object-position: center 12%; }
  .loc-photo { height: 220px; }
  .form-grid { grid-template-columns: 1fr; }
  .pane { padding: 22px 18px; }
  .stats { grid-template-columns: 1fr; }
  .float-card { display: none; }
  .about-badge { right: 8px; }
  /* Google ocupa su propia pantalla, centrado y con encabezado */
  .rev-google { min-height: calc(100svh - 70px); display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
  .rev-intro { display: block; margin-bottom: 18px; }
  .rev-intro h3 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
  .rev-intro p { margin-top: 4px; font-size: 0.9rem; color: var(--muted); }
  .rev-track { align-items: flex-start; gap: 12px; }
  .review, .review.rv-m, .review.rv-l { padding: 16px; }
  .review { width: 270px; }
  .review.rv-m { width: 300px; }
  .review.rv-l { width: 330px; }
  .review p { font-size: 0.88rem; line-height: 1.5; }
  .rv-badge { margin-bottom: 8px; font-size: 0.68rem; }
  .review footer { margin-top: 10px; }
  .review .av { width: 30px; height: 30px; font-size: 0.8rem; }
  .contact-card { padding: 24px 18px; }
  .foot-grid { grid-template-columns: 1fr; }
  .brand-text small { display: none; }
  .first-visit { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   Ajuste de altura: cada sección cabe en una pantalla (escritorio)
   Los tamaños dependen de la altura de la ventana (vh) para no desbordar.
   ========================================================================== */
@media (min-width: 1021px) {
  .screen { padding: clamp(78px, 10vh, 96px) 0 clamp(18px, 3vh, 36px); }
  .sec-head { margin-bottom: clamp(12px, 2.6vh, 30px); }
  .sec-head h2, h2 { font-size: clamp(1.6rem, min(3.6vw, 5.4vh), 2.9rem); }
  .sub { margin-top: clamp(4px, 1vh, 12px); font-size: clamp(0.88rem, 1.9vh, 1.05rem); }
  .badge { margin-bottom: clamp(8px, 1.6vh, 16px); }

  /* Inicio */
  .hero h1 { font-size: clamp(2.1rem, min(5.2vw, 8vh), 4.2rem); }
  .lead { margin: clamp(8px, 1.8vh, 16px) 0 clamp(14px, 2.8vh, 26px); font-size: clamp(0.95rem, 2.1vh, 1.12rem); }
  .hero-photo img { height: min(46vh, 460px); }
  .hero-facts { margin-top: clamp(12px, 2.4vh, 26px); }
  .tag-rows { margin-top: clamp(14px, 3vh, 34px); gap: 10px; }
  .tm-pill { padding: 8px 18px; }

  /* Nosotros */
  .about-photo img { height: min(52vh, 480px); }
  .checks { gap: 8px; margin-bottom: clamp(14px, 2.6vh, 28px); }
  .stat { padding: 12px 10px; }

  /* Servicios */
  .services-grid { gap: clamp(10px, 1.8vh, 16px); }
  .svc { padding: clamp(14px, 2.4vh, 24px); }
  .svc-ico { width: clamp(38px, 5.6vh, 54px); height: clamp(38px, 5.6vh, 54px); margin-bottom: clamp(8px, 1.6vh, 16px); border-radius: 15px; }
  .svc-ico svg { width: clamp(19px, 2.8vh, 26px); height: clamp(19px, 2.8vh, 26px); }
  .svc p { font-size: clamp(0.76rem, 1.7vh, 0.86rem); line-height: 1.42; }
  .svc-price { margin-top: clamp(6px, 1.4vh, 14px); }
  .first-visit { margin-top: clamp(10px, 1.8vh, 18px); padding: clamp(10px, 1.8vh, 18px) 24px; }
  .price-big { font-size: clamp(1.4rem, 3.4vh, 1.9rem); }

  /* Especialistas */
  .doc-body { padding: clamp(16px, 3vh, 30px); }
  .doc-body h3 { font-size: clamp(1.3rem, 3.2vh, 1.65rem); }
  .doc-body > p { font-size: clamp(0.8rem, 1.8vh, 0.92rem); }
  .chips { margin: clamp(8px, 1.6vh, 16px) 0; }
  .doc-contact { margin-bottom: clamp(10px, 1.8vh, 20px); }
  .doc-photo img { max-height: 70vh; }

  /* Instalaciones */
  .shot { height: clamp(220px, 40vh, 420px); }
  .gallery-ctrl { padding-top: 0; }
  .icon-btn { width: 40px; height: 40px; }

  /* Ubicación */
  .loc-info { padding: clamp(14px, 2.6vh, 26px); gap: clamp(8px, 1.5vh, 14px); }
  .info-row p { font-size: clamp(0.76rem, 1.7vh, 0.85rem); }
  .map-box { min-height: 0; }
  .map-box iframe { min-height: clamp(260px, 50vh, 460px); }

  /* Opiniones */
  .review { padding: clamp(14px, 2.4vh, 22px); }
  .review p { font-size: clamp(0.82rem, 1.8vh, 0.92rem); }
  .rev-label { margin: 2px auto 6px; }
  .rev-track { padding: 4px 0 clamp(6px, 1.6vh, 14px); }

  /* Citas y solicitudes: formulario en 3 columnas */
  .container.narrow { max-width: 1040px; }
  .tabs { margin-bottom: clamp(8px, 1.8vh, 20px); }
  .tab-btn { padding: 0.6rem 1.4rem; }
  .pane { padding: clamp(16px, 3vh, 30px) 28px; }
  .form-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.6vh, 14px) 14px; }
  .field > span { font-size: 0.76rem; }
  .field input, .field select, .field textarea { padding: clamp(0.5rem, 1.2vh, 0.78rem) 0.9rem; font-size: 0.88rem; }
  .field textarea { height: clamp(48px, 7vh, 80px); }
  .btn-block { padding: clamp(0.7rem, 1.6vh, 1rem); }

  /* Contacto y footer */
  .contact > .container { margin-bottom: clamp(16px, 3vh, 40px); }
  .contact-card { padding: clamp(18px, 3.4vh, 38px); gap: 32px; }
  .contact-list { gap: clamp(8px, 1.6vh, 14px); }
  .msg-form { padding: clamp(14px, 2.6vh, 24px); gap: clamp(8px, 1.4vh, 14px); }
  .msg-form textarea { height: clamp(60px, 9vh, 100px); }
  .footer { padding: clamp(20px, 4vh, 48px) 0 14px; }
  .foot-grid { margin-bottom: clamp(12px, 2.4vh, 28px); }
}


@media (min-width: 1021px) {
  #opiniones.screen { padding-top: clamp(70px, 9vh, 88px); }
  #opiniones .sec-head { margin-bottom: clamp(6px, 1.4vh, 16px); }
  #opiniones .sub { display: none; }
  .review { padding: clamp(12px, 2vh, 18px) 22px; }
  .rv-badge { margin-bottom: 8px; }
  .review footer { margin-top: 10px; }
  #servicios .sub { display: none; }
  #servicios .sec-head { margin-bottom: clamp(8px, 1.8vh, 20px); }
  .svc { padding: clamp(12px, 2.1vh, 22px); }
  .foot-grid { gap: 20px; }
  .footer { padding-top: clamp(14px, 3vh, 36px); }
  .contact-card { padding: clamp(16px, 3vh, 32px); }
  .foot-note { display: none; }
}

@media (min-width: 1021px) and (max-height: 700px) {
  .svc p, .doc-body > p { display: none; }
  .hero-facts { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  .tm-track, .rev-track, .float-card, .about-badge, .ambient { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

.hint { font-size: 0.84rem; color: var(--muted); padding: 10px 14px; border-radius: 12px; background: rgba(2, 132, 199, 0.06); }
.form-msg a { text-decoration: underline; font-weight: 800; }
.form-msg.ok-step { display: grid; gap: 10px; }
.form-msg .step-txt { font-weight: 500; }
.form-msg .btn { text-decoration: none; justify-self: start; }

.doc-cedula { display: flex; align-items: center; gap: 8px; margin: -2px 0 12px; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.doc-cedula svg { width: 17px; height: 17px; flex: none; color: var(--secondary); }
.doc-cedula strong { color: var(--text); font-weight: 800; letter-spacing: 0.02em; }
.doc-cedula .ced-nums { white-space: nowrap; }

/* Fecha: iOS Safari le da un ancho propio y centra el texto; se iguala a los demás campos */
.field input[type='date'] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 3rem; text-align: left; }
.field input[type='date']::-webkit-date-and-time-value { text-align: left; min-height: 1.1em; }
.field input[type='date']::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; margin: 0; padding: 0; }
.field input[type='date']::-webkit-datetime-edit { padding: 0; line-height: 1.2; }
@media (min-width: 1021px) { .field input[type='date'] { min-height: 0; } }

/* Contacto (escritorio): el formulario ocupa toda la altura de la tarjeta, sin espacio en blanco debajo */
@media (min-width: 1021px) {
  .contact-card { align-items: stretch; }
  .msg-form { grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .msg-form .field:nth-of-type(3) { min-height: 0; }
  .msg-form .field:nth-of-type(3) textarea { flex: 1; height: auto; min-height: 70px; resize: none; }
}
.hint b { color: var(--text); }

/* Botón y ventana de ayuda de la factura */
.help-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 14px; text-align: left; font: inherit; font-size: 0.88rem; color: #0369a1; background: rgba(2, 132, 199, 0.07); border: 1px dashed rgba(2, 132, 199, 0.4); cursor: pointer; transition: background 0.2s; }
.help-btn:hover { background: rgba(2, 132, 199, 0.12); }
.help-btn svg { width: 22px; height: 22px; flex: none; }
.help-btn strong { font-weight: 800; }
.help-list { display: grid; gap: 14px; margin: 4px 0; }
.help-list dt { font-weight: 800; font-size: 0.92rem; color: var(--text); }
.help-list dd { margin-top: 2px; color: #475569; font-size: 0.9rem; line-height: 1.5; }
.help-list b { color: var(--text); }

/* Ventanas emergentes: fondo sólido para que se lea bien */
.modal { background: rgba(15, 23, 42, 0.55); }
.modal-box { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.45); }
@media (max-width: 760px) {
  .modal { padding: 12px; }
  .modal-box { padding: 54px 20px 22px; max-height: 88vh; max-height: 88dvh; border-radius: 22px; }
  .modal-box { padding-top: 22px; }
  .modal-x { position: sticky; top: 0; z-index: 3; justify-self: end; margin: 0 0 -26px; box-shadow: 0 0 0 6px #fff; }
  .modal-box h3 { font-size: 1.2rem; padding-right: 46px; }
  .help-list { gap: 12px; }
  .help-list dd, .modal-box p { font-size: 0.88rem; }
}

/* Campo de archivo (constancia fiscal) */
.field input[type='file'] { padding: 0.55rem 0.7rem; cursor: pointer; font-size: 0.86rem; color: var(--muted); }
.field input[type='file']::file-selector-button { margin-right: 12px; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* Formas de pago en el pie */
.foot-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding: 14px 24px; margin-bottom: 14px; border-top: 1px solid var(--line); }
.pay-label { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; font-size: 0.82rem; font-weight: 800; color: var(--text); }
.pay-label svg { width: 17px; height: 17px; color: var(--secondary); }
.pay-chip { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; color: #334155; }
.pay-chip.hl { background: var(--secondary-light); border-color: transparent; color: #0f766e; }
.pay-note { font-size: 0.8rem; color: var(--muted); }
.pay-note a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pay-note a:hover { color: var(--secondary); }
.modal-box p a { color: var(--primary); font-weight: 700; text-decoration: underline; }

/* ===== Dientes de fondo: flotan como nubes, de izquierda a derecha, muy despacio (detrás de todo el contenido) ===== */
.tooth-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cloud-tooth { position: absolute; top: var(--top); left: 0; width: var(--size); height: calc(var(--size) * 1.1); color: #7cc8f2; opacity: 0.5; will-change: transform; animation: toothDrift var(--dur) linear infinite; animation-delay: var(--delay); }
.cloud-tooth svg { width: 100%; height: 100%; display: block; animation: toothSway var(--sway) ease-in-out infinite alternate; }
@keyframes toothDrift { from { transform: translate3d(-12vw, 0, 0); } to { transform: translate3d(112vw, 0, 0); } }
@keyframes toothSway { from { transform: translateY(-8px) rotate(-6deg); } to { transform: translateY(8px) rotate(6deg); } }
@media (max-width: 720px) { .cloud-tooth.hide-sm { display: none; } .cloud-tooth { opacity: 0.42; } }
@media (prefers-reduced-motion: reduce) { .cloud-tooth, .cloud-tooth svg { animation: none; } .cloud-tooth { left: calc(var(--top) * 0.9); } }

/* Un diente asoma suavemente al pasar el cursor por las tarjetas de servicios */
.svc { position: relative; }
.svc::after { content: ''; position: absolute; right: 14px; bottom: 12px; width: 44px; height: 48px; z-index: 0; pointer-events: none; opacity: 0; transform: translateY(8px) rotate(-8deg); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 440'%3E%3Cpath d='M200 70C170 40 110 30 80 62C45 98 55 160 78 215C95 255 100 330 112 385C120 415 150 420 158 390C168 345 178 300 200 300C222 300 232 345 242 390C250 420 280 415 288 385C300 330 305 255 322 215C345 160 355 98 320 62C290 30 230 40 200 70Z' fill='none' stroke='%237dd3fc' stroke-width='16' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.svc:hover::after { opacity: 0.55; transform: translateY(0) rotate(0); }

/* ===== Mapa dental interactivo ===== */
.map-sec .sec-head { margin-bottom: 26px; }
.dental-map { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 26px 30px; }
.dm-stage { position: relative; max-width: 380px; margin: 0 auto; }
.dm-svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 18px 24px rgba(2, 132, 199, 0.12)); }
.zone { opacity: 0; transition: opacity 0.45s var(--ease); fill: rgba(56, 189, 248, 0.28); stroke: none; pointer-events: none; }
.zone.z-resinas { fill: rgba(13, 148, 136, 0.2); }
.zone.z-implantes { fill: rgba(2, 132, 199, 0.2); }
.zone.z-endodoncia { fill: rgba(225, 29, 72, 0.22); }
.zone.line { fill: none; stroke: #0ea5e9; stroke-width: 9; stroke-linecap: round; }
.zone.dash { stroke: #0d9488; stroke-width: 6; stroke-dasharray: 3 14; animation: dashFlow 1.6s linear infinite; }
.zone.z-ortodoncia rect { fill: #fff; stroke: #0284c7; stroke-width: 5; }
.zone .wire, .zone.z-ortodoncia .wire { fill: none; stroke: #0284c7; stroke-width: 4; }
.zone.z-blanqueamiento path { fill: #f59e0b; }
.dm-crown-line { stroke: #bae6fd; stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
@keyframes dashFlow { to { stroke-dashoffset: -34; } }
.dental-map[data-active='resinas'] .z-resinas, .dental-map[data-active='implantes'] .z-implantes, .dental-map[data-active='endodoncia'] .z-endodoncia,
.dental-map[data-active='limpieza'] .z-limpieza, .dental-map[data-active='cirugia'] .z-cirugia, .dental-map[data-active='bruxismo'] .z-bruxismo,
.dental-map[data-active='ortodoncia'] .z-ortodoncia, .dental-map[data-active='blanqueamiento'] .z-blanqueamiento { opacity: 1; }
.hs { position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--primary); color: var(--primary); font-weight: 800; font-size: 0.8rem; cursor: pointer; box-shadow: 0 6px 14px -4px rgba(2, 132, 199, 0.45); transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; z-index: 3; }
.hs::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; animation: hsPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes hsPulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.hs:hover { transform: translate(-50%, -50%) scale(1.12); }
.hs.on { background: var(--grad); color: #fff; border-color: transparent; transform: translate(-50%, -50%) scale(1.12); }
.hs.on::after { animation: none; }
.hs:focus-visible, .svc-chip:focus-visible { outline: 3px solid rgba(13, 148, 136, 0.45); outline-offset: 2px; }
.svc-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.svc-chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); text-align: left; font-size: 0.84rem; font-weight: 700; color: #334155; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.svc-chip b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(2, 132, 199, 0.1); color: var(--primary); font-size: 0.74rem; }
.svc-chip:hover { background: #fff; transform: translateY(-2px); }
.svc-chip.on { background: #fff; border-color: var(--secondary); color: var(--text); box-shadow: 0 10px 20px -12px rgba(13, 148, 136, 0.5); }
.svc-chip.on b { background: var(--grad); color: #fff; }
.svc-detail { min-height: 190px; }
.svc-info { display: grid; gap: 8px; justify-items: start; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, rgba(2, 132, 199, 0.07), rgba(13, 148, 136, 0.1)); border: 1px solid rgba(13, 148, 136, 0.2); animation: infoIn 0.45s var(--ease); }
@keyframes infoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.svc-info h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.svc-info p { color: #475569; font-size: 0.94rem; }
.tag-zone { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secondary); }
@media (max-width: 900px) { .dental-map { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; } .dm-stage { max-width: 300px; } .svc-chips { grid-template-columns: 1fr; } .map-sec { padding-top: 90px; } }
@media (prefers-reduced-motion: reduce) { .hs::after, .zone.dash { animation: none; } }

/* Logos de formas de pago en el pie */
.pay-logo { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 9px; background: #fff; border: 1px solid var(--line); }
.pay-logo img { width: auto; display: block; }

/* Ventanas emergentes: sin desenfoque de fondo (parpadeaba con las animaciones de atrás) y con las animaciones en pausa mientras están abiertas */
.modal { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(15, 23, 42, 0.62) !important; }
body:has(.modal:not([hidden])) .cloud-tooth,
body:has(.modal:not([hidden])) .cloud-tooth svg,
body:has(.modal:not([hidden])) .ambient,
body:has(.modal:not([hidden])) .tm-track,
body:has(.modal:not([hidden])) .rev-track { animation-play-state: paused !important; }

/* El último bloque (contacto + pie) no se "imanta" a su inicio: así se puede bajar hasta ver las formas de pago al final */
.screen.contact { scroll-snap-align: none; }
.footer { scroll-snap-align: end; }

/* Indicador Abierto / Cerrado (hora de Ciudad de México) */
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; }
.hero-badges .badge { margin-bottom: 0; }
.foot-hours { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.open-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); color: #64748b; }
.open-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; flex: none; }
.open-chip.is-open { color: #047857; border-color: rgba(16, 185, 129, 0.35); background: rgba(236, 253, 245, 0.9); }
.open-chip.is-open .open-dot { background: #10b981; box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.75), 0 0 18px 4px rgba(16, 185, 129, 0.35); animation: openGlow 2.6s ease-in-out infinite; }
.open-chip.is-closed .open-dot { background: #94a3b8; box-shadow: none; opacity: 0.7; }
@keyframes openGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .open-chip.is-open .open-dot { animation: none; } }

/* ===== Ajustes para celular (botones más fáciles de tocar y reseñas sin huecos) ===== */
@media (max-width: 720px) {
  .hs { width: 40px; height: 40px; font-size: 0.9rem; }
  .footer a, .contact-list a, .doc-contact a, .rev-label a, .pay-note a { display: inline-block; padding: 9px 0; }
  .foot-grid ul { gap: 0; }
  .doc-link { padding: 8px 14px 8px 6px; }
  .pay-note { width: 100%; }
  .review { width: 300px; }
  .review.rv-m { width: 380px; }
  .review.rv-l { width: 520px; }
  .svc-chip { padding: 12px 12px; }
  .open-chip { font-size: 0.8rem; padding: 6px 12px; }
}

/* Diente interactivo en celular: diente arriba, tratamientos en una tira horizontal y el texto justo debajo, todo a la vista */
@media (max-width: 900px) {
  .dental-map { gap: 12px; padding: 16px 14px 18px; }
  .dm-stage { max-width: 230px; }
  .svc-chips { display: flex; grid-template-columns: none; overflow-x: auto; gap: 8px; margin: 0 -4px 12px; padding: 2px 4px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .svc-chips::-webkit-scrollbar { display: none; }
  .svc-chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; padding: 10px 14px; }
  .svc-detail { min-height: 0; }
  .svc-info { padding: 16px 18px; }
  .svc-info h3 { font-size: 1.15rem; }
  .svc-info p { font-size: 0.9rem; }
}
@media (max-width: 900px) {
  .map-sec { padding-top: 84px; padding-bottom: 28px; }
  .map-sec .sec-head { margin-bottom: 14px; }
  .map-sec .sec-head .sub { display: none; }
  .map-sec .sec-head h2 { font-size: 1.7rem; }
  .dm-stage { max-width: 205px; }
  .hs { width: 32px; height: 32px; font-size: 0.82rem; }
  .hs::before { content: ''; position: absolute; inset: -6px; }
  .svc-detail { min-height: 215px; }
}

/* Especialistas: Jonathan como tarjeta principal y el resto en tarjetas deslizables */
.doctors { grid-template-columns: minmax(0, 1fr); }
.doc-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.doc-hint { display: none; }
@media (max-width: 900px) {
  .doctors { gap: 14px; }
  .doctor .doc-photo { max-height: 320px; overflow: hidden; }
  .doctor .doc-photo img { object-position: center 18%; }
  .doc-hint { display: flex; align-items: center; gap: 8px; margin: 4px 4px 0; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
  .doc-hint svg { width: 16px; height: 16px; color: var(--secondary); }
  .doc-minis { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: none; }
  .doc-minis::-webkit-scrollbar { display: none; }
  .doctors > .doctor-mini, .doc-minis > .doctor-mini { flex: 0 0 78%; max-width: 300px; scroll-snap-align: center; }
  .doctor-mini .doc-photo { aspect-ratio: 1; }
  .doctor-mini .doc-body { padding: 14px 16px 18px; }
  .doctor-mini h3 { font-size: 1.02rem; margin-bottom: 8px; }
  .doc-pending { font-size: 0.78rem; padding: 8px 10px; }
}

/* Carrusel de especialistas (escritorio y celular) */
.doc-hint { display: flex; align-items: center; gap: 8px; margin: 2px 4px 0; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.doc-hint svg { width: 16px; height: 16px; color: var(--secondary); }
.doc-minis { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 14px; margin: 0 -4px; scrollbar-width: none; }
.doc-minis::-webkit-scrollbar { display: none; }
.doc-minis > .doctor-mini { flex: 0 0 clamp(250px, 31.5%, 380px); scroll-snap-align: start; }
.doc-ctrl { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.doc-ctrl[hidden] { display: none; }
@media (max-width: 900px) { .doc-minis { gap: 12px; } .doc-minis > .doctor-mini { flex: 0 0 78%; max-width: 300px; scroll-snap-align: center; } }

/* Tarjetas del resto del equipo: fotos más bajas para que la sección sea más corta */
.doctor-mini .doc-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.doctor-mini .doc-photo img { object-position: center 24%; }
@media (max-width: 900px) { .doctor-mini .doc-photo { aspect-ratio: 4 / 3; } }
.doctor-mini .doc-photo { aspect-ratio: 3 / 2; }
.doctor-mini .doc-photo img { object-position: center top; }
@media (max-width: 900px) {
  .doctor-mini .doc-photo { aspect-ratio: 3 / 2; }
  .doctor .doc-photo { max-height: 250px; }
  .doctor .doc-body { padding: 18px 18px 20px; }
  .doctor .doc-body > p:not(.doc-cedula) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .doctor .chips { margin: 10px 0; }
  .doctor .doc-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 14px; }
}
@media (max-width: 900px) {
  .doctor .doc-photo { height: 270px; max-height: none; }
  .doctor .doc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
}

/* ===== Diente interactivo en celular: solo el diente con números; al tocar uno sale una etiqueta con su palito y, al tocarla, una tarjeta ===== */
.dm-inner { position: relative; }
.dm-hint, .dm-stick, .dm-tag, .dm-sheet { display: none; }
@media (max-width: 900px) {
  .dental-map { padding: 14px 10px 18px; gap: 0; grid-template-columns: minmax(0, 1fr); }
  .dm-side { display: none; }
  .dm-fig { display: flex; flex-direction: column; align-items: center; }
  .dm-hint { display: block; margin: 0 0 4px; font-size: 0.82rem; font-weight: 700; color: var(--muted); text-align: center; }
  .dm-stage { position: relative; width: 100%; max-width: 340px; margin: 0 auto; padding: 8px 0 4px; }
  .dm-inner { width: 54%; margin: 0 auto; }
  .hs { width: 34px; height: 34px; }
  .dm-stick { display: block; position: absolute; height: 3px; margin-top: -1.5px; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); z-index: 2; pointer-events: none; }
  .dm-stick[hidden], .dm-tag[hidden] { display: none; }
  .dm-stick.grow { animation: stickGrow 0.35s var(--ease) forwards; }
  @keyframes stickGrow { to { transform: scaleX(1); } }
  .dm-tag { display: block; position: absolute; width: 110px; transform: translateY(-50%); padding: 7px 8px; border-radius: 12px; background: #fff; border: 2px solid var(--primary); color: var(--text); font: inherit; font-size: 0.72rem; font-weight: 800; line-height: 1.15; text-align: center; box-shadow: 0 10px 20px -10px rgba(2, 132, 199, 0.55); z-index: 3; animation: tagIn 0.35s 0.15s var(--ease) both; cursor: pointer; }
  .dm-tag::after { content: 'Ver más'; display: block; margin-top: 3px; font-size: 0.64rem; font-weight: 700; color: var(--secondary); }
  @keyframes tagIn { from { opacity: 0; transform: translateY(-50%) scale(0.9); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
  .dm-sheet { position: fixed; inset: 0; z-index: 2600; align-items: flex-end; background: rgba(15, 23, 42, 0.5); }
  .dm-sheet:not([hidden]) { display: flex; }
  .dm-sheet-box { position: relative; width: 100%; max-height: 80vh; max-height: 80dvh; overflow-y: auto; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -20px 50px -20px rgba(15, 23, 42, 0.5); animation: sheetUp 0.35s var(--ease); }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .dm-sheet-x { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; }
  .dm-sheet-body .svc-info { display: grid; gap: 8px; justify-items: start; padding: 4px 4px 0; background: none; border: 0; animation: none; }
  .dm-sheet-body .svc-info[hidden] { display: grid; }
  .dm-sheet-body h3 { font-size: 1.3rem; padding-right: 48px; }
  .dm-sheet-body .btn { margin-top: 6px; }
}

/* Equipo: tarjetas pequeñas en carrusel infinito (la información profesional de cada doctor está oculta por ahora: .doc-pending[hidden]) */
.doc-pending[hidden] { display: none !important; }
.doc-minis { scroll-snap-type: none; gap: 14px; padding: 4px 4px 12px; scroll-behavior: auto; }
.doc-minis > .doctor-mini { flex: 0 0 190px; max-width: none; scroll-snap-align: none; }
.doctor-mini .doc-photo { aspect-ratio: 4 / 3; }
.doctor-mini .doc-body { padding: 12px 14px 14px; }
.doctor-mini .doc-role { font-size: 0.64rem; letter-spacing: 0.05em; line-height: 1.25; }
.doctor-mini h3 { font-size: 0.92rem; line-height: 1.25; margin: 4px 0 0; letter-spacing: -0.01em; }
.doc-ctrl[hidden] { display: flex; }
@media (max-width: 900px) {
  .doc-minis > .doctor-mini { flex: 0 0 150px; max-width: none; }
  .doctor-mini .doc-body { padding: 10px 12px 12px; }
  .doctor-mini h3 { font-size: 0.86rem; }
}
.doctor-mini .doc-photo { aspect-ratio: 16 / 10; }

/* Diente interactivo en celular: ocupa la pantalla completa de la sección */
@media (max-width: 900px) {
  .map-sec { min-height: 100svh; justify-content: center; padding: 84px 0 24px; }
  .map-sec .sec-head { margin-bottom: 8px; }
  .dental-map { padding: 12px 6px 16px; }
  .dm-hint { margin-bottom: 0; }
  .dm-stage { max-width: 100%; padding: 6px 0 0; }
  .dm-inner { width: 70%; max-width: 320px; }
  .hs { width: 38px; height: 38px; font-size: 0.95rem; }
  .dm-tag { width: 118px; font-size: 0.78rem; }
}

/* Resto del equipo: tarjetas más grandes, sin carrusel infinito */
.doc-minis { gap: 16px; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.doc-minis > .doctor-mini { flex: 0 0 clamp(250px, 23.5%, 300px); scroll-snap-align: start; }
.doctor-mini .doc-photo { aspect-ratio: 4 / 3; }
.doctor-mini .doc-body { padding: 16px 18px 18px; }
.doctor-mini .doc-role { font-size: 0.72rem; }
.doctor-mini h3 { font-size: 1.05rem; margin: 4px 0 0; }
.doc-ctrl[hidden] { display: none; }
.doctor-more { align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px 20px; border-style: dashed; border-color: rgba(2, 132, 199, 0.35); }
.doctor-more h3 { font-size: 1.05rem; }
.doctor-more p { color: var(--muted); font-size: 0.86rem; }
@media (max-width: 900px) { .doc-minis > .doctor-mini { flex: 0 0 76%; max-width: 300px; scroll-snap-align: center; } .doctor-mini h3 { font-size: 1rem; } }
/* Tarjetas del equipo al doble de tamaño */
.doc-minis > .doctor-mini { flex: 0 0 clamp(300px, 33%, 380px); }
.doctor-mini .doc-body { padding: 20px 22px 22px; }
.doctor-mini .doc-role { font-size: 0.8rem; }
.doctor-mini h3 { font-size: 1.3rem; }
.doctor-more h3 { font-size: 1.3rem; }
.doctor-more p { font-size: 0.95rem; }
@media (max-width: 900px) { .doc-minis > .doctor-mini { flex: 0 0 86%; max-width: 380px; } .doctor-mini h3 { font-size: 1.15rem; } }
/* Diente interactivo en celular: más grande para que los números no se amontonen */
@media (max-width: 900px) {
  .dental-map { padding: 10px 4px 14px; }
  .dm-stage { padding: 4px 0 0; }
  .dm-inner { width: 86%; max-width: 400px; }
  .hs { width: 40px; height: 40px; font-size: 1rem; }
  .dm-tag { width: 112px; }
}

.dm-tag.above { transform: translateY(-100%); animation-name: tagInUp; }
@keyframes tagInUp { from { opacity: 0; transform: translateY(-100%) scale(0.9); } to { opacity: 1; transform: translateY(-100%) scale(1); } }

@keyframes tagFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .dm-tag, .dm-tag.above { transform: none !important; animation: tagFade 0.35s 0.15s both !important; } }

@media (max-width: 900px) {
  .dm-stick-v { display: block; position: absolute; width: 3px; margin-left: -1.5px; border-radius: 3px; background: linear-gradient(180deg, var(--primary), var(--secondary)); transform: scaleY(0); z-index: 2; pointer-events: none; }
  .dm-stick-v[hidden] { display: none; }
  .dm-stick-v.grow { animation: stickGrowV 0.3s 0.3s var(--ease) forwards; }
  @keyframes stickGrowV { to { transform: scaleY(1); } }
}
.dm-stick-v { display: none; }
@media (max-width: 900px) { .dm-stick-v:not([hidden]) { display: block; } }

/* Pie de página centrado en celular */
@media (max-width: 720px) {
  .footer .foot-grid { text-align: center; justify-items: center; }
  .footer .foot-grid > div { display: flex; flex-direction: column; align-items: center; }
  .footer .brand { justify-content: center; }
  .footer .foot-note { max-width: 320px; margin-left: auto; margin-right: auto; }
  .footer ul { display: flex; flex-direction: column; align-items: center; }
  .foot-pay { justify-content: center; text-align: center; padding-left: 16px; padding-right: 16px; }
  .pay-label { width: 100%; justify-content: center; margin: 0 0 2px; }
  .pay-note { text-align: center; }
  .foot-bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .foot-hours { justify-content: center; }
}
@media (max-width: 720px) {
  .footer .brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0; width: 100%; text-align: center; }
  .footer .brand .brand-text { align-items: center; text-align: center; }
}

/* Pie en celular: separadores entre secciones, como los de formas de pago y copyright */
@media (max-width: 720px) {
  .footer .foot-grid { gap: 0; }
  .footer .foot-grid > div { width: 100%; padding: 22px 0; border-top: 1px solid var(--line); }
  .footer .foot-grid > div:first-child { padding-top: 0; border-top: 0; }
  .footer .foot-grid { margin-bottom: 0; }
}

/* Pie en celular, más compacto y parejo */
@media (max-width: 720px) {
  .footer .foot-grid { display: grid; grid-template-columns: 1fr 1fr; justify-items: stretch; }
  .footer .foot-grid > div { padding: 16px 8px; }
  .footer .foot-grid > div:first-child, .footer .foot-grid > div:nth-child(4) { grid-column: 1 / -1; }
  .footer .foot-grid > div:nth-child(3) { border-left: 1px solid var(--line); }
  .footer .foot-grid h4 { margin-bottom: 4px; }
  .footer .foot-grid > div:not(:first-child) a { padding: 6px 0; font-size: 0.9rem; }
  .footer .foot-grid > div:nth-child(4) ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; width: 100%; justify-items: center; }
  /* Formas de pago: dos columnas parejas */
  .foot-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; justify-items: stretch; padding: 16px; }
  .foot-pay .pay-label, .foot-pay .pay-note { grid-column: 1 / -1; justify-content: center; }
  .foot-pay .pay-chip, .foot-pay .pay-logo { justify-content: center; text-align: center; height: 38px; display: inline-flex; align-items: center; }
  .foot-pay .pay-chip { padding: 0 10px; }
  .foot-pay .pay-chip.hl { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .foot-pay { grid-template-columns: repeat(6, 1fr); }
  .foot-pay .pay-label, .foot-pay .pay-note, .foot-pay .pay-chip.hl { grid-column: 1 / -1; }
  .foot-pay .pay-chip { grid-column: span 3; }
  .foot-pay .pay-logo { grid-column: span 2; padding: 0 6px; }
  .foot-pay .pay-logo img { max-width: 100%; }
}

@media (max-width: 1020px) {
  .nav-mobile-cta { padding: 14px 12px 8px; }
  .nav-mobile-cta .btn { width: 100%; justify-content: center; padding: 1rem; }
}