/* ============================================================
   LOOK — the student-portal look applied to the public site
   (cream + forest green + rust, rounded cards, pill buttons).
   Loaded last on every page, so it only overrides: removing this
   file and its <link> brings back the previous espresso look.
   ============================================================ */

:root {
  --paper: #F4EFE4;
  --paper-dim: #EBE3D2;
  --paper-deep: #E3D9C4;
  --surface: #FCFAF5;
  --surface-2: #F3EDE1;
  --ink: #211D16;
  --ink-soft: #4A4437;
  --ink-faint: #6F6656;           /* 4.9:1 on --paper (was 3.1:1) */

  /* Forest green takes the role the walnut brown had: primary actions,
     dark panels, footer. --board keeps its name so every existing rule
     (method panel, featured plan, footer…) follows automatically. */
  --forest: #2F4A3A;
  --forest-deep: #243A2D;
  --forest-ink: #F4EFE4;
  --sage: #E3E9DD;
  --sage-deep: #7E9479;
  --board: #243A2D;
  --board-soft: #2F4A3A;
  --olive: #2F4A3A;
  --olive-deep: #243A2D;
  --olive-pale: #E3E9DD;
  --rust: #B0552B;
  --rust-deep: #8C4220;
  --rust-pale: #F1DED0;
  --brass: #C9A55A;               /* a touch lighter: reads on forest green */

  --line: rgba(33, 29, 22, 0.10);
  --line-soft: rgba(33, 29, 22, 0.06);
  --line-on-dark: rgba(244, 239, 228, 0.18);
  --shadow-soft: 0 1px 2px rgba(47, 58, 40, 0.05), 0 8px 24px -12px rgba(47, 58, 40, 0.18);
  --shadow-lift: 0 2px 4px rgba(47, 58, 40, 0.06), 0 22px 40px -20px rgba(47, 58, 40, 0.32);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Wider than before (1180/760): use more of a desktop screen. */
  --container: 1320px;
  --container-narrow: 900px;
}

body { background-image: none; background-color: var(--paper); }

/* ---- Header ---- */
.site-header { background: rgba(244, 239, 228, 0.9); border-bottom-color: var(--line); }
.main-nav__list a[aria-current="page"] { color: var(--forest); font-weight: 600; }
.main-nav__list a::after { background: var(--forest); height: 2px; border-radius: 2px; }
.header-login { font-size: var(--step--1); font-weight: 600; color: var(--forest); padding: 0.4em 0.2em; }
.header-login:hover { color: var(--rust-deep); }
.main-nav__list { gap: var(--sp-4); }
.main-nav__list a, .header-login, .wordmark__sub { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 861px) {
  .main-nav__list { gap: var(--sp-3); }
  .wordmark__sub { display: none; }
}
@media (max-width: 960px) { .header-login { display: none; } }
.nav-only-mobile { display: none; }
@media (max-width: 860px) { .main-nav.is-open .nav-only-mobile { display: list-item; } }

/* ---- Buttons: pills ---- */
.btn { border-radius: var(--radius-pill); padding: 0.75em 1.45em; }
.btn--primary { background: var(--forest); border-color: var(--forest); color: var(--forest-ink); }
.btn--primary:hover { background: var(--forest-deep); border-color: var(--forest-deep); box-shadow: 0 12px 24px -12px rgba(36, 58, 45, 0.6); }
.btn--ghost { background: var(--surface); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--forest); color: var(--forest); }
.btn--on-dark { background: var(--paper); color: var(--forest-deep); border-color: var(--paper); }
.btn--on-dark:hover { background: #fff; border-color: #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.45); }
.btn--ghost-on-dark { border-color: rgba(244, 239, 228, 0.4); }
.btn--text { color: var(--forest); border-bottom-color: var(--forest); }
.btn--text:hover { color: var(--rust-deep); border-color: var(--rust-deep); }

/* ---- Eyebrows, tags, coordinates ---- */
.eyebrow { color: var(--rust-deep); }
.eyebrow--on-dark, .section--dark .eyebrow { color: var(--brass); }
.tag { background: var(--sage); color: var(--forest); border-radius: var(--radius-pill); padding: 0.25em 0.75em; }
.coord { color: var(--rust); }

/* ---- Cards: white-ish, rounded, soft shadow ---- */
.card, .service-card, .plan-card, .teaser-card, .trust-note {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.card--path { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.card--path::before { display: none; }
.card--path__media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.service-card:hover, .plan-card:hover, .teaser-card:hover, .card--path:hover { box-shadow: var(--shadow-lift); border-color: var(--line); }
.trust-note { border-left: 4px solid var(--forest); }
.trust-note__icon { color: var(--forest); }
.section[style*="--paper-dim"] { background: var(--paper-dim) !important; }

/* Featured plan / dark panels: forest green, rounded */
.plan-card--featured { background: var(--forest); border-color: var(--forest); }
.plan-card--featured:hover { border-color: var(--forest); }
.plan-card__badge { border-radius: var(--radius-pill); }
.plan-card__features li::before { color: var(--forest); }
.method__panel { background: var(--forest); border-radius: var(--radius-lg); }
.board-diagram { border-radius: var(--radius-md); }
.about-photo, .about-photo img { border-radius: var(--radius-lg); }
.about-photo { background: var(--surface); background-image: none; }

/* ---- Footer ---- */
.site-footer { background: var(--forest-deep); color: var(--sage); }
.footer-bottom { color: rgba(244, 239, 228, 0.6); }

/* ---- Progress bar ---- */
.scroll-progress { background: linear-gradient(90deg, var(--forest), var(--rust)); }

/* ============================================================
   HOME — light hero in two columns (replaces the dark photo hero)
   ============================================================ */
.hero { background: var(--paper); color: var(--ink); padding-block: var(--sp-7) var(--sp-8); }
.hero::before { display: none; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-7); align-items: center; }
.hero__content { max-width: 620px; }
.hero h1 { color: var(--ink); font-size: var(--step-5); }
.hero h1 em { color: var(--rust); }
.hero__lede { color: var(--ink-soft); }
.hero__foot { color: var(--ink-soft); }
.hero__foot span::before { background: var(--forest); }
.hero__media { position: relative; }
.hero__media .hero__bg {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 62% center;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  opacity: 1;
  transform: none;
}
.hero__float {
  position: absolute;
  left: -2.2rem;
  bottom: 2.2rem;
  width: min(250px, 70%);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.hero__float strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin: 0.15rem 0 0.35rem; }
.hero__float .mini-eyebrow { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust-deep); }
.hero__float .mini-bar { height: 6px; border-radius: 6px; background: var(--sage); overflow: hidden; margin-top: 0.5rem; }
.hero__float .mini-bar span { display: block; height: 100%; width: 70%; background: var(--forest); border-radius: 6px; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero__media { max-width: 460px; }
  .hero__float { left: 1rem; bottom: 1rem; }
}

/* Final call to action: a rounded forest block instead of the photo band */
.final-cta { background: transparent; padding-block: var(--sp-6) var(--sp-8); }
.final-cta > .container {
  background: var(--forest);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-5);
  max-width: 980px;
  box-shadow: var(--shadow-lift);
}
.final-cta p { color: var(--sage); }

