/* =========================================================================
   SISTEMA DE DISEÑO — LOPRODENT (clínica odontológica, Atuntaqui, Ecuador)

   Nicho: healthcare & medical platforms / odontología de consultorio pequeño.

   Tendencia aplicada: los sitios dentales líderes de 2025-2026 abandonan el
   "blanco-y-azul de hospital" por paletas cálidas (teal suave, neutros cálidos,
   nunca blanco puro) y por el pareo tipográfico serif+sans que proyecta
   "empatía estética" (caso Aventura Dental Arts, nominado Awwwards 2026) en
   vez de frialdad clínica. El propio isotipo de LoproDent ya usa una serif
   ("Lopro Dent") sobre un diente en teal — este sistema construye sobre eso
   en vez de reemplazarlo.

   Paleta: teal muestreado directamente del logo (#6EC1BA en el anillo),
   oscurecido para uso de texto/botones con contraste accesible, más un
   acento terracota cálido (nunca rojo — el rojo dispara alarma en salud)
   para insignias/iconos decorativos, sobre una base crema (nunca blanco
   puro, que lee como "frío/institucional" según la investigación 2026).

   Tipografía: Fraunces (serif cálida, óptica variable) para titulares —
   coherente con el wordmark del logo — y Work Sans (sans humanista) para
   cuerpo/UI. Inter se evita deliberadamente: es el default genérico que
   este sistema busca no parecer.

   Radios/sombras: radios grandes y suaves (18–28px) en vez del 8px/rounded-lg
   por defecto, evocando la curva orgánica del diente del logo. Sombras
   difusas con tinte cálido, no el "0 1px 3px rgba(0,0,0,.1)" genérico.

   Referentes consultados: DentoPro (Loja, paleta teal/blanco), Nera y
   Soláser (Ibarra), Oral Synergy/Orthodent (Cuenca), Aventura Dental Arts
   (nominado Awwwards 2026, paleta cálida tipo "spa boutique").
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Paleta */
  --color-primary: #2F8F86;        /* teal oscurecido — texto/botones, AA sobre blanco */
  --color-primary-dark: #1F655F;   /* hover / estados activos */
  --color-primary-light: #6EC1BA;  /* teal del logo tal cual — superficies decorativas */
  --color-primary-tint: #E6F3F1;   /* fondo muy suave para badges/secciones alternas */
  --color-accent: #D97F52;         /* terracota cálido — nunca rojo, acentos puntuales */
  --color-accent-tint: #FBEBE1;

  --color-base: #FBF8F3;           /* crema, no blanco puro */
  --color-surface: #FFFFFF;
  --color-surface-alt: #F3EEE4;
  --color-border: #E7E0D3;

  --color-text: #2A2925;           /* carbón cálido, no negro puro */
  --color-text-muted: #6B665C;
  --color-text-on-primary: #FFFFFF;

  /* Tipografía */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;

  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --step-3: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);

  /* Espaciado / forma */
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 24px 48px -28px rgba(42, 41, 37, 0.28);
  --shadow-lift: 0 32px 56px -24px rgba(31, 101, 95, 0.35);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--color-text);
  background: var(--color-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-text);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--color-primary);
}
.lede { font-size: var(--step-1); color: var(--color-text-muted); font-weight: 400; }

.container {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}
section { padding-block: var(--space-section); }
.section-alt { background: var(--color-surface-alt); }
.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-3px); }
.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-3px); }
.btn-whatsapp {
  background: #25D366;
  color: #fff;
}
.btn-whatsapp:hover { background: #1DA851; transform: translateY(-3px); }

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251, 248, 243, 0.97);
  border-bottom: 1px solid var(--color-border);
  /* Nota: se evita "backdrop-filter" aquí a propósito — por especificación CSS,
     crea un containing block para descendientes "position: fixed" (como el menú
     móvil), lo que rompía el overlay de pantalla completa en todos los navegadores. */
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}
.nav-brand { display: flex; align-items: center; gap: 0.75rem; }
.nav-brand img { height: 60px; width: 60px; border-radius: 50%; }
.nav-brand .wordmark { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; }
.nav-brand .tagline { display: block; font-size: 0.68rem; color: var(--color-text-muted); letter-spacing: 0.04em; }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  position: relative;
  font-weight: 500;
  font-size: 0.92rem;
  padding-block: 0.3rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-primary);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--color-primary); }
.nav-cta { display: flex; align-items: center; gap: 0.75rem; }
.nav-toggle { display: none; }

