/* 1. VARIABLES Y CONFIGURACIÓN
------------------------------------------------- */
:root {
  /* Colores */
  --color-white_1: #f0f0f0; 
  --color-white_2: #FCFCFC;
  --color-white_3: #F6F7F9;
  --color-black_1: #020303;
  --color-black_2: #16191D;
  --color-black_3: #2E3338;
  --color-grey_0: #E5E6E7;
  --color-gold: #EBDABA;
  --color-green: #2ECC71;
  --color-blue: #6F96B2;
  --color-red: #E84920;

  /* Variables de colores light */
  --color-light-primary: var(--color-white_1);
  --color-light-secondary: var(--color-white_2);
  --color-light-tertiary: var(--color-white_3);
  
  /* Variables de colores dark */
  --color-dark-primary: var(--color-black_1);
  --color-dark-secondary: var(--color-black_2);
  --color-dark-tertiary: var(--color-black_3);
  
  /* Variables de colores de interacción */
  --color-accent: var(--color-gold);
  --color-success: var(--color-green);
  --color-info: var(--color-blue);
  --color-error: var(--color-red);
  --color-text-inverted: var(--color-grey_0);

  --color-background: var(--color-white);
  
  /* Sistema Tipográfico ----------------------- */
  /* Familia tipográfica */
  --font-primary: "Ubuntu";
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Escala tipográfica */
  --text-xs: 0.625rem;     /* 10px */
  --text-sm: 0.75rem;      /* 12px */
  --text-helper: 0.875rem;  /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 2rem;        /* 32px */
  --text-4xl: 2.5rem;      /* 40px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 4rem;        /* 64px */

  /* Variables semánticas responsivas */
  --h1-mobile: var(--text-2xl);    /* 24px */
  --h1-tablet: var(--text-4xl);    /* 40px */
  --h1-desktop: var(--text-6xl);   /* 64px */
  
  --h2-mobile: var(--text-2xl);    /* 24px */
  --h2-tablet: var(--text-3xl);    /* 32px */
  --h2-desktop: var(--text-4xl);   /* 40px */
  
  --h3-mobile: var(--text-xl);     /* 20px */
  --h3-tablet: var(--text-2xl);    /* 24px */
  --h3-desktop: var(--text-3xl);   /* 32px */
  
  --p-mobile: var(--text-base);    /* 16px */
  --p-tablet: var(--text-lg);      /* 18px */
  --p-desktop: var(--text-xl);     /* 20px */

  /* Line heights */
  --leading-none: 1;        /* 16px  */
  --leading-tight: 1.25;    /* 20px  */
  --leading-snug: 1.375;    /* 22px  */
  --leading-normal: 1.5;    /* 24px  */
  --leading-relaxed: 1.625; /* 26px  */
  --leading-loose: 2;       /* 32px  */

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  
  /* Espaciado */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */

  /* Breakpoints */
  --breakpoint-sm: 48rem;     /* 768px  - Tablet */
  --breakpoint-md: 62rem;     /* 992px  - Desktop */
  --breakpoint-lg: 80rem;     /* 1280px - Large Desktop */
  --breakpoint-xl: 90rem;     /* 1440px - Extra Large */
  --breakpoint-xxl: 120rem;   /* 1920px - HD/4K */
}

/* 2. RESET
------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background-color: var(--color-light-tertiary);
  color: var(--color-dark-primary);
}

img {
  max-width: 100%;
  height: auto;
}

/* 3. TIPOGRAFÍA BASE
------------------------------------------------- */
h1 {
  font-size: var(--h1-mobile);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-none);
}

h2 {
  font-size: var(--h2-mobile);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-none);
}

h3 {
  font-size: var(--h3-mobile);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-none);
}

p {
  font-size: var(--p-mobile);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-none);
}

.paragraph__lora {
  font-family: Lora;
  font-size: var(--p-desktop);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug); 

  text-align: justify;
}

/* 4. BLOQUE: HEADER
------------------------------------------------- */
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
}

.header__logo {
  padding: var(--spacing-md);
}

/* menu hamburger */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: 48px;
  height: 45px;
  background-color: var(--color-light-tertiary);
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1000;
}

.line {
  width: 18px;
  height: 2px;
  background-color: var(--color-dark-primary);
  transition: transform 0.13s ease-in-out;
}

.menu-toggle.is-active {
  background-color: var(--color-dark-primary);
}

.menu-toggle.is-active .line {
  background-color: var(--color-light-tertiary);
}

.menu-toggle.is-active .line:first-child {
  transform: translateY(5px) rotate(45deg);
}

.menu-toggle.is-active .line:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-active .line:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

