/* ==========================================================================
   HOJA DE ESTILOS — styles.css
   ==========================================================================
   NOTA IMPORTANTE SOBRE LOS COLORES:
   Los colores de la web se controlan desde js/data.js (bloque "colores").
   Ese archivo aplica los colores automáticamente mediante JavaScript, así
   que NO necesitas tocar este CSS para cambiar la paleta.
   Los valores por defecto de aquí abajo solo se usan como respaldo por si
   JavaScript no llegara a cargar.
   ========================================================================== */

:root {
  --color-primario: #2563eb;
  --color-primario-oscuro: #1d4ed8;
  --color-secundario: #f59e0b;
  --color-texto: #1f2937;
  --color-texto-secundario: #4b5563;
  --color-fondo: #ffffff;
  --color-fondo-alterno: #f8fafc;

  --fuente-titulos: "Poppins", "Segoe UI", sans-serif;
  --fuente-texto: "Inter", "Segoe UI", sans-serif;

  --radio-borde: 14px;
  --sombra: 0 10px 30px rgba(15, 23, 42, 0.08);
  --transicion: 0.25s ease;
}

/* ============================== RESET BÁSICO ============================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background-color: var(--color-fondo);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

ul { list-style: none; margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--fuente-titulos); line-height: 1.25; margin: 0; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-texto);
}

.section-title--center { text-align: center; }

.section-subtitle {
  text-align: center;
  color: var(--color-texto-secundario);
  max-width: 560px;
  margin: 0 auto 40px;
}

/* ============================== BOTONES ============================== */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--fuente-titulos);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background-color var(--transicion), color var(--transicion);
  text-align: center;
}

.btn--primary {
  background-color: var(--color-primario);
  color: #fff;
}

.btn--primary:hover {
  background-color: var(--color-primario-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.btn--secondary {
  background-color: #25d366;
  color: #fff;
}

.btn--secondary:hover {
  background-color: #1ebc59;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--color-primario);
  color: var(--color-primario);
}

.btn--outline:hover {
  background-color: var(--color-primario);
  color: #fff;
}

.btn--block { width: 100%; }

/* ============================== CABECERA / MENÚ ============================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Nota: se evita "backdrop-filter" aquí porque crea un contexto de
     posicionamiento que rompe el menú móvil de pantalla completa (el
     elemento .nav, con position:fixed, quedaría "atrapado" dentro del
     header en lugar de cubrir toda la pantalla). */
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primario);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nav__link {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-texto-secundario);
  transition: color var(--transicion);
}

.nav__link:hover { color: var(--color-primario); }

.nav__cta {
  background-color: var(--color-primario);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 999px;
}

.nav__cta:hover { background-color: var(--color-primario-oscuro); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background-color: var(--color-texto);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}

/* ============================== HERO ============================== */
.hero {
  padding: 90px 0 70px;
  background: linear-gradient(180deg, var(--color-fondo-alterno) 0%, var(--color-fondo) 100%);
}

.hero__inner {
  max-width: 820px;
  text-align: center;
}

.hero__nombre {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
}

.hero__profesion {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--color-primario);
  font-weight: 600;
  margin-top: 14px;
}

.hero__frase {
  color: var(--color-texto-secundario);
  font-size: 1.05rem;
  margin: 18px auto 0;
  max-width: 600px;
}

.hero__credenciales {
  color: var(--color-texto-secundario);
  font-size: 0.9rem;
  margin: 18px auto 32px;
  max-width: 640px;
}

.hero__botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================== SOBRE MÍ ============================== */
.about { padding: 80px 0; }

.about__inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  align-items: start;
}

.about__foto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* La foto es apaisada y el profesor aparece en el lado derecho del
     encuadre; se desplaza el recorte hacia la derecha para que no quede
     cortado por el recorte cuadrado. Ajusta este porcentaje si cambias la foto. */
  object-position: 80% center;
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra);
}

.about__nombre {
  color: var(--color-primario);
  font-size: 1.2rem;
  margin-bottom: 16px;
}

.about__texto p {
  color: var(--color-texto-secundario);
  font-size: 1.02rem;
}

/* ============================== PREPARACIÓN (acordeón) ============================== */
.preparation { padding: 80px 0; background-color: var(--color-fondo-alterno); }

.preparation__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}

.preparation-card {
  background-color: var(--color-fondo);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra);
  padding: 6px 24px;
}

.preparation-card__resumen {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  cursor: pointer;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.05rem;
}

.preparation-card__resumen::-webkit-details-marker { display: none; }

.preparation-card__resumen::after {
  content: "+";
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--color-primario);
  transition: transform var(--transicion);
}

.preparation-card[open] .preparation-card__resumen::after {
  transform: rotate(45deg);
}

.preparation-card__icono { color: var(--color-primario); }

.preparation-card__contenido {
  padding: 0 0 22px;
  color: var(--color-texto-secundario);
}

