@import url('https://fonts.googleapis.com/css2?family=Flamenco:wght@300;400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --azulTabla: rgb(32, 114, 184);
    --azulTabla2: rgb(29, 112, 183);
    --blancoTabla: rgb(238, 244, 249);
    --grisAnuncios: #756b6b;
    --rojo:      rgb(194, 19, 48);
    --rojoClaro: rgb(219, 5, 40);
    --negro:     rgb(63, 63, 62);
    --gris:      #757575;
    --grisClaro: #e8e8e8;
    --grisFondo: #d4d4d4;
    --grisOscuro: rgb(63, 63, 62);
    --blanco:    #fcfcfc;
    --transicion: 0.2s ease;
}


body {
    font-family: "Montserrat", sans-serif;
    /* max-width: 140rem; */
}

/*Elemento de Bienvenida*/
.BienvenidaSA {
    display: flex;
}

.BienvenidaSA div {
    flex-basis: 50%;
    align-self: center;
    justify-self: center;
}

@media (min-width: 721px) {
    .BienvenidaSA {
        flex-direction: row;
    }

    .TituloSA {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .MensajePrincipalSA {
        max-width: 50rem;
        margin: 0 2rem;
    }

    .mensajePrincipalSA__centrar {
        margin: auto;
        margin-bottom: 5rem;
        margin: 0 2rem;
    }

    .SeparacionPlantas {
        margin-top: 4rem;
    }
}

@media (max-width: 720px) {
    .BienvenidaSA {
        flex-direction: column;
    }

    .TituloSA {
        display: inline-flex;
        justify-content: start;
        align-items: center;
        margin-left: 3rem;
        margin-bottom: 5rem;
    }

    .mensajePrincipalSA__centrar p {
        margin-top: -3rem;
        margin-bottom: 3rem;
    }

    .mensajePrincipalSA__centrar {
        margin: 0 3rem;
    }

}

.tituloSA__centrar {
    font-size: 1.3em;
    line-height: 1.3;
    color: var(--grisOscuro);
}

.mensajePrincipalSA__centrar {
    margin-top: 5rem;
    font-size: 1.9rem;
    text-align: justify;
    /* font-weight: 300; */
}




/*Elemento de Separacion*/
.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}
/* ════════════════════════════════════════════════
   TEXTO DEL PANEL — ajustes responsive
════════════════════════════════════════════════ */

.gsa-panel__texto {
    margin-top: 0.5rem;
    padding: 0 4rem;        /* separación de los bordes, igual que centroAcopio */
    margin-bottom: 4rem;
}

.gsa-panel__titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--grisOscuro);
    margin-bottom: 0.6rem;
}
 
/* Grupo título + separador: el separador adopta el ancho del título */
.gsa-panel__titulo-grupo {
    display: table; /* shrink-wraps al contenido */
}

.gsa-panel__separador {
    width: 100%;    /* 100% del grupo padre = ancho del título */
    height: 0.18rem;
    background: var(--rojoIconos);
    border-radius: 1rem;
    margin-bottom: 1.6rem;
}

.gsa-panel__columnas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

.gsa-panel__parrafo {
    font-family: 'Montserrat', sans-serif;
    color: var(--grisOscuro);
    text-align: justify;
    margin: 0;
    font-size: 1.9rem;
    line-height: 1.75;
}
/* ── Párrafos de panel ── */
.gsa-panel__parrafo,
.gsa-panel__parrafo p {
    font-size: 1.9rem;
    line-height: 1.75;
}

/* Tablet (≤ 800px): una columna, izquierda arriba, derecha abajo */
@media (max-width: 800px) {
    .gsa-panel__texto {
        padding: 0 2rem;
    }

    .gsa-panel__columnas {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
}

/* Móvil (≤ 599px) */
@media (max-width: 599px) {
    .gsa-panel__texto {
        padding: 0 1.5rem;
    }
    .gsa-panel__titulo {
        font-size: 1.9rem;
    }
}

/* ── Intro: márgenes correctos ── */
.gsa-panel__texto--intro {
    padding: 0 4rem;
}

.gsa-panel__texto--intro .eg-imagen-placeholder {
    margin-left: -4rem;
    margin-right: -4rem;
    width: calc(100% + 8rem);
}

@media (max-width: 800px) {
    .gsa-panel__texto--intro {
        padding: 0 2rem;
    }

    .gsa-panel__texto--intro .eg-imagen-placeholder {
        margin-left: -2rem;
        margin-right: -2rem;
        width: calc(100% + 4rem);
    }
}

@media (max-width: 599px) {
    .gsa-panel__texto--intro {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .gsa-panel__texto--intro .eg-imagen-placeholder {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        width: calc(100% + 3rem);
        border-radius: 0;
    }

    .gsa-panel__texto--intro .gsa-panel__columnas {
        padding: 0;        /* el padding ya lo da el contenedor */
    }
}


/*Elemento de Separacion*/
.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}

/** GALERIA DE IMAGENES

/* ── CONTENEDOR PRINCIPAL ── */
.galeria {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;        /* centra el bloque */
    padding: 0 2rem;       /* espacio a izquierda y derecha */
}

.galeria__etiqueta {
    font-size: 0.8em;
    color: var(--rojoIconos);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    padding-left: 0.2rem;
}

/* ── CARRUSEL ── */
.galeria__carrusel {
    position: relative;
    width: 100%;
    border-radius: 1.2rem;
    overflow: hidden;
    background: #222;
    /* proporción 16:9 */
    aspect-ratio: 16 / 9;
    box-shadow: 0 0.6rem 2.5rem rgba(0,0,0,0.18);
}

/* ── SLIDES ── */
.galeria__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}

.galeria__slide.activo {
    opacity: 1;
    pointer-events: auto;
}

/* Imagen de fondo que cubre todo */
.galeria__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradiente sutil para mejorar legibilidad de la tarjeta */
.galeria__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        transparent 30%,
        rgba(0,0,0,0.25) 100%
    );
    pointer-events: none;
}

/* ── TARJETA DE DESCRIPCIÓN ── */
.galeria__info {
    position: absolute;
    bottom: 1.8rem;
    right: 1.8rem;
    width: min(42%, 340px);
    background: rgba(255,255,255,0.97);
    border-radius: 1rem;
    padding: 1.5rem 1.8rem 1.6rem;
    box-shadow: 0 0.3rem 1.5rem rgba(0,0,0,0.15);
    z-index: 2;
}

.galeria__info-titulo {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--grisOscuro);
    margin-bottom: 0.7rem;
    line-height: 1.2;
}

.galeria__info-separador {
    width: 3rem;
    height: 0.18rem;
    background-color: var(--rojoIconos);
    margin-bottom: 0.9rem;
    border-radius: 1rem;
}

.galeria__info-texto {
    font-size: 0.82em;
    color: var(--gris);
    line-height: 1.65;
    text-align: justify;
}

.galeria__info-texto p + p {
    margin-top: 0.7rem;
}

/* ── BARRA INFERIOR: DOTS ── */
.galeria__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.galeria__dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background-color: #c8c8c8;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.galeria__dot.activo {
    background-color: var(--rojoIconos);
    transform: scale(1.2);
}

/* ── BARRA DE PROGRESO ── */
.galeria__progreso {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.22rem;
    background-color: var(--rojoIconos);
    width: 0%;
    z-index: 3;
    transition: width linear;
}

/* ═══════════════════════════════════════════════════════
   PARCHE — Galería móvil: texto arriba, imagen abajo
   Pegar al final del CSS principal.
═══════════════════════════════════════════════════════ */
 
@media (max-width: 640px) {
 
    /* El carrusel deja de ser un contenedor 16:9 con overflow hidden
       y pasa a ser un bloque de flujo normal */
    .galeria__carrusel {
        aspect-ratio: unset !important;
        overflow:     visible !important;
        background:   transparent !important;
        box-shadow:   none !important;
        border-radius: 0 !important;
    }
 
    /* Cada slide ocupa todo el ancho y apila texto + imagen */
    .galeria__slide {
        position: static !important;   /* sale del stack absoluto */
        opacity:  0;
        display:  none;
        flex-direction: column;
        gap: 1rem;
        transition: opacity 0.4s ease;
    }
 
    .galeria__slide.activo {
        display:  flex !important;
        opacity:  1 !important;
        pointer-events: auto !important;
    }
 
    /* Quitar el gradiente oscuro del pseudo-elemento */
    .galeria__slide::after {
        display: none !important;
    }
 
    /* ── Caja de texto: arriba, ancho completo, sin posicionamiento ── */
    .galeria__info {
        position:     static !important;
        width:        100% !important;
        top:    auto !important;
        right:  auto !important;
        bottom: auto !important;
        left:   auto !important;
        background:   white !important;
        border-radius: 1rem !important;
        padding:      1.2rem 1.4rem !important;
        box-shadow:   0 0.2rem 0.8rem rgba(0, 0, 0, 0.08) !important;
        order: 1;     /* texto primero */
        box-sizing: border-box;
    }
 
    /* ── Imagen: debajo del texto ── */
    .galeria__slide img {
        order:        2;  /* imagen después */
        width:        100%;
        height:       220px;
        object-fit:   cover;
        border-radius: 1rem;
        display:      block;
    }
 
    /* Barra de progreso: reposicionar al fondo de la imagen */
    .galeria__progreso {
        position: static !important;
        order:    3;
        width:    0%;
        height:   0.22rem;
        background-color: var(--rojoIconos);
        border-radius: 1rem;
        margin-top: 0.4rem;
        transition: width linear;
    }
 
    /* Tamaño de texto */
    .galeria__info-titulo { font-size: 1.2em; }
    .galeria__info-texto  { font-size: 0.82em; }
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .galeria__info {
        width: calc(100% - 2.4rem);
        right: 1.2rem;
        bottom: 1.2rem;
        padding: 1.2rem 1.4rem;
    }
    .galeria__info-titulo { font-size: 1.1em; }
    .galeria__info-texto  { font-size: 0.78em; }
}


