/* =============================================================
   Dante Alighieri Málaga — styles
   Identity: Società Dante Alighieri (ink #222221 + azzurro Málaga),
   the Didone "D" of the key visual, the azzurro diagonal.
   ============================================================= */

/* 0. Fonts: Archivo, self-hosted (no request to Google, no visitor IP sent to third parties) */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens ---------------------------------------------------- */
:root {
  --ink: #222221;
  --ink-2: #44443f;
  --ink-3: #6b6b66;
  --paper: #ffffff;
  --cielo: #eef7fc;
  --cielo-2: #dff0f9;
  --azzurro: #5ec2e6;
  --azzurro-logo: #7ebee7;
  --azzurro-deep: #0d6690;
  --line: #d8e3ea;
  --line-dark: rgba(255, 255, 255, .16);

  /* One family, Archivo: condensed and bold for headings (like the
     grotesque of the official logo), normal width for reading. */
  --sans: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --w-head: 84%;
  --w-meta: 88%;
  --w-fig: 78%;

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.3rem, 1.15rem + .7vw, 1.55rem);
  --step-3: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  --step-4: clamp(2rem, 1.45rem + 2.5vw, 3.15rem);
  --step-5: clamp(2.55rem, 1.7rem + 4vw, 5rem);

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --text: 42rem;
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius: 14px;
  --radius-ctl: 10px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --top-h: 0px;
  --bar-h: 66px;
  --header-h: var(--bar-h);
  --logo-h: 42px;
  --logo-lg-h: 60px;
  --mbar-h: 64px;
}

/* 2. Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
ul[role="list"], .plain { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--azzurro); color: var(--ink); }
html { scrollbar-color: #9aa7ae transparent; accent-color: var(--azzurro-deep); }
input, textarea { caret-color: var(--azzurro-deep); }
:focus-visible { outline: 2px solid var(--azzurro-deep); outline-offset: 3px; border-radius: 2px; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* 3. Utilities -------------------------------------------------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container--text { max-width: calc(var(--text) + 2 * var(--gutter)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; padding: .6rem 1rem; background: var(--ink); color: #fff; border-radius: var(--radius-ctl); }
.skip-link:focus { top: 1rem; }

/* 4. Typography ------------------------------------------------- */
.display, .h1, .h2, .h3, .post-title, .prose h2, .prose h3 {
  font-family: var(--sans);
  font-stretch: var(--w-head);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.08;
}
.display { font-size: var(--step-5); letter-spacing: -.02em; line-height: 1; }
.h1 { font-size: var(--step-5); letter-spacing: -.02em; line-height: 1.02; }
.h2 { font-size: var(--step-4); letter-spacing: -.012em; line-height: 1.08; }
.h3 { font-size: var(--step-2); line-height: 1.3; letter-spacing: -.005em; }
.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.muted { color: var(--ink-3); }
.small { font-size: var(--step--1); }
.label {
  font-family: var(--sans);
  font-stretch: var(--w-meta);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--azzurro-deep);
}
.link {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
  font-weight: 600; color: var(--azzurro-deep);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em;
}
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-thickness: 2px; } }
.prose { max-width: var(--text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-3); margin-top: 2em; }
.prose .h2 { font-size: var(--step-4); }
.prose h3 { font-size: var(--step-2); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--azzurro-deep); text-underline-offset: .2em; }
.prose strong { font-weight: 650; }
.prose blockquote { position: relative; font-family: var(--sans); font-stretch: var(--w-head); font-weight: 600; font-size: var(--step-2); line-height: 1.35; padding-top: 1.6rem; }
.prose blockquote::before { content: ""; position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.1rem; background: var(--azzurro); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* 5. Components ------------------------------------------------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .8rem 1.5rem;
  font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none; text-align: center;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius-ctl);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--azzurro); --btn-fg: var(--ink); --btn-bd: var(--azzurro); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { --btn-bg: #7dd0ee; --btn-bd: #7dd0ee; } }
@media (hover: hover) and (pointer: fine) { .btn--dark:hover { --btn-bg: #000; } }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; } }
.on-dark .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.6); }
@media (hover: hover) and (pointer: fine) { .on-dark .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; } }
.btn--sm { min-height: 42px; padding: .55rem 1.05rem; font-size: .95rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.round-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink);
  transition: background-color .2s, color .2s;
}
.round-btn svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .round-btn:hover { background: var(--ink); color: #fff; } }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.chips li {
  font-stretch: var(--w-meta); font-weight: 600; font-size: .9rem;
  padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: #fff;
}
.on-dark .chips li { background: transparent; border-color: var(--line-dark); }

.notice {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.15rem; margin-top: 1.5rem;
  background: var(--cielo); border-radius: var(--radius);
  font-size: .98rem; line-height: 1.5;
}
.notice svg { width: 22px; height: 22px; flex: none; color: var(--azzurro-deep); margin-top: .1rem; }
.notice a { color: var(--azzurro-deep); font-weight: 600; }

.stars { display: inline-flex; gap: 2px; color: var(--ink); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

.check-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.check-list li { position: relative; padding-left: 1.9rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1.05rem; height: 1.05rem;
  background: var(--azzurro); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.facts dt { font-stretch: var(--w-meta); font-weight: 600; color: var(--ink-2); }
.facts dd { font-weight: 500; }

.hours { display: grid; gap: .4rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .4rem; }
.hours dt { color: var(--ink-2); }
.hours dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.on-dark .hours div { border-color: var(--line-dark); }
.on-dark .hours dt { color: rgba(255,255,255,.72); }

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .92rem; color: var(--ink-3); margin-bottom: 1.4rem; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; } }

/* Header ---------------------------------------------------- */
/* Two layers. On desktop the top layer gives the official logo room, with
   the institutional line and contacts; the bar below holds the menu. The header
   sticks with a negative top equal to the top layer, so scrolling leaves only
   the bar, where a compact logo then appears: the brand never leaves the screen.
   The translucent background lives on ::before: a backdrop-filter on an
   ancestor would trap the fixed mobile menu (the bug seen on phones). */
.site-header { position: sticky; top: calc(-1 * var(--top-h)); z-index: 50; }
.header-top { display: none; }
.header-bar { position: relative; }
.header-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled .header-bar::before { border-bottom-color: var(--line); box-shadow: 0 8px 24px -16px rgba(34, 34, 33, .22); }
.nav-open .header-bar::before { background: #fff; border-bottom-color: var(--line); box-shadow: none; }
.header-inner { position: relative; display: flex; align-items: center; gap: 1rem; height: var(--bar-h); }
/* The logo is sized by height and never shrinks: the official artwork keeps its proportions */
.brand { display: flex; align-items: center; flex: none; }
.brand img { width: auto; max-width: none; }
.brand--sm { margin-right: auto; }
.brand--sm img { height: var(--logo-h); }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .55rem; height: 44px; padding: 0 .9rem 0 .8rem; margin-right: -.4rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-ctl); font-weight: 600; font-size: .95rem;
}
.menu-toggle-label { line-height: 1; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease-out), background-color .2s; }
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; }
.burger::after { top: 6px; }
.menu-toggle[aria-expanded="true"] { border-color: var(--ink); }
.menu-toggle[aria-expanded="true"] .burger { background: transparent; }
.menu-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }
.header-cta { display: none; }