/* Menu */
.main-menu {
 position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Ocupa todo el ancho de la pantalla */
  height: 100vh;
  background-color: var(--color-light-primary);
  transform: translateY(-100%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 58px;
  z-index: 999;
}

.main-menu.is-active {
  transform: translateY(0);
}

.main-menu__list {
  list-style: none;
  /* padding: 0;  */
  /* margin: 0; */
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.main-menu__item {
  width: 100%; /* Cada ítem ocupa el 100% del ancho de la lista */
}

.main-menu__item, .call-to-action__link {
  /* Propiedades de Layout / Modelo de Caja */
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-md);

  /* Propiedades Visuales */
  background-color: var(--color-light-secondary);
  color: var(--color-dark-secondary);

  /* Propiedades de Texto y Fuente */
  font-size: 1rem;
  font-style: var(--font-weight-bold);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
  text-decoration: none;

  /* Propiedades de Transición */
  transition: background 0.13s;
}

.call-to-action {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

a.main-menu__item {
  display: block; /* Hace que el enlace ocupe todo el espacio del li */
}

a.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* 5. BLOQUE: HERO
------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column; /* Revertimos el orden para móviles */
  gap: var(--spacing-md);
}

.main__section {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm);
}

.hero__text {
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
}

.hero__image {
  display: flex;
  justify-content: center;
}

.hero__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero__content {
  padding: 0 var(--spacing-xs);
}

/* Formulario de contacto */
  ------------------------------------------------- */
form {
  display: flex;
  flex-direction: column;
}

fieldset {
  border: none;
}

.form__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.legend {
  color: var(--color-dark-primary);
  
  font-size: var(--h3-mobile);
  font-weight: var(--font-weight-bold);
  line-height: normal;
  letter-spacing: -0.03rem;
}

/* espacio entre legend y primer grupo */
.legend + .form-group, .legend + .checkbox__group{
  margin-top: var(--spacing-xs);
}

.form-group {
  display: flex;
  flex-direction: column;

  margin-bottom: var(--spacing-md);
}

/* Nuevas reglas CSS */
.form-group input,
.form-group textarea {
  border-style: none none solid none;
  /* border: 1px solid var(--color-dark-tertiary); */
  color: var(--color-dark-tertiary);
  transition: all 0.2s ease-in-out;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-success);
  color: var(--color-dark-primary);
  border-style: none none solid none;
  outline: none;
}

.form-group.active label {
  color: var(--color-dark-primary);
}
label {
  display: flex;
}

input {
  display: flex;
  width: 100%;
  color: var(--color-text-inverted);
  padding: var(--spacing-xs) 4px;
  border-style: none none solid none;

  font-size: var(--text-base);
}

::placeholder {
  color: var(--color-text-inverted);
}

.helper__text {
  font-size: var(--text-helper);
  color: var(--color-dark-tertiary);
}

#student__option {
  display: flex;
  input {
    width: auto;
  }
}

.checkbox__group {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-lg);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.checkbox-option input[type="checkbox"] {
  width: 16px;
  height: 16px; 
  border: 1px solid var(--color-dark-secondary);
  margin: 0;
  cursor: pointer;
}

.checkbox-option input[type="checkbox"]:checked {
  background-color: var(--color-success);
}

.checkbox-option input[type="checkbox"]:checked::after {
  background-color: var(--color-dark-tertiary);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.checkbox-option label {
  cursor: pointer;
}

textarea {
  border: none;
  padding: var(--spacing-xs);
}

.button {
  width: 100%;
  padding: var(--spacing-md);
  background-color: var(--color-light-primary);
  color: var(--color-dark-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--color-dark-primary);
  color: var(--color-light-primary);
}
.button:disabled,
.button--disabled {
    background-color: var(--color-light-primary);
    color: var(--color-light-tertiary);
    cursor: not-allowed;
}

.button:disabled:hover,
.button--disabled:hover {
    background-color: var(--color-grey_0);
    color: var(--color-dark-tertiary);
}


/* 6. BLOQUE: FOOTER
------------------------------------------------- */
.footer {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-md);
}

.footer__copyright {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* 7. MEDIA QUERIES
------------------------------------------------- */
/* Tablet (768px) */
@media (min-width: 48rem) {
  /* Reglas de tipografía responsivas */
  h1 { font-size: var(--h1-tablet); }
  h2 { font-size: var(--h2-tablet); }
  h3 { font-size: var(--h3-tablet); }
  p { font-size: var(--p-tablet); }

  /* Ajustes de bloques */
  .hero {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: var(--spacing-lg);
  }

  .header {
    justify-content: flex-start;
    padding: var(--spacing-lg);
  }

  .footer {
    padding: var(--spacing-lg);
  }
}

/* Desktop (992px) */
@media (min-width: 62rem) {
  /* Reglas de tipografía responsivas */
  h1 { font-size: var(--h1-desktop); }
  h2 { font-size: var(--h2-desktop); }
  h3 { font-size: var(--h3-desktop); }
  p { font-size: var(--p-desktop); }

  /* Ajustes de bloques */
  .hero {
    align-items: center;
    justify-content: center;
  }
  
  .hero__content {
    max-width: 270px;
    width: auto;
    padding: var(--spacing-md);
  }

  .main-menu {
    position: static;
    transform: none;
    height: auto;
    background: none;
    display: block;
  }

  .main-menu.is-active {
    transform: none;
  }

  .main-menu__list {
    flex-direction: row;
    background: none;
  }

  .main-menu__item a {
    color: var(--color-dark-primary);
  }
}