/* ═══════════════════════════════════════════════════════
   Estudio Jurídico · concepto "expediente"
   carátula fija (tinta) + fojas (papel) + acento verde inglés
   ═══════════════════════════════════════════════════════ */

:root {
    /* superficies */
    --ink:        oklch(17% 0.012 175);
    --ink-2:      oklch(21% 0.014 175);
    --paper:      oklch(95.5% 0.012 85);
    --paper-2:    oklch(91.5% 0.016 85);

    /* acento verde inglés (lámpara de banquero, escritorio de cuero) */
    --accent:        oklch(64% 0.115 162);
    --accent-deep:   oklch(40% 0.092 165);
    --accent-soft:   oklch(64% 0.115 162 / 0.13);
    --accent-halo:   oklch(64% 0.115 162 / 0.35);
    --accent-glow:   oklch(64% 0.115 162 / 0.08);
    --accent-line:   oklch(64% 0.115 162 / 0.45);
    --accent-edge:   oklch(27% 0.06 165);
    /* bloque drenched */
    --drench-1:      oklch(38% 0.078 165);
    --drench-2:      oklch(33% 0.072 165);
    --drench-hole:   oklch(36% 0.075 165);
    --drench-edge:   oklch(24% 0.05 165);
    --drench-shadow: oklch(14% 0.03 165 / 0.5);

    /* texto sobre tinta */
    --t-ink-hi:   oklch(91% 0.008 40);
    --t-ink-lo:   oklch(69% 0.014 35);

    /* texto sobre papel */
    --t-pap-hi:   oklch(25% 0.018 30);
    --t-pap-lo:   oklch(43% 0.018 30);

    /* líneas */
    --line-ink:   oklch(91% 0.008 40 / 0.14);
    --line-pap:   oklch(25% 0.018 30 / 0.16);

    --font-display: "Fraunces", Georgia, serif;
    --font-body:    "Instrument Sans", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Paletas alternativas (elegibles desde el panel admin) ── */
:root[data-theme="vino"] {
    --ink:   oklch(17% 0.014 30);
    --ink-2: oklch(21% 0.016 30);
    --accent:        oklch(63% 0.17 22);
    --accent-deep:   oklch(43% 0.152 25);
    --accent-soft:   oklch(63% 0.17 22 / 0.13);
    --accent-halo:   oklch(63% 0.17 22 / 0.35);
    --accent-glow:   oklch(63% 0.17 22 / 0.08);
    --accent-line:   oklch(63% 0.17 22 / 0.45);
    --accent-edge:   oklch(30% 0.12 25);
    --drench-1:      oklch(43% 0.152 25);
    --drench-2:      oklch(38% 0.145 25);
    --drench-hole:   oklch(41% 0.148 25);
    --drench-edge:   oklch(25% 0.09 25);
    --drench-shadow: oklch(15% 0.05 25 / 0.5);
}
:root[data-theme="azul"] {
    --ink:   oklch(17% 0.014 265);
    --ink-2: oklch(21% 0.016 265);
    --accent:        oklch(64% 0.14 262);
    --accent-deep:   oklch(42% 0.13 262);
    --accent-soft:   oklch(64% 0.14 262 / 0.13);
    --accent-halo:   oklch(64% 0.14 262 / 0.35);
    --accent-glow:   oklch(64% 0.14 262 / 0.08);
    --accent-line:   oklch(64% 0.14 262 / 0.45);
    --accent-edge:   oklch(29% 0.09 262);
    --drench-1:      oklch(40% 0.11 262);
    --drench-2:      oklch(35% 0.105 262);
    --drench-hole:   oklch(38% 0.108 262);
    --drench-edge:   oklch(25% 0.08 262);
    --drench-shadow: oklch(15% 0.05 262 / 0.5);
}
:root[data-theme="violeta"] {
    --ink:   oklch(17% 0.014 310);
    --ink-2: oklch(21% 0.016 310);
    --accent:        oklch(64% 0.15 305);
    --accent-deep:   oklch(43% 0.14 305);
    --accent-soft:   oklch(64% 0.15 305 / 0.13);
    --accent-halo:   oklch(64% 0.15 305 / 0.35);
    --accent-glow:   oklch(64% 0.15 305 / 0.08);
    --accent-line:   oklch(64% 0.15 305 / 0.45);
    --accent-edge:   oklch(29% 0.1 305);
    --drench-1:      oklch(41% 0.12 305);
    --drench-2:      oklch(36% 0.115 305);
    --drench-hole:   oklch(39% 0.118 305);
    --drench-edge:   oklch(25% 0.09 305);
    --drench-shadow: oklch(15% 0.05 305 / 0.5);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    background: var(--paper);
    color: var(--t-pap-hi);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--paper); }

.skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 300;
    background: var(--accent); color: var(--paper);
    padding: 0.6rem 1rem; border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }

/* ── Etiquetas de folio (mono) ── */
.folio-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}
.folio-label-deep { color: var(--accent-deep); }

/* ── Botones ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    font-weight: 600; font-size: 0.9375rem;
    line-height: 1.25;
    border-radius: 4px;
    transition: transform 0.35s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.35s;
}
.btn-primary {
    background: var(--accent);
    color: oklch(97% 0.008 40);
    box-shadow: 0 2px 0 var(--accent-edge);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--accent-halo);
}
.btn-lg { padding: 1.05rem 2rem; font-size: 1.0625rem; }
.btn-block { width: 100%; }
.btn-ghost { border: 1px solid currentColor; opacity: 0.92; }
.caratula .btn-ghost:hover { background: var(--t-ink-hi); color: var(--ink); opacity: 1; }

/* ═══ ESTRUCTURA EXPEDIENTE ═══ */
.expediente {
    display: grid;
    grid-template-columns: minmax(400px, 41%) minmax(0, 1fr);
    min-height: 100svh;
}

/* ═══ CARÁTULA ═══ */
.caratula {
    position: sticky; top: 0;
    height: 100svh;
    background:
        radial-gradient(70% 50% at 30% 12%, var(--accent-glow), transparent 70%),
        var(--ink);
    color: var(--t-ink-hi);
    display: flex; flex-direction: column;
    padding: clamp(1.75rem, 3vw, 3rem);
    overflow-y: auto;
    overflow-x: hidden;
}
.caratula-borde {
    position: absolute; inset-block: 0; right: 14px;
    width: 5px;
    border-inline: 1px solid var(--accent-line);
}

.caratula-head { display: flex; align-items: center; gap: 1rem; }
.caratula-logo { width: 104px; height: 104px; object-fit: contain; }
.caratula-firma { display: flex; flex-direction: column; line-height: 1.2; }
.caratula-firma strong { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.caratula-firma span {
    font-family: var(--font-mono);
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--t-ink-lo);
}

.caratula-cuerpo { margin-block: auto; padding-block: 2rem; }
.caratula-cuerpo .folio-label { margin-bottom: 1.4rem; }
.caratula-titulo {
    font-family: var(--font-display);
    font-weight: 530;
    font-size: clamp(2.75rem, 4.6vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}
.caratula-titulo em {
    font-style: italic;
    font-variation-settings: "WONK" 1;
    color: var(--accent);
}
.caratula-materia {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--t-ink-lo);
    max-width: 34rem;
    margin-bottom: 2.25rem;
}
.caratula-materia > span:first-child { color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.caratula-acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* sello giratorio */
.sello-giratorio {
    position: absolute;
    right: clamp(2rem, 4vw, 3.5rem);
    bottom: clamp(4.5rem, 9vh, 6.5rem);
    width: clamp(120px, 11vw, 160px);
    color: var(--accent);
    opacity: 0.9;
    pointer-events: none;
}
.sello-giratorio svg { width: 100%; height: auto; overflow: visible; }
.sello-texto {
    transform-origin: 80px 80px;
    animation: girar 26s linear infinite;
}
.sello-texto text {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    fill: currentColor;
}
.sello-centro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 34px;
    fill: currentColor;
}
@keyframes girar { to { transform: rotate(360deg); } }

.caratula-pie {
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    letter-spacing: 0.06em;
    line-height: 1.9;
    color: var(--t-ink-lo);
    border-top: 1px solid var(--line-ink);
    padding-top: 1.1rem;
}

