/* ==========================================================================
   Capa de estilo propia — Dr. Ulises Gómez
   --------------------------------------------------------------------------
   Se carga AL FINAL, despues de las hojas del template, para refinar
   tipografia, tarjetas, acordeon y animaciones de entrada.

   Todo es reversible: basta con quitar el <link> de _Layout.cshtml y el
   sitio vuelve exactamente a como estaba.
   ========================================================================== */

:root {
    --ink:       #0d1738;   /* titulos */
    --body:      #52607a;   /* parrafos */
    --brand:     #051350;   /* azul de marca */
    --accent:    #00b4d7;   /* cian de marca */
    --line:      #e6ecf5;
    --soft:      #f6f9fd;
    --ease:      cubic-bezier(.22, .61, .36, 1);
    --shadow-sm: 0 4px 16px rgba(5, 19, 80, .06);
    --shadow-md: 0 16px 40px rgba(5, 19, 80, .13);
}

/* ==========================================================================
   01. Tipografia base
   ========================================================================== */

body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* La escala de titulos se aplica solo al CONTENIDO de las paginas.
   Asi no se toca el menu, la cabecera ni el footer del template. */
.section-padding h1, .section-padding h2, .section-padding h3,
.section-padding h4, .section-padding h5, .section-padding h6,
.legal-content h1, .legal-content h2, .legal-content h3, .legal-content h4,
#breadcrumb-area h1, #breadcrumb-area h2 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.section-padding h1 { font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.55rem); }
.section-padding h2 { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem); }
.section-padding h3 { font-size: 1.14rem; }
.section-padding h4 { font-size: 1.04rem; }

.section-padding p {
    line-height: 1.75;
}

/* Enlaces de contenido, con subrayado sutil que aparece al pasar. */
.section-padding p a,
.legal-content p a {
    color: var(--brand);
    text-decoration: none;
    border-bottom: 1px solid rgba(5, 19, 80, .25);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}

.section-padding p a:hover,
.legal-content p a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ==========================================================================
   02. Migas de pan (cabecera de pagina interior)
   ========================================================================== */

#breadcrumb-area {
    position: relative;
    padding: 84px 0 76px;
    /* Degradado encima de la foto (la primera capa tapa a la segunda).
       Es mas fiable que un ::after, que competiria con el z-index del template. */
    background-image:
        linear-gradient(180deg, rgba(5, 19, 80, .58) 0%, rgba(5, 19, 80, .70) 100%),
        url(../img/bg/breadcrumb-bg.jpg);
}

#breadcrumb-area h1,
#breadcrumb-area h2 {
    color: #fff;
    font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.35rem);
    margin-bottom: .65rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}

#breadcrumb-area ul {
    margin-top: .35rem;
}

#breadcrumb-area ul li {
    font-size: .9375rem;   /* 15px, igual para el texto y para los enlaces */
    letter-spacing: .01em;
    opacity: .92;
}

/* OJO: el template fija en typography.css un font-size de 18px sobre los ENLACES
   de las migas, con la misma especificidad que esta regla. Como profesional.css
   se carga despues, este "inherit" gana. Sin el, los enlaces salian a 18px
   mientras el texto suelto (la pagina actual) salia a 15px: se veian distintos. */
#breadcrumb-area ul li a {
    color: #fff;
    font-size: inherit;
    opacity: .85;
    transition: opacity .25s var(--ease);
}

#breadcrumb-area ul li a:hover {
    opacity: 1;
}

/* ==========================================================================
   03. Tarjetas de servicio
   ========================================================================== */

.servicio-card {
    text-align: center;
    height: 100%;
    padding: 1.5rem .75rem 1.75rem;
    border-radius: 18px;
    transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.servicio-card img {
    display: block;
    width: 100%;
    max-width: 176px;
    height: auto;
    margin: 0 auto 1.15rem;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(5, 19, 80, .10);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.servicio-card:hover img,
.servicio-card:focus-within img {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px rgba(5, 19, 80, .18);
}

.servicio-card h3 {
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: .55rem;
}

.servicio-card p {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--body);
    margin-bottom: 0;
}

.servicio-foto {
    display: block;
}

/* ==========================================================================
   04. Acordeon de Preguntas Frecuentes
   ========================================================================== */

.faq-servicio {
    margin-top: 3.5rem;
}

.faq-servicio h2 {
    position: relative;
    padding-bottom: .85rem;
    margin-bottom: 1.75rem;
}

/* Filete corto de color bajo el titulo, en vez de una linea completa. */
.faq-servicio h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
}

