/* ============================================================
   EXPEDIENTE 23-DL — styles.css
   Paleta: negro / gris / blanco envejecido + verde forense (#178C3C)
           rojo oscuro de detalle (pre-revelación)
   Fuentes: monospace de sistema (terminal) + serif/sans de sistema
   ============================================================ */

/* ============================================================
   1. VARIABLES (:root)
   ============================================================ */
:root {
       /* Fondos — fase investigación (frío/oscuro) */
       --fondo1:        #0A0D0A;
       --fondo2:        #11150F;
       --fondo3:        #161B14;
       --fondo-card:    #0F130E;
       --fondo-hoja:    #14181270;

       /* Verde forense — color acento principal */
       --verde1:        #178C3C;
       --verde2:        #0F6E2E;
       --verde3:        #1FB04E;
       --verde-tenue:   rgba(23,140,60,0.12);
       --verde-borde:   rgba(23,140,60,0.35);
       --verde-glow:    0 0 28px rgba(23,140,60,0.30);
       --verde-texto:   #5FD680;

       /* Rojo oscuro — solo detalles antes de la revelación */
       --rojo1:         #8C1B1B;
       --rojo2:         #B12626;
       --rojo-tenue:    rgba(140,27,27,0.14);
       --rojo-borde:    rgba(177,38,38,0.45);

       /* Fase cálida — revelación final */
       --calido1:       #1A1410;
       --calido2:       #221A12;
       --calido-acento: #C9A24B;
       --calido-glow:   0 0 30px rgba(201,162,75,0.25);
       --calido-texto:  #E8D9B5;

       /* Textos */
       --gris1:         #6E776B;
       --gris2:         #AEB6A8;
       --gris-borde:    rgba(255,255,255,0.07);
       --blanco:        #EDF2E8;
       --blanco-env:    #D8DBCC;              /* blanco envejecido */
       --blanco-op1:    rgba(237,242,232,0.88);
       --blanco-op2:    rgba(237,242,232,0.55);
       --blanco-op3:    rgba(237,242,232,0.10);

       /* Tipografía */
       --font-mono:    'Courier New', 'Consolas', ui-monospace, monospace;
       --font-display: 'Georgia', 'Times New Roman', serif;
       --font-body:    'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

       /* Escala fluid de texto */
       --fs-2xs:  clamp(0.60rem, 0.9vw,  0.70rem);
       --fs-xs:   clamp(0.68rem, 1.1vw,  0.78rem);
       --fs-sm:   clamp(0.78rem, 1.4vw,  0.90rem);
       --fs-base: clamp(0.90rem, 1.7vw,  1.02rem);
       --fs-md:   clamp(1.00rem, 2.0vw,  1.12rem);
       --fs-lg:   clamp(1.12rem, 2.4vw,  1.35rem);
       --fs-xl:   clamp(1.35rem, 3.0vw,  1.75rem);
       --fs-2xl:  clamp(1.65rem, 4.0vw,  2.20rem);
       --fs-3xl:  clamp(2.10rem, 5.5vw,  3.10rem);

       /* Font weights */
       --fw-light:     300;
       --fw-regular:   400;
       --fw-medium:    500;
       --fw-semibold:  600;
       --fw-bold:      700;
       --fw-black:     900;

       /* Espaciado fluid */
       --gap-xs:  clamp(0.40rem, 0.8vw,  0.55rem);
       --gap-sm:  clamp(0.60rem, 1.2vw,  0.85rem);
       --gap-md:  clamp(0.90rem, 1.8vw,  1.30rem);
       --gap-lg:  clamp(1.40rem, 2.8vw,  2.00rem);
       --gap-xl:  clamp(2.20rem, 4.5vw,  3.20rem);
       --gap-2xl: clamp(3.50rem, 7.0vw,  5.50rem);

       /* Layout */
       --max-width:  640px;                   /* mobile-first, lectura tipo documento */
       --px-section: clamp(1.10rem, 5vw, 2.40rem);

       /* Border radius */
       --radius-sm:   0.35rem;
       --radius-md:   0.70rem;
       --radius-lg:   1.10rem;
       --radius-full: 9999px;

       /* Sombras */
       --shadow-sm:    0 2px  10px rgba(0,0,0,0.40);
       --shadow-md:    0 6px  26px rgba(0,0,0,0.55);
       --shadow-lg:    0 12px 48px rgba(0,0,0,0.70);
       --shadow-verde: 0 4px  26px rgba(23,140,60,0.40);

       /* Transiciones */
       --t-fast: 0.16s ease;
       --t-mid:  0.30s ease;
       --t-slow: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*, *::before, *::after {
       margin:       0;
       padding:      0;
       box-sizing:   border-box;
}

html {
       scroll-behavior: smooth;
       -webkit-text-size-adjust: 100%;
}

body {
       min-height:   100vh;
       min-height:   100dvh;
       background:   var(--fondo1);
       color:        var(--blanco-op1);
       font-family:  var(--font-body);
       font-size:    var(--fs-base);
       line-height:  1.65;
       overflow-x:   hidden;
       transition:   background var(--t-slow);
}

/* Fase cálida — se activa en la revelación con data-fase */
body[data-fase="calida"] {
       background:   var(--calido1);
}

img {
       max-width:    100%;
       display:      block;
}

button {
       font-family:  inherit;
       cursor:       pointer;
}

::selection {
       background:   var(--verde-tenue);
       color:        var(--blanco);
}

/* ============================================================
   3. CAPAS GLOBALES — scanlines, viñeta, flash, progreso
   ============================================================ */
.D_Scanlines {
       position:     fixed;
       inset:        0;
       pointer-events: none;
       z-index:      40;
       background:   repeating-linear-gradient(
                       to bottom,
                       rgba(0,0,0,0)    0px,
                       rgba(0,0,0,0)    2px,
                       rgba(0,0,0,0.16) 3px,
                       rgba(0,0,0,0.16) 3px
                     );
       opacity:      0.5;
       mix-blend-mode: multiply;
       transition:   opacity var(--t-slow);
}

body[data-fase="calida"] .D_Scanlines {
       opacity:      0.12;
}

.D_Vignette {
       position:     fixed;
       inset:        0;
       pointer-events: none;
       z-index:      39;
       background:   radial-gradient(ellipse at center,
                       transparent 55%,
                       rgba(0,0,0,0.55) 100%);
}

.D_FlashNegro {
       position:     fixed;
       inset:        0;
       background:   #000;
       z-index:      90;
       opacity:      0;
       pointer-events: none;
       transition:   opacity 0.18s ease;
}

.D_FlashNegro.is-on {
       opacity:      1;
}

.D_ProgressShell {
       position:     fixed;
       top:          0;
       left:         0;
       width:        100%;
       height:       3px;
       background:   rgba(255,255,255,0.05);
       z-index:      50;
}

.D_ProgressBar {
       width:        0%;
       height:       100%;
       background:   var(--verde1);
       box-shadow:   var(--verde-glow);
       transition:   width var(--t-slow);
}

.D_ProgressLabel {
       position:     fixed;
       top:          9px;
       left:         var(--px-section);
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.12em;
       color:        var(--verde-texto);
       z-index:      50;
       pointer-events: none;
       opacity:      0.8;
}

body[data-fase="calida"] .D_ProgressBar { background: var(--calido-acento); box-shadow: var(--calido-glow); }
body[data-fase="calida"] .D_ProgressLabel { color: var(--calido-acento); }

/* ============================================================
   4. CONTROLES FLOTANTES — sonido / reiniciar
   ============================================================ */
.Btn_Sonido,
.Btn_Reiniciar {
       position:     fixed;
       top:          calc(env(safe-area-inset-top, 0px) + 14px);
       display:      inline-flex;
       align-items:  center;
       gap:          0.4rem;
       padding:      0.4rem 0.7rem;
       background:   rgba(10,13,10,0.75);
       color:        var(--gris2);
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.1em;
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-full);
       backdrop-filter: blur(6px);
       z-index:      55;
       transition:   color var(--t-fast), border-color var(--t-fast);
}

