:root{
   --color-principal-verde:#00af9b; 
   --color-principal-naranja:rgb(243,100,17);
   --texto-oscuro:#1F2937;
   --texto-secundario:#091531;
   --fondo-claro:#F9FAFB;
   --nav-link-font:1rem;
   --header-height:101px;
   --logo-img-size:80px;
   --max-width:1250px;
   --surface:#ffffff;
   --muted:#6b6b6b;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}

body{
   font-family: var(--tahoma);
   color:var(--texto-oscuro);
   line-height:1.6;
   background-color:var(--fondo-claro);
   font-size:18px;
}
.container{
   width:100%;
   max-width:var(--max-width);
   margin:0 auto;
   padding:20px;
}
h1,h2,h3{
   font-family: "Roboto Condensed", sans-serif;
   text-align: center;
   text-shadow: 2px 3px 6px rgba(34, 0, 0, 0.537);
}
a{
   text-decoration:none;
}

/* ---------------------------------------------------------------------------
   NAV (no tocar funcionalidad - organizado como en Index.css)
   ------------------------------------------------------------------------ */
nav{
   display:flex;
   justify-content:space-between;
   align-items:center;
   position:fixed;
   top:0;
   left:0;
   background-image:linear-gradient(90deg,#00af9b,#000);
   z-index:20;
   width:100%;
   height:var(--header-height);
   padding:0 1rem;
}
.logo-cemproza{
   font-size:1.5rem;
   font-weight:700;
   color:var(--surface);
   display:block;
   margin-left:20%;
}
.logo-cemproza-img{
   width:var(--logo-img-size);
   height:calc(var(--logo-img-size) + 0px);
   object-fit:contain;
}
.nav-enlaces{
   list-style:none;
   display:flex;
   gap:30px;
   margin-right:10%;
}
.nav-toggle{
   display:none;
   background:transparent;
   border:0;
   color:var(--surface);
   font-size:1.6rem;
   cursor:pointer;
}
.nav-toggle-checkbox{
   position:absolute;
   left:-9999px;
   width:0;
   height:0;
   overflow:hidden;
}
.nav-enlaces a{
   color:#00ffe1;
   font-weight:500;
   font-size:clamp(0.85rem,1.6vw,var(--nav-link-font));
   transition:all .12s;
}
.nav-enlaces a:hover{
   color:var(--color-principal-naranja);
   background-color:rgba(243,100,17,0.12);
   padding:5px 8px;
   border-radius:5px;
}
.nav-enlaces .active{
   color:var(--color-principal-naranja);
}

/* ---------------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------------ */
#hero{
   display:block;
   padding-top:100px;
   padding-bottom:40px;
   background-image: linear-gradient(135deg, #00af9b , rgba(255, 255, 255, 0.673));
   box-shadow: 6px 0px 15px #000000a3;
}
#hero > .container{
   display:grid;
   grid-template-columns:3fr 1fr;
   gap:20px;
   align-items:center
}
#hero h1{
   font-size:clamp(2.6rem,3.2vw,2.6rem);
   color:var(--texto-oscuro);
   margin-bottom:1.5rem
}
#hero p{
   color:var(--texto-secundario);
   font-size:22px;
}
.hero-card{
   background:var(--surface);
   padding:18px;
   border-radius:12px;
   box-shadow:0 8px 24px rgba(11,22,18,0.06);
   font-style:italic
}
.hero-image-container {
    /* Ajusta la altura del contenedor si es necesario, pero max-width ya debería manejarlo */
    text-align: center; /* Centra la imagen */
}
/* La clave de la responsividad */
.hero-responsive-img {
    display: block;
    width: 100%; /* Asegura que ocupe todo el ancho disponible en su columna */
    max-width: 100%; /* La imagen nunca desbordará el contenedor */
    height: auto; /* Mantiene la proporción para evitar distorsiones */
    border-radius: 8px; /* Estilo opcional: bordes redondeados */
    object-fit: cover; /* Asegura que la imagen cubra el área sin deformarse */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave opcional */
}
/* ---------------------------------------------------------------------------
   MISIÓN / VISIÓN / VALORES
   ------------------------------------------------------------------------ */
#mision-vision{
   padding:0;
}
.rejilla-mision-vision{
   background-color: #0000001e;
   padding: 50px;
   border-radius: 7px;
   box-shadow: 6px 0px 15px #000000a3;
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
}
.tarjeta-mision-vision{
   border-radius: 12px;
   box-shadow: 0px 5px 15px #00af9baa;
   width: 450px;
   background-color: #fffefe43;
   padding: 20px;
   text-align: center;
}
#mision-vision aside{
   background-color: #0000001e;
   padding: 50px;
   border-radius: 7px;
   box-shadow: 6px 0px 15px #000000a3;
}
#mision-vision aside h2{
   color: var(--color-principal-naranja);
   text-align: center;
   margin-top: 12px;
   font-size: 35px;
}
#mision-vision ul{
   list-style:none;
   text-align: center;
   font-size: 22px;
   padding-top: 20px;
}
#mision-vision li{
   position:relative;
   padding-left:22px;
   margin-bottom:.6rem;
}

/* ---------------------------------------------------------------------------
   HISTORIA
   ------------------------------------------------------------------------ */
#historia{
   padding:0;
}
.historia{
   background-color: #0000001e;
   padding: 35px;
   border-radius: 7px;
   box-shadow: 6px 0px 15px #000000a3;
   padding-bottom: 50px;
}
.rejilla-historia{
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
}
.tarjeta-historia{
   border-radius: 12px;
   box-shadow: 0px 5px 15px #00af9baa;
   width: 450px;
   background-color: #fffefe43;
   padding-bottom: 20px;
}
#historia .tarjeta-historia h2{
   color: var(--texto-oscuro);
   text-align: center;
   margin-top: 12px;
   font-size: 30px;
   margin-bottom: 0;
}

