/* ===========================================================================
   lamejorclaseenespanol.com — framework
   ---------------------------------------------------------------------------
   One stylesheet. The live site loaded Bootstrap 5.3.6, MDB UI Kit 9,
   FontAwesome, ScrollReveal and the Start Bootstrap form script. All gone;
   icons are inline SVG. Structure follows the All Night build; the look does
   not (see tokens.css).

   Layout uses flex/grid with gap, never margins between siblings.
   ======================================================================== */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); }
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/figtree-latin.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchored sections must not land under the sticky nav. */
[id] { scroll-margin-top: 88px; }
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display); margin: 0;
  line-height: 1.12; text-wrap: balance;
  font-optical-sizing: auto;
}
h1 { font-size: var(--step-5); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--step-2); font-weight: 650; letter-spacing: -0.01em; }

p { margin: 0; }
p + p { margin-top: var(--s-3); }
img { max-width: 100%; height: auto; display: block; }
.lead, p { text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--oro-soft); color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--rojo); color: #fff; padding: var(--s-2) var(--s-4); font-weight: 700;
}
.skip:focus { left: 0; color: #fff; text-decoration: none; }

/* ---- layout -------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.band { background: var(--band); border-block: 1px solid var(--line); }
.section { padding-block: var(--s-7); }
.stack { display: flex; flex-direction: column; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.section-head { display: flex; flex-direction: column; gap: .875rem; max-width: 46rem; }
.eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rojo);
}
.lead { font-size: var(--step-1); color: var(--muted); max-width: 38em; }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); color: var(--dim); }

/* ---- bilingual ribbon ---------------------------------------------------- */
.ribbon {
  background: var(--rojo); color: #fff; text-align: center;
  font-size: .9375rem; padding: .55rem var(--gutter);
}
.ribbon a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.ribbon a:hover { color: var(--oro-soft); }

/* ---- nav ----------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 250, 243, .9);
  -webkit-backdrop-filter: saturate(1.5) blur(10px); backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--line); padding-block: .8rem;
}
@supports not (backdrop-filter: blur(2px)) { .nav { background: var(--paper); } }
.nav-inner { display: flex; align-items: center; gap: var(--s-4); }
.nav-brand { display: flex; align-items: center; gap: .7rem; flex-grow: 1; color: inherit; min-width: 0; }
.nav-brand:hover { text-decoration: none; }
.nav-name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.05; letter-spacing: -.01em; }
.nav-name em { font-style: italic; color: var(--rojo); font-weight: 600; }
.nav-sub { display: block; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); line-height: 1.5; }
.nav-nav { display: flex; align-items: center; gap: var(--s-3); }
.nav-links { display: flex; align-items: center; gap: var(--s-4); font-size: .9375rem; font-weight: 600; }
.nav-links a { color: var(--ink); position: relative; padding-block: .2rem; }
.nav-links a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 2px;
  background: var(--rojo); border-radius: 2px; transition: left .16s ease, right .16s ease;
}
.nav-links a:hover { text-decoration: none; }
.nav-links a:hover::after { left: 0; right: 0; }

/* LOGIN IS A FIRST-CLASS NAV ITEM AT EVERY WIDTH. It is a sibling of
   .nav-links, never inside it, so the phone breakpoint cannot collapse it.
   A returning student who cannot find login on a phone is a support call. */
.nav-login, .nav-lang, .nav-cta {
  font-weight: 700; font-size: .9375rem; min-height: var(--tap);
  display: inline-flex; align-items: center; padding-inline: 1rem;
  border-radius: var(--radius-sm); flex-shrink: 0; white-space: nowrap;
}
.nav-login { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.nav-login:hover { text-decoration: none; border-color: var(--rojo); color: var(--rojo); }
.nav-lang { color: var(--azul); border: 1.5px solid var(--azul); }
.nav-lang:hover { text-decoration: none; background: var(--azul); color: #fff; }
.nav-cta {
  background: var(--rojo); color: #fff;
  box-shadow: 0 2px 0 var(--rojo-dk), var(--shadow-1);
  transition: transform .13s ease, box-shadow .13s ease;
}
.nav-cta:hover { text-decoration: none; color: #fff; transform: translateY(-1px); box-shadow: 0 3px 0 var(--rojo-dk), var(--shadow-2); }

.nav-toggle {
  display: none; width: var(--tap); height: var(--tap); flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-inner { gap: var(--s-2); }

  /* THE MENU IS A DROP-DOWN PANEL UNDER THE BAR, never a column inside it.
     The first version opened the links inside .nav-nav, which sits in the
     middle of the bar: the links stacked beside the logo, the bar grew to
     ~450px tall and the toggle wrapped onto its own row (Luis, 2026-10-08).
     The sticky .nav is the containing block, so top:100% hangs the panel
     from the bottom edge of the bar at full width, and the bar itself never
     changes height. */
  .nav[data-open="true"] .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(30, 34, 53, .12);
    padding: .25rem var(--gutter) .75rem;
  }
  .nav[data-open="true"] .nav-links a {
    display: flex; align-items: center; min-height: 52px;
    font-size: 1.0625rem; border-bottom: 1px solid var(--line);
  }
  .nav[data-open="true"] .nav-links a:last-child { border-bottom: 0; }
  .nav[data-open="true"] .nav-links a::after { display: none; }
  .nav[data-open="true"] .nav-links a:hover { color: var(--rojo); }
}
/* The toggle shows a close mark while the panel is open. */
.nav-toggle .icon-close { display: none; }
.nav[data-open="true"] .nav-toggle .icon-open { display: none; }
.nav[data-open="true"] .nav-toggle .icon-close { display: block; }
@media (max-width: 600px) {
  .nav-sub { display: none; }
  .nav-name { font-size: 1.0625rem; }
  .nav-login, .nav-lang, .nav-cta { font-size: .8125rem; padding-inline: .7rem; }
  .nav-inner, .nav-nav { gap: .4rem; }
}
/* At the narrowest phones the register button leaves the header; the hero
   button is directly below it. Login and the language switch never leave. */
@media (max-width: 400px) {
  .nav-cta { display: none; }
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--step-0);
  padding: .95rem 1.75rem; min-height: 52px; border: 0; cursor: pointer; text-align: center;
  border-radius: var(--radius-sm);
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 60%);
  background-color: var(--rojo); color: var(--on-rojo);
  box-shadow: 0 3px 0 var(--rojo-dk), var(--shadow-1);
  transition: transform .13s cubic-bezier(.2,.7,.3,1), box-shadow .13s cubic-bezier(.2,.7,.3,1);
}
.btn:hover { text-decoration: none; color: var(--on-rojo); transform: translateY(-1px); box-shadow: 0 4px 0 var(--rojo-dk), var(--shadow-2); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rojo-dk); }
.btn-azul { background-color: var(--azul); color: var(--on-azul); box-shadow: 0 3px 0 var(--azul-dk), var(--shadow-1); }
.btn-azul:hover { color: var(--on-azul); box-shadow: 0 4px 0 var(--azul-dk), var(--shadow-2); }
.btn-azul:active { box-shadow: 0 1px 0 var(--azul-dk); }
.btn-ghost {
  background-image: none; background-color: var(--surface); color: var(--ink);
  border: 1.5px solid var(--line); box-shadow: var(--shadow-1);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--rojo); box-shadow: var(--shadow-2); }