/* ═══ FOJAS ═══ */
.fojas {
    /* doble línea de margen, como hoja de expediente */
    background:
        linear-gradient(to right,
            transparent 0 54px,
            var(--accent-line) 54px 55px,
            transparent 55px 59px,
            var(--accent-line) 59px 60px,
            transparent 60px),
        var(--paper);
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem) 0 clamp(4.75rem, 7vw, 6.5rem);
}

.foja { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.foja + .foja { border-top: 1px solid var(--line-pap); }

.foja-head {
    display: flex; align-items: baseline; gap: 1.25rem;
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.foja-num {
    font-family: var(--font-mono);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent-deep);
    white-space: nowrap;
}
.foja-titulo {
    font-family: var(--font-display);
    font-weight: 560;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
}
.foja-linea { flex: 1; border-bottom: 1px solid var(--line-pap); transform: translateY(-0.4em); }

.destacado {
    font-family: var(--font-display);
    font-weight: 480;
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    max-width: 30ch;
}
.destacado strong { font-weight: 640; color: var(--accent-deep); }

/* Foja 01 · estudio */
.estudio-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}
.estudio-cols p + p, .estudio-cols div > p { color: var(--t-pap-lo); max-width: 52ch; }
.estudio-cols .destacado { color: var(--t-pap-hi); }

.estampilla {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.78125rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent-deep);
    border: 2px solid var(--accent-deep);
    border-radius: 3px;
    outline: 1px solid oklch(43% 0.152 25 / 0.4);
    outline-offset: 3px;
    transform: rotate(-3.5deg);
    opacity: 0.85;
}

/* Foja 02 · índice de áreas */
.indice { border-top: 1px solid var(--line-pap); }
.indice li { border-bottom: 1px solid var(--line-pap); }
.indice-fila {
    display: flex; align-items: baseline; gap: 1rem;
    padding: 1.2rem 0.5rem;
    transition: background 0.25s, padding-inline 0.35s var(--ease-out);
}
.indice-fila:hover { background: var(--paper-2); padding-inline: 1rem; }
.indice-n {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--accent-deep);
}
.indice-nombre {
    min-width: 0;
    font-family: var(--font-display);
    font-weight: 560;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.indice-nombre small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.84375rem;
    color: var(--t-pap-lo);
    margin-top: 0.2rem;
}
.indice-puntos {
    flex: 1;
    min-width: 2rem;
    border-bottom: 2px dotted oklch(25% 0.018 30 / 0.3);
    transform: translateY(-0.35em);
}
.indice-cta {
    font-family: var(--font-mono);
    font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-deep);
    white-space: nowrap;
}
.indice-cta::after { content: " ↗"; }
.indice-fila:hover .indice-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Foja 03 · constancias (libro mayor) */
.constancias { max-width: 720px; border-top: 1px solid var(--line-pap); }
.constancia {
    display: flex; align-items: baseline; gap: 1rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line-pap);
}
.constancia dt {
    font-size: 0.9375rem; font-weight: 500;
    color: var(--t-pap-lo);
    white-space: nowrap;
}
.constancia::after { content: none; }
.constancia dt::after { content: none; }
.constancia dd { margin-left: auto; order: 3; }
.constancia dd span, .constancia dd {
    font-family: var(--font-display);
    font-weight: 540;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
}
.constancia .puntos, .constancia-puntos { flex: 1; }
.constancia { position: relative; }
.constancia > dt + dd::before { content: none; }

/* Foja 04 · providencias */
.providencias { display: grid; gap: 1.75rem; max-width: 760px; }
.providencia {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.prov-n {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--accent-deep);
}
.providencia h3 {
    font-family: var(--font-display);
    font-weight: 580; font-size: 1.3125rem;
    margin-bottom: 0.35rem;
}
.providencia p { color: var(--t-pap-lo); font-size: 0.9375rem; max-width: 56ch; }

