/* ==========================================================================
   KADRO - PALETA DE COLORES E IDENTIDAD
   ========================================================================== */
:root {
    --bg-color: #d1d1d1;       /* Gris claro de fondo */
    --btn-dark: #1a1a1a;       /* Negro/Gris muy oscuro */
    --btn-gray: #6b6b6b;       /* Gris medio */
    --text-color: #a5a5a5;     /* Gris del texto del botón oscuro */
    --text-light: #1a1a1a;     /* Texto oscuro para el botón gris */
    --text-main: #1a1a1a;      /* Color de los títulos y párrafos */
}

/* ==========================================================================
   RESET Y CONFIGURACIÓN GENERAL
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

body {
    background-color: var(--bg-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   ESTRUCTURA Y FLUJO DE CONTENIDO
   ========================================================================== */
.content-wrapper {
    width: 100%;
    max-width: 1200px; /* Ensanchado para aprovechar más los laterales en desktop */
    padding: 80px 60px 140px 60px; /* 140px abajo genera el "footer vacío" */
    display: flex;
    flex-direction: column;
}

/* Encabezado con el logo alineado a la izquierda */
.header {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 55px; /* Separación fija debajo del logo */
}

.logo-small {
    width: 110px;
    height: auto;
    transition: opacity 0.2s ease;
}

.logo-small:hover {
    opacity: 0.8;
}

/* Contenedor del flujo principal */
.main-content {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   BLOQUES DE TEXTO Y CORRECCIÓN AUTOMÁTICA DE ESPACIADOS (H1, H2, P)
   ========================================================================== */
/* Regla global para separar h1 y h2 del contenido de arriba de forma automática */
.main-content h1, 
.main-content h2 {
    color: var(--text-main);
    margin-top: 50px;    /* Empuja el título hacia abajo separándolo del texto anterior */
    margin-bottom: 25px; /* Espacio entre el título y lo que viene abajo (párrafo o botones) */
    font-weight: 700;    /* Inter Bold */
    letter-spacing: -0.02em;
}

/* El primer h1 no necesita margen superior porque ya tiene el espacio del header */
.main-content h1:first-child,
.text-block h1:first-child {
    margin-top: 0;
}

.text-block h1 {
    font-size: 3rem;
}

.action-block h2 {
    font-size: 2.4rem;
}

/* Párrafos normativos con espaciado inteligente */
.text-block p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-main);
    text-align: justify;
    font-weight: 500;    /* Inter Medium */
}

/* Si hay párrafos seguidos, les añadimos separación automática arriba para que no se peguen */
.text-block p + p {
    margin-top: 20px;
}

/* ==========================================================================
   UNIFORMIDAD PARA ELEMENTOS DE LISTA <li> (TODOS LOS LI)
   ========================================================================== */
/* Forzamos a que absolutamente todos los li tengan el mismo comportamiento visual que los párrafos */
.main-content li,
.text-block li,
ul li,
ol li {
    font-size: 1.15rem;          /* Mismo tamaño que <p> */
    line-height: 1.6;            /* Mismo interlineado que <p> */
    color: var(--text-main);     /* Mismo color gris oscuro */
    font-weight: 500;            /* Inter Medium */
}

/* ==========================================================================
   CONTROL INTELIGENTE DE LISTAS Y ENLACES EN LISTA (CLASE LSV)
   ========================================================================== */
