/* ===== BRAND COLORS (from brand/Fonemenal Brand Kit.pdf) =====
   Only these colors are used on the site (plus the colors of the two
   language flags). See brand/brand-kit.md */
:root {
  /* Primary */
  --navy: #27355A;
  --sage: #A8C3A0;          /* Soft Sage */
  --yellow: #F6C453;        /* Warm Yellow */
  /* Secondary */
  --warm-white: #FAF7F0;
  --light-sage: #E3ECDF;
  --dark-navy: #1A2440;
  --light-yellow: #FDF0CF;
  /* Logo color */
  --white: #FFFFFF;
  /* NOT in the brand kit: turquoise from the Honduras flag, used only for the
     "100% Hondureño" flag and heart in the footer */
  --turquoise: #00BCE4;

  /* Layout grid (same on every page) */
  --container: 1040px;       /* max width of the page content (including side margins) */
  --page-margin: 20px;       /* space between the screen edge and the content */
  --gutter: 20px;            /* space between the 12 columns */

  --radius: 18px;
  --font-title: "Nunito", system-ui, sans-serif;
  --font-body: "Noto Sans", system-ui, sans-serif;
}

/* ===== BASICS ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-padding-top: when a link jumps to a spot on the page, it stops
   below the sticky header instead of hiding the title behind it */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (min-width: 1000px) { html { scroll-padding-top: 156px; } }   /* two-row header */

body {
  overflow-x: clip;   /* elements that grow on hover never create a sideways scroll */
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--warm-white);
}

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

/* ===== 12-COLUMN GRID =====
   Every .container is a 12-column grid with the same max width, side margins
   and gutters. Each block inside it chooses how many columns it covers.
   By default a block covers all 12 columns. */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--page-margin);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.container > * { grid-column: 1 / -1; }

/* Card groups use "subgrid": their cards sit exactly on the page's 12 columns */
.courses, .quotes, .mission-vision, .certs, .teachers, .features, .strip, .tracks, .format-blocks, .why-cards {
  display: grid;
  grid-template-columns: subgrid;
}
.course, .quote, .mv-card, .cert, .teacher, .features li, .strip li, .track, .format-block, .why-card { grid-column: 1 / -1; }

/* Narrower blocks, centered on the grid (phones: always all 12 columns)
   - wide   = 10 columns (2–11)  ≈ 830px on computers
   - medium =  8 columns (3–10)  ≈ 660px
   - narrow =  6 columns (4–9)   ≈ 490px */
@media (min-width: 700px) {
  .policy { grid-column: 2 / 12; }               /* medium: 10 columns on tablets */
  .section-intro { grid-column: 3 / 11; }        /* narrow:  8 columns on tablets */
}
@media (min-width: 1000px) {
  .about, .certs, .teachers, .format-blocks { grid-column: 2 / 12; }   /* wide */
  .faq, .policy { grid-column: 3 / 11; }                                   /* medium */
  .section-intro { grid-column: 4 / 10; }                                  /* narrow */
}

h1, h2, h3 { font-family: var(--font-title); line-height: 1.2; color: var(--dark-navy); }
h1 { font-weight: 800; }
h2 { font-weight: 700; font-size: 1.9rem; margin-bottom: 1.5rem; text-align: center; }
h3 { font-weight: 700; font-size: 1.2rem; margin-bottom: 0.4rem; }

a:focus-visible, summary:focus-visible, label:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* ===== HIDDEN SWITCH (mobile menu) ===== */
.hidden-input { position: absolute; opacity: 0; pointer-events: none; }

/* Keyboard focus on the hidden menu switch shows on the menu button */
body:has(#menu-toggle:focus-visible) .menu-btn {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* ===== HEADER (two rows, sticky) ===== */
/* Sticky: stays at the top of the screen while you scroll.
   Both rows have a fixed height, so the header is the same on every page. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--light-sage);
}

/* Row 1: logo (left) · social icons + language + menu button (right) */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 64px;
}
/* brand/logo-horizontal-light-mode.svg has empty space around the drawing
   (the drawing is 67% of the image height and starts 25% of the height in from the left).
   The heights and the small left offset keep the visible logo the same size and position
   as before: about 35px tall on phones, 42px on computers. Width stays automatic,
   so the logo is never stretched. */
.logo img {
  height: 52px;
  width: auto;
  margin-left: -11px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Small social icons (hidden on phones: they are in the footer) */
.header-social {
  display: none;
  list-style: none;
  align-items: center;
  gap: 2px;
  margin-right: -8px;   /* the last icon's glyph lines up with the container's right edge */
}
.header-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);              /* the icons use this color (currentColor) */
}
.header-social a:hover {
  background: var(--light-sage);
  color: var(--dark-navy);
}
.header-social svg { width: 18px; height: 18px; }
@media (min-width: 700px) {
  .header-social { display: flex; }
}

