/*
  Smile Again — Web pública (W1.1)
  Autorización de Rafael: "Usar los tokens existentes de Smile Again. No
  crear un segundo design system. Está permitido agregar únicamente
  clases/tokens específicos de marketing cuando hagan falta."

  Este archivo NO redefine ninguna variable de :root ni toca ningún
  selector de public/styles.css — solo agrega clases nuevas, todas con el
  prefijo "sa-pub-", usadas exclusivamente por src/web/pages/publicHome.js
  (servido por el proceso independiente src/publicServer.js). Ninguna
  pantalla de Smile Again OS/Portal/Patient carga este archivo, así que no
  hay riesgo de que estas reglas afecten algo ya existente.

  Se reutilizan tal cual: --sa-support-000/--sa-panel-100 (fondos),
  --sa-ink-900/--sa-ink-800 (oscuro, máx. 1 bloque por sección),
  --sa-accent/--sa-accent-hover/--sa-accent-wash (rosa, solo acento),
  --sa-pink-600 (rosa oscurecido, texto con contraste AA), --sa-border
  (bordes de 1px), --sa-radius-* y --sa-font-display/--sa-font-body de
  public/styles.css. Sin sombras difusas en ningún selector de este
  archivo — la jerarquía se resuelve con borde + color de fondo, igual que
  el resto del sistema.
*/

.sa-pub-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.sa-pub-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 250, 250, 0.86);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--sa-border);
}
.sa-pub-header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 20px; }

/* Corrección de scroll bajo header sticky (refinamiento visual W1.1,
   segunda pasada, punto 5): sin este ajuste, al navegar a #pacientes,
   #odontologos o #como-funciona, el header sticky de 68px tapa el
   principio de la sección. Se resuelve 100% con CSS (scroll-margin-top),
   sin ningún JS — el navegador ya lo respeta nativamente al hacer scroll
   a un ancla. 84px = 68px de header + ~16px de aire, para que el título
   quede visible completo apenas debajo del header. */
/* W1.2: se agregan #buscador (target del CTA "Encontrar un profesional" de
   /pacientes) y #faq-pacientes/#faq-odontologos (target eventual de algún
   link directo a la FAQ) a la misma regla — mismo criterio que W1.1. */
#pacientes, #odontologos, #como-funciona, #buscador, #faq-pacientes, #faq-odontologos { scroll-margin-top: 84px; }
.sa-pub-logo { display: flex; align-items: center; text-decoration: none; color: var(--sa-ink-900); }
.sa-pub-logo:hover { text-decoration: none; }

/* Refinamiento visual W1.1 (autorización de Rafael): el wordmark completo
   ("smile again" + arco + puntos, mismo asset que ya usan los emails
   transaccionales) reemplaza el ícono chico + texto genérico — más
   presencia de marca sin agrandar la altura del header (sigue en 68px).
   38px de alto es ~46% más grande que el ícono de 26px que había antes —
   dentro del rango 35–50% pedido. */
.sa-pub-logo-mark { display: block; height: 38px; width: auto; }

/* Microanimación de entrada: una sola vez, ~650ms, se apaga por completo
   si el usuario pidió menos movimiento (fuera de este @media no hay
   ninguna propiedad "animation", así que el logo aparece estático de
   entrada — no hace falta ninguna otra regla para respetar
   prefers-reduced-motion). No es un "dibujado" de trazo (eso exigiría
   recrear el logo como SVG vectorial, y no tenemos la fuente vectorial
   fiel al manual disponible en este entorno para hacerlo sin arriesgar
   una reproducción infiel) — es una entrada de fade + escala + una leve
   subida, aplicada al lockup completo tal como es hoy. */