.btn-ghost:active { box-shadow: none; }
.btn-row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.text-link { font-weight: 700; color: var(--azul); }

/* ---- hero ---------------------------------------------------------------- */
.hero { padding-block: var(--s-6) var(--s-7); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-6); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }
.hero-sub { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.3; color: var(--ink); }
.slogan { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--rojo); font-size: var(--step-1); }
.hero-copy p { color: var(--muted); }

/* The photo and its language seal share ONE grid cell, so the seal is pinned
   to the photograph and cannot float off it at any width. */
.hero-figure { display: grid; }
.hero-figure > * { grid-area: 1 / 1; }
.hero-media {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
  box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(58,18,18,.07);
}
.lang-seal {
  align-self: end; justify-self: start; margin: 0 0 var(--s-4) var(--s-4);
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border-radius: var(--radius-sm); padding: .5rem .9rem .5rem .5rem;
  box-shadow: var(--shadow-2); font-weight: 700; font-size: .9375rem;
}
.lang-seal b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; font-size: .8125rem; letter-spacing: .02em;
}
.lang-seal .es { background: var(--rojo); color: #fff; }
.lang-seal .en { background: var(--azul); color: #fff; margin-left: -12px; box-shadow: 0 0 0 3px var(--surface); }

/* ---- credential line ------------------------------------------------------ */
.cred { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .9375rem; color: var(--muted); }
.cred span { display: inline-flex; align-items: center; gap: .45rem; }
.cred svg { color: var(--rojo); flex-shrink: 0; }

/* ---- cards --------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
  box-shadow: var(--shadow-1), var(--edge-hi); min-width: 0;
}
.card-featured { border: 2px solid var(--rojo); position: relative; }
.card-flag {
  position: absolute; top: -14px; left: var(--s-5);
  background: var(--oro); color: var(--on-oro); font-weight: 700; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .8rem; border-radius: var(--radius-sm);
  box-shadow: 0 2px 0 var(--oro-dk);
}
.card h3 { font-size: var(--step-3); }

/* Price groups are headed by language, because language is the choice a
   visitor makes first here, and the format second. */
.lang-group { display: flex; flex-direction: column; gap: var(--s-4); }
.lang-group-head { display: flex; align-items: center; gap: .75rem; }
.lang-group-head h3 { font-size: var(--step-2); }
.lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 28px; padding-inline: .55rem; border-radius: var(--radius-sm);
  font-size: .8125rem; font-weight: 800; letter-spacing: .06em; color: #fff;
}
.lang-pill.es { background: var(--rojo); }
.lang-pill.en { background: var(--azul); }
.lang-group.is-en .card-featured { border-color: var(--azul); }
.lang-group.is-en .card-flag { background: var(--azul-soft); color: var(--azul-dk); box-shadow: none; }

/* ---- the price ------------------------------------------------------------ */
.price {
  display: inline-flex; align-items: flex-start; gap: .04em;
  font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums;
  line-height: 1; color: var(--ink);
}
.price-cur { font-size: 1.375rem; font-weight: 600; color: var(--rojo); margin-top: .3em; }
.price-d { font-weight: 700; font-size: 3.5rem; letter-spacing: -0.03em; }
.price-c { font-size: 1.5rem; font-weight: 600; color: var(--muted); margin-top: .18em; }
.price-muted .price-d { font-size: 2.875rem; }
.price-muted .price-cur { color: var(--dim); }
.is-en .price-cur { color: var(--azul); }
.price-note { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ---- ticks --------------------------------------------------------------- */
.ticks { display: flex; flex-direction: column; gap: .65rem; font-size: 1rem; color: var(--muted); }
.tick { display: flex; gap: .65rem; align-items: flex-start; }
.tick svg {
  flex-shrink: 0; margin-top: 3px; padding: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--rojo-soft); color: var(--rojo);
}
.is-en .tick svg { background: var(--azul-soft); color: var(--azul); }

/* ---- benefits and features ------------------------------------------------ */
.benefit { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.benefit-mark {
  width: 48px; height: 48px; border-radius: 50%; background: var(--rojo-soft); color: var(--rojo);
  display: inline-flex; align-items: center; justify-content: center;
}
.benefit h3 { margin-bottom: .35rem; }
.feature { border-top: 3px solid var(--oro); padding-top: var(--s-3); display: flex; flex-direction: column; gap: .5rem; }
.feature h3 { font-size: var(--step-1); }
.feature p { color: var(--muted); font-size: 1rem; }

/* ---- the three panels (formerly modals) ----------------------------------- */
.panel {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-5); box-shadow: var(--shadow-1), var(--edge-hi); align-items: start;
}
.panel:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.panel:nth-child(even) .panel-media { order: 2; }
@media (max-width: 900px) {
  .panel, .panel:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .panel:nth-child(even) .panel-media { order: 0; }
}
.panel-media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.panel-body { display: flex; flex-direction: column; gap: var(--s-3); }
.panel-kicker { font-weight: 700; color: var(--rojo); font-size: .9375rem; }
.panel ul { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .55rem; color: var(--muted); }
.panel ul strong { color: var(--ink); }
.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.checks span {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--oro-soft);
  color: var(--ink); border-radius: var(--radius-sm); padding: .35rem .8rem; font-size: .9375rem; font-weight: 600;
}