.Btn_Sonido { right: var(--px-section); }
.Btn_Reiniciar {
       right:        var(--px-section);
       top:          calc(env(safe-area-inset-top, 0px) + 56px);
       opacity:      0;
       pointer-events: none;
       transition:   opacity var(--t-mid), color var(--t-fast);
}

.Btn_Reiniciar.is-visible {
       opacity:      0.7;
       pointer-events: auto;
}

.Btn_Sonido:hover,
.Btn_Reiniciar:hover {
       color:        var(--verde-texto);
       border-color: var(--verde-borde);
}

.Btn_Sonido[aria-pressed="true"] {
       color:        var(--verde-texto);
       border-color: var(--verde-borde);
}

.Span_SonidoIcono { font-size: 0.9em; }

/* ============================================================
   5. SISTEMA DE PANTALLAS
   ============================================================ */
.Main_App {
       position:     relative;
       width:        100%;
       max-width:    var(--max-width);
       margin:       0 auto;
       padding:      calc(env(safe-area-inset-top, 0px) + 90px) var(--px-section) calc(env(safe-area-inset-bottom, 0px) + 80px);
       min-height:   100vh;
       min-height:   100dvh;
}

.S_Pantalla {
       display:      none;
       animation:    fadeInScreen 0.6s ease;
}

.S_Pantalla.is-active {
       display:      block;
}

/* ============================================================
   6. PANTALLA 1 — ACCESO / TERMINAL
   ============================================================ */
.S_Acceso {
       min-height:   70vh;
       display:      none;
}

.S_Acceso.is-active {
       display:      flex;
       flex-direction: column;
       justify-content: center;
}

.D_AccesoInner {
       width:        100%;
}

.D_Terminal {
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       line-height:  1.9;
       color:        var(--verde-texto);
       min-height:   40vh;
       white-space:  pre-wrap;
       text-shadow:  0 0 8px rgba(23,140,60,0.35);
}

.D_Terminal .ln {
       display:      block;
}

.D_Terminal .cursor {
       display:      inline-block;
       width:        0.55em;
       height:       1.05em;
       background:   var(--verde3);
       vertical-align: -0.18em;
       margin-left:  2px;
       animation:    blink 1s steps(1) infinite;
}

.D_AccesoAdvertencia {
       margin-top:   var(--gap-lg);
       padding:      var(--gap-lg);
       background:   var(--fondo2);
       border:       1px solid var(--verde-borde);
       border-radius: var(--radius-md);
       animation:    fadeInScreen 0.6s ease;
       position:     relative;
}

.Span_SelloConfidencial,
.D_Sello {
       display:      inline-block;
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.22em;
       color:        var(--rojo2);
       border:       2px solid var(--rojo-borde);
       padding:      0.25rem 0.7rem;
       border-radius: var(--radius-sm);
       transform:    rotate(-3deg);
       opacity:      0.85;
}

.H1_Acceso {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xl);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.15em;
       color:        var(--blanco);
       margin:       var(--gap-md) 0;
}

.P_AccesoAviso {
       font-size:    var(--fs-sm);
       color:        var(--blanco-op1);
       margin-bottom: var(--gap-sm);
}

.P_AccesoAviso--tenue {
       color:        var(--blanco-op2);
       font-style:   italic;
}

.P_AccesoUrgente {
       margin:       var(--gap-md) 0;
       padding-left: var(--gap-sm);
       border-left:  3px solid var(--rojo2);
       color:        var(--verde-texto);
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
}

/* ============================================================
   7. CHECKBOX PERSONALIZADO
   ============================================================ */
.F_Check {
       display:      flex;
       align-items:  flex-start;
       gap:          0.6rem;
       margin:       var(--gap-md) 0;
       cursor:       pointer;
       font-size:    var(--fs-sm);
       color:        var(--blanco-op1);
}

.Input_Check {
       position:     absolute;
       opacity:      0;
       width:        0;
       height:       0;
}

