/* ════════════════════════════════════════════════════════════════════
   ODENTARA — Landing v2
   Fonts : Bricolage Grotesque (display) + DM Sans (body)
   Motion: GSAP 3 + ScrollTrigger + Lenis
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --teal:       #0f766e;
  --teal-dark:  #0b5c55;
  --teal-vivid: #14b8a6;
  --mint:       #ccfbf1;
  --mint-soft:  #e8faf6;
  --amber:      #f59e0b;
  --coral:      #f43f5e;
  --violet:     #6366f1;
  --violet-dark:#4f46e5;

  /* Light surface */
  --ink:     #0c1a17;
  --ink-2:   #1e2e2b;
  --muted:   #5d7870;
  --paper:   #f4f8f6;
  --surface: #ffffff;
  --line:    #dde8e3;
  --line-2:  #c8dbd4;

  /* Dark hero */
  --hero-bg:      #060d0b;
  --hero-surface: #0d1a17;
  --hero-border:  #1c3028;
  --hero-muted:   #6b9c91;
  --hero-text:    #e2ede9;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(6,13,11,.07);
  --sh-sm: 0 2px 10px rgba(6,13,11,.09), 0 1px 3px rgba(6,13,11,.06);
  --sh-md: 0 8px 28px rgba(6,13,11,.11), 0 3px 8px rgba(6,13,11,.07);
  --sh-lg: 0 24px 64px rgba(6,13,11,.14), 0 8px 20px rgba(6,13,11,.08);
  --sh-teal: 0 16px 52px rgba(15,118,110,.24);
  --sh-preview: 0 40px 100px rgba(6,13,11,.55), 0 16px 36px rgba(6,13,11,.35);

  color-scheme: light;
}

/* ── Reset / Base ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-behavior lo maneja Lenis — no usar smooth nativo */
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: clip no crea scroll container (no rompe Lenis) */
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }
a  { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
img { display: block; max-width: 100%; }

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: "Bricolage Grotesque", "DM Sans", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1;
}
h1 {
  margin-bottom: 22px;
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 800;
  line-height: 0.92;
}
h2 {
  margin-bottom: 20px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.06;
}
h3 {
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 5px 12px;
  border: 1px solid rgba(15,118,110,.28);
  border-radius: 999px;
  background: rgba(15,118,110,.07);
  color: var(--teal-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Header ──────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 72px;
  padding: 0 clamp(20px, 4vw, 64px);
  border-bottom: 1px solid transparent;
  transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}
/* Over dark hero → dark gradient + white text */
.site-header.is-hero {
  background: linear-gradient(to bottom, rgba(6,13,11,.72) 0%, rgba(6,13,11,.28) 100%);
  border-bottom-color: rgba(255,255,255,.06);
}
.site-header.is-hero .brand__name,
.site-header.is-hero .site-nav a,
.site-header.is-hero .header-link { color: rgba(255,255,255,.88); }
.site-header.is-hero .site-nav a:hover,
.site-header.is-hero .header-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
/* After hero scroll → frosted glass */
.site-header.is-scrolled {
  background: rgba(244,248,246,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-xs);
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(15,118,110,.25);
}
.brand__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 320ms ease;
}

.site-nav { display: flex; justify-content: center; gap: 4px; min-width: 0; }
.site-nav a, .header-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 180ms ease, background 180ms ease;
}
.site-nav a:hover, .header-link:hover {
  background: var(--mint-soft);
  color: var(--teal-dark);
}
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.site-header.is-scrolled .nav-toggle {
  border-color: var(--line);
  color: var(--ink);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--teal);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sh-teal);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  white-space: nowrap;
}
.button:hover {
  background: var(--teal-dark);
  box-shadow: 0 20px 56px rgba(15,118,110,.32);
  transform: translateY(-2px);
}
.button:active { transform: translateY(0); }

.button--small { min-height: 42px; padding: 0 18px; font-size: 0.87rem; }

.button--ghost {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: none;
}
.button--ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
  box-shadow: none;
  color: #fff;
}

.button--outline {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--line-2);
  box-shadow: var(--sh-xs);
}
.price-card .button--outline { width: 100%; justify-content: center; }
.button--outline:hover {
  background: var(--mint-soft);
  border-color: var(--teal);
  box-shadow: none;
  transform: translateY(-1px);
}

.button--violet {
  background: var(--violet);
  box-shadow: 0 16px 48px rgba(99,102,241,.28);
}
.button--violet:hover {
  background: var(--violet-dark);
  box-shadow: 0 20px 56px rgba(99,102,241,.34);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: 100svh;
  padding: clamp(100px, 12vw, 140px) clamp(20px, 5vw, 80px) clamp(60px, 7vw, 100px);
  background: var(--hero-bg);
  overflow: hidden;
}

