/* ils.css · generado por deploy/build-css.py. No editar: editar las fuentes. */

/* ===== site.css ===== */
/* =========================================================
   Peralta Rojas Abogados — Regularización Extraordinaria
   Estética basada en el sitio Wix actual:
   - Rojo #E63946 como color principal
   - Negro #111 para secciones de contraste
   - Serif (Playfair Display) para títulos
   - Sans-serif (Inter) para cuerpo
   ========================================================= */

:root {
    --brand-red:        #c01010;
    --brand-red-dark:   #8f0c0c;
    --brand-black:      #111111;
    --brand-ink:        #1a1a1a;
    --brand-muted:      #6b6b6b;
    --brand-cream:      #f7f4ef;
    --brand-border:     #e5e5e5;

    --font-serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* -------- Base -------- */
html, body {
    font-family: var(--font-sans);
    color: var(--brand-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .serif {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--brand-ink);
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.15; }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; }

p  { line-height: 1.7; }

a {
    color: var(--brand-red);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover { color: var(--brand-red-dark); }

/* -------- Utilidades de marca -------- */
.text-brand-red  { color: var(--brand-red) !important; }
.bg-brand-red    { background: var(--brand-red) !important; color: #fff; }
.bg-brand-black  { background: var(--brand-black) !important; color: #fff; }
.bg-brand-cream  { background: var(--brand-cream) !important; }

.section {
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.section-dark {
    background: var(--brand-black);
    color: #f4f4f4;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: #fff; border-bottom: 1px solid var(--brand-red); }

/* Acento rojo bajo título */
.title-underline {
    display: inline-block;
    position: relative;
    padding-bottom: .5rem;
}
.title-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 80px; height: 3px;
    background: var(--brand-red);
}

/* Etiqueta pequeña (eyebrow) */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
    color: var(--brand-red);
    font-weight: 600;
}

/* -------- Botones -------- */
.btn {
    border-radius: 999px;
    padding: .75rem 1.6rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: all .18s ease;
}
.btn-lg { padding: .95rem 2rem; font-size: 1rem; }

.btn-red, .btn-primary {
    background: var(--brand-red);
    border: 2px solid var(--brand-red);
    color: #fff;
}
.btn-red:hover, .btn-primary:hover {
    background: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
    color: #fff;
}

.btn-black {
    background: var(--brand-black);
    border: 2px solid var(--brand-black);
    color: #fff;
}
.btn-black:hover {
    background: #000;
    color: #fff;
}

.btn-outline-red {
    background: transparent;
    border: 2px solid var(--brand-red);
    color: var(--brand-red);
}
.btn-outline-red:hover {
    background: var(--brand-red);
    color: #fff;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.btn-outline-white:hover { background: #fff; color: var(--brand-black); }

/* Botón flotante "Ponerse en contacto" */
.floating-cta {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    background: var(--brand-red);
    color: #fff;
    border-radius: 999px;
    padding: .85rem 1.4rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(192, 16, 16, .35);
}
.floating-cta:hover { background: var(--brand-red-dark); color: #fff; }

/* -------- Navbar -------- */
.site-nav {
    background: #fff;
    border-bottom: 1px solid var(--brand-border);
    padding: .75rem 0;
}
.site-nav .navbar-brand {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--brand-ink) !important;
    letter-spacing: -0.01em;
}
.site-nav .navbar-brand .brand-accent {
    color: var(--brand-red);
}
.site-nav .navbar-brand .brand-sub {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: .7rem;
    color: var(--brand-muted);
    letter-spacing: .02em;
    margin-top: 2px;
}
.site-nav .nav-link {
    color: var(--brand-ink) !important;
    font-weight: 500;
    font-size: .95rem;
    padding: .5rem 1rem !important;
    position: relative;
}
.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    color: var(--brand-red) !important;
}
.site-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 1rem; right: 1rem; bottom: 0;
    height: 2px;
    background: var(--brand-red);
}

/* -------- Hero -------- */
.hero {
    padding: clamp(3rem, 7vw, 6rem) 0;
    background: var(--brand-cream);
}
.hero h1 {
    margin-bottom: 1.25rem;
}
.hero .lead {
    font-size: 1.1rem;
    color: var(--brand-muted);
    margin-bottom: 1.75rem;
    max-width: 540px;
}
.hero-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
}
.hero-image img { width: 100%; height: auto; display: block; }

/* -------- Cards (blog/pasos/precios) -------- */
.card-clean {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    padding: 2rem;
    height: 100%;
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-clean:hover {
    box-shadow: 0 14px 32px rgba(0,0,0,.06);
    transform: translateY(-2px);
}
.card-clean .step-num {
    color: var(--brand-red);
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .75rem;
}

/* Blog card */
.blog-card { height: 100%; }
.blog-card .blog-card-img {
    aspect-ratio: 16 / 10;
    background: #eee center/cover no-repeat;
    border-radius: 8px;
    margin-bottom: 1rem;
}
.blog-card .blog-meta {
    color: var(--brand-muted);
    font-size: .85rem;
    letter-spacing: .04em;
    margin-bottom: .5rem;
}
.blog-card h3 {
    font-size: 1.3rem;
    margin-bottom: .5rem;
}
.blog-card h3 a { color: var(--brand-ink); }
.blog-card h3 a:hover { color: var(--brand-red); }
.blog-card p { color: var(--brand-muted); font-size: .95rem; }

/* -------- Pricing -------- */
.price-card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.price-card .price-banner {
    background: var(--brand-red);
    color: #fff;
    text-align: center;
    padding: .75rem 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .85rem;
}
.price-card .price-body {
    padding: 2.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.price-card h3 {
    font-size: 1.4rem;
    margin-bottom: .5rem;
}
.price-card .price-amount {
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--brand-ink);
    line-height: 1;
    margin: 1rem 0 .25rem;
}
.price-card .price-note {
    color: var(--brand-muted);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
.price-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.price-card ul li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--brand-border);
    font-size: .95rem;
}
.price-card ul li:last-child { border-bottom: none; }
.price-card .price-cta { margin-top: auto; }

/* -------- Banner rojo eslogan -------- */
.slogan-banner {
    background: var(--brand-red);
    color: #fff;
    padding: 2.5rem 0;
    text-align: center;
}
.slogan-banner h2 {
    color: #fff;
    font-style: italic;
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
}

/* -------- Footer -------- */
.site-footer {
    background: var(--brand-black);
    color: #d0d0d0;
    padding: 3.5rem 0 2rem;
}
.site-footer h5 {
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.site-footer a { color: #d0d0d0; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-brand {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
}
.site-footer .footer-brand .brand-accent { color: var(--brand-red); }
.site-footer .footer-bottom {
    border-top: 1px solid #2a2a2a;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    font-size: .85rem;
    color: #888;
}

/* -------- Blog list -------- */
.blog-list-header .eyebrow { margin-bottom: 1rem; }
.blog-list-header h1 {
    max-width: 900px;
    margin-bottom: 2.5rem;
}

/* Artículo blog */
.blog-body h2 { margin-top: 2.2rem; }
.blog-body h3 { margin-top: 1.6rem; }
.blog-body img { max-width: 100%; height: auto; border-radius: 6px; }
.blog-body p  { line-height: 1.75; margin-bottom: 1.1rem; }
.blog-body ul, .blog-body ol { margin-bottom: 1.2rem; }
.blog-body li { margin-bottom: .35rem; }
.blog-body blockquote {
    border-left: 3px solid var(--brand-red);
    padding: .5rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--brand-muted);
    font-style: italic;
}

/* -------- Formularios -------- */
.form-control, .form-select {
    border-radius: 6px;
    border: 1px solid var(--brand-border);
    padding: .7rem .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(192, 16, 16, .15);
}
.form-label { font-weight: 500; font-size: .92rem; }

/* -------- Responsive -------- */
@media (max-width: 767.98px) {
    .floating-cta { right: .75rem; bottom: .75rem; padding: .7rem 1.1rem; font-size: .9rem; }
    .hero { text-align: center; }
    .hero .lead { margin-left: auto; margin-right: auto; }
}

/* ===== expediente.css ===== */
/* =========================================================================
   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;
    --g-uge:          #0e6f74; /* verde azulado: movilidad internacional (UGE) */

    --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;
}
.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); }
.g-uge          { --tab: var(--g-uge); }