.Span_CheckBox {
       flex-shrink:  0;
       width:        1.3rem;
       height:       1.3rem;
       margin-top:   0.1rem;
       border:       1.5px solid var(--verde-borde);
       border-radius: var(--radius-sm);
       background:   var(--fondo1);
       position:     relative;
       transition:   border-color var(--t-fast), background var(--t-fast);
}

.Input_Check:checked + .Span_CheckBox {
       background:   var(--verde1);
       border-color: var(--verde1);
}

.Input_Check:checked + .Span_CheckBox::after {
       content:      '✓';
       position:     absolute;
       inset:        0;
       display:      flex;
       align-items:  center;
       justify-content: center;
       color:        #fff;
       font-size:    0.85rem;
       font-weight:  var(--fw-bold);
}

.Input_Check:focus-visible + .Span_CheckBox {
       outline:      2px solid var(--verde3);
       outline-offset: 2px;
}

/* ============================================================
   8. BOTONES
   ============================================================ */
.Btn_Primario {
       display:      inline-flex;
       flex-direction: column;
       align-items:  center;
       gap:          0.2rem;
       width:        100%;
       margin-top:   var(--gap-md);
       padding:      0.95rem 1.5rem;
       background:   var(--verde1);
       color:        #fff;
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.12em;
       border:       none;
       border-radius: var(--radius-md);
       transition:   background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}

.Btn_Primario:hover:not(:disabled) {
       background:   var(--verde2);
       transform:    translateY(-2px);
       box-shadow:   var(--shadow-verde);
}

.Btn_Primario:active:not(:disabled) {
       transform:    translateY(0);
}

.Btn_Primario:disabled {
       opacity:      0.35;
       cursor:       not-allowed;
}

.Btn_Primario--full { margin-top: var(--gap-lg); }

.Span_LockHint {
       font-family:  var(--font-body);
       font-size:    var(--fs-2xs);
       font-weight:  var(--fw-regular);
       letter-spacing: 0.04em;
       opacity:      0.8;
       text-transform: none;
}

.Btn_Primario:not(.is-locked) .Span_LockHint { display: none; }

.Btn_Secundario {
       display:      inline-block;
       margin-top:   var(--gap-lg);
       padding:      0.7rem 1.3rem;
       background:   transparent;
       color:        var(--gris2);
       font-family:  var(--font-mono);
       font-size:    var(--fs-xs);
       letter-spacing: 0.1em;
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-full);
       transition:   color var(--t-fast), border-color var(--t-fast);
}

.Btn_Secundario:hover {
       color:        var(--calido-acento);
       border-color: var(--calido-acento);
}

/* fase cálida recolorea botones */
body[data-fase="calida"] .Btn_Primario {
       background:   var(--calido-acento);
       color:        #1A1410;
}

body[data-fase="calida"] .Btn_Primario:hover:not(:disabled) {
       background:   #d8b25c;
       box-shadow:   var(--calido-glow);
}

/* ============================================================
   9. HOJAS / DOCUMENTOS FORENSES
   ============================================================ */
.D_Hoja,
.D_PerfilInner,
.D_ReconInner,
.D_InterroInner,
.D_VeredictoDoc,
.D_DeclInner,
.D_CapInner {
       background:   var(--fondo2);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-md);
       padding:      var(--gap-lg);
       box-shadow:   var(--shadow-md);
       position:     relative;
}

.D_Hoja::before {
       content:      '';
       position:     absolute;
       inset:        0;
       border-radius: var(--radius-md);
       background:   repeating-linear-gradient(
                       45deg,
                       transparent, transparent 12px,
                       rgba(255,255,255,0.012) 12px, rgba(255,255,255,0.012) 24px
                     );
       pointer-events: none;
}

.D_HojaHeader {
       display:      flex;
       justify-content: space-between;
       align-items:  center;
       margin-bottom: var(--gap-md);
       padding-bottom: var(--gap-sm);
       border-bottom: 1px dashed var(--gris-borde);
}

.Span_HojaCodigo {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.14em;
       color:        var(--gris1);
}

.Span_Sello {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.12em;
       padding:      0.2rem 0.5rem;
       border:       1.5px solid;
       border-radius: var(--radius-sm);
}

.Span_Sello--rojo { color: var(--rojo2); border-color: var(--rojo-borde); transform: rotate(-2deg); }

.H2_Hoja {
       font-family:  var(--font-mono);
       font-size:    var(--fs-xl);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.08em;
       color:        var(--blanco);
       margin-bottom: var(--gap-md);
       line-height:  1.2;
}

.H2_Hoja--center { text-align: center; }

.H3_Sub {
       font-family:  var(--font-mono);
       font-size:    var(--fs-md);
       font-weight:  var(--fw-semibold);
       letter-spacing: 0.06em;
       color:        var(--verde-texto);
       margin:       var(--gap-md) 0 var(--gap-sm);
}

.H3_Sub--center { text-align: center; }

.P_Forense {
       font-size:    var(--fs-base);
       color:        var(--blanco-op1);
       margin-bottom: var(--gap-sm);
}

.P_Forense--center { text-align: center; }
.P_Forense--directo { color: var(--blanco); font-weight: var(--fw-medium); }

.P_Forense strong { color: var(--verde-texto); font-weight: var(--fw-bold); }

.Ul_Forense {
       list-style:   none;
       margin:       var(--gap-sm) 0 var(--gap-md);
}

.Li_Forense {
       position:     relative;
       padding-left: 1.3rem;
       margin-bottom: 0.5rem;
       font-size:    var(--fs-sm);
       color:        var(--blanco-op1);
}

.Li_Forense::before {
       content:      '▸';
       position:     absolute;
       left:         0;
       color:        var(--verde1);
}

.Q_Testimonio {
       margin:       var(--gap-md) 0 0.3rem;
       padding:      var(--gap-sm) var(--gap-md);
       border-left:  3px solid var(--verde1);
       background:   var(--verde-tenue);
       font-style:   italic;
       font-size:    var(--fs-md);
       color:        var(--blanco);
}

