/* ==========================================================================
   Aula Viva — hoja de estilos única
   --------------------------------------------------------------------------
   Organización:
     1. Variables y base
     2. Utilidades de composición
     3. Encabezado y navegación
     4. Componentes reutilizables
     5. Secciones específicas
     6. Formularios
     7. Prototipo (paneles)
     8. Pie de página
     9. Adaptaciones a pantallas grandes
   ========================================================================== */

/* ------------------------------- 1. Variables ---------------------------- */

:root {
  /* Paleta institucional. No modificar sin aprobación de marca. */
  --fondo:      #FAFAF8;
  --primario:   #3C3489;
  --acento:     #7F77DD;
  --texto:      #2C2C2A;
  --borde:      #D3D1C7;
  --exito:      #1D9E75;

  /* Derivados: se calculan a partir de la paleta, no son colores nuevos. */
  --texto-suave: #5E5E58;
  --primario-tenue: #F0EFF9;
  --exito-tenue: #ECF7F3;
  --superficie: #FFFFFF;

  /* Tipografía del sistema: cero descargas, cero espera en conexiones lentas.
     La serie con serifa da el tono institucional; la sans, la lectura. */
  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --radio: 10px;
  --radio-sm: 6px;
  --ancho: 1120px;
  --canal: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;          /* por encima del mínimo de 16 px exigido */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  color: var(--texto);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.1rem; max-width: 68ch; }

a { color: var(--primario); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acento); }

/* Foco siempre visible: requisito de accesibilidad, no un detalle estético. */
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
  border-radius: 3px;
}

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

/* Enlace para saltar al contenido, visible solo al tabular. */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primario);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.salto:focus { left: 0; }

/* ---------------------------- 2. Composición ----------------------------- */

.contenedor {
  width: min(100% - (var(--canal) * 2), var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); }
.seccion--blanca { background: var(--superficie); border-block: 1px solid var(--borde); }

.cabecera-seccion { max-width: 62ch; margin-bottom: 2.5rem; }
.cabecera-seccion p { color: var(--texto-suave); font-size: 1.06rem; margin-bottom: 0; }

/* Etiqueta superior de sección. Nombra el contenido, no lo decora. */
.rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.9rem;
}

.rejilla { display: grid; gap: 1.5rem; }

/* ------------------------- 3. Encabezado y menú -------------------------- */

.sitio-encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--texto);
  text-decoration: none;
}
.marca:hover { color: var(--texto); }
.marca__signo {
  width: 30px; height: 30px;
  border: 1.5px solid var(--primario);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--primario);
  flex-shrink: 0;
}

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: 0.92rem;
  color: var(--texto);
  cursor: pointer;
}

.menu { display: none; }
.menu[data-abierto="true"] {
  display: block;
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: 1rem var(--canal) 1.5rem;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li + li { border-top: 1px solid var(--borde); }
.menu a {
  display: block;
  padding: 0.85rem 0;
  text-decoration: none;
  color: var(--texto);
  font-size: 1.02rem;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--primario); }
.menu .boton { margin-top: 1rem; width: 100%; justify-content: center; }

/* ---------------------------- 4. Componentes ----------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.boton--principal { background: var(--primario); color: #fff; }
.boton--principal:hover { background: var(--acento); color: #fff; }
.boton--secundario { background: transparent; color: var(--primario); border-color: var(--borde); }
.boton--secundario:hover { border-color: var(--acento); color: var(--acento); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.6rem;
}
.tarjeta h3 { margin-bottom: 0.5rem; }
.tarjeta p:last-child { margin-bottom: 0; }

.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
  max-width: 60ch;
}
.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border: 1.5px solid var(--acento);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* La ficha de código: el objeto central del producto.
   Un docente crea una clase, la clase recibe un código, el código se comparte.
   Ese código aparece en el sitio con la misma forma en todos lados. */
.codigo {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  padding: 0.35rem 0.7rem;
  border: 1px dashed var(--acento);
  border-radius: var(--radio-sm);
  background: var(--primario-tenue);
  color: var(--primario);
  white-space: nowrap;
}

/* Marcador de contenido faltante. Deliberadamente visible: nada de datos
   inventados. Cada uno de estos debe resolverse antes de publicar. */
.pendiente {
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 9px,
    rgba(211, 209, 199, 0.22) 9px, rgba(211, 209, 199, 0.22) 18px
  );
  color: var(--texto-suave);
  font-size: 0.92rem;
}
.pendiente::before {
  content: "Pendiente";
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.5rem;
}
.pendiente p:last-child { margin-bottom: 0; }
.pendiente--foto { min-height: 220px; display: grid; align-content: center; }

