/*
  Bloque "Hero Agència" (spora/hero-agencia) — estilos front + editor.

  Variables (las publica render.php en el wrapper):
    --sha-t-*  / --sha-s-*   tipografía de título / subtítulo:
                             font, weight, size, size-t (tablet), size-m (móvil),
                             lh, ls (em), transform, color
    --sha-min-h              alto mínimo del hero (vh)
    --sha-gap                separación título -> subtítulo -> carrusel
    --sha-img-w / -h / -r    tamaño y radio de las imágenes
    --sha-fade               duración del desvanecido de la estela
    --sha-scale-down         escala a la que encoge una imagen al irse

  DOS MODOS DE IMÁGENES, decididos aquí por media query (view.js usa la MISMA):
    - Estela (escritorio >=922px CON hover): capa .__trail por encima del texto.
    - Carrusel (<=921px, o cualquier pantalla sin hover, p. ej. un iPad en
      horizontal): .__carousel bajo el subtítulo, girando solo.

  El FONDO no se declara a propósito: hereda el de la página (modo oscuro).
*/

.spora-hero-agencia {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--sha-min-h, 100vh);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 32px;
    overflow: hidden; /* recorta las imágenes de la estela cerca del borde */
}

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

.spora-hero-agencia__inner {
    position: relative;
    z-index: 1; /* por DEBAJO de la estela */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sha-gap, 48px);
    text-align: center;
}

/* --- Título y subtítulo ---------------------------------------------------
   El tema estila los headings con !important (familia, márgenes…): forzamos
   aquí también para que mande la tipografía elegida en el bloque. */

.spora-hero-agencia .spora-hero-agencia__title {
    margin: 0 !important;
    padding: 0;
    max-width: 100%;
    font-family: var(--sha-t-font) !important;
    font-weight: var(--sha-t-weight, 300) !important;
    font-size: var(--sha-t-size, 200px) !important;
    line-height: var(--sha-t-lh, 0.95) !important;
    letter-spacing: var(--sha-t-ls, -0.02em) !important;
    text-transform: var(--sha-t-transform, uppercase) !important;
    color: var(--sha-t-color, #FFEB36) !important;
    overflow-wrap: break-word;
    font-synthesis: weight style;
}

.spora-hero-agencia .spora-hero-agencia__subtitle {
    margin: 0 !important;
    padding: 0;
    max-width: 100%;
    font-family: var(--sha-s-font) !important;
    font-weight: var(--sha-s-weight, 500) !important;
    font-size: var(--sha-s-size, 16px) !important;
    line-height: var(--sha-s-lh, 1.3) !important;
    letter-spacing: var(--sha-s-ls, 0.25em) !important;
    text-transform: var(--sha-s-transform, uppercase) !important;
    color: var(--sha-s-color, #FFEB36) !important;
}

/* --- Estela (escritorio con ratón) ---------------------------------------- */

.spora-hero-agencia__trail {
    position: absolute;
    inset: 0;
    z-index: 2; /* por encima del texto */
    pointer-events: none; /* el hero sigue recibiendo el mousemove */
}

/* Mismo ciclo de vida que el Home Hero 2: display:none -> view.js la coloca y
   aparece de golpe -> .is-out la desvanece y encoge -> display:none. La
   transición vive SOLO en .is-out para que, al reutilizarla, vuelva al estado
   inicial sin animación de vuelta. */
.spora-hero-agencia__trail-img {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: var(--sha-img-w, 256px);
    height: var(--sha-img-h, 256px);
    object-fit: cover;
    border-radius: var(--sha-img-r, 8px);
    transform: translate(-50%, -50%) scale(1); /* left/top = CENTRO */
    opacity: 1;
    pointer-events: none;
}

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

/* --- Carrusel (oculto salvo en tablet/móvil o sin hover) ------------------ */

.spora-hero-agencia__carousel {
    display: none;
    /* A sangre: el carrusel ignora el padding lateral del hero para que las
       diapositivas vecinas asomen hasta el borde de la pantalla. */
    width: calc(100% + 2 * var(--sha-pad-x, 32px));
    margin: 0 calc(-1 * var(--sha-pad-x, 32px));
    overflow: hidden;
    touch-action: pan-y; /* el swipe horizontal lo gestiona view.js */
}

.spora-hero-agencia__track {
    display: flex;
    gap: 16px;
    will-change: transform;
}

.spora-hero-agencia__track.is-animating {
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.spora-hero-agencia__slide {
    flex: 0 0 auto;
    /* Ancho de diapositiva: el de la imagen, pero nunca más del 70% de la
       pantalla, para que siempre asomen las vecinas. La proporción se conserva. */
    width: min(var(--sha-img-w, 256px), 70vw);
    aspect-ratio: var(--sha-img-ratio, 1);
    border-radius: var(--sha-img-r, 8px);
    overflow: hidden;
}

.spora-hero-agencia__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 921px), (hover: none) {
    .spora-hero-agencia__trail {
        display: none;
    }

    .spora-hero-agencia__carousel {
        display: block;
    }
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 921px) {
    .spora-hero-agencia {
        --sha-pad-x: 24px;
        padding: 64px 24px;
    }

    .spora-hero-agencia .spora-hero-agencia__title {
        font-size: var(--sha-t-size-t, 96px) !important;
    }

    .spora-hero-agencia .spora-hero-agencia__subtitle {
        font-size: var(--sha-s-size-t, 14px) !important;
    }

    .spora-hero-agencia__inner {
        gap: calc(var(--sha-gap, 48px) * 0.66);
    }
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 544px) {
    .spora-hero-agencia {
        --sha-pad-x: 16px;
        padding: 48px 16px;
    }

    .spora-hero-agencia .spora-hero-agencia__title {
        font-size: var(--sha-t-size-m, 56px) !important;
    }

    .spora-hero-agencia .spora-hero-agencia__subtitle {
        font-size: var(--sha-s-size-m, 12px) !important;
    }

    .spora-hero-agencia__inner {
        gap: calc(var(--sha-gap, 48px) * 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spora-hero-agencia__track.is-animating {
        transition-duration: 0.01s;
    }
}

/* --- Vista en el editor ----------------------------------------------------
   El fondo del hero es transparente (hereda el de la página) y el texto por
   defecto es amarillo: sobre el lienzo blanco del editor no se leería. Solo en
   el editor le damos el verde oscuro del modo oscuro y acotamos la altura. */
.spora-hero-agencia-editor .spora-hero-agencia {
    background-color: #001A17;
    min-height: min(var(--sha-min-h, 100vh), 70vh);
}

.spora-hero-agencia-editor__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.spora-hero-agencia-editor__grid img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
}