/* =====================================================================
   Capa editorial — se carga DESPUÉS del <style> de cada página.
   Inspirada en un estilo "galería editorial": titulares serif grandes y
   ligeros, etiquetas monoespaciadas, superficies planas que se separan
   por color (no por sombra) y bloques de color sólido.
   Mantiene la paleta original (crema, rosa pastel, verde profundo).
   Para volver al diseño anterior basta con quitar el <link> a este archivo.
   ===================================================================== */

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --r-control: 8px;    /* botones, inputs, nav */
  --r-card: 16px;      /* tarjetas */
  --r-tile: 30px;      /* bloques de color */

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Sin sombras: la profundidad la da el color */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

body { font-size: 16px; }

::selection { background: var(--pink-mid); color: var(--ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Tres voces tipográficas ---------- */

/* 1 · Display: serif ligera, grande, interlineado apretado */
.hero-heading h1,
.section-title,
.page-banner h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-wrap: balance;
}
.hero-heading h1 { font-size: clamp(44px, 7.4vw, 96px); margin: 14px 0 20px; }
.section-title  { font-size: clamp(38px, 5.4vw, 68px); margin-bottom: 20px; }
.section-title em,
.hero-heading h1 em { font-style: italic; color: var(--primary); }

/* 2 · Mono: etiquetas, numeración, datos */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink-deep);
  flex-shrink: 0;
}

/* 3 · UI: sans legible para cuerpo */
.section-lead,
.hero-heading p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.hero-heading p { max-width: 560px; }