/* Quitamos las viñetas de la lista con clase LSV y limpiamos sus sangrías nativas */
ul.LSV {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Si la lista ul va después de un párrafo o un h2, se separa automáticamente como bloque */
.text-block p + ul.LSV,
.main-content h2 + ul.LSV,
.main-content p + ul.LSV {
    margin-top: 30px; /* Genera el espacio de bloque */
}

/* Forzamos a que los elementos li de LSV actúen como bloques independientes */
ul.LSV li {
    display: block;      /* Asegura el salto de línea obligatorio */
}

/* Añadimos el espacio automático entre los li internos para que respiren verticalmente */
ul.LSV li + li {
    margin-top: 20px;    
}

/* ==========================================================================
   ESTILOS CONTROLADOS Y UNIFORMES PARA ENLACES <A> EN TEXTO Y SUELTOS
   ========================================================================== */
/* Forzamos a que TODOS los links (dentro/fuera de <p> o en listas) compartan estética */
.text-block p a,
.main-content a:not(.btn) {
    color: var(--text-main) !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 1.15rem;          /* Clona el tamaño del párrafo */
    line-height: 1.6;            /* Clona el interlineado del párrafo */
    font-weight: 500;            /* Inter Medium */
    text-decoration: underline;  /* Siempre subrayado */
}

/* Mantenemos el blindaje de color para estados visitados, activos o hover */
.text-block p a:visited,
.text-block p a:active,
.text-block p a:hover,
.main-content a:not(.btn):visited,
.main-content a:not(.btn):active,
.main-content a:not(.btn):hover {
    color: var(--text-main) !important;
    text-decoration: underline;
}

/* Comportamiento exclusivo para los enlaces SUELTOS (hijos directos que no están en un <p>) */
.main-content > a:not(.btn),
.text-block > a:not(.btn) {
    display: inline-block; /* Permite que acepte márgenes verticales correctamente */
    margin-top: 30px;      /* Espacio automático con lo que tenga arriba */
    margin-bottom: 20px;   /* Espacio automático con lo que tenga abajo */
}

/* Si el enlace suelto es el primer elemento, eliminamos el margen superior */
.main-content > a:first-child,
.text-block > a:first-child {
    margin-top: 0;
}

/* ==========================================================================
   BOTONES RECUADRO (HREF)
   ========================================================================== */
.buttons-inline {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-top: 30px; /* Asegura separación si van debajo de un texto o lista */
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important; /* Evita que el subrayado global rompa el estilo del botón */
    font-size: 1.1rem !important;     /* Mantiene su tamaño propio de botón */
    width: 160px;
    height: 50px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-weight: 700; /* Inter Bold */
    margin: 0 !important; /* Evita que las reglas de enlaces sueltos afecten a los botones */
}

.btn:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.btn-dark {
    background-color: var(--btn-dark);
    color: var(--text-color);
}

.btn-gray {
    background-color: var(--btn-gray);
    color: var(--text-light);
}

/* ==========================================================================
   DISEÑO ADAPTABLE - RESPONSIVE (MÓVIL)
   ========================================================================== */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 50px 40px 100px 40px; 
    }

    .header {
        margin-bottom: 40px;
    }

    .main-content h1, 
    .main-content h2 {
        margin-top: 40px; 
        margin-bottom: 20px;
    }

    /* Reducción de fuentes generales para móvil (párrafos y elementos de lista) */
    .text-block p,
    .main-content li,
    .text-block li,
    ul li,
    ol li {
        font-size: 1.05rem;
    }

    /* Ajuste de links normales en móvil */
    .text-block p a,
    .main-content a:not(.btn) {
        font-size: 1.05rem; 
    }

    .text-block p + p {
        margin-top: 15px;
    }

    /* Corrección del bloque ul en móvil */
    .text-block p + ul.LSV,
    .main-content h2 + ul.LSV,
    .main-content p + ul.LSV {
        margin-top: 20px;
    }

    /* Reducción sutil del espacio entre elementos de lista en móvil */
    ul.LSV li + li {
        margin-top: 15px;
    }

    /* Ajuste de márgenes de enlaces sueltos en móvil */
    .main-content > a:not(.btn),
    .text-block > a:not(.btn) {
        margin-top: 20px;
        margin-bottom: 15px;
    }

    .logo-small {
        width: 95px;
    }

    .text-block h1 {
        font-size: 2.3rem;
    }

    .action-block h2 {
        font-size: 1.9rem;
    }

    .buttons-inline {
        gap: 20px;
        margin-top: 20px;
    }

    .btn {
        width: 140px;
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   IMAGENES
   ========================================================================== */

/* Estilo por defecto (para computadoras) */
  .imagen-adaptable {
    width: 400px;
    height: auto;
  }

  /* Estilo especial para celulares */
  @media (max-width: 768px) {
    .imagen-adaptable {
      width: 100%;
      height: auto;
    }
  }