#historia h2{
   color: var(--color-principal-naranja);
   text-align: center;
   margin-top: 12px;
   font-size: 35px;
   margin-bottom: 30px;
}
#historia p{
   color: var(--texto-secundario);
   line-height: 1.7;
   padding: 10px 40px;
   text-align: center;
   font-size: 22px;
}
.impacto{
   background-color: #0000001e;
   padding: 50px;
   border-radius: 7px;
   box-shadow: 6px 0px 15px #000000a3;
}

/* ---------------------------------------------------------------------------
   EJES FORMATIVOS
   ------------------------------------------------------------------------ */
#ejes{
   padding:0;
}
.ejes{
   background-color: #0000001e;
   padding: 35px;
   border-radius: 7px;
   box-shadow: 6px 0px 15px #000000a3;
   padding-bottom: 50px;
}

#ejes h2{
   color: var(--color-principal-naranja);
   text-align: center;
   margin-top: 12px;
   font-size: 35px;
   margin-bottom: 10px;
}
#ejes p{
   color:var(--texto-secundario);
   line-height:1.7;
   padding: 0 75px;
   text-align:center;
   font-size: 22px;
   padding-bottom: 15px;
}
.rejilla{
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
   padding: 15px 0px;
}

#ejes .tarjeta{
   padding: 0px 0px 20px 0px;
   border-radius: 12px;
   box-shadow: 0px 5px 15px #00af9baa;
   width: 250px;
   background-color: #fffefe43;
   padding-bottom: 20px;
   overflow: hidden;
}
.img-ejes1{
   height: 180px;
   position: relative;
   background-size: cover;
   background-position: center;
   background-image: url('imagenes/cosmetologia.jpg'); 
}
.img-ejes4{
   height: 180px;
   position: relative;
   background-size: cover;
   background-position: center;
   background-image: url('imagenes/cocina.jpg'); 
}
.img-ejes5{
   height: 180px;
   position: relative;
   background-size: cover;
   background-position: center;
   background-image: url('imagenes/marketing.jpeg'); 
}
.img-ejes2{
   height: 180px;
   position: relative;
   background-size: cover;
   background-position: center;
   background-image: url('imagenes/refrigeracion-residencial2.jpg'); 
}
.img-ejes3{
   height: 180px;
   position: relative;
   background-size: cover;
   background-position: center;
   background-image: url('imagenes/refrigeracion-automotriz.jpg'); 
}
#ejes .tarjeta h2{
   color: var(--texto-oscuro);
   text-align: center;
   margin-top: 12px;
   font-size: 22px;
   margin-bottom: 10px;
}
.tarjeta ul{
   list-style:none;
   text-align: center;
   padding-top: 10px;
}
.tarjeta li{
   position:relative;
   padding-left:22px;
   margin-bottom:.6rem;
}
/* ---------------------------------------------------------------------------
   BENEFICIOS / CTA
   ------------------------------------------------------------------------ */
#beneficios{
   padding:0;
}
.beneficios{
   background-color: #0000001e;
   padding: 50px;
   border-radius: 7px;
   box-shadow: 6px 0px 15px #000000a3;
   padding-bottom:50px;
}
#beneficios h2{
   color: var(--color-principal-naranja);
   text-align: center;
   margin-top: 12px;
   font-size: 35px;
   margin-bottom: 10px;
}
#beneficios .cta{
   display:flex;
   flex-direction:column;
   gap:.8rem
}
#beneficios ul{
   list-style:none;
   text-align: center;
   font-size: 22px;
   padding-top: 20px;
}
#beneficios li{
   position:relative;
   padding-left:22px;
   margin-bottom:.6rem;
}

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */
footer{
   background: black;
   color: #00ffe1;
   text-align:center;
   padding:20px 10px;
}
footer p{margin:5px 0}

/* ---------------------------------------------------------------------------
   MEDIA QUERIES
   ------------------------------------------------------------------------ */
@media (max-width:1100px){
   .container{padding:16px}
}

@media (max-width:900px){
   #hero > .container{
      grid-template-columns:1fr;
   }
   #mision-vision > .container,#historia > .container,#beneficios > .container{
      grid-template-columns:1fr;
   }
}
@media (max-width:750px){
   #ejes p {
      padding: 0 5px;
   }
   #historia p {
      padding: 15px 15px;
   }
}

@media (max-width:700px){
   .hero-image-container {
        margin-top: 25px; /* Añade espacio entre el texto superior y la imagen en móvil */
    }
   .logo-cemproza{
      padding: 0px 0px 30px 0px;
      margin-left: 0%;
   }
   nav{
      flex-wrap: wrap;
      gap: 10px;
      padding: 20px 12px;
   }
   
   .nav-enlaces a {
      font-size: 0.85em;
      padding: 8px 10px;
   }

    /* mostrar label hamburguesa en tablets y móviles */
   .nav-toggle {
      padding: 10px 30px 40px 10px;
      display: flex;
      justify-content: end;
   }

   .nav-enlaces {
      display: none;
      width: 100%;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 10px 0 20px 0;
      background: linear-gradient(90deg, rgba(0,175,155,0.95), rgba(0,0,0,0.9));
      box-shadow: 0px 30px 60px 0px #33305a94;
   }

    /* cuando el checkbox esté marcado, mostrar el menú */
   .nav-toggle-checkbox:checked ~ .nav-enlaces {
      display: flex;
      margin-top: -20px;
      flex-direction: column;
      margin-left: 46px;
      border-radius: 30px;
   }
}