/* ════════════════════════════════════════════════════════════════════
   TerraPlaniq Ingeniería · Brand-mark
   Logotipo oficial — equivalente a "Propuesta 01" de logos.html
   - Wordmark: Lufga Black 900, color #388E3C
   - Subdescriptor: Lufga SemiBold 600, alineado a la derecha (l → q)
   - Stack ultra compacto

   Tres tamaños:  default (navbar) · .brand-mark--lg (footer/hero) · .brand-mark--sm (mini)
   Modificadores de color: .brand-mark--light (sobre fondos verdes/oscuros)
                           .brand-mark--mono  (todo negro · sellos)
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Lufga';font-weight:300;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-light.otf') format('opentype')}
@font-face{font-family:'Lufga';font-weight:400;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-regular.otf') format('opentype')}
@font-face{font-family:'Lufga';font-weight:500;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-medium.otf') format('opentype')}
@font-face{font-family:'Lufga';font-weight:600;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-semibold.otf') format('opentype')}
@font-face{font-family:'Lufga';font-weight:700;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-bold.otf') format('opentype')}
@font-face{font-family:'Lufga';font-weight:800;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-extrabold.otf') format('opentype')}
@font-face{font-family:'Lufga';font-weight:900;font-style:normal;font-display:swap;src:url('../fuente%202/Fontspring-DEMO-lufga-black.otf') format('opentype')}

/* ═════════ Contenedor ═════════ */
.brand-mark{
    position:relative;
    display:inline-flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0;
    text-decoration:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
}

/* ═════════ Tamaño por defecto · navbar (~150px) ═════════ */
.brand-mark .bm-word{
    font-family:'Lufga','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-weight:900;
    font-size:1.5rem;
    letter-spacing:-0.9px;
    line-height:0.95;
    color:#388E3C;
}
.brand-mark .bm-sub{
    font-family:'Lufga','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-weight:600;
    font-size:0.78rem;
    letter-spacing:-0.25px;
    line-height:1;
    margin-top:-0.02rem;
    color:#388E3C;
}

/* ═════════ Tamaño grande · footer / hero (~200px) ═════════ */
.brand-mark.brand-mark--lg .bm-word{ font-size:1.95rem; letter-spacing:-1.2px; }
.brand-mark.brand-mark--lg .bm-sub { font-size:0.98rem; letter-spacing:-0.3px; }

/* ═════════ Tamaño mínimo · mobile / favicon-style (~110px) ═════════ */
.brand-mark.brand-mark--sm .bm-word{ font-size:1.25rem; letter-spacing:-0.7px; }
.brand-mark.brand-mark--sm .bm-sub { font-size:0.64rem;  letter-spacing:-0.2px; margin-top:0; }

