/* --------------------
   VARIABLES
-------------------- */
:root {
  --azul-oscuro: #0a2342;
  --azul: #1a3c6e;
  --azul-claro: #f0f4f9;
  --dorado: #c7a040;
  --blanco: #ffffff;
  --gris: #f8f9fa;
  --gris-claro: #f0f4f9;
  --gris-oscuro: #555555;
  --texto: #333333;

  --fuente-titulos: "Montserrat", sans-serif;
  --fuente-texto: "Open Sans", sans-serif;
}

/* --------------------
   RESETEO
-------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--fuente-texto);
  color: var(--texto);
  line-height: 1.6;
  margin: 0;
  background: linear-gradient(
               rgba(0, 0, 0, 0.705), 
               rgba(0, 0, 0, 0.473)
              ),
             url("../img/azulline.jpg") center/cover no-repeat;
  background-attachment: fixed; /* efecto parallax */
}

/* --------------------
   SECCIONES GENERALES
-------------------- */
section {
  background: none;
  margin: 100px auto;
  padding: 4rem 2.5rem;
}

section:nth-child(odd) {
  background: rgba(242, 208, 145, 0.15);
}

h2 {
  text-align: center;
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--azul);
}

h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: var(--azul-oscuro);
}

/* --------------------
   HEADER
-------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--azul-oscuro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3rem;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

header .logo img {
  height: 50px;
  transform: scale(1.7); /* agranda la imagen un 20% */
  transform-origin: center; /* se centra el escalado */
}

header .nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dorado);
  margin-left: 1rem;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 1.5rem;
}

nav ul li a {
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s, transform 0.2s;
}

nav ul li a:hover {
  color: var(--dorado);
  transform: scale(1.05);
}

/* --------------------
   HERO
-------------------- */
.hero {
  width: 100%;                /* ocupa todo el ancho */
  min-height: 100vh;          /* ocupa toda la altura de la ventana */
  margin: 15px auto;                  /* elimina márgenes del section */
  border-radius: 0;           /* quita bordes redondeados */
  max-width: none;            /* quita límite de ancho */
  background: linear-gradient(
               rgba(0, 0, 0, 0.705), 
               rgba(0, 0, 0, 0.473)
             ),
             url("../img/3.jpg") center/cover no-repeat;
  color: #fff;
  display: flex;              /* centra contenido */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem;
}


.hero-content {
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-sub {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: #f2f2f2;
}

.hero-btn {
  background: var(--dorado);
  color: var(--azul-oscuro);
  padding: 0.9rem 1.8rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero-btn:hover {
  background: var(--azul);
  color: #fff;
}

/* --------------------
   QUIÉNES SOMOS
-------------------- */
.caja {
  max-width: 900px;
  margin: 15px auto;
  color: white;
  text-align: center;
  padding: 6rem 2rem;
  padding: 2rem;
  text-align: center;
}
.caja p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.caja h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--dorado);
}


.button {
  background: var(--azul);
  border-radius: 80px;
  box-shadow:
    inset 0px -6px 18px -6px var(--azul-oscuro),
    inset var(--dorado) -1px -1px 6px 0px,
    inset 12px 0px 12px -6px var(--azul-oscuro),
    inset -12px 0px 12px -6px var(--azul-oscuro),
    var(--dorado) -1px -1px 6px 0px;
  border: #0a2342;
  cursor: pointer;
  font-size: 13px;
  padding: 0.7em 1.7em;
  outline: none;
  transition: all 0.3s;
  user-select: none;
}

.button:hover {
  box-shadow:
    inset 0px -6px 18px -6px var(--azul),
    inset 0px 6px 18px -6px var(--azul),
    inset 12px 0px 12px -6px var(--azul),
    inset -12px 0px 12px -6px var(--azul),
    -1px -1px 6px 0px rgba(54, 69, 75, 1);
}

.button:active {
  box-shadow:
    inset 0px -12px 12px -6px var(--azul),
    inset 0px 12px 12px -6px var(--azul),
    inset 12px 0px 12px -6px var(--azul),
    inset -12px 0px 12px -6px var(--azul),
    -1px -1px 6px 0px rgba(54, 69, 75, 1);
}

.text {
  color: var(--dorado);
  font-weight: 700;
  margin: auto;
  transition: all 0.3s;
  width: fit-content;
}

.button:hover .text {
  transform: scale(0.9);
}

.button:active .text {
  transform: scale(0.8);
}


