/* =========================================================================
   LIVERPOOL SCHOOL. Hoja de estilos
   -------------------------------------------------------------------------
   El HTML pone el CONTENIDO. Este archivo pone la PINTA: colores,
   tamaños, espacios y cómo se acomoda todo.

   El archivo está ordenado igual que la página, de arriba hacia abajo:
     0. Variables y bases
     1. Piezas reutilizables (contenedor, botones, títulos)
     2. Header
     3. Hero
     4. Beneficios
     5. Sobre Nosotros
     6. Footer
     7. Celular (responsive)
   ========================================================================= */


/* =========================================================================
   0. VARIABLES Y BASES
   ========================================================================= */

/* Las "variables" son colores guardados con un nombre.
   Si algún día querés cambiar el azul de toda la página,
   lo cambiás acá una sola vez y se actualiza en todos lados. */
:root {
  --azul: #0e4471;
  /* El azul del logo */
  --azul-oscuro: #0a3355;
  /* Una versión más oscura, para el footer */
  --rojo: #e63946;
  /* El rojo del logo */
  --rojo-oscuro: #c32b38;
  /* El rojo cuando pasás el mouse por encima */
  --gris-texto: #4a5568;
  /* Gris para los párrafos (más suave que el negro) */
  --gris-fondo: #f4f7fa;
  /* Gris muy clarito, para fondos de secciones */
  --blanco: #ffffff;
  --radio: 12px;
  /* Cuánto se redondean las esquinas */
  --sombra: 0 4px 20px rgba(14, 68, 113, 0.10);
}

/* El asterisco (*) significa "TODOS los elementos".
   Esto es un "reset": saca los márgenes que el navegador pone por defecto,
   así arrancamos de cero y controlamos nosotros los espacios. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Hace que el padding NO agrande las cajas */
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--gris-texto);
  line-height: 1.7;
  /* Espacio entre renglones: hace el texto más legible */
  background-color: var(--blanco);
}

/* Que las imágenes nunca se salgan de su caja.
   height:auto es la regla de oro: si el ancho se achica, el alto se achica
   en la misma proporción. Sin esto, una imagen se puede "estirar" o
   "aplastar" cuando la pantalla es chica. */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Sacamos el subrayado azul feo de todos los links */
a {
  text-decoration: none;
  color: inherit;
}

/* Cuando hacés click en un link con "#", que baje suave en vez de saltar */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* Deja lugar para el header fijo */
}


/* =========================================================================
   1. PIEZAS REUTILIZABLES
   Clases que usamos en varias secciones distintas.
   ========================================================================= */

/* .container centra el contenido y le pone un ancho máximo,
   para que en pantallas grandes el texto no quede kilométrico. */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  /* "auto" a los costados = centrado */
  padding: 0 24px;
  /* Aire a izquierda y derecha */
}

/* --- BOTONES ---
   .btn es la forma base del botón (tamaño, redondeo, etc.).
   Después le sumamos .btn--red o .btn--blue solo para el color. */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  /* 50px = totalmente redondeado, tipo pastilla */
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  /* Hace que el cambio de color sea suave */
}

.btn--red {
  background-color: var(--rojo);
  color: var(--blanco);
}

.btn--blue {
  background-color: var(--azul);
  color: var(--blanco);
}

/* Botón transparente con borde, para el CTA secundario del hero */
.btn--ghost {
  background-color: transparent;
  color: var(--blanco);
  border: 2px solid var(--blanco);
}

/* :hover = "cuando el mouse está encima".
   Lo levantamos 2px y le cambiamos el color: da sensación de que responde. */
.btn--red:hover {
  background-color: var(--rojo-oscuro);
  transform: translateY(-2px);
}

.btn--blue:hover {
  background-color: var(--azul-oscuro);
  transform: translateY(-2px);
}

.btn--ghost:hover {
  background-color: var(--blanco);
  color: var(--azul);
}

/* --- TÍTULOS DE SECCIÓN --- */

