:root {
  --fuente-principal: 'Poppins', sans-serif;
  --color-primario: #6a0039;
  --color-primario-hover: #fdbf40;
  --color-texto: #787878;
  --color-fondo: #f7f7f7;
  --color-gris: #bebebe;
  --color-blanco: #ffffff;
  --color-underline: #720039;
  --color-azul:#184792;
  --color-negro:#000;
}

*{
  font-family: var(--fuente-principal);
}

.boton-flecha {
  background-color: var(--color-primario); /* Corinto */
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
  border: none;
}

/*Botón de contacto*/
.boton-flecha:hover {
  background-color: var(--color-primario-hover); /* Color hover */
}

.flecha-diagonal {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.boton-flecha:hover .flecha-diagonal {
  transform: rotate(45deg); /* Gira la flecha en hover */
}

.contenedor-boton {
  display: flex;
  justify-content: center;
  margin-top: 40px; /* opcional: espacio superior */
}

/*Termina botón de contacto*/

h2.subtitulo{
  color: var(--color-azul);
  text-align: center;
  font-style: normal;
}

h2.centrar{
  text-align: center;
}

h2 .centrar{
  text-align: center;
}

.texto{
  color: var(--color-texto);
}
.texto-corinto{
  color:var(--color-primario);
}

.contador {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin-top: 200px; /* Para hacer que el contador esté más abajo en la página */
  }
  .invisible {
    visibility: hidden; /* Al principio, se oculta */
  }


  .grupo-contadores {
    display: flex;
    justify-content: center;
    gap: 40px; /* espacio entre contadores */
    margin-top: 40px;
    flex-wrap: wrap; /* Por si no caben en pantallas pequeñas */
  }
  
  .item-contador {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primario, #333); /* Usa la variable si está definida */
  }
  
  .grupo-contadores {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  
  .item-contador {
    text-align: center;
    font-family: 'Arial', sans-serif;
  }
  
  .numero {
    font-size: 48px;
    font-weight: bold;
    color: var(--color-primario, #8B0000); /* o tu variable */
  }
  
  .etiqueta {
    font-size: 18px;
    color: var(--color-texto-secundario, #555);
    margin-top: 8px;
  }
 
  .marcaCorinta{
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
  }


  .tarjeta-horizontal a{
    text-decoration: none;
  }

  .tarjeta-horizontal:hover{
    background-color: var(--color-primario)
  }
  
  

  
 
/*Aquí va todo lo relacionado a la sección de COLEGIOS*/
.subtitulo{
  font-size: 44px;
  padding-top: 20px;
  font-weight: bold;
}

.fondo{
  width: 100%;
  height: 500px;
  object-fit: cover;
  object-position: center;
  z-index: -1; /* Se asegura que esté detrás del overlay */
}

.imagen-logo img{
  width: 300px;
  object-fit: cover;
  object-position: center;
}

/* Estilo para el overlay (capa oscura semitransparente) */

/* Contenedor principal - debe ser relativo */
.item-onlineSchool,
.item-sigoEstudiando,
.item-tecnicos,
.item-preUniversitario {
  position: relative;
  width: 100%;
  height: 400px; /* Misma altura que tu imagen */
  overflow: hidden; /* Opcional: recorta contenido que sobresalga */
  margin-bottom: 20px;
  transition: transform 0.6s; /* Transición casi instantánea por defecto */
}

/* Imagen de fondo - corregido */
.item-onlineSchool .fondo,
.item-sigoEstudiando .fondo,
.item-tecnicos .fondo,
.item-preUniversitario .fondo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0; /* Debe ser 0 (no -1) para que el overlay funcione */
}

/* Overlay - versión corregida */
.item-onlineSchool .overlay,
.item-sigoEstudiando .overlay,
.item-tecnicos .overlay,
.item-preUniversitario .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1; /* Encima de la imagen pero debajo del contenido */
}

/* Contenido - debe estar encima */
.item-onlineSchool .contenido,
.item-sigoEstudiando .contenido,
.item-tecnicos .contenido,
.item-preUniversitario .contenido {
  position: relative;
  z-index: 2; /* Asegura que esté sobre el overlay */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 20px 50px;
}
.item-onlineSchool .contenido,
.item-tecnicos .contenido {
  align-items: flex-end;
}
.item-sigoEstudiando .contenido,
.item-preUniversitario .contenido {
  align-items: flex-start;
}
.item-onlineSchool h2,
.item-sigoEstudiando h2,
.item-tecnicos h2,
.item-preUniversitario h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
.item-onlineSchool h3,
.item-sigoEstudiando h3,
.item-tecnicos h3,
.item-preUniversitario h3 {
  font-size: 30px;
  margin: 0;
}
.item-onlineSchool .destacado,
.item-sigoEstudiando .destacado,
.item-tecnicos .destacado,
.item-preUniversitario .destacado {
  background-color: var(--color-azul);
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 10px;
  font-weight: bold;
  border-radius: 4px;
}
/* Efecto al hacer hover */
.item-onlineSchool:hover,
.item-sigoEstudiando:hover,
.item-tecnicos:hover,
.item-preUniversitario:hover {
  transform: scale(1.03); /* Zoom del 3% */
  transition: transform 0.6s cubic-bezier(0.16, 0.71, 0.29, 0.99);
  cursor: pointer; /* 👈 Manita al pasar el mouse */
}

.item-onlineSchool a,
.item-sigoEstudiando a,
.item-tecnicos a,
.item-preUniversitario a {
  color: var(--color-primario-hover);
  text-decoration: none;
  transition: color 0.3s ease;
}

/*Aquí termina lo relacionado a la sección de COLEGIOS*/

  /* Sección principal que ocupa todo el ancho con fondo claro */
.hero-section {
  width: 100%;
  background-color: var(--color-fondo);
  padding: 4rem 0;
}

/* Contenedor principal que centra y organiza los elementos en dos columnas */
.hero-container {
  width: 100%;
  max-width: 1200px; /* Máximo ancho para que no se extienda demasiado en pantallas grandes */
  margin: 0 auto; /* Centra horizontalmente */
  padding: 0 2rem; /* Espacio lateral interno */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permite que los elementos se acomoden en pantallas pequeñas */
  position: relative; /* Necesario para posicionar elementos absolutos (círculos, imágenes) */
  
}

/* Columna de texto */
.hero-content {
  flex: 2;
  min-width: 300px;
  max-width: 700px;
  z-index: 2; /* Coloca el texto por encima de las imágenes decorativas */
  text-align: center;
}

/* Título principal */
.hero-content h1 {
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-primario); /* Vino tinto */
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Parte resaltada del título */
.hero-content .highlight {
  background-color: var(--color-primario); /* Fondo vino tinto */
  color: var(--color-blanco);
  padding: 0.2rem 0.5rem;
  display: inline-block;
  font-weight: 700;
}

/* Párrafo descriptivo */
.hero-content p {
  color: var(--color-texto);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* Botón de llamada a la acción */
.hero-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-primario-hover); /* Amarillo */
  color: var(--color-blanco);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 999px; /* Botón completamente redondeado */
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s;
}

/* Hover del botón */
.hero-button:hover {
  background-color: var(--color-primario);
  border: 1px solid var(--color-primario-hover);
}

/* Icono de flecha dentro del botón */
.hero-button .arrow {
  display: inline-block;
  margin-left: 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.3rem;
  border-radius: 999px;
}

/* Contenedor de las imágenes decorativas */
.hero-images {
  flex: 1;
  min-width: 300px;
  height: 350px;
  position: relative; /* Necesario para posicionar las fotos y círculos dentro */
}

/* Marcos para las fotos */
.photo-frame {
  width: 200px;
  height: 260px;
  background-color: var(--color-blanco);
  border: 8px solid var(--color-blanco);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); /* Sombra para realce */
  position: absolute;
  overflow: hidden;
}

