/*
Theme Name: Astra Child — Dariana Rozo
Template: astra
Version: 1.0
Author: Dariana Rozo
*/

:root{
  --cream:#FAF8F5;
  --ink:#0C0C0B;
  --coral:#E55B42;
  --line:rgba(12,12,11,0.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{margin:0;padding:0;list-style:none}

@media (hover:hover) and (pointer:fine){
  body{cursor:none}
  a,button,.btn,.nav-links a{cursor:none}
}

body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9997;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.cur,
.cur-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
}

.cur{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--coral);
}

.cur-ring{
  width:34px;
  height:34px;
  border:1px solid rgba(229,91,66,.35);
  border-radius:50%;
  z-index:9998;
  transition:transform .2s ease, border-color .2s ease, opacity .2s ease;
}

.cur-ring.hov{
  transform:translate(-50%,-50%) scale(1.45);
  border-color:rgba(229,91,66,.8);
}

nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.5rem 3rem;
  mix-blend-mode:normal;
}

.nav-logo{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;
  font-style:italic;
  letter-spacing:.04em;
}

.nav-links{
  display:flex;
  gap:2rem;
}

.nav-links a{
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.55;
  transition:opacity .25s ease,color .25s ease;
}

.nav-links a:hover{
  opacity:1;
  color:var(--coral);
}

.hero-wrapper{
  height:300vh;
  position:relative;
}

.hero-sticky{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
}

.bot-bg{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.95;
}

#botSvg{
  width:100%;
  height:100%;
}

.vign{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 50% 38%, transparent 0%, rgba(250,248,245,0) 42%, rgba(250,248,245,.56) 88%, rgba(250,248,245,.92) 100%),
    linear-gradient(to bottom, rgba(250,248,245,.72), rgba(250,248,245,0) 24%, rgba(250,248,245,0) 72%, rgba(250,248,245,.88) 100%);
}

.hero-inner{
  position:relative;
  z-index:4;
  height:100%;
  display:grid;
  grid-template-columns:1fr 420px;
  align-items:end;
  gap:4rem;
  padding:0 3.5rem 4rem;
}

.hero-left{
  max-width:780px;
  align-self:center;
  padding-top:4rem;
}

.h-eye,
.h-meta,
.h-bottom{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s ease, transform .9s ease;
}

.h-eye{
  display:inline-block;
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--coral);
  margin-bottom:1rem;
}

.h-meta{
  display:flex;
  gap:1rem;
  align-items:center;
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.45;
}

.h-name{
  margin:1.2rem 0 1.4rem;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(4.5rem,11vw,9rem);
  font-weight:300;
  line-height:.88;
  letter-spacing:-.05em;
}

.h-name .line{
  display:block;
  opacity:0;
  transform:translateY(36px);
  transition:opacity .95s ease, transform .95s ease;
}

.h-name .line:nth-child(2){
  transition-delay:.12s;
}

.hero-photo{
  align-self:end;
  justify-self:end;
  width:100%;
  max-width:420px;
}

.hero-photo img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(12,12,11,.08);
}

.h-bottom{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  transition:opacity .9s ease .55s,transform .9s ease .55s;
}

.h-tagline{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.15rem;
  font-weight:300;
  color:rgba(12,12,11,.45);
}

.h-stats{
  display:flex;
  gap:2.8rem;
}

.h-stat{
  text-align:right;
}

.h-stat-n{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  font-weight:300;
  display:block;
  line-height:1;
  color:var(--ink);
}

.h-stat-l{
  font-size:.55rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.38;
  margin-top:.2rem;
  display:block;
}

.scroll-ind{
  position:absolute;
  bottom:3rem;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  opacity:0;
  transition:opacity .9s ease 1.3s;
}

.s-line{
  width:1px;
  height:34px;
  background:linear-gradient(to bottom,rgba(229,91,66,.5),transparent);
  animation:sp 2.2s ease-in-out infinite;
}

.s-lbl{
  font-size:.52rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(12,12,11,.26);
}

