/*
  Bloque "Home Hero 2" (spora/home-hero-2) — estilos front + editor.

  DIFERENCIAS CON EL HOME HERO ORIGINAL
  -------------------------------------
  1) TÍTULO ARRIBA: el título va en escalera con las MISMAS coordenadas exactas
     del diseño que el hero original (y las definiciones también) y el lienzo se
     pega a la parte superior del hero; solo se centra en HORIZONTAL cuando la
     pantalla es más ancha que el diseño.
  2) ESTELA DE IMÁGENES POR ENCIMA DEL TEXTO ("image trail"): la capa de imágenes
     cubre TODO el hero y va con z-index superior al título. Las imágenes arrancan
     en display:none; view.js las va dejando en la posición del cursor y cada una
     se desvanece sola (clase .is-out -> opacidad 0 y escala --shh2-scale-down en
     --shh2-fade), así que al parar el ratón la estela desaparece.

  ESCALA
  ------
  view.js fija --shh2-scale = min( ancho_hero / 1476 , alto_disponible / 560 )
  y el ALTO del hero = alto disponible real (viewport menos header y menos lo que
  haya encima, p. ej. la barra de admin). Así a 1476px de ancho la tipografía es
  exacta al diseño y el header —recolocado bajo el hero en escritorio— queda
  SIEMPRE al final, visible.

  En tablet/móvil (<922px) solo queda el título, estático y centrado en la
  primera pantalla: sin imágenes ni definiciones.
*/

.spora-home-hero-2 {
    --shh2-scale: 1;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--wp--preset--color--spora-white, #FFFFFF);
    overflow: hidden; /* recorta las imágenes que caen cerca del borde */
    display: flex;
    flex-direction: column;
    align-items: center;     /* centrado horizontal cuando sobra ancho */
    justify-content: flex-start; /* el título, pegado arriba */
}

.spora-home-hero-2 * {
    box-sizing: border-box;
}

/* --- Lienzo de diseño (1476 x 560), centrado y escalado en bloque -------
   El ancho es 1476 (no 1440) porque es el que hace que, con la "e" de «Hub de»
   sobre la "e" de «sostenibilidad», ambas líneas respeten a la vez el margen
   lateral de 32px (como en el diseño). A anchos <1476 el conjunto se escala en
   bloque, conservando exactamente esas proporciones; a anchos mayores se queda
   a tamaño de diseño y CENTRADO (lo hace el flex del hero). */

.spora-home-hero-2__canvas {
    position: relative;
    z-index: 1; /* por DEBAJO de la capa de imágenes */
    flex: 0 0 auto; /* no encoge ni crece: conserva su tamaño escalado */
    width: calc(1476px * var(--shh2-scale));
    height: calc(560px * var(--shh2-scale));
}

/* --- Título: 3 líneas en coordenadas exactas --------------------------- */

