@charset "UTF-8";


/* ======================================= global ======================================= */

:root {
    /* https://www.color-name.com/ */
    /*  rgb(184, 33, 40) logo, títulos, headlines clave, elementos de identidad */
    --headline: #b82128;
    /* rgb(41, 63, 87)  menúes, pies de página, bordes, subtítulos */
    --support: #293f57;
    /* rgb(185, 34, 41) CTA, hover states, indicadores activos, botones principales *conversión */
    --contrast: #b92229;

    --black: #0C0304;
    --darkgray: #444;
    --gray: #898989;
    --lightgray: #cecccc;
    --white: #fff;

    --dark-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.3);
    --soft-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.1);
}

/* ------------------------------------ [ Configuración general
    0.125em	(2px)       0.25em	(4px)       0.375em	(6px)       0.625em	(10px)
    1.00em	(16px)      1.625em	(26px)      2.625em	(42px)      4.35em	(70px) */

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: var(--black);
    background-color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', Helvetica, sans-serif;
    color: var(--black);
    font-weight: 400;

}

h1 {
    margin-block: var(--space-small);
    font-size: var(--font-giant);
}

h2 {
    margin-block: var(--space-medium);
    font-size: var(--font-wide);
}

h3 {
    margin-block: var(--space-base);
    font-size: var(--font-large);
}

h4 {
    margin-block: var(--space-large);
    font-size: var(--font-base);
}

h5 {
    margin-block: var(--space-wide);
    font-size: var(--font-medium);
}

h6 {
    margin-block: var(--space-giant);
    font-size: var(--font-small);
}

a {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 500;
    color: #000;
}

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

/*  ======================================= header ======================================= */

#main_header {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white);
    color: var(--headline);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
    z-index: 100;
    border-bottom: var(--contrast) solid var(--font-nano);
}

.topnav {
    display: flex;
    /* Alinea hijos en una sola línea */
    align-items: center;
    /* Centra verticalmente logo y links */
    justify-content: space-between;
    padding: 0 var(--spacing-base);
}

#main_nav {
    display: flex;
    flex-grow: 1;
    justify-content: space-around;
    /*center*/
}

#main_header button,
.dropdown .dropbtn {
    border: none;
    /* Elimina el borde */
    background: none;
    /* Elimina fondo gris por defecto */
    outline: none;
    /* Elimina el borde azul al hacer clic */
    cursor: pointer;
    font-size: 16px;
    /* Ajusta según tu diseño */
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 500;
    margin: var(--spacing-tiny);
    padding: var(--spacing-tiny);
    color: var(--black);
}

#main_header a,
.dropbtn {
    font-family: 'Open Sans', Helvetica, sans-serif;
    font-weight: 500;
    color: var(--black);
    text-decoration: none;
    margin: var(--spacing-tiny);
    padding: var(--spacing-tiny);
    display: block;
    transition: .3s ease;
}


/* Icono Hamburguesa: Oculto por defecto */
#toggle_icon {
    display: none;
    font-size: 24px;
    color: var(--black);
    margin: var(--spacing-tiny);
    padding: var(--spacing-tiny);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: var(--spacing-giant);
    box-shadow: var(--dark-shadow);
    border: 1px solid var(--darkgray);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.nav-suboption {
    text-align: left;
}

#main_header a.currentpage {
    color: var(--headline);
    font-weight: var(--weight-bold);
}

#main_header a:hover {
    text-decoration: underline var(--lightgray) 2px;
}

#header_logo {
    height: var(--spacing-large);
    display: block;
}

#main_header a.disabled {
    color: var(--gray);
}

/* Responsivo */

@media screen and (max-width: 720px) {
    .topnav {
        flex-wrap: wrap;
        /* Permite que el nav baje a la siguiente línea */
    }

    nav {
        display: none;
        /* Oculto por defecto */
        width: 100%;
        flex-direction: column;
        /* Sentido vertical */
        order: 3;
        /* Lo manda al final del flex */
    }

    #toggle_icon {
        display: block;
        /* Se muestra el icono */
        order: 2;
    }

    /* Clase que activa el JS */
    .topnav.responsive nav {
        display: flex;
    }

    nav .nav-option,
    .dropdown {
        width: 100%;
        text-align: left;
        border-top: 1px solid #eee;
    }

    .dropdown-content {
        position: relative;
        /* En móvil el dropdown no flota, empuja el contenido */
        box-shadow: none;
        background: #f9f9f9;
    }
}

/* ======================================= content ======================================= */

section.row {
    padding: var(--spacing-wide) 0;
    background: linear-gradient(rgb(250, 250, 250), rgb(240, 240, 240));
}

section.row:first-of-type {
    margin-top: var(--spacing-medium);
}

