/* Seleah — capa de experiencia compartida. Usa solo los tokens existentes del design system. */

/* ---------- Accesibilidad de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ux-progress { transition: none !important; }
}

/* ---------- Foco visible (teclado) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--burgundy, #844C5D);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Transición suave entre páginas (donde el navegador lo soporta) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; }
}

/* ---------- Artículos: progreso, índice, compartir ---------- */
.ux-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400;
  background: var(--burgundy, #844C5D); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .08s linear; pointer-events: none;
}
.art-section h2, .art-body h2 { scroll-margin-top: 92px; }

.ux-toc {
  max-width: 760px; margin: 0 auto 28px; padding: 0 20px;
}
.ux-toc > details {
  background: var(--sage-bg, #F0F0E8); border: 1px solid var(--border, #E8E5DF);
  border-radius: 14px; padding: 14px 18px;
}
.ux-toc summary {
  cursor: pointer; list-style: none; font: 600 13px var(--f-ui, 'Montserrat', sans-serif);
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--moss, #626649);
  display: flex; align-items: center; justify-content: space-between;
}
.ux-toc summary::-webkit-details-marker { display: none; }
.ux-toc summary::after { content: '+'; font-size: 18px; line-height: 1; }
.ux-toc details[open] summary::after { content: '\2212'; }
.ux-toc ol { margin: 12px 0 2px; padding-left: 20px; }
.ux-toc li { margin: 7px 0; font: 400 15px/1.45 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-toc a { color: inherit; text-decoration: none; }
.ux-toc a:hover { color: var(--burgundy, #844C5D); text-decoration: underline; }

.ux-share {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ux-share:hover { color: var(--burgundy, #844C5D); }

/* ---------- Bloque de credenciales ---------- */
.ux-cred {
  max-width: 760px; margin: 36px auto; padding: 0 20px;
}
.ux-cred-inner {
  border: 1px solid var(--border, #E8E5DF); background: var(--white, #fff);
  border-radius: 16px; padding: 20px 22px; border-left: 3px solid var(--moss, #626649);
}
.ux-cred-label {
  font: 600 10px var(--f-ui, 'Montserrat', sans-serif); letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--moss, #626649); margin-bottom: 8px;
}
.ux-cred-name { font: 600 17px var(--f-ui, 'Montserrat', sans-serif); color: var(--dark, #1D1D1F); margin-bottom: 4px; }
.ux-cred-name a { color: inherit; text-decoration: none; }
.ux-cred-name a:hover { color: var(--burgundy, #844C5D); }
.ux-cred p { margin: 0; font: 300 14.5px/1.65 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-cred strong { font-weight: 600; color: var(--dark, #1D1D1F); }

/* ---------- Horario sugerido ---------- */
.ux-next { margin: 0 auto 18px; max-width: 520px; text-align: left; }
.ux-next-row {
  display: flex; align-items: center; gap: 14px; justify-content: space-between;
  background: var(--white, #fff); border: 1px solid var(--border, #E8E5DF);
  border-radius: 14px; padding: 12px 16px;
}
.ux-next-lab { font: 600 10px var(--f-ui, 'Montserrat', sans-serif); letter-spacing: 2px; text-transform: uppercase; color: var(--moss, #626649); }
.ux-next-val { display: block; font: 600 15px var(--f-ui, 'Montserrat', sans-serif); color: var(--dark, #1D1D1F); margin-top: 2px; }
.ux-next-go {
  flex-shrink: 0; font: 600 13px var(--f-ui, 'Montserrat', sans-serif); color: var(--burgundy, #844C5D);
  text-decoration: none; border: 1.5px solid var(--burgundy, #844C5D); border-radius: 999px; padding: 9px 16px;
}
.ux-next-go:hover { background: var(--burgundy, #844C5D); color: #fff; }
.ux-next-note { margin: 8px 2px 0; font: 300 13px/1.55 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-next-note a { color: var(--burgundy, #844C5D); font-weight: 600; text-decoration: underline; }
.ux-next-left { display: block; margin-top: 6px; font: 600 12px var(--f-ui, 'Montserrat', sans-serif); color: var(--burgundy, #844C5D); }

/* ---------- Reseñas de Google ---------- */
.ux-reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 20px 18px; }
.ux-reviews-score { font: 600 28px var(--f-ui, 'Montserrat', sans-serif); color: var(--dark, #1D1D1F); }
.ux-reviews-meta { font: 400 14px var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-reviews-meta a { color: var(--burgundy, #844C5D); font-weight: 600; text-decoration: underline; }
.ux-reviews-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 20px 14px; -webkit-overflow-scrolling: touch;
}
.ux-review {
  flex: 0 0 min(84%, 340px); scroll-snap-align: start; background: var(--white, #fff);
  border: 1px solid var(--border, #E8E5DF); border-radius: 16px; padding: 18px 18px 16px;
}
.ux-review-stars { color: var(--sienna, #C17743); letter-spacing: 2px; font-size: 15px; margin-bottom: 8px; }
.ux-review-text {
  font: 300 15px/1.65 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D);
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 14px;
}
.ux-review-by { display: flex; align-items: center; gap: 10px; }
.ux-review-by img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--sage-bg, #F0F0E8); }
.ux-review-name { font: 600 13px var(--f-ui, 'Montserrat', sans-serif); color: var(--dark, #1D1D1F); line-height: 1.3; }
.ux-review-when { font: 400 12px var(--f-body, 'Bellota Text', sans-serif); color: var(--muted, #86868B); }
.ux-reviews-attr { margin: 6px 20px 0; font: 400 12px var(--f-body, 'Bellota Text', sans-serif); color: var(--muted, #86868B); }

@media (min-width: 768px) {
  .ux-reviews-track { padding-left: 0; padding-right: 0; }
  .ux-reviews-head, .ux-reviews-attr { margin-left: 0; margin-right: 0; }
}

/* ---------- Botones de acción (hero y pasos) ---------- */
.ux-hero-cta, .ux-steps-cta { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 16px; max-width: 420px; }
.ux-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none;
  font: 600 15px var(--f-ui, 'Montserrat', sans-serif); padding: 15px 26px; border-radius: 999px; transition: background .2s, color .2s;
}
.ux-btn--primary { background: var(--burgundy, #844C5D); color: #fff; border: 1.5px solid var(--burgundy, #844C5D); }
.ux-btn--primary:hover { background: #6E3D4D; }
.ux-btn--ghost { background: transparent; color: var(--burgundy, #844C5D); border: 1.5px solid var(--burgundy, #844C5D); }
.ux-btn--ghost:hover { background: var(--burgundy, #844C5D); color: #fff; }
@media (min-width: 768px) { .ux-hero-cta, .ux-steps-cta { flex-direction: row; max-width: none; } }

/* ---------- Cómo agendar ---------- */
.ux-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.ux-steps li { display: flex; gap: 16px; align-items: flex-start; background: var(--white, #fff); border: 1px solid var(--border, #E8E5DF); border-radius: 16px; padding: 18px 18px; }
.ux-step-n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--moss, #626649); color: #fff; font: 600 15px var(--f-ui, 'Montserrat', sans-serif); display: inline-flex; align-items: center; justify-content: center; }
.ux-steps strong { display: block; font: 600 16px var(--f-ui, 'Montserrat', sans-serif); color: var(--dark, #1D1D1F); margin-bottom: 4px; }
.ux-steps p { margin: 0; font: 300 15px/1.6 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
@media (min-width: 768px) { .ux-steps { grid-template-columns: repeat(3, 1fr); } .ux-steps li { flex-direction: column; } }

/* ---------- Diferenciar valoración presencial vs. consulta virtual ---------- */
.cta-btn--wa { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.55) !important; }
.cta-btn--wa:hover { background: rgba(255,255,255,.12) !important; }
.cta-bar-main svg { flex-shrink: 0; }
.ux-hero-wa { margin: 4px 0 0; font: 300 13.5px/1.6 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); max-width: 460px; }
.ux-hero-wa a { color: var(--burgundy, #844C5D); font-weight: 600; text-decoration: underline; }
.ux-choose { display: grid; gap: 14px; margin-top: 8px; }
.ux-choose-card { background: var(--white, #fff); border: 1px solid var(--border, #E8E5DF); border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; }
.ux-choose-card:first-child { border-top: 3px solid var(--burgundy, #844C5D); }
.ux-choose-card:last-child { border-top: 3px solid var(--moss, #626649); }
.ux-choose-eyebrow { font: 600 10px var(--f-ui, 'Montserrat', sans-serif); letter-spacing: 2.2px; text-transform: uppercase; color: var(--moss, #626649); margin-bottom: 6px; }
.ux-choose-card h3 { margin: 0 0 8px; font: 600 20px/1.25 var(--f-ui, 'Montserrat', sans-serif); color: var(--dark, #1D1D1F); }
.ux-choose-card p { margin: 0 0 12px; font: 300 15px/1.65 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-choose-card ul { margin: 0 0 18px; padding: 0 0 0 18px; font: 400 13.5px/1.6 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-choose-card .ux-btn { margin-top: auto; }
.ux-choose-wa { margin: 14px 2px 0; font: 300 14px/1.6 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ux-choose-wa a { color: var(--burgundy, #844C5D); font-weight: 600; text-decoration: underline; }
@media (min-width: 768px) { .ux-choose { grid-template-columns: 1fr 1fr; gap: 18px; } }
.ag-switch { background: var(--sage-bg, #F0F0E8); border: 1px solid var(--border, #E8E5DF); border-radius: 14px; padding: 14px 16px; margin: 0 0 20px; font: 300 14.5px/1.6 var(--f-body, 'Bellota Text', sans-serif); color: var(--carbon, #54534D); }
.ag-switch a { color: var(--burgundy, #844C5D); font-weight: 600; text-decoration: underline; }

/* ---------- Hero del home (escritorio): botones en una sola fila ---------- */
.ux-btn--wa { background: transparent; color: var(--moss, #626649); border: 1.5px solid var(--moss, #626649); gap: 8px; }
.ux-btn--wa:hover { background: var(--moss, #626649); color: #fff; }
.ux-btn--wa:hover svg path { fill: #fff; }
.ux-hero-cta .ux-btn { white-space: nowrap; }
.ux-hero-wa strong { font-weight: 600; color: var(--dark, #1D1D1F); }
@media (min-width: 768px) {
  .ux-hero-cta { flex-direction: row; flex-wrap: nowrap; gap: 8px; max-width: none; width: max-content; }
  .ux-hero-cta .ux-btn { padding: 12px 16px; font-size: 13.5px; }
  .ux-hero-wa { max-width: 520px; }
}
/* ---------- Encabezado: WhatsApp visible junto a "Reservar" (escritorio) ---------- */
.nav-wa { display: none; }
@media (min-width: 768px) {
  .nav-wa { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--moss, #626649); margin-right: 10px; flex-shrink: 0; transition: background .2s; }
  .nav-wa:hover { background: var(--sage-bg, #F0F0E8); }
  .nav-wa svg { width: 18px; height: 18px; }
}
.ag-wa { margin: 18px 0 8px; }


/* ---------- Hero del home: composición equilibrada ---------- */
body .hero h1 em { display: block; margin-top: .12em; }
body .hero .ux-hero-wa { max-width: none; font-size: 12.5px; margin-top: 12px; }
body .hero .ux-next { margin: 14px 0 0; max-width: 520px; }
body .hero .ux-next-lab { white-space: nowrap; letter-spacing: 1.4px; }
body .hero .ux-next-row { padding: 9px 14px; }
body .hero .ux-next-note, body .hero .ux-next-left { display: none; }
@media (min-width: 1024px) {
  body .hero {
    --hero-pad: max(var(--s10), calc((100vw - 1360px) / 2));
    padding: 96px var(--hero-pad) 56px !important; min-height: min(100svh, 800px);
    align-items: stretch; justify-content: space-between; gap: clamp(40px, 4.5vw, 80px);
  }
  body .hero .hero-content { flex: 1 1 54%; max-width: 640px; align-self: center; }
  body .hero h1 { font-size: clamp(46px, 4.7vw, 68px); letter-spacing: -2.4px; line-height: 1.04; }
  body .hero .hero-visual { flex: 1 1 42%; max-width: 600px; align-self: stretch; align-items: stretch; }
  body .hero .hero-photo { max-width: none; width: 100%; height: 100%; min-height: 540px; aspect-ratio: auto; }
  body .hero .hero-photo img { object-position: 50% 18% !important; }
}

/* ---------- Franja de confianza (escritorio): alineada, pareja y sin saltos de línea ---------- */
@media (min-width: 768px) {
  body .stats-scroll { padding: var(--s10) 0 var(--s12); gap: var(--s5); }
  body .stats-scroll .stat-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 132px; padding: 34px var(--s5) var(--s6); }
  body .stats-scroll .stat-num { font-size: clamp(24px, 2.3vw, 34px); letter-spacing: -1px; white-space: nowrap; margin-bottom: var(--s3); }
  body .stats-scroll .stat-label { font-size: 11px; letter-spacing: 1.6px; }
}