/*
================================================================================
DIGITAL DOCUMENTS — HORIZONLABS
================================================================================
Archivo            : public/assets/css/dd_site_2027.css
Propósito          : Hoja de estilos del sitio público 2027, dirección "Bóveda".
                     Componentes: cabecera de vidrio con navegación móvil accesible,
                     portada con luz ambiental, cadena de custodia por scroll, índice
                     de servicios, láminas graduadas, comparador Direct Image,
                     páginas interiores y pie corporativo.
Creado             : 2026-09-09 02:10
Creado por         : Desarrollador: Oscar Hernández Pérez / Asistente técnico: Claude (IA)
Última modificación: 2026-09-09 03:35
Modificado por     : Desarrollador: Oscar Hernández Pérez / Asistente técnico: Claude (IA)
Motivo             : La primera versión (filetes de 1px, tarjetas sin elevación, radios
                     de 2-5px, duotono sepia y titulares serif) se leía como diseño de
                     prensa impresa. Se reescriben los componentes al registro visual
                     contemporáneo sin alterar un solo nombre de clase.
Cambio realizado   : Superficies de vidrio con filete interior luminoso, elevación por
                     luz en vez de sombra, radios generosos, resplandores contenidos,
                     gradación cromática de fotografía y display sans de gran escala.
Relacionado con    : dd_tokens_2027.css, layouts/site.php, home.php, interior.php.
================================================================================
CONSTRUCCIÓN: mobile-first estricto. Las reglas base valen para teléfono; los
@media (min-width) agregan complejidad hacia arriba. Ningún tamaño de titular es
fijo: todo pasa por clamp() en los tokens.
================================================================================
*/

/* ══════════════════════════════════════════════════════════════════════════
   01 · RESET Y BASE
   ══════════════════════════════════════════════════════════════════════════ */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    background-color: var(--dd-void);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body.dd-site {
    position: relative;
    margin: 0;
    background-color: var(--dd-void);
    color: var(--dd-ink-secondary);
    font-family: var(--dd-font-ui);
    font-size: var(--dd-t-body);
    line-height: var(--dd-lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1, 'cv11' 1;
    overflow-x: hidden;
}

/* Grano finísimo sobre toda la página. Rompe la planitud del negro digital
   y evita el bandeado en los degradados de fondo. */
body.dd-site::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--dd-z-top);
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.dd-nav-open { overflow: hidden; }

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--dd-font-display);
    font-weight: 700;
    color: var(--dd-ink);
    line-height: var(--dd-lh-snug);
    letter-spacing: var(--dd-tr-tight);
    text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

:focus-visible {
    outline: var(--dd-focus-ring);
    outline-offset: var(--dd-focus-offset);
    border-radius: var(--dd-r-xs);
}

::selection {
    background-color: var(--dd-cyan);
    color: var(--dd-void);
}

.dd-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--dd-z-top);
    padding: var(--dd-s-3) var(--dd-s-4);
    background-color: var(--dd-cyan);
    color: var(--dd-void);
    font-size: var(--dd-t-sm);
    font-weight: 700;
    border-radius: var(--dd-r-sm);
}
.dd-skip:focus { left: var(--dd-s-4); top: var(--dd-s-4); }

/* ══════════════════════════════════════════════════════════════════════════
   02 · LAYOUT Y RETÍCULAS
   ══════════════════════════════════════════════════════════════════════════ */

.dd-wrap {
    width: 100%;
    max-width: var(--dd-w-wide);
    margin-inline: auto;
    padding-inline: var(--dd-gutter);
}
.dd-wrap--page { max-width: var(--dd-w-page); }
.dd-wrap--text { max-width: var(--dd-w-text); }
.dd-wrap--full { max-width: var(--dd-w-full); }

.dd-band {
    position: relative;
    padding-block: var(--dd-section-y);
}
.dd-band--tight { padding-block: var(--dd-section-y-tight); }

/* Las bandas alternan por profundidad, no por claro/oscuro */
.dd-band--paper  { background-color: var(--dd-void); }
.dd-band--sunken { background-color: var(--dd-surface-1); }
.dd-band--raised { background-color: var(--dd-void); }
.dd-band--vault  { background-color: var(--dd-surface-1); }

/* Filete superior degradado: se apaga en los bordes en vez de cortar en seco */
.dd-band--ruled { border-top: 0; }
.dd-band--ruled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dd-rule-strong) 18%, var(--dd-rule-strong) 82%, transparent);
}
.dd-band--ruled-bottom { border-bottom: var(--dd-hairline); }

/* ── BANDA CLARA (gris institucional) ───────────────────────────────────
   Incorporada el 2026-09-09 a pedido: el sitio original de Digital Documents
   se apoya en grises plateados, y alternar bandas claras con las oscuras baja
   de golpe la sensación de "demasiado llamativo" que producía una página
   íntegramente oscura.

   Funciona redefiniendo los TOKENS dentro del ámbito de la banda: como todos
   los componentes leen las variables en vez de colores literales, el subárbol
   completo se invierte solo. No hay una segunda versión de cada componente. */
.dd-band--light {
    background-color: #e7eaee;
    color: #3c4550;

    --dd-ink:           #101620;
    --dd-ink-secondary: #414b58;
    --dd-ink-muted:     #5d6775;
    --dd-ink-faint:     #7d8794;

    --dd-rule:          rgba(16, 22, 32, 0.10);
    --dd-rule-strong:   rgba(16, 22, 32, 0.17);
    --dd-rule-ink:      rgba(16, 22, 32, 0.28);

    --dd-glass:         rgba(255, 255, 255, 0.62);
    --dd-glass-strong:  rgba(255, 255, 255, 0.88);
    --dd-glass-hover:   #ffffff;

    --dd-surface-2:     #ffffff;
    --dd-surface-3:     #f3f5f7;
    --dd-void-deep:     #d8dde2;

    /* Sobre fondo claro la luz va abajo y la sombra es suave, no dramática */
    --dd-inset-top:     inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --dd-elev-1:        0 1px 2px rgba(16, 22, 32, 0.06);
    --dd-elev-2:        0 4px 16px -6px rgba(16, 22, 32, 0.14);
    --dd-elev-3:        0 16px 40px -14px rgba(16, 22, 32, 0.22);

    /* Los acentos se oscurecen para mantener contraste sobre gris claro */
    --dd-steel:         #3f6b95;
    --dd-steel-bright:  #2f5a83;
    --dd-bronze:        #8a6a48;
    --dd-bronze-bright: #6f5537;
    --dd-state-ok:      #4a7861;
    --dd-state-transit: #8a6f3f;
}
.dd-band--light .dd-tile-icon { color: var(--dd-bronze); background-color: #ffffff; }
.dd-band--light .dd-ops { background-color: #ffffff; }
/* El botón primario se mantiene sólido y legible también en banda clara */
.dd-band--light .dd-btn--seal { color: #ffffff; }
.dd-band--light .dd-btn--outline { background-color: rgba(255, 255, 255, 0.7); }

/* Halo ambiental cálido en la banda oscura del sistema */
.dd-band--vault { overflow: hidden; }
.dd-band--vault::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    height: 80%;
    pointer-events: none;
    background: radial-gradient(circle, var(--dd-violet-glow) 0%, transparent 62%);
    filter: blur(20px);
}

/* Retícula editorial: contenido + columna marginal de anotaciones */
.dd-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-6);
}

/* Cuerpo de página interior a una sola columna. Antes era una retícula de dos
   columnas con notas al margen; esas notas se retiraron y el texto pasa a ocupar
   el ancho de lectura completo. */
.dd-prose-wrap { max-width: var(--dd-measure-wide); }

.dd-flow > * + * { margin-top: var(--dd-flow); }
.dd-flow-tight > * + * { margin-top: var(--dd-s-3); }

/* ══════════════════════════════════════════════════════════════════════════
   03 · TIPOGRAFÍA APLICADA
   ══════════════════════════════════════════════════════════════════════════ */

.dd-display {
    font-size: var(--dd-t-display);
    line-height: var(--dd-lh-tight);
    letter-spacing: var(--dd-tr-display);
    font-weight: 800;
}
.dd-h1 { font-size: var(--dd-t-h1); font-weight: 700; letter-spacing: var(--dd-tr-display); }
.dd-h2 { font-size: var(--dd-t-h2); font-weight: 700; letter-spacing: var(--dd-tr-display); }
.dd-h3 { font-size: var(--dd-t-h3); font-weight: 650; }
.dd-h4 { font-size: var(--dd-t-h4); font-family: var(--dd-font-ui); font-weight: 650; letter-spacing: var(--dd-tr-normal); }

.dd-lead {
    font-size: var(--dd-t-lead);
    line-height: var(--dd-lh-normal);
    color: var(--dd-ink-secondary);
    max-width: var(--dd-measure);
}

.dd-prose { max-width: var(--dd-measure); color: var(--dd-ink-secondary); }
.dd-prose > * + * { margin-top: var(--dd-flow); }
.dd-prose strong { color: var(--dd-ink); font-weight: 600; }
.dd-prose em { color: var(--dd-ink); font-style: italic; }