.container {
    border: 1px solid var(--darkgray);
    border-radius: var(--spacing-tiny);
}

.medium_icon {
    height: var(--spacing-large);
}

.icon {
    height: var(--spacing-base);
}

.mini_icon {
    height: var(--spacing-medium);
}


/* ======================================= init ======================================= */

img.box-icon {
    height: var(--spacing-wide);
    background-color: var(--support);
    border: var(--spacing-tiny) solid var(--support);
    border-radius: 50%;
    display: block;
    margin: var(--spacing-small) auto;
}

/* Call to Action*/

button.cta {
    width: var(--spacing-giant);
    height: var(--spacing-large);
    background-color: var(--headline);
    color: var(--white);
    position: relative;
    border: 1px var(--darkgray) solid;
    transition: .3s ease;
    z-index: 1;
}

button.cta:hover {
    background-color: var(--contrast);
    color: var(--white);
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-soft),
        0 0 var(--spacing-xnano) var(--spacing-xnano) var(--darkgray);
}

/* Hero section */

#hero-image {
    position: relative;
    height: 100svh;
    /*width: 100%;
    overflow: hidden;*/
    background: url('/img/content/hero_image.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#hero-image .overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 0, 0, 0.35);
    z-index: 1;
}

.hero-content {
    position: absolute;
    top: 60%;
    left: 40%;
    transform: translate(-50%, -60%);
    color: var(--white);
    z-index: 2;
    text-shadow: 0 4px var(--spacing-base) rgba(0, 0, 0, 0.7);
    align-content: center;
}

#hero-image h1 {
    font-size: var(--font-large);
    color: var(--white);
}

/* sections */

/*falta para s */

#whatwesolve h2,
#whatwesolve h3,
#whatwesolve small {
    color: var(--support);
    text-align: center;
}

#experience {
    color: var(--white);
    background-image: linear-gradient(rgba(184, 33, 40, 0.3), rgba(0, 0, 0, 0.3)), url('/img/content/pexels-tima-miroshnichenko-7009485.jpg');
    background-size: cover;
    background-position: center;
}

#experience h2 {
    color: var(--white);
}

#testimonials {
    font-size: calc(var(--font-base) - var(--font-nano));
}

#testimonials img.profile {
    height: var(--spacing-wide);
    border: var(--spacing-tiny) solid var(--white);
    border-radius: 50%;
    float: left;
    margin-right: var(--spacing-medium);
}

#testimonials cite {
    white-space: normal;
}

#testimonials span {
    text-align: center;
}

/* ======================================= mapa ======================================= */

#map {
    width: 86svw;
    height: 48svh;
    min-width: calc(var(--spacing-broad)*10);
    min-height: calc(var(--spacing-wide)*10);
    z-index: 0;
    /* evita quede encima del header*/
}

.leaflet-marker-icon {
    color: var(--contrast);
}


/* interactivo */

#interactivo ul.dinamic {
    columns: 3;
    column-gap: var(--spacing-medium);
    margin-left: var(--spacing-large);
}

#interactivo ul.dinamic li {
    break-inside: avoid;
    padding: var(--spacing-tiny);
}

#interactivo strong:hover {
    color: var(--contrast);
}

#interactivo i {
    color: var(--darkgray);
}

#interactivo hr {
    width: 90%;
    border-bottom-color: var(--spacing-xnano) var(--lightgray) solid;
}

.icon_legend {
    float: right;
    color: var(--gray);
}

/* calles */

input[type=text],
input[type=email],
input[type=tel] {
    height: var(--spacing-large);
    padding: 0.125em 0.25em;
}

#search-results {
    columns: 3;
    column-gap: var(--spacing-medium);
    margin-left: var(--spacing-large);
}

#search-results li {
    break-inside: avoid;
    padding: var(--spacing-tiny);
}

#search-results li small {
    color: var(--gray);
}


/* contacto */

#contacto-formulario input,
#contacto-formulario textarea,
#contacto-formulario select {
    width: 80%;
}




/* ======================================= footer ======================================= */

#main_footer {
    background-color: var(--black);
    color: var(--white);
    bottom: 0;
    top: auto;
    left: 0;
    right: auto;
    width: 100%;
    font-weight: var(--weight-light);
    border-top: var(--contrast) solid var(--font-nano);
}

#main_footer a,
#main_footer p {
    color: var(--white);
    font-size: calc(var(--font-base) - var(--font-xnano));
}

#main_footer p.authoring,
#main_footer p.authoring a {
    font-size: calc(var(--font-base) - var(--font-nano));
}

#main_footer a:hover {
    color: var(--contrast);
}

#main_footer strong {
    color: var(--headline);
}