/* Intro curtain recoloured to the new palette (no photos) */
.curtain__panel--left, .curtain__panel--right { background-image: none; background-color: var(--forest-deep); }
.curtain__panel--right { background-color: var(--forest); }
.curtain__plate { background: var(--forest-deep); border-radius: var(--radius-lg); }

/* ============================================================
   PORTAL PAGE + portal teaser on the home page
   ============================================================ */
.pp-hero { padding-block: var(--sp-7) var(--sp-7); }
.pp-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.pp-hero h1 { font-size: var(--step-5); }
.pp-hero h1 em { color: var(--rust); font-style: italic; }
.pp-lede { margin-top: var(--sp-4); font-size: var(--step-1); color: var(--ink-soft); max-width: 46ch; line-height: 1.6; }
.pp-ctas { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.pp-note { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--ink-faint); }

/* Mini portal mock-ups, built in HTML (crisp, translatable, indexable) */
.mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  display: grid;
  grid-template-columns: 64px 1fr;
  overflow: hidden;
  font-size: 0.82rem;
}
.mock__side { background: var(--forest); padding: 0.9rem 0; display: grid; align-content: start; justify-items: center; gap: 0.9rem; }
.mock__side span { width: 26px; height: 26px; border-radius: 8px; background: rgba(244, 239, 228, 0.14); }
.mock__side span:first-child { background: rgba(244, 239, 228, 0.9); }
.mock__main { padding: 1rem; display: grid; gap: 0.7rem; }
.mock__hello { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.mock__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.mock__card { background: var(--surface); border-radius: var(--radius-md); padding: 0.75rem 0.85rem; box-shadow: var(--shadow-soft); min-width: 0; }
.mock__card b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin-top: 0.15rem; }
.mock__card small { color: var(--ink-faint); }
.mock__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust-deep); }
.mock__dots { display: flex; gap: 0.35rem; margin-top: 0.45rem; }
.mock__dots i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--sage-deep); }
.mock__dots i.on { background: var(--forest); border-color: var(--forest); }
.mock__bar { height: 6px; border-radius: 6px; background: var(--sage); margin-top: 0.5rem; overflow: hidden; }
.mock__bar span { display: block; height: 100%; background: var(--forest); border-radius: 6px; }
.mock__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.mock__chips em { font-style: normal; font-size: 0.72rem; padding: 0.2em 0.65em; border-radius: var(--radius-pill); background: var(--sage); color: var(--forest); }
.mini-board { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 8px; overflow: hidden; max-width: 150px; margin-top: 0.5rem; }
.mini-board i { background: #F0DFB8; display: grid; place-items: center; font-style: normal; font-size: 0.8rem; line-height: 1; color: #211D16; }
.mini-board i.d { background: #B58863; }
@media (max-width: 900px) {
  .pp-hero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mock { grid-template-columns: 1fr; }
  .mock__side { display: none; }
  .mock__row { grid-template-columns: 1fr; }
}

.pp-section { padding-block: var(--sp-8); }
.pp-section--tint { background: var(--paper-dim); }
.pp-head { max-width: 760px; }
.pp-head h2 { margin-top: var(--sp-3); font-size: var(--step-4); }
.pp-head p { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.6; }

.pp-grid { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.pp-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: var(--sp-2); }
.pp-feature__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sage); color: var(--forest); display: grid; place-items: center; }
.pp-feature__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-feature h3 { font-size: var(--step-1); margin-top: var(--sp-2); }
.pp-feature p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
.pp-feature__when { margin-top: auto; padding-top: var(--sp-2); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--forest); }
@media (max-width: 960px) { .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pp-grid { grid-template-columns: 1fr; } }

.pp-split { margin-top: var(--sp-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
.pp-split img { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); background: var(--surface); width: 100%; height: auto; }
.pp-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); }
.pp-list li { position: relative; padding-left: 2rem; color: var(--ink-soft); }
.pp-list li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%232F4A3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.pp-list strong { color: var(--ink); }
@media (max-width: 860px) { .pp-split { grid-template-columns: 1fr; } }

.pp-steps { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); counter-reset: paso; }
.pp-step { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-soft); border: 1px solid var(--line); }
.pp-step::before { counter-increment: paso; content: counter(paso); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--forest); color: var(--forest-ink); font-family: var(--font-display); font-weight: 600; margin-bottom: var(--sp-3); }
.pp-step h3 { font-size: var(--step-1); }
.pp-step p { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--step--1); }
@media (max-width: 860px) { .pp-steps { grid-template-columns: 1fr; } }

.pp-faq { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); max-width: 820px; }
.pp-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-soft); }
.pp-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: "+"; color: var(--forest); font-size: 1.3rem; line-height: 1; }
.pp-faq details[open] summary::after { content: "–"; }
.pp-faq details p { margin-top: var(--sp-2); color: var(--ink-soft); }

/* Home-page teaser for the portal */
.portal-teaser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; }
@media (max-width: 900px) { .portal-teaser { grid-template-columns: 1fr; } }

.plans__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 760px) { .plans__grid--two { grid-template-columns: 1fr; } }