/* El "eyebrow" (cejita) es ese textito chico que va ARRIBA del título */
.section__eyebrow {
  color: var(--rojo);
  font-weight: 700;
  text-transform: uppercase;
  /* Lo pasa TODO A MAYÚSCULAS */
  letter-spacing: 2px;
  /* Separa las letras */
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.section__title {
  color: var(--azul);
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* Clase de ayuda para pintar de rojo una palabra suelta */
.text-red {
  color: var(--rojo);
}


/* =========================================================================
   2. HEADER
   ========================================================================= */

.header {
  position: sticky;
  /* Se queda pegado arriba cuando hacés scroll */
  top: 0;
  z-index: 100;
  /* Lo mantiene POR ENCIMA del resto del contenido */
  background-color: var(--blanco);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* display:flex acomoda a los hijos EN FILA (uno al lado del otro).
   justify-content: space-between los separa a los extremos. */
.header__inner {
  display: flex;
  align-items: center;
  /* Los centra verticalmente */
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__logo img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  /* IMPORTANTE: sin esto, cuando la pantalla es angosta el navegador
     "aplasta" el logo para que entre todo en la fila. El ancho baja de
     48px pero el alto se queda en 48px, y el logo sale ovalado. */
  border-radius: 10px;
  object-fit: cover;
  /* Recorta la imagen sin deformarla */
}

.header__logo-text {
  color: var(--azul);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
}

/* El eslogan del logo: chiquito y en gris */
.header__logo-text small {
  display: block;
  /* Lo manda al renglón de abajo */
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gris-texto);
}

.header__nav {
  display: flex;
  gap: 28px;
  font-weight: 600;
}

.header__nav a {
  color: var(--azul);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  /* Borde invisible... */
  transition: border-color 0.2s ease;
}

.header__nav a:hover {
  border-bottom-color: var(--rojo);
  /* ...que aparece rojo al pasar el mouse */
}

/* El botón del header, un poco más chico que los demás */
.header__cta {
  padding: 10px 22px;
  font-size: 0.9rem;
}


/* =========================================================================
   3. HERO
   ========================================================================= */

.hero {
  position: relative;
  /* Necesario para poder poner la capa oscura encima */
  min-height: 88vh;
  /* 88% del alto de la pantalla */
  display: flex;
  align-items: center;
  /* Centra el contenido verticalmente */
  color: var(--blanco);
  text-align: center;

  /* --- LA IMAGEN DE FONDO --- */
  background-image: url("Images/hero-bg.jpg");
  background-size: cover;
  /* Que cubra todo el espacio */
  background-position: center;
  /* Centrada */
  background-color: var(--azul);
  /* Color de respaldo mientras carga */
}

/* La capa oscura que va sobre la foto.
   Sin esto, el texto blanco podría no leerse. */
.hero__overlay {
  position: absolute;
  /* La estiramos para tapar todo el hero */
  inset: 0;
  /* Atajo de: top:0; right:0; bottom:0; left:0 */
  background: linear-gradient(rgba(10, 51, 85, 0.82), rgba(10, 51, 85, 0.88));
}

/* El contenido tiene que ir POR ENCIMA de la capa oscura.
   Eso se logra con position:relative + z-index. */
.hero__content {
  position: relative;
  z-index: 1;
  padding-top: 80px;
  padding-bottom: 80px;
}

.hero__badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.85rem;
  margin-bottom: 24px;
}

.hero__title {
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: 12px;
}

.hero__slogan {
  font-size: 1.3rem;
  font-style: italic;
  opacity: 0.85;
  /* Un poco transparente, para que no compita con el título */
  margin-bottom: 24px;
}

.hero__text {
  max-width: 620px;
  /* Limitamos el ancho: un párrafo muy largo cansa la vista */
  margin: 0 auto 36px;
  /* arriba 0 | costados auto (centrado) | abajo 36px */
  font-size: 1.1rem;
}

.hero__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  /* Si no entran, pasan al renglón de abajo */
}


/* =========================================================================
   4. BENEFICIOS (highlights)
   ========================================================================= */

.highlights {
  background-color: var(--gris-fondo);
  padding: 70px 0;
}

/* display:grid arma una grilla.
   "repeat(4, 1fr)" = 4 columnas del mismo ancho (1fr = una fracción igual). */
.highlights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.card {
  background-color: var(--blanco);
  padding: 32px 24px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: center;
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-6px);
  /* La tarjeta "flota" al pasar el mouse */
}

.card__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 12px;
}

.card__title {
  color: var(--azul);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.card p {
  font-size: 0.95rem;
}


/* =========================================================================
   5. SOBRE NOSOTROS
   ========================================================================= */

.about {
  padding: 90px 0;
}

/* Dos columnas: la foto (1 parte) y el texto (1.1 partes, apenas más ancho) */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

/* La foto de esta sección es un banner MUY ancho (2317 x 853 píxeles).
   Antes le poníamos un alto fijo de 380px y en el celular quedaba metida
   a la fuerza en una caja vertical: se recortaba casi todo.

   Ahora usamos aspect-ratio, que le dice al navegador
   "mantené SIEMPRE esta proporción, sea cual sea el ancho de la pantalla".
   Así el recorte es siempre el mismo y nunca queda deformada. */
.about__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* En escritorio recortamos suave, a formato foto */
  object-fit: cover;
  /* Recorta lo que sobra, sin deformar */
  object-position: center;
  /* Qué parte de la foto queda a la vista */
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* Espacio entre los párrafos del texto */
.about__text p {
  margin-bottom: 16px;
}

.about__list {
  list-style: none;
  /* Saca los puntitos por defecto */
  margin: 24px 0 32px;
}

.about__list li {
  padding-left: 32px;
  /* Deja lugar para el tilde ✓ */
  margin-bottom: 10px;
  position: relative;
}

/* ::before inserta contenido ANTES del texto del <li>.
   Así dibujamos un tilde verde sin escribirlo en el HTML. */
.about__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--rojo);
  font-weight: 700;
}


/* =========================================================================
   6. DÓNDE ESTAMOS + RESEÑAS
   ========================================================================= */

.location {
  background-color: var(--gris-fondo);
  padding: 90px 0;
}

