/* ==========================================================================
   HOI · House of Infantia — site institucional
   Réplica estática do site que estava na Wix. Sem build: HTML + CSS + JS puro.
   Cores e o gradiente da seção "manifesto" foram extraídos do site original.
   ========================================================================== */

:root{
  --azul:      #1702F0;  /* azul da marca (hero)          */
  --azul-vivo: #1A6AFF;  /* azul dos blocos               */
  --vermelho:  #FF0101;  /* vermelho (CTA + fundo mosaico)*/
  --amarelo:   #FDC300;
  --escuro:    #232322;
  --cinza:     #F4F4F4;
  --branco:    #FFFFFF;

  --display: 'Inter', system-ui, -apple-system, sans-serif;
  --texto:   'Questrial', system-ui, -apple-system, sans-serif;

  --pad: clamp(20px, 4vw, 50px);
  --max: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--branco);
  color:var(--escuro);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- botões ---------- */
.btn{
  display:inline-block;
  font-family:var(--display);
  font-weight:700;
  font-size:1.125rem;
  line-height:1;
  padding:1.05em 2.4em;
  border-radius:2px;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.btn:focus-visible{ outline:3px solid var(--branco); outline-offset:3px; }

.btn--red  { background:var(--vermelho); color:var(--branco); }
.btn--dark { background:var(--escuro);   color:var(--branco); }
.btn--ghost{ background:transparent; color:var(--branco); border:2px solid var(--branco); }
.btn--ghost:hover{ background:var(--branco); color:var(--escuro); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:min(696px, 88vh);
  display:grid;
  background:var(--azul);
  overflow:hidden;
  isolation:isolate;
}

/* foto ocupa os 75% da direita no desktop; no mobile vira fundo inteiro */
.hero__media{
  position:absolute; inset:0 0 0 25%;
  z-index:0; background:#000;
}
.hero__media img{ width:100%; height:100%; object-fit:cover; }

.hero__panel{
  position:absolute; inset:0 75% 0 0;
  background:var(--azul); z-index:1;
}

.hero__content{
  position:relative; z-index:2;
  align-self:center;
  padding:0 var(--pad);
  max-width:var(--max);
  width:100%;
  margin-inline:auto;
}

.hero__logo{
  width:clamp(120px, 14vw, 185px);
  height:auto;
  margin-bottom:clamp(12px, 2vw, 22px);
}

.hero__title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(2rem, 4.6vw, 3rem);
  line-height:1.05;
  color:var(--branco);
  margin:0;
  max-width:14ch;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}

.hero__cta{
  position:absolute;
  z-index:3;
  left:50%; transform:translateX(-50%);
  bottom:clamp(36px, 8vh, 92px);
  white-space:nowrap;
}
.hero__cta:hover{ transform:translateX(-50%) translateY(-2px); }

/* ==========================================================================
   MANIFESTO — gradiente da marca
   ========================================================================== */
.manifesto{
  position:relative;
  background:var(--escuro);
  overflow:hidden;
  isolation:isolate;
}

/* malha de gradientes radiais — valores extraídos do site original */
.manifesto__mesh{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 75.25% 18.16%, #1A6AFF 0%, rgba(26,106,255,0) 35%),
    radial-gradient(circle at 99.88% 100%,   #FF0101 0%, rgba(255,1,1,0) 84%),
    radial-gradient(circle at 0% 100%,       #FF0101 0%, rgba(255,1,1,0) 54%),
    radial-gradient(circle at 4.58% 15%,     #FDC300 0%, rgba(253,195,0,0) 100%),
    radial-gradient(circle at 61.64% 42.76%, #1A6AFF 0%, rgba(26,106,255,0) 100%);
}

.manifesto__inner{
  position:relative; z-index:1;
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(90px, 16vh, 190px) var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(48px, 9vh, 110px);
  text-align:center;
}

.manifesto__mark{
  width:clamp(150px, 24vw, 300px);
  height:auto;
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.3));
}

.manifesto__line{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.4rem, 3.2vw, 2.5rem);
  line-height:1.25;
  color:var(--branco);
  margin:0;
  max-width:22ch;
  text-wrap:balance;
}

/* ==========================================================================
   RECEITA
   ========================================================================== */
.receita{
  background:var(--escuro);
  color:var(--branco);
}
.receita__inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(70px, 12vh, 140px) var(--pad);
  max-width:min(var(--max), 100%);
}
.receita__inner > *{ max-width:52ch; }

.receita h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  line-height:1.15;
  margin:0 0 .7em;
}
.receita p{
  font-size:clamp(1rem, 1.4vw, 1.15rem);
  color:rgba(255,255,255,.86);
  margin:0 0 2em;
}

/* ==========================================================================
   MOSAICO
   ========================================================================== */
.mosaico{
  background:var(--vermelho);
  padding:var(--pad);
}
.mosaico__grid{
  max-width:var(--max);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--pad);
}

.tile{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(28px, 4.4vw, 66px);
  min-height:clamp(320px, 46vw, 720px);
  overflow:hidden;
}

.tile h2{
  font-family:var(--texto);
  font-weight:400;
  font-size:clamp(1.6rem, 3.4vw, 2.25rem);
  line-height:1.25;
  margin:0;
  color:var(--branco);
}
.tile h3{
  font-family:var(--texto);
  font-weight:400;
  font-size:clamp(1.4rem, 2.8vw, 2.25rem);
  line-height:1.2;
  margin:0 0 .55em;
}
.tile p{
  font-size:clamp(.95rem, 1.25vw, 1rem);
  margin:0;
}

.tile--azul   { background:var(--azul-vivo); }
.tile--cinza  { background:var(--cinza);  color:var(--escuro); }
.tile--branco { background:var(--branco); color:var(--escuro); }
.tile--amarelo{ background:var(--amarelo); color:var(--escuro); }
.tile--amarelo .btn{ margin-top:1.8em; align-self:flex-start; }

.tile--img{ margin:0; padding:0; background:#000; }
.tile--img img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape{
  background:var(--escuro);
  color:rgba(255,255,255,.82);
  font-size:.95rem;
}
.rodape__inner{
  max-width:var(--max);
  margin-inline:auto;
  padding:clamp(52px, 9vh, 88px) var(--pad) clamp(28px, 4vh, 40px);
}
.rodape__logo{ width:120px; margin-bottom:clamp(28px, 5vh, 46px); }

.rodape__cols{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:clamp(24px, 4vw, 48px);
}
.rodape h4{
  font-family:var(--display);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--branco);
  margin:0 0 .9em;
}
.rodape p{ margin:0; line-height:1.75; }
.rodape a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); }
.rodape a:hover{ color:var(--branco); border-bottom-color:var(--branco); }

.rodape__base{
  margin-top:clamp(36px, 6vh, 58px);
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;
  color:rgba(255,255,255,.55);
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 860px){
  /* hero: foto vira fundo inteiro, com véu para o texto respirar */
  .hero{ min-height:82vh; }
  .hero__media{ inset:0; }
  .hero__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(23,2,240,.86) 0%, rgba(23,2,240,.42) 55%, rgba(0,0,0,.55) 100%);
  }
  .hero__panel{ display:none; }

  .mosaico__grid{ grid-template-columns:1fr; }
  .tile{ min-height:auto; padding:clamp(30px, 8vw, 46px); }
  .tile--img{ aspect-ratio:4/3; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
  .btn:hover{ transform:none; }
  .hero__cta:hover{ transform:translateX(-50%); }
}