.plans__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1100px) { .plans__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plans__grid--four { grid-template-columns: 1fr; } }
.plan-compare { margin-top: var(--sp-6); overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.plan-compare table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--step--1); }
.plan-compare th, .plan-compare td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: center; }
.plan-compare thead th { font-family: var(--font-display); font-size: var(--step-0); color: var(--ink); background: var(--surface-2); }
.plan-compare thead th:nth-child(4) { background: var(--forest); color: var(--forest-ink); }
.plan-compare tbody th { text-align: left; font-weight: 500; color: var(--ink-soft); }
.plan-compare td { color: var(--forest); font-weight: 600; }
.plan-compare td:nth-child(4) { background: var(--sage); }
.plan-compare tr:last-child th, .plan-compare tr:last-child td { border-bottom: none; }
.plan-compare__price th, .plan-compare__price td { font-family: var(--font-display); font-size: var(--step-0); color: var(--ink); }
.plan-compare thead th:first-child { text-align: left; }

/* ---------- Spanish site: language link + currency switch (Oct 2026) ---------- */
.lang-switch { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--forest); border: 1px solid var(--line); border-radius: 999px; padding: 0.3em 0.75em; white-space: nowrap; }
.lang-switch:hover { border-color: var(--forest); }
@media (max-width: 960px) { .lang-switch { display: none; } }
.currency-toggle { display: inline-flex; flex-wrap: wrap; margin-top: var(--sp-4); padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.currency-toggle button { font: inherit; font-size: var(--step--1); border: 0; background: none; padding: 0.45em 1.1em; border-radius: 999px; cursor: pointer; color: var(--ink-soft); }
.currency-toggle button[aria-pressed="true"] { background: var(--forest); color: var(--forest-ink); font-weight: 600; }
.currency-toggle button:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
html[data-currency="ARS"] .plan-card__amount { font-size: clamp(2rem, 2.6vw, 2.5rem); }
html[data-currency="ARS"] .plan-card__unit { white-space: nowrap; }
/* Savings badge under each plan price */
.plan-card__save { justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.4em; margin: calc(var(--sp-2) * -1) 0 0; padding: 0.35em 0.85em 0.35em 0.7em; border-radius: 999px; background: rgba(44, 122, 78, 0.12); color: #2C7A4E; font-size: var(--step--1); font-weight: 600; line-height: 1.2; }
.plan-card__save::before { content: ""; width: 0.95em; height: 0.95em; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10.6 2.5H17.5v6.9l-8 8-6.9-6.9z M14 6.2a1.2 1.2 0 1 0 0 .01z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%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 20 20'%3E%3Cpath d='M10.6 2.5H17.5v6.9l-8 8-6.9-6.9z M14 6.2a1.2 1.2 0 1 0 0 .01z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan-card__save b { font-weight: 600; }
.plan-card--featured .plan-card__save { background: rgba(214, 178, 106, 0.18); color: var(--brass); }
.plan-compare__save th, .plan-compare__save td { color: #2C7A4E; }

/* ============================================================
   PALETTE 2026-10 — aligned with the new logo (petrol blue, near-black,
   white, soft teal). Only variables plus the few rules that had the old
   cream hard-coded. To go back to the forest-green look, delete this
   block. Preview the old palette on any page with ?palette=before.
   ============================================================ */
:root:not([data-palette="before"]) {
  --paper: #F7F6F2;
  --paper-dim: #ECF0EF;
  --paper-deep: #DDE6E6;
  --surface: #FFFFFF;
  --surface-2: #F1F4F3;
  --ink: #0F1F27;
  --ink-soft: #384850;
  --ink-faint: #56666D;
  --forest: #0F4C63;
  --forest-deep: #0B3A4C;
  --forest-ink: #F7F6F2;
  --sage: #DCEAED;
  --sage-deep: #6E9AA6;
  --board: #0B3A4C;
  --board-soft: #0F4C63;
  --olive: #0F4C63;
  --olive-deep: #0B3A4C;
  --olive-pale: #DCEAED;
  --rust: #2F6470;
  --rust-deep: #24525C;
  --rust-pale: #DCE9EA;
  --brass: #A8CDD6;
  --line: rgba(15, 31, 39, 0.11);
  --line-soft: rgba(15, 31, 39, 0.06);
  --line-on-dark: rgba(247, 246, 242, 0.18);
  --shadow-soft: 0 1px 2px rgba(15, 31, 39, 0.05), 0 8px 24px -12px rgba(15, 31, 39, 0.16);
  --shadow-lift: 0 2px 4px rgba(15, 31, 39, 0.06), 0 22px 40px -20px rgba(15, 31, 39, 0.3);
}
:root:not([data-palette="before"]) .site-header { background: rgba(247, 246, 242, 0.94); }
:root:not([data-palette="before"]) .btn--primary:hover { box-shadow: 0 12px 24px -12px rgba(11, 58, 76, 0.6); }

/* ============================================================
   SHARED CHROME 2026-10 — logo header, footer, WhatsApp
   The logo is an <img> (/images/logo-mark.svg) + live text, so swapping
   the asset means replacing that one file.
   ============================================================ */
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); text-decoration: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; font-variant: small-caps; letter-spacing: 0.03em; white-space: nowrap; }
.brand__name b { font-weight: 600; color: var(--forest); }
.brand__sub { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.3rem; white-space: nowrap; }
.header-actions { gap: var(--sp-2); }
.header-wa { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--forest); border: 1px solid var(--line); }
.header-wa:hover { border-color: var(--forest); }
.main-nav__list a { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 861px) {
  .brand__text { display: none; }
  .main-nav__list { gap: var(--sp-3); }
}
@media (max-width: 1060px) { .header-wa { display: none; } }
/* The language switch stays visible on every width (it used to hide < 960px). */
.lang-switch { display: inline-flex !important; align-items: center; min-height: 36px; }
@media (max-width: 860px) {
  .site-header__inner { gap: var(--sp-2); }
  .header-actions { margin-left: auto; }
  .nav-toggle { order: 3; width: 42px; height: 40px; }
  .header-actions .btn { padding: 0.6em 1em; }
}
@media (max-width: 420px) {
  .brand__text { display: none; }
  .brand__mark { width: 36px; height: 36px; }
}

.site-footer { padding-bottom: calc(var(--sp-5) + 64px); }
.footer-brand p { margin-top: var(--sp-3); max-width: 34ch; font-size: 0.88rem; color: rgba(247, 246, 242, 0.75); }
.brand--footer { color: var(--forest-ink); }
.brand--footer .brand__name b { color: var(--brass); }
.brand--footer .brand__sub { color: rgba(247, 246, 242, 0.7); }
.brand--footer .brand__mark { background: var(--paper); border-radius: 12px; padding: 2px; }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp: small, quiet, never on top of the form or footer
   (main.js hides it while #book or the footer is on screen). */
.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--forest); border: 1px solid var(--line); box-shadow: var(--shadow-lift); transition: opacity 0.2s ease, transform 0.2s ease; }
.wa-float svg { width: 22px; height: 22px; }
.wa-float:hover { border-color: var(--forest); }
.wa-float.is-hidden { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (max-width: 600px) { .wa-float { right: 12px; bottom: 12px; width: 44px; height: 44px; } }

/* ============================================================
   HOME 2026-10 — short home (hero → method → audiences → portal →
   Andrea + reviews → form → blog). Also used by /about, /chess-and-emotions.
   ============================================================ */
.btn--lg { font-size: var(--step-0); padding: 0.9em 1.6em; }
.btn--wa { background: transparent; color: var(--forest); border: 1px solid var(--forest); }
.btn--wa:hover { background: var(--sage); }

.hero--v2 { padding-block: var(--sp-6) var(--sp-7); }
.hero--v2 .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-6); }
.hero--v2 .hero__content { max-width: 640px; }
.hero--v2 h1 { margin-top: var(--sp-3); font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.hero--v2 .hero__lede { margin-top: var(--sp-4); font-size: var(--step-1); line-height: 1.5; max-width: 50ch; }
.hero--v2 .hero__ctas { margin-top: var(--sp-5); flex-wrap: wrap; }
.hero__micro { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-faint); }
.hero__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 62%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.rating { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink-soft); }
.rating__stars { color: #B8860B; letter-spacing: 0.08em; }
.rating strong { color: var(--ink); }
@media (max-width: 900px) {
  .hero--v2 { padding-block: var(--sp-4) var(--sp-6); }
  .hero--v2 .hero__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero--v2 .hero__lede { font-size: var(--step-0); }
  .hero--v2 .hero__ctas { margin-top: var(--sp-4); }
  .hero__img { aspect-ratio: 16 / 10; }
  .hero--v2 .hero__media { max-width: 560px; }
}
@media (max-width: 480px) {
  .hero--v2 .hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .hero--v2 .hero__ctas { gap: var(--sp-2); }
}

.home-section { padding-block: var(--sp-8); }
.home-section--tint { background: var(--paper-dim); }
@media (max-width: 760px) { .home-section { padding-block: var(--sp-7); } }
.home-head { max-width: 720px; }
.home-head h2, .home-h2 { margin-top: var(--sp-2); font-size: var(--step-4); line-height: 1.1; text-wrap: balance; }
.home-head p, .home-lede { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.55; max-width: 56ch; }
.home-head--center { margin-inline: auto; text-align: center; }
.home-head--center p { margin-inline: auto; }
.home-head--split { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3); }
.home-head--split .rating { margin-top: 0; }

/* Method: BOARD + MIND → BETTER DECISIONS */
.method-flow { margin-top: var(--sp-6); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--sp-3); }
.method-flow__op { align-self: center; font-family: var(--font-display); font-size: 2rem; color: var(--forest); }
.method-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-soft); }
.method-step__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sage); color: var(--forest); }
.method-step__icon svg { width: 28px; height: 28px; }
.method-step__label { display: block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust-deep); }
.method-step h3 { margin-top: var(--sp-1); font-size: var(--step-2); }
.method-step__tags { margin-top: var(--sp-2); font-weight: 600; color: var(--ink); font-size: var(--step--1); line-height: 1.5; }
.method-step p:last-child { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.method-step--result { background: var(--forest); border-color: var(--forest); color: var(--forest-ink); }
.method-step--result h3, .method-step--result .method-step__tags { color: var(--forest-ink); }
.method-step--result p:last-child { color: rgba(247, 246, 242, 0.82); }
.method-step--result .method-step__label { color: var(--brass); }
.method-step--result .method-step__icon { background: rgba(247, 246, 242, 0.14); color: var(--forest-ink); }
.method-note { margin-top: var(--sp-5); text-align: center; color: var(--ink-soft); }
.method-note a { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 0.35em; }
@media (max-width: 900px) {
  .method-flow { grid-template-columns: 1fr; }
  .method-flow__op { justify-self: center; line-height: 1; }
  .method-flow__op:nth-of-type(2) { rotate: 90deg; }
}

/* Audience cards */
.audience-grid { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.audience-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; display: flex; flex-direction: column; }
.audience-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.audience-card__img--quote { display: grid; place-items: center; background: var(--forest); }
.audience-card__img--quote img { width: 56px; height: 56px; background: var(--paper); border-radius: 14px; padding: 2px; }
.audience-card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.audience-card__label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rust-deep); }
.audience-card h3 { font-size: var(--step-1); line-height: 1.3; }
.audience-card .btn--text { margin-top: auto; align-self: flex-start; }
@media (max-width: 960px) { .audience-grid { grid-template-columns: 1fr; max-width: 560px; } }

.check-list, .feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.check-list li, .feature-list li { position: relative; padding-left: 1.75rem; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.check-list li::before, .feature-list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230F4C63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.feature-list { margin-top: var(--sp-4); grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.feature-list li { font-size: var(--step-0); }
.feature-list strong { color: var(--ink); }
@media (max-width: 560px) { .feature-list { grid-template-columns: 1fr; } }

/* Andrea */
.teacher { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-6); align-items: center; max-width: 980px; }
.teacher__photo { width: 200px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.teacher .btn--text { margin-top: var(--sp-4); display: inline-block; }
.chips { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li { padding: 0.35em 0.9em; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--step--1); color: var(--ink); }
@media (max-width: 680px) {
  .teacher { grid-template-columns: 1fr; gap: var(--sp-4); }
  .teacher__photo { width: 140px; }
}

/* Reviews */
.teacher + .home-head { margin-top: var(--sp-8); }
.quote-grid { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.quote-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: var(--sp-3); }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-0); line-height: 1.5; color: var(--ink); }
.quote-card figcaption { margin-top: auto; font-size: var(--step--1); color: var(--ink-faint); }
.quote-card figcaption strong { color: var(--ink); }
.quote-more { margin-top: var(--sp-4); }
@media (max-width: 960px) { .quote-grid { grid-template-columns: 1fr; max-width: 640px; } }