/* ---------- 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.7rem, 4.1cqi, 3.6rem); line-height: .92; color: var(--ink); overflow-wrap: break-word; hyphens: manual; 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; }

/* Ruta de navegación sobre la tapa de color: hereda el color de la tapa */
.x-crumbs.x-cap, .x-crumbs.x-cap a { color: inherit; }

/* Guías */
.x-byline { font-size: .95rem; opacity: .9; margin-top: -.4rem; }
.x-byline a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.x-answer { font-size: 1.08rem; line-height: 1.6; margin: 1rem 0 .8rem; }
.x-table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; border: 1px solid var(--ink); }
.x-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.x-table th { text-align: left; font-family: var(--f-text); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; background: var(--folio); border-bottom: 1px solid var(--ink); padding: .65rem .8rem; }
.x-table td { border-top: 1px solid var(--hair); padding: .65rem .8rem; vertical-align: top; font-variant-numeric: tabular-nums; }
.x-article .x-ticks { margin: .5rem 0 1rem; }


/* ── Ciudades: mapa de España de líneas y datos locales (oct. 2026) ── */
.x-local{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.x-local__note{color:var(--ink-2);max-width:60ch;margin-bottom:1.5rem}
.x-local__facts{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);margin:0;background:var(--paper)}
.x-local__facts div{padding:1rem 1.1rem;border-bottom:1px solid var(--hair)}
.x-local__facts div:nth-child(odd){border-right:1px solid var(--hair)}
.x-local__facts dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem}
.x-local__facts dd{margin:0;line-height:1.45}
.x-local__ver{margin-top:.9rem;font-size:.72rem;color:var(--ink-3)}
.x-cities{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.x-cities a{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border:1px solid var(--rule);color:var(--ink);text-decoration:none}
.x-cities a:hover{background:var(--ink);color:var(--paper)}
.x-cities--list{display:block;border-top:1px solid var(--rule)}
.x-cities--list a{display:grid;gap:.25rem;border:0;border-bottom:1px solid var(--hair);padding:1rem .25rem}
.x-cities--list strong{font-family:var(--f-display);font-size:1.5rem}
.x-cities--list span{color:var(--ink-3)}
.x-cities--list a:hover span{color:inherit}
@media (max-width:860px){.x-local{grid-template-columns:1fr}.x-local__facts{grid-template-columns:1fr}.x-local__facts div:nth-child(odd){border-right:0}.x-map{position:relative;top:0}}

/* ── Ciudades: mapa «pantalla» de España (futurista, oct. 2026) ── */
.x-map{--m-bg:#07161b;--m-ink:#f3efe7;--m-stone:#b9b3a7;--m-acc:#c8604f;--m-line:rgba(243,239,231,.14);
  position:sticky;top:6rem;margin:0;background:radial-gradient(120% 90% at 70% 20%,#0d2730 0%,var(--m-bg) 62%);color:var(--m-ink);
  border:1px solid var(--m-line);padding:14px 14px 12px;isolation:isolate;overflow:hidden}
.x-map::before,.x-map::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--m-stone);pointer-events:none}
.x-map::before{top:7px;left:7px;border-right:0;border-bottom:0}
.x-map::after{bottom:7px;right:7px;border-left:0;border-top:0}
.x-map__hud{display:flex;justify-content:space-between;font:400 10px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--m-stone);padding:4px 10px 10px}
.x-map__hud span:last-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5fd39a;margin-right:8px;box-shadow:0 0 8px #5fd39a;animation:xmBlink 2.4s ease-in-out infinite}
.x-map svg{display:block;width:100%;height:auto;overflow:visible;color:var(--m-ink)}
.x-map__dotfill{fill:rgba(243,239,231,.38)}
.x-map__nb{fill:rgba(243,239,231,.035)}
.x-map__grid{fill:none;stroke:rgba(243,239,231,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.x-map__land{fill:url(#mapa-puntos)}
.x-map__coast{fill:none;stroke:rgba(243,239,231,.8);stroke-width:1.1;filter:url(#mapa-brillo);stroke-dasharray:2600;stroke-dashoffset:2600;animation:xmDraw 2.8s cubic-bezier(.16,1,.3,1) .1s forwards}
.x-map__inset rect{fill:rgba(7,22,27,.6);stroke:var(--m-line);stroke-dasharray:3 3}
.x-map__inset text{font:400 10px var(--f-mono);letter-spacing:.16em;fill:var(--m-stone)}
.x-map__scan{animation:xmScan 7s linear infinite;pointer-events:none}
.x-map__cross line{stroke:var(--m-acc);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:4 4;opacity:0;transition:opacity .25s}
.x-map[data-active] .x-map__cross line{opacity:.8}
.x-map__routes path{fill:none;stroke:var(--m-acc);stroke-width:1;stroke-dasharray:2 5;opacity:.28;animation:xmFlow 2.2s linear infinite}
.x-map__routes path.is-on{opacity:1;stroke-width:1.1}
.x-map__city{cursor:pointer;text-decoration:none;opacity:0;animation:xmIn .6s ease-out forwards;animation-delay:calc(1.2s + var(--d))}
.x-map__node{fill:var(--m-ink);transition:fill .2s}
.x-map__ring{fill:none;stroke:var(--m-ink);stroke-width:.6;opacity:.35;transition:opacity .2s,stroke .2s}
.x-map__pulse{fill:none;stroke:var(--m-ink);stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:center}
.x-map__city text{font:500 10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;fill:rgba(243,239,231,.62);paint-order:stroke;stroke:var(--m-bg);stroke-width:3px;transition:fill .2s}
.x-map__city:hover .x-map__node,.x-map__city:focus .x-map__node,.x-map__city.is-hover .x-map__node,.x-map__city.is-on .x-map__node,.x-map__city.is-hq .x-map__node{fill:var(--m-acc)}
.x-map__city:hover .x-map__ring,.x-map__city:focus .x-map__ring,.x-map__city.is-hover .x-map__ring,.x-map__city.is-on .x-map__ring{opacity:1;stroke:var(--m-acc)}
.x-map__city:hover text,.x-map__city:focus text,.x-map__city.is-hover text,.x-map__city.is-on text{fill:var(--m-ink)}
.x-map__city.is-on .x-map__pulse,.x-map__city.is-hq .x-map__pulse,.x-map__city.is-hover .x-map__pulse{stroke:var(--m-acc);animation:xmPulse 2s ease-out infinite}
.x-map__city:focus{outline:none}
.x-map__city:focus-visible .x-map__ring{stroke-width:1.4}
.x-map__readout{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--m-line);margin-top:6px;padding:10px 10px 2px;font:400 10px var(--f-mono);letter-spacing:.14em;color:var(--m-stone);text-transform:uppercase}
.x-map__readout strong{font:600 1.05rem var(--f-display);letter-spacing:.04em;color:var(--m-ink)}
/* Índice: el mapa es la portada de la sección, a todo el ancho; la lista va debajo en columnas. */
.x-local--hub{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.x-local--hub .x-map{position:sticky;top:5.5rem}
.x-local--hub .x-cities--grid{grid-template-columns:1fr}
.x-cities--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 2rem;border-top:1px solid var(--rule)}
@keyframes xmDraw{to{stroke-dashoffset:0}}
@keyframes xmScan{from{transform:translateY(0)}to{transform:translateY(700px)}}
@keyframes xmFlow{to{stroke-dashoffset:-14}}
@keyframes xmPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}
@keyframes xmIn{to{opacity:1}}
@keyframes xmBlink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.x-map *{animation:none!important}.x-map__coast{stroke-dashoffset:0}.x-map__city{opacity:1}.x-map__scan{display:none}}

/* ===== gateway.css ===== */
/* =========================================================================
   Immigration Lawyers Spain · «The Gateway to Spain» (octubre 2026)
   Se carga después de expediente.css y sustituye su mundo visual:
   petróleo para lo que recibe (cabecera, portadas, pie), marfil para leer,
   terracota solo como acento (nunca como color de texto largo).
   Tipos gratuitos: Gambetta (titulares) y Switzer (texto), de Fontshare;
   IBM Plex Mono para cifras y coordenadas.
   ========================================================================= */

:root {
    --petrol: #07161b;
    --petrol-2: #0c2129;
    --petrol-3: #123039;
    --ivory: #f3efe7;
    --ivory-2: #ebe5d9;
    --stone: #b9b3a7;
    --terra: #9e3f32;
    --terra-lt: #c8604f;

    --folder: #0f3a46;
    --folder-deep: #07161b;
    --g-nacionalidad: #7a3a30;
    --g-arraigo: #3b4a3f;
    --g-familia: #6a4f42;
    --g-residencia: #24505c;
    --g-documentos: #4f5d61;
    --g-recursos: #3a3f42;
    --g-uge: #0f3a46;

    --stamp: #9e3f32;
    --stamp-soft: rgba(158, 63, 50, .10);
    --ink: #07161b;
    --ink-2: #33444a;
    --ink-3: #5e6b6f;
    --paper: #f3efe7;
    --folio: #ebe5d9;
    --rule: #07161b;
    --hair: #d8d0c2;

    --f-display: 'Gambetta', 'Iowan Old Style', Georgia, serif;
    --f-text: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body.x-site { background: var(--ivory); color: var(--ink); font-size: 1.05rem; }
html { background: var(--petrol); scrollbar-color: var(--ink-3) var(--ivory-2); }
.x-site a { color: var(--ink); text-decoration-color: var(--terra); }
.x-site a:hover { color: var(--terra); }
.x-site ::selection { background: var(--terra); color: var(--ivory); }
.x-site :focus-visible { outline-color: var(--terra-lt); }

/* Titulares: serif editorial, sin mayúsculas forzadas */
.x-site h1, .x-site h2, .x-site h3, .x-site h4 { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.015em; }
.x-h2, .x-cover h1, .x-hubhead h1, .x-page__title, .x-hero h1 {
    font-family: var(--f-display); font-weight: 300; font-stretch: normal; text-transform: none; letter-spacing: -0.02em; line-height: 1;
}
.x-h2 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); }
.x-h2 em, .x-cover h1 em { font-style: italic; color: var(--stone); }
.x-article h2, .x-folio__title, .x-summary__head h2, .x-ledger__row h3, .x-split h3, .x-done h3, .x-cabinet__label {
    font-family: var(--f-display); font-weight: 400; font-stretch: normal; text-transform: none; letter-spacing: -0.01em;
}
.x-article h2 { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.1; }
.x-folio__title { font-size: 1.7rem; }
.x-summary__head h2 { font-size: 1.5rem; }
.x-index__name, .x-file__sheet strong, .x-box__v, .x-fact__v, .x-steps strong, .x-note footer strong, .x-cities--list strong {
    font-family: var(--f-display); font-weight: 400; font-stretch: normal;
}
.x-index__name { font-size: 1.35rem; }
.x-faq summary { font-family: var(--f-display); font-weight: 400; font-stretch: normal; font-size: 1.3rem; }
.x-faq summary:hover { color: var(--terra); }
.x-faq details[open] summary .x-plus { background: var(--petrol); border-color: var(--petrol); color: var(--ivory); }
.x-mono { font-family: var(--f-mono); }

/* Botones: rectos, finos, sin mayúsculas */
.x-btn, .x-link {
    font-family: var(--f-text); font-weight: 500; font-stretch: normal; text-transform: none; letter-spacing: .02em;
}
.x-btn { border: 1px solid var(--petrol); background: var(--petrol); color: var(--ivory); padding: .95rem 1.5rem; }
.x-btn:hover { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.x-site a.x-btn { color: var(--ivory); }
.x-site a.x-btn:hover { color: var(--petrol); }
.x-btn--paper, .x-site a.x-btn--paper { background: var(--ivory); color: var(--petrol); border-color: var(--ivory); }
.x-btn--paper:hover, .x-site a.x-btn--paper:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.x-btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(243,239,231,.6); }
.x-site a.x-btn--ghost { color: var(--ivory); }
.x-btn--ghost:hover, .x-site a.x-btn--ghost:hover { background: var(--ivory); color: var(--petrol); }
.x-link { border-bottom: 1px solid var(--terra); }

/* ---------- Cabecera ---------- */
.x-head { background: rgba(7, 22, 27, .96); border-bottom: 1px solid rgba(243,239,231,.12); color: var(--ivory); }
.x-head__in { min-height: 76px; }
.x-site a.x-brand, .x-site a.x-brand:hover { color: var(--ivory); }
.x-brand { gap: .85rem; }
.x-brand .x-mark { font: 500 .78rem/1 var(--f-text); letter-spacing: .3em; border: 1px solid var(--stone); padding: .5rem .45rem .5rem .7rem; color: var(--ivory); }
.x-brand__name { font-family: var(--f-text); font-weight: 500; font-stretch: normal; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; line-height: 1.3; color: var(--stone); }
.x-brand__sub { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: .86rem; letter-spacing: .01em; text-transform: none; color: var(--ivory); margin-top: 2px; }
.x-nav > a, .x-nav__btn { font-family: var(--f-text); font-weight: 400; font-stretch: normal; font-size: .93rem; color: rgba(243,239,231,.72); }
.x-nav > a:hover, .x-nav__btn:hover, .x-nav > a[aria-current="page"] { color: var(--ivory); }
.x-nav > a::after, .x-nav__btn::after { background: var(--terra-lt); height: 1px; }
.x-lang { color: var(--ivory); border-color: rgba(243,239,231,.35); font-family: var(--f-mono); font-weight: 400; }
.x-site a.x-lang { color: var(--ivory); }
.x-lang:hover, .x-site a.x-lang:hover { background: var(--ivory); color: var(--petrol); }
.x-nav > a.x-btn { background: var(--ivory); color: var(--petrol); border: 1px solid var(--ivory); padding: .6rem 1.05rem; }
.x-nav > a.x-btn:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.x-menu-toggle { border-color: rgba(243,239,231,.4); color: var(--ivory); }
.x-mega { background: var(--petrol-2); border-bottom: 1px solid rgba(243,239,231,.12); box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
.x-mega__col { border-left-color: rgba(243,239,231,.1); }
.x-mega__tab { background: none; color: var(--stone); font-family: var(--f-text); font-weight: 500; font-stretch: normal; font-size: .7rem; letter-spacing: .2em; padding: 0; margin-bottom: .8rem; }
.x-mega__col a { color: rgba(243,239,231,.86); font-size: .95rem; }
.x-mega__col a:hover { color: var(--ivory); }
.x-mega__all { border-top-color: rgba(243,239,231,.1); }
.x-mega__all .x-link, .x-site .x-mega__all a { color: var(--ivory); }

/* ---------- Portadas de página (tramite, guía, ciudad, páginas premium) ---------- */
.x-cover, .x-hubhead { background: var(--petrol); background-image: radial-gradient(90% 120% at 85% 0%, var(--petrol-3) 0%, var(--petrol) 60%); color: var(--ivory); }
.x-cover h1 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
.x-hubhead h1 { font-size: clamp(3rem, 7vw, 5.6rem); }
.x-cover__lead, .x-hubhead p { color: rgba(243,239,231,.78); }
.x-crumbs.x-cap, .x-crumbs.x-cap a { color: var(--stone); letter-spacing: .14em; font-weight: 500; }
.x-cover .x-btn--paper:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.x-summary { background: var(--ivory); color: var(--ink); box-shadow: none; border: 1px solid rgba(243,239,231,.2); }
.x-summary__head { border-bottom-color: var(--ink); }
.x-cover__tabs { background: var(--petrol); }

/* Pestañas de grupo: etiquetas sobrias */
.x-tab { clip-path: none; font-family: var(--f-text); font-weight: 500; font-stretch: normal; font-size: .72rem; letter-spacing: .18em; padding: .45rem .8rem; transform: none; }
.x-tab__n { font-family: var(--f-mono); }
.g-residencia { --tab-ink: #fff; }

/* Catálogo y fichas */
.x-cabinet__panel { background: var(--petrol); }
.x-cabinet__panel::before, .x-cabinet__panel::after { display: none; }
.x-cabinet__sheet { background: var(--ivory); padding-right: clamp(1.25rem, 3vw, 2.25rem); }
.x-index { border-top-color: var(--ink); }
.x-index a:hover { background: var(--ivory-2); }
.x-file__body { background: var(--petrol); padding: 0; }
.x-file__sheet { background: var(--ivory); border: 1px solid var(--hair); border-top: 2px solid var(--tab, var(--petrol)); }
.x-site a.x-file:hover strong { color: var(--terra); }
.x-file .x-tab { display: none; }

/* Folio / formulario */
.x-folio { background: #fbf9f4; border: 1px solid var(--ink); box-shadow: 0 30px 60px -36px rgba(7,22,27,.55); }
.x-folio__head { border-bottom-color: var(--ink); }
.x-input { background: #fff; border-color: rgba(7,22,27,.5); }
.x-input:focus { border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(15,58,70,.15); }
.x-check input:checked { background: var(--petrol); border-color: var(--petrol); }
.x-stamp { border-color: var(--terra); color: var(--terra); font-family: var(--f-mono); }
.x-stamp--done strong { font-family: var(--f-display); font-stretch: normal; font-weight: 400; }

/* Secciones */
.x-sec--folio { background: var(--ivory-2); }
.x-ticks .x-ico { color: var(--terra); }
.x-split { border-color: var(--ink); }
.x-split__col + .x-split__col { background: var(--ivory-2); }
.x-ledger { border-top: 1px solid var(--ink); }
.x-note__sheet { background: var(--ivory-2); }
.x-note .x-tab { display: none; }
.x-close { background: var(--petrol); }
.x-close p { color: rgba(243,239,231,.72); }
.x-close__contact a { font-family: var(--f-display); font-weight: 400; font-stretch: normal; font-size: 1.5rem; }
.x-callout { background: var(--ivory-2); border-left: 2px solid var(--terra); }
.x-toc a.is-active .x-mono { color: var(--terra); }
.x-table th { background: var(--ivory-2); }

/* ---------- Pie ---------- */
.x-foot { background: var(--petrol); color: rgba(243,239,231,.62); }
.x-foot h3 { color: var(--stone); font-family: var(--f-text); font-weight: 500; letter-spacing: .2em; font-size: .7rem; }
.x-foot a { color: rgba(243,239,231,.86); }
.x-foot a:hover { color: var(--ivory); }
.x-foot__bottom { border-top-color: rgba(243,239,231,.1); color: rgba(243,239,231,.5); }
.x-foot__firm { border-top: 1px solid rgba(243,239,231,.1); }
.x-foot__firm .x-wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.x-foot__firm p { margin: 0; font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ivory); font-weight: 300; }
.x-foot__firm p em { color: var(--stone); }

/* Móvil: el menú abierto también es petróleo */
@media (max-width: 991.98px) {
    .x-head.is-open .x-nav { background: var(--petrol); border-bottom-color: rgba(243,239,231,.12); }
    .x-head.is-open .x-nav > a, .x-head.is-open .x-nav__btn { border-bottom-color: rgba(243,239,231,.1); color: var(--ivory); }
    .x-brand__name { font-size: .64rem; letter-spacing: .2em; }
}

/* =========================================================================
   Portada (g-*)
   ========================================================================= */
.g-dark { background: var(--petrol); color: var(--ivory); }
.g-hero { position: relative; overflow: hidden; background: radial-gradient(80% 90% at 80% 10%, var(--petrol-3) 0%, var(--petrol) 58%); }
.g-hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.g-word { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.5rem, 5.5vw, 6rem); line-height: .9; letter-spacing: -.025em; text-transform: uppercase; margin: 0; color: var(--ivory); }
.g-word span { display: block; }
.g-word span:last-child { color: var(--stone); }
@media (prefers-reduced-motion: no-preference) {
    .g-word span { opacity: 0; transform: translateY(22px); animation: gIn 1.1s var(--ease-out) forwards; }
    .g-word span:nth-child(2) { animation-delay: .1s; }
    .g-word span:nth-child(3) { animation-delay: .2s; }
}
@keyframes gIn { to { opacity: 1; transform: none; } }
.g-endorse { margin: 1.6rem 0 0; font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.8vw, 1.45rem); color: var(--stone); }
.g-endorse a, .x-site .g-endorse a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--terra-lt); }
.g-claim { margin: 1rem 0 2rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: rgba(243,239,231,.72); max-width: 32rem; }
.g-claim strong { color: var(--ivory); font-weight: 500; }
.g-actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; align-items: center; }
.g-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-top: 2.2rem; font: 400 .72rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,239,231,.6); }
.g-meta i { display: inline-block; width: 7px; height: 7px; background: var(--terra-lt); margin-right: .55rem; vertical-align: 1px; }
.g-proof { border-top: 1px solid rgba(243,239,231,.12); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; padding: 1.2rem 0 1.6rem; }
.g-proof .x-cap { color: var(--stone); font-weight: 500; letter-spacing: .14em; }
.g-proof img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .75; }
.g-proof__item { display: inline-flex; align-items: center; gap: .55rem; color: rgba(243,239,231,.85); font-size: .92rem; }
.g-proof .x-stars { color: var(--ivory); }
.g-hero .x-map { position: relative; top: 0; }

/* Buscador «Find your route» */
.g-finder { background: var(--petrol); color: var(--ivory); border-top: 1px solid rgba(243,239,231,.1); padding: clamp(4rem, 8vw, 7rem) 0; scroll-margin-top: 76px; }
.g-finder__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.g-finder h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: .96; letter-spacing: -.02em; }
.g-finder h2 em { color: var(--stone); }
.g-finder__intro { color: rgba(243,239,231,.68); margin: 0; }
.g-rail { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-bottom: 2rem; font: 400 .68rem var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(243,239,231,.32); }
.g-rail span { display: inline-flex; align-items: center; gap: .6rem; transition: color .4s; }
.g-rail span::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.g-rail span.is-on { color: var(--ivory); }
.g-q__label { display: flex; justify-content: space-between; gap: 1rem; font: 400 .72rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(243,239,231,.6); margin-bottom: 1rem; }
.g-opts { border-top: 1px solid rgba(243,239,231,.14); }
.g-opt { width: 100%; display: grid; grid-template-columns: 4rem minmax(0, 1fr) 2rem; align-items: center; text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(243,239,231,.14); color: var(--ivory); padding: 1.35rem 0; cursor: pointer; position: relative; overflow: hidden; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.05; letter-spacing: -.01em; }
.g-opt small { font: 400 .72rem var(--f-mono); letter-spacing: .18em; color: rgba(243,239,231,.5); }
.g-opt__d { display: block; font-family: var(--f-text); font-size: .95rem; line-height: 1.4; letter-spacing: 0; color: rgba(243,239,231,.6); margin-top: .45rem; }
.g-opt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(158,63,50,.22), transparent 60%); transform: translateX(-101%); transition: transform .6s var(--ease-out); pointer-events: none; }
.g-opt:hover::after, .g-opt:focus-visible::after { transform: none; }
.g-opt .x-ico { width: 1.6rem; height: 1.6rem; opacity: .5; transition: transform .45s var(--ease-out), opacity .3s; }
.g-opt:hover .x-ico { transform: translateX(6px); opacity: 1; }
.g-back { background: none; border: 0; color: rgba(243,239,231,.6); font: 400 .72rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; padding: 0; }
.g-back:hover { color: var(--ivory); }
.g-result { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.g-dossier { border: 1px solid rgba(243,239,231,.16); background: var(--petrol-2); }
.g-dossier__top { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid rgba(243,239,231,.14); font: 400 .68rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(243,239,231,.6); }
.g-dossier h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.02; padding: 1.4rem 1.2rem .4rem; margin: 0; }
.g-dossier__sub { padding: 0 1.2rem 1.3rem; color: rgba(243,239,231,.7); margin: 0; }
.g-dossier dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(243,239,231,.14); }
.g-dossier dl div { padding: .95rem 1.2rem; border-bottom: 1px solid rgba(243,239,231,.14); }
.g-dossier dl div:nth-child(odd) { border-right: 1px solid rgba(243,239,231,.14); }
.g-dossier dt { font: 400 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(243,239,231,.55); margin-bottom: .35rem; }
.g-dossier dd { margin: 0; font-size: .98rem; line-height: 1.4; }
.g-dossier__more { display: inline-block; margin: 1rem 1.2rem 1.2rem; }
.x-site .g-dossier__more { color: var(--ivory); }
.g-steps { list-style: none; padding: 0; margin: 0 0 1.8rem; border-left: 1px solid rgba(243,239,231,.2); }
.g-steps li { position: relative; padding: 0 0 1.4rem 1.6rem; color: rgba(243,239,231,.62); font-size: .98rem; }
.g-steps li b { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; color: var(--ivory); margin-bottom: .2rem; }
.g-steps li::before { content: ""; position: absolute; left: -4px; top: .55rem; width: 7px; height: 7px; background: var(--ivory); }
.g-steps li:first-child::before { background: var(--terra-lt); }
.g-who { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.5rem; color: rgba(243,239,231,.68); font-size: .92rem; }
.g-who__faces { display: flex; }
.g-who__faces span, .g-who__faces img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--petrol); margin-right: -10px; object-fit: cover; background: var(--petrol-3); color: var(--stone); display: grid; place-items: center; font: 500 .72rem var(--f-text); }
.g-fade { animation: gFade .6s var(--ease-out); }
@keyframes gFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Caminos (catálogo) */
.g-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.g-path { padding: 1.6rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--hair); }
.g-path + .g-path { padding-left: 1.6rem; border-left: 1px solid var(--hair); }
.g-path:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.g-path__k { font: 400 .7rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.g-path h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.85rem; line-height: 1.05; margin: .5rem 0 .6rem; }
.g-path p { color: var(--ink-2); font-size: .95rem; margin-bottom: 1rem; }
.g-path ul { list-style: none; padding: 0; margin: 0; }
.g-path li a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--hair); text-decoration: none; color: var(--ink); font-size: .98rem; }
.g-path li a:hover { color: var(--terra); }
.g-path li a .x-ico { color: var(--ink-3); }