/* Row 2: the menu bar, Dark Navy with white text (15:1)
   (on phones and tablets it opens as a Dark Navy panel with the menu button) */
.topbar-nav { background: var(--dark-navy); }
.topbar-nav .container { display: block; }
.topbar-nav a:focus-visible,
.topbar-nav summary:focus-visible { outline-color: var(--yellow); }

/* Menu button (three lines) */
.menu-btn {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--light-sage);
  display: grid;
  place-content: center;
  gap: 5px;
}
.menu-btn span {
  display: block;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--navy);
}
body:has(#menu-toggle:checked) .menu-btn { background: var(--navy); }
body:has(#menu-toggle:checked) .menu-btn span { background: var(--white); }

/* The menu is hidden until the button is pressed */
.nav {
  display: none;
  padding: 8px 0 18px;
}
body:has(#menu-toggle:checked) .nav { display: block; }

.nav ul { list-style: none; margin-bottom: 16px; }
.nav li > a,
.nav-dropdown > summary {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--navy);   /* visible on the Dark Navy panel */
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  text-decoration: none;
}
/* The page you are on: yellow underline (Warm Yellow on Dark Navy, 9.4:1) */
.nav a[aria-current="page"],
.nav-dropdown > summary.is-current {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* "¡Escríbenos!" (WhatsApp) button in the menu bar: Dark Navy on Warm Yellow (9.4:1) */
.nav .btn {
  width: calc(100% - 24px);   /* room on both sides, so it never touches the edges when it grows */
  margin: 0 12px;
  justify-content: center;
}


/* ===== DROPDOWN ("Sobre Nosotros") ===== */
.dropdown { position: relative; }
.dropdown > summary {
  cursor: pointer;
  list-style: none;
}
.dropdown > summary::-webkit-details-marker { display: none; }
.caret {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: transform 0.2s;
}
.dropdown[open] > summary .caret { transform: rotate(180deg); }

.dropdown-panel {
  background: var(--white);
  border: 1px solid var(--light-sage);
  border-radius: 14px;
  padding: 6px;
}

/* "Sobre Nosotros" inside the phone menu: the two pages appear indented below it,
   white on the navy panel */
.nav-dropdown .dropdown-panel {
  background: transparent;
  border: 0;
  padding: 4px 0 4px 16px;
}
.nav-dropdown .dropdown-panel a {
  display: block;
  padding: 10px 8px;
  font-family: var(--font-title);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-radius: 10px;
}
.nav-dropdown .dropdown-panel a:hover { background: var(--navy); }
.nav-dropdown .dropdown-panel a[aria-current="page"] { text-decoration-color: var(--yellow); }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
}
.btn-small { padding: 10px 20px; font-size: 1rem; }

/* WhatsApp buttons: Dark Navy on Warm Yellow */
.btn-yellow {
  background: var(--yellow);
  color: var(--dark-navy);
}
.btn-yellow:hover { background: var(--light-yellow); }

/* Outline button ("Ver cursos", "Ver perfil") */
.btn-outline {
  border: 2px solid var(--navy);
  color: var(--navy);
}
.btn-outline:hover { background: var(--light-sage); }
.center-btn { text-align: center; margin-top: 32px; }

/* WhatsApp icon inside the yellow buttons (from icons/whatsapp.svg, fill="currentColor") */
.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ===== HERO (home page): navy, big headline, IPA bubbles ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  min-height: min(88vh, 680px);
  display: flex;
  align-items: center;
}
/* Dark Navy circles: a small one bottom-left, a big one behind the bubbles */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--dark-navy);
}
.hero::before {
  left: -130px;
  bottom: -130px;
  width: 300px;
  height: 300px;
}
.hero::after {
  right: -18vw;
  top: 50%;
  transform: translateY(-50%);
  width: 62vw;
  max-width: 900px;
  aspect-ratio: 1;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 72px;
  padding-bottom: 72px;
  align-items: center;
  row-gap: 24px;
}
.hero-title {
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
}
.hero-title span { display: block; color: var(--yellow); }
.hero-sub {
  margin-top: 22px;
  max-width: 34ch;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--warm-white);
}
.hero-pills {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pill {
  padding: 10px 20px;
  border-radius: 999px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}
.pill-yellow { background: var(--yellow); }
.pill-white  { background: var(--warm-white); }
.pill-sage   { background: var(--sage); }

/* "VEN Y CONOCE LOS CURSOS": yellow button with a Dark Navy edge, in uppercase */
.btn-cta {
  gap: 0.3em;   /* a normal space between "Ven" and the rest */
  margin-top: 34px;
  padding: 16px 30px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 0 var(--dark-navy);
}
.btn-cta:hover { background: var(--yellow); }

/* IPA bubbles: positions and sizes are percentages of the square box */
.bubbles {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 480px;
  justify-self: center;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* Nunito doesn't have θ, ʃ or ɪ: those come from Noto Sans (already loaded for body text).
     Google Fonts splits Noto Sans by character range, so the browser only downloads the
     IPA (latin-ext) and Greek ranges when the bubbles need them. Everything else stays Nunito. */
  font-family: "Nunito", "Noto Sans", sans-serif;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}
.bubble::before { content: ""; display: block; padding-top: 100%; grid-area: 1 / 1; }   /* keeps it round */
.bubble > i { grid-area: 1 / 1; font-style: normal; }
.b1 { width: 52%; left: 2%;  top: 18%; background: var(--warm-white);   font-size: clamp(4rem, 9vw, 7rem); }
.b2 { width: 31%; left: 47%; top: 2%;  background: var(--yellow);       font-size: clamp(2.4rem, 5vw, 4rem); }
.b3 { width: 25%; left: 75%; top: 33%; background: var(--light-yellow); font-size: clamp(2rem, 4vw, 3.2rem); }
.b4 { width: 27%; left: 48%; top: 63%; background: var(--sage);         font-size: clamp(2.2rem, 4.5vw, 3.6rem); }
.b5 { width: 22%; left: 18%; top: 72%; background: var(--light-sage);   font-size: clamp(1.8rem, 3.6vw, 3rem); }
.b6 { width: 18%; left: 79%; top: 82%; background: var(--yellow);       font-size: clamp(1.5rem, 3vw, 2.4rem); }

/* Computers and tablets (820px+): text left (7 columns), bubbles right (5 columns) */
@media (min-width: 820px) {
  .hero-text { grid-column: 1 / 8; }
  .bubbles { grid-column: 8 / -1; }
}
/* Phones (under 820px): bubbles on top and smaller, then the text, full-width button */
@media (max-width: 819px) {
  .hero { min-height: auto; }
  .hero::after { right: -35vw; top: -20vw; transform: none; width: 100vw; }
  .hero-inner { padding-top: 48px; padding-bottom: 40px; }
  .bubbles { max-width: 300px; order: -1; }
  .btn-cta { width: 100%; justify-content: center; }
}

/* Small pill label (used on the Founder page) */
.eyebrow {
  display: inline-block;
  background: var(--light-sage);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
/* Small items that should stay centered, not stretch across the grid */
.cta .btn { justify-self: center; }

/* ===== BIG SECTION TITLES (home page) ===== */
.title-xl {
  font-weight: 900;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  color: var(--navy);
}
.text-yellow { color: var(--yellow); }

/* ===== ¿POR QUÉ FONEMENAL? (home page) ===== */
.why { background: var(--warm-white); padding: 88px 0; }
.why .title-xl { margin-bottom: 0; }
.why-lead {
  justify-self: center;
  max-width: 60ch;
  margin-top: 18px;
  text-align: center;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 600;
}
.why-cards { margin-top: 52px; row-gap: 22px; }
.why-card {
  background: var(--white);
  border: 1px solid var(--light-sage);
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 8px 24px rgba(39, 53, 90, 0.08);   /* Navy, very soft */
}
.why-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-title);
  font-weight: 900;
  font-size: 1.9rem;
  color: var(--navy);
}
.why-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-icon-yellow       { background: var(--yellow); }
.why-icon-sage         { background: var(--sage); }
.why-icon-light-yellow { background: var(--light-yellow); }
.why-icon-light-sage   { background: var(--light-sage); }
.why-card h3 {
  margin-top: 18px;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--navy);
}
.why-card p { margin-top: 10px; line-height: 1.55; }
/* 4 in a row on computers, 2 × 2 on tablets, 1 per row on phones */
@media (min-width: 620px)  { .why-card { grid-column: span 6; } }
@media (min-width: 1001px) { .why-card { grid-column: span 3; } }
@media (max-width: 619px) {
  .why { padding: 56px 0; }
  .why-cards { margin-top: 36px; row-gap: 16px; }
}

