/* 19/10 · a /tecnologia D2 (server/siteD/tecnologiaD.ts). A capa é D2; o corpo é o de hoje (com a folha dele) e aqui
   acerta-se-lhe a letra e o ritmo pelos da D2: a família Inter SB, as etiquetas, os títulos na escala da D, mais largura. */
.tc-capa-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tc-capa .pg-h1 { font-size: clamp(42px, 5.6vw, 84px); max-width: 13ch; }
.tc-palco .tv-palco { margin: 0; }

.tc-corpo { min-height: 0; background: none; overflow-x: clip; }
.tc-corpo::before { display: none; }
.tc-corpo .th-wrap { max-width: min(var(--max), 100% - 2 * var(--gut)); padding: 24px 0 24px; font-family: 'Inter SB', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.tc-corpo .tv-sec, .tc-corpo .th-section, .tc-corpo .th-porbaixo, .tc-corpo .th-percursos { margin-top: clamp(56px, 7vw, 96px); }
.tc-corpo .tv-ey, .tc-corpo .th-arch-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--claro); }
.tc-corpo .tv-sec h2, .tc-corpo .th-percursos-titulo { font-size: var(--t2); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; max-width: 18ch; text-wrap: balance; margin-bottom: 18px; }
.tc-corpo .tv-sub { font-size: var(--t5); max-width: 60ch; }
.tc-corpo .th-section > summary h2, .tc-corpo .th-section h2 { font-size: var(--t3); letter-spacing: -.025em; }
.tc-corpo .th-flows-frase { font-size: var(--t3); letter-spacing: -.025em; }
.tc-corpo .th-pedido.th-flows-topo { max-width: none; }
/* os desenhos de hoje ficam na largura em que foram desenhados; o texto à volta respira na largura da D */
.tc-corpo .tv-janela, .tc-corpo .tv-duas, .tc-corpo .tv-mapa, .tc-corpo .tv-mar, .tc-corpo .tv-paredes { max-width: 960px; }

@media (max-width: 1080px) {
  .tc-capa-in { grid-template-columns: 1fr; }
  .tc-palco { justify-self: center; width: 100%; max-width: 640px; }
}
/* os blocos de hoje que trazem a largura e o título no atributo style: alinhados à esquerda e na escala da D */
.tc-corpo .th-wrap > [style*="max-width"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.tc-corpo .th-wrap > .th-reveal > h2 { font-size: var(--t2) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; max-width: 18ch; text-wrap: balance; }
.tc-corpo .th-wrap > .th-reveal > div:first-child { letter-spacing: .08em !important; font-weight: 700 !important; }
.tc-corpo .th-porbaixo { max-width: none; margin-left: 0; margin-right: 0; }
.tc-corpo .th-porbaixo-titulo { font-size: var(--t3) !important; letter-spacing: -.025em !important; line-height: 1.1 !important; }

/* =====================================================================================================================
   20/10 · O KIT DE VIDA na /tecnologia (tecnologiaD.ts · corpoComVida). A disposição das peças é a de blocos.css; aqui só
   o encaixe no corpo de hoje e as cores dos blocos de hoje quando passam a uma folha clara (sem tocar no texto deles).
   ===================================================================================================================== */
/* a capa: as quatro camadas pousam sobre o mar visto de cima, numa laje de fotografia */
.tc-capa { padding-bottom: 0; }
.tc-palco { position: relative; isolation: isolate; display: grid; place-items: center; min-height: min(78vh, 720px); padding: 40px 0; }
.tc-palco-foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 36px; box-shadow: 0 50px 100px -50px rgba(0,0,0,.95); }
.tc-palco-m { position: absolute; inset: -8% 0; }
.tc-palco-m img { width: 100%; height: 100%; object-fit: cover; }
.tc-palco-foto::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 45% 50%, rgba(6,14,26,.62), rgba(6,14,26,.28) 80%), linear-gradient(180deg, rgba(6,14,26,.25), rgba(6,14,26,.55)); }
.tc-palco .tv-palco { margin: 0; }
/* 21/10 · o dono: «é para ficar assim ou é erro?» — era erro: os rótulos encostavam à borda do cartão (em inglês o 3.º
   tapava o 4.º) e o surfista da foto ficava escondido atrás das camadas, com o mar escurecido até ser mancha. Em ecrã
   largo as camadas encolhem para caber com margem, a foto mostra o surfista a remar para dentro delas, o mar fica
   verde-água e só o lado dos rótulos escurece para se lerem. No telemóvel o desenho é outro e não muda. */