/* Closing block + short form */
.book { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-7); align-items: start; }
.book__price { margin-top: var(--sp-4); font-size: var(--step-0); color: var(--ink); }
.book__wa { margin-top: var(--sp-5); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); color: var(--ink-soft); font-size: var(--step--1); }
.book__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-lift); display: grid; gap: var(--sp-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label, .field legend { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field input[type=text], .field input[type=email], .field input[type=tel], .field textarea { width: 100%; padding: 0.75em 0.9em; border: 1px solid rgba(15, 31, 39, 0.28); border-radius: var(--radius-sm); background: var(--paper); font: inherit; color: var(--ink); }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.field input[aria-invalid="true"] { border-color: #A3322A; }
.field--choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.field--choice legend { width: 100%; margin-bottom: 0.4rem; padding: 0; }
.field--choice label { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 400; font-size: var(--step-0); min-height: 32px; cursor: pointer; }
.field--choice input { width: 18px; height: 18px; accent-color: var(--forest); }
.field__opt { font-weight: 400; color: var(--ink-faint); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book__form .btn { justify-content: center; }
.book__fine { font-size: 0.8rem; color: var(--ink-faint); }
.book__fine a { text-decoration: underline; }
.book__status { font-size: var(--step--1); color: var(--ink); }
.book__status:empty { display: none; }
.book__status.is-error { color: #A3322A; }
.book__done { padding: var(--sp-4); border-radius: var(--radius-md); background: var(--sage); color: var(--forest-deep); font-weight: 500; }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; gap: var(--sp-5); } }
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } .book__form { padding: var(--sp-4); } }

/* Blog strip above the footer */
.blog-strip { padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.blog-strip .home-head h2 { font-size: var(--step-2); margin-top: 0; }
.blog-strip__list { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.blog-strip__list:empty { display: none; }
.post-mini { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); }
.post-mini:hover { border-color: var(--forest); }
.post-mini__cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-deep); }
.post-mini h3 { font-size: var(--step-0); line-height: 1.35; }
.post-mini__meta { margin-top: auto; font-size: 0.8rem; color: var(--ink-faint); }
@media (max-width: 860px) { .blog-strip__list { grid-template-columns: 1fr; } }

/* Before / we train cases (moved from the home page to /chess-and-emotions) */
.case-grid { margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-soft); display: grid; gap: var(--sp-3); }
.case-card p { color: var(--ink-soft); line-height: 1.55; }
.case-card span { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.3rem; color: var(--ink-faint); }
.case-card__train { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.case-card__train span { color: var(--forest); }
.case-card__train { color: var(--ink) !important; font-weight: 500; }
@media (max-width: 760px) { .case-grid { grid-template-columns: 1fr; } }

/* /contact forms: long <select> options pushed the page wider than the screen on phones */
#booking-form, #contact-form { min-width: 0; max-width: 100% !important; }
#booking-form > *, #contact-form > * { min-width: 0; }
#booking-form select, #contact-form select { width: 100%; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 600px) { .home-head p, .home-lede { font-size: var(--step-0); } .home-section { padding-block: var(--sp-6); } }
/* Illustrations (portal style, off-white background): no heavy frame, crop keeps the knight + tile */
.hero__img { box-shadow: none; background: transparent; mix-blend-mode: multiply; object-position: 50% 72%; }
@media (max-width: 900px) { .hero__img { aspect-ratio: 1 / 1; object-position: 50% 64%; } .hero--v2 .hero__media { max-width: 420px; } }
.audience-card__img { background: #FAF7F3; }

/* ============================================================
   PREMIUM MOTION 2026-10 — quiet, slow, purposeful.
   Everything that moves is inside prefers-reduced-motion:
   no-preference, and hover effects only apply to real pointers,
   so phones get the static layout with nothing stuck "hovered".
   ============================================================ */
:root { --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1); }
html { scroll-padding-top: 92px; }

/* Header condenses and gains depth once the page scrolls (class set in main.js) */
.site-header { transition: box-shadow 0.4s var(--ease-out-soft), background-color 0.4s var(--ease-out-soft); }
.site-header__inner { transition: padding 0.4s var(--ease-out-soft); }
.site-header.is-scrolled { box-shadow: 0 12px 32px -22px rgba(15, 31, 39, 0.45); }
.site-header.is-scrolled .site-header__inner { padding-block: 0.6rem; }

/* Soft petrol glow behind the hero illustration and the booking form */
.hero--v2, #book, #reservar { position: relative; isolation: isolate; overflow: hidden; }
.hero--v2::after, #book::after, #reservar::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(47, 100, 112, 0.16), rgba(47, 100, 112, 0));
}
.hero--v2::after { width: min(70vw, 820px); right: -12vw; top: 50%; transform: translateY(-50%); }
#book::after, #reservar::after { width: min(80vw, 760px); right: -14vw; top: 10%; }
@media (max-width: 900px) { .hero--v2::after { width: 120vw; right: -40vw; top: auto; bottom: -30vw; transform: none; } }

/* Inputs: calm focus halo */
.field input:focus-visible, .field textarea:focus-visible { box-shadow: 0 0 0 4px rgba(15, 76, 99, 0.12); }

/* Text links get a small arrow that moves on hover */
.btn--text { display: inline-flex; align-items: center; gap: 0.4em; }
.btn--text::after { content: "→"; font-weight: 400; transition: transform 0.35s var(--ease-out-soft); }

/* Buttons: light sheen + lift */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-130%);
}

