/* Importar tipografías */
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@300;400;500;600&display=swap');

       /* Definir Hatsch Sans (simulada con una sans-serif similar si no está disponible) */
       @font-face {
           font-family: 'Hatsch Sans';
           src: local('Arial Black'), local('Helvetica Bold'), local('sans-serif');
           font-weight: 800;
           font-style: normal;
       }

       :root {
           --gris: #434444;
           --azul: #095374;
           --verde: #b0bf3e;
           --verde-claro: #d0da89;
           --blanco: #e7ecea;
       }

       .cover-energia {
           width: 100%;
           height: 100vh;
           min-height: 500px;
           position: relative;
           overflow: hidden;
       }

       /* Imagen de fondo */
       .cover-imagen {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
           z-index: 1;
           transition: transform 0.3s ease;
       }

       .cover-overlay {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: linear-gradient(45deg,
                   rgba(9, 83, 116, 0.25) 0%,
                   rgba(67, 68, 68, 0.35) 50%,
                   rgba(9, 83, 116, 0.25) 100%);
           z-index: 2;
       }

       /* Contenido principal */
       .cover-contenido {
           position: relative;
           z-index: 5;
           height: 100%;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: var(--blanco);
           padding: 2rem;
           max-width: 1000px;
           margin: 0 auto;
       }

       .cover-tag {
           margin-bottom: 2rem;
           animation: slideDown 0.8s ease;
       }

       .cover-tag span {
           background: rgba(9, 83, 116, 0.3);
           backdrop-filter: blur(10px);
           padding: 0.6rem 1.5rem;
           border-radius: 30px;
           font-size: 1.1rem;
           letter-spacing: 2px;
           border: 1px solid var(--verde-claro);
           color: var(--blanco);
           display: inline-block;
           font-family: 'Roboto', sans-serif;
           font-weight: 400;
           text-transform: uppercase;
       }

       .cover-titulo {
           font-family: 'Hatsch Sans', sans-serif;
           font-size: clamp(2rem, 5vw, 3.5rem);
           font-weight: 800;
           letter-spacing: 12px;
           margin-bottom: 0.5rem;
           color: var(--blanco);
           text-transform: uppercase;
           animation: slideUp 0.8s ease 0.2s both;
           text-shadow: 0 2px 10px rgba(9, 83, 116, 0.5);
       }

       .cover-subtitulo {
           font-family: 'Roboto', sans-serif;
           font-size: clamp(2.5rem, 7vw, 5rem);
           font-weight: 700;
           line-height: 1.1;
           margin-bottom: 1.5rem;
           color: var(--blanco);
           text-shadow: 0 5px 30px rgba(9, 83, 116, 0.5);
           animation: slideUp 0.8s ease 0.4s both;
       }

       .cover-divisor {
           margin-bottom: 1.5rem;
           animation: fadeIn 0.8s ease 0.6s both;
       }

       .cover-divisor span {
           display: block;
           width: 80px;
           height: 2px;
           background: var(--verde);
           margin: 0 auto;
           box-shadow: 0 0 10px var(--verde-claro);
       }

       .cover-texto {
           font-family: 'Montserrat', sans-serif;
           font-size: clamp(1rem, 2vw, 1.2rem);
           font-weight: 400;
           max-width: 600px;
           margin: 0 auto 2.5rem;
           line-height: 1.8;
           color: var(--blanco);
           opacity: 0.95;
           animation: fadeIn 0.8s ease 0.8s both;
           text-shadow: 0 2px 5px rgba(9, 83, 116, 0.3);
       }

       .cover-cta-group {
           display: flex;
           gap: 1.5rem;
           justify-content: center;
           margin-bottom: 0;
           animation: slideUp 0.8s ease 1s both;
       }

       .cover-btn {
           padding: 1rem 2.5rem;
           border-radius: 50px;
           font-weight: 500;
           font-size: 1.1rem;
           border: none;
           cursor: pointer;
           transition: all 0.3s ease;
           display: inline-flex;
           align-items: center;
           gap: 12px;
           font-family: 'Roboto', sans-serif;
           font-weight: 500;
           letter-spacing: 0.5px;
       }

       .cover-btn-primario {
           background: var(--verde);
           color: var(--gris);
           box-shadow: 0 10px 20px rgba(9, 83, 116, 0.3);
       }

       .cover-btn-primario:hover {
           background: var(--verde-claro);
           transform: translateY(-3px) scale(1.05);
           box-shadow: 0 15px 30px rgba(9, 83, 116, 0.4);
       }

       .cover-btn-primario i {
           transition: transform 0.3s ease;
           color: var(--gris);
       }

       .cover-btn-primario:hover i {
           transform: translateX(5px);
       }

       .cover-btn-secundario {
           background: transparent;
           color: var(--blanco);
           border: 2px solid var(--verde-claro);
           backdrop-filter: blur(5px);
       }

       .cover-btn-secundario:hover {
           background: rgba(176, 191, 62, 0.2);
           border-color: var(--verde);
           transform: translateY(-3px);
       }

       .cover-btn-secundario i {
           color: var(--verde-claro);
       }

       .cover-btn-secundario:hover i {
           color: var(--verde);
       }


       @keyframes slideDown {
           from {
               opacity: 0;
               transform: translateY(-30px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       @keyframes slideUp {
           from {
               opacity: 0;
               transform: translateY(30px);
           }

           to {
               opacity: 1;
               transform: translateY(0);
           }
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }

       @keyframes bounce {

           0%,
           20%,
           50%,
           80%,
           100% {
               transform: translateX(-50%) translateY(0);
           }

           40% {
               transform: translateX(-50%) translateY(-10px);
           }

           60% {
               transform: translateX(-50%) translateY(-5px);
           }
       }

       /* Responsive */
       @media (max-width: 768px) {
           .cover-energia {
               min-height: 600px;
           }

           .cover-titulo {
               letter-spacing: 6px;
           }

           .cover-cta-group {
               flex-direction: column;
               width: 100%;
               max-width: 300px;
               margin-left: auto;
               margin-right: auto;
           }

           .cover-btn {
               width: 100%;
               justify-content: center;
           }

           .cover-circulos {
               width: 90vmin;
               height: 90vmin;
           }
       }

       @media (max-width: 480px) {
           .cover-tag span {
               font-size: 1rem;
               padding: 0.4rem 1rem;
           }

           .cover-titulo {
               letter-spacing: 4px;
           }

           .cover-scroll {
               bottom: 15px;
           }
       }

       /*ESTILOS PARA CONTENEDOR CON UN TITULO CENTRAL Y ABAJO DOS COLUMNAS, ESTO PARA EL APARTADO DE SERVICIOS DEL ARCHIVO enerreno.html*/

       /* Contenedor principal */
       .contenedor-principal {
           max-width: 1300px;
           width: 100%;
           margin: 0 auto;
           background: white;
           border-top: 8px solid var(--azul);
           border-bottom: 8px solid var(--azul);
           box-shadow: 0 20px 40px rgba(9, 83, 116, 0.1);
           padding: 3rem 2rem;
       }

       /* Título centrado arriba */
       .titulo-centrado {
           text-align: left;
           border-left: 8px solid var(--verde);
           padding-left: 1rem;
           margin-bottom: 3rem;
       }

       .titulo-centrado h1 {
           color: var(--azul);
           font-size: clamp(2rem, 5vw, 3rem);
           font-weight: 800;
           position: relative;
           display: inline-block;
           padding-bottom: 0.8rem;
       }

       .titulo-centrado h1::after {
           content: '';
           position: absolute;
           bottom: 0;
           left: 50%;
           transform: translateX(-50%);
           width: 100px;
           height: 4px;
           border-radius: 4px;
       }

       /* ===== CONTENEDOR HORIZONTAL (texto izquierda | imagen derecha) ===== */
       .contenedor-horizontal {
           display: flex;
           align-items: center;
           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           margin-bottom: 3rem;
       }

       .contenedor-horizontal:hover {
           transform: translateY(-5px);
           border-color: var(--verde);
           box-shadow: 0 15px 30px rgba(9, 83, 116, 0.15);
       }

       /* Lado izquierdo: texto */
       .texto-horizontal {
           flex: 1;
           padding: 2rem;
       }

       .texto-horizontal h3 {
           color: var(--azul);
           font-size: 1.6rem;
           font-weight: 700;
           margin-bottom: 1rem;
           border-left: 6px solid var(--verde);
           padding-left: 1rem;
       }

       .texto-horizontal .concepto {
           color: var(--gris);
           font-size: 1.3rem;
           line-height: 1.6;
           margin-bottom: 1.5rem;
       }

       .lista-opciones-horizontal {
           list-style: none;
           margin-bottom: 1.5rem;
       }

       .lista-opciones-horizontal li {
           margin-bottom: 0.8rem;
           display: flex;
           align-items: center;
           gap: 0.8rem;
           color: var(--gris);
           font-size: 1.2rem;
       }

       .lista-opciones-horizontal li i {
           color: var(--verde);
           font-size: 1.3rem;
           width: 20px;
       }

       /* Lado derecho: imagen */
       .imagen-horizontal {
           flex: 0.8;
           min-height: 320px;
           height: 320px;
           background-size: cover;
           background-position: center;
           transition: transform 0.3s ease;
           border-radius: 20px;
       }

       .contenedor-horizontal:hover .imagen-horizontal {
           transform: scale(1.02);
       }

       /* ===== GRID DE 2 COLUMNAS ===== */
       .grid-2-columnas {
           display: grid;
           grid-template-columns: repeat(2, 1fr);
           gap: 2rem;
           width: 100%;
           margin-top: 2rem;
       }

       .tarjeta-columna {

           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           display: flex;
           flex-direction: column;
           height: 100%;
       }

       .tarjeta-columna:hover {
           transform: translateY(-5px);
           border-color: var(--verde);
           box-shadow: 0 15px 30px rgba(9, 83, 116, 0.15);
       }

       .tarjeta-contenido {
           padding: 1rem;
           flex: 1;
       }

       .tarjeta-contenido h3 {
           color: var(--azul);
           font-size: 1.6rem;
           font-weight: 700;
           margin-bottom: 1rem;
           border-left: 6px solid var(--verde);
           padding-left: 1rem;
       }

       .tarjeta-contenido .concepto {
           color: var(--gris);
           font-size: 1.5rem;
           line-height: 1.6;
           margin-bottom: 1.5rem;
       }

       .lista-opciones {
           list-style: none;
           margin-bottom: 1.5rem;
       }

       .lista-opciones li {
           margin-bottom: 0.8rem;
           display: flex;
           align-items: center;
           gap: 0.8rem;
           color: var(--gris);
           font-size: 1.3rem;
       }

       .lista-opciones li i {
           color: var(--verde);
           font-size: 1rem;
           width: 20px;
       }

       .tarjeta-imagen {
           width: 100%;
           border-radius: 30px;
           min-height: 220px;
           height: 300px;
           background-size: cover;
           background-position: center;
           transition: transform 0.3s ease;
       }

       .tarjeta-columna:hover .tarjeta-imagen {
           transform: scale(1.02);
       }

       /* ===== RESPONSIVE CORREGIDO ===== */
       @media (max-width: 992px) {
           .contenedor-horizontal {
               flex-direction: column;
           }

           .imagen-horizontal {
               width: 100%;
               min-height: 280px;
               height: auto;
               margin-right: 0;
               margin-bottom: 1rem;
           }

           .grid-2-columnas {
               gap: 1.5rem;
           }
       }

       @media (max-width: 768px) {

           .contenedor-principal {
               padding: 2rem 1.5rem;
           }

           .grid-2-columnas {
               grid-template-columns: 1fr;
               gap: 2rem;
               max-width: 500px;
               margin-left: auto;
               margin-right: auto;
           }

           .texto-horizontal {
               padding: 1.5rem;
           }

           .texto-horizontal h3 {
               font-size: 1.4rem;
           }

           .imagen-horizontal {
               min-height: 220px;
           }

           .tarjeta-imagen {
               min-height: 200px;
               height: auto;
           }
       }

       @media (max-width: 480px) {
           .contenedor-principal {
               padding: 1.5rem 1rem;
           }

           .tarjeta-contenido {
               padding: 1.5rem;
           }

           .tarjeta-contenido h3 {
               font-size: 1.3rem;
           }

           .imagen-horizontal {
               min-height: 180px;
           }

           .tarjeta-imagen {
               min-height: 180px;
           }
       }