/* Cita destacada: sans de gran escala con barra luminosa. Antes era cursiva
   serif, que es justamente la señal de "prensa antigua" que se eliminó. */
.dd-pullquote {
    position: relative;
    font-family: var(--dd-font-display);
    font-size: var(--dd-t-h3);
    font-weight: 600;
    line-height: var(--dd-lh-snug);
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
    max-width: var(--dd-measure-tight);
    padding-left: var(--dd-s-5);
}
.dd-pullquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.2em;
    width: 3px;
    border-radius: var(--dd-r-pill);
    background: var(--dd-steel);
}

/* Identificadores: cajas, folios, sellos, RUT */
.dd-id {
    font-family: var(--dd-font-mono);
    font-size: 0.9em;
    letter-spacing: var(--dd-tr-wide);
    font-variant-numeric: tabular-nums;
    color: var(--dd-ink);
}
.dd-id--seal { color: var(--dd-ember); }
.dd-id--digital { color: var(--dd-cyan); }
.dd-id--faint { color: var(--dd-ink-faint); }

/* Etiqueta de sección: mono en versalitas con punto luminoso */
.dd-label {
    display: flex;
    align-items: center;
    gap: var(--dd-s-3);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    font-weight: 500;
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-muted);
}
.dd-label::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, var(--dd-rule-strong), transparent);
}
.dd-label-num {
    display: inline-flex;
    align-items: center;
    gap: var(--dd-s-2);
    color: var(--dd-ember);
    font-weight: 600;
}
.dd-label-num::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--dd-bronze);
}

/* Nota al margen: pasa a ser una superficie, no un texto con filete arriba */
.dd-note {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-muted);
    letter-spacing: 0.02em;
    padding: var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
}
.dd-note strong { color: var(--dd-ink); font-weight: 600; }

.dd-head { max-width: var(--dd-measure-wide); }
.dd-head > * + * { margin-top: var(--dd-s-4); }
.dd-head .dd-lead { margin-top: var(--dd-s-4); }

/* ══════════════════════════════════════════════════════════════════════════
   04 · MARCAS DE CLASIFICACIÓN
   ══════════════════════════════════════════════════════════════════════════ */

.dd-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--dd-s-2);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    font-weight: 500;
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    padding: 0.28rem 0.55rem;
    border-radius: var(--dd-r-pill);
    border: 1px solid transparent;
    white-space: nowrap;
}
.dd-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
}
.dd-tag--verified {
    color: var(--dd-state-ok);
    background-color: var(--dd-state-ok-wash);
    border-color: var(--dd-state-ok-edge);
}
.dd-tag--concept {
    color: var(--dd-cyan);
    background-color: var(--dd-cyan-wash);
    border-color: var(--dd-cyan-edge);
}
.dd-tag--physical {
    color: var(--dd-ember);
    background-color: var(--dd-ember-wash);
    border-color: var(--dd-ember-edge);
}
.dd-tag--transit {
    color: var(--dd-state-transit);
    background-color: var(--dd-state-transit-wash);
    border-color: var(--dd-state-transit-edge);
}
.dd-tag--kraft {
    color: var(--dd-state-transit);
    background-color: var(--dd-state-transit-wash);
    border-color: var(--dd-state-transit-edge);
}

/* ══════════════════════════════════════════════════════════════════════════
   05 · BOTONES
   ══════════════════════════════════════════════════════════════════════════ */

.dd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dd-s-2);
    min-height: var(--dd-touch);
    padding: 0.72rem 1.2rem;
    font-family: var(--dd-font-ui);
    font-size: var(--dd-t-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--dd-r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--dd-fast), border-color var(--dd-fast),
                color var(--dd-fast), transform var(--dd-fast), box-shadow var(--dd-fast);
    text-align: center;
}
.dd-btn:active { transform: translateY(1px); }
.dd-btn svg { flex: 0 0 auto; width: 1em; height: 1em; }

/* Acento principal: ámbar sólido con resplandor. Es el CTA de la página. */
.dd-btn--seal {
    background-color: var(--dd-steel);
    color: #06121d;
    border-color: var(--dd-steel);
    box-shadow: var(--dd-elev-1);
}
.dd-btn--seal:hover {
    background-color: var(--dd-steel-bright);
    border-color: var(--dd-steel-bright);
}

.dd-btn--ink {
    background-color: var(--dd-ink);
    color: var(--dd-void);
    border-color: var(--dd-ink);
}
.dd-btn--ink:hover { background-color: #fff; border-color: #fff; }

.dd-btn--custody {
    background-color: var(--dd-bronze);
    color: #17100b;
    border-color: var(--dd-bronze);
    box-shadow: var(--dd-elev-1);
}
.dd-btn--custody:hover { background-color: var(--dd-cyan-bright); border-color: var(--dd-cyan-bright); }

/* Secundario de vidrio */
.dd-btn--outline {
    background-color: var(--dd-glass);
    color: var(--dd-ink);
    border-color: var(--dd-rule-strong);
    box-shadow: var(--dd-inset-top);
}
.dd-btn--outline:hover {
    background-color: var(--dd-glass-hover);
    border-color: var(--dd-rule-ink);
}

.dd-btn--ghost {
    background-color: transparent;
    color: var(--dd-ink-muted);
    border-color: transparent;
    padding-inline: 0.5rem;
}
.dd-btn--ghost:hover { color: var(--dd-ink); }

.dd-btn--lg { min-height: 3.375rem; padding: 0.95rem 1.6rem; font-size: var(--dd-t-body); }
.dd-btn--sm { min-height: 2.25rem; padding: 0.4rem 0.8rem; font-size: var(--dd-t-xs); }
.dd-btn--block { width: 100%; }

/* Enlace con subrayado animado */
.dd-link {
    display: inline-flex;
    align-items: center;
    gap: var(--dd-s-2);
    color: var(--dd-ink);
    font-weight: 600;
    font-size: var(--dd-t-sm);
    padding-bottom: 3px;
    background-image: linear-gradient(to right, var(--dd-cyan), var(--dd-cyan));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size var(--dd-normal), color var(--dd-fast);
}
.dd-link:hover { color: var(--dd-cyan); background-size: 100% 1.5px; }
.dd-link svg { width: 0.9em; height: 0.9em; transition: transform var(--dd-normal); }
.dd-link:hover svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════════════
   06 · CABECERA Y NAVEGACIÓN
   ══════════════════════════════════════════════════════════════════════════ */

.dd-masthead {
    position: sticky;
    top: 0;
    z-index: var(--dd-z-nav);
    background-color: rgba(7, 8, 11, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dd-normal), border-color var(--dd-normal);
}
.dd-masthead[data-scrolled='true'] {
    background-color: rgba(7, 8, 11, 0.9);
    border-bottom-color: var(--dd-rule);
}

.dd-masthead-inner {
    display: flex;
    align-items: center;
    gap: var(--dd-s-4);
    min-height: 4.25rem;
    max-width: var(--dd-w-full);
    margin-inline: auto;
    padding-inline: var(--dd-gutter);
}

/* ── Marca ──────────────────────────────────────────────────────────────── */
.dd-brand {
    display: flex;
    align-items: center;
    gap: var(--dd-s-3);
    margin-right: auto;
    min-width: 0;
}
.dd-brand-mark {
    flex: 0 0 auto;
    width: 2.375rem;
    height: 2.375rem;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--dd-steel-deep), #2c4a68);
    color: var(--dd-ink);
    font-family: var(--dd-font-display);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    border-radius: var(--dd-r-sm);
    box-shadow: var(--dd-elev-1);
}

/* ── Logotipo original de Digital Documents ─────────────────────────────
   El logotipo oficial es azul oscuro sobre transparente, de modo que sobre
   fondo oscuro sería ilegible. Se presenta sobre un panel blanco: así se
   conserva la marca EXACTAMENTE como es, sin recolorearla ni invertirla, y
   el panel se lee como decisión de diseño y no como un parche. */
.dd-brand-plate {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0.5rem 0.8rem;
    background-color: #ffffff;
    border-radius: var(--dd-r-sm);
    box-shadow: var(--dd-elev-1);
}
.dd-brand-plate img {
    display: block;
    width: auto;
    /* El logotipo original mide 280×74: por debajo de ~2rem de alto su
       tipografía deja de ser legible en pantalla. */
    height: 2rem;
}
.dd-brand-plate--lg { padding: 0.7rem 1rem; }
.dd-brand-plate--lg img { height: 2.5rem; }

.dd-brand-text { display: flex; flex-direction: column; min-width: 0; }
.dd-brand-name {
    font-family: var(--dd-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dd-ink);
    line-height: 1.15;
    letter-spacing: var(--dd-tr-tight);
    white-space: nowrap;
}
.dd-brand-sub {
    font-family: var(--dd-font-mono);
    /* 10px: por debajo de esto la monoespaciada en versalitas deja de ser
       legible sobre fondo oscuro, sobre todo en pantallas sin escalado. */
    font-size: 0.625rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dd-ink-muted);
    white-space: nowrap;
}

/* ── Navegación de escritorio ───────────────────────────────────────────── */
.dd-nav { display: none; }