/* Proceso: línea de progreso */
.g-process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; position: relative; }
.g-process::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ink); }
.g-process li { position: relative; padding-top: 2rem; }
.g-process li::before { content: ""; position: absolute; top: 3px; left: 0; width: 9px; height: 9px; background: var(--ink); }
.g-process li:first-child::before { background: var(--terra); }
.g-process .x-mono { color: var(--ink-3); }
.g-process h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.55rem; margin: .4rem 0 .5rem; }
.g-process p { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* Equipo */
.g-team { padding: clamp(4rem, 8vw, 7rem) 0; }
.g-team h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -.02em; max-width: 52rem; }
.g-team h2 em { color: var(--stone); }
.g-team__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: end; margin-top: 3rem; }
.g-person figure { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, var(--petrol-3), var(--petrol-2)); border: 1px solid rgba(243,239,231,.12); display: grid; place-items: center; }
.g-person img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: grayscale(.2) contrast(1.03); }
.g-person__ini { font-family: var(--f-display); font-weight: 300; font-size: clamp(3rem, 6vw, 5rem); color: rgba(243,239,231,.22); letter-spacing: .02em; }
.g-person h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.75rem; margin: 1rem 0 .2rem; color: var(--ivory); }
.g-person p { margin: 0; color: rgba(243,239,231,.62); font-size: .92rem; }
.g-person__tag { display: inline-block; margin-top: .8rem; padding-top: .55rem; border-top: 1px solid var(--terra-lt); font: 400 .66rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--stone); }