/* Sin cajas grises: filas limpias separadas por una linea fina. */
.faq-servicio .accordion {
    border-top: 1px solid var(--line);
}

.faq-servicio .card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    margin: 0;
    overflow: hidden;
}

.faq-servicio .card-header {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.faq-servicio .card-header h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    line-height: inherit;
    color: inherit;
}

.faq-servicio .card-header .btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 1.3rem 3rem 1.3rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: -.005em;
    color: var(--ink);
    white-space: normal;
    position: relative;
    transition: color .25s var(--ease), padding-left .3s var(--ease);
}

.faq-servicio .card-header .btn:hover,
.faq-servicio .card-header .btn:focus {
    color: var(--accent);
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

.faq-servicio .card-header .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Chevron dibujado en CSS: gira al abrir. */
.faq-servicio .card-header .btn::after {
    content: '';
    position: absolute;
    right: .5rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .45;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .35s var(--ease), opacity .25s var(--ease);
}

.faq-servicio .card-header .btn:hover::after {
    opacity: .9;
}

.faq-servicio .card-header .btn[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(-135deg);
    opacity: .9;
}

.faq-servicio .card-body {
    padding: 0 3rem .4rem 0;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body);
    max-width: 68ch;
}

/* Aparicion suave de la respuesta al abrir. */
.faq-servicio .collapse.show .card-body {
    animation: faqAparece .4s var(--ease) both;
}

@keyframes faqAparece {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Curva de apertura mas natural que la de Bootstrap. */
.faq-servicio .collapsing {
    transition: height .34s var(--ease);
}

/* ==========================================================================
   05. Animaciones de entrada
   La clase .js la pone un script en el <head>, antes de pintar. Si el
   navegador no ejecuta JS, nada queda oculto.
   ========================================================================== */

.js .servicio-card,
.js .servicio-contenido img,
.js .texto-servicio,
.js .faq-servicio,
.js .legal-content,
.js .section-padding h1,
.js #breadcrumb-area h1,
.js #breadcrumb-area h2 {
    opacity: 0;
    transform: translateY(18px);
}

.js .servicio-card.visible,
.js .servicio-contenido img.visible,
.js .texto-servicio.visible,
.js .faq-servicio.visible,
.js .legal-content.visible,
.js .section-padding h1.visible,
.js #breadcrumb-area h1.visible,
.js #breadcrumb-area h2.visible {
    opacity: 1;
    transform: none;
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ==========================================================================
   06. Tienda
   Portada: una foto grande a la izquierda (7/12) y dos apiladas a la derecha
   (5/12). En escritorio las tres comparten el mismo alto; en movil se apilan.
   Productos destacados: tarjetas que llena wwwroot/zcore/js/Tienda.js.
   ========================================================================== */

.tienda-collage {
    /* Un solo alto para las tres fotos: asi el borde inferior coincide
       exactamente y la fila queda pareja. */
    --tienda-alto: 520px;
}

.tienda-foto-principal,
.tienda-fotos img {
    display: block;
    width: 100%;
    object-fit: cover;
}

@media (min-width: 992px) {
    .tienda-foto-principal,
    .tienda-fotos {
        height: var(--tienda-alto);
    }

    /* Las dos fotos de la derecha se reparten el alto de la izquierda. */
    .tienda-fotos {
        flex-direction: column;
        gap: 20px;
    }

    .tienda-fotos .col-12 {
        flex: 1 1 0;
        min-height: 0;
    }

    .tienda-fotos img {
        height: 100%;
    }
}

/* Tarjeta de producto destacado */
.tienda-producto {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.tienda-producto:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.tienda-producto-foto {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--soft);
}