/* ---- FAQ: native <details>; every answer is in the HTML ------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-block: 1.15rem; cursor: pointer; list-style: none; min-height: var(--tap);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3;
  transition: color .14s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rojo-soft); color: var(--rojo); font-family: var(--font-body); font-size: 1.25rem; font-weight: 700;
}
.faq details[open] summary::after { content: "\2212"; background: var(--rojo); color: #fff; }
.faq summary:hover { color: var(--rojo); }
.faq details > *:not(summary) { padding-bottom: 1.25rem; color: var(--muted); max-width: 48rem; }
.faq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--s-6); }
@media (max-width: 900px) { .faq-cols { grid-template-columns: minmax(0, 1fr); } .faq-cols .faq + .faq { border-top: 0; } }

/* ---- contact -------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
@media (max-width: 560px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .2rem; }
.contact-big { font-family: var(--font-display); font-weight: 650; font-size: var(--step-2); font-variant-numeric: lining-nums tabular-nums; }
.contact-big a { color: var(--ink); }
.contact-big a:hover { color: var(--rojo); }

/* ---- closing call to action: the one dark surface ------------------------ */
.closer {
  background: var(--deep); color: var(--on-deep); border-radius: var(--radius);
  padding: var(--s-6) var(--s-5); display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5); flex-wrap: wrap; box-shadow: var(--shadow-3);
}
.closer h2 { color: #fff; font-size: var(--step-4); }
.closer p { color: var(--on-deep); }
.closer .btn { background-color: var(--oro); color: var(--on-oro); box-shadow: 0 3px 0 var(--oro-dk), var(--shadow-1); }
.closer .btn:hover { color: var(--on-oro); box-shadow: 0 4px 0 var(--oro-dk), var(--shadow-2); }

/* ---- footer --------------------------------------------------------------- */
.foot { padding-block: var(--s-5); font-size: var(--step--1); color: var(--dim); }
.foot-legal { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: var(--s-4); }
.foot a { color: var(--dim); text-decoration: underline; text-underline-offset: .2em; }

.price, .nav-login, .foot-legal, .contact-big { font-variant-numeric: lining-nums tabular-nums; }

@media (max-width: 560px) {
  .card { padding: var(--s-4); }
  .card-flag { left: var(--s-4); }
  .price-d { font-size: 2.875rem; }
  .price-muted .price-d { font-size: 2.375rem; }
  .section { padding-block: var(--s-6); }
  .closer { padding: var(--s-5) var(--s-4); }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, .nav-cta:hover { transform: none; }
}

/* English-side benefits carry the blue, as the English price cards do. */
.benefit.is-en .benefit-mark { background: var(--azul-soft); color: var(--azul); }

/* The licence card. Stands in the image slot of the third panel. The stock
   "licensed" badge the live site used is shipped on cheapschool, FIF and
   fun4ufast2, so it failed the substitution test; this is typeset from
   config and belongs to this school alone. */
.lic-card {
  aspect-ratio: 4 / 3; border-radius: calc(var(--radius) - 4px);
  background: var(--rojo); color: #fff; padding: var(--s-5);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-3);
  background-image: radial-gradient(120% 90% at 100% 0%, rgba(240,190,72,.28), rgba(240,190,72,0) 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.lic-card-top { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--oro-soft); }
.lic-card-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1; letter-spacing: -.02em; }
.lic-card-num small { display: block; font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .14em; color: var(--oro); margin-bottom: .4rem; }
.lic-card-foot { font-size: .9375rem; color: #fff; display: flex; flex-direction: column; gap: .15rem; }
.lic-card-foot b { font-weight: 700; }

/* ONE-ROW HEADER ON PHONES. The first render wrapped the brand onto its own
   row, which made a ~180px sticky header on a 390px phone. The row now never
   wraps at rest: the name breaks onto two short lines instead, and the bar
   only wraps when the menu is opened, to drop the link list beneath it. */
@media (max-width: 1080px) {
  .nav-inner, .nav-nav { flex-wrap: nowrap; }
  .nav-brand { flex: 1 1 auto; }
}
@media (max-width: 600px) {
  .nav-brand svg { width: 32px; height: 32px; }
  .nav-name { font-size: 1rem; }
  .nav-name em { display: block; }
}
@media (max-width: 400px) {
  .nav-brand { gap: .45rem; }
  .nav-name { font-size: .9375rem; }
  .nav-login, .nav-lang { padding-inline: .6rem; }
}
/* The brand text block sets its own leading; inherited body leading (1.6)
   pulled a wrapped name apart. Each half of the name stays on one line. */
.nav-brand > span:last-child { display: block; line-height: 1.1; min-width: 0; }
@media (max-width: 600px) { .nav-name { white-space: nowrap; } }
@media (max-width: 400px) { .nav-name { font-size: .875rem; } .nav-login, .nav-lang { font-size: .78rem; padding-inline: .55rem; } }


/* ===========================================================================
   FAMILIA (Luis, 2026-10-07). Component treatment for the chosen direction,
   folded in from design/themes/familia.css. Colours come from tokens.css.
   ======================================================================== */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.3rem); }
