/* ==============================================
   Hero fullscreen (imagen fija)
   ============================================== */
.fullscreen-background {
    background-image: url('/img/logo.png'); /* imagen de fondo */
    background-size: cover; /* cubre todo el contenedor */
    background-position: center; /* centra la imagen */
    background-attachment: fixed; /* efecto parallax, la imagen no se mueve al hacer scroll */
    height: 100vh; /* altura de la ventana del navegador */
    display: flex; /* usamos flex para centrar contenido */
    justify-content: center; /* centra horizontalmente */
    align-items: center; /* centra verticalmente */
    color: #fff; /* color de texto dentro del hero (blanco) */
    font-size: 3rem; /* tamaño de fuente grande */
    font-weight: bold; /* texto en negrita */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5); /* sombra para mejorar legibilidad sobre la imagen */
    position: relative; /* posición relativa para z-index */
    z-index: 1; /* mantiene el hero sobre otros elementos si fuera necesario */
}

/* ==============================================
   Sección "¿Quiénes somos?"
   ============================================== */
.gessa-description {
    background: #f9f6f2; /* color de fondo claro */
    border-radius: 1.5rem; /* esquinas redondeadas */
    box-shadow: 0 2px 8px rgba(44,62,80,0.06); /* sombra ligera alrededor */
    padding: 2.5rem 2rem 2rem 2rem; /* espacio interno */
    margin: 5rem auto; /* separación del hero y centrado horizontal */
    text-align: center; /* centra texto */
    animation: fadeInUp 1s; /* animación de aparición desde abajo */
}

    /* Título dentro de la sección "¿Quiénes somos?" */
    .gessa-description h2 {
        color: #e7001c; /* rojo Gessa */
        margin-bottom: 1.2rem; /* espacio debajo del título */
        font-size: 2rem; /* tamaño del título */
        font-weight: 700; /* negrita */
    }

    /* Párrafo principal de la sección */
    .gessa-description > p {
        font-size: 1.25rem; /* tamaño de letra legible */
        line-height: 1.7; /* altura de línea para mejor lectura */
    }

/* Contenedor de las marcas de Gessa */
.gessa-brands {
    display: flex; /* contenedor flexible */
    flex-wrap: wrap; /* permite que las cards se muevan a otra línea si no caben */
    gap: 2rem; /* espacio entre cards */
    justify-content: center; /* centra horizontalmente las cards */
    margin-top: 2rem; /* espacio arriba del contenedor */
    margin-bottom: 1.5rem; /* espacio debajo del contenedor */
}

/* Card individual de cada marca */
.gessa-brand {
    background: #fff; /* fondo blanco */
    border-radius: 1rem; /* esquinas redondeadas */
    box-shadow: 0 8px 24px rgba(44,62,80,0.13); /* sombra más marcada */
    padding: 1.5rem 1rem; /* espacio interno */
    flex: 1 1 220px; /* flexible, mínimo 220px */
    min-width: 220px; /* ancho mínimo */
    max-width: 320px; /* ancho máximo */
    text-align: center; /* centra el contenido dentro de la card */
    transition: box-shadow 0.2s, transform 0.2s; /* transición suave al pasar el mouse */
}

    /* Efecto hover para cada card */
    .gessa-brand:hover {
        transform: translateY(-4px) scale(1.03); /* eleva y agranda ligeramente */
    }

    /* Título de la marca dentro de la card */
    .gessa-brand h3 {
        color: #e7001c; /* rojo Gessa */
        margin-bottom: 0.5rem; /* espacio debajo del título */
        font-size: 1.3rem; /* tamaño del subtítulo */
        font-weight: 600; /* seminegrita */
    }

    /* Descripción de la marca */
    .gessa-brand p {
        color: #444; /* gris oscuro para mejor legibilidad */
        font-size: 1rem; /* tamaño estándar */
    }
/* ==============================================
   Contenedor de secciones (Visión, Misión, Valores)
   ============================================== */
.gessa-sections {
    display: flex; /* contenedor flexible */
    flex-direction: column; /* organiza las secciones verticalmente */
    gap: 2.5rem; /* espacio entre cada sección */
    margin: 5rem auto; /* margen superior e inferior, centrado horizontal */
    max-width: 900px; /* ancho máximo del contenedor */
    padding: 0 1rem; /* padding horizontal para no pegarse a los bordes */
}

/* ==============================================
   Secciones individuales
   ============================================== */
.gessa-section {
    background: #fff; /* fondo blanco */
    border-radius: 2rem; /* esquinas redondeadas */
    box-shadow: 0 4px 16px rgba(44,62,80,0.08); /* sombra ligera */
    padding: 3rem 1rem 2rem 1rem; /* padding interno (top, right, bottom, left) */
    text-align: center; /* centra títulos y párrafos */
    animation: fadeInUp 1s; /* animación de aparición desde abajo */
}

    /* Títulos dentro de cada sección */
    .gessa-section h2 {
        color: #e7001c; /* rojo Gessa */
        font-size: 2.5rem; /* tamaño del título */
        margin-bottom: 1.5rem; /* espacio debajo del título */
    }

    /* Párrafos dentro de cada sección */
    .gessa-section p {
        font-size: 1.25rem; /* tamaño de letra legible */
        line-height: 1.7; /* altura de línea para mejor lectura */
        color: #333; /* gris oscuro */
        margin-bottom: 1rem; /* margen inferior */
    }

/* Lista de valores como chips o etiquetas */
.gessa-values-list {
    display: flex; /* flex para alinear horizontalmente */
    flex-wrap: wrap; /* permite que se muevan a otra línea si no caben */
    justify-content: center; /* centra horizontalmente los elementos */
    gap: 1rem; /* espacio entre cada chip */
    list-style: none; /* elimina los bullets por defecto */
    padding: 0;
    margin: 2rem 0 0 0; /* margen superior de la lista */
}

    /* Elementos individuales de la lista de valores */
    .gessa-values-list li {
        background: #fff3e0; /* fondo color claro */
        color: #e7001c; /* rojo Gessa */
        padding: 0.7rem 1.6rem; /* padding interno para que parezcan chips */
        border-radius: 2rem; /* bordes redondeados */
        font-weight: 600; /* seminegrita */
        font-size: 1.1rem; /* tamaño del texto */
        text-align: center; /* centra el texto dentro del chip */
    }


/* ==============================================
   Tipografía global
   ============================================== */

/* Importa la fuente "Poppins" desde Google Fonts con diferentes grosores */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Aplica estilos generales a todo el documento */
body, html {
    font-family: 'Poppins', Arial, sans-serif; /* Fuente principal del sitio */
    color: #222; /* Color de texto base */
    margin: 0; /* Quita margen por defecto del navegador */
    padding: 0; /* Quita relleno por defecto del navegador */
    min-height: 100vh; /* Asegura que el cuerpo tenga al menos el alto de la ventana */
}

/* Titulos principales (h1, h2, h3) */
h1, h2, h3 {
    font-family: 'Poppins', Arial, sans-serif; /* Mantiene la misma fuente para títulos */
    font-weight: 600; /* Aplica grosor de fuente semi-negrita */
}

/* Párrafos y listas */
p, li {
    font-family: 'Poppins', Arial, sans-serif; /* Fuente uniforme para texto */
    font-weight: 400; /* Grosor normal de texto */
    line-height: 1.7; /* Espaciado entre líneas para mejor lectura */
}

/* ==============================================
   Footer
   ============================================== */
footer {
    background-color: #e7001c; /* Fondo rojo corporativo */
    color: #fff; /* Texto blanco */
    text-align: center; /* Centra el contenido del footer */
    padding: 1.5rem 1rem; /* Espaciado interno: 1.5rem arriba/abajo, 1rem lados */
}

    /* Texto dentro del footer */
    footer p {
        margin: 0; /* Elimina márgenes del párrafo */
        font-size: 0.95rem; /* Tamaño de fuente ligeramente más pequeño que el normal */
    }


/* ===== Sección Ubicación ===== */

/* Contenedor general de la sección de ubicación */
#ubicacion {
    padding: 3rem 1rem; /* Espaciado interno (arriba/abajo: 3rem, lados: 1rem) */
    background-color: #f9f9f9; /* Fondo gris muy claro para diferenciar la sección */
    text-align: center; /* Centra el texto y contenido horizontalmente */
}

    /* Estilos para el título "Ubicación" */
    #ubicacion h2 {
        font-size: 2rem; /* Tamaño de letra grande */
        margin-bottom: 0.5rem; /* Espacio inferior para separarlo del texto siguiente */
        color: #e7001c; /* Color rojo corporativo */
    }

    /* Estilos para el párrafo de descripción */
    #ubicacion p {
        font-size: 1rem; /* Tamaño de letra estándar */
        margin-bottom: 1.5rem; /* Espacio inferior para separarlo del mapa */
    }

/* Contenedor del mapa */
.map-container {
    max-width: 900px; /* Ancho máximo del mapa para que no se estire demasiado */
    margin: 0 auto; /* Centra horizontalmente el contenedor */
    border-radius: 0.5rem; /* Bordes ligeramente redondeados */
    overflow: hidden; /* Oculta partes que sobresalgan, útil para bordes redondeados */
    box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* Sombra suave para darle profundidad */
}