/* =========================================================
   FUENTE INTER (LOCAL)
   ========================================================= */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter/InterDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* =========================================================
   CONFIGURACIÓN BASE
   ========================================================= */

/* Tamaño base */
html {
    font-size: 16px;
}

/* Variables corporativas */
:root {
    --primary-color: #0C0C0C;
    --secondary-color: #6b5f4a;
    --background-color: #f5f5f5;

    --jdg-azul: #1E6A8C;
    --jdg-azul-claro: #196CA1;

--texto-principal: #1F2937;
  --texto-secundario: #374151;
    --gris-suave: #eeeeee;
}



/* Reset básico */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}





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

body,
p,
li
{

  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--texto-secundario);
  line-height: 1.7;
}
nav {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Encabezados */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
    color: var(--texto-principal);
}

/* H1 principal */
h1 {
  margin: 0 0 16px 0;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.015em;
}

/* H2 secciones (UNIFICADO – sustituye titulo-section) */
h2 {
  margin: 0 0 16px 0;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.25;
}

/* H3 subtítulos */
h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--texto-principal);
}

/* H4–H6 */
h4,
h5,
h6 {
    font-size: 1.15rem;
    font-weight: 500;
    color: #555;
}

/* Párrafos */
p {
    margin: 0 0 16px 0;
    max-width: 1240px;
}

/* =========================================================
   UTILIDADES DE TEXTO
   ========================================================= */

.mitexto {
    font-size: 1.05rem;
    line-height: 1.8;
}

.pretitulo {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary-color);
}

/* =========================================================
   HERO (BASE – el resto va en hero.css)
   ========================================================= */

.hero {
    display: grid;
    place-items: center;
}

/* =========================================================
   BOTONES
   ========================================================= */

.btn-primary {
    background-color: var(--jdg-azul-claro);
    border-color: var(--jdg-azul-claro);
    color: #fff;
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

.btn-warning {
    background-color: #d5ad6d;
    border-color: #d5ad6d;
    color: #000;
    padding: 1rem 1.5rem;
}

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

a {
    color: var(--primary-color);
    text-decoration: none;
}

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

/* =========================================================
   BLOQUES DESTACADOS / CTA
   ========================================================= */

.borde_destacado {
    border-radius: 10px;
    border: 2px solid #2B2522;
    background: linear-gradient(135deg, #EC6906, #FFA948);
    padding: 0.6rem 0.8rem;
    color: #fff;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.borde_destacado:hover {
    background: linear-gradient(135deg, #FFA948, #EC6906);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.borde_destacado2 {
    border-radius: 10px;
    border: 2px solid #ff7f28;
    background-color: #ff7f28;
    padding: 0.6rem 0.8rem;
    color: #fff;
}

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

.form-check-input {
    transform: scale(1.6);
    margin-right: 1rem;
}

/* =========================================================
   UTILIDADES VISUALES
   ========================================================= */

.barra_azul {
    background-color: var(--jdg-azul);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
    padding: 4px;
    color: #fff;
    text-align: center;
    width: 100%;
}

.columna-con-borde {
    border-right: 1px solid #fff;
}

.fondo_f6 {
    background-color: #f6f6f6;
}

/* Imágenes */
.caja_imagenes {
    position: relative;
    transition: box-shadow 0.3s ease-in-out;
}

.caja_imagenes:hover {
    box-shadow: 0 0 20px rgba(200, 200, 200, 1);
}