/* ============================================================
   EXPERIMENTO — Hero con arte de Santiago al atardecer
   ============================================================
   Todo el experimento vive en este archivo. Para revertirlo basta
   con borrar la línea que lo enlaza en templates/home.html
   (bloque page_css). Nada más del sitio depende de esto.

   Reemplaza el fondo de cuadrícula + palabras de código (canvas
   #heroFx) por una vista de la cordillera y el skyline al atardecer,
   para que un visitante extranjero entienda de dónde soy sin leer
   una palabra.
   ============================================================ */

/* --- 1. Se apagan las capas decorativas del hero anterior.
       .bh-bg2 y .bh-aurora NO se ocultan: se reaprovechan más abajo como
       capas de movimiento, así el efecto no exige tocar el HTML. --- */
.brand-hero .bh-grid-lines,
.brand-hero .bh-fx,
.brand-hero .hero-moon,
.brand-hero .hero-rocket {
    display: none;
}

/* --- 2. El arte, como capa de fondo --- */
.brand-hero::before {
    content: "";
    position: absolute;
    /* se desborda un poco para que el zoom lento nunca muestre el borde */
    inset: -4%;
    z-index: 0;
    background: url("../img/brand/hero-santiago.webp") center 74% / cover no-repeat;
    transform-origin: 60% 55%;
    will-change: transform;
}

/* --- 3. Velo: oscurece la izquierda (donde va el texto) y deja
       respirar la ciudad a la derecha. También funde el borde
       inferior con la sección siguiente. --- */
.brand-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(6, 9, 17, 0.93) 0%,
            rgba(6, 9, 17, 0.86) 30%,
            rgba(6, 9, 17, 0.52) 56%,
            rgba(6, 9, 17, 0.22) 78%,
            rgba(6, 9, 17, 0.30) 100%),
        linear-gradient(180deg,
            rgba(6, 9, 17, 0.70) 0%,
            rgba(6, 9, 17, 0.08) 26%,
            rgba(6, 9, 17, 0.08) 78%,
            rgba(8, 11, 20, 0.92) 100%);
}

/* --- 4b. La tarjeta se diseñó para fondo oscuro plano: sobre el cielo del
       atardecer perdía contraste y los datos quedaban ilegibles. Aquí pasa a
       vidrio ahumado, manteniendo el desenfoque pero con base opaca. --- */
.brand-hero .bh-card {
    background: rgba(9, 13, 24, 0.66);
    border-color: rgba(255, 255, 255, 0.16);
}
.brand-hero .bh-card-stats span,
.brand-hero .bh-card-loc {
    color: #a8b6cc;
}

/* --- 4. El contenido queda por encima de ambas capas --- */
.brand-hero .container.bh-grid,
.brand-hero .scroll-indicator {
    position: relative;
    z-index: 2;
}

/* --- 5. Efecto: zoom muy lento tipo Ken Burns. Se anima transform
       (no background-size) para que lo resuelva la GPU. --- */
@media (prefers-reduced-motion: no-preference) {
    .brand-hero::before {
        animation: heroKenBurns 38s ease-in-out infinite alternate;
    }
    @keyframes heroKenBurns {
        from { transform: scale(1); }
        to   { transform: scale(1.09); }
    }
}

/* ============================================================
   VIDA EN EL FONDO
   Tres capas que se mueven a ritmos distintos, para que el hero
   respire sin distraer de la lectura:
     a) resplandor cálido del sol, que late          (bajo el velo)
     b) masa de color del cielo, que deriva          (bajo el velo)
     c) partículas ascendentes tipo brasa            (sobre el velo)
   Todas usan elementos que ya existían en el marcado.
   ============================================================ */

/* (a) y (b): las dos manchas de .bh-aurora pasan a ser luz de atardecer.
   Van debajo del velo para teñir la imagen, no para lavar el texto. */
.brand-hero .bh-aurora span:nth-child(1) {
    width: 60vw; height: 60vw; max-width: 880px; max-height: 880px;
    left: -12%; top: 26%; bottom: auto;
    background: radial-gradient(circle, rgba(255, 168, 76, 0.30), transparent 66%);
    filter: blur(80px);
    opacity: 0.85;
}
.brand-hero .bh-aurora span:nth-child(2) {
    width: 46vw; height: 46vw; max-width: 700px; max-height: 700px;
    left: 52%; top: 2%; bottom: auto;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.28), transparent 68%);
    filter: blur(92px);
    opacity: 0.75;
}

/* (c) Brasas: un mosaico de puntos que sube en bucle. El desplazamiento es
   exactamente el alto del mosaico, así el ciclo no tiene salto visible.
   z-index 1 lo deja por encima del velo, si no las partículas se apagarían. */