@media (prefers-reduced-motion: no-preference) {
  .sa-pub-logo-mark { animation: sa-pub-logo-in 650ms cubic-bezier(.19,1,.22,1) both; }
}
@keyframes sa-pub-logo-in {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sa-pub-nav { display: flex; align-items: center; gap: 28px; }
.sa-pub-nav a { font-family: var(--sa-font-body); font-weight: 600; font-size: 14px; color: var(--sa-titan-600); text-decoration: none; }
.sa-pub-nav a:hover { color: var(--sa-ink-900); text-decoration: none; }
.sa-pub-header-actions { display: flex; align-items: center; gap: 10px; }

/* Ingresar: <details>/<summary> nativo — sin JS, coherente con la CSP
   (script-src 'self', sin inline handlers) y con el patrón ya usado en
   collapsibleCard() del resto del proyecto. */
.sa-pub-login-dd { position: relative; }
.sa-pub-login-dd summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  font-family: var(--sa-font-display); font-weight: 700; font-size: 13.5px; color: var(--sa-ink-900);
  padding: 9px 16px; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md);
  background: var(--sa-panel-100);
}
.sa-pub-login-dd summary::-webkit-details-marker { display: none; }
.sa-pub-login-dd summary:hover { background: var(--sa-sunken-150); }
.sa-pub-login-dd[open] summary { border-color: var(--sa-ink-900); }
.sa-pub-login-dd-panel {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  background: var(--sa-panel-100); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
.sa-pub-login-dd-panel a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--sa-radius-sm);
  text-decoration: none; color: var(--sa-ink-900);
}
.sa-pub-login-dd-panel a:hover { background: var(--sa-sunken-150); text-decoration: none; }
.sa-pub-login-dd-panel .sa-pub-dd-label { font-family: var(--sa-font-display); font-weight: 700; font-size: 13.5px; }
.sa-pub-login-dd-panel .sa-pub-dd-sub { font-family: var(--sa-font-body); font-weight: 400; font-size: 12px; color: var(--sa-titan-600); }

.sa-pub-cta-btn {
  font-family: var(--sa-font-display); font-weight: 700; font-size: 13.5px; color: #fff;
  background: var(--sa-accent); border: 1px solid transparent; border-radius: var(--sa-radius-md);
  padding: 9px 16px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.sa-pub-cta-btn:hover { background: var(--sa-accent-hover); text-decoration: none; }

/* Menú móvil: mismo patrón details/summary, solo visible <900px */
.sa-pub-menu-toggle { display: none; }
.sa-pub-menu-toggle summary {
  list-style: none; cursor: pointer; width: 40px; height: 40px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md);
}
.sa-pub-menu-toggle summary::-webkit-details-marker { display: none; }
.sa-pub-menu-panel {
  position: fixed; inset: 68px 0 0 0; background: var(--sa-panel-100); z-index: 39;
  padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto;
}
.sa-pub-menu-panel a {
  font-family: var(--sa-font-display); font-weight: 700; font-size: 18px; color: var(--sa-ink-900);
  text-decoration: none; padding: 14px 4px; border-bottom: 1px solid var(--sa-border); min-height: 44px; display: flex; align-items: center;
}
.sa-pub-menu-panel .sa-pub-menu-sub { font-family: var(--sa-font-body); font-weight: 400; font-size: 13px; color: var(--sa-titan-600); padding: 4px 4px 14px; border-bottom: 1px solid var(--sa-border); }

@media (max-width: 900px) {
  .sa-pub-nav { display: none; }
  .sa-pub-header-actions .sa-pub-login-dd { display: none; }
  .sa-pub-menu-toggle { display: block; }
}

/* ---------- Secciones genéricas ---------- */
.sa-pub-section { padding: 88px 0; }
.sa-pub-section-tight { padding: 56px 0; }
.sa-pub-eyebrow {
  font-family: var(--sa-font-body); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sa-pink-600); margin: 0 0 14px;
}
.sa-pub-h1 {
  font-family: var(--sa-font-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(34px, 5.4vw, 58px); margin: 0;
}
.sa-pub-h2 {
  font-family: var(--sa-font-display); font-weight: 300; letter-spacing: -0.015em; line-height: 1.15;
  font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 14px;
}
.sa-pub-lead { font-family: var(--sa-font-body); font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--sa-titan-600); margin: 0; max-width: 560px; }
.sa-pub-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.sa-pub-hero { position: relative; overflow: hidden; background: var(--sa-ink-900); padding: 76px 0 92px; }
.sa-pub-hero::before {
  content: ''; position: absolute; top: -160px; right: -160px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, var(--sa-accent) 0%, rgba(255,72,176,0) 68%);
  opacity: .28; pointer-events: none;
}
.sa-pub-hero-inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.sa-pub-hero-eyebrow { font-family: var(--sa-font-body); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--sa-titan-400); margin: 0 0 18px; }
.sa-pub-hero-title { font-family: var(--sa-font-display); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(32px, 5vw, 54px); color: #fff; margin: 0 0 22px; }
.sa-pub-hero-lead { font-family: var(--sa-font-body); font-weight: 300; font-size: 16.5px; line-height: 1.65; color: var(--sa-titan-400); margin: 0 0 32px; max-width: 460px; }
.sa-pub-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.sa-pub-btn-hero-primary {
  font-family: var(--sa-font-display); font-weight: 700; font-size: 14.5px; color: #fff;
  background: var(--sa-accent); border-radius: var(--sa-radius-md); padding: 14px 24px; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.sa-pub-btn-hero-primary:hover { background: var(--sa-accent-hover); text-decoration: none; }
.sa-pub-btn-hero-secondary {
  font-family: var(--sa-font-display); font-weight: 700; font-size: 14.5px; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--sa-radius-md);
  padding: 14px 24px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.sa-pub-btn-hero-secondary:hover { border-color: #fff; text-decoration: none; }

/* Visual del hero: composición puramente gráfica con el isotipo real (dos
   variantes de color) + formas geométricas — nunca una persona de stock,
   nunca el mockup viejo de Instagram (autorización de Rafael, W0 sección
   F.2). Animación mínima (flotación muy sutil) solo si el usuario no pidió
   reduced motion. */
.sa-pub-hero-visual { position: relative; height: 340px; display: flex; align-items: center; justify-content: center; }
.sa-pub-hero-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
}
.sa-pub-hero-ring--outer { width: 320px; height: 320px; }
.sa-pub-hero-ring--inner { width: 220px; height: 220px; border-color: rgba(255,255,255,0.22); }
.sa-pub-hero-mark { position: relative; width: 128px; height: 128px; border-radius: 50%; background: var(--sa-panel-100); display: flex; align-items: center; justify-content: center; }
.sa-pub-hero-mark img { width: 76px; height: 76px; }
.sa-pub-hero-chip {
  position: absolute; background: var(--sa-panel-100); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md);
  padding: 10px 14px; font-family: var(--sa-font-narrow); font-weight: 600; font-size: 12px; color: var(--sa-ink-900);
  display: flex; align-items: center; gap: 8px;
}
.sa-pub-hero-chip .sa-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sa-accent); display: inline-block; }
.sa-pub-hero-chip--a { top: 8px; left: -6px; }
.sa-pub-hero-chip--b { bottom: 12px; right: -10px; }