/* Mobile menu: a full panel under the bar, actions at the bottom within thumb reach */
.main-nav {
  position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; z-index: 49;
  display: flex; flex-direction: column;
  background: #fff; padding: .25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility 0s .28s;
}
.nav-open .main-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out); }
.nav-open, .nav-open body { overflow: hidden; }
.nav-list { list-style: none; padding: 0; }
.nav-list > li { border-bottom: 1px solid var(--line); position: relative; }
.nav-link { display: flex; align-items: center; min-height: 56px; padding: .4rem 0; font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--azzurro-deep); }
.has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.sub-toggle { width: 48px; height: 48px; display: grid; place-items: center; margin-right: -12px; }
.sub-toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sub { grid-column: 1 / -1; list-style: none; padding: 0 0 .9rem; display: none; }
.sub.is-open { display: grid; gap: .25rem; }
.sub a { display: grid; gap: .05rem; padding: .6rem .9rem; border-radius: var(--radius-ctl); background: var(--cielo); text-decoration: none; }
.sub a[aria-current="page"] { background: var(--cielo-2); }
.sub-label { font-weight: 650; }
.sub-note { font-size: .88rem; color: var(--ink-2); }
.nav-extra { display: grid; gap: .6rem; margin-top: auto; padding-top: 1.5rem; }
.nav-extra .btn { width: 100%; }
.nav-extra-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.nav-hours { margin-top: .4rem; font-size: .9rem; color: var(--ink-2); text-align: center; }

/* Hero (home) ------------------------------------------------ */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 4vw, 3.5rem) 0; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 1rem; }
.hero .display { max-width: 12ch; }
.hero .lead { margin-top: 1.4rem; }
.hero-note { margin-top: 1.2rem; font-size: .98rem; color: var(--ink-2); }
.hero-note a { color: var(--azzurro-deep); font-weight: 600; }
.hero-art { position: relative; margin-inline: calc(var(--gutter) * -1) calc(var(--gutter) * -1); aspect-ratio: 840 / 1080; max-height: 72svh; justify-self: end; width: calc(100% + 2 * var(--gutter)); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
@media (max-width: 959px) { .hero-art { aspect-ratio: auto; height: min(62vw, 420px); } .hero-art img { object-position: 55% 52%; } }
.hero-trust { list-style: none; padding: 1.3rem 0 0; margin-top: 2.2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .9rem 2.2rem; font-size: .95rem; color: var(--ink-2); }
.hero-trust li, .hero-trust a { display: inline-flex; align-items: center; gap: .6rem; }
.hero-trust a { text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) { .hero-trust a:hover span { text-decoration: underline; text-underline-offset: .2em; } }
.hero-trust strong { color: var(--ink); font-weight: 650; }
.hero-trust img { height: 24px; width: auto; }
.hero-trust .stars svg { width: 14px; height: 14px; }
.trust-mark { width: 14px; height: 14px; background: var(--azzurro); clip-path: polygon(100% 0, 100% 100%, 0 100%); flex: none; }

/* Page hero (inner pages) ------------------------------------ */
.page-hero { position: relative; padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.page-hero-grid { display: grid; gap: 2.2rem; align-items: end; }
.page-hero .h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 1.25rem; }
.page-hero .chips { margin-top: 1.6rem; }
.wedge-figure { position: relative; isolation: isolate; }
.wedge-figure img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; filter: grayscale(1) contrast(1.05); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.wedge-figure::before {
  content: ""; position: absolute; z-index: -1; right: -6%; bottom: -10%; width: 70%; height: 92%;
  background: var(--azzurro); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.wedge-figure--color img { filter: none; }
.wedge-figure figcaption { position: absolute; left: 0; bottom: -1.9rem; font-size: .82rem; color: var(--ink-3); }

/* Sections --------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section--tint { background: var(--cielo); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head .lead { margin-top: .9rem; }
.on-dark { background: var(--ink); color: #fff; }
.on-dark .lead, .on-dark .muted { color: rgba(255, 255, 255, .76); }
.on-dark .link { color: var(--azzurro); }
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.split > * { min-width: 0; }
.stack > * + * { margin-top: 1rem; }

/* Agenda --------------------------------------------------------- */
.agenda { border-block: 1px solid var(--line); background: #fff; }
.agenda-inner { display: grid; gap: 0; }
.agenda-title { padding: 1.1rem 0 .4rem; font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.35rem; font-weight: 700; }
.agenda-list { list-style: none; padding: 0; display: grid; }
.agenda-item { display: grid; grid-template-columns: 4.2rem 1fr; gap: .9rem; align-items: center; padding: .9rem 0; border-top: 1px solid var(--line); }
.agenda-item:first-child { border-top: 0; }
.agenda-date { text-align: center; line-height: 1; }
.agenda-date b { display: block; font-family: var(--sans); font-stretch: var(--w-fig); font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; }
.agenda-date span { font-size: .8rem; font-stretch: var(--w-meta); font-weight: 600; color: var(--ink-3); }
.agenda-what { font-weight: 600; line-height: 1.3; }
.agenda-what a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .agenda-what a:hover { color: var(--azzurro-deep); text-decoration: underline; } }
.agenda-what small { display: block; font-weight: 400; color: var(--ink-3); font-size: .9rem; margin-top: .15rem; }
.is-past { display: none !important; }

/* Course list (listino) -------------------------------------- */
.courses { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.course {
  position: relative; display: grid; gap: .6rem 2rem;
  padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--line);
}
.course-name { font-family: var(--sans); font-stretch: var(--w-head); font-size: var(--step-3); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.course-name a { text-decoration: none; }
.course-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.course-desc { color: var(--ink-2); max-width: 36rem; }
.course-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .95rem; }
.course-meta span { font-stretch: var(--w-meta); font-weight: 600; color: var(--ink-2); }
.course-price { font-family: var(--sans); font-stretch: var(--w-fig); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.course-price small { display: block; font-family: var(--sans); font-size: .85rem; color: var(--ink-3); font-weight: 400; }
.course-go { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--azzurro-deep); }
.course-go svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .course:hover .course-go svg { transform: translateX(4px); } }
.course::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--azzurro);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .course:hover::before { transform: scaleX(1); } }
.courses-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

/* Reasons --------------------------------------------------------- */
.reasons { display: grid; gap: 2rem 3rem; }
.reason h3 { font-family: var(--sans); font-stretch: var(--w-head); font-size: var(--step-2); font-weight: 700; line-height: 1.3; margin-bottom: .6rem; }
.reason p { color: var(--ink-2); }
.reason { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.reason::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.4rem; height: 2px; background: var(--azzurro); }

