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

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  background-color: #cacbcb;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  width: 100%;
  height: calc(100vh - 100px);
}

.encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0a46e8;
  width: 100%;
  height: 100px;
  padding: 0 50px;
  font-size: 1.3rem;
  position: relative;
}

.logoEmpresa {
  width: auto;
  height: 100px;
  display: block;
}

.menuNavegacion ul {
  list-style-type: none;
  display: flex;
  gap: 30px;
}

.menuNavegacion ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s ease;
  border-bottom: 2px solid white;
}

.menuNavegacion a:hover {
  color: #71c648;
  border-bottom: 2px solid #71c648;
}

.contenidoExplicativo {
  height: 150%;
  width: 100%;
  background-color: white;
  background-image: url("src/img/pjFondo.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 120px;
}


.textos-hero {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 3.5rem;
}

.textos-hero h2 {
  font-size: 3rem;
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  margin-left: -6px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
}

.contenidoPrincipal {
  width: 100%;
  padding: 60px 20px;
  background-color: #cacbcb;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.caract {
  text-align: center;
  background-color: #0a46e8;
  border-radius: 50px;
  color: white;
  width: fit-content;
  margin: 0 auto 50px;
  padding: 5px;
}

.contenedorPr h1 {
  font-size: 3rem;
  color: #0a46e8;
  text-align: center;
  margin-bottom: 50px;
}

.contenedorPr p {
  font-size: 1.4rem;
  color: white;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

.brillar {
  display: inline-block;
  color: #71c648;
}

.counters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  column-gap: 30px;
}

.counterTar {
  flex: 1;
  text-align: center;
}

.counterNum {
  font-size: 3.5rem;
  color: #0a46e8;
  font-weight: bold;
  margin-bottom: 8px;
}

.counterText {
  font-size: 1.2rem;
  color: #333333;
}

.nuestrosServicios {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.servicioText {
  background-color: #71c648;
  padding-top: 5px;
  padding-bottom: 15px;
  text-align: center;
  color: white;
}

.infoInterna {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    background-color: #0033cc;
    min-height: calc(100vh - 120px);
    color: white;
    background-image: url('src/img/fondoAzSer.png');
    background-size: contain;     
    background-position: left center;
    background-repeat: no-repeat;
}

.textoPOP { width: 20%; margin-left: -250px; }
.textoPOP p { font-size: 1.6rem; color: white; }
.textoPOP h3 { color: #76c944; font-size: 2.2rem; }

.infoInterna .termoR {
  width: 30%;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  align-self: flex-end;
}

.infoInterna .termos {
    border-radius: 20px;
    width: 20%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin-right: 30px;
}

.papeleria {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    background-color: white ;
    min-height: calc(100vh - 120px);
    color: white;
    background-image: url('src/img/fondoBla.png');
    background-size: contain;     
    background-position: right center;
    background-repeat: no-repeat;
}

.papeleria h1 {
    color: #0a46e8;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.papeleria p {
    font-size: 1.2rem;
    color: black;
    max-width: 600px;
}

.papeleria .cuadernos {
  width: 20%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-left: 15px;
}

.papeleria .tarjetas {
  width: 30%;
  height: auto;
  object-fit: contain;
  object-position: right center;
  margin-right: 30px;
}

.papeleriaText { width: 25%; margin-right: -225px; }
.papeleriaText h1 { width: 100%; color: #0a46e8; }
.papeleriaText p { font-size: 1.6rem; color: black; }


.agendas {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    background-color: green;
    min-height: calc(100vh - 120px);
    color: white;
    background-image: url('src/img/fondoVer.png');
    background-size: contain;     
    background-position: left center;
    background-repeat: no-repeat;
}

.agendasText h1 {
    color: #0a46e8;
    font-size: 2.2rem;
    margin-bottom: 15px;
    line-height: 1.2;
}

.agendasText p { 
    font-size: 1rem; 
    color: white; 
    line-height: 1.4;
}

.agendas .mujer {
    width: 40%;
    height: auto;
    object-fit: contain;
    align-self: flex-end;
    margin-left: -20px;
}

.agendas .muestra {
    width: 20%;
    height: auto;
    object-fit: contain;
    object-position: right center;
    margin-right: 20px;  
}

.agendasText { 
    width: 30%; 
    max-width: 420px; 
    margin-right: 0; 
    margin-left: -250px; 
    z-index: 2; 
}
.agendasText p { font-size: 1.6rem; color: white; }

.nosotrosProceso {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 60px 50px;
  background-image: url('src/img/fondoNos.png');
  min-height: calc(100vh - 120px);
  box-sizing: border-box;
  gap: 40px;
}

.nosotrosCol {
  width: 45%;
}

.nosotrosCol h2 {
  color: #0033cc; 
  font-size: 2rem;
  margin-bottom: 25px;
}

.nosotrosCol p {
  color: #333;
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.nosotrosCol ul {
  padding-left: 20px;
  color: #111;
}

.nosotrosCol li {
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 500;
}


.procesoCol {
  width: 50%;
  text-align: center;
}

.procesoCol h2 {
  color: #0033cc;
  font-size: 2rem;
  margin-bottom: 10px;
}

.procesoSub {
  color: #444;
  font-size: 1rem;
  margin-bottom: 30px;
}


.tarjetasGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card {
  background-color: white;
  border: 1.5px solid #71c648; 
  border-radius: 20px;
  padding: 20px 15px;
  width: 28%; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}


.stepNum {
  background-color: #0033cc;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.card h3 {
  color: #0033cc;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.card p {
  color: #555;
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0;
}

.contactoSeccion {
  display: flex;
  min-height: calc(100vh - 120px);
  background-color: #0033cc;
  overflow: hidden;
}


.videoCol {
  width: 35%;
  height: 100vh;
  position: relative;
}

.videoContacto {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}


.contactoCol {
  width: 65%;
  background-image: url('src/img/fondoAz2.png'); 
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  color: white;
  text-align: center;
  box-sizing: border-box;
}

.contactoCol h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.subtituloContacto {
  max-width: 550px;
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 35px;
  opacity: 0.9;
}


.infoTarjetas {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
  max-width: 750px;
  margin-bottom: 35px;
}

.tarjetaItem {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 20px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tarjetaItem .icono {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.tarjetaItem .label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 5px;
}

.tarjetaItem .valor, 
.tarjetaItem a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9rem;
  word-break: break-word;
}

.botonesAccion {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.btnVerde {
  background-color: #71c648;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 12px 30px;
  border-radius: 25px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btnVerde:hover {
  background-color: #5fb03b;
  transform: translateY(-2px);
}

.redesFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 1rem;
}


.redesFooter a {
  display: inline-flex;    
  align-items: center;     
  gap: 8px;            
  color: white;           
  text-decoration: none;    
  font-weight: 500;
  transition: opacity 0.2s ease;
}


.redesFooter a:hover {
  opacity: 0.8;
}

.iconoRed {
  width: 20px;         
  height: 20px;
  object-fit: contain;
}

.redesFooter .separador {
  color: rgba(255, 255, 255, 0.5); 
  font-weight: 300;
}

.politicasSeccion {
  background-color: #ececec;
  min-height: calc(100vh - 120px); 
  height: auto;              
  padding: 50px 80px;
  box-sizing: border-box;
}

.politicasContenedor {
  max-width: 900px; 
  color: #111;
  font-family: sans-serif;
  line-height: 1.5;
}

.politicasContenedor h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: #000;
}

.politicasContenedor .fechaActualizacion {
  font-size: 0.95rem;
  margin-bottom: 25px;
}

.politicasContenedor h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 8px;
  color: #000;
}

.politicasContenedor p {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: #222;
}

.politicasContenedor ul {
  margin-top: 5px;
  margin-bottom: 15px;
  padding-left: 25px;
}

.politicasContenedor li {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

body.pagina-politicas {
  background-color: #cacbcb !important; 
  min-height: 100vh;
  height: auto;
}

body.pagina-politicas main {
  background-color: #cacbcb !important;
  height: auto !important; 
}
.menuNavegacion ul {
  list-style-type: none;
  display: flex;
  align-items: center;
  gap: 0; 
}


.btn-fase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 35px 12px 45px;
  background-color: #0837B8;
  clip-path: polygon(25px 0%, 100% 0%, calc(100% - 25px) 100%, 0% 100%);
  margin-right: -20px;
  position: relative;
  transition: background-color 0.3s ease, transform 0.2s ease;
}


.btn-fase.activo {
  background-color: #0A46E8;
  z-index: 5;
}


.btn-fase:hover {
  background-color: #0A46E8;
  z-index: 10 !important;
  transform: translateY(-2px);
}


.fase-home {
  font-size: 1.1rem;
  padding: 16px 50px;
  clip-path: polygon(25px 0%, 100% 0%, 100% 100%, 0% 100%);
  margin-right: 0;
}