@media (prefers-reduced-motion: no-preference) {
  .sa-pub-hero-mark { animation: sa-pub-float 7s ease-in-out infinite; }
  .sa-pub-hero-ring--outer { animation: sa-pub-float 9s ease-in-out infinite reverse; }
}
@keyframes sa-pub-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 900px) {
  .sa-pub-hero-inner { grid-template-columns: 1fr; }
  .sa-pub-hero-visual { height: 240px; }
}

/* ---------- Mover tus dientes. Sin que se note. (refinamiento visual W1.1 —
   segunda pasada) ----------
   Segunda pasada (autorización de Rafael): la primera versión de esta
   sección tenía mockups estructurales grandes de Patient/Profesionales
   adentro de cada panel — "hacen que la sección se sienta más técnica y
   desordenada... quiero que el protagonista vuelva a ser el producto
   clínico, no el software". Se reemplaza por dos cards limpias: borde
   fino, blancas, ícono redondo de acento rosa (chico, secundario), mucho
   espacio, sin ninguna interfaz simulada. Sin sombras difusas — la
   jerarquía la da el borde + el fondo, igual que el resto del sistema. */
.sa-pub-experiences { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.sa-pub-exp-panel {
  min-width: 0; background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg);
  padding: 44px 40px; display: flex; flex-direction: column; gap: 16px;
  transition: border-color .3s ease, transform .3s ease;
}
.sa-pub-exp-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--sa-accent-wash); color: var(--sa-pink-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.sa-pub-exp-eyebrow { font-family: var(--sa-font-body); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-pink-600); margin: 0; }
.sa-pub-exp-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 23px; line-height: 1.25; color: var(--sa-ink-900); margin: 0; }
.sa-pub-exp-lead { font-family: var(--sa-font-body); font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--sa-titan-600); margin: 0; }
.sa-pub-track-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sa-pub-track-list li { display: flex; align-items: center; gap: 9px; font-family: var(--sa-font-body); font-weight: 600; font-size: 13.5px; color: var(--sa-ink-900); }
.sa-pub-track-list li svg { flex-shrink: 0; color: var(--sa-pink-600); }
.sa-pub-track-cta { font-family: var(--sa-font-display); font-weight: 700; font-size: 14px; color: var(--sa-pink-600); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.sa-pub-track-cta:hover { text-decoration: underline; }

/* Microinteracción hover: MUY sutil — solo con mouse real (hover:hover +
   pointer:fine), nunca en touch/mobile. Sin flex-grow, sin scale, sin
   sombra: apenas el borde pasa a rosa y el panel sube 2px. */
@media (hover: hover) and (pointer: fine) {
  .sa-pub-exp-panel:hover { border-color: var(--sa-accent); transform: translateY(-2px); }
}

@media (max-width: 820px) {
  .sa-pub-experiences { grid-template-columns: 1fr; }
  .sa-pub-exp-panel { padding: 32px 28px; }
}

/* ---------- Cómo funciona (stepper) ---------- */
.sa-pub-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sa-pub-step { position: relative; padding-top: 44px; }
.sa-pub-step-num {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--sa-ink-900); color: #fff; font-family: var(--sa-font-display); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sa-pub-step-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 14.5px; color: var(--sa-ink-900); margin: 0 0 6px; }
.sa-pub-step-desc { font-family: var(--sa-font-body); font-weight: 300; font-size: 13px; line-height: 1.5; color: var(--sa-titan-600); margin: 0; }
.sa-pub-step:not(:first-child)::before {
  content: ''; position: absolute; top: 16px; right: 100%; width: 18px; height: 1px; background: var(--sa-border);
}

@media (max-width: 900px) {
  .sa-pub-steps { grid-template-columns: 1fr 1fr; }
  .sa-pub-step:not(:first-child)::before { display: none; }
}
@media (max-width: 480px) {
  .sa-pub-steps { grid-template-columns: 1fr; }
}

/* Variante "wide" (W1.2): "Flujo profesional" de /odontologos tiene 6
   pasos en vez de 5 — una columna más en desktop. Mismos breakpoints de
   colapso (900px→2 cols, 480px→1 col) heredados de .sa-pub-steps. */
.sa-pub-steps.sa-pub-steps--wide { grid-template-columns: repeat(6, 1fr); }

/* ---------- Mockups reutilizables (W1.2) ----------
   Usados en /pacientes ("Smile Again Patient") y /odontologos ("Smile
   Again Profesionales") — nunca en la Home (la Home volvió a cards limpias
   sin mockup grande, autorización W1.1 segunda pasada). Campos verificados
   contra patientPages.js/portalCases.js/externalStatus.js — ver comentario
   en publicShared.js. Datos 100% demo. */
.sa-pub-phone-frame { width: 220px; border: 1px solid var(--sa-border); border-radius: 28px; background: var(--sa-ink-900); padding: 10px; margin: 0 auto; }
.sa-pub-phone-notch { width: 56px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); margin: 0 auto 8px; }
.sa-pub-phone-screen { background: var(--sa-panel-100); border-radius: 18px; padding: 18px 16px 16px; }
.sa-pub-phone-eyebrow { font-family: var(--sa-font-body); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--sa-pink-600); margin-bottom: 6px; }
.sa-pub-phone-aligner { font-family: var(--sa-font-display); font-weight: 300; font-size: 21px; color: var(--sa-ink-900); margin-bottom: 10px; }
.sa-pub-phone-track { height: 6px; border-radius: 3px; background: var(--sa-line-200); overflow: hidden; margin-bottom: 6px; }
.sa-pub-phone-fill { height: 100%; background: var(--sa-accent); border-radius: 3px; }
.sa-pub-phone-pct { font-family: var(--sa-font-body); font-weight: 600; font-size: 11px; color: var(--sa-titan-600); margin-bottom: 14px; }
.sa-pub-phone-next { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sa-font-body); font-size: 11.5px; color: var(--sa-titan-600); border-top: 1px solid var(--sa-border); padding-top: 12px; margin-bottom: 2px; }
.sa-pub-phone-next strong { font-family: var(--sa-font-display); font-weight: 700; font-size: 13px; color: var(--sa-ink-900); }

