/*
   marca.css — Chavaias 2026-10
   Capa de marca común. Se carga DESPUÉS de site.css y silas.css en todas las páginas.
   Estilo: editorial claro con bloques de color (verde Conforme), titulares grandes,
   rejilla asimétrica y movimiento sutil solo con CSS. Sin librerías, sin vídeo.
*/

@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/sora-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --brand: #0f3d3e;
    --accent: #1f8a70;
    --mint: #7fe0c4;
    --brand-soft: #e3f4ee;
    --brand-ink: #06201f;

    /* Los tokens del sistema anterior pasan a la marca */
    --blue: #16705a;
    --blue-dark: #0f3d3e;
    --blue-soft: #e3f4ee;
    --bg-tint: #eef7f3;
    --green: #17805f;
    --green-soft: #e3f4ee;
    --night: #06201f;
    --night-2: #0a2f2e;
    --night-3: #0f3d3e;
    --lamp: #7fe0c4;
    --ok-light: #7fe0c4;
    --radius: 22px;
    --wrap: 1120px;

    /* Alias que usan las fichas de Conforme */
    --cf-brand: var(--brand);
    --cf-accent: var(--accent);
    --cf-soft: var(--brand-soft);
}

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline-color: rgba(31, 138, 112, 0.6);
}
.silas-actions a { color: var(--blue); }

/* ---------- Tipografía: titulares grandes como imagen principal ---------- */
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1.06; letter-spacing: -0.035em; }
.hero-night h1 { font-size: clamp(2.6rem, 6.6vw, 4.9rem); }
.legal h1, .legal-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.02em; }
.agent-hero h1 { margin-bottom: 22px; }
.section-head { max-width: 780px; }
.section-head p { font-size: 1.15rem; }
.eyebrow { color: var(--accent); }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); }

.agent-hero .portrait[src$=".svg"] { border-radius: 22%; background: none; }

/* ---------- Botones ---------- */
.btn { border-radius: 999px; }
.hero-night .btn-primary, .cta-band .btn-primary { background: var(--mint); color: var(--brand-ink); }
.hero-night .btn-primary:hover, .cta-band .btn-primary:hover { background: #a7efdb; }
.btn-ghost-light:hover { color: var(--brand-ink); }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.cta-band .btn-ghost:hover { background: #fff; color: var(--brand); border-color: #fff; }

/* ---------- Cabecera nocturna verde ---------- */
.hero-night .night-sky {
    background-image:
        radial-gradient(1.2px 1.2px at 8% 14%, rgba(255,255,255,.75) 50%, transparent 52%),
        radial-gradient(1px 1px at 22% 32%, rgba(255,255,255,.5) 50%, transparent 52%),
        radial-gradient(1.4px 1.4px at 37% 9%, rgba(255,255,255,.7) 50%, transparent 52%),
        radial-gradient(1px 1px at 52% 24%, rgba(255,255,255,.45) 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 66% 12%, rgba(255,255,255,.65) 50%, transparent 52%),
        radial-gradient(1px 1px at 78% 36%, rgba(255,255,255,.4) 50%, transparent 52%),
        radial-gradient(1.3px 1.3px at 91% 18%, rgba(255,255,255,.7) 50%, transparent 52%),
        radial-gradient(640px 360px at 78% 30%, rgba(127,224,196,.16), transparent 70%),
        radial-gradient(520px 320px at 12% 90%, rgba(31,138,112,.42), transparent 70%);
}
.hero-night::after { background: linear-gradient(180deg, #bfece0 0%, #e3f4ee 45%, #f5f5f7 100%); }
.shift { background: rgba(6, 32, 31, 0.72); }
.shift-note { color: rgba(255, 255, 255, 0.55); }
.st-out { background: var(--accent); }

/* ---------- Bloques de color a todo ancho ---------- */
.cta-band { background: var(--brand); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.82); }
.cta-band .small, .cta-band .muted { color: rgba(255, 255, 255, 0.62); }
.section-tint { background: var(--bg-tint); }
.pilot { background: linear-gradient(135deg, var(--brand), #0a2f2e); }
.pilot li::before { color: var(--mint); }

.site-footer { background: var(--brand-ink); border-top: 0; color: rgba(255, 255, 255, 0.62); }
.site-footer .brand, .footer-grid h4 { color: #fff; }
.footer-grid a { color: rgba(255, 255, 255, 0.62); }
.footer-grid a:hover { color: var(--mint); }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.14); }

/* ---------- Tarjetas: más aire, más redondeo ---------- */
.card, .job-card, .system-card, .price-card, .steps li { border-radius: var(--radius); }
a.card { transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
}

/* ---------- Rejilla asimétrica (mosaico) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento > * { grid-column: span 2; }
.bento > .b-4 { grid-column: span 4; }
.bento > .b-6 { grid-column: span 6; }
.bento > .b-dark { background: var(--brand); border-color: transparent; justify-content: center; }
.bento > .b-dark h3 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.12; }
.bento > .b-dark p { color: rgba(255, 255, 255, 0.84); font-size: 1.05rem; }
@media (max-width: 860px) {
    .bento { grid-template-columns: 1fr; }
    .bento > *, .bento > .b-4, .bento > .b-6 { grid-column: auto; }
}

/* ---------- Cifras grandes ---------- */
.cf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.cf-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; }
.cf-stat b { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.04em; color: var(--brand); }
.cf-stat span { display: block; margin-top: 8px; font-size: 0.95rem; color: var(--muted); }
.cf-shots { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 1000px; }
.cf-shots figure { margin: 0; }
.cf-shots img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(15, 61, 62, 0.1); }
.cf-shots figcaption { font-size: 0.92rem; color: var(--muted); margin-top: 10px; }

/* ---------- Movimiento sutil, solo CSS ---------- */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .section .card, .job-card, .system-card, .price-card, .steps li, .cf-stat, .metric, .check-item,
        .cf-shots figure, .before-after > div, .faq details, .example-card {
            animation: marca-rise linear both;
            animation-timeline: view();
            animation-range: entry 4% entry 42%;
        }
    }
    .agent-hero .portrait { animation: marca-pop 0.7s var(--ease-out) both; }
}
@keyframes marca-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes marca-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }