/* =============================================================================
   Systems Venezuela · Hoja de estilos
   -----------------------------------------------------------------------------
   Un solo archivo, en este orden: tipografía, tokens de color, base y piezas.
   Se edita a mano. Los colores salen de los tokens de más abajo; si hace falta
   uno nuevo, se añade allí en vez de escribirlo suelto, para que pase por las
   comprobaciones de contraste de Docs/herramientas/paleta.js.
   ============================================================================= */

/* >>> FUENTE · generado por Docs/herramientas/fuente.js — no editar a mano <<< */
/* ── Tipografía auto-hospedada ──────────────────────────────────────────────
   Manrope servida desde este mismo dominio, no desde Google: una petición menos
   a un tercero y un punto menos donde el primer pintado puede quedarse
   esperando. Los .woff2 los descargó Docs/herramientas/fuente.js.
   font-display: swap — el texto se ve desde el primer momento con la tipografía
   del sistema y cambia a Manrope en cuanto está lista.
   ============================================================================= */

/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  /* Fuente variable: un solo archivo cubre todos los pesos del rango. */
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  /* Fuente variable: un solo archivo cubre todos los pesos del rango. */
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* <<< FIN FUENTE >>> */

/* =============================================================================
   Systems Venezuela · Tokens de identidad
   -----------------------------------------------------------------------------
   GENERADO por Docs/herramientas/paleta.js. No editar a mano: cambia el script,
   vuelve a ejecutarlo y se regenera. El script verifica 43 comprobaciones de
   contraste y separacion perceptual antes de escribir; si una falla, no escribe.

   Direccion A "casa de software", elegida el 2026-09-15.
   Acento de la casa: azul #0A43FF. Cada producto tiene el suyo derivado.
   src/build.js lo concatena con src/css/base.css para formar public/css/theme.css.
   ============================================================================= */

/* >>> TOKENS · generado por Docs/herramientas/paleta.js — no editar a mano <<< */
:root {
  /* ── Fondos y tinta ─────────────────────────────────────────────────── */
  --negro:        #070B14;   /* franja oscura: hero, cierres, pie          */
  --negro-sup:    #0E1524;   /* tarjeta sobre franja oscura                */
  --tinta:        #0D1220;   /* texto principal sobre fondo claro          */
  --blanco:       #FFFFFF;
  --claro:        #F4F6FB;   /* franja clara del cuerpo                    */

  /* ── Acento de la casa ──────────────────────────────────────────────── */
  --azul:         #0A43FF;   /* boton primario, enlaces, eyebrow           */
  --azul-600:     #0735CC;   /* hover del boton primario                   */
  --azul-300:     #8FA8FF;   /* enlaces y eyebrow SOBRE franja oscura      */
  --azul-100:     #E6EBFF;   /* fondo de caja destacada                    */

  /* ── Acento del sistema odontologico ────────────────────────────────── */
  --dental:       #12B5B5;   /* color vivo: graficos, bloques              */
  --dental-tinta: #0C7D7D;   /* el mismo, legible como texto sobre claro   */
  --dental-300:   #5FDCDC;   /* el mismo, sobre franja oscura              */
  --dental-100:   #E7F8F8;   /* fondo del chip claro                       */

  /* ── Acento del sistema de citas medicas ────────────────────────────── */
  --medico:       #D98324;
  --medico-tinta: #A1611B;
  --medico-300:   #F0B368;
  --medico-100:   #FBF3E9;

  /* ── Grises (sesgo hacia el azul de la casa, no gris puro) ──────────── */
  --g-900: #141A28;  --g-800: #1E2739;  --g-700: #334057;
  --g-600: #4A5771;  --g-500: #646F89;  --g-400: #98A2B8;
  --g-300: #C3CAD9;  --g-200: #E2E6F0;  --g-100: #F0F2F8;

  /* ── Semanticos (separados del acento a proposito) ──────────────────── */
  --exito: #117F3A;  --exito-100: #E6F5EE;
  --aviso: #6C3B03;  --aviso-100: #FDF3E7;
  --error: #D12424;  --error-100: #FBEAE8;

  /* ── WhatsApp ───────────────────────────────────────────────────────────
     El verde oficial #25D366 con texto blanco encima da 1.98:1 y NUNCA
     cumple AA: es un hecho del color, no algo que se pueda ajustar. Por eso el
     boton de WhatsApp es neutro (blanco sobre claro, contorno sobre oscuro) y
     el verde queda como color del ICONO. Sobre fondo claro se usa la variante
     oscurecida, que si alcanza el 3:1 que pide un elemento grafico.          */
  --whatsapp:       #25D366;   /* icono sobre franja oscura                  */
  --whatsapp-tinta: #1EA952;   /* icono sobre fondo claro                    */

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --fuente: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Medidas ────────────────────────────────────────────────────────── */
  --contenedor: 1180px;
  --nav-h:      72px;
  --radio:      20px;
  --radio-sm:   12px;
  --sombra:       0 12px 40px rgba(13, 18, 32, .08);
  --sombra-hover: 0 18px 50px rgba(10, 67, 255, .16);
}
/* <<< FIN TOKENS >>> */

/* =============================================================================
   Systems Venezuela · Base
   -----------------------------------------------------------------------------
   Se concatena DESPUÉS de tokens.css para formar public/css/theme.css. Por eso
   aquí no hay un solo color literal: todo sale de una variable. Si un color
   hiciera falta y no estuviera en los tokens, se añade al generador y se
   regenera, nunca se escribe suelto aquí.

   Sin Bootstrap ni framework: grid y flex nativos.
   ============================================================================= */

/* ── Reset mínimo ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul.limpia { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-600); text-decoration: underline; }

::selection { background: var(--azul); color: var(--blanco); }

/* Un foco visible y del mismo color en todo el sitio. Se usa :focus-visible
   para que no aparezca al hacer clic con el ratón, solo al navegar con teclado. */