@media (min-width: 901px) {
  .nav-cta { margin-left: clamp(1.5rem, 2.5vw, 2.75rem); }
}

@media (max-width: 480px) {
  .nav-brand img { height: 46px; width: 46px; }
  .nav-brand .wordmark { font-size: 1.1rem; white-space: nowrap; }
  .nav-brand .tagline { display: none; }
}

@media (max-width: 900px) {
  .nav-links { position: fixed; inset: 72px 0 0 0; background: var(--color-base); flex-direction: column; padding: 2rem; gap: 1.5rem; transform: translateY(-16px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s; }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: none; padding: 0.5rem; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--color-text); border-radius: 2px; }
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding-block: clamp(3rem, 3vw + 2rem, 6rem) var(--space-section);
}
.hero h1 { margin-block: 1rem 1.25rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-trust { display: flex; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; }
.hero-trust div { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-primary); }
.hero-trust span { display: block; font-size: 0.78rem; color: var(--color-text-muted); font-family: var(--font-body); }
.hero-media { position: relative; }
.hero-media .photo-placeholder { aspect-ratio: 4/5; border-radius: var(--radius-lg); }
.hero-badge {
  position: absolute;
  bottom: -1.5rem; left: -1.5rem;
  background: var(--color-surface);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; gap: 0.75rem;
  max-width: 240px;
}

/* Portada ambiental: la capa de imágenes se podrá sustituir por un video real. */
.hero-ambient {
  position: relative;
  display: block;
  min-height: clamp(640px, 82vh, 860px);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-primary-dark);
}
.hero-ambient-media,
.hero-ambient-overlay,
.hero-ambient-frame { position: absolute; inset: 0; }
.hero-ambient-media { z-index: -2; overflow: hidden; }
.hero-ambient-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  animation: hero-ambient-cycle 24s infinite;
  will-change: opacity, transform;
}
.hero-ambient-frame-1 { animation-delay: 0s; }
.hero-ambient-frame-2 { animation-delay: 8s; }
.hero-ambient-frame-3 { animation-delay: 16s; }
.hero-ambient-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(15, 44, 42, 0.9) 0%, rgba(15, 44, 42, 0.72) 42%, rgba(15, 44, 42, 0.18) 76%, rgba(15, 44, 42, 0.08) 100%),
    linear-gradient(0deg, rgba(15, 44, 42, 0.35), transparent 45%);
}
.hero-ambient-content {
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
}
.hero-ambient .hero-copy { max-width: 690px; }
.hero-ambient h1,
.hero-ambient .lede,
.hero-ambient .hero-trust div { color: #fff; }
.hero-ambient .eyebrow { color: var(--color-primary-light); }
.hero-ambient .hero-trust span { color: rgba(255,255,255,0.78); }
.hero-ambient .btn-ghost { border-color: rgba(255,255,255,0.65); color: #fff; }
.hero-ambient .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
@keyframes hero-ambient-cycle {
  0%, 31% { opacity: 1; transform: scale(1.04); }
  39%, 100% { opacity: 0; transform: scale(1.12); }
}

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
  .hero-badge { left: 1rem; }
  .hero-ambient { min-height: 720px; }
  .hero-ambient-overlay {
    background: linear-gradient(0deg, rgba(15, 44, 42, 0.92) 0%, rgba(15, 44, 42, 0.66) 62%, rgba(15, 44, 42, 0.28) 100%);
  }
  .hero-ambient-content { align-items: flex-end; padding-block: 5rem 4rem; }
}

/* Placeholder de fotografía — para reemplazar con material real del cliente */
.photo-placeholder {
  background:
    repeating-linear-gradient(135deg, var(--color-primary-tint), var(--color-primary-tint) 12px, var(--color-surface-alt) 12px, var(--color-surface-alt) 24px);
  border: 2px dashed var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 1.5rem;
  min-height: 220px;
}
.photo-placeholder span { max-width: 22ch; }
.photo-placeholder.square { aspect-ratio: 1/1; }
.photo-placeholder.wide { aspect-ratio: 16/9; }

/* Tarjetas de tratamiento */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.75rem;
}
.treatment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.9rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.treatment-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: transparent; }
.treatment-card .icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-tint);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.5rem;
}
.treatment-card h3 { margin-bottom: 0.5rem; }
.treatment-card p { color: var(--color-text-muted); font-size: 0.92rem; }
.treatment-card .price-range {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-tint);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* Equipo / profesionales */
.team-card { text-align: center; }
.team-card .photo-placeholder { border-radius: 50%; aspect-ratio: 1/1; margin-inline: auto; margin-bottom: 1.25rem; width: min(220px, 100%); }
.team-card h3 { margin-bottom: 0.2rem; }
.team-card .role { color: var(--color-primary); font-weight: 600; font-size: 0.85rem; margin-bottom: 0.6rem; }

