@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap');


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

:root {
    --color-principal: #124684;
    --color-secundario: #F44A50;
    --color-complementario:#99ccff ;
    --color-boton: #69AAE3;
    --color-hoverboton: #2E91E8;
    --color-fondo: #F2F2F2;
    --espacio-chico: 0.5rem;
    --espacio-medio: 1rem;
    --borde-redondeado: 8px;
    --sombra-suave: 0 4px 8px rgba(0, 0, 0, 0.5);
    --blanco: #ffffff;
    --gris: #444444;
    --negro: #111111;
    --gris-claro:#777;
    --gris-medio:#666;
}

body {
    font-family: "inter", sans-serif;
    background-color: var(--color-fondo); 
    color: var(--negro);
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
main {
    padding: 15px;
    width: 100%;
    padding-bottom: 90px;    
}

.secciones {
    margin-bottom: 30px;
}

.secciones h2 {
    font-size: 1.3rem;
    margin-bottom: 15px;
}
a {
    text-decoration: none;
}

            /*MAPA*/
.mapa{
    padding: 0; 
    width: 100%;
    height: calc(100vh - 72px - 70px); 
    position: relative;
    overflow: hidden;
    max-width:none;
}
/* CONTENEDOR DEL MAPA LEAFLET */
#map {
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* BURBUJA FLOTANTE ESTILO WAZE (+) */
.btn-reportar-waze {
    position: absolute;
    right: 20px;
    bottom: 18rem; 
    width: 60px;
    height: 60px;
    background-color: var(--color-secundario);
    color: var(--blanco);
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 1001; 
    transition: transform 0.2s, background-color 0.2s;
}

.btn-reportar-waze:active {
    transform: scale(0.9);
}

/* Animación para ocultar elementos del mapa */
.btn-reportar-waze,
.tarjetas{
    transition: opacity .25s ease;
}

.oculto{
    display:none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* REPORTES SOBRE EL MAPA */
.tarjetas {
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    z-index: 100;
    height: auto;
}

/* CARRUSEL REPORTES */
.scroll-horizontal-2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding: 0 15px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-bottom: 3rem;
}

.scroll-horizontal-2::-webkit-scrollbar {
    display: none;
}

/* TARJETA */
.card-reporte { 
    flex: 0 0 50%; 
    min-width: 75%; 
    max-width: 320px; 
    background: rgba(255,255,255,.90); 
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    scroll-snap-align: center;
    height: 200px;
}
    /* OCULTAR TARJETAS */
.tarjetas {
    transition: transform 0.4s ease, opacity 0.4s ease ;
}

/* Estado oculto básico (Celular / Mobile - se va para abajo) */
.tarjetas-ocultas {
    transform: translateY(120%);
    opacity: 0 ;
    pointer-events: none ;
}

/* Botón Cruz (cerrar) */
.btn-cerrar-tarjetas {
    position: absolute;
    top: -2.5rem; 
    left: 2rem;
    width: 32px;
    height: 32px;
    background: var(--blanco);
    color: var(--negro);
    border-radius: 50%;
    font-size: 22px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 101;
}

/* Botón Mostrar Reportes (Flotante en el mapa) */
.btn-abrir-tarjetas {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-complementario);
    color: var(--blanco);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 90;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* CONTENIDO */

.reporte-info {
    padding: 16px;
}

.reporte-info h3 {
    margin: 10px 0 6px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--negro);
}

/* UBICACIÓN */

.ubicacion-reporte {
    margin: 0 0 10px;
    font-size: .8rem;
    color: var(--gris-medio);
}

.ubicacion-reporte::before {
    content: "📍 ";
}

/* DESCRIPCIÓN */

.descripcion-reporte-campo {
    margin: 12px 0 12px;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--gris);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* FECHA */

.reporte-info small {
    display: inline-block;
    margin-top: 4px;
    font-size: .75rem;
    color: #999;
}

.reporte-info small::before {
    content: "🕒 ";
}

/* ESTADOS */

.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 14px;

    border-radius: 999px;

    color: var(--blanco);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.estado::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* COLORES */

.inaccesible {
    background: #E53935;
}

.parcial {
    background: #FB8C00;
}

.accesible {
    background: #43A047;
}

/* EFECTO DE PROFUNDIDAD */

.card-reporte:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
}

.card-reporte:active {
    transform: scale(.98);
}

/* FONDO SUAVE SOBRE EL MAPA */

.secciones::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: calc(100% + 30px);

    backdrop-filter: blur(4px);

    z-index: -1;
}

/* FIN MAPA */

/*POP UP UBICACION Y REPORTAR*/
.popup-reporte{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display:flex;
    align-items:flex-end;
    justify-content:center;
    z-index:2000;
}

.popup-contenido{
    width:100%;
    max-width:480px;
    background:var(--blanco);
    border-radius:30px 30px 0 0;
    padding:30px 20px;
    text-align:center;
    animation: subir .25s ease;
}


@keyframes subir{
    from{
        transform:translateY(100%);
    }
    to{
        transform:translateY(0);
    }
}

/*DETALLE DE REPORTE HECHO*/
.detalle-reporte{
    padding: 0;
    padding-bottom: 90px;
}

