/*=========================================================
  Proyecto : Fundación de Veteranos de Guerra (FUVEPAZ)
  Archivo  : style.css
  Versión  : 1.0.0
  Fecha    : 06/06/2026
  Descripción:
  Estilos globales del sitio web.
=========================================================*/

/*=========================================================
  IMPORTACIÓN DE ESTILOS
=========================================================*/

@import url("variables.css");
@import url("utilities.css");
@import url("components.css");

/*=========================================================
  RESET GLOBAL
=========================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    font-size:var(--text-md);
    color:var(--color-text);
    background:var(--color-light);
    line-height:1.7;
    overflow-x:hidden;
}

/*=========================================================
  SELECCIÓN DE TEXTO
=========================================================*/

::selection{
    background:var(--color-primary);
    color:var(--color-white);
}

/*=========================================================
  SCROLLBAR
=========================================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ececec;
}

::-webkit-scrollbar-thumb{
    background:var(--color-primary);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--color-secondary);
}

/*=========================================================
  TIPOGRAFÍA
=========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:var(--font-title);
    color:var(--color-primary);
    line-height:1.25;
    margin-bottom:1rem;
}

h1{
    font-size:3rem;
}

h2{
    font-size:2.3rem;
}

h3{
    font-size:1.7rem;
}

p{
    margin-bottom:1.2rem;
    color:var(--color-text);
}

strong{
    font-weight:var(--font-bold);
}

small{
    color:var(--color-text-light);
}

/*=========================================================
  ENLACES
=========================================================*/

a{
    text-decoration:none;
    color:inherit;
    transition:var(--transition-normal);
}

a:hover{
    color:var(--color-accent);
}

/*=========================================================
  IMÁGENES
=========================================================*/

img{
    display:block;
    max-width:100%;
    height:auto;
}

/*=========================================================
  LISTAS
=========================================================*/

ul,
ol{
    list-style:none;
}

/*=========================================================
  BOTONES (BASE)
=========================================================*/

button{
    border:none;
    background:none;
    cursor:pointer;
    font:inherit;
}

/*=========================================================
  FORMULARIOS
=========================================================*/

input,
textarea,
select{
    font:inherit;
}

/*=========================================================
  CONTENEDOR PRINCIPAL
=========================================================*/

main{
    min-height:70vh;
}

/*=========================================================
  SECCIONES
=========================================================*/

section:not(.hero){
    padding:5rem 0;
}

section:not(.hero):nth-child(even){
    background:var(--color-white);
}

section:not(.hero):nth-child(odd){
    background:var(--color-light);
}

/*=========================================================
  TABLAS
=========================================================*/

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:12px;
    border:1px solid var(--color-border);
}

/*=========================================================
  IFRAME
=========================================================*/

iframe{
    width:100%;
    border:none;
}

/*=========================================================
  UTILIDADES GLOBALES
=========================================================*/

.hidden{
    display:none;
}

.visible{
    display:block;
}

/*=========================================================
  TRANSICIONES
=========================================================*/

*{
    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease;
}