/* W1.2 VISUAL REFINEMENT (autorización de Rafael, punto 2 — "Smile Again
   Patient"): "el mockup actual no se percibe como interfaz: los datos del
   lado derecho parecen texto crudo... debe parecer producto real". Se
   agrega una barra de "app" arriba (marca + nombre, separada por borde) y
   una fila final con apariencia de ítem de navegación (ícono + chevron),
   más un home-indicator al pie del frame — los mismos recursos visuales
   que cualquier mockup de teléfono reconocible, sin agregar ninguna
   librería ni imagen nueva. */
.sa-pub-phone-app-bar {
  display: flex; align-items: center; gap: 7px; font-family: var(--sa-font-narrow); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--sa-titan-600);
  border-bottom: 1px solid var(--sa-border); padding-bottom: 12px; margin-bottom: 14px;
}
.sa-pub-phone-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-family: var(--sa-font-body); font-weight: 600; font-size: 11px; color: var(--sa-titan-600);
  border-top: 1px solid var(--sa-border); padding-top: 12px; margin-top: 2px;
}
.sa-pub-phone-row span { display: flex; align-items: center; gap: 7px; }
.sa-pub-phone-row span svg { color: var(--sa-pink-600); flex-shrink: 0; }
.sa-pub-phone-row > svg { color: var(--sa-titan-400); flex-shrink: 0; }
.sa-pub-phone-home-indicator { width: 64px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.28); margin: 10px auto 2px; }