:focus-visible {
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}
.banda-oscura :focus-visible { outline-color: var(--azul-300); }

/* Enlace de salto: invisible hasta que se le da foco con el tabulador. Es lo
   primero que encuentra quien navega con teclado o lector de pantalla, y le
   ahorra pasar por todo el menú en cada página. */
.saltar {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--azul);
  color: var(--blanco);
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 0 0 var(--radio-sm) var(--radio-sm);
  transition: top .18s ease;
}
.saltar:focus { top: 0; color: var(--blanco); text-decoration: none; }

/* El ancla no queda debajo de la barra fija. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ── Contenedor ─────────────────────────────────────────────────────────── */
/* El gutter lateral vive aquí y en un solo sitio: 20 px mínimo a cada lado en
   cualquier ancho. */
.contenedor {
  width: min(var(--contenedor), 100% - 40px);
  margin-inline: auto;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--azul);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.banda-oscura .eyebrow { color: var(--azul-300); }

.h-display {
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.h-seccion {
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h3, .h-3 {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.012em;
}
.lead {
  font-size: clamp(16px, 1.55vw, 19px);
  color: var(--g-500);
  max-width: 60ch;
}
.banda-oscura .lead { color: var(--g-300); }
p { max-width: 68ch; }

.texto-azul { color: var(--azul); }
.banda-oscura .texto-azul { color: var(--azul-300); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* 50 px de alto: se puede tocar con el pulgar sin apuntar. */
  min-height: 50px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

.btn-azul { background: var(--azul); color: var(--blanco); }
.btn-azul:hover { background: var(--azul-600); color: var(--blanco); }

.btn-blanco { background: var(--blanco); color: var(--tinta); }
.btn-blanco:hover { background: var(--azul-100); color: var(--tinta); }

.btn-linea { border-color: var(--g-200); color: var(--tinta); background: transparent; }
.btn-linea:hover { border-color: var(--azul); color: var(--azul); }
.banda-oscura .btn-linea { border-color: rgba(255,255,255,.28); color: var(--blanco); }
.banda-oscura .btn-linea:hover { border-color: var(--azul-300); color: var(--azul-300); }

/* WhatsApp: botón NEUTRO con el icono en verde.
   El verde oficial con texto blanco encima da 1,98:1 y nunca cumple el mínimo
   accesible; no es algo que se pueda ajustar, es el color. Así el botón se
   reconoce igual y además se puede leer. */
.btn-wa svg { fill: var(--whatsapp-tinta); stroke: none; }
.banda-oscura .btn-wa svg { fill: var(--whatsapp); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 15px;
  color: var(--azul);
  /* Con solo el alto de la línea medía 22 px. El relleno vertical lo lleva a
     44 sin cambiar dónde se apoya el texto. */
  min-height: 44px;
  padding-block: 10px;
}
.enlace-flecha svg { width: 16px; height: 16px; transition: transform .16s ease; }
.enlace-flecha:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .enlace-flecha:hover svg { transform: none; }
}

/* ── Navegación ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 90;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .22s ease, border-color .22s ease;
}
/* Al hacer scroll la barra gana fondo. Arriba del todo es transparente para
   que el hero oscuro se vea entero. */
.nav.abajo {
  background: rgba(7, 11, 20, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
/* Páginas que no empiezan en banda oscura: la barra lleva fondo desde arriba,
   o el logo blanco quedaría sobre blanco. Lo decide build.js, no el autor. */
.nav-solida .nav {
  background: var(--negro);
  border-bottom-color: rgba(255, 255, 255, .08);
}

.nav-fila {
  display: flex;
  align-items: center;
  gap: 24px;
  width: min(var(--contenedor), 100% - 40px);
  margin-inline: auto;
}

.nav-marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  text-decoration: none;
  /* 44 px de alto de toque: el logo es un enlace y con 36 px se falla al
     tocarlo con el pulgar. El relleno hace el área, no el tamaño del dibujo. */
  min-height: 44px;
  padding-block: 4px;
}
.nav-marca:hover { text-decoration: none; }
.nav-marca svg { width: 36px; height: 36px; }
.nav-nombre {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--blanco);
  white-space: nowrap;
}
.nav-nombre b { font-weight: 800; }

.nav-enlaces {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.nav-enlaces > a:not(.btn) {
  color: var(--g-300);
  font-weight: 700;
  font-size: 15px;
  /* 44 px de alto de toque aunque el texto mida 15: el relleno vertical hace
     el área, no el tamaño de la letra. */
  padding-block: 13px;
  text-decoration: none;
}
.nav-enlaces > a:not(.btn):hover,
.nav-enlaces > a[aria-current="page"] { color: var(--blanco); text-decoration: none; }

.nav-burger {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radio-sm);
  color: var(--blanco);
}
.nav-burger svg { width: 22px; height: 22px; }

.nav-movil {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: 89;
  background: var(--negro-sup);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 14px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-movil a:not(.btn) {
  color: var(--g-300);
  font-weight: 700;
  font-size: 16px;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
}
.nav-movil a:not(.btn):hover { color: var(--blanco); }
.nav-movil .btn { margin-top: 14px; }

/* ── Franjas ────────────────────────────────────────────────────────────── */
.banda-oscura {
  background: var(--negro);
  color: var(--blanco);
  position: relative;
  overflow: hidden;
}
.banda-clara { background: var(--claro); }

/* Un resplandor muy tenue detrás del hero. Es decorativo: no lleva contenido
   y no afecta al contraste del texto, que se mide contra --negro. */
.brillo {
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,67,255,.30), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.brillo-a { top: -260px; right: -160px; }
.brillo-b { bottom: -320px; left: -200px; opacity: .55; }
.banda-oscura > .contenedor { position: relative; z-index: 1; }

.seccion { padding-block: clamp(56px, 8vw, 96px); }
.seccion-cabeza { max-width: 700px; margin-bottom: 40px; }
.seccion-cabeza .h-seccion { margin: 14px 0 12px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-block: calc(var(--nav-h) + clamp(44px, 7vw, 76px)) clamp(56px, 8vw, 88px); }
.hero-rejilla {
  display: grid;
  gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-rejilla { grid-template-columns: 1.05fr .95fr; }
}
.hero .h-display { margin: 16px 0 18px; }
.hero-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* La columna derecha del hero lleva la maqueta y, debajo, el resumen.
   En móvil se invierte el orden: el resumen es lo que hay que leer, la maqueta
   es solo una ilustración, y a nadie se le hace bajar por delante de ella. */
.hero-lado { display: flex; flex-direction: column-reverse; gap: 24px; }
@media (min-width: 900px) {
  .hero-lado { flex-direction: column; }
}
.hero-lado .resumen { margin-block: 0; }

.hero-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.marca-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-300);
}
.marca-item svg { width: 17px; height: 17px; flex: none; color: var(--azul-300); }

/* ── En resumen (TL;DR) ─────────────────────────────────────────────────── */
/* Va después del primer párrafo y del CTA. Es lo que lee quien no va a leer
   el resto de la página. */
.resumen {
  border-left: 3px solid var(--azul);
  background: var(--azul-100);
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  padding: 20px 24px;
  margin-block: 28px;
  max-width: 70ch;
}
.banda-oscura .resumen {
  background: rgba(143, 168, 255, .1);
  border-left-color: var(--azul-300);
}
.resumen-t {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 10px;
}
.banda-oscura .resumen-t { color: var(--azul-300); }
.resumen ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.resumen li { position: relative; padding-left: 26px; font-size: 15.5px; }
.resumen li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2.5px solid var(--azul);
}
.banda-oscura .resumen li::before { border-color: var(--azul-300); }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
/* Borde y fondo se gastan por función, no por decoración: una tarjeta de
   producto lleva su franja de acento arriba; una tarjeta de apoyo, nada. */
.rejilla { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .rejilla-3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--g-200);
  border-radius: var(--radio);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta-producto { border-top: 3px solid var(--g-300); }
.tarjeta-producto.dental { border-top-color: var(--dental); }
.tarjeta-producto.medico { border-top-color: var(--medico); }

.chip {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--g-100);
  color: var(--g-600);
}
.chip.dental { background: var(--dental-100); color: var(--dental-tinta); }
.chip.medico { background: var(--medico-100); color: var(--medico-tinta); }

/* ── Superficies claras ─────────────────────────────────────────────────────
   REGLA: todo bloque con fondo claro fija su color de texto, no lo hereda.
   Si no, al meterlo dentro de una banda oscura hereda el blanco y sale texto
   blanco sobre fondo blanco. Pasó de verdad con la tabla de la landing
   odontológica, que se publicó vacía a la vista. */
.tabla-caja,
.tarjeta,
.maqueta-clara,
.faq details,
.precio-pendiente,
.aliado-t,
.funcion {
  color: var(--tinta);
}
.tabla-caja .lead,
.tarjeta .lead,
.funcion p { color: var(--g-500); }

/* ── Tablas ─────────────────────────────────────────────────────────────── */
/* Una tabla ancha se desplaza dentro de su caja, nunca hace que se desplace
   la página entera. */
.tabla-caja {
  overflow-x: auto;
  border: 1px solid var(--g-200);
  border-radius: var(--radio-sm);
  background: var(--blanco);
}
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--g-200); vertical-align: top; }
th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* --g-600: el 500 sobre --g-100 se queda en 4,49:1, a una centésima del
     mínimo. Una centésima también es no cumplir. */
  color: var(--g-600);
  background: var(--g-100);
}
tbody tr:last-child td { border-bottom: 0; }

/* ── Listas de contenido ────────────────────────────────────────────────── */
.lista-puntos { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.lista-puntos li::marker { color: var(--azul); }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie {
  background: var(--negro);
  color: var(--g-300);
  padding-block: clamp(44px, 6vw, 68px) 28px;
}
.pie a { color: var(--g-300); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie-rejilla {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
}
/* Marca + las columnas de enlaces. Se ajusta al número que haya:
   con dos columnas, tres huecos dejarían un vacío raro a la derecha. */
@media (min-width: 720px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } }

.pie-lema { font-size: 14.5px; color: var(--g-400); margin-top: 14px; max-width: 34ch; }
.pie-datos { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; font-size: 14.5px; }
.pie-col-t {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --g-400, no --g-500: sobre el negro del pie, el 500 da 3,91:1 y no llega
     al mínimo. Medido sobre lo pintado, no sobre el token. */
  color: var(--g-400);
  margin-bottom: 14px;
}
.pie-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }

.pie-redes { display: flex; gap: 10px; margin-top: 18px; }
.pie-redes a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radio-sm);
}
.pie-redes a:hover { border-color: var(--azul-300); }
.pie-redes svg { width: 19px; height: 19px; }