.tienda-producto-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.tienda-producto:hover .tienda-producto-foto img {
    transform: scale(1.05);
}

.tienda-producto-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .3rem;
    padding: 1.1rem 1.15rem 1.35rem;
    text-align: center;
}

.tienda-producto-categoria {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8c96a8;
}

.tienda-producto-nombre {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.4;
}

.tienda-producto-nombre a {
    color: var(--ink);
}

.tienda-producto-precio {
    margin: .35rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand);
}

/* ==========================================================================
   07. Paginas de servicio (columna descriptiva)
   ========================================================================== */

.servicio-contenido img {
    max-width: 100%;
    height: auto;
}

/* Texto descriptivo: algo mas grande que el cuerpo, para liderar la lectura. */
.texto-servicio {
    font-size: 21px;
}

/* El CSS del template anula los bullets (ul { list-style: none }).
   Aqui se restauran, con sangria. */
.texto-servicio ul {
    list-style: disc;
    padding-left: 1.75rem;
    margin-top: .75rem;
    margin-bottom: 1.25rem;
}

.texto-servicio li {
    margin-bottom: .5rem;
}

.texto-servicio b {
    display: block;
    margin-top: 1rem;
    margin-bottom: .5rem;
}

/* Aviso medico al pie de la lista "es para mi?". Se separa del texto
   descriptivo con un filete de color y un cuerpo algo menor. */
.texto-servicio .aviso-medico {
    margin-top: 1.25rem;
    margin-bottom: 0;
    padding: .65rem 0 .65rem 1rem;
    border-left: 3px solid var(--accent);
    font-size: 1rem;
    line-height: 1.65;
}

/* ==========================================================================
   08. Respeto por quien prefiere menos movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .js .servicio-card,
    .js .servicio-contenido img,
    .js .texto-servicio,
    .js .faq-servicio,
    .js .legal-content,
    .js .section-padding h1,
    .js #breadcrumb-area h1,
    .js #breadcrumb-area h2 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .faq-servicio .collapse.show .card-body {
        animation: none;
    }

    .servicio-card:hover img {
        transform: none;
    }
}

/* ==========================================================================
   09. Footer: sucursales con su telefono
   Va aqui (y no en widget.css) porque profesional.css se sirve con
   asp-append-version y asi los cambios no se quedan en cache.
   ========================================================================== */

#footer-widgets ul.widget-info li.footer-sucursal {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    line-height: 1.6;
}

#footer-widgets ul.widget-info li.footer-sucursal > i {
    flex: 0 0 auto;
    margin-top: 5px;
}

#footer-widgets ul.widget-info li.footer-sucursal .footer-sucursal__datos {
    min-width: 0;
}

#footer-widgets ul.widget-info li.footer-sucursal p {
    margin: 0;
    color: #5e6271;
}

#footer-widgets ul.widget-info .footer-tel {
    display: flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 3px;
    color: #5e6271;
    font-size: 13.5px;
    letter-spacing: .2px;
    line-height: 1.4;
    text-decoration: none;
    transition: color .2s ease;
}

#footer-widgets ul.widget-info .footer-tel i {
    margin-right: 6px;
    color: #128c7e;
    font-size: 11px;
    opacity: .9;
}

#footer-widgets ul.widget-info .footer-tel:hover,
#footer-widgets ul.widget-info .footer-tel:focus-visible {
    color: #1f3b36;
    text-decoration: underline;
}

#footer-widgets ul.widget-info .footer-tel:focus-visible {
    outline: 2px solid rgba(18, 140, 126, .45);
    outline-offset: 2px;
}

/* ==========================================================================
   10. Registro COFEPRIS junto al logo (header y footer)
   ========================================================================== */

/* --- Header --- */
.logo.main {
    display: flex;
    align-items: center;
}

.logo.main > a {
    display: block;
    flex: 0 0 auto;
}

/* El PNG del logo mide 220x60. Fijamos el ancho y dejamos que el alto salga
   de su proporcion para que nunca se deforme si el contenedor se reduce. */