.dd-nav-list {
    display: flex;
    align-items: center;
    gap: var(--dd-s-1);
    list-style: none;
}
.dd-nav-item { position: relative; }

.dd-nav-link,
.dd-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--dd-t-sm);
    font-weight: 500;
    color: var(--dd-ink-secondary);
    border-radius: var(--dd-r-xs);
    transition: color var(--dd-fast), background-color var(--dd-fast);
    white-space: nowrap;
}
.dd-nav-link:hover,
.dd-nav-trigger:hover { color: var(--dd-ink); background-color: var(--dd-glass); }
.dd-nav-link[aria-current='page'] { color: var(--dd-cyan); font-weight: 600; }

.dd-nav-caret {
    width: 0.55rem;
    height: 0.55rem;
    transition: transform var(--dd-fast);
    color: var(--dd-ink-faint);
}
.dd-nav-item[data-open='true'] .dd-nav-caret { transform: rotate(180deg); }
.dd-nav-item[data-open='true'] .dd-nav-trigger { color: var(--dd-ink); background-color: var(--dd-glass); }

.dd-nav-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 20rem;
    padding: var(--dd-s-3);
    background-color: rgba(18, 21, 28, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-lg);
    box-shadow: var(--dd-elev-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.985);
    transform-origin: top left;
    transition: opacity var(--dd-fast), transform var(--dd-fast), visibility var(--dd-fast);
}
.dd-nav-item[data-open='true'] .dd-nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.dd-nav-panel-head {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
    padding: var(--dd-s-2) var(--dd-s-3) var(--dd-s-3);
    border-bottom: var(--dd-hairline);
    margin-bottom: var(--dd-s-2);
}
.dd-nav-panel ul { list-style: none; }
.dd-nav-panel a {
    display: block;
    padding: 0.55rem var(--dd-s-3);
    font-size: var(--dd-t-sm);
    font-weight: 500;
    color: var(--dd-ink-secondary);
    border-radius: var(--dd-r-xs);
    transition: background-color var(--dd-fast), color var(--dd-fast);
}
.dd-nav-panel a:hover { background-color: var(--dd-glass-strong); color: var(--dd-ink); }
.dd-nav-panel a span {
    display: block;
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    color: var(--dd-ink-faint);
    margin-top: 2px;
}

.dd-masthead-cta { display: none; }
/* El botón de la cabecera nunca debe partirse en dos líneas: con el logotipo
   real y cinco entradas de menú el espacio es ajustado y el salto se veía. */
.dd-masthead-cta span { white-space: nowrap; }

/* ── Botón hamburguesa ──────────────────────────────────────────────────── */
.dd-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dd-s-2);
    min-width: var(--dd-touch);
    min-height: var(--dd-touch);
    padding-inline: 0.7rem;
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-sm);
    color: var(--dd-ink);
    background-color: var(--dd-glass);
    box-shadow: var(--dd-inset-top);
    flex: 0 0 auto;
}
.dd-nav-toggle:hover { background-color: var(--dd-glass-hover); }
.dd-nav-toggle-label {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
}

.dd-burger { width: 1rem; height: 0.6875rem; position: relative; flex: 0 0 auto; }
.dd-burger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--dd-normal), opacity var(--dd-fast), top var(--dd-normal);
}
.dd-burger span:nth-child(1) { top: 0; }
.dd-burger span:nth-child(2) { top: calc(50% - 0.75px); }
.dd-burger span:nth-child(3) { top: calc(100% - 1.5px); }
.dd-nav-toggle[aria-expanded='true'] .dd-burger span:nth-child(1) { top: calc(50% - 0.75px); transform: rotate(45deg); }
.dd-nav-toggle[aria-expanded='true'] .dd-burger span:nth-child(2) { opacity: 0; }
.dd-nav-toggle[aria-expanded='true'] .dd-burger span:nth-child(3) { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* ── Panel de navegación móvil ──────────────────────────────────────────── */
.dd-mobile-nav {
    position: fixed;
    inset: 4.25rem 0 0 0;
    z-index: var(--dd-z-drawer);
    background-color: rgba(7, 8, 11, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: var(--dd-hairline);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--dd-s-5) var(--dd-gutter) calc(var(--dd-s-8) + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity var(--dd-normal), transform var(--dd-normal);
}
.dd-mobile-nav[data-open='true'] { opacity: 1; transform: translateY(0); }
.dd-mobile-nav[hidden] { display: none; }

.dd-mobile-group + .dd-mobile-group { margin-top: var(--dd-s-5); }
.dd-mobile-group-head {
    display: block;
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ember);
    padding-bottom: var(--dd-s-3);
    border-bottom: var(--dd-hairline);
    margin-bottom: var(--dd-s-2);
}
.dd-mobile-nav ul { list-style: none; }
.dd-mobile-nav ul a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-s-3);
    min-height: var(--dd-touch);
    padding: 0.7rem 0;
    font-family: var(--dd-font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
    border-bottom: var(--dd-hairline);
}
.dd-mobile-nav ul a:active { color: var(--dd-cyan); }
.dd-mobile-nav ul a em {
    font-family: var(--dd-font-mono);
    font-style: normal;
    font-size: var(--dd-t-micro);
    color: var(--dd-ink-faint);
    text-align: right;
}
.dd-mobile-actions { margin-top: var(--dd-s-7); display: grid; gap: var(--dd-s-3); }
.dd-mobile-contact {
    margin-top: var(--dd-s-6);
    padding-top: var(--dd-s-5);
    border-top: var(--dd-hairline);
    display: grid;
    gap: var(--dd-s-2);
    font-size: var(--dd-t-sm);
    color: var(--dd-ink-muted);
}
.dd-mobile-contact a { color: var(--dd-ink); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════════
   07 · PORTADA
   ══════════════════════════════════════════════════════════════════════════ */

.dd-cover {
    position: relative;
    padding-block: clamp(2.75rem, 1.5rem + 5vw, 6.5rem) 0;
    overflow: hidden;
}

/* Luz ambiental: dos focos difusos, ámbar cálido y violeta frío. Reemplaza la
   filigrana de retícula impresa de la versión anterior. */
.dd-cover::before {
    content: '';
    position: absolute;
    top: -28%;
    left: -12%;
    width: 78%;
    height: 118%;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(93, 143, 191, 0.075) 0%, transparent 100%);
    filter: blur(24px);
}
.dd-cover::after {
    content: '';
    position: absolute;
    top: -18%;
    right: -18%;
    width: 68%;
    height: 105%;
    pointer-events: none;
    background:
        radial-gradient(closest-side, rgba(93, 143, 191, 0.06) 0%, transparent 100%),
        radial-gradient(closest-side, var(--dd-violet-glow) 0%, transparent 72%);
    filter: blur(28px);
}

.dd-cover-inner { position: relative; z-index: var(--dd-z-base); }

.dd-cover-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
    align-items: start;
}

.dd-cover-copy > * + * { margin-top: var(--dd-s-5); }

.dd-cover-eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dd-s-2) var(--dd-s-3);
    padding: 0.35rem 0.8rem;
    background-color: var(--dd-glass);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-pill);
    box-shadow: var(--dd-inset-top);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-muted);
}
.dd-cover-eyebrow b { color: var(--dd-ember); font-weight: 600; }
.dd-cover-eyebrow i {
    font-style: normal;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--dd-rule-strong);
}

.dd-cover-title {
    font-size: var(--dd-t-display);
    font-weight: 800;
    line-height: var(--dd-lh-tight);
    letter-spacing: var(--dd-tr-display);
    color: var(--dd-ink);
    max-width: 18ch;
}
/* La segunda oración es la mitad digital de la tesis: recibe el cian. */
.dd-cover-title span {
    display: block;
    color: var(--dd-steel-bright);
}
/* Si el navegador no soporta relleno de texto por gradiente, queda el cian
   sólido declarado arriba: nunca texto invisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .dd-cover-title span { -webkit-text-fill-color: var(--dd-cyan); }
}

.dd-cover-sub {
    font-size: var(--dd-t-lead);
    line-height: var(--dd-lh-normal);
    color: var(--dd-ink-secondary);
    max-width: 50ch;
}
.dd-cover-sub strong { color: var(--dd-ink); font-weight: 600; }

.dd-cover-actions { display: grid; gap: var(--dd-s-3); padding-top: var(--dd-s-2); }

/* ── Expediente vivo ────────────────────────────────────────────────────── */
.dd-dossier {
    position: relative;
    margin: 0;
    background-color: var(--dd-surface-2);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-lg);
    box-shadow: var(--dd-elev-3);
    overflow: hidden;
}
.dd-dossier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-s-3);
    flex-wrap: wrap;
    padding: var(--dd-s-3) var(--dd-s-4);
    background-color: var(--dd-glass);
    border-bottom: var(--dd-hairline);
}
.dd-dossier-head-id {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    color: var(--dd-ink-muted);
}
.dd-dossier-head-id b { color: var(--dd-ink); font-weight: 600; }