/* Banda de la firma */
.g-firm { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; background: var(--ivory); color: var(--petrol); padding: clamp(1.8rem, 4vw, 3.4rem); margin-top: clamp(3rem, 6vw, 5rem); }
.g-firm__mark { width: 104px; height: 104px; border: 1px solid var(--petrol); display: grid; place-items: center; font-family: var(--f-display); font-weight: 300; font-size: 2.6rem; letter-spacing: .06em; }
.g-firm__k { font: 500 .7rem var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.g-firm h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; margin: .5rem 0 .8rem; color: var(--petrol); }
.g-firm p { margin: 0; max-width: 40rem; color: var(--ink-2); }

/* Cierre con formulario */
.g-close { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

@media (max-width: 991.98px) {
    .g-hero__in, .g-finder__head, .g-result, .g-close { grid-template-columns: 1fr; }
    .g-paths { grid-template-columns: 1fr; }
    .g-path, .g-path + .g-path { padding-left: 0; border-left: 0; }
    .g-process { grid-template-columns: 1fr; }
    .g-process::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
    .g-process li { padding: 0 0 0 1.8rem; }
    .g-team__grid { grid-template-columns: 1fr 1fr; }
    .g-team__grid .g-person:first-child { grid-column: 1 / -1; }
    .g-firm { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .g-opt { grid-template-columns: 2.6rem minmax(0, 1fr) 1.6rem; }
    .g-dossier dl { grid-template-columns: 1fr; }
    .g-dossier dl div:nth-child(odd) { border-right: 0; }
}

/* Pestañas de grupo en contorno: sin bloques de color */
.x-tab, .x-site a.x-tab, .x-site a.x-tab:hover { background: transparent; color: inherit; border: 1px solid currentColor; opacity: .85; }
.x-tab:hover, .x-tab[aria-selected="true"] { opacity: 1; background: rgba(158,63,50,.12); }
.x-hubhead .x-tab, .x-cover__tabs .x-tab { color: var(--ivory); }
.x-stack .x-tab { color: var(--ink); }
/* Catálogo: carpetas sin marco oscuro, solo filete */
.x-cabinet__panel { background: transparent; padding: 0; border-top: 1px solid var(--ink); }
.x-cabinet__sheet { background: transparent; padding: 1.6rem 0 0; }

/* Confianza: precios, promesas, respuesta en 24 h */
.g-path li a { align-items: baseline; }
.g-path__fee { flex: none; font: 400 .72rem var(--f-mono); letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; }
.g-path li a:hover .g-path__fee { color: var(--terra); }
.x-fact--fee .x-fact__v { font-size: 1.05rem; }
.x-fact--fee .x-label { color: var(--terra) !important; }
.x-reply-promise { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-3); text-align: center; }
.g-promise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.g-promise li { padding: 1.4rem 1.4rem 1.6rem 0; border-bottom: 1px solid var(--hair); }
.g-promise li + li { padding-left: 1.4rem; border-left: 1px solid var(--hair); }
.g-promise li:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.g-promise .x-mono { color: var(--terra); }
.g-promise h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; margin: .4rem 0 .4rem; }
.g-promise p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.g-promise__no { margin-top: 2.2rem; padding: 1.6rem 1.8rem; background: var(--ivory-2); border-left: 2px solid var(--terra); max-width: 60rem; }
.g-promise__no h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 .5rem; }
.g-promise__no p { color: var(--ink-2); }
@media (max-width: 991.98px) { .g-promise { grid-template-columns: 1fr; } .g-promise li, .g-promise li + li { padding-left: 0; border-left: 0; } }