.navbar-area .logo img {
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.header-cofepris {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid #e3e7ef;
    line-height: 1.35;
}

.header-cofepris span {
    color: #8a90a0;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.header-cofepris strong {
    color: #2c3145;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .header-cofepris {
        display: none;
    }
}

/* --- Footer --- */
#footer-widgets .footer-logo {
    margin-bottom: 8px;
}

#footer-widgets .footer-cofepris {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
    color: #5e6271;
    font-size: 11.5px;
    letter-spacing: .04em;
}

#footer-widgets .footer-cofepris span {
    color: #8a90a0;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#footer-widgets .footer-cofepris strong {
    color: #2c3145;
    font-weight: 700;
    letter-spacing: .06em;
}

/* ==========================================================================
   11. Acceso a Inicio en la cabecera móvil
   --------------------------------------------------------------------------
   El menú quedó reducido a Inicio, así que en móvil no hace falta el panel
   desplegable: el acceso directo ocupa el lugar de la hamburguesa.
   ========================================================================== */

.nav-inicio-movil {
    display: inline-block;
    padding: 10px 0;
    color: #363636;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    -webkit-transition: color .25s var(--ease);
    transition: color .25s var(--ease);
}

.nav-inicio-movil:hover,
.nav-inicio-movil:focus-visible,
.nav-inicio-movil.active {
    color: var(--brand);
}

.nav-inicio-movil:focus-visible {
    outline: 2px solid rgba(5, 19, 80, .35);
    outline-offset: 2px;
}

.nav-inicio-movil.active::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 4px;
    background: var(--brand);
}

/* ==========================================================================
   12. Migas de pan de las páginas de servicio
   --------------------------------------------------------------------------
   La foto del consultorio es muy clara (paredes y muebles blancos), así que
   el texto blanco necesita una capa azul de marca encima. Con el degradado
   al 75-82% el contraste mínimo ronda 8:1 y la foto sigue leyéndose.
   ========================================================================== */

body.servicios #breadcrumb-area {
    background-image:
        linear-gradient(180deg, rgba(5, 19, 80, .75) 0%, rgba(5, 19, 80, .82) 100%),
        url(../../img/bg_secciones.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ==========================================================================
   13. Footer: mapa de sucursales y botón "Cómo llegar"
   ========================================================================== */

.footer-mapa {
    margin-bottom: 1.6rem;
}

#footer-widgets .footer-mapa__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

#footer-widgets .footer-mapa__cabecera h4 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

#footer-widgets .footer-mapa__cabecera p {
    margin: 0;
    color: #8a90a0;
    font-size: 12px;
    letter-spacing: .02em;
    text-align: right;
}

.footer-mapa__canvas {
    position: relative;
    height: 300px;
    overflow: hidden;
    border: 1px solid rgba(5, 19, 80, .1);
    border-radius: 16px;
    background: #e9eef6;
    box-shadow: 0 12px 30px rgba(5, 19, 80, .08);
}

.footer-mapa__cargando {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e8eef7 100%);
    color: #7a849a;
    font-size: 13px;
    letter-spacing: .02em;
}

.footer-mapa__cargando::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 9px;
    border: 2px solid rgba(5, 19, 80, .15);
    border-top-color: var(--brand);
    border-radius: 50%;
    -webkit-animation: footer-mapa-giro .8s linear infinite;
    animation: footer-mapa-giro .8s linear infinite;
}

@-webkit-keyframes footer-mapa-giro {
    to { -webkit-transform: rotate(360deg); }
}

@keyframes footer-mapa-giro {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .footer-mapa__cargando::before {
        -webkit-animation: none;
        animation: none;
    }
}

.footer-mapa__canvas--error {
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#footer-widgets .footer-mapa__fallback {
    margin: 10px 0 0;
    color: #7a849a;
    font-size: 12.5px;
}

#footer-widgets .footer-mapa__fallback a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(5, 19, 80, .25);
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

#footer-widgets .footer-mapa__fallback a:hover,
#footer-widgets .footer-mapa__fallback a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Los pines se dibujan con CSS para no cargar imágenes extra. */
.mapa-pin {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-transition: -webkit-transform .2s var(--ease);
    transition: transform .2s var(--ease);
}