/* --------------------
   LENGUAJE
-------------------- */
.lenguaje-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.lenguaje-item {
  background: var(--blanco);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

.lenguaje-item:hover {
  transform: translateY(-6px);
}

.lenguaje-item i {
  font-size: 2rem;
  color: var(--dorado);
  margin-bottom: 1rem;
}

/* --------------------
   MISIÓN & VISIÓN
-------------------- */
#mision {
  text-align: center;
  margin-bottom: 3rem;
}

#mision h2 {
  font-size: 2rem;
  color: var(--dorado);
  margin-bottom: 2rem;
}

.contenedor-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.mision, .vision {
  flex: 1 1 350px;
  background: var(--blanco);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mision h3, .vision h3 {
  color: var(--dorado);
}

/* --------------------
   SERVICIOS
-------------------- */
#servicios .servicio {
  background:linear-gradient(
               rgba(0, 0, 0, 0.705), 
               rgba(0, 0, 0, 0.473)
              ),;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

#servicios .servicio:hover {
  transform: translateY(-8px);
}

#servicios img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.servicio-texto {
  padding: 1.5rem;
  color: var(--blanco);
}
.servicio-texto h3 {
  color: var(--dorado);
}

.servicio-texto ul {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.servicio-texto ul li {
  margin-bottom: 0.6rem;
  position: relative;
  padding-left: 1.2rem;
}

.servicio-texto ul li::before {
  content: "✔";
  color: var(--dorado);
  position: absolute;
  left: 0;
}
.servicios-intro {
  max-width: 800px;
  margin: 15px auto;
  text-align: center;
  color: var(--blanco);
}
.swiper{
  padding: 2rem 0;
  max-width: 1100px;
  margin: 15px auto;
}

.swiper-button-prev, .swiper-button-next {
  color: var(--azul);
}

.swiper-pagination-bullet-active {
  background: var(--dorado);
}

/* --------------------
   CASOS DE ÉXITO
-------------------- */
#casos-exito {
  padding: 3rem 2rem;
  background: var(--gris-claro);
  text-align: center;
}

.casos-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.caso {
  background: var(--blanco);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.caso:hover {
  transform: translateY(-6px);
}

.caso i {
  font-size: 2rem;
  color: var(--dorado);
  margin-bottom: 1rem;
}

.testimonio {
  display: block;
  font-style: italic;
  font-weight: 600;
  color: var(--azul-oscuro);
}

/* --------------------
   FORMULARIO CONTACTO
-------------------- */
.contacto-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.contacto-card {
  flex: 1 1 450px;
  background: var(--blanco);
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.contacto-card h2 {
  color: var(--azul-oscuro);
  margin-bottom: 1.5rem;
}

.formulario-contacto .campo {
  margin-bottom: 1rem;
}

.formulario-contacto input,
.formulario-contacto textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: var(--fuente-texto);
}

.formulario-contacto input:focus,
.formulario-contacto textarea:focus {
  outline: none;
  border-color: var(--azul);
}

.formulario-contacto .btn {
  background: var(--azul);
  color: var(--blanco);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 30px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.formulario-contacto .btn:hover {
  background: var(--dorado);
  color: var(--azul-oscuro);
}

.contacto-imagen img {
  max-width: 450px;
  border-radius: 16px;
}
.btn-casos {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* --------------------
   CONTACTO
-------------------- */
#contacto {
  background: var(--gris-oscuro);
  color: var(--blanco);
  text-align: center;
  padding: 3rem 1rem;
}

.contacto-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  margin-top: 2rem;
}

.contacto-item {
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contacto-item i {
  font-size: 1.5rem;
  color: var(--dorado);
  margin-bottom: 0.5rem;
  display: block;
}

.contacto-item a {
  color: var(--blanco);
  text-decoration: none;
  transition: color 0.3s;
}

.contacto-item a:hover {
  color: var(--dorado);
}

/* --------------------
   FOOTER
-------------------- */
footer {
  background: var(--azul-oscuro);
  color: var(--blanco);
  padding: 3rem 2rem;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

footer h3, footer h4 {
  color: var(--dorado);
  margin-bottom: 1rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links a {
  color: var(--blanco);
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--dorado);
}

.footer-redes img {
  max-width: 120px;
  border-radius: 8px;
}

/* --------------------
   RESPONSIVE
-------------------- */
@media (max-width: 768px) {
  header {
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
  }

  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
  }

  .hero-title {
    font-size: 2rem;
  }

  .contacto-wrapper {
    flex-direction: column;
  }

  .contacto-imagen img {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 1.5rem;
  }
  .hero-title {
    font-size: 1.6rem;
  }
  section {
    padding: 2rem 1rem;
    margin: 50px auto;
  }
}