/* Foja 06 · preguntas */
.faq { max-width: 820px; border-top: 1px solid var(--line-pap); }
.faq details { border-bottom: 1px solid var(--line-pap); }
.faq summary {
    display: flex; align-items: baseline; gap: 0.9rem;
    padding-block: 1.2rem;
    font-family: var(--font-display);
    font-weight: 560; font-size: 1.1875rem;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq-n {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 0.8125rem;
    color: var(--accent-deep);
}
.faq-icon { position: relative; flex: 0 0 16px; height: 16px; margin-left: auto; align-self: center; }
.faq-icon::before, .faq-icon::after {
    content: "";
    position: absolute; inset: 0; margin: auto;
    background: currentColor;
    transition: transform 0.3s var(--ease-out);
}
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after  { width: 2px; height: 16px; }
.faq details[open] .faq-icon::after { transform: rotate(90deg); }
.faq details p {
    padding: 0 0 1.4rem 2rem;
    color: var(--t-pap-lo);
    max-width: 62ch;
}

/* Foja 07 · contacto + cierre */
.canales {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-pap);
    border: 1px solid var(--line-pap);
}
.canal {
    background: var(--paper);
    padding: 1.6rem 1.4rem;
    display: flex; flex-direction: column; gap: 0.25rem;
    transition: background 0.25s;
}
.canal:hover { background: var(--paper-2); }
.canal-tipo {
    font-family: var(--font-mono);
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 0.35rem;
}
.canal-dato {
    font-family: var(--font-display);
    font-weight: 560;
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}
.canal-nota { font-size: 0.8125rem; color: var(--t-pap-lo); }

/* Foja 05 · su situación (orientador) */
.situacion-lede { color: var(--t-pap-lo); max-width: 52ch; margin-bottom: 1.5rem; }
.situaciones { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.75rem; }
.chip {
    font-family: var(--font-mono);
    font-size: 0.78125rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--t-pap-hi);
    border: 1.5px solid var(--line-pap);
    border-radius: 3px;
    padding: 0.6rem 1rem;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out);
}
.chip:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.chip.active {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--paper);
    transform: rotate(-1.5deg);
}
.triage {
    border-top: 2px solid var(--t-pap-hi);
    padding-top: 1.75rem;
    animation: triage-in 0.45s var(--ease-out);
}
@keyframes triage-in {
    from { opacity: 0; transform: translateY(14px); }
}
.triage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-bottom: 1.75rem;
}
.triage-label {
    font-family: var(--font-mono);
    font-size: 0.71875rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 0.9rem;
}
.triage-pasos { counter-reset: paso; max-width: 52ch; }
.triage-pasos li {
    counter-increment: paso;
    position: relative;
    padding: 0.45rem 0 0.45rem 2.1rem;
    color: var(--t-pap-hi);
    font-size: 0.9375rem;
}
.triage-pasos li::before {
    content: counter(paso, lower-roman) ".";
    position: absolute; left: 0;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--accent-deep);
}
.triage-docs li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.5rem;
    color: var(--t-pap-lo);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--line-pap);
}
.triage-docs li::before {
    content: "§";
    position: absolute; left: 0;
    font-family: var(--font-display);
    color: var(--accent-deep);
}
.triage-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.triage-fine { font-size: 0.78125rem; color: var(--t-pap-lo); max-width: 40ch; }

/* profundización */
.refine {
    margin-bottom: 1.75rem;
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--paper-2);
    border-radius: 6px;
}
.refine[hidden] { display: none; }
.refine-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-sm { font-size: 0.71875rem; padding: 0.45rem 0.8rem; background: var(--paper); }
.refine-info { margin-top: 1.25rem; max-width: 68ch; animation: triage-in 0.4s var(--ease-out); }
.refine-info[hidden] { display: none; }
.refine-info p { font-size: 0.9375rem; }
.refine-ref {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.71875rem;
    letter-spacing: 0.03em;
    color: var(--accent-deep);
}

/* calculadora de indemnización */
.calc {
    margin-bottom: 1.75rem;
    padding: 1.5rem;
    border: 1px solid var(--accent-line);
    border-radius: 6px;
    background: var(--paper);
}
.calc[hidden] { display: none; }
.calc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 1rem 0 1.25rem;
}
.calc-grid label span {
    display: block;
    font-size: 0.78125rem; font-weight: 600;
    margin-bottom: 0.35rem;
}
.calc-grid input[type="number"], .calc-grid input[type="date"] {
    width: 100%;
    font: inherit; font-size: 0.9375rem;
    color: var(--t-pap-hi);
    background: var(--paper-2);
    border: 1px solid var(--line-pap);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}
