@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800;900&display=swap');

:root {
    --color-rosa: #F3ADDF;
    --color-amarillo-patito: #ffd52c;
    --color-verde: #59b174;
    --color-amarillo-oscuro: #FEB300;
    --color-rojo: #FF4649; 
    --color-celeste: #47BFE1;
    --color-azul: #3C66AE;
    --color-fondo: #FFFFFF;
    --color-texto: #000000; 
    --color-borde: #000000;
    
    --gradiente-primario: linear-gradient(90deg, #59B174 0%, #F9BD27 100%);
    --gradiente-secundario: linear-gradient(90deg, #F8B22C 0%, #F3ADDF 100%);
    
    --fuentes-global: "Poppins", sans-serif;
    --tamaño-titulo-principal: 33px;
    --tamaño-titulo-grande: 26px;
    --tamaño-titulo-mediano: 20px;
    --tamaño-texto-normal: 16px;
    --tamaño-texto-chico: 14px;

    --grosor-borde: 3px;
    --sombra-neobrutalistas: 5px 5px 0px #000000;
}

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

/* TRUCHOMETRO */
body {
    background-color: var(--color-fondo);
    font-family: var(--fuentes-global);
    color: var(--color-texto);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

main {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1; /* Empuja al footer al fondo si hay poco contenido */
}

/* --- HEADER --- */
  header{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background-color: var(--color-rosa);
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    padding: 15px 20px;
    height: 75px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000; /* Prioridad alta */
    height: 75px;
    
}
.app-header {
   width: 100%; /* Ocupa todo el ancho */
    height: 75px;
    background-color: var(--color-rosa);
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    position: fixed; /* Lo fija arriba */
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.boton-menu {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 5px;
}

.boton-menu span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #000;
    border: 1px solid #000;
}
.menu_desplegable{
    position: fixed;
    top: 15px;
    left: 50%;
    width: calc(100% - 20px);
    max-width: 412px;
    background-color: var(--color-rosa); 
    border: var(--grosor-borde) solid var(--color-borde);
    z-index: 3000;
    transform: translate(-50%, -150%);
    transition: transform 0.4s steps(4);
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.menu_desplegable.active { 
    transform: translate(-50%,0);
}

.menu-header-cerrar{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.button_cerrar{
    background: none;
    border: none;
    font-size: 2.5rem;
    font-weight: 800;
    cursor:pointer;
}
.menu_links{
    list-style: none;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.menu_links a{
    color: var(--color-texto);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 900;
}
.menu-overlay { 
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2500;
    display:none;
}
.menu-overlay.active {display:block;}
@media (min-width: 768px) {
    /* --- CONTENEDOR PRINCIPAL DEL HEADER --- */
    header, .app-header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; 
        align-items: center !important; /* Centrado vertical perfecto */
        height: 75px !important; /* Mantiene la altura fija de tu diseño */
        padding: 0 24px !important; 
        box-sizing: border-box !important;
        overflow: hidden !important; /* Evita que cualquier cosa se asome por abajo */
    }

    /* --- BOTÓN HAMBURGUESA --- */
    .boton-menu {
        display: none !important;
    }

    /* --- EL CONTENEDOR DEL MENÚ (AHORA INTEGRADO) --- */
    .menu_desplegable {
        position: static !important; 
        transform: none !important; 
        transition: none !important;
        width: auto !important;
        max-width: none !important;
        background: none !important; 
        border: none !important; 
        padding: 0 !important;
        margin: 0 !important;
        margin-left: auto !important; /* Empuja todo el bloque a la derecha */
        
        display: flex !important;
        align-items: center !important; /* Centra verticalmente el contenido */
        height: 100% !important; /* Ocupa el alto del header para heredar el centrado */
    }

    /* --- OCULTAR LA CRUZ DE MOBILE --- */
    .menu-header-cerrar,
    .button_cerrar,
    .menu_desplegable .menu-header-cerrar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .menu-overlay {
        display: none !important;
    }

    /* --- LA LISTA DE ENLACES --- */
    .menu_links {
        margin: 0 !important; /* Resetea el margin-top: 40px de mobile */
        padding: 0 !important;
        display: flex !important;
        flex-direction: row !important; /* Botones en fila india */
        gap: 12px !important; /* Espaciado entre botones */
        list-style: none !important;
        align-items: center !important; /* Centra los li verticalmente */
        height: auto !important;
    }

    .menu_links li {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- BOTONES ESTILO NEOBRUTALISTA --- */
    .menu_links li a {
        margin: 10px 10px;
        display: inline-block !important;
        /* Achicamos levemente el padding vertical para que no toque los bordes del header */
        padding: 6px 14px !important; 
        background-color: var(--color-fondo) !important; 
        border: var(--grosor-borde) solid var(--color-borde) !important; 
        box-shadow: var(--sombra-neobrutalistas) !important; 
        font-size: var(--tamaño-texto-chico) !important; /* Se adapta mejor si son muchos botones */
        font-weight: 800 !important;
        text-decoration: none !important;
        color: var(--color-texto) !important;
        white-space: nowrap !important; /* Evita saltos de línea internos */
    }

    /* Efecto Click */
    .menu_links li a:active {
        transform: translate(2px, 2px) !important;
        box-shadow: 2px 2px 0px #000000 !important;
    }
    @media (min-width: 768px) {
    /* --- CONTENEDOR PRINCIPAL DEL HEADER (CORRECCIÓN DE SCROLL) --- */
    header, .app-header {
        /* Cambiamos fixed por absolute para que suba con el scroll de la página */
        position: absolute !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;

        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; 
        align-items: center !important; 
        height: 75px !important; 
        padding: 0 24px !important; 
        box-sizing: border-box !important;
        overflow: hidden !important; 
    }
}
}
/* --- NOTICIA DE HOY (TICKER) --- */
.noticia-hoy {
    margin-block-start: 80px;
    display: grid;
    grid-template-columns: max-content 1fr;
    border: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-fondo);
}

.fecha-de-hoy {
    background-color: var(--color-rosa);
    padding: 10px 14px;
    font-weight: 800;
    font-size: 16px;
    border-right: var(--grosor-borde) solid var(--color-borde);
    display: grid;
    place-items:center;
}

.fecha-de-hoy-noticia {
    margin: auto;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space:nowrap;
    position: relative;
    width: 100%;
    
}
.marquesina-animada{
    display: inline-block;
    padding-left: 100%;
    animation: moverNoticia 15s linear infinite;
}
.marquesina-animada p{
    margin:0;
    display:inline;
}

@keyframes moverNoticia{
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0)
    }
}
/* --- SECCIÓN BIENVENIDA (SUPERPOSICIÓN EXACTA) --- */
.bienvenida {
    position: relative;
     /* Margen para que el subcartel flotante no pise la sección de abajo */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.cartel-bienvenida {
    background-color: var(--color-amarillo-oscuro);/* Amarillo patito del prototipo */
    border: var(--grosor-borde) solid var(--color-borde); /* Te faltaba el borde negro */
    padding: 24px 16px;
    box-shadow: var(--sombra-neobrutalistas);
    z-index: 1;
    grid-column: 1;
    grid-row: 1;
}

.cartel-bienvenida h1 {
    font-size: 2.2rem; /* Agrandamos el tamaño para que sea imponente */
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #000000;
}

.subcartel-bienvenida {
    background-color: var(--color-fondo);
    border: var(--grosor-borde) solid var(--color-borde);
    padding: 10px 12px;
    box-shadow: var(--sombra-neobrutalistas);
    grid-column: 1;
    grid-row: 1;
    position: absolute;
    z-index: 5;
    bottom: -60px;
    right: -10px;
    width: 78%;
    min-width: 293px;
}

.subcartel-bienvenida h2 {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

/* --- SECCIÓN TRUCHÓMETRO (RELOJ Y INPUT) --- */
.truchometro {
    border: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-fondo);
    padding: 24px 16px;
    box-shadow: var(--sombra-neobrutalistas);
    margin-top: 60px;
    display:grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
}

.reloj-truchometro {
    border: var(--grosor-borde) solid var(--color-borde);
    background: var(--color-fondo);
    margin-bottom: 16px;
    width: 250px;
    display: grid;
    place-items: center;
    box-shadow: 4px 4px 0px #000000;
}

.reloj-truchometro img {
    width: 100%;
    max-width: 190px;
    height: auto;
}

.truchometro h2 {
    margin-block-end:0;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
}

.truchometro p {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 20px;
}

.truchometro input[type="text"] {
    width: 100%;
    border: var(--grosor-borde) solid var(--color-borde);
    padding: 10px;
    font-family: var(--fuentes-global);
    font-size: 14px;
    font-weight: 600;
    background-color: #FFF5F8; 
    margin-bottom: 20px;
    outline: none;
}

.btn-enviar {
    background: var(--gradiente-secundario);
    border: var(--grosor-borde) solid var(--color-borde);
    padding: 5px 40px;
    font-family: var(--fuentes-global);
    font-size: var(--tamaño-texto-normal);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--sombra-neobrutalistas);
    transition: transform 0.1s ease;
}

.btn-enviar:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000000;
}

/* --- SECCIÓN LO ÚLTIMO (TABLA BRUTALISTA) --- */
.ultimo-truchometro {
    box-shadow: var(--sombra-neobrutalistas);
    border: var(--grosor-borde) solid var(--color-borde);
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: 1fr;
}

.titulo-ultimo-truchometro {
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-fondo);
    padding: 12px;
    display: grid;
    place-items: center;
}

.titulo-ultimo-truchometro h2 {
    font-size: 18px;
    font-weight: 800;
}

.lista-ultimo-truchometro ul {
    list-style: none;
}

.lista-ultimo-truchometro li {
    display: flex;
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-fondo);
    font-size: 14px;
    font-weight: 600;
    align-items: center;
}

