@charset "UTF-8";

:root {
  --body: #333;
  --blanco: #FFFFFF;
  --gris: #F6F9FD;
  --negro: #000;
  --azul: #0056A1;
  --azul-claro: #E6EDF4;
  --naranja: #E9533F;
  --naranja-claro: #FDEDEB;
  --morado: #822581;
  --turquesa: #2CFEE0;
}

/* icomoon */
@font-face { font-family:'icomoon'; src:url('../fonts/icomoon.eot?c8byvb'); src: url('../fonts/icomoon.ttf?c8byvb') format('truetype'), url('../fonts/icomoon.woff?c8byvb') format('woff'), url('../fonts/icomoon.svg?c8byvb#icomoon') format('svg'); font-weight:normal; font-style:normal; font-display:swap; }

@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-ExtraLight.woff2') format('woff2'), url('../fonts/TitilliumWeb-ExtraLight.woff') format('woff'), url('../fonts/TitilliumWeb-ExtraLight.ttf') format('truetype')  /* Safari, Android, iOS */; font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-Light.woff2') format('woff2'), url('../fonts/TitilliumWeb-Light.woff') format('woff'), url('../fonts/TitilliumWeb-Light.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'), url('../fonts/TitilliumWeb-Regular.woff') format('woff'), url('../fonts/TitilliumWeb-Regular.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-SemiBold.woff2') format('woff2'), url('../fonts/TitilliumWeb-SemiBold.woff') format('woff'), url('../fonts/TitilliumWeb-SemiBold.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'), url('../fonts/TitilliumWeb-Bold.woff') format('woff'), url('../fonts/TitilliumWeb-Bold.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:bold; font-style:normal; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-Black.woff2') format('woff2'), url('../fonts/TitilliumWeb-Black.woff') format('woff'), url('../fonts/TitilliumWeb-Black.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-ExtraLightItalic.woff2') format('woff2'), url('../fonts/TitilliumWeb-ExtraLightItalic.woff') format('woff'), url('../fonts/TitilliumWeb-ExtraLightItalic.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-LightItalic.woff2') format('woff2'), url('../fonts/TitilliumWeb-LightItalic.woff') format('woff'), url('../fonts/TitilliumWeb-LightItalic.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-Italic.woff2') format('woff2'), url('../fonts/TitilliumWeb-Italic.woff') format('woff'), url('../fonts/TitilliumWeb-Italic.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:normal; font-style:italic; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-SemiBoldItalic.woff2') format('woff2'), url('../fonts/TitilliumWeb-SemiBoldItalic.woff') format('woff'), url('../fonts/TitilliumWeb-SemiBoldItalic.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Titillium Web'; src:url('../fonts/TitilliumWeb-BoldItalic.woff2') format('woff2'), url('../fonts/TitilliumWeb-BoldItalic.woff') format('woff'), url('../fonts/TitilliumWeb-BoldItalic.ttf')  format('truetype') /* Safari, Android, iOS */; font-weight:bold; font-style:italic; font-display:swap; }


