/* Definición de variables globales */
:root {
    --primary: #6c5ce7;
    --secondary: #00cec9;
    --accent: #fdcb6e;
    --dark: #2d3436;
}

/* ===== RESET ===== */
/* Elimina márgenes y rellenos por defecto y ajusta el cálculo de tamaños */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BASE ===== */
/* Configuración general de tipografía, color de fondo y legibilidad del cuerpo */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #f9f9f9;
    color: var(--dark);
    font-size: 18px;
    line-height: 1.6;
}

/* ===== ACCESIBILIDAD ===== */
/* Barra superior que se mantiene fija al hacer scroll */
.panel-accesibilidad {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px;
    border-bottom: 2px solid #ddd;
    z-index: 1000;
}

/* BOTONES AGRUPADOS */

.panel-accesibilidad button,
.boton-ayuda,
.boton-contacto {
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 8px;
    text-decoration: none;
}

/* HOVER AGRUPADO */
/* Define la velocidad de la transición al pasar el cursor */
.panel-accesibilidad button:hover,
.lista-menu a:hover,
.tarjeta:hover {
    transition: 0.3s;
}

/* ===== LAYOUT ===== */
/* Contenedor principal con ancho máximo centrado */
.envoltura-menu {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

/* FLEX GLOBAL */
/* Alineación horizontal centrada para varios elementos de la interfaz */
.barra-flex,
.marca-sitio,
.lista-menu,
.botones-principales {
    display: flex;
    align-items: center;
}

/* NAV */
/* Barra de navegación con sombra y posición fija tras el panel de accesibilidad */
.menu-principal {
    height: 80px;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    position: sticky;
    top: 50px;
    z-index: 999;
}

/* Distribución de espacio entre los elementos de la barra */
.barra-flex {
    justify-content: space-between;
    width: 100%;
}

/* Estilo del nombre/logo del sitio */
.marca-sitio {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--primary);
    gap: 8px;
}

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

/* MENÚ */
/* Estilo para la lista de navegación */
.lista-menu {
    gap: 25px;
    list-style: none;
}

/* Enlaces del menú */
.lista-menu a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 700;
}

/* BOTÓN MENU */
/* Botón destacado dentro de la navegación */
.boton-menu {
    background: var(--primary);
    color: white !important;
    padding: 8px 18px;
    border-radius: 50px;
}

/* ===== HERO ===== */
/* Sección principal con degradado de fondo */
.seccion-principal {
    padding: 100px 0;
    background: linear-gradient(135deg, #fff, #eef2f3);
}

/* Organización en dos columnas para contenido y Hero Image */
.distribucion-principal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

/* TEXTOS AGRUPADOS */
/* Espaciado inferior para títulos y párrafos */
h1,
.texto-principal p {
    margin-bottom: 20px;
}

/* Tamaño del título principal */
h1 {
    font-size: 3rem;
}

/* Color destacado para palabras clave */
.texto-destacado {
    color: var(--primary);
}

/* Color del texto de descripción */
.texto-principal p {
    color: #2c2e2e;
}

/* BOTONES */
/* Separación entre botones del Hero */
.botones-principales {
    gap: 15px;
}

/* Estilo del botón de ayuda con sombra de color */
.boton-ayuda {
    background: var(--secondary);
    color: white;
    box-shadow: 0 8px 15px rgba(0, 206, 201, 0.3);
}

/* Estilo del botón de contacto con borde */
.boton-contacto {
    border: 2px solid var(--primary);
    color: var(--primary);
}

/* IMAGEN */
/* Imagen principal con rotación decorativa y sombra */
.imagen-principal img {
    width: 100%;
    border-radius: 20px;
    transform: rotate(2deg);
    box-shadow: 20px 20px 60px #d1d9e6;
}

/* ===== TARJETAS ===== */
/* Cuadrícula automática que se ajusta según el espacio disponible */
.bloque-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: -50px;
    padding-bottom: 80px;
}

/* Estilo individual de cada tarjeta de servicio */
.tarjeta {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Efecto de elevación al pasar el mouse por la tarjeta */
.tarjeta:hover {
    transform: translateY(-10px);
}

/* Tamaño del icono superior de la tarjeta */
.icono-tarjeta {
    font-size: 3rem;
    margin-bottom: 15px;
}

/* COLORES AGRUPADOS */
/* Borde inferior común para tarjetas de colores */
.tarjeta-morada,
.tarjeta-verde,
.tarjeta-amarilla {
    border-bottom: 6px solid;
}

/* Colores específicos de borde según la categoría */
.tarjeta-morada { border-color: var(--primary); }
.tarjeta-verde { border-color: var(--secondary); }
.tarjeta-amarilla { border-color: var(--accent); }

/* ===== RESPONSIVE ===== */

/* Ajuste de título en pantallas muy grandes */
@media (min-width: 1400px) {
    h1 { font-size: 3.5rem; }
}

/* Reducción de espacio en laptops */
@media (max-width: 1200px) {
    .distribucion-principal { gap: 40px; }
}

/* Cambio de 2 columnas a 1 para tablets */
@media (max-width: 1024px) {
    .distribucion-principal {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Ajuste de fuente en tablets pequeñas */
@media (max-width: 900px) {
    h1 { font-size: 2.5rem; }
}

/* Ocultar menú en celulares para usar menú hamburguesa (si se implementa) */
@media (max-width: 768px) {
    .lista-menu { display: none; }
    h1 { font-size: 2.2rem; }
}

/* Apilamiento vertical de botones en móviles */
@media (max-width: 600px) {
    body { font-size: 16px; }
    .botones-principales { flex-direction: column; }
}

/* Ajuste de padding en tarjetas para pantallas pequeñas */
@media (max-width: 480px) {
    h1 { font-size: 2rem; }
    .tarjeta { padding: 25px; }
}

/* Ajuste final para pantallas mínimas */
@media (max-width: 360px) {
    h1 { font-size: 1.7rem; }

    /* EXTRA MEDIA que solo sirven para recordatorio, esto no cambia nada en el sitio web */

/* Ajuste de fondo para pantallas de 1100px */
@media (max-width: 1100px) {
    body {
        background-color: #f5f5f5;
    }
}

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

/* Altura de línea en párrafos para 850px */
@media (max-width: 850px) {
    p {
        line-height: 1.8;
    }
}

/* Escala reducida de tarjetas para 700px */
@media (max-width: 700px) {
    .tarjeta {
        transform: scale(0.98);
    }
}

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

/* Reducción de relleno en botones para 420px */
@media (max-width: 420px) {
    button {
        padding: 8px;
    }
}

/* Tamaño mínimo de h1 para 320px */
@media (max-width: 320px) {
    h1 {
        font-size: 1.5rem;
    }
}

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

/* Fondo blanco en orientación horizontal */
@media (orientation: landscape) {
    body {
        background-color: #ffffff;
    }
}

/* Ajuste para modo de alto contraste */
@media (prefers-contrast: high) {
    body {
        background: rgb(253, 253, 253);
        color: white;
    }
}

/* EXTRA */

/* Ajuste visual para modo oscuro del sistema */
@media (prefers-color-scheme: dark) {
    body {
        background: #eee;
        color: #eee;
    }
}

/* Opacidad en botones solo para dispositivos con puntero (PC) */
@media (hover: hover) {
    button:hover {
        opacity: 0.8;
    }
}
}