.P_TestigoMeta {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       color:        var(--gris1);
       margin-bottom: var(--gap-md);
}

.P_NotaForense {
       margin-top:   var(--gap-md);
       padding:      var(--gap-sm);
       background:   var(--rojo-tenue);
       border:       1px dashed var(--rojo-borde);
       border-radius: var(--radius-sm);
       font-size:    var(--fs-sm);
       color:        var(--blanco-op1);
}

.P_Manuscrita {
       margin:       var(--gap-md) 0;
       padding:      var(--gap-md);
       font-family:  var(--font-display);
       font-style:   italic;
       font-size:    var(--fs-md);
       color:        var(--blanco-env);
       border-top:   1px dashed var(--gris-borde);
       border-bottom: 1px dashed var(--gris-borde);
       transform:    rotate(-0.4deg);
}

.Span_Dato {
       color:        var(--verde-texto);
       font-weight:  var(--fw-semibold);
}

/* ============================================================
   10. PERFIL — foto censurada
   ============================================================ */
.D_PerfilFoto {
       position:     relative;
       width:        100%;
       aspect-ratio: 4 / 3;
       margin-bottom: var(--gap-md);
       border-radius: var(--radius-sm);
       overflow:     hidden;
       background:   #000;
}

.Img_Censurada {
       width:        100%;
       height:       100%;
       object-fit:   cover;
       filter:       grayscale(1) blur(9px) contrast(1.1) brightness(0.65);
}

.Img_Censurada.is-missing {
       /* placeholder cuando no hay foto */
       filter:       none;
       background:   repeating-linear-gradient(45deg, #111 0 20px, #181818 20px 40px);
}

.D_CensuraBarra {
       position:     absolute;
       top:          42%;
       left:         -5%;
       width:        110%;
       padding:      0.4rem 0;
       background:   #000;
       color:        var(--rojo2);
       font-family:  var(--font-mono);
       font-size:    var(--fs-xs);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.3em;
       text-align:   center;
       transform:    rotate(-4deg);
}

.Dl_Ficha {
       margin:       var(--gap-sm) 0;
       border-top:   1px solid var(--gris-borde);
}

.D_FichaFila {
       display:      flex;
       justify-content: space-between;
       gap:          var(--gap-sm);
       padding:      0.5rem 0;
       border-bottom: 1px solid var(--gris-borde);
       font-size:    var(--fs-sm);
}

.D_FichaFila dt { color: var(--gris1); font-family: var(--font-mono); letter-spacing: 0.05em; }
.D_FichaFila dd { color: var(--blanco-op1); text-align: right; }

/* ============================================================
   11. TABLERO DE EVIDENCIAS
   ============================================================ */
.H2_Tablero {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xl);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.06em;
       color:        var(--blanco);
       text-align:   center;
}

.P_TableroAyuda {
       text-align:   center;
       font-size:    var(--fs-sm);
       color:        var(--blanco-op2);
       margin:       var(--gap-sm) 0 var(--gap-lg);
}

.D_EvidenciasGrid {
       display:      grid;
       grid-template-columns: 1fr 1fr;
       gap:          var(--gap-sm);
}

.D_EvidenciaCard {
       position:     relative;
       display:      flex;
       flex-direction: column;
       gap:          0.3rem;
       padding:      var(--gap-md) var(--gap-sm);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-md);
       text-align:   left;
       color:        var(--blanco-op1);
       min-height:   110px;
       transition:   border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
       overflow:     hidden;
}

.D_EvidenciaCard .Span_EvNum {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.1em;
       color:        var(--verde-texto);
}

.D_EvidenciaCard .Span_EvTitulo {
       font-family:  var(--font-mono);
       font-size:    var(--fs-xs);
       font-weight:  var(--fw-semibold);
       letter-spacing: 0.04em;
       color:        var(--blanco);
       line-height:  1.3;
}

.D_EvidenciaCard .Span_EvEstado {
       margin-top:   auto;
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.08em;
}

/* estados de la tarjeta */
.D_EvidenciaCard.is-locked {
       cursor:       not-allowed;
       opacity:      0.5;
}

.D_EvidenciaCard.is-locked .Span_EvTitulo,
.D_EvidenciaCard.is-locked .Span_EvNum { color: var(--gris1); }

.D_EvidenciaCard.is-locked .Span_EvEstado { color: var(--gris1); }
.D_EvidenciaCard.is-locked .Span_EvEstado::before { content: '🔒 '; }

.D_EvidenciaCard.is-open {
       cursor:       pointer;
       border-color: var(--verde-borde);
}

.D_EvidenciaCard.is-open:hover {
       transform:    translateY(-3px);
       box-shadow:   var(--shadow-verde);
}

.D_EvidenciaCard.is-open .Span_EvEstado { color: var(--verde-texto); }
.D_EvidenciaCard.is-open .Span_EvEstado::before { content: '▸ '; }

.D_EvidenciaCard.is-done {
       cursor:       pointer;
       border-color: rgba(255,255,255,0.05);
       opacity:      0.78;
}

.D_EvidenciaCard.is-done .Span_EvEstado { color: var(--gris1); }
.D_EvidenciaCard.is-done .Span_EvEstado::before { content: '✓ '; color: var(--verde1); }

/* ============================================================
   12. MODAL DE EVIDENCIA
   ============================================================ */
.D_EvModal {
       position:     fixed;
       inset:        0;
       z-index:      80;
       display:      flex;
       align-items:  flex-start;
       justify-content: center;
       padding:      calc(env(safe-area-inset-top, 0px) + 24px) var(--px-section) 40px;
       background:   rgba(0,0,0,0.85);
       backdrop-filter: blur(4px);
       overflow-y:   auto;
       opacity:      0;
       pointer-events: none;
       transition:   opacity var(--t-mid);
}

.D_EvModal.is-open {
       opacity:      1;
       pointer-events: auto;
}

.D_EvModalInner {
       width:        100%;
       max-width:    var(--max-width);
       background:   var(--fondo2);
       border:       1px solid var(--verde-borde);
       border-radius: var(--radius-md);
       padding:      var(--gap-lg);
       box-shadow:   var(--shadow-lg);
       transform:    translateY(24px) scale(0.98);
       transition:   transform var(--t-slow);
}

