/* =====================================================================
   ACADEMIA DE SAÚDE NURSING — Bio Site
   Reconstrução fiel (mobile-first: 390 / 393 / 414px)
   Autor: reconstrução pixel-perfect a partir das imagens fornecidas
   ===================================================================== */

/* ------------------------- Reset / Base ------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--page-bg);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ------------------------- Paleta / Tokens ------------------------- */
:root {
  /* --- Cores --- */
  --red:        #C8110C;   /* vermelho principal ASN */
  --red-2:      #A50603;   /* vermelho escuro (gradiente) */
  --red-hover:  #E01B15;
  --red-grad:   linear-gradient(100deg, var(--red), var(--red-2));
  --wpp:        #25D366;   /* verde WhatsApp */
  --maroon-1:   #5c1717;   /* card gradiente claro */
  --maroon-2:   #260a0b;   /* card gradiente escuro */
  --ink:        #1c1c1e;   /* títulos quase preto */
  --ink-soft:   #2b2b2e;
  --gray:       #6d7278;   /* subtítulos */
  --gray-2:     #8a8f95;
  --line:       #ececec;   /* bordas / divisórias */
  --page-bg:    #eceef0;   /* fundo fora da coluna (desktop) */
  --card-bg:    #ffffff;
  --chip-bg:    #f4f5f6;

  /* --- Tipografia --- */
  --font-base:  'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;

  /* --- Sombras (suaves) --- */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.06);
  --shadow-md:  0 8px 22px rgba(0,0,0,.10);
  --shadow-soft:0 4px 14px rgba(0,0,0,.10);
  --shadow-red: 0 10px 24px rgba(200,17,12,.28);

  /* --- Bordas / Raios --- */
  --r-sm:       8px;
  --r-md:       14px;
  --radius:     16px;
  --radius-lg:  20px;

  /* --- Transições --- */
  --ease:       cubic-bezier(.4, 0, .2, 1);
  --t-fast:     .18s var(--ease);
  --t-med:      .30s var(--ease);

  /* --- Layout --- */
  --maxw:       440px;
}

/* ------------------------- Coluna do App ------------------------- */
.app {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  position: relative;
  box-shadow: 0 0 40px rgba(0,0,0,.08);
}