.aviso {
  border-left: 3px solid var(--acento);
  background: var(--primario-tenue);
  padding: 1.1rem 1.3rem;
  border-radius: 0 var(--radio-sm) var(--radio-sm) 0;
  font-size: 0.96rem;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso--revision { border-left-color: var(--exito); background: var(--exito-tenue); }

/* ------------------------- 5. Secciones concretas ------------------------ */

/* --- Portada --- */

.portada { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.portada__texto { max-width: 40ch; }
.portada h1 { margin-bottom: 1rem; }
.portada__bajada {
  font-size: 1.15rem;
  color: var(--texto-suave);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Elemento distintivo: la ficha de una clase real y sus treinta recorridos.
   Comunica de un vistazo la promesa entera del producto. */
.ficha {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.6rem;
  margin-top: 3rem;
  max-width: 420px;
}
.ficha__rotulo {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.ficha__titulo { font-family: var(--serif); font-size: 1.5rem; margin: 0.35rem 0 0.2rem; }
.ficha__meta { font-size: 0.92rem; color: var(--texto-suave); margin-bottom: 1.2rem; }
.ficha__codigo { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.ficha__codigo span { font-size: 0.9rem; color: var(--texto-suave); }
.ficha__separador { border: 0; border-top: 1px solid var(--borde); margin: 1.4rem 0 1.1rem; }

.recorridos { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 0.9rem; }
/* Treinta marcas: un estudiante cada una. Alturas distintas porque cada
   conversación toma un camino distinto. */
.recorridos i {
  display: block;
  width: 4px;
  background: var(--acento);
  border-radius: 2px;
  opacity: 0.75;
}
.ficha__pie { font-size: 0.92rem; color: var(--texto-suave); margin: 0; }

/* --- Pasos --- */

.pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.paso {
  counter-increment: paso;
  border-top: 2px solid var(--primario);
  padding-top: 1.2rem;
}
.paso::before {
  content: "Paso " counter(paso);
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 0.7rem;
}
.paso h3 { margin-bottom: 0.45rem; }
.paso p { font-size: 0.98rem; color: var(--texto-suave); margin-bottom: 0.9rem; }
.paso__icono { color: var(--primario); margin-bottom: 1rem; }

/* --- Pestañas de beneficios --- */

.pestanas {
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 2rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.8rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--texto-suave);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}
.pestana[aria-selected="true"] { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }
.panel[hidden] { display: none; }
.panel h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; }

/* --- Seguridad --- */

.seccion--seguridad { background: var(--exito-tenue); border-block: 1px solid var(--borde); }
.seccion--seguridad .rotulo { color: var(--exito); }
.garantia { display: flex; gap: 0.9rem; align-items: flex-start; }
.garantia svg { color: var(--exito); flex-shrink: 0; margin-top: 0.2rem; }
.garantia h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.garantia p { font-size: 0.95rem; color: var(--texto-suave); margin: 0; }

/* --- Preguntas --- */

.preguntas { max-width: 52rem; }
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--acento);
  line-height: 1;
  flex-shrink: 0;
}
.pregunta[open] summary::after { content: "\2212"; }
.pregunta__cuerpo { padding-bottom: 1.3rem; }
.pregunta__cuerpo p { color: var(--texto-suave); margin-bottom: 0.8rem; }
.pregunta__cuerpo p:last-child { margin-bottom: 0; }

/* --- Tablas de contenido legal --- */

.tabla { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin-bottom: 1.5rem; }
.tabla th, .tabla td { text-align: left; padding: 0.85rem 0.9rem; border: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--primario-tenue); font-weight: 600; }
.tabla caption { text-align: left; color: var(--texto-suave); font-size: 0.9rem; padding-bottom: 0.6rem; }

.indice { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.indice li { border-bottom: 1px solid var(--borde); }
.indice a { display: block; padding: 0.7rem 0; text-decoration: none; }

/* ----------------------------- 6. Formularios ---------------------------- */

.formulario { max-width: 640px; }
.campo { margin-bottom: 1.2rem; }
.campo label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.35rem; }
.campo .ayuda { display: block; font-weight: 400; font-size: 0.88rem; color: var(--texto-suave); margin-bottom: 0.4rem; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 16px;              /* evita el zoom automático en iOS */
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--acento); }
.pareja { display: grid; gap: 1.2rem; }

.respuesta-formulario {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radio-sm);
  background: var(--exito-tenue);
  border-left: 3px solid var(--exito);
  font-size: 0.95rem;
}
.respuesta-formulario[hidden] { display: none; }

/* ------------------------------ 7. Prototipo ----------------------------- */

.cinta-prototipo {
  background: var(--primario);
  color: #fff;
  font-size: 0.88rem;
  padding: 0.6rem 0;
  text-align: center;
}
.cinta-prototipo a { color: #fff; }

/* ------------------------------- 8. Pie ---------------------------------- */

.sitio-pie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-block: 3rem 2rem;
  font-size: 0.94rem;
}
.sitio-pie h4 { margin-bottom: 0.8rem; }
.sitio-pie ul { list-style: none; margin: 0; padding: 0; }
.sitio-pie li { margin-bottom: 0.5rem; }
.sitio-pie a { text-decoration: none; color: var(--texto-suave); }
.sitio-pie a:hover { color: var(--primario); }
.sitio-pie__legal {
  border-top: 1px solid var(--borde);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  color: var(--texto-suave);
  font-size: 0.88rem;
}

/* ------------------------ 9. Pantallas más anchas ------------------------ */

@media (min-width: 640px) {
  .pareja { grid-template-columns: 1fr 1fr; }
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

@media (min-width: 900px) {
  :root { --canal: 2.5rem; }

  .menu-boton { display: none; }
  .menu { display: block; }
  .menu ul { display: flex; align-items: center; gap: 1.75rem; }
  .menu li + li { border-top: 0; }
  .menu a { padding: 0; font-size: 0.97rem; }
  .menu .boton { margin-top: 0; width: auto; padding: 0.6rem 1.1rem; font-size: 0.94rem; }

  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }

  .portada__interior {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.5rem;
    align-items: center;
  }
  .ficha { margin-top: 0; max-width: none; }

  .sitio-pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
}

@media (min-width: 1100px) {
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}