/* ── Overlay oscuro ── */
.galeria-lb__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 8000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    cursor: pointer;       /* indica que clic fuera cierra */
}
 
.galeria-lb__overlay.visible {
    opacity: 1;
    pointer-events: all;
}
 
/* ── Contenedor del lightbox ── */
.galeria-lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 8001;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.galeria-lb.visible {
    opacity: 1;
    pointer-events: all;
}
 
/* ── Imagen ampliada ── */
.galeria-lb__img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.8rem;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.55);
    display: block;
    /* Evitar que el clic en la imagen propague y cierre */
    pointer-events: none;
    animation: lbGaleriaEntrada 0.3s ease;
}
 
@keyframes lbGaleriaEntrada {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1);    }
}
 
/* ── Cursor pointer en la imagen del slide para indicar que es clickeable ── */
.galeria__slide.activo img {
    cursor: zoom-in;
}

/* ── SABÍAS QUÉ ─────────────────────────────────────────────────── */
 
.sabiasQue {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin: 4rem 4rem 6rem 4rem;
    align-items: start;
}
 
.sabiasQue__titulo {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--grisOscuro);
    margin-bottom: 2rem;
}
 
/* ── GRID DE TARJETAS ── */
.sabiasQue__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
}
 
/* ── TARJETA DATO ── */
.dato {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
 
.dato__icono {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 50%;
    background-color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.9rem;
    overflow: hidden;
    flex-shrink: 0;
}
 
.dato__icono img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
 
.dato__icono svg {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.45;
}
 
.dato__titulo {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--grisOscuro);
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
 
.dato__separador {
    width: 2.2rem;
    height: 0.15rem;
    background-color: var(--rojoIconos);
    border-radius: 1rem;
    margin-bottom: 0.45rem;
    flex-shrink: 0;
}
 
.dato__descripcion {
    font-size: 0.8em;
    color: var(--gris);
    line-height: 1.55;
}
 
/* ── LADO DERECHO ── */
.sabiasQue__derecha {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
 
.sabiasQue__tituloD {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--grisOscuro);
    line-height: 1.35;
}
 
.sabiasQue__imagen-wrap {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: #d0d0d0;
    min-height: 19rem;
}
 
.sabiasQue__imagen-wrap img {
    width: 100%;
    height: 100%;
    min-height: 19rem;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
}
 
.sabiasQue__imagen-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 30%, rgba(255,255,255,0.85) 58%);
    border-radius: 1rem;
    pointer-events: none;
}
 
.sabiasQue__texto {
    position: absolute;
    top: 50%;
    right: 1.8rem;
    transform: translateY(-50%);
    width: 52%;
    z-index: 2;
}
 
.sabiasQue__texto p {
    font-size: 0.85em;
    color: var(--grisOscuro);
    line-height: 1.7;
    text-align: justify;
}
 
.sabiasQue__texto p + p {
    margin-top: 0.9rem;
}

@media (max-width: 900px) {
 
    /* La caja de texto dentro de la tarjeta de imagen */
    .sabiasQue__derecha .informacion__izquierda .informacion__texto,
    .sabiasQue__derecha .informacion__derecha   .informacion__texto {
        font-size: 0.78em !important;
        line-height: 1.5  !important;
    }
}
 