.calc-grid input:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.calc-check {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 0.875rem;
}
.calc-check input { width: 17px; height: 17px; accent-color: var(--accent-deep); }
.calc-check span { margin: 0 !important; font-weight: 500 !important; }
.calc-result { margin-top: 1.5rem; animation: triage-in 0.4s var(--ease-out); }
.calc-result[hidden] { display: none; }
.calc-rubros { border-top: 1px solid var(--line-pap); max-width: 620px; }
.calc-rubro {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--line-pap);
    font-size: 0.875rem;
}
.calc-rubro dt { color: var(--t-pap-lo); }
.calc-rubro dd { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.calc-total {
    display: flex; align-items: baseline; gap: 1rem;
    margin-block: 1rem 1.25rem;
    font-size: 0.9375rem;
    color: var(--t-pap-lo);
}
.calc-total strong {
    font-family: var(--font-display);
    font-weight: 580;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    letter-spacing: -0.01em;
    color: var(--accent-deep);
    font-variant-numeric: tabular-nums;
}
.calc-result .btn { margin-bottom: 0.9rem; }

/* pre-consulta guiada */
.preconsulta {
    margin-bottom: 1.75rem;
    padding: 1.5rem;
    border: 1px dashed var(--accent-deep);
    border-radius: 6px;
    background: var(--paper);
}
.preconsulta[hidden] { display: none; }
.pre-lede { color: var(--t-pap-lo); font-size: 0.9375rem; margin: 0.4rem 0 1.1rem; max-width: 54ch; }
.pre-head[hidden], .pre-flow[hidden], .pre-contact[hidden], .pre-result[hidden] { display: none; }
.pre-progress {
    font-family: var(--font-mono);
    font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--t-pap-lo);
    margin-bottom: 0.5rem;
}
.pre-q {
    font-family: var(--font-display);
    font-weight: 580; font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}
.pre-flow, .pre-contact, .pre-result { animation: triage-in 0.35s var(--ease-out); }
.pre-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pre-date {
    font: inherit; font-size: 0.9375rem;
    color: var(--t-pap-hi);
    background: var(--paper-2);
    border: 1px solid var(--line-pap);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
}
.pre-date:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.pre-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.pre-contact-grid input {
    font: inherit; font-size: 0.9375rem;
    color: var(--t-pap-hi);
    background: var(--paper-2);
    border: 1px solid var(--line-pap);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    width: 100%;
}
.pre-contact-grid input:focus { outline: none; border-color: var(--accent-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.pre-badge {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}
.pre-nota { font-size: 0.9375rem; color: var(--t-pap-lo); max-width: 58ch; margin-bottom: 1rem; }
.pre-resumen {
    border-top: 1px solid var(--line-pap);
    margin-bottom: 1.25rem;
    max-width: 480px;
}
.pre-resumen li {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line-pap);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}
.pre-result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.75rem; }

/* formulario "deje sus datos" */
.dejar-datos {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid var(--line-pap);
    border-radius: 6px;
    background: var(--paper-2);
}
.dejar-lede { color: var(--t-pap-lo); font-size: 0.9375rem; margin: 0.3rem 0 1.25rem; }
.contact-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.contact-form[hidden] { display: none; }
.contact-form input, .contact-form select, .contact-form textarea {
    font: inherit; font-size: 0.9375rem;
    color: var(--t-pap-hi);
    background: var(--paper);
    border: 1px solid var(--line-pap);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    width: 100%;
}
.contact-form textarea { grid-column: 1 / -1; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.contact-form .form-error { grid-column: 1 / -1; color: oklch(48% 0.19 28); font-size: 0.875rem; margin: 0; }
.contact-form .btn { justify-self: start; }
.contact-form .triage-fine { align-self: center; }
.contact-ok { animation: triage-in 0.4s var(--ease-out); }
.contact-ok[hidden] { display: none; }
.contact-ok-titulo {
    font-family: var(--font-display);
    font-weight: 580; font-size: 1.25rem;
    color: var(--accent-deep);
}
.contact-ok p { margin-bottom: 0.9rem; font-size: 0.9375rem; color: var(--t-pap-lo); }
.contact-ok .contact-ok-titulo { color: var(--accent-deep); margin-bottom: 0.3rem; }

/* disponibilidad en carátula */
.disponibilidad {
    display: flex; align-items: center; gap: 0.55rem;
    margin-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--t-ink-lo);
}
.disponibilidad[hidden] { display: none; }
.dispo-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: oklch(70% 0.17 150);
    animation: pulse-dot 2.4s infinite;
}
.disponibilidad.cerrado .dispo-dot { background: var(--t-ink-lo); animation: none; }
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.vcard-row { margin-top: 1.5rem; }

