/* Estilos globales */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    font-family: "SUSE", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    line-height: 1.5;
    font-size: 1rem;
}


/* Variables de colores */
:root {
    /* Colores del menú */
    --color-menu: #343a40 ;              /* Color del menú */
    --color-menu-hover: #495057;         /* Color del menú al pasar el cursor */
    --color-texto-menu: linear-gradient(90deg, #f25a39, #f9953d, #ffb74d);         /* Color del texto en el menú */
    --color-texto-transparente:transparent;
  
    /* Colores de WhatsApp */
    --color-whatsapp:#39a962 ;           /* Color del icono de WhatsApp */
    --color-whatsapp-hover: #00ff1a;     /* Color del icono de WhatsApp al pasar el cursor */

    /*Colores rrss*/
    --color-facebook:var(#1877F2);
    --color-facebook-hover:var(#145DBF);
    --color-instagram:var(#E4405F);
    --color-instagram-hover:var(#D62446);
    /* Colores de las secciones */
    --color-fondo-seccion-clara:#575859 ;  /* Color de fondo para la sección clara */
    --color-fondo-seccion-oscura:#27292b ; /* Color de fondo para la sección oscura */
    --color-fondo-seccion-naranja: #f25a39;/* Color de fondo para la sección naranja */
  
    /* Colores de los botones */
    --color-boton:#f25a39 ;              /* Color del botón */
    --color-boton-hover:#f9953d ;        /* Color del botón al pasar el cursor */
  
    /* Colores de las tarjetas (cards) */
    --color-fondo-card:#575859 ;         /* Color de fondo de la tarjeta */
    --color-borde-card:#f25a39 ;         /* Color del borde de la tarjeta */
  
    /* Colores de la tipografía */
    --color-fuente-fondo-oscuro: #e0e0e0; /* Color del texto en fondo oscuro */
    --color-fuente-fondo-claro: #e0e0e0;  /* Color del texto en fondo claro */
    --color-fuente-destacada:#f25a39 ;    /* Color del texto destacado */
  
    /* Color degradado  */
    --color-degradado-naranja: linear-gradient(45deg, #f25a39, #f9953d);   /* Color para el degradado naranja */
    --color-degradado-gris: linear-gradient(45deg, #6b6b6b, #bebebe);   /* Color para el degradado naranja */
}
  

/* Tamaños de fuentes */
h1 { font-size: 2.75rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 2rem; }
h4 { font-size: 1.75rem; }
h5 { font-size: 1.50rem; }
body,h6, p, a { font-size: 1.25rem; }

/* inicio estilo contenido main */

/* Contenedor Principal */
main.container-fluid {
    padding: 0;
    margin: 0;
}
section{
    width: 100vw;;
}
.row{
    width: 100%;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 0;
}
.fuente-destacada{
    color: var(--color-fuente-destacada);
}
/* fin estilo contenido main */

/* Media queries */
@media (max-width: 1024px) {
    body, h6, p, a { font-size: 1.4375rem; }
    h1 { font-size: 3.25rem; }
    h2 { font-size: 2.75rem; }
    h3 { font-size: 2.5rem; }
    h4 { font-size: 2.25rem; }
    h5 { font-size: 2.125rem; }
}

@media (max-width: 768px) {
    body, h5, p, a { font-size: 1.125rem; }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h6 { font-size: 1rem; }
}