/* ============================================================
   Inicio del Siesco.

   Todo va acotado bajo .inicio-nv para que estas clases -banda,
   ficha, tira, video- no alcancen a nada fuera de esta vista.

   Dos cosas que conviene saber antes de tocar este archivo:

   1) Las fotografias 01, 02 y 07 traen una franja oscura pintada
      encima, pensada para que el texto fuera dentro de ella. Aqui
      el texto va fuera de la foto, asi que las bandas se encuadran
      en la parte limpia de cada imagen. La franja esta en distinto
      lugar en cada una, por eso cada banda lleva su propio
      background-position:
          01.png  franja del 22% al 74%  -> se encuadra abajo
          02.png  franja del 12% al 34%  -> se encuadra abajo
          07.png  franja del 51% al 70%  -> se encuadra arriba

   2) Los iconos 03-06 y 08-13 vienen dentro de una tarjeta blanca
      con sombra, y en los primeros el dibujo ocupa solo el tercio
      superior. Se recortan con background-size/position.
   ============================================================ */

.inicio-nv {
    --verde: #285c4d;
    --verde-oscuro: #13322b;
    --arena: #b38e5d;
    --guinda: #621132;
    --gris: #878786;
    --borde: #e8e6e1;
}

/* --- Ritmo vertical --- */
.inicio-nv .seccion {
    margin-top: clamp(2rem, 4.5vw, 3.25rem);
    margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

/* --- Bandas fotograficas --- */
.inicio-nv .banda {
    width: 100%;
    height: 300px;
    border-radius: 12px;
    /* Sin sombra el redondeo de 12px no se percibe contra el fondo blanco:
       la banda se lee cuadrada. Es la misma sombra de .banner, que es la
       que hace que el panel de "Que es el Siesco" si se vea redondeado. */
    box-shadow: 0 .7rem 1rem rgba(0, 0, 0, .15);
    background-repeat: no-repeat;
    background-size: cover;
}

/* El encuadre va en porcentaje del ALTO de la caja, no del ancho, asi que
   la fraccion visible de cada foto no cambia aunque cambie la altura.
   El minimo para que no asome la franja es 151% en la 02 y 194% en la 07,
   pero con valores distintos cada escena se ve a distinta distancia y la
   02 parecia mas chica. Las dos van a 194%: en la 02 sobra margen -solo
   necesita 151%- asi que sigue sin mostrar franja. */
.inicio-nv .banda--02 {
    background-size: auto 194%;
    background-position: center bottom;
}

.inicio-nv .banda--07 {
    background-size: auto 194%;
    background-position: center top;
}

/* "Cual es su importancia" tambien vuelve al diseno original: el texto
   blanco en la parte baja de la fotografia, sobre la franja que la imagen
   trae pintada, con 500px de alto. Lo unico nuevo son las esquinas.

   Dos cosas que NO se reponen del original, a proposito:
   - El id #container-importancia. El CSS compartido le mete un margin-top
     de 15rem -65rem en movil- que existia para empujar esta seccion por
     debajo del panel de "Para que sirve", que se desbordaba. Ya no se
     desborda, asi que ese margen solo dejaria un hueco enorme.
   - El padding de 17rem que colocaba el texto. En pantallas chicas
     expulsaba el encabezado y el parrafo fuera del panel y la seccion se
     quedaba sin texto. Aqui el texto se ancla abajo con flexbox: se ve
     igual en escritorio y en telefono ya no se pierde. */
.inicio-nv .panel-importancia {
    height: 500px;
    display: flex;
    flex-direction: column;
    /* El texto arranca justo en el borde superior de la franja oscura de la
       foto, que va del 51.5% al 70.5% del alto. Con background cover y un
       panel mas ancho de proporcion que 3.01:1, el alto de la imagen se
       mapea 1 a 1 con el del panel, asi que el porcentaje vale en pantalla:
       0.515 x 500 = 257px.

       No se centra en la franja: el texto mide 179px y la franja 95, asi
       que centrado el encabezado quedaba ARRIBA de la franja, sobre los
       techos claros, y no se leia. Anclado al inicio, el titulo cae dentro
       de la franja y lo que sobra cae hacia abajo, sobre el verde oscuro. */
    justify-content: flex-start;
    padding: 257px clamp(1.5rem, 4vw, 5rem) 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
}

/* El h1 ocupa exactamente el alto de la franja -el 19% de 500px son 95px-
   con su texto centrado dentro. Asi el encabezado queda sobre la franja y el
   parrafo arranca justo donde la franja termina, en el 70.5%.
   El min-height, en vez de height, deja que crezca si el titulo se parte en
   dos lineas en pantallas angostas. */
.inicio-nv .panel-importancia h1.header-img {
    margin: 0;
    min-height: 95px;
    display: flex;
    align-items: center;
}

.inicio-nv .panel-importancia h3.header-img {
    margin-top: .5rem;
    margin-bottom: 0;
    line-height: 1.4;
}

/* "Que es el Siesco" conserva el diseno original: el texto va encima de la
   fotografia, dentro de la franja oscura que la imagen ya trae pintada.
   Lo unico que cambia son las esquinas redondeadas. */
.inicio-nv .panel-que-es {
    height: 464px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    padding: 3rem;
}

/* --- Encabezado de seccion --- */
.inicio-nv .encabezado {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin: 1.15rem 0 0;
}

.inicio-nv .encabezado h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--verde-oscuro);
    white-space: nowrap;
}

.inicio-nv .encabezado p {
    margin: 0;
    font-size: clamp(.92rem, 1.1vw, 1.02rem);
    font-weight: 300;
    line-height: 1.6;
    color: #4a514b;
    max-width: 62ch;
    flex: 1 1 22rem;
}

.inicio-nv .encabezado--acento h2 {
    color: var(--guinda);
}

.inicio-nv .regla {
    height: 3px;
    width: 52px;
    background: var(--arena);
    border-radius: 2px;
    margin: .9rem 0 0;
}

/* --- Iconos recortados de su tarjeta blanca --- */
.inicio-nv .ico {
    display: block;
    flex: none;
    background-repeat: no-repeat;
}

/* 03-06 son 308x308 y el dibujo vive arriba al centro */
.inicio-nv .ico--uso {
    width: 76px;
    height: 76px;
    background-size: 173px;
    background-position: -48px -18px;
}

/* 08-13 son 370x342 y el dibujo ocupa el centro */
.inicio-nv .ico--ficha {
    width: 80px;
    height: 80px;
    background-size: 136px;
    background-position: -28px -21px;
}

/* --- Los cuatro usos --- */
.inicio-nv .usos {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Los usos usan la misma ficha que "Que contiene", pero en vertical:
   el icono arriba y el texto debajo. */
.inicio-nv .usos .ficha {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}

.inicio-nv .usos b {
    font-weight: 600;
    font-size: .82rem;
    color: var(--verde-oscuro);
    line-height: 1.3;
}

.inicio-nv .usos span:last-child {
    font-size: .82rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--gris);
}

/* --- Que contiene --- */
.inicio-nv .rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.6rem;
}

.inicio-nv .ficha {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform .18s ease, box-shadow .18s ease;
}

.inicio-nv .ficha:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .07);
}

.inicio-nv .ficha h3 {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--verde-oscuro);
}

/* --- Portal Ciudadano ---
   La imagen es un cartel completo, con su texto, su QR y sus logos.
   Se probo recortarlo para dejar solo la fotografia, pero el encuadre
   depende de la proporcion de la caja y esa cambia con el ancho de la
   ventana: a 1280 salia bien y a 1120 reaparecia el texto impreso.
   Se muestra entero, que es como esta disenado. */
.inicio-nv .portal__enlace {
    display: block;
    /* El cartel mide 1200x670 de origen. A 1096 se muestra al 91% de su
       tamano real, asi que no se amplia y se ve nitido.
       Este es el unico numero que hay que mover para ajustarlo. */
    max-width: 1096px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--borde);
}

.inicio-nv .portal__enlace img {
    display: block;
    width: 100%;
    height: auto;
}

.inicio-nv .portal__boton {
    /* block + width fit-content + margin auto: asi el boton queda centrado
       sobre el mismo eje que el cartel, no solo dentro del contenedor. */
    display: block;
    width: fit-content;
    margin: 1.1rem auto 0;
    background: var(--guinda);
    color: #fff;
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .7rem 1.35rem;
    border-radius: 999px;
    transition: background .18s ease;
}

.inicio-nv .portal__boton:hover,
.inicio-nv .portal__boton:focus {
    background: #7d1640;
    color: #fff;
}