.imagen-detalle{
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.info-detalle{
    padding: 20px;
}

.cabecera-reporte h1{
    font-size: 1.4rem;
    margin: 10px 0 5px;
}

.fecha-reporte{
    color: #888;
    font-size: .9rem;
}

.texto-detalle{
    margin: 20px 0;
    line-height: 1.6;
}

.ubicacion-detalle{
    margin-top: 25px;
}

.ubicacion-detalle h3{
    margin-bottom: 10px;
}

.acciones-detalle{
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.voto {
    margin: 10px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

        /*PANTALLA DE INICIO*/
.pantalla-inicio {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%; 
    min-height: 100vh;
    padding: 100px;
    text-align: center;
    background-color: var(--blanco);
    overflow-x: hidden;
}
.logo-contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.logo-img {
    width: 200px; 
    height: auto;
    margin-bottom: 15px;
    display: block;
}
.logo-img-3 {
    width: 50px; 
    height: auto;
    display: block;
}

.descripcion-inicio {
    font-size: 1.1rem;
    color: var(--gris);
    line-height: 1.5;
    max-width: 320px; 
    margin-bottom: 80px; 
    text-align:center;
    margin:auto;
}
.ingresar{
    display: block;
    border-radius: 50px;
    background-color: var(--color-complementario);
    margin: -0.1rem;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--blanco);
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}


        /*MENU SUPERIOR*/
.menu {
    background-color: var(--color-principal);
    color: var(--blanco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    width: 100%;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/*PANEL SUPERIOR*/
.iconos-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}
.icono-usuario img{
    align-items: center;
    width: 40px;
    background-color: var(--blanco);
    border-radius: 100%;
}

.faq-logo {
    float: right;
}
.atras-logo{
    float: left;
    width: 18px;
}
.acciones{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

    /*HAMBURGESA - HECHA CON IA*/
.menu-btn {
    background: transparent;
    cursor: pointer;
    padding: 5px;
    position: relative;
    z-index: 2000;
}
.btn-linea {
    width: 25px;
    height: 3px;
    background: var(--blanco);
    margin: 5px 0;
    transition: .3s;
}
.menuVisible .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}
.menuVisible .btn-linea:nth-child(2) {
    opacity: 0;
}
.menuVisible .btn-linea:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}
.menu-desplegable {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background: var(--color-complementario);
    list-style: none;
    padding-top: 100px;
    transform: translateX(100%);
    transition: .3s ease;
    z-index: 900;
}
.menuVisible .menu-desplegable {
    transform: translateX(0);
}
.menu-desplegable a {
    display:flex;
    align-items:center;
    gap:12px;
    padding: 18px 25px;
    color: var(--blanco);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 800;
}
.overlay.activo {
    opacity: 1;
    visibility: visible;
}
.menuVisible + .overlay {
    opacity: 1;
    visibility: visible;
}



/* NOTICIAS */

.card {
    flex: 0 0 80%; 
    min-width: 80%;
    scroll-snap-align: start; 
    background-color: var(--blanco);
    border-radius: var(--borde-redondeado);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin: 10px;
}

.card-img {
    width: 100%;
    height: 150px;
    object-fit: cover; 
}

.card-video {
    width: 100%;
    height: 140px; 
    border: none;
    border-radius: 12px 12px 0 0;
    pointer-events: auto;
}


.info {
    padding: 12px;
}

.fecha, .ubicacion, .info-comunidad {
    font-size: 0.75rem;
    color: var(--gris-claro);
}

.titulo {
    font-size: 0.95rem;
    margin: 5px 0;
    line-height: 1.3;
}
.info-comunidad {
    font-size: 0.75rem;
    color: var(--gris-claro);
    word-break: break-word; 
    margin-top: 8px;
}

/* NOTICIAS - LISTA VERTICAL  */
.lista-vertical {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-lista {
    display: flex; 
    background-color: var(--blanco);
    border-radius: var(--borde-redondeado);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.lista-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.info-lista {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
        /*COMUNIDAD - ACTNOW*/

.scroll-horizontal-3 {
   display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    width: 100%;
}

.grilla-actnow {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 15px; 
    width: 100%;
}

.card-actnow {
    background-color: var(--blanco);
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); 
    display: flex;
    flex-direction: column;
}

.card-actnow .card-img {
    width: 100%;
    height: 140px; 
    object-fit: cover;
}

.card-actnow .titulo {
    font-size: 0.85rem; 
    font-weight: bold;
}

/*NOTAS COMPLETAS - SOFI*/

.scroll-horizontal {
    display: flex;
    gap: 15px;
    overflow-x: auto; 
    padding-bottom: 15px;
    scroll-snap-type: x mandatory; 
    width: 100%;
}
.contendor-imagenes {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}
.imagen-principal {
    width: 100%;
    height: 300px; 
    object-fit: cover; 
}
.indicadores {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.indicadores span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gris-medio);
}

.indicadores span.activo {
    background: var(--color-complementario);
}
.imagen-texto{
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}
.titulo-articulo h2 {
    font-size: 1.4rem;
    color: var(--negro);
    line-height: 1.35;
    margin-bottom: 20px;
    font-weight: 700;
}
.texto-articulo {
    font-size: 1.05rem;
    color: var(--gris);
    line-height: 1.55;
    margin-bottom: 24px;
}
.autor {
    font-size: 1.05rem;
    color: var(--negro);
    margin-bottom: 24px;
}
.autor a {
    color: var(--color-principal);
    text-decoration: underline;
    font-weight: 600;
    padding-bottom: 90px;
}

/*FAQ*/
.faq{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.faq-item{
    background:var(--blanco);
    border:none;
    border-radius:20px;
    padding:0 25px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    transition: box-shadow .3s ease,
                background-color .3s ease;
}

.faq-titulo{
    width:100%;
    background:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:22px 0;
    font-size:1.05rem;
    font-weight:700;
    text-align:left;
    cursor:pointer;
}

.faq-contenido{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease, padding .35s ease;
    padding:0;
}

.faq-contenido p{
    padding:0 0 22px;
    color:var(--gris-medio);
    line-height:1.7;
    font-size:.97rem;
}
.faq-item.activo{
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.faq-page{
    max-width:1100px;
    margin:0 auto;
}

.faq-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center; 
    padding:70px 20px;
    background:var(--blanco);
    border-radius:30px;
    margin-bottom:70px;
}

.faq-hero img{
    width:250px;
    margin-bottom:30px;
}

.hero-texto-faq h1{
    font-size:2.4rem;
    margin-bottom:20px;
}

.hero-texto-faq p{
    max-width:700px;
    color:var(--gris-medio);
    line-height:1.7;
    font-size:1.1rem;
}

.faq-titulo span{
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .3s ease;
}

.faq-titulo span img{
    width:20px;
    height:20px;
    display:block;
}
.faq-item.activo .faq-titulo span{
    transform:rotate(180deg);
}

.faq-item.activo{
    background:var(--blanco);
    box-shadow:0 12px 30px var(--color-secundario);
}

/*tarjetas faq*/
.faq-pasos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
    margin-bottom:70px;
    align-items:stretch;
}

.paso{

    background:var(--blanco);
    border-radius:22px;
    padding:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.paso:hover{
    transform:translateY(-6px);
}

.paso:nth-child(1){
    background:#eef6ff;
}

.paso:nth-child(2){
    background:#fff2ef;
}

.paso:nth-child(3){
    background:#eef8f1;
}

.paso:nth-child(4){
    background:#f5efff;
}

.paso-icono{
    font-size:2rem;
    margin-bottom:20px;
}

.paso h3{
   margin:20px 0 15px;
}

.paso p{
    margin-top:auto;
    line-height:1.6;
    color:var(--gris-medio);
}
/*buscador faq*/
.faq-buscador{
    margin-bottom:50px;
}

.faq-buscador input{
    width:100%;
    padding:18px 25px;
    border-radius:40px;
    background:var(--blanco);
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    font-size:1rem;
    outline:none;
}
/*iconos faq*/
.paso-icono{
    width:65px;
    height:65px;
    border-radius:18px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:2rem;
    margin-bottom:20px;
    background:var(--blanco);
}

.explorar::before{
    content:"🗺️";
}

.reporte::before{
    content:"⚠️";
}

.comunidad::before{
    content:"👥";
}

.verificar::before{
    content:"✔";
}

.peligro-icono::before{
    content:"🛑";
}

.obra-icono::before{
    content:"🚧";
}

.tic-icono::before{
    content:"✅";
}

/* LOGIN */
.imagen-login{
    display:block;
    width:70%;
    max-width:220px;
    margin:0 auto 20px;
}
.pantalla-login h2{
    text-align:center;
    margin-bottom:10px;
}

.form-login{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:30px;
}
.campo-login{
    width:100%;
    padding:15px 20px;
    border-radius:30px;
    background:var(--blanco);
    font-size:1rem;
    outline:none; 
}
.olvide{
    text-align:right;
    font-size:0.8rem;
    color:var(--gris-medio);
}
.btn-principal{
    width:100%;
    padding:15px;
    border-radius:30px;
    background:var(--color-complementario);
    color:var(--blanco);
    font-weight:bold;
    font-size:1rem;
    cursor:pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 40px auto 0 auto;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
.btn-principal:hover {
        transform: translateY(-1px);
}

.registro{
    text-align:center;
    font-size:0.9rem;
}
.registro a{
    color:var(--color-complementario);
    font-weight:bold;
}

.pantalla-dividida {
    width: 100%;
    display: flex;
    flex-direction: column; 
}
.redsocial{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

/*TIPO DE REPORTE*/
.opciones-reporte{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    max-width:250px;
    margin:30px auto;
    justify-content:center;
    align-items:center;

}
.tipo-reporte{
    background:var(--blanco);
    border-radius:18px;
    min-height:120px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:10px;

    text-decoration:none;
    color:var(--gris);
    box-shadow:0 3px 8px rgba(0,0,0,0.15);
    transition:0.2s;
}
.tipo-reporte:hover{
    transform:translateY(-2px);
    background-color: var(--color-complementario);
}
.tipo-reporte img{
    width:45px;
    height:45px;
    object-fit:contain;
}

/*PASOS DE REPORTE*/
.pasos{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:35px;
}

.pasos span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#d9d9d9;
    font-size:.8rem;
    font-weight:600;
    color:var(--gris);
}

.pasos .activo{
    background:var(--color-complementario);
    color:var(--blanco);
}

/*OPCIONES DESKTOP*/
.reporte-desktop{
    min-height: calc(100vh - 72px);
}
.reporte-desktop .bloque-ilustracion{
    background:#ececec;
}
.reporte-desktop .bloque-formulario{
    background:#f7f7f7;
    padding:50px;
}
.reporte-desktop .opciones-reporte{
    max-width:430px;
    grid-template-columns:repeat(3,1fr);
    
}
.reporte-desktop .tipo-reporte{
    min-height:170px;
}
.reporte-desktop .btn-principal{
    max-width:280px;
}
/*REPORTE*/

.pantalla-reporte h2{
    text-align:center;
    margin-bottom:10px;
}

.form-reporte{
    display:flex;
    flex-direction:column;
    gap:15px;
    margin-top:30px;
}
.campo-reporte{
    width:100%;
    padding:15px 20px;
    border-radius:30px;
    background:var(--blanco);
    font-size:1rem;
    outline:none; 
}

.descripcion-reporte{
    min-height:120px;
    resize:none;
    border-radius:20px;
}
.leyenda{
    text-align:center;
    font-size:0.8rem;
    color:var(--gris-medio);
    border-top: 2px solid var(--gris);
    padding-top: 10px;
}

.btn-secundario{
    width:100%;
    padding:15px;
    border-radius:30px;
    border:2px solid var(--color-principal);
    background:var(--blanco);
    color:var(--color-principal);
    font-size:1rem;
    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
}

.btn-secundario:hover{
    color: var(--blanco);
    background-color: var(--color-secundario);
}

.imagen-reporte{
    width: 140px;
    display:block;
    max-width:220px;
    margin:0 auto 20px;
}
.imagen-reporte-2{
    width: 250px;
    display:flex;
    margin:0;
    justify-content:center;
    align-items:center;
}
.imagen-reporte-3{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.bloque-ilustracion-tipo{
    overflow:hidden;
}
/*boton estado de reporte, dentro de completar reporte*/
.estado-opciones{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:10px;
}

.estado-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:14px 18px;
    border-radius:30px;
    background:var(--blanco);
    border:2px solid #ddd;
    cursor:pointer;
    transition:.2s;
    font-weight:600;
    transition:
        background .25s,
        color .25s,
        border-color .25s,
        transform .15s;
}

.estado-btn:hover{
    transform:translateY(-2px);
    background-color: var(--color-principal);
    color: var(--blanco);
}

.estado-btn:active{
    transform:scale(.96);
}

.estado-btn span{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
}

/*REPORTE REGISTRADO*/
    .reporte-registrado{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
    }

    .reporte-registrado h2{
        font-size:3rem;
        margin-bottom:1rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .descripcion-reporte-registrado{
        max-width:500px;
        font-size:1.2rem;
        line-height:1.5;
        margin-bottom:1rem;
    }

    .acciones-reporte{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1rem;
    }

    .acciones-reporte .btn-principal{
        padding:1rem;
        margin: 0;
        margin-bottom: 1rem;
    }

/* EVENTOS */

.eventos-destacados h2,
.eventos-mes h2{
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.filtros{
    display:flex;
    gap:.75rem;
    margin-bottom:1rem;
}

.filtros button{
    background:var(--blanco);
    border-radius:999px;
    padding:.6rem 1rem;
    font-size:.85rem;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    cursor:pointer;
}

.scroll-eventos{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:.5rem;
}

.scroll-eventos::-webkit-scrollbar{
    display:none;
}

.card-evento{
    min-width:220px;
    background:var(--blanco);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
    flex-shrink:0;
}

.card-evento img{
    width:100%;
    height:140px;
    object-fit:cover;
}

.info-evento{
    padding:.75rem;
}

.info-evento small{
    color:var(--gris-medio);
}

.info-evento h3{
    font-size:.95rem;
    margin:.3rem 0;
}

.info-evento p{
    font-size:.85rem;
    color:var(--gris-medio);
}

.eventos-mes{
    margin-top:2rem;
}

.grid-eventos{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}

.sumar-evento{
    background:#dcecff;
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:48px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-top:48px;
    margin-bottom:48px;
    border-radius:0;
}

.sumar-evento img{
    width:70px;
    margin-bottom:1rem;
}

.sumar-evento h2{
    margin-bottom:.75rem;
}

.sumar-evento p{
    color:var(--gris);
    margin-bottom:1.5rem;
}

.btn-evento{
    display:block;
    background:var(--color-principal);
    color:var(--blanco);
    padding:.9rem 2rem;
    border-radius:999px;
    font-weight:600;
}

.etiqueta{
    display:inline-block;
    background:var(--blanco);
    padding:.4rem .8rem;
    border-radius:999px;
    font-size:.8rem;
    font-weight:500;
    margin:.75rem;
}

.card-link{
    text-decoration:none;
    color:inherit;
    display:block
}

/* EVENTOS DETALLE */

.detalle-evento{
    width:min(100%,1200px);
    margin-inline:auto;
    background:#f6f6f6;
    min-height:100vh;
    padding:0;
}

.hero{
    position:relative;
    width:100vw;
    height:420px;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
}

.slider{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .5s ease;
}

.slide.activo{
    opacity:1;
}

.hero-texto{
    position:absolute;
    left:24px;
    bottom:36px;
    z-index:3;
    color:var(--blanco);
}

.hero-texto h1{
    font-size:2rem;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
}

.dots{
    position:absolute;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:3;
}

.dots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--blanco);
    opacity:.4;
}

.dots .activo{
    opacity:1;
}

.contenido-evento{
    background:#f6f6f6;
    max-width:1100px;
    margin:0 auto;
    border-radius:28px 28px 0 0;
    padding:32px 24px 80px;
    position:relative;
    z-index:2;
}

.titulo-seccion{
    font-size:1rem;
    line-height:1.3;
    margin:40px 0 18px;
}

.descripcion-evento{
    font-size:.95rem;
    line-height:1.6;
    color:#555;
    margin-bottom:35px;
}

.detalle-evento-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    margin-bottom:32px;
}

.detalle-evento-card summary{
    list-style:none;
    cursor:pointer;
    padding:18px 20px;
}

.detalle-evento-card summary::-webkit-details-marker{
    display:none;
}

.detalle-resumen{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.detalle-fecha{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
}

.detalle-fecha img{
    width:22px;
    height:22px;
}

.detalle-resumen::after{
    content:"⌄";
    font-size:1.2rem;
    transition:.3s ease;
}

.detalle-evento-card[open] .detalle-resumen::after{
    transform:rotate(180deg);
}

.detalle-contenido{
    padding:0 20px 20px;
    display:grid;
    gap:14px;
}

.horarios{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:20px;
    scroll-snap-type:x proximity;
}

.turno{
    min-width:140px;
    padding:18px;
    border:1px solid #dcdcdc;
    border-radius:16px;
    background:var(--blanco);
    scroll-snap-align:start;
}

.turno.activo{
    border:2px solid var(--color-principal);
}

.turno h3{
    font-size:1rem;
    margin-bottom:4px;
}

.turno p{
    color:#6A6A6A;
    line-height:1.5;
}

.seleccion-evento{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    border-top:1px solid #ececec;
    padding-top:24px;
}

.btn-comprar{
    background:var(--color-principal);
    color:var(--blanco);
    text-decoration:none;
    padding:14px 26px;
    border-radius:12px;
    font-weight:600;
    transition:.3s;
}

.btn-comprar:hover{
    background:#0f3a6b;
}

.ubicacion-evento{
    background:var(--blanco);
    border-radius:16px;
    padding:18px;
    display:flex;
    gap:15px;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.mini-mapa{
    width:58px;
    height:58px;
    border-radius:14px;
    object-fit:cover;
}

.validado{
    color:#5a8d4a;
    font-size:.75rem;
}

.grupo-accesibilidad{
    margin-bottom:1.5rem;
}

.categoria{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.75rem;
}

.categoria img{
    width:24px;
    height:24px;
}

.categoria h3{
    font-size:.95rem;
    font-weight:600;
}

.lista-accesibilidad{
    background:var(--blanco);
    border-radius:12px;
    padding:18px;
}

.lista-accesibilidad p{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.lista-accesibilidad p:last-child{
    margin-bottom:0;
}

.lista-accesibilidad p img{
    width:15px;
}

.opiniones{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:48px;
}

.opiniones article{
    text-align:center;
}

.avatar{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    display:block;
    margin:0 auto 12px;
}

/* Otros eventos mobile: carrusel */

.detalle-evento .grid-eventos{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    width:100%;
    padding:0 0 14px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.detalle-evento .grid-eventos::-webkit-scrollbar{
    display:none;
}

.detalle-evento .evento-mini{
    flex:0 0 72%;
    max-width:230px;
    min-width:190px;
    background:var(--blanco);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
    scroll-snap-align:start;
}

.detalle-evento .evento-mini img{
    width:100%;
    height:115px;
    object-fit:cover;
    display:block;
}
.evento-mini span{
    display:block;
    padding:.75rem;
    font-weight:600;
}

.evento-mini img{
    width:100%;
    height:120px;
    object-fit:cover;
}

.evento-mini h3{
    font-size:.9rem;
    padding:.75rem .75rem .2rem;
}

.evento-mini p{
    font-size:.8rem;
    color:var(--gris-medio);
    padding:0 .75rem .75rem;
}

.legal{
    margin-top:60px;
    background:#ececec;
    border-radius:18px;
    padding:20px;
}

.legal p{
    font-size:.8rem;
    line-height:1.6;
    color:#555;
}

/*FOOTER*/
footer {
    background-color: var(--color-principal);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    z-index: 1000; 
}

.botones {
    display: flex;
    height: 100%;
    justify-content: space-around;
    align-items: center;
}
.item {
    text-decoration: none;
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    width: 25%;
    height: 100%;
    text-align: center;
}

.item img{
    width: 30px;
}


/* ICONOS DETALLES Y ACCESIBILIDAD - MOBILE Y DESKTOP */

/* Calendario en "Detalles del evento" */
main.detalle-evento .detalle-fecha img{
    width:58px ;
    height:58px ;
    min-width:44px ;
    object-fit:contain;
    display:block;
}

/* Íconos de "Accesibilidad del evento" */
main.detalle-evento .grupo-accesibilidad .categoria{
    display:flex ;
    align-items:center ;
    gap:18px ;
}

main.detalle-evento .grupo-accesibilidad .categoria img{
    width:78px ;
    height:78px ;
    min-width:72px ;
    object-fit:contain ;
    display:block ;
}

/* Checks dentro de las listas */
main.detalle-evento .grupo-accesibilidad .lista-accesibilidad p{
    display:flex;
    align-items:center;
    gap:16px;
}

main.detalle-evento .grupo-accesibilidad .lista-accesibilidad p img{
    width:48px;
    height:48px;
    min-width:38px;
    object-fit:contain;
    display:block;
}

/* UNIFICACIÓN GENERAL */

/* Márgenes iguales para páginas internas */
.pagina{
    width:min(100%,1100px);
    margin-inline:auto;
    padding:32px 24px 100px;
}

.pagina section{
    margin-bottom:48px;
}

.pagina h2,
.titulo-seccion{
    font-size:1.2rem;
    line-height:1.3;
    margin-bottom:18px;
}

/* Acciones superiores: volver + FAQ */
.pagina .acciones{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:28px;
}

.pagina .acciones a{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--negro);
    font-size:.9rem;
    font-weight:600;
}

.pagina .acciones img{
    width:22px;
    height:22px;
    object-fit:contain;
}


/* TITULOS PRINCIPALES UNIFICADOS */

.pagina .titulo-pagina,
main .titulo-pagina{
    font-size:1.6rem ;
    line-height:1.2 ;
    font-weight:700 ;
    color:var(--negro);
    margin:0 0 24px;
    padding:0 ;
}


/* FONDOS DESTACADOS UNIFICADOS */

/* El bloque mantiene los márgenes del contenido */
.bloque-destacado{
    position:relative  ;
    width:100%  ;
    max-width:none  ;
    margin-left:0  ;
    margin-right:0  ;
    margin-bottom:48px  ;
    padding:34px 0 42px  ;
    background:transparent  ;
    border-radius:0  ;
    z-index:1;
}

/* El rectángulo de color ocupa toda la pantalla */
.bloque-destacado::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    background:var(--fondo-destacado);
    z-index:-1;
}

/* Colores distintos */
.fondo-eventos{
    --fondo-destacado:var(--color-secundario);
}

.fondo-noticias{
    --fondo-destacado:var(--color-boton);
}

.fondo-comunidad{
    --fondo-destacado:var(--color-complementario);
}

/* Títulos alineados con las cards */
.bloque-destacado .titulo-pagina{
    width:100% ;
    max-width:none ;
    margin:0 0 24px 0 ;
    padding:0 ;
    font-size:1.6rem  ;
    line-height:1.2 ;
    font-weight:700 ;
    color:var(--negro) ;
}

/* Anula reglas viejas que deformaban noticias y comunidad */
.bloque-destacado.secciones-noticias:first-of-type,
.bloque-destacado.secciones:first-of-type{
    margin-left:0 ;
    margin-right:0 ;
    padding:34px 0 42px ;
    background:transparent ;
}

/* Anula título viejo de noticias y comunidad */
.bloque-destacado.secciones-noticias:first-of-type h2,
.bloque-destacado.secciones:first-of-type h2{
    max-width:none ;
    margin:0 0 24px 0 ;
    padding:0  ;
    color:var(--negro) ;
}


/* NOTA SOFÍA */

.pagina-nota{
    width:min(100%,1100px);
    margin-inline:auto;
    padding:32px 24px 100px;
}

/* Texto principal de la nota más cómodo para leer */
.pagina-nota .titulo-articulo{
    max-width:760px;
    margin:0 auto;
}

/* La sección relacionada vuelve al ancho general,
   igual que "Otros eventos" en eventos-detalles */
.pagina-nota .relacionadas-nota{
    width:100%;
    max-width:1100px;
    margin:60px auto 0;
}

.pagina-nota .relacionadas-nota .titulo-seccion{
    margin:40px 0 18px  ;
}

/* Cards relacionadas como "Otros eventos" */
.pagina-nota .relacionadas-nota .grid-eventos{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:14px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}

.pagina-nota .relacionadas-nota .grid-eventos::-webkit-scrollbar{
    display:none;
}

.pagina-nota .relacionadas-nota .evento-mini{
    flex:0 0 72%;
    max-width:230px;
    min-width:190px;
    scroll-snap-align:start;
}

/* Legal igual al resto */
.pagina-nota .legal{
    margin-top:60px;
}


/* BOTONES UNIFICADOS SOLO EN EVENTOS, NOTICIAS Y COMUNIDAD */

.pagina-eventos .btn-evento,
.pagina-noticias .btn-principal,
.pagina-comunidad .btn-principal,
.detalle-evento .btn-comprar,
.detalle-evento .btn-evento{
    display:flex  ;
    align-items:center  ;
    justify-content:center  ;
    background:var(--color-boton)  ;
    color:var(--blanco)  ;
    padding:.9rem 2rem  ;
    border-radius:999px  ;
    font-weight:700  ;
    font-size:1rem  ;
    text-align:center  ;
    text-decoration:none  ;
    min-height:48px  ;
    cursor:pointer  ;
    transition:.2s ease  ;
}

.pagina-eventos .btn-evento:hover,
.pagina-noticias .btn-principal:hover,
.pagina-comunidad .btn-principal:hover,
.detalle-evento .btn-comprar:hover,
.detalle-evento .btn-evento:hover{
    transform:translateY(-2px);
    background:var(--color-hoverboton)  ;
}

/* Botones centrados en páginas principales */
.pagina-eventos .btn-evento,
.pagina-noticias .btn-principal,
.pagina-comunidad .btn-principal{
    width:min(100%,280px)  ;
    margin:40px auto 0  ;
}

/* Comprar entrada */
.detalle-evento .btn-comprar{
    width:auto  ;
    margin:0  ;
}


@media (min-width:200px){
    .logo-img-2, .logo-img-4{
        display: none;
    }
}


                        /*TABLET*/

@media (min-width:768px){

    .logo-img, .logo-img-4{
        display: none;
    }
    .logo-img-2{
        display: block;
        width: 90%;
        justify-content: center;
    }

    /*Para que no se salgan del margen horizontal*/
    html, body {
        overflow-x: hidden;
    }
    /* Ocupa todo el alto disponible restando solo el header */
    .mapa {
        height: calc(100vh - 72px); 
    }

    /* MENU, ICONOS Y FOOTER */
    .menu-btn {
    display: none;
    }

    /*Titulos principales*/

    .pagina .titulo-pagina,
    main .titulo-pagina{
        font-size:2rem  ;
        margin-bottom:32px  ;
    }
    
    .menu-desplegable {
        position: static;          
        transform: translateX(0);  
        width: auto;
        height: auto;
        background: transparent;   
        display: flex;             
        flex-direction: row;
        gap: 20px;                
        padding-top: 0;            
        transition: none;
    }

    /* Quita la línea separadora del diseño mobile */
    .menu-desplegable a {
        padding: 8px 12px;
        border-bottom: none;       
        font-size: 1rem;
        font-weight: 500;
        color: var(--blanco);
        border-radius: var(--borde-redondeado);
        transition: background-color 0.2s ease;
    }
    .menu-desplegable a:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }
    
    .iconos-menu {
        flex-direction: row-reverse; 
        gap: 25px;
    }
    .icono-usuario{
        display: none;
    }
    footer{
        display: none;
    }
    .acciones{
        display: none;
    }

    /* NOTICIAS */
    .contenedor-destacadas {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px;                             
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px 0;
    }

    .contenedor-destacadas .card {
        min-width: auto;
        margin: 0;
        background-color: var(--blanco);      
        border-radius: 16px;                   
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        padding: 12px;
        height: auto;                         
    }

    .contenedor-destacadas .card-img {
        height: 280px;                        
        object-fit: cover;
        border-radius: 12px;           
    }

    .contenedor-destacadas .info {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .contenedor-destacadas .titulo {
        font-size: 1.15rem;                   
        font-weight: 700;
        color: var(--negro);
    }
    /*fondo celeste */ 
    .secciones-noticias:first-of-type {
        background: linear-gradient(to bottom, #d0e7ff 70%, transparent 70%);
        margin-left: -15px;        
        margin-right: -15px;       
        padding: 30px 20px 10px 20px;       
    }

    .secciones-noticias:first-of-type h2 {
        max-width: 1200px;
        margin: 0 auto 25px auto;
        font-size: 1.8rem;
        padding-left: 10px;          
    }

    .lista-vertical{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:20px;
    }

    .card-lista {
        flex-direction: column; 
        background-color: var(--blanco);
        border-radius: var(--borde-redondeado);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        height: 100%; 
    }

    .lista-img {
        width: 100%;
        height: 160px; 
        object-fit: cover;
    }

    .info-lista {
        padding: 15px;
        gap: 5px;
    }

    /*NOTA SOFI*/

    .scroll-horizontal {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 20px;
        overflow-x: visible; 
        max-width: 900px;    
        margin: 30px auto;
        padding: 0 20px;
    }

    .scroll-horizontal img{
        height: 350px;
    }

    .indicadores {
        display: none;
    }

    
    /* COMUNIDAD */

    .card-video {
        height: 160px; 
    }
    
    .secciones:first-of-type {
        background-color: #8faec4; 
        margin: 0 -100px 40px -100px;        
        padding: 40px 100px 50px 100px;      
    }

    .secciones:first-of-type h2 {
        font-size: 2.2rem;
        color: var(--blanco);
        font-weight: 700;
        margin-bottom: 25px;
    }

    .scroll-horizontal-3 {
        display: grid;
        grid-template-columns: repeat(4, 1fr); 
        gap: 20px;                             
        width: 100%;
        overflow-x: visible; 
        padding: 0;
        background: none;
    }

    .scroll-horizontal-3 .card {
        min-width: auto;
        margin: 0;
        background-color: var(--blanco);      
        border-radius: 16px;                   
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        padding: 12px;
        height: auto;
    }

    .scroll-horizontal-3 .card-img {
        height: 160px;                        
        object-fit: cover;
        border-radius: 12px;          
    }

    .scroll-horizontal-3 .info {
        padding: 10px 4px 4px 4px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .scroll-horizontal-3 .info p:first-child {
        color: var(--gris-claro);
        font-size: 0.8rem;
        text-transform: uppercase;
        font-weight: 600;
    }

    .scroll-horizontal-3 .titulo {
        font-size: 1.05rem;                   
        font-weight: 700;
        color: var(--negro);
        margin: 2px 0;
    }

    .scroll-horizontal-3 .info-comunidad {
        font-size: 0.9rem;
        color: var(--gris);
        margin-top: 2px;
    }

        /*SECCIÓN #ActNow*/
    .secciones:last-of-type h2 {
        font-size: 1.8rem;
        color: var(--negro);
        font-weight: 700;
        margin-bottom: 5px;
    }

    .secciones:last-of-type p {
        font-size: 1rem;
        color: var(--gris-medio);
        margin-bottom: 25px;
    }

    /* Transformacion grilla en carrusel*/
    .grilla-actnow {
        display: flex;                  
        gap: 20px;
        overflow-x: auto;               
        scroll-snap-type: x mandatory;   
        padding-bottom: 15px;           
        width: 100%;
        scrollbar-width: thin;          
    }

    .card-actnow {
        flex: 0 0 calc(25% - 15px);     
        min-width: 230px;               
        scroll-snap-align: start;       
        border-radius: 12px;
        background: transparent;
        box-shadow: none;
    }

    .card-actnow .card-img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1; 
        border-radius: 12px;
        object-fit: cover;
    }

    /* Boton sumarme */
    .btn-principal {
        max-width: 280px;
        
    }

/*INICIAR SESION*/

    main.pantalla-login {
        padding: 0;
        max-width: none;
        width: 100%;
    }

    .pantalla-login .acciones {
        display: flex; 
        position: absolute;
        top: 90px;
        left: 20px;
        z-index: 10;
    }

    .pantalla-dividida {
        display: flex;
        flex-direction: row;
        min-height: calc(100vh - 72px); 
        width: 100%;
    }

    .bloque-ilustracion {
        flex: 1;
        background-color: #cee3f8; 
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
    }

    .bloque-ilustracion .imagen-login {
        width: 100%;
        max-width: 450px; 
        height: auto;
        display: block;
        margin: 0;
    }

    .bloque-ilustracion-reporte{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:2rem;
    padding:4rem;
    background-color: #cee3f8;
}

.bloque-ilustracion-reporte h2{
    font-size:3rem;
    max-width:400px;
}

.bloque-ilustracion-reporte p{
    max-width:500px;
    font-size:1.25rem;
    line-height:1.6;
    color:var(--gris);
    margin: 0;
}


    .bloque-formulario {
        flex: 1;
        background-color: #f4f4f4; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 40px;
    }

    .descripcion-inicio, .form-login {
        width: 100%;
        max-width: 400px;
    }
    
    .bloque-destacado{
        padding:48px 0 56px ;
        margin-bottom:64px ;
    }

    .bloque-destacado.secciones-noticias:first-of-type,
    .bloque-destacado.secciones:first-of-type{
        padding:48px 0 56px ;
    }

    .bloque-destacado .titulo-pagina{
        font-size:2rem ;
        margin-bottom:32px ;
    }
    .pagina-nota{
        padding:40px 32px 110px;
    }

    .pagina-nota .relacionadas-nota .grid-eventos{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;
        overflow:visible;
        padding-bottom:0;
    }

    .pagina-nota .relacionadas-nota .evento-mini{
        min-width:0;
        max-width:none;
        flex:initial;
    }
}

    /*REPORTE REGISTRADO*/
    .reporte-registrado{
        min-height: calc(100vh - 80px);
        padding:4rem 2rem;
    }

    .imagen-reporte-2{
        width:320px;
        margin-bottom:2rem;
    }

    .acciones-reporte{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:1rem;
    }

    .acciones-reporte .btn-principal{
        width:280px;
        padding:1rem;
    }




                                    /*DESKTOP*/
@media (min-width:1200px){

    .logo-img-3{
        display: none;
    }
    .logo-img-4{
        display: block;
        width: 90%;
        justify-content: center;
    }

    .btn-reportar-waze {
        bottom: 30px; 
    }
    .titulo-articulo{
        max-width:900px;
        margin:auto;
    }

    .imagen-principal{
        height:200px;
    }
    .tarjetas{
        width:350px;
        left:20px;
        top:100px;
        bottom:auto;
    }

.scroll-horizontal{
    grid-template-columns: repeat(6, 1fr);   
    }

    .imagen-principal {
        height: 360px; 
        object-fit: cover; 
    }

    .scroll-horizontal-2{
        flex-direction:column;
        overflow-y:auto;
        overflow-x:hidden;
        max-height:70vh;
    }

.comunidad-principal{
        display:grid;
        grid-template-columns:repeat(4,1fr);
    }

    .lista-vertical{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }
    .lista-img {
        width: 100%;
        height: 220px; 
        object-fit: cover;
    }
    
    /*DETALLE REPORTE*/

.detalle-reporte {
        display: flex;             
        flex-direction: row;       
        justify-content: center;  
        align-items: stretch;     
        
        max-width: 900px;          
        width: 90%;                
        margin: 40px auto 110px auto; 
        padding: 24px;
        
        background-color: var(--blanco);
        border-radius: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        gap: 40px;                 
    }

    .imagen-detalle {
        flex: 0 1 50%;             
        width: 50%;
        max-height: 450px;         
        object-fit: cover;         
        border-radius: 18px;
    }

    .info-detalle {
        flex: 0 1 50%;            
        width: 50%;
        padding: 0;                
        
        display: flex;
        flex-direction: column;
        justify-content: space-between; 
    }

    .acciones-detalle {
        margin-top: auto;         
        margin-bottom: 15px;
    }

/* EVENTOS DETALLE DESKTOP */

.detalle-evento .grid-eventos{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    overflow:visible;
    padding-bottom:0;
}

.detalle-evento .evento-mini{
    min-width:0;
    max-width:none;
    flex:initial;
}

.detalle-evento .contenido-evento{
    padding:40px 32px 90px;
}

.detalle-evento .hero-texto{
    left:48px;
}

.detalle-evento .hero-texto h1{
    font-size:3rem;
}

/*FAQ*/
.faq-hero{
    flex-direction:row;
    justify-content:center;
    gap:70px;
    text-align:left;
}

.faq-hero img{
    width:340px;
    margin:0;
}

.hero-texto{
    max-width:600px;
}

.hero-texto h1{
    font-size:3rem;
}
.faq-pasos{
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap:30px;
    align-items:stretch;
}

.paso{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:240px;
    padding:28px;
}

/* Estado oculto en Desktop (se va para la izquierda) */
    .tarjetas-ocultas {
        transform: translateX(-150%) translateY(0);
    }
    
    /* REPOSICIONAMOS LA CRUZ EN ESCRITORIO */
    .btn-cerrar-tarjetas {
        top: 0px;      
        left: 22rem;     
        right: -15px;   
    }
    
    /* Botón de "Mostrar reportes" en escritorio */
    .btn-abrir-tarjetas {
        left: 20px;
        top: 100px;
        bottom: auto;
        transform: none; 
    }

}