/* Testimonios */
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--color-border);
}
.testimonial-card .quote { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; margin-bottom: 1.25rem; }
.testimonial-person { display: flex; align-items: center; gap: 0.85rem; }
.testimonial-person .photo-placeholder { width: 52px; height: 52px; border-radius: 50%; font-size: 0.55rem; padding: 0.3rem; min-height: 0; }
.testimonial-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.testimonial-person strong { display: block; font-size: 0.92rem; }
.testimonial-person span { font-size: 0.8rem; color: var(--color-text-muted); }

.video-embed {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-text);
  aspect-ratio: 9/16;
  max-width: 380px;
  box-shadow: var(--shadow-soft);
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; align-items: start; justify-items: center; }
.testimonials-video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.patient-video-card {
  width: min(100%, 380px);
  overflow: hidden;
  background: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.patient-video-card video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; background: #101817; }
.patient-video-card figcaption { display: grid; gap: 0.15rem; padding: 1rem 1.15rem 1.15rem; color: #fff; }
.patient-video-card figcaption strong { font-family: var(--font-display); }
.patient-video-card figcaption span { color: rgba(255,255,255,0.72); font-size: 0.82rem; }
.video-gallery-note { max-width: 62ch; margin: 1.5rem auto 0; text-align: center; color: var(--color-text-muted); font-size: 0.86rem; }
@media (max-width: 980px) {
  .testimonials-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonials-video-grid .patient-video-card { justify-self: center; }
}
@media (max-width: 620px) {
  .testimonials-video-grid { grid-template-columns: 1fr; }
}

/* Fotografías reales de la clínica */
.clinic-hero-photo { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.clinic-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.clinic-gallery-item { position: relative; overflow: hidden; min-height: 300px; border-radius: var(--radius-lg); background: var(--color-primary-tint); }
.clinic-gallery-item-wide { grid-column: 1 / -1; min-height: 380px; }
.clinic-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.clinic-gallery-item:hover img { transform: scale(1.035); }
.clinic-gallery-item figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); background: rgba(15,44,42,0.86); color: #fff; font-size: 0.82rem; font-weight: 600; backdrop-filter: blur(8px); }
@media (max-width: 680px) {
  .clinic-gallery { grid-template-columns: 1fr; }
  .clinic-gallery-item,
  .clinic-gallery-item-wide { grid-column: auto; min-height: 260px; }
}

/* Tarjeta de video (fallback confiable a un embed frágil de Facebook) */
.video-card {
  position: relative;
  display: block;
  aspect-ratio: 9/16;
  max-width: 320px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background:
    repeating-linear-gradient(135deg, #24433f, #24433f 12px, #1b332f 12px, #1b332f 24px);
  color: #fff;
  transition: transform 0.3s var(--ease);
}
.video-card:hover { transform: translateY(-6px); }
.video-card .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4);
}
.video-card .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.25rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
  font-size: 0.85rem;
}
.video-card .caption strong { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.2rem; }

/* Comparador antes/después */
.compare-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  user-select: none;
  touch-action: pan-y;
}
.compare-slider .frame { position: absolute; inset: 0; }
.compare-slider .frame.after-frame { clip-path: inset(0 0 0 50%); }
.compare-slider .frame .photo-placeholder { position: absolute; inset: 0; border-radius: 0; border: none; }
.compare-slider .handle {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--color-surface);
  transform: translateX(-50%);
  cursor: ew-resize;
}
.compare-slider .handle::after {
  content: "↔";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  background: var(--color-surface);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
  color: var(--color-primary);
  font-weight: 700;
}
.compare-label { position: absolute; top: 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); background: rgba(42,41,37,0.65); color: #fff; }
.compare-label.before { left: 1rem; }
.compare-label.after { right: 1rem; }

/* FAQ (con schema FAQPage) */
.faq-list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.6rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: transform 0.3s var(--ease); font-weight: 700; }
.faq-item[open] summary .plus { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 1.6rem 1.5rem; color: var(--color-text-muted); }

/* Franja de confianza (seguros, insignias) */
.trust-strip { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: center; padding-block: 2.5rem; }
.trust-strip .photo-placeholder { width: 130px; height: 60px; min-height: 0; font-size: 0.65rem; border-radius: var(--radius-sm); }