.dd-dossier-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--dd-void-deep);
    overflow: hidden;
}
.dd-dossier-media video,
.dd-dossier-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Gradación cromática hacia el cian del sistema. No es sepia ni escala de
       grises: es color grading, que es como se trata la imagen hoy. */
    filter: saturate(0.35) contrast(1.12) brightness(1.05) hue-rotate(-12deg);
}
.dd-dossier-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(7, 8, 11, 0) 38%, rgba(7, 8, 11, 0.88) 100%),
        linear-gradient(180deg, rgba(47, 217, 195, 0.1) 0%, transparent 45%);
}

/* Línea de barrido: la señal de "escaneo en curso" */
.dd-dossier-media::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    z-index: 1;
    background: linear-gradient(to right, transparent, rgba(131, 174, 214, 0.55), transparent);
    animation: ddScan 4.5s var(--dd-ease) infinite;
}
/* Se anima `top` en porcentaje —no translateY en píxeles— para que el barrido
   recorra exactamente la altura del marco sea cual sea el tamaño de pantalla. */
@keyframes ddScan {
    0%   { top: 0;    opacity: 0; }
    12%  {            opacity: 0.9; }
    88%  {            opacity: 0.9; }
    100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dd-dossier-media::before { animation: none; opacity: 0.5; }
}

.dd-dossier-media-cap {
    position: absolute;
    left: var(--dd-s-4);
    bottom: var(--dd-s-4);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--dd-s-2);
    padding: 0.3rem 0.65rem;
    background-color: rgba(7, 8, 11, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-pill);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink);
}

/* Punto de estado en vivo */
.dd-pulse {
    position: relative;
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--dd-state-ok);
}
.dd-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--dd-state-ok);
    animation: ddPulse 2.4s var(--dd-ease) infinite;
}
@keyframes ddPulse {
    0%   { transform: scale(0.6); opacity: 0.9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dd-pulse::after { animation: none; opacity: 0.4; }
}

/* Estado dual */
.dd-dossier-states { display: grid; grid-template-columns: minmax(0, 1fr); }
.dd-dossier-state { padding: var(--dd-s-4); position: relative; }
.dd-dossier-state + .dd-dossier-state { border-top: var(--dd-hairline); }
.dd-dossier-state-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-s-3);
    margin-bottom: var(--dd-s-3);
}
.dd-dossier-state-title {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
}
.dd-dossier-rows { display: grid; gap: 0.45rem; }
.dd-dossier-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dd-s-3);
    font-size: var(--dd-t-xs);
}
.dd-dossier-row dt { color: var(--dd-ink-muted); }
.dd-dossier-row dd {
    margin: 0;
    font-family: var(--dd-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--dd-ink);
    text-align: right;
}
.dd-dossier-foot {
    padding: var(--dd-s-3) var(--dd-s-4);
    border-top: var(--dd-hairline);
    background-color: var(--dd-void-deep);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-faint);
}

/* ── Barra de datos: mosaico de superficies, no filas con filete ────────── */
.dd-facts {
    margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
    display: grid;
    /* auto-fit sobre el ancho REAL del contenedor, no del viewport.
       CORRECCIÓN 2026-09-09: antes se fijaban 2 y luego 4 columnas por
       @media, que mide el viewport. Dentro de la columna angosta de una
       página interior eso producía celdas de ~110px y las cifras se partían. */
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    gap: var(--dd-s-3);
}
.dd-fact {
    position: relative;
    padding: var(--dd-s-5) var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
    overflow: hidden;
    transition: background-color var(--dd-fast), border-color var(--dd-fast);
}
.dd-fact::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--dd-s-4);
    right: var(--dd-s-4);
    height: 1px;
    background: linear-gradient(to right, var(--dd-ember), transparent);
}
.dd-fact:hover { background-color: var(--dd-glass-strong); border-color: var(--dd-rule-strong); }
.dd-fact-num {
    font-family: var(--dd-font-display);
    font-size: clamp(1.5rem, 1.0rem + 1.9vw, 2.375rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--dd-tr-display);
    color: var(--dd-ink);
    font-variant-numeric: tabular-nums;
    /* Cifras como «24/7/365» y «10.000 m²» no deben empujar el ancho de la
       ficha. `break-word` sólo parte cuando no hay otra salida; `anywhere`
       —que estaba antes— cortaba palabras cortas por la mitad («Banc/a»). */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}
/* Dentro de la hoja de una página interior el bloque vive en una columna
   estrecha: la cifra baja de escala para no dominar ni partirse. */
.dd-doc-body .dd-fact-num { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); }
.dd-doc-body .dd-facts { margin-top: 0; }
/* La unidad va en cuerpo menor: evita que «10.000 m²» compita con el número */
.dd-fact-unit {
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--dd-ink-muted);
    margin-left: 0.28em;
}
.dd-fact-label {
    margin-top: var(--dd-s-3);
    font-size: var(--dd-t-xs);
    font-weight: 600;
    color: var(--dd-ink-secondary);
}
.dd-fact-note {
    margin-top: 3px;
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    color: var(--dd-ink-faint);
    line-height: var(--dd-lh-normal);
}

/* ══════════════════════════════════════════════════════════════════════════
   08 · CADENA DE CUSTODIA
   ══════════════════════════════════════════════════════════════════════════ */

.dd-chain { display: grid; gap: var(--dd-s-6); }
.dd-chain-aside { display: none; }

.dd-chain-track { position: relative; display: grid; gap: 0; }
.dd-chain-track::before {
    content: '';
    position: absolute;
    left: 0.6875rem;
    top: 0.9rem;
    bottom: 2.5rem;
    width: 1px;
    background: linear-gradient(to bottom, var(--dd-bronze) 0%, var(--dd-steel) 100%);
    opacity: 0.3;
}

.dd-stage { position: relative; padding: 0 0 var(--dd-s-7) 2.5rem; }
.dd-stage:last-child { padding-bottom: 0; }

.dd-stage-dot {
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1.375rem;
    height: 1.375rem;
    display: grid;
    place-items: center;
    background-color: var(--dd-surface-2);
    border: 1px solid var(--dd-rule-strong);
    border-radius: 50%;
    font-family: var(--dd-font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--dd-ink-faint);
    transition: border-color var(--dd-normal), color var(--dd-normal),
                background-color var(--dd-normal), box-shadow var(--dd-normal);
}
.dd-stage[data-active='true'] .dd-stage-dot {
    border-color: var(--dd-ember);
    background-color: var(--dd-ember);
    color: #1a0d06;
    box-shadow: 0 0 0 4px var(--dd-bronze-wash);
}
.dd-stage[data-phase='digital'][data-active='true'] .dd-stage-dot {
    border-color: var(--dd-cyan);
    background-color: var(--dd-cyan);
    color: #04211d;
    box-shadow: 0 0 0 4px var(--dd-steel-wash);
}

.dd-stage-title {
    font-size: var(--dd-t-h3);
    font-family: var(--dd-font-display);
    font-weight: 650;
    color: var(--dd-ink-muted);
    letter-spacing: var(--dd-tr-tight);
    transition: color var(--dd-normal);
}
.dd-stage[data-active='true'] .dd-stage-title { color: var(--dd-ink); }

.dd-stage-body {
    margin-top: var(--dd-s-2);
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-secondary);
    max-width: 56ch;
}
.dd-stage-meta {
    margin-top: var(--dd-s-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--dd-s-2);
    align-items: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   09 · ÍNDICE DE SERVICIOS
   ══════════════════════════════════════════════════════════════════════════ */

.dd-index { list-style: none; display: grid; gap: var(--dd-s-3); }
.dd-index-item { border: 0; }

.dd-index-link {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0 var(--dd-s-4);
    align-items: start;
    padding: var(--dd-s-5);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
    overflow: hidden;
    transition: background-color var(--dd-fast), border-color var(--dd-fast), transform var(--dd-fast);
}
/* Barra de acento que crece al pasar el puntero */
.dd-index-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--dd-steel);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--dd-normal);
}
.dd-index-link:hover {
    background-color: var(--dd-glass-strong);
    border-color: var(--dd-rule-strong);
}
.dd-index-link:hover::before { transform: scaleY(1); }

.dd-index-num {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-sm);
    font-weight: 600;
    letter-spacing: var(--dd-tr-wide);
    color: var(--dd-ember);
    font-variant-numeric: tabular-nums;
    padding-top: 0.2rem;
}
.dd-index-body { min-width: 0; }
.dd-index-title {
    display: block;
    font-family: var(--dd-font-display);
    font-size: var(--dd-t-h3);
    font-weight: 650;
    color: var(--dd-ink);
    letter-spacing: var(--dd-tr-tight);
    line-height: var(--dd-lh-snug);
}
.dd-index-desc {
    display: block;
    margin-top: var(--dd-s-2);
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-secondary);
    max-width: 62ch;
}
.dd-index-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dd-s-2) var(--dd-s-3);
    margin-top: var(--dd-s-3);
}
.dd-index-arrow {
    display: none;
    color: var(--dd-ink-faint);
    transition: transform var(--dd-normal), color var(--dd-normal);
}
.dd-index-link:hover .dd-index-arrow { color: var(--dd-cyan); transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   09b · COLUMNA PARTIDA + LISTA DE OPERACIONES
   Sustituye la lista de siete verbos a ancho completo, que diluía el peso de
   la afirmación. Ahora el argumento va a la izquierda y la enumeración queda
   a la derecha como pieza cerrada y jerarquizada.
   ══════════════════════════════════════════════════════════════════════════ */

.dd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-6);
    align-items: start;
}

