/* ==================================================
    VARIABLES: Definición de colores, bordes y tiempos
================================================== */

:root {
    /* Paleta de colores principales y estados hover */
    --principal: #6c5ce7;
    --principal-hover: #5a4bd1;
    --secundario: #00cec9;
    --secundario-hover: #00b5ad;
    --danger: #ff7675;
    --oscuro: #2d3436;
    --gris-claro: #f4f7f6;

    /* Colores de soporte */
    --blanco: #ffffff;
    --borde: #e5e7eb;

    /* Configuración de bordes redondeados */
    --radio: 20px;
    --radio-boton: 50px;

    /* Configuración estándar para animaciones suaves */
    --transicion: all 0.3s ease;
}

/* ==================================================
    RESET: Limpieza de márgenes y rellenos por defecto
================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

/* ==================================================
    BASE: Estilos globales del cuerpo del sitio
================================================== */

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--gris-claro);
    color: var(--oscuro);
    font-size: 18px;
    line-height: 1.6;
}

/* Aplicación de transiciones suaves a elementos interactivos */
a,
button,
input,
textarea,
select {
    transition: var(--transicion);
}

/* ==================================================
    ACCESIBILIDAD: Barra superior de herramientas
================================================== */

.panel-accesibilidad {
    position: sticky; /* Se queda fijo al hacer scroll */
    top: 0;
    background: white;
    padding: 10px;
    border-bottom: 2px solid #ddd;
    z-index: 1000; /* Siempre por encima de otros elementos */
}

.panel-accesibilidad button {
    padding: 8px 15px;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid #333;
}

/* ==================================================
    CONTENEDOR: Limitador de ancho de la página
================================================== */

.contenedor {
    max-width: 1100px;
    margin: auto; /* Centra el contenido horizontalmente */
    padding: 0 20px;
}

/* ==================================================
    MENU: Barra de navegación
================================================== */

.menu-principal {
    height: 80px;
    display: flex;
    align-items: center;
    background: white;
    position: sticky;
    top: 50px; /* Se sitúa debajo del panel de accesibilidad */
}

.nav-ajuste,
.barra-flex {
    display: flex;
    justify-content: space-between; /* Separa logo de links */
    align-items: center;
}

/* Estilos del Logotipo */

.marca-sitio {
    font-size: 1.5rem;
}

.marca {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--principal);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Decoración circular en el logo */
.punto {
    width: 12px;
    height: 12px;
    background: var(--secundario);
    border-radius: 50%;
}

/* ==================================================
    MENU LINKS: Navegación horizontal
================================================== */

.enlaces-menu,
.lista-menu {
    display: flex;
    gap: 20px;
    list-style: none;
}

.enlaces-menu a {
    text-decoration: none;
    color: var(--oscuro);
    font-weight: 700;
}

/* Estilo especial para resaltar un botón en el menú */
.boton-menu {
    background: var(--principal);
    color: white !important;
    padding: 8px 18px;
    border-radius: 50px;
}

/* ==================================================
    HERO: Sección de bienvenida o impacto inicial
================================================== */

.encabezado-ayuda {
    padding: 80px 0;
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    color: white;
    text-align: center;
}

/* ==================================================
    TARJETAS (CORREGIDAS): Sistema de cuadrícula
================================================== */

.cuadricula-tipos,
.bloque-tarjetas {
    display: grid;
    /* Crea columnas automáticas que se ajustan al ancho de pantalla */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.tarjeta,
.tarjeta-tipo {
    background: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;

    /* Borde sutil */
    border: 1px solid var(--borde);

    /* Sombra para dar profundidad */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Animación de elevación al pasar el mouse */
.tarjeta:hover {
    transform: translateY(-5px);
}

/* ==================================================
    GRID PRINCIPAL: Secciones de dos columnas
================================================== */

.diseno-info,
.distribucion-principal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 60px 0;
    align-items: center;
}

/* Ajuste de imágenes dentro de grids */

.contenedor-imagen img,
.imagen-principal img {
    width: 100%;
    border-radius: 20px;
}

/* ==================================================
    BOTÓN EMERGENCIA: Llamado a la acción crítico
================================================== */

.boton-emergencia {
    display: inline-block;
    background: var(--danger);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
}

/* ==================================================
    RESPONSIVE: Adaptación para móviles (Tablets/Celulares)
================================================== */

@media (max-width: 768px) {

    /* Convierte grids de 2 columnas a 1 sola columna */
    .diseno-info,
    .distribucion-principal {
        grid-template-columns: 1fr;
    }

    /* Oculta el menú convencional en móviles */
    .enlaces-menu {
        display: none;
    }
}

/* ==================================================
    TUS MEDIA EXTRA: Ajustes de precisión según ancho
================================================== */

/* Pequeño cambio de fondo en pantallas medianas */
@media (max-width: 1100px) {
    body { background-color: #f5f5f5; }
}

/* Ajuste de espaciado en títulos */
@media (max-width: 950px) {
    h1 { letter-spacing: 1px; }
}

/* Ajuste de lectura en párrafos */
@media (max-width: 850px) {
    p { line-height: 1.8; }
}

/* Reducción visual ligera para tarjetas en pantallas pequeñas */
@media (max-width: 700px) {
    .tarjeta { transform: scale(0.98); }
}

/* Ajuste de tamaño de fuente en inputs */
@media (max-width: 550px) {
    input { font-size: 14px; }
}

/* Botones más compactos en móviles pequeños */
@media (max-width: 420px) {
    button { padding: 8px; }
}

/* Títulos más pequeños en pantallas muy estrechas */
@media (max-width: 320px) {
    h1 { font-size: 1.5rem; }
}

/* ==================================================
    MEDIA QUERIES DE ESTADO Y PREFERENCIAS
================================================== */

/* Centrado del cuerpo en pantallas ultra anchas */
@media (min-width: 1300px) {
    body {
        max-width: 1300px;
        margin: auto;
    }
}

/* Cambio estético cuando el móvil está en horizontal */
@media (orientation: landscape) {
    body { background-color: #ffffff; }
}

/* Soporte para modo de alto contraste (Accesibilidad OS) */
@media (prefers-contrast: high) {
    body {
        background: black;
        color: white;
    }
}

/* Solo aplica efectos hover en dispositivos con puntero (no táctiles) */
@media (hover: hover) {
    button:hover {
        opacity: 0.8;
    }
}