/* =========================================================
   Aonnix — Hoja compartida para páginas legales / soporte / términos
   Documento editorial refinado. CSS vanilla. Sin JS.
   ========================================================= */

:root {
    /* Paleta alineada con AONNIX Phase 1 Brand Kit (Minimal Tech Modular) — sitio aonnix.com */
    --paper:        #F5F5F3;        /* soft-white del brand kit */
    --paper-soft:   #ffffff;
    --surface:      #fafafa;
    --surface-mute: #f0f0f1;
    --ink:          #0D0D0F;        /* graphite del brand kit */
    --ink-muted:    #4b4b52;
    --ink-faint:    #A1A1AA;        /* cold-silver del brand kit */
    --rule:         #e6e6ea;
    --rule-strong:  #cfcfd4;
    /* `--gold` se conserva como nombre histórico (compatibilidad con selectores existentes)
       pero hoy apunta al premium blue del sistema — actúa como accent activo en eyebrows,
       subrayados de h2, drop caps y guiones decorativos */
    --gold:         #2563EB;
    --gold-text:    #2563EB;
    --gold-soft:    rgba(37, 99, 235, 0.08);

    /* Tipografía — Inter como principal alineado con styles.css del home */
    --serif-stack:  "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono-stack:   ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* Espaciado */
    --measure:      38rem;        /* ancho óptimo de lectura */
    --space-0:      0.25rem;
    --space-1:      0.5rem;
    --space-2:      1rem;
    --space-3:      1.5rem;
    --space-4:      2.25rem;
    --space-5:      3.5rem;
    --space-6:      5rem;

    --radius-sm:    8px;
    --radius:       12px;
    --radius-lg:    20px;

    --t-fast:       180ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base:       320ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #0D0D0F;
        --paper-soft:   #101013;
        --surface:      #131316;
        --surface-mute: #18181b;
        --ink:          #F5F5F3;
        --ink-muted:    #b8b8c0;
        --ink-faint:    #A1A1AA;
        --rule:         #1d1d22;
        --rule-strong:  #2c2c33;
        /* En dark mode el accent se ilumina ligeramente para mantener contraste */
        --gold:         #3b82f6;
        --gold-text:    #60a5fa;
        --gold-soft:    rgba(59, 130, 246, 0.12);
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--serif-stack);
    font-weight: 400;
    /* Bumpear ligeramente el tamaño base — Inter es más estrecha que Space Grotesk,
       1.05rem mejora la legibilidad de los párrafos largos legales. */
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "cv11";

    /* Textura sutil de papel mediante SVG inline (sin recurso adicional) */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

::selection {
    background: var(--gold-soft);
    color: var(--ink);
}

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

/* ---------- Estado activo de nav embebido (header del sitio principal reusado) ---------- */
.nav-links a.active {
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 1px;
}