/* ═════════ Variantes de color ═════════ */
/* Sobre fondos verdes / oscuros — texto blanco */
.brand-mark.brand-mark--light .bm-word,
.brand-mark.brand-mark--light .bm-sub{ color:#FFFFFF; }

/* Monocromo — para sellos, EPP, bordados */
.brand-mark.brand-mark--mono .bm-word,
.brand-mark.brand-mark--mono .bm-sub{ color:#1A1A1A; }

/* ════════════════════════════════════════════════════════════════════
   "GEO PULSE + ABSORB" · Animación de entrada (Propuesta 04+)
   ────────────────────────────────────────────────────────────────────
   La línea NO es parte permanente del logo — es un recurso de entrada
   que se dibuja, se sostiene y luego se DESINTEGRA hacia arriba
   "siendo absorbida" por el wordmark, que responde con un sutil
   pulso-glow al recibirla.

   La animación se dispara solo cuando el contenedor tiene [data-anim]
   (lo aplica brand-mark.js una vez por sesión del navegador).

   Timeline (~2.7s):
     0.10s · word  → fade-in + scale 0.97→1                    (0.7s)
     0.65s · sub   → fade-in + scale 0.94→1                    (0.55s)
     1.05s · línea → draw izq→der vía clip-path                (0.7s)
     1.75s · línea → hold                                       (0.3s)
     2.05s · línea → lift + squash + blur + fade (desintegra)  (0.6s)
     2.05s · word  → absorb-pulse (scale + glow)               (0.6s)
     2.15s · sub   → absorb-pulse (scale + glow)               (0.5s)
     2.65s · FIN — logo limpio, sin línea, sin glow
   ════════════════════════════════════════════════════════════════════ */

/* Color del glow de absorción — variable por modificador */
.brand-mark{               --bm-glow: rgba( 56,142, 60, 0.45); }
.brand-mark--light{        --bm-glow: rgba(255,255,255, 0.55); }
.brand-mark--mono{         --bm-glow: rgba( 26, 26, 26, 0.45); }

/* Wordmark + sub: entrada (pulseIn) + recibo de la línea (absorb) */
.brand-mark[data-anim] .bm-word{
    opacity:0; transform:scale(0.97);
    animation: bmPulseIn 0.7s  cubic-bezier(0.2,0.8,0.3,1)  0.10s forwards,
               bmAbsorb  0.6s  cubic-bezier(0.4,0,0.2,1)    2.05s forwards;
}
.brand-mark[data-anim] .bm-sub{
    opacity:0; transform:scale(0.94);
    animation: bmPulseIn 0.55s cubic-bezier(0.2,0.8,0.3,1)  0.65s forwards,
               bmAbsorb  0.5s  cubic-bezier(0.4,0,0.2,1)    2.15s forwards;
}

/* Línea trazadora — SOLO existe durante la animación.
   Usa clip-path para dibujar (no contamina transform), y luego usa
   transform para alzarse, achatarse y desintegrarse hacia el wordmark. */
.brand-mark[data-anim]::after{
    content:''; position:absolute;
    left:0; right:0; bottom:-4px; height:2px;
    background:#388E3C; border-radius:2px;
    transform-origin:center;
    pointer-events:none;
    clip-path: inset(0 100% 0 0);
    animation: bmTrace 1.6s cubic-bezier(0.65,0,0.35,1) 1.05s forwards;
}
.brand-mark--light[data-anim]::after{ background:#FFFFFF; }
.brand-mark--mono[data-anim]::after { background:#1A1A1A; }
.brand-mark--lg[data-anim]::after   { height:3px;   bottom:-6px; }
.brand-mark--sm[data-anim]::after   { height:1.5px; bottom:-3px; border-radius:1.5px; }

@keyframes bmPulseIn{
    0%{   opacity:0; transform:scale(0.97); }
    100%{ opacity:1; transform:scale(1); }
}

/* Línea: dibuja → sostiene → se desintegra subiendo + difuminándose */
@keyframes bmTrace{
    0%   { clip-path: inset(0 100% 0 0); transform: translateY(0) scaleX(1) scaleY(1); opacity:1; filter: blur(0); }
    44%  { clip-path: inset(0 0 0 0);    transform: translateY(0) scaleX(1) scaleY(1); opacity:1; filter: blur(0); }     /* dibujada */
    62%  { clip-path: inset(0 0 0 0);    transform: translateY(0) scaleX(1) scaleY(1); opacity:1; filter: blur(0); }     /* hold */
    /* Desintegración: alza hacia el texto, achata, difumina, se va */
    100% { clip-path: inset(0 0 0 0);    transform: translateY(-22px) scaleX(0.7) scaleY(0.15); opacity:0; filter: blur(2.5px); }
}

/* Wordmark / sub absorben la línea: pulso sutil + halo de luz */
@keyframes bmAbsorb{
    0%   { transform: scale(1);     filter: drop-shadow(0 0 0 transparent); }
    45%  { transform: scale(1.022); filter: drop-shadow(0 0 7px var(--bm-glow)); }
    100% { transform: scale(1);     filter: drop-shadow(0 0 0 transparent); }
}

/* Accesibilidad — usuario con reduced-motion ve el logo en estado
   final directamente, sin línea, sin glow ni movimiento. */
@media (prefers-reduced-motion: reduce){
    .brand-mark[data-anim] .bm-word,
    .brand-mark[data-anim] .bm-sub{
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }
    .brand-mark[data-anim]::after{
        display:none;
    }
}