/* --- Tarjeta de video --- */
.inicio-nv .video {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--borde);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.inicio-nv .video:hover,
.inicio-nv .video:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .09);
    outline: none;
}

.inicio-nv .video:focus-visible {
    box-shadow: 0 0 0 3px var(--arena);
}

/* display:block explicito: son <span> dentro del <a>, y en linea ni
   aspect-ratio ni el bloque del titulo funcionan. */
.inicio-nv .video__marco {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #eee;
    overflow: hidden;
}

.inicio-nv .video__marco img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inicio-nv .video__play {
    display: grid;
    place-items: center;
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .42), rgba(0, 0, 0, .06));
    transition: background .18s ease;
}

.inicio-nv .video:hover .video__play {
    background: linear-gradient(to top, rgba(0, 0, 0, .52), rgba(0, 0, 0, .12));
}

.inicio-nv .video__play img {
    width: 46px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}

.inicio-nv .video__titulo {
    display: block;
    padding: .8rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--verde-oscuro);
}

/* --- Tiras deslizables ---
   Desplazamiento nativo con anclaje: funciona con el dedo, con la rueda
   y con el teclado, y no depende de JavaScript. */
.inicio-nv .tira,
.inicio-nv .tira-galeria {
    display: grid;
    grid-auto-flow: column;
    gap: 1.1rem;
    margin-top: 1.6rem;
    padding-bottom: .85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--arena) #eee;
}

.inicio-nv .tira {
    grid-auto-columns: minmax(260px, 31%);
}

.inicio-nv .tira-galeria {
    grid-auto-columns: minmax(300px, 62%);
}

.inicio-nv .tira > * {
    scroll-snap-align: start;
}

.inicio-nv .tira::-webkit-scrollbar,
.inicio-nv .tira-galeria::-webkit-scrollbar {
    height: 7px;
}

.inicio-nv .tira::-webkit-scrollbar-thumb,
.inicio-nv .tira-galeria::-webkit-scrollbar-thumb {
    background: var(--arena);
    border-radius: 4px;
}

.inicio-nv .tira::-webkit-scrollbar-track,
.inicio-nv .tira-galeria::-webkit-scrollbar-track {
    background: #f0efec;
    border-radius: 4px;
}

.inicio-nv .tira-galeria figure {
    margin: 0;
    scroll-snap-align: center;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--borde);
}

.inicio-nv .tira-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 16 / 9;
    background: #f0efec;
}

/* --- Galeria: ampliar en modal --- */
/* El disparador es un <button> y no la imagen suelta, para que tambien se
   pueda abrir con el teclado. Se le quita el aspecto de boton. */
.inicio-nv .galeria__ampliar {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.inicio-nv .galeria__ampliar:focus-visible {
    outline: 3px solid var(--arena);
    outline-offset: 2px;
}

.galeria-modal {
    background: transparent;
    border: 0;
}

.galeria-modal img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 10px;
    background: #000;
}

.galeria-modal__cerrar {
    position: absolute;
    top: -2.5rem;
    right: 0;
    z-index: 2;
    /* El fondo del modal es oscuro: la X por omision es negra y se pierde. */
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .9;
}

@media (max-width: 575.98px) {
    .galeria-modal__cerrar {
        top: -2.2rem;
    }
}

/* --- Pantallas medianas y chicas --- */
@media (max-width: 860px) {
    .inicio-nv .usos { grid-template-columns: 1fr 1fr; }
    .inicio-nv .rejilla { grid-template-columns: 1fr 1fr; }
    .inicio-nv .encabezado h2 { white-space: normal; }
    .inicio-nv .banda { height: 200px; }
}

@media (max-width: 620px) {
    .inicio-nv .rejilla { grid-template-columns: 1fr; }
    .inicio-nv .tira { grid-auto-columns: minmax(230px, 78%); }
    .inicio-nv .tira-galeria { grid-auto-columns: minmax(260px, 88%); }
}

@media (max-width: 520px) {
    .inicio-nv .usos { grid-template-columns: 1fr; }
}

/* --- Quien pide menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
    .inicio-nv .video,
    .inicio-nv .ficha {
        transition: none;
    }

    .inicio-nv .tira,
    .inicio-nv .tira-galeria {
        scroll-behavior: auto;
    }
}