/* Reseñas: nota agregada de Google, sin citar clientes */
.g-reviews { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; border-top: 1px solid var(--ink); padding-top: 2rem; }
.g-reviews__score { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(4.5rem, 10vw, 8rem); line-height: .9; }
.g-reviews__of { font-size: .3em; color: var(--ink-3); margin-left: .2em; }
.g-reviews p { max-width: 40rem; }
.g-reviews__note { font-size: .9rem; color: var(--ink-3); }
@media (max-width: 575.98px) { .g-reviews { grid-template-columns: 1fr; } }

/* Contraste AA tras auditoría */
:root { --ink-3: #4c585d; }
.g-rail { color: rgba(243,239,231,.55); }
.x-sec .x-h2 em, .g-promise h2 em { color: var(--ink-3); }
.g-dark h2 em, .g-finder h2 em, .x-cover h1 em, .g-team h2 em { color: var(--stone); }
.cookie-banner { background: var(--petrol) !important; border-top: 1px solid rgba(243,239,231,.15); }
.x-site a.cookie-banner__link, .x-site a.cookie-banner__link:hover { color: var(--ivory); }
.cookie-banner__btn { font-family: var(--f-text) !important; font-stretch: normal !important; text-transform: none !important; font-weight: 500 !important; }

/* Fondos oscuros heredados (contacto, cierre): texto y enlaces en marfil */
.x-board { background: var(--petrol); background-image: radial-gradient(80% 90% at 85% 0%, var(--petrol-3) 0%, var(--petrol) 60%); color: var(--ivory); }
.x-board .x-hero__lead { color: rgba(243,239,231,.78); }
.x-board .x-page__title { margin-bottom: 1.4rem; }
.x-site .x-board .x-close__contact a, .x-site .x-close .x-close__contact a { color: var(--ivory); }
.x-board .x-mono { color: var(--stone) !important; }
/* El sello «pendiente de registro» era del diseño anterior */
.x-folio__head .x-stamp { display: none; }
.x-done .x-stamp { border-color: var(--terra); color: var(--terra); }

/* ── Mapa integrado en la página, sin recuadro (decisión de David, 03/10/2026) ── */
.x-map {
    --m-ink: var(--petrol); --m-stone: var(--ink-3); --m-acc: var(--terra);
    --m-line: rgba(7,22,27,.14); --m-bg: var(--ivory);
    --m-dot: rgba(7,22,27,.32); --m-nb: rgba(7,22,27,.045); --m-grid: rgba(7,22,27,.07); --m-coast: rgba(7,22,27,.7);
    background: none; border: 0; padding: 0; overflow: visible; color: var(--m-ink);
}
.x-sec--folio .x-map { --m-bg: var(--ivory-2); }
.g-dark .x-map, .g-hero .x-map, .x-cover .x-map {
    --m-ink: var(--ivory); --m-stone: var(--stone); --m-acc: var(--terra-lt);
    --m-line: rgba(243,239,231,.14); --m-bg: var(--petrol);
    --m-dot: rgba(243,239,231,.38); --m-nb: rgba(243,239,231,.035); --m-grid: rgba(243,239,231,.07); --m-coast: rgba(243,239,231,.8);
}
.x-map::before, .x-map::after { display: none; }
.x-map__hud { padding: 0 0 .6rem; }
.x-map__readout { padding: .7rem 0 0; }
.x-map__dotfill { fill: var(--m-dot); }
.x-map__nb { fill: var(--m-nb); }
.x-map__grid { stroke: var(--m-grid); }
.x-map__coast { stroke: var(--m-coast); }
.x-map__inset rect { fill: none; stroke: var(--m-line); }
.x-map:not(.g-dark .x-map):not(.g-hero .x-map) .x-map__coast { filter: none; }
.x-map__city text { stroke: var(--m-bg); }

/* Mapa más grande (03/10/2026) */
.g-hero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.g-word { font-size: clamp(2.5rem, 4.7vw, 5.2rem); }
.x-local { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.x-local--hub { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
@media (max-width: 991.98px) { .g-hero__in, .x-local, .x-local--hub { grid-template-columns: 1fr; } }
.x-map svg { color: var(--m-ink); }
.x-map__city text { fill: var(--m-stone); }
.x-map__city:hover text, .x-map__city:focus text, .x-map__city.is-hover text, .x-map__city.is-on text { fill: var(--m-ink); }
.x-map__node { fill: var(--m-ink); }
.x-map__ring, .x-map__pulse { stroke: var(--m-ink); }
/* En fondo claro: sin barrido ni países vecinos (dejaban bloques grises) */
.x-map:not(.g-dark .x-map):not(.g-hero .x-map) .x-map__scan,
.x-map:not(.g-dark .x-map):not(.g-hero .x-map) .x-map__nb { display: none; }

/* ── Primera vista centrada en el cliente, con persona real (04/10/2026) ── */
.g-hero__in--photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.g-kick { font: 500 .74rem var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin: 0 0 1.4rem; }
.g-kick span { margin: 0 .4rem; }
.g-kick em { font-family: var(--f-display); font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 1.05rem; color: var(--ivory); }
.g-kick em a, .x-site .g-kick em a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid var(--terra-lt); }
.g-h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -.02em; margin: 0; color: var(--ivory); max-width: 16ch; }
.g-h1 em { font-style: italic; color: var(--stone); }
.g-portrait { margin: 0; position: relative; }
.g-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; filter: grayscale(.12) contrast(1.03); }
.g-portrait figcaption { margin-top: .8rem; font-size: .88rem; color: rgba(243,239,231,.72); border-left: 2px solid var(--terra-lt); padding-left: .8rem; }
.g-cover-map { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.g-cover-map .x-map { position: relative; top: 0; max-width: 720px; justify-self: end; width: 100%; }
.g-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.g-case { border-top: 1px solid var(--ink); padding-top: 1rem; }
.g-case__k { font-family: var(--f-display); font-size: 1.35rem; margin-bottom: .8rem; }
.g-case dt { font: 500 .7rem var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.g-case dd { margin: 0 0 .8rem; color: var(--ink-2); }
.x-mega__all { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
@media (max-width: 991.98px) {
    .g-hero__in--photo, .g-cover-map { grid-template-columns: 1fr; }
    .g-portrait { max-width: 420px; }
}
@media (max-width: 575.98px) { .g-portrait { max-width: 260px; } }
.g-h1 + .g-claim { margin-top: 1.4rem; }

/* ===== viajes.css ===== */
/* ── Viajes: pasaporte del equipo (portada) y paneles de salidas/llegadas (04/10/2026) ── */
.ils-vj { --vj-burg: #5b1520; --vj-burg2: #3f0d15; --vj-gold: #d2b071; --vj-gold2: #a8854a; --vj-amber: #e3b25a; --vj-green: #7fd1a0; --vj-red: #ec7a6a; --vj-e: cubic-bezier(.16, 1, .3, 1); }
.ils-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Portada con pasaporte */
.g-hero__in--pp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.ils-pp-wrap { position: relative; width: 100%; max-width: 700px; justify-self: end; }
.ils-pp-box { position: relative; width: 100%; height: calc(560px * var(--s, 1)); }
.ils-pp-stage { position: absolute; left: 0; top: 0; width: 700px; height: 560px; transform: scale(var(--s, 1)); transform-origin: 0 0; perspective: 2400px; }
.ils-pp { position: absolute; left: 180px; top: 18px; width: 340px; height: 476px; transform-style: preserve-3d; transform: rotateX(14deg) rotateY(-22deg) rotateZ(4deg); transition: transform 1.2s var(--vj-e); cursor: pointer; border: 0; padding: 0; background: none; }
.ils-pp:not(.is-open):hover { transform: rotateX(9deg) rotateY(-13deg) rotateZ(2deg) translateY(-8px); }
.ils-pp.is-open { transform: rotateX(5deg) translateX(170px); }
.ils-pp:focus-visible { outline: 2px solid var(--vj-gold); outline-offset: 8px; }
.ils-leaf { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.15s var(--vj-e); }
.ils-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5px 15px 15px 5px; overflow: hidden; text-align: left; }
.ils-face--back { transform: rotateY(180deg); border-radius: 15px 5px 5px 15px; }
.ils-cover { background: radial-gradient(120% 80% at 30% 20%, rgba(255,255,255,.06), transparent 60%), repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(160deg, var(--vj-burg), var(--vj-burg2)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 6px 0 14px rgba(0,0,0,.45), 0 50px 80px -30px #000; display: flex; flex-direction: column; align-items: center; padding: 40px 26px 30px; }
.ils-gold { background: linear-gradient(180deg, #f0d9a2 0%, var(--vj-gold) 45%, var(--vj-gold2) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--vj-gold); filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
.ils-cover__top { font: 500 12px/2 var(--f-text); letter-spacing: .42em; text-align: center; }
.ils-cover__crest { margin: 26px 0 24px; width: 132px; height: 150px; }
.ils-cover__crest svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.ils-cover__name { font: 400 27px/1.25 var(--f-display); letter-spacing: .22em; text-align: center; }
.ils-cover__name--s { font-size: 20px; }
.ils-cover__sub { margin-top: 8px; font: 500 10px var(--f-text); letter-spacing: .34em; }
.ils-chip { margin-top: auto; width: 48px; height: 32px; border: 2px solid var(--vj-gold); border-radius: 5px; position: relative; opacity: .9; }
.ils-chip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; border: 2px solid var(--vj-gold); border-radius: 50%; transform: translate(-50%, -50%); }
.ils-page { background: repeating-radial-gradient(circle at 18% 120%, rgba(91,21,32,.07) 0 1px, transparent 1px 7px), repeating-radial-gradient(circle at 110% -10%, rgba(18,48,57,.07) 0 1px, transparent 1px 9px), linear-gradient(170deg, #f6efe3, #ede2cf); color: #07161b; padding: 20px 20px 16px; }
.ils-page--intro { display: flex; flex-direction: column; justify-content: center; padding: 38px 30px; }
.ils-page--intro h3 { font: 300 26px/1.12 var(--f-display); color: var(--vj-burg); margin: 0; }
.ils-page--intro p { margin: 12px 0 0; font: 400 13.5px/1.55 var(--f-text); color: #3d3a36; }
.ils-page__iss { font: 500 9.5px var(--f-mono) !important; letter-spacing: .14em; color: #6b5f55 !important; margin-top: 18px !important; }
.ils-page__sig { margin-top: 16px; font: italic 400 21px var(--f-display); color: var(--vj-burg2); }
.ils-page__hdr { display: flex; justify-content: space-between; font: 500 9.5px var(--f-mono); letter-spacing: .16em; color: var(--vj-burg); border-bottom: 1px solid rgba(91,21,32,.25); padding-bottom: 7px; margin-bottom: 14px; }
.ils-page__row { display: grid; grid-template-columns: 108px 1fr; gap: 14px; }
.ils-page__ph { position: relative; width: 108px; height: 138px; overflow: hidden; background: linear-gradient(170deg, #c9bfb0, #a99d8c); border-radius: 2px; }
.ils-page__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: grayscale(.15) sepia(.12); }
.ils-page__ph span { position: absolute; inset: 0; display: grid; place-items: center; font: 300 54px var(--f-display); color: rgba(255,255,255,.75); }
.ils-page dl { margin: 0; font: 500 9px var(--f-mono); letter-spacing: .12em; color: #6b5f55; }
.ils-page dd { font: 400 17px/1.2 var(--f-display); color: #07161b; letter-spacing: 0; margin: 2px 0 9px; }
.ils-page dd.s { font-size: 14px; }
.ils-page__what { font: 400 13.5px/1.5 var(--f-text); color: #3d3a36; margin: 12px 0 0; max-width: 24ch; }
.ils-mrz { position: absolute; left: 20px; right: 20px; bottom: 14px; font: 500 11.5px/1.6 var(--f-mono); letter-spacing: .14em; color: rgba(7,22,27,.7); white-space: nowrap; overflow: hidden; }
.ils-stamp { position: absolute; right: 20px; top: 210px; width: 112px; height: 112px; border: 3px double #c8604f; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 500 9.5px var(--f-mono); letter-spacing: .12em; color: #a8392c; transform: rotate(-14deg) scale(2.6); opacity: 0; transition: transform .32s cubic-bezier(.2, 1.7, .4, 1), opacity .15s; mix-blend-mode: multiply; }
.ils-stamp b { display: block; font: 400 18px var(--f-display); letter-spacing: 0; margin: 2px 0; }
.ils-stamp.is-on { transform: rotate(-14deg) scale(1); opacity: .82; }
.ils-visa { display: flex; flex-direction: column; align-items: center; }
.ils-visa .ils-page__hdr { align-self: stretch; }
.ils-visa__st { margin-top: 80px; width: 176px; height: 120px; border: 3px solid rgba(18,48,57,.55); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 500 10px var(--f-mono); letter-spacing: .16em; color: rgba(18,48,57,.7); mix-blend-mode: multiply; }
.ils-visa__st b { font: 400 24px var(--f-display); letter-spacing: .06em; }
.ils-visa p { margin: 50px 0 0; font: italic 400 18px/1.35 var(--f-display); color: var(--vj-burg); text-align: center; max-width: 20ch; }
.ils-pp-nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.ils-pp-nav button { font: 500 11px var(--f-mono); letter-spacing: .12em; background: none; border: 1px solid rgba(243,239,231,.22); color: rgba(243,239,231,.8); padding: 8px 12px; cursor: pointer; border-radius: 0; }
.ils-pp-nav button[aria-pressed="true"] { border-color: var(--vj-gold); color: var(--vj-gold); }
.ils-pp-tip { position: absolute; top: 0; left: 0; right: 0; text-align: center; font: 400 11px var(--f-mono); letter-spacing: .1em; color: var(--stone); transition: opacity .4s; }
.ils-pp-wrap.is-open .ils-pp-tip { opacity: 0; }

/* Paneles de salidas y llegadas */
.ils-boardsec { background: var(--petrol); color: var(--ivory); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.ils-boardsec h2 { font: 300 clamp(2rem, 3.6vw, 3.2rem)/1.05 var(--f-display); letter-spacing: -.02em; margin: .6rem 0 .9rem; color: var(--ivory); max-width: 22ch; }
.ils-boardsec h2 em { color: var(--stone); }
.ils-boardsec .ils-lead { color: rgba(243,239,231,.74); font-size: 1.05rem; line-height: 1.55; max-width: 44rem; margin: 0 0 1.8rem; }
.ils-boardsec .ils-kick { font: 500 .72rem var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--stone); margin: 0; }
.ils-board { background: #050708; border: 1px solid #1a2023; border-radius: 6px; padding: 18px 22px 10px; box-shadow: 0 40px 80px -40px #000; }
.ils-board__top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid #161b1d; }
.ils-board__title { font: 500 15px var(--f-mono); letter-spacing: .3em; color: var(--vj-amber); }
.ils-board__title small { font-size: 13px; color: var(--stone); letter-spacing: .14em; margin-left: 10px; }
.ils-board__clock { margin-left: auto; font: 500 13px var(--f-mono); letter-spacing: .14em; color: var(--stone); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ils-board__clock b { color: var(--ivory); font-weight: 500; }
.ils-gates { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0 6px; }
.ils-board__clock .ils-gates { padding: 0; }
.ils-gates button { font: 500 11px var(--f-mono); letter-spacing: .14em; background: #0d1112; border: 1px solid #1f2628; color: var(--stone); padding: 8px 11px; cursor: pointer; border-radius: 3px; text-transform: uppercase; }
.ils-gates button[aria-pressed="true"] { border-color: var(--vj-amber); color: var(--vj-amber); }
.ils-board__head, .ils-row { display: grid; gap: 18px; align-items: center; }
.ils-board--dep .ils-board__head, .ils-board--dep .ils-row { grid-template-columns: minmax(0, 1fr) 150px 160px 170px; }
.ils-board--arr .ils-board__head, .ils-board--arr .ils-row { grid-template-columns: 44px minmax(0, 1fr) 180px 150px; }
.ils-board__head { font: 500 11px var(--f-mono); letter-spacing: .2em; color: var(--vj-amber); padding: 12px 6px 8px; text-transform: uppercase; }
.ils-row { padding: 9px 6px; border-top: 1px solid #12171a; color: inherit; text-decoration: none; position: relative; }
.ils-board .ils-row:hover, .ils-row:focus-visible { background: #0c1315; color: inherit; outline: none; }
.ils-row[hidden] { display: none; }
.ils-nm { font: 500 18px/1.3 var(--f-text); color: #f4eee2; }
.ils-board.is-in .ils-nm { animation: ilsRowIn .55s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0ms) both; transform-origin: 50% 0; }
@keyframes ilsRowIn { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.ils-row.is-off .ils-nm { color: #7c8487; text-decoration: line-through; text-decoration-color: rgba(236,122,106,.6); }
.ils-gt { font: 500 13px var(--f-text); letter-spacing: .04em; color: var(--vj-amber); }
.ils-gt.is-x { color: #6c7477; }
.ils-flap { display: flex; gap: 1px; overflow: hidden; }
.ils-flap span { flex: none; width: 15px; height: 30px; background: linear-gradient(#1b1e1f 50%, #131516 50%); color: #f1ead6; font: 500 16px var(--f-mono); display: grid; place-items: center; border-radius: 2px; position: relative; }
.ils-flap span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000; }
.ils-flap.g span { color: var(--vj-green); } .ils-flap.r span { color: var(--vj-red); } .ils-flap.a span { color: var(--vj-amber); } .ils-flap.x span { color: #7c8487; }
.ils-go { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); opacity: 0; color: var(--vj-amber); transition: opacity .2s; font-family: var(--f-mono); }
a.ils-row:hover .ils-go { opacity: 1; }
.ils-board__closed { margin-top: 8px; border-top: 1px dashed #263033; padding-top: 6px; }
.ils-board__closed > p { font: 500 10.5px var(--f-mono); letter-spacing: .2em; color: #6c7477; padding: 6px; margin: 0; }
.ils-board__foot { display: flex; gap: 26px; flex-wrap: wrap; padding: 14px 6px 8px; border-top: 1px solid #161b1d; margin-top: 6px; font: 400 12px/1.5 var(--f-mono); color: var(--stone); }
.ils-board__foot b { font-weight: 500; } .ils-board__foot .g { color: var(--vj-green); } .ils-board__foot .r { color: var(--vj-red); }
.ils-board details > summary { list-style: none; cursor: pointer; }
.ils-board details > summary::-webkit-details-marker { display: none; }
.ils-board details > p { font: 400 15px/1.55 var(--f-text); color: rgba(243,239,231,.74); padding: 4px 6px 12px 68px; margin: 0; max-width: 62rem; }
.ils-board details[open] > summary { background: #0c1315; }

/* Pasaporte: versión legible (tarjetas) */
.ils-pp-mob { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; list-style: none; margin: 0; padding: 0; }
.ils-pp-mob li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; background: linear-gradient(170deg, #f6efe3, #ede2cf); color: #07161b; border-left: 4px solid var(--vj-burg); border-radius: 4px 10px 10px 4px; }
.ils-pp-mob__ph { width: 64px; height: 80px; overflow: hidden; background: linear-gradient(170deg, #c9bfb0, #a99d8c); display: grid; place-items: center; border-radius: 2px; }
.ils-pp-mob__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.ils-pp-mob__ph span { font: 300 34px var(--f-display); color: rgba(255,255,255,.8); }
.ils-pp-mob__tx { display: flex; flex-direction: column; gap: 3px; font: 400 14px/1.45 var(--f-text); color: #3d3a36; }
.ils-pp-mob__tx b { font: 400 19px/1.2 var(--f-display); color: #07161b; }
.ils-pp-mob__st { font: 500 9.5px var(--f-mono); letter-spacing: .12em; color: #a8392c; border: 2px solid #c8604f; border-radius: 999px; padding: 4px 8px; transform: rotate(-6deg); white-space: nowrap; }
.ils-pp-nav button, .ils-gates button { min-height: 44px; }
.ils-board .ils-row:focus-visible, .ils-board summary.ils-row:focus-visible { outline: 2px solid var(--vj-amber); outline-offset: -2px; }
.ils-nmw { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ils-board.is-in .ils-nmw { animation: ilsRowIn .55s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0ms) both; transform-origin: 50% 0; }
.ils-board.is-in .ils-nmw .ils-nm { animation: none; }
.ils-fase { font: 400 13px/1.4 var(--f-text); color: rgba(243,239,231,.62); }
.ils-mob { display: none; font-weight: 500; }
.ils-mob.g { color: var(--vj-green); } .ils-mob.r { color: var(--vj-red); }

@media (max-width: 991.98px) {
    .g-hero__in--pp { grid-template-columns: 1fr; }
    .ils-pp-wrap { justify-self: center; }
}
@media (max-width: 767.98px) {
    .ils-board { padding: 14px 10px 8px; }
    .ils-flap span { width: 11.5px; height: 22px; font-size: 12px; }
    .ils-nm { font-size: 16px; }
    .ils-board--dep .ils-board__head, .ils-board--dep .ils-row { grid-template-columns: minmax(0, 1fr) 114px; gap: 10px; }
    .ils-board--arr .ils-board__head, .ils-board--arr .ils-row { grid-template-columns: minmax(0, 1fr) 122px; gap: 10px; }
    .ils-board .c-wide { display: none; }
    .ils-mob { display: inline; }
    .ils-pp-wrap .ils-pp-box, .ils-pp-wrap .ils-pp-nav, .ils-pp-wrap .ils-pp-tip { display: none; }
    .ils-pp-mob { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: grid; gap: 10px; }
    .ils-board details > p { padding-left: 6px; }
    .ils-board__clock { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ils-pp, .ils-leaf, .ils-stamp { transition: none !important; }
    .ils-board.is-in .ils-nm, .ils-board.is-in .ils-nmw { animation: none; }
}