/* ==========================================================================
   Hero del inicio — fotografía de la bahía de Santa Marta + red de nodos
   --------------------------------------------------------------------------
   Capas, de abajo hacia arriba:
     0  .hero-home__media    foto (img con srcset, object-fit: cover)
     1  .hero-home__overlay  degradado azul institucional: opaco a la izquierda
                             para el texto, abierto a la derecha para la ciudad
     2  canvas               red de nodos (assets/js/hero-network.js)
     3  .hero-home__content  titular, texto, CTA y cifras (.hero-home__kpis)
   Botones y marca de la barra viven en ui.css.
   Se carga después de styles.css y sobrescribe las reglas genéricas de .hero
   con la especificidad .hero.hero-home.
   ========================================================================== */

:root {
    --hero-navy: #072B57;
    --hero-navy-deep: #041C3C;
    --hero-blue: #0A3D78;
    --hero-green: var(--emerald);
    --hero-cyan: #4FC3F7;
    --hero-text: #FFFFFF;
    --hero-text-soft: rgba(255, 255, 255, 0.82);
    --hero-line: rgba(255, 255, 255, 0.12);
    /* Pantalla completa: el hero cubre la primera vista entera para que no
       asome la franja clara de la sección siguiente. svh ignora la barra del
       navegador en móvil; vh queda de reserva. */
    --hero-min-height: max(640px, 100vh);
    --hero-min-height: max(640px, 100svh);
}

/* --- Contenedor ---------------------------------------------------------- */

.hero.hero-home {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr;
    justify-content: stretch;
    justify-items: stretch;
    min-height: var(--hero-min-height);
    padding: 0;
    background: var(--hero-navy);
    color: var(--hero-text);
    text-align: left;
    overflow: hidden;
}

.hero.hero-home::before { display: none; }

/* Sin animación genérica de styles.css (fadeInUp): el hero maneja la suya.
   Solo para lo que NO lleva data-reveal; la entrada escalonada de abajo tiene
   que ganar, si no el texto se queda en opacity: 0 y el hero sale vacío. */
.hero.hero-home h1:not([data-reveal]),
.hero.hero-home p:not([data-reveal]),
.hero.hero-home .hero-btns:not([data-reveal]) { animation: none; }

/* --- Capas de fondo ------------------------------------------------------ */

.hero-home__media,
.hero-home__overlay,
.hero-home__network {
    position: absolute;
    inset: 0;
}

.hero-home__media { z-index: 0; }

.hero-home__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La ciudad y la marina están a la derecha; ese es el foco del encuadre. */
    object-position: 74% 58%;
    transform: scale(1.04);
    transform-origin: 70% 60%;
    animation: heroMediaSettle 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    filter: saturate(1.05) contrast(1.02);
}

@keyframes heroMediaSettle {
    to { transform: scale(1); }
}

.hero-home__overlay {
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(7, 43, 87, 0.94) 0%,
            rgba(7, 43, 87, 0.86) 30%,
            rgba(7, 43, 87, 0.52) 58%,
            rgba(7, 43, 87, 0.22) 82%,
            rgba(7, 43, 87, 0.30) 100%),
        linear-gradient(180deg,
            rgba(4, 28, 60, 0.70) 0%,
            rgba(4, 28, 60, 0.18) 26%,
            rgba(4, 28, 60, 0.00) 55%,
            rgba(4, 28, 60, 0.62) 100%);
}

/* Grano muy fino para que el degradado no se vea bandeado sobre la foto. */
.hero-home__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-home__network {
    z-index: 2;
    pointer-events: none;
}

.hero-home__network canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Contenido ----------------------------------------------------------- */

.hero-home__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 150px 20px 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-width: 0;
}

.hero-home__copy {
    min-width: 0;
    max-width: 920px;
    align-self: center;
}

.hero-home__title {
    margin: 0 0 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(2.15rem, 4.4vw, 3.85rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    color: var(--hero-text);
    text-wrap: balance;
}

.hero-home__title em {
    display: block;
    font-style: normal;
    color: var(--hero-green);
}

.hero-home__lead {
    margin: 0 0 40px;
    max-width: 560px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--hero-text-soft);
}

.hero-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
}

/* --- Cifras --------------------------------------------------------------
   Tres indicadores en fila bajo los botones, integrados en la foto: icono
   lineal verde, número grande y etiqueta pequeña, separados por una línea
   fina. Sin caja ni sombra. Los números los anima assets/js/hero-kpi.js. */

.hero-home__kpis {
    list-style: none;
    margin: 56px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px 0;
}

.hero-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 36px;
}

.hero-kpi:first-child { padding-left: 0; }
.hero-kpi:last-child { padding-right: 0; }

/* Separador vertical muy sutil entre cifras. */
.hero-kpi + .hero-kpi::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--hero-line);
}

.hero-kpi__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--hero-green);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-kpi__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hero-kpi__value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 2.1vw, 2.15rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--hero-text);
    font-variant-numeric: tabular-nums;
}

.hero-kpi__label {
    margin-top: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--hero-text-soft);
    white-space: nowrap;
}

/* --- Entrada escalonada -------------------------------------------------- */

/* Especificidad (0,3,0): por encima de `.hero.hero-home h1` y de
   `.hero h1, .hero p, .hero-btns` de styles.css. */
.hero.hero-home [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    animation: heroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(0.15s + var(--i, 0) * 0.11s);
}

@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero-home [data-reveal] { animation: none; opacity: 1; transform: none; }
    .hero-home__media img { animation: none; transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
    .hero-home__content {
        padding-top: 132px;
        padding-bottom: 56px;
    }
    .hero-home__overlay {
        background:
            linear-gradient(90deg, rgba(7, 43, 87, 0.92) 0%, rgba(7, 43, 87, 0.72) 55%, rgba(7, 43, 87, 0.42) 100%),
            linear-gradient(180deg, rgba(4, 28, 60, 0.70) 0%, rgba(4, 28, 60, 0.10) 30%, rgba(4, 28, 60, 0.00) 55%, rgba(4, 28, 60, 0.66) 100%);
    }
}

@media (max-width: 768px) {
    :root { --hero-min-height: auto; }
    .hero.hero-home { min-height: 100svh; }
    .hero-home__content { padding: 118px 20px 44px; }
    .hero-home__media img { object-position: 68% 60%; }
    .hero-home__title { font-size: clamp(2.05rem, 9.2vw, 2.9rem); margin-bottom: 20px; }
    .hero-home__lead { font-size: 1rem; margin-bottom: 30px; }
    .hero-home__actions { flex-direction: column; align-items: stretch; gap: 12px; max-width: 340px; }
    .hero-home__actions .btn-ld { justify-content: center; padding: 0.95rem 1.6rem; }

    /* Grilla compacta: Productos · Eventos / Experiencia. Sin separadores. */
    .hero-home__kpis {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }
    .hero-kpi { padding: 0; gap: 12px; }
    .hero-kpi:last-child { grid-column: 1 / -1; }
    .hero-kpi + .hero-kpi::before { display: none; }
    .hero-kpi__icon { width: 26px; height: 26px; }
    .hero-kpi__value { font-size: 1.7rem; }
    .hero-kpi__label { font-size: 0.8rem; white-space: normal; }
}

@media (max-width: 400px) {
    .hero-home__title { font-size: 2rem; }
}

/* Pantallas muy estrechas: las tres cifras en vertical. */
@media (max-width: 360px) {
    .hero-home__kpis { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}