/* PLIDA band ------------------------------------------------- */
.plida-band { position: relative; overflow: hidden; }
.plida-band::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: min(30%, 440px); display: none;
  background: var(--azzurro); clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%); opacity: .95; pointer-events: none;
}
.plida-band .container { position: relative; z-index: 1; }
.plida-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-bottom: 2rem; }
.plida-logos img { height: 46px; width: auto; }
.plida-mark { display: inline-flex; padding: .7rem 1rem; background: #fff; border-radius: var(--radius); }
.plida-mark img { height: 30px; }

/* Tables (calendar, prices) ---------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table { min-width: 34rem; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-stretch: var(--w-meta); font-weight: 600; font-size: .92rem; color: var(--ink-2); background: var(--cielo); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table td:first-child, .table tbody th { font-weight: 600; white-space: nowrap; }
.table tbody th { font-stretch: 100%; color: inherit; background: none; font-size: inherit; }
.table .tag { display: inline-block; font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--cielo-2); color: var(--azzurro-deep); margin-left: .4rem; }
.table tr.row-past td { color: var(--ink-3); }
.table tr.row-past td:first-child::after, .table tr.row-past th::after { content: " · realizado"; font-weight: 400; font-size: .85rem; }
.table tr.row-next { background: #fbfdfe; box-shadow: inset 3px 0 0 var(--azzurro); }
.on-dark .table-wrap { border-color: var(--line-dark); background: transparent; }
.on-dark .table th, .on-dark .table td { border-color: var(--line-dark); }
.on-dark .table thead th { background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); }
.on-dark .table tr.row-next { background: rgba(94,194,230,.08); }
.on-dark .table tr.row-past td { color: rgba(255,255,255,.58); }

.prices { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price { background: #fff; padding: 1.6rem 1.5rem 1.7rem; display: grid; gap: .5rem; align-content: start; }
.price-name { font-stretch: var(--w-meta); font-weight: 600; color: var(--ink-2); }
.price .price-amount { font-family: var(--sans); font-stretch: var(--w-fig); font-variant-numeric: tabular-nums; font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); font-weight: 700; line-height: 1; }
.price .price-amount small { font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--ink-2); margin-left: .2rem; }
.price p { color: var(--ink-2); font-size: .98rem; }
.price .price-name { font-size: 1rem; }
.price--feature { background: var(--ink); color: #fff; }
.price--feature .price-name, .price--feature p, .price--feature .price .price-amount small { color: rgba(255,255,255,.75); }

/* Media + text ------------------------------------------------ */
.media { position: relative; }
.media img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.media--diag img { clip-path: polygon(0 0, 100% 0, 100% 86%, 78% 100%, 0 100%); border-radius: 0; }

/* Reviews --------------------------------------------------- */
.reviews { background: var(--cielo); }
.reviews-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; }
.rating { display: inline-flex; align-items: center; gap: .9rem; text-decoration: none; }
.rating-score { font-family: var(--sans); font-stretch: var(--w-fig); font-variant-numeric: tabular-nums; font-size: 3.4rem; line-height: .9; font-weight: 700; }
.rating-meta { display: grid; gap: .2rem; font-size: .92rem; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .rating:hover .rating-meta > span:last-child { text-decoration: underline; } }
.reviews-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 400px); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .4rem;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.reviews-track::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; display: flex; flex-direction: column; gap: 1rem; padding: 1.6rem 1.5rem 1.4rem; background: #fff; border-radius: var(--radius); }
.review blockquote { flex: 1; }
.review blockquote p { font-size: 1.0625rem; line-height: 1.62; font-weight: 400; color: var(--ink); }
.review figcaption { display: grid; gap: .1rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .95rem; }
.review figcaption span { color: var(--ink-3); }
.reviews-nav { display: flex; align-items: center; gap: .6rem; margin-top: 1.6rem; }
.reviews-nav .link { margin-left: auto; }

/* News -------------------------------------------------------- */
.news-grid { display: grid; gap: 2.2rem 1.6rem; }
.news-card { display: grid; gap: 1rem; align-content: start; }
.news-media { display: block; overflow: hidden; border-radius: var(--radius); background: var(--cielo); aspect-ratio: 4 / 5; }
.news-media img { object-position: 50% 0; }
.news-media--contain { display: grid; place-items: center; background: #fff; border: 1px solid var(--line); }
.news-media--contain img { object-fit: contain; height: auto; }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .news-card:hover .news-media img { transform: scale(1.03); } }
.news-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .9rem; color: var(--ink-3); }
.news-meta span { font-stretch: var(--w-meta); font-weight: 600; color: var(--azzurro-deep); }
.news-title { font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.35rem; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.news-title a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .news-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } }
.news-excerpt { color: var(--ink-2); }
.card-status { font-size: .88rem; color: var(--ink-3); }
.news-lead { margin-bottom: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.news-card--big .news-title { font-size: var(--step-3); }

/* Post ------------------------------------------------------ */
.post-head { padding-top: clamp(2rem, 4vw, 3.5rem); }
.post-title { font-size: var(--step-4); font-weight: 500; margin-top: .6rem; }
.post-cover { margin-top: 2.2rem; }
.post-cover img { width: 100%; max-height: 70vh; object-fit: contain; background: var(--cielo); border-radius: var(--radius); }
.post-body { padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-section); }
.post-body .prose { font-size: 1.1rem; }
.event-box { display: grid; gap: 0; margin: 2rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.event-box > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); }
.event-box > div:last-child { border-bottom: 0; }
.event-box dt { color: var(--ink-3); font-stretch: var(--w-meta); font-weight: 600; }

/* Team ------------------------------------------------------ */
.team { display: grid; gap: 2rem 1.4rem; grid-template-columns: repeat(2, 1fr); }
.member img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--cielo); }
.member h3 { font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.35rem; font-weight: 700; margin-top: .9rem; line-height: 1.3; }
.member p { color: var(--ink-2); font-size: .95rem; margin-top: .2rem; }
.member a { color: var(--azzurro-deep); font-size: .92rem; word-break: break-all; }

