/* ==========================================================================
   Correcciones responsive (auditoria septiembre 2026)

   Capa final de ajustes para movil y tablet. Se carga al final de
   partials/styles.html para ganar por orden a responsive.min.css, al.min.css
   y a los <style> inline del header. Cada bloque documenta la regla que corrige.
   Casi todo vive bajo media queries <992px: el escritorio no cambia, salvo el
   padding de las bandas solidas (.asg-band--solid), que estaba roto en todos
   los anchos.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Cabecera y menu movil (<992px)

   header.html fija el .container a max-height:120px (inline) y el wrap a
   height:120px!important, mientras #header medía 71px: el menu desplegado y el
   selector de idioma se desbordaban SIN fondo sobre el banner de la pagina, el
   logo quedaba pegado al borde superior y el boton de menu era gris #444 sobre
   negro con 30x41px de area tactil. Aqui la cabecera pasa a una fila flexible
   (menu | logo | idioma) que crece con el menu abierto, siempre en negro.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    #header,
    #header.sticky-header {
        height: auto !important;
    }

    #header #header-wrap,
    #header.sticky-header #header-wrap {
        height: auto !important;
        min-height: 0 !important;
        background: var(--frisa-ink);
    }

    #header #header-wrap > .container.clearfix {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        max-height: none !important;
        min-height: 64px;
        padding: 10px 16px !important;
    }

    /* Misma caja de 44px que el boton y el idioma: quedan alineados al abrir el menu. */
    #header #logo {
        float: none;
        display: flex;
        height: 44px;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1;
    }

    #header #logo h1 {
        margin: 0;
        line-height: 0;
    }

    #header #logo img {
        width: 118px !important;
    }

    #header #primary-menu-trigger {
        position: absolute;
        top: 10px;
        left: 8px;
        display: flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        transform: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
    }

    #header #primary-menu-trigger i {
        height: auto;
        line-height: 1;
        color: inherit;
    }

    /* El .container anidado deja de sumar padding y de ser ancestro posicionado,
       para que #menu-right se ubique contra la fila de la cabecera. */
    #header #header-wrap > .container > .container {
        position: static;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100%;
        padding: 0 !important;
    }

    #header #primary-menu {
        float: none;
        width: 100%;
        height: auto !important;
        padding-top: 0 !important;
    }

    /* Idioma: arriba a la derecha, dentro de la banda negra. */
    #header #menu-right {
        position: absolute;
        top: 10px;
        right: 8px;
        height: 44px;
        margin: 0;
        border: 0;
    }

    #header #menu-right .change-languages {
        padding: 0 !important;
    }

    #header #menu-right a {
        display: flex;
        height: 44px;
        align-items: center;
        gap: 6px;
        padding: 0 6px !important;
        font-size: 12px;
    }

    #header #menu-right a img {
        margin-top: 0 !important;
    }

    /* Menu abierto: lista a todo el ancho, con separadores y areas tactiles de 48px. */
    #header #primary-menu > ul {
        margin: 10px 0 4px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    #header #primary-menu > ul > li {
        display: block;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    #header #primary-menu > ul > li > a {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 48px;
        padding: 12px 4px !important;
        font-size: 14px;
        text-align: left;
        color: #fff;
    }

    /* Los rotulos a dos lineas ("Parque Natural / La Cañada", con margin-left:26px
       inline) se leen en una sola linea dentro del menu movil. */
    #header #primary-menu > ul > li > a .space {
        display: inline;
        margin-left: 0 !important;
        padding: 0;
    }

    #header #primary-menu > ul > li > a .space + .space::before {
        content: "\00a0";
    }

    #header #primary-menu > ul > li > a:before {
        display: none;
    }

    #header #primary-menu > ul > li > ul {
        padding: 0 0 8px 14px;
        background: transparent;
    }

    #header #primary-menu > ul > li > ul a {
        display: block;
        padding: 10px 4px !important;
        font-size: 13px;
        color: rgba(255, 255, 255, .8) !important;
    }
}


/* --------------------------------------------------------------------------
   2. Contenedores

   responsive.css (<576px) da 40px de padding lateral a todo .container: en un
   telefono de 360px el texto quedaba en 280px, y en las secciones con
   .container anidado (Voluntariados, ODS...) en 200px. Tambien hay .row con
   clase col-* (Cañada) cuyo padding anula el margen negativo de la fila.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container,
    .container-fullwidth {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 767.98px) {
    #wrapper .container .container {
        padding-left: 0;
        padding-right: 0;
    }

    #wrapper .row[class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}


/* --------------------------------------------------------------------------
   3. Bandas parallax y bandas solidas

   al.css pone .parallax { padding: 90px } y, al cargar despues de tania.css,
   pisa el padding de .asg-band: en 360px las graficas historicas quedaban en
   ~180px de ancho y se cortaban valores ("596,120") y años.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .parallax {
        padding: 56px 0;
    }

    .parallax.asg-band {
        padding: 48px 0 52px;
    }
}

@media (max-width: 767.98px) {
    .parallax {
        padding: 44px 0;
    }

    .parallax.asg-band {
        padding: 40px 0 44px;
    }
}

/* .asg-band--solid (Capacitacion, Consejo, Etica) lleva tambien .py-1, cuyo
   !important dejaba la banda en 4px: el titulo tocaba el borde. */
