/**
 * tulu — estilos de la landing (front-page).
 * Adaptado del borrador estático. Se encola sólo en la portada.
 */

/* Header transparente sobre el hero navy en la portada */
.tulu-front .site-header{position:fixed}

/* ---------- HERO ---------- */
.tulu-hero{position:relative;padding:190px 0 120px;overflow:hidden;background:var(--navy)}
.tulu-hero .aura{
  position:absolute;top:-6%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);height:820px;background:var(--grad-glow);
  filter:blur(10px);pointer-events:none;z-index:0;
  animation:tulu-breathe 9s ease-in-out infinite;
}
@keyframes tulu-breathe{50%{transform:translateX(-50%) scale(1.06);opacity:.88}}
.tulu-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.tulu-hero .wrap{position:relative;z-index:2;text-align:center}
.tulu-hero .eyebrow{color:var(--lav)}
.tulu-hero .eyebrow::before{background:var(--lav)}
.tulu-hero h1{
  font-size:clamp(2.9rem,9vw,7.2rem);font-weight:800;
  margin:1.6rem auto 0;max-width:14ch;color:#FFF8DC;
}
.tulu-hero h1 .grad-text{background:none;-webkit-text-fill-color:#FFF8DC;color:#FFF8DC}
.tulu-hero p.lead{
  margin:1.7rem auto 0;max-width:56ch;color:var(--muted-d);
  font-size:clamp(1rem,1.6vw,1.18rem);
}
.tulu-hero .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}

.tulu-ticker{margin-top:4.5rem;border-block:1px solid var(--line-d);padding:1.1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.tulu-ticker-track{display:flex;gap:3.2rem;width:max-content;animation:tulu-scroll 26s linear infinite}
.tulu-ticker-track span{font-family:"Bricolage Grotesque",sans-serif;font-weight:500;font-size:1.05rem;
  color:var(--muted-d);display:inline-flex;align-items:center;gap:3.2rem;white-space:nowrap}
.tulu-ticker-track span::after{content:"✦";color:var(--lav);font-size:.7rem}
@keyframes tulu-scroll{to{transform:translateX(-50%)}}

/* ---------- SHELL DE SECCIÓN ---------- */
.tulu-section{position:relative;padding:120px 0;border-top:1px solid var(--line)}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(2rem,4.6vw,3.4rem);margin-top:1.1rem}
.sec-head p{color:var(--muted);margin-top:1.1rem;max-width:52ch}

/* ---------- SERVICIOS ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:3.4rem}
.svc{
  position:relative;border:1px solid var(--line);border-radius:22px;
  padding:2.6rem;background:var(--white);
  overflow:hidden;transition:border-color .35s,transform .35s var(--ease);
  box-shadow:0 8px 26px rgba(70,52,28,.07);
}
.svc::before{
  content:"";position:absolute;inset:0;border-radius:22px;padding:1px;
  background:var(--grad-warm);opacity:0;transition:opacity .35s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.svc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(70,52,28,.11)}
.svc:hover::before{opacity:1}
.svc-num{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:.85rem;color:var(--sand)}
.svc h3{font-size:1.7rem;margin:1.1rem 0 .9rem}
.svc p{color:var(--muted);font-size:.98rem}
.svc ul{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.svc ul li{font-size:.82rem;color:var(--sand-soft);border:1px solid var(--line);
  padding:.42rem .9rem;border-radius:100px}

/* ---------- MÉTODO ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.4rem}
.step{border-top:1px solid var(--line);padding-top:1.4rem}
.step .n{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.6rem;
  line-height:1;background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.step h3{font-size:1.15rem;margin:.9rem 0 .5rem}
.step p{color:var(--muted);font-size:.9rem}

/* ---------- TESTIMONIOS ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3.4rem}
.testi-card{position:relative;border:1px solid var(--line);border-radius:20px;padding:2rem;
  background:var(--white);box-shadow:0 8px 26px rgba(70,52,28,.07);
  display:flex;flex-direction:column;gap:1.3rem;transition:border-color .35s,transform .35s var(--ease)}
.testi-card:hover{transform:translateY(-4px);border-color:var(--lav);box-shadow:0 14px 34px rgba(70,52,28,.11)}
.testi-card .mark{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:2.6rem;line-height:.4;
  background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.testi-card .quote{font-size:1.02rem;line-height:1.55;color:var(--ink)}
.testi-author{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--grad-warm);flex:none;overflow:hidden;
  display:grid;place-items:center;color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:700}
.testi-avatar img{width:100%;height:100%;object-fit:cover}
.testi-author .n{font-weight:600;font-size:.95rem}
.testi-author .h{color:var(--muted);font-size:.82rem}

/* ---------- INSTAGRAM ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3.4rem}
.ig-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--white);
  box-shadow:0 8px 26px rgba(70,52,28,.07);transition:border-color .35s,transform .35s var(--ease)}
.ig-card:hover{transform:translateY(-4px);border-color:var(--lav);box-shadow:0 14px 34px rgba(70,52,28,.11)}
.ig-head{display:flex;align-items:center;gap:.6rem;padding:.75rem .85rem}
.ig-ava{width:30px;height:30px;border-radius:50%;background:var(--grad-warm);flex:none;overflow:hidden}
.ig-ava img{width:100%;height:100%;object-fit:cover}
.ig-handle{font-size:.85rem;font-weight:600}
.ig-handle span{display:block;color:var(--muted);font-size:.72rem;font-weight:400}
.ig-shot{aspect-ratio:1/1;position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  display:grid;place-items:center;gap:.5rem;text-align:center;
  background:repeating-linear-gradient(45deg,rgba(63,93,187,.05),rgba(63,93,187,.05) 12px,transparent 12px,transparent 24px)}
.ig-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-shot .ph{color:var(--lav);font-size:.78rem;padding:0 1rem;line-height:1.4}
.ig-foot{display:flex;align-items:center;gap:1rem;padding:.7rem .85rem;color:var(--muted);font-size:.8rem}
.ig-foot b{color:var(--sand-soft);font-weight:600}

/* ---------- CTA ---------- */
.tulu-cta{position:relative;overflow:hidden;border-top:1px solid var(--line);background:var(--navy);padding:120px 0}
.cta-inner{position:relative;z-index:2;text-align:center}
.tulu-cta .eyebrow{justify-content:center;color:var(--lav)}
.tulu-cta .eyebrow::before{background:var(--lav)}
.cta-inner h2{font-size:clamp(2.4rem,7vw,5rem);font-weight:800;max-width:16ch;margin:1.2rem auto 0;color:var(--bone)}
.cta-inner h2 .grad-text{background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cta-inner p{color:var(--muted-d);margin:1.4rem auto 2.4rem;max-width:46ch}
.tulu-cta .aura{
  position:absolute;left:50%;top:20%;transform:translateX(-50%);
  width:min(1100px,120vw);height:640px;background:var(--grad-glow);
  filter:blur(10px);pointer-events:none;z-index:0;opacity:.75;
}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:820px){
  .svc-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .testi-grid{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:1fr 1fr}
  .tulu-section{padding:88px 0}
  .tulu-cta{padding:88px 0}
  .tulu-hero{padding:150px 0 90px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}