/* M2 · O MOLDE DA ESCOLA (/surf/school/:id). Mesmo sistema da D (GUIA.md: letra, cores, vidro, cantos, sombras,
   movimento), com a composição da escola: a capa dividida (o nome por cima; a fotografia da escola num mosaico grande
   e, ao lado, o vidro com o mar agora e as próximas aulas), os cartões das aulas iguais aos do Surf Today da D,
   a praia com o mar hora a hora, a equipa em fichas de vidro em cascata e a galeria em mosaico com parallax.
   Só transform e opacity no que se mexe ao rolar. Nada por cima de caras: a fotografia da escola nunca leva texto. */

.es { --topo: 96px; --baixo: 0px; }
html { scroll-padding-top: 96px; }
.es main { overflow-x: clip; }
.vidro { background: rgba(6,14,26,.66); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.6); border-radius: 28px; }
.es .h2 { max-width: 18ch; }
.es .lead { margin-top: 14px; }
.nova { outline: 2px dashed #FB923C; outline-offset: 3px; border-radius: 4px; }

/* ---------- a barra: a da D, com as línguas da página de hoje ---------- */
.es-lingua { flex: none; height: 44px; min-width: 48px; padding: 0 12px; margin-left: 4px; border: 0; border-radius: 9999px; background: rgba(255,255,255,.06);
  color: #fff; font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; }
.es-lingua:hover, .es-lingua[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.nav-links + .es-lingua { margin-left: 0; }
.es-menu-lingua { right: max(12px, calc(50% - 560px + 120px)); width: 240px; }
.es-menu-lingua a { display: flex; align-items: baseline; gap: 12px; }
.es-menu-lingua b { min-width: 2.2em; }
.es-menu-lingua a[aria-current] { background: rgba(34,211,238,.12); }
@media (max-width: 860px) { .es-lingua { margin-left: auto; } .nav > .bt { margin-left: 6px; white-space: nowrap; padding: 6px 6px 6px 14px; gap: 8px; } .es-menu-lingua { top: 84px; right: 12px; } }

/* ---------- 1 · A CAPA DIVIDIDA ---------- */
.es-capa { position: relative; padding: 132px 0 0; }
.es-capa::before { content: ''; position: absolute; inset: 0 0 auto; height: 70vh; pointer-events: none;
  background: radial-gradient(60% 70% at 15% 0%, rgba(8,145,178,.22), transparent 70%), radial-gradient(50% 60% at 95% 10%, rgba(11,58,82,.5), transparent 70%); }
.es-capa > .wrap { position: relative; }
.es-trilho { margin-bottom: 4px; }
.es-trilho a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; color: var(--ciano); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 8px; }
.es-trilho a:hover { color: #fff; }
.es-h1 { max-width: 16ch; color: #fff; }
.es-id { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.es-logo { width: 56px; height: 56px; flex: none; border-radius: 9999px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 24px -10px rgba(0,0,0,.8); }
.es-local { margin: 0; font-size: var(--t5); color: #fff; font-weight: 600; }
.es-selos { display: flex; flex-wrap: wrap; gap: 8px; }
.es-selo { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 9999px; font-size: 14px; font-weight: 600;
  background: rgba(52,211,153,.12); color: #A7F3D0; box-shadow: inset 0 0 0 1px rgba(52,211,153,.28); text-decoration: none; }
.es-selo i { width: 6px; height: 10px; margin: 0 2px 2px 1px; border-right: 2px solid var(--vazia); border-bottom: 2px solid var(--vazia); transform: rotate(45deg); }
.es-selo-l { min-height: 44px; background: rgba(6,182,212,.14); color: var(--ciano); box-shadow: inset 0 0 0 1px rgba(6,182,212,.4); }
.es-selo-l:hover { background: rgba(6,182,212,.24); }

.es-sem-aulas .es-palco { align-items: start; }
.es-palco { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top: 40px; align-items: stretch; }
.es-foto { grid-column: span 8; position: relative; margin: 0; min-height: 460px; border-radius: 24px; overflow: hidden; background: var(--sup);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); isolation: isolate; }
.es-foto-m { position: absolute; inset: -6% 0; will-change: transform; }
.es-foto-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.es-lado { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; padding: 24px 24px 24px; }
.es-lado .ctas { gap: 8px; }
.es-lado .bt-1 { padding-left: 18px; }
.es-agora .etq, .es-prox .etq { margin-bottom: 10px; }
.es-agora-alt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.es-agora-alt b { font-size: var(--t2); color: #fff; }
.es-agora-alt > span:not(.es-confirmar) { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.es-confirmar { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 9999px; font-size: 12px; font-weight: 700; color: #FBBF24; background: rgba(251,191,36,.1); box-shadow: inset 0 0 0 1px rgba(251,191,36,.3); }
.es-confirmar::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: #FBBF24; }
.es-agora-tit { margin: 10px 0 0; font-size: 16px; font-weight: 700; color: var(--espuma); line-height: 1.35; }
.es-agora-leit { margin: 4px 0 0; font-size: 14px; color: var(--fraco); }
.es-prox ul { list-style: none; margin: 0; padding: 0; }
.es-prox li + li { border-top: 1px solid var(--linha); }
.es-prox a { display: grid; gap: 2px; padding: 12px 8px; margin: 0 -8px; border-radius: 14px; text-decoration: none; transition: background-color .2s; }
.es-prox a:hover { background: rgba(255,255,255,.05); }
.es-px-q { font-size: 16px; font-weight: 700; color: #fff; }
.es-px-m { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--claro); line-height: 1.4; }
.es-px-m i { position: relative; top: -1px; width: 8px; height: 8px; flex: none; border-radius: 9999px; background: rgba(255,255,255,.4); }
.es-px-m.vazia i { background: var(--vazia); } .es-px-m.cheia i { background: var(--cheia); } .es-px-m.meia i { background: var(--ciano); }
.es-px-v { font-size: 14px; color: var(--fraco); }
.es-px-v b { color: #fff; }
.es-lado .ctas { margin-top: auto; }
.es-lado .bt-1 small { font-weight: 600; opacity: .85; font-size: 14px; }
.es-partilha { gap: 10px; padding: 8px 20px 8px 16px; border: 0; cursor: pointer; font-family: inherit; }
.es-partilha svg { width: 18px; height: 18px; }

.es-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; padding: 28px 0 8px; border-top: 1px solid var(--linha); }
.es-num { display: grid; gap: 8px; }
.es-num b { font-size: var(--t1); color: #fff; }
.es-num.ci b { color: var(--ciano); }
.es-num span { font-size: 14px; color: #E2E8F0; letter-spacing: .02em; }

/* ---------- sobre ---------- */
.es-sobre { padding: 72px 0 8px; }
.es-sobre-in { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.es-sobre-t { margin: 0; font-size: var(--t4); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; color: var(--espuma); text-wrap: pretty; }
.es-sobre-auto { color: var(--claro); font-weight: 500; }
.es-pils { display: flex; flex-wrap: wrap; gap: 8px; }
.es-pil { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 9999px; font-size: 14px; color: var(--espuma); text-decoration: none;
  background: rgba(11,17,32,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
a.es-pil:hover { box-shadow: inset 0 0 0 1px var(--ciano); color: #fff; }
.es-pil-ig { color: #F0ABFC; }
.es-pil-app { color: var(--ciano); }

/* ---------- 2 · AS AULAS À VENDA ---------- */
.es-aulas { padding: 96px 0 40px; }
.es-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; margin-bottom: 32px; }
.lv-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 9999px; background: rgba(11,17,32,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.lv-toggle-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 9999px; background: transparent; color: var(--fraco); cursor: pointer; }
.lv-toggle-btn svg { width: 20px; height: 20px; }
.lv-toggle-btn.lv-active { background: rgba(34,211,238,.14); color: var(--ciano); }
.es-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 28px; }
.sv2-cal-day { display: grid; justify-items: center; gap: 2px; padding: 14px 6px 12px; border: 0; border-radius: 20px; cursor: pointer; font-family: inherit; color: var(--claro);
  background: rgba(11,17,32,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background-color .25s, box-shadow .25s, transform .2s var(--ease); }
.sv2-cal-day:hover { box-shadow: inset 0 0 0 1px rgba(34,211,238,.5); }
.sv2-cal-day:active { transform: scale(.97); }
.sv2-cal-day.today { box-shadow: inset 0 0 0 1px rgba(34,211,238,.6); }
.sv2-cal-day[aria-pressed="true"] { background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); color: #fff; box-shadow: none; }
.sv2-cal-wk, .sv2-cal-mo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv2-cal-num { font-size: var(--t3); color: #fff; line-height: 1; }
.sv2-cal-count { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ciano); }
.sv2-cal-day[aria-pressed="true"] .sv2-cal-count { color: #fff; }
.es-cartoes { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.es-cartao { cursor: pointer; }
.es-cartao .cartao-foto { aspect-ratio: 2 / 1; }
.es-cartao .cartao-foto img { object-position: 50% 0%; }
.es-cartao .lc-countdown { position: absolute; right: 12px; top: 12px; padding: 6px 10px; border-radius: 9999px; background: #0891B2; color: #fff; font-size: 12px; font-weight: 800; }
.es-nivel { display: inline-flex; align-items: center; gap: 6px; color: var(--espuma); }
.es-nivel::before { content: ''; width: 8px; height: 8px; border-radius: 9999px; background: var(--cor-n, var(--vazia)); }
.es-cartao .cartao-mar.meia i { background: var(--ciano); }
.es-cartao .cartao-mar:not(.vazia):not(.cheia):not(.meia) i { background: rgba(255,255,255,.4); }
.es-cartao .cartao-aviso { font-size: 14px; }
.es-instr { margin: 10px 0 0; font-size: 14px; color: var(--fraco); }
.es-instr b { color: var(--vazia); font-weight: 700; }
.es-cartao .cartao-mar { align-items: baseline; line-height: 1.45; }
.es-cartao .cartao-mar i { position: relative; top: -1px; }
.es-ver { margin: 28px 0 0; text-align: center; }
.es-ver .bt-3 { font-family: inherit; font-size: 16px; font-weight: 700; min-height: 48px; }
.lessons-grid .cartao[hidden], .lessons-grid .hidden, .es-mais[hidden], .es-ver[hidden] { display: none !important; }
.es-pedir { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 12px 48px; padding: 44px 48px; }
.es-pedir > * { grid-column: 2; }
.es-pedir h3 { grid-column: 1; grid-row: 1 / span 2; }
.es-pedir h3 { margin: 0; font-size: var(--t2); line-height: 1.02; letter-spacing: -.035em; color: #fff; }
.es-pedir p { margin: 0; max-width: 46ch; color: var(--claro); font-size: var(--t5); }
.es-sem-aulas .es-aulas { padding-top: 72px; }
.es-pedir .bt { padding: 8px 22px; }
/* a vista em lista (o botão «Lista» da página de hoje) */
.es-aulas:not(.lvm-grid) .es-cartoes { grid-template-columns: 1fr; gap: 10px; }
.es-aulas:not(.lvm-grid) .es-cartao { flex-direction: row; }
.es-aulas:not(.lvm-grid) .es-cartao .cartao-foto { width: 240px; flex: none; aspect-ratio: auto; }
.es-aulas:not(.lvm-grid) .es-cartao .cartao-txt { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; padding: 18px 22px; }
.es-aulas:not(.lvm-grid) .es-cartao .cartao-txt > * { grid-column: 1; }
.es-aulas:not(.lvm-grid) .es-cartao .cartao-pe { grid-column: 2; grid-row: 1 / span 6; flex-direction: column; align-items: flex-end; justify-content: center; margin: 0; padding: 0; }
.es-aulas:not(.lvm-grid) .es-cartao .cartao-mar { border-top: 0; padding-top: 0; margin-top: 8px; }

/* ---------- 3 · ONDE NOS ENCONTRAS: a praia e o mar ---------- */
.es-onde { padding: 96px 0; }
.es-onde-g { display: grid; grid-template-columns: 5fr 7fr; gap: 14px; align-items: start; }
.es-praia { margin: 0; position: sticky; top: 110px; }
.es-praia-m { position: relative; aspect-ratio: 3 / 2; border-radius: 24px; overflow: hidden; background: var(--sup); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.es-praia-m img { position: absolute; inset: -5% 0; width: 100%; height: 110%; object-fit: cover; }
.es-praia figcaption { display: grid; gap: 4px; padding: 18px 4px 0; }
.es-praia figcaption b { font-size: var(--t3); line-height: 1.06; letter-spacing: -.035em; color: #fff; }
.es-praia figcaption span { font-size: 16px; color: var(--claro); }
.es-praia .es-coord { font-size: 14px; color: var(--fraco); letter-spacing: .04em; }
.es-mar { padding: 30px 36px 32px; }
.es-mar-alt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.es-mar-alt b { font-size: var(--t1); color: #fff; line-height: .9; }
.es-mar-alt > span:not(.es-confirmar) { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.es-mar-tit { margin: 16px 0 0; font-size: var(--t4); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.es-mar-txt { margin: 8px 0 0; font-size: 16px; color: var(--claro); max-width: 60ch; }
.es-mar-dl { margin-top: 20px; }
.es-ver-h { margin: 26px 0 12px; font-size: 14px; font-weight: 600; color: var(--espuma); }
.es-horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; height: 150px; }
.es-horas li { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; gap: 6px; min-width: 0; }
.es-horas i { align-self: end; width: 100%; max-width: 22px; height: var(--h); min-height: 6px; border-radius: 6px 6px 3px 3px; background: rgba(255,255,255,.22); transform-origin: 50% 100%; }
.es-horas .vazia i { background: var(--vazia); } .es-horas .cheia i { background: var(--cheia); } .es-horas .meia i { background: var(--ciano); }
.es-h-v, .es-h-h { font-size: 12px; color: var(--fraco); white-space: nowrap; }
.es-h-v { color: var(--claro); }
.mo .es-horas i { transform: scaleY(0); transition: transform .9s var(--ease); transition-delay: var(--d); }
.mo .es-horas.in i { transform: none; }
.es-legenda { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 14px; color: var(--claro); }
.es-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.es-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.es-legenda .vazia i { background: var(--vazia); } .es-legenda .cheia i { background: var(--cheia); } .es-legenda .meia i { background: var(--ciano); }
.es-enc { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linha); }
.es-enc .etq { margin-bottom: 6px; }
.es-enc p:not(.etq), .es-morada { margin: 0; font-size: 16px; color: var(--espuma); }
.es-morada { margin-top: 4px !important; color: var(--claro) !important; }
.es-mar .ctas { margin-top: 24px; }

/* ---------- a equipa: fichas de vidro em cascata ---------- */
.es-equipa { padding: 56px 0 64px; }
.es-cab-lado { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.es-cab-lado .lead { margin: 0; justify-self: end; text-align: right; }
.es-pessoas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.es-pessoa { display: grid; gap: 2px; padding: 20px; border-radius: 22px; }
.es-ini { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 9999px; background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f));
  font-family: 'Archivo SB', 'Inter SB', sans-serif; font-stretch: 62%; font-weight: 800; font-size: 26px; color: #fff; letter-spacing: .02em; }
.es-pessoa b { font-size: 16px; color: #fff; }
.es-pessoa > span:last-child { font-size: 14px; color: var(--fraco); }

/* ---------- a galeria: mosaico com parallax ---------- */
.es-galeria { padding: 24px 0 72px; }
.es-mosaico { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 250px; grid-auto-flow: dense; gap: 14px; }
.es-g { position: relative; grid-column: span 4; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: var(--sup); cursor: zoom-in; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); isolation: isolate; }
.es-g:nth-child(6n+1) { grid-column: span 7; grid-row: span 2; }
.es-g:nth-child(6n+2), .es-g:nth-child(6n+3) { grid-column: span 5; }
.es-g:last-child:nth-child(6n+4) { grid-column: span 12; }
.es-g:last-child:nth-child(6n+5) { grid-column: span 8; }
.es-g:nth-last-child(2):nth-child(6n+4) { grid-column: span 4; }
.es-g-m { position: absolute; inset: -9% 0; will-change: transform; }
.es-g img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.es-g:hover img { transform: scale(1.04); }
.es-g:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* ---------- o essencial ---------- */
.es-essencial { padding: 0 0 48px; }
.es-ess { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 36px 36px 28px; }
.es-ess-cab { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px 40px; }
.es-ess-cab .lead { margin: 0 0 8px; }
.es-ess-cab .es-selos { grid-column: 1 / -1; margin-top: 8px !important; }
.es-ess-cab .es-selos { margin-top: 22px; }
.es-ess-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin: 0; }
.es-ess-dl div { padding: 20px 0; border-top: 1px solid var(--linha); }
.es-ess-dl dt { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fraco); }
.es-ess-dl dd { text-wrap: balance; margin: 6px 0 0; font-size: var(--t3); line-height: 1.1; font-weight: 800; color: #fff; letter-spacing: -.03em; }

/* ---------- perguntas ---------- */
.es-perguntas { padding: 48px 0 64px; }
.es-pf-g { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; gap: 28px 48px; align-items: start; }
.es-pf-cab { grid-column: 1; grid-row: 1; }
.es-pf-lista { grid-column: 2; grid-row: 1 / span 2; }
.es-pf-g > .es-esp { grid-column: 1; grid-row: 2; position: sticky; top: 120px; flex-direction: column; align-items: flex-start; }
.es-pf { display: grid; margin-bottom: 10px; padding: 0 26px; border: 0 !important; border-radius: 22px; background: rgba(11,17,32,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.es-pf[open] { background: rgba(8,145,178,.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,.25); }
.es-pf summary { font-size: var(--t4); }
.es-pf p { font-size: 18px; }

/* ---------- pedido especial ---------- */
.es-especial { padding: 0 0 48px; }
.es-esp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 28px 36px; }
.es-esp-t { margin: 0; font-size: var(--t4); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.es-esp p { margin: 6px 0 0; color: var(--claro); max-width: 58ch; }

/* ---------- a app: texto e um ecrã verdadeiro, direito ---------- */
.es-app { position: relative; padding: 64px 0 96px; overflow: hidden; }
.es-app::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 75% 55%, rgba(8,145,178,.2), transparent 70%); pointer-events: none; }
.es-app-g { position: relative; display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.es-lojas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.es-lojas a { display: block; border-radius: 10px; }
.es-lojas img { height: 52px; width: auto; }
.es-lojas a[href*="play.google"] img { height: 77px; margin: -12px -10px; }
.es-tels { display: flex; justify-content: center; gap: 22px; }
.es-tel { margin: 0; width: min(300px, 40vw); }
.es-tel + .es-tel { margin-top: 72px; }
.es-tel img { width: 100%; height: auto; border-radius: 40px; box-shadow: 0 0 0 7px #0B1120, 0 0 0 8px rgba(255,255,255,.16), 0 50px 90px -30px rgba(0,0,0,.9); }

/* ---------- rodapé (o da D, com o que o rodapé de hoje da escola tem a mais) ---------- */
.es-rp-tag { margin: 8px 0 0; max-width: 46ch; font-size: 14px; color: var(--fraco); }

/* ---------- a barra fixa do telemóvel ---------- */
.es-bf { display: none; }

/* ---------- diálogos: a ficha da aula, «Como queres reservar?» e a fotografia ampliada ---------- */
.es-dlg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px 12px; background: rgba(3,7,15,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.es-dlg.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.es-dlg .ficha { position: relative; display: block; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; transform: translateY(30px) scale(.98); transition: transform .6s var(--ease); }
.es-dlg.is-open .ficha { transform: none; }
.lesson-detail-hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 24px 24px 0 0; background: var(--elev); }
.lesson-detail-hero:not(:has(img)) { display: none; }
.lesson-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.lesson-detail-hero-grad { display: none; }
.es-dlg .ficha-x { z-index: 2; }
.buy-modal { padding: 32px 28px 26px; }
.buy-modal h3 { margin: 0; padding-right: 48px; font-size: var(--t3); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; text-transform: none; color: #fff; }
.buy-modal-sub { margin: 8px 0 20px !important; }
.buy-modal-actions { display: grid; gap: 10px; }
.es-op { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: var(--espuma);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.es-op:hover { box-shadow: inset 0 0 0 1px var(--ciano); }
.es-op b { font-size: 16px; } .es-op span { grid-column: 1; font-size: 14px; color: var(--fraco); }
.es-op .ic { grid-column: 2; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 9999px; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.es-op .ic svg { width: 16px; height: 16px; }
.es-op-1 { background: linear-gradient(135deg, var(--ciano-e), var(--ciano-f)); box-shadow: none; }
.es-op-1 span { color: rgba(255,255,255,.85); }
.buy-modal-foot { margin-top: 18px; font-size: 14px; color: var(--fraco); text-align: center; }
.es-zoom img { max-width: min(1400px, 94vw); max-height: 86vh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9); transform: scale(.97); transition: transform .5s var(--ease); }
.es-zoom.is-open img { transform: none; }
.es-zoom .ficha-x { position: fixed; right: 16px; top: 16px; }

/* ---------- o telemóvel ---------- */
@media (max-width: 860px) {
  .es { --baixo: 96px; }
  .es main, .es .rodape { padding-bottom: 0; }
  .es .rodape { padding-bottom: calc(40px + var(--baixo)); }
  .es-capa { padding-top: 100px; }
  .es-id { margin-top: 18px; gap: 10px 14px; }
  .es-logo { width: 48px; height: 48px; }
  .es-local { font-size: 18px; }
  .es-palco { grid-template-columns: 1fr; margin-top: 26px; gap: 12px; align-items: start; }
  .es-foto { grid-column: auto; min-height: 0; aspect-ratio: 4 / 3; border-radius: 22px; }
  .es-lado { grid-column: auto; padding: 18px 20px 20px; border-radius: 22px; gap: 18px; }
  .es-lado .bt { min-height: 48px; font-size: 16px; }
  .es-nums { grid-template-columns: 1fr 1fr; gap: 22px 14px; margin-top: 28px; }
  .es-sobre { padding-top: 48px; }
  .es-sobre-in { grid-template-columns: 1fr; gap: 20px; }
  .es-sobre-t { font-size: 20px; }
  .es-aulas, .es-onde { padding: 72px 0 32px; }
  .es-dias { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding: 2px var(--gut) 8px; scrollbar-width: none; }
  .es-dias::-webkit-scrollbar { display: none; }
  .sv2-cal-day { scroll-snap-align: start; }
  .es-cartoes { grid-template-columns: 1fr; }
  .es-cartao .cartao-txt { padding: 16px 18px 18px; }
  .es-cartao h3 { font-size: 18px; }
  .es-cartao .cartao-meta, .es-cartao .cartao-mar, .es-instr, .es-cartao .cartao-aviso { font-size: 16px; }
  .es-aulas:not(.lvm-grid) .es-cartao { flex-direction: column; }
  .es-aulas:not(.lvm-grid) .es-cartao .cartao-foto { width: auto; aspect-ratio: 16 / 9; }
  .es-aulas:not(.lvm-grid) .es-cartao .cartao-txt { display: flex; padding: 16px 18px 18px; }
  .es-aulas:not(.lvm-grid) .es-cartao .cartao-pe { flex-direction: row; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; }
  .es-onde-g { grid-template-columns: 1fr; }
  .es-praia { position: relative; top: 0; }
  .es-praia-m { border-radius: 22px; }
  .es-mar { padding: 22px 20px 24px; border-radius: 22px; }
  .es-mar-txt, .es-enc p:not(.etq) { font-size: 16px; }
  .es-horas { gap: 3px; height: 130px; }
  .es-h-v { font-size: 11px; }
  .es-h-h { font-size: 11px; }
  .es-cab-lado { grid-template-columns: 1fr; }
  .es-cab-lado .lead { justify-self: start; text-align: left; margin-top: 14px; }
  .es-pessoas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .es-pessoa { padding: 16px; border-radius: 20px; }
  .es-mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 8px; }
  .es-g, .es-g:nth-child(6n+2), .es-g:nth-child(6n+3), .es-g:nth-last-child(2):nth-child(6n+4) { grid-column: span 1; grid-row: auto; border-radius: 20px; }
  .es-g:nth-child(3n+1), .es-g:nth-child(6n+1), .es-g:last-child:nth-child(6n+4), .es-g:last-child:nth-child(6n+5) { grid-column: span 2; grid-row: span 1; }
  .es-g:nth-child(3n+1) { grid-row: span 1; }
  .es-ess { grid-template-columns: 1fr; gap: 12px; padding: 22px 20px; border-radius: 22px; }
  .es-ess-dl { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .es-ess-dl dd { font-size: 20px; }
  .es-pf summary { font-size: 18px; }
  .es-pf p { font-size: 16px; }
  .es-pf-g { grid-template-columns: 1fr; gap: 20px; }
  .es-pf-cab, .es-pf-lista, .es-pf-g > .es-esp { grid-column: 1; grid-row: auto; position: static; }
  .es-esp { padding: 22px 20px; border-radius: 22px; }
  .es-pedir { grid-template-columns: 1fr; padding: 24px 20px; border-radius: 22px; }
  .es-pedir > *, .es-pedir h3 { grid-column: 1; grid-row: auto; }
  .es-pedir h3 { font-size: var(--t3); }
  .es-pf { padding: 0 18px; border-radius: 20px; }
  .es-app { padding: 72px 0 80px; }
  .es-app-g { grid-template-columns: 1fr; gap: 40px; }
  .es-tels { gap: 12px; }
  .es-tel { width: min(170px, 44vw); }
  .es-tel + .es-tel { margin-top: 40px; }
  .es-ess-cab { grid-template-columns: 1fr; }
  .es-bf { display: flex; position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 8px 8px 18px; border-radius: 9999px; background: rgba(11,17,32,.84); -webkit-backdrop-filter: blur(26px) saturate(190%) brightness(.92); backdrop-filter: blur(26px) saturate(190%) brightness(.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 34px -10px rgba(0,0,0,.7); transition: transform .6s var(--ease), opacity .4s var(--ease); }
  .es-bf:not(:has(.es-bf-i)) { justify-content: center; padding-left: 8px; }
  .mo .es-bf:not(.ver) { transform: translateY(160%); opacity: 0; }
  .es-bf-i { display: grid; min-width: 0; line-height: 1.25; }
  .es-bf-i b { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .es-bf-i span { font-size: 14px; color: var(--claro); white-space: nowrap; }
  .es-bf .bt { flex: none; min-height: 48px; padding: 8px 18px; font-size: 16px; }
  .es-bf .bt small { font-weight: 600; opacity: .85; font-size: 14px; }
  .es-bf .bt small { display: none; }
  .buy-modal { padding: 28px 20px 22px; }
  .es .confia { font-size: 14px; }
  .es .rp-legal { font-size: 14px; }
}
@media (max-width: 420px) {
  .es-h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .es-dlg, .es-dlg .ficha, .es-bf { transition: none; }
}