.sa-pub-browser-frame { width: 100%; max-width: 320px; border: 1px solid var(--sa-border); border-radius: 14px; overflow: hidden; background: var(--sa-panel-100); margin: 0 auto; }
.sa-pub-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--sa-border); background: var(--sa-sunken-150); }
.sa-pub-browser-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sa-line-200); }
.sa-pub-browser-title { margin-left: 6px; font-family: var(--sa-font-narrow); font-weight: 600; font-size: 11px; color: var(--sa-titan-600); }
.sa-pub-browser-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sa-pub-case-row { border: 1px solid var(--sa-border); border-radius: var(--sa-radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sa-pub-case-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sa-pub-case-name { font-family: var(--sa-font-display); font-weight: 700; font-size: 12.5px; color: var(--sa-ink-900); }
.sa-pub-case-code { font-family: var(--sa-font-narrow); font-size: 10.5px; color: var(--sa-titan-400); }
.sa-pub-case-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--sa-font-body); font-weight: 700; font-size: 10.5px; color: var(--sa-pink-600); white-space: nowrap; }
.sa-pub-case-next { font-family: var(--sa-font-body); font-size: 11px; color: var(--sa-titan-600); }
.sa-pub-browser-msg { display: flex; align-items: center; gap: 6px; font-family: var(--sa-font-body); font-weight: 600; font-size: 11px; color: var(--sa-titan-600); border-top: 1px solid var(--sa-border); padding-top: 10px; margin-top: 2px; }
.sa-pub-browser-msg svg { color: var(--sa-pink-600); flex-shrink: 0; }

/* ---------- FAQ (acordeón, W1.2 — rediseñado en W1.2 VISUAL REFINEMENT) ----------
   Autorización de Rafael: mantener <details>/<summary> nativo (accesible,
   sin JS), pero diseñarlo — borde fino, padding generoso, separación clara,
   chevron propio, hover/focus sutil, sin sombras, sin triángulo nativo del
   navegador (list-style:none + ::marker vacío cubren Chrome/Safari/Firefox). */
.sa-pub-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.sa-pub-faq-item { border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md); background: #fff; padding: 6px 24px; transition: border-color .2s ease; }
.sa-pub-faq-item[open] { border-color: var(--sa-titan-400); }
.sa-pub-faq-q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; font-family: var(--sa-font-display); font-weight: 700; font-size: 15px; color: var(--sa-ink-900);
  transition: color .15s ease;
}
.sa-pub-faq-q::-webkit-details-marker { display: none; }
.sa-pub-faq-q::marker { content: ''; }
.sa-pub-faq-q:hover { color: var(--sa-pink-600); }
/* W1.2 FINAL VISUAL POLISH (autorización de Rafael, punto 1): el
   focus-visible anterior (outline 2px + offset 3px) formaba un rectángulo
   rosa grande, separado de la card, que competía visualmente con el diseño.
   Se reemplaza por un anillo fino de 1px pegado al texto (offset negativo,
   mismo radio que la card) + un leve cambio de color en el borde general de
   la card vía :has() — dos señales suaves e integradas en vez de un marco
   grueso, pero sigue siendo un anillo de alto contraste totalmente visible
   con teclado (:focus-visible nunca aparece con mouse). El chevron rosa en
   estado abierto (línea siguiente) y el título en :hover no se tocaron. */
.sa-pub-faq-q:focus-visible { outline: 1px solid var(--sa-pink-300); outline-offset: -1px; border-radius: var(--sa-radius-sm); }
.sa-pub-faq-item:has(.sa-pub-faq-q:focus-visible) { border-color: var(--sa-pink-300); }
.sa-pub-faq-q svg { flex-shrink: 0; color: var(--sa-titan-400); transition: transform .2s ease, color .15s ease; }
.sa-pub-faq-item[open] .sa-pub-faq-q svg { transform: rotate(180deg); color: var(--sa-pink-600); }
.sa-pub-faq-a { font-family: var(--sa-font-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--sa-titan-600); padding: 0 0 20px; max-width: 640px; }

/* ---------- Grilla de beneficios (W1.2, "Por qué Smile Again" en /odontologos) ----------
   Rediseño W1.2 VISUAL REFINEMENT: 2×2 en desktop (no 4 en una fila) —
   autorización explícita de Rafael. Al ser ya 2 columnas por defecto, no
   hace falta ninguna regla intermedia en tablet; solo colapsa a 1 columna
   en mobile. */
.sa-pub-benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sa-pub-benefit-card { background: #fff; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg); padding: 28px 24px; }
.sa-pub-benefit-icon {
  width: 42px; height: 42px; border-radius: 50%; background: var(--sa-accent-wash); color: var(--sa-pink-600);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.sa-pub-benefit-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 15.5px; color: var(--sa-ink-900); margin: 0 0 6px; }
.sa-pub-benefit-desc { font-family: var(--sa-font-body); font-weight: 300; font-size: 13.5px; line-height: 1.5; color: var(--sa-titan-600); margin: 0; }

@media (max-width: 560px) {
  .sa-pub-benefit-grid { grid-template-columns: 1fr; }
}

/* ---------- Mini-pasos (W1.2 VISUAL REFINEMENT, punto 1 — "Planificación
   digital" de /pacientes) ----------
   Autorización de Rafael: los 3 puntos ("Estudio digital del caso",
   "Planificación de la secuencia", "Producción recién después de
   aprobada") quedaban como texto suelto — se convierten en mini-cards con
   ícono, borde fino, fondo gris muy suave, horizontal en desktop y stack
   en mobile. Sin sombras difusas. */
.sa-pub-mini-steps { display: flex; gap: 18px; margin-top: 32px; }
.sa-pub-mini-step {
  flex: 1; background: var(--sa-panel-100); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg);
  padding: 22px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.sa-pub-mini-step-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--sa-accent-wash); color: var(--sa-pink-600);
  display: flex; align-items: center; justify-content: center;
}
.sa-pub-mini-step-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 13.5px; color: var(--sa-ink-900); margin: 0; line-height: 1.35; }

@media (max-width: 700px) {
  .sa-pub-mini-steps { flex-direction: column; }
}

/* ---------- Página secundaria: hero angosto sin visual (W1.2) ----------
   Algunas secciones de /pacientes y /odontologos (p. ej. "¿Es para mí?")
   son bloques de texto centrados y cortos — reutilizan
   .sa-pub-section-tight/.sa-pub-container/.sa-pub-center/.sa-pub-eyebrow/
   .sa-pub-h2/.sa-pub-lead ya existentes, sin CSS nuevo. */

@media (max-width: 600px) {
  .sa-pub-phone-frame { width: 190px; }
}

/* ---------- "Recursos profesionales" en 3 mini-cards (W1.2 FINAL VISUAL
   POLISH, punto 2) ----------
   Autorización de Rafael: la caja de texto larga se reemplaza por 3
   mini-cards horizontales en desktop / apiladas en mobile — mismo lenguaje
   visual que .sa-pub-benefit-card ("Por qué Smile Again"), por eso las
   cards en sí reutilizan esas clases tal cual. Este bloque solo agrega el
   grid de 3 columnas y la leyenda discreta debajo ("Disponibles dentro de
   Smile Again Profesionales."). Sin sombras, sin botones de descarga. */
.sa-pub-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
@media (max-width: 700px) {
  .sa-pub-resource-grid { grid-template-columns: 1fr; }
}
.sa-pub-resource-caption {
  text-align: center; margin: 18px 0 0; font-family: var(--sa-font-body); font-weight: 600;
  font-size: 12px; letter-spacing: .02em; color: var(--sa-titan-400);
}

/* ---------- CTA "próximamente" — botón visualmente activo pero
   funcionalmente seguro (W1.2 FINAL VISUAL POLISH, punto 3) ----------
   "Quiero sumarme" reutiliza el estilo de .sa-pub-btn-hero-primary (mismo
   rosa, mismo peso) para no verse "apagado", pero es un <span
   aria-disabled="true"> sin href y sin tabindex: no navega a ningún lado,
   no entra en el orden de tabulación (igual que un <button disabled>
   nativo) y no requiere backend, formulario ni contacto real todavía. El
   cursor vuelve a "default" y se neutraliza el :hover heredado para que no
   sugiera que es clickeable. La leyenda "Canal de contacto próximamente"
   queda asociada vía aria-describedby y también se ve en pantalla. */
.sa-pub-cta-pending { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sa-pub-btn-pending { cursor: default; }
.sa-pub-btn-pending:hover { background: var(--sa-accent); }
.sa-pub-pending-note {
  margin: 0; font-family: var(--sa-font-body); font-weight: 600; font-size: 12px;
  letter-spacing: .02em; color: var(--sa-titan-400);
}

/* ---------- Buscador de profesionales (placeholder, desactivado) ----------
   Refinamiento visual W1.1 (autorización de Rafael, punto "Buscador"):
   reducir su peso visual para que no compita con la sección Patient/
   Profesionales — de un bloque grande centrado (padding 40px, título a
   escala de h2) pasa a una barra compacta de una sola fila, con badge +
   texto corto a la izquierda y el input/botón deshabilitados a la
   derecha. Sigue existiendo, sigue desactivado de verdad. */
.sa-pub-finder {
  background: var(--sa-sunken-150); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg);
  padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.sa-pub-finder-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sa-pub-finder-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 14.5px; color: var(--sa-ink-900); margin: 0; }
.sa-pub-finder-badge {
  font-family: var(--sa-font-narrow); font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sa-titan-600); background: var(--sa-line-200); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.sa-pub-finder-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sa-pub-finder-input-row input {
  min-width: 180px; padding: 9px 12px; border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md);
  background: var(--sa-panel-100); font-family: var(--sa-font-body); font-size: 13px; color: var(--sa-titan-400);
}
.sa-pub-finder-input-row input[disabled] { cursor: not-allowed; }
.sa-pub-finder-input-row button[disabled] {
  font-family: var(--sa-font-display); font-weight: 700; font-size: 12.5px; color: #fff; background: var(--sa-titan-400);
  border: none; border-radius: var(--sa-radius-md); padding: 9px 16px; cursor: not-allowed;
}

@media (max-width: 600px) {
  .sa-pub-finder { flex-direction: column; align-items: stretch; text-align: left; }
  .sa-pub-finder-input-row { width: 100%; }
  .sa-pub-finder-input-row input { flex: 1; }
}

/* ---------- CTA final ---------- */
.sa-pub-final-cta { background: var(--sa-ink-800); border-radius: var(--sa-radius-xl); padding: 64px 48px; text-align: center; }
.sa-pub-final-cta .sa-pub-h2 { color: #fff; }
.sa-pub-final-cta-lead { font-family: var(--sa-font-body); font-weight: 300; font-size: 15px; color: var(--sa-titan-400); margin: 0 auto 28px; max-width: 480px; }
.sa-pub-final-cta-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .sa-pub-final-cta { padding: 44px 24px; }
}

/* ---------- Footer ---------- */
.sa-pub-footer { border-top: 1px solid var(--sa-border); padding: 40px 0; }
.sa-pub-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.sa-pub-footer-brand { display: flex; align-items: center; gap: 10px; }
.sa-pub-footer-brand span { font-family: var(--sa-font-display); font-weight: 800; font-size: 14px; color: var(--sa-ink-900); }
.sa-pub-footer-tagline { font-family: var(--sa-font-body); font-weight: 300; font-size: 12.5px; color: var(--sa-titan-600); margin: 4px 0 0; }
.sa-pub-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.sa-pub-footer-links a { font-family: var(--sa-font-body); font-weight: 600; font-size: 13px; color: var(--sa-titan-600); text-decoration: none; }
.sa-pub-footer-links a:hover { color: var(--sa-ink-900); text-decoration: none; }
.sa-pub-footer-copy { font-family: var(--sa-font-narrow); font-size: 11.5px; color: var(--sa-titan-400); margin-top: 24px; }

/* ---------- Utilidades responsive ---------- */
html { -webkit-text-size-adjust: 100%; }
body.sa-pub-body { overflow-x: hidden; }
@media (max-width: 600px) {
  .sa-pub-container { padding: 0 18px; }
  .sa-pub-section { padding: 56px 0; }
}

/* Accesibilidad: foco visible consistente con el resto del sistema
   (mismo patrón que .sa-password-toggle:focus-visible en styles.css). */
.sa-pub-header a:focus-visible, .sa-pub-footer a:focus-visible,
.sa-pub-cta-btn:focus-visible, .sa-pub-btn-hero-primary:focus-visible,
.sa-pub-btn-hero-secondary:focus-visible, .sa-pub-track-cta:focus-visible,
.sa-pub-login-dd summary:focus-visible, .sa-pub-menu-toggle summary:focus-visible {
  outline: 2px solid var(--sa-pink-300); outline-offset: 2px;
}

/* ---------- W1.3: skip-link ----------
   "Saltar al contenido" — HTML semántico puro (primer <a> del body, salta
   a <main id="main">), sin ARIA. Oculto fuera de pantalla hasta que recibe
   foco por teclado (patrón estándar), momento en el que se posiciona fijo
   arriba de todo (z-index por encima del header sticky) para ser
   perfectamente visible. */
.sa-pub-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sa-ink-900); color: #fff; padding: 10px 18px;
  font-family: var(--sa-font-display); font-weight: 700; font-size: 13.5px;
  border-radius: 0 0 var(--sa-radius-md) 0; text-decoration: none;
}
.sa-pub-skip-link:focus {
  left: 0; outline: 2px solid var(--sa-pink-300); outline-offset: -2px;
}

/* ---------- W1.3: formulario de contacto profesional ----------
   Reutiliza .sa-input/.sa-select/.sa-textarea (public/styles.css, ya
   cargado en toda la web pública) para los controles en sí — evita
   duplicar CSS de formularios (mismo criterio de reutilización de W1.2).
   Este bloque solo agrega layout específico del sitio público: grilla,
   fieldset de radio, mensajes de error y el panel de éxito. */
.sa-pub-contact-form-wrap { max-width: 640px; margin: 0 auto; }
.sa-pub-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.sa-pub-form-field { grid-column: span 1; }
.sa-pub-form-field:has(#cp-fullName), .sa-pub-form-field:has(#cp-clinicName) { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .sa-pub-form-grid { grid-template-columns: 1fr; }
}
.sa-pub-radio-fieldset { border: none; padding: 0; margin: 4px 0 0; }
.sa-pub-radio-fieldset legend { font-size: 12.3px; font-weight: 600; color: var(--sa-graphite); margin-bottom: 6px; padding: 0; }
.sa-pub-radio-row { display: flex; gap: 20px; }
.sa-pub-radio-option { display: flex; align-items: center; gap: 6px; font-family: var(--sa-font-body); font-size: 14px; color: var(--sa-ink-900); cursor: pointer; }
.sa-pub-optional-tag { font-weight: 400; color: var(--sa-titan-600); }
.sa-pub-field-error { margin: 4px 0 0; font-family: var(--sa-font-body); font-size: 12px; font-weight: 600; color: var(--sa-danger, #c0325a); }
.sa-pub-form-submit { margin-top: 20px; width: 100%; justify-content: center; border: none; cursor: pointer; font-size: 14.5px; padding: 13px 20px; }
.sa-pub-contact-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; }
.sa-pub-contact-success-icon { color: var(--sa-pink-600); }

/* W1.3.1 CLOSURE (punto 1): estados UNAVAILABLE/FAILED y rate limit —
   mismo layout que sa-pub-contact-success (texto centrado, icono, CTA de
   vuelta) pero con color neutro/de advertencia en vez del rosa de marca,
   para que se lea de inmediato como "esto no es un éxito". */
.sa-pub-contact-unavailable { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; }
.sa-pub-contact-unavailable-icon { color: var(--sa-titan-600); }

/* ---------- W1.3: páginas institucionales (prosa) ---------- */
.sa-pub-prose-wrap { max-width: 720px; margin: 0 auto; }
.sa-pub-prose h2 { font-family: var(--sa-font-display); font-weight: 700; font-size: 18px; color: var(--sa-ink-900); margin: 28px 0 8px; }
.sa-pub-prose p { font-family: var(--sa-font-body); font-weight: 300; font-size: 15px; line-height: 1.7; color: var(--sa-titan-600); margin: 0 0 12px; }
.sa-pub-prose a { color: var(--sa-pink-600); font-weight: 600; text-decoration: underline; }
.sa-pub-draft-banner {
  background: var(--sa-sunken-150); border: 1px solid var(--sa-border); border-radius: var(--sa-radius-md);
  padding: 14px 18px; font-family: var(--sa-font-body); font-size: 13px; color: var(--sa-titan-600); margin-bottom: 24px;
}
.sa-pub-draft-banner strong { color: var(--sa-ink-900); }

/* ---------- W1.3: /como-funciona (recorrido de 7 etapas) ---------- */
.sa-pub-journey { display: flex; flex-direction: column; gap: 14px; }
.sa-pub-journey-stage { border: 1px solid var(--sa-border); border-radius: var(--sa-radius-lg); background: #fff; padding: 20px 24px; }
.sa-pub-journey-stage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sa-pub-journey-num {
  width: 26px; height: 26px; border-radius: 999px; background: var(--sa-ink-900); color: #fff;
  font-family: var(--sa-font-display); font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sa-pub-journey-icon { color: var(--sa-pink-600); display: flex; align-items: center; }
.sa-pub-journey-title { font-family: var(--sa-font-display); font-weight: 700; font-size: 16px; color: var(--sa-ink-900); margin: 0; }
.sa-pub-journey-desc { font-family: var(--sa-font-body); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--sa-titan-600); margin: 0 0 12px; }
.sa-pub-journey-who { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-pub-journey-who-chip {
  font-family: var(--sa-font-body); font-size: 12px; color: var(--sa-titan-600); background: var(--sa-panel-100);
  border: 1px solid var(--sa-border); border-radius: 999px; padding: 5px 12px;
}
.sa-pub-journey-who-chip strong { color: var(--sa-ink-900); font-weight: 700; }
@media (max-width: 600px) {
  .sa-pub-journey-stage { padding: 16px 18px; }
}