/* =========================================================================
   Extranjería Online · «El expediente registrado»
   Carpetas de gomas de la Administración, folio blanco y sello violeta.
   El violeta solo significa una cosa: registrado / activo.
   ========================================================================= */

:root {
    --folder:      #1c3faa;   /* carpeta azul: marca */
    --folder-deep: #142f86;
    --g-nacionalidad: #7d1a2c; /* granate de pasaporte */
    --g-arraigo:      #1d7a46;
    --g-familia:      #c93a6c;
    --g-residencia:   #e6ad12;
    --g-documentos:   #d9581f;
    --g-recursos:     #3f4754;

    --stamp:   #5a2d91;        /* tinta del sello de registro */
    --stamp-soft: rgba(90, 45, 145, .12);
    --ink:     #121212;
    --ink-2:   #3d4048;
    --ink-3:   #5d616b;
    --paper:   #ffffff;
    --folio:   #eef0f3;
    --rule:    #121212;
    --hair:    #d5d8de;

    --f-display: 'Archivo', 'Arial Narrow', sans-serif;
    --f-text:    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
    --f-mono:    'Martian Mono', ui-monospace, monospace;

    --wrap: 1240px;
    --gut: clamp(1rem, 4vw, 2.5rem);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Base ---------- */
body.x-site {
    margin: 0;
    font-family: var(--f-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01"; /* cero sin barra en fechas y cifras */
}
.x-site h1, .x-site h2, .x-site h3, .x-site h4 {
    font-family: var(--f-display);
    color: inherit;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0;
}
.x-site p { margin: 0 0 1em; text-wrap: pretty; }
.x-site a { color: var(--folder); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.x-site a:hover { color: var(--folder-deep); }
.x-site ::selection { background: var(--folder); color: #fff; }
.x-site :focus-visible { outline: 3px solid var(--folder); outline-offset: 3px; }
.x-site input, .x-site textarea, .x-site select { caret-color: var(--folder); }
html { scrollbar-color: var(--ink-3) var(--folio); scroll-padding-top: 88px; background: #0d0d0f; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.x-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.x-mono {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.x-skip {
    position: absolute; left: -999px; top: 8px; z-index: 2000;
    background: var(--ink); color: #fff; padding: .6rem 1rem;
}
.x-skip:focus { left: 8px; color: #fff; }

/* ---------- Iconos ---------- */
.x-ico { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; }

/* ---------- Botones ---------- */
.x-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--f-display); font-weight: 700; font-stretch: 87.5%;
    font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
    padding: .95rem 1.4rem; border: 2px solid var(--ink); border-radius: 0;
    background: var(--ink); color: #fff; text-decoration: none; cursor: pointer;
    transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}
.x-btn:hover { background: var(--folder); border-color: var(--folder); color: #fff; }
.x-btn:active { transform: translateY(1px); }
.x-btn .x-ico { transition: transform .25s var(--ease-out); }
.x-btn:hover .x-ico { transform: translateX(3px); }
.x-btn--paper { background: #fff; color: var(--ink); border-color: #fff; }
.x-btn--paper:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.x-btn--ghost { background: transparent; color: var(--ink); }
.x-btn--ghost:hover { background: var(--ink); color: #fff; }
.x-btn[disabled] { opacity: .55; cursor: progress; }
.x-link {
    font-family: var(--f-display); font-weight: 700; font-stretch: 87.5%;
    text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
    display: inline-flex; align-items: center; gap: .45rem;
    border-bottom: 2px solid currentColor; padding-bottom: 2px;
}

/* ---------- Cabecera ---------- */
.x-head {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--ink);
    backdrop-filter: saturate(1.4) blur(8px);
}
.x-head__in { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.x-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.x-brand:hover { color: var(--ink); }
.x-brand svg { width: 38px; height: 34px; flex: none; }
.x-brand__name { font-family: var(--f-display); font-weight: 800; font-stretch: 75%; font-size: 1.32rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; display: block; }
.x-brand__sub { font-family: var(--f-text); font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 4px; }

.x-nav { display: flex; align-items: center; gap: .25rem; }
.x-nav > a, .x-nav__btn {
    font-family: var(--f-display); font-weight: 600; font-stretch: 87.5%; font-size: .98rem;
    color: var(--ink); text-decoration: none; padding: .55rem .75rem; background: none; border: 0;
    display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; position: relative;
}
.x-nav > a::after, .x-nav__btn::after {
    content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .3rem; height: 2px;
    background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out);
}
.x-nav > a:hover::after, .x-nav__btn:hover::after, .x-nav > a[aria-current="page"]::after, .x-nav__btn[aria-expanded="true"]::after { transform: scaleX(1); }
.x-nav__btn .x-ico { transition: transform .25s var(--ease-out); }
.x-nav__btn[aria-expanded="true"] .x-ico { transform: rotate(180deg); }
.x-lang {
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
    border: 1px solid var(--ink); padding: .35rem .55rem; text-decoration: none; color: var(--ink);
}
.x-lang:hover { background: var(--ink); color: #fff; }
.x-head .x-btn { padding: .6rem 1rem; font-size: .9rem; }
.x-menu-toggle { display: none; background: none; border: 1px solid var(--ink); padding: .45rem .55rem; }

/* Desplegable de trámites: las carpetas del archivador */
.x-mega {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--ink);
    box-shadow: 0 24px 40px -24px rgba(18,18,18,.35);
    display: none;
}
.x-mega.is-open { display: block; animation: x-drop .28s var(--ease-out); }
@keyframes x-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.x-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 1.5rem 0 1.75rem; }
.x-mega__col { padding: .25rem 1.25rem 1rem; border-left: 1px solid var(--hair); }
.x-mega__col:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.x-mega__tab {
    display: inline-block; font-family: var(--f-display); font-weight: 800; font-stretch: 75%;
    text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; color: #fff;
    background: var(--tab, var(--folder)); padding: .25rem .65rem .2rem; margin-bottom: .6rem;
}
.x-mega__col ul { list-style: none; margin: 0; padding: 0; }
.x-mega__col a { display: block; color: var(--ink); text-decoration: none; padding: .28rem 0; font-size: .97rem; }
.x-mega__col a:hover { color: var(--folder); }
.x-mega__all { border-top: 1px solid var(--hair); padding: .9rem 0 1.1rem; }

/* ---------- Colores de grupo ---------- */
.g-nacionalidad { --tab: var(--g-nacionalidad); }
.g-arraigo      { --tab: var(--g-arraigo); }
.g-familia      { --tab: var(--g-familia); }
.g-residencia   { --tab: var(--g-residencia); --tab-ink: #121212; }
.g-documentos   { --tab: var(--g-documentos); }
.g-recursos     { --tab: var(--g-recursos); }

/* ---------- Pestañas de carpeta ---------- */
.x-tabs { display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; scrollbar-width: none; }
.x-tabs::-webkit-scrollbar { display: none; }
.x-tab {
    flex: none; display: inline-flex; align-items: center; gap: .5rem;
    background: var(--tab, var(--folder)); color: var(--tab-ink, #fff);
    font-family: var(--f-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase;
    font-size: .86rem; letter-spacing: .05em; text-decoration: none;
    padding: .55rem 1.1rem .45rem; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
    transform: translateY(4px); transition: transform .25s var(--ease-out), filter .25s;
    border: 0; cursor: pointer;
}
.x-site a.x-tab, .x-site a.x-tab:hover { color: var(--tab-ink, #fff); }
.x-tab:hover, .x-tab:focus-visible { transform: translateY(0); color: var(--tab-ink, #fff); }
.x-tab[aria-selected="true"] { transform: translateY(0); }
.x-tab__n { font-family: var(--f-mono); font-weight: 400; font-size: .62rem; opacity: .8; font-stretch: normal; }

/* ---------- Portada: el tablero de la carpeta ---------- */
.x-hero { background: var(--paper); padding-top: 1.75rem; }
.x-hero__tabs { padding: 0 var(--gut); max-width: var(--wrap); margin: 0 auto; }
.x-board {
    background: var(--folder); color: #fff; position: relative; overflow: hidden;
    /* grano del cartón: líneas finísimas, nada de degradados */
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}
.x-board__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: 2.5rem; }
.x-hero h1 {
    font-weight: 800; font-stretch: 62.5%; text-transform: uppercase;
    font-size: clamp(3rem, 7.4vw, 6rem); line-height: .96; letter-spacing: -0.012em;
    margin-bottom: 1.6rem; color: #fff;
}
.x-hero h1 em { font-style: normal; color: #fff; text-decoration: underline; text-decoration-thickness: .065em; text-underline-offset: .045em; text-decoration-skip-ink: none; }
.x-hero__lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; max-width: 36rem; color: #e6ebfa; margin-bottom: 2rem; }
.x-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.x-hero__actions .x-link { color: #fff; }
.x-hero__actions .x-link:hover { color: #fff; opacity: .85; }

.x-proof { border-top: 1px solid rgba(255,255,255,.35); margin-top: 3rem; padding: 1.1rem 0 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.x-proof .x-mono { color: #c9d3f2; }
.x-proof__tv { display: flex; align-items: center; gap: 1.5rem; }
.x-proof__tv img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.x-proof__tv img.is-wide { height: 26px; }
.x-proof__item { display: flex; align-items: center; gap: .6rem; color: #fff; font-size: .95rem; }
.x-stars { display: inline-flex; gap: 2px; color: #fff; }
.x-stars svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- Folio (hoja blanca) y formulario ---------- */
.x-folio {
    background: #fff; color: var(--ink); position: relative;
    box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 22px 44px -18px rgba(8, 20, 70, .55);
    padding: 1.6rem 1.6rem 1.5rem;
}
.x-folio__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--ink); padding-bottom: .8rem; margin-bottom: 1.1rem; }
.x-folio__title { font-family: var(--f-display); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.55rem; line-height: 1; }
.x-folio__sub { font-size: .93rem; color: var(--ink-2); margin: .5rem 0 0; line-height: 1.5; }

/* Sello: punteado = pendiente; sólido = registrado */
.x-stamp {
    flex: none; width: 92px; height: 92px; border-radius: 50%;
    border: 2px dashed var(--stamp); color: var(--stamp);
    display: grid; place-items: center; text-align: center;
    font-family: var(--f-mono); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35;
    transform: rotate(-9deg);
}
.x-stamp--done {
    border: 3px solid var(--stamp); outline: 1px solid var(--stamp); outline-offset: 4px;
    width: 128px; height: 128px; font-size: .62rem; background: var(--stamp-soft);
}
.x-stamp--done strong { display: block; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
    .x-stamp--land { animation: x-stamp-land .62s var(--ease-out) both; }
}
@keyframes x-stamp-land {
    0%   { transform: rotate(-24deg) scale(1.9); opacity: 0; filter: blur(3px); }
    55%  { transform: rotate(-7deg) scale(.94); opacity: 1; filter: blur(0); }
    75%  { transform: rotate(-10deg) scale(1.03); }
    100% { transform: rotate(-9deg) scale(1); }
}

.x-field { margin-bottom: .85rem; }
.x-field label, .x-label, .x-cap {
    display: block; font-family: var(--f-text); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-2); margin-bottom: .3rem;
}
.x-cap { display: inline; margin: 0; }
.x-field label small { text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.x-input {
    width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
    background: #fff; border: 1px solid var(--ink); border-radius: 0; padding: .62rem .75rem;
    transition: box-shadow .2s var(--ease-out), border-color .2s;
}
.x-input::placeholder { color: #767a83; }
.x-input:focus { outline: none; border-color: var(--folder); box-shadow: 0 0 0 3px rgba(28,63,170,.14); }
.x-input.is-invalid { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
textarea.x-input { min-height: 112px; resize: vertical; }
select.x-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 16px; padding-right: 2.2rem; }
.x-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .85rem; }
.x-check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); margin: .3rem 0 1.1rem; cursor: pointer; }
.x-check input { appearance: none; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--ink); margin-top: 2px; display: grid; place-items: center; cursor: pointer; background: #fff; }
.x-check input::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
.x-check input:checked { background: var(--ink); border-color: var(--ink); }
.x-check input:checked::after { opacity: 1; }
.x-form-err { background: #fbeceb; color: #8c1d18; padding: .6rem .8rem; font-size: .9rem; margin-bottom: 1rem; }
.x-form-alt { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--hair); font-size: .92rem; }
.x-form-alt a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.x-form-alt a:hover { color: var(--folder); }
.x-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.x-done { text-align: left; }
.x-done__stamp { display: flex; justify-content: center; margin: .5rem 0 1.2rem; }
.x-done h3 { font-size: 1.6rem; font-weight: 800; font-stretch: 75%; text-transform: uppercase; margin-bottom: .5rem; }

/* ---------- Secciones ---------- */
.x-sec { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.x-sec--folio { background: var(--folio); }
.x-sec__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.x-h2 { font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(2.3rem, 4.8vw, 4rem); line-height: .92; }
.x-sec__intro { color: var(--ink-2); font-size: 1.1rem; max-width: 34rem; margin: 0; }

/* Catálogo en carpetas (tablist) */
.x-cabinet__panel { background: var(--tab, var(--folder)); padding: clamp(1rem, 2.5vw, 1.75rem); position: relative; }
.x-cabinet__panel::after {
    content: ""; position: absolute; top: 0; bottom: 0; right: clamp(2.5rem, 9%, 7rem); width: 11px;
    background: #141414; box-shadow: inset 2px 0 0 rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.2), 3px 0 6px -2px rgba(0,0,0,.35);
    pointer-events: none;
}
.x-cabinet__panel::before {
    content: ""; position: absolute; right: clamp(2.5rem, 9%, 7rem); top: 50%; width: 11px; height: 28px; transform: translateY(-50%);
    background: repeating-linear-gradient(0deg, #141414 0 3px, #2b2b2b 3px 5px); z-index: 1; pointer-events: none;
}
.x-cabinet__panel[hidden] { display: none; }
.x-cabinet__sheet { background: #fff; padding: clamp(1.25rem, 3vw, 2.25rem); padding-right: calc(clamp(2.5rem, 9%, 7rem) + 1.75rem); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem 3rem; align-items: start; container-type: inline-size; }
.x-cabinet__label { font-family: var(--f-display); font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(1.9rem, 4.6cqi, 4rem); line-height: .92; color: var(--ink); overflow-wrap: anywhere; hyphens: auto; margin: 0; }
.x-cabinet__note { color: var(--ink-2); margin-top: 1rem; font-size: .98rem; }

.x-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.x-index li { border-bottom: 1px solid var(--hair); }
.x-index a {
    display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: baseline;
    padding: 1rem .25rem; color: var(--ink); text-decoration: none; position: relative;
    transition: background .2s var(--ease-out);
}
.x-index a:hover { background: var(--folio); }
.x-index__name, .x-index__desc { transition: transform .25s var(--ease-out); }
.x-index a:hover .x-index__name, .x-index a:hover .x-index__desc { transform: translateX(6px); }
.x-index .x-mono { color: var(--ink-3); }
.x-index__name { font-family: var(--f-display); font-weight: 700; font-stretch: 87.5%; font-size: 1.28rem; line-height: 1.2; }
.x-index__desc { grid-column: 2; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.x-index .x-ico { grid-row: 1 / span 2; grid-column: 3; align-self: center; color: var(--ink-3); transition: transform .25s var(--ease-out), color .2s; }
.x-index a:hover .x-ico { transform: translateX(4px); color: var(--ink); }

/* Libro de registro: los pasos */
.x-ledger { border-top: 2px solid var(--ink); }
.x-ledger__row {
    display: grid; grid-template-columns: 7rem minmax(0, 4fr) minmax(0, 6fr) 110px; gap: 1.5rem; align-items: center;
    padding: 1.6rem 0; border-bottom: 1px solid var(--hair);
}
.x-ledger__row h3 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.55rem; line-height: 1; }
.x-ledger__row p { margin: 0; color: var(--ink-2); }
.x-ledger .x-stamp { width: 74px; height: 74px; justify-self: end; font-size: .5rem; }
.x-ledger .x-stamp--done { width: 92px; height: 92px; }

/* Online / en persona */
.x-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); }
.x-split__col { padding: clamp(1.5rem, 3vw, 2.5rem); }
.x-split__col + .x-split__col { border-left: 1px solid var(--ink); background: var(--folio); }
.x-split h3 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.7rem; margin-bottom: 1rem; }
.x-ticks { list-style: none; margin: 0; padding: 0; }
.x-ticks li { display: flex; gap: .7rem; padding: .5rem 0; border-bottom: 1px dashed var(--hair); }
.x-ticks li:last-child { border-bottom: 0; }
.x-ticks .x-ico { margin-top: .2em; color: var(--folder); }

/* El abogado */
.x-lawyer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.x-lawyer__photo { position: relative; }
.x-lawyer__photo img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; filter: grayscale(.15) contrast(1.05); }
.x-lawyer__photo .x-stamp { position: absolute; right: -18px; bottom: 28px; background: #fff; }
.x-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); margin: 1.75rem 0; }
.x-box { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: .7rem .9rem .85rem; }
.x-box .x-label { margin-bottom: .15rem; }
.x-box__v { font-family: var(--f-display); font-weight: 700; font-stretch: 87.5%; font-size: 1.25rem; line-height: 1.2; }
.x-tvrow { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; }
.x-tvrow img { height: 34px; width: auto; filter: grayscale(1) contrast(1.2); opacity: .85; }

/* Reseñas como notas del expediente */
.x-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.x-note { display: flex; flex-direction: column; margin: 0; }
.x-note .x-tab { align-self: flex-start; transform: none; font-size: .74rem; padding: .4rem .9rem .3rem; }
.x-note__sheet { background: var(--folio); border-top: 1px solid var(--ink); padding: 1.5rem 1.5rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.x-note blockquote { margin: 0 0 1.25rem; font-size: 1.05rem; line-height: 1.6; flex: 1; }
.x-rating { display: flex; align-items: center; gap: .7rem; margin-top: 1.25rem; font-weight: 700; }
.x-note footer { display: flex; justify-content: space-between; align-items: end; gap: 1rem; border-top: 1px solid var(--hair); padding-top: .8rem; }
.x-note footer strong { font-family: var(--f-display); font-stretch: 87.5%; font-size: 1.05rem; display: block; }
.x-note .x-stars { color: var(--ink); }

/* Preguntas (acordeón nativo) */
.x-faq { border-top: 2px solid var(--ink); }
.x-faq details { border-bottom: 1px solid var(--hair); }
.x-faq summary {
    list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 1rem; align-items: center;
    padding: 1.15rem 0; font-family: var(--f-display); font-weight: 700; font-stretch: 87.5%; font-size: 1.2rem; line-height: 1.3;
}
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary:hover { color: var(--folder); }
.x-faq summary .x-plus { width: 28px; height: 28px; border: 1.5px solid currentColor; display: grid; place-items: center; transition: transform .3s var(--ease-out), background .2s; }
.x-faq details[open] summary .x-plus { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.x-faq__a { padding: 0 3rem 1.3rem 0; color: var(--ink-2); max-width: 70ch; }
.x-faq details[open] .x-faq__a { animation: x-fade .35s var(--ease-out); }
@keyframes x-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Cierre */
.x-close { background: var(--ink); color: #fff; }
.x-close__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: center; padding: clamp(3.5rem, 7vw, 6rem) var(--gut); max-width: var(--wrap); margin: 0 auto; }
.x-close .x-h2 { color: #fff; }
.x-close p { color: #c9ccd3; font-size: 1.1rem; }
.x-close__contact { display: grid; gap: .9rem; }
.x-close__contact a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .75rem; font-family: var(--f-display); font-stretch: 87.5%; font-weight: 700; font-size: 1.35rem; }
.x-close__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Ficha de trámite ---------- */
.x-cover { background: var(--tab, var(--folder)); color: var(--tab-ink, #fff); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); }
.x-cover__tabs { background: #fff; padding-top: 1.25rem; }
.x-cover__in { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 0; }
.x-crumbs { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin-bottom: 1.6rem; }
.x-crumbs a { color: inherit; text-decoration: none; opacity: .85; }
.x-crumbs a:hover { opacity: 1; text-decoration: underline; color: inherit; }
.x-cover h1 { font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(2.5rem, 5.2vw, 4.6rem); line-height: .94; margin-bottom: 1.4rem; }
.x-cover__lead { font-size: clamp(1.06rem, 1.4vw, 1.22rem); max-width: 44rem; line-height: 1.55; opacity: .95; }
.x-cover__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; margin: 1.8rem 0 2.5rem; }
.x-cover__actions .x-link { color: inherit; }
.x-cover .x-btn--paper:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.g-residencia.x-cover .x-btn--paper { border-color: var(--ink); }

/* Casillas de datos clave (como un impreso oficial) */
.x-cover__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.x-summary { background: #fff; color: var(--ink); padding: 1.4rem 1.4rem .6rem; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 22px 44px -18px rgba(0,0,0,.45); }
.x-summary__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--ink); padding-bottom: .7rem; }
.x-summary__head h2 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.45rem; line-height: 1; }
.x-facts { margin: 0; }
.x-fact { padding: .8rem 0 .85rem; border-bottom: 1px solid var(--hair); }
.x-fact:last-child { border-bottom: 0; }
.x-fact .x-label { color: var(--ink-3); }
.x-fact__v { font-family: var(--f-display); font-weight: 700; font-stretch: 87.5%; font-size: 1.12rem; line-height: 1.25; }
.x-cover-gap { height: 0; }

.x-doc { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.x-doc__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 360px; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.x-toc { position: sticky; top: 96px; }
.x-toc ol { list-style: none; margin: .6rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.x-toc a { display: grid; grid-template-columns: 2.4rem 1fr; gap: .4rem; padding: .5rem 0; color: var(--ink-2); text-decoration: none; font-size: .9rem; line-height: 1.35; border-bottom: 1px solid var(--hair); }
.x-toc a .x-mono { color: var(--ink-3); font-size: .62rem; padding-top: .2rem; }
.x-toc a:hover { color: var(--ink); }
.x-toc a.is-active { color: var(--ink); font-weight: 700; }
.x-toc a.is-active .x-mono { color: var(--folder); }

.x-article { min-width: 0; }
.x-article section { padding-bottom: 2.75rem; margin-bottom: 2.75rem; border-bottom: 1px solid var(--hair); }
.x-article section:last-of-type { border-bottom: 0; }
.x-article h2 { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; margin-bottom: 1.25rem; display: flex; align-items: baseline; gap: .9rem; }
.x-article h2 .x-mono { font-weight: 400; color: var(--ink-3); flex: none; }
.x-article p, .x-article li { max-width: 70ch; }

/* Lista que se puede marcar: requisitos y documentos */
.x-list-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.x-progress { display: inline-flex; align-items: center; gap: .6rem; }
.x-progress__bar { width: 90px; height: 6px; background: var(--folio); position: relative; overflow: hidden; }
.x-progress__bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .4s var(--ease-out); }
.x-checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.x-checklist li { border-bottom: 1px solid var(--hair); }
.x-checklist label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .9rem; padding: .8rem .25rem; cursor: pointer; align-items: start; transition: background .2s; }
.x-checklist label:hover { background: var(--folio); }
.x-checklist input { appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--ink); margin: 3px 0 0; display: grid; place-items: center; background: #fff; cursor: pointer; }
.x-checklist input::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.x-checklist input:checked { background: var(--ink); border-color: var(--ink); }
.x-checklist input:checked::after { opacity: 1; }
.x-checklist input:checked + span { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink); text-decoration-thickness: 1.5px; }
.x-reset { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.x-reset:hover { color: var(--ink); }
.x-hint { font-size: .85rem; color: var(--ink-3); margin-top: .6rem; }

.x-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.x-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--hair); }
.x-steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--f-mono); font-size: .8rem; color: var(--ink); width: 2.4rem; height: 2.4rem; border: 1px solid var(--ink); display: grid; place-items: center; }
.x-steps strong { font-family: var(--f-display); font-stretch: 87.5%; font-size: 1.15rem; display: block; margin-bottom: .2rem; }
.x-steps p { margin: 0; color: var(--ink-2); }

.x-callout { background: var(--folio); padding: 1.4rem 1.5rem; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 1rem; }
.x-callout .x-ico { width: 30px; height: 30px; color: var(--ink); }
.x-callout p { margin: 0; }
.x-warn { list-style: none; padding: 0; margin: 0; }
.x-warn li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .8rem; padding: .6rem 0; }
.x-warn .x-ico { color: #b3261e; margin-top: .2em; }
.x-law { list-style: none; padding: 0; margin: 0; }
.x-law li { font-family: var(--f-text); font-size: .95rem; padding: .45rem 0; border-bottom: 1px dashed var(--hair); color: var(--ink-2); }
.x-verified { display: flex; gap: .7rem; align-items: center; margin-top: 1.4rem; color: var(--ink-3); font-size: .88rem; }
.x-verified .x-ico { color: var(--ink-3); }

.x-aside { position: sticky; top: 96px; }
.x-aside .x-folio { box-shadow: 0 18px 40px -22px rgba(18,18,18,.45); border: 1px solid var(--ink); }

.x-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.x-site a.x-file { text-decoration: none; color: var(--ink); display: block; transition: transform .3s var(--ease-out); }
.x-site a.x-file:hover { transform: translateY(-4px); color: var(--ink); }
.x-site a.x-file:hover strong { color: var(--folder); }
.x-file .x-tab { transform: none; font-size: .74rem; padding: .4rem .9rem .3rem; }
.x-file__body { background: var(--tab, var(--folder)); padding: .7rem; }
.x-file__sheet { background: #fff; padding: 1rem 1rem 1.1rem; min-height: 120px; }
.x-file__sheet strong { font-family: var(--f-display); font-stretch: 87.5%; font-size: 1.15rem; display: block; line-height: 1.2; margin-bottom: .35rem; }
.x-file__sheet span { color: var(--ink-2); font-size: .9rem; line-height: 1.45; display: block; }

/* ---------- Pie ---------- */
.x-foot { background: #0d0d0f; color: #b7bac2; font-size: .94rem; }
.x-foot__in { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem; padding: 4rem var(--gut) 2.5rem; max-width: var(--wrap); margin: 0 auto; }
.x-foot h3 { font-family: var(--f-text); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 1rem; }
.x-foot ul { list-style: none; margin: 0; padding: 0; }
.x-foot li { margin-bottom: .45rem; }
.x-foot a { color: #e2e4e9; text-decoration: none; }
.x-foot a:hover { color: #fff; text-decoration: underline; }
.x-foot .x-brand { color: #fff; margin-bottom: 1rem; }
.x-foot .x-brand__sub { color: #8d919a; }
.x-foot__bottom { border-top: 1px solid #2a2b30; padding: 1.2rem var(--gut); max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .82rem; color: #8d919a; }

/* ---------- Páginas heredadas (blog, legal, contacto, acceso) ---------- */
.x-page { padding: clamp(3rem, 7vw, 5rem) 0; }
.x-page__title { font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .92; margin-bottom: 1.25rem; }
.x-site main .btn-red, .x-site main .btn-primary { background: var(--ink); border-color: var(--ink); border-radius: 0; }
.x-site main .btn-red:hover, .x-site main .btn-primary:hover { background: var(--folder); border-color: var(--folder); }
.x-notice { background: var(--folio); padding: 1rem 1.25rem; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .8rem; margin-bottom: 2rem; }
.x-notice .x-ico { color: var(--ink); width: 24px; height: 24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .x-doc__grid { grid-template-columns: 200px minmax(0, 1fr); }
    .x-aside { position: static; grid-column: 1 / -1; max-width: 640px; }
}
@media (max-width: 991.98px) {
    .x-nav, .x-head .x-btn, .x-head .x-lang--desk { display: none; }
    .x-menu-toggle { display: inline-flex; }
    .x-head.is-open .x-nav {
        display: flex; flex-direction: column; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--ink); padding: .75rem var(--gut) 1.25rem; max-height: calc(100vh - 68px); overflow-y: auto;
    }
    .x-head.is-open .x-nav > a, .x-head.is-open .x-nav__btn { padding: .8rem 0; border-bottom: 1px solid var(--hair); font-size: 1.1rem; justify-content: space-between; }
    .x-head.is-open .x-nav > a::after, .x-head.is-open .x-nav__btn::after { display: none; }
    .x-head.is-open .x-nav .x-btn, .x-head.is-open .x-nav .x-lang { display: inline-flex; justify-content: center; margin-top: .9rem; }
    .x-mega { position: static; box-shadow: none; border: 0; }
    .x-mega .x-wrap { padding: 0; }
    .x-mega__grid { grid-template-columns: 1fr; padding: .5rem 0; }
    .x-mega__col, .x-mega__col:nth-child(3n+1) { border-left: 0; padding: .5rem 0; }
    .x-board__in, .x-sec__head, .x-lawyer, .x-close__in, .x-cabinet__sheet { grid-template-columns: 1fr; }
    .x-notes { grid-template-columns: 1fr; }
    .x-split { grid-template-columns: 1fr; }
    .x-split__col + .x-split__col { border-left: 0; border-top: 1px solid var(--ink); }
    .x-ledger__row { grid-template-columns: 5rem minmax(0, 1fr) 80px; }
    .x-ledger__row p { grid-column: 2 / 3; }
    .x-ledger__row h3 { grid-column: 2 / 3; }
    .x-ledger .x-stamp { grid-row: 1 / span 2; grid-column: 3; }
    .x-doc__grid { grid-template-columns: 1fr; }
    .x-toc { position: static; }
    .x-toc ol { display: none; }
    .x-toc.is-open ol { display: block; }
    .x-foot__in { grid-template-columns: 1fr 1fr; }
    .x-cover__grid { grid-template-columns: 1fr; }
    .x-doc { padding-top: 2.5rem; }
}
@media (max-width: 575.98px) {
    body.x-site { font-size: 1rem; }
    .x-row2 { grid-template-columns: 1fr; }
    .x-folio { padding: 1.25rem 1.1rem; }
    .x-stamp { width: 74px; height: 74px; font-size: .48rem; }
    .x-boxes { grid-template-columns: 1fr; }
    .x-foot__in { grid-template-columns: 1fr; }
    .x-index a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
    .x-lawyer__photo .x-stamp { right: 8px; }
    .x-ledger__row { grid-template-columns: minmax(0, 1fr) 70px; gap: .6rem 1rem; }
    .x-ledger__row > .x-mono { grid-column: 1; }
    .x-ledger__row h3, .x-ledger__row p { grid-column: 1; }
    .x-ledger .x-stamp { grid-row: 1 / span 3; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
    .x-head, .x-foot, .x-aside, .x-close, .x-cover__actions { display: none !important; }
    .x-cover { background: #fff !important; color: #000 !important; }
}

/* Catálogo completo: carpetas apiladas */
.x-file__body, .x-file__sheet { display: block; }
.x-stack { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.x-stack .x-cabinet__panel { scroll-margin-top: 110px; }
.x-hubhead { background: var(--folder); color: #fff; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); }
.x-hubhead h1 { font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .9; margin-bottom: 1.2rem; }
.x-hubhead p { color: #e6ebfa; font-size: 1.15rem; max-width: 40rem; }
.x-hubhead .x-tabs { margin-top: 2rem; }
.x-hubhead .x-tab { transform: none; }
.x-close .x-folio p { color: var(--ink-2); font-size: .93rem; }
.x-close .x-folio .x-form-alt a { color: var(--ink); font-family: var(--f-text); font-stretch: normal; font-weight: 400; font-size: .92rem; }
.x-stamp--ink { border: 1.5px solid var(--ink); color: var(--ink); background: #fff; }
/* Botones dentro de enlaces: el color del enlace no manda */
.x-site a.x-btn { color: #fff; }
.x-site a.x-btn--paper { color: var(--ink); }
.x-site a.x-btn--paper:hover, .x-site a.x-btn:hover { color: #fff; }
.x-nav > a.x-btn { background: var(--ink); color: #fff; border: 2px solid var(--ink); padding: .6rem 1rem; margin-left: .5rem; }
.x-nav > a.x-btn:hover { background: var(--folder); border-color: var(--folder); }
.x-nav > a.x-btn::after { display: none; }
.x-rating { justify-content: flex-start; text-align: left; }
.x-rating .x-stars { color: var(--ink); }
/* Ajustes tras la documentación del sistema */
.x-site a.x-brand, .x-site a.x-brand:hover { color: var(--ink); }
.x-site .x-foot a.x-brand, .x-site .x-foot a.x-brand:hover { color: #fff; }
.x-lang { font-family: var(--f-text); font-weight: 700; font-size: .78rem; letter-spacing: .04em; }
.x-proof__cap { color: #c9d3f2; }