.dd-ops {
    list-style: none;
    background-color: var(--dd-surface-2);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-lg);
    box-shadow: var(--dd-elev-2);
    overflow: hidden;
}
.dd-ops-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 var(--dd-s-3);
    align-items: baseline;
    padding: var(--dd-s-4);
    transition: background-color var(--dd-fast);
}
.dd-ops-item + .dd-ops-item { border-top: var(--dd-hairline); }
.dd-ops-item:hover { background-color: var(--dd-glass); }

.dd-ops-num {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    font-weight: 600;
    letter-spacing: var(--dd-tr-wide);
    color: var(--dd-bronze);
    font-variant-numeric: tabular-nums;
}
.dd-ops-verb {
    display: block;
    font-family: var(--dd-font-display);
    font-size: var(--dd-t-h4);
    font-weight: 650;
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
    line-height: 1.2;
}
.dd-ops-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--dd-t-xs);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   09c · MOSAICO DE FICHAS
   Formato compacto compartido por los ocho servicios y por los bloques de
   infraestructura, de modo que ambos conjuntos entren en pantalla en vez de
   obligar a un scroll largo de tarjetas apiladas a ancho completo.
   ══════════════════════════════════════════════════════════════════════════ */

.dd-tiles {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-3);
}

.dd-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--dd-s-5) var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
    overflow: hidden;
    transition: background-color var(--dd-fast), border-color var(--dd-fast);
}
.dd-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--dd-steel);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dd-normal);
}
a.dd-tile:hover { background-color: var(--dd-glass-strong); border-color: var(--dd-rule-strong); }
a.dd-tile:hover::before { transform: scaleX(1); }

.dd-tile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-s-3);
    margin-bottom: var(--dd-s-4);
}
.dd-tile-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-sm);
    background-color: var(--dd-glass);
    color: var(--dd-bronze);
    flex: 0 0 auto;
}
.dd-tile-icon svg { width: 1.125rem; height: 1.125rem; }
.dd-tile-num {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    font-weight: 600;
    letter-spacing: var(--dd-tr-wide);
    color: var(--dd-ink-faint);
    font-variant-numeric: tabular-nums;
}

.dd-tile-title {
    display: block;
    font-family: var(--dd-font-display);
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: var(--dd-tr-tight);
    line-height: var(--dd-lh-snug);
    color: var(--dd-ink);
    /* El título puede tener dos palabras largas; se permite partir antes que
       desbordar la ficha. */
    overflow-wrap: break-word;
}
.dd-tile-desc {
    display: block;
    margin-top: var(--dd-s-2);
    font-size: var(--dd-t-xs);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-secondary);
    overflow-wrap: break-word;
}
.dd-tile-foot {
    margin-top: auto;
    padding-top: var(--dd-s-4);
    display: flex;
    align-items: center;
    gap: var(--dd-s-2);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
    transition: color var(--dd-fast);
}
.dd-tile-foot svg { width: 0.85rem; height: 0.85rem; transition: transform var(--dd-normal); }
a.dd-tile:hover .dd-tile-foot { color: var(--dd-steel-bright); }
a.dd-tile:hover .dd-tile-foot svg { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════════════
   10 · LÁMINAS
   El material disponible es de 445×372 px. Se presenta en formato contenido,
   con gradación cromática al sistema y pie monoespaciado; así la restricción
   de resolución se lee como decisión y no como carencia.
   ══════════════════════════════════════════════════════════════════════════ */

.dd-plates { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dd-s-4); }
.dd-plate { margin: 0; }
.dd-plate-frame {
    position: relative;
    overflow: hidden;
    background-color: var(--dd-void-deep);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-elev-1);
    aspect-ratio: 4 / 3;
}
.dd-plate-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.45) contrast(1.1) brightness(0.95);
    transition: transform var(--dd-slow), filter var(--dd-slow);
}
.dd-plate-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(160deg, rgba(47, 217, 195, 0.12) 0%, transparent 42%, rgba(7, 8, 11, 0.55) 100%);
    transition: opacity var(--dd-slow);
}
.dd-plate:hover .dd-plate-frame img { transform: scale(1.04); filter: saturate(0.75) contrast(1.05) brightness(1.02); }
.dd-plate:hover .dd-plate-frame::after { opacity: 0.5; }

.dd-plate-cap {
    margin-top: var(--dd-s-3);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-muted);
    letter-spacing: 0.02em;
}
.dd-plate-cap b {
    display: block;
    color: var(--dd-bronze);
    font-weight: 600;
    letter-spacing: var(--dd-tr-wide);
    margin-bottom: 2px;
}

/* Marcador para una lámina sin fotografía disponible. Nunca se rellena con
   imagen de banco ajena a la empresa presentada como instalación real. */
.dd-plate-empty {
    height: 100%;
    display: grid;
    place-items: center;
    padding: var(--dd-s-4);
    text-align: center;
}

/* El sello de acreditación puede contener el PNG oficial en vez de icono+texto.
   `max-width: none` es obligatorio: el reset global aplica `img{max-width:100%}`
   y dentro de un contenedor flex cuyo ancho lo define el propio contenido eso
   crea una restricción circular que colapsa la imagen a unos pocos píxeles. */
.dd-seal-badge img {
    flex: 0 0 auto;
    height: 2.75rem;
    width: auto;
    max-width: none;
}
/* Sobre banda clara el sello va en blanco puro para que el logotipo oficial,
   que es azul y rojo sobre transparente, conserve su contraste. */
.dd-band--light .dd-seal-badge { background-color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════════════
   11 · COMPARADOR DIRECT IMAGE
   ══════════════════════════════════════════════════════════════════════════ */

.dd-compare { display: grid; gap: var(--dd-s-5); position: relative; z-index: var(--dd-z-base); }

.dd-compare-switch {
    display: inline-flex;
    padding: 4px;
    background-color: var(--dd-glass);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-pill);
    box-shadow: var(--dd-inset-top);
    gap: 2px;
}
.dd-compare-switch button {
    min-height: 2.5rem;
    padding: 0.4rem 1rem;
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink-muted);
    border-radius: var(--dd-r-pill);
    transition: background-color var(--dd-fast), color var(--dd-fast), box-shadow var(--dd-fast);
    white-space: nowrap;
}
.dd-compare-switch button:hover { color: var(--dd-ink); }
.dd-compare-switch button[aria-selected='true'] {
    background-color: var(--dd-ink);
    color: var(--dd-void);
    font-weight: 600;
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.8);
}

.dd-compare-stage {
    position: relative;
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-lg);
    background-color: var(--dd-surface-2);
    box-shadow: var(--dd-elev-3);
    overflow: hidden;
}
.dd-compare-panel { display: none; }
.dd-compare-panel[data-active='true'] { display: block; }

.dd-compare-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-s-3);
    flex-wrap: wrap;
    padding: var(--dd-s-3) var(--dd-s-4);
    border-bottom: var(--dd-hairline);
    background-color: var(--dd-glass);
}
.dd-compare-url {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    color: var(--dd-ink-muted);
    word-break: break-all;
}
.dd-compare-body { padding: var(--dd-s-6) var(--dd-s-4); }

/* NOTA 2026-09-09: aquí vivía `.dd-legacy*`, la reconstrucción de la pantalla
   de acceso actual del cliente, presentada en pestañas junto a la propuesta.
   Se eliminó por indicación expresa: exhibir el sistema propio del cliente al
   lado de su reemplazo puede leerse como reproche en una reunión de venta. La
   sección conserva únicamente la propuesta. El conmutador `.dd-compare-switch`
   se mantiene definido por si se reactiva una comparación en el futuro. */

/* Propuesta 2027 */
.dd-proposal { display: grid; gap: var(--dd-s-3); }
.dd-proposal-search {
    display: flex;
    align-items: center;
    gap: var(--dd-s-3);
    padding: var(--dd-s-4);
    background-color: var(--dd-void-deep);
    border: 1px solid var(--dd-rule-strong);
    border-radius: var(--dd-r-sm);
    box-shadow: var(--dd-inset-top);
    color: var(--dd-ink);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-xs);
    min-width: 0;
}
.dd-proposal-search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-proposal-search svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--dd-cyan); }