/* ===== NUESTROS CURSOS (home page) ===== */
.home-courses { padding: 88px 0; }
.home-courses .title-xl { margin-bottom: 48px; }
.course-desc {
  margin-top: 14px;
  max-width: 34ch;
  align-self: center;
  text-align: center;
  line-height: 1.55;
}
/* Always at the bottom of the card, so the 3 cards line up */
.course-hours {
  margin-top: auto;
  padding-top: 18px;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.75;
}
@media (max-width: 619px) { .home-courses { padding: 56px 0; } }

/* ===== GENERAL SECTIONS ===== */
.section { padding: 64px 0; }
.section-alt { background: var(--light-sage); }
.section-intro {
  text-align: center;
  margin: -0.6rem 0 2rem;
}
/* Main title at the top of each inner page */
.page-title {
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ===== COURSES ===== */
.courses { row-gap: 20px; }
.course {
  container-type: inline-size;   /* home preview: the track title sizes itself to the card */
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--light-sage);
  border-top-width: 10px;
  border-radius: var(--radius);
  padding: 24px 16px;
}
.course-sage { border-top-color: var(--sage); }
.course-yellow { border-top-color: var(--yellow); }
.course-navy { border-top-color: var(--navy); }

.level {
  align-self: flex-start;
  background: var(--light-yellow);
  color: var(--dark-navy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.course h3 { font-size: 1.4rem; }
.who { flex-grow: 1; margin-bottom: 18px; }
.price {
  font-family: var(--font-title);
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--navy);
  padding-top: 14px;
  border-top: 1px solid var(--light-sage);
}
.price small {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
}

/* ===== NUMBERED CIRCLES (Inscripción steps) ===== */
.step-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.3rem;
  display: grid;
  place-items: center;
}