/* Timeline ------------------------------------------------- */
.timeline { list-style: none; padding: 0; position: relative; display: grid; gap: 2rem; }
.timeline::before { content: ""; position: absolute; left: 3.6rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 7.2rem 1fr; gap: .2rem 1.5rem; position: relative; }
.timeline li::after { content: ""; position: absolute; left: calc(3.6rem - 5px); top: .55rem; width: 11px; height: 11px; background: var(--azzurro); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.timeline b { font-family: var(--sans); font-stretch: var(--w-fig); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; line-height: 1; background: var(--paper); position: relative; z-index: 1; padding-right: .5rem; width: max-content; }
.section--tint .timeline b { background: var(--cielo); }
.timeline p { color: var(--ink-2); }
.timeline strong { color: var(--ink); }

/* Chooser (¿Qué curso elijo?) --------------------------------- */
.chooser { display: grid; gap: 1.5rem; }
.chooser-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.chooser-tab {
  padding: .7rem 1.05rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-weight: 600; font-size: .98rem; text-align: left; transition: border-color .2s, background-color .2s;
}
@media (hover: hover) and (pointer: fine) { .chooser-tab:hover { border-color: var(--ink); } }
.chooser-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chooser-panel { padding: 1.8rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.chooser-panel h3 { font-family: var(--sans); font-stretch: var(--w-head); font-size: var(--step-3); font-weight: 700; line-height: 1.1; }
.chooser-panel p { color: var(--ink-2); margin-top: .7rem; max-width: 36rem; }
.chooser-panel .btn-row { margin-top: 1.4rem; }
.js .chooser-panel[hidden] { display: none; }
.no-js .chooser-tabs { display: none; }
.no-js .chooser-panel + .chooser-panel { margin-top: 1rem; }

/* Strip (test de nivel) ------------------------------------- */
.strip { background: var(--azzurro); }
.strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.6rem; }
.strip p { font-family: var(--sans); font-stretch: var(--w-head); font-size: var(--step-2); font-weight: 700; line-height: 1.3; max-width: 34ch; }
.strip p span { display: block; font-family: var(--sans); font-size: 1rem; font-weight: 400; margin-top: .3rem; }

/* CTA band ------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .container { position: relative; }
.cta-grid { display: grid; gap: 2rem; align-items: end; }
.cta-band .h2 { max-width: 16ch; }

/* Forms (embedded) ------------------------------------------- */
.form-section { background: var(--cielo); }
.form-grid { display: grid; gap: 2rem 4rem; align-items: start; }
.form-intro .lead { margin-top: 1rem; }
.form-note { margin-top: 1.2rem; font-size: .95rem; color: var(--ink-2); }
.form-frame { background: #fff; border-radius: var(--radius); padding: clamp(.5rem, 2vw, 1.25rem); min-height: 320px; box-shadow: 0 1px 0 var(--line); }
.form-frame--bare { padding: 0; box-shadow: none; background: transparent; }
.form-frame iframe { width: 100%; }
.contact-mini { list-style: none; padding: 0; margin-top: 1.8rem; display: grid; gap: .6rem; }
.contact-mini a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .contact-mini a:hover { color: var(--azzurro-deep); text-decoration: underline; } }
.contact-mini .ico { color: var(--azzurro-deep); }

/* Contact page --------------------------------------------- */
.contact-cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.contact-card { background: #fff; padding: 1.5rem; display: grid; gap: .4rem; align-content: start; }
.contact-card h2 { font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.4rem; font-weight: 700; }
.contact-card a { color: var(--azzurro-deep); font-weight: 600; }
.map-box { position: relative; aspect-ratio: 16 / 10; background: var(--cielo); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 1.5rem; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-box p { max-width: 26rem; color: var(--ink-2); margin-bottom: 1rem; }

/* Footer ---------------------------------------------------- */
.site-footer { background: var(--ink); color: #fff; padding-block: 4rem 2rem; }
.footer-grid { display: grid; gap: 2.5rem 3rem; }
.footer-brand img { width: 190px; }
.footer-brand p { color: rgba(255,255,255,.72); margin-top: 1.2rem; max-width: 30rem; font-size: .96rem; }
.footer-col h2 { font-family: var(--sans); font-stretch: var(--w-meta); font-size: .95rem; font-weight: 600; color: var(--azzurro); margin-bottom: .9rem; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,.88); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: #fff; text-decoration: underline; } }
.footer-col address { font-style: normal; color: rgba(255,255,255,.88); display: grid; gap: .45rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .88rem; color: rgba(255,255,255,.62); }
.footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; }
.footer-legal a, .footer-legal button { color: rgba(255,255,255,.75); text-decoration: none; font-size: .88rem; }
@media (hover: hover) and (pointer: fine) { .footer-legal a:hover, .footer-legal button:hover { color: #fff; text-decoration: underline; } }
.social { display: flex; gap: .6rem; margin-top: 1.4rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; color: #fff; }
@media (hover: hover) and (pointer: fine) { .social a:hover { background: #fff; color: var(--ink); } }
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* Floating WhatsApp ------------------------------------------ */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #1f8f4e; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: transform .3s var(--ease-out);
}
.wa-float svg { width: 28px; height: 28px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: scale(1.06); } }
.has-consent-bar .wa-float { bottom: var(--consent-h, 16px); }

/* Cookie consent -------------------------------------------- */
.consent {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  max-width: 560px; margin-left: auto; padding: 1.3rem 1.3rem 1.2rem;
  background: #fff; color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(34, 34, 33, .2), 0 2px 6px rgba(34, 34, 33, .08);
}
.consent[hidden] { display: none; }
.consent h2 { font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.3rem; font-weight: 700; }
.consent p { font-size: .93rem; color: var(--ink-2); margin-top: .4rem; }
.consent p a { color: var(--azzurro-deep); }
.consent-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.consent-actions .btn { flex: 1 1 auto; }
.consent-options { margin-top: 1rem; display: grid; gap: .6rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.consent-options[hidden] { display: none; }
.consent-options label { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.consent-options input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--azzurro-deep); flex: none; }

/* 7. Motion ---------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.js .hero-copy > * { animation: rise .9s var(--ease-out) both; }
.js .hero-copy > :nth-child(2) { animation-delay: .08s; }
.js .hero-copy > :nth-child(3) { animation-delay: .16s; }
.js .hero-copy > :nth-child(4) { animation-delay: .24s; }
.js .hero-copy > :nth-child(5) { animation-delay: .32s; }
.js .hero-art { animation: wipe 1.3s var(--ease-out) .1s both; }

@view-transition { navigation: auto; }

/* 8. Responsive ------------------------------------------------ */
@media (min-width: 540px) {
  .team { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .prices--2 { grid-template-columns: repeat(2, 1fr); }
  .prices--3, .prices--6 { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
  .course { grid-template-columns: 1fr auto; align-items: start; }
  .course-name, .course-desc, .course-meta { grid-column: 1; }
  .course-side { grid-column: 2; grid-row: 1 / span 3; display: grid; justify-items: end; gap: .8rem; text-align: right; }
  .team { grid-template-columns: repeat(4, 1fr); }
  .agenda-title { padding: 1.3rem 0 0; }
  .agenda-list { grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: .4rem; }
  .agenda-item { border-top: 0; padding: 1rem 1.4rem 1.1rem 0; grid-template-columns: 3.4rem 1fr; }
  .agenda-item + .agenda-item { border-left: 1px solid var(--line); padding-left: 1.4rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .consent { left: auto; right: 16px; bottom: 16px; }
}
@media (min-width: 960px) {
  :root { --top-h: 96px; --bar-h: 58px; --logo-h: 34px; }
  .menu-toggle, .only-mobile { display: none !important; }
  .header-top { display: block; background: #fff; }
  .header-top-inner { display: flex; align-items: center; gap: 1.6rem; height: var(--top-h); }
  .brand--lg img { height: var(--logo-lg-h); }
  .brand-claim { display: none; }
  .header-utils { margin-left: auto; display: flex; align-items: center; gap: 1.3rem; list-style: none; padding: 0; font-size: .92rem; }
  .header-utils a { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink-2); text-decoration: none; }
  .header-utils a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
  .header-utils .ico { width: 17px; height: 17px; color: var(--azzurro-deep); }
  .header-utils li:nth-child(3) { display: none; }
  .header-utils-social { display: flex; gap: .2rem; padding-left: 1rem; border-left: 1px solid var(--line); }
  .header-utils-social a { width: 36px; height: 36px; justify-content: center; border-radius: 50%; }
  .header-utils-social a:hover { background: var(--cielo); text-decoration: none; }
  .header-utils-social svg { width: 17px; height: 17px; fill: currentColor; }
  .header-bar::before { border-top: 1px solid var(--line); }
  /* Compact logo: hidden while the big one is on screen, it slides in with the bar */
  .brand--sm { position: absolute; left: var(--gutter); top: 50%; margin: 0; visibility: hidden; opacity: 0; transform: translate(-8px, -50%); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
  .is-compact .brand--sm { visibility: visible; opacity: 1; transform: translate(0, -50%); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
  .main-nav { margin-left: -.7rem; transition: transform .35s var(--ease-out); }
  .is-compact .main-nav { transform: translateX(calc(var(--logo-h) * 2.9 + 1.6rem)); }
  .header-cta { display: inline-flex; margin-left: auto; }
  .main-nav { position: static; display: block; padding: 0; background: none; overflow: visible; visibility: visible; opacity: 1; transform: none; }
  .nav-list { display: flex; align-items: center; gap: .2rem; }
  .nav-list > li { border: 0; }
  .nav-link { display: block; min-height: 0; font-family: var(--sans); font-stretch: 100%; letter-spacing: 0; font-size: 1rem; font-weight: 500; padding: .6rem .7rem; border-radius: var(--radius-ctl); position: relative; }
  .nav-link::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 1.5px; background: var(--azzurro); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
  .nav-link[aria-current="page"] { color: var(--ink); }
  .has-sub { display: flex; align-items: center; }
  .has-sub .nav-link { padding-right: .2rem; }
  .sub-toggle { width: 28px; height: 40px; margin-right: 0; }
  .sub {
    position: absolute; top: calc(100% + 10px); left: -1rem; width: 23rem; padding: .7rem;
    background: #fff; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(34, 34, 33, .14), 0 2px 6px rgba(34, 34, 33, .06);
    display: block; visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s;
  }
  .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .has-sub:hover .sub, .sub.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
  .sub.is-open { display: block; }
  .sub a { padding: .6rem .8rem; background: none; border-radius: var(--radius-ctl); }
  .sub a:hover, .sub a[aria-current="page"] { background: var(--cielo); }

  .hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 3rem; }
  .hero-art { margin: 0 calc(var(--gutter) * -1) 0 0; width: calc(100% + var(--gutter)); max-height: 680px; }
  .hero-copy { padding-bottom: 3.5rem; }
  .page-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 4rem; }
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--top { align-items: start; }
  .split--wide { grid-template-columns: 1.25fr .75fr; }
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .news-lead .news-card--big { grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; }
  .form-grid { grid-template-columns: .8fr 1.2fr; }
  .form-intro { position: sticky; top: calc(var(--header-h) + 2rem); }
  .cta-grid { grid-template-columns: 1fr auto; }
  .chooser { grid-template-columns: 18rem 1fr; align-items: start; }
  .chooser-tabs { flex-direction: column; flex-wrap: nowrap; }
  .chooser-tab { border-radius: var(--radius-ctl); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .prices--6 { grid-template-columns: repeat(6, 1fr); }
  .reviews-track { grid-auto-columns: calc((100% - 2rem) / 3); margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1280px) {
  .plida-band::after { display: block; }
  :root { --logo-lg-h: 64px; }
  .brand-claim { display: block; padding-left: 1.6rem; border-left: 1px solid var(--line); font-stretch: var(--w-head); font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
  .brand-claim span { display: block; font-stretch: 100%; font-weight: 400; font-size: .88rem; color: var(--ink-2); }
  .header-utils li:nth-child(3) { display: list-item; }
  .nav-link { padding-inline: .85rem; }
}

/* 9. Reduced motion: slow down, never kill (owner's PC runs with animations off) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero-copy > * { animation-duration: 1.4s; }
  .js .hero-art { animation-duration: 1.8s; }
}

/* 10. Print ---------------------------------------------------- */
@media print {
  .site-header, .site-footer, .wa-float, .consent, .form-frame { display: none !important; }
}

/* Home: why us + PLIDA dates card */
.why-head { display: grid; gap: 2rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.why-head .media img { aspect-ratio: 16 / 10; }
.reasons--4 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .reasons--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .why-head { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .reasons--4 { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
}
.dates-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.3rem; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.dates-card h3 { font-family: var(--sans); font-stretch: var(--w-head); font-size: 1.5rem; font-weight: 700; margin-bottom: .9rem; }
.dates-card .hours div { border-color: var(--line); }
.dates-card .hours dt { color: var(--ink-2); }
.dates-card .link { color: var(--azzurro-deep); margin-top: 1rem; }
.dates-card .muted { color: var(--ink-3); }

/* Small print next to figures: normal width, readable size */
.course-price small, .price .price-amount small { font-stretch: 100%; font-weight: 400; font-size: .9rem; letter-spacing: 0; }
.course-price small { margin-top: .2rem; white-space: normal; max-width: 17rem; }
.price--feature .price-amount small { color: rgba(255, 255, 255, .82); }

/* =============================================================
   11. Mobile experience
   ============================================================= */

/* Quick-contact bar at the bottom of the phone screen, inside thumb reach.
   It replaces the floating WhatsApp button, which covered the text. */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: auto auto 1fr; gap: .5rem; align-items: center;
  padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -18px rgba(34, 34, 33, .3);
  transition: transform .3s var(--ease-out);
}
.mbar-item {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  min-width: 64px; height: 48px; padding: 0 .5rem; border-radius: var(--radius-ctl);
  font-size: .78rem; font-weight: 600; text-decoration: none; color: var(--ink);
}
.mbar-item .ico { width: 22px; height: 22px; }
.mbar-item--wa .ico { color: #1f8f4e; }
.mbar-item--main { flex-direction: row; gap: .5rem; height: 48px; background: var(--azzurro); font-size: 1rem; font-weight: 650; }
.has-consent-bar .mbar, .nav-open .mbar { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s .3s; }
body { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
.wa-float { display: none; }

/* Compact cookie banner on phones (palumbo.es lesson: it covered almost half the screen) */
@media (max-width: 719px) {
  .consent { left: 8px; right: 8px; bottom: 8px; padding: .95rem 1rem .9rem; }
  .consent h2 { font-size: 1.05rem; }
  .consent p { font-size: .84rem; line-height: 1.45; margin-top: .25rem; }
  .consent-actions { flex-wrap: nowrap; gap: .4rem; margin-top: .75rem; }
  .consent-actions .btn { flex: 1 1 0; min-height: 44px; padding-inline: .4rem; font-size: .88rem; }
  .consent-options label { font-size: .85rem; }
}

/* Phone composition */
@media (max-width: 539px) {
  .btn-row > .btn { width: 100%; }
  .hero { padding-top: 1.4rem; }
  .hero .lead { font-size: 1.12rem; }
  .hero-trust { flex-direction: column; gap: .7rem; }
  .page-hero { padding-block: 1.4rem 2.6rem; }
  .page-hero .lead { font-size: 1.12rem; }
  .crumbs { margin-bottom: 1rem; }
  .section-head { margin-bottom: 1.8rem; }
  .strip-inner .btn { width: 100%; }
}
@media (max-width: 959px) {
  .hero-art { height: min(72vw, 340px); }
  .wedge-figure img { aspect-ratio: 16 / 10; }
  .wedge-figure::before { bottom: -8%; height: 80%; }
}

/* Course rows: price and link share one line on phones */
@media (max-width: 719px) {
  .course-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-top: .3rem; }
}
.course-price small { display: block; }

/* Tables that become cards on phones (calendar, timetables) */
@media (max-width: 719px) {
  .table--stack { min-width: 0; }
  .table-wrap:has(.table--stack) { overflow: visible; border: 0; background: transparent; }
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tbody { display: grid; gap: .6rem; }
  .table--stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem 1rem; padding: .95rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
  .table--stack td, .table--stack th { padding: 0; border: 0; }
  .table--stack th, .table--stack td:first-child { grid-column: 1 / -1; font-size: 1.15rem; font-stretch: var(--w-head); font-weight: 700; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; font-stretch: var(--w-meta); color: var(--ink-3); }
  .table--stack tr.row-next { box-shadow: none; border-color: var(--azzurro); background: #fff; }
  .table--stack tr.row-past { display: none; }
}

/* Footer: link columns side by side on phones */
@media (max-width: 959px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 719px) { .footer-col--contact { grid-column: 1 / -1; } }
.footer-col ul { gap: .1rem; }
.footer-col a { display: inline-block; padding: .3rem 0; }

/* Desktop: no bottom bar, floating WhatsApp instead */
@media (min-width: 960px) {
  .mbar { display: none; }
  body { padding-bottom: 0; }
  .wa-float { display: grid; width: 52px; height: 52px; right: 20px; bottom: 20px; }
  .wa-float svg { width: 26px; height: 26px; }
}

/* =============================================================
   12. Shared refinements
   ============================================================= */

/* Main calls to action: an arrow that moves on hover */
.btn--primary:not(.btn--sm)::after {
  content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2'/%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'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .btn--primary:not(.btn--sm):hover::after { transform: translateX(4px); } }

/* Posters and photos of activities: in black and white until pointed at,
   so colourful posters do not fight with the page (as on palumbo.es) */
@media (hover: hover) and (pointer: fine) {
  .news-media img { filter: grayscale(1); transition: filter .5s var(--ease-out), transform .8s var(--ease-out); }
  .news-card:hover .news-media img, .news-card:focus-within .news-media img { filter: none; }
}

/* Frequently asked questions */
.faq { border-top: 1px solid var(--ink); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.15rem 2.6rem 1.15rem 0;
  font-stretch: var(--w-head); font-weight: 700; font-size: 1.2rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--azzurro-deep); } }
.faq details > div { padding: 0 0 1.3rem; color: var(--ink-2); max-width: 44rem; }
.faq details > div p + p { margin-top: .6rem; }
.faq a { color: var(--azzurro-deep); font-weight: 600; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .28s var(--ease-out), content-visibility .28s; transition-behavior: allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}

/* Three steps to start: a real sequence, so the numbers carry information */
.steps { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: step; }
.step { counter-increment: step; position: relative; display: grid; gap: .55rem; align-content: start; padding: 1.5rem 1.4rem 1.4rem; background: #fff; border-radius: var(--radius); }
.step::before {
  content: counter(step); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: .4rem;
  border-radius: 50%; background: var(--ink); color: #fff;
  font-stretch: var(--w-fig); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums;
}
.step h3 { font-stretch: var(--w-head); font-weight: 700; font-size: 1.35rem; line-height: 1.25; }
.step p { color: var(--ink-2); }
.step .link { margin-top: .3rem; }
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 2.8rem; right: -1.2rem; width: 1.2rem; height: 1.5px; background: var(--ink-3);
  }
}

/* Community mosaic: real photos in black and white, colour when pointed at */
.mosaic { display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; height: clamp(300px, 36vw, 470px); }
.mosaic figure { overflow: hidden; border-radius: var(--radius); background: var(--cielo-2); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .5s var(--ease-out); }
.mosaic-a { grid-row: 1 / span 2; }
.mosaic-a img { object-position: 50% 40%; }
.mosaic-b img { object-position: 50% 70%; }
@media (hover: hover) and (pointer: fine) { .mosaic figure:hover img { filter: none; } }

/* Quote with portrait */
.quote { display: grid; gap: 1.2rem; align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2.2rem); background: #fff; border-radius: var(--radius); }
.quote img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.quote blockquote p { font-stretch: var(--w-head); font-weight: 600; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.42; letter-spacing: -.005em; }
.quote figcaption { display: grid; gap: .1rem; margin-top: 1rem; font-size: .95rem; }
.quote figcaption span { color: var(--ink-2); }
@media (min-width: 720px) { .quote { grid-template-columns: auto 1fr; gap: 2rem; } .quote img { width: 128px; height: 128px; } }

/* =============================================================
   13. Native feel on phones
   ============================================================= */
html { -webkit-tap-highlight-color: transparent; color-scheme: light; }
/* Taps fire at once (no double-tap zoom wait) and controls are not text */
a, button, summary, [role="tab"] { touch-action: manipulation; }
.btn, .round-btn, .menu-toggle, .sub-toggle, .chooser-tab, .mbar-item, .faq summary, .chips li {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Press feedback where there is no hover */
.btn:active { transform: scale(.98); }
.mbar-item:active, .round-btn:active, .chooser-tab:active { transform: scale(.96); }
.mbar-item { transition: transform .12s var(--ease-out), background-color .12s; }
.mbar-item:not(.mbar-item--main):active { background: var(--cielo); }
.nav-link:active, .sub a:active, .faq summary:active { opacity: .7; }
/* Content clear of the notch in landscape */
.container { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* =============================================================
   14. Cut-out imagery (official D, statue of Dante, student)
   Real alpha cut-outs over planes drawn in CSS: the azzurro diagonal
   of the key visual, now in layers.
   ============================================================= */
.hero-art--cut { display: grid; place-items: center; overflow: visible; }
.hero-plane {
  position: absolute; top: 0; bottom: 0; left: 10%; right: calc(var(--gutter) * -1);
  background: var(--azzurro); clip-path: polygon(64% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-art--cut img.hero-d { position: relative; width: min(84%, 540px); height: auto; object-fit: contain; filter: drop-shadow(0 28px 36px rgba(34, 34, 33, .12)); }
@media (max-width: 959px) {
  .hero-art--cut { height: min(80vw, 380px); margin-top: .5rem; }
  .hero-art--cut img.hero-d { width: min(74%, 330px); }
}
.js .hero-art--cut { animation: none; }
@keyframes planeIn { from { transform: translateX(18%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes riseIn { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
.js .hero-plane { animation: planeIn 1.1s var(--ease-out) .05s both; }
.js .hero-d { animation: riseIn 1.2s var(--ease-out) .3s both; }

/* Page heroes with a cut-out: the subject stands on the bottom edge of the hero */
.cut-figure { position: relative; display: flex; justify-content: center; align-items: flex-end; align-self: stretch; min-height: 300px; margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 4.5rem)); }
.cut-plane { position: absolute; left: 0; right: calc(var(--gutter) * -1); bottom: 0; height: 76%; background: var(--azzurro); clip-path: polygon(46% 0, 100% 0, 100% 100%, 0 100%); }
.cut-figure img { position: relative; width: min(100%, 430px); height: auto; max-height: 480px; object-fit: contain; object-position: bottom; }
.cut-figure--statue img { width: min(92%, 400px); filter: drop-shadow(0 20px 30px rgba(34, 34, 33, .14)); }
@media (max-width: 959px) {
  .cut-figure { min-height: 0; margin-top: .5rem; }
  .cut-figure img { width: min(78%, 300px); max-height: 340px; }
  .cut-plane { height: 70%; }
}
@media (min-width: 960px) { .page-hero-grid:has(.cut-figure) { align-items: stretch; } }

/* PLIDA band: the statue behind the dates card */
.band-statue { display: none; }
@media (min-width: 960px) {
  .band-statue { display: block; position: absolute; right: max(2rem, calc((100vw - var(--max)) / 2 - 2rem)); bottom: 0; height: 96%; width: auto; max-width: none; opacity: .95; pointer-events: none; z-index: 0; }
  .plida-band .dates-card { position: relative; z-index: 1; margin-top: 7rem; }
}

/* Closing band: the student steps out of the diagonal */
.cta-band { isolation: isolate; }
.cta-copy { position: relative; z-index: 1; max-width: 36rem; }
.cta-plane, .cta-cut { display: none; }
@media (min-width: 720px) {
  .cta-plane { display: block; position: absolute; right: 0; bottom: 0; width: min(46%, 620px); height: 100%; background: var(--azzurro); clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%); z-index: -1; }
  .cta-cut { display: block; position: absolute; right: max(1rem, calc((100vw - var(--max)) / 2)); bottom: 0; height: 112%; max-height: 520px; width: auto; max-width: none; z-index: 0; pointer-events: none; }
  .cta-copy { max-width: min(36rem, 55%); }
}

/* =============================================================
   15. Accessibility and robustness (audit, 11/10/2026)
   ============================================================= */
/* Focus ring readable on dark bands and the footer */
.on-dark :focus-visible { outline-color: var(--azzurro); }
/* Keep focused elements clear of the fixed bottom bar on phones */
@media (max-width: 959px) { html { scroll-padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom, 0px) + 16px); } }
/* Cookie banner above the home indicator */
.consent { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 719px) { .consent { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } }
/* Touch targets of at least 44px for standalone links */
.footer-legal a, .footer-legal button { display: inline-block; padding-block: .7rem; }
.footer-col a { padding: .55rem 0; }
.contact-mini a, .contact-card a, .hero-trust a { min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a { display: inline-block; padding-block: .6rem; }
.crumbs { align-items: center; }
/* Reduced motion: the owner's PC runs with animations off. Keep them, slower,
   but as plain fades: no movement, no clip-path */
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > *, .js .hero-plane, .js .hero-d, .js .hero-art { animation-name: fadeOnly; animation-duration: 1.4s; }
  @view-transition { navigation: none; }
}

/* Steps on a white section (courses page, after the tinted course list) */
.steps--plain .step { background: var(--cielo); }

/* =============================================================
   16. Review fixes (11/10/2026)
   ============================================================= */
/* Chips are information, not buttons */
.chips li { border: 0; background: var(--cielo); border-radius: 6px; font-weight: 600; }
.on-dark .chips li { background: rgba(255, 255, 255, .08); }
/* Embedded forms: a visible loading line and a way out if the form never shows */
.form-frame { position: relative; }
.form-loading { position: absolute; top: 1.2rem; left: 0; right: 0; text-align: center; color: var(--ink-3); font-size: .95rem; }
.form-frame.is-loaded .form-loading { display: none; }
.form-frame iframe { position: relative; z-index: 1; }
.form-fallback { margin-top: .9rem; padding: .2rem .6rem .4rem; font-size: .92rem; color: var(--ink-2); text-align: center; }
.form-fallback a { color: var(--azzurro-deep); font-weight: 600; }
/* Phones: when the page's own form is on screen, the bottom bar steps aside */
@media (max-width: 959px) { .form-in-view .mbar { transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease-out), visibility 0s .3s; } }
/* Next exam line in the PLIDA hero, and the test page intro */
.next-session { margin-top: 1rem; padding: .75rem 1rem; background: var(--cielo); border-radius: var(--radius-ctl); font-size: 1rem; max-width: 40rem; }
.next-session a { color: var(--azzurro-deep); font-weight: 600; }
/* Compact desktop bar: the phone number comes back when the top layer leaves */
.bar-phone { display: none; }
@media (min-width: 960px) {
  .bar-phone { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; margin-right: .4rem; padding: .5rem .6rem; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink); visibility: hidden; opacity: 0; transition: opacity .3s var(--ease-out), visibility 0s .3s; }
  .bar-phone .ico { width: 17px; height: 17px; color: var(--azzurro-deep); }
  .is-compact .bar-phone { visibility: visible; opacity: 1; transition: opacity .3s var(--ease-out); }
  .bar-phone + .header-cta { margin-left: 0; }
}
@media (min-width: 960px) and (max-width: 1199px) { .bar-phone { display: none; } .bar-phone + .header-cta { margin-left: auto; } }
/* The azzurro planes reach the edge of the screen */
.hero-plane, .cut-plane { right: calc(-1 * ((100vw - min(100vw, var(--max))) / 2 + var(--gutter))); }
/* PLIDA prices: two per row on phones */
@media (max-width: 719px) { .prices--6 { grid-template-columns: 1fr 1fr; } }
/* Posters keep their colours (their text would turn grey); only photos go black and white */
@media (hover: hover) and (pointer: fine) { .news-media img { filter: none; } }
/* Post covers: photos fill a wide frame */
.post-cover--photo img { aspect-ratio: 16 / 9; object-fit: cover; max-height: none; }
/* Map placeholder: compact, with the address */
.map-box { aspect-ratio: auto; min-height: 220px; }
@media (min-width: 720px) { .map-box { aspect-ratio: 16 / 7; } }
/* Home: course list under the chooser */
.section-head--sub { margin-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: 1.2rem; align-items: center; }

/* =============================================================
   17. Home hero: the official D alone on white (owner's choice, 11/10/2026).
   The azzurro moves to the band of upcoming dates right below,
   which becomes the base of the first screen.
   ============================================================= */
.hero-plane { display: none; }
.js .hero-plane { animation: none; }
.hero-art--cut { aspect-ratio: auto; }
.hero-art--cut img.hero-d { filter: none; width: min(70%, 300px); }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .hero .display { font-size: clamp(2.6rem, 1.3rem + 3.3vw, 4.4rem); max-width: 13ch; }
  .hero-art--cut { margin: 0; width: 100%; height: auto; max-height: none; padding-block: 1rem 3.5rem; }
  .hero-art--cut img.hero-d { width: min(92%, 470px); }
}
@media (max-width: 959px) {
  .hero-art--cut { height: auto; padding-block: 1.5rem 2rem; }
}

/* Upcoming dates: the azzurro band under the hero */
.agenda { background: var(--azzurro); border-block: 0; }
.agenda-title { color: var(--ink); }
.agenda-item { border-top-color: rgba(34, 34, 33, .18); }
.agenda-item + .agenda-item { border-left-color: rgba(34, 34, 33, .18); }
.agenda-date span, .agenda-what small { color: var(--ink-2); }
.agenda-what a:hover { color: var(--ink); }
.agenda :focus-visible { outline-color: var(--ink); }
@media (min-width: 720px) { .agenda-inner { padding-block: .4rem .6rem; } }
/* Credentials as one line across the hero, the base of the first screen */
.hero-trust { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .hero-copy { padding-bottom: 1rem; }
  .hero-art--cut { padding-block: 0 1rem; }
  .hero-art--cut img.hero-d { width: min(88%, 440px); }
  .hero-trust { flex-direction: row; justify-content: space-between; gap: 1rem 2.5rem; margin-top: 0; padding: 1.3rem 0 1.6rem; }
}
@media (max-width: 959px) { .hero-trust { margin-top: 0; padding-bottom: 1.6rem; } }

/* =============================================================
   18. Carousels on phones (owner's request, 11/10/2026)
   Native horizontal scroll with snap: the finger moves them; the next
   card peeks in to show there is more. Dots follow the position.
   ============================================================= */
.car-dots { display: flex; justify-content: center; gap: 0; margin-top: .9rem; }
.car-dots[hidden] { display: none; }
.car-dot { position: relative; width: 24px; height: 24px; border-radius: 50%; }
.car-dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(34, 34, 33, .22); transition: background-color .2s, transform .2s var(--ease-out); }
.car-dot.is-on::before { background: var(--ink); transform: scale(1.25); }
.on-dark .car-dot::before { background: rgba(255, 255, 255, .3); }
.on-dark .car-dot.is-on::before { background: #fff; }
.agenda .car-dot::before { background: rgba(34, 34, 33, .25); }
.agenda .car-dot.is-on::before { background: var(--ink); }

@media (max-width: 719px) {
  .m-carousel {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; gap: .8rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
  }
  .m-carousel::-webkit-scrollbar { display: none; }
  .m-carousel > * { scroll-snap-align: start; min-width: 0; }

  /* News: small cards */
  .news-grid.m-carousel { grid-auto-columns: 68%; }
  .m-carousel .news-card { gap: .7rem; padding-bottom: .2rem; }
  .m-carousel .news-media { aspect-ratio: 1 / 1; }
  .m-carousel .news-title { font-size: 1.12rem; line-height: 1.3; }
  .m-carousel .news-excerpt, .m-carousel .card-status { display: none; }
  /* Reasons on the courses page become cards */
  .reasons.m-carousel .reason { padding: 1.3rem 1.2rem; background: var(--cielo); border-top: 0; border-radius: var(--radius); }
  .reasons.m-carousel .reason::before { left: 1.2rem; top: 0; }
  /* Steps */
  .steps.m-carousel { grid-auto-columns: 82%; }

  /* Upcoming dates in the azzurro band: swipe sideways */
  .agenda-list { grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .agenda-list::-webkit-scrollbar { display: none; }
  .agenda-item { scroll-snap-align: start; border-top: 0; padding: .9rem 1rem .9rem 0; }
  .agenda-item + .agenda-item { border-left: 1px solid rgba(34, 34, 33, .18); padding-left: 1rem; }
  .agenda .car-dots { margin-top: 0; padding-bottom: .5rem; }

  /* Course chooser: one row of pills to swipe */
  .chooser-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .2rem; scroll-padding-inline: var(--gutter); }
  .chooser-tabs::-webkit-scrollbar { display: none; }
  .chooser-tab { flex: none; scroll-snap-align: start; }

  /* Reviews: swipe, no arrows on phones */
  .reviews-nav [data-slide] { display: none; }
  .reviews-track { grid-auto-columns: 86%; }

  /* News archive: compact rows (thumbnail + title) instead of tall cards */
  .news-grid--all { gap: 0; border-top: 1px solid var(--line); }
  .news-grid--all .news-card { grid-template-columns: 92px 1fr; gap: .9rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .news-grid--all .news-media { aspect-ratio: 1 / 1; }
  .news-grid--all .news-body { display: grid; gap: .25rem; }
  .news-grid--all .news-title { font-size: 1.05rem; line-height: 1.3; }
  .news-grid--all .news-excerpt, .news-grid--all .card-status { display: none; }
  .news-lead { margin-bottom: 1.2rem; padding-bottom: 1.6rem; }
}
/* Pause button of the reviews carousel */
.car-pause .i-play { display: none; }
.car-pause[aria-pressed="true"] .i-pause { display: none; }
.car-pause[aria-pressed="true"] .i-play { display: block; }
.car-pause svg { width: 16px; height: 16px; }
.reviews .car-dots { margin-top: 1rem; }

@media (max-width: 719px) { .news-grid.m-carousel--books { grid-auto-columns: 58%; } }

/* =============================================================
   19. Course list with pictures (owner's request, 11/10/2026)
   ============================================================= */
.course-media { overflow: hidden; border-radius: var(--radius); background: var(--cielo); }
.course-media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .course:hover .course-media img { transform: scale(1.04); } }
@media (min-width: 720px) {
  .course { grid-template-columns: 190px 1fr auto; column-gap: 1.8rem; }
  .course-media { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .course-name, .course-desc, .course-meta { grid-column: 2; }
  .course-side { grid-column: 3; }
}
@media (min-width: 960px) { .course { grid-template-columns: 250px 1fr auto; column-gap: 2.2rem; } }
/* Phones: the list becomes a carousel of course cards */
@media (max-width: 719px) {
  .courses.m-carousel { border-top: 0; grid-auto-columns: 84%; padding-bottom: .3rem; }
  .courses.m-carousel .course { align-content: start; gap: .55rem; padding: 0 0 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .courses.m-carousel .course::before { display: none; }
  .courses.m-carousel .course-media { border-radius: 0; margin-bottom: .4rem; }
  .courses.m-carousel .course-media img { aspect-ratio: 3 / 2; }
  .courses.m-carousel .course-name, .courses.m-carousel .course-desc, .courses.m-carousel .course-meta, .courses.m-carousel .course-side { padding-inline: 1.1rem; }
  .courses.m-carousel .course-name { font-size: 1.45rem; }
  .courses.m-carousel .course-desc { font-size: .98rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .courses.m-carousel .course-side { margin-top: .2rem; }
}

/* Closing band on a light background: the student was photographed against a
   light sky, so she sits naturally on white and her cut-off stands on the dark footer */
.cta-band--light { background: #fff; color: var(--ink); border-top: 1px solid var(--line); }
.cta-band--light .lead { color: var(--ink-2); }
@media (min-width: 720px) { .cta-band--light .cta-cut { height: 108%; max-height: 500px; } }

/* Inscription pages reached only through links sent by the school: the form, nothing else */
.form-only { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }