/* Grupo Albanesi · ajustes propios sobre Bootstrap 5 + diseño nuevo (chrome.css / site.css).
   Orden de carga: bootstrap.min.css → chrome.css → site.css → albanesi.css
   chrome.css y site.css son los del diseño (___nueva_web) sin tocar: los cambios van acá. */

/* ===== Variables de Bootstrap con los colores y tipografías de la marca ===== */
:root{
  --bs-primary:#005CBC; --bs-primary-rgb:0,92,188;
  --bs-danger:#E0201D;  --bs-danger-rgb:224,32,29;
  --bs-dark:#003366;    --bs-dark-rgb:0,51,102;
  --bs-body-font-family:var(--body);
  --bs-body-color:var(--fg);
  --bs-body-bg:var(--bg);
  --bs-link-color:var(--blue); --bs-link-color-rgb:0,92,188;
  --bs-link-hover-color:var(--deep); --bs-link-hover-color-rgb:0,51,102;
  --bs-border-color:var(--line);
  --bs-border-radius:10px; --bs-border-radius-lg:14px;
}

/* ===== Compatibilidad: reboot de Bootstrap vs. diseño ===== */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:700;margin-bottom:0}
.lead{font-weight:400}
ul.docs,ul.checks,.gx-menu,.gx-foot ul{padding-left:0;margin-bottom:0}

/* Las secciones usan .wrap (del diseño). Si se usa .container de Bootstrap, que mida igual (1180px, gutter 16px).
   Dentro de .wrap usar .row con gx-4 (gx-xl-5 a partir de 1200px): gx-5 desborda el gutter de 16px en pantallas chicas. */
.container{max-width:1180px;--bs-gutter-x:32px}

/* Botones del diseño usando las variables de .btn de Bootstrap (hover/active/focus) */
.btn{--bs-btn-font-weight:700;--bs-btn-line-height:1.4;--bs-btn-focus-box-shadow:0 0 0 3px rgba(224,32,29,.3)}
.btn-red{--bs-btn-color:#fff;--bs-btn-bg:var(--red);--bs-btn-border-color:transparent;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#C91A17;--bs-btn-hover-border-color:transparent;--bs-btn-active-color:#fff;--bs-btn-active-bg:#B01512;--bs-btn-active-border-color:transparent}
.btn-line{--bs-btn-color:var(--blue);--bs-btn-bg:#fff;--bs-btn-border-color:var(--blue);--bs-btn-hover-color:var(--blue);--bs-btn-hover-bg:var(--tint);--bs-btn-hover-border-color:var(--blue);--bs-btn-active-color:var(--blue);--bs-btn-active-bg:var(--tint);--bs-btn-active-border-color:var(--blue)}
.btn-ghost{--bs-btn-color:#fff;--bs-btn-bg:transparent;--bs-btn-border-color:rgba(255,255,255,.65);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:rgba(255,255,255,.12);--bs-btn-hover-border-color:rgba(255,255,255,.65);--bs-btn-active-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.2);--bs-btn-active-border-color:#fff}

/* Desplegables: entre el ítem y el desplegable hay 6px de hueco; al cruzarlo con el mouse se cerraba (mouseleave).
   Este "puente" invisible cubre el hueco para que el mouse nunca salga del <li>. */
@media (min-width:1181px){.gx-dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}}

/* Desplegable ancho (Energía) centrado bajo su ítem: alineado a la izquierda se salía de la pantalla entre 1181 y 1380px */
@media (min-width:1181px){.gx-dd.wide{left:50%;transform:translateX(-50%)}}

/* Menú celular: chrome.css oculta todos los .gx-cta del encabezado, incluido el botón que va dentro del menú */
@media (max-width:1180px){.gx-head .gx-menu .gx-cta{display:inline-flex;margin-left:0}}

/* Slider de la home en celular: el diseño fija la foto a 330px de alto; entre ~590 y 700px de ancho
   la foto no llegaba a cubrir los costados. Ahora cubre al menos el 100% del ancho. */
@media (max-width:700px){.hs-slide{background-size:max(100%,590px) auto}}

/* Factura de ejemplo (home): las notas salen de site.css en español */
html[lang="en"] .invoice tr.hl td:first-child::after{content:"  ← you stop paying this"}
html[lang="en"] .invoice tr.hl-tax td:first-child::after{content:"  ← and this too"}

/* Anclas (#calculadora, #estructura, #factura…): que el encabezado fijo no tape el título al saltar */
section[id],header[id],div[id]{scroll-margin-top:96px}

/* Ícono de idioma en la barra superior */
.gx-top a i{margin-right:4px}

/* ===== Acordeón (Bootstrap) con el look de las tarjetas del diseño ===== */
.acc-albanesi{
  --bs-accordion-bg:var(--surface);
  --bs-accordion-border-color:var(--line);
  --bs-accordion-border-radius:14px;
  --bs-accordion-inner-border-radius:13px;
  --bs-accordion-btn-padding-x:22px; --bs-accordion-btn-padding-y:16px;
  --bs-accordion-body-padding-x:22px; --bs-accordion-body-padding-y:0;
  --bs-accordion-btn-color:var(--deep);
  --bs-accordion-active-color:var(--deep);
  --bs-accordion-active-bg:var(--surface);
  --bs-accordion-btn-focus-box-shadow:0 0 0 3px rgba(224,32,29,.25);
  display:flex;flex-direction:column;gap:10px
}
.acc-albanesi .accordion-item{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.acc-albanesi .accordion-item:not(:first-of-type){border-top:1px solid var(--line)}
.acc-albanesi .accordion-button{font-family:var(--display);font-weight:700;font-size:17px}
.acc-albanesi .accordion-button:not(.collapsed){box-shadow:none}
.acc-albanesi .accordion-body{color:var(--muted);font-size:15px;padding-bottom:18px}

/* Estructura societaria: la imagen tiene fondo blanco */
.estructura-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.estructura-box img{display:block;min-width:720px;width:100%;height:auto}

/* ===== Galerías (miniaturas uniformes: .gallery figure del diseño = 3:2 con object-fit:cover) ===== */
.galeria-bloque{display:flex;flex-direction:column;gap:14px}
.galeria-cant{color:var(--muted);letter-spacing:.06em}
.gallery a{display:block;width:100%;height:100%;cursor:zoom-in}
.gallery img{transition:transform .25s}
.gallery a:hover img{transform:scale(1.04)}
/* 5 por fila en escritorio (14 fotos + mosaico "Ver todas"); 3 en tablet, 2 en celular */
.gallery.galeria-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:991px){.gallery.galeria-5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.gallery.galeria-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.galeria-mas-celda button{position:relative;display:block;width:100%;height:100%;border:0;padding:0;cursor:pointer;background-size:cover;background-position:center;color:#fff;font:inherit}
.galeria-mas-celda button::before{content:"";position:absolute;inset:0;background:rgba(0,40,92,.82);transition:background .2s}
.galeria-mas-celda button:hover::before{background:rgba(224,32,29,.85)}
.galeria-mas-celda span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:2px;font-size:14px;font-weight:500;text-align:center;padding:8px}
.galeria-mas-celda b{font-family:var(--display);font-size:28px;line-height:1}

/* ===== Videos (partials/videos.php): grilla de 4 columnas; el grande ocupa 3 columnas × 3 filas y las miniaturas
   16:9 lo rodean (4ª columna y después abajo). Las filas las define el alto de las miniaturas. ===== */
.videos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.video-principal{position:relative;grid-column:1 / span 3;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.videos-filas-0 .video-principal{grid-column:1 / -1;max-width:960px;width:100%}
.videos-filas-3 .video-principal{grid-row:span 3;align-self:stretch;aspect-ratio:auto}
/* pocos videos, para que no queden huecos: 2 → dos mitades; 3 → el grande en 2 de 3 columnas y las 2 miniaturas al costado */
.videos-filas-1{grid-template-columns:repeat(2,minmax(0,1fr))}
.videos-filas-1 .video-principal{grid-column:auto}
.videos-filas-2{grid-template-columns:repeat(3,minmax(0,1fr))}
.videos-filas-2 .video-principal{grid-column:1 / span 2;grid-row:span 2;align-self:stretch;aspect-ratio:auto}
.video-principal button,.video-principal iframe{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:#000}
.video-principal button{cursor:pointer}
.video-principal img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s}
.video-principal button:hover img{opacity:1}
.video-mini{margin:0;border-radius:12px;overflow:hidden;background:var(--tint);aspect-ratio:16/9}
.video-mini a{position:relative;display:block;width:100%;height:100%}
.video-mini img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.video-mini a:hover img{transform:scale(1.04)}
.video-mini.galeria-mas-celda span{font-size:13px}
@media (max-width:575px){
	.videos-grid,.videos-filas-1,.videos-filas-2{grid-template-columns:repeat(2,minmax(0,1fr))}
	.video-principal,.videos-filas-1 .video-principal,.videos-filas-2 .video-principal,.videos-filas-3 .video-principal{grid-column:1 / -1;grid-row:auto;aspect-ratio:16/9}
	.video-mini.galeria-mas-celda{grid-column:1 / -1;aspect-ratio:auto;height:64px}
	.video-mini.galeria-mas-celda span{flex-direction:row;gap:10px}
	.video-mini.galeria-mas-celda b{font-size:22px}
}
/* botón de play (círculo rojo del diseño) sobre la imagen */
.video-play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
	background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M0 0l14 8-14 8z' fill='%23fff'/%3E%3C/svg%3E") 18px center no-repeat;
	box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .2s}
.video-principal .video-play{width:72px;height:72px;margin:-36px 0 0 -36px;background-position:29px center;background-size:18px 20px}
.video-principal button:hover .video-play,.video-mini a:hover .video-play{transform:scale(1.1)}

/* ===== Visor (modal Bootstrap) ===== */
.visor .modal-content{background:transparent;border:0;align-items:center}
.visor .modal-dialog{max-width:min(1400px,96vw)}
.visor-cuerpo{width:100%;display:flex;justify-content:center}
.visor-cuerpo img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.visor-cuerpo .ratio{max-width:1100px;border-radius:10px;overflow:hidden;background:#000}
.visor-pie{color:#fff;font-size:14px;margin-top:10px;text-align:center;font-variant-numeric:tabular-nums}
.visor-btn{position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,30,70,.75);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.visor-btn:hover{background:var(--red)}
.visor-cerrar{top:-52px;right:0}
.visor-ant{left:8px;top:50%;transform:translateY(-50%)}
.visor-sig{right:8px;top:50%;transform:translateY(-50%)}
.modal-backdrop.show{opacity:.88}

/* ===== Mapa de centrales (energia-electrica.php) ===== */
.mapa-centrales{height:480px;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--tint);z-index:0}
@media (max-width:700px){.mapa-centrales{height:380px}}
.mapa-pop{display:flex;flex-direction:column;gap:2px;font-family:var(--body);font-size:14px;min-width:180px}
.mapa-pop b{font-family:var(--display);color:var(--deep);font-size:15px}
.mapa-pop span{color:var(--muted)}
.mapa-pop a{margin-top:6px;font-weight:500}
.tbl tr.tbl-total td{background:#F8FAFD;border-bottom:0}

/* ===== Formularios (contacto, CV) sobre .form del diseño ===== */
.form .form-campos{display:grid;gap:14px}
.form .form-campos[hidden]{display:none}
.form select{font:inherit;font-size:16px;border:1px solid var(--line);border-radius:8px;padding:11px 12px;background:var(--bg);width:100%;min-width:0;color:var(--fg)}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,92,188,.15);background:#fff}
.form.was-validated :invalid{border-color:var(--red);background:#FFF6F6}
.form .form-aviso{margin:0;font-size:15px}
.form-legal{color:var(--muted);font-size:12px;line-height:1.4}
.grecaptcha-badge{visibility:hidden}     /* permitido si se muestra el aviso de reCAPTCHA en el formulario */
.form h3.form-sub{font-size:16px;color:var(--deep);margin-top:6px;padding-top:12px;border-top:1px solid var(--tint)}
.form input[type=file]{padding:9px;background:#fff}
.form .hint{font-weight:400;color:var(--muted);font-size:13px}
.form .estatico{font-weight:500;color:var(--deep);background:var(--tint);border-radius:8px;padding:11px 12px}

/* ===== Integridad: grilla de valores (reemplaza la imagen del diseño) ===== */
.valores-grid{background:var(--deep);border-radius:16px;padding:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.valor{display:flex;align-items:center;gap:12px;color:#fff;font-family:var(--display);font-weight:700;font-size:16px}
.valor i{flex:none;width:46px;height:46px;border-radius:4px 14px 4px 4px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:20px}
.panel-grad .doc .ic{align-items:center;padding-bottom:0;font-size:15px}
.panel-grad .doc .ic::before{display:none}

/* Fotos con epígrafe (sustentabilidad): la figura deja de ser 3:2 fija para dar lugar al texto */
.gallery figure.foto-pie{aspect-ratio:auto;background:none;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:6px}
.gallery figure.foto-pie a{aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--tint)}
.gallery figure.foto-pie figcaption{font-size:13px;color:var(--muted);line-height:1.35}

/* Fotos con etiqueta encima (stands anteriores de eventos) */
.gallery figure.foto-etiqueta{position:relative}
.gallery figure.foto-etiqueta figcaption{position:absolute;left:10px;bottom:10px;background:rgba(0,30,70,.75);color:#fff;font-size:13px;padding:3px 10px;border-radius:999px;pointer-events:none}

/* Albajet: flota */
.flota{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.flota li{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:500;color:var(--deep)}
.flota i{flex:none;width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center}

/* Video (YouTube embebido) */
.video-box{border-radius:14px;overflow:hidden;background:var(--deep)}

/* ===== Novedades anteriores (proyectos.php) ===== */
.novedades-lista{display:grid;gap:14px}
.novedad{flex-direction:row;align-items:flex-start;gap:18px}
.novedad-img{flex:none;width:120px;border-radius:10px;overflow:hidden;background:var(--tint)}
.novedad-img img{display:block;width:100%;height:auto}
@media (max-width:560px){.novedad{flex-direction:column}.novedad-img{width:100%;max-width:220px}}

/* Prensa: el filtro por año oculta notas con [hidden] (.news a{display:flex} le ganaba); nota sin enlace con el mismo aspecto */
.news>[hidden]{display:none}
.news>div{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}

/* ===== Contacto: redes sociales ===== */
.redes-contacto{display:flex;flex-wrap:wrap;gap:10px}
.redes-contacto .btn i{font-size:1.15em}