/* Decorative background layers */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Gradient en la parte superior — protege el header transparente del contenido que sube */
.hero__bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(6,13,11,.9) 0%, rgba(6,13,11,.5) 55%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.hero__orb--1 {
  width: 700px; height: 700px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(20,184,166,.14) 0%, transparent 70%);
}
.hero__orb--2 {
  width: 500px; height: 500px;
  bottom: -100px; left: -80px;
  background: radial-gradient(circle, rgba(15,118,110,.1) 0%, transparent 65%);
}
.hero__orb--3 {
  width: 300px; height: 300px;
  top: 40%; left: 35%;
  background: radial-gradient(circle, rgba(99,102,241,.07) 0%, transparent 70%);
}
.hero__grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.hero .eyebrow {
  border-color: rgba(20,184,166,.3);
  background: rgba(20,184,166,.08);
  color: var(--teal-vivid);
}
h1 { color: var(--hero-text); }
.hero__lead {
  max-width: 56ch;
  color: var(--hero-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 28px;
}
.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero__proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--hero-border);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--hero-muted);
  font-size: 0.86rem;
  font-weight: 500;
}
.hero__proof span i { color: var(--teal-vivid); font-size: 0.78rem; }

/* Product preview */
.product-preview {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.preview-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(ellipse at center, rgba(20,184,166,.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.preview-shell {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--sh-preview);
  animation: previewFloat 6s ease-in-out infinite;
}
@keyframes previewFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.preview-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #f9fcfb;
  color: var(--muted);
  font-size: 0.82rem;
}
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 10px; height: 10px; border-radius: 50%; }
.window-dots span:nth-child(1) { background: #ff5f57; }
.window-dots span:nth-child(2) { background: #febc2e; }
.window-dots span:nth-child(3) { background: #28c840; }
.preview-body {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  height: 520px; /* altura fija — evita el salto de tamaño entre vistas */
}
.preview-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-right: 1px solid var(--line);
  background: #f5faf8;
}
.preview-logo {
  display: flex;
  align-items: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
}
.preview-logo img { width: 100%; height: 100%; }
.preview-sidebar button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 160ms, color 160ms, transform 160ms;
}
.preview-sidebar button:hover {
  background: #e8f5f0;
  color: var(--teal-dark);
  transform: translateX(2px);
}
.preview-sidebar .is-active { background: var(--teal); color: #fff; }
.preview-sidebar .is-active:hover { background: var(--teal); color: #fff; transform: none; }
.preview-autoplay-bar {
  margin-top: auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(15,118,110,.12);
  overflow: hidden;
}
.preview-autoplay-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--teal);
}
.preview-main {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  background: #fbfdfb;
  overflow: hidden; /* contenido se recorta, sin salto de altura */
  min-height: 0;
}
.preview-main.is-changing { animation: previewIn 220ms ease; }
@keyframes previewIn {
  from { opacity: 0.5; transform: translateY(6px); }
  to   { opacity: 1;   transform: translateY(0); }
}

/* Preview inner components */
.preview-view-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-view-title span, .preview-view-title small { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.preview-view-title strong { display: block; margin-top: 4px; font-size: 1.05rem; }

.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric-row article,
.agenda-card,
.clinical-strip,
.module-card,
.price-card,
.workflow article {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.metric-row article { padding: 14px; }
.metric-row span, .clinical-strip span, .appointment span, .agenda-head span {
  color: var(--muted); font-size: 0.76rem; font-weight: 600;
}
.metric-row strong { display: block; margin-top: 8px; font-size: 1.55rem; font-weight: 700; }

.agenda-card { padding: 16px; }
.agenda-head, .appointment, .clinical-strip { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.agenda-head { margin-bottom: 12px; }
.appointment {
  justify-content: flex-start;
  min-height: 68px;
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  background: #f4fbf8;
}
.appointment time { width: 50px; color: var(--teal-dark); font-size: 0.86rem; font-weight: 700; }
.appointment strong, .appointment span { display: block; }
.appointment div { flex: 1; }
.appointment.current { border-left-color: var(--violet); background: #f5f5ff; }
.appointment.pending  { border-left-color: var(--amber);  background: #fffbf0; }

.clinical-strip { padding: 14px; }
.clinical-strip strong { display: block; margin-top: 4px; }
.teeth-row { display: flex; gap: 5px; }
.teeth-row span { width: 20px; height: 26px; border: 2px solid #afc7bf; border-radius: 50% 50% 46% 46%; background: #fff; }
.teeth-row .filled { border-color: var(--teal); background: var(--mint); }
.teeth-row .alert  { border-color: var(--coral); background: #ffe4ea; }

/* Repeated from odontara.js dynamic content */
.schedule-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.schedule-grid article { display:grid; gap:8px; min-height:112px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.schedule-grid article.is-selected { border-color:rgba(15,118,110,.34); background:#f1fbf7; }
.schedule-grid strong { font-size:1.05rem; }
.schedule-grid span { color:var(--muted); font-size:0.78rem; font-weight:600; }
.schedule-grid b { align-self:end; color:var(--teal-dark); font-size:1.28rem; }
.patient-search { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font-size:0.82rem; font-weight:600; }
.patient-list { display:grid; gap:10px; }
.patient-list article { display:flex; align-items:center; gap:12px; min-height:70px; padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.patient-list article div:not(.avatar) { flex:1; min-width:0; }
.patient-list strong, .patient-list span { display:block; }
.patient-list span { color:var(--muted); font-size:0.78rem; font-weight:600; }
.patient-list b { padding:5px 8px; border-radius:6px; background:var(--mint); color:var(--teal-dark); font-size:0.7rem; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; background:var(--teal); color:#fff; font-size:0.76rem; font-weight:700; }
.clinical-strip > i { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; background:var(--mint); color:var(--teal-dark); }
.record-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(170px,.62fr); gap:12px; }
.record-card, .timeline-card { border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.record-card { padding:16px; }
.record-card span { color:var(--muted); font-size:0.78rem; font-weight:700; }
.record-card strong { display:block; margin:7px 0; font-size:1.05rem; }
.record-card p { margin-bottom:0; color:var(--muted); line-height:1.5; }
.odontogram-mini { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f5faf7; }
.odontogram-mini span { min-height:54px; border:2px solid #afc7bf; border-radius:50% 50% 46% 46%; background:#fff; }
.odontogram-mini .filled { border-color:var(--teal); background:var(--mint); }
.odontogram-mini .alert  { border-color:var(--coral); background:#ffe7ec; }
.timeline-card { display:grid; gap:0; overflow:hidden; }
.timeline-card div { display:grid; gap:4px; padding:12px 14px; border-bottom:1px solid var(--line); }
.timeline-card div:last-child { border-bottom:0; }
.timeline-card time { color:var(--teal-dark); font-size:0.76rem; font-weight:700; }
.timeline-card span { color:var(--muted); font-size:0.82rem; line-height:1.45; }
.app-preview-hero { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(135deg,#fff,#f4fbf8); }
.app-preview-hero span, .app-clinical-title { color:var(--teal); font-size:0.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.app-preview-hero strong { display:block; margin-top:4px; font-size:1.1rem; }
.app-preview-hero p { margin:6px 0 0; color:var(--muted); font-size:0.8rem; line-height:1.45; }
.app-preview-hero button, .app-preview-toolbar button, .app-clinical-card header button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 12px; border:0; border-radius:8px; background:var(--teal); color:#fff; font-size:0.76rem; font-weight:700; white-space:nowrap; cursor:default; }
.app-metrics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.app-metrics-grid article { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.app-metrics-grid i { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; background:var(--mint); color:var(--teal-dark); }
.app-metrics-grid span, .app-table-head span { color:var(--muted); font-size:0.74rem; font-weight:600; }
.app-metrics-grid strong { display:block; margin-top:3px; font-size:1.4rem; }
.app-table-card { overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.app-table-head { display:flex; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid var(--line); }
.app-table-card table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.app-table-card th, .app-table-card td { padding:11px 13px; border-bottom:1px solid #edf3ef; text-align:left; vertical-align:middle; }
.app-table-card tr:last-child td { border-bottom:0; }
.app-table-card small { display:block; color:var(--muted); font-size:0.7rem; }
.app-badge { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:6px; font-size:0.68rem; font-weight:700; }
.app-badge.success { background:#e8f8ef; color:#166534; }
.app-badge.info    { background:#eff6ff; color:#1d4ed8; }
.app-badge.warning { background:#fff7ed; color:#9a3412; }
.app-preview-toolbar { display:grid; gap:9px; padding:13px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.app-toolbar-nav, .app-view-switcher, .app-prof-legend { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.app-toolbar-nav strong { color:var(--ink); font-size:0.84rem; }
.app-preview-toolbar button { width:30px; min-height:30px; padding:0; background:#f4fbf8; color:var(--teal-dark); border:1px solid var(--line); }
.app-view-switcher span, .app-prof-legend span { display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--muted); font-size:0.72rem; font-weight:600; }
.app-view-switcher .is-active, .app-prof-legend .is-active { background:var(--teal); color:#fff; border-color:var(--teal); }
.app-prof-legend { padding:11px 13px; border:1px solid var(--line); border-radius:8px; background:#f5faf7; }
.app-prof-legend strong { margin-right:4px; font-size:0.76rem; }
.app-calendar-day { display:grid; grid-template-columns:60px minmax(0,1fr); min-height:310px; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.app-calendar-gutter { display:grid; grid-template-rows:repeat(6,1fr); padding-top:38px; border-right:1px solid var(--line); background:#f8fbfa; }
.app-calendar-gutter span { padding:0 9px; color:var(--muted); font-size:0.7rem; font-weight:600; }
.app-calendar-column { position:relative; min-height:310px; }
.app-prof-header { position:sticky; top:0; z-index:2; min-height:38px; padding:10px 13px; border-bottom:1px solid var(--line); background:#fff; font-size:0.8rem; font-weight:700; }
.app-cal-line { height:46px; border-bottom:1px solid #edf3ef; }
.app-cal-apt { position:absolute; left:14px; right:14px; display:grid; align-content:center; gap:2px; padding:7px 9px; border-left:3px solid currentColor; border-radius:8px; color:#fff; box-shadow:0 10px 22px rgba(15,23,42,.12); }
.app-cal-apt strong, .app-cal-apt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-cal-apt strong { font-size:0.76rem; }
.app-cal-apt span { font-size:0.66rem; opacity:.9; }
.app-cal-apt.teal { background:#14b8a6; }
.app-cal-apt.violet { background:#8b5cf6; }
.app-cal-apt.amber { background:#fff7ed; color:#9a3412; border-left-color:#f97316; }
.app-search { display:flex; align-items:center; gap:9px; min-height:42px; padding:0 13px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--muted); font-size:0.8rem; font-weight:600; }
.app-patient-table th { color:var(--muted); font-size:0.7rem; text-transform:uppercase; }
.app-patient-table td:first-child { display:flex; align-items:center; gap:10px; }
.app-avatar { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 32px; border-radius:7px; background:var(--mint); color:var(--teal-dark); font-size:0.7rem; font-weight:800; }
.app-patient-table td:last-child { color:var(--teal-dark); white-space:nowrap; }
.app-patient-table td:last-child i { margin-right:7px; }
.app-clinical-card { overflow:hidden; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.app-clinical-card header { display:flex; align-items:center; gap:11px; padding:13px; border-bottom:2px solid var(--teal-dark); background:#f4fbf8; }
.app-clinical-card header img { width:38px; height:38px; }
.app-clinical-card header div { flex:1; min-width:0; }
.app-clinical-card header strong, .app-clinical-card header span { display:block; }
.app-clinical-card header span { color:var(--teal-dark); font-size:0.76rem; font-weight:700; }
.app-clinical-card header button { min-height:32px; }
.app-clinical-info { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:13px; border-bottom:1px dashed var(--line); }
.app-clinical-info article { padding:9px; border-radius:7px; background:#f8fbfa; }
.app-clinical-info span, .app-evolution time { color:var(--muted); font-size:0.66rem; font-weight:700; text-transform:uppercase; }
.app-clinical-info strong { display:block; margin-top:3px; font-size:0.8rem; }
.app-odontogram { display:grid; gap:9px; padding:13px; }
.app-teeth-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:4px; }
.app-teeth-row span { display:inline-flex; align-items:center; justify-content:center; aspect-ratio:1; border:1px solid #b7c9c4; border-radius:7px; background:#fff; color:var(--muted); font-size:0.63rem; font-weight:700; }
.app-teeth-row .done  { background:#e8f8ef; border-color:var(--teal); color:var(--teal-dark); }
.app-teeth-row .alert { background:#fff1f2; border-color:var(--coral); color:#be123c; }
.app-evolution { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0 13px 13px; }
.app-evolution article { padding:11px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.app-evolution strong, .app-evolution span { display:block; }
.app-evolution strong { margin:4px 0; font-size:0.8rem; }
.app-evolution span { color:var(--muted); font-size:0.74rem; line-height:1.35; }

/* ── Trust Band ───────────────────────────────────────────────────── */
.trust-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0 clamp(20px, 5vw, 80px);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--sh-md);
  transform: translateY(-28px);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px;
  background: var(--surface);
  transition: background 200ms ease;
}
.trust-item:hover { background: var(--mint-soft); }
.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  background: var(--mint);
  color: var(--teal-dark);
  font-size: 1rem;
}
.trust-item strong, .trust-item span { display: block; }
.trust-item strong { font-size: 0.98rem; font-weight: 700; margin-bottom: 5px; }
.trust-item span { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* ── Sections (general) ───────────────────────────────────────────── */
.section {
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 80px);
}
.section--paper { background: var(--paper); }
.section--white { background: var(--surface); }

/* Dark section (módulos, outcomes, etc.) */
.section--dark {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}
/* Fusionar secciones oscuras consecutivas: quitar padding-bottom en la primera */
.section--dark + .section--dark {
  padding-top: clamp(32px, 4vw, 56px);
}
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
  pointer-events: none;
  z-index: 0;
}
.section--dark::after {
  content: '';
  position: absolute;
  top: -160px; right: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(20,184,166,.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.section--dark > * { position: relative; z-index: 1; }
.section--dark h2,
.section--dark h3 { color: var(--hero-text); }
.section--dark .eyebrow {
  border-color: rgba(20,184,166,.3);
  background: rgba(20,184,166,.08);
  color: var(--teal-vivid);
}

/* Section lead (subtitle below h2) */
.section-lead {
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.72;
  margin-top: 10px;
  margin-bottom: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.section-heading { max-width: 760px; margin-bottom: 40px; }
.section-copy p { max-width: 60ch; color: var(--muted); font-size: 1.05rem; line-height: 1.72; }

/* ── Workflow ─────────────────────────────────────────────────────── */
.workflow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.workflow article { padding: 24px; transition: transform 220ms ease, box-shadow 220ms ease; }
.workflow article:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.workflow i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 10px; background: var(--mint); color: var(--teal-dark);
}
.workflow strong, .workflow span { display: block; }
.workflow strong { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.workflow span { color: var(--muted); line-height: 1.6; font-size: 0.93rem; }

/* ── Module Grid ──────────────────────────────────────────────────── */
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.module-card { padding: 26px; transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.module-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--teal-vivid);
}
.module-card i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 11px; background: var(--mint); color: var(--teal-dark);
  transition: background 200ms, transform 200ms;
}
.module-card:hover i { background: var(--teal); color: #fff; transform: scale(1.08); }
.module-card p { color: var(--muted); line-height: 1.62; font-size: 0.93rem; margin-bottom: 0; }

/* Module cards inside dark section */
.section--dark .module-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.section--dark .module-card:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--teal-vivid);
  box-shadow: 0 8px 36px rgba(20,184,166,.18);
  transform: translateY(-4px);
}
.section--dark .module-card i {
  background: rgba(20,184,166,.14);
  color: var(--teal-vivid);
}
.section--dark .module-card:hover i {
  background: rgba(20,184,166,.25);
  color: var(--teal-vivid);
}
.section--dark .module-card p { color: var(--hero-muted); }

/* ── Outcomes ─────────────────────────────────────────────────────── */
.outcomes { padding-top: clamp(32px, 4vw, 56px); }
.outcome-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 36px;
  align-items: center;
}
/* Cuando outcomes está dentro de section--dark, el panel es transparente */
.section--dark .outcome-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.outcome-panel .eyebrow {
  border-color: rgba(245,159,11,.3);
  background: rgba(245,159,11,.1);
  color: var(--amber);
}
.outcome-panel h2 { margin-bottom: 0; color: var(--hero-text); }
.outcome-list { display: grid; gap: 12px; }
.outcome-list span {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  line-height: 1.55;
  font-size: 0.95rem;
  transition: background 200ms ease;
}
.outcome-list span:hover { background: rgba(255,255,255,.08); }
.outcome-list i { color: var(--amber); margin-top: 3px; flex-shrink: 0; }

/* ── AI Secretary — Redesign ──────────────────────────────────────── */
.ai-secretary {
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
  margin-top: -2px;
  z-index: 1;
}
.ai-secretary > * { position: relative; z-index: 1; }

/* Background decoration */
.ais-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ais-orb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px; height: 1000px;
  background: radial-gradient(circle, rgba(99,102,241,.13) 0%, rgba(79,70,229,.05) 38%, transparent 65%);
  border-radius: 50%;
  animation: aisOrbPulse 9s ease-in-out infinite;
}
@keyframes aisOrbPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%       { transform: translate(-50%, -50%) scale(1.12); }
}
.ais-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
}

/* Centered eyebrow + headline */
.ais-heading {
  text-align: center;
  margin-bottom: clamp(52px, 7vw, 88px);
}
.ais-heading .eyebrow {
  border-color: rgba(99,102,241,.35);
  background: rgba(99,102,241,.12);
  color: #a5b4fc;
}
.ais-h2 {
  font-size: clamp(3.8rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--hero-text);
  margin-bottom: 20px;
}
.ais-ia {
  background: linear-gradient(130deg, #818cf8 0%, #c084fc 55%, #e879f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ais-tagline {
  max-width: 50ch;
  margin: 0 auto;
  color: var(--hero-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

/* ── Three-column stage ─────────────────────────────────────────── */
.ais-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 64px);
  align-items: center;
}

/* Left: copy */
.ai-secretary-copy p:not(.eyebrow) {
  max-width: 54ch;
  color: rgba(178,196,230,.72);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 18px;
}
.ai-secretary-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 30px;
}
.ai-secretary-actions span {
  color: rgba(130,160,210,.5);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* ── Phone mockup ───────────────────────────────────────────────── */
.ais-phone-wrap {
  position: relative;
  flex-shrink: 0;
}
.ais-phone {
  position: relative;
  width: 288px;
  border-radius: 44px;
  background: linear-gradient(160deg, #1d1535 0%, #120e22 100%);
  border: 1.5px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 80px 160px rgba(0,0,0,.65),
    0 0 140px rgba(99,102,241,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
  padding-top: 54px;
  padding-bottom: 4px;
  animation: aisPhoneFloat 7s ease-in-out infinite;
}
@keyframes aisPhoneFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
.ais-phone-notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 98px; height: 26px;
  background: #08060f;
  border-radius: 13px;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.ais-phone-statusbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 22px 0;
  color: rgba(255,255,255,.65);
  z-index: 1;
}
.ais-time { font-size: 0.68rem; font-weight: 700; letter-spacing: .01em; }
.ais-status-icons { display: flex; gap: 5px; align-items: center; font-size: 0.56rem; }
.ais-phone-home {
  display: block;
  width: 96px; height: 5px;
  margin: 10px auto 12px;
  border-radius: 3px;
  background: rgba(255,255,255,.22);
}

/* Chat inside phone */
.ais-phone .chat-preview {
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: #e5ddd5;
  max-height: 440px;
  overflow-y: auto;
  scrollbar-width: none;
}
.ais-phone .chat-preview::-webkit-scrollbar { display: none; }
.ais-phone .chat-top {
  background: #075e54;
  border-bottom: none;
  padding: 12px 16px;
}
.ais-phone .chat-top i { color: rgba(255,255,255,.9); font-size: 1.3rem; }
.ais-phone .chat-top strong { color: #fff; }
.ais-phone .chat-top span { color: rgba(255,255,255,.72); font-size: 0.72rem; }
.ais-phone .chat-bubble {
  font-size: 0.84rem;
  border-radius: 8px;
}
.ais-phone .chat-bubble.incoming {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.ais-phone .chat-bubble.outgoing { background: #d9fdd3; }
.chat-check { color: #53bdeb; font-size: 0.72rem; margin-left: 3px; }

/* Badge que sobresale del teléfono hacia la derecha */
.ais-float-badge {
  position: absolute;
  top: 66%;
  right: -14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10,8,26,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(99,102,241,.3);
  color: #c7d2fe;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 16px rgba(99,102,241,.15);
  z-index: 2;
  animation: aisBadgeFloat 5.5s ease-in-out infinite 0.8s;
}
@keyframes aisBadgeFloat {
  0%, 100% { transform: translateY(-50%) translateX(0px); }
  40%       { transform: translateY(calc(-50% - 10px)) translateX(3px); }
  100%      { transform: translateY(-50%) translateX(0px); }
}
.ais-float-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(52,211,153,.75);
  animation: aisDotPulse 2s ease-in-out infinite;
}
@keyframes aisDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .45; transform: scale(.72); }
}

/* Feature grid — right column */
.ai-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.ai-feature-grid article {
  padding: 18px;
  border: 1px solid rgba(99,102,241,.16);
  border-radius: 12px;
  background: rgba(99,102,241,.06);
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.ai-feature-grid article:hover {
  transform: translateY(-2px);
  border-color: rgba(99,102,241,.34);
  background: rgba(99,102,241,.12);
}
.ai-feature-grid i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 12px;
  border-radius: 9px; background: rgba(99,102,241,.2); color: #a5b4fc;
}
.ai-feature-grid strong, .ai-feature-grid span { display: block; }
.ai-feature-grid strong { font-size: 0.93rem; font-weight: 700; margin-bottom: 6px; color: #e0e7ff; }
.ai-feature-grid span { color: rgba(165,185,228,.65); font-size: 0.83rem; line-height: 1.45; }

/* chat-bubble / chat-top base styles (used outside phone too) */
.chat-preview {
  overflow: hidden;
  border-radius: 14px;
  background: #f0f0fe;
}
.chat-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(99,102,241,.1);
  background: #fff;
}
.chat-top i { color: #25d366; font-size: 1.4rem; }
.chat-top strong, .chat-top span { display: block; }
.chat-top strong { color: var(--ink); }
.chat-top span { color: var(--muted); font-size: 0.76rem; font-weight: 600; }
.chat-bubble {
  width: fit-content;
  max-width: 82%;
  margin: 10px 14px;
  padding: 10px 13px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.87rem;
  line-height: 1.45;
}
.chat-bubble.incoming { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.chat-bubble.outgoing { margin-left: auto; background: #d9fdd3; }

/* ── Pricing ──────────────────────────────────────────────────────── */
.planes-section { border-top: 1px solid var(--hero-border); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.price-card .price-features {
  flex: 1;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(15,118,110,.25); }

/* Plan tier label */
.plan-tier {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-vivid);
}

.price-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0;
  line-height: 1.3;
}
.price-card > p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.58;
  margin-bottom: 0;
}

/* Featured card */
.price-card--featured {
  background: var(--surface);
  border-color: rgba(15,118,110,.35);
  box-shadow: var(--sh-teal);
  position: relative;
}
.price-card--featured .plan-tier { color: var(--teal); }
.price-card--featured h3 { font-size: 1.15rem; }

/* Badge */
.badge {
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge--featured {
  background: linear-gradient(90deg, var(--teal) 0%, var(--teal-vivid) 100%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
}
.badge--ai { background: var(--violet); }

/* Features list */
.price-features { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.price-features li {
  position: relative;
  padding-left: 24px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.price-features li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--teal-vivid);
  font-family: "Font Awesome 6 Free";
  font-size: 0.7rem;
  font-weight: 900;
}

/* Buttons in cards */
.button--outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.67rem 1.15rem;
  border-radius: 0.55rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--hero-border);
  color: var(--hero-text);
  transition: border-color .2s, background .2s;
  width: 100%;
  text-align: center;
}
.button--outline-dark:hover { border-color: var(--teal-vivid); background: rgba(20,184,166,.07); }

.button--teal-strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.78rem 1.3rem;
  border-radius: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-vivid) 100%);
  color: #fff;
  border: none;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15,118,110,.4);
  transition: transform .2s, box-shadow .2s;
}
.button--teal-strong:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(15,118,110,.5); }

.plan-note {
  margin: 0 !important;
  text-align: center;
  font-size: 0.78rem !important;
  color: var(--hero-muted) !important;
}

/* Plan add-on banner */
.plan-addon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding: 22px 28px;
  border: 1px solid rgba(99,102,241,.22);
  border-radius: 14px;
  background: linear-gradient(135deg, #f7f5ff 0%, #faf5ff 100%);
}
.plan-addon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 13px;
  background: var(--violet);
  color: #fff;
  font-size: 1.3rem;
}
.plan-addon-body { flex: 1; min-width: 0; }
.plan-addon-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}
.plan-addon-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── Contact ──────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
  background: var(--hero-bg);
  color: var(--hero-text);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  bottom: -80px; left: 50%;
  width: 600px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(20,184,166,.07) 0%, transparent 60%);
  pointer-events: none;
}
.contact-copy { position: relative; z-index: 1; }
.contact-copy .eyebrow {
  border-color: rgba(20,184,166,.3);
  background: rgba(20,184,166,.08);
  color: var(--teal-vivid);
}
.contact-copy h2 { color: var(--hero-text); }
.contact-copy p { color: var(--hero-muted); font-size: 1.06rem; line-height: 1.72; margin-bottom: 0; }
.contact-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--hero-border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(6,13,11,.4);
}
.contact-form label {
  display: grid;
  gap: 7px;
  color: var(--hero-text);
  font-size: 0.88rem;
  font-weight: 600;
}
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 1px solid var(--hero-border);
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: var(--hero-text);
  outline: none;
  transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--hero-muted); }
.contact-form input { min-height: 46px; padding: 0 14px; }
.contact-form textarea { resize: vertical; min-height: 114px; padding: 12px 14px; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--teal-vivid);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(20,184,166,.15);
}
.form-note { margin: 0; color: var(--hero-muted); font-size: 0.84rem; }

/* ── Footer ───────────────────────────────────────────────────────── */
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 28px clamp(20px, 5vw, 80px);
  background: #030806;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--hero-muted);
}
.site-footer .brand__name { color: rgba(255,255,255,.7); }
.site-footer span { font-size: 0.9rem; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a {
  font-size: 0.85rem;
  color: var(--hero-muted);
  transition: color 180ms ease;
}
.footer-legal a:hover { color: var(--teal-vivid); }

/* ── Reveal (GSAP-driven — CSS solo como fallback sin JS) ─────────── */
/* Los elementos con stagger propio (workflow, module-card, price-card, ai-feature-grid)
   NO usan esta regla CSS — GSAP los setea directamente con gsap.set() */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
/* Clase .in para fallback sin GSAP */
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms ease;
}
/* Stagger targets: visibles por default — GSAP los oculta via set() si está disponible */
.workflow article,
.module-card,
.price-card,
.ai-feature-grid article {
  opacity: 1;
  transform: none;
}

/* ── Settings preview view ─────────────────────────────────────────── */
.app-settings-grid { display: grid; gap: 8px; }
.app-setting-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  cursor: default;
  transition: background 150ms;
}
.app-setting-item:hover { background: #f5faf8; }
.app-setting-item > i:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--teal-dark);
  font-size: 0.88rem;
}
.app-setting-item > div { flex: 1; min-width: 0; }
.app-setting-item > div strong { display: block; font-size: 0.88rem; font-weight: 700; }
.app-setting-item > div span { color: var(--muted); font-size: 0.76rem; }
.app-setting-item > i:last-child { color: var(--line-2); font-size: 0.72rem; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-addon { flex-wrap: wrap; }
}

@media (max-width: 1200px) {
  /* Ocultar "Iniciar sesion" para dar espacio al nav */
  .header-link { display: none; }
}

@media (max-width: 1140px) {
  /* Reducir padding de nav links para que entren mejor */
  .site-nav a { padding: 0 9px; font-size: 0.86rem; }
  .site-header { padding: 0 clamp(16px, 3vw, 48px); gap: 16px; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .product-preview { max-width: 800px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Secretar-IA: phone centra, copy + features en fila debajo */
  .ais-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "phone phone"
      "copy  features";
  }
  .ais-phone-wrap { grid-area: phone; justify-self: center; }
  .ai-secretary-copy { grid-area: copy; }
  .ai-feature-grid { grid-area: features; }
}

/* ── Header hamburger — aparece en ≤960px ─────────────────────────── */
@media (max-width: 960px) {
  .site-header { grid-template-columns: auto auto; }
  .nav-toggle { display: inline-flex; justify-self: end; }
  .site-nav, .header-actions { display: none; }
  .site-header.is-open .site-nav,
  .site-header.is-open .header-actions {
    display: grid;
    grid-column: 1 / -1;
    justify-content: stretch;
    gap: 8px;
  }
  .site-header.is-open .site-nav a,
  .site-header.is-open .header-actions a { width: 100%; justify-content: center; }
  .site-header.is-open {
    background: rgba(6,13,11,.97);
    backdrop-filter: blur(20px);
  }
}

/* ── Content layout — tablet/mobile ─────────────────────────────── */
@media (max-width: 860px) {
  .split, .outcome-panel, .contact, .section--dark .outcome-panel { grid-template-columns: 1fr; }
  /* Secretar-IA: single column stack en mobile */
  .ais-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "phone"
      "copy"
      "features";
    gap: 36px;
  }
  .ais-phone-wrap { justify-self: center; }
  .ais-float-badge { display: none; }
  .ai-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-addon { flex-direction: column; align-items: flex-start; }
  .trust-band { grid-template-columns: 1fr; transform: none; margin-top: 20px; }
  .preview-body { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .preview-main { height: 420px; overflow: hidden; }
  .preview-sidebar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 6 botones → 2 filas de 3 */
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .preview-logo { display: none; }
  .preview-autoplay-bar { display: none; }
  .preview-sidebar button { justify-content: center; padding: 0 8px; font-size: 0.72rem; }
  .preview-sidebar button i { display: none; }
  .preview-main { overflow: hidden; }
  .schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-metrics-grid, .app-clinical-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-table-card { overflow-x: auto; }
  .app-table-card table { min-width: 540px; }
  .app-calendar-day, .app-calendar-column { min-height: 280px; }
}

@media (max-width: 640px) {
  .site-header { min-height: 64px; padding: 0 16px; }
  .hero { padding: 96px 16px 48px; }
  h1 { font-size: 3.6rem; }
  h2 { font-size: 2rem; }
  .hero__actions, .hero__actions .button, .contact-form .button { width: 100%; }
  .ai-secretary-actions .button { width: 100%; justify-content: center; }
  .ais-phone { width: 260px; }
  .chat-bubble { max-width: 88%; }
  .metric-row, .workflow, .module-grid, .pricing-grid, .record-layout { grid-template-columns: 1fr; }
  .plan-addon { padding: 18px; gap: 14px; }
  .preview-topbar { grid-template-columns: auto 1fr; }
  .preview-topbar strong { display: none; }
  .preview-sidebar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-shell { margin-inline: -4px; }
  .preview-main { gap: 10px; padding: 10px; }
  .app-preview-hero { align-items: flex-start; flex-direction: column; padding: 13px; }
  .app-preview-hero button, .app-clinical-card header button { width: 100%; }
  .app-metrics-grid, .app-clinical-info, .app-evolution { grid-template-columns: 1fr; }
  .app-metrics-grid article { padding: 11px; }
  .app-preview-toolbar { padding: 11px; }
  .app-toolbar-nav { display: grid; grid-template-columns: 30px 1fr 30px; width: 100%; }
  .app-toolbar-nav strong { text-align: center; line-height: 1.25; }
  .app-view-switcher { display: grid; grid-template-columns: repeat(3, 1fr); }
  .app-view-switcher span { justify-content: center; padding: 0 6px; }
  .app-prof-legend { align-items: stretch; display: grid; grid-template-columns: 1fr; }
  .app-calendar-day { grid-template-columns: 48px minmax(0, 1fr); min-height: 260px; }
  .app-calendar-gutter { padding-top: 34px; }
  .app-calendar-gutter span { padding: 0 7px; font-size: 0.64rem; }
  .app-prof-header { min-height: 34px; padding: 8px 11px; }
  .app-cal-line { height: 40px; }
  .app-cal-apt { left: 8px; right: 8px; padding: 6px 7px; }
  .app-cal-apt strong { font-size: 0.7rem; }
  .app-cal-apt span { font-size: 0.62rem; }
  .agenda-card { padding: 12px; }
  .agenda-head { gap: 9px; margin-bottom: 9px; }
  .schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .schedule-grid article { min-height: 74px; gap: 4px; padding: 10px; }
  .schedule-grid strong { font-size: 0.92rem; }
  .schedule-grid span { font-size: 0.7rem; }
  .schedule-grid b { font-size: 1.05rem; }
  .appointment {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 6px 9px;
    min-height: 0;
    padding: 9px 10px;
  }
  .appointment time { width: auto; font-size: 0.8rem; }
  .appointment strong { font-size: 0.87rem; }
  .appointment span { font-size: 0.72rem; line-height: 1.3; }
  .clinical-strip, .site-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section, .contact { padding-left: 16px; padding-right: 16px; }
  .app-search { min-height: 38px; font-size: 0.74rem; }
  .app-clinical-card header { align-items: flex-start; flex-wrap: wrap; }
  .app-teeth-row { gap: 3px; }
  .app-teeth-row span { border-radius: 5px; font-size: 0.54rem; }
}

@media (max-width: 420px) {
  .preview-sidebar { grid-template-columns: 1fr 1fr; }
  .preview-sidebar button { min-height: 36px; font-size: 0.7rem; }
  .app-calendar-day { grid-template-columns: 42px minmax(0, 1fr); }
  .app-table-card table { min-width: 480px; }
  .app-clinical-card header img { width: 32px; height: 32px; }
  .schedule-grid { grid-template-columns: 1fr; }
}

/* ── Testimonios carrusel ────────────────────────────────────────── */
.testimonios {
  background: var(--hero-bg);
  color: var(--hero-text);
  border-top: none;
  margin-top: -1px;
  padding-top: clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
  overflow: hidden;
}

.testimonios-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  padding: 0 24px;
}

.testimonios-heading h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 12px 0 0;
}

.testimonios-accent { color: var(--teal-vivid); }

/* Wrapper con flechas */
.testimonios-carousel-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}

.testimonios-track-clip {
  overflow: hidden;
  padding: 8px 0 12px; /* espacio para que el hover no se corte */
  margin: -8px 0 -12px;
}

.testimonios-track {
  display: flex;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* Cada card ocupa 1/3 del ancho visible */
.testimonios-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: var(--hero-surface);
  border: 1px solid var(--hero-border);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color .25s, transform .25s;
}

.testimonios-card:hover {
  border-color: rgba(20,184,166,.35);
  transform: translateY(-3px);
}

.tc-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--hero-border);
  flex-shrink: 0;
}

.testimonios-card blockquote {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.74;
  color: var(--hero-muted);
  flex: 1;
}

.tc-author {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--hero-border);
  padding-top: 18px;
}

.tc-author strong {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--hero-text);
}

.tc-author span {
  font-size: 0.8rem;
  color: var(--hero-muted);
}

/* Flechas */
.tc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hero-surface);
  border: 1px solid var(--hero-border);
  color: var(--hero-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .2s, border-color .2s;
}

.tc-arrow:hover { background: var(--hero-border); border-color: var(--teal-vivid); }
.tc-arrow--prev { left: 8px; }
.tc-arrow--next { right: 8px; }
.tc-arrow:disabled { opacity: 0.3; cursor: default; }

/* Dots */
.tc-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

.tc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hero-border);
  border: none;
  cursor: pointer;
  transition: background .25s, transform .25s;
  padding: 0;
}

.tc-dot.is-active {
  background: var(--teal-vivid);
  transform: scale(1.3);
}

/* Responsive */
@media (max-width: 900px) {
  .testimonios-card { flex: 0 0 calc((100% - 24px) / 2); }
  .testimonios-carousel-wrap { padding: 0 48px; }
}

@media (max-width: 560px) {
  .testimonios-card { flex: 0 0 100%; }
  .testimonios-carousel-wrap { padding: 0 40px; }
}