/* ═══════════════════════════════════════════════════════════════════════
   PORTADA — Unidad Educativa PCEI Britain School
   Carril del OFICIO: Bachillerato Técnico con taller.

   Decisión de diseño: deliberadamente lo contrario a la web hermana.
   Donde Albert Einstein es editorial, columna única y serif, esta es
   rejilla, densa y sans geométrica. Aquí se enseña un catálogo de
   talleres que se comparan de un vistazo, no una carta que se lee
   de corrido. Bloques con borde, numeración visible, verbos de acción.
   ═══════════════════════════════════════════════════════════════════════ */

.bs-contenedor {
  max-width: 1120px;           /* ancho de catálogo, no de lectura */
  margin: 0 auto;
  padding: 0 20px;
}

/* ─── Sobre el pliegue ─────────────────────────────────────────────── */
.bs-hero {
  padding: 116px 0 52px;
  background: var(--color-primary, #2f2b63);
  color: var(--color-white, #fff);
}

.bs-hero-texto { max-width: 680px; }

.bs-etiqueta {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 13px;
  background: var(--color-secondary, #c4161c);
  border-radius: 3px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bs-hero h1 {
  margin: 0 0 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(1.85rem, 6.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1.14;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.bs-sub { margin: 0 0 18px; font-size: 1.08rem; line-height: 1.55; color: #d6d4ea; }

.bs-prueba {
  margin: 0 0 28px;
  padding-left: 14px;
  border-left: 3px solid var(--color-accent, #f2b705);
  font-size: .9rem;
  color: #cfcde6;
}

.bs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 32px;
  background: var(--color-secondary, #c4161c);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: filter .18s ease;
}

.bs-cta:hover { filter: brightness(1.12); }
.bs-cta:focus-visible { outline: 3px solid var(--color-accent, #f2b705); outline-offset: 3px; }

.bs-micro { margin: 13px 0 0; font-size: .9rem; color: #bcb9d8; }
.bs-enlace { display: inline-block; margin-top: 16px; color: var(--color-accent, #f2b705); font-size: .94rem; }

/* ─── Franja ───────────────────────────────────────────────────────── */
.bs-franja { padding: 15px 0; background: var(--color-accent, #f2b705); color: #1f2937; }
.bs-franja p {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ─── Los datos duros, en tres columnas ────────────────────────────── */
.bs-datos { padding: 52px 0; }
.bs-datos-rejilla { display: grid; gap: 18px; }

.bs-dato {
  padding: 24px;
  background: var(--color-light, #f5f7fa);
  border-top: 4px solid var(--color-primary, #2f2b63);
  border-radius: 0 0 6px 6px;
}

.bs-dato h2 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-primary, #2f2b63);
}

.bs-dato p { margin: 0; font-size: .97rem; line-height: 1.62; color: #3b4252; }

.bs-titulo-seccion {
  margin: 0 0 26px;
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary, #2f2b63);
}

/* ─── Talleres: la rejilla que es el diferenciador del colegio ─────── */
.bs-talleres { padding: 52px 0; background: var(--color-light, #f5f7fa); }
.bs-talleres-rejilla { display: grid; gap: 20px; }

.bs-taller {
  padding: 26px;
  background: #fff;
  border: 1px solid #dfe3ec;
  border-radius: 6px;
}

.bs-taller h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary, #2f2b63);
}

.bs-taller-quien { margin: 0 0 6px; font-size: .87rem; color: #6b7280; }

.bs-taller-duracion {
  margin: 0 0 12px;
  padding: 5px 10px;
  display: inline-block;
  background: var(--color-primary, #2f2b63);
  color: #fff;
  border-radius: 3px;
  font-size: .8rem;
  font-weight: 600;
}

.bs-taller > p:last-child { margin: 0; font-size: .95rem; line-height: 1.62; color: #3b4252; }

/* ─── Perfiles ─────────────────────────────────────────────────────── */
.bs-perfiles { padding: 52px 0; }
.bs-perfiles-rejilla { display: grid; gap: 18px; }

.bs-perfil {
  padding: 24px;
  border-left: 4px solid var(--color-secondary, #c4161c);
  background: var(--color-light, #f5f7fa);
}

.bs-perfil h3 { margin: 0 0 9px; font-size: 1.02rem; line-height: 1.35; color: var(--color-primary, #2f2b63); }
.bs-perfil p { margin: 0 0 11px; font-size: .95rem; line-height: 1.6; color: #3b4252; }
.bs-perfil a { font-size: .92rem; font-weight: 700; color: var(--color-secondary, #c4161c); }

/* ─── La semana: aula y taller ─────────────────────────────────────── */
.bs-semana { padding: 52px 0; background: var(--color-primary, #2f2b63); color: #fff; }
.bs-semana h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 4.2vw, 2rem); font-weight: 700; text-transform: uppercase; }
.bs-semana > .bs-contenedor > p { max-width: 720px; font-size: 1rem; line-height: 1.65; color: #d6d4ea; }

.bs-checklist { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; max-width: 760px; }
.bs-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: .97rem;
  line-height: 1.55;
  color: #e4e3f2;
}
.bs-checklist li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: var(--color-accent, #f2b705);
  font-size: .72rem;
  top: .35em;
}

/* ─── Pasos numerados ──────────────────────────────────────────────── */
.bs-pasos { padding: 52px 0; background: var(--color-light, #f5f7fa); }
.bs-pasos-rejilla { display: grid; gap: 18px; }

.bs-paso { padding: 22px; background: #fff; border: 1px solid #dfe3ec; border-radius: 6px; }

.bs-numero {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  background: var(--color-secondary, #c4161c);
  color: #fff;
  border-radius: 3px;
  font-weight: 700;
}

.bs-paso h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.35; color: var(--color-primary, #2f2b63); }
.bs-paso p { margin: 0; font-size: .93rem; line-height: 1.58; color: #3b4252; }

/* ─── Registro ─────────────────────────────────────────────────────── */
.bs-registro { padding: 52px 0; }
.bs-registro h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 4.2vw, 2rem); font-weight: 700; text-transform: uppercase; color: var(--color-primary, #2f2b63); }
.bs-registro p { max-width: 760px; margin: 0 0 14px; font-size: 1rem; line-height: 1.66; color: #3b4252; }
.bs-comprobar { padding: 16px 18px; background: var(--color-light, #f5f7fa); border-left: 4px solid var(--color-accent, #f2b705); }

/* ─── Preguntas en rejilla ─────────────────────────────────────────── */
.bs-preguntas { padding: 52px 0; background: var(--color-light, #f5f7fa); }
.bs-preguntas-rejilla { display: grid; gap: 20px; }
.bs-pregunta h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.35; color: var(--color-primary, #2f2b63); }
.bs-pregunta p { margin: 0; font-size: .95rem; line-height: 1.62; color: #3b4252; }

/* ─── Cierre ───────────────────────────────────────────────────────── */
.bs-cierre { padding: 58px 0 68px; background: var(--color-secondary, #c4161c); color: #fff; text-align: center; }
.bs-cierre h2 { margin: 0 0 14px; font-size: clamp(1.6rem, 4.6vw, 2.2rem); font-weight: 700; text-transform: uppercase; }
.bs-cierre p { max-width: 680px; margin: 0 auto 24px; font-size: 1rem; line-height: 1.66; }
.bs-cierre .bs-cta { background: #fff; color: var(--color-secondary, #c4161c); }

/* ─── Marcadores pendientes ────────────────────────────────────────── */
.pendiente {
  background: #ffe8a3;
  color: #6b4e00;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media (min-width: 720px) {
  .bs-datos-rejilla,
  .bs-perfiles-rejilla,
  .bs-preguntas-rejilla { grid-template-columns: repeat(3, 1fr); }
  .bs-talleres-rejilla { grid-template-columns: repeat(2, 1fr); }
  .bs-pasos-rejilla { grid-template-columns: repeat(4, 1fr); }
}

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