/*####################################################
##													##
## FDF										        ##
## 													##
## CUSTOM.CSS										##
## 													##
## 													##
## Estilo CSS										##
## Estilos globales para el frontend				##
## Estilo personalizados para sucursal         		##
##													##
####################################################*/

@charset "utf-8";

/*** BODY ***/

body {
    background: #fff;
    color: #111;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    letter-spacing: initial;
}

/*** A ***/

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/*** COLORES ***/

.green {
    color: #45B062;
}

.orange {
    color: #FA831B;
}

/*** COLORES DE FONDO ***/

.white-bg {
    background-color: #FFF;
}

.orange-bg {
    background-color: #FA831B;
}

.gray-v1-bg {
    background-color: #4D4D4D;
}

.gray-v2-bg {
    background-color: #E5E5E5;
}

/*** MÁRGENES ***/

.m-auto {
    margin: auto;
}

.mb-1 {
    margin-bottom: 1em;
}

.mt-15 {
    margin-top: 15px;
}

.mt-25 {
    margin-top: 25px;
}

/*** ANCHOS ***/

.max-1024 {
    max-width: 1024px;
}

.max-800 {
    max-width: 800px;
}

/*** POSICIONAMIENTO ***/

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/*** GRID ***/

.grid {
    display: grid;
}

.grid-2 {
    grid-template-columns: 1fr 1fr;
}

.gap-25 {
    gap: 25px;
}

/*** VARIOS ***/

    /* Línea */

    .line {
        width: 100%;
        height: 2px;
        background: #FA831B;
    }

    .line-15 {
        width: 100%;
        height: 15px;
        background: #FA831B;
    }

    /* Fuente light */

    .font-light {
        font-weight: 400;
    }

/*** LAYOUT ***/

    /** Header **/

    header {
        padding: 25px;
    }

        header img {
            width: 64px;
            display: block;
        }

/*** SECCIONES ***/

#sucursal__info {
    padding: 25px;
}

    #sucursal__info h1 {
        font-size: 2.5em;
        font-weight: 800;
        text-align: center;
    }

    #sucursal__info img {
        width: 100%;
        display: block;
    }

        #sucursal__nombre {
            padding: 10px 25px;
            background: #4D4D4D;
            color: #fff;
            font-size: 2em;
            font-style: italic;
            border-top-right-radius: 25px;
            bottom: 0;
        }

    #sucursal__datos .bloque-datos {
        margin-top: 25px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4D4D4D;
    }

        #sucursal__datos .bloque-datos > span {
            margin-bottom: 10px;
            padding-left: 35px;
            padding-top: 11px;
            height: 32px;
            display: block;
            color: #FA831B;
            font-weight: 700;
            font-size: 1.2em;
        }

            #sucursal__datos .bloque-datos > span.direccion {
                background: url('../../imgs/direccion-icon.png') no-repeat center left;
            }

            #sucursal__datos .bloque-datos > span.horario {
                background: url('../../imgs/reloj-icon.png') no-repeat center left;
            }

            #sucursal__datos .bloque-datos > span.whatsapp {
                background: url('../../imgs/whatsapp-icon.png') no-repeat center left;
            }

            #sucursal__datos .bloque-datos > span.redes {
                background: url('../../imgs/redes-icon.png') no-repeat center left;
            }

            #sucursal__datos .bloque-datos > span.googlemaps {
                background: url('../../imgs/googlemaps-icon.png') no-repeat center left;
            }

            #sucursal__datos .bloque-datos > p {
                font-size: 1.4em;
                font-weight: 700;
                color: #4D4D4D;
            }

                #sucursal__datos .bloque-datos > p a {
                    color: #4D4D4D;
                }

            #sucursal__datos .horarios {
                line-height: 1.5em;
            }

    #sucursal__mapa iframe {
        width: 100%;
    }

/*** INCOMPATIBLE ***/

#incompatible {
    display: none;
}

/*** BREAKPOINTS ***/

    /* 480px */

    @media screen and (max-width: 480px) {
        #sucursal__nombre {
            padding: 5px 15px;
            font-size: 1.5em;
            border-top-right-radius: 15px;
        }

        #sucursal__datos .grid {
            grid-template-columns: 1fr;
            gap: 0;
        }
    }