/* ---------- Header ---------- */
.site-header {
  background: rgba(250, 246, 240, 0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.brand-mark { box-shadow: none; border: 1px solid var(--line-strong); }
.brand-name { font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.brand-name small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
}
.nav { gap: 26px; }
.nav-link { font-size: 14px; color: var(--ink); position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }

/* ---------- Botones: rectángulo suave + flecha ---------- */
.nav-cta,
.btn,
.btn-cta-agendar,
.schedule-cta-btn,
.contacto-submit,
#confirmBtn,
.waitlist-btn {
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
  transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.nav-cta { padding: 10px 16px; }
.btn-cta-agendar { padding: 16px 26px; font-size: 16px; }
.btn-cta-agendar::after,
.nav-cta::after {
  content: '→';
  font-family: var(--font-ui);
  transition: transform .25s var(--ease);
}
.btn-cta-agendar:hover::after,
.nav-cta:hover::after { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 104px); }
.hero-heading { margin-bottom: clamp(36px, 5vw, 56px); }

.card-row {
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
}
.profile { background: var(--card); }
.schedule { background: var(--bg-soft); }
.avatar { box-shadow: none; border: 1px solid var(--line-strong); }
.name { font-weight: 500; font-size: 28px; letter-spacing: -0.015em; }
.role {
  font-family: var(--font-mono);
  font-size: 11.5px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.service-row strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
}

.schedule-prompt,
.slots-title {
  font-family: var(--font-mono);
  font-size: 11.5px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.date-cell,
.slot,
.date-mini,
.slot-chip {
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.date-cell .dom,
.date-mini .dom,
.slot,
.slot-chip { font-variant-numeric: tabular-nums; }

/* ---------- Secciones ---------- */
.section,
.sobre-mi,
.agendar,
.consultorio-section,
.contacto,
.ubicacion { padding-top: clamp(72px, 10vw, 128px); padding-bottom: clamp(72px, 10vw, 128px); }
.section-header-center { margin-bottom: clamp(40px, 6vw, 72px); }

/* Sobre mí: titular grande, foto como objeto de galería */
.sobre-mi-photo { border-radius: var(--r-tile) !important; box-shadow: none !important; }
.sobre-mi-photo::after { display: none; }
.sobre-mi-text .section-title { font-size: clamp(48px, 7vw, 88px); }
.sobre-mi-quote {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  line-height: 1.2;
  color: var(--primary-deep);
  background: none !important;
  border: none !important;
  border-top: 1px solid var(--pink-deep) !important;
  border-radius: 0 !important;
  padding: 24px 0 0 !important;
  margin-top: 28px;
}

/* Consultorio: fotos con radio de galería */
.consultorio-photo { border-radius: var(--r-tile); box-shadow: none; }
.consultorio-photo:hover { transform: none; box-shadow: none; }

/* ---------- Motivos: bloques de color sólido ---------- */
.motivos-grid { gap: 12px; }
.motivo-card {
  border: none;
  border-radius: var(--r-tile);
  padding: 32px 28px 30px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  transition: background-color .25s var(--ease);
}
.motivo-card:hover { transform: none; box-shadow: none; }
.motivo-card h3 {
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: auto 0 10px;
}
.motivo-card p { font-size: 14.5px; line-height: 1.55; }
.motivo-card .motivo-icon {
  background: transparent !important;
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 44px; height: 44px;
  margin-bottom: 28px;
  opacity: .9;
}
.motivo-card .motivo-icon svg { stroke: currentColor !important; }
.motivo-card:hover .motivo-icon { transform: none; }

/* Ritmo de color (8 tarjetas) */
.motivo-card:nth-child(8n+1) { background: var(--pink-soft); color: var(--ink); }
.motivo-card:nth-child(8n+2) { background: var(--primary); color: #F4EFE7; }
.motivo-card:nth-child(8n+3) { background: var(--bg-soft); color: var(--ink); }
.motivo-card:nth-child(8n+4) { background: var(--primary-soft); color: var(--primary-deep); }
.motivo-card:nth-child(8n+5) { background: var(--primary-tint); color: var(--primary-deep); }
.motivo-card:nth-child(8n+6) { background: var(--pink-mid); color: var(--ink); }
.motivo-card:nth-child(8n+7) { background: var(--primary-deep); color: #F4EFE7; }
.motivo-card:nth-child(8n+8) { background: var(--pink-soft); color: var(--ink); }
.motivo-card:nth-child(8n+1) p,
.motivo-card:nth-child(8n+3) p,
.motivo-card:nth-child(8n+6) p,
.motivo-card:nth-child(8n+8) p { color: var(--ink-soft); }
.motivo-card:nth-child(8n+4) p,
.motivo-card:nth-child(8n+5) p { color: var(--primary-deep); opacity: .85; }
.motivo-card:nth-child(8n+2) p,
.motivo-card:nth-child(8n+7) p { color: rgba(244, 239, 231, 0.82); }
.motivo-card:nth-child(8n+2) .motivo-icon svg,
.motivo-card:nth-child(8n+7) .motivo-icon svg { stroke: #F4EFE7 !important; }

/* ---------- Método: banda invertida en verde profundo ---------- */
.agendar { background: var(--primary-deep); color: #F4EFE7; }
.agendar .eyebrow { color: var(--pink-mid); }
.agendar .section-title { color: #FAF6F0; }
.agendar .section-lead,
.agendar .agendar-intro-text { color: rgba(244, 239, 231, 0.78); }
.agendar .agendar-intro-text strong { color: #FAF6F0; }
.agendar-intro-quote {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  line-height: 1.2;
  color: var(--pink-mid) !important;
  text-align: center !important;
}
.agendar-grid {
  gap: 0;
  border-top: 1px solid rgba(244, 239, 231, 0.18);
}
.agendar-step {
  background: none;
  border: none;
  border-radius: 0;
  border-right: 1px solid rgba(244, 239, 231, 0.18);
  padding: 32px 28px 8px;
}
.agendar-step:last-child { border-right: none; }
.step-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--pink-mid);
  margin-bottom: 40px;
}
.step-num::before { content: '— '; }
.agendar-step h3 {
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FAF6F0;
  margin-bottom: 14px;
}
.agendar-step p { color: rgba(244, 239, 231, 0.72); font-size: 15px; }
.agendar-cta { margin-top: clamp(48px, 6vw, 72px); }
.agendar .btn-cta-agendar {
  background: #FAF6F0 !important;
  color: var(--primary-deep) !important;
}
.agendar .btn-cta-agendar svg { stroke: var(--primary-deep); }
.agendar .btn-cta-agendar:hover { background: var(--pink-soft) !important; }

/* ---------- Redes ---------- */
.social-handle { border-radius: var(--r-control) !important; }
.ig-card { border-radius: var(--r-tile) !important; box-shadow: none !important; }
.ig-card:hover { transform: none !important; }

/* ---------- Contacto ---------- */
.contacto-card {
  border-radius: var(--r-tile) !important;
  box-shadow: none !important;
  border: 1px solid var(--line) !important;
}
.contacto-field input,
.contacto-field textarea { border-radius: var(--r-control) !important; }
.contacto-channel { border-radius: var(--r-control) !important; box-shadow: none !important; transform: none !important; }
.contacto-divider {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Ubicación ---------- */
.ubicacion-search-box,
.ubicacion-address-card { box-shadow: none !important; }
.map-embed-wrap { border-radius: var(--r-tile) !important; box-shadow: none !important; }

/* ---------- Footer ---------- */
.site-footer { background: #10302A !important; }
.footer-brand { font-weight: 400 !important; font-size: clamp(32px, 4vw, 48px) !important; letter-spacing: -0.02em; line-height: 1; }
.footer-col h3 {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}
.whatsapp-float { box-shadow: none !important; }

/* =====================================================================
   agendar.html
   ===================================================================== */
.page-banner h1 { font-size: clamp(40px, 6vw, 72px); }
.info-card,
.form-card {
  border-radius: var(--r-tile) !important;
  box-shadow: none !important;
  border: 1px solid var(--line) !important;
}
.form-header h2,
.info-head h2,
.info-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.step-label {
  font-family: var(--font-mono);
  font-weight: 500 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.step-bullet { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.info-tab,
.modality-tab,
.date-nav-btn,
.radio-option,
.select-wrapper select,
.field-text,
.form-body input,
.form-body textarea,
.form-body select { border-radius: var(--r-control) !important; }
.summary { border-radius: var(--r-card) !important; box-shadow: none !important; }
.service-item-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
}
.opinion { border-radius: var(--r-card) !important; box-shadow: none !important; }
.opinion-text { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.35; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .agendar-step:nth-child(2n) { border-right: none; }
  .agendar-step { border-bottom: 1px solid rgba(244, 239, 231, 0.18); padding-bottom: 28px; }
}
@media (max-width: 768px) {
  .hero-heading h1 { font-size: clamp(42px, 11vw, 60px); }
  .section-title { font-size: clamp(36px, 9.5vw, 48px); }
  .motivo-card { min-height: 200px; padding: 26px 22px 24px; }
  .card-row { border-radius: var(--r-card); }
}
@media (max-width: 480px) {
  .hero-heading h1 { font-size: 42px; }
  .section-title { font-size: 36px; }
  .sobre-mi-text .section-title { font-size: 48px; }
  .motivo-card { min-height: 0; }
  .motivo-card .motivo-icon { margin-bottom: 20px; }
  .agendar-step { border-right: none; padding: 26px 4px; }
  .step-num { margin-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =====================================================================
   Formulario de agendar: etiquetas visibles, aviso de faltantes, contraste
   ===================================================================== */
.field-row { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.field-text { font-size: 16px !important; } /* evita el zoom automático en iPhone */
.field-text::placeholder { color: var(--muted); }
.field-text:focus { border-color: var(--primary) !important; outline: none; box-shadow: 0 0 0 3px var(--primary-tint) !important; }

.missing-hint {
  margin: 10px 2px 0;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.missing-hint:empty { display: none; }

/* Verde WhatsApp más oscuro: texto blanco legible (antes 2:1, ahora > 4.5:1) */
.confirm-btn,
#confirmBtn { background: #0F7A47 !important; }
.confirm-btn:hover:not(:disabled) { background: #0B5E37 !important; }
.confirm-btn:disabled { background: #9DBFAE !important; color: #fff; }

/* =====================================================================
   Inicio: contraste, redes, preguntas frecuentes, CTA fijo en celular
   ===================================================================== */

/* Botón de contacto: verde (antes blanco sobre rosa, contraste 2.2:1) */
.contacto-submit { background: var(--primary) !important; color: #fff !important; }
.contacto-submit:hover { background: var(--primary-deep) !important; }

/* Redes: las capturas de publicaciones no se leían en celular */
.galeria-grid { display: none !important; }
.galeria { padding-bottom: clamp(72px, 10vw, 128px) !important; }
.ig-header { margin-bottom: 0 !important; }
.social-handles { gap: 12px; margin-top: 12px; }
.social-handle {
  padding: 14px 22px !important;
  font-size: 15.5px !important;
  background: var(--card) !important;
  border: 1px solid var(--line-strong) !important;
}

/* Ubicación */
.ubicacion .section-lead { margin-bottom: 0; }
.ubicacion .section-header-center { margin-bottom: 40px; }

/* Preguntas frecuentes */
.faq {
  background: var(--bg-soft);
  padding: clamp(72px, 10vw, 128px) 28px;
}
.faq-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-head { position: sticky; top: 110px; }
.faq-head .section-lead { margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--primary); }
.faq-item p {
  margin: -6px 0 26px;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 768px) {
  .faq { padding-left: 20px; padding-right: 20px; }
  .faq-inner { grid-template-columns: 1fr; }
  .faq-head { position: static; }

}

/* Botón flotante "Agendar cita": círculo que se despliega al pasar el cursor */
.book-float {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  height: 60px;
  min-width: 60px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 15.5px;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color .2s var(--ease);
}
.book-float svg { width: 24px; height: 24px; flex-shrink: 0; }
.book-float-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  transition: max-width .35s var(--ease), opacity .2s var(--ease), margin-left .35s var(--ease);
}
.book-float:hover,
.book-float:focus-visible { background: var(--primary-deep); }
.book-float:hover .book-float-label,
.book-float:focus-visible .book-float-label {
  max-width: 200px;
  opacity: 1;
  margin-left: 10px;
}

/* En pantallas táctiles no existe "pasar el cursor": se muestra desplegado */
@media (hover: none) {
  .book-float .book-float-label { max-width: 200px; opacity: 1; margin-left: 10px; }
}
@media (max-width: 480px) {
  .book-float { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 54px; }
}

/* Aviso de crisis (pie de página) */
.crisis-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 1200px;
  margin: 8px auto 0;
  padding: 16px 20px;
  border: 1px solid rgba(244, 239, 231, 0.18);
  border-radius: var(--r-card);
  color: rgba(244, 239, 231, 0.82);
  font-size: 14px;
  line-height: 1.55;
}
.crisis-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--pink-mid); }
.crisis-note strong { color: #FAF6F0; font-weight: 600; }
.crisis-note a { color: #FAF6F0 !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }

/* Panel "¿Qué sigue?" después de enviar la solicitud */
.sent-panel {
  margin-top: 14px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--primary-tint);
  border: 1px solid var(--primary-soft);
  outline: none;
}
.sent-head { display: flex; align-items: center; gap: 10px; color: var(--primary-deep); }
.sent-head svg {
  width: 26px; height: 26px; padding: 5px;
  border-radius: 50%;
  background: var(--primary); color: #fff;
  flex-shrink: 0;
}
.sent-head strong { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.1; }
.sent-steps { list-style: none; counter-reset: s; margin: 16px 0 0; padding: 0; }
.sent-steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 14px 36px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sent-steps li::before {
  content: '0' counter(s);
  position: absolute; left: 0; top: 1px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.sent-steps li span { display: block; font-weight: 600; color: var(--ink); }
.sent-retry { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.sent-retry-btn {
  background: none; border: none; padding: 4px 2px;
  font: inherit; font-weight: 600; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}

/* =====================================================================
   Interacciones coherentes
   ===================================================================== */

/* Días, horarios y pestañas ahora son <button> (se eligen con teclado).
   :where() = especificidad 0, así no pisa los estados seleccionado/hover. */
:where(button.date-cell, button.slot, button.date-mini, button.slot-chip, .tabs button.tab) {
  font: inherit;
  color: inherit;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
button.date-cell, button.date-mini { width: 100%; }
button.date-cell:disabled, button.date-mini:disabled { cursor: not-allowed; }
.tabs button.tab {
  background: none;
  border-top: none; border-left: none; border-right: none;
  cursor: pointer;
}

/* Redes: todas se ponen rosas al pasar el cursor (antes TikTok se ponía negro) */
.social-handle,
.contacto-channel {
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease) !important;
}
.social-handle:hover,
.social-handle:focus-visible,
.contacto-channel:hover,
.contacto-channel:focus-visible {
  background: var(--pink-soft) !important;
  border-color: var(--pink-deep) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.social-handle:hover svg,
.contacto-channel:hover svg { color: #C2566B; }
.contacto-channel.tiktok:hover svg { fill: #C2566B; }

/* Enlace "Abrir en Google Maps": subrayado en vez de desvanecerse */
.ubicacion-maps-link:hover { opacity: 1 !important; text-decoration: underline !important; text-underline-offset: 4px; }

/* =====================================================================
   Calendario de reservas (js/calendario.js) — inspirado en Calendly,
   con la paleta del consultorio
   ===================================================================== */
.bc { display: flex; flex-direction: column; gap: 18px; width: 100%; }

/* Atajo "Próximo horario libre" */
.bc-next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--primary-soft);
  border-radius: var(--r-control);
  background: var(--primary-tint);
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.bc-next:hover { background: var(--primary-soft); border-color: var(--primary); }
.bc-next-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.bc-next-value { font-weight: 600; font-size: 15.5px; }
.bc-next-value span { display: inline-block; margin-left: 4px; transition: transform .25s var(--ease); }
.bc-next:hover .bc-next-value span { transform: translateX(3px); }

/* Encabezado */
.bc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bc-month {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.bc-tz { font-size: 12.5px; color: var(--ink-soft); }

/* Semana y cuadrícula */
.bc-week,
.bc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px 4px;
  justify-items: center;
}
.bc-week span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.bc-week { margin-bottom: -8px; }
.bc-day {
  position: relative;
  width: 100%;
  max-width: 46px;
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: default;
  padding: 0;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.bc-day.is-outside { opacity: .45; }
.bc-day.is-available {
  background: var(--primary-tint);
  color: var(--primary-deep);
  font-weight: 600;
  cursor: pointer;
}
.bc-day.is-available:hover { background: var(--primary-soft); }
.bc-day.is-selected,
.bc-day.is-selected:hover { background: var(--primary); color: #fff; }
.bc-day.is-today::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 5px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
}

/* Horarios: cuadrícula compacta */
.bc-slots { border-top: 1px solid var(--line); padding-top: 16px; }
.bc-hint { margin: 0; font-size: 14px; color: var(--ink-soft); text-align: center; }
.bc-slots-title { margin: 0 0 12px; font-weight: 600; font-size: 15px; }
.bc-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.bc-slot {
  min-height: 46px;
  padding: 0 6px;
  border: 1px solid var(--primary-soft);
  border-radius: var(--r-control);
  background: var(--card);
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--primary);
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.bc-slot:hover { border-color: var(--primary); background: var(--primary-tint); }
.bc-slot.is-selected,
.bc-slot.is-selected:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Botón único "Continuar · día, hora →" */
.bc-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 0 18px;
  border: none;
  border-radius: var(--r-control);
  background: var(--primary-deep);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  animation: bc-in .25s var(--ease);
  transition: background-color .18s var(--ease);
}
.bc-confirm:hover { background: var(--primary); }
.bc-confirm-label { font-weight: 600; }
.bc-confirm-value { font-variant-numeric: tabular-nums; opacity: .92; }
.bc-confirm-value span,
.bc-next-value span { display: inline-block; margin-left: 4px; transition: transform .25s var(--ease); }
.bc-confirm:hover .bc-confirm-value span { transform: translateX(3px); }
@keyframes bc-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Con espacio suficiente (inicio, escritorio): calendario | horarios, lado a lado */
.bc-cal { display: flex; flex-direction: column; gap: 18px; }
.schedule, .date-strip-wrap { container-type: inline-size; }
@container (min-width: 540px) {
  .bc {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .bc-slots {
    border-top: none;
    border-left: 1px solid var(--line);
    padding: 0 0 0 28px;
    align-self: stretch;
  }
  .bc-hint { text-align: left; padding-top: 4px; }
  .bc-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bc-confirm { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 16px; }
}

.bc-empty { margin: 0; color: var(--ink-soft); font-size: 14px; text-align: center; }

/* Esqueleto mientras carga */
.bc-sk { display: block; border-radius: var(--r-control); background: var(--line); animation: bc-pulse 1.4s ease-in-out infinite; }
.bc-sk-next { height: 62px; }
.bc-sk-head { height: 24px; width: 45%; }
.bc-sk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; justify-items: center; }
.bc-sk-grid .bc-sk { width: 100%; max-width: 46px; aspect-ratio: 1; border-radius: 50%; }
@keyframes bc-pulse { 50% { opacity: .5; } }

/* Contenedores existentes */
.schedule { justify-content: flex-start !important; }
.schedule #bookingCalendar { width: 100%; }
.schedule-prompt { text-align: center; }
#step-5 .date-strip-wrap { margin-top: 4px; }

@media (max-width: 480px) {
  .bc-day { font-size: 14px; }
  .bc-month { font-size: 21px; }
}

/* =====================================================================
   Ajustes tras la prueba de uso
   ===================================================================== */

/* Agendar en celular/tablet: el formulario va primero (antes quedaba a ~2,300px de scroll) */
@media (max-width: 1000px) {
  .right-col { order: -1; }
}

/* "Tu horario: …" arriba del formulario */
.preset-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 20px;
  background: var(--primary-tint);
  border-bottom: 1px solid var(--primary-soft);
  font-size: 14px;
  color: var(--primary-deep);
}
.preset-note[hidden] { display: none; }
.preset-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; padding: 6px 0; }
#step-5 { scroll-margin-top: 90px; }

/* Botón flotante: en pantallas táctiles solo el círculo (desplegado tapaba contenido) */
@media (hover: none) {
  .book-float .book-float-label { max-width: 0; opacity: 0; margin-left: 0; }
  .book-float { padding: 0; justify-content: center; width: 56px; min-width: 56px; height: 56px; }
}

/* Botón "Continuar": etiqueta arriba y día/hora abajo, sin cortes de línea raros */
.bc-confirm { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 18px; }
.bc-confirm-value { white-space: nowrap; }

/* Días en columnas angostas (agendar en celular): área de toque de 44px de alto */
@container (max-width: 360px) {
  .bc-day {
    max-width: none;
    aspect-ratio: auto;
    height: 44px;
    border-radius: 12px;
  }
  .bc-day.is-today::after { bottom: 4px; }
  .bc-grid { gap: 4px 3px; }
}

/* Inicio en celular: el calendario va antes de la tarjeta de perfil
   (antes quedaba a ~1,150px; el título del hero ya presenta a Karen) */
@media (max-width: 768px) {
  .card-row .schedule { order: -1; border-bottom: 1px solid var(--line); }
  .card-row .profile { border-bottom: none !important; }
}

/* Agendar en celular: encabezado más compacto para que el formulario aparezca antes */
@media (max-width: 600px) {
  .page-banner { padding: 24px 18px 20px !important; }
  .page-banner h1 { font-size: 40px; margin: 8px 0 8px; }
  .page-banner p { font-size: 15px; }
  .layout { padding-top: 18px !important; }
}

/* Etiquetas largas en celular: caben en un renglón (el punto ya no queda suelto) */
@media (max-width: 480px) {
  .eyebrow { font-size: 11px; letter-spacing: 0.1em; }
}

/* =====================================================================
   "Un espacio para ti": composición tipo revista, fotos sin recorte
   ===================================================================== */
.consultorio-grid {
  grid-template-columns: 1.7fr 1fr 1fr !important;
  align-items: end;
  gap: clamp(14px, 2vw, 24px) !important;
}
.consultorio-photo {
  aspect-ratio: auto !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
  background: none !important;
  border-radius: 0 !important;
}
.consultorio-photo:nth-child(3) { margin-bottom: clamp(32px, 5vw, 72px) !important; }
.consultorio-open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: var(--line);
  border-radius: var(--r-tile);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 4;
}
.consultorio-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.consultorio-open:hover img { transform: scale(1.03); }
.consultorio-photo figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.consultorio-photo figcaption span { color: var(--pink-deep); }

.consultorio-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--line-strong);
}
.consultorio-cta p { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.consultorio-cta strong { color: var(--ink); font-weight: 600; }
.consultorio-cta p span { display: block; }

.lightbox img { border-radius: var(--r-card); box-shadow: none; }

@media (max-width: 768px) {
  .consultorio-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .consultorio-photo.is-main { grid-column: 1 / -1; }
  .consultorio-photo:nth-child(3) { margin-bottom: 0 !important; }
  .consultorio-open { border-radius: var(--r-card); }
  .consultorio-photo.is-main .consultorio-open { aspect-ratio: 4 / 5; }
  .consultorio-cta { flex-direction: column; align-items: stretch; text-align: left; }
  .consultorio-cta .btn-cta-agendar { justify-content: center; }
}

/* Escritorio: foto principal menos alta para que la sección quepa mejor en pantalla */
@media (min-width: 769px) {
  .consultorio-grid { grid-template-columns: 1.45fr 1fr 1fr !important; max-width: 1120px; margin-left: auto; margin-right: auto; }
  .consultorio-photo.is-main .consultorio-open { aspect-ratio: 4 / 4.4; }
  .consultorio-cta { max-width: 1120px; margin-left: auto; margin-right: auto; }
}

/* Pie de foto con punto rosa, igual que las etiquetas de sección */
.consultorio-photo figcaption { align-items: center; }
.consultorio-photo figcaption::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink-deep);
  flex-shrink: 0;
}

/* "Así trabajamos juntos": punto rosa junto al subtítulo, sin numeración */
.step-num { display: none; }
.agendar-step { padding-top: 32px; }
.agendar-step h3 { display: flex; align-items: center; gap: 12px; }
.agendar-step h3::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink-mid);
  flex-shrink: 0;
}

/* =====================================================================
   Contacto en dos columnas
   ===================================================================== */
.contacto-split {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.contacto-intro .section-lead { margin-bottom: 32px; }
.contacto-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pink-mid); }
.contacto-links li { border-bottom: 1px solid var(--pink-mid); }
.contacto-links a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 4px;
  color: var(--ink);
  text-decoration: none !important;
  transition: color .2s var(--ease);
}
.contacto-links svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--primary); fill: currentColor; }
.contacto-links svg[fill="none"] { fill: none; }
.contacto-links span { flex: 1; display: flex; flex-direction: column; font-size: 16px; font-weight: 500; }
.contacto-links small {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.contacto-links .ch-arrow { flex: 0; color: var(--primary); transition: transform .25s var(--ease); }
.contacto-links a:hover { color: var(--primary); }
.contacto-links a:hover .ch-arrow { transform: translateX(4px); }

.contacto-form {
  background: var(--card);
  border-radius: var(--r-tile);
  padding: clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.cf-optional { color: var(--ink-soft); font-weight: 400; }
.cf-field input,
.cf-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--card);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  resize: vertical;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cf-field input:focus,
.cf-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.cf-field [aria-invalid="true"] { border-color: #B4423A; }
.cf-error { margin: 0; font-size: 13px; color: #A83A33; min-height: 0; }
.cf-error:empty { display: none; }
.contacto-form .contacto-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 4px;
  border: none;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.contacto-form .contacto-submit svg { width: 20px; height: 20px; fill: currentColor; }
.cf-note { margin: -6px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* =====================================================================
   Ubicación en dos columnas
   ===================================================================== */
.ubicacion-split {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.ubicacion-datos { margin: 28px 0 32px; border-top: 1px solid var(--line-strong); }
.ubicacion-datos > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-strong);
}
.ubicacion-datos dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  padding-top: 3px;
}
.ubicacion-datos dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.ubicacion .map-embed-wrap {
  margin: 0;
  aspect-ratio: 4 / 3.4;
  border: none !important;
  background: var(--bg-soft);
}
.ubicacion .map-embed-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .contacto-split,
  .ubicacion-split { grid-template-columns: 1fr; }
  .contacto { padding-left: 20px !important; padding-right: 20px !important; }
  .ubicacion { padding-left: 20px !important; padding-right: 20px !important; }
  .ubicacion .map-embed-wrap { aspect-ratio: 1 / 1; border-radius: var(--r-card) !important; }
}
@media (max-width: 480px) {
  .ubicacion-datos > div { grid-template-columns: 1fr; gap: 4px; }
  .ubicacion-btn { width: 100%; justify-content: center; }
  .contacto-form { border-radius: var(--r-card); }
}

/* =====================================================================
   Tarjeta de perfil del inicio: más sobria (sin íconos ni aro animado)
   ===================================================================== */
.avatar::before { display: none !important; }
.features { gap: 0 !important; border-top: 1px solid var(--line); margin-top: 24px !important; }
.features li {
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.features li svg { display: none !important; }
.rating { font-size: 13.5px; color: var(--ink-soft); }
.stars { letter-spacing: 1px; font-size: 13px; }
.specialties { font-weight: 500; }

/* =====================================================================
   Agendar: columna izquierda con el estilo nuevo
   ===================================================================== */
.page-banner { background: var(--bg) !important; }
.info-card { box-shadow: none !important; border-radius: var(--r-tile) !important; }
.avatar-big { box-shadow: none !important; border: 1px solid var(--line-strong) !important; }
.info-head h2 { font-weight: 500; font-size: 28px; letter-spacing: -0.015em; }
.trust-icon,
.pre-agendar-icon {
  background: transparent !important;
  border: 1px solid var(--pink-deep);
  border-radius: 50% !important;
}
.trust-block h3 { font-family: var(--font-display); font-weight: 500; font-size: 20px; margin: 0 0 2px; }
.pre-agendar-header h2 { font-weight: 500; }
.horarios-block { border-radius: var(--r-card) !important; }
.horario-dias { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.horario-horas { font-variant-numeric: tabular-nums; }

/* Pestañas: sin la barrita de desplazamiento con flechas */
.info-tabs {
  gap: 22px !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.info-tabs::-webkit-scrollbar { display: none; }
.info-tab { font-weight: 500 !important; font-size: 14.5px !important; }
.info-tab.active { color: var(--ink) !important; border-bottom-color: var(--primary) !important; }

/* Botón "Confirmar por WhatsApp" desactivado: gris neutro, claramente inactivo */
.confirm-btn:disabled,
#confirmBtn:disabled {
  background: var(--line) !important;
  color: var(--ink-soft) !important;
  cursor: not-allowed;
}
.confirm-btn:disabled svg { fill: var(--ink-soft) !important; }

/* =====================================================================
   Redes en Contacto: solo logos en círculo
   ===================================================================== */
.contacto-intro .section-lead { margin-bottom: 0; }
.redes-logos { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }
.red-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: var(--ink) !important;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none !important;
}
.red-logo-icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex-shrink: 0;
  border: 1px solid var(--pink-deep);
  border-radius: 50%;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.red-logo svg { width: 22px; height: 22px; }
.red-logo:hover .red-logo-icon,
.red-logo:focus-visible .red-logo-icon { background: var(--primary); border-color: var(--primary); color: #fff; }
.red-logo:hover .red-logo-text { text-decoration: underline; text-underline-offset: 4px; }

/* =====================================================================
   Ficha de Google (calificación real enlazada)
   ===================================================================== */
.google-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft) !important;
  font-size: 13.5px;
  text-decoration: none !important;
}
.google-rating strong { color: var(--ink); font-weight: 600; }
.google-rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.stars { color: #E7A23B !important; }

.ficha-google {
  margin-top: 4px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--card);
}
.ficha-google-head { display: flex; align-items: center; gap: 14px; }
.ficha-google-head > svg { width: 28px; height: 28px; flex-shrink: 0; }
.ficha-google-head strong { display: block; font-size: 16px; font-weight: 600; }
.ficha-google-head span { font-size: 14px; color: var(--ink-soft); }
.ficha-google-actions { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.ficha-google-actions .btn-cta-agendar { padding: 12px 22px; font-size: 15px; }
.ficha-link {
  font-weight: 600;
  color: var(--primary) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.opiniones-google { display: inline-block; margin-top: 14px; }


/* Enlace a "Confidencialidad y ética" en el pie */
.footer-bottom a { color: inherit !important; text-decoration: underline; text-underline-offset: 3px; }

/* Menú: sin cortes de línea; más compacto en pantallas medianas */
.nav-link, .nav-cta { white-space: nowrap; }
@media (max-width: 1180px) {
  .nav { gap: 18px !important; }
  .nav-link { font-size: 13.5px; }
  .brand-name { font-size: 20px; }
}

/* Menú de hamburguesa también en pantallas medianas (el menú completo no cabe por debajo de ~1000px) */
@media (max-width: 1000px) {
  .site-header .nav { display: none; }
  .site-header .nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(250, 246, 240, 0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    padding: 10px 22px 18px;
    border-bottom: 1px solid var(--line);
    z-index: 99;
  }
  .site-header .nav.open .nav-link { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .site-header .nav.open .nav-link::after { display: none; }
  .site-header .nav.open .nav-cta { margin-top: 14px; justify-content: center; padding: 13px; }
  .site-header .menu-toggle { display: block; }
}

/* =====================================================================
   Contacto compacto: redes fijas + botón que despliega el formulario
   ===================================================================== */
.contacto-split { align-items: start; }
.contacto-side { display: flex; flex-direction: column; gap: 20px; }
.contacto-side .redes-logos { margin-top: 0; flex-direction: column; gap: 0; border-top: 1px solid var(--pink-mid); }
.contacto-side .red-logo { padding: 14px 0; border-bottom: 1px solid var(--pink-mid); }
.contacto-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border: none;
  border-radius: var(--r-control);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.contacto-toggle:hover { background: var(--primary-deep); }
.contacto-toggle svg { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.contacto-toggle[aria-expanded="true"] { background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.contacto-toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.contacto-form[hidden] { display: none !important; }
.contacto-side .contacto-form { animation: bc-in .3s var(--ease); }
.contacto { padding-top: clamp(64px, 8vw, 104px) !important; padding-bottom: clamp(64px, 8vw, 104px) !important; }

/* Redes en Contacto: dos botones lado a lado, alineados con "Escribir un mensaje" */
.contacto-side { gap: 10px; }
.contacto-side .redes-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border-top: none;
}
.contacto-side .red-logo {
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--pink-mid);
  border-bottom: 1px solid var(--pink-mid);
  border-radius: var(--r-control);
  background: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.contacto-side .red-logo-icon { width: 38px; height: 38px; border-color: transparent; background: var(--pink-soft); }
.contacto-side .red-logo svg { width: 19px; height: 19px; }
.contacto-side .red-logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contacto-side .red-logo:hover,
.contacto-side .red-logo:focus-visible { background: var(--card); border-color: var(--pink-deep); }
.contacto-side .red-logo:hover .red-logo-text { text-decoration: none; }
@media (max-width: 420px) {
  .contacto-side .redes-logos { grid-template-columns: 1fr; }
}

/* =====================================================================
   Sobre mí: fotos de Karen que se van cambiando (fundido)
   ===================================================================== */
.sobre-mi-media { width: 100%; max-width: 440px; margin: 0 auto; }
.sobre-mi-slides {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--pink-mid);
}
.sobre-mi-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.1s var(--ease), transform 6s linear;
}
.sobre-mi-slides img.is-active { opacity: 1; transform: scale(1); }
.slides-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.slides-dots { display: flex; gap: 4px; }
.slides-dots button {
  width: 32px; height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.slides-dots button::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--pink-deep);
  opacity: .45;
  transition: width .3s var(--ease), opacity .3s var(--ease);
}
.slides-dots button.is-active::before { width: 22px; opacity: 1; }
.slides-pause {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--pink-deep);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.slides-pause svg { width: 14px; height: 14px; }
.slides-pause .ic-play { display: none; }
.slides-pause.is-paused .ic-play { display: block; }
.slides-pause.is-paused .ic-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sobre-mi-slides img { transition: opacity .01ms; transform: none !important; }
}
@media (max-width: 1100px) { .sobre-mi-media { max-width: 400px; } }
@media (max-width: 480px) { .sobre-mi-media { max-width: 100%; } }

/* Foto de blusa azul: viene de un círculo de Instagram, se muestra como círculo sobre el rosa */
.sobre-mi-slides img.is-circle {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 78%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-position: 50% 50%;
  translate: -50% -50%;
}

/* =====================================================================
   Motivos de consulta: tarjetas de color compactas
   ===================================================================== */
.motivos-grid { gap: 10px !important; }
.motivo-card {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 10px;
  min-height: 0 !important;
  padding: 20px 20px 22px !important;
  border-radius: var(--r-card) !important;
}
.motivo-card .motivo-icon {
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
}
.motivo-card .motivo-icon svg { width: 18px !important; height: 18px !important; }
.motivo-card h3 {
  margin: 0 !important;
  font-size: clamp(21px, 1.8vw, 24px) !important;
  line-height: 1.1 !important;
}
.motivo-card p {
  grid-column: 1 / -1;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
@media (max-width: 768px) {
  .motivos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .motivo-card { grid-template-columns: 1fr; padding: 16px 14px 18px !important; row-gap: 8px; }
  .motivo-card .motivo-icon { width: 32px !important; height: 32px !important; }
  .motivo-card h3 { font-size: 19px !important; }
  .motivo-card p { font-size: 13px !important; }
}
.motivo-card { align-content: start; }

/* =====================================================================
   Mapa propio (js/mapa.js · MapLibre + OpenFreeMap)
   ===================================================================== */
.mapa { position: relative; width: 100%; height: 100%; background: #F2EBE0; font-family: var(--font-ui); }
.mapa-respaldo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--primary) !important; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
}
.mapa.is-ready .mapa-respaldo { display: none; }
.mapa .maplibregl-canvas { outline: none; }
.mapa .maplibregl-ctrl-group { border-radius: var(--r-control); box-shadow: none; border: 1px solid var(--line-strong); overflow: hidden; }
.mapa .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.mapa .maplibregl-ctrl-attrib { font-size: 11px; background: rgba(250, 246, 240, 0.85); }
.mapa .maplibregl-cooperative-gesture-screen { background: rgba(21, 64, 55, 0.55); font-family: var(--font-ui); font-size: 16px; }

.mapa-pin { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.mapa-pin-label {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--primary-deep);
  color: #FAF6F0;
  font-size: 13px; line-height: 1.25; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(21, 64, 55, 0.25);
  position: relative;
}
.mapa-pin-label strong {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-mid);
}
.mapa-pin-label::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; margin-left: -5px;
  background: var(--primary-deep); transform: rotate(45deg);
}
.mapa-pin-dot {
  position: relative;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pink-deep);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.mapa-pin-dot::after {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%; border: 2px solid var(--pink-deep);
  animation: mapa-pulso 2.4s ease-out infinite;
}
@keyframes mapa-pulso { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mapa-pin-dot::after { animation: none; display: none; } }

/* Crédito del sitio en el pie */
.footer-bottom .credito { display: block; margin-top: 6px; font-size: 12px; opacity: .75; }

/* Texto rosa legible: #E89999 solo alcanzaba 2.2:1; #B0485C da 5.4:1 en blanco y 5:1 en crema */
:root { --pink-text: #B0485C; }
.specialties,
.info-head .specialties,
.page-banner .eyebrow { color: var(--pink-text) !important; }

/* =====================================================================
   Frases de motivación (cambian solas)
   ===================================================================== */
.frases { background: var(--pink-soft); padding: clamp(64px, 9vw, 112px) 24px; }
.frases-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.frases-carrusel { position: relative; margin-top: 18px; }
.frases-comilla {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 110px);
  line-height: .6;
  height: .45em;
  margin-bottom: 4px;
  color: var(--pink-deep);
}
.frases-lista { display: grid; }
.frase {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.frase.is-active { opacity: 1; transform: none; pointer-events: auto; }
.frase p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--primary-deep);
  text-wrap: balance;
}
.frases-controles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 40px);
}
.frases-flecha {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--primary-deep);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.frases-flecha:hover { background: var(--pink-mid); }
.frases-flecha svg { width: 18px; height: 18px; }
.frases-dots { display: flex; }
.frases-dots button {
  width: 22px; height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.frases-dots button::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--pink-deep);
  opacity: .45;
  transition: width .3s var(--ease), opacity .3s var(--ease);
}
.frases-dots button.is-active::before { width: 18px; opacity: 1; }
.frases-pausa { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) {
  .frase { transition: opacity .01ms; transform: none; }
}
@media (max-width: 480px) {
  .frases-dots button { width: 16px; }
  .frases-flecha { width: 36px; height: 36px; }
}


/* =====================================================================
   Frases como cuadro "Mind · Body · Soul" (como los del consultorio)
   ===================================================================== */
.frases { background: var(--bg-soft); }
.frases-inner {
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  text-align: left;
}
.frases-nota { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 34ch; }
.frases-nota em { font-family: var(--font-display); font-size: 1.15em; color: var(--ink); }

.cuadro {
  margin: 0;
  justify-self: center;
  width: min(420px, 100%);
  padding: 14px;                       /* marco blanco */
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 22px 40px -18px rgba(70, 40, 30, 0.35), 0 2px 6px rgba(70, 40, 30, 0.06);
}
.cuadro-paspartu {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #F4F1EC;
  overflow: hidden;
  display: grid;
}
.aura {
  position: absolute;
  left: 50%; top: 58%;
  width: 78%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.aura-mente  { background: radial-gradient(circle, #E23E6B 0%, #EE7393 38%, #F7B3C2 66%, rgba(244,241,236,0) 74%); }
.aura-cuerpo { background: radial-gradient(circle, #EC5FA4 0%, #F29BAE 30%, #F6B98E 56%, rgba(244,241,236,0) 74%); }
.aura-alma   { background: radial-gradient(circle, #E8607A 0%, #F08A6E 34%, #F6B489 60%, rgba(244,241,236,0) 74%); }
.cuadro[data-tema="mente"]  .aura-mente,
.cuadro[data-tema="cuerpo"] .aura-cuerpo,
.cuadro[data-tema="alma"]   .aura-alma { opacity: .95; }

.cuadro .frases-lista { position: relative; z-index: 1; display: grid; }
.cuadro .frase {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11% 12% 0;
  text-align: center;
  transform: none;
}
.frase-tema {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 40px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.cuadro .frase p {
  margin-top: auto;
  margin-bottom: 12%;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  color: #2A1F1F;
  text-shadow: 0 0 18px rgba(255, 245, 240, 0.85);
}
@media (prefers-reduced-motion: reduce) { .aura { transition: none; } }
@media (max-width: 768px) {
  .frases-inner { grid-template-columns: 1fr; text-align: center; }
  .frases-nota { margin-left: auto; margin-right: auto; }
  .cuadro { width: min(340px, 100%); padding: 11px; }
}
.frases-texto .section-title { margin: 12px 0 0; }

/* Cuadro: frase debajo de la palabra (no pegada al borde inferior); aura más abajo, como fondo */
.cuadro .frase { padding: 12% 11% 0; justify-content: flex-start; }
.cuadro .frase p { margin-top: 7%; margin-bottom: 0; }
.aura { top: 66%; width: 72%; }

/* Cuadro: frase en blanco, al centro del aura (como un póster) */
.aura { top: 58%; width: 82%; }
.cuadro .frase p {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 62%;
  translate: -50% -50%;
  margin: 0;
  font-weight: 500;
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.22;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(110, 25, 45, 0.35), 0 2px 14px rgba(110, 25, 45, 0.45);
}
@media (max-width: 768px) {
  .cuadro .frase p { width: 66%; font-size: 21px; }
}

/* Cuadro más realista: marco con grosor, paspartú con corte, reflejo de vidrio y sombra de pared */
.cuadro {
  position: relative;
  padding: 12px;                                   /* marco */
  background: linear-gradient(145deg, #FFFFFF 0%, #F6F4F1 100%);
  box-shadow:
    0 0 0 1px rgba(60, 40, 30, 0.10),               /* orilla exterior del marco */
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),       /* canto de luz */
    inset 0 -2px 4px rgba(60, 40, 30, 0.08),        /* grosor del marco */
    0 30px 50px -24px rgba(70, 40, 30, 0.45),       /* sombra en la pared */
    0 6px 14px rgba(70, 40, 30, 0.08);
}
.cuadro-paspartu {
  background: #F7F4EE;                              /* paspartú */
  padding: 7%;
  box-shadow: inset 0 2px 5px rgba(60, 40, 30, 0.12);   /* el marco proyecta sombra hacia dentro */
}
.cuadro-lamina {
  position: relative;
  height: 100%;
  background: #F4F1EC;
  overflow: hidden;
  display: grid;
  box-shadow: 0 0 0 1px rgba(60, 40, 30, 0.10), inset 0 1px 2px rgba(60, 40, 30, 0.10); /* corte del cartón */
}
.cuadro::after {                                    /* reflejo del vidrio */
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.22) 46%, rgba(255,255,255,0) 58%);
}
.cuadro { width: min(460px, 100%); }
.cuadro-paspartu { padding: 5.5%; }
.cuadro .frase p { width: 68%; }
@media (max-width: 768px) {
  .cuadro { width: min(360px, 100%); padding: 10px; }
  .cuadro::after { inset: 10px; }
  .cuadro .frase p { width: 72%; font-size: 20px; }
}

/* =====================================================================
   Accesibilidad (auditoría Lighthouse)
   ===================================================================== */
/* Pestañas inactivas: #A89999 daba 2.7:1; ahora 6:1 */
.tab, .info-tab, .modality-tab { color: var(--ink-soft) !important; }
.tab.active, .info-tab.active, .modality-tab.active { color: var(--primary) !important; }
/* Crédito del pie: legible sobre el verde (antes 4.1:1) */
.footer-bottom .credito { opacity: 1; color: rgba(244, 239, 231, 0.78); }
/* Los títulos cambiaron de nivel (h3→h2, h4→h3) sin cambiar su aspecto */
h2.name { margin: 0; }
.footer-col h3, .trust-block h3 { margin-top: 0; }

/* =====================================================================
   Credencial verificable (sustituye la palomita genérica)
   ===================================================================== */
.verified { display: none !important; }
.avatar-big::after { display: none !important; }
.cedula-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--primary-soft);
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-deep) !important;
  font-size: 12.5px;
  line-height: 1.2;
  text-decoration: none !important;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.cedula-chip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }
.cedula-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cedula-num strong { font-weight: 500; letter-spacing: 0.04em; }
.cedula-verificar {
  padding-left: 8px;
  border-left: 1px solid var(--primary-soft);
  font-weight: 600;
}
.cedula-chip:hover { background: var(--primary-soft); border-color: var(--primary); }
.cedula-chip:hover .cedula-verificar { text-decoration: underline; text-underline-offset: 3px; }

/* Frases: salida más rápida que la entrada para que no se encimen */
.cuadro .frase { transition: opacity .45s ease-in; }
.cuadro .frase.is-active { transition: opacity .8s var(--ease); }
/* Cursiva del título sobre fondo verde: rosa claro (el verde no se veía sobre verde) */
.agendar .section-title em { color: var(--pink-mid); }

/* =====================================================================
   Agendar en celular: "con quién agendas" compacto arriba del formulario
   (en computadora la tarjeta completa ya está al lado, así que se oculta)
   ===================================================================== */
.form-profesional { display: none; }
@media (max-width: 1000px) {
  .form-profesional {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--card);
  }
  .form-profesional img {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--line-strong);
  }
  .fp-nombre { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.1; }
  .fp-rol {
    margin: 3px 0 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
  }
  .fp-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
  .fp-datos .cedula-chip { margin-top: 0; }
  .fp-datos .google-rating { font-size: 12.5px; }
  /* la tarjeta de abajo ya no repite foto, nombre, cédula y reseñas */
  .left-col .info-head { display: none; }
  .left-col .info-tabs { margin-top: 0; }
}
.cedula-chip, .cedula-num, .cedula-verificar { white-space: nowrap; }
@media (max-width: 1000px) {
  .form-profesional { align-items: flex-start; }
  .fp-rol { letter-spacing: 0.06em; }
}

/* =====================================================================
   Agendar · pestañas de información con identidad propia
   ===================================================================== */
/* Control segmentado en lugar de pestañas subrayadas */
.info-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 4px;
  margin-top: 22px;
  border: none !important;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow-x: auto;
}
.info-tab {
  flex: 1 0 auto;
  padding: 9px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px;
  font-size: 13.5px !important;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.info-tab:hover { color: var(--ink) !important; }
.info-tab.active {
  background: var(--card);
  color: var(--primary-deep) !important;
  box-shadow: 0 1px 2px rgba(60, 40, 30, 0.08), 0 0 0 1px var(--line);
}
.tab-panel { padding-top: 26px !important; }

/* Etiqueta pequeña reutilizable */
.tp-label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}

/* Sobre mí */
.tab-panel .tp-lead {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tp-lead em { color: var(--primary); }
#tab-sobre .tp-label { margin-top: 22px; }
.tp-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-areas li {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink);
}
.tp-areas li:nth-child(4n+1) { background: var(--pink-soft); }
.tp-areas li:nth-child(4n+2) { background: var(--primary-tint); color: var(--primary-deep); }
.tp-areas li:nth-child(4n+3) { background: var(--bg-soft); }
.tp-areas li:nth-child(4n+4) { background: var(--primary-soft); color: var(--primary-deep); }

/* Servicios y precios */
.tp-precios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tp-precio {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--bg-soft);
}
.tp-precio:last-child { background: var(--primary-tint); }
.tp-precio strong { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.1; color: var(--ink); }
.tp-monto {
  margin: 14px 0 4px;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary-deep);
  font-variant-numeric: tabular-nums;
}
.tp-precio small { font-size: 13px; color: var(--ink-soft); }
.tab-panel .tp-nota { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-soft); }