/* Encabezado centrado (lo usamos para el título de esta sección) */
.section__header {
  text-align: center;
  margin-bottom: 48px;
}

/* Dos columnas: el mapa más ancho (1.4) que la tarjeta de datos (1) */
.location__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

/* El mapa.
   overflow:hidden hace que el iframe respete las esquinas redondeadas. */
.location__map {
  min-height: 400px;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.location__card {
  background-color: var(--blanco);
  padding: 36px 32px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.location__name {
  color: var(--azul);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

/* Cada dato del mapa: el emoji a la izquierda y el texto al lado.
   align-items:start alinea el emoji con el PRIMER renglón del texto. */
.location__row {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 0.98rem;
}

/* --- TESTIMONIOS --- */

.testimonials {
  margin-top: 64px;
}

.testimonials__title {
  color: var(--azul);
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 32px;
}

/* Tres reseñas, una al lado de la otra */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.quote {
  background-color: var(--blanco);
  padding: 28px 26px;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border-top: 4px solid var(--rojo);
  /* Una rayita roja arriba, detalle de marca */
}

.quote__stars {
  color: #f5a623;
  /* Amarillo estrella */
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.quote__text {
  font-style: italic;
  margin-bottom: 16px;
}

.quote__author {
  color: var(--azul);
  font-weight: 700;
  font-size: 0.92rem;
}

/* La fecha de la reseña: va debajo del nombre, más chica y gris */
.quote__date {
  display: block;
  color: var(--gris-texto);
  font-weight: 400;
  font-size: 0.82rem;
}

/* El link a todas las reseñas, centrado abajo de las tarjetas */
.testimonials__link {
  text-align: center;
  margin-top: 28px;
  font-weight: 600;
}

.testimonials__link a {
  color: var(--azul);
  border-bottom: 2px solid var(--rojo);
  padding-bottom: 2px;
}

.testimonials__link a:hover {
  color: var(--rojo);
}


/* =========================================================================
   7. FOOTER
   ========================================================================= */

.footer {
  background-color: var(--azul-oscuro);
  color: rgba(255, 255, 255, 0.8);
  padding-top: 60px;
}

/* Tres columnas: marca | contacto | redes */
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer__brand img {
  width: 70px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.footer__slogan {
  color: var(--blanco);
  font-style: italic;
  font-weight: 600;
}

.footer__small {
  font-size: 0.9rem;
}

.footer__title {
  color: var(--blanco);
  font-size: 1.05rem;
  margin-bottom: 16px;
}

.footer__list {
  list-style: none;
}

.footer__list li {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.footer__list a:hover {
  color: var(--blanco);
  text-decoration: underline;
}

/* La línea final del copyright, separada por un borde arriba */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 24px;
  text-align: center;
  font-size: 0.85rem;
}


/* =========================================================================
   8. RESPONSIVE: CELULARES Y TABLETS
   -------------------------------------------------------------------------
   Una "media query" dice: "aplicá estas reglas SOLO si la pantalla
   mide menos de X". Así la página se ve bien en cualquier dispositivo.
   ========================================================================= */

/* --- TABLETS (menos de 900px de ancho) --- */
@media (max-width: 900px) {

  /* Las 4 tarjetas pasan a 2 columnas */
  .highlights__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* La sección Sobre Nosotros pasa a una sola columna (foto arriba, texto abajo) */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Como ahora la foto ocupa todo el ancho, la dejamos MÁS PANORÁMICA.
     Es un banner ancho: si lo obligamos a ser cuadrado, se recorta feo.
     Con 2/1 se ve casi entero y se lee bien en el celular. */
  .about__photo img {
    aspect-ratio: 2 / 1;
  }

  /* El mapa también achica su alto: 400px en un celular es medio invasivo */
  .location__map {
    min-height: 300px;
  }

  /* El mapa queda arriba y la tarjeta de datos abajo */
  .location__grid {
    grid-template-columns: 1fr;
  }

  /* Las 3 reseñas pasan a 1 columna (así se leen cómodas) */
  .testimonials__grid {
    grid-template-columns: 1fr;
  }

  /* El footer también pasa a una sola columna */
  .footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer__brand img {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__title {
    font-size: 2.4rem;
  }
}

/* --- CELULARES (menos de 640px de ancho) --- */
@media (max-width: 640px) {

  /* En pantallas chicas escondemos el menú y el botón del header,
     así el logo entra cómodo. (Un paso siguiente sería un menú hamburguesa 🍔) */
  .header__nav,
  .header__cta {
    display: none;
  }

  /* Las tarjetas quedan una debajo de la otra */
  .highlights__grid {
    grid-template-columns: 1fr;
  }

  /* En pantallas muy angostas mostramos el banner con su proporción REAL
     (2317 x 853 = 2.72 / 1). Recorte cero: se ve la foto completa. */
  .about__photo img {
    aspect-ratio: 2.72 / 1;
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__slogan {
    font-size: 1.1rem;
  }

  .section__title {
    font-size: 1.8rem;
  }

  /* Los botones del hero ocupan todo el ancho: más fáciles de tocar con el dedo */
  .hero__buttons .btn {
    width: 100%;
  }
}