/* CTA banda — con marca de agua del isotipo, para reforzar la marca a lo largo del sitio */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 3vw, 4rem);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: 50%; right: -6%;
  width: min(420px, 55%);
  aspect-ratio: 1/1;
  background: url('../img/logo.png') center/contain no-repeat;
  transform: translateY(-50%) rotate(-6deg);
  opacity: 0.16;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: rgba(255,255,255,0.85); margin-inline: auto; }
.cta-band .btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.cta-band .btn-ghost:hover { border-color: #fff; }
@media (max-width: 640px) { .cta-band::before { opacity: 0.1; width: 70%; } }

/* Formulario de contacto */
.form-grid { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
label { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; display: block; }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.map-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4/3; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--color-text); color: rgba(255,255,255,0.85); padding-block: 4rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.site-footer h4 { color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
.footer-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.footer-brand img { height: 52px; width: 52px; border-radius: 50%; }
.footer-brand span { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: #fff; }
.site-footer a:hover { color: var(--color-primary-light); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1.5rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: rgba(255,255,255,0.55); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 50;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 32px -12px rgba(37, 211, 102, 0.6);
  font-size: 1.6rem;
  animation: pulse-whatsapp 2.8s ease-in-out infinite;
}
@keyframes pulse-whatsapp {
  0%, 100% { box-shadow: 0 16px 32px -12px rgba(37, 211, 102, 0.6); }
  50% { box-shadow: 0 16px 32px -12px rgba(37, 211, 102, 0.9), 0 0 0 10px rgba(37, 211, 102, 0.12); }
}

/* Revelado al hacer scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .whatsapp-float { animation: none; }
  .hero-ambient-frame { animation: none; opacity: 0; transform: none; }
  .hero-ambient-frame-1 { opacity: 1; }
  .clinic-gallery-item img { transition: none; }
}

/* Utilidades */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.text-center { text-align: center; }
.mt-lg { margin-top: 2.5rem; }
.badge-note {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--color-accent-tint); color: var(--color-accent);
  font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.85rem; border-radius: var(--radius-pill);
}
.form-note { color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.5; }
.article-cover { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: 1.25rem; }

/* Blog y guías para pacientes */
.blog-grid { align-items: stretch; }
.blog-card { display: flex; flex-direction: column; height: 100%; }
.blog-card h2 { font-size: clamp(1.25rem, 2vw, 1.55rem); margin-bottom: 0.65rem; }
.blog-card p:not(.eyebrow) { color: var(--color-text-muted); }
.blog-card .blog-card-link { margin-top: auto; padding-top: 1.15rem; color: var(--color-primary-dark); font-weight: 700; }
.blog-card .blog-card-link:hover { color: var(--color-primary); }
.guide-hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem); }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.guide-hero .lede { max-width: 62ch; }
.guide-cover { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.guide-meta { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; margin-top: 1.25rem; color: var(--color-text-muted); font-size: 0.85rem; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.guide-content { max-width: 74ch; }
.guide-content h2 { margin-top: 2.4rem; margin-bottom: 0.75rem; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.guide-content h2:first-child { margin-top: 0; }
.guide-content h3 { margin-top: 1.6rem; margin-bottom: 0.55rem; font-size: 1.15rem; }
.guide-content p, .guide-content li { color: var(--color-text-muted); }
.guide-content ul, .guide-content ol { display: grid; gap: 0.6rem; padding-left: 1.25rem; margin-block: 0.8rem 1.2rem; }
.guide-note { margin-block: 1.5rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-primary-tint); }
.guide-note strong { color: var(--color-text); }
.guide-sidebar { position: sticky; top: 7.5rem; display: grid; gap: 1rem; }
.guide-summary, .guide-quote-card { padding: 1.35rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.guide-summary h2, .guide-quote-card h2 { font-size: 1.1rem; margin-bottom: 0.75rem; }
.guide-summary ul { display: grid; gap: 0.55rem; padding-left: 1.1rem; color: var(--color-text-muted); font-size: 0.9rem; }
.guide-quote-card p { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.guide-sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: 0.82rem; }
.guide-sources h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.guide-sources a { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 820px) {
  .guide-hero-grid, .guide-layout { grid-template-columns: 1fr; }
  .guide-sidebar { position: static; }
  .guide-cover { max-height: 420px; }
}

/* Skip link — accesibilidad real, no overlay */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-primary); color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* Foco visible consistente */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}