h3 { font-weight: 600; }
.faq summary { font-weight: 600; }
.nav { background: rgba(255, 255, 255, .92); }

/* Hero: a peach-to-sky wash across the full width, behind the content only. */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: linear-gradient(120deg, #FFEADB 0%, #FFF4EA 48%, #DCEBFB 100%);   /* start lightened so the red eyebrow clears AA (4.69) */
}
.hero-sub { color: var(--ink); }
.slogan { color: var(--rojo); font-style: normal; font-weight: 600; }
.hero-media { border-radius: 28px; }

/* One sky-blue disc behind the hero photo: the single shape in this identity. */
.hero-figure { position: relative; }
.hero-figure::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  right: -6%; top: -10%; background: #CFE3FA; z-index: -1;
}
.hero-figure > .hero-media, .hero-figure > .lang-seal { position: relative; }
@media (max-width: 900px) { .hero-figure::before { right: -12%; top: -6%; width: 70%; } }

/* Leaf-green check marks everywhere: "done, included". 3.1:1 for the icon. */
.tick svg, .is-en .tick svg { background: #E1F6EA; color: #178A4B; }
.checks span { background: #E1F6EA; }
.feature { border-top-color: var(--rojo); }
.benefit-mark, .benefit.is-en .benefit-mark { background: var(--azul-soft); color: var(--azul); }
.card-flag { background: var(--oro); }

/* The closing panel is sky blue, not the old deep maroon. */
.closer { background: linear-gradient(120deg, #1663BD, #1A6FD1); }   /* white body text clears AA across the whole gradient */
.closer p { color: #fff; }
.closer h2 { color: #fff; }
.closer .btn { background-color: #fff; color: var(--rojo); box-shadow: 0 3px 0 #C9DDF5, var(--shadow-1); }
.closer .btn:hover { color: var(--rojo); box-shadow: 0 4px 0 #C9DDF5, var(--shadow-2); }

/* Licence card labels: white and light cream on red, both AA (5.46 / 4.61). The gold label was 2.82. */
.lic-card-top { color: #fff; }
.lic-card-num small { color: #FFE9C7; }

/* TABLET HEADER (2026-10-08 polish). Between phones and wide desktops the
   brand used to wrap mid-name ("La Mejor Clase en / Español") with its
   tagline running onto two more lines, and "El curso" broke in two at 1024px.
   Below 1200px the name is set as a deliberate two-line lockup, the same as on
   phones, and the tagline steps aside; menu labels never wrap. The ☰ menu
   takes over below 1080px so the full row is never squeezed. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1200px) {
  .nav-name em { display: block; }
  .nav-sub { display: none; }
}

/* ===========================================================================
   POLISH PASS (2026-10-08)
   ======================================================================== */

/* Hero photo crop is set per image with CSS variables, so each photo can have
   one framing on phones and another on desktop. */
.hero-media { aspect-ratio: var(--ratio, 4 / 3); object-position: var(--pos, 50% 50%); }

/* Desktop: the photo was 4:3 beside a much taller column of copy, leaving a
   large empty patch under it. A square frame balances the two columns. */
@media (min-width: 901px) {
  .hero-media { aspect-ratio: 1 / 1; object-position: var(--pos-desk, var(--pos, 50% 50%)); }
}

/* Phones: the first screen was all text, with the photo and the button a
   screen and a half down. The copy column dissolves into the grid so the
   order can become: eyebrow, headline, promise, BUTTON + PRICE, photo, then
   the slogan and the longer paragraphs. */
@media (max-width: 900px) {
  .hero-grid { gap: var(--s-4); }
  .hero-copy { display: contents; }
  .hero-copy > .eyebrow  { order: 1; }
  .hero-copy > h1        { order: 2; }
  .hero-copy > .hero-sub { order: 3; }
  .hero-copy > .btn-row  { order: 4; }
  .hero-figure           { order: 5; margin-block: var(--s-2); }
  .hero-copy > .slogan   { order: 6; }
  .hero-copy > .hero-body{ order: 7; color: var(--muted); }
}

/* Phone numbers are tap-to-call links. On phones they now look like what
   they are, a button with a phone mark, and meet the 44px touch minimum. */
.tel-link { display: inline-flex; align-items: center; gap: .55rem; }
.tel-link::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.8 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--rojo);
}
@media (max-width: 560px) {
  .contact-big + .contact-big { margin-top: .6rem; }
  .tel-link {
    min-height: 48px; padding: 0 1.1rem; border: 1.5px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1);
  }
  .tel-link:hover { text-decoration: none; border-color: var(--rojo); }
}

/* ===========================================================================
   PRODUCT FORMAT MARKERS (2026-10-08)
   Two cues on every price card, so a buyer can't pick the wrong box:
   the colour family says the language (red Spanish, blue English), and the
   format tag says online or booklet. The booklet is always ORANGE (frame,
   tint, tag, button), whatever its language.
   ======================================================================== */
.fmt-tag {
  display: inline-flex; align-items: center; gap: .4rem; width: max-content;
  padding: .3rem .75rem .3rem .6rem; border-radius: var(--radius-sm);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.fmt-online { background: var(--rojo-soft); color: var(--rojo); }
.is-en .fmt-online { background: var(--azul-soft); color: var(--link-hover); }
.fmt-book { background: var(--naranja-soft); color: var(--naranja-ink); }

/* The booklet card: an orange frame with a thick top edge, a warm tint, an
   orange price mark, orange ticks and an orange button. */
.card.card-book {
  background: var(--naranja-card);
  border: 2px solid var(--naranja); border-top-width: 7px;
}
.card-book .price-cur, .is-en .card-book .price-cur { color: var(--naranja-ink); }
.card-book .tick svg, .is-en .card-book .tick svg { background: var(--naranja-soft); color: var(--naranja-dk); }
.btn-book {
  background-color: var(--naranja); color: var(--ink);
  box-shadow: 0 3px 0 var(--naranja-dk), var(--shadow-1);
}
.btn-book:hover { color: var(--ink); box-shadow: 0 4px 0 var(--naranja-dk), var(--shadow-2); }
.btn-book:active { box-shadow: 0 1px 0 var(--naranja-dk); }
/* Orange now means "booklet", so the "most chosen" flag on an ONLINE card must
   not be orange: it takes the card's language colour (white on red is 5.46:1). */
.card-featured .card-flag { background: var(--rojo); color: #fff; box-shadow: 0 2px 0 var(--rojo-dk); }
.lang-group.is-en .card-featured .card-flag { background: var(--azul-soft); color: var(--link-hover); box-shadow: none; }