/* Portal mock sits in gentle 3D perspective on wide screens */
@media (min-width: 901px) {
  .portal-teaser .mock { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transform-origin: right center; box-shadow: 30px 40px 70px -40px rgba(15, 31, 39, 0.45); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero: content rises in line by line, illustration settles in, then breathes */
  .hero--v2 .hero__content > * { animation: qc-rise 0.95s var(--ease-out-soft) both; }
  .hero--v2 .hero__content > :nth-child(1) { animation-delay: 0.05s; }
  .hero--v2 .hero__content > :nth-child(2) { animation-delay: 0.15s; }
  .hero--v2 .hero__content > :nth-child(3) { animation-delay: 0.3s; }
  .hero--v2 .hero__content > :nth-child(4) { animation-delay: 0.42s; }
  .hero--v2 .hero__content > :nth-child(5) { animation-delay: 0.52s; }
  .hero--v2 .hero__content > :nth-child(6) { animation-delay: 0.6s; }
  .hero--v2 .hero__media { animation: qc-settle 1.3s var(--ease-out-soft) 0.2s both; }
  .hero--v2 .hero__img { animation: qc-breathe 9s ease-in-out 1.6s infinite; }

  /* Scroll reveal: slower, with a short blur-to-sharp (overrides components.css) */
  .js-reveal .reveal { transform: translateY(24px); filter: blur(4px);
    transition: opacity 0.95s var(--ease-out-soft) calc(var(--stagger-i, 0) * 90ms),
                transform 0.95s var(--ease-out-soft) calc(var(--stagger-i, 0) * 90ms),
                filter 0.95s var(--ease-out-soft) calc(var(--stagger-i, 0) * 90ms); }
  .js-reveal .reveal.is-visible { filter: none; }

  /* Method: the + and → appear after the cards */
  .js-reveal .method-flow__op.reveal { transform: scale(0.6); }
  .js-reveal .method-flow__op.reveal.is-visible { transform: none; }

  /* Rating stars shimmer once when the hero loads */
  .hero--v2 .rating__stars { background: linear-gradient(90deg, #B8860B 40%, #F0D38A 50%, #B8860B 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: qc-shimmer 2.4s ease 1s both; }

  @media (hover: hover) and (pointer: fine) {
    .audience-card, .method-step, .quote-card, .post-mini, .case-card, .book__form {
      transition: transform 0.5s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft), border-color 0.3s ease;
    }
    .audience-card:hover, .method-step:hover, .quote-card:hover, .post-mini:hover, .case-card:hover {
      transform: translateY(-6px); box-shadow: var(--shadow-lift);
    }
    .audience-card__img { transition: transform 1s var(--ease-out-soft); }
    .audience-card:hover .audience-card__img { transform: scale(1.045); }
    .method-step__icon { transition: transform 0.5s var(--ease-out-soft); }
    .method-step:hover .method-step__icon { transform: rotate(-6deg) scale(1.08); }
    .btn--primary:hover { transform: translateY(-2px); }
    .btn--primary::after { transition: transform 0.9s var(--ease-out-soft); }
    .btn--primary:hover::after { transform: translateX(130%); }
    .btn--text:hover::after { transform: translateX(4px); }
    .portal-teaser .mock { transition: transform 1s var(--ease-out-soft), box-shadow 1s var(--ease-out-soft); }
    .portal-teaser:hover .mock { transform: perspective(1400px) rotateY(0) rotateX(0); }
    .wa-float:hover { transform: translateY(-3px); }
  }
}

@keyframes qc-rise { from { opacity: 0; transform: translateY(20px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qc-settle { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes qc-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes qc-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ============================================================
   LIGHTER HOME 2026-10-13 — illustrated method, portal tiles,
   brand name visible on phones
   ============================================================ */
.method-flow--visual .method-step { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.method-step__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; background: #F7F6F2; }
.method-step__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.method-step__body .method-step__label { margin-top: 0; }
.method-step__body p { margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--step-0); line-height: 1.5; }
.method-step--result .method-step__body p { color: rgba(247, 246, 242, 0.85); }
.method-step--result .method-step__img { border-bottom: 1px solid rgba(247, 246, 242, 0.12); }
@media (max-width: 900px) {
  /* Phones/tablets: each step becomes a compact row, picture left, words right */
  .method-flow--visual { max-width: 560px; margin-inline: auto; gap: var(--sp-2); }
  .method-flow--visual .method-step { flex-direction: row; align-items: stretch; }
  .method-step__img { width: 38%; flex: none; aspect-ratio: auto; height: auto; min-height: 100%; object-fit: cover; }
  .method-step__body { align-self: center; }
  .method-step__body { padding: var(--sp-3) var(--sp-4); }
  .method-step__body h3 { font-size: var(--step-1); }
  .method-step__body p { font-size: var(--step--1); }
  .method-flow--visual .method-flow__op { font-size: 1.6rem; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .method-step__img { transition: transform 0.9s var(--ease-out-soft); }
  .method-step:hover .method-step__img { transform: scale(1.04); }
}

/* Audience cards: one line under the title */
.audience-card__body > p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.5; }

/* Portal teaser: three illustrated tiles instead of six bullets */
.portal-tiles { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.portal-tiles li { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--step--1); line-height: 1.4; color: var(--ink-soft); }
.portal-tiles img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: #FBFAF7; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.portal-tiles strong { display: block; color: var(--ink); font-size: var(--step-0); }
.portal-more { margin-top: var(--sp-4); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; max-width: 52ch; }
@media (max-width: 480px) {
  .portal-tiles { gap: var(--sp-2); }
  .portal-tiles strong { font-size: var(--step--1); }
}

/* Teacher: the photo carries more of the block now that the bio is short */
.teacher { grid-template-columns: 240px minmax(0, 1fr); }
.teacher__photo { width: 240px; }
@media (max-width: 680px) { .teacher { grid-template-columns: 1fr; } .teacher__photo { width: 160px; } }
.home-section .quote-card blockquote { font-size: var(--step-1); line-height: 1.4; }
@media (max-width: 600px) { .quote-card blockquote, .home-section .quote-card blockquote { font-size: var(--step-0); line-height: 1.5; } }

/* Brand: keep name + tagline on phones (they used to hide below 420px) */
@media (max-width: 420px) {
  .site-header .brand__text { display: flex; }
  .site-header .brand { gap: 0.45rem; }
  .site-header .brand__mark { width: 32px; height: 32px; }
  .site-header .brand__name { font-size: 1.02rem; }
  .site-header .brand__sub { font-size: 0.5rem; letter-spacing: 0.2em; margin-top: 0.22rem; }
  .site-header .lang-switch { padding: 0.25em 0.55em; font-size: 0.72rem; }
  .site-header .header-actions .btn { padding: 0.55em 0.8em; }
  .site-header .nav-toggle { width: 38px; }
}
/* …and on small laptops (861–1240px), where the full nav is shown, a compact brand instead of none */
@media (max-width: 1240px) and (min-width: 861px) {
  .site-header .brand__text { display: flex; }
  .site-header .brand { gap: 0.5rem; }
  .site-header .brand__name { font-size: 1.05rem; }
  .site-header .brand__sub { font-size: 0.5rem; letter-spacing: 0.2em; margin-top: 0.22rem; }
}
.nav-toggle { flex: none; }
@media (max-width: 350px) {
  .site-header__inner, .site-header .header-actions { gap: 4px; }
  .site-header .brand__mark { width: 28px; height: 28px; }
  .site-header .brand__name { font-size: 0.92rem; }
  .site-header .brand__sub { font-size: 0.45rem; letter-spacing: 0.16em; }
  .site-header .header-actions .btn { padding: 0.55em 0.7em; }
  .site-header .nav-toggle { width: 34px; }
}

/* ============================================================
   CHESS & EMOTIONS PAGE 2026-10-13 — same language as the home
   ============================================================ */
.hero--page .hero__img { object-position: 50% 70%; }
.gap-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-7); align-items: center; }
.gap-grid__text p { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; max-width: 58ch; }
.gap-grid__text .home-h2 + p { margin-top: var(--sp-4); }
.quote-panel { position: relative; margin: 0; background: var(--forest); color: var(--forest-ink); border-radius: var(--radius-lg); padding: var(--sp-7) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-lift); overflow: hidden; }
.quote-panel::before { content: "“"; position: absolute; top: -0.12em; left: 0.18em; font-family: var(--font-display); font-size: 9rem; line-height: 1; color: rgba(168, 205, 214, 0.22); }
.quote-panel::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(168, 205, 214, 0.18), transparent 70%); }
.quote-panel blockquote { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.2; color: var(--forest-ink); text-wrap: balance; }
.quote-panel figcaption { position: relative; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(247, 246, 242, 0.18); color: rgba(247, 246, 242, 0.82); font-size: var(--step--1); line-height: 1.6; }
@media (max-width: 900px) {
  .gap-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .quote-panel { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
}

.pattern-grid { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.pattern-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-4) var(--sp-5); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: var(--sp-2); }
.pattern-card__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sage); color: var(--forest); font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; }
.pattern-card h3 { margin-top: var(--sp-2); font-size: var(--step-1); line-height: 1.25; }
.pattern-card p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.pattern-close { margin: var(--sp-5) auto 0; max-width: 62ch; text-align: center; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--ink); }
@media (max-width: 1060px) { .pattern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .pattern-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
  .pattern-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
  .pattern-card__n { width: 34px; height: 34px; }
  .pattern-card h3 { margin-top: 0; flex: 1; font-size: var(--step-0); }
  .pattern-card p { flex-basis: 100%; }
}

.audience-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 760px) { .audience-grid--two { grid-template-columns: 1fr; max-width: 560px; } }

.not-therapy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: start; max-width: 880px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--forest); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-soft); }
.not-therapy img { width: 56px; height: 56px; }
.not-therapy h2 { font-size: var(--step-3); line-height: 1.15; }
.not-therapy p { margin-top: var(--sp-3); color: var(--ink-soft); font-size: var(--step-0); line-height: 1.65; }
@media (max-width: 600px) { .not-therapy { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5); } .not-therapy img { width: 44px; height: 44px; } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pattern-card { transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s var(--ease-out-soft); }
  .pattern-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}
/* Longer first nav item ("Chess & emotions"): on small laptops the header CTA uses its short label */
@media (max-width: 1100px) and (min-width: 861px) {
  .header-actions .btn .btn-full-label { display: none; }
  .header-actions .btn .btn-short-label { display: inline; }
  .main-nav__list { gap: var(--sp-3); }
}

/* ============================================================
   CENTERED LAYOUT 2026-10-13 — section heads and narrow blocks sit
   on the page's centre line on desktop, instead of hugging the left
   ============================================================ */
.home-head:not(.home-head--split), .pp-head { margin-inline: auto; text-align: center; }
.home-head:not(.home-head--split) p, .pp-head p { margin-inline: auto; }
.home-head:not(.home-head--split) .eyebrow, .pp-head .eyebrow { justify-content: center; }
/* Centred heads get a matching dash after the label too */
.home-head:not(.home-head--split) .eyebrow::after, .pp-head .eyebrow::after { content: ""; width: 1.1em; height: 1px; background: currentColor; opacity: 0.6; }
.pp-faq, .teacher, .audience-grid--two, .trust-note { margin-inline: auto; }
.trust-note { margin-inline: auto !important; }
.audience-grid { margin-inline: auto; }
.home-section .quote-more { text-align: center; }
.home-head .rating { margin-top: var(--sp-3); }

/* Page headers (about, contact, privacy) centred like the section heads */
.page-header { text-align: center; }
.page-header h1, .page-header p { margin-inline: auto; }
.page-header .eyebrow::after { content: ""; width: 1.1em; height: 1px; background: currentColor; opacity: 0.6; }

/* Contact: section intros centred; the plan form becomes a centred card */
main > section.section.container > .eyebrow { display: flex; justify-content: center; }
main > section.section.container > .eyebrow::after { content: ""; width: 1.1em; height: 1px; background: currentColor; opacity: 0.6; }
main > section.section.container > :is(h2, p) { margin-inline: auto; text-align: center; }
main > section.section.container > h2 + p { max-width: 60ch; }
#booking-form { width: min(100%, 680px); margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-soft); }
#booking-form > button[type="submit"], #booking-form > .btn { justify-self: stretch; justify-content: center; }
@media (max-width: 600px) { #booking-form { padding: var(--sp-4); } }
.contact-grid { max-width: 1040px; margin-inline: auto; }
#contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-soft); }
@media (max-width: 600px) { #contact-form { padding: var(--sp-4); } }

/* Big pull quote (about): centred statement */
section > .container > .pull-quote { max-width: 30ch; margin-inline: auto; text-align: center; border-left: 0; padding-left: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); line-height: 1.3; }
section > .container > .pull-quote::before { content: ""; display: block; width: 48px; height: 2px; margin: 0 auto var(--sp-4); background: var(--forest); }

/* About: the photo stays in view while the story scrolls */
@media (min-width: 901px) { .about-section__inner { align-items: start; } .about-photo { position: sticky; top: 104px; } }

/* Grids whose last row isn't full: centre the leftovers instead of leaving a hole on the right */
.quote-grid, .blog-strip__list { display: flex; flex-wrap: wrap; justify-content: center; }
.quote-grid > *, .blog-strip__list > * { flex: 0 1 calc((100% - 2 * var(--sp-4)) / 3); min-width: 0; }
@media (max-width: 960px) { .quote-grid { margin-inline: auto; } .quote-grid > * { flex-basis: 100%; } }
@media (max-width: 860px) { .blog-strip__list > * { flex-basis: 100%; } }
@media (min-width: 961px) { .pp-grid > :last-child:nth-child(3n+1) { grid-column: 2; } }
@media (min-width: 621px) and (max-width: 960px) { .pp-grid > :last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--sp-4) / 2); } }

/* Blog strip: heading centred, "see all" under it */
.blog-strip .home-head--split { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); }

/* ---- More premium motion (2026-10-13) ---- */
/* FAQ: the "+" turns into a "×" and the answer slides open (where the browser supports animating details) */
.pp-faq summary::after { content: "+"; transition: transform 0.35s var(--ease-out-soft); }
.pp-faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.pp-faq details { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.pp-faq details[open] { border-color: rgba(15, 76, 99, 0.35); }
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .pp-faq { interpolate-size: allow-keywords; }
    .pp-faq details::details-content { block-size: 0; overflow: clip; opacity: 0;
      transition: block-size 0.45s var(--ease-out-soft), opacity 0.35s ease, content-visibility 0.45s allow-discrete; }
    .pp-faq details[open]::details-content { block-size: auto; opacity: 1; }
  }
  /* Eyebrow dashes draw themselves in when their block is revealed */
  .js-reveal .reveal .eyebrow::before, .js-reveal .reveal .eyebrow::after { transform: scaleX(0); transition: transform 0.8s var(--ease-out-soft) 0.25s; }
  .js-reveal .reveal .eyebrow::before { transform-origin: right; }
  .js-reveal .reveal .eyebrow::after { transform-origin: left; }
  .js-reveal .reveal.is-visible .eyebrow::before, .js-reveal .reveal.is-visible .eyebrow::after { transform: none; }
  /* The glow inside the petrol quote panel drifts very slowly */
  .quote-panel::after { animation: qc-drift 14s ease-in-out infinite alternate; }
  @keyframes qc-drift { from { transform: translate(0, 0); } to { transform: translate(-60px, -40px) scale(1.15); } }
}
@media (hover: hover) and (pointer: fine) {
  .pp-faq details:hover { border-color: rgba(15, 76, 99, 0.35); box-shadow: var(--shadow-lift); }
  .pattern-card__n { transition: background-color 0.35s ease, color 0.35s ease; }
  .pattern-card:hover .pattern-card__n { background: var(--forest); color: var(--forest-ink); }
}
/* On /contact the booking form sits in the middle, so its glow does too */
section.section.container#book::after, section.section.container#reservar::after { right: auto; left: 50%; translate: -50% 0; top: 18%; }

/* ============================================================
   BLOG 2026-10-13 — same language as the rest of the site.
   Each post is illustrated by its category's picture.
   ============================================================ */
.blog-hero .category-filter { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.blog-hero .category-filter a { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.45em 0.9em; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.blog-hero .category-filter a:hover { border-color: var(--forest); color: var(--forest); }

.post-grid { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); }
.post-grid > * { flex: 0 1 calc((100% - 2 * var(--sp-4)) / 3); min-width: 0; }
@media (max-width: 960px) { .post-grid > * { flex-basis: calc((100% - var(--sp-4)) / 2); } }
@media (max-width: 620px) { .post-grid > * { flex-basis: 100%; } }
.post-grid__empty { margin-top: var(--sp-5); text-align: center; color: var(--ink-soft); }
.post-card2 { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); color: inherit; text-decoration: none; }
.post-card2__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #F7F6F2; }
.post-card2__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1; }
.post-card2__cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rust-deep); }
.post-card2__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.post-card2__excerpt { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card2__meta { margin-top: auto; padding-top: var(--sp-2); font-size: 0.8rem; color: var(--ink-faint); }

.topic-grid { margin-top: var(--sp-6); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-4); }
.topic-card { grid-column: span 2; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); scroll-margin-top: 110px; }
.topic-card:nth-child(4) { grid-column: 2 / span 2; }
.topic-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #F7F6F2; }
.topic-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.topic-card h3 { font-size: var(--step-1); }
.topic-card p { color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.topic-card__list { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: grid; gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.topic-card__list a { font-weight: 600; color: var(--forest); font-size: var(--step--1); line-height: 1.4; }
.topic-card__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topic-card__none { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.72rem !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest) !important; }
@media (max-width: 960px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .topic-card, .topic-card:nth-child(4) { grid-column: auto; } .topic-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--sp-4) / 2); } }
@media (max-width: 620px) { .topic-grid { grid-template-columns: 1fr; } .topic-card:last-child { width: 100%; } }

/* Post page */
.article-hero--v2 { padding-block: var(--sp-6) var(--sp-5); position: relative; isolation: isolate; overflow: hidden; }
.article-hero--v2__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sp-6); align-items: center; }
.article-hero--v2 h1 { margin-top: var(--sp-3); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.article-hero--v2 .article-hero__dek { margin-top: var(--sp-4); font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 56ch; }
.article-hero--v2 .article-hero__meta { margin-top: var(--sp-3); }
.article-hero--v2__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); background: #F7F6F2; box-shadow: var(--shadow-soft); }
@media (max-width: 900px) {
  .article-hero--v2__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .article-hero--v2__img { max-width: 560px; }
}
.article-body .pull-quote { border-left: 0; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6); background: var(--forest); color: var(--forest-ink); border-radius: var(--radius-lg); font-style: normal; position: relative; }
.article-body .pull-quote::before { content: "“"; position: absolute; left: 0.25em; top: 0.05em; font-size: 3.4rem; line-height: 1; color: rgba(168, 205, 214, 0.45); }
.article-body .aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.article-body .author-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-soft); }
.related-articles .post-grid { margin-top: var(--sp-5); }

/* Home blog strip cards get the picture too */
.post-mini { overflow: hidden; }
.post-mini__img { display: block; width: calc(100% + 2 * var(--sp-4)); max-width: none; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-2); height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #F7F6F2; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .post-card2, .topic-card { transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s var(--ease-out-soft), border-color 0.45s ease; }
  .post-card2:hover, .topic-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(15, 76, 99, 0.25); }
  .post-card2__img, .topic-card__img, .post-mini__img { transition: transform 0.9s var(--ease-out-soft); }
  .post-card2:hover .post-card2__img, .topic-card:hover .topic-card__img, .post-mini:hover .post-mini__img { transform: scale(1.045); }
  .post-card2:hover .post-card2__title { color: var(--forest); }
}
/* Footer brand: name + tagline on phones too */
@media (max-width: 420px) { .brand--footer .brand__text { display: flex; } }