:root{
   --color-principal-verde:#00af9b; 
   --color-principal-naranja:rgb(243,100,17);
   --texto-oscuro:#1F2937;
   --texto-secundario:#4B5563; /* Un gris oscuro más suave para textos largos */
   --fondo-pantalla:#f0f0f0; /* Gris claro sólido para el fondo de pantalla, como en Sedes */
   --nav-link-font:1rem;
   --header-height:101px;
   --logo-img-size:80px;
   --max-width:1250px;
   --surface:#ffffff; /* Blanco sólido para las tarjetas */
   --muted:#6b6b6b;
   --borde-tarjeta:#999999; /* Gris más oscuro para el borde de las tarjetas */
}

/* 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-pantalla); /* Aplicando el fondo gris claro a toda la pantalla */
   font-size:18px;
}

.container{
   width:100%;
   max-width:var(--max-width);
   margin:0 auto;
   padding:20px;
}

/* Limpieza de títulos (adiós a la sombra negra) */
h1,h2,h3{
   font-family: "Roboto Condensed", sans-serif;
   text-align: center;
   color: var(--texto-oscuro);
}

a{
   text-decoration:none;
}

/* ---------------------------------------------------------------------------
   NAV 
   ------------------------------------------------------------------------ */
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 h2 {
    color: white;
}
.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 MODERNO
   ------------------------------------------------------------------------ */
#hero{
   display:block;
   padding-top:140px;
   padding-bottom:80px;
   /* Degradado verde limpio, sin sombras feas */
   background: linear-gradient(135deg, var(--color-principal-verde), #005f54);
}
#hero > .container{
   display:grid;
   grid-template-columns:3fr 1fr;
   gap:30px;
   align-items:center
}
#hero h1{
   font-size:clamp(2.6rem,3.2vw,3rem);
   color:#ffffff;
   margin-bottom:1.5rem;
   text-align: left;
}
#hero p{
   color:#e0f2f1;
   font-size:22px;
   text-align: left;
}
.hero-image-container {
   text-align: center; 
}
.hero-responsive-img {
   display: block;
   width: 100%; 
   max-width: 100%; 
   height: auto; 
   border-radius: 12px; 
   object-fit: cover; 
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
}

/* ---------------------------------------------------------------------------
   ESTILOS COMUNES DE TARJETAS BLANCAS CON BORDE GRUESO Y OSCURO
   ------------------------------------------------------------------------ */
.section {
    padding: 60px 0;
}

/* Aplicando el fondo blanco y el borde más grueso y oscuro como solicitaste */
.tarjeta-mision-vision, .tarjeta-historia, #ejes .tarjeta, #mision-vision aside, .impacto, .beneficios {
   background-color: var(--surface); /* Fondo blanco sólido para las tarjetas */
   border-radius: 12px;
   border: 3px solid var(--borde-tarjeta); /* Borde gris más grueso y oscuro */
   box-shadow: none; /* Eliminar la sombra ligera para un aspecto más sólido y limpio */
   transition: transform 0.3s ease, border-color 0.3s ease; /* Transición para el efecto de hover */
}

/* Efecto al pasar el mouse por las tarjetas */
.tarjeta-mision-vision:hover, .tarjeta-historia:hover, #ejes .tarjeta:hover {
    transform: translateY(-5px);
    border-color: #666666; /* Un gris aún más oscuro para el hover, sutil */
}

h2 {
   color: var(--color-principal-naranja);
   font-size: 35px;
   margin-bottom: 30px;
}

/* ---------------------------------------------------------------------------
   MISIÓN / VISIÓN / VALORES
   ------------------------------------------------------------------------ */
.rejilla-mision-vision{
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
   margin-bottom: 40px;
}
.tarjeta-mision-vision{
   width: 450px;
   padding: 30px;
}
.tarjeta-mision-vision h2 {
    margin-bottom: 15px;
}
#mision-vision aside{
   padding: 40px;
   text-align: left; /* Mantener la alineación a la izquierda */
}

/* Listas estilizadas (Checkmarks) */
#mision-vision ul, #beneficios ul, #ejes ul {
   list-style:none;
   text-align: left;
   font-size: 20px;
   max-width: 700px;
   margin: 0 auto;
}
#ejes ul {
    font-size: 18px;
    padding: 20px;
}
#mision-vision li, #beneficios li, #ejes li {
   position:relative;
   padding-left:35px;
   margin-bottom: 12px;
   color: var(--texto-secundario);
}
#mision-vision li::before, #beneficios li::before, #ejes li::before {
   content: "✓";
   color: var(--color-principal-verde);
   position: absolute;
   left: 0;
   font-weight: bold;
   font-size: 22px;
}

/* ---------------------------------------------------------------------------
   HISTORIA Y COMUNIDAD
   ------------------------------------------------------------------------ */
.historia{
   margin-bottom: 50px;
}
.rejilla-historia{
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
}
.tarjeta-historia{
   width: 350px;
   padding: 30px;
   text-align: center;
}
.tarjeta-historia h3{
   color: var(--color-principal-verde);
   font-size: 26px;
   margin-bottom: 15px;
}
.tarjeta-historia p{
   color: var(--texto-secundario);
}
.impacto{
   padding: 40px;
   text-align: center;
}
.impacto p {
    max-width: 800px;
    margin: 0 auto 20px auto;
    color: var(--texto-secundario);
    font-size: 20px;
}

/* ---------------------------------------------------------------------------
   EJES FORMATIVOS
   ------------------------------------------------------------------------ */
#ejes p{
   color:var(--texto-secundario);
   text-align:center;
   font-size: 22px;
   margin-bottom: 30px;
}
.rejilla{
   display: flex;
   justify-content: center;
   gap: 30px;
   flex-wrap: wrap;
}
#ejes .tarjeta{
   width: 260px;
   overflow: hidden; /* Para que la imagen respete los bordes redondos de la tarjeta */
   /* La tarjeta heredará el estilo de borde y fondo definido en la sección común */
}
#ejes .tarjeta h3{
   color: var(--texto-oscuro);
   margin: 20px 0 10px 0;
   font-size: 22px;
}

/* --- Imágenes corregidas (con ../) --- */
.img-ejes1, .img-ejes2, .img-ejes3, .img-ejes4, .img-ejes5 {
   height: 180px;
   background-size: cover;
   background-position: center;
}
.img-ejes1{ background-image: url('../imagenes/cosmetologia.jpg'); }
.img-ejes4{ background-image: url('../imagenes/cocina.jpg'); }
.img-ejes5{ background-image: url('../imagenes/marketing.jpeg'); }
.img-ejes2{ background-image: url('../imagenes/refrigeracion-residencial2.jpg'); }
.img-ejes3{ background-image: url('../imagenes/refrigeracion-automotriz.jpg'); }

/* ---------------------------------------------------------------------------
   CTA / BENEFICIOS
   ------------------------------------------------------------------------ */
.beneficios{
   padding: 40px;
}

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */
footer{
   background: black;
   color: #00ffe1;
   text-align:center;
   padding:30px 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;
      text-align: center;
   }
   #hero h1, #hero p {
      text-align: center;
   }
}

@media (max-width:700px){
   .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;
   }
   .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;
   }
   .nav-toggle-checkbox:checked ~ .nav-enlaces {
      display: flex;
      margin-top: -20px;
      flex-direction: column;
      margin-left: 46px;
      border-radius: 30px;
   }
   
   .tarjeta-mision-vision, .tarjeta-historia {
       width: 100%; /* Las tarjetas toman el 100% en móviles */
   }
}