/* ------------------------- Animações ------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { animation: fadeInUp .5s ease both; }
.fade-in { animation: fadeIn .5s ease both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .10s; }
.d3 { animation-delay: .15s; } .d4 { animation-delay: .20s; }
.d5 { animation-delay: .25s; } .d6 { animation-delay: .30s; }

/* ------------------------- Barra superior (subpáginas) ------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.back-link i { font-size: 16px; }
.back-link:hover { color: var(--red-hover); }

/* Hambúrguer — sempre visível, fixo no canto sup. direito da coluna */
.menu-btn {
  position: fixed;
  top: 14px;
  right: max(16px, calc(50vw - (var(--maxw) / 2) + 16px));
  z-index: 45;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(24,24,26,.90);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--t-fast), background var(--t-fast);
}
.menu-btn:hover { transform: scale(1.05); background: #000; }
.menu-btn:active { transform: scale(.97); }

/* ------------------------- Menu lateral (drawer) ------------------------- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 40;
}
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0;
  width: 82%; max-width: 320px; height: 100%;
  background: #fff;
  transform: translateX(105%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 50;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 30px rgba(0,0,0,.18);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff;
}
.drawer-head strong { font-size: 15px; letter-spacing: .5px; }
.drawer-head small { display: block; font-weight: 500; opacity: .85; font-size: 11px; }
.drawer-close {
  color: #fff; font-size: 24px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .2s;
}
.drawer-close:hover { background: rgba(255,255,255,.15); }
.drawer nav { padding: 8px 0; overflow-y: auto; flex: 1; }
.drawer nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  font-weight: 600; font-size: 14.5px; color: var(--ink-soft);
  border-bottom: 1px solid #f3f3f3;
  transition: background .2s, color .2s, padding-left .2s;
}
.drawer nav a i { color: var(--red); font-size: 18px; width: 22px; text-align: center; }
.drawer nav a:hover { background: #fbf1f1; color: var(--red); padding-left: 26px; }
.drawer nav a.wpp { color: #128C7E; }
.drawer nav a.wpp i { color: #25D366; }

/* ------------------------- HERO ------------------------- */
.hero {
  position: relative;
  padding: 16px 20px 18px;               /* topo ~8% mais baixo */
  overflow: hidden;
  isolation: isolate;
  background: #f2f3f4;
}
.hero::before {   /* foto do professor — enquadramento premium: rosto exposto, olhos no topo-direito */
  content: "";
  position: absolute;
  top: -6px; right: -14px; left: auto; bottom: auto;   /* +direita, sobe alguns px */
  width: clamp(244px, 64%, 256px);
  height: 406px;
  background: url("../images/professor.png") no-repeat;
  background-size: 84%;                   /* menos zoom: mostra dos ombros ao peito */
  background-position: 76px 0;            /* desloca p/ direita: lado esquerdo do rosto livre do degradê */
  transform: scale(1.04);                 /* escala discretamente maior */
  transform-origin: top right;
  /* degradê suave e natural em volta da foto (transição premium, sem borda reta) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 20%, #000 42%), linear-gradient(to bottom, #000 68%, rgba(0,0,0,.4) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 20%, #000 42%), linear-gradient(to bottom, #000 68%, rgba(0,0,0,.4) 86%, transparent 100%);
  mask-composite: intersect;
  z-index: -2;
}
.hero::after {    /* clareamento suave sobre o texto (gradiente natural, multi-stop) */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 8% 30%, #f6f7f8 0%, rgba(246,247,248,.86) 34%, rgba(246,247,248,0) 62%),
    linear-gradient(100deg,
              #f4f5f6 18%,
              rgba(244,245,246,.82) 34%,
              rgba(244,245,246,.42) 44%,
              rgba(244,245,246,.14) 52%,
              rgba(244,245,246,0) 62%);
  z-index: -1;
}
.hero-logo { width: 128px; height: auto; margin-bottom: 14px; }
.hero-welcome { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.hero-title {
  font-size: 26px; line-height: 1.02; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.5px;
  margin-top: 2px;
}
.hero-title .em { color: var(--red); display: block; }
.hero-rule { width: 78px; height: 5px; background: var(--red); border-radius: 4px; margin: 12px 0 14px; }
.hero-tag { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.hero-tag .em { color: var(--red); }

/* Feature chips (3 itens) */
.features { display: flex; gap: 10px; margin: 18px 0 0; flex-wrap: wrap; }
.feature {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  line-height: 1.15;
}
.feature .fic {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; box-shadow: var(--shadow-sm);
}

/* Caixa de destaque (hero) */
.hero-box {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-top: 18px;
  box-shadow: var(--shadow-sm);
  font-size: 13.5px; color: var(--ink-soft);
}
.hero-box .hb-ic {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.hero-box strong { color: var(--ink); }

/* ------------------------- Botões grandes (home) ------------------------- */
.cta-block { padding: 16px 16px 4px; }
.cta {
  display: flex; align-items: center; gap: 14px;
  border-radius: 14px; padding: 16px 18px;
  margin-bottom: 12px;
  transition: transform .18s ease, box-shadow .2s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta .cta-ic { font-size: 24px; width: 30px; text-align: center; }
.cta .cta-tt { font-weight: 800; font-size: 15px; letter-spacing: .3px; }
.cta .cta-sub { font-size: 12.5px; font-weight: 500; opacity: .92; }
.cta .cta-arrow { margin-left: auto; font-size: 20px; opacity: .9; }
.cta--red {
  background: linear-gradient(100deg, var(--red), var(--red-2));
  color: #fff; box-shadow: var(--shadow-red);
}
.cta--red .cta-tt { text-transform: uppercase; }
.cta--white {
  background: #fff; color: var(--ink);
  border: 1px solid #f0dede; box-shadow: var(--shadow-sm);
}
.cta--white .cta-ic { color: #25D366; }
.cta--white .cta-tt { color: var(--red); text-transform: uppercase; }
.cta--white .cta-sub { color: var(--gray); }
.cta--white .cta-arrow { color: var(--red); }

/* ------------------------- Grid de cards (home) ------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 8px 16px 4px;
}
.card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 150px;
  padding: 14px 12px 14px;
  display: flex; flex-direction: column;
  color: #fff;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .2s ease;
}
.card:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.card::before {   /* miniatura de fundo */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg);
  background-size: cover; background-position: center;
}
/* Imagens de fundo dos cards da home — caminho relativo ao CSS (portável em qualquer hospedagem) */
.card--cursos::before       { background-image: url("../images/ct-enfermagem.png"); }
.card--aulas::before        { background-image: url("../images/ao-medicamentos.png"); }
.card--certificados::before { background-image: url("../images/cert-primeiros.png"); }
.card--socorrista::before   { background-image: url("../images/soc-rcp.png"); }
.card--palestras::before    { background-image: url("../images/pal-sbv.png"); }
.card--localizacao::before  { background-image: url("../images/mapa.png"); }
.card::after {    /* overlay escuro/vermelho */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(58,15,16,.55) 0%, rgba(38,10,11,.82) 100%);
}
.card.red-card::after {
  background: linear-gradient(160deg, rgba(200,17,12,.86), rgba(140,8,6,.94));
}
.card-ic {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; margin-bottom: auto;
}
.card-tt { font-weight: 800; font-size: 13.5px; line-height: 1.12; margin-top: 12px; text-transform: uppercase; }
.card-sub { font-size: 11px; opacity: .92; margin-top: 4px; font-weight: 500; }
.card-arrow {
  position: absolute; right: 10px; bottom: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}

/* ------------------------- WhatsApp CTA bar ------------------------- */
.wpp-bar {
  display: flex; align-items: center; gap: 12px;
  margin: 16px; padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(100deg, var(--red), var(--red-2));
  color: #fff; box-shadow: var(--shadow-red);
}
.wpp-bar .wb-ic {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: #fff; color: #25D366;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.wpp-bar .wb-tt { font-weight: 800; font-size: 13.5px; text-transform: uppercase; letter-spacing: .3px; }
.wpp-bar .wb-sub { font-size: 12px; font-weight: 500; opacity: .92; }
.wpp-bar .wb-btn {
  margin-left: auto; background: #fff; color: var(--red);
  font-weight: 800; font-size: 12.5px; text-transform: uppercase;
  padding: 8px 16px; border-radius: 20px;
  transition: transform .18s ease;
}
.wpp-bar .wb-btn:hover { transform: scale(1.04); }

/* ------------------------- Section header (barra vermelha) ------------------------- */
.sec-head {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 16px 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(100deg, var(--red), var(--red-2));
  color: #fff; box-shadow: var(--shadow-red);
}
.sec-head .sh-ic {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: #fff; color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.sec-head .sh-tt { display: block; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .4px; }
.sec-head .sh-sub { display: block; font-size: 12px; font-weight: 500; opacity: .92; margin-top: 2px; }

/* ------------------------- Listas (cursos / certificados / palestras) ------------------------- */
.list { padding: 0 16px 8px; }
.list-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.list-item:last-child { border-bottom: none; }
.li-thumb {
  width: 88px; height: 66px; flex: 0 0 88px;
  border-radius: 12px; object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.li-body { flex: 1; min-width: 0; }
.li-tt { font-weight: 800; font-size: 14px; color: var(--ink); line-height: 1.15; text-transform: uppercase; }
.li-desc { font-size: 11.5px; color: var(--gray); margin-top: 4px; line-height: 1.3; }
.li-meta { display: flex; gap: 14px; margin-top: 7px; }
.li-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--red); font-weight: 600; }
.li-meta i { font-size: 13px; }
.li-side { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.li-badge {
  display: flex; flex-direction: column; align-items: center;
  color: var(--red); font-size: 9.5px; font-weight: 700; text-align: center; line-height: 1.1; width: 58px;
}
.li-badge i { font-size: 18px; margin-bottom: 2px; }
.li-arrow { color: var(--red); font-size: 18px; }

/* ------------------------- Aulas Online (filtros + vídeos) ------------------------- */
.filters {
  display: flex; gap: 8px; padding: 4px 16px 14px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 8px 16px; border-radius: 20px;
  font-size: 12.5px; font-weight: 600;
  background: #fff; color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.chip:hover { border-color: #f0c9c9; }
.chip.active { background: linear-gradient(100deg, var(--red), var(--red-2)); color: #fff; border-color: transparent; }

.video-item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.video-item:last-of-type { border-bottom: none; }
.vi-thumb {
  position: relative; width: 100px; height: 74px; flex: 0 0 100px;
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.vi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vi-play {
  position: absolute; left: 10px; bottom: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.vi-body { flex: 1; min-width: 0; }
.vi-tt { font-weight: 800; font-size: 12.5px; color: var(--ink); line-height: 1.18; }
.vi-desc { font-size: 10.5px; color: var(--gray); margin-top: 4px; line-height: 1.3; }
.vi-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; }
.vi-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--red); font-weight: 600; }
.vi-btn {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(100deg, var(--red), var(--red-2)); color: #fff;
  font-size: 11px; font-weight: 700; padding: 8px 12px; border-radius: 20px;
  transition: transform .18s ease;
}
.vi-btn:hover { transform: scale(1.04); }

/* ------------------------- Socorrista ------------------------- */
.course-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 16px 14px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(100deg, var(--red), var(--red-2)); color: #fff;
  box-shadow: var(--shadow-red);
}
.course-banner .cb-ic {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  background: #fff; color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.course-banner .cb-tt { display: block; font-weight: 800; font-size: 16px; text-transform: uppercase; }
.course-banner .cb-sub { display: block; font-size: 12px; opacity: .92; margin-top: 2px; }

.meta-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 0 16px 18px;
}
.meta-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 6px; text-align: center; box-shadow: var(--shadow-sm);
}
.meta-card i { color: var(--red); font-size: 19px; }
.meta-card .mc-k { display: block; font-size: 10px; color: var(--gray); margin-top: 6px; font-weight: 600; }
.meta-card .mc-v { display: block; font-size: 12px; color: var(--ink); font-weight: 800; }

.block-title {
  font-weight: 800; font-size: 15px; color: var(--ink);
  text-transform: uppercase; letter-spacing: .3px;
  padding: 4px 16px 12px;
}
.learn-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
  padding: 0 16px 18px;
}
.learn-item { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.learn-item i { color: var(--red); font-size: 15px; margin-top: 1px; }

.prog-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 0 16px 18px;
}
.prog-card { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); background:#fff; }
.prog-card img { width: 100%; height: 70px; object-fit: cover; }
.prog-card .pc-tt { font-size: 9.5px; font-weight: 700; color: var(--ink); text-align: center; padding: 7px 4px 9px; line-height: 1.15; }

.benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 0 16px 18px;
}
.benefit {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 8px; text-align: center; box-shadow: var(--shadow-sm);
}
.benefit .bn-ic {
  width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.benefit p { font-size: 11px; color: var(--ink-soft); font-weight: 600; line-height: 1.2; }

/* ------------------------- Localização ------------------------- */
.loc-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 16px 16px; padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.loc-banner .lb-ic {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--red-2)); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.loc-banner strong { display: block; font-size: 14px; color: var(--ink); }
.loc-banner span { font-size: 12px; color: var(--gray); }

.loc-title { display:flex; align-items:center; gap:8px; padding: 4px 16px 12px; color: var(--red); font-weight: 800; text-transform: uppercase; font-size: 15px; }
.loc-title i { font-size: 18px; }

.address-card {
  display: flex; align-items: center; gap: 12px;
  margin: 0 16px 12px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.address-card .ac-ic {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
  background: #fbeaea; color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.address-card .ac-tt { font-weight: 800; font-size: 14px; color: var(--ink); }
.address-card .ac-line { font-size: 12.5px; color: var(--gray); line-height: 1.35; }

.map-wrap { margin: 0 16px 12px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.map-wrap img { width: 100%; height: 170px; object-fit: cover; }
.map-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 16px 18px; padding: 12px; border-radius: 12px;
  background: linear-gradient(100deg, var(--red), var(--red-2)); color: #fff;
  font-weight: 800; font-size: 13px; text-transform: uppercase; box-shadow: var(--shadow-red);
  transition: transform .18s ease;
}
.map-btn:hover { transform: translateY(-2px); }

.info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 0 16px 18px;
}
.info-card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; box-shadow: var(--shadow-sm);
}
.info-card .icd-h { display: flex; align-items: center; gap: 8px; color: var(--red); font-weight: 800; font-size: 12.5px; text-transform: uppercase; }
.info-card .icd-h i { font-size: 16px; }
.info-card .icd-sub { font-size: 11px; color: var(--gray); margin: 6px 0 8px; line-height: 1.3; }
.info-card ul li { font-size: 11px; color: var(--ink-soft); padding: 3px 0 3px 12px; position: relative; }
.info-card ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

.contact-card {
  margin: 0 16px 18px; padding: 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.contact-card .cc-h { display: flex; align-items: center; gap: 10px; }
.contact-card .cc-ic {
  width: 40px; height: 40px; border-radius: 50%;
  background: #fbeaea; color: var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.contact-card .cc-tt { font-weight: 800; font-size: 14px; color: var(--red); text-transform: uppercase; }
.contact-card .cc-sub { font-size: 11.5px; color: var(--gray); }
.contact-card .cc-list { margin-top: 12px; display: grid; gap: 10px; }
.contact-card .cc-list a { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ink-soft); }
.contact-card .cc-list i { color: var(--red); font-size: 16px; width: 20px; text-align: center; }
.contact-card .cc-list a:hover { color: var(--red); }

/* ------------------------- Footer ------------------------- */
.footer { padding: 6px 16px 26px; }
.footer-social {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.footer-social a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.footer-social a i { font-size: 17px; color: var(--red); }
.footer-social a:hover { color: var(--red); }
.footer-copy { text-align: center; font-size: 11px; color: var(--gray-2); line-height: 1.6; margin-top: 4px; }
.footer-copy .heart { color: var(--red); }
.footer-copy strong { color: var(--gray); }

/* =====================================================================
   HOME COMPACTA — cabe em uma única tela (sem rolagem)
   Aplicado somente em <body class="home">. Distribui o conteúdo em
   coluna flex de 100dvh; os cards preenchem o espaço restante.
   ===================================================================== */
body.home { overflow: hidden; }
body.home .app {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Hero cresce e preenche a tela; professor mais exposto */
body.home .hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 12px 20px 10px;
  min-height: 0;
}
body.home .hero-logo { width: 92px; margin-top: 4px; margin-left: 2px; margin-bottom: 3px; }
body.home .hero-welcome { font-size: 12.5px; }
body.home .hero-title { font-size: 22px; }
body.home .hero-rule { margin: 6px 0 7px; height: 4px; }
body.home .hero-tag { font-size: 14px; }
body.home .features { margin-top: 10px; gap: 8px; }
body.home .feature { font-size: 10.5px; }
/* título/subtítulo no topo-esquerdo, sem invadir muito o professor */
body.home .hero-welcome,
body.home .hero-title,
body.home .hero-tag { max-width: 66%; }
/* 3 ícones vermelhos na horizontal, agrupados à esquerda (não sob a foto) */
body.home .features {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  max-width: 76%;
  width: 76%;
  margin-top: 14px;
}
body.home .feature { font-size: 10px; flex: 0 1 auto; }
/* caixa de destaque logo após os ícones */
body.home .hero-box { margin-top: 9px; padding: 10px 13px; font-size: 12.5px; }
body.home .hero-box .hb-ic { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }

/* professor — enquadramento premium na home: rosto exposto, olhos no topo-direito */
body.home .hero::before {
  left: auto; right: -14px; top: -6px; bottom: auto;   /* +direita, sobe alguns px */
  width: clamp(244px, 66%, 256px);
  height: 402px;
  background-image: url("../images/professor.png");
  background-size: 78%;                                  /* menos zoom: mostra dos ombros ao peito */
  background-position: 76px 0;                           /* desloca p/ direita: lado esquerdo do rosto livre do degradê */
  background-repeat: no-repeat;
  transform: scale(1.04);                                /* escala discretamente maior */
  transform-origin: top right;
  /* degradê suave e natural em volta da foto (transição premium) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 14%, #000 34%), linear-gradient(to bottom, #000 66%, rgba(0,0,0,.4) 85%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.3) 14%, #000 34%), linear-gradient(to bottom, #000 66%, rgba(0,0,0,.4) 85%, transparent 100%);
  mask-composite: intersect;
}
/* Moldura simples e discreta em volta da foto do professor (home).
   Envolve a área visível da foto: a caixa da foto sangra para fora do hero
   pelo topo/direita/base, por isso a moldura acompanha essas bordas.
   Largura = onde a imagem começa: (larguraCaixa - 76px de offset) * 1.04 (scale) - 14px (recuo à direita). */
body.home .hero-frame {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: calc((clamp(244px, 66%, 256px) - 76px) * 1.04 - 14px);
  border: 0;
  border-left: 2px solid rgba(0, 0, 0, .5);
  border-bottom: 2px solid rgba(0, 0, 0, .5);
  border-radius: 0 0 0 10px;   /* leve arredondamento só no canto inferior esquerdo */
  pointer-events: none;
  z-index: -1;            /* acima da foto, atrás dos textos/cards do hero */
}

body.home .hero::after {
  background:
    radial-gradient(120% 88% at 6% 32%, #f6f7f8 0%, rgba(246,247,248,.82) 32%, rgba(246,247,248,0) 60%),
    linear-gradient(100deg,
              #f4f5f6 16%,
              rgba(244,245,246,.80) 32%,
              rgba(244,245,246,.36) 42%,
              rgba(244,245,246,.10) 50%,
              rgba(244,245,246,0) 60%);
}

/* Botões (CTA) — altura natural compacta (não disputam espaço com os cards) */
body.home .cta-block {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 16px 4px;
  min-height: 0;
}
body.home .cta { padding: 8px 18px; margin-bottom: 0; }
body.home .cta .cta-ic { font-size: 22px; }
body.home .cta .cta-tt { font-size: 14px; }
body.home .cta .cta-sub { font-size: 11.5px; }

/* Grid de cards — único bloco flexível: absorve o espaço restante da tela */
body.home .cards {
  flex: 1 1 auto;
  padding: 6px 16px 4px;
  gap: 9px;
  grid-template-rows: 1fr 1fr;
  min-height: 0;
}
body.home .card { min-height: 0; padding: 9px 11px 10px; }
body.home .card-ic { width: 26px; height: 26px; font-size: 13px; margin-bottom: 3px; }
body.home .card-tt { margin-top: 0; font-size: 11px; line-height: 1.06; }
body.home .card-sub { font-size: 9.5px; margin-top: 2px; line-height: 1.12; }
body.home .card-arrow { width: 20px; height: 20px; font-size: 10px; bottom: 7px; right: 8px; }

/* WhatsApp + rodapé compactos */
body.home .wpp-bar { flex: 0 0 auto; margin: 5px 16px; padding: 8px 14px; }
body.home .wpp-bar .wb-ic { width: 33px; height: 33px; flex-basis: 33px; font-size: 18px; }
body.home .footer { flex: 0 0 auto; padding: 2px 16px 6px; }
body.home .footer-social { padding: 5px 0; }
body.home .footer-copy { margin-top: 1px; font-size: 9.5px; }

/* Telas mais altas (iPhone 12/13/14 ~852px): respira levemente */
@media (min-height: 850px) {
  body.home .hero { padding: 12px 20px 8px; }
  body.home .hero-logo { width: 96px; margin-top: 6px; margin-bottom: 4px; }
  body.home .cta { padding: 9px 18px; }
}

/* Telas grandes (iPhone 14/15/16 Pro Max ~896px+): mais respiro */
@media (min-height: 892px) {
  body.home .hero { padding: 16px 20px 12px; }
  body.home .hero-logo { width: 104px; margin-top: 10px; margin-bottom: 6px; }
  body.home .cta { padding: 13px 18px; }
}

/* Telas baixas (iPhone SE / paisagem): permite rolagem para não cortar conteúdo */
@media (max-height: 759px) {
  body.home { overflow: auto; }
  body.home .app { height: auto; display: block; }
  body.home .cards { grid-template-rows: none; }
  body.home .card { min-height: 118px; }
}

/* ------------------------- Responsivo ------------------------- */
@media (min-width: 500px) {
  body:not(.home) { padding: 24px 0; }
  body:not(.home) .app { border-radius: 26px; min-height: auto; overflow: hidden; }
  body.home { padding: 0; }
}
@media (max-width: 360px) {
  .hero-title { font-size: 24px; }
  .vi-thumb { width: 96px; flex-basis: 96px; height: 72px; }
  body.home .hero-title { font-size: 22px; }
  body.home .hero-logo { width: 86px; }
}

/* =====================================================================
   CAMADA PREMIUM — micro-interações, animações e refinos
   (não altera layout/cores/estrutura; apenas experiência e polimento)
   ===================================================================== */

/* --- Sombras modernas refinadas (mais suaves e naturais) --- */
:root {
  --shadow-sm:   0 1px 2px rgba(16,18,20,.05), 0 2px 6px rgba(16,18,20,.06);
  --shadow-md:   0 6px 16px rgba(16,18,20,.10), 0 12px 30px rgba(16,18,20,.08);
  --shadow-soft: 0 4px 14px rgba(16,18,20,.10);
  --shadow-red:  0 8px 20px rgba(200,17,12,.26), 0 2px 6px rgba(200,17,12,.18);
  --shadow-lift: 0 14px 34px rgba(16,18,20,.16), 0 4px 10px rgba(16,18,20,.10);
  --spring:      cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Acessibilidade: foco visível elegante --- */
a:focus-visible,
button:focus-visible,
.cta:focus-visible,
.card:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 12px;
}
.menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Efeito Ripple (todos os clicáveis) --- */
.ripple-host { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .28;
  pointer-events: none;
  animation: ripple-anim .6s ease-out forwards;
  z-index: 3;
}
@keyframes ripple-anim { to { transform: scale(2.6); opacity: 0; } }

/* --- Brilho passando da esquerda p/ direita (shine) --- */
.cta, .wpp-bar, .card, .wb-btn, .map-btn { position: relative; }
.cta::after,
.wpp-bar::after,
.card .shine,
.wb-btn::after,
.map-btn::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.cta:hover::after,
.wpp-bar:hover::after,
.card:hover .shine,
.wb-btn:hover::after,
.map-btn:hover::after {
  animation: shine-sweep .85s ease;
}
@keyframes shine-sweep {
  0%   { left: -60%; opacity: 0; }
  12%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.cta--white::after { background: linear-gradient(100deg, transparent, rgba(200,17,12,.10), transparent); }

/* --- Botões CTA premium: hover, tap, sombra dinâmica --- */
.cta {
  transition: transform .32s var(--spring), box-shadow .3s var(--ease), filter .3s var(--ease);
  will-change: transform;
}
.cta:hover { transform: translateY(-3px) scale(1.015); }
.cta--red:hover  { box-shadow: 0 16px 34px rgba(200,17,12,.34), 0 4px 10px rgba(200,17,12,.22); }
.cta--white:hover{ box-shadow: var(--shadow-lift); border-color: #f3d3d3; }
.cta:active { transform: translateY(-1px) scale(.99); transition-duration: .12s; }
.cta .cta-arrow { transition: transform .3s var(--spring); }
.cta:hover .cta-arrow { transform: translateX(4px); }

/* --- Cards premium: elevação, escala, inclinação sutil, sombra dinâmica --- */
.card {
  transition: transform .34s var(--spring), box-shadow .3s var(--ease);
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-lift);
}
.card:active { transform: translateY(-1px) scale(.99); transition-duration: .12s; }
.card::before { transition: transform .5s var(--ease); }
.card:hover::before { transform: scale(1.06); }   /* zoom suave da imagem de fundo */
.card .card-arrow { transition: transform .3s var(--spring), background .3s var(--ease); }
.card:hover .card-arrow { transform: translateX(2px) scale(1.06); }

/* --- Barra WhatsApp / botões diversos --- */
.wpp-bar { transition: transform .32s var(--spring), box-shadow .3s var(--ease); }
.wpp-bar:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(200,17,12,.32); }
.wb-btn, .vi-btn, .map-btn, .chip { transition: transform .28s var(--spring), box-shadow .28s var(--ease), background .25s, color .25s, border-color .25s; }
.wb-btn:active, .vi-btn:active, .map-btn:active { transform: scale(.95); }

/* --- Listas de cursos/certificados: profundidade + imagem ampliando --- */
.list-item, .video-item {
  border-radius: 14px;
  transition: transform .3s var(--spring), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.list-item { padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.list-item:hover, .video-item:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #fff, #fcfcfd);
  box-shadow: var(--shadow-md);
}
.li-thumb, .vi-thumb { transition: transform .45s var(--ease), box-shadow .3s var(--ease); }
.list-item:hover .li-thumb { transform: scale(1.06); box-shadow: var(--shadow-soft); }
.list-item:hover .li-arrow { transform: translateX(3px); transition: transform .3s var(--spring); }

/* --- Ícones sociais / links do rodapé e drawer --- */
.footer-social a, .drawer nav a, .contact-card .cc-list a { transition: transform .25s var(--spring), color .25s, background .25s, padding-left .2s; }
.footer-social a:hover { transform: translateY(-2px); }

/* --- Feature chips e caixa de destaque --- */
.feature .fic, .hero-box .hb-ic, .sh-ic, .cb-ic {
  transition: transform .35s var(--spring), box-shadow .3s var(--ease);
}
.hero-box { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hero-box:hover { box-shadow: var(--shadow-soft); }
.meta-card, .benefit, .info-card, .prog-card, .address-card {
  transition: transform .3s var(--spring), box-shadow .3s var(--ease);
  will-change: transform;
}
.meta-card:hover, .benefit:hover, .info-card:hover, .address-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prog-card { cursor: zoom-in; }
.prog-card:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); }
.prog-card img { transition: transform .45s var(--ease); }
.prog-card:hover img { transform: scale(1.08); }

/* --- Menu hambúrguer: vidro fosco premium + ícone animado --- */
.menu-btn {
  background: rgba(20,20,22,.62);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s var(--spring), background .3s var(--ease), box-shadow .3s var(--ease);
}
.menu-btn:hover { transform: scale(1.08) rotate(3deg); background: rgba(10,10,12,.82); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.menu-btn:active { transform: scale(.94); }
.menu-btn i { transition: transform .3s var(--spring); }
.menu-btn:hover i { transform: scale(1.05); }

/* --- Drawer: vidro fosco no overlay + animação premium de entrada --- */
.drawer-overlay {
  background: rgba(12,12,14,.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.drawer {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  transition: transform .42s var(--spring);
}
.drawer nav a i { transition: transform .3s var(--spring); }
.drawer nav a:hover i { transform: scale(1.18) rotate(-4deg); }
/* entrada escalonada dos itens do menu ao abrir */
.drawer nav a { opacity: 0; transform: translateX(16px); }
.drawer.open nav a { animation: drawer-item .42s var(--ease) forwards; }
.drawer.open nav a:nth-child(1){ animation-delay:.06s } .drawer.open nav a:nth-child(2){ animation-delay:.10s }
.drawer.open nav a:nth-child(3){ animation-delay:.14s } .drawer.open nav a:nth-child(4){ animation-delay:.18s }
.drawer.open nav a:nth-child(5){ animation-delay:.22s } .drawer.open nav a:nth-child(6){ animation-delay:.26s }
.drawer.open nav a:nth-child(7){ animation-delay:.30s } .drawer.open nav a:nth-child(8){ animation-delay:.34s }
@keyframes drawer-item { to { opacity: 1; transform: translateX(0); } }
.drawer-close { transition: transform .3s var(--spring), background .2s; }
.drawer-close:hover { transform: rotate(90deg); }

/* --- Scroll Reveal (surge uma vez ao rolar) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .7s var(--spring);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --- Lightbox --- */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8,8,10,0);
  backdrop-filter: blur(0px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease), visibility .35s;
}
.lightbox.open {
  opacity: 1; visibility: visible;
  background: rgba(8,8,10,.86);
  backdrop-filter: blur(4px);
}
.lightbox img {
  max-width: 92%; max-height: 82%;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.9);
  opacity: 0;
  transition: transform .4s var(--spring), opacity .4s var(--ease);
  touch-action: pan-y;
}
.lightbox.open img { transform: scale(1); opacity: 1; }
.lightbox-close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--spring), background .25s;
}
.lightbox-close:hover { transform: scale(1.1) rotate(90deg); background: rgba(255,255,255,.26); }
.li-thumb, .prog-card, .map-wrap img { cursor: zoom-in; }

/* --- Entrada da foto do professor (fade + scale) --- */
.hero::before { animation: heroPhotoIn 1s var(--ease) both; }
@keyframes heroPhotoIn {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: 1; transform: scale(1.04); }
}

/* --- Respeita usuários que preferem menos movimento --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .drawer.open nav a { opacity: 1 !important; transform: none !important; }
}