.spora-home-hero-2__text {
    position: absolute;
    margin: 0;
    padding: 0;
    font-family: 'STK Bureau Serif Light', var(--spora-font-family-display, Georgia), serif;
    font-weight: 300;
    font-size: calc(200px * var(--shh2-scale));
    line-height: calc(160px * var(--shh2-scale));
    letter-spacing: calc(-3px * var(--shh2-scale));
    color: var(--wp--preset--color--spora-dark-green, #001A17);
    white-space: nowrap;
    /* El hover de cada línea NO se detecta por su caja (las líneas se solapan y
       una caja captaría la franja de la otra), sino por coordenadas en view.js
       usando las líneas base reales. Por eso las cajas no capturan el ratón. */
    pointer-events: none;
}

/* Coordenadas de diseño (a 1476px, --shh2-scale = 1).
   text--1 en el margen (32) y text--2 desplazado (214) para que la "e" final de
   «Hub de» caiga sobre la "e" de «sostenibilidad». Pitch vertical =
   line-height (160). Son las mismas del hero original. */
.spora-home-hero-2__text--1 { left: calc(32px  * var(--shh2-scale)); top: calc(40px  * var(--shh2-scale)); }
.spora-home-hero-2__text--2 { left: calc(214px * var(--shh2-scale)); top: calc(195px * var(--shh2-scale)); }
.spora-home-hero-2__text--3 { left: calc(504px * var(--shh2-scale)); top: calc(360px * var(--shh2-scale)); }

/* --- Definiciones (solo en hover; ocultas en tablet/móvil) -------------- */

.spora-home-hero-2__def {
    position: absolute;
    width: calc(190px * var(--shh2-scale));
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: calc(14px * var(--shh2-scale));
    line-height: 1.3;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
}

.spora-home-hero-2__def.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

.spora-home-hero-2__def-main {
    display: block;
    color: var(--wp--preset--color--spora-dark-green, #001A17);
}

.spora-home-hero-2__def-label {
    display: block;
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-style: italic;
    font-weight: 300; /* Geist Light */
}

.spora-home-hero-2__def-meta {
    display: block;
    margin-top: calc(14px * var(--shh2-scale));
    color: rgba(0, 0, 0, 0.25);
}

/* Coordenadas de diseño de las definiciones (las mismas del hero original).
   left 1225 = margen derecho de 32px dentro del lienzo de 1476. */
/* def--1 (HUB) más estrecha: a 190px su texto llegaba a ~10px de la "S" de
   «sostenibilitat» (ink en x≈222). Con 166px el aire (~28px) ya igualaba al de
   «creativa», pero junto a la panza de la "s" seguía viéndose pegado; con 150px
   queda ~40px (feedback cliente 2026-10-07). */
.spora-home-hero-2__def--1 { left: calc(32px   * var(--shh2-scale)); top: calc(190px * var(--shh2-scale)); width: calc(170px * var(--shh2-scale)); }
.spora-home-hero-2__def--2 { left: calc(1225px * var(--shh2-scale)); top: calc(40px  * var(--shh2-scale)); }
.spora-home-hero-2__def--3 { left: calc(1225px * var(--shh2-scale)); top: calc(380px * var(--shh2-scale)); }

/* --- Capa de imágenes (estela del cursor, POR ENCIMA del texto) ---------- */

.spora-home-hero-2__images {
    position: absolute;
    inset: 0;
    z-index: 2; /* por encima del título y de las definiciones */
    pointer-events: none; /* el hero sigue recibiendo el mousemove */
}

/* Ciclo de vida de cada imagen de la estela:
     1. En reposo: display:none.
     2. view.js la coloca y la muestra: aparece de golpe (sin transición) en el
        punto del cursor, como en el ejemplo de referencia.
     3. Pasado su tiempo de vida, view.js le pone .is-out: se desvanece y encoge
        durante --shh2-fade, y al terminar vuelve a display:none.
   La transición vive SOLO en .is-out: así, al reutilizar una imagen, quitar la
   clase la devuelve al estado inicial de golpe (sin animación de vuelta). */
.spora-home-hero-2__img {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(var(--shh2-img-width, 320px) * var(--shh2-scale));
    height: calc(var(--shh2-img-height, 320px) * var(--shh2-scale));
    object-fit: cover;
    /* left/top que pone view.js son el CENTRO de la imagen. */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: none;
}

.spora-home-hero-2__img.is-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--shh2-scale-down, 0.6));
    transition:
        opacity var(--shh2-fade, 500ms) ease-out,
        transform var(--shh2-fade, 500ms) ease-out;
}

/* --- Tablet y móvil: título estático, centrado, sin imágenes -------------
   (2026-10-13, según diseño) Solo el título, en escalera, centrado en vertical
   en la primera pantalla (viewport menos el header, que aquí va arriba). Sin
   estela de imágenes ni definiciones: view.js ya no las activa por debajo de
   922px ni sin ratón, y aquí se ocultan del todo.

   El tamaño de letra se calcula para que la línea más larga («sostenibilidad»,
   ~6.1em) más su sangría quepa entre los márgenes de 24px; los sangrados son en
   em para que la escalera se mantenga igual en móvil y en tablet. */
@media (max-width: 921px) {
    .spora-home-hero-2 {
        height: auto !important; /* anula el alto en línea que pone view.js */
        min-height: calc(100vh - var(--spora-header-h, 76px));
        min-height: calc(100svh - var(--spora-header-h, 76px));
        padding: 24px;
        justify-content: center; /* centrado vertical (el hero es flex column) */
        align-items: stretch;
    }

    .spora-home-hero-2__canvas {
        width: auto;
        height: auto;
    }

    .spora-home-hero-2__text {
        position: static;
        font-size: min(calc((100vw - 48px) / 6.5), 120px);
        line-height: 1;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    .spora-home-hero-2__text--2 { padding-left: 0.375em; }
    .spora-home-hero-2__text--3 { padding-left: 1.6em; }

    .spora-home-hero-2__def,
    .spora-home-hero-2__images {
        display: none !important;
    }
}

/* --- Vista en el editor -------------------------------------------------- */
.spora-home-hero-2-editor__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spora-home-hero-2-editor__grid img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px;
}