@keyframes sp{
  0%{transform:scaleY(0);transform-origin:top}
  48%{transform:scaleY(1);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

.loaded .h-eye,
.loaded .h-meta,
.loaded .h-bottom{
  opacity:1;
  transform:translateY(0);
}

.loaded .h-name .line{
  opacity:1;
  transform:translateY(0);
}

.loaded .scroll-ind{
  opacity:1;
}

.marquee{
  padding:1.8rem 0;
  border-top:1px solid rgba(12,12,11,.07);
  border-bottom:1px solid rgba(12,12,11,.07);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
  z-index:10;
}

.m-track{
  display:inline-block;
  animation:mq 22s linear infinite;
}

.m-item{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.65rem;
  font-weight:300;
  margin:0 1.8rem;
  display:inline-block;
  opacity:.26;
}

.m-dot{
  color:var(--coral);
  opacity:.7 !important;
  font-style:normal;
  font-size:.85rem;
  vertical-align:middle;
}

@keyframes mq{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.about{
  padding:8rem 3.5rem;
  position:relative;
  z-index:10;
}

.sec-label{
  font-size:.56rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--coral);
  margin-bottom:3rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

.sec-label::after{
  content:'';
  flex:1;
  height:1px;
  background:rgba(229,91,66,.18);
}

.about-intro{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.55rem,3vw,2.5rem);
  font-weight:300;
  line-height:1.38;
  letter-spacing:-.01em;
  max-width:960px;
  margin-bottom:4.5rem;
}

.about-intro em{
  font-style:italic;
  color:var(--coral);
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  border-top:1px solid rgba(12,12,11,.07);
  padding-top:3.5rem;
}

.about-p{
  font-size:.86rem;
  line-height:1.95;
  opacity:.52;
  margin-bottom:1.1rem;
}

.about-btns{
  display:flex;
  gap:1rem;
  margin-top:2rem;
  flex-wrap:wrap;
}

.btn{
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.7rem 1.5rem;
  transition:all .3s;
}

.btn-dark{
  background:var(--ink);
  color:var(--cream);
}

.btn-dark:hover{
  background:var(--coral);
}

.btn-ghost{
  border:1px solid rgba(12,12,11,.22);
  color:var(--ink);
}

.btn-ghost:hover{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink);
}

.skills-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
}

.sk{
  padding:1.3rem 1.5rem;
  border:1px solid rgba(12,12,11,.08);
  border-radius:10px;
  transition:border-color .3s;
}

.sk:hover{
  border-color:rgba(229,91,66,.3);
}

.sk-title{
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--coral);
  margin-bottom:.65rem;
  display:block;
}

.sk-list{
  font-size:.76rem;
  line-height:1.85;
  opacity:.5;
}

.services{
  position:relative;
  z-index:10;
}

.svc-head{
  padding:6rem 3.5rem 3rem;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.svc-hl{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.8vw,3rem);
  font-weight:300;
  line-height:1.1;
}

.svc-hl em{
  font-style:italic;
  color:var(--coral);
}

.svc-hint{
  font-size:.65rem;
  letter-spacing:.08em;
  opacity:.3;
  text-align:right;
  max-width:120px;
  line-height:1.7;
}

.cards-wrap{
  padding:0 3.5rem 8rem;
}

.cs{
  position:sticky;
  margin-bottom:1.6rem;
}

.cs:nth-child(1){top:5.5rem}
.cs:nth-child(2){top:7rem}
.cs:nth-child(3){top:8.5rem}
.cs:nth-child(4){top:10rem}
.cs:nth-child(5){top:11.5rem}
.cs:nth-child(6){top:13rem}

.card{
  border-radius:20px;
  padding:2.6rem 3rem 3rem;
  min-height:230px;
  display:grid;
  grid-template-columns:68px 1fr auto;
  gap:2rem;
  align-items:start;
  transition:box-shadow .3s;
  position:relative;
  overflow:hidden;
}

.card:hover{
  box-shadow:0 20px 60px rgba(12,12,11,.12);
}

.cc{
  background:var(--cream);
  border:1px solid rgba(12,12,11,.09);
  box-shadow:0 4px 24px rgba(12,12,11,.05);
}

.cc:hover{
  box-shadow:0 28px 70px rgba(12,12,11,.13);
}

.ck{
  background:var(--coral);
  color:var(--cream);
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(0,0,0,.06) 0%, transparent 40%);
}

.ck .cd{color:rgba(250,248,245,.78)}
.ck .tag{border-color:rgba(250,248,245,.22)!important;color:rgba(250,248,245,.72)!important}
.ck .ce{color:rgba(250,248,245,.52)!important}
.ck .cn{opacity:.15;color:var(--cream)}

.cn{
  font-family:'Cormorant Garamond',serif;
  font-size:4.2rem;
  font-weight:300;
  line-height:1;
  opacity:.08;
  letter-spacing:-.04em;
}

.ce{
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.36;
  margin-bottom:.65rem;
  display:block;
}

.ct{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  font-weight:300;
  line-height:1.1;
  margin-bottom:.85rem;
}

.cd{
  font-size:.83rem;
  line-height:1.85;
  opacity:.56;
  margin-bottom:1.4rem;
  max-width:520px;
}