.brand-hero .bh-bg2 {
    position: absolute;
    inset: -12% 0 0 0;
    width: 100%;
    height: 124%;
    z-index: 1;
    right: auto; top: -12%;
    background-image:
        radial-gradient(1.7px 1.7px at 18% 12%, rgba(255, 216, 170, 0.85), transparent 58%),
        radial-gradient(1.4px 1.4px at 62% 27%, rgba(199, 210, 254, 0.70), transparent 58%),
        radial-gradient(2.1px 2.1px at 85% 8%,  rgba(255, 190, 140, 0.80), transparent 58%),
        radial-gradient(1.3px 1.3px at 38% 61%, rgba(255, 235, 205, 0.72), transparent 58%),
        radial-gradient(1.8px 1.8px at 7% 47%,  rgba(196, 181, 253, 0.66), transparent 58%),
        radial-gradient(1.4px 1.4px at 73% 76%, rgba(255, 214, 170, 0.72), transparent 58%),
        radial-gradient(1.6px 1.6px at 46% 90%, rgba(255, 205, 160, 0.62), transparent 58%);
    background-size: 460px 540px;
    background-repeat: repeat;
    filter: none;
    opacity: 0.5;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .brand-hero .bh-aurora span:nth-child(1) {
        animation: sunBreath 15s ease-in-out infinite alternate;
    }
    .brand-hero .bh-aurora span:nth-child(2) {
        animation: skyDrift 28s ease-in-out infinite alternate;
    }
    .brand-hero .bh-bg2 {
        animation: emberRise 46s linear infinite;
    }
    @keyframes sunBreath {
        from { transform: translate3d(0, 0, 0) scale(1);      opacity: 0.62; }
        to   { transform: translate3d(3%, -2%, 0) scale(1.12); opacity: 0.95; }
    }
    @keyframes skyDrift {
        from { transform: translate3d(0, 0, 0); }
        to   { transform: translate3d(-6%, 4%, 0); }
    }
    @keyframes emberRise {
        from { background-position: 0 0; }
        to   { background-position: 130px -540px; }
    }
}

/* ============================================================
   TARJETA — cabecera
   ============================================================ */

/* Anillo aurora alrededor de la foto: el borde se pinta con el gradiente y
   el relleno interior queda tapado por la propia imagen. */
.brand-hero .bh-avatar {
    width: 78px; height: 78px;
    border-radius: 18px;
    border: 2px solid transparent;
    background-image: linear-gradient(#0b1020, #0b1020), var(--aurora);
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45), 0 0 22px rgba(99, 102, 241, 0.28);
}

.brand-hero .bh-card-top { gap: 16px; align-items: flex-start; }

.brand-hero .bh-card-name {
    font-size: 1.24rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* El cargo pasa a versalitas: se lee como credencial y no compite con el nombre. */
.brand-hero .bh-card-role {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: #7dd3fc;
    margin: 5px 0 8px;
}

.brand-hero .bh-card-loc {
    font-size: 0.78rem;
    color: #94a3b8;
    flex-wrap: wrap;
    gap: 7px;
}

/* "Disponible" pasa de texto suelto a indicador con punto latiendo. */
.brand-hero .bh-avail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6ee7b7;
    background: rgba(16, 185, 129, 0.13);
    border: 1px solid rgba(16, 185, 129, 0.34);
}
.brand-hero .bh-avail::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65);
    flex: none;
}
@media (prefers-reduced-motion: no-preference) {
    .brand-hero .bh-avail::before {
        animation: availPulse 2.4s ease-out infinite;
    }
    @keyframes availPulse {
        0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
        70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
        100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
    }
}

/* --- 6. Móvil: el texto ocupa todo el ancho, así que el velo sube
       de intensidad y el encuadre se corre para no perder la torre. --- */
@media (max-width: 900px) {
    /* En pantalla vertical el panorama apaisado se recorta tanto de lado que
       deja de leerse como una ciudad. Se usa una versión en retrato de la
       misma escena: cielo alto arriba (donde va el texto) y la torre con la
       cordillera abajo. */
    .brand-hero::before {
        background-image: url("../img/brand/hero-santiago-portrait.webp");
        background-position: center center;
        /* El hero en móvil es mucho más alto que la pantalla (el contenido se
           apila), así que si el arte cubre toda la sección el skyline queda
           bajo el pliegue. Se limita a la primera pantalla para que la escena
           completa —cielo, cordillera y ciudad— se vea de entrada, y se
           desvanece por abajo para que no quede un corte duro. */
        inset: 0 -4% auto -4%;
        height: 108vh;
        mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
        -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
    }
    /* Velo más suave que en escritorio: aquí el texto ya va sobre las zonas
       oscuras de la imagen, y con el velo anterior la ciudad no se veía. */
    .brand-hero::after {
        background:
            linear-gradient(180deg,
                rgba(6, 9, 17, 0.80) 0%,
                rgba(6, 9, 17, 0.56) 38%,
                rgba(6, 9, 17, 0.58) 68%,
                rgba(8, 11, 20, 0.94) 100%);
    }
}