/* Estilo para la imagen dentro del marco */
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Primera foto, ligeramente inclinada */
.photo1 {
  top: 0;
  left: 40px;
  transform: rotate(-2deg);
}

/* Segunda foto, superpuesta a la primera y con otra inclinación */
.photo2 {
  top: 100px;
  left: 120px;
  transform: rotate(6deg);
  z-index: 1;
}

/* Estilos generales para los círculos decorativos */
.circle {
  position: absolute;
  border-radius: 50%;
}

/* Círculo amarillo en la esquina superior derecha */
.circle.yellow {
  width: 100px;
  height: 100px;
  background-color: var(--color-primario-hover);
  top: -20px;
  right: -20px;
}

/* Círculo gris cerca del centro */
.circle.gray {
  width: 40px;
  height: 40px;
  background-color: var(--color-gris);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Círculo azul en la esquina inferior derecha */
.circle.blue {
  width: 80px;
  height: 80px;
  background-color: var(--color-azul);
  bottom: -20px;
  right: -40px;
  z-index: 0;
}

.container-nuestrosColegios{
  width: 90%;
  margin: 0 auto;
}

/*NUESTRA COMUNIDAD*/
.comunidad{
  background-color: var(--color-fondo);
}

.comunidad a{
  text-decoration: none;
}

/*FIN NUESTRA COMUNIDAD*/

/*LO QUE DICEN DE NOSOTROS*/
.seccion-horizontal .titulo-seccion{
  font-size: 44px;
  padding-top: 20px;
  font-weight: bold;
}
/*FIN LO QUE DICEN DE NOSOTROS */

/*LO QUE DICEN DE NOSOTROS*/
.seccion-horizontal .titulo-seccion{
  font-size: 44px;
  padding-top: 20px;
  font-weight: bold;
}
/*FIN LO QUE DICEN DE NOSOTROS *//*LO QUE DICEN DE NOSOTROS*/

/*FORMULARIO*/
.seccion-formulario .centrar.texto-corinto{
  font-size: 44px;
  padding-top: 20px;
  font-weight: bold;
}

input::placeholder{
  color: var(--color-gris);
}

/*FIN FORMULARIO */

/*CONTACTO*/
.seccion-contacto {
  padding: 20px 20px;
  background-color: var(--color-fondo);
}

.contenedor-contacto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
  flex-wrap: wrap;
}