.dd-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dd-s-3);
    flex-wrap: wrap;
    padding: var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-left: 2px solid var(--dd-ember);
    border-radius: var(--dd-r-sm);
    box-shadow: var(--dd-inset-top);
    transition: background-color var(--dd-fast);
}
.dd-result:hover { background-color: var(--dd-glass-strong); }
.dd-result[data-phase='digital'] { border-left-color: var(--dd-cyan); }
.dd-result-title { font-size: var(--dd-t-sm); font-weight: 600; color: var(--dd-ink); }
.dd-result-meta {
    margin-top: 3px;
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    color: var(--dd-ink-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · BLOQUES DE APOYO
   ══════════════════════════════════════════════════════════════════════════ */

/* Filas: pasan de lista con filetes a mosaico de superficies */
.dd-rows { display: grid; gap: var(--dd-s-3); border: 0; }
.dd-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-2);
    padding: var(--dd-s-5);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
    transition: background-color var(--dd-fast), border-color var(--dd-fast);
}
.dd-row:hover { background-color: var(--dd-glass-strong); border-color: var(--dd-rule-strong); }
.dd-row-title {
    display: flex;
    align-items: center;
    gap: var(--dd-s-3);
    font-family: var(--dd-font-display);
    font-size: var(--dd-t-h4);
    font-weight: 650;
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
}
.dd-row-title svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; color: var(--dd-ember); }
.dd-row-body { font-size: var(--dd-t-sm); line-height: var(--dd-lh-relaxed); color: var(--dd-ink-secondary); max-width: 64ch; }

/* Lista de comprobación */
.dd-checks { list-style: none; display: grid; gap: var(--dd-s-3); }
.dd-checks li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: var(--dd-s-3);
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
}
.dd-checks svg { width: 1.125rem; height: 1.125rem; color: var(--dd-cyan); margin-top: 0.2rem; }
.dd-checks strong { color: var(--dd-ink); font-weight: 600; }

/* Prensa */
.dd-press { display: grid; gap: var(--dd-s-3); }
.dd-press-item {
    padding: var(--dd-s-5);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-left: 2px solid var(--dd-state-transit);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
}
.dd-press-quote {
    font-family: var(--dd-font-display);
    font-size: var(--dd-t-h4);
    font-weight: 600;
    line-height: var(--dd-lh-snug);
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
}
.dd-press-source {
    margin-top: var(--dd-s-3);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
}

/* Contacto */
.dd-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dd-s-3); }
.dd-contact-block {
    padding: var(--dd-s-5);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
}
.dd-contact-block > * + * { margin-top: var(--dd-s-2); }
.dd-contact-label {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
}
.dd-contact-value { font-size: var(--dd-t-body); color: var(--dd-ink); line-height: var(--dd-lh-normal); }
.dd-contact-value a { color: var(--dd-ink); border-bottom: 1px solid var(--dd-rule-strong); }
.dd-contact-value a:hover { color: var(--dd-cyan); border-bottom-color: var(--dd-cyan); }

/* Sello de acreditación */
.dd-seal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dd-s-3);
    padding: var(--dd-s-3) var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
}
.dd-seal-badge svg { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; color: var(--dd-state-ok); }
.dd-seal-badge-text { font-size: var(--dd-t-xs); line-height: var(--dd-lh-normal); }
.dd-seal-badge-text b { display: block; color: var(--dd-ink); font-weight: 650; }
.dd-seal-badge-text span { color: var(--dd-ink-faint); font-family: var(--dd-font-mono); font-size: var(--dd-t-micro); }

/* ══════════════════════════════════════════════════════════════════════════
   13 · PÁGINAS INTERIORES
   ══════════════════════════════════════════════════════════════════════════ */

.dd-pagehead {
    position: relative;
    padding-block: clamp(2.25rem, 1.4rem + 2.8vw, 4.25rem) var(--dd-section-y-tight);
    background-color: var(--dd-surface-1);
    border-bottom: var(--dd-hairline);
    overflow: hidden;
}
.dd-pagehead::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -10%;
    width: 60%;
    height: 180%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(93, 143, 191, 0.07) 0%, transparent 100%);
    filter: blur(24px);
}
.dd-pagehead > * { position: relative; z-index: var(--dd-z-base); }

.dd-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--dd-s-2);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
    list-style: none;
    margin-bottom: var(--dd-s-4);
}
.dd-crumbs li { display: flex; align-items: center; gap: var(--dd-s-2); }
.dd-crumbs li + li::before { content: '/'; color: var(--dd-ink-faint); opacity: 0.5; }
.dd-crumbs a:hover { color: var(--dd-cyan); }
.dd-crumbs [aria-current='page'] { color: var(--dd-ink-secondary); }

.dd-pagehead-title {
    font-size: var(--dd-t-h1);
    font-weight: 800;
    line-height: var(--dd-lh-snug);
    letter-spacing: var(--dd-tr-display);
    max-width: 24ch;
}
.dd-pagehead-lead {
    margin-top: var(--dd-s-4);
    font-size: var(--dd-t-lead);
    color: var(--dd-ink-secondary);
    max-width: var(--dd-measure);
    line-height: var(--dd-lh-normal);
}
.dd-pagehead-meta { margin-top: var(--dd-s-5); display: flex; flex-wrap: wrap; gap: var(--dd-s-2); }

/* ── Hoja de contenido de página interior ───────────────────────────────
   Varias páginas del sitio real tienen apenas dos párrafos. Presentadas como
   texto suelto sobre una banda a ancho completo se veían vacías y pobres.
   Presentadas como una hoja blanca sobre banda gris se leen como un documento:
   la brevedad pasa a ser formato, no carencia. */
.dd-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-6);
    padding: clamp(1.5rem, 1rem + 2.2vw, 3.25rem);
    background-color: #ffffff;
    border: 1px solid rgba(16, 22, 32, 0.08);
    border-radius: var(--dd-r-lg);
    box-shadow: 0 16px 40px -18px rgba(16, 22, 32, 0.28);
}
.dd-doc-body { min-width: 0; }

/* Columna lateral de la hoja: fotografía y datos de apoyo */
.dd-doc-side {
    min-width: 0;
    display: grid;
    gap: var(--dd-s-4);
    align-content: start;
}
.dd-doc-figure { margin: 0; }
.dd-doc-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--dd-r-md);
    border: 1px solid rgba(16, 22, 32, 0.10);
}
.dd-doc-figure figcaption {
    margin-top: var(--dd-s-3);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-muted);
}

/*
 * Guardas de contenedor angosto.
 *
 * Las retículas del sitio se reparten por @media, que mide el VIEWPORT. Dentro
 * de la hoja de una página interior con columna lateral, el ancho real ronda
 * los 400-600px aunque el viewport sea de 1440. Sin estas guardas, bloques
 * pensados para ancho completo se comprimen y su contenido se parte.
 */
.dd-doc--con-lateral .dd-doc-body .dd-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-2);
}
.dd-doc--con-lateral .dd-doc-body .dd-press {
    grid-template-columns: minmax(0, 1fr);
}
.dd-doc--con-lateral .dd-doc-body .dd-plates {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.dd-doc-body .dd-pullquote { max-width: none; }
.dd-doc-body .dd-prose,
.dd-doc-body .dd-lead { max-width: none; }

/* Ficha de datos de la barra lateral */
.dd-doc-meta {
    padding: var(--dd-s-4);
    background-color: #f3f5f7;
    border: 1px solid rgba(16, 22, 32, 0.08);
    border-radius: var(--dd-r-md);
}
.dd-doc-meta dl { display: grid; gap: var(--dd-s-3); }
.dd-doc-meta dt {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
}
.dd-doc-meta dd {
    margin: 0.15rem 0 0 0;
    font-size: var(--dd-t-sm);
    font-weight: 600;
    color: var(--dd-ink);
    line-height: var(--dd-lh-normal);
}

/* Navegación entre páginas hermanas */
.dd-sibnav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-3);
    padding-top: var(--dd-s-6);
    border-top: var(--dd-hairline);
}
.dd-sibnav a {
    display: block;
    padding: var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
    transition: background-color var(--dd-fast), border-color var(--dd-fast);
}
.dd-sibnav a:hover { background-color: var(--dd-glass-strong); border-color: var(--dd-rule-strong); }
.dd-sibnav em {
    display: block;
    font-family: var(--dd-font-mono);
    font-style: normal;
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ember);
    margin-bottom: var(--dd-s-2);
}
.dd-sibnav b {
    font-family: var(--dd-font-display);
    font-size: var(--dd-t-h4);
    font-weight: 650;
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   13b · ACCESO (LOGIN)
   Pantalla partida: a la izquierda el argumento sobre la fotografía real del
   archivo; a la derecha el formulario. En teléfono se apila y el formulario
   queda primero — nadie llega al login a leer, llega a entrar.
   ══════════════════════════════════════════════════════════════════════════ */

/* La pantalla de acceso se sirve con layouts/auth.php: sin cabecera ni pie,
   por lo que ocupa exactamente el alto de la ventana y NO genera scroll de
   página. `dvh` evita el salto que produce la barra de direcciones móvil.
   Si la ventana es demasiado baja para el formulario, el desplazamiento ocurre
   dentro del panel derecho, nunca en el documento: así la pantalla nunca se
   parte ni deja contenido inalcanzable. */
.dd-site--auth {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.dd-auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
}

/* Enlace de retorno al sitio: al no haber navegación, la pantalla necesita
   una salida explícita. */
.dd-auth-back {
    display: inline-flex;
    align-items: center;
    gap: var(--dd-s-2);
    margin-bottom: var(--dd-s-5);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink-muted);
    transition: color var(--dd-fast);
}
.dd-auth-back:hover { color: var(--dd-ink); }
.dd-auth-back svg { width: 0.85rem; height: 0.85rem; transform: rotate(180deg); }