.pie-aliados {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.pie-aliados-t { font-size: 13px; color: var(--g-400); margin-bottom: 14px; }
.pie-aliados-lista { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.aliado { font-size: 14.5px; }
.aliado b { color: var(--blanco); font-weight: 700; }
.aliado span { color: var(--g-400); }

.pie-legal {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--g-400);
}

.pie-legal-enlaces { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie-legal a { color: var(--g-400); text-decoration: underline; text-underline-offset: 3px;
               display: inline-flex; align-items: center; min-height: 44px; }  /* área táctil de 44 px en móvil */
.pie-legal a:hover { color: var(--blanco); }

/* ── Páginas legales (privacidad, términos, eliminar cuenta): texto corrido a una medida legible ── */
.texto-legal > p, .texto-legal > h3, .texto-legal > ul, .texto-legal > form { max-width: 72ch; }
.texto-legal > p + p, .texto-legal > ul + p, .texto-legal > p + ul { margin-top: 14px; }
.texto-legal h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 700; }
.lista-legal { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.lista-legal li::marker { color: var(--azul); }
.texto-legal > p + form { margin-top: 22px; }
.legal-fecha { margin-top: 26px; font-size: 13.5px; color: var(--g-500, #6b7280); }

/* ── Barra fija de móvil ────────────────────────────────────────────────── */
.cta-movil {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(7, 11, 20, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.1);
}
.cta-movil .btn { flex: 1; padding-inline: 14px; font-size: 14.5px; }
.cta-movil .btn-wa { flex: 0 0 auto; padding-inline: 18px; }

/* ── Compartir ──────────────────────────────────────────────────────────── */
.compartir {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--g-200);
  background: var(--blanco);
  font-size: 14px;
  font-weight: 700;
  color: var(--g-600);
}
.compartir:hover { border-color: var(--azul); color: var(--azul); }
.compartir svg { width: 16px; height: 16px; }
.banda-oscura .compartir {
  background: transparent;
  border-color: rgba(255,255,255,.22);
  color: var(--g-300);
}
.banda-oscura .compartir:hover { border-color: var(--azul-300); color: var(--azul-300); }

/* ── Aparición al desplazar ─────────────────────────────────────────────── */
/* La animación NO usa opacidad, a propósito. Con opacidad 0 de partida, una
   sección que el observador no llegue a marcar se queda invisible: pasa en una
   captura de pantalla, en una impresión, si el script falla, o si alguien entra
   con un ancla a media página. Se comprobó y ocurría de verdad.
   Con solo un desplazamiento, el texto se lee siempre; lo que se anima es
   dónde está, no si está. */
.js .aparece { transform: translateY(14px); }
.js .aparece.dentro {
  transform: none;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .aparece { transform: none; }
}

/* ── Utilidades ─────────────────────────────────────────────────────────── */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[hidden] { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav-enlaces { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (min-width: 861px) {
  .nav-movil { display: none !important; }
}
@media (max-width: 767px) {
  /* La barra fija existe solo en móvil, y el body le reserva su alto para que
     no se coma el final del pie. */
  .cta-movil { display: flex; }
  body.con-cta-movil { padding-bottom: 74px; }
}
@media (max-width: 420px) {
  .nav-nombre { font-size: 17px; }
  .btn { padding-inline: 20px; font-size: 14.5px; }
}

/* En móvil, iOS hace zoom al enfocar un campo cuya letra mide menos de 16 px.
   No es una preferencia: es una corrección. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }
}

/* =============================================================================
   Systems Venezuela · Piezas de la página de inicio
   -----------------------------------------------------------------------------
   Maquetas dibujadas en CSS y SVG, no capturas: los sistemas todavía no
   existen. Cada una lleva una etiqueta que lo dice, porque enseñar el boceto de
   algo que no está construido y no advertirlo es mentir con una imagen.

   Se concatena después de base.css. Igual que allí, ni un color literal: todo
   sale de los tokens verificados.
   ============================================================================= */

/* ── Etiqueta de boceto ─────────────────────────────────────────────────── */
/* Va sobre cada maqueta. No es decorativa: es la advertencia de que lo que se
   ve no es una captura del producto. */
.boceto-et {
  position: absolute;
  /* Montada SOBRE el borde superior, no dentro: dentro tapaba el chip de
     sincronización, las últimas piezas del odontograma y el total del cobro. */
  top: -11px; left: 18px;
  z-index: 3;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--g-400);
  border: 1px solid rgba(255, 255, 255, .2);
}
.boceto-et.sobre-claro {
  background: var(--blanco);
  color: var(--g-500);
  border-color: var(--g-300);
}

.maqueta {
  position: relative;
  border-radius: var(--radio);
  background: var(--negro-sup);
  border: 1px solid rgba(255, 255, 255, .1);
  /* Más aire arriba: la etiqueta de boceto va montada sobre el borde y, con el
     relleno parejo, pisaba el primer número del odontograma en móvil. */
  padding: 24px 18px 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.maqueta-clara {
  background: var(--blanco);
  border-color: var(--g-200);
  box-shadow: var(--sombra);
}

/* ── Maqueta: agenda del día ────────────────────────────────────────────── */
.ag-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin-bottom: 4px;
}
.ag-fecha { font-size: 15px; font-weight: 800; color: var(--blanco); }
.ag-fecha span { display: block; font-size: 12px; font-weight: 500; color: var(--g-400); }

/* Estado de sincronización. Es la pieza que más dice del producto: el
   profesional tiene que poder confiar en que nada se perdió. */
.ag-sync {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(240, 179, 104, .14);
  color: var(--medico-300);
  border: 1px solid rgba(240, 179, 104, .25);
  white-space: nowrap;
}
.ag-sync .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ag-lista { list-style: none; display: flex; flex-direction: column; }
.ag-cita {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.ag-cita:last-child { border-bottom: 0; }
.ag-hora {
  font-size: 13px;
  font-weight: 800;
  color: var(--azul-300);
  font-variant-numeric: tabular-nums;
}
.ag-quien { display: block; font-size: 14px; font-weight: 700; color: var(--blanco); line-height: 1.25; }
.ag-que { display: block; font-size: 12.5px; color: var(--g-400); margin-top: 1px; }
.ag-estado {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ag-estado.confirmada { background: rgba(17, 127, 58, .2); color: #5BD98A; }
.ag-estado.espera { background: rgba(255, 255, 255, .08); color: var(--g-300); }
.ag-estado.sin-enviar { background: rgba(240, 179, 104, .16); color: var(--medico-300); }

.ag-pie {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 12px;
  color: var(--g-400);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ag-pie svg { width: 14px; height: 14px; flex: none; color: var(--medico-300); }

/* ── Maqueta: odontograma ───────────────────────────────────────────────── */
/* Notación FDI, que es la que usa el gremio: el primer dígito es el cuadrante
   y el segundo la pieza. Un odontólogo reconoce el 16 y el 46 al instante; un
   sistema que numere los dientes de otra manera no lo adopta nadie. */
.odo { display: flex; flex-direction: column; gap: 10px; }
.odo-arco {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 3px;
}
.odo-pieza {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.odo-num {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--g-500);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* El diente: un dibujo con su forma (incisivo, canino, premolar o molar según
   el segundo dígito FDI), raíz y corona. Los símbolos se definen una vez en el
   HTML (<symbol id="d-…">) y cada pieza los reutiliza con <use>; el estado
   llega a las partes del símbolo por variables CSS, que sí cruzan el <use>. */
.odo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.odo-diente {
  display: block;
  width: 100%;
  max-width: 26px;
  aspect-ratio: 1 / 2;
  overflow: visible;
  --raiz: var(--blanco);
  --corona: var(--blanco);
  --borde: var(--g-400);
  --raya: none;
  --marca: transparent;
  --cruz: transparent;
}
/* En el arco inferior la corona mira hacia arriba. */
.odo-arco.inferior .odo-diente { transform: scaleY(-1); }
.d-raiz, .d-corona {
  stroke: var(--borde);
  stroke-width: 1.3;
  stroke-linejoin: round;
  stroke-dasharray: var(--raya);
  vector-effect: non-scaling-stroke;
}
.d-raiz { fill: var(--raiz); }
.d-corona { fill: var(--corona); }
.d-marca { fill: var(--marca); }
.d-cruz { fill: none; stroke: var(--cruz); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* Cada estado cambia color Y forma. El color solo no vale: un odontólogo con
   daltonismo tiene que poder leer el mismo odontograma. Caries: punto en la
   corona. Obturado: corona rellena. Propuesto: contorno discontinuo.
   Ausente: pieza apagada y tachada. */
.odo-diente.caries { --borde: var(--error); --corona: var(--error-100); --marca: var(--error); }
.odo-diente.obturado { --borde: var(--azul); --corona: var(--azul); }
.odo-diente.plan { --borde: var(--dental-tinta); --corona: var(--dental-100); --raiz: var(--dental-100); --raya: 3 2; }
.odo-diente.ausente { --borde: var(--g-300); --corona: var(--g-100); --raiz: var(--g-100); --cruz: var(--g-500); }

.odo-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--g-200);
}
.odo-leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--g-600);
}
.odo-leyenda i {
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1.5px solid var(--g-300);
  background: var(--blanco);
  flex: none;
}
.odo-leyenda i.caries { border-color: var(--error); background: radial-gradient(circle, var(--error) 0 3px, var(--error-100) 3.5px); }
.odo-leyenda i.obturado { border-color: var(--azul); background: var(--azul); }
.odo-leyenda i.plan { border-color: var(--dental-tinta); background: var(--dental-100); border-style: dashed; }
.odo-leyenda i.ausente { background: var(--g-300); }

/* El presupuesto que sale del odontograma: la función que un sistema médico
   genérico no tiene. */
.odo-presu {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--g-200);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.odo-fila {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
}
.odo-fila b { font-weight: 700; color: var(--tinta); }
.odo-fila span { color: var(--g-500); }
.odo-fila .monto { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }
.odo-total {
  border-top: 1px solid var(--g-200);
  padding-top: 9px;
  margin-top: 3px;
  font-size: 15px;
}
.odo-total .monto { color: var(--dental-tinta); font-size: 17px; }

/* ── Maqueta: cobro en tres monedas ─────────────────────────────────────── */
.cob-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--g-200);
}
.cob-total b { font-size: 13px; font-weight: 700; color: var(--g-500); }
.cob-total .monto {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cob-lista { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.cob-linea {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 11px;
  align-items: center;
}
.cob-icono {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--g-100);
  color: var(--g-600);
  flex: none;
}
.cob-icono svg { width: 17px; height: 17px; }
.cob-icono.verde { background: var(--exito-100); color: var(--exito); }
.cob-icono.azul { background: var(--azul-100); color: var(--azul); }
.cob-que { display: block; font-size: 13.5px; font-weight: 700; color: var(--tinta); line-height: 1.25; }
.cob-nota { display: block; font-size: 12px; color: var(--g-500); margin-top: 1px; }
.cob-monto { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tinta); white-space: nowrap; }

.cob-tasa {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--g-200);
  font-size: 12px;
  color: var(--g-500);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cob-tasa svg { width: 14px; height: 14px; color: var(--azul); flex: none; }

/* ── Franja de compromisos ──────────────────────────────────────────────── */
/* Donde otros ponen cifras de clientes. Aquí no hay clientes todavía, así que
   en su lugar van los cuatro compromisos, que sí son verdad hoy. */
.compromisos {
  border-block: 1px solid rgba(255, 255, 255, .1);
  padding-block: 20px;
}
.compromisos-fila {
  display: grid;
  gap: 16px 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .compromisos-fila { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .compromisos-fila { grid-template-columns: repeat(4, 1fr); } }
.compromiso {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  color: var(--g-300);
}
.compromiso svg { width: 19px; height: 19px; flex: none; color: var(--azul-300); margin-top: 1px; }
.compromiso b { display: block; color: var(--blanco); font-weight: 700; margin-bottom: 2px; }

/* ── Bloque partido: texto y maqueta ────────────────────────────────────── */
.partido {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .partido { grid-template-columns: 1fr 1fr; }
  .partido.ancho-maqueta { grid-template-columns: .85fr 1.15fr; }
  .partido.invertido > *:first-child { order: 2; }
}

/* ── Aliados ────────────────────────────────────────────────────────────── */
.aliados-rejilla {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .aliados-rejilla { grid-template-columns: 1fr 1fr; } }
.aliado-t {
  background: var(--blanco);
  border: 1px solid var(--g-200);
  border-radius: var(--radio);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aliado-t .nombre { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); }
.aliado-t p { font-size: 14px; color: var(--g-500); }
.aliado-t .enlace { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.aliado-t .sin-enlace { font-size: 13px; color: var(--g-600); margin-top: 4px; }

/* ── Preguntas frecuentes ───────────────────────────────────────────────── */
/* Con <details> nativo: se abre y se cierra sin una línea de JavaScript, el
   teclado lo maneja solo y el lector de pantalla anuncia el estado. */
.faq { display: flex; flex-direction: column; gap: 10px; }
/* En escritorio, el título de la sección se queda a la vista mientras se leen
   las preguntas, y estas ocupan la columna ancha en vez de dejar medio ancho
   vacío. */
.faq-partido { display: grid; gap: clamp(24px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .faq-partido { grid-template-columns: .8fr 1.2fr; }
  .faq-partido > .seccion-cabeza { position: sticky; top: calc(var(--nav-h) + 28px); margin-bottom: 0; }
}
.faq details {
  background: var(--blanco);
  border: 1px solid var(--g-200);
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.faq details[open] { border-color: var(--azul); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-right: 2.5px solid var(--azul);
  border-bottom: 2.5px solid var(--azul);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { color: var(--azul); }
.faq .respuesta { padding: 0 20px 18px; }
.faq .respuesta p { font-size: 15px; color: var(--g-600); }
.faq .respuesta p + p { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ── Cierre ─────────────────────────────────────────────────────────────── */
.cierre-final {
  background: var(--azul);
  color: var(--blanco);
  text-align: center;
  padding-block: clamp(48px, 7vw, 80px);
}
.cierre-final h2 { color: var(--blanco); margin-bottom: 14px; }
.cierre-final p { color: rgba(255, 255, 255, .88); margin-inline: auto; }
.cierre-final .hero-botones { justify-content: center; margin-top: 26px; }
.cierre-final .btn-linea { border-color: rgba(255, 255, 255, .45); color: var(--blanco); }
.cierre-final .btn-linea:hover { border-color: var(--blanco); background: rgba(255, 255, 255, .1); color: var(--blanco); }
.cierre-final .compartir {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: var(--blanco);
}
.cierre-final .compartir:hover { border-color: var(--blanco); color: var(--blanco); }

/* ── Ajustes de ancho pequeño ───────────────────────────────────────────── */
@media (max-width: 560px) {
  /* El odontograma completo no cabe en un teléfono sin volverse ilegible:
     los dos arcos se parten en dos filas de ocho piezas. */
  .odo-arco { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 14px; }
  .odo { gap: 18px; }
  .maqueta { padding: 22px 14px 14px; }
  .ag-cita { grid-template-columns: 46px 1fr; }
  .ag-estado { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ── Maqueta: se recuperó el trabajo ────────────────────────────────────── */
/* El mensaje que aparece al volver la luz. Es el momento en que el sistema
   demuestra que valía la pena, así que se dibuja entero en vez de contarlo. */
.recu { display: flex; gap: 16px; align-items: flex-start; padding: 6px 2px; }
.recu-icono {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(17, 127, 58, .2);
  color: #5BD98A;
}
.recu-icono svg { width: 22px; height: 22px; }
.recu-t { font-size: 18px; font-weight: 800; color: var(--blanco); letter-spacing: -.02em; }
.recu-p { font-size: 14.5px; color: var(--g-300); margin-top: 7px; max-width: 42ch; }
.recu-p strong { color: var(--blanco); font-weight: 700; }
.recu-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Son botones de un dibujo, no controles: no se pueden pulsar ni reciben foco. */
.recu-botones .btn { pointer-events: none; min-height: 42px; padding: 11px 18px; font-size: 14px; }

@media (max-width: 480px) {
  .recu { flex-direction: column; gap: 14px; }
}

/* =============================================================================
   Piezas de la landing odontológica
   ============================================================================= */

/* ── Maqueta: periodontograma ───────────────────────────────────────────────
   Se mide la profundidad de sondaje en seis puntos por pieza. Hasta 3 mm es
   sano, 4 y 5 piden atención, de 6 en adelante hay bolsa periodontal. Un médico
   general no sabe qué es esto; un odontólogo lo llena todas las semanas, y un
   sistema que no lo traiga no le sirve. */
.perio { display: flex; flex-direction: column; gap: 12px; }
.perio-fila { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.perio-et {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g-500);
  line-height: 1.2;
}
.perio-piezas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.perio-pieza { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.perio-num { font-size: 9.5px; font-weight: 700; color: var(--g-500); font-variant-numeric: tabular-nums; }
.perio-puntos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; }
.perio-mm {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--g-100);
  color: var(--g-600);
}
/* Cada rango cambia fondo Y peso de borde, no solo color. */
.perio-mm.atencion { background: var(--medico-100); color: var(--medico-tinta); box-shadow: inset 0 0 0 1.5px var(--medico); }
.perio-mm.bolsa { background: var(--error-100); color: var(--error); box-shadow: inset 0 0 0 2px var(--error); }

.perio-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--g-200);
  font-size: 12px;
  color: var(--g-600);
}
.perio-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.perio-leyenda i {
  width: 13px; height: 13px;
  border-radius: 3px;
  background: var(--g-100);
  flex: none;
}
.perio-leyenda i.atencion { background: var(--medico-100); box-shadow: inset 0 0 0 1.5px var(--medico); }
.perio-leyenda i.bolsa { background: var(--error-100); box-shadow: inset 0 0 0 2px var(--error); }

/* ── Maqueta: recordatorio por WhatsApp ─────────────────────────────────── */
.wa-chat { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.wa-burbuja {
  align-self: flex-end;
  max-width: 88%;
  background: var(--exito-100);
  color: var(--tinta);
  border-radius: 14px 14px 4px 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.wa-burbuja.entrante {
  align-self: flex-start;
  background: var(--g-100);
  border-radius: 14px 14px 14px 4px;
}
.wa-hora { display: block; font-size: 10.5px; color: var(--g-600); margin-top: 5px; text-align: right; }
.wa-burbuja.entrante .wa-hora { text-align: left; }
.wa-resultado {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--g-200);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--g-600);
}
.wa-resultado svg { width: 16px; height: 16px; color: var(--exito); flex: none; }

/* ── Lista de funciones con estado ──────────────────────────────────────── */
/* Cada función dice si está construida o no. Una lista de funciones sin ese
   dato, en un producto que no existe, es una promesa disfrazada de catálogo. */
.funciones { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .funciones { grid-template-columns: 1fr 1fr; } }
.funcion {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--blanco);
  border: 1px solid var(--g-200);
  border-radius: var(--radio-sm);
}
.funcion-ic {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--dental-100);
  color: var(--dental-tinta);
}
.funcion-ic svg { width: 17px; height: 17px; }
.funcion b { display: block; font-size: 15px; font-weight: 700; color: var(--tinta); margin-bottom: 3px; }
.funcion p { font-size: 13.5px; color: var(--g-500); max-width: none; }
.funcion .estado {
  display: inline-block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--g-100);
  color: var(--g-600);
}
.funcion .estado.construyendo { background: var(--dental-100); color: var(--dental-tinta); }
.funcion .estado.despues { background: var(--g-100); color: var(--g-600); }

/* ── Bloque de precio pendiente ─────────────────────────────────────────── */
/* Donde irá la tabla de planes. Explica el modelo, que sí está decidido, y dice
   con todas las letras que el número todavía no. */
.precio-pendiente {
  border: 1px solid var(--g-200);
  border-radius: var(--radio);
  background: var(--blanco);
  padding: clamp(24px, 4vw, 34px);
  max-width: 70ch;
}
.precio-pendiente .modelo { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.precio-pendiente .modelo > div { display: flex; gap: 12px; align-items: flex-start; }
.precio-pendiente .modelo svg { width: 19px; height: 19px; flex: none; color: var(--dental-tinta); margin-top: 2px; }
.precio-pendiente .modelo b { font-weight: 700; color: var(--tinta); }
.precio-pendiente .modelo span { color: var(--g-600); font-size: 14.5px; }
.precio-pendiente .aviso-precio {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--g-200);
  font-size: 14.5px;
  color: var(--g-600);
}
.precio-pendiente .aviso-precio strong { color: var(--tinta); }

@media (max-width: 560px) {
  .perio-piezas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   Piezas de la landing de citas médicas
   ============================================================================= */

/* ── Diagrama: un motor, dos fachadas ───────────────────────────────────────
   Es la decisión de arquitectura del informe y merece un dibujo: lo común
   abajo, lo especializado arriba. Sin esto, «un mismo motor» es una frase. */
.motor { display: flex; flex-direction: column; gap: 10px; }
.motor-arriba { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.motor-modulo {
  border-radius: var(--radio-sm);
  padding: 15px 16px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.motor-modulo.dental { border-color: var(--dental); background: var(--dental-100); }
.motor-modulo.medico { border-color: var(--medico); background: var(--medico-100); }
.motor-modulo .et {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.motor-modulo.dental .et { color: var(--dental-tinta); }
.motor-modulo.medico .et { color: var(--medico-tinta); }
.motor-modulo ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.motor-modulo li { font-size: 13px; color: var(--g-700); line-height: 1.35; }

/* La flecha que dice que los dos se apoyan en lo mismo */
.motor-union {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--g-500);
  justify-content: center;
}
.motor-union::before,
.motor-union::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--g-200);
}

.motor-base {
  border-radius: var(--radio-sm);
  border: 1.5px solid var(--azul);
  background: var(--azul-100);
  padding: 16px;
}
.motor-base .et {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-600);
  margin-bottom: 10px;
  display: block;
}
.motor-base-rejilla {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.motor-base-rejilla span {
  font-size: 13px;
  color: var(--g-700);
  display: flex;
  align-items: center;
  gap: 7px;
}
.motor-base-rejilla svg { width: 14px; height: 14px; flex: none; color: var(--azul); }
.motor-pct {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #C7D3FF;
  font-size: 12.5px;
  color: var(--azul-600);
  font-weight: 700;
}

/* ── Maqueta: ficha de consulta por especialidad ───────────────────────────
   Los signos vitales son iguales en toda consulta; lo que cambia según la
   especialidad son los campos de abajo. Ese es justo el punto del producto. */
.ficha-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ficha-tab {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--g-100);
  color: var(--g-600);
  border: 1px solid transparent;
}
.ficha-tab.activa { background: var(--medico-100); color: var(--medico-tinta); border-color: var(--medico); }

.vitales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vital {
  background: var(--g-100);
  border-radius: 10px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vital .et { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--g-600); }
.vital .val { font-size: 16px; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.15; }
.vital .val small { font-size: 11px; font-weight: 600; color: var(--g-600); }
.vital.alerta { background: var(--medico-100); }
.vital.alerta .val { color: var(--medico-tinta); }

.ficha-especialidad {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--g-200);
}
.ficha-especialidad .et {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--medico-tinta);
  display: block;
  margin-bottom: 10px;
}
.ficha-campos { display: flex; flex-direction: column; gap: 9px; }
.ficha-campo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13.5px;
}
.ficha-campo span { color: var(--g-600); }
.ficha-campo b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ficha-nota {
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--g-100);
  font-size: 12.5px;
  color: var(--g-600);
  line-height: 1.4;
}

/* ── Aviso de estado del producto ───────────────────────────────────────── */
/* Va arriba del todo, no escondido al final: quien entra buscando un sistema
   de citas tiene que saber en la primera pantalla que todavía no se vende. */
.estado-producto {
  border: 1.5px solid var(--medico);
  background: var(--medico-100);
  border-radius: var(--radio);
  padding: clamp(20px, 3.5vw, 28px);
  color: var(--tinta);
  max-width: 70ch;
}
.estado-producto .et {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--medico-tinta);
  margin-bottom: 12px;
}
.estado-producto .et svg { width: 15px; height: 15px; }
.estado-producto h3 { margin-bottom: 8px; }
.estado-producto p { color: var(--g-600); font-size: 15px; }
.estado-producto p + p { margin-top: 10px; }

@media (max-width: 560px) {
  .motor-arriba { grid-template-columns: 1fr; }
  .vitales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motor-base-rejilla { grid-template-columns: 1fr; }
}

/* =============================================================================
   Página de preguntas frecuentes
   ============================================================================= */

/* ── Buscador y filtros ─────────────────────────────────────────────────── */
/* Sin JavaScript el buscador y los chips no filtran nada, así que no se
   muestran: ofrecer un control que no hace nada es peor que no ofrecerlo.
   Las preguntas se leen igual, porque <details> es nativo. */
.faq-barra,
.faq-cuenta { display: none; }
.js .faq-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 26px;
}
.js .faq-cuenta { display: block; }

.buscador {
  position: relative;
  flex: 1 1 260px;
  min-width: 0;
}
.buscador svg {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--g-400);
  pointer-events: none;
}
.buscador input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px 13px 44px;
  border-radius: 999px;
  border: 1px solid var(--g-200);
  background: var(--blanco);
  color: var(--tinta);
  font-family: inherit;
  font-size: 15px;
}
.buscador input::placeholder { color: var(--g-400); }
.buscador input:focus { border-color: var(--azul); outline-offset: 1px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-filtro {
  /* 44 px de alto de toque aunque la letra mida 13. */
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--g-200);
  background: var(--blanco);
  color: var(--g-600);
  font-size: 13.5px;
  font-weight: 700;
}
.chip-filtro:hover { border-color: var(--azul); color: var(--azul); }
.chip-filtro[aria-pressed="true"] {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--blanco);
}

/* ── Grupos y resultados ────────────────────────────────────────────────── */
.faq-grupo {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--g-500);
  margin: 26px 0 12px;
}
.faq-grupo:first-of-type { margin-top: 0; }

.faq-vacio {
  border: 1px dashed var(--g-300);
  border-radius: var(--radio-sm);
  padding: 28px 24px;
  text-align: center;
  color: var(--g-500);
  background: var(--blanco);
}
.faq-vacio strong { display: block; color: var(--tinta); margin-bottom: 6px; }

/* El recuento se anuncia a los lectores de pantalla al filtrar, que si no se
   quedan sin saber que la lista cambió. */
.faq-cuenta { font-size: 13.5px; color: var(--g-500); }

/* ── Dónde seguir preguntando ───────────────────────────────────────────── */
.faq-otras {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 760px) { .faq-otras { grid-template-columns: repeat(3, 1fr); } }
.faq-otra {
  border: 1px solid var(--g-200);
  border-radius: var(--radio-sm);
  background: var(--blanco);
  color: var(--tinta);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}
.faq-otra:hover { border-color: var(--azul); text-decoration: none; }
.faq-otra b { font-size: 15px; font-weight: 700; }
.faq-otra span { font-size: 13.5px; color: var(--g-500); }


/* ── Formulario de contacto ───────────────────────────────────────────────
   Fase 8 (parcial). Ni un color literal: todo sale de los tokens.

   Regla de la casa que aplica aquí: TODO bloque de superficie clara fija su
   color de texto en vez de heredarlo. Estos campos pueden acabar dentro de una
   banda oscura y, si heredaran, el texto saldría blanco sobre fondo blanco —
   que es exactamente lo que le pasó a una tabla y se publicó vacía a la vista.
   ───────────────────────────────────────────────────────────────────────── */
.form-contacto {
  max-width: 640px;
  display: grid;
  gap: 22px;
}

.campo { display: grid; gap: 7px; }

.campo label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta);
}
.campo label span { color: var(--error); }

.campo input,
.campo textarea {
  width: 100%;
  min-height: 48px;              /* zona táctil: nunca por debajo de 44 */
  padding: 12px 14px;
  border: 1px solid var(--g-300);
  border-radius: 10px;
  background: var(--blanco);
  color: var(--tinta);           /* fijado, no heredado */
  font: inherit;
  font-size: 15.5px;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.5; }

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
  border-color: var(--azul);
}

.campo-ayuda { font-size: 13.5px; color: var(--g-600); }

/* La trampa para robots se saca de la vista SIN `display:none`: algunos robots
   omiten lo que está oculto así, y entonces la trampa no atrapa a nadie. */
.campo-trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* El input tambien se encoge, no solo su envoltura: con la caja a tamano
   normal, el medidor de areas tactiles lo acusaba de 203x24 px. Recortarlo a
   la vista no cambia lo que mide. Sigue atrapando robots: los rellenan por
   nombre, no por lo que se ve. */
.campo-trampa input {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
}

.form-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form-aviso {
  margin: 0;
  font-size: 14.5px;
  color: var(--g-600);
}
.form-aviso.es-error { color: var(--error); font-weight: 600; }
.form-aviso.es-exito { color: var(--exito); font-weight: 600; }

/* El correo, en grande y a un clic. */
.correo-directo {
  margin: 0 0 34px;
  font-size: clamp(19px, 3vw, 24px);
  font-weight: 700;
  word-break: break-all;
}
.correo-directo a { color: var(--azul-600); }