/* Información de contacto */
.info-contacto {
  flex: 1;
  min-width: 280px;
}

.info-contacto h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--color-primario);
}

.info-contacto ul {
  list-style: none;
  padding: 0;
}

.info-contacto li {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #444;
}

.info-contacto a {
  color: var(--color-primario);
  text-decoration: none;
}

.info-contacto a:hover {
  text-decoration: underline;
}

/* Imagen del lado derecho (70% del espacio) */
.imagen-contacto {
  flex: 2;
  min-width: 300px;
  text-align: center;
}

.imagen-contacto img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.info-contacto ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: #444;
}

.info-contacto li i {
  color: var(--color-primario);
  font-size: 1.2rem;
  width: 20px;
}


/*Botón de contacto flotante*/

/* Contenedor del botón flotante */
.contacto-flotante {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 130px;
  margin-left: auto;
  margin-right: 40px;
  margin-top: 30px;
}

/* Círculo verde con el ícono */
.circulo-icono {
  background-color: #6BC06D; /* Verde como en la imagen */
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Texto rectangular debajo */
.etiqueta-contacto {
  background-color: #4e9a52; /* Verde más oscuro */
  color: var(--color-blanco);
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 6px;
  margin-top: -10px;
  font-size: 14px;
}

#texto-etiqueta-contacto{
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-decoration: none;
  z-index: 999;
}
/* Efecto hover (opcional) */
.contacto-flotante:hover{
  transform: scale(1.05); /* Ligero zoom al pasar el mouse */
}

/*Fin de botón de contacto flotante*/


/*reCaptcha*/
.g-recaptcha div{
  margin: auto;
}
/*Fin reCaptcha*/

/* Responsive */
@media (max-width: 768px) {
  .hero-content .marcaCorinta{
    font-size: 1.3rem;
  }

  .circle{
    display: none;
  }

  .hero-content h1 {
    font-size: 1.8rem;
    margin-top: 0;
  }
  .hero-content p {
    font-size: 1rem;
  }

  .contenedor-contacto {
    flex-direction: column;
  }

  .info-contacto,
  .imagen-contacto {
    width: 100%;
  }

  .hero-container{
    padding: 0;
  }
  .hero-content{
    width: 100%;
    text-align: center;
    padding: 20px;
  }
  .hero-section{
    padding: 10px;
  }
  h2{
    font-size: 1em;
  }

  .contacto-flotante {
    margin-right: 0px;
  }

  .imagen-logo img{
    width: 200px;
  }

  .item-onlineSchool h3,
  .item-sigoEstudiando h3,
  .item-tecnicos h3,
  .item-preUniversitario h3 {
    font-size: 25px;
    margin: 0;
  }

  .contador {
    margin-top: 50px;
  }
  .contador h2{
    font-size: 1.5rem;
  }

  .item-onlineSchool .contenido,
  .item-tecnicos .contenido {
    align-items: center;
  }
  .item-sigoEstudiando .contenido,
  .item-preUniversitario .contenido {
    align-items: center;
  }
  
}