.features {
  list-style: none;
  row-gap: 12px;
  margin-top: 28px;
}
.features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
}
/* Outline icons inside a circle, like the brand kit icons */
.feature-icon,
.cert-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.feature-icon svg,
.cert-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== PLACEHOLDERS: anything in [brackets] still needs real information ===== */
mark.todo {
  background: var(--light-yellow);
  color: var(--dark-navy);
  font-weight: 600;
  padding: 0 4px;
  border-radius: 4px;
  outline: 2px dashed var(--yellow);
  outline-offset: 1px;
}

/* ===== COURSE TRACKS (Courses page + home preview) ===== */
/* Each track keeps the accent color it already had on the site:
   Inglés Básico = Soft Sage, Inglés Intermedio = Warm Yellow, Pronunciación = Navy */
.tracks { row-gap: 40px; }
.track {
  display: flex;
  flex-direction: column;
  container-type: inline-size;   /* titles size themselves to this column */
}
/* Track titles grow and shrink with their column (cqi = 1% of the column width).
   "Fundamentos de Pronunciación" is the longest (15.5 × the font size), so 5.5cqi keeps it
   on one line wherever the column allows; it never goes below 16px or above 25.6px. */
.track-title {
  align-self: center;
  display: inline-block;
  font-size: clamp(1rem, 5.5cqi, 1.6rem);
  text-align: center;
  padding: 6px 14px;
  border-radius: 18px;   /* looks like a pill on one line, a soft box if the title wraps */
  margin-bottom: 8px;
}
.track-sage .track-title   { background: var(--sage);   color: var(--dark-navy); }   /* 8.0:1 */
.track-yellow .track-title { background: var(--yellow); color: var(--dark-navy); }   /* 9.4:1 */
.track-navy .track-title   { background: var(--navy);   color: var(--white); }       /* 12:1 */
.track-req {
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.track-courses {
  display: grid;
  gap: 14px;
}

/* Course card: name (big), label (small), focus (1 line) */
.course-card {
  container-type: inline-size;   /* the course name sizes itself to the card */
  background: var(--white);
  border: 2px solid var(--light-sage);
  border-left-width: 6px;
  border-radius: 14px;
  padding: 16px 18px;
}
.track-sage .course-card   { border-left-color: var(--sage); }
.track-yellow .course-card { border-left-color: var(--yellow); }
.track-navy .course-card   { border-left-color: var(--navy); }
/* Course names fill the card nicely: 9cqi, between about 19px and 28px */
.course-name {
  font-size: clamp(1.2rem, 9cqi, 1.75rem);
  font-weight: 800;
  margin-bottom: 2px;
}
.course-label {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.course-focus { font-size: 0.95rem; }

/* Info bar under the 3 columns: same left and right edges as the columns */
.info-bar {
  margin-top: 28px;
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--light-sage);
  color: var(--dark-navy);
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
}

/* Home preview: track title + requirement + course list inside the existing cards */
.course .track-title { font-size: clamp(1rem, 5.5cqi, 1.6rem); margin-bottom: 6px; }
.course .track-req { margin-bottom: 10px; }
.track-list { text-align: center; font-weight: 600; }

/* ===== INSCRIPCIÓN STEPS (Cursos page) ===== */
.strip-title {
  text-align: center;
  font-size: 1.4rem;
  margin: 44px 0 18px;
}
.strip {
  list-style: none;
  row-gap: 12px;
}
.strip li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 2px solid var(--light-sage);
  border-radius: 14px;
  padding: 16px 18px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark-navy);
}

