/* ==========================================================================
   Dr. Federico Aiello — Sistema de diseño (plantilla TOROLAB)
   Estética sobria de agencia boutique: base off-white/carbón (estructura,
   botones, datos), cero gradientes, cero tarjetas flotantes con sombra,
   maquetación basada en divisores de 1px. Un único acento cálido (terracota)
   reservado para los momentos emocionales del copy (miedos, proceso, reseñas)
   — separa esto de un consultorio "celeste genérico" sin caer en el
   monocromo puro, que para un negocio de salud puede leer frío. Los datos/
   CTAs se quedan en carbón puro a propósito, para que el conjunto siga
   leyendo "clínico-limpio" y no "spa" (ver README → Decisiones de diseño).
   ========================================================================== */

:root {
  --bg: #faf9f6;
  --bg-alt: #f2f1ec;
  --ink: #111111;
  --ink-muted: #63625d;
  --border: #dedcd4;
  --surface: #ffffff;
  --invert-bg: #111111;
  --invert-ink: #faf9f6;
  --accent: #9c4a2b;
  --accent-hover: #7c3a20;

  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 3px;
  --container-max: 1120px;
  --tap-min: 48px;
}

/* ---------- Reset base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.1rem);
}
h2 {
  font-size: clamp(1.5rem, 2.2vw + 1rem, 2.1rem);
}
h3 {
  font-size: 1.25rem;
  font-weight: 700;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--ink);
}

ul {
  padding-left: 0;
  list-style: none;
  margin: 0;
}

button {
  font-family: inherit;
}

/* Foco de teclado siempre visible (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}

section:last-of-type {
  border-bottom: none;
}

.section-alt {
  background: var(--bg-alt);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-size: 0.8rem;
  margin-bottom: 0.6em;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--tap-min);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn:active {
  opacity: 0.85;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: #2b2b2b;
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  font-size: 18px;
  padding: 16px 32px;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-header--scrolled {
  border-color: var(--border);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-header .brand {
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.location-label {
  font-size: 0.9rem;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero .container {
  display: grid;
  gap: 40px;
  align-items: center;
  grid-template-columns: 1fr;
  padding-top: 24px;
}

.hero-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.hero-media-note {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 8px;
}

.hero h1 {
  margin-bottom: 0.6em;
  font-size: clamp(1.4rem, 1.6vw + 1.1rem, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- Tratamiento VSL (placeholder de video en el hero) ---------- */

.video-frame {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.16);
  pointer-events: none;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  min-height: 0;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.55);
  border: 2px solid rgba(250, 249, 246, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  cursor: pointer;
}

.video-play-btn:hover {
  background: rgba(17, 17, 17, 0.75);
}

.video-play-btn svg {
  margin-left: 3px; /* centrado óptico del triángulo de play */
}

.video-duration-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(17, 17, 17, 0.72);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

/* ---------- Carta personal (reemplaza miedos + bio institucional) ---------- */

.letter {
  max-width: 68ch;
}

.letter p {
  margin-bottom: 1.3em;
}