.cierre { margin-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 2.5rem; }
.archivese {
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: "WONK" 1;
    font-weight: 520;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--accent-deep);
    line-height: 1;
    margin-bottom: 1.5rem;
}
.cierre-datos {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem;
    border-top: 1px solid var(--line-pap);
    padding-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--t-pap-lo);
}
.admin-link { border-bottom: 1px dotted currentColor; transition: color 0.2s; }
.admin-link:hover { color: var(--accent-deep); }

/* ═══ BARRA MÓVIL + NAV ═══ */
.mobile-bar {
    display: none;
    position: sticky; top: 0; z-index: 100;
    align-items: center; justify-content: space-between;
    padding: 0.8rem 1.25rem;
    background: var(--ink);
    color: var(--t-ink-hi);
    border-bottom: 1px solid var(--line-ink);
}
.mobile-brand { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.nav-toggle { display: flex; flex-direction: column; gap: 6px; padding: 8px; position: relative; z-index: 102; }
.nav-toggle span { width: 24px; height: 2px; background: var(--t-ink-hi); transition: transform 0.3s var(--ease-out); }
.nav-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle.open span:last-child  { transform: translateY(-4px) rotate(-45deg); }

.nav {
    position: fixed; inset: 0; z-index: 101;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.4rem;
    background: oklch(15% 0.013 30 / 0.98);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.nav.open { opacity: 1; pointer-events: auto; }
.nav a {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--t-ink-hi);
}
.nav a:hover { color: var(--accent); }

/* ═══ WHATSAPP FLOAT ═══ */
.whatsapp-float {
    position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 90;
    display: grid; place-items: center;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25d366; color: #fff;
    box-shadow: 0 10px 30px oklch(0% 0 0 / 0.35);
    transition: transform 0.35s var(--ease-out);
}
.whatsapp-float svg { width: 28px; height: 28px; }
.whatsapp-float:hover { transform: translateY(-4px) scale(1.05); }

/* ═══ REVEAL ═══ */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1023px) {
    .expediente { grid-template-columns: 1fr; }
    .caratula {
        position: static;
        height: auto;
        min-height: 78svh;
        padding-top: 2rem;
    }
    .sello-giratorio { right: 1.5rem; bottom: 5.5rem; width: 108px; }
    .mobile-bar { display: flex; }
    .fojas { padding-left: clamp(4.25rem, 10vw, 6rem); }
}

@media (max-width: 640px) {
    .estudio-cols, .sello-grid { grid-template-columns: 1fr; }
    .canales { grid-template-columns: 1fr; }
    .indice-puntos { display: none; }
    .indice-fila { flex-wrap: wrap; row-gap: 0.3rem; }
    .indice-cta { margin-left: auto; }
    .caratula-acciones .btn { width: 100%; }
    .foja-head { flex-wrap: wrap; gap: 0.4rem 1rem; }
    .foja-linea { flex-basis: 100%; display: none; }
    .fojas {
        padding-left: 1.5rem;
        background: var(--paper);
    }
    .constancia dd span, .constancia dd { font-size: 1.5rem; }
    .sello-giratorio { display: none; }
    .triage-grid { grid-template-columns: 1fr; }
    .triage-cta .btn { width: 100%; }
    .contact-form { grid-template-columns: 1fr; }
    .contact-form .btn { justify-self: stretch; }
    .calc-grid { grid-template-columns: 1fr; }
    .calc .btn, .calc-result .btn { width: 100%; }
    .pre-contact-grid { grid-template-columns: 1fr; }
    .preconsulta .btn { width: 100%; }
}

/* ═══ MOVIMIENTO REDUCIDO ═══ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
}