/* ===== PAYMENT POLICY BOX (Courses + FAQ) ===== */
.policy {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 32px;
  background: var(--light-yellow);
  border: 2px solid var(--yellow);
  border-left-width: 8px;
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--dark-navy);
}
.policy-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 2px solid var(--navy);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.policy-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.policy-title {
  font-size: 1.15rem;
  text-align: left;
  margin-bottom: 4px;
}

/* ===== FOUNDER / ABOUT ===== */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
/* Founder card: Navy, with the approved pairs on Navy:
   White name (12:1), Warm White text (11.3:1), Warm Yellow details (7.4:1) */
.about {
  background: var(--navy);
  border-radius: 22px;
  padding: 32px 22px;
  color: var(--warm-white);
}
.about p { color: var(--warm-white); }
.about .page-title { margin-bottom: 0.5rem; color: var(--white); }
.about .role strong { color: var(--yellow); }
/* Eyebrow: Dark Navy on Warm Yellow (9.4:1), uppercase */
.about .eyebrow {
  margin-bottom: 12px;
  background: var(--yellow);
  color: var(--dark-navy);
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.about .avatar { border-color: var(--navy); }   /* only the yellow ring shows */
.role { font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; margin-bottom: 14px; }
/* Round photo with a white ring + yellow outline */
.avatar {
  flex-shrink: 0;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 6px solid var(--white);
  outline: 4px solid var(--yellow);
}

/* Quotes: Noto Sans Italic, as in the brand kit */
.quotes { row-gap: 16px; }
.quote {
  background: var(--white);
  border-left: 6px solid var(--yellow);
  border-radius: 14px;
  padding: 22px 24px;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--dark-navy);
}

.mission-vision { row-gap: 20px; }
.mv-card {
  background: var(--white);
  border: 2px solid var(--light-sage);
  border-top: 10px solid var(--navy);
  border-radius: var(--radius);
  padding: 26px;
}
.mv-card h2 { text-align: left; font-size: 1.6rem; margin-bottom: 0.8rem; }

/* Certifications row */
.certs { row-gap: 16px; }
.cert {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--white);
  border-radius: 14px;
  padding: 18px 20px;
}
.cert h3 { font-size: 1.05rem; }
.cert p { font-size: 0.95rem; }
.cert-year { font-weight: 600; }

/* Clickable certificate card: small preview + details, opens the full certificate */
.cert-link {
  align-items: center;
  color: var(--navy);
  text-decoration: none;
  border: 2px solid var(--white);
}
.cert-link:hover { border-color: var(--yellow); }
.cert-thumb {
  flex-shrink: 0;
  width: 132px;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--light-sage);
}
.cert .cert-detail { font-size: 0.85rem; }
.cert-open {
  margin-top: 6px;
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
/* Small phones: preview above the text */
@media (max-width: 459px) {
  .cert-link { flex-direction: column; align-items: flex-start; }
  .cert-thumb { width: 100%; }
}
/* A single certificate is centered on the grid */
@media (min-width: 700px) {
  .cert:only-child { grid-column: 3 / 11; }
}
@media (min-width: 1000px) {
  .cert:only-child { grid-column: 3 / 9; }   /* inside the 10-column area: centered */
}

/* ===== TEACHERS ===== */
.teachers { row-gap: 20px; }
.teacher {
  background: var(--white);
  border: 2px solid var(--light-sage);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.teacher-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 30%;
  border: 5px solid var(--white);
  outline: 3px solid var(--yellow);
  margin-bottom: 10px;
}
.teacher-name { font-size: 1.4rem; margin: 0; }
.teacher-role { font-family: var(--font-title); font-weight: 700; }
.teacher .btn { margin-top: 10px; }
.teacher-soon {
  justify-content: center;
  border-style: dashed;
  border-color: var(--sage);
  background: transparent;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
}
.soon-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--light-yellow);
  color: var(--dark-navy);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  font-weight: 800;
}

/* ===== FAQ ===== */
.faq {
  display: grid;
  gap: 12px;
}
.faq details {
  background: var(--white);
  border-radius: 14px;
  padding: 0 20px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--dark-navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--light-yellow);
  color: var(--dark-navy);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 800;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; }

