/* ===========================================================
   TIPOGRAFÍAS
=========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");

/* ===========================================================
   VARIABLES DE COLOR (CENTRALIZADAS)
=========================================================== */
:root {
  /* Paleta Principal */
  --color-morado: #311754;
  --color-rosa: #b05c89;
  --color-cian: #389da2;
  --color-cian-oscuro: #988ea9;
  --color-cianVerde: #91d2d0;
  --color-blanco: #ffffff;
  --color-oscuro: #3d3d3d;

  /* Backgrounds de Sección (Sólidos) */
  --bg-inicio: var(--color-morado);
  --bg-quienes: rgba(176, 92, 137, 0.15);
  --bg-objetivo: #efefef;
  --bg-estrategia: #251240;
  --bg-certificacion: var(--color-cianVerde);
  --bg-contacto: var(--color-rosa);
  --bg-morado: var(--color-morado);

  /* Elementos */
  --color-borde-cert: #afa7bc;
  --color-boton-accion: var(--color-cian);
  --color-boton-hover: #2d7d81;
  
  /* Ajustes de Layout */
  --cem-ancho-contenido: 1200px;
  --cem-radio-tarjeta: 1.5rem;
  --cem-sombra-tarjeta: 0 1rem 2rem rgba(0,0,0,0.1);
}

/* ===========================================================
   BASE GENERAL (CORREGIDO SCROLL HORIZONTAL)
=========================================================== */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh; /* Asegura el llenado de altura */
  font-family: "Open Sans", Arial, sans-serif;
  background-color: var(--color-blanco);
  color: var(--color-oscuro);
  display: flex;
  flex-direction: column;
  
  /* CRÍTICO: Soluciona el scroll horizontal */
  overflow-x: hidden; 
}

body.cem-pagina-certificacion * {
  box-sizing: border-box;
}

body.cem-pagina-certificacion a {
  text-decoration: none;
}

/* ===========================================================
   LIENZO PRINCIPAL (AJUSTE DE ALTURA MANTENIDO)
=========================================================== */
.cem-lienzo-principal {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

.cem-seccion-certificacion {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* ===========================================================
   BLOQUE SUPERIOR
=========================================================== */
.cem-bloque-encabezado {
  width: 100%;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-blanco);
  flex: 0 0 auto;
}

.cem-contenedor-encabezado {
  width: 100%;
  max-width: 980px;
  text-align: center;
}

.cem-titulo-principal {
  margin: 0 0 1rem;
  color: var(--color-morado);
  font-size: clamp(2rem, 2.7vw, 3.3rem);
  line-height: 1.1;
  font-weight: 800;
}

.cem-resalte-titulo {
  color: var(--color-cianVerde);
}

.cem-textos-bienvenida p {
  margin: 0 0 0.8rem;
  color: var(--color-morado);
  font-size: clamp(1rem, 1.1vw, 1.25rem);
  line-height: 1.5;
  opacity: 0.9;
}

.cem-textos-bienvenida strong {
  color: var(--color-morado);
  font-weight: 800;
}

/* ===========================================================
   BLOQUE DE PASOS (SÓLIDO Y ESTIRADO HASTA EL FONDO)
=========================================================== */
.cem-bloque-pasos {
  position: relative;
  width: 100%;
  
  /* CRÍTICO: Esto hace que se estire hasta el fondo de la pantalla disponible */
  flex: 1 0 auto; 
  
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* Forzar color sólido y quitar brillos líquidos */
  background-color: var(--bg-morado);
}

/* Pseudo-elementos de brillos ELIMINADOS */
.cem-bloque-pasos::before,
.cem-bloque-pasos::after {
  display: none !important;
}

.cem-fondo-pasos {
  /* No se necesita si .cem-bloque-pasos ya tiene el fondo */
  display: none;
}

.cem-contenedor-pasos {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--cem-ancho-contenido);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.cem-titulo-pasos {
  margin: 0;
  color: var(--color-blanco);
  text-align: center;
  font-size: clamp(1.5rem, 2vw, 2.2rem);
  font-weight: 800;
}

/* ===========================================================
   TARJETAS
=========================================================== */
.cem-cuadricula-pasos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.cem-tarjeta-paso {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--cem-radio-tarjeta);
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde-cert);
  box-shadow: var(--cem-sombra-tarjeta);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease;
}

.cem-tarjeta-paso:hover {
  transform: translateY(-0.5rem);
}

.cem-encabezado-tarjeta {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cem-numero-paso {
  color: var(--color-cianVerde);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}

.cem-subtitulo-paso {
  margin: 0;
  color: var(--color-morado);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
}

.cem-texto-paso {
  margin: 0;
  color: var(--color-oscuro);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ===========================================================
   BOTONES
=========================================================== */
.cem-zona-boton-formulario {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.cem-boton-formulario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15rem;
  min-height: 3.5rem;
  padding: 0 2rem;
  border-radius: 999rem;
  background-color: var(--color-cian);
  color: var(--color-blanco);
  font-size: 1.1rem;
  font-weight: 700;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cem-boton-formulario:hover {
  background-color: var(--color-boton-hover);
  transform: scale(1.05);
  color: var(--color-blanco);
}

.cem-panel-administracion {
  padding: 1.5rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.cem-texto-administracion {
  color: var(--color-blanco);
  font-size: 1rem;
}

.cem-boton-administracion {
  padding: 0.8rem 1.5rem;
  border-radius: 999rem;
  background-color: transparent;
  border: 1px solid var(--color-blanco);
  color: var(--color-blanco);
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cem-boton-administracion:hover {
  background-color: var(--color-blanco);
  color: var(--color-morado);
}

/* ===========================================================
   RESPONSIVO
=========================================================== */
@media (max-width: 1100px) {
  .cem-cuadricula-pasos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cem-cuadricula-pasos {
    grid-template-columns: 1fr;
  }
  
  .cem-bloque-pasos {
    padding: 2rem 1rem;
  }
}