.letter-signature {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.letter-signature .signature-name {
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
}

.letter-signature .signature-credentials {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

/* Listas con viñeta dentro de bloques de copy (nunca tildes verdes: ver sistema de diseño) */
.bullet-list {
  list-style: disc;
  padding-left: 1.2em;
  color: var(--ink-muted);
  max-width: 68ch;
}
.bullet-list li {
  margin-bottom: 0.5em;
}
.bullet-list strong {
  color: var(--ink);
}

.qualify-label {
  font-size: 1.05rem;
  margin: 28px 0 4px;
}
.qualify-label:first-of-type {
  margin-top: 20px;
}

.muted-tag {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* ---------- Mecanismo: lista de resultados posibles ---------- */

.outcome-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border-top: 1px solid var(--border);
  max-width: 68ch;
}
.outcome-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.outcome-list h3 {
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}
.outcome-list p {
  color: var(--ink-muted);
  margin: 0;
}

.subhead {
  font-size: 1.15rem;
  color: var(--ink-muted);
  max-width: 46ch;
}

.hero-cta-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin-top: 12px;
  max-width: 42ch;
}

/* ---------- Barra de credibilidad ---------- */

.credibility-bar ul {
  display: flex;
  flex-direction: column;
}

.credibility-bar li {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.credibility-bar li:last-child {
  border-bottom: none;
}

.stat-number {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink);
  white-space: nowrap;
}

.stat-label {
  color: var(--ink-muted);
  font-size: 0.98rem;
}

/* ---------- Miedos ---------- */

.fear-block {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin-bottom: 28px;
}
.fear-block:last-child {
  margin-bottom: 0;
}

.fear-question {
  font-style: normal;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.4em;
  color: var(--ink);
}

/* ---------- Proceso ---------- */

.process-list {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-top: 32px;
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.process-number {
  font-weight: 800;
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}

.process-step h3 {
  margin-bottom: 0.3em;
}

.process-step p {
  color: var(--ink-muted);
  margin: 0;
}

/* ---------- Consultorio ---------- */

.office-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}

.office-photo img {
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.office-photo figcaption {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

/* ---------- Reseñas ---------- */

.review-list {
  margin-top: 8px;
  border-top: 1px solid var(--border);
}

.review-item {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
}

.review-stars {
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 10px;
  font-size: 1rem;
}

.review-quote {
  color: var(--ink);
  margin-bottom: 10px;
}

.review-author {
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.review-note {
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin-top: 20px;
}

/* ---------- FAQ ---------- */

.faq-list {
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: var(--tap-min);
}

.faq-question .faq-icon {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.faq-item--open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  color: var(--ink-muted);
}

.faq-item--open .faq-answer {
  max-height: 320px;
}

.faq-answer-inner {
  padding: 0 4px 22px;
}

/* ---------- CTA final (única sección invertida: carbón / off-white) ---------- */

.cta-final {
  background: var(--invert-bg);
  color: var(--invert-ink);
}

.cta-final h2,
.cta-final p {
  color: var(--invert-ink);
}

.cta-final .container {
  display: grid;
  gap: 24px;
  text-align: left;
}

.cta-final .hero-cta-note {
  color: rgba(250, 249, 246, 0.7);
}

/* Regla anti-bug de contraste: cualquier elemento dentro de la sección
   invertida fija su propio texto/borde explícitamente, nunca hereda. */
.cta-final .btn-primary {
  background: var(--invert-ink);
  color: var(--invert-bg);
  border-color: var(--invert-ink);
}
.cta-final .btn-primary:hover {
  background: #e7e5df;
}
.cta-final .btn-secondary {
  color: var(--invert-ink);
  border-color: var(--invert-ink);
}
.cta-final .btn-secondary:hover {
  background: var(--invert-ink);
  color: var(--invert-bg);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg);
  padding: 40px 0;
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 0 0 8px;
}

.site-footer .disclaimer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ---------- Barra sticky mobile ---------- */

.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.mobile-sticky-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  min-height: var(--tap-min);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
}

.mobile-sticky-bar .sticky-whatsapp {
  background: var(--ink);
  color: var(--bg);
}

.mobile-sticky-bar .sticky-call {
  background: var(--surface);
  color: var(--ink);
  border-left: 1px solid var(--border);
}

body {
  padding-bottom: 72px; /* deja lugar a la barra sticky mobile */
}

@media (min-width: 860px) {
  .mobile-sticky-bar {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Formulario / campos — usados dentro del funnel (fondo siempre claro)
   ========================================================================== */

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}

.field input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 12px 16px;
  font-size: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink); /* explícito: nunca heredar color de texto del contenedor padre */
}

.field input:focus {
  border-color: var(--ink);
}

.field--error input {
  border-color: var(--ink);
  border-width: 2px;
}

.field-error {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: 6px;
  min-height: 1.2em;
}

.field-error:not(:empty)::before {
  content: "— ";
}

.field-hint {
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

/* ---------- Radio cards (preguntas de filtro) ---------- */

.radio-group {
  display: flex;
  flex-direction: column;
  margin: 16px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding: 16px;
  cursor: pointer;
  font-size: 1rem;
  min-height: var(--tap-min);
}

.radio-group .radio-card:last-child {
  border-bottom: none;
}

.radio-card:hover {
  background: var(--bg-alt);
}

.radio-card input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 2px;
  accent-color: var(--ink);
}

.radio-card input[type="radio"]:checked + span {
  font-weight: 700;
}

.radio-card:has(input:checked) {
  background: var(--bg-alt);
}

/* ==========================================================================
   Overlay del funnel
   ========================================================================== */

.funnel-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(17, 17, 17, 0.6);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 0;
}

.funnel-overlay[hidden] {
  display: none;
}

.funnel-container {
  background: var(--bg);
  color: var(--ink); /* explícito: el overlay nunca debe heredar blanco de ningún ancestro */
  width: 100%;
  min-height: 100dvh;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  position: relative;
}

@media (min-width: 700px) {
  .funnel-container {
    min-height: auto;
    margin: 40px auto;
    border: 1px solid var(--border);
  }
}

.funnel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.funnel-progress {
  color: var(--ink-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.funnel-step h2 {
  margin-bottom: 8px;
}

.funnel-step-intro {
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.filter-question {
  margin-bottom: 32px;
}

.filter-question h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.filter-question-optional-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- Paso 3: agendamiento (embed Cal.com / selector nativo) ---------- */

#booking-embed {
  min-height: 560px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.booking-loading {
  text-align: center;
  color: var(--ink-muted);
  padding: 60px 0;
}

.native-booking {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.native-booking-days {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.native-booking-day {
  flex: 1 0 auto;
  padding: 14px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  min-height: var(--tap-min);
}

.native-booking-day:last-child {
  border-right: none;
}

.native-booking-day[aria-selected="true"] {
  background: var(--ink);
  color: var(--bg);
}

.native-booking-times {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding: 20px;
}

.native-booking-time {
  padding: 12px;
  min-height: var(--tap-min);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.native-booking-time:hover {
  border-color: var(--ink);
}

.native-booking-time[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.native-booking-confirm {
  padding: 20px;
  border-top: 1px solid var(--border);
}

.native-booking-summary {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 14px;
}

/* ==========================================================================
   Responsive: desktop (≥860px) — 2 columnas en hero y sección final
   ========================================================================== */

@media (min-width: 860px) {
  .hero .container {
    grid-template-columns: 1fr 1fr;
  }
  .hero-media {
    order: 2;
  }

  .process-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
  }

  .office-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .credibility-bar ul {
    flex-direction: row;
    justify-content: space-between;
  }
  .credibility-bar li {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 0 24px;
    flex: 1;
  }
  .credibility-bar li:last-child {
    border-right: none;
  }

  .cta-final .container {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    text-align: left;
  }
}

@media (min-width: 640px) {
  .office-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}