/* ── Panel de marca con Video Dinámico ──────────────────────────────────── */
.dd-auth-aside {
    position: relative;
    display: none;
    overflow: hidden;
    background-color: var(--dd-void-deep);
    padding: var(--dd-s-8) clamp(2rem, 1rem + 2.5vw, 3.5rem);
}

.dd-auth-video-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.dd-auth-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.85) contrast(1.08) brightness(0.65);
    display: block;
}

.dd-auth-video-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(160deg, rgba(10, 14, 21, 0.62) 0%, rgba(10, 14, 21, 0.88) 100%),
        radial-gradient(closest-side at 25% 20%, rgba(93, 143, 191, 0.22), transparent 75%);
    pointer-events: none;
}

.dd-auth-aside-inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: var(--dd-s-8);
}
.dd-auth-claim {
    font-family: var(--dd-font-display);
    font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem);
    font-weight: 800;
    line-height: var(--dd-lh-snug);
    letter-spacing: var(--dd-tr-display);
    color: var(--dd-ink);
    max-width: 16ch;
}
.dd-auth-claim span { color: var(--dd-steel-bright); display: block; }
.dd-auth-note {
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-secondary);
    max-width: 40ch;
}
.dd-auth-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--dd-s-4);
    padding-top: var(--dd-s-5);
    border-top: var(--dd-hairline);
}
.dd-auth-fact b {
    display: block;
    font-family: var(--dd-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: var(--dd-tr-tight);
    color: var(--dd-ink);
}
.dd-auth-fact span {
    display: block;
    margin-top: 2px;
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-wide);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
}

/* ── Panel del formulario ───────────────────────────────────────────────── */
.dd-auth-main {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--dd-gutter);
    background-color: var(--dd-void);
    /* Único punto de desplazamiento de la pantalla */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.dd-auth-panel { width: 100%; max-width: 24rem; }

.dd-auth-head { margin-bottom: var(--dd-s-6); }
.dd-auth-head h1 {
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    font-weight: 800;
    letter-spacing: var(--dd-tr-display);
    margin-top: var(--dd-s-4);
}
.dd-auth-head p {
    margin-top: var(--dd-s-2);
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-secondary);
}

/* Aviso de error */
.dd-auth-error {
    display: flex;
    align-items: flex-start;
    gap: var(--dd-s-3);
    padding: var(--dd-s-4);
    margin-bottom: var(--dd-s-5);
    background-color: var(--dd-state-alert-wash);
    border: 1px solid var(--dd-state-alert-edge);
    border-radius: var(--dd-r-md);
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink);
}
.dd-auth-error svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; color: var(--dd-state-alert); margin-top: 0.1rem; }

/* Campos */
.dd-field + .dd-field { margin-top: var(--dd-s-4); }
.dd-field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dd-s-3);
    margin-bottom: var(--dd-s-2);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-muted);
}
.dd-field-label a { color: var(--dd-steel-bright); text-transform: none; letter-spacing: 0; }
.dd-field-label a:hover { text-decoration: underline; }

.dd-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem var(--dd-s-4);
    font-family: var(--dd-font-ui);
    font-size: var(--dd-t-body);
    color: var(--dd-ink);
    background-color: var(--dd-glass);
    border: var(--dd-hairline-strong);
    border-radius: var(--dd-r-sm);
    box-shadow: var(--dd-inset-top);
    transition: border-color var(--dd-fast), background-color var(--dd-fast);
    /* 16px reales evitan que iOS haga zoom al enfocar el campo */
    font-size: max(16px, var(--dd-t-body));
}
.dd-input::placeholder { color: var(--dd-ink-faint); }
.dd-input:hover { background-color: var(--dd-glass-strong); }
.dd-input:focus {
    outline: none;
    border-color: var(--dd-steel);
    background-color: var(--dd-glass-strong);
}
.dd-input:focus-visible { outline: var(--dd-focus-ring); outline-offset: 1px; }

.dd-auth-submit { width: 100%; margin-top: var(--dd-s-5); }

/* Accesos de demostración */
.dd-auth-demo {
    margin-top: var(--dd-s-5);
    padding-top: var(--dd-s-4);
    border-top: var(--dd-hairline);
}
.dd-auth-demo-title {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ink-faint);
    margin-bottom: var(--dd-s-3);
}
.dd-auth-demo-grid { display: grid; gap: var(--dd-s-3); }
.dd-auth-demo-card {
    display: flex;
    align-items: center;
    gap: var(--dd-s-3);
    padding: var(--dd-s-3) var(--dd-s-4);
    background-color: var(--dd-glass);
    border: var(--dd-hairline);
    border-radius: var(--dd-r-md);
    box-shadow: var(--dd-inset-top);
    transition: background-color var(--dd-fast), border-color var(--dd-fast);
}
.dd-auth-demo-card:hover { background-color: var(--dd-glass-strong); border-color: var(--dd-rule-strong); }
.dd-auth-demo-card svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; color: var(--dd-bronze); }
.dd-auth-demo-card b {
    display: block;
    /* Explícita: el envoltorio es un <span> y sin esto el <b> heredaba la
       monoespaciada de la regla de descripción. */
    font-family: var(--dd-font-ui);
    font-size: var(--dd-t-sm);
    font-weight: 650;
    line-height: var(--dd-lh-snug);
    color: var(--dd-ink);
}
/* Sólo la descripción va en monoespaciada, no el envoltorio */
.dd-auth-demo-card b + span {
    display: block;
    font-size: var(--dd-t-micro);
    font-family: var(--dd-font-mono);
    color: var(--dd-ink-faint);
    margin-top: 2px;
}
.dd-auth-foot {
    margin-top: var(--dd-s-4);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-faint);
}

.dd-auth-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ══════════════════════════════════════════════════════════════════════════
   13c · ENTRADA DE LA PANTALLA DE ACCESO
   Barrido escalonado DE DERECHA A IZQUIERDA. Los elementos entran desplazados
   desde el borde derecho y el orden acompaña esa dirección: primero los
   bloques del formulario —que está a la derecha— y después el argumento del
   panel de marca, a la izquierda. Así el movimiento y la secuencia apuntan
   hacia el mismo lado en vez de contradecirse.

   Se resuelve con animaciones CSS y `animation-fill-mode: both`, de modo que
   los elementos parten invisibles sin necesidad de JavaScript. Si el navegador
   no soporta animaciones, quedan visibles por defecto: nunca hay contenido
   permanentemente oculto.
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes ddAuthSlideIn {
    /* Recorrido amplio: el panel entero necesita más viaje que un bloque
       suelto para que el movimiento se lea. El desbordamiento lo contiene
       `.dd-auth { overflow: hidden }`, así que no aparece barra horizontal. */
    from { opacity: 0; transform: translateX(56px); }
    to   { opacity: 1; transform: none; }
}
/* Se anima ÚNICAMENTE `.dd-auth-main`: el box del formulario entra desde la
   derecha como una sola pieza. El panel de marca de la izquierda queda fijo,
   como fondo sobre el que el box aterriza. */
.dd-auth-main {
    animation: ddAuthSlideIn 780ms var(--dd-ease-out) both;
    /* La sombra hacia la izquierda refuerza la lectura de pieza que llega
       y se apoya sobre el panel de marca. */
    box-shadow: -24px 0 60px -24px rgba(0, 0, 0, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .dd-auth-main { animation: none; }
}

/* ── Ventanas de poca altura (teléfonos verticales de 667px y menos) ─────
   El formulario completo mide ~755px y no cabe. Se recorta lo prescindible
   —la línea de instrucción, que ya dicen el título y las etiquetas— antes de
   dejar que el panel scrollee. La nota de datos sintéticos NO se oculta: es
   una advertencia de honestidad, no decoración. */
@media (max-height: 720px) {
    .dd-auth-head p { display: none; }
    .dd-auth-head { margin-bottom: var(--dd-s-5); }
    .dd-auth-back { margin-bottom: var(--dd-s-4); }
    .dd-brand-plate img { height: 1.625rem; }
    .dd-auth-main { padding-block: var(--dd-s-5); }
    .dd-auth-demo { margin-top: var(--dd-s-4); }
    .dd-auth-foot { font-size: 0.625rem; margin-top: var(--dd-s-3); }
}

@media (min-width: 900px) {
    .dd-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
    .dd-auth-aside { display: block; }
    /* En escritorio ancho el alto sobra: la instrucción vuelve */
    .dd-auth-head p { display: block; }
}

@media (min-width: 1280px) {
    .dd-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · PIE CORPORATIVO
   ══════════════════════════════════════════════════════════════════════════ */

.dd-foot {
    position: relative;
    background-color: var(--dd-void-deep);
    color: var(--dd-ink-secondary);
    padding-block: var(--dd-section-y-tight);
    border-top: var(--dd-hairline);
    overflow: hidden;
}
.dd-foot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--dd-rule-strong) 20%, var(--dd-rule-strong) 80%, transparent);
    opacity: 1;
}
.dd-foot > * { position: relative; z-index: var(--dd-z-base); }

.dd-foot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dd-s-7); }
.dd-foot-about {
    margin-top: var(--dd-s-4);
    font-size: var(--dd-t-sm);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-muted);
    max-width: 42ch;
}
.dd-foot-legal {
    margin-top: var(--dd-s-4);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-faint);
}

.dd-foot-col h4 {
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    font-weight: 500;
    letter-spacing: var(--dd-tr-caps);
    text-transform: uppercase;
    color: var(--dd-ember);
    padding-bottom: var(--dd-s-3);
    border-bottom: var(--dd-hairline);
    margin-bottom: var(--dd-s-3);
}
.dd-foot-col ul { list-style: none; display: grid; gap: 0.1rem; }
.dd-foot-col ul a {
    display: block;
    padding: 0.35rem 0;
    font-size: var(--dd-t-sm);
    color: var(--dd-ink-muted);
    transition: color var(--dd-fast), transform var(--dd-fast);
}
.dd-foot-col ul a:hover { color: var(--dd-ink); transform: translateX(3px); }

.dd-foot-bottom {
    margin-top: var(--dd-s-7);
    padding-top: var(--dd-s-5);
    border-top: var(--dd-hairline);
    display: grid;
    gap: var(--dd-s-4);
    font-family: var(--dd-font-mono);
    font-size: var(--dd-t-micro);
    line-height: var(--dd-lh-relaxed);
    color: var(--dd-ink-faint);
}
.dd-foot-disclaimer {
    padding: var(--dd-s-4);
    background-color: var(--dd-cyan-wash);
    border: 1px solid var(--dd-cyan-edge);
    border-radius: var(--dd-r-md);
}
.dd-foot-disclaimer b { color: var(--dd-cyan); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   15 · REVELADO POR SCROLL
   ══════════════════════════════════════════════════════════════════════════ */

.dd-js .dd-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dd-slow), transform var(--dd-slow);
}
.dd-js .dd-reveal[data-shown='true'] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .dd-js .dd-reveal { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   16 · UTILIDADES
   ══════════════════════════════════════════════════════════════════════════ */

.dd-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.dd-hide { display: none !important; }
.dd-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ══════════════════════════════════════════════════════════════════════════
   17 · ESCALADO RESPONSIVO
   Mobile-first: de aquí hacia arriba sólo se agrega complejidad.
   360 · 480 · 768 · 1024 · 1280 · 1600
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ≥480px · teléfonos grandes ─────────────────────────────────────────── */
@media (min-width: 480px) {
    .dd-cover-actions { display: flex; flex-wrap: wrap; }
    .dd-btn--block { width: auto; }
    .dd-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dd-dossier-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dd-dossier-state + .dd-dossier-state { border-top: 0; border-left: var(--dd-hairline); }
    .dd-mobile-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dd-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥768px · tablet vertical ───────────────────────────────────────────── */
@media (min-width: 768px) {
    /* .dd-facts ya no fija columnas por @media: usa auto-fit sobre el ancho
       real de su contenedor (ver sección 07). */

    .dd-row {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
        gap: var(--dd-s-5);
        align-items: start;
    }

    .dd-index-link { grid-template-columns: 3rem minmax(0, 1fr) 2rem; }
    .dd-index-arrow { display: block; justify-self: end; align-self: center; width: 1.125rem; height: 1.125rem; }

    .dd-press { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dd-sibnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dd-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Mosaico de fichas: dos columnas desde tablet vertical */
    .dd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .dd-foot-bottom {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--dd-s-5);
    }
    .dd-compare { gap: var(--dd-s-6); }
    .dd-compare-body { padding: var(--dd-s-8) var(--dd-s-6); }
}

/* ── ≥1024px · escritorio: aparece la navegación completa ───────────────── */
@media (min-width: 1024px) {
    .dd-masthead-inner { min-height: 4.75rem; gap: var(--dd-s-5); }

    .dd-nav { display: block; }
    .dd-masthead-cta { display: inline-flex; }
    .dd-nav-toggle { display: none; }
    .dd-mobile-nav { display: none !important; }

    .dd-cover { padding-block: clamp(4rem, 2rem + 3.5vw, 7rem) 0; }
    .dd-cover-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: clamp(2.5rem, 1rem + 4vw, 5rem);
        align-items: center;
    }

    .dd-editorial {
        grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
        column-gap: clamp(2.5rem, 1rem + 3.5vw, 5rem);
        align-items: start;
    }
    .dd-editorial--reverse { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }

    /* Cadena de custodia: panel fijo + etapas que desfilan */
    .dd-chain {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: clamp(2.5rem, 1rem + 3.5vw, 5rem);
        align-items: start;
    }
    .dd-chain-aside { display: block; position: sticky; top: 7rem; }

    .dd-plates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dd-foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--dd-s-6); }
    .dd-contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dd-sibnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dd-rows { gap: var(--dd-s-3); }

    /* Argumento a la izquierda, enumeración cerrada a la derecha */
    .dd-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        gap: clamp(2.5rem, 1rem + 3.5vw, 4.5rem);
    }

    /* Los ocho servicios en 4 × 2: entra el conjunto completo en pantalla */
    .dd-tiles--servicios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Los cinco bloques de infraestructura en fila de tres */
    .dd-tiles--infra { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Hoja de página interior: texto y columna de apoyo */
    .dd-doc--con-lateral {
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
    }
}

/* ── ≥1280px · escritorio amplio ────────────────────────────────────────── */
@media (min-width: 1280px) {
    .dd-nav-list { gap: var(--dd-s-2); }
    .dd-nav-link, .dd-nav-trigger { padding-inline: 0.85rem; }

    /* Infraestructura completa en una sola fila horizontal */
    .dd-tiles--infra { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ── ≥1600px · monitores grandes: se limita el ancho, no se estira ─────── */
@media (min-width: 1600px) {
    .dd-wrap { max-width: var(--dd-w-full); }
    .dd-wrap--page { max-width: var(--dd-w-page); }
}

/* ── Teléfono en horizontal ─────────────────────────────────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
    .dd-cover { padding-block: var(--dd-s-6) 0; }
    .dd-mobile-nav { inset-top: 3.5rem; padding-block: var(--dd-s-4); }
    .dd-masthead-inner { min-height: 3.5rem; }
    .dd-chain-aside { position: static; }
}

/* ── <560px · la cápsula del antetítulo no cabe en una línea ─────────────
   Con dos líneas dentro de una forma de píldora el punto separador queda
   huérfano al final del primer renglón. Se pasa a rectángulo redondeado y se
   retira el separador, que en dos líneas ya no separa nada. */
@media (max-width: 559px) {
    .dd-cover-eyebrow {
        display: flex;
        border-radius: var(--dd-r-md);
        line-height: 1.6;
        padding: 0.5rem 0.85rem;
    }
    .dd-cover-eyebrow i { display: none; }
}

/* ── Teléfonos (<420px): la bajada de marca se retira ───────────────────── */
@media (max-width: 419px) {
    .dd-brand-sub { display: none; }
}

/* ── Pantallas muy angostas (≤359px, p. ej. Galaxy Fold cerrado) ────────── */
@media (max-width: 359px) {
    .dd-nav-toggle-label { display: none; }
    .dd-brand-name { font-size: 1rem; }
    .dd-facts { grid-template-columns: minmax(0, 1fr); }
    .dd-plates { grid-template-columns: minmax(0, 1fr); }
    .dd-index-link { grid-template-columns: minmax(0, 1fr); padding: var(--dd-s-4); }
    .dd-index-num { margin-bottom: var(--dd-s-2); }
    .dd-dossier-row { flex-wrap: wrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   18 · IMPRESIÓN
   La propuesta puede imprimirse. Se invierte a tinta sobre papel: un sistema
   oscuro impreso consume el tóner completo y se lee mal.
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
    .dd-masthead, .dd-mobile-nav, .dd-nav-toggle, .dd-cover-actions,
    .dd-compare-switch, .dd-foot-disclaimer { display: none !important; }

    body.dd-site { background: #fff; color: #111; }
    body.dd-site::after { display: none; }

    .dd-band, .dd-band--sunken, .dd-band--vault, .dd-band--raised, .dd-band--paper,
    .dd-foot, .dd-pagehead, .dd-dossier, .dd-row, .dd-index-link, .dd-fact,
    .dd-press-item, .dd-contact-block, .dd-note, .dd-sibnav a {
        background: #fff !important;
        color: #111 !important;
        border-color: #bbb !important;
        box-shadow: none !important;
    }
    h1, h2, h3, h4, .dd-ink, .dd-fact-num, .dd-index-title, .dd-row-title,
    .dd-press-quote, .dd-contact-value, .dd-brand-name, .dd-pagehead-title { color: #000 !important; }
    .dd-cover::before, .dd-cover::after, .dd-band--vault::after,
    .dd-pagehead::before, .dd-foot::before, .dd-dossier-media::before { display: none !important; }
    .dd-cover-title span { -webkit-text-fill-color: #444 !important; color: #444 !important; }
    .dd-js .dd-reveal { opacity: 1 !important; transform: none !important; }
    .dd-band { padding-block: 1.5rem; }
    a[href]::after { content: ''; }
}