.py-1.asg-band--solid {
    padding-top: 52px !important;
    padding-bottom: 56px !important;
}

@media (max-width: 767.98px) {
    .py-1.asg-band--solid {
        padding-top: 36px !important;
        padding-bottom: 40px !important;
    }
}


/* --------------------------------------------------------------------------
   4. Infografias, logos y video

   Las infografias van con width="60-80%" (o inline) pensado para escritorio;
   en movil su texto quedaba ilegible. Bajo 768px ocupan todo el ancho util.
   GRI y SASB (max-width:300px cada uno en fila flex) se salian de la pantalla.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #wrapper img[width$="%"],
    #wrapper img[style*="width:80%"],
    #wrapper img[style*="width: 80%"],
    #wrapper img[style*="width:70%"],
    #wrapper img[style*="width: 70%"] {
        width: 100% !important;
        height: auto !important;
    }

    #wrapper img[style*="max-width: 300px"] {
        min-width: 0;
        max-width: calc(50% - 10px) !important;
    }

    #wrapper video[width] {
        width: 100% !important;
        height: auto !important;
    }
}


/* --------------------------------------------------------------------------
   5. Cifras relevantes (inicio)

   A 576-991px las 4 cifras van en columnas col-sm-3 de ~190px y numeros como
   "245,050" chocaban con la columna vecina. En ese rango van de dos en dos.
   -------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
    #wprt-counter-index > .col-sm-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 24px;
    }
}


/* --------------------------------------------------------------------------
   6. Franja de acciones ASG y footer

   El correo de la tarjeta "Contactar al Departamento de Sostenibilidad" es una
   sola palabra larga y se salia de la tarjeta en movil. En el footer, los <br>
   sueltos entre datos abrian huecos de ~60px y la direccion iba sangrada 4px.
   -------------------------------------------------------------------------- */
.asg-action__hint {
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .asg-action {
        gap: 12px;
        padding: 16px;
    }

    .asg-action__icon {
        width: 40px;
        height: 40px;
    }
}

/* En telefonos angostos la flecha decorativa le quita al correo el ancho que
   necesita para no partirse; la tarjeta completa sigue siendo el enlace. */
@media (max-width: 413.98px) {
    .asg-action {
        grid-template-columns: auto 1fr;
    }

    .asg-action__go {
        display: none;
    }
}

@media (max-width: 767.98px) {
    #site-footer p,
    #site-footer span,
    #site-footer a {
        font-size: 15px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    #site-footer .cont > br,
    #site-footer .about-widget > div > br {
        display: none;
    }

    #site-footer .cont p {
        margin-bottom: .6rem !important;
    }

    #site-footer .about-widget > div {
        margin-left: 0 !important;
    }

    #site-footer .col-md-4.mb-5 {
        margin-bottom: 1.5rem !important;
    }
}


/* --------------------------------------------------------------------------
   7. Carrusel EDGE (certificaciones)

   A 16:9 la diapositiva medía ~180px de alto en un telefono: las flechas
   tapaban el nombre de la propiedad. En movil pasa a formato vertical.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    a.edge-slide__link {
        aspect-ratio: 4 / 5;
    }

    .edge-slide__info {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .edge-slide__badge {
        font-size: .75rem;
    }

    .edge-carousel__arrow {
        top: 40%;
        width: 40px;
        height: 40px;
    }
}


/* --------------------------------------------------------------------------
   8. Formulario de contacto

   La tarjeta (m-auto, padding 36px) tocaba los bordes de la pantalla.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    fieldset.contact-card.m-auto {
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding: 24px 16px;
    }
}


/* --------------------------------------------------------------------------
   9. Colaboradores por genero (Social)

   El porcentaje (.count) va absoluto con translate(-50%) y sin left: se ancla
   al borde izquierdo de la columna. En escritorio la columna (col-lg-2) mide
   lo mismo que el anillo y el globo cae sobre el; en movil la columna ocupa
   todo el ancho, el anillo SVG queda centrado y el globo se salia de la
   pantalla. Aqui la caja se ajusta al anillo (250px, centrada) y el globo se
   coloca sobre su borde izquierdo (r=66 de 80 en el viewBox -> ~9%).
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    #colaboradores_genero .honeycomb-wrapper .tile .honeycomb {
        display: block;
        max-width: 250px;
        margin: 0 auto;
    }

    #colaboradores_genero .honeycomb-wrapper .count {
        left: 9%;
    }
}


/* --------------------------------------------------------------------------
   10. Tabla de capacitacion (Social)

   styles_social.html baja los encabezados a .66em en movil (9.5px): ilegible.
   Selector mas especifico porque ese <style> carga despues de esta hoja.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    table.cap-table thead th {
        font-size: max(11px, .72em);
    }
}