/* ===== LEGAL PAGES (privacy, terms) ===== */
.legal { min-height: 50vh; }
/* Long texts: about 720px wide, comfortable line height */
.legal-content {
  justify-self: center;
  width: 100%;
  max-width: 720px;
  line-height: 1.75;
}
.legal-content h2 {
  font-size: 1.35rem;
  text-align: left;
  margin: 2rem 0 0.6rem;
}
.legal-content p,
.legal-content ul { margin-bottom: 0.9rem; }
.legal-content ul { padding-left: 1.4rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a {
  color: var(--navy);
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ===== "READY TO START?" ===== */
/* Soft Sage: its own block, between the content and the navy footer */
.cta { text-align: center; background: var(--sage); }
.cta h2 { font-weight: 800; margin-bottom: 0.8rem; }
.cta p { margin-bottom: 26px; color: var(--dark-navy); }

/* ===== FOOTER ===== */
/* Navy, with Warm White text and icons (11.3:1 contrast) */
.footer {
  background: var(--navy);
  color: var(--warm-white);
}
.footer a:focus-visible { outline-color: var(--yellow); }

/* Main part, centered: title · social icons · logo */
.footer-main {
  text-align: center;
  padding: 48px 0 44px;
}
.footer-main .container { justify-items: center; }
.footer-title {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 18px;
}
.social-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}
.social-list a { display: block; border-radius: 50%; }
.social-icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--warm-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--warm-white);        /* the icons use this color (currentColor) */
}
.social-icon svg { width: 28px; height: 28px; }
/* Hover: the circle turns yellow (and grows a little: see HOVER at the end) */
.social-list a:hover .social-icon {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark-navy);
}
/* brand/logo-horizontal-dark-mode.svg: same empty space as the header logo, so the
   image is taller to keep the visible logo the same size as before (about 42px / 49px) */
.footer-logo {
  height: 63px;
  width: auto;
}

/* Bottom bar: Dark Navy, smaller text in light brand colors */
.footer-bottom {
  background: var(--dark-navy);
  color: var(--light-sage);
  font-size: 0.85rem;
}
.footer-bottom-inner {
  row-gap: 6px;
  justify-items: center;
  text-align: center;
  padding-top: 16px;
  padding-bottom: 92px;          /* room for the floating WhatsApp button below 1200px */
}
@media (min-width: 1200px) {
  /* wide screens: the links end well before the floating button */
  .footer-bottom-inner { padding-bottom: 18px; }
}
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.legal-links a { color: var(--warm-white); font-weight: 600; }
.legal-links a:hover { color: var(--yellow); }
.legal-links a[aria-current="page"] { text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }

/* ===== FLOATING WHATSAPP BUTTON ===== */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--navy);
  display: grid;
  place-items: center;
}
/* WhatsApp icon (from icons/whatsapp.svg, fill="currentColor") */
.wa-float { color: var(--dark-navy); }
.wa-float svg {
  width: 22px;
  height: 22px;
}

/* ===== WEIGHT HELPERS (Nunito) ===== */
.w800 { font-family: var(--font-title); font-weight: 800; }
.w900 { font-family: var(--font-title); font-weight: 900; }

/* ===== FORMATOS (Cursos page) ===== */
.formats-title { font-weight: 900; }
.format-blocks { row-gap: 20px; }
.format-block {
  background: var(--white);
  border: 2px solid var(--light-sage);
  border-top: 10px solid var(--navy);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}
.format-name {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 900;
  margin-bottom: 14px;
}
.format-groups {
  list-style: none;
  font-size: 1.15rem;
  line-height: 1.7;
}
.format-groups .w800 { color: var(--dark-navy); }
.format-time {
  display: inline-block;
  margin: 12px 0 18px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--light-yellow);
  color: var(--dark-navy);
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.15rem;
}
.format-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--light-sage);
}
.format-facts li {
  background: var(--light-sage);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.95rem;
  font-weight: 600;
}
/* Inscripción: intro line + short centered list */
.groups-intro {
  text-align: center;
  margin: -0.6rem 0 2rem;
}
.groups-intro ul {
  display: inline-block;
  margin-top: 6px;
  padding-left: 1.2em;
  text-align: left;
}
.groups-intro li { margin: 2px 0; }