[class^="icon-"], [class*=" icon-"], .icon { font-family:'icomoon' !important; speak:never; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.icon-arrow-right:before { content:"\e90e"; }
.icon-file-pdf:before { content:"\e907"; }
.icon-file:before { content:"\e90c"; }
.icon-video:before { content:"\e90d"; }
.icon-arrow-dg:before { content:"\e900"; }
.icon-arrow-down:before { content:"\e901"; }
.icon-facebook:before { content:"\e902"; }
.icon-hamburguer:before { content:"\e903"; }
.icon-open:before { content:"\e904"; }
.icon-text-dg:before { content:"\e905"; }
.icon-warning:before { content:"\e906"; }
.icon-twitter:before { content:"\e908"; }
.icon-times:before { content:"\e90a"; }
.icon-checked:before { content:"\e914"; }
.icon-linkedin:before { content:"\e90b"; }
.icon-search:before { content:"\e909"; }
.icon-play:before { content:"\ea1c"; }
.icon-pause:before { content:"\ea1d"; }
.icon-volume-medium:before { content:"\ea27"; }
.icon-volume-mute:before { content:"\ea2a"; }
.icon-instagram:before { content:"\e91a"; }
.icon-arrow-left:before { content: "\e90e"; transform: rotate(180deg); display: inline-block;}


.text-blanco { color:var(--blanco); }
.text-azul { color:var(--azul); }
.text-naranja { color:var(--naranja); }
.text-morado { color:var(--morado); }

.bg-blanco { background:var(--blanco); }
.bg-azul { background:var(--azul); }
.bg-azul-claro { background:var(--azul-claro); }
.bg-gris { background:var(--gris); }
.bg-naranja { background:var(--naranja); }
.bg-naranja-claro { background:var(--naranja-claro); }

body, html { width:100%; height:100%; }
body { font-weight:400; font-size:16px; font-family:"Titillium Web", sans-serif; padding-top:0; }
.report .sidenav-fixed-report { top:0; background:var(--azul); overflow:visible; }


* { outline:0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family:"Titillium Web", sans-serif; line-height:1.4; margin-bottom:1rem; }
h1, .h1 { line-height:1; }
h5, h6, .h5, .h6 { line-height:1.3; }
b, strong { font-weight:600; }
a { color:var(--azul); text-decoration:none; outline:none; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
a:hover, a:active, a:focus { color:var(--azul); text-decoration:none; outline:none; }
a[href^=tel] { color:inherit; }
a.url { word-break:break-all; }
button:focus, :focus { outline:0 !important; box-shadow:none !important; }
button, input, optgroup, select, textarea { margin-bottom:1rem; padding:.25rem .5rem; }

img { max-width:100%; height:auto; }
::-moz-selection { color:#fff; background:#212529; text-shadow:none; }
::selection { color:#fff; background:#212529; text-shadow:none; }
img::selection { color:#fff; background:transparent; }
img::-moz-moz-selection { color:#fff; background:transparent; }

.ratio-3x4 { --bs-aspect-ratio:calc(4 / 3 * 100%); }
.ratio > img { width:100%; height:100%; object-fit:cover; }

nav { background:white; }
strong, b { font-weight:600; }

blockquote { position:relative; margin-bottom:2rem; padding-left:calc(1rem + 6px); }
blockquote:before { position:absolute; left:0; top:0; width:6px; height:100%; content:''; background:var(--azul); }
blockquote p { font-size:1.1em; margin-bottom:.5rem; }
blockquote p strong { font-size:110%; }
blockquote > *:last-child { margin-bottom:0; }

/* Nuevo estilo para blockquotes simples (usado en hito-6) */
blockquote.simple { padding-left: 0; }
blockquote.simple:before { display: none; }


.shadow, .grid-shadow li { box-shadow:0 8px 0 rgba(0,0,0,.1) !important; }
.shadow-azul, .grid-shadow-azul li { box-shadow:0 8px 0 rgba(0,86,161,.2) !important; }
.shadow-naranja { box-shadow:0 8px 0 #CF4432 !important; }
.shadow-naranja-claro { box-shadow:0 8px 0 #f9d4cf !important; }

.shadow-sm, .grid-shadow-sm li { box-shadow:0 5px 0 rgba(0,0,0,.1) !important; }
.shadow-sm.shadow-azul, .grid-shadow-sm.grid-shadow-azul li { box-shadow:0 5px 0 rgba(0,86,161,.2) !important; }
.shadow-sm.shadow-naranja { box-shadow:0 5px 0 #cf4432 !important; }
.shadow-sm..shadow-naranja-claro { box-shadow:0 5px 0 #f9d4cf !important; }

.slick-track { display: flex !important; margin-left:0 !important; }
.slick-slide { height: inherit !important; }

.slick-prev, .slick-next { position:absolute; top:20px; display:block; width:40px; height:40px; content:''; font-size:0; line-height:0; margin:0; padding:0; cursor:pointer; color:transparent; border:none; background:transparent; outline:none; z-index:1; }
.slick-prev { right:100%; transform:rotate(180deg); }
.slick-next { left:100%; }
.slick-prev:before, .slick-next:before { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; content:'\e900'; font-family:'icomoon'; font-size:1.5rem; line-height:1rem; color:var(--morado); }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color:transparent; outline:none; opacity:1; }
.slick-prev.slick-disabled, .slick-next.slick-disabled { opacity:.25; }

.slick-dots { display:flex; justify-content:center; list-style-type:none; margin:2rem 0 0; padding:0; }
.slick-dots li { margin:0 0.3rem; }
.slick-dots li button { display:flex; align-items:center; justify-content:center; width:8px; height:8px; text-indent:-9999px; margin:0; padding:0; background:var(--azul); opacity:.1; border:0px none; border-radius:50%; }
.slick-dots li.slick-active button { background:var(--naranja); opacity:1; }

.slick-carousel-container.slick-loading { visibility:hidden; opacity:0; transition: opacity 0.3s ease-in-out; min-height:100px; }
.slick-carousel-container.slick-ready { visibility:visible; opacity:1; }

.card { border-top-left-radius:1rem; border-top-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:1rem; }
.card-border { border:1px solid var(--gris); box-shadow:0 5px 20px rgb(0 0 0 / 6%); }
.card-border .card-body { padding:2rem 2rem 0; }
.card-border .card-footer { padding-bottom:1.5rem; }

.alerta { font-weight:600; font-size:1.1em; margin-bottom:2rem; padding:1rem; }
.alerta.shadow { margin-bottom:3rem; }
.alerta > *:last-child { margin-bottom:0; }

#mobile-header { display:none; }

.wrapper { width:100%; }

/* Estilos para el sidebar en desktop */
#sidebar { position:fixed; left:0; top:0; min-width:270px; max-width:270px; height:100vh; background:var(--azul); color:#fff; z-index:10; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
#sidebar.active { min-width: 80px; max-width: 80px; text-align: center; } /* Parece para colapso desktop */
#sidebar.active ul.components li { font-size: 14px; }
#sidebar.active ul.components li a { padding: 10px 0; }
#sidebar.active ul.components li a span { margin-right: 0; display: block; font-size: 24px; }
#sidebar.active .logo { padding: 10px 0; }
#sidebar.active .footer { display: none; }

#sidebar .logo { display:block; padding:1.25rem 1.5rem 1rem; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  #sidebar .logo { -webkit-transition: none; -o-transition: none; transition: none; }
}

#sidebar ul.components { padding: 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  #sidebar ul.components { -webkit-transition: none; -o-transition: none; transition: none; }
}
#sidebar ul li { font-size: 16px; }
#sidebar ul li > ul { margin-left: 10px; }
#sidebar ul li > ul li { font-size: 14px; }
#sidebar ul li a { padding: 8px 24px; display: block; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#sidebar ul li a span { margin-right: 15px; }
/* @media (max-width: 991.98px) { #sidebar ul li a span { display: block; } } -> Mover a media query mobile */
#sidebar ul li a:hover { color: #fff; }
#sidebar ul li.active > a { background: transparent; color: #fff; } /* Estilo para link activo en sidebar */

a[data-toggle="collapse"] { position: relative; }
.dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }

@media (max-width: 991.98px) { 
  #sidebarCollapse span { display:none; } 
}

/* Botón de colapso del sidebar de desktop */
#sidebarCollapse { /* display:none; <- Eliminar aquí, lo ocultaremos en mobile */ }


#content { width:calc(100% - 270px); padding: 0; min-height: 100vh; margin-left:auto; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }
/* padding-top/bottom de secciones se aplicará en mobile */


.brand-logo { width:90%; }
/* Estilos para el menú del sidebar */
.menu ul { list-style:none; margin:0; padding:0; width:100%; }
.menu ul li a { position:relative; display:flex; flex-direction:column; font-weight:bold; font-size:.9em; text-transform:uppercase; line-height:1.2; color:var(--blanco); text-decoration:none; padding:.75rem 1.5rem; transition:all 0.3s; }
.menu ul li a:after { position:absolute; left:0; bottom:0; width:100%; height:1px; content:''; background:rgba(255,255,255,0.1); transition:all 0.3s; } /* Cambié color a blanco semi-transparente para fondo azul */
.menu ul li a span { display:block; }
.menu ul li a small { display:block; font-weight:normal; font-size:105%; text-transform:none; }

/* Estilos de fondo para links activos/hover en sidebar */
#sidebar .menu ul li a:hover,
#sidebar .menu ul li a.active { background:#003B71; } /* Fondo azul oscuro para hover/activo */

/* Estilos de fondo específicos para cada hito */
#sidebar .menu ul li.hito-1 a:hover, #sidebar .menu ul li.hito-1 a.active { background:#F26C26; color:var(--blanco) !important; } /* Mantener color blanco si el fondo es oscuro */
#sidebar .menu ul li.hito-2 a:hover, #sidebar .menu ul li.hito-2 a.active { background:#FFC30D; color:var(--azul) !important; }
#sidebar .menu ul li.hito-3 a:hover, #sidebar .menu ul li.hito-3 a.active { background:#D3D62D; color:var(--azul) !important; }
#sidebar .menu ul li.hito-4 a:hover, #sidebar .menu ul li.hito-4 a.active { background:#00EDCB; color:var(--azul) !important; }
#sidebar .menu ul li.hito-5 a:hover, #sidebar .menu ul li.hito-5 a.active { background:#009FE3; color:var(--blanco) !important; }
#sidebar .menu ul li.hito-6 a:hover, #sidebar .menu ul li.hito-6 a.active { background:rgba(0,0,0,0.2); color:var(--blanco) !important; } /* Ya estaba como rgba(0,0,0,0.2) */
#sidebar .menu ul li.hito-7 a:hover, #sidebar .menu ul li.hito-7 a.active { background:#23305A; color:var(--blanco) !important; }
#sidebar .menu ul li.hito-8 a:hover, #sidebar .menu ul li.hito-8 a.active { background:#822581; color:var(--blanco) !important; }
/*.menu ul li a:hover:after { width:calc(100% + 10px); background:rgba(255,255,255,1); }*/ /* Efecto hover del after */


#content h1 { font-size:3rem; line-height:1.1; color:#FFF; }
.section-header { margin-bottom:1rem; }
.section-header h2 { display:flex; font-size:3rem; line-height:.9; font-weight:600; margin-left:-35px; }
.section-header h2 i { font-size:2rem; margin:.5rem .5rem 0 0; }
.section-header h3 { font-size:2rem; line-height:1.3; font-weight:500; color:var(--azul); }
.section-header h3 strong { font-weight:700; }
.section-header h4 { font-size:1.75rem; line-height:1.3; font-weight:600; }

.list-numbers { counter-reset:li; list-style:none; *list-style:decimal; padding-left:0; }
.list-numbers > li { position:relative; padding-left:40px; min-height:30px; margin-bottom:1rem }
.list-numbers > li:before { content:counter(li); counter-increment:li; position:absolute; top:-3px; left:0; display:flex; align-items:center; justify-content:center; width:30px; height:30px; font-weight:700; font-size:.9em; color:var(--blanco); background:var(--naranja); border-radius:50%; }

.list-icon { list-style:none; margin:0 0 20px; padding:0; }
.list-icon > li { position:relative; width:calc(100% - 40px); margin-left:40px; padding:15px 0; border: none; border-bottom:1px solid #cfcfcf; }
.list-icon > li:before { position:absolute; left:-40px; top:50%; transform: translateY(-50%); width:22px; height:22px; content:''; border:6px solid var(--naranja); border-radius:100%; background:var(--blanco); }
.list-icon > li:last-child { border:0px none; }
.bg-gris .list-icon > li:before { background:var(--gris); }

.list-paises { list-style:none; margin:0 0 20px; padding:0; }
.list-paises li { position:relative; width:calc(100% - 28px); margin-left:28px; }
.list-paises li:before { position:absolute; left:-28px; top:2px; width:20px; height:20px; content:''; background-repeat:no-repeat; background-position:center; background-size:cover; }
.list-paises li.eeuu:before { background-image:url('../img/bandera-eeuu.png'); }
.list-paises li.brasil:before { background-image:url('../img/bandera-brasil.png'); }
.list-paises li.suiza:before { background-image:url('../img/bandera-suiza.png'); }

.grid { list-style:none; display:grid; gap:15px;  grid-auto-rows:1fr; align-items:stretch; margin:0 0 1rem; padding:0; }
.grid-x2 { grid-template-columns:repeat(2, 1fr); }
.grid-x3 { grid-template-columns:repeat(3, 1fr); }
.grid li { display:flex; align-items:center; padding:1em; }

.highlight { display:inline; line-height:1.2; color:var(--blanco); background:var(--naranja); padding:0 .5rem; }

.row-fotos { position:relative; }
.row-fotos .icon { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:10rem; }

/* Ajuste de padding de secciones */
section .container, section .container-xl { padding-top:4rem; padding-bottom:4rem; }

.subtitulo { position:relative; display:inline-block; font-weight:600; line-height:1.3; text-transform:uppercase; margin-bottom:2rem; }
.subtitulo:before { position:relative; top:3px; float:left; width:5px; height:23px; transform:skewX(-27deg); content:''; margin:0 10px 0 0; background:var(--naranja); }
.subtitulo:after { clear:both; display:table; content:''; }

#hero { position:relative; width:100% !important; height:100vh; overflow:hidden; }
#hero > img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center 50%; z-index:0; text-align:right; }
#hero > div { position:relative; padding:60px; width:70%; z-index:1; color:white; text-align:right; margin:0 0 0 auto; }
#hero > div h1 { font-size:4.5rem; line-height:1; margin-top:0; }
#hero > div p { font-size:1.6rem; }
#hero > div p strong { display:inline-block; line-height:1.2; white-space:nowrap; background:var(--naranja); padding:0 .5rem; }
#hero .next { position:absolute; left:50%; bottom:1rem; display:block; transform:translateX(-50%) rotate(90deg); font-size:2rem; color:var(--turquesa); z-index:2; }

/* Estilos de Fondo de Secciones (si los quieres específicos por Hito) */
/* Puedes añadir estos si prefieres colores de fondo sólidos específicos por Hito */
/*
#hito-1 { background:#F26C26; }
#hito-2 { background:#FFC30D; }
#hito-3 { background:#D3D62D; }
#hito-4 { background:#00EDCB; }
#hito-5 { background:#009FE3; }
#hito-6 { background:#0056A1; }
#hito-7 { background:#23305A; }
#hito-8 { background:#822581; }
*/
section { overflow:hidden; }

/* Hito 1 */
.recortes img { filter:grayscale(100%); border:1px solid var(--gris); -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
.recortes img:hover { position:relative; filter:none; transform:scale(1.2); box-shadow:0 1rem 3rem rgba(0,0,0,.25)!important; z-index:99; }

/* Hito 2 */
.logo-hbs { width:200px; max-width:50%; }
.hbs-estudios { position:relative; }
.hbs-estudios .slick-list { border:1px solid rgba(0,0,0,.1); box-shadow:0 8px 0 rgba(0,0,0,.1); }
.hbs-estudios .slick-dots { position:absolute; left:50%; bottom:0; transform:translateX(-50%); margin:0; padding:1rem; }

.acuerdos { position:relative; }
.acuerdos:before { position:absolute; left:0; top:40px; width:100%; height:1px; content:''; background:rgba(0,0,0,.5); z-index:0; }
.acuerdo .card, .acuerdo .card-header, .acuerdo .card-body { background:transparent; border:0px none; }
.acuerdo .card { position:relative; }
.acuerdo .card-header { position:relative; padding-top:0; padding-bottom:0; }
.acuerdo .card-header h3, .acuerdo .card-header h4 { font-weight:600; }
.acuerdo .card-header h3 { position:relative; }
.acuerdo .card-header h3:after { position:absolute; top:calc(100% + 5px); left:0; width:22px; height:22px; content:''; border:6px solid var(--naranja); border-radius:50%; background:var(--blanco); z-index:1; }
.acuerdo .card-header h4 { padding-top:1rem; }
.acuerdo .card-body { position:relative; }
.acuerdo .card-body p, .acuerdo .card-body li { font-size:.9em; }

/* con icomoon < --- > */
.monitoreo { display:flex; align-items:stretch; justify-content:space-between; font-weight:600; color:var(--blanco); background:var(--naranja); border:1px solid var(--naranja); }
.monitoreo > * { display:flex; align-items:center; justify-content:center; text-align:center; }
.monitoreo strong { position:relative; flex:0 0 60px; justify-content:center; font-size:1.25rem; padding:.5rem 1rem; }
.monitoreo strong:before { position:absolute; right:calc(100% - 1px); top:50%; transform:translateY(-50%); display:block; content:'\e900'; font-weight:normal; font-size:1.5rem; font-family:'icomoon'; line-height:1; }
.monitoreo strong:first-child:before { right:auto; left:calc(100% - 1px); transform:translateY(-50%) rotate(180deg); }
.monitoreo span { padding:.5rem calc(20px + 1rem); }

.impactos { font-size:1.1em; }

/* Hito 3 */
.lideres .lider:not(:last-child){ margin-bottom:1rem; }
.lideres .lider img { object-position:center 10%; }

/* Hito 5 */
.link-collapse { position:relative; display:inline-block; white-space:nowrap; text-transform:uppercase; margin-left:.25rem; padding:.35rem 2rem .35rem 1rem; border:2px solid transparent; }
.link-collapse:after { position:absolute; right:1rem; top:calc(50% - 1px); transform:translateY(-50%); font-weight:normal; font-size:1.25rem; line-height:1; }
.link-collapse[aria-expanded=false] { color:var(--naranja) !important; background:var(--blanco); border-color:var(--naranja); }
.link-collapse[aria-expanded=false]:after { content:'+'; }
.link-collapse[aria-expanded=true] { color:var(--blanco) !important; background:var(--naranja); }
.link-collapse[aria-expanded=true]:after { content:'-'; }

#hito-5 .compromisos .grid li { background:var(--blanco); }

/* Hito 6 */
#hito-6 blockquote { padding:0; }
#hito-6 blockquote:before { display:none; }
#hito-6 blockquote p { font-size:1.2em; font-style:italic; font-weight:600; }

#hito-6 .consejo .card { display:flex; flex-direction:row; }
#hito-6 .consejo .card-img-top { flex:0 0 25%; width:25%; height:auto; border-radius:0; }

.consejo .card { position:relative; height:100%; border-radius:0; border:none; }
.consejo .card:before { position:absolute; left:0; top:0; width:100%; height:100%; content:''; background:var(--azul); opacity:.1; z-index:0; }
.consejo .card-body { position:relative; z-index:1; }
.consejo .card-body strong { display:inline-block; font-size:1.1em; color:var(--naranja); }
.consejo .card-body > *:last-child { margin-bottom:0; }

.consejo.con-foto .card { flex-direction:row; }
.consejo.con-foto .card-header { flex:0 0 25%; padding:1rem 0 1rem 1rem; border:0 none; background:transparent; }

.col-lg-10 > .consejo.con-foto .card-header { flex:0 0 33%; }
.col-lg-10 > .consejo.con-foto .card-body p { font-size:.95em; }
.col-lg-11 > .consejo.con-foto .card-header { flex:0 0 27.5%; }

/* Hito 7 */
.obras-texto h4 > img { width:20px; margin:-6px .25rem 0 0; }
#obras-destacadas figure { position:relative; margin-bottom:0; }
#obras-destacadas figure figcaption { position:absolute; left:0; top:auto; bottom:0; height:auto; color:var(--blanco); font-size:1em; line-height:1.3; text-align:center; padding:1.25rem; z-index:1; }
#obras-destacadas figure:after { position:absolute; left:0; top:auto; bottom:0; width:100%; height:50%; content:''; background: rgba(0, 0, 0, 8.9); background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 100%); z-index:0; }

.obras { margin:0 -.5rem; }
.obras figure { position:relative; margin:0 .5rem; /*opacity:.5; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;*/ }
.obras figure figcaption { position:absolute; left:0; top:auto; bottom:0; height:auto; color:var(--blanco); font-size:.8em; line-height:1.3; text-align:center; padding:1rem; z-index:1; }
.obras figure:after { position:absolute; left:0; top:auto; bottom:0; width:100%; height:50%; content:''; background: rgba(0, 0, 0, 8.9); background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 100%); z-index:0; }
.obras figure.slick-center { opacity:1; }

.obras .slick-prev, .obras .slick-next { top:50%; transform:translateY(-50%); width:32px; height:32px; background:var(--naranja); border-radius:50%; z-index:2; }
.obras .slick-prev { right:calc(100% - 24px); transform:translateY(-50%) rotate(180deg); }
.obras .slick-next { left:calc(100% - 24px); }
.obras .slick-prev:before, .obras .slick-next:before { font-size:1rem; color:var(--blanco); }

.valores p { font-size:1.2em; line-height:1.2; }

/* footer */
#sidebar { display:flex; flex-direction:column; }
.footer { margin-top:auto; padding:1rem 1.25rem; }
.footer ul { list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; }
.footer ul li { font-size:.7em; }
.footer ul li:first-child { margin-right:.75rem; }
.footer ul li a { position:relative; display:block; color:var(--blanco); padding:0 0 0 16px; border:0 none; }
.footer ul li a:before { position:absolute; left:0; top:50%; transform:translateY(-50%); width:12px; height:12px; content:''; filter:brightness(0) invert(1); background-repeat:no-repeat; background-position:center; background-size:cover; }
.footer ul li.telefono a:before { background-image:url('../img/icono-telefono.svg'); }
.footer ul li.correo a:before { background-image:url('../img/icono-correo.svg'); }
.footer ul li a span { position:relative; display:block; white-space:nowrap; margin:0; }
.footer ul li a span:after { position:absolute; left:0; top:100%; width:0; height:1px; content:''; background:var(--blanco); -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
.footer ul li a:hover span:after { width:100%; }

#sidebar .footer ul li { font-size:.7em; }
#sidebar .footer ul li a { padding:0 0 0 16px; border:0 none; }
#sidebar .footer ul li a span { margin:0; }

/* --- ESTILOS MOBILE (DENTRO DE MEDIA QUERY) --- */
.hidden-mobile { display:none !important;  }

@media (max-width: 991.98px) {
  body { padding-top:72px; }

  .hidden-desktop { display:block !important; }
  #sidebar { display:flex; position:relative; }

  #content { width:100%; min-height:calc(100dvh - 72px); margin:0; padding:0; box-sizing:border-box; }

  main > section:not(:first-child) { display:none; }
  main > section:first-child { display:block; }
  main > section.active { display:block; }

  #mobile-header { position:fixed; left:0; top:0; display:flex !important; width:100%; align-items:center; justify-content:space-between; padding:1rem; background:var(--azul); z-index:1000; }
  #mobile-header .logo { display:block; }
  #mobile-header .logo img { height:40px; }

  #mobile-menu-toggle { position:relative; width:20px; height:20px; padding:3px; color:var(--blanco); border:0; background:transparent; cursor:pointer; margin:0; }
  #mobile-menu-toggle i { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:1rem; }
  #mobile-menu-toggle i.icon-times { display:none; }
  .mobile-menu-open #mobile-menu-toggle i.icon-hamburguer { display:none; }
  .mobile-menu-open #mobile-menu-toggle i.icon-times { display:block; }
  #mobile-menu-panel { position:fixed; top:72px; right:0; width:280px; height:calc(100dvh - 72px); color:var(--blanco); background-color:var(--azul); z-index:999; overflow-y:auto; transform: translateX(105%); transition:transform 0.3s ease-in-out; padding:20px; box-sizing:border-box; box-shadow: -2px 0 5px rgba(0,0,0,0.5); }
  #mobile-menu-panel.open { transform:translateX(0); }
  #mobile-menu-close { position:absolute; top:10px; right:10px; font-size:30px; background:none; border:none; cursor:pointer; color:var(--blanco); }
  #mobile-menu-panel .menu ul { list-style:none; padding:0; }
  #mobile-menu-panel .menu li { margin-bottom:0; }
  #mobile-menu-panel .menu a { color:var(--blanco); text-decoration:none; padding:10px; border-bottom:1px solid rgba(255,255,255,0.1); }
  #mobile-menu-panel .menu li a:hover { background-color:rgba(0,0,0,0.2); }
  #mobile-menu-panel .menu li small { font-weight:normal; font-size:100%; opacity:0.8; }
  #mobile-menu-panel .menu li a.active { font-weight:bold; background-color:rgba(0,0,0,0.3); }
  #mobile-menu-panel .footer { margin-top:auto; padding:0; }
  #mobile-menu-panel.hidden-desktop { display:flex !important; flex-direction:column; }

  .mobile-nav-buttons { display:none; }
  .mobile-nav-buttons .btn-prev-section:empty, .mobile-nav-buttons .btn-next-section:empty { display:none; }
  .mobile-nav-buttons button { margin-bottom:0; }
  .mobile-nav-buttons .btn { display:inline-flex; color:var(--azul); align-items:center; padding:.5rem 0; }
  .mobile-nav-buttons .btn i { flex:0 0 24px; width:24px; height:24px; position:relative; font-style:normal; }
  .mobile-nav-buttons .btn i:before { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; content:'\e900'; font-family:'icomoon'; font-size:1.25rem; line-height:1rem; }
  .mobile-nav-buttons .btn-prev-section i { margin-right:.25rem; }
  .mobile-nav-buttons .btn-prev-section i:before { transform:rotate(180deg); }
  .mobile-nav-buttons .btn-next-section i { margin-left:.25rem; }

  #hero { height:500px; }
  #hero > div { padding:60px; width:100%; }
  #hero > div h1 { font-size:4.5rem; line-height:1; }
  #hero > div p { font-size:1.6rem; } 
  #hero > div p strong { line-height:1.2; }
  #hero .next { bottom:1rem; font-size:2rem; }

  .recortes img { filter:none; }
  .recortes img:hover { transform:none; box-shadow:none !important; }
}

@media (max-width: 767.98px) {
  .section-header h2 { font-size:2rem; line-height:1; margin-left: -25px; }
  .section-header h2 i { font-style:normal; font-size:1.5rem; margin: .4rem .4rem 0 0; }
  .section-header h3 { font-size:1.5em; }
  .h4, h4 { font-size:1.25rem; }

  .proyectos figure { opacity:.5; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
  .proyectos figure.slick-center { opacity:1; }
  .proyectos .slick-prev, .proyectos .slick-next { width: 24px; height: 24px; }
  .proyectos .slick-prev { right: calc(100% - 12px); }
  .proyectos .slick-next { left: calc(100% - 12px); }
  .proyectos .slick-prev:before, .proyectos .slick-next:before { font-size: 0.8rem; }

}

@media (max-width: 575.98px) {
  body { font-size: 15px; }

  #hero { height:400px; }
  #hero > div { padding:40px 1.5rem; }
  #hero > div h1 { font-weight:700; font-size:3rem; }
  #hero > div p { font-size:1.3rem; }
  #hero > div p br { display:none; }
  #hero > div p strong { line-height:1.5; padding:.1rem .5rem; }

  .list-numbers { padding-left:0; } /* Eliminar padding del número en mobile */
  .list-numbers > li { position: relative; padding-left: 30px; } /* Ajustar padding para el :before */
  .list-numbers > li:before { width:24px; height:24px; font-size: .8em; top: 0; left: 0;} /* Ajustar tamaño y posición del número */

  .list-icon > li { width: calc(100% - 30px); margin-left: 30px; padding: 10px 0; }
  .list-icon > li:before { left: -30px; width: 18px; height: 18px; border-width: 5px;} /* Ajustar tamaño y posición del ícono de lista */

  section .container, section .container-xl { padding-top:3rem; padding-bottom:3rem; }

  .section-header { margin-bottom:0; }
  .section-header h2 { font-size:1.8rem; margin-left:-20px; }
  .section-header h2 i { font-size:1.3rem; margin:.3rem .3rem 0 0; }
  .section-header h3 { font-size:1.3rem; }
  .h4, h4 { font-size:1.15rem; }

  /* Estilos para el monitoreo (adaptación a columna en mobile) */
  .monitoreo { flex-direction:column; }
  .monitoreo strong { flex:auto; }
  /* Ajustar la posición de las flechas si el layout cambia a columna */
  .monitoreo strong:before { top:calc(100% - 4px); left:50%; right:auto; transform:translateX(-50%) rotate(-90deg); font-size:1rem; }
  .monitoreo strong:first-child:before { left:50%; transform:translateX(-50%) rotate(90deg); }
  .monitoreo strong:last-child:before { top:auto; bottom:calc(100% - 4px); }
  .monitoreo span { padding:1rem; }

  .sellos .sello:not(:last-child) { margin-bottom:1rem; }

  .obras { margin:0 -30px; }
  .obras figure { margin:0 1px; }
  .obras .slick-prev { right: calc(100% - 42px); }
  .obras .slick-next { left: calc(100% - 42px); }

}

@media (max-width: 480px) {
  body { font-size:14px; }

  #hero > div h1 { font-size:2rem; }
  #hero > div p { font-size:1.1rem; }

  .section-header h2 { font-size:1.5rem; margin-left:-15px; }
  .section-header h2 i { font-size:1.1rem; margin:.2rem .2rem 0 0; }
  .section-header h3 { font-size:1.15rem; }
  .h4, h4 { font-size:1rem; }
}