.mapa-pin::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    background: var(--brand);
    box-shadow: 0 6px 14px rgba(5, 19, 80, .3);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: background .2s var(--ease);
    transition: background .2s var(--ease);
}

.mapa-pin::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.mapa-pin:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.mapa-pin:hover::before {
    background: #0a1e6e;
}

.mapa-pin:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 50%;
}

.mapa-popup .mapboxgl-popup-content {
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 16px 35px rgba(5, 19, 80, .18);
    font-family: inherit;
}

.mapa-popup .mapboxgl-popup-content strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 14px;
}

.mapa-popup .mapboxgl-popup-content span {
    display: block;
    color: #5e6271;
    font-size: 12.5px;
    line-height: 1.45;
}

.mapa-popup .mapboxgl-popup-content a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.mapa-popup .mapboxgl-popup-content a:hover,
.mapa-popup .mapboxgl-popup-content a:focus-visible {
    color: var(--accent);
}

.mapa-popup .mapboxgl-popup-content a i {
    font-size: 11px;
}

/* Botón "Cómo llegar": discreto, con el azul de marca. */
#footer-widgets .footer-sucursal {
    padding-right: 0;
}

#footer-widgets .footer-como-llegar {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    padding: 9px 16px;
    border: 1px solid rgba(5, 19, 80, .22);
    border-radius: 999px;
    background: #fff;
    color: var(--brand);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(5, 19, 80, .04);
    -webkit-transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), -webkit-transform .22s var(--ease);
    transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}

#footer-widgets .footer-como-llegar i {
    margin-right: 0;
    color: var(--accent);
    font-size: 11px;
    -webkit-transition: color .22s var(--ease);
    transition: color .22s var(--ease);
}

#footer-widgets .footer-como-llegar:hover,
#footer-widgets .footer-como-llegar:focus-visible {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(5, 19, 80, .18);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

#footer-widgets .footer-como-llegar:hover i,
#footer-widgets .footer-como-llegar:focus-visible i {
    color: #fff;
}

#footer-widgets .footer-como-llegar:focus-visible {
    outline: 2px solid rgba(5, 19, 80, .35);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .footer-mapa {
        margin-bottom: 1.4rem;
    }

    #footer-widgets .footer-mapa__cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    #footer-widgets .footer-mapa__cabecera p {
        text-align: left;
    }

    .footer-mapa__canvas {
        height: 240px;
        border-radius: 12px;
    }
}

/* ==========================================================================
   14. Footer: redes sociales
   ========================================================================== */

.footer-redes {
    margin-top: 24px;
}

#footer-widgets .footer-redes__titulo {
    margin: 0 0 10px;
    color: #8a90a0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.footer-redes__lista {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-redes__lista li {
    margin: 0;
}

#footer-widgets .footer-redes__lista a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(5, 19, 80, .06);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(5, 19, 80, .06);
    -webkit-transition: -webkit-transform .22s var(--ease), box-shadow .22s var(--ease);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

#footer-widgets .footer-redes__lista img {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

#footer-widgets .footer-redes__lista a:hover,
#footer-widgets .footer-redes__lista a:focus-visible {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(5, 19, 80, .15);
}

#footer-widgets .footer-redes__lista a:focus-visible {
    outline: 2px solid rgba(5, 19, 80, .35);
    outline-offset: 3px;
}

/* ==========================================================================
   15. Ancho del contenedor en pantallas grandes
   --------------------------------------------------------------------------
   Bootstrap 4 fija .container en 1140 px desde 1200 px. En un monitor Full HD
   eso deja 390 px libres a cada lado, por eso la página se ve estrecha.
   A partir de 1600 px ampliamos el contenedor de forma progresiva; las
   laptops de 1366/1440 conservan el ancho con el que fueron diseñadas.
   ========================================================================== */

@media (min-width: 1600px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1900px) {
    .container {
        max-width: 1440px;
    }
}

@media (min-width: 2200px) {
    .container {
        max-width: 1600px;
    }
}

/* Los textos legales no deben quedar con lineas de 1200 px en Full HD. */
.legal-content {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}