/* ---------- Top bar / breadcrumb (legacy — se conserva por si se referencia en otra parte) ---------- */
.topbar {
    position: relative;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    padding: 1.05rem clamp(1.25rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand {
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: color var(--t-fast);
}

/* En las páginas legales el .brand debe verse idéntico al del sitio principal (sin rombo). */
.brand::before { display: none; }

.crumbs {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.crumbs a {
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.crumbs a:hover { color: var(--gold-text); border-bottom-color: var(--gold); }

.crumb-sep {
    color: var(--gold);
    font-weight: 600;
}

/* ---------- Page shell ---------- */
.page {
    position: relative;
    padding-bottom: var(--space-6);
}

.shell {
    max-width: var(--measure);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, var(--space-6)) clamp(1.25rem, 5vw, 2rem) var(--space-5);
}

/* ---------- Hero (centrado) ---------- */
.hero {
    margin-bottom: var(--space-5);
    text-align: center;
}

.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.hero .eyebrow::before {
    content: "";
    width: 36px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.hero h1 {
    font-size: clamp(2rem, 4.5vw, 2.85rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 auto 1rem;
    max-width: 22ch;
}

.hero .meta {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
}

.hero .meta::before {
    content: "—";
    margin-right: 0.5rem;
    color: var(--gold);
}

/* ---------- Sections (cards) ---------- */
.section {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    margin-bottom: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* Numerales de sección estilo manuscrito (visibles en desktop ancho) */
.section .num {
    display: inline-block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: var(--gold-text);
    font-weight: 600;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.section h2 {
    font-size: clamp(1.2rem, 2.4vw, 1.45rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin: 0 0 1.1rem;
    padding-bottom: 0.7rem;
    position: relative;
}

.section h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.section h3 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    margin: 1.5rem 0 0.55rem;
    letter-spacing: -0.005em;
}

/* (Drop cap eliminada: las páginas legales son texto informativo simple,
   no editorial. La primera letra de cada sección se trata como texto normal.) */

/* ---------- Body type ---------- */
.section p {
    color: var(--ink);
    margin-bottom: 1rem;
    max-width: 60ch;
}

.section p:last-child { margin-bottom: 0; }

.section ul,
.section ol {
    margin: 0 0 1.1rem 1.6rem;
    color: var(--ink);
}

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

.section ul > li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.55rem;
    line-height: 1.65;
    max-width: 60ch;
}

.section ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.78em;
    width: 7px;
    height: 1px;
    background: var(--gold);
}

.section ol {
    counter-reset: rom;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.section ol > li {
    counter-increment: rom;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.55rem;
    line-height: 1.65;
    max-width: 60ch;
}

.section ol > li::before {
    content: counter(rom, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--gold-text);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    width: 2rem;
}

.section a {
    color: var(--gold-text);
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 1px;
    transition: color var(--t-fast), background-color var(--t-fast);
}

.section a:hover {
    background: var(--gold-soft);
    color: var(--ink);
}

.section strong { font-weight: 600; color: var(--ink); }

/* Reemplaza italic sintética por peso, conserva carácter */
.section em {
    font-style: normal;
    font-weight: 600;
    color: var(--gold-text);
    letter-spacing: 0.005em;
}

.section code {
    font-family: var(--mono-stack);
    font-size: 0.86em;
    background: var(--surface-mute);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--rule);
    color: var(--ink-muted);
}

/* ---------- Note / Disclaimer block ---------- */
.callout {
    margin: 1.25rem 0;
    padding: 1rem 1.15rem 1rem 1.4rem;
    border-left: 2px solid var(--gold);
    background: var(--gold-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.callout .label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold-text);
    margin-bottom: 0.4rem;
}

.callout p { margin-bottom: 0.5rem; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- Premium / highlight box ---------- */
.feature-box {
    margin: 1rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    background: var(--surface-mute);
}

.feature-box .label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold-text);
    margin-bottom: 0.6rem;
}

/* ---------- Source list (CRED) ---------- */
.sources {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sources li {
    border-top: 1px solid var(--rule);
    padding: 0.85rem 0;
    margin: 0;
}

.sources li:first-child { border-top: 0; padding-top: 0.2rem; }

.sources li::before { display: none; }

.sources strong {
    display: block;
    font-size: 0.95rem;
    color: var(--ink);
    margin-bottom: 0.15rem;
    font-weight: 600;
}

.sources span,
.sources em {
    font-size: 0.88rem;
    color: var(--ink-muted);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
}

/* ---------- FAQ disclosure (details) ---------- */
details.faq {
    border-top: 1px solid var(--rule);
    padding: 0;
    transition: background-color var(--t-fast);
}

details.faq:first-of-type { border-top: 0; }

details.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 2.5rem 1.1rem 0;
    position: relative;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.4;
    user-select: none;
    transition: color var(--t-fast);
}

details.faq summary::-webkit-details-marker { display: none; }

details.faq summary::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--t-base);
}

details.faq[open] summary { color: var(--gold-text); }

details.faq[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
}

details.faq summary:hover { color: var(--gold-text); }

.faq-body {
    padding: 0 0 1.25rem;
    color: var(--ink-muted);
}

.faq-body p { color: var(--ink-muted); }
.faq-body p:last-child { margin-bottom: 0; }

/* ---------- Contact card ---------- */
.contact-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.contact-card .item {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    background: var(--surface-mute);
}

.contact-card .item .key {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.2rem;
    font-weight: 600;
}

.contact-card .item .val {
    font-size: 0.95rem;
    color: var(--ink);
}

.contact-card .item .val a {
    color: var(--gold-text);
    border-bottom: 1px solid var(--gold);
}

/* ---------- Section ornament divider ---------- */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin: var(--space-5) 0 var(--space-3);
    color: var(--gold);
}

.divider::before,
.divider::after {
    content: "";
    height: 1px;
    width: 60px;
    background: var(--rule-strong);
}

.divider .glyph {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
}

/* ---------- Footer ---------- */
.page-footer {
    border-top: 1px solid var(--rule);
    margin-top: var(--space-5);
    padding: var(--space-4) clamp(1.25rem, 5vw, 2rem) var(--space-3);
    max-width: var(--measure);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.cross-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.2rem;
}

.cross-links a {
    color: var(--ink-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color var(--t-fast), border-color var(--t-fast);
}

.cross-links a:hover {
    color: var(--gold-text);
    border-bottom-color: var(--gold);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    margin-bottom: 1.4rem;
    transition: color var(--t-fast);
}

.back-link::before {
    content: "←";
    color: var(--gold);
    font-size: 1rem;
    transition: transform var(--t-fast);
}

.back-link:hover { color: var(--gold-text); }
.back-link:hover::before { transform: translateX(-3px); }

.copy {
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    font-weight: 600;
}

.copy::before {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: var(--gold);
    margin: 0 auto 1rem;
}

/* ---------- Print ---------- */
@media print {
    body {
        background: white;
        color: black;
        background-image: none;
    }
    .topbar, .page-footer { border-color: #ddd; }
    .section { box-shadow: none; border: none; padding: 0; margin-bottom: 1.5rem; }
    .section h2::after { background: #999; }
    a { color: black; border-bottom: 1px solid #999; }
    details.faq[open] summary::after,
    details.faq summary::after { display: none; }
    details.faq .faq-body { display: block !important; }
}

/* ---------- Tablet+ refinements ---------- */
@media (min-width: 720px) {
    .topbar {
        padding: 1.15rem 2.5rem;
    }
    .hero { margin-bottom: var(--space-6); }
    .section { padding: 2.4rem 2.5rem; }
    /* En desktop, los numerales de sección viajan al margen izquierdo */
    .section.with-margin-num {
        padding-left: 4.25rem;
    }
    .section.with-margin-num .num {
        position: absolute;
        left: 1.5rem;
        top: 2.55rem;
        margin: 0;
    }
}

@media (min-width: 1024px) {
    .topbar {
        justify-content: space-between;
    }
}