.lista-ultimo-truchometro li:last-child {
    border-bottom: none;
}

/* Estilo para los números si usás la estructura de <span> sugerida */
.lista-ultimo-truchometro li span {
    padding: 14px;
    font-size: 40px;
    font-weight: 800;
    border-right: var(--grosor-borde) solid var(--color-borde);
    min-width: 88px;
    text-align: center;
}

.lista-ultimo-truchometro li p {
    padding-inline: 10px;
    font-size: var(--tamaño-texto-chico);
    line-height: 1.3;
    font-weight: 200;
}

/* --- FOOTER --- */
footer {
    background-color: var(--color-amarillo-patito);
    border-top: var(--grosor-borde) solid var(--color-borde);
    padding: 24px 16px;
    margin-top: auto; /* Se queda abajo de todo si la pantalla es muy alta */
}

footer h4 {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
}

footer p {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    text-align: justify;
}
.bloque-video {
  background-color: #ffffff;
  border: var(--grosor-borde) solid var(--color-borde);
  box-shadow: var(--sombra-neobrutalistas);
  margin-top: 40px; /* Separación en móvil */
  overflow: hidden; /* Evita que el video tape las esquinas del borde */
  display: flex;
}

/* Hace que el video o iframe sea 100% responsive */
.bloque-video video,
.bloque-video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* Mantiene la proporción clásica de video */
  object-fit: cover;   /* Se asegura de que llene bien el espacio */
}
.noticia-hoy {
  order: 1; /* Primero de todo */
}

.bloque-video {
  order: 2; /* 👇 El video se posiciona segundo, arriba de la bienvenida */
}

.bienvenida {
  order: 3; /* Tercero */
}

.truchometro {
  order: 4; /* Cuarto */
}

.ultimo-truchometro {
  order: 5; /* Quinto */
}
/* ==========================================================================
   SOLUCIÓN DEFINITIVA: MOBILE FIRST (MÓVIL)
   ========================================================================== */

/* 1. Activamos Grid en tu contenedor real solo para ordenar los bloques */
#vista-inicio {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 45px !important; /* Separa de forma limpia tus sombras en móvil */
}

/* 2. Forzamos el orden en el Grid que acabamos de activar */
.noticia-hoy        { grid-row: 1 !important; }
.bloque-video       { grid-row: 2 !important; margin-top: 0 !important; }
.bienvenida         { grid-row: 3 !important; margin-top: 0 !important; }
.truchometro        { grid-row: 4 !important; margin-top: 0 !important; }
.ultimo-truchometro { grid-row: 5 !important; margin-top: 0 !important; }


/* ==========================================================================
   RE-ESTRUCTURACIÓN DE TU MEDIA QUERY EXISTENTE (ESCRITORIO)
   ========================================================================== */


/* ==========================================================================
   CSS PARA LAS PANTALLAS DE RESULTADOS (MAQUETADO CON GRID)
   ========================================================================== */

/* Contenedores principales de cada sección */
.resultado-noticia, 
.por-que-verdadera, 
.por-que-trucha, 
.por-que-falta-info, 
.fuentes-confiables, 
.usuarios-comentarios {
    background-color: var(--color-fondo);
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    margin-bottom: 24px;
    
    /* Cambiado a Grid */
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.resultado-noticia{
    margin: 40px 0px;
    padding-block: 20px;
}
.truchometro{
    margin: 40px 0px;
}
#resultado-verdad .completamente-verdad{
    font-size: large;
    font-weight: 800;
}

/* --- 1. TARJETA PRINCIPAL ("TU NOTICIA ES...") --- */
.tu-noticia-es {
    display: grid;
    grid-template-columns: 1fr;
}


.tu-noticia-es h2 {
    font-size: x-large;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    padding-bottom: 12px;
    margin-bottom: 4px;
}

/* Contenedor del reloj / velocímetro */
.truchometro-verdad, .truchometro-falso, .truchometro-falta-info {
    display: grid;
    place-items: center;
}

.truchometro-verdad img, .truchometro-falso img, .truchometro-falta-info img {
    max-width: 225px;
    height: auto;
}

/* Lista de opciones tipo Radio Button */
.lista-resultados {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding-left: 20px;
}

.lista-resultados li {
    font-size: var(--tamaño-texto-normal);
    display: grid;
    /* Columna fija para el círculo y el resto para el texto */
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 12px;
}

/* Círculos de opción simulados */
.lista-resultados li::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    border: var(--grosor-borde) solid var(--color-borde);
    border-radius: 50%;
    background-color: var(--color-fondo);
}

.lista-resultados li::after{

  position: absolute;
  
  left: 4px; 
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  
  width: 50px;
  height: 40px;
  background-color: #000; 
  
  
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20h2v-8H2v8zm19-7c0-.55-.45-1-1-1h-5.63l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 5 7.59 11.59C7.22 11.95 7 12.45 7 13v6c0 1.1.9 2 2 2h7c.75 0 1.41-.41 1.75-1.03l3.07-7.17c.11-.25.18-.53.18-.8V13z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20h2v-8H2v8zm19-7c0-.55-.45-1-1-1h-5.63l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 5 7.59 11.59C7.22 11.95 7 12.45 7 13v6c0 1.1.9 2 2 2h7c.75 0 1.41-.41 1.75-1.03l3.07-7.17c.11-.25.18-.53.18-.8V13z'/%3E%3C/svg%3E");
  
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
/* Pintamos el círculo correcto según el ID de la pantalla */
#resultado-verdad .lista-resultados li:last-child::before { background-color: var(--color-verde); }
#resultado-trucha .lista-resultados li:first-child::before { background-color: var(--color-rojo); }
#resultado-falta-info .lista-resultados li:nth-child(2)::before { background-color: var(--color-amarillo-oscuro); }


/* --- 2. LISTAS DE POR QUÉ (ÍCONOS CUADRADOS) --- */
.por-que-verdadera h2, .por-que-trucha h2, .por-que-falta-info h2 {
    font-size: var(--tamaño-titulo-mediano);
    font-weight: 900;
    text-align: center;
}

.lista-verdades, .lista-truchisimas, .lista-info {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
}

.lista-verdades li, .lista-truchisimas li, .lista-info li {
    display: grid;
    /* Columna del ícono fija (54px) y el resto para la explicación */
    grid-template-columns: 54px 1fr;
    border: var(--grosor-borde) solid var(--color-borde);
    margin-bottom: -3px; /* Evita doble borde brutalista */
    background-color: var(--color-fondo);
}

/* El cuadradito izquierdo para el ícono/check (como en la tabla de inicio) */
.lista-verdades li span, .lista-truchisimas li span, .lista-info li span {
    border-right: var(--grosor-borde) solid var(--color-borde);
    display: grid;
    place-items: center;
    font-weight: 900;
}

/* Fondos de los cuadraditos según la pantalla */
#resultado-verdad .lista-verdades li span { background-color: var(--color-verde); }
#resultado-trucha .lista-truchisimas li span { background-color: var(--color-rojo); }
#resultado-falta-info .lista-info li span { background-color: var(--color-amarillo-oscuro); }

.lista-verdades li p, .lista-truchisimas li p, .lista-info li p {
    padding: 12px;
    font-size: var(--tamaño-texto-chico);
    font-weight: 600;
    line-height: 1.4;
}
.lista-truchisimas {
  padding: 0;       /* Quita el espacio izquierdo por defecto de las listas UL */
  margin: 0;        /* Resetea márgenes externos */
}
.lista-truchisimas li {
  display: grid;
  grid-template-columns: 80px 1fr; 
  align-items: stretch;           
  
  list-style: none;
  background-color: #ffffff;      
  border: 3px solid #000000;      
  margin-bottom: -3px;            
  overflow: hidden;               

  /* 👇 AGREGA ESTO: Asegura que la fila no tenga aire interno que separe al span */
  padding: 0 !important; 
}

/* 2. El SPAN: Aquí creamos la caja o círculo ROJO */
.lista-truchisimas li span {
  display: flex;
  align-items: center;
  justify-content: center;
  
  background-color: #ff4a4a;      
  border-right: 3px solid #000000; 

  /* 👇 AGREGA ESTO: Fuerza al span a ocupar el 100% real de la altura disponible */
  height: 100%;
  margin: 0;
}


/* 3. El pseudo-elemento: El pulgar BLANCO dentro de la caja roja */
.lista-truchisimas li span::before {
  content: "";
  width: 40px;         /* Tamaño del pulgar dentro de la caja */
  height: 80px;
  background-color: #000000; /* Color del pulgar (Blanco) */
  
  /* SVG del pulgar hacia abajo */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 4h-2v8h2V4zm-19 7c0 .55.45 1 1 1h5.63l-.95 4.57-.03.32c0 .41.17.79.44 1.06L10.17 19l6.58-6.59c.37-.36.59-.86.59-1.41V5c0-1.1-.9-2-2-2H8.35c-.75 0-1.41.41-1.75 1.03L3.53 11.24c-.11.25-.18.53-.18.81V11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 4h-2v8h2V4zm-19 7c0 .55.45 1 1 1h5.63l-.95 4.57-.03.32c0 .41.17.79.44 1.06L10.17 19l6.58-6.59c.37-.36.59-.86.59-1.41V5c0-1.1-.9-2-2-2H8.35c-.75 0-1.41.41-1.75 1.03L3.53 11.24c-.11.25-.18.53-.18.81V11z'/%3E%3C/svg%3E");
  
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 4. El PÁRRAFO: Con su fondo blanco independiente */
.lista-truchisimas li p {
    font-size: smaller;
    font-weight: 200;
  margin: 0;
  flex-grow: 1;        /* Hace que el fondo blanco ocupe el ancho disponible */
  background-color: #ffffff; /* Fondo blanco */
  color: #000000;      /* Color del texto */
  padding: 20px 15px;  /* Espacio interno para que el texto respire */  /* Bordes suaves para el fondo blanco */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil para que resalte si tu fondo general es gris claro */
}
li.truchisima-mal{
    font-size: large;
    font-weight: 800;
}

/* --- 3. SECCIÓN FUENTES CONFIABLES --- */
.fuentes-confiables h3 {
    padding: 0px 15px 10px;
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    font-weight: 900;
    text-align: center;
}
.fuentes-confiables-titulo{
    font-size: large;
}

/* Tarjetas de los diarios (La Nación / Infobae) */
.fuentes-confiables{
    padding: 20px 0px;
}
.fuentes-confiables .la-nacion, 
.fuentes-confiables .infobae {
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: 4px 4px 0px #000000;
    padding: 14px 20px;
    margin: 0px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

/* Colores dinámicos para los diarios */
#resultado-verdad .fuentes-confiables .la-nacion,
#resultado-verdad .fuentes-confiables .infobae {
    background-color: #9cd2a4; /* Verde pastel del prototipo */
}

#resultado-trucha .fuentes-confiables .la-nacion,
#resultado-falta-info .fuentes-confiables .la-nacion {
    background-color: var(--color-amarillo-patito); /* Amarillo del prototipo */
}

.fuentes-confiables div h3 {
    font-size: var(--tamaño-texto-normal);
    text-transform: uppercase;
    font-weight: 900;
    text-align: left;
}

.fuentes-confiables div h4 {
    font-size: var(--tamaño-texto-chico);
    font-weight: 800;
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 6px;
    margin-bottom: 4px;
}


/* --- 4. COMENTARIOS DE USUARIOS --- */
.usuarios-comentarios {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px; 
    border: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-fondo); 
    padding-bottom: 24px;
}

.usuarios-comentarios h3 {
    padding-block: 15px;
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    font-size: var(--tamaño-titulo-mediano);
    font-weight: 900;
    text-align: center;
    margin: 0 0 10px 0;
}

/* Tarjeta de perfil de Martina */
.usuarios-comentarios .martina {
    position: relative; 
    width: 140px;       
    height: 140px;
    border: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-rosa);
    box-shadow: 4px 4px 0px #000;
    justify-self: center; 
}

.usuarios-comentarios .martina img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cartelito con el nombre flotando abajo */
.usuarios-comentarios .martina h5 {
    position: absolute;
    bottom: -12px; 
    left: 50%;
    transform: translateX(-50%); 
    background-color: #fff;
    border: var(--grosor-borde) solid var(--color-borde);
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

/* Globo de texto derecho (Mejor usar clase o combinador directo) */
.usuarios-comentarios > div:last-of-type {
    border: var(--grosor-borde) solid var(--color-borde);
    padding: 20px;
    margin: 20px;
    box-shadow: 5px 5px 0px #000;
    background-color: #fff; 
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-self: center; 
}

.usuarios-comentarios div:last-of-type h4 {
    font-size: var(--tamaño-texto-chico);
    font-weight: 900;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-borde); 
}

.usuarios-comentarios div:last-of-type p {
    font-size: var(--tamaño-texto-chico);
    line-height: 1.4;
    font-weight: 500;
    margin: 0;
}

/* --- MEDIA QUERY PARA ESCRITORIO / HORIZONTAL --- */


.tarjeta-verdadera{
    margin-bottom: 24px;
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
}
.tarjeta-verdadera h2{
    padding:10px;
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    text-align: center;

}
/* --- 5. BOTÓN VOLVER (ANCHO COMPLETO) --- */
.volver-al-truchometro {
    width: 100%;
    background: var(--gradiente-primario);
    border: var(--grosor-borde) solid var(--color-borde);
    padding: 14px;
    font-family: var(--fuentes-global);
    font-size: var(--tamaño-titulo-mediano);
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--sombra-neobrutalistas);
    margin-top: 12px;
    margin-bottom: 30px;
    transition: transform 0.1s ease;
}

.volver-al-truchometro:active {
    transform: translate(3px, 3px);
    box-shadow: 2px 2px 0px #000000;
}

.lista-razones {
  list-style: none;
  padding: 0;
  margin: 0;
}


.lista-razones li {
font-size:smaller;
  display: flex;
  align-items: center;
  border-bottom: var(--grosor-borde, 2px) solid var(--color-borde, #000);
  min-height: 80px;
  position: relative; 
}


.lista-razones li::before {
place-items: center;
  content: "";
  display: block;
  align-self: stretch; 
  width: 60px;
  min-width: 60px;
  background-color: #62a96a; /* Tu verde exacto */
  border-right: var(--grosor-borde, 2px) solid var(--color-borde, #000);
  margin-right: 15px;
}


.lista-razones li::after {
  content: "";
  position: absolute;
  
  left: 4px; 
  top: 50%;
  transform: translateY(-50%);
  
  width: 50px;
  height: 40px;
  background-color: #000; 
  
  
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20h2v-8H2v8zm19-7c0-.55-.45-1-1-1h-5.63l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 5 7.59 11.59C7.22 11.95 7 12.45 7 13v6c0 1.1.9 2 2 2h7c.75 0 1.41-.41 1.75-1.03l3.07-7.17c.11-.25.18-.53.18-.8V13z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20h2v-8H2v8zm19-7c0-.55-.45-1-1-1h-5.63l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 5 7.59 11.59C7.22 11.95 7 12.45 7 13v6c0 1.1.9 2 2 2h7c.75 0 1.41-.41 1.75-1.03l3.07-7.17c.11-.25.18-.53.18-.8V13z'/%3E%3C/svg%3E");
  
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
div.pantalla-oculta, 
main div.pantalla-oculta, 
#main div.pantalla-oculta,
[class*="pantalla-oculta"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.resultado-noticia .truchometro{
    margin-block: 30px;
}
/* ==========================================================================
   MEDIA QUERY UNIFICADA PARA ESCRITORIO (A partir de 992px)
   ========================================================================== */
@media (min-width: 768px) {
  
  /* --- VISTA INICIO (HOME) --- */
  #vista-inicio {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Dos columnas iguales */
    column-gap: 40px !important;
    
    max-width: 1200px;
    
    padding-inline: 20px;
    align-items: start; 
  }

  /* La noticia arriba, ocupando el ancho completo */
  .noticia-hoy {
    grid-column: span 2 !important;
    grid-row: 1 !important;
    margin-bottom: 20px !important;
    width: 100%;
  }

  .bienvenida {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
  }
  
  .truchometro {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin-top: 0 !important;
  }

  .bloque-video {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    align-self: start;
  }

  .ultimo-truchometro {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: 0 !important;
  }

  .bloque-vacio {
    display: block;
    background-color: #ffffff;
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    min-height: 300px;
  }

  .cartel-bienvenida h1 {
    font-size: 3rem; /* Más imponente en pantallas grandes */
  }

  .subcartel-bienvenida {
    bottom: -30px;
    right: -20px;
    width: 65%;
  }

  /* Reseteos de márgenes innecesarios en escritorio */
  .bienvenida, .bloque-vacio, .truchometro, .ultimo-truchometro {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }


  /* --- VISTAS DE RESULTADOS (#resultado-verdad, etc) --- */
  #resultado-verdad,
  #resultado-trucha,
  #resultado-falta-info {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Dos columnas fijas y simétricas */
    column-gap: 40px !important;
    row-gap: 30px !important;
    max-width: 1200px;
    margin: 40px auto !important;
    padding-inline: 20px;
    align-items: start; 
  }

  /* COLUMNA IZQUIERDA FILA 1: Tu noticia es... */
  .resultado-noticia {
    margin-block: auto;
    grid-column: 1 !important;
    grid-row: 1 !important; 
    border: var(--grosor-borde) solid var(--color-borde);
    background-color: var(--color-fondo);
    box-shadow: var(--sombra-neobrutalistas);
    height: auto !important;        
    align-self: start !important;   
  }

  /* COLUMNA DERECHA FILA 1: Razones del veredicto */
  .tarjeta-verdadera,
  .por-que-trucha,
  .por-que-falta-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
    align-self: start !important;
  }

/* COLUMNA IZQUIERDA FILA 2: Fuentes Confiables */
/* COLUMNA IZQUIERDA FILA 2: Fuentes Confiables */
  .fuentes-confiables {
    grid-column: 1 !important;
    grid-row: 2 !important;
    border: var(--grosor-borde) solid var(--color-borde) !important;
    background-color: var(--color-fondo) !important;
    box-shadow: var(--sombra-neobrutalistas) !important;
    
    /* Quitamos paddings para asegurar el borde a borde */
    padding: 0 !important; 
    margin-top: 0 !important;
    align-self: stretch !important; 
    
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    grid-template-rows: auto 1fr !important;   
    row-gap: 24px !important;
  }

  /* SELECTOR ULTRA-ESPECÍFICO: Ataca al h3 o a la clase, directo o heredado */
  .fuentes-confiables h3,
  .fuentes-confiables-titulo,
  .fuentes-confiables > [class*="titulo"] {
    grid-column: 1 / span 2 !important; /* Forzamos explícitamente desde la columna 1 hasta abarcar las 2 */
    grid-row: 1 !important;         
    
    display: block !important;
    width: 100% !important;
    text-align: center !important; /* Centrado absoluto */
    
    border-bottom: var(--grosor-borde) solid var(--color-borde) !important; 
    
    padding-block: 16px !important; 
    padding-inline: 20px !important; /* Margen interno para que las letras no toquen los bordes de la tarjeta */
    margin: 0 0 4px 0 !important;
  }

 /* Los diarios se quedan abajo bien acomodados */
  .fuentes-confiables .la-nacion {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-left: 24px !important;   
    margin-bottom: 24px !important; 
    margin-top: 0 !important;
    margin-right: 10px !important;

    /* SOLUCIÓN: Forzamos flujo vertical y limpio uno abajo del otro */
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 8px !important; /* Espacio uniforme entre los textos internos */
  }

  .fuentes-confiables .infobae {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-right: 24px !important;  
    margin-bottom: 24px !important; 
    margin-top: 0 !important;
    margin-left: 10px !important;

    /* SOLUCIÓN: Forzamos flujo vertical y limpio uno abajo del otro */
    display: flex !important;
    flex-direction: column !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 8px !important; /* Espacio uniforme entre los textos internos */
  }

  /* Aseguramos que los elementos de texto ocupen el ancho total interno de la tarjeta */
  .fuentes-confiables div h3,
  .fuentes-confiables div h4,
  .fuentes-confiables div p {
    display: block !important;
    width: 100% !important;
    text-align: left !important; /* Alineación normal izquierda dentro del diario */
    margin: 0 !important;
  }

  /* COLUMNA DERECHA FILA 2: Comentarios de usuarios */
  .usuarios-comentarios {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0 !important;
    align-self: stretch !important; 
    
    display: grid !important;
    grid-template-columns: auto 1fr !important; 
    padding: 24px !important;
    padding-top: 0 !important; /* Quitamos padding superior para que el h3 pegue arriba */
    gap: 20px !important;
  }

  .usuarios-comentarios h3 {
    display: block !important; 
    grid-column: span 2 !important; 
    text-align: center !important; /* Centramos el texto del título */
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    
    /* El truco de magia: Margen negativo idéntico al padding del contenedor */
    margin-inline: -24px !important; 
    padding-block: 12px !important; /* Espacio interno vertical del título */
    margin-bottom: 10px !important; 
  }

  .usuarios-comentarios .martina {
    margin: 0 !important;
    grid-column: 1 !important;
    align-self: center !important;
  }

  .usuarios-comentarios > div:last-of-type {
    margin: 0 !important;
    grid-column: 2 !important;
  }

  /* FILA 3 (ABAJO DE LOS USUARIOS): Botón volver al truchómetro */
  .btn-volver-trigger,
  .volver-al-truchometro {
    grid-column: 2 !important; /* Lo mandamos a la segunda columna */
    grid-row: 3 !important;    /* Fila inmediatamente abajo de comentarios */
    justify-self: end !important; /* Lo alinea a la derecha de su celda */
    width: auto !important;
    min-width: 280px; /* Tamaño mínimo prolijo */
    padding: 15px 40px !important;
    font-size: var(--tamaño-texto-normal) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    background: var(--gradiente-primario);
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    cursor: pointer;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
  }
}
.lista-info li p{
    font-weight: 200;
}

/* OTRA PANTALLA */

  header{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background-color: var(--color-rosa);
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    padding: 15px 20px;
    height: 75px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 3000; 
    height: 75px;
    
}
.app-header {
   width: 100%; 
    height: 75px;
    background-color: var(--color-rosa);
    border-bottom: var(--grosor-borde) solid var(--color-borde);
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.boton-menu {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 5px;
}

.boton-menu span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #000;
    border: 1px solid #000;
}
.menu_desplegable{
    position: fixed;
    top: 15px;
    left: 50%;
    width: calc(100% - 20px);
    max-width: 412px;
    background-color: var(--color-rosa); 
    border: var(--grosor-borde) solid var(--color-borde);
    z-index: 3000;
    transform: translate(-50%, -150%);
    transition: transform 0.4s steps(4);
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.menu_desplegable.active { 
    transform: translate(-50%,0);
}

.menu-header-cerrar{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.button_cerrar{
    background: none;
    border: none;
    font-size: 2.5rem;
    font-weight: 800;
    cursor:pointer;
}
.menu_links{
    list-style: none;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.menu_links a{
    color: var(--color-texto);
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 900;
}
.menu-overlay { 
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2500;
    display:none;
}
.menu-overlay.active {display:block;}

main{
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
    align-content: start;
}

/* sección truchometro */
/* --- CLASE DE CONTROL DE PANTALLAS --- */
.pantalla-oculta {
    display: none !important;
}



 .imagen-noticia{
    max-width: 345px;
    max-height: 195px;
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
 }
 .imagen-noticia img{
    width: 345px;
    max-height: 195px;
 }
 .botones-noticias{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
 }
 .que-paso{
     width: 100%;
    height: 50px;
    background: var(--gradiente-secundario);
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    font-family: var(--fuentes-global);
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.1s;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
 }
 .resolucion{
      width: 100%;
    height: 50px;
    background: var(--gradiente-primario);
    border: var(--grosor-borde) solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    font-family: var(--fuentes-global);
    font-size: 1.2rem;
    font-weight: 900;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.1s;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
 }
 .que-paso:hover, .resolucion:hover {
    
    transform: translate(-2px, -2px);
    
    box-shadow: 7px 7px 0px #000000;
}


.que-paso:active, .resolucion:active {
    
    transform: translate(5px, 5px);
   
    box-shadow: 0px 0px 0px #000000;
}
 
.titulo_noticia {
    position: relative;
    width: 100%;
    padding-top: 40px; 
    margin-bottom: 10px;
}


.titulo_noticia h2 {
    position: relative;
    z-index: 5;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
}


.titulo_noticia .grilla-decorativa {
    top: 0px;
    right: -10px;
    z-index: 1; /* Detrás del H2 */
    opacity: 0.25;
}


.contenedor-texto-dinamico {
    margin-top: 25px;
    animation: aparecerTexto 0.3s ease-out;
}

.contenedor-texto-dinamico h3 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 12px;
}


.contenedor-texto-dinamico.azul h3 { color: #2B6CB0; }      
.contenedor-texto-dinamico.naranja h3 { color: #E65100; }   

.contenedor-texto-dinamico p {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #000000;
    margin-bottom: 15px;
}

@keyframes aparecerTexto {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


.app-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto centra horizontalmente todo lo de adentro */
    width: 100%;
}

.app-footer {
    font-family: 'Poppins', sans-serif; 
    width: 100%;
    max-width: 412px;
    margin-top: 40px;
    padding: 20px;
    text-align: center; /* Centra el texto dentro del footer */
    font-size: 0.75rem;
    color: #666;
    border-top: 2px solid #eee;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
/*-------------------------------------------PARTE DEL CSS DEL QUIZ---------------------------------------------------*/

/* --- pantalla del inicio del quiz --- */

.main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    margin-top: 60px;
    margin-bottom: 60px;
    /* Suficiente espacio arriba para el título flotante */
}

@media (min-width: 900px) {
    .main-layout {
        grid-template-columns: 1fr 380px; /* Columna info y sidebar fija */
        gap: 80px; /* Más espacio entre columnas */
       
    }
 }

.titulo-caja {
   background: #3458a4;
    color: white;
    padding: 15px 30px ;
    border: 4px solid #000;
    box-shadow: 6px 6px 0px #000;
    z-index: 10;     /* Asegura que esté por encima de la caja */
    font-size: 26px;
    text-align: center;
    font-family: var(--fuentes-global);
    font-size: clamp(20px,30px,40px);
 }

.seccion-principal {
    position: relative; /* ¡Esto es lo que hace que el título 'aparezca' dentro de esta sección! */
 }
.caja-texto-principal {
    font-family: var(--fuentes-global);
    font-size: clamp(16px,20px,24px);
   background: #fff;
    border: 4px solid #000;
    padding: 30px 30px 30px 30px; /* Incrementamos el padding-top */
    box-shadow: 10px 10px 0px #000;
    position: relative;
    margin-top: 30px; /* Espacio extra para que el título no se superponga */
}

/* Secciones de texto */
.pregunta-inicio1, .pregunta-inicio2 {
    margin-bottom: 25px;
}
main p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-texto);
    font-size: clamp(16px,20px,24px);
}


/* Botón ¡Juguemos! */
.boton-jugar {
   display: block;
    width: 80%;
    margin: 30px auto 0 auto;
    padding: 15px;
    background: var(--gradiente-secundario);
    border: 3px solid #000;
    box-shadow: 5px 5px 0px #000;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-weight: 900;
    font-size: 1.1rem;
    cursor: pointer;
}

.boton-jugar:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

/*----parte columna usuarios----*/
.columna-destacados {
    font-family: var(--fuentes-global);
    font-size: clamp(16px, 2vw, 20px);
    background: #fff;
    border: 4px solid #000;
    padding: 30px 30px 30px 30px;
    box-shadow: 10px 10px 0px #000; /* Sombra pesada */
    position: relative;
    box-sizing: border-box;
    margin-top: 20px;
}

h2.titulo-destacados {
    font-size: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    font-weight: 900;
    text-align: center;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border: 2px solid #000;
    margin-bottom: 10px;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border: 2px solid #000;
    object-fit: cover;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 800;
}

.user-score {
    font-size: 0.9rem;
    color: #555;
}

/* Estilo simple para el footer */
.app-footer {
    position: relative; /* Importante para que se mantenga debajo */
    z-index: 10;        /* Asegura que el footer esté por encima del fondo */
    background: #fff;   /* Ponle un fondo sólido para tapar cualquier forma que pase detrás */
    padding: 20px;
   grid-column: 1 / -1; 
    margin-top: 60px;
    text-align: center;
    border-top: 2px solid #000;
    flex-shrink: 0;
        
}

/*DECORACIÓN DE LA PAGINA*/
.background-decorations {
    position: absolute; /* Cambiado de fixed a absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Altura de la pantalla, no de toda la página */
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Grilla (usamos gradiente lineal para simularla) */
.grid {
    width: 200px;
    height: 200px;
    background-image: 
        linear-gradient(to right, #000 1px, transparent 1px),
        linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 40px 40px; /* Tamaño de los cuadros */
    position: absolute;
}

.grid-top-right { top: 50px; right: 50px; }
.grid-bottom-left { bottom: 50px; left: 50px; }

/* Estrellas redondeadas */
.star {
   width: 60px;
    height: 60px;
    background: #000;
    position: absolute;
    clip-path: polygon(50% 0%, 65% 30%, 100% 35%, 70% 60%, 80% 100%, 50% 80%, 20% 100%, 30% 60%, 0% 35%, 35% 30%);
    border-radius: 12px; /* Ahora el border-radius SÍ redondeará los picos */
}

.star-top-left { top: 100px; left: 100px; }
.star-top-right { top: 200px; right: 200px; }

/* Círculos */
.circle {
    width: 40px;
    height: 40px;
    border: 3px solid #000;
    border-radius: 50%;
    position: absolute;
}

.circle-bottom-left { bottom: 30px; left: 230px; }
.circle-bottom-right { bottom: 30px; right: 230px; }

/*----------------PARTE PREFUNTAS QUIZ----------------*/

@media (min-width: 768px) {
    .contenedor-quiz {
        margin-top: 50px; /* Un poco de aire superior en PC */
        border: 4px solid #000; /* Borde más marcado para estilo */
    }
}
.logo-box {
    display: flex;
    align-items: center;
}

/* Estilos generales (móvil) */
.logo-box img {
    max-height: 50px; /* Ajusta este valor a tu gusto */
    width: auto;      /* Mantiene la proporción */
    display: block;
}


/* para ocultar por defecto */
.feedback-container {
   display: none;
    opacity: 0;
    margin-top: 0;
    transition: all 0.3s ease;
}

.feedback-container.visible {
    display: block !important;
    opacity: 1;
    margin-top: 20px;
    padding: 15px;
    border: 3px solid #000;
    background: #FFFFFF;
}

 .contenedor-quiz {
   max-width: 600px;
    margin: 10px auto 50px auto; /* El 100px inicial es crucial */
    padding: 30px 20px 20px 20px;
    position: relative;
    box-shadow: 6px 6px 0px #000;
    border: 4px solid #000;
    background: var(--color-rosa);
    font-family: var(--fuentes-global);
    /* Escala el texto base entre 16px y 20px según la pantalla */
    font-size: clamp(16px, 2vw, 20px);
    
}

/* Encabezado azul tipo titulo */
.encabezado h1 {
    background: #3458a4;
    color: #fff;
    padding: 15px 30px;
    border: 4px solid #000;
    box-shadow: 6px 6px 0px #000;
     margin: 20px;      
    text-align: center;
    z-index: 10;
    /* Sintaxis correcta de clamp: min, ideal, max */
    font-size: clamp(18px, 30px,40px);  
}

#texto-pregunta{
    text-align: center;
    font-size: clamp(16px,20px, 24px);
    
}

.contador-preguntas {
    width: 100%;
    text-align: center;
    font-weight: bold;
    margin: 10px 0;
}


/*parte de las imagenes*/
.imagen-pregunta1 {
    width: 100%;
    margin-bottom: 20px;
    border: 3px solid var(--color-borde);
    aspect-ratio: 16 / 9;
    overflow: hidden; /* Evita que la imagen se salga */

}

.imagen-pregunta1 img {
    width: 100%;      /* Ajusta al ancho del contenedor */
    height: 100%; /* Altura fija para que todas sean iguales */
    object-fit: cover; /* Recorta la imagen para que no se deforme */
    display: block;
}


.feedback-container {
    display: none; /* Oculto por defecto */
    height: 0; 
    overflow: hidden; 
    opacity: 0;
    margin-top: 0;
    transition: all 0.3s ease;
}

/* cosito para que el JS se active*/
.feedback-container.visible {
    height: auto;
    opacity: 1;
    margin-top: 20px;
    padding: 15px;
    border: 3px solid #000;
    background: #FFFFFF;
    display: block !important;
}

#btn-continuar {
    font-family: 'Poppins', sans-serif; 
     font-size: clamp(16px,18px, 20px);
    font-weight: 600;                  
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: var(--color-amarillo-patito);
    border: 3px solid #000;
    font-weight: bold;
    cursor: pointer;
    background: var(--gradiente-secundario);
    box-shadow: var(--sombra-neobrutalistas);
}

#btn-continuar:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

/* Botones de opción */
.opcion-boton {
    display: block;
    width: 100%;
    padding: 15px;
    margin: 15px 0;
    background: var(--color-amarillo-patito);
    border: 3px solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    font-family: var(--fuentes-global);
     font-size: clamp(14px,18px, 20px);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
}

.opcion-boton:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.opcion-boton:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

/* Corrección de colores para botones */
.opcion-boton.correcta { background-color: var(--color-verde) !important; }
.opcion-boton.incorrecta { background-color: var(--color-rojo) !important; }

/*-------PANTALLA FINAL: Contenedor principal de la pantalla final------ */
#pantalla-final {
    background: var(--color-fondo);
    border: 3px solid var(--color-borde);
    box-shadow: var(--sombra-neobrutalistas);
    padding: 25px;
    text-align: center;
}

/* Caja azul de resultados */
.resultado-header {
    background: var(--color-azul);
    color: white;
    border: 3px solid var(--color-borde);
    padding: 10px;
    margin-bottom: 20px;
}

.puntuacion-box {
    border: 3px solid var(--color-borde);
    padding: 15px;
    margin-bottom: 20px;
    background: var(--color-rosa);
}

.puntos-totales {
    font-weight: 900;
    font-size: 1.2rem;
}

.texto-invitacion {
    font-weight: 600;
    margin-bottom: 15px;
}

/* Botones de noticias */
#contenedor-links-noticias {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre cada botón */
    width: 100%;
    margin-top: 20px;
}

/* Estilo para los botones de noticias */
.noticia-link {
    display: block; /* Para que ocupen todo el ancho */
    width: 100%;
    padding: 15px;
    background: var(--color-amarillo-patito); 
    border: 3px solid var(--color-borde);
    box-shadow: 4px 4px 0px #000;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-weight: 800;
    box-sizing: border-box; /* Importante para que el padding no desborde */
}
.links-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.noticia-link:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}

.btn-reiniciar {
    background: #e74c3c;
    color: white;
    border: 3px solid #000;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
}


/*----------------------------PARTE CSS DEL PERFIL-----------------------*/
/* Contenedor principal */
.perfil-container {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.perfil-layout {
    display: grid;
    grid-template-columns: 1fr; 
    gap: 40px;
    width: 100%;
}

@media (min-width: 900px) {
    .perfil-layout {
        display: grid;
        grid-template-columns: 350px 1fr; /* Mantenemos el tamaño de la columna izquierda fijo */
        gap: 30px;
    }
    .tarjeta-perfil {
        max-width: 400px; /* Al aumentar esto, la foto crecerá automáticamente */
    }
}

.columna-derecha {
     display: flex;
      flex-direction: column;
       gap: 40px;
       max-width: 700px;
       min-width:400px;
       font-size: clamp(16px,18px, 20px);
 }

 
/* --- PERFIL --- */
.tarjeta-perfil {
    width: 100%;
     padding: 20px 20px 20px 20px;
     margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
 }

/* Encabezado MI PERFIL */
.header-perfil {
   width: 70%;
   margin: 10px auto 40px auto !important;
    padding: 5px 30px;
    text-align: center;
    background: var(--color-rosa, #f7a8c8);
    border: 4px solid #000;
    box-shadow: 6px 6px 0px #000;
    display: block;
    font-size: clamp(20px,26px, 48px);
    
}

.avatar-grande {
    width: 100%;       /* Ocupa el ancho disponible */
    max-width: 500px;  /* Este es el tamaño máximo que puede alcanzar en PC */
    margin: 0 auto;
  }

/* Foto de perfil */
.avatar-grande img {
    width: 100% !important; /* Fuerza a la imagen a llenar su contenedor */
    height: auto;
     height: auto;      /* Mantiene la proporción al cambiar de tamaño */
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    display: block;
   
}

/* Nombre sobrepuesto (H3 dentro de la tarjeta de perfil) */
.nombre-box-top {
    font-size: clamp(16px,18px, 20px);
    margin-top: -20px;
    background: #fff;
    border: 3px solid #000;
    padding: 8px 20px;
    font-weight: 900;
    box-shadow: 4px 4px 0px #000;
    
    /* El truco del encimado */
    position: absolute; 
    bottom:-10px; /* Lo posicionamos cerca de la parte inferior de la foto */
    z-index: 50;/* Asegura que quede por encima de la foto */
    text-align: center;
}

/* Tarjetas de Información (Puntos, Insignias, Historial) */
.card-puntos, .card-insignias, .card-historial {
    margin-top: 30px;
    background: #fff;
    border: 3px solid #000;
    box-shadow: 8px 8px 0px #000;
    padding: 20px 20px 10px 20px;
    position: relative;
}


/* Títulos flotantes en el borde superior */
.titulo-seccion {
    font-size: clamp(16px,18px, 20px);
    background: #f1c40f; /* Amarillo base */
    text-align: center;
    border: 3px solid #000;
    padding: 10px 20px;
    position: absolute;
    top: -40px;
    left: 20px;
    font-weight: 900;
    box-shadow: 4px 4px 0px #000;
    z-index: 10;
}

/* Color especial para Insignias (usando tus variables) */
.card-insignias .titulo-seccion {
    background: var(--color-celeste, #3498db);
    color: var(--color-texto, #000);
}
.card-insignias { 
    background: var(--color-celeste, #3498db);
}
/* Estructura para insignias (mantén tu HTML con estas clases) */
.grilla-insignias {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
}

.insignia-slot {
    width: 80px;
    height: 80px;
    border: 3px solid #000;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insignia-slot img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}
/* Contenedor principal de la tarjeta de puntos */
.card-puntos {
    background: #f1c40f; /* Color amarillo del prototipo */
    border: 3px solid #000;
    box-shadow: 8px 8px 0px #000;
    padding: 20px;
    margin-top: 50px;
    position: relative;
}

/* Alineación interna */
.puntos-destacados {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
}

/* Recuadro blanco del número 30 */
.puntos-numero {
    background: #fff;
    border: 3px solid #000;
    padding: 10px;
    text-align: center;
    font-weight: 900;
    min-width: 80px;
}

/* Barra de progreso */
.barra-track {
    background: #fff;
    border: 2px solid #000;
    height: 15px;
    width: 100%;
    margin-top: 5px;
}

/*progreso de puntos*/
.progreso-info{
    font-weight: 600;
}

.barra-fill {
    background: #000;
    height: 100%;
    width: 30%; /* Este valor debe ser dinámico según los puntos */
}

.card-historial .titulo-seccion{
    background:var(--color-fondo);

 }

/* Ajustes específicos */
.card-usuario { text-align: center; }
.avatar-placeholder { width: 120px; height: 120px; background: #ddd; margin: 0 auto 10px; border: 3px solid #000; }

.barra-track { width: 100%; height: 15px; border: 3px solid #000; background: #eee; margin-top: 5px; }


.insignia-slot {
    width: 80px;
    height: 80px;
    border: 3px solid #000;
    background: var(--color-fondo);
    background-size: cover;
}
.insignia-slot img { width: 90%; 
                     height: 90%; 
                     object-fit: contain; 
}

.item-noticia {
      padding-top: 10px;
      
}


/* --- FILTROS --- */
.filtros-container {
    
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 30px 30px 30px;
}

.btn-filtro {
    background: var(--gradiente-secundario);
    border: 3px solid #000;
    padding: 10px 20px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 4px 4px 0px #000;
    transition: transform 0.1s ease;
    width: 80%; /* Botones un poco más anchos en celular */
    font-size: clamp(14px, 16px, 18px);
}

.btn-filtro:hover { transform: translate(-2px, -2px); }

/* --- TITULO TENDENCIAS --- */
.titulo-pagina {
    background-color: var(--color-amarillo-patito);
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    padding: 10px 80px;
    width: fit-content;
    margin: 80px auto; /* Centrado */
    text-transform: uppercase;
    font-weight: 900;
    font-size: clamp(20px, 40px, 48px);
}

/* --- GRID DE NOTICIAS --- */
.grid-noticias {
    max-width: 1800px;   /* Define el ancho máximo total del bloque de tarjetas */
    margin: 0 auto;      /* Centra el bloque en la pantalla */
    padding: 20px;       /* Un poco de aire alrededor */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    padding: 20px;
    justify-items: center; /* Centra las tarjetas si hay pocas */
}

/* --- TARJETA DE NOTICIA --- */
.card-noticia {
    background: #fff;
    border: 3px solid #000;
    box-shadow: 8px 8px 0px #000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* Esto controla el tamaño acotado */
    width: 100%;
    max-width: 380px; 
    margin: 0 auto;
}

.noticia-titulo {
    font-size: clamp(18px, 20px, 24px);
    font-weight: 900;
    margin: 10px 0;
    line-height: 1.3;
}
.noticia-resumen {
    font-size: clamp(14px, 16px, 18px);
    margin-bottom: 15px;
    color: var(--color-texto);
}

.titulo-noticia h2 {
    font-size: 1.6rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* --- IMAGEN --- */
.imagen-noticia {
    width: 100%;
    max-width: 400px;
    border: var(--grosor-borde, 3px) solid var(--color-borde, #000);
    box-shadow: var(--sombra-neobrutalistas, 6px 6px 0px #000);
    margin-bottom: 20px;
    overflow: hidden;
}

.imagen-noticia img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- ETIQUETAS --- */
.etiquetas {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.etiqueta-fecha, .etiqueta-tipo {
    border: 2px solid #000;
    padding: 4px 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* --- BOTONES DE ACCIÓN --- */
.botones-noticias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.btn-tendencia {
    width: 100%;
    height: 50px;
    font-weight: 900;
    cursor: pointer;
    border: var(--grosor-borde, 3px) solid #000;
    box-shadow: 4px 4px 0px #000;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.btn-que-paso { background: var(--gradiente-secundario, #f7a8c8); }
.btn-resolucion { background: var(--gradiente-primario, #fde047); }

.btn-tendencia:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px #000; }
.btn-tendencia:active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px #000; }

/* --- CONTENIDO DINÁMICO --- */
.contenedor-texto-dinamico {
    padding: 20px;
    border: 3px solid #000;
    margin-top: 20px;
    animation: aparecerTexto 0.3s ease-out;
}

.contenedor-texto-dinamico.azul h3 { color: #2B6CB0; }
.contenedor-texto-dinamico.naranja h3 { color: #E65100; }

@keyframes aparecerTexto {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
    .filtros-container {
        flex-direction: column; /* Pone los elementos uno debajo de otro */
        align-items: center;    /* Los centra */
        gap: 15px;
    }
}

/*-------------------------------------------CSS DE INICIO----------------------------------------*/
  .contenedor-bienvenida {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Esto evita que los bordes sumen tamaño extra */
    overflow: hidden; /* Evita que los elementos decorativos fuera de rango causen scroll */
}
.contenedor-bienvenida {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

/* --- 2. Capa de Fondo Fijo (Decoraciones) --- */
.decoracion-fondo-fijo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Fondo */
    pointer-events: none; /* Permite clics a través del fondo */
    overflow: hidden;   
}

.grilla-lineas {
    width: 100px;
    height: 100px;
    background-image: 
        linear-gradient(to right, #000 2px, transparent 1px),
        linear-gradient(to bottom, #000 2px, transparent 1px);
    background-size: 20px 20px;
    position: absolute;
}

.grilla-1 { top: 10%; left: 5%; }
.grilla-2 { bottom: 10%; right: 5%; }

.deco-img {
    position: absolute;
    width: 80px;
}

.pulgar-arriba-img { top: 15%; left: 10%; }
.pulgar-abajo-img { bottom: 15%; right: 10%; }
.est-1 { top: 10%; right: 10%; width: 60px; }
.est-2 { top: 40%; left: 5%; width: 50px; }
.est-3 { bottom: 30%; right: 15%; width: 70px; }

.deco-img, .pulgar-arriba-img, .pulgar-abajo-img, .estrella-img {
    position: absolute;
    /* Evita valores negativos grandes para posicionar */
}
/* --- 3. Caja de Bienvenida --- */
.caja-bienvenida {
    position: relative;
    z-index: 2; /* Por encima del fondo */
    background: #fff;
    border: 4px solid #000;
    box-shadow: 10px 10px 0px #000;
    padding: 40px;
    width: 90%;
    max-width: 500px;
    text-align: center;   
}

.titulo-bienvenida {
    background: var(--color-amarillo-oscuro);
    border: 3px solid #000;
    box-shadow: var(--sombra-neobrutalistas);
    font-size: clamp(30px, 50px, 70px);
    padding: 10px 30px;
    margin: -85px auto 20px auto;
    display: table;
    font-weight: 900;
    text-transform: uppercase;
}

.contenido-interno {
    font-size: 1.2rem;
    line-height: 1.5;
    font-size: clamp(18px, 24px, 32px);
}

/* Grilla y círculo interno */
.grilla-interior {
    width: 80px; height: 80px;
    background-image: linear-gradient(to right, #000 2px, transparent 1px), linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 20px 20px;
    position: absolute;
    top: -20px; left: -20px;
    z-index: -1;
}

.circulo-interior {
    width: 40px; height: 40px;
    border: 5px solid #000;
    border-radius: 50%;
    position: absolute;
    bottom: -20px; left: -20px;
    z-index: -2;
}

/* --- 4. Botones --- */
.acciones-inicio {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90%;
    max-width: 320px;
    margin-top: 50px;
    z-index: 2;
}

.btn-accion {
    text-decoration: none;
    color: #000;
    font-weight: 900;
    padding: 15px;
    border: 3px solid #000;
    background: linear-gradient(to right, #fde047, #f7a8c8);
    box-shadow: 6px 6px 0px #000;
    text-align: center;
    transition: transform 0.1s;
}

.btn-accion:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0px #000; 
}

/*-------------------------------------------CSS DE INICIO SESIÓN----------------------------------------*/
.contenedor-acceso {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}


.bloque-login {
    background: #fff;
    border: 4px solid #000;
    box-shadow: 12px 12px 0px #000;
    padding: clamp(20px, 8vw, 50px);
    width: 100%;
    max-width: 450px;
    position: relative;
    margin-top: 40px;

}


.titulo-login {
    background:var(--color-amarillo-oscuro);
    transform: translateX(-50%);
    /* El tamaño de letra se ajusta solo */
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    border: 4px solid #000;
    padding: 10px 25px;
    position: absolute;
    top: -30px;
    left: 50%;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;

}

/* Inputs y Botón con el efecto de "Click" */
.campo-dato { margin-bottom: clamp(15px, 4vw, 25px); font-weight: 900; }
.campo-dato input {
    width: 100%;
    padding: clamp(10px, 2vw, 15px);
    margin-top: 8px;
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    font-size: 1rem;
    transition: all 0.1s;
}



.campo-dato input:focus {
   transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
    outline: none;
    background: #fff9c4;
}

.boton-acceso {
    width: 100%;
    padding: clamp(12px, 3vw, 18px);
    border: 3px solid #000;
    background: var(--gradiente-secundario);
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: var(--sombra-neobrutalistas);
    cursor: pointer;
    transition: all 0.1s;
}

.boton-acceso:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px #000;
} 
  /*-------------------------------------------CSS DE CREAR USUARIO----------------------------------------*/
  .contenedor-registro {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
}


.bloque-registro {
    background: #fff;
    border: 4px solid #000;
    box-shadow: 12px 12px 0px #000;
    padding: clamp(20px, 8vw, 50px);
    width: 100%;
    max-width: 450px;
    position: relative;
    margin-top: 40px;

}


.titulo-registro {
    background:var(--color-amarillo-oscuro);
    transform: translateX(-50%);
    /* El tamaño de letra se ajusta solo */
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    border: 4px solid #000;
    padding: 10px 25px;
    position: absolute;
    top: -30px;
    left: 50%;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;

}

/* Inputs y Botón con el efecto de "Click" */
.campo-registro { margin-bottom: clamp(15px, 4vw, 25px); font-weight: 900; }
.campo-registro input {
    width: 100%;
    padding: clamp(10px, 2vw, 15px);
    margin-top: 8px;
    border: 3px solid #000;
    box-shadow: 6px 6px 0px #000;
    font-size: 1rem;
    transition: all 0.1s;
}



.campo-registro input:focus {
   transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
    outline: none;
    background: #fff9c4;
}

.boton-registro {
    width: 100%;
    padding: clamp(12px, 3vw, 18px);
    border: 3px solid #000;
    background: var(--gradiente-secundario);
    font-weight: 900;
    font-size: 1.1rem;
    box-shadow: var(--sombra-neobrutalistas);
    cursor: pointer;
    transition: all 0.1s;
}

.boton-registro:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px #000;
} 

.body-tendencias{
    display: block;
}