/* ============================================== 
        ESTILOS ESPECÍFICOS PARA GRUEROS 
============================================== */
@import url('https://fonts.googleapis.com/css2?family=SUSE:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=SUSE+Mono:ital,wght@0,100..800;1,100..800&family=SUSE:ital,wght@0,100..900;1,100..900&display=swap');

/*============================
Estilos generales para grueros
=============================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body { 
    overflow-x: hidden;
    font-family: "SUSE", sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}

/* Animaciones de scroll - estado inicial y transición */
.animado-scroll {
    opacity: 0.15;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animado-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/*Clases utilitarias comunes*/
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

/* Contenedores con max-width centralizados */
.container-centered {
    max-width: 1200px;
    margin: 0 auto;
}

.container-small {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

/* Background común (beige) */
.bg-beige {
    background-color: rgb(248, 240, 230);
}

/* Border radius común */
.rounded-sm {
    border-radius: 10px;
}

.rounded-lg {
    border-radius: 20px;
}

/* Espaciado de secciones */
.section-spacing {
    margin-top: 150px;
}

/* Padding común */
.padding-standard {
    padding: 40px;
}

.padding-section {
    padding: 2rem;
}

/* Sombras comunes */
.shadow-light {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.shadow-medium {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

  ul, ol {
  margin-bottom: 12px;
  padding-left: 22px;
  text-align: left;
}

/* Flecha scroll */
.flecha-scroll {
    position: fixed;
    bottom: 32px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 0px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    opacity: 0.5;
    transition: opacity 0.3s;
    z-index: 1000;
    cursor: pointer;
    text-decoration: none;
    display: none;
    background-color: white;
}

.flecha-scroll:hover {
    opacity: 1;
}

.flecha-scroll img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Transiciones comunes */
.transition-smooth {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Dimensiones de imagen responsive */
.img-responsive {
    width: 100%;
    height: auto;
}

/* Botón que se ve como imagen */
.boton-imagen {
    background: none;
    border: none;
    padding: 0;
    margin: 0;

    cursor: pointer;
    outline: none;
    display: inline-block;
}

.boton-imagen:focus {
    outline: none;
}

.boton-imagen:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}



/*=============================
        HEADER Y NAV 
===============================*/
header{
    position: relative;
    z-index: 10;
    font-family: "SUSE", sans-serif;
}

.inicio{
    font-size: 1em;
}

/*=============
NAV HAMBURGUESA
===============

.hamburguesa {
  display: none;
  flex-direction: column;
  border: none;
  gap: 4px;
  cursor: pointer;
  background: none;
}
.hamburguesa span {
  width: 26px;
  height: 3px;
  display: block;
  background: #2563eb;
  border-radius: 2px;
}

/*==============================
    Sección principal centrada 
 ===============================*/

main {
    padding: 20px; 
}

.Seccion_principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

/* Títulos para pantallas grandes */
.Titulo_Principal {
    font-size: 1.5rem;
    color: #482224;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.Titulo_Principal h1 {
    margin-bottom: 0;
    color: #482224;
}

.subtexto_principal{
    font-size: 2rem;
    color: #333;
    
}

/*WAVE*/
.dynamic-wave {

    height: 100% !important;
    color: #482224 !important; 
    animation: wave-motion 12s linear infinite !important;
    position: absolute !important;

}
/*
@keyframes wave-motion {
    0% {
        transform: translate3d(0, -50%, 0);
    }
    100% {
        
        transform: translate3d(-50%, -50%, 0);
    }
}
*/
.wave-container, .dynamic-wave {
    pointer-events: none;
}

.Contenedor_fondo_naranja{
    background-color: rgb(248, 240, 230);
    width: 100%;
    min-height: 30vh; 
    clip-path: ellipse(70% 85% at 50% 0%); 

}

.Boton_SerParte {
    width: 16px;
    height: 16px;
    margin: 0 auto 50px 10px;                 
    cursor: pointer;               
}


/*=============================
    Sección Problema y Solución 
==============================*/
.Contenedor_problema_solucion{
    margin: 5px auto;
    
}

.Icono_advertencia{
    margin: 10px;
    
}

.parrafo_problema{
    margin-bottom: 2px;
}

.titulo_problema_solucion {
    color: #482224;
}

.lista_problema_solucion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding-left: 0;
    width: 100%;
    max-width: 500px;
}

.lista_problema_solucion li {
    text-align: justify;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-position: outside;
    display: list-item;
}

/*===========================
    Sección Beneficios
============================*/

.titulos_beneficios {
    color: rgb(255, 136, 0);
}

.titulo_beneficios{
    text-align: center; 
    font-size: 2em;
    max-width: 800px;
    margin: 0 auto 50px; 
    line-height: 1.2;

}

.Contenedor_beneficios{
    margin-top: 100px;
}

/* Estilos para caja de beneficios SUUAM - sobrescribe styles.css */
.caja_beneficios.caja_beneficios_naranja h3,
.caja_beneficios_SUUAM h3,
.titulo_caja_beneficios_SUUAM {
    color: white;
}


.grid_beneficios{
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    padding: 0 20px;
}

.caja_beneficios{
    padding: 25px 20px;
    text-align: left;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.caja_beneficios_naranja{
    background-color: rgb(255, 98, 0);

}

.iconos_beneficios{
    align-items: flex-start;
}

.titulos_beneficios{
    color: rgb(255, 136, 0);
}

.icono_Circulo_Naranja{
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
    margin: 8px;
}

.caja_beneficios_SUUAM{
    color: white;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo_caja_beneficios_SUUAM{
    font-size: 1.2em;
    margin-bottom: 12px;
    margin-top: 0;
}

/*NO BORRAR ES EL PILAR DE LAS CAJAS*/
.icono_Circulo_blanco{
    width: 90px;
    height: 90px;
}

/*============================
    Sección Instrucciones   
=============================*/

/* Lista de instrucciones alineada a la izquierda */
.lista_instrucciones {
    text-align: left;
}

.Seccion_Instrucciones{
    margin-top: 150px;
}

.titulo_instrucciones{
    font-size: 2em;
    margin: 0;
  
}

.instrucciones{
    flex: 1;
    padding-right: 2rem;
  
}

.imagen_instrucciones{
    width: 100%; 
    height: auto;

   
}

.contenedor_imagen_instrucciones{

    display: flex;
    align-items: center;
    overflow: hidden; 
    min-height: 450px; 
    
    
    margin-left: auto;
    max-width: 600px; 
}

.items_instrucciones{
    margin-bottom: 20px;

}

.lista_instrucciones{
    margin-top: 20px;
    margin-left: 0;
    padding-left: 0;
    list-style-position: inside;
}


.botones_redireccion_instrucciones{
    display: flex; 
    gap: 15px;
    margin-top: 40px;
}

.icono_google_play{
    max-width: 150px; 
    height: auto; 
    width: 150px;
}

.icono_app_store{
    max-width: 138px; 
    height: auto; 
    width: 100%;
}

.botones_redireccion_instrucciones a{
    flex-shrink: 1;

}


/*=============================
        Seccion Sumate
==============================*/
.Seccion_sumate{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Contenedor_imagen_curva {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.Contenedor_imagen_curva img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.Contenido_sumate_suuam{
    position: absolute;
    z-index: 2;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    padding: 3rem 5rem 3rem 5rem;
}
.Contenido_sumate_suuam h2{
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.75rem;
    text-align: center;
}
.Contenido_sumate_suuam img{
    margin-top: 25px;
}

/*================================
    Sección Servicio y Beneficios 
==================================*/  
.Seccion_servicios_beneficios{
    gap: 2rem;
    margin-top: 150px;
}

.titulo_servicios_beneficios{
    margin-bottom: 20px;
}
.lista_servicios{
    list-style: inside;
}

.Imagen_servicios_beneficios{
    width: 100%; 
    height: auto;

}
.Contenedor_imagen_servicios_beneficios{
    
    display: flex;
    align-items: center;
    overflow: hidden; 
    min-height: 400px; 
    max-width: 550px; 
}
.Contenedor_servicios_beneficios{
    flex: 1;
}

/*================================
    Sección Recompensas 
==================================*/
.Contenedor_imagen_recompensa{
        
display: flex; 
    align-items: center;
    overflow: hidden; 
    min-height: 400px; 
    max-width: 550px; 
    position: relative; 
    flex-basis: 50%; 
    flex-shrink: 0;
}

.Contenedor_informacion_recompensas{
    flex: 1;
    padding: 40px 60px; 
    display: flex; 
    flex-direction: column;
    justify-content: center;
}

.Seccion_recompensas{
    display: flex;
    background-color: #e7e5e5;
    border-radius: 15px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    max-width: 1100px; 
    margin: 40px auto;
    overflow: hidden;
    margin-top: 150px;
}

.imagen_recompensa{
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}
.Lista_recompensas{
    list-style: inside;
    margin-bottom: 20px;
}

.subtitulo_recompensa{
    margin-bottom: 10px;
}

/*================================
    Sección Form
==================================*/

.Seccion_formulario{
    margin-top: 150px;
    background-color: rgb(248, 240, 230);
    color: #482224;
    padding: 60px 20px;
    display: flex;
    justify-content: center; 
    min-height: 100vh; 
    align-items: center;

}

.Contenedor_formulario{
    max-width: 800px; 
    width: 100%;
    padding: 20px;
    text-align: center;
}

.Titulo_formulario{
    padding-top: 30px;
    padding-bottom: 10px;
}

.Subtitulo_formulario{
    padding-bottom: 40px;
}
.divisor-form {
    color: #482224;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: left;
    
}
.grupo-campos {
    display: grid;
    gap: 20px; 
    margin-bottom: 20px;
}

.dos_columnas {
    grid-template-columns: 1fr 1fr;
}

.tres_columnas {
    grid-template-columns: 1fr 1fr 1fr;
}

input, select {
    background-color: white;
    border: none;
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 1rem;
    color: gray;
}

.Contenedor_boton_siguiente{
    display: flex;
    justify-content: flex-end;
}

.boton_siguiente{
    cursor: pointer;
}


/*==============================
    Sección Preguntas Frecuentes
===============================*/


.Seccion_Preguntas{
    padding:20px;
    
    max-width: 850px;
    margin: 80px auto;
    text-align: center;

}

.titulo_preguntasFAQ{
    margin-bottom: 0.5rem;
}

.texto_preguntasFAQ{
    margin-bottom: 1rem;
    color: #333;
    font-size: 1rem;
}
.Contenedor_preguntas{
    text-align: left;
}

.pregunta_FAQ summary {
    font-size: 1.1em;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    padding: 15px 0;
    list-style: none; 
}
.pregunta_FAQ summary:before {
    float: right;
    font-size: 1.5em;
    font-weight: 300;
    color: gray; 
    margin-left: 10px;
    content: "+"; 
    transition: transform 0.3s ease; 
}

.respuesta_FAQ{
    color: gray;
}
.pregunta_FAQ.is_open .respuesta_FAQ {
    max-height: 500px; 
    transition: max-height 0.3s ease-in;
}

.pregunta_FAQ.is_open summary:before {
    content: "-";
}

.separador_FAQ{
    margin-top: 10px;
}

/* ============================================== 
                BOTÓN VER MÁS 
 ============================================== */

.contenedor-boton-vermas-conductores {
    text-align: center;
    margin-top: 30px;
}

.boton-vermas-conductores {
    padding: 10px 10px;
    background-color: #482224;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.boton-vermas-conductores:hover {
    background-color: #482224;
}

.boton-vermas-conductores a {
    color: white;
    text-decoration: none;
}

.preguntas-ocultas {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: none;
}

.preguntas-ocultas.mostrar {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.preguntas-ocultas.ocultar {
    opacity: 0;
    transform: translateY(-10px);
}


/*===================
        Footer
 ===================*/
/*Footer*/
.Pie_Pagina {
    background-color: #2c3e50; /* Azul oscuro */
    color: white;
    padding: 60px 0 0 0;
    margin-top: 80px;
}

.Enlaces_Pie_Pagina {
    list-style: none;
    padding: 0;
 
    margin-top: 0; 
}

.Enlaces_Pie_Pagina li {
    margin-bottom: 10px;
}

.Enlaces_Pie_Pagina a {
    color: rgb(142, 142, 142);
    text-decoration: none;
    transition: color 0.3s ease;
}

.Enlaces_Pie_Pagina a:hover {
    color: #3498db;
}
.Footer {
    display: grid;
    gap: 32px;
    padding: 0 20px 40px 20px;
}

.Footer_Header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.Footer_Logo {
    width: 200px;
    height: 200px;
}

.Footer_Description {
    color: rgb(142, 142, 142);
    line-height: 1.6;
    max-width: 520px;
}

.Footer_Social {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.Social_Link {
    color: #bdc3c7;
    text-decoration: none;
}

.Social_Icon {
    width: 28px;
    height: 28px;
}

.Footer_Columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.Footer_Column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.Pie_Pagina_Inferior {
    background-color: #1a252f;
    padding: 20px 0;
    border-top: 1px solid #34495e;
}

.Pie_Pagina_Inferior .container-centered {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
}

.Enlaces_Legales {
    display: flex;
    gap: 20px;
}

.Enlace_Legal {
    color: #bdc3c7;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.Enlace_Legal:hover {
    color: #3498db;
}




/*==========================================
 Estilos para botón de cuenta, login y dialog
 =========================================== */


.btn-cuenta {
    background: transparent;
    border: 2px solid #007bff;
    color: #007bff;
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "SUSE", sans-serif;
    font-weight: 500;
}

.btn-cuenta:hover {
    background: #007bff;
    color: white;
}

.btn-cuenta.logged-in {
    border-color: #482224;
    color: #482224;
}

.btn-cuenta.logged-in:hover {
    background: #482224;
    color: white;
}


/* Estilos para el Dialog Modal de Login */
.login-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: 400px;
    width: 90%;
    margin:auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

.dialog-content {
    padding: 2rem;
    position: relative;
}

.close-dialog {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
    line-height: 1;
    transition: color 0.3s ease;
}

.close-dialog:hover {
    color: #333;
}

.dialog-content h2 {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.75rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
    text-align: left;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: "SUSE", sans-serif;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
}

.password-input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 2.75rem;
    flex: 1;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
}

.toggle-password {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: color 0.3s ease;
}

.toggle-password:hover {
    color: #007bff;
}

.toggle-password:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    border-radius: 4px;
}

.eye-icon {
    width: 20px;
    height: 20px;
}

.error-message {
    color: #dc3545;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
    min-height: 20px;
}


.btn-login {
    width: 100%;
    padding: 0.875rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: "SUSE", sans-serif;
}

.btn-login:hover {
    background: #0056b3;
}

.btn-login:disabled {
    background: #6c757d;
    cursor: not-allowed;
}


/* Pantallas grandes (>1280px): agrandar el botón en grueros */
@media (min-width: 1281px) and  (max-width: 1440px){
    .btn-cuenta {
        font-size: 1rem;
        padding: 0.5rem 1.5rem;
    }

}

@media (min-width: 1440px) and (max-width: 2560px) {
    .btn-cuenta {
        font-size: 1rem;
        padding: 0.5rem 1.5rem;
    }

}


/* Estilos para el Dialog Modal de Login */
.login-dialog {
    border: none;
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    margin:auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.login-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

.dialog-content {
    padding: 2rem;
    position: relative;
}

.close-dialog {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
    line-height: 1;
    transition: color 0.3s ease;
}

.close-dialog:hover {
    color: #333;
}

.dialog-content h2 {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.75rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
    text-align: left;
}
.leyenda_textoLogin{
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    border-left: 4px solid #007bff;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: "SUSE", sans-serif;
    transition: border-color 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
}

.error-message {
    color: #dc3545;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
    min-height: 20px;
}

.btn-login {
    width: 100%;
    padding: 0.875rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: "SUSE", sans-serif;
}

.btn-login:hover {
    background: #0056b3;
}

.btn-login:disabled {
    background: #6c757d;
    cursor: not-allowed;
}