/* ===== ¿CÓMO FUNCIONA? 4 steps in one centered column ===== */
/* The list: centered, 760px max */
.zsteps {
  list-style: none;
  justify-self: center;
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
/* Each step: text on the left, icon on the right (40px apart), vertically centered.
   The icon column has a fixed width, so all icons line up and all titles start at the same edge. */
.zstep {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px;
  column-gap: 40px;
  align-items: center;
}
/* Thin navy line between steps (not before the first or after the last): 92% wide, centered */
.zstep + .zstep::before {
  content: "";
  position: absolute;
  top: -48px;          /* half of the 96px gap */
  left: 4%;
  width: 92%;
  height: 1px;
  background: var(--navy);
}
.zstep-text { text-align: left; }
.zstep-icon {
  display: flex;
  justify-content: center;
  color: var(--navy);              /* icons use currentColor */
}
/* All 4 icons the same size */
.zicon { width: 120px; height: 120px; fill: currentColor; flex-shrink: 0; }
.zicon-link { display: inline-flex; border-radius: 12px; color: var(--navy); }
.zicon-link:hover { color: var(--dark-navy); }
.zstep-title {
  font-size: clamp(1.4rem, 3.5vw, 1.8rem);
  font-weight: 800;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 8px;
}
.zstep-text p { font-size: 1.1rem; }
/* Phones: same order, smaller icon */
@media (max-width: 619px) {
  .zsteps { gap: 64px; }
  .zstep + .zstep::before { top: -32px; }
  .zstep { grid-template-columns: 1fr 72px; column-gap: 20px; }
  .zicon { width: 72px; height: 72px; }
}
/* Very narrow phones: icon above the text, both left-aligned */
@media (max-width: 379px) {
  .zstep { grid-template-columns: 1fr; row-gap: 14px; }
  .zstep-icon { order: -1; justify-content: flex-start; }
}

/* Banks (step 4): same small logo size, then the account */
.banks {
  list-style: none;
  display: inline-grid;
  gap: 10px;
  margin: 14px 0 10px;
  text-align: left;
}
.banks li { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; }
.banks strong { font-family: var(--font-title); font-weight: 800; letter-spacing: 0.02em; }
/* Each bank logo file has empty space around it: the box shows only the logo, 28px tall */
.bank-logo {
  position: relative;
  flex-shrink: 0;
  height: 28px;
  overflow: hidden;
}
.bank-logo img { position: absolute; max-width: none; filter: url(#to-navy); }   /* painted Navy */
/* The hidden SVG filter (in como-funciona.html) that paints the bank logos */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.flood-navy { flood-color: var(--navy); }
.bank-bac { width: 31px; }                                   /* logo: x 110–260, y 116–253 of 375 */
.bank-bac img { width: 76px; height: 76px; left: -22px; top: -24px; }
.bank-banpais { width: 24px; }                               /* logo: x 130–252, y 119–263 of 375 */
.bank-banpais img { width: 72px; height: 72px; left: -25px; top: -23px; }
.bank-holder { font-size: 0.95rem; }

/* ===== 100% HONDUREÑO (footer) ===== */
.hn-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--font-title);
  font-weight: 800;
  color: var(--warm-white);
  cursor: default;
}
.hn-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Honduras flag: turquoise / white with 5 turquoise stars / turquoise */
.hn-flag { width: 24px; height: 16px; fill: var(--turquoise); }
.hn-flag .hn-flag-white { fill: var(--white); }
.hn-heart { width: 16px; height: 16px; fill: var(--turquoise); }

/* ===== TABLETS (700px and wider) ===== */
@media (min-width: 700px) {
  h2 { font-size: 2.4rem; }
  .page-title { font-size: 2.8rem; }
  /* Column spans: 3 across = 4 columns each, 2 across = 6 columns each */
  .quote, .features li, .track { grid-column: span 4; }
  .format-block { grid-column: span 6; }
  .strip li { grid-column: span 6; }
  .mv-card, .cert, .teacher { grid-column: span 6; }
  .features li { flex-direction: column; text-align: center; }
  .about { flex-direction: row; text-align: left; padding: 40px 44px; }
  .about .page-title { text-align: left; }
  .avatar { width: 230px; height: 230px; }

  .footer-main { padding-top: 56px; }
  .footer-logo { height: 73px; }

  .footer-bottom-inner { padding-top: 18px; }
}

/* ===== COMPUTERS (1000px and wider) ===== */
@media (min-width: 1000px) {
  /* Bottom bar: copyright left (columns 1–6), legal links right (columns 7–12) */
  .footer-bottom-inner { text-align: left; }
  .footer-bottom-inner > p:first-child { grid-column: 1 / 7; justify-self: start; }
  .legal-links { grid-column: 7 / -1; justify-self: end; white-space: nowrap; }
  /* Inside the 10-column areas, 2 cards across = 5 columns each */
  .cert, .teacher, .format-block { grid-column: span 5; }
  /* Enrollment steps: 4 across (3 columns each), with an arrow between them */
  .strip li { grid-column: span 3; }
  .strip li:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--navy);
    z-index: 1;
  }
  /* The 3 features keep their spacing: columns 3–4, 6–7 and 9–10 */
  .features li { white-space: nowrap; }
  .features li:nth-child(1) { grid-column: 3 / 5; }
  .features li:nth-child(2) { grid-column: 6 / 8; }
  .features li:nth-child(3) { grid-column: 9 / 11; }
}