@media (max-width: 560px) {
 
    /* Aún más pequeño en móvil pequeño */
    .sabiasQue__derecha .informacion__izquierda .informacion__texto,
    .sabiasQue__derecha .informacion__derecha   .informacion__texto {
        font-size: 0.72em !important;
        line-height: 1.45 !important;
    }
 
    /* Asegurar que la caja no tenga altura fija ni overflow oculto */
    .sabiasQue__derecha .informacion__izquierda,
    .sabiasQue__derecha .informacion__derecha {
        min-height: unset !important;
        height:     auto  !important;
        overflow:   visible !important;
    }
}
 
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .sabiasQue {
        grid-template-columns: 1fr;
        margin: 3rem 2rem 4rem 2rem;
        gap: 2.5rem;
    }
}
 
@media (max-width: 560px) {
    .sabiasQue__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem 0.8rem;
    }
    .sabiasQue__texto {
        width: 55%;
        right: 1rem;
    }
}
 
@media (max-width: 400px) {
    .sabiasQue__grid { grid-template-columns: 1fr; }
    .sabiasQue__imagen-wrap::after {
        background: linear-gradient(to top, rgba(255,255,255,0.92) 40%, transparent 100%);
    }
    .sabiasQue__texto {
        position: static;
    }
}


/* ══════════════════════════════════════════════════════════════
   SECCIÓN: MÁRGENES DE LA SECCIÓN .datos (grid de datos)
══════════════════════════════════════════════════════════════ */

.datos {
    margin: 2rem 4rem 4rem 4rem;
}

@media (max-width: 800px) {
    .datos { margin: 1.5rem 2rem 3rem 2rem; }
}

@media (max-width: 599px) {
    .datos { margin: 1rem 1.5rem 2.5rem 1.5rem; }
}


/* ══════════════════════════════════════════════════════════════
   PLACEHOLDERS DE IMAGEN
══════════════════════════════════════════════════════════════ */

.eg-imagen-placeholder {
    width: 100%;
    min-height: 22rem;
    background-color: #e4e4e4;
    border-radius: 1.2rem;
}

/* ── Imagen dentro del placeholder intro ── */
.eg-imagen-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1.2rem;
}

/* Placeholder grande de la sección introductoria (factores) */
.eg-imagen--intro {
    min-height: 30rem;
    margin-bottom: 2.4rem;
}

@media (max-width: 800px) {
    .eg-imagen--intro { min-height: 20rem; }
    .eg-imagen-placeholder { min-height: 18rem; }
}

@media (max-width: 599px) {
    .eg-imagen--intro { min-height: 15rem; }
    .eg-imagen-placeholder { min-height: 14rem; }
}


/* ══════════════════════════════════════════════════════════
   BOTÓN POPUP — Kilowatts
══════════════════════════════════════════════════════════ */

/* Columna derecha: centra el botón verticalmente */
.kw-popup-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Botón más ancho en escritorio ── */
.kw-popup-btn {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 1rem;
    padding: 1.4rem 1.8rem;
    cursor: pointer;
    box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    text-align: left;
    max-width: 38rem;   /* era 28rem */
    width: 100%;
}

.kw-popup-btn:hover {
    border-color: var(--rojo, rgb(194,19,48));
    box-shadow: 0 0 0 1px var(--rojo, rgb(194,19,48)),
                0 0.4rem 1.2rem rgba(194,19,48,0.12);
    transform: translateY(-2px);
}

/* Imagen/icono dentro del botón */
.kw-popup-btn__img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0.5rem;
}

/* ── Tamaño del SVG inline dentro del botón kw ── */
.kw-popup-btn svg {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
}

/* Texto del botón */
.kw-popup-btn__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--grisOscuro, rgb(63,63,62));
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX — Kilowatts
══════════════════════════════════════════════════════════ */

/* Overlay oscuro */
.kw-lb__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 8500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.kw-lb__overlay.visible {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
}

/* Contenedor del lightbox */
.kw-lb {
    position: fixed;
    inset: 0;
    z-index: 8501;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.kw-lb.visible {
    opacity: 1;
    pointer-events: all;
}

/* Imagen ampliada */
.kw-lb__img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 0.8rem;
    box-shadow: 0 2rem 6rem rgba(0,0,0,0.55);
    display: block;
    pointer-events: none;
    animation: kwLbEntrada 0.3s ease;
}

@keyframes kwLbEntrada {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1);    }
}

/* Botón cerrar — estilo numeralia */
.num-lightbox__close {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 0.15rem solid white;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
    z-index: 10;
    pointer-events: all;
}

.num-lightbox__close svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    stroke: currentColor;
    fill: none;
    display: block;
    min-width: unset !important;
}

.num-lightbox__close:hover {
    background: var(--rojo);
    border-color: var(--rojo);
    transform: rotate(90deg);
}

