/*
 * folleto.css — hoja de estilos compartida por todos los folletos comerciales.
 *
 * NO DECLARA COLORES PROPIOS (ADR 0087 · D11). Cada valor sale de las variables
 * del sitio público, que el generador extrae de su `:root` y escribe inline en
 * cada página. Los fallbacks de los `var()` son la red para cuando el sitio no
 * está a mano: los de la guía de marca, no inventados.
 *
 * Relacionados:
 *   .claude/docs/comercial/_layout/_folleto.php   plantilla que la consume
 *   .claude/tools/folleto.php                     el generador
 *   .claude/docs/adr/0087-folletos-comerciales-por-modulo.md  (anexo B)
 */

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

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    color: var(--ink, #0B1437);
    background: var(--white, #fff);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Space Grotesk", "Inter", sans-serif; line-height: 1.15; }

a { color: var(--brand-bright, #137FEC); }

/* Ancho de lectura: 66 caracteres, como pide el anexo B. */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.lectura { max-width: 66ch; }

/* ---------- banda de borrador (sólo --preview) ---------- */
.borrador {
    background: var(--m-flotas, #F45E49);
    color: #fff;
    padding: 10px 20px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    text-align: center;
}

/* ---------- encabezado ---------- */
.hero { padding: 56px 0 36px; border-bottom: 1px solid var(--line, #e6eaf3); }
.eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted, #6c769a);
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); margin: 10px 0 14px; }
.hero .frase { font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-soft, #3a4467); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--line, #e6eaf3);
    border-radius: 999px;
    color: var(--ink-soft, #3a4467);
}
.chip.acento { border-color: var(--acento, #2B3F9A); color: var(--acento, #2B3F9A); }

/* ---------- secciones ---------- */
.seccion { padding: 40px 0; }
.seccion > h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 18px; }

/* La línea de ruta de la landing, reutilizada como separador (anexo B). */
.ruta { display: block; width: 100%; height: 26px; overflow: visible; }
.ruta path { fill: none; stroke: var(--acento, #137FEC); stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.ruta circle { fill: var(--white, #fff); stroke: var(--acento, #137FEC); stroke-width: 2.2; }

/* ---------- tarjetas ---------- */
.tarjetas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tarjeta {
    border: 1px solid var(--line, #e6eaf3);
    border-radius: var(--r, 18px);
    padding: 18px 20px;
    background: var(--paper, #F6F8FC);
}
.tarjeta h3 { margin: 0 0 6px; font-size: 17px; }
.tarjeta p { margin: 0; color: var(--ink-soft, #3a4467); }

/* ---------- tabla de funciones ---------- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line, #e6eaf3); vertical-align: top; }
th { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #6c769a); }
td:first-child { font-weight: 600; white-space: nowrap; }

/* ---------- preguntas ---------- */
details {
    border-bottom: 1px solid var(--line, #e6eaf3);
    padding: 14px 0;
}
details summary { cursor: pointer; font-weight: 600; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; color: var(--acento, #137FEC); font-family: "IBM Plex Mono", monospace; }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; color: var(--ink-soft, #3a4467); }

/* ---------- llamado a la acción ---------- */
.cta {
    margin: 48px 0 60px;
    padding: 32px;
    border-radius: var(--r-lg, 28px);
    background: var(--ink, #0B1437);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
}
.cta h2 { margin: 0; color: #fff; }
.cta a {
    background: var(--acento, #137FEC);
    color: #fff;
    text-decoration: none;
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 600;
}

footer { padding: 28px 0 44px; color: var(--muted, #6c769a); font-size: 14px; border-top: 1px solid var(--line, #e6eaf3); }

/* ---------- modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
    body { background: #0B1437; color: #eef1f8; }
    .tarjeta { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
    .chip, th, td, details, footer, .hero { border-color: rgba(255,255,255,.12); }
    .hero .frase, .tarjeta p, details p { color: #cdd6f5; }
    .cta { background: rgba(255,255,255,.06); }
    .ruta circle { fill: #0B1437; }
}

/* ---------- impresión: dos carillas, sin banda ni llamado ---------- */
@media print {
    .borrador, .cta, .ruta { display: none; }
    body { font-size: 11pt; }
    .seccion { padding: 14px 0; break-inside: avoid; }
    details { break-inside: avoid; }
    details summary::after { content: ""; }
    details > p { display: block !important; }   /* en papel las preguntas van abiertas */
    .tarjetas { grid-template-columns: 1fr 1fr; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

@media (max-width: 640px) {
    .hero { padding: 34px 0 24px; }
    .cta { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   BARRA DE ARRIBA — logo y vuelta al sitio
   ---------------------------------------------------------------------
   Sin esto el folleto era una página huérfana: se llegaba desde la web y
   no había cómo volver, ni nada que dijera de qué sitio es. Agregada el
   2026-09-22.

   Los colores salen de las variables del sitio, como todo el resto de
   este archivo: acá no se declara ninguno propio (ADR 0087 · D11).
   ===================================================================== */

.topbar {
    border-bottom: 1px solid var(--line, #e6eaf3);
    background: var(--white, #fff);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.topbar .brand {
    display: inline-flex;
    align-items: center;
    color: var(--ink, #0B1437);
    text-decoration: none;
}

/* El SVG del logo viene sin medidas: se las pone acá. */
.topbar .logo-word { height: 26px; width: auto; display: block; }

.topbar-links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.topbar-links a {
    color: var(--muted, #6c769a);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
}

.topbar-links a:hover { color: var(--brand-bright, #137FEC); }

/* En el celular el logo manda y "Todas las soluciones" es lo primero que
   sobra: queda el "Inicio", que es la salida que siempre tiene que estar. */
@media (max-width: 560px) {
    .topbar-links a:not(:last-child) { display: none; }
    .topbar .logo-word { height: 22px; }
}