/* Home course cards: one per row under 900px, 3 across from 900px */
@media (min-width: 900px) { .course { grid-column: span 4; } }

/* ===== HEADER ON COMPUTERS (1000px and wider): menu always visible in row 2 ===== */
@media (min-width: 1000px) {
  .topbar { border-bottom: 0; }      /* the navy bar is the bottom edge now */
  .topbar-inner { height: 72px; }
  .logo img { height: 63px; margin-left: -13px; }   /* visible logo about 42px tall */
  .menu-btn { display: none; }

  /* Navy menu bar: 68px tall, so the button (44px) has 12px above and below
     for its lift and shadow */
  .nav,
  body:has(#menu-toggle:checked) .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    height: 68px;
    padding: 0;
  }
  .nav ul { display: flex; align-items: center; gap: 0; margin: 0; }
  /* Thin Soft Sage separators between menu items */
  .nav ul > li { padding: 0 22px; }
  .nav ul > li + li { border-left: 1px solid var(--sage); }
  .nav li > a,
  .nav-dropdown > summary {
    border: 0;
    padding: 6px 0;
    font-size: 1rem;
  }
  /* Hover: thin white underline */
  .nav li > a:hover,
  .nav-dropdown > summary:hover {
    text-decoration: underline;
    text-decoration-color: var(--white);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  /* The current page keeps its yellow underline on hover */
  .nav a[aria-current="page"]:hover,
  .nav-dropdown > summary.is-current:hover { text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
  .nav .btn { width: auto; margin: 0 8px; }

  /* "Sobre Nosotros" opens as a floating white panel with navy text */
  .nav-dropdown .dropdown-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: -12px;
    z-index: 60;
    min-width: 180px;
    background: var(--white);
    border: 1px solid var(--light-sage);
    padding: 6px;
  }
  .nav-dropdown .dropdown-panel a { color: var(--navy); }
  .nav-dropdown .dropdown-panel a:hover { background: var(--light-sage); }
  .nav-dropdown .dropdown-panel a:focus-visible { outline-color: var(--navy); }
}

/* ===== BREADCRUMBS (every page except the home page) ===== */
.breadcrumbs {
  margin-bottom: 28px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;           /* wraps nicely on phones */
  align-items: center;
  row-gap: 4px;
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "›"; margin: 0 8px; }
.breadcrumbs a { color: var(--navy); text-decoration: none; }
.breadcrumbs a:hover {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
/* The section that starts with breadcrumbs: they sit right below the header */
.section:has(> .container > .breadcrumbs) { padding-top: 24px; }

/* ===== HOVER: the only animation on the site =====
   Buttons (including the ☰ menu button), cards, social icons and step icons grow a little
   IN PLACE (scale 1.04).
   transform never moves the layout or the elements around them. */
.btn, .menu-btn, .social-icon, .header-social a, .wa-float,
.course, .course-card, .why-card, .format-block, .cert-link, .teacher, .quote, .mv-card, .strip li,
.zicon {
  transition: transform 0.2s ease;
}
.btn:hover, .menu-btn:hover, .social-list a:hover .social-icon, .header-social a:hover, .wa-float:hover,
.course:hover, .course-card:hover, .why-card:hover, .format-block:hover, .cert-link:hover,
.teacher:hover, .quote:hover, .mv-card:hover, .strip li:hover,
.zicon:hover, .zicon-link:hover .zicon {
  transform: scale(1.04);
}
/* Visitors who turned on "reduce motion" in their device settings: no scaling */
@media (prefers-reduced-motion: reduce) {
  .btn, .menu-btn, .social-icon, .header-social a, .wa-float,
  .course, .course-card, .why-card, .format-block, .cert-link, .teacher, .quote, .mv-card, .strip li,
  .zicon { transition: none; }
  .btn:hover, .menu-btn:hover, .social-list a:hover .social-icon, .header-social a:hover, .wa-float:hover,
  .course:hover, .course-card:hover, .why-card:hover, .format-block:hover, .cert-link:hover,
  .teacher:hover, .quote:hover, .mv-card:hover, .strip li:hover,
  .zicon:hover, .zicon-link:hover .zicon { transform: none; }
}