/* ==========================================================================
   Colégio Stella Più Bella — tokens da identidade visual
   Fonte: brand book "Design dos Reis" (set/2026) + paletas Adobe Color.
   Este arquivo é compartilhado pelas quatro propostas da landing page de
   matrículas 2027 (copiado da série anterior, com as adições marcadas).
   ========================================================================== */

/* --- Fontes da marca (arquivos entregues pelo estúdio) -------------------- */
@font-face {
  font-family: "Erstoria";
  src: url("fonts/Erstoria.otf") format("opentype");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Regular.otf")   format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Medium.otf")    format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-SemiBold.otf")  format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-Bold.otf")      format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Gilroy"; src: url("fonts/Gilroy-ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }

/* --- Paleta oficial -------------------------------------------------------- */
:root {
  /* principal (brand book, p. 18) */
  --spb-marinho:   #0D1A41;
  --spb-dourado:   #EAC68C;
  --spb-bronze:    #6D5129;
  --spb-creme:     #FFF5E6;
  --spb-creme-2:   #FFF2D9;   /* variante registrada no Adobe Color */
  /* complementar (Adobe Color) */
  --spb-preto:     #08090C;
  --spb-grafite:   #34373F;
  --spb-azul-real: #183272;
  --spb-azul-medio:#4868A8;
  --spb-azul-claro:#8699B7;
  --spb-cacau:     #302317;
  --spb-branco:    #FFFCF8;

  /* tons derivados (matrículas 2027) — misturas das cores oficiais sobre
     branco, usadas para fundos delicados; não são cores novas da marca */
  --spb-bruma:     #F4F6FA;   /* azul médio 6%  */
  --spb-nevoa:     #E9EDF5;   /* azul médio 12% */
  --spb-seda:      #D1D9E9;   /* azul médio 25% */
  --spb-ceu:       #DAE1EE;   /* azul médio 20% */
  --spb-luz:       #FBF4E8;   /* dourado 20%    */
  --spb-trigo:     #F7E8D1;   /* dourado 40%    */
  --spb-ouro-velho:#CBA973;   /* dourado 75% + bronze 25%: filetes sobre creme */

  /* famílias tipográficas (brand book, p. 17) */
  --font-erstoria: "Erstoria", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-gilroy:   "Gilroy", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-inter:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* papéis: V1 = Erstoria + Inter (padrão); V2 = Gilroy + Inter */
  --font-display: var(--font-erstoria);
  --font-sans:    var(--font-gilroy);
  --font-body:    var(--font-inter);

  /* geometria controlada pelo painel */
  --raio: 0px;
  --raio-btn: 2px;
}
:root[data-tipo="gilroy"] { --font-display: var(--font-gilroy); }
:root[data-cantos="arredondado"] { --raio: 18px; --raio-btn: 999px; }

/* --- Base compartilhada ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-synthesis: none; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--spb-dourado); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Espaço reservado para fotografia real da escola ------------------------- */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background:
    radial-gradient(120% 90% at 20% 10%, var(--foto-luz, rgba(234,198,140,.55)), transparent 60%),
    linear-gradient(160deg, var(--foto-a, #183272), var(--foto-b, #0D1A41));
  aspect-ratio: var(--foto-prop, 4 / 3);
  max-width: 100%;
}
.foto::before {
  content: "";
  position: absolute; inset: 0;
  background: url("logo/negativo-creme.svg") center / auto 62% no-repeat;
  opacity: .14;
}
.foto::after {
  content: attr(data-legenda);
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  font: 500 10.5px/1.35 var(--font-sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,245,230,.82);
}

/* Adição (matrículas 2027): espaço reservado claro, para páginas delicadas.
   Fundo em névoa azul e trigo, medalhão vazado quase transparente e legenda
   em marinho. As cores vêm das variáveis --foto-* definidas pela página. */
.foto--claro {
  background:
    radial-gradient(90% 70% at 22% 12%, var(--foto-luz, rgba(255,252,248,.95)), transparent 62%),
    linear-gradient(165deg, var(--foto-a, #E9EDF5), var(--foto-b, #F7E8D1));
}
.foto--claro::before { background-image: url("logo/vazada.svg"); background-size: auto 46%; opacity: var(--foto-marca, .09); }
.foto--claro::after { color: var(--foto-legenda, rgba(13,26,65,.58)); }
.foto--escuro::before { opacity: .12; }

/* Adição (matrículas 2027, versão com fotografias): o mesmo quadro recebe uma
   <img> que o preenche. --foco define o enquadramento (object-position) e
   --foto-filtro, definido pela página, harmoniza a foto com a paleta. */
.foto--img { background: var(--foto-a, #E9EDF5); }
.foto--img::before, .foto--img::after { display: none; }
.foto--img > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--foco, 50% 50%); filter: var(--foto-filtro, none); }

/* Estrela de quatro pontas desenhada em CSS (herda a cor de fundo). */
.estrelinha {
  display: inline-block; width: 9px; height: 9px; flex: none;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}