/* Posición dentro del kw-lb */
.kw-lb .num-lightbox__close {
    position: fixed;
    top: 1.4rem;
    right: 1.6rem;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* Tablet (≤ 800px): el botón se centra debajo del párrafo */
@media (max-width: 800px) {
    .kw-popup-col {
        justify-content: flex-start;
    }

    .kw-popup-btn {
        max-width: 100%;
    }
}

/* Móvil (≤ 599px) */
@media (max-width: 599px) {
    .kw-popup-btn {
        padding: 1.2rem 1.4rem;
        gap: 1rem;
    }

    .kw-popup-btn__img {
        width: 4rem;
        height: 4rem;
    }

    .kw-popup-btn__label {
        font-size: 1.5rem;
    }

    .kw-lb__img {
        max-width: 95vw;
        max-height: 80vh;
    }
}

/* ══════════════════════════════════════════════════════════
   COLUMNA DERECHA — Datos Refrigeración
══════════════════════════════════════════════════════════ */

.refrig-datos {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: flex-start;
    justify-content: center;
}

/* Tablet (≤ 800px): los datos van en fila debajo del párrafo */
@media (max-width: 800px) {
    .refrig-datos {
        flex-direction: row;
        gap: 2rem;
        justify-content: flex-start;
    }
}

/* Móvil (≤ 599px): apila los datos uno debajo del otro */
@media (max-width: 599px) {
    .refrig-datos {
        flex-direction: column;
        gap: 2rem;
    }
}

/* ══════════════════════════════════════════════════════════
   COLUMNA DERECHA — Datos Consumo de Gas
══════════════════════════════════════════════════════════ */

.gas-datos {
    display: flex;
    flex-direction: row;
    align-items: flex-start;    /* alinea desde el top */
    gap: 0;
    justify-content: center;
}

.gas-datos__conector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 0.3rem;
    min-width: 7rem;
    margin-top: calc(6.5rem / 2 - 1.8rem); /* mitad del icono menos la mitad aprox del conector */
    padding-top: 0;
}

.gas-datos__etiqueta {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--grisOscuro, rgb(63,63,62));
    white-space: nowrap;
}

/* Flecha roja */
.gas-datos__flecha {
    width: 5.5rem;
    height: auto;
    flex-shrink: 0;
    color: var(--rojo, rgb(194,19,48));   /* ← rojo */
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Gas datos
══════════════════════════════════════════════════════════ */

/* Tablet (≤ 800px): bloque debajo del párrafo, misma fila */
@media (max-width: 800px) {
    .gas-datos {
        justify-content: flex-start;
    }
}

/* Móvil (≤ 599px): apila verticalmente, sin flecha SVG */
@media (max-width: 599px) {
    .gas-datos {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    /* Ocultar la flecha SVG en móvil */
    .gas-datos__flecha {
        display: none;
    }

    /* El conector solo muestra el texto "Representa" */
    .gas-datos__conector {
        flex-direction: row;
        padding: 0;
        min-width: unset;
        gap: 0;
    }

    .gas-datos__etiqueta {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--grisOscuro, rgb(63,63,62));
    }
}

/* ══════════════════════════════════════════════════════════
   PANEL ENERGÍA SOLAR — dos columnas independientes
══════════════════════════════════════════════════════════ */

.solar-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;         /* ambas columnas arrancan desde arriba */
}

/* Columna izquierda: apila título y párrafo */
.solar-panel__izq {
    display: flex;
    flex-direction: column;
}

/* Columna derecha: imagen ocupa todo el ancho disponible */
.solar-panel__der {
    display: flex;
    align-items: flex-start;
}

.solar-panel__img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
    object-fit: cover;
    box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.08);
    cursor: zoom-in;
}

/* ── Tablet (≤ 800px): una columna ── */
@media (max-width: 800px) {
    .solar-panel {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ── Móvil (≤ 599px) ── */
@media (max-width: 599px) {
    .solar-panel__img {
        border-radius: 0.7rem;
    }
}

/* ── Lightbox eg-lb — oculto por defecto ── */
.eg-lb__overlay,
.eg-lb__cerrar,
.eg-lb {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.eg-lb__overlay.visible { display: block; opacity: 1; pointer-events: all; }
.eg-lb__cerrar.visible  { display: flex;  opacity: 1; pointer-events: all; }
.eg-lb.visible          { display: flex;  opacity: 1; pointer-events: all; }

/* Variante: separador llega al 50% del contenedor padre */
.gsa-panel__titulo-grupo--ancho {
    display: block;
    width: 50%;
}