.preparation-card__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 16px;
  margin: 12px 0;
}

.preparation-card__lista li {
  padding-left: 18px;
  position: relative;
  font-size: 0.95rem;
}

.preparation-card__lista li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--color-primario);
}

.preparation-card__cierre {
  font-style: italic;
  margin-top: 8px;
}

/* ============================== CÓMO SON LAS CLASES ============================== */
.classes-info { padding: 70px 0; }

.classes-info__inner { max-width: 760px; margin: 0 auto; text-align: center; }

.classes-info__texto p { color: var(--color-texto-secundario); }

/* ============================== MODALIDADES ============================== */
.modalities { padding: 80px 0; background-color: var(--color-fondo-alterno); }

.modalities__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.modality-card {
  background-color: var(--color-fondo);
  border-radius: var(--radio-borde);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--sombra);
  transition: transform var(--transicion);
}

.modality-card:hover { transform: translateY(-4px); }

.modality-card__icono { font-size: 2.2rem; margin-bottom: 12px; }

.modality-card__titulo {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  margin-bottom: 8px;
}

.modality-card__desc { color: var(--color-texto-secundario); font-size: 0.95rem; }

.modalities__nota {
  text-align: center;
  color: var(--color-texto-secundario);
  font-style: italic;
  margin-top: 28px;
}

/* ============================== POR QUÉ ELEGIRME ============================== */
.why { padding: 80px 0; }

.why__checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 32px;
  max-width: 900px;
  margin: 0 auto;
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
}

.why-item__icono { flex-shrink: 0; }

.why__logro {
  text-align: center;
  margin-top: 36px;
  padding: 18px 24px;
  background-color: var(--color-fondo-alterno);
  border-left: 4px solid var(--color-primario);
  border-radius: 10px;
  font-weight: 600;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================== FAQ ============================== */
.faq { padding: 80px 0; background-color: var(--color-fondo-alterno); }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background-color: var(--color-fondo);
  border-radius: var(--radio-borde);
  padding: 4px 24px;
  box-shadow: var(--sombra);
}

.faq-item__pregunta {
  list-style: none;
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.faq-item__pregunta::-webkit-details-marker { display: none; }

.faq-item__pregunta::after {
  content: "+";
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--color-primario);
  transition: transform var(--transicion);
}

.faq-item[open] .faq-item__pregunta::after { transform: rotate(45deg); }

.faq-item__respuesta {
  color: var(--color-texto-secundario);
  padding-bottom: 18px;
}

/* ============================== CONTACTO ============================== */
.contact { padding: 80px 0; background-color: var(--color-fondo-alterno); }

.contact__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.contact__logo {
  max-width: 220px;
  width: 100%;
  height: auto;
  margin: 0 auto 28px;
}

.contact__intro { color: var(--color-texto-secundario); margin: 12px 0 28px; }

.contact__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.contact__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.contact__list a:hover { color: var(--color-primario); }

/* Solo el <li> de la dirección pasa a columna, para poder colocar el mapa
   justo debajo sin afectar al resto de elementos de la lista de contacto. */
.contact__list li.contact__list-item--direccion {
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

/* Mapa pequeño y responsive bajo la dirección: todo el bloque es un único
   enlace que abre la ficha de Google Maps en una pestaña nueva (el iframe
   es solo visual, "pointer-events: none" deja pasar el clic al enlace). */
.contact__map {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  border-radius: var(--radio-borde);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion);
}

.contact__map:hover { transform: translateY(-2px); }

.contact__map iframe {
  display: block;
  width: 100%;
  height: 160px;
  border: 0;
  pointer-events: none;
}

.contact__map-label {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: var(--color-primario);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

.contact__horario {
  margin-bottom: 32px;
}

.contact__horario-titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primario);
  margin-bottom: 10px;
}

.contact__horario-lista li {
  color: var(--color-texto-secundario);
  font-size: 0.95rem;
  padding: 4px 0;
}

.contact__botones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================== FOOTER ============================== */
.footer {
  background-color: var(--color-texto);
  color: #e5e7eb;
  padding: 48px 0;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.footer__nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.1rem; color: #fff; }

.footer__contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  font-size: 0.92rem;
}

.footer__contacto a:hover { color: var(--color-secundario); }

.footer__social {
  display: flex;
  gap: 18px;
}

.footer__social a {
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 16px;
  border-radius: 999px;
  transition: background-color var(--transicion), border-color var(--transicion);
}

.footer__social a:hover {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}

.footer__copy { font-size: 0.85rem; color: #9ca3af; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 860px) {
  .about__inner { grid-template-columns: 1fr; }
  .about__foto { max-width: 240px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .nav { position: fixed; inset: 72px 0 0 0; background-color: var(--color-fondo); transform: translateX(100%); transition: transform var(--transicion); overflow-y: auto; }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 20px; }
  .nav-toggle { display: flex; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}