@media (min-width: 1081px) {
  .tc-palco .tv-palco { transform: scale(.86); transform-origin: 50% 50%; }
  .tc-palco .tv-r4 { top: 372px; }
  .tc-palco-m img { object-position: 50% 100% !important; }
  .tc-palco-foto::after { background: linear-gradient(90deg, rgba(6,14,26,0) 52%, rgba(6,14,26,.62) 70%, rgba(6,14,26,.7)), radial-gradient(60% 55% at 42% 50%, rgba(6,14,26,.5), rgba(6,14,26,.1) 85%), linear-gradient(180deg, rgba(6,14,26,.08), rgba(6,14,26,.35)); }
}
/* o ecrã real do OS logo a seguir à capa, a endireitar-se ao rolar (sem tapar os botões da capa) */
.tc-ecra { position: relative; z-index: 2; margin-top: clamp(40px, 6vw, 88px); }
.tc-capa + .tc-ecra + .pg-pilares { padding-top: clamp(40px, 5vw, 72px); }

/* as três praias por cima de uma praia de verdade, com a previsão real da app ao lado */
.tc-mar-foto { margin-top: clamp(56px, 7vw, 96px); padding-block: clamp(72px, 9vw, 140px); }
.tc-mar { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 4vw, 64px); align-items: center; }
.tc-mar > .tv-sec { margin: 0; padding: 0; border: 0; }
.tc-mar .tv-mar { box-shadow: 0 50px 90px -40px rgba(0,0,0,.95); }
.tc-mar .tv-sub { color: #E2E8F0; }
.tc-mar-tel .vd-ecra-telefone { width: 100%; }

/* os números vivos e os quatro capítulos, na espuma */
.tc-corpo .tc-claro-num { margin-top: clamp(64px, 8vw, 112px); }
.tc-corpo .tc-claro-num .th-tldr { margin: 0; padding: 0; border: 0; }
.tc-corpo .tc-claro-num .th-tldr-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tc-corpo .tc-claro-num .th-tldr-stat { display: grid; grid-template-columns: 1fr; align-content: start; gap: 12px; padding: clamp(24px, 3vw, 40px); text-align: left;
  background: #fff; border: 0; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.07), 0 30px 60px -40px rgba(15,23,42,.4); }
.tc-corpo .tc-claro-num .th-tldr-stat:hover { box-shadow: inset 0 0 0 1px rgba(15,23,42,.12), 0 30px 60px -36px rgba(15,23,42,.45); }
.tc-corpo .tc-claro-num .th-tldr-stat-num { grid-row: auto; justify-self: start; font-family: 'Archivo SB', 'Inter SB', sans-serif; font-stretch: 62%; font-weight: 800;
  font-size: clamp(96px, 12vw, 176px); line-height: .82; letter-spacing: -.01em; color: var(--vd-tinta);
  background: linear-gradient(transparent 78%, rgba(251,191,36,.6) 78% 90%, transparent 90%); padding: 0 .04em; }
.tc-corpo .tc-claro-num .th-tldr-stat-label { grid-row: auto; margin: 0; font-size: 14px; letter-spacing: .08em; color: var(--vd-tinta); }
.tc-corpo .tc-claro-num .th-tldr-stat-nota { margin: 0; font-size: 15px; color: var(--vd-fraco); max-width: 46ch; }
.tc-corpo .tc-claro-num .th-tldr-semleitura { margin: 20px 0 0; color: var(--vd-fraco); }
.tc-corpo .tc-claro-num .th-capitulos { margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; background: none; border: 0; }
.tc-corpo .tc-claro-num .th-cap-cabeca strong { color: var(--vd-tinta); }
.tc-corpo .tc-claro-num .th-cap-cabeca span { color: var(--vd-fraco); }
.tc-corpo .tc-claro-num .th-cap-grelha { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tc-corpo .tc-claro-num .th-cap { padding: 22px; border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(15,23,42,.07); transition: transform .35s var(--ease), box-shadow .3s; }
.tc-corpo .tc-claro-num .th-cap:hover, .tc-corpo .tc-claro-num .th-cap:focus-visible { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px rgba(14,116,144,.35), 0 24px 48px -30px rgba(15,23,42,.45); }
.tc-corpo .tc-claro-num .th-cap-num { color: var(--vd-fraco); }
.tc-corpo .tc-claro-num .th-cap-titulo { color: var(--vd-tinta); }
.tc-corpo .tc-claro-num .th-cap-desc { color: var(--vd-fraco); }

/* «O que segura a tua operação», na areia, com as apps reais do OS */
.tc-corpo .tc-op { margin-top: clamp(64px, 8vw, 112px); }
.tc-corpo .tc-op > .th-reveal { max-width: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.tc-corpo .tc-op .th-reveal > div:first-child { color: var(--vd-tinta) !important; letter-spacing: .08em !important; font-weight: 700 !important; }
.tc-corpo .tc-op .th-reveal > h2 { color: var(--vd-tinta) !important; font-size: var(--t2) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; max-width: 18ch; text-wrap: balance; }
.tc-corpo .tc-op .th-reveal > p { color: var(--vd-texto) !important; font-size: var(--t5) !important; max-width: 60ch !important; }
.tc-corpo .tc-op .th-reveal > p em[style] { color: var(--vd-tinta) !important; }
.tc-corpo .tc-op-ecra { margin: clamp(32px, 4vw, 56px) 0 clamp(32px, 4vw, 48px); }
.tc-corpo .tc-op .th-hoje-item { background: #fff; border: 0; border-radius: 20px; color: var(--vd-fraco); box-shadow: inset 0 0 0 1px rgba(15,23,42,.07); transition: transform .35s var(--ease), box-shadow .3s; }
.tc-corpo .tc-op a.th-hoje-item:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(14,116,144,.35), 0 24px 48px -30px rgba(15,23,42,.45); }
.tc-corpo .tc-op .th-hoje-item strong { color: var(--vd-tinta); }
.tc-corpo .tc-op .th-hoje-tag { color: var(--vd-quente-e); border-color: rgba(180,83,9,.4); }
.tc-corpo .tc-op .th-porbaixo { margin-bottom: 0; background: #fff; border: 0; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(15,23,42,.07); }
.tc-corpo .tc-op .th-porbaixo-rotulo { color: var(--vd-tinta); }
.tc-corpo .tc-op .th-porbaixo-titulo { color: var(--vd-tinta) !important; }
.tc-corpo .tc-op .th-porbaixo-lead { color: var(--vd-fraco); }
.tc-corpo .tc-op .th-porbaixo-linha { border-top-color: rgba(15,23,42,.1); }
.tc-corpo .tc-op .th-porbaixo-linha dt { color: var(--vd-tinta); }
.tc-corpo .tc-op .th-porbaixo-linha dd { color: var(--vd-texto); }

/* sem letras azuis em texto corrido (o «Quando alteras uma aula…» de hoje vinha em ciano) */
.tc-corpo p em[style*="#22D3EE"] { color: #F8FAFC !important; }

@media (max-width: 1080px) {
  .tc-palco { min-height: 0; padding: 32px 0; }
  .tc-palco-foto { inset: 0 calc(-1 * var(--gut)); border-radius: 28px; }
  .tc-mar { grid-template-columns: 1fr; }
  .tc-mar-tel { justify-self: center; width: min(260px, 70vw); }
.tc-corpo .tc-claro-num .th-cap-grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tc-palco-foto { border-radius: 24px; }
.tc-corpo .tc-claro-num .th-tldr-counters, .tc-corpo .tc-claro-num .th-cap-grelha { grid-template-columns: 1fr; }
.tc-corpo .tc-claro-num .th-tldr-stat-num { font-size: 112px; }
}

/* 20/10 · as duas secções dos desenhos em colunas na espuma: o texto a tinta, os desenhos na noite (um ecrã no papel) */
.tc-corpo .tc-claro-duas { margin-top: clamp(56px, 7vw, 96px); }
.tc-corpo .tc-claro-duas > .tv-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tc-corpo .tc-claro-duas > .tv-sec + .tv-sec { border-top-color: rgba(15,23,42,.1); }
.tc-corpo .tc-claro-duas .tv-ey { color: var(--vd-tinta); }
.tc-corpo .tc-claro-duas .tv-sec h2 { color: var(--vd-tinta); }
.tc-corpo .tc-claro-duas .tv-sub { color: var(--vd-texto); }
.tc-corpo .tc-claro-duas .tv-leg { color: var(--vd-fraco); }
.tc-corpo .tc-claro-duas .tv-via { background: #0B1120; border-color: rgba(15,23,42,.2); box-shadow: 0 30px 60px -36px rgba(15,23,42,.55); }
.tc-corpo .tc-claro-duas .tv-via-b { background: linear-gradient(180deg, #0B2A3A, #0B1120); }