.D_EvModal.is-open .D_EvModalInner { transform: translateY(0) scale(1); }

.D_EvModalHead {
       display:      flex;
       justify-content: space-between;
       align-items:  flex-start;
       gap:          var(--gap-sm);
       margin-bottom: var(--gap-md);
}

.Btn_CerrarModal {
       flex-shrink:  0;
       width:        2.1rem;
       height:       2.1rem;
       background:   transparent;
       color:        var(--gris2);
       font-size:    1.3rem;
       line-height:  1;
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-full);
       transition:   color var(--t-fast), border-color var(--t-fast);
}

.Btn_CerrarModal:hover { color: var(--rojo2); border-color: var(--rojo-borde); }

.Img_Evidencia {
       width:        100%;
       max-height:   46vh;
       object-fit:   cover;
       border-radius: var(--radius-sm);
       margin:       var(--gap-sm) 0 var(--gap-md);
       filter:       grayscale(0.5) contrast(1.05);
       border:       1px solid var(--gris-borde);
}

.Img_Evidencia.is-missing {
       aspect-ratio: 16 / 10;
       background:   repeating-linear-gradient(45deg, #0c0c0c 0 18px, #141414 18px 36px);
       display:      flex;
       align-items:  center;
       justify-content: center;
}

.D_EvConclusion {
       margin-top:   var(--gap-md);
       padding:      var(--gap-sm) var(--gap-md);
       background:   var(--verde-tenue);
       border-left:  3px solid var(--verde1);
       border-radius: var(--radius-sm);
       font-size:    var(--fs-sm);
}

.D_EvConclusion strong { color: var(--verde-texto); }

.D_EvChat {
       margin:       var(--gap-sm) 0;
       display:      flex;
       flex-direction: column;
       gap:          0.4rem;
}

.D_ChatBurbuja {
       max-width:    85%;
       padding:      0.5rem 0.8rem;
       background:   var(--fondo3);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-md);
       font-size:    var(--fs-sm);
       color:        var(--blanco-op1);
}

.D_ChatBurbuja--cens { color: var(--gris1); letter-spacing: 0.1em; }

.D_LogTiempo {
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       line-height:  2;
       color:        var(--gris2);
       margin:       var(--gap-sm) 0;
       padding:      var(--gap-sm);
       background:   var(--fondo1);
       border-radius: var(--radius-sm);
       border:       1px solid var(--gris-borde);
}

.D_LogTiempo .hora { color: var(--verde-texto); }

.D_Comparativa {
       display:      grid;
       grid-template-columns: 1fr 1fr;
       gap:          var(--gap-sm);
       margin:       var(--gap-sm) 0;
}

.D_ComparCol {
       padding:      var(--gap-sm);
       background:   var(--fondo1);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-sm);
}

.D_ComparCol h4 {
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.1em;
       margin-bottom: 0.5rem;
       color:        var(--verde-texto);
}

.D_ComparCol--antes h4 { color: var(--gris1); }

.D_ComparCol ul { list-style: none; }
.D_ComparCol li { font-size: var(--fs-xs); padding: 0.25rem 0; border-bottom: 1px solid var(--gris-borde); }
.D_ComparCol li:last-child { border-bottom: none; }

.Btn_AccionEv {
       width:        100%;
       margin-top:   var(--gap-md);
       padding:      0.7rem 1rem;
       background:   transparent;
       color:        var(--rojo2);
       font-family:  var(--font-mono);
       font-size:    var(--fs-xs);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.1em;
       border:       1.5px solid var(--rojo-borde);
       border-radius: var(--radius-md);
       transition:   background var(--t-fast), color var(--t-fast);
}

.Btn_AccionEv:hover { background: var(--rojo-tenue); }

.Btn_AccionEv.is-done {
       color:        var(--verde-texto);
       border-color: var(--verde-borde);
       cursor:       default;
}

.D_SelloAccion {
       margin-top:   var(--gap-sm);
       text-align:   center;
       font-family:  var(--font-mono);
       font-size:    var(--fs-md);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.18em;
       color:        var(--rojo2);
       border:       3px solid var(--rojo-borde);
       border-radius: var(--radius-sm);
       padding:      0.4rem;
       transform:    rotate(-3deg) scale(0);
       opacity:      0;
       transition:   transform 0.4s cubic-bezier(.2,1.4,.4,1), opacity 0.3s;
}

.D_SelloAccion.is-on {
       transform:    rotate(-3deg) scale(1);
       opacity:      0.9;
}

.D_EvManuscrita {
       margin-top:   var(--gap-md);
       font-family:  var(--font-display);
       font-style:   italic;
       font-size:    var(--fs-md);
       color:        var(--blanco-env);
       text-align:   center;
       opacity:      0.9;
}

/* botón continuar dentro del modal */
.Btn_EvContinuar {
       width:        100%;
       margin-top:   var(--gap-md);
       padding:      0.85rem;
       background:   var(--verde1);
       color:        #fff;
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.1em;
       border:       none;
       border-radius: var(--radius-md);
       transition:   background var(--t-fast);
}

.Btn_EvContinuar:hover { background: var(--verde2); }

/* ============================================================
   13. RECONSTRUCCIÓN / SILUETA
   ============================================================ */
.D_SiluetaWrap {
       display:      flex;
       justify-content: center;
       margin:       var(--gap-md) 0;
}

.D_Silueta {
       position:     relative;
       width:        min(220px, 60vw);
       aspect-ratio: 3 / 4;
       border-radius: var(--radius-md);
       overflow:     hidden;
       background:   var(--fondo1);
       border:       1px solid var(--verde-borde);
}

.Img_Silueta {
       width:        100%;
       height:       100%;
       object-fit:   cover;
       filter:       grayscale(1) blur(14px) brightness(0.55) contrast(1.2);
}

.Img_Silueta.is-missing { display: none; }

.D_SiluetaFragmentos {
       position:     absolute;
       inset:        0;
       background:
         linear-gradient(115deg, transparent 40%, rgba(23,140,60,0.10) 50%, transparent 60%),
         repeating-linear-gradient(0deg, transparent 0 14px, rgba(0,0,0,0.25) 14px 15px);
       mix-blend-mode: screen;
}

.D_SiluetaQuestion {
       position:     absolute;
       inset:        0;
       display:      flex;
       align-items:  center;
       justify-content: center;
       font-family:  var(--font-display);
       font-size:    4rem;
       color:        var(--verde-texto);
       opacity:      0.5;
       text-shadow:  var(--verde-glow);
}

.D_Silueta.is-confirmed .Img_Silueta { filter: grayscale(0.2) blur(0) brightness(1) contrast(1); }
.D_Silueta.is-confirmed .D_SiluetaQuestion,
.D_Silueta.is-confirmed .D_SiluetaFragmentos { opacity: 0; }

/* opciones */
.D_Opciones {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-sm);
       margin:       var(--gap-md) 0;
}

.D_Opciones--row { flex-direction: row; flex-wrap: wrap; }
.D_Opciones--row .Btn_Opcion { flex: 1; min-width: 140px; }

.Btn_Opcion {
       padding:      0.85rem 1rem;
       background:   var(--fondo-card);
       color:        var(--blanco-op1);
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       letter-spacing: 0.04em;
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-md);
       text-align:   center;
       transition:   border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}

.Btn_Opcion:hover:not(:disabled) {
       border-color: var(--verde-borde);
       transform:    translateY(-2px);
}

.Btn_Opcion--accent {
       background:   var(--verde-tenue);
       border-color: var(--verde-borde);
       color:        var(--verde-texto);
}

.Btn_Opcion.is-wrong {
       border-color: var(--rojo-borde);
       color:        var(--rojo2);
       animation:    shake 0.4s ease;
}

.Btn_Opcion:disabled { opacity: 0.4; cursor: not-allowed; }

.P_OpcionFeedback {
       text-align:   center;
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       min-height:   1.4em;
       margin-top:   var(--gap-xs);
}

.P_OpcionFeedback.is-wrong { color: var(--rojo2); }
.P_OpcionFeedback.is-right { color: var(--verde-texto); }

/* match block */
.D_MatchBlock {
       margin-top:   var(--gap-lg);
       padding:      var(--gap-lg);
       background:   var(--fondo1);
       border:       1px solid var(--verde-borde);
       border-radius: var(--radius-md);
       text-align:   center;
       position:     relative;
       overflow:     hidden;
       animation:    fadeInScreen 0.6s ease;
}

.D_ScanLine {
       position:     absolute;
       left:         0;
       top:          0;
       width:        100%;
       height:       2px;
       background:   var(--verde3);
       box-shadow:   var(--verde-glow);
       animation:    scanDown 2.2s ease-in-out infinite;
}

.P_Match {
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       letter-spacing: 0.14em;
       color:        var(--verde-texto);
}

.P_Match--strong { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-bottom: var(--gap-sm); }

.H2_Nombre {
       font-family:  var(--font-display);
       font-size:    var(--fs-3xl);
       font-weight:  var(--fw-bold);
       color:        var(--blanco);
       letter-spacing: 0.02em;
       margin:       var(--gap-sm) 0;
       text-shadow:  var(--verde-glow);
}

.Img_Ella {
       width:        min(200px, 55vw);
       aspect-ratio: 1;
       object-fit:   cover;
       border-radius: var(--radius-md);
       margin:       var(--gap-sm) auto;
       border:       2px solid var(--verde-borde);
}

/* ============================================================
   14. INTERROGATORIO
   ============================================================ */
.Ul_Cargos {
       list-style:   none;
       margin:       var(--gap-sm) 0 var(--gap-md);
}

.Ul_Cargos li {
       position:     relative;
       padding-left: 1.3rem;
       margin-bottom: 0.5rem;
       font-size:    var(--fs-sm);
       color:        var(--blanco-op1);
}

.Ul_Cargos li::before {
       content:      '✕';
       position:     absolute;
       left:         0;
       color:        var(--rojo2);
}

/* ============================================================
   15. REVELACIÓN FINAL (fase cálida)
   ============================================================ */
.D_RevInner { text-align: center; }

.D_RevHeader { margin-bottom: var(--gap-lg); }

.D_RevTexto {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-md);
       min-height:   30vh;
}

.D_RevTexto p {
       font-family:  var(--font-display);
       font-size:    var(--fs-md);
       line-height:  1.7;
       color:        var(--calido-texto);
       opacity:      0;
       transform:    translateY(14px);
       transition:   opacity 0.8s ease, transform 0.8s ease;
}

.D_RevTexto p.is-shown { opacity: 1; transform: translateY(0); }

.D_RevTexto p.P_RevClimax {
       font-size:    var(--fs-lg);
       font-weight:  var(--fw-bold);
       color:        var(--calido-acento);
       margin:       var(--gap-sm) 0;
}

body[data-fase="calida"] .H2_Hoja { color: var(--calido-texto); }
body[data-fase="calida"] .Span_HojaCodigo { color: var(--calido-acento); }

/* ============================================================
   16. VEREDICTO
   ============================================================ */
.D_VeredictoDoc { text-align: center; }

.D_SelloOficial {
       display:      inline-block;
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.2em;
       color:        var(--calido-acento);
       border:       2px solid var(--calido-acento);
       border-radius: var(--radius-full);
       padding:      0.3rem 0.9rem;
       margin-bottom: var(--gap-md);
}

.P_NombreVeredicto {
       font-family:  var(--font-display);
       font-size:    var(--fs-2xl);
       font-weight:  var(--fw-bold);
       color:        var(--calido-texto);
       margin:       var(--gap-sm) 0;
}

.Ol_Cargos {
       list-style:   none;
       counter-reset: cargo;
       margin:       var(--gap-md) 0;
       text-align:   left;
}

.Ol_Cargos li {
       counter-increment: cargo;
       position:     relative;
       padding:      0.6rem 0.6rem 0.6rem 2.4rem;
       margin-bottom: 0.4rem;
       background:   var(--calido2);
       border:       1px solid rgba(201,162,75,0.18);
       border-radius: var(--radius-sm);
       font-size:    var(--fs-sm);
       color:        var(--calido-texto);
       opacity:      0;
       transform:    translateX(-12px);
       transition:   opacity 0.5s ease, transform 0.5s ease;
}

.Ol_Cargos li.is-shown { opacity: 1; transform: translateX(0); }

.Ol_Cargos li::before {
       content:      counter(cargo, decimal-leading-zero);
       position:     absolute;
       left:         0.7rem;
       top:          0.6rem;
       font-family:  var(--font-mono);
       font-size:    var(--fs-xs);
       color:        var(--calido-acento);
}

.P_RevNota { margin-top: var(--gap-md); font-style: italic; color: var(--calido-texto); }

.D_Sentencia {
       margin-top:   var(--gap-lg);
       padding-top:  var(--gap-md);
       border-top:   1px dashed rgba(201,162,75,0.3);
}

/* ============================================================
   17. DECLARACIÓN (audio + QR)
   ============================================================ */
.D_DeclInner { text-align: center; }

.D_QRWrap {
       position:     relative;
       width:        min(180px, 48vw);
       aspect-ratio: 1;
       margin:       var(--gap-md) auto;
       padding:      10px;
       background:   #fff;
       border-radius: var(--radius-sm);
       display:      flex;
       align-items:  center;
       justify-content: center;
}

.Img_QR { width: 100%; height: 100%; object-fit: contain; }

.Span_QRFallback {
       display:      none;
       font-family:  var(--font-mono);
       font-size:    var(--fs-xs);
       color:        #333;
}

.D_QRWrap.is-missing { background: var(--fondo3); border: 1px dashed var(--gris-borde); }
.D_QRWrap.is-missing .Img_QR { display: none; }
.D_QRWrap.is-missing .Span_QRFallback { display: block; color: var(--gris2); }

.D_AudioPlayer {
       margin:       var(--gap-md) 0;
}

.Btn_Audio {
       display:      inline-flex;
       align-items:  center;
       gap:          0.6rem;
       padding:      0.85rem 1.6rem;
       background:   var(--calido-acento);
       color:        #1A1410;
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.08em;
       border:       none;
       border-radius: var(--radius-full);
       transition:   transform var(--t-fast), box-shadow var(--t-fast);
}

.Btn_Audio:hover { transform: translateY(-2px); box-shadow: var(--calido-glow); }

.D_AudioBarra {
       width:        100%;
       max-width:    320px;
       height:       4px;
       margin:       var(--gap-sm) auto 0;
       background:   rgba(255,255,255,0.08);
       border-radius: var(--radius-full);
       overflow:     hidden;
}

.D_AudioProgreso {
       width:        0%;
       height:       100%;
       background:   var(--calido-acento);
}

.P_AudioNota {
       font-size:    var(--fs-xs);
       color:        var(--blanco-op2);
       margin-top:   var(--gap-sm);
}

.D_GuionDetails {
       margin:       var(--gap-md) 0;
       text-align:   left;
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-md);
       background:   var(--calido2);
}

.Sum_Guion {
       padding:      0.8rem var(--gap-md);
       cursor:       pointer;
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       color:        var(--calido-acento);
       list-style:   none;
}

.Sum_Guion::-webkit-details-marker { display: none; }
.Sum_Guion::before { content: '▸ '; }
details[open] .Sum_Guion::before { content: '▾ '; }

.D_GuionTexto {
       padding:      0 var(--gap-md) var(--gap-md);
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-sm);
}

.D_GuionTexto p {
       font-family:  var(--font-display);
       font-size:    var(--fs-sm);
       line-height:  1.7;
       color:        var(--calido-texto);
}

/* ============================================================
   18. CÁPSULA DEL TIEMPO
   ============================================================ */
.D_CapInner { text-align: center; }

.Ol_Preguntas,
.Ul_Guardar {
       text-align:   left;
       margin:       var(--gap-md) 0;
       padding-left: 1.4rem;
}

.Ol_Preguntas li,
.Ul_Guardar li {
       margin-bottom: 0.5rem;
       font-size:    var(--fs-sm);
       color:        var(--calido-texto);
}

.Ol_Preguntas li::marker { color: var(--calido-acento); font-family: var(--font-mono); }
.Ul_Guardar { list-style: none; padding-left: 0; }
.Ul_Guardar li { padding-left: 1.3rem; position: relative; }
.Ul_Guardar li::before { content: '◆'; position: absolute; left: 0; color: var(--calido-acento); font-size: 0.7em; top: 0.3em; }

.D_FechasCapsula {
       display:      flex;
       flex-wrap:    wrap;
       gap:          var(--gap-sm);
       margin:       var(--gap-lg) 0;
}

.D_FechaItem {
       flex:         1;
       min-width:    140px;
       padding:      var(--gap-md);
       background:   var(--calido2);
       border:       1px solid rgba(201,162,75,0.2);
       border-radius: var(--radius-md);
}

.Span_FechaLabel {
       display:      block;
       font-family:  var(--font-mono);
       font-size:    var(--fs-2xs);
       letter-spacing: 0.1em;
       color:        var(--calido-acento);
       margin-bottom: 0.3rem;
}

.Span_FechaValor {
       font-family:  var(--font-display);
       font-size:    var(--fs-md);
       color:        var(--calido-texto);
}

/* ============================================================
   19. CIERRE FINAL
   ============================================================ */
.S_Cierre { text-align: center; }

.D_CierreInner {
       display:      flex;
       flex-direction: column;
       align-items:  center;
       padding:      var(--gap-lg) 0;
}

.D_SelloFinal {
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-bold);
       letter-spacing: 0.2em;
       color:        var(--calido-acento);
       border:       3px solid var(--calido-acento);
       border-radius: var(--radius-sm);
       padding:      0.5rem 1.2rem;
       transform:    rotate(-4deg) scale(0);
       opacity:      0;
       transition:   transform 0.6s cubic-bezier(.2,1.5,.4,1), opacity 0.4s;
       margin-bottom: var(--gap-lg);
}

.D_SelloFinal.is-on { transform: rotate(-4deg) scale(1); opacity: 0.95; }

.D_EstadoExpediente {
       font-family:  var(--font-mono);
       font-size:    var(--fs-sm);
       letter-spacing: 0.1em;
       margin-bottom: var(--gap-lg);
}

.Span_EstadoLabel { color: var(--gris2); }
.Span_EstadoValor { color: var(--calido-acento); font-weight: var(--fw-bold); }
.Span_EstadoValor.is-changing { animation: glitchText 0.5s ease; }

.D_CierreTexto p {
       font-family:  var(--font-display);
       font-size:    var(--fs-md);
       line-height:  1.8;
       color:        var(--calido-texto);
       margin-bottom: var(--gap-sm);
}

.P_CierreEnfasis { color: var(--calido-acento); font-weight: var(--fw-semibold); }
.P_CierreCustodia { font-style: italic; margin-top: var(--gap-md); }

.P_Firma {
       font-family:  var(--font-display);
       font-size:    var(--fs-lg);
       font-style:   italic;
       color:        var(--calido-texto);
       margin:       var(--gap-lg) 0 var(--gap-md);
}

.P_DedicatoriaFinal {
       font-size:    var(--fs-xs);
       color:        var(--blanco-op2);
       line-height:  1.7;
       max-width:    420px;
}

.P_DedicatoriaFinal span { color: var(--calido-acento); }

/* ============================================================
   20. ANIMACIONES (@keyframes)
   ============================================================ */
@keyframes fadeInScreen {
       from { opacity: 0; transform: translateY(16px); }
       to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
       0%, 50%   { opacity: 1; }
       51%, 100% { opacity: 0; }
}

@keyframes scanDown {
       0%   { transform: translateY(0); }
       50%  { transform: translateY(120px); }
       100% { transform: translateY(0); }
}

@keyframes shake {
       0%, 100% { transform: translateX(0); }
       25% { transform: translateX(-6px); }
       75% { transform: translateX(6px); }
}

@keyframes glitchText {
       0%   { transform: translate(0); text-shadow: none; }
       20%  { transform: translate(-2px, 1px); text-shadow: 2px 0 var(--rojo2); }
       40%  { transform: translate(2px, -1px); text-shadow: -2px 0 var(--verde3); }
       60%  { transform: translate(-1px); }
       100% { transform: translate(0); text-shadow: none; }
}

/* clase utilitaria de interferencia (la dispara el JS) */
.is-glitch { animation: glitchText 0.35s ease; }

/* animaciones de entrada (sistema Eclipse) */
.anim-abajo { opacity: 0; transform: translateY(28px); }
.anim-visible {
       opacity:      1;
       transform:    translateY(0);
       transition:   opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================================
   21. MEDIA QUERIES
   ============================================================ */
@media only screen and (max-width: 480px) {
       .D_PerfilInner { padding: var(--gap-md); }
       .D_Comparativa { grid-template-columns: 1fr; }
       .D_Opciones--row { flex-direction: column; }
       .Btn_Reiniciar { top: calc(env(safe-area-inset-top, 0px) + 52px); }
}

@media only screen and (max-width: 400px) {
       .D_EvidenciasGrid { grid-template-columns: 1fr; }
       .D_FechasCapsula { flex-direction: column; }
}

@media only screen and (max-width: 360px) {
       :root { --px-section: 0.9rem; }
}

/* ============================================================
   22. ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
              animation-duration: 0.01ms !important;
              transition-duration: 0.01ms !important;
       }
       .anim-abajo { opacity: 1; transform: none; }
       .D_ScanLine { display: none; }
}

:focus-visible {
       outline:      2px solid var(--verde3);
       outline-offset: 2px;
}

/* ============================================================
   GATE DE INICIO — bloquea todo hasta el primer toque (activa audio)
   ============================================================ */
.D_GateInicio {
       position:     fixed;
       inset:        0;
       z-index:      9999;
       display:      flex;
       align-items:  center;
       justify-content: center;
       background:   var(--fondo1);
       text-align:   center;
       padding:      2rem;
       transition:   opacity 0.6s ease, visibility 0.6s ease;
}
.D_GateInicio.is-hidden {
       opacity:      0;
       visibility:   hidden;
       pointer-events: none;
}
.D_GateInner {
       display:      flex;
       flex-direction: column;
       align-items:  center;
       gap:          1.4rem;
       max-width:    520px;
}
.P_GateTexto {
       font-family:  var(--font-mono);
       letter-spacing: 0.42em;
       font-size:    1.05rem;
       color:        var(--verde-texto);
       margin:       0;
}
.Btn_Gate {
       font-family:  var(--font-mono);
       letter-spacing: 0.18em;
       font-size:    0.95rem;
       color:        var(--fondo1);
       background:   var(--verde3);
       border:       none;
       border-radius: 6px;
       padding:      1rem 1.8rem;
       cursor:       pointer;
       box-shadow:   var(--verde-glow);
       transition:   transform 0.15s ease, background 0.2s ease;
       animation:    gateLatido 2.4s ease-in-out infinite;
}
.Btn_Gate:hover  { background: var(--verde2); transform: translateY(-2px); }
.Btn_Gate:active { transform: translateY(0); }
.P_GateNota {
       font-family:  var(--font-mono);
       letter-spacing: 0.08em;
       font-size:    0.72rem;
       color:        var(--blanco-op2);
       margin:       0;
}
@keyframes gateLatido {
       0%, 100% { box-shadow: 0 0 18px rgba(31,176,78,0.25); }
       50%      { box-shadow: 0 0 34px rgba(31,176,78,0.55); }
}
@media (prefers-reduced-motion: reduce) {
       .Btn_Gate { animation: none; }
}