:root{--bg:#07050c;--card:rgba(255,255,255,.04);--ink:#f0ecfa;--mute:#b9afd3;--pur:#b794ff;--pur-l:#dcc8ff;--line:rgba(255,255,255,.09);--serif:'Instrument Serif',Georgia,'Times New Roman',serif;--sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
canvas#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}
.wrap{width:min(1180px,92%);margin:auto}
section{padding:110px 0}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.pill{display:inline-block;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:7px 16px;font-size:.78rem;color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
h2{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.05;font-weight:400;letter-spacing:-.03em;margin:1rem 0 1.6rem}
h2 .serif{color:var(--pur-l)}
.lead{color:var(--mute);max-width:560px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:99px;font-weight:600;font-size:.9rem;transition:.35s;border:1px solid var(--line)}
.btn.w{background:#fff;color:#000;border-color:#fff}.btn.o{background:var(--pur);color:#0a0612;border-color:var(--pur)}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(183,148,255,.35)}
/* ===== IMAGE SLOTS: cada .ph es un hueco para imagen. Si la imagen no existe se ve un degradado con su etiqueta ===== */
.ph{position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(circle at 30% 20%,rgba(220,200,255,.35),transparent 55%),linear-gradient(160deg,#1d1330,#0b0712);display:grid;place-items:center}
.ph::after{content:attr(data-label);position:absolute;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center;padding:10px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .8s}
.ph:hover img{transform:scale(1.06)}
/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 4% 16px}
.logo{font-size:1.5rem;display:inline-flex;align-items:center;gap:10px}
.logo-icon{width:30px;height:30px;border-radius:8px;flex:none}
.menu{display:flex;gap:6px;list-style:none;background:rgba(20,14,32,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:99px;padding:6px}
.menu a{display:block;padding:9px 15px;border-radius:99px;font-size:.84rem;color:var(--mute);transition:.3s}
.menu a:hover,.menu a.on{background:rgba(255,255,255,.1);color:var(--ink)}
#burger{display:none;background:rgba(20,14,32,.7);border:1px solid var(--line);color:var(--ink);width:44px;height:44px;border-radius:50%;font-size:1.2rem;cursor:pointer}
#bar{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--pur-l);transform:scaleX(0);transform-origin:left;z-index:70}

/* ===== HERO ===== */
#hero{min-height:100svh;padding:120px 0 0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative}
.hero-bg{position:absolute;inset:0;border-radius:0;opacity:.85;-webkit-mask:radial-gradient(ellipse at 55% 40%,#000 35%,transparent 80%);mask:radial-gradient(ellipse at 55% 40%,#000 35%,transparent 80%)}
.stage{position:relative;height:max(520px,min(54vw,calc(100svh - 100px)));width:min(1500px,72vw);margin:auto}

/* Título: "Software & AI" + "GIANNA HERRERA", todo en blanco */
.title{position:absolute;top:2%;left:50%;width:100vw;margin-left:-50vw;text-align:center;z-index:1;line-height:.9;white-space:nowrap}
.title .pill{font-size:clamp(.78rem,1.05vw,1.2rem);padding:.5em 1.2em}
.title .row1{display:flex;justify-content:center;font-size:12.4vw;padding:0;margin-bottom:.05em;color:#fff}
.title .big{display:block;font-size:14.5vw;font-weight:800;letter-spacing:-.05em;line-height:.86;color:#fff;text-transform:uppercase}

/* Retrato por encima del texto */
.portrait-wrap{position:absolute;inset:0;z-index:2;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;overflow:hidden}
.portrait{height:66%;aspect-ratio:3/4;max-width:100%;display:flex;justify-content:center;align-items:flex-end;border-radius:50% 50% 0 0}
.portrait img{display:block;height:100%;width:100%;object-fit:contain;object-position:center bottom}

/* Textos inferiores */
.hero-foot{position:absolute;bottom:26px;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 2%}
.hero-foot p{font-size:clamp(.78rem,1.05vw,1.15rem);max-width:max(230px,17vw);color:#fff;font-weight:500;letter-spacing:.02em}
.hero-foot p:last-child{text-align:right}

/* Chips flotantes */
.chip{position:absolute;z-index:3;font-size:clamp(.8rem,1.05vw,1.2rem);font-weight:500;padding:.4em .9em;border-radius:10px;white-space:nowrap}
.chip.c1{left:1.5%;top:75%;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip.c2{right:11%;top:77%;background:#fff;color:#0a0612}
.spark{position:absolute;color:var(--pur-l);opacity:.5;font-size:1.3rem;z-index:1}

/* about */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.about .ph{aspect-ratio:4/5}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
/* purple block with scattered pills */
#interests{background:var(--pur);color:#0a0612;padding:100px 0 0;overflow:hidden;border-radius:36px 36px 0 0}
#interests h2{font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,8vw,6.5rem);margin:0}
#interests h2 .serif{text-transform:none;color:#fff;font-weight:400}
#interests .top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
#interests .top p{max-width:260px;font-size:.85rem;font-weight:500}
.cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:70px 0 90px;max-width:900px;margin:auto}
.cloud span{background:#fff;color:#000;font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.6vw,1.8rem);padding:14px 30px;border-radius:99px;cursor:default;will-change:transform}
/* projects fan */
.fan{display:flex;justify-content:center;align-items:flex-end;padding:30px 0 10px}
.proj{width:clamp(150px,21vw,250px);flex:none;margin:0 -16px;border-radius:26px;padding:12px;border:1px solid var(--line);background:linear-gradient(170deg,#181029,#0a0710);transition:.5s cubic-bezier(.2,.8,.2,1);transform:rotate(var(--r)) translateY(var(--y))}
.proj:hover{transform:rotate(0) translateY(-26px) scale(1.06);z-index:5;border-color:var(--pur-l);box-shadow:0 30px 60px rgba(183,148,255,.25)}
.proj .ph{aspect-ratio:3/4;border-radius:16px}
.proj h3{font-size:1rem;margin:12px 4px 2px}.proj small{color:var(--mute);font-size:.75rem;margin:0 4px 6px;display:block;line-height:1.4}
/* gallery marquee */
#gallery{padding:60px 0;overflow:hidden}
.rowm{display:flex;gap:16px;width:max-content;margin-bottom:16px;animation:mq 55s linear infinite}
.rowm.rev{animation-direction:reverse;animation-duration:65s}
.rowm:hover{animation-play-state:paused}
.rowm .ph{width:clamp(140px,16vw,210px);aspect-ratio:1;flex:none;border-radius:20px}
@keyframes mq{to{transform:translateX(-50%)}}
#gallery::before,#gallery::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
#gallery{position:relative}#gallery::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}#gallery::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
/* glass cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g{border:1px solid var(--line);border-radius:26px;padding:28px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));position:relative;overflow:hidden;transition:.4s}
.g::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,0),rgba(183,148,255,.3),transparent 55%);opacity:0;transition:.4s}
.g:hover{border-color:rgba(220,200,255,.45);transform:translateY(-6px)}.g:hover::before{opacity:1}
.g>*{position:relative}.g h3{font-size:1.15rem;font-weight:500;margin:.8rem 0 .4rem}.g p{color:var(--mute);font-size:.9rem}.g .m{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pur-l)}
.g .org{font-size:.85rem;color:var(--pur-l)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sub{margin:56px 0 22px;font-size:2rem}
/* contact + footer */
#contact{text-align:right;padding-bottom:60px}
#contact .wrap{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:20px}
.contact-text{text-align:right}
/* Astronauta flotando */
.astro{display:flex;justify-content:center;align-items:center}
.astro img{width:min(100%,540px);height:auto;filter:drop-shadow(0 30px 60px rgba(183,148,255,.25));animation:astroFloat 7s ease-in-out infinite;will-change:transform}
@keyframes astroFloat{
  0%,100%{transform:translate(0,0) rotate(-3deg)}
  25%{transform:translate(10px,-14px) rotate(0deg)}
  50%{transform:translate(0,-28px) rotate(3deg)}
  75%{transform:translate(-10px,-12px) rotate(0deg)}
}
/* Botón más grande */
.btn.btn-xl{font-size:1.2rem;padding:22px 46px;gap:14px}
#contact .big{font-size:clamp(2.6rem,9vw,7rem);line-height:1;letter-spacing:-.04em;margin:.6rem 0 1.6rem}
#contact .big .serif{display:block;color:var(--mute)}
.foot{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:40px}
.foot .g{min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.foot .g:hover{transform:none}
.links{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:900px){
#burger{display:block}.cta-nav{display:none}
.menu{position:fixed;top:0;right:0;height:100%;width:78%;max-width:320px;flex-direction:column;justify-content:center;border-radius:0;padding:30px;transform:translateX(105%);transition:transform .5s cubic-bezier(.7,0,.2,1);background:rgba(9,6,14,.97)}
.menu.open{transform:none}.menu a{font-size:1.2rem}
.about,.two,.foot{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}
.fan{overflow-x:auto;justify-content:flex-start;padding:30px 20px 20px;scroll-snap-type:x mandatory}.proj{margin:0 8px;--r:0deg!important;--y:0px!important;width:62vw;scroll-snap-align:center}
section{padding:80px 0}

.stage{height:min(88svh,700px);width:min(1180px,94%)}
.portrait{height:78%}
.title .big{font-size:clamp(3rem,16vw,8rem)}

.hero-foot p:last-child{display:none}
.hero-foot{flex-direction:column;align-items:center;text-align:center;gap:12px;bottom:16px;padding:0 5%}
.hero-foot p:first-child{
  max-width:360px;font-size:.85rem;line-height:1.5;color:var(--ink);
  padding:16px 20px;border-radius:22px;
  background:rgba(114,112,112,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}

#contact{text-align:left}
#contact .wrap{grid-template-columns:1fr;gap:10px}
.contact-text{text-align:left}
.astro img{width:min(70%,360px)}
}
@media(max-width:560px){.grid{grid-template-columns:1fr}.chip{display:none}.title .row1{font-size:clamp(2rem,13vw,4.5rem)}}
/* ===== VOICES: testimonial carousel ===== */
#voices{overflow:hidden;padding-top:40px}
.tstage{display:grid;justify-items:center;align-items:center;margin-top:30px;padding:20px 0;touch-action:pan-y;cursor:grab}
.tstage:active{cursor:grabbing}
.tcard{grid-area:1/1;width:min(580px,86%);padding:38px 36px 32px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(14,10,24,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);will-change:transform,opacity,filter;user-select:none;-webkit-user-select:none}
.tcard.act{border-color:rgba(220,200,255,.5);box-shadow:0 30px 80px rgba(183,148,255,.22)}
.tcard .qm{font-family:var(--serif);font-style:italic;font-size:5.5rem;line-height:.6;color:var(--pur-l);height:38px;display:block}
.tcard .tq{font-size:1.02rem;line-height:1.75;color:var(--ink);margin:14px 0 26px}
.tcard .who{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:20px}
.tcard .av{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.95rem;color:#0a0612;background:linear-gradient(135deg,var(--pur-l),var(--pur))}
.tcard .nm{font-weight:600;font-size:.98rem}
.tcard .rl{font-size:.78rem;color:var(--mute);line-height:1.4}
.tcard .dt{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pur-l);margin-top:3px}
.tctrl{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:26px}
.tctrl button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.1rem;cursor:pointer;transition:.3s}
.tctrl button:hover{background:var(--pur-l);color:#0a0612;transform:scale(1.08)}
#tdots{display:flex;gap:10px}
#tdots i{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;transition:.4s}
#tdots i.on{width:30px;background:var(--pur-l)}
#tbar{width:min(220px,50%);height:2px;background:var(--line);margin:22px auto 0;border-radius:2px;overflow:hidden}
#tbar span{display:block;height:100%;background:var(--pur-l);transform:scaleX(0);transform-origin:left}
@media(max-width:700px){.tcard{padding:30px 24px 26px}.tcard .tq{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== JOURNEY: banners horizontales en las cards =====
   Todas las imágenes comparten la misma proporción (3:1) para que
   la cuadrícula mantenga su alineación, y llevan un tratamiento
   monocromático + velo violeta para integrarse con el fondo oscuro. */

.g .cover{
  position:relative;
  margin:-28px -28px 20px;          /* ocupa todo el ancho superior de la card */
  aspect-ratio:3/1;                 /* banner corto y horizontal */
  overflow:hidden;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 30% 20%,rgba(220,200,255,.30),transparent 60%),linear-gradient(160deg,#1d1330,#0b0712);
}

/* Etiqueta que se ve solo si la imagen aún no existe */
.g .cover::before{
  content:attr(data-label);
  position:absolute;
  font-size:.65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  text-align:center;
  padding:8px;
}

.g .cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  filter:grayscale(.65) saturate(.9) contrast(1.05) brightness(.82);
  transition:filter .5s,transform .8s;
}

/* Velo oscuro + toque violeta, sobre la imagen */
.g .cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,5,12,.15) 0%,rgba(7,5,12,.60) 100%),
    linear-gradient(135deg,rgba(183,148,255,.30),transparent 65%);
}

/* Al pasar el mouse, la imagen recupera un poco de color */
.g:hover .cover img{
  filter:grayscale(.15) saturate(1) contrast(1.05) brightness(.95);
  transform:scale(1.05);
}