/* Modalidad */
.tp-datos { margin: 0; border-top: 1px solid var(--line-strong); }
.tp-datos > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-strong);
}
.tp-datos dt {
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.tp-datos dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }

@media (max-width: 480px) {
  .tp-precios { grid-template-columns: 1fr; }
  .tp-datos > div { grid-template-columns: 1fr; gap: 4px; }
  .info-tab { padding: 8px 12px !important; font-size: 13px !important; }
}
.tab-panel .tp-label { font-size: 11px; line-height: 1.4; }
.tab-panel ul.tp-areas { padding: 0; margin: 0; }
.tab-panel ul.tp-areas li { margin: 0; }
@media (max-width: 480px) {
  /* las 4 pestañas visibles sin desplazarse: 2 × 2 */
  .info-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 16px; overflow: visible; }
  .info-tab { border-radius: 12px; text-align: center; }
}

/* =====================================================================
   Agendar · "carta" de Karen (sin pestañas, píldoras ni tarjetas)
   ===================================================================== */
.carta { padding-top: 26px; max-width: 60ch; }
.carta p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--ink); }
.carta .carta-saludo {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.carta em {
  font-family: var(--font-display);
  font-size: 1.12em;
  font-style: italic;
  color: var(--primary-deep);
}
.carta-sub {
  margin: 34px 0 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.carta-datos { margin: 0; }
.carta-datos > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.carta-datos dt {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-soft);
}
.carta-datos dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.carta-opiniones .opinion {
  padding: 14px 0;
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: none !important;
}
.carta-opiniones .opinion-stars { display: none; }
.carta-opiniones .opinion-text { font-size: 18px; color: var(--ink); }
.carta-opiniones .opinion-author { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 480px) {
  .carta-datos > div { grid-template-columns: 1fr; gap: 2px; }
  .carta .carta-saludo { font-size: 27px; }
}

/* =====================================================================
   Agendar · perfil en bloque verde con aura (opción B)
   ===================================================================== */
.info-card.perfil-verde {
  position: relative;
  overflow: hidden;
  padding: 40px 36px 34px !important;
  background: var(--primary-deep) !important;
  border: none !important;
  color: #F4EFE7;
}
.pv-aura {
  position: absolute;
  right: -110px; top: -110px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, #EC5FA4 0%, #F29BAE 35%, #F6B98E 58%, rgba(21, 64, 55, 0) 72%);
  filter: blur(18px);
  opacity: .7;
  pointer-events: none;
}
.perfil-verde > *:not(.pv-aura) { position: relative; }
.pv-top { display: flex; gap: 18px; align-items: center; }
.pv-top img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(244, 239, 231, 0.4); flex-shrink: 0; }
.pv-top h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; color: #FAF6F0; letter-spacing: -0.01em; }
.pv-rol { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: rgba(244, 239, 231, 0.72); }
.pv-confianza { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.perfil-verde .cedula-chip { margin: 0; background: rgba(244, 239, 231, 0.10); border-color: rgba(244, 239, 231, 0.25); color: #F4EFE7 !important; }
.perfil-verde .cedula-chip svg { color: var(--pink-mid); }
.perfil-verde .cedula-verificar { border-left-color: rgba(244, 239, 231, 0.25); }
.perfil-verde .cedula-chip:hover { background: rgba(244, 239, 231, 0.18); border-color: rgba(244, 239, 231, 0.45); }
.perfil-verde .google-rating, .perfil-verde .google-rating strong { color: #F4EFE7 !important; }
.perfil-verde .google-rating span:last-child { color: rgba(244, 239, 231, 0.75); }
.pv-frase { margin: 32px 0 14px; font-family: var(--font-display); font-style: italic; font-size: clamp(27px, 2.6vw, 32px); line-height: 1.18; color: #FAF6F0; }
.pv-frase em { color: var(--pink-mid); }
.pv-texto { margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: rgba(244, 239, 231, 0.82); }
.pv-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(244, 239, 231, 0.2); }
.pv-grid > div { padding: 15px 0; border-bottom: 1px solid rgba(244, 239, 231, 0.2); }
.pv-grid > div:nth-child(odd) { padding-right: 16px; border-right: 1px solid rgba(244, 239, 231, 0.2); }
.pv-grid > div:nth-child(even) { padding-left: 18px; }
.pv-grid dt { font-family: var(--font-display); font-size: 25px; line-height: 1.1; color: #FFFFFF; }
.pv-grid dd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(244, 239, 231, 0.7); }
.pv-resenas { display: inline-block; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--pink-mid) !important; text-decoration: underline; text-underline-offset: 4px; }
.pv-resenas:hover { color: #FAF6F0 !important; }
@media (max-width: 1000px) {
  /* arriba del formulario ya se muestra foto, nombre, cédula y reseñas */
  .pv-top, .pv-confianza { display: none; }
  .pv-frase { margin-top: 0; }
}
@media (max-width: 480px) {
  .info-card.perfil-verde { padding: 30px 22px 26px !important; }
  .pv-aura { width: 260px; height: 260px; right: -100px; top: -100px; }
  .pv-grid dt { font-size: 21px; }
}

/* Opiniones desplegables dentro del bloque verde */
.pv-opiniones { margin-top: 24px; border-top: 1px solid rgba(244, 239, 231, 0.2); }
.pv-opiniones summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 12px 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: #FAF6F0;
  cursor: pointer;
}
.pv-opiniones summary::-webkit-details-marker { display: none; }
.pv-mas { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.pv-mas::before, .pv-mas::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; margin-top: -0.75px; background: var(--pink-mid);
  transition: transform .3s var(--ease);
}
.pv-mas::after { transform: rotate(90deg); }
.pv-opiniones[open] .pv-mas::after { transform: rotate(0deg); }
.pv-opiniones summary:hover { color: var(--pink-mid); }
.pv-opiniones-lista { padding-bottom: 6px; animation: bc-in .3s var(--ease); }
.pv-opinion { margin: 0; padding: 16px 0; border-top: 1px solid rgba(244, 239, 231, 0.14); }
.pv-opinion blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  color: #FAF6F0;
}
.pv-opinion blockquote::before { content: '“'; color: var(--pink-mid); }
.pv-opinion blockquote::after { content: '”'; color: var(--pink-mid); }
.pv-opinion figcaption { margin-top: 6px; font-size: 13px; color: rgba(244, 239, 231, 0.65); }
.pv-opiniones + .pv-resenas { margin-top: 10px; }

/* Números alineados (Cormorant usa números "antiguos" que suben y bajan: el 1 parecía una I) */
.pv-grid dt, .tp-monto, .service-row strong, .service-item-price, .bc-month,
.cedula-num, .bc-next-value, .bc-confirm-value, .carta-datos dd {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}