/* =====================================================================
   AHAV · HOME (index.html)
   Carrega depois de: base.css, modal.css, formulario.css

   ÍNDICE  (mesma ordem da página)
   0. Ajustes da Home sobre a base
   1. HERO (bloco roxo do topo + menu escuro)
   2. SERVIÇOS (carrossel 3D)
   3. PROJETOS (cards flutuando)
   4. COMO TRABALHAMOS (bloco laranja com etapas)
   5. POR QUE AHAV (texto + colagem de fotos)
   6. CONTATO (bloco laranja com formulário)
   7. Responsivo
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. AJUSTES DA HOME SOBRE A BASE
   --------------------------------------------------------------------- */
.ah .pill{line-height:1;white-space:nowrap}
.ah .pill .ar{flex:initial}


/* ---------------------------------------------------------------------
   1. HERO
   --------------------------------------------------------------------- */
.hero{position:relative;margin:16px;border-radius:56px;background:#6b2ea0;color:#f2e9d7;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:14px;border:1.5px solid rgba(242,233,215,.32);border-radius:44px;pointer-events:none}
.hero-in{position:relative;max-width:1312px;margin:0 auto;padding:12px 48px 56px}
/* menu escuro (só na Home, sobre o roxo) */
.nav.dark{color:#f2e9d7}
.nav.dark .nav-links{background:rgba(242,233,215,.1);border:1px solid rgba(242,233,215,.22)}
.ah .nav.dark .nav-links a{color:#f2e9d7}
.ah .nav.dark .nav-links a:hover{background:rgba(242,233,215,.12)}
.nav.dark .lang{border:1px solid rgba(242,233,215,.3)}
.ah .nav.dark .lang button[aria-pressed="true"]{background:#f2e9d7;color:#6b2ea0}
/* título e botões */
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;align-items:center;padding-top:24px}
.hero h1{font-size:clamp(46px,6.2vw,88px);line-height:1;letter-spacing:-.01em;margin:18px 0 24px}
.hero h1 i{color:#f28643}
.hero .lead{max-width:470px;margin-bottom:36px;opacity:.94}
.acts{display:flex;gap:12px;flex-wrap:wrap}
/* arte (forma rosa + objeto 3D) */
.art{position:relative;min-height:560px}
.blob{position:absolute;inset:16px 0 72px 24px;border-radius:999px 999px 48px 48px;background:#da609a}
.art .ph{position:absolute;left:10%;right:6%;top:64px;bottom:128px;border-radius:32px}
/* cartão de vidro "Ahav é amor, em hebraico" */
.ah .glass{position:absolute;right:56px;bottom:48px;width:300px;display:block;padding:22px 24px;border-radius:28px;background:rgba(107,46,160,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(242,233,215,.3);color:#f2e9d7;text-decoration:none;transition:transform 200ms var(--ease)}
.ah .glass:hover{transform:translateY(-3px);color:#f2e9d7}
.ah .glass:active{transform:scale(.98)}
.glass .gt{display:block;font-family:Galline,Georgia,serif;font-weight:700;font-size:24px;line-height:1.1;margin:8px 0}
.glass p{font-size:14px;line-height:1.5}
.glass .eyebrow{color:#f4bd51}


/* ---------------------------------------------------------------------
   2. SERVIÇOS — carrossel 3D
   A posição de cada card (girar/afastar) é calculada no home.js.
   --------------------------------------------------------------------- */
.center-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.cf-zone{margin-top:48px}
.cf{position:relative;height:480px;perspective:1400px}
.ah .cf-card{position:absolute;left:50%;top:0;width:400px;height:460px;margin-left:-200px;border:0;border-radius:32px;padding:24px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:16px;font:inherit;transition:transform 700ms var(--out),opacity 450ms ease}
.cf-top{display:flex;justify-content:space-between;align-items:center}
.go{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;transition:transform 220ms var(--ease)}
.go svg{width:16px;height:16px}
.go-more{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 14px;border-radius:999px;font-size:13px;font-weight:700;line-height:1}
.go-more svg{width:14px;height:14px;transition:transform 220ms var(--ease)}
.cf-card:hover .go-more svg{transform:translateX(3px)}
.cf-card .ph{flex:1}
.cf-title{font-family:Galline,Georgia,serif;font-weight:700;font-size:30px;line-height:1.1}
.cf-desc{font-size:15px;line-height:1.55}
/* setas e bolinhas */
.cf-bar{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.ah .cf-arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid #000;background:transparent;color:#000;cursor:pointer;display:grid;place-items:center;transition:transform 180ms var(--ease)}
.ah .cf-arrow:hover{transform:scale(1.07)}
.ah .cf-arrow:active{transform:scale(.93)}
.cf-arrow svg{width:18px;height:18px}
.dots{display:flex}
.ah .dot{width:30px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;padding:0}
.dot span{display:block;width:10px;height:10px;border-radius:999px;background:rgba(0,0,0,.28);transition:transform 260ms var(--ease)}
.ah .dot:hover span{transform:scale(1.3)}
.dot[aria-current="true"] span{background:#6b2ea0;transform:scaleX(2)}


/* ---------------------------------------------------------------------
   3. PROJETOS — cards flutuando
   Os atrasos de cada card (para não andarem juntos) são calculados no home.js.
   --------------------------------------------------------------------- */
.s-projetos{padding-top:48px}
.s-projetos .lead{max-width:560px}
/* ocupa a largura toda da tela (fica fora do .wrap no HTML) */
.float{--amp:150px;position:relative;width:100%;height:560px;margin-top:40px;overflow:hidden}
.lane{position:absolute;inset:0;pointer-events:none;animation:drift 80s linear infinite}
.bob{position:absolute;left:0;top:calc(50% - 92px);animation:bob 9s ease-in-out infinite alternate}
.ah .pcard{pointer-events:auto;position:relative;display:block;width:220px;height:184px;border:0;border-radius:20px;padding:10px;cursor:pointer;overflow:hidden;font:inherit;text-align:left;transition:transform 240ms var(--ease)}
.ah .pcard:hover{transform:scale(1.06)}
.ah .pcard:active{transform:scale(1.02)}
.pcard .ph{position:absolute;inset:10px;border-radius:14px}
/* etiqueta com o nome (aparece no hover) */
.lbl{position:absolute;left:10px;right:10px;bottom:10px;padding:8px 12px;border-radius:14px;background:#f2e9d7;color:#000;opacity:0;transform:translateY(8px);transition:opacity 180ms ease,transform 240ms var(--ease)}
.lbl b{display:block;font-size:14px;line-height:1.3}
.lbl small{display:block;font-size:12px;line-height:1.3}
.pcard:hover .lbl,.pcard:focus-visible .lbl{opacity:1;transform:none}
.lane:hover,.lane:focus-within,.lane:hover .bob,.lane:focus-within .bob{animation-play-state:paused}
.lane:hover,.lane:focus-within{z-index:60 !important}
@keyframes drift{from{transform:translateX(100%)}to{transform:translateX(-240px)}}
@keyframes bob{from{transform:translateY(calc(var(--amp) * -1))}to{transform:translateY(var(--amp))}}
@media (hover:none){.lbl{opacity:1;transform:none}}


/* ---------------------------------------------------------------------
   4. COMO TRABALHAMOS
   --------------------------------------------------------------------- */
.s-processo{padding-inline:16px}
/* bloco laranja (também usado na seção 6) */
.block{border-radius:56px;padding:72px 56px;background:#f28643;max-width:1408px;margin-inline:auto}
.how-head{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end;padding-right:200px;max-width:1216px;margin-inline:auto}
.how-body{position:relative;max-width:1216px;margin-inline:auto}
.selo{width:150px;height:150px}
.how-body .selo{position:absolute;right:40px;top:-27px;z-index:3;pointer-events:none}
/* cards das etapas (ficam rosa/roxo no hover) */
.how-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
.hc{border-radius:32px;padding:28px 24px 32px;display:flex;flex-direction:column;gap:14px;min-height:300px;background:#f2e9d7}
.ah .hc{position:relative;isolation:isolate;transition:transform 260ms var(--ease)}
.hc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity 240ms ease}
.hc.h-rosa::before{background:#da609a}
.hc.h-uva::before{background:#6b2ea0}
.ah .hc:hover{transform:translateY(-6px)}
.hc:hover::before{opacity:1}
.hc.h-uva:hover{color:#f2e9d7}
.hc .thin{margin-bottom:auto}
.hc h3{font-size:28px;line-height:1.2}
.hc p{font-size:15px;line-height:1.6}
.center{display:flex;justify-content:center;margin-top:48px}


/* ---------------------------------------------------------------------
   5. POR QUE AHAV
   --------------------------------------------------------------------- */
.why{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.why .stack{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.collage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:220px 220px;gap:20px}
.collage .ph{border-radius:32px}
.collage .c1{grid-row:span 2}
/* link "Conheça a Ahav" */
.ah .tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:#6b2ea0;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;transition:transform 180ms var(--ease)}
.ah .tlink:hover{transform:translateX(3px);color:#6b2ea0}
.ah .tlink svg{width:16px;height:16px}


/* ---------------------------------------------------------------------
   6. CONTATO (layout e formulário em formulario.css)
   --------------------------------------------------------------------- */
.s-contato{padding:0 16px 16px}
.ok{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:20px;background:#6b2ea0;color:#f2e9d7;font-size:15px;line-height:1.5}
.ok svg{flex:none;width:22px;height:22px;margin-top:1px}
/* cor do texto girando em volta da mão */
.rf{color:#000}
.rb{color:rgba(0,0,0,.3)}


/* ---------------------------------------------------------------------
   7. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  .how-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-head{padding-right:170px}
}
@media (max-width:900px){
  /* 1 · hero */
  .hero{margin:8px;border-radius:32px}
  .hero::before{inset:8px;border-radius:26px}
  .hero-in{padding:4px 20px 24px}
  .hero-grid{grid-template-columns:1fr;gap:8px;padding-top:8px}
  .art{min-height:340px;order:-1}
  .blob{inset:8px 0 24px 0}
  .art .ph{top:40px;bottom:56px;left:8%;right:8%}
  .ah .glass{position:relative;right:auto;bottom:auto;width:auto;margin-top:28px}
  /* 4 · como trabalhamos e 6 · contato */
  .block{border-radius:32px;padding:40px 20px}
  .how-head{grid-template-columns:1fr;gap:16px;padding-right:0}
  .how-body .selo{position:relative;right:auto;top:auto;margin:24px 8px -64px auto}
  /* 5 · por que ahav */
  .why{grid-template-columns:1fr;gap:40px}
}
@media (max-width:600px){
  /* 2 · serviços */
  .cf{height:440px}
  .ah .cf-card{width:300px;height:420px;margin-left:-150px}
  /* 3 · projetos */
  .float{--amp:110px;height:420px}
  .ah .pcard{width:156px;height:132px}
  .bob{top:calc(50% - 66px)}
  /* 4 · como trabalhamos */
  .how-cards{grid-template-columns:1fr}
  .hc{min-height:0}
  .selo{width:104px;height:104px}
  /* 5 · por que ahav */
  .collage{grid-template-rows:160px 160px;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .lane,.bob{animation:none}
  .float{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:16px}
  .lane,.bob{position:relative;inset:auto;top:auto}
  .ah .cf-card{transition:none}
}