/* =====================================================================
   Landing comercial · hoja única, zero-build.
   Hero y beneficios: calco del board landing-zita (390 lógicos, escala 2).
   Planes, Meta, instalación y preguntas: hojas nuevas de SA-L1 (spec §12),
   mismas variables y mismo ritmo; no tienen board golden todavía.
   Tokens: skin «quedo» LIGHT, paleta Índigo (zita/docs/marca/identidad-quedo-2026-10-25.md §3 «Propuesta I»,
           decisión del user 25-oct) — hexes literales; ningún color fuera de estas vars (+ hover/active del botón).
           Solo modo claro (`color-scheme: light`): el wordmark oscuro no se usa aquí.
   Mobile-first (390) + 1 breakpoint desktop (768).
   ===================================================================== */

/* ------------------------------ tokens ------------------------------ */
:root {
  /* quedo LIGHT (Índigo + hueso) */
  --background:         #faf8f4;
  --foreground:         #1b1a2e;
  --card:               #ffffff;
  --card-foreground:    #1b1a2e;
  --primary:            #4338ca;
  --primary-foreground: #ffffff;
  --secondary:          #f1eee8;
  --muted:              #f1eee8;
  --muted-foreground:   #5f5d73;
  --accent:             #e9e8fb;
  --accent-foreground:  #2d2788;
  --border:             #e4e0d8;
  --input:              #e4e0d8;
  --ring:               #4338ca;

  /* medidas del golden a 390 */
  --gutter: 24px;          /* margen lateral → ancho de contenido 342 */
  --radio-card: 12px;
  --radio-fila: 10px;

  --fuente: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* A propósito SIN `overflow-x: hidden`: enmascararía el defecto que el DoD
     pide medir. No hay overflow por construcción (todo es % / max-width). */
}

/* El atributo hidden tiene que ganar a los `display` de las clases de abajo
   (la UA lo pierde contra el CSS de autor): el estado degradado depende de él. */
[hidden] { display: none !important; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }

:focus-visible {
  outline: 2px solid var(--foreground);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salto-contenido {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--primary); color: var(--primary-foreground);
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  transition: top .15s ease;
}
.salto-contenido:focus { top: 8px; }

.contenedor { max-width: 100%; padding: 0 var(--gutter); margin: 0 auto; }

/* ------------------------------ botones ------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; text-align: center;
  cursor: pointer; user-select: none;
}

.boton--primario {
  width: 100%; height: 52px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: var(--radio-card);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.boton--primario:hover { background: #3730a3; }
.boton--primario:active { background: #312e81; }

.boton--ghost {
  height: 36px; padding: 0 12px;
  color: var(--primary);
  font-size: 13px; font-weight: 600;
  border-radius: 8px;
}
.boton--ghost:hover { background: var(--secondary); }

.boton--secundario {
  width: 100%; height: 52px;
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: var(--radio-card);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.boton--secundario:hover { background: var(--secondary); }

/* ------------------------------- hero ------------------------------- */
.hero {
  background: var(--accent);
  padding: 40px var(--gutter) 45px;
  text-align: center;
}
.hero__inner { max-width: 342px; margin: 0 auto; }

.pildora {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 14px;
  border: 1px solid var(--primary); border-radius: 999px;
  color: var(--accent-foreground);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1;
}

/* El logo (SVG a contornos, wordmark claro): 220 px de ancho a 390 y 300 px en desktop — nunca por debajo de 90 px
   (regla del informe de identidad: más chico, la palomita se confunde con un acento torcido). El lienzo del SVG ya trae
   su margen, por eso el margen superior es menor que el del texto que reemplazó. */
.wordmark {
  display: block; margin: 18px auto 0;
  width: 220px; max-width: 100%; height: auto;
}

.hero__titular {
  margin-top: 14px;
  font-size: 28px; font-weight: 800; line-height: 1.28; letter-spacing: -.02em;
  /* SIN `text-wrap: balance` a 390: el golden corta «Tu página de reservas /
     profesional. Sin / comisiones.» (corte natural). Balance lo reescribe. */
}

.hero__sub {
  margin: 16px auto 0; max-width: 310px;
  color: var(--muted-foreground);
  font-size: 15px; font-weight: 400; line-height: 1.45;
}

.hero__acciones { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }

.micro {
  margin-top: 16px;
  color: var(--muted-foreground);
  font-size: 12px; font-weight: 500; line-height: 1.4;
}