.tags{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.tag{
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.28rem .8rem;
  border:1px solid rgba(12,12,11,.14);
  border-radius:20px;
  opacity:.48;
  transition:all .25s;
}

.card-word{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(3rem,5vw,5.5rem);
  font-weight:300;
  line-height:1;
  opacity:.07;
  letter-spacing:-.02em;
  white-space:nowrap;
  align-self:center;
}

.ck .card-word{
  opacity:.12;
  color:var(--cream);
}

.work{
  padding:8rem 3.5rem;
  border-top:1px solid rgba(12,12,11,.07);
  position:relative;
  z-index:10;
}

.work-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:7rem;
  align-items:start;
}

.work-sticky-col{
  position:sticky;
  top:6rem;
}

.work-sticky-col h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,3.2vw,2.8rem);
  font-weight:300;
  line-height:1.1;
  margin-top:2.5rem;
}

.work-sticky-col h2 em{
  font-style:italic;
  color:var(--coral);
}

.work-sticky-col p{
  font-size:.8rem;
  line-height:1.9;
  opacity:.45;
  margin-top:1rem;
}

.t-item{
  padding:2.4rem 0;
  border-bottom:1px solid rgba(12,12,11,.07);
  display:grid;
  grid-template-columns:130px 1fr;
  gap:2.2rem;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s,transform .7s;
}

.t-item.vis{
  opacity:1;
  transform:none;
}

.t-period{
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.35;
  padding-top:.3rem;
  line-height:1.7;
}

.t-role{
  font-family:'Cormorant Garamond',serif;
  font-size:1.45rem;
  font-weight:300;
  line-height:1.1;
  margin-bottom:.3rem;
}

.t-co{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--coral);
  opacity:.85;
  margin-bottom:.65rem;
  display:block;
}

.t-desc{
  font-size:.78rem;
  line-height:1.88;
  opacity:.48;
}

.t-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.38rem;
  margin-top:.8rem;
}

.t-tag{
  font-size:.54rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.22rem .65rem;
  border:1px solid rgba(12,12,11,.11);
  border-radius:20px;
  opacity:.42;
}

.footer{
  padding:7rem 3.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(12,12,11,.07);
  position:relative;
  z-index:10;
}

.f-big{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4.2vw,3.4rem);
  font-weight:300;
  line-height:1.1;
}

.f-big em{
  font-style:italic;
  color:var(--coral);
}

.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .85s ease,transform .85s ease;
}

.reveal.vis{
  opacity:1;
  transform:none;
}

@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;padding:0 2rem 3rem}
  .hero-photo{display:none}
  .h-name{font-size:clamp(3.5rem,11vw,7rem)}
  .h-bottom{flex-direction:column;gap:1.2rem;align-items:flex-start}
  .h-stats{gap:1.5rem}
  .about{padding:5rem 2rem}
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .skills-wrap{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:1fr;gap:3rem}
  .work-sticky-col{position:relative;top:auto}
  .footer{flex-direction:column;gap:2rem;align-items:flex-start;padding:5rem 2rem}
}

@media (max-width:768px){
  nav{padding:1.2rem 1.5rem}
  .nav-links{gap:1.4rem}
  .nav-links a{font-size:.6rem}
  .h-name{font-size:clamp(3rem,14vw,5rem)}
  .hero-inner{padding:0 1.5rem 2.5rem}
  .h-stats{gap:1.2rem}
  .h-stat-n{font-size:1.5rem}
  .about{padding:4rem 1.5rem}
  .skills-wrap{grid-template-columns:1fr}
  .cards-wrap{padding:0 1.5rem 5rem}
  .card{grid-template-columns:48px 1fr;gap:1.2rem;padding:2rem 1.5rem}
  .card-word{display:none}
  .cn{font-size:3rem}
  .svc-head{padding:4rem 1.5rem 2rem;flex-direction:column;gap:.5rem}
  .work{padding:4rem 1.5rem}
  .t-item{grid-template-columns:1fr;gap:.5rem}
  .t-period{padding-top:0}
  .footer{padding:4rem 1.5rem}
  .f-big{font-size:clamp(1.6rem,5vw,2.5rem)}
  .about-grid{grid-template-columns:1fr;gap:2.5rem}
}

@media (max-width:480px){
  .h-name{font-size:clamp(2.8rem,16vw,4.5rem)}
  .marquee .m-item{font-size:1.2rem;margin:0 1rem}
  .card{padding:1.8rem 1.2rem}
  .about-intro{font-size:clamp(1.3rem,4vw,1.8rem)}
}

@media (hover:none), (pointer:coarse){
  body::after{display:none}
  .cur,.cur-ring{display:none!important}
  body,a,button,.btn{cursor:auto!important}
}