/* ----------------------------- secciones ----------------------------- */
/* Aire entre secciones: medido del golden (hero→548, beneficios→1110). Planes y
   preguntas llevan más aire (76) porque abren un bloque nuevo, no continúan el anterior. */
.seccion { padding-top: 48px; }
.seccion--planes, .seccion--faq { padding-top: 76px; }

.eyebrow {
  color: var(--primary);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.2;
}

.seccion__titular {
  margin-top: 16px;
  /* letter-spacing 0 (no -.015em): el golden corta «Una barbería de 3 sillas
     paga / por mes» y con tracking negativo entra «por» en la 1ª línea. */
  font-size: 22px; font-weight: 700; line-height: 1.3;
}

/* ---------------------------- beneficios ---------------------------- */
.beneficios {
  margin-top: 42px;
  display: flex; flex-direction: column; gap: 16px;
}

.beneficio {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  min-height: 84px;
  padding: 15px 16px;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radio-card);
}
.beneficio__icono { width: 22px; height: 22px; color: var(--primary); margin-top: 1px; }
.beneficio__titulo { font-size: 15px; font-weight: 700; line-height: 1.3; }
.beneficio__desc {
  margin-top: 3px; max-width: 262px;
  color: var(--muted-foreground);
  font-size: 13px; font-weight: 400; line-height: 1.35;
}

/* ------------------------------ tarjetas ------------------------------ */
.tarjeta {
  margin-top: 0;
  padding: 16px;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radio-card);
}
.tarjeta__titulo { font-size: 17px; font-weight: 700; line-height: 1.3; }
.tarjeta__sub {
  margin-top: 6px;
  color: var(--muted-foreground);
  font-size: 13px; font-weight: 400; line-height: 1.4;
}

/* ------------------------------- listas con check ------------------------------- */
.checks { display: flex; flex-direction: column; gap: 10px; }
.checks li {
  display: grid; grid-template-columns: 15px 1fr; column-gap: 11px; align-items: start;
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.checks__icono { width: 15px; height: 15px; margin-top: 2px; color: var(--primary); }
.checks--seccion { margin-top: 28px; }
.checks--seccion li { font-size: 14px; }

/* ------------------------------- planes ------------------------------- */
.seccion__sub {
  margin-top: 14px;
  color: var(--muted-foreground);
  font-size: 14px; line-height: 1.45;
}

.planes__degradado {
  margin-top: 28px; padding: 20px 16px;
  background: var(--card); border: 1px dashed var(--border); border-radius: var(--radio-card);
  text-align: center;
}
.planes__aviso { font-size: 16px; font-weight: 700; line-height: 1.35; }
.planes__contacto { margin-top: 16px; height: 48px; }

.planes__contenido { margin-top: 0; }

/* calculadora: − N + */
.calc {
  margin-top: 24px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--secondary); border-radius: var(--radio-card);
}
.calc__etiqueta { font-size: 14px; font-weight: 600; line-height: 1.3; }
.calc__control { display: flex; align-items: center; gap: 4px; flex: none; }
.calc__btn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--primary);
  border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; cursor: pointer;
}
.calc__btn svg { width: 18px; height: 18px; }
.calc__btn:hover:not(:disabled) { border-color: var(--primary); }
.calc__btn:disabled { color: var(--muted-foreground); opacity: .45; cursor: not-allowed; }
.calc__valor {
  min-width: 44px; text-align: center;
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
}

.planes { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.plan {
  min-width: 0; padding: 18px 16px 16px;
  display: flex; flex-direction: column;
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radio-card);
}
.plan--recomendado { border: 1.5px solid var(--primary); }

.plan__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.plan__nombre { font-size: 17px; font-weight: 700; line-height: 1.3; }
.plan__etiqueta {
  flex: none; height: 22px; padding: 0 10px;
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--accent-foreground);
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1;
}

.plan__precio { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.plan__cifra { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.plan__periodo { color: var(--muted-foreground); font-size: 14px; font-weight: 600; }
.plan__total {
  margin-top: 12px; padding: 10px 12px;
  background: var(--accent); color: var(--accent-foreground);
  border-radius: var(--radio-fila);
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
.plan__total strong { font-weight: 800; }

.plan .checks { margin-top: 18px; }
.plan__cta { margin-top: 18px; height: 48px; }

/* --------------------- «¿Quieres que lo hagamos por ti?» / Aparte --------------------- */
.tarjeta--ventas { border: 1.5px solid var(--primary); }
.tarjeta--ventas .checks { margin-top: 16px; }
.tarjeta--ventas .plan__cta { margin-top: 20px; }
.tarjeta--aparte .checks { margin-top: 16px; }

/* -------------------------------- preguntas -------------------------------- */
.faq { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: var(--radio-card);
}
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 16px;
  font-size: 14px; font-weight: 700; line-height: 1.35;
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: none;
  color: var(--primary); font-size: 20px; font-weight: 700; line-height: 1;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p {
  padding: 0 16px 16px;
  color: var(--muted-foreground);
  font-size: 13px; line-height: 1.5;
}
.faq__enlace { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------- footer ------------------------------- */
.pie { margin-top: 80px; padding-bottom: 56px; }
.pie__fila {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.pie__copy { color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.pie__enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.pie__enlace {
  color: var(--muted-foreground);
  font-size: 12px; font-weight: 500; line-height: 2;
}
.pie__enlace:hover { color: var(--primary); }
.pie__enlaces .boton--ghost { margin-left: -12px; }

.eyebrow__nombre { text-transform: uppercase; }

/* =====================================================================
   DESKTOP (≥768) — misma paleta, mismos tokens; el golden manda a 390.
   Adaptación: contenedor centrado 1080, hero más aireado con botones en
   fila, beneficios en grilla 2×2, planes en 2 columnas (un plan solo se centra), preguntas a 760.
   ===================================================================== */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  .contenedor { max-width: 1080px; }

  .hero { padding: 76px var(--gutter) 88px; }
  .hero__inner { max-width: 720px; }
  .pildora { height: 30px; padding: 0 18px; font-size: 11px; }
  .wordmark { margin-top: 20px; width: 300px; }
  .hero__titular { margin-top: 18px; font-size: 44px; line-height: 1.18; }
  .hero__sub { margin-top: 20px; max-width: 520px; font-size: 18px; }
  .hero__acciones { margin-top: 40px; flex-direction: row; justify-content: center; gap: 16px; }
  .hero__acciones .boton--primario,
  .hero__acciones .boton--secundario { width: auto; min-width: 240px; padding: 0 36px; height: 56px; font-size: 17px; }
  .micro { margin-top: 18px; font-size: 13px; }

  .seccion { padding-top: 88px; }
  .seccion--planes, .seccion--faq { padding-top: 96px; }

  /* Encabezados de sección centrados: con el contenido a 1080 el eyebrow
     pegado al margen izquierdo queda huérfano del bloque que titula. */
  .seccion .eyebrow, .seccion__titular, .seccion__sub { text-align: center; }
  .seccion__titular {
    margin-top: 14px; font-size: 36px; line-height: 1.22;
    max-width: 720px; margin-inline: auto; text-wrap: balance;
  }
  .hero__titular { text-wrap: balance; }
  .seccion__sub { max-width: 680px; margin-inline: auto; font-size: 16px; }

  /* Grilla 2×2 acotada a 900: a 1080 la línea de la descripción queda
     demasiado larga para 13-14px y la tarjeta se ve vacía. */
  .beneficios {
    margin: 48px auto 0; max-width: 900px;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  }
  .beneficio { min-height: 108px; padding: 22px 24px; gap: 16px; grid-template-columns: 24px 1fr; }
  .beneficio__icono { width: 24px; height: 24px; }
  .beneficio__titulo { font-size: 17px; }
  .beneficio__desc { font-size: 14px; max-width: none; margin-top: 5px; }

  .tarjeta { margin: 0 auto; max-width: 640px; padding: 28px; }
  .tarjeta__titulo { font-size: 20px; }
  .tarjeta__sub { font-size: 14px; }
  .checks li { font-size: 14px; }
  .checks--seccion { margin: 32px auto 0; max-width: 640px; gap: 12px; }
  .checks--seccion li { font-size: 15px; }

  .planes__degradado { margin: 36px auto 0; max-width: 640px; padding: 28px; }
  .planes__aviso { font-size: 19px; }
  .planes__contacto { width: auto; min-width: 280px; padding: 0 32px; }

  .calc { margin: 32px auto 0; max-width: 640px; padding: 16px 24px; }
  .calc__etiqueta { font-size: 15px; }

  .planes { margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .plan { padding: 24px; }
  .plan__nombre { font-size: 19px; }
  .plan__cifra { font-size: 38px; }
  /* el botón se pega al fondo de la tarjeta (auto); el margen de la lista es el aire mínimo hasta él */
  .plan .checks { margin-bottom: 18px; }
  .plan__cta { margin-top: auto; }
  /* Dos tarjetas (Agenda y Agenda + Redes) van lado a lado. UNA sola (sin contacto de ventas, Agenda + Redes no se pinta):
     ocupa la fila entera, centrada y con ancho de tarjeta; en la media columna de la izquierda se vería descolgada. */
  .planes > .plan:only-child { grid-column: 1 / -1; width: 100%; max-width: 440px; justify-self: center; }

  .tarjeta--ventas .plan__cta { margin-top: 24px; width: auto; min-width: 240px; padding: 0 32px; }

  .faq { margin: 36px auto 0; max-width: 760px; }
  .faq__item summary { font-size: 16px; padding: 14px 20px; }
  .faq__item p { padding: 0 20px 20px; font-size: 14px; }

  .pie { margin-top: 112px; padding-bottom: 56px; }
  .pie__fila { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 32px; }
  .pie__copy { font-size: 13px; }
  .pie__enlace { font-size: 13px; }
  .boton--ghost { font-size: 14px; height: 40px; padding: 0 14px; }
}

/* =====================================================================
   PÁGINAS LEGALES (/legal/<documento>) — generadas por zita/ops/legales-a-sitio.py --landing.
   Mismos tokens y mismo pie que la página principal; una sola columna de lectura.
   ===================================================================== */
.legal__cabecera { background: var(--accent); }
.legal__cabecera-fila { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding-block: 6px; }
.legal__marca { display: inline-flex; align-items: center; }
.legal__marca img { display: block; width: 128px; height: auto; }
.legal__cabecera .boton--ghost { margin-right: -12px; }

.legal { padding-top: 32px; }
.legal__contenedor { max-width: 760px; }
.legal__contenedor > * { min-width: 0; }
.legal__titulo { font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.legal__version { margin-top: 8px; color: var(--muted-foreground); font-size: 13px; font-weight: 500; }

.legal__indice {
  margin-top: 24px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radio-card);
}
.legal__indice-titulo { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-foreground); }
.legal__indice ol { margin: 10px 0 0; padding: 0; list-style: none; }
.legal__indice li { font-size: 14px; line-height: 1.4; }
.legal__indice a { display: block; padding: 6px 0; color: var(--foreground); overflow-wrap: anywhere; }
.legal__indice a:hover { color: var(--primary); }

.legal__seccion { margin-top: 36px; scroll-margin-top: 16px; }
.legal__seccion h2 { font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; scroll-margin-top: 16px; overflow-wrap: anywhere; }
.legal__num { color: var(--primary); font-variant-numeric: tabular-nums; margin-right: 4px; }
.legal__seccion p, .legal__seccion li { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.legal__seccion p { margin-top: 12px; }
.legal__seccion ul, .legal__seccion ol { margin: 12px 0 0; padding-left: 22px; }
.legal__seccion ul { list-style: disc; }
.legal__seccion li + li { margin-top: 6px; }
.legal__seccion li > ul { margin-top: 6px; }
.legal__seccion a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.legal__seccion code { font-size: .92em; background: var(--muted); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

/* Tablas: ancho propio con desplazamiento horizontal dentro de su caja (no empujan la página a 390). */
.legal__tabla { margin-top: 14px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radio-fila); }
.legal__tabla table { border-collapse: collapse; width: 100%; min-width: 520px; }
.legal__tabla th, .legal__tabla td { padding: 10px 12px; text-align: left; vertical-align: top; font-size: 13px; line-height: 1.45; border-bottom: 1px solid var(--border); }
.legal__tabla th { background: var(--secondary); font-weight: 700; }
.legal__tabla tr:last-child td { border-bottom: 0; }

.pie__enlace[aria-current="page"] { color: var(--foreground); font-weight: 700; }

@media (min-width: 768px) {
  .legal { padding-top: 56px; }
  .legal__cabecera-fila { max-width: 1080px; }
  .legal__titulo { font-size: 34px; }
  .legal__indice { padding: 20px 24px; }
  .legal__seccion h2 { font-size: 21px; }
  .legal__seccion p, .legal__seccion li { font-size: 16px; }
  .legal__tabla th, .legal__tabla td { font-size: 14px; }
}