/* =========================================================================
   ISABEL RODRÍGUEZ CORTÉS — PORTFOLIO
   Design tokens
   ========================================================================= */
:root{
  --paper:      #F7EDE2;
  --paper-2:    #F1E4D4;
  --ink:        #2B1B40;   /* deepened from #4A306D for AA contrast on paper */
  --plum:       #4A306D;
  --orchid:     #A167A5;
  --mint:       #95D9C3;
  --mint-deep:  #6BC1A6;
  --line:       rgba(43, 27, 64, 0.14);
  --muted:      rgba(43, 27, 64, 0.6);

  --f-script: 'Rouge Script', cursive;
  --f-display: 'Roboto', sans-serif;
  --f-body: 'Roboto', sans-serif;
  --f-mono: 'Roboto Mono', monospace;

  --maxw: 1360px;
  --pad: clamp(24px, 5vw, 72px);
  --radius: 2px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}

/* language toggling: only the active language shows */
[data-i18n]{display:none;}
html[lang="es"] [data-i18n="es"]{display:initial;}
html[lang="en"] [data-i18n="en"]{display:initial;}
html[lang="es"] span[data-i18n="es"],
html[lang="en"] span[data-i18n="en"]{display:inline;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
/* En las páginas con hero el nav no existe hasta que se hace scroll: el
   encabezado no compite con la firma. En cv.html (sin data-hero) se comporta
   como siempre, porque ahí el contenido arranca justo debajo. */
body[data-hero] .nav{
  transform:translateY(-101%);
  opacity:0;
  pointer-events:none;
  transition:transform .55s cubic-bezier(0.22,1,0.36,1), opacity .35s ease,
             background .35s ease, box-shadow .35s ease, padding .35s ease;
}
body[data-hero] .nav.revealed{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.nav.scrolled{
  background:rgba(247,237,226,0.86);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
  padding-top:14px;padding-bottom:14px;
}
/* el símbolo vive una sola vez al inicio del body */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}
.nav-mark{
  display:block;
  width:clamp(112px,13vw,148px);
  line-height:0;
  color:var(--plum);
  transition:color .25s ease;
}
.nav-logo{display:block;width:100%;height:auto;fill:currentColor;}
.nav-mark:hover{color:var(--orchid);}
/* el texto sigue ahí para lectores de pantalla y buscadores, solo no se ve */
.nav-mark span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:13px;letter-spacing:0.04em;text-transform:uppercase;
  position:relative;padding-bottom:4px;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--plum);
  transition:width .3s ease;
}
.nav-links a:hover::after{width:100%;}
.lang-toggle{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--line);border-radius:20px;padding:4px;
}
.lang-toggle button{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;
  padding:6px 12px;border-radius:16px;color:var(--muted);
  transition:background .25s ease, color .25s ease;
}
.lang-toggle button.active{background:var(--plum);color:var(--paper);}
.nav-burger{display:none;font-size:22px;}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-burger{display:block;}
}
@media (max-width:560px){
  .side-tab{padding:16px 8px;font-size:10.5px;letter-spacing:0.08em;}
}

/* =========================================================================
   LATERAL CONTACT TAB
   ========================================================================= */
.side-tab{
  position:fixed;right:0;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  z-index:90;
  background:var(--plum);color:var(--paper);
  padding:22px 12px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  border-radius:8px 0 0 8px;
  transition:background .25s ease, padding-right .25s ease;
}
.side-tab:hover{background:var(--orchid);}

/* contact drawer */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(43,27,64,0.55);
  opacity:0;pointer-events:none;transition:opacity .35s ease;z-index:200;
}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);
  background:var(--paper);z-index:201;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.65,0,.35,1);
  padding:70px 44px;display:flex;flex-direction:column;gap:26px;
  box-shadow:-20px 0 60px rgba(43,27,64,0.15);
}
.drawer.open{transform:translateX(0);}
.drawer-close{position:absolute;top:26px;right:30px;font-size:26px;}
.drawer h3{font-family:var(--f-script);font-size:42px;color:var(--plum);margin-bottom:6px;}
.drawer p{font-size:15px;color:var(--muted);line-height:1.6;}
.drawer .contact-links{display:flex;flex-direction:column;gap:16px;margin-top:10px;}
.drawer .contact-links a{
  font-size:18px;font-weight:500;border-bottom:1px solid var(--line);padding-bottom:10px;
  display:flex;justify-content:space-between;align-items:center;
}
.drawer .contact-links a:hover{color:var(--orchid);border-color:var(--orchid);}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  overflow:hidden;
  padding:120px var(--pad) 80px;
}
.blob{
  position:absolute;inset:-10%;
  z-index:0;
  filter:blur(60px);
  opacity:0.75;
  will-change:transform;
}

/* --- revelado por cursor -------------------------------------------------
   Con puntero fino, el color casi desaparece y solo florece alrededor del
   mouse. El estado base (arriba) es el fallback para táctil / sin JS.
   El 8.3333% compensa el inset:-10% de .blob para que las coordenadas del
   cursor (relativas al hero) caigan en el punto correcto de la máscara.
   ------------------------------------------------------------------------ */
/* los valores por defecto viven en el hero, que es donde el JS escribe:
   si se declaran en .blob pisan a los heredados y el efecto se congela */
.hero--reveal{
  --mx:50%;
  --my:44%;
  --rv:22vmax;
}
.hero--reveal .blob{
  opacity:0.92;
  -webkit-mask-image:radial-gradient(circle var(--rv) at calc(8.3333% + var(--mx)) calc(8.3333% + var(--my)),
    #000 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.26) 62%, rgba(0,0,0,0.06) 85%, rgba(0,0,0,0.04) 100%);
          mask-image:radial-gradient(circle var(--rv) at calc(8.3333% + var(--mx)) calc(8.3333% + var(--my)),
    #000 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.26) 62%, rgba(0,0,0,0.06) 85%, rgba(0,0,0,0.04) 100%);
}

/* halo cálido que acompaña al cursor: aclara el papel justo bajo el puntero
   y hace que el color de alrededor se sienta más vivo */
.hero-glow{
  position:absolute;
  left:0;top:0;
  z-index:1;
  width:30vmax;height:30vmax;
  margin:-15vmax 0 0 -15vmax;
  border-radius:50%;
  pointer-events:none;
  filter:blur(50px);
  mix-blend-mode:screen;
  opacity:0;
  background:radial-gradient(circle at 50% 50%, #FFF8EF 0%, rgba(255,248,239,0) 62%);
  transition:opacity .6s ease;
  will-change:transform;
}
.hero--reveal.is-live .hero-glow{opacity:0.55;}
.blob span{
  position:absolute;border-radius:50%;
  mix-blend-mode:multiply;
  animation:float 18s ease-in-out infinite;
}
.blob span:nth-child(1){width:46vw;height:46vw;background:var(--mint);top:8%;left:6%;animation-duration:22s;}
.blob span:nth-child(2){width:38vw;height:38vw;background:var(--orchid);top:30%;right:4%;animation-duration:26s;animation-delay:-6s;}
.blob span:nth-child(3){width:32vw;height:32vw;background:var(--plum);bottom:2%;left:24%;opacity:0.6;animation-duration:20s;animation-delay:-11s;}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(4%,6%) scale(1.08);}
  66%{transform:translate(-5%,-4%) scale(0.95);}
}

.hero-inner{position:relative;z-index:2;max-width:900px;}

/* contenedor para revelar una línea desde abajo (como los display del original).
   El margen del hijo pasa al contenedor: si se queda dentro, la máscara mide de
   más y el texto desplazado asoma por abajo. */
.mask-line{overflow:hidden;display:block;margin-bottom:28px;}
.mask-line > .hero-role{margin-bottom:0;}

/* Estados de arranque de la intro. Solo aplican cuando <html> lleva .js-anim,
   que el JS añade al inicio y retira si GSAP no llegó a cargar: así la página
   nunca se queda en blanco si el CDN falla. */
.js-anim .hero-eyebrow,
.js-anim .hero-tagline,
.js-anim .hero-cta,
.js-anim .scroll-cue{opacity:0;}
/* el logo arranca vacío: el relleno entra al terminar el dibujo */
.js-anim .logo-fill{opacity:0;}
.js-anim .logo-draw{opacity:0;}
/* ojo: aquí NO va un transform inicial. GSAP lee el transform calculado para
   resolver yPercent, y un translateY(120%) puesto desde CSS le hace animar
   120% -> 120%. El estado inicial lo pone GSAP; el CSS solo evita el parpadeo. */
.js-anim .mask-line{opacity:0;}
.js-anim .mask-line > *{display:block;}
.hero-eyebrow{
  font-family:var(--f-mono);font-size:13px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--plum);margin-bottom:26px;
}
.hero-mark{
  color:var(--plum);
  line-height:0;
  margin:0 auto 18px;
  width:clamp(260px,46vw,620px);
}
.hero-mark .logo-svg{
  display:block;
  width:100%;height:auto;
  overflow:visible;
}
/* el trazo hereda el color del contenedor: cambiar --plum por otro token
   (o por #90c0cf, el azul original del archivo) recolorea todo el logo */
.logo-fill{fill:currentColor;}
.hero-role{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(15px,2vw,19px);
  text-transform:uppercase;letter-spacing:0.06em;
  margin-bottom:28px;
}
.hero-tagline{
  font-size:clamp(16px,1.8vw,20px);
  color:var(--muted);
  max-width:560px;margin:0 auto 44px;
  line-height:1.6;
}
.hero-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  border:1px solid var(--ink);padding:14px 26px;border-radius:30px;
  transition:background .25s ease, color .25s ease;
}
.hero-cta:hover{background:var(--ink);color:var(--paper);}

.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:2;font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);
}
.scroll-cue .line{width:1px;height:34px;background:var(--muted);animation:scrolldown 2s ease-in-out infinite;}
@keyframes scrolldown{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* giant background word texture */
.hero-bgword{
  position:absolute;z-index:1;top:52%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(120px,26vw,440px);
  color:transparent;
  -webkit-text-stroke:1px rgba(43,27,64,0.08);
  white-space:nowrap;letter-spacing:-0.02em;
  pointer-events:none;user-select:none;
}

/* =========================================================================
   SECTION HEADERS
   ========================================================================= */
.section{padding:130px 0;position:relative;}
.section-head{margin-bottom:60px;}
.eyebrow{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--orchid);margin-bottom:16px;display:block;
}
.section-title{
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(38px,6.5vw,86px);
  line-height:0.96;letter-spacing:-0.01em;text-transform:uppercase;
}
.section-sub{
  margin-top:20px;max-width:520px;font-size:16px;color:var(--muted);line-height:1.6;
}

/* =========================================================================
   WORK — FILTER + GRID
   ========================================================================= */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:52px;}
.filter-btn{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.05em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 18px;border-radius:24px;
  color:var(--muted);transition:all .25s ease;
}
.filter-btn:hover{border-color:var(--plum);color:var(--plum);}
.filter-btn.active{background:var(--plum);border-color:var(--plum);color:var(--paper);}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:38px 30px;
}
.gcard{
  cursor:pointer;
  opacity:0; transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.gcard.inview{opacity:1;transform:translateY(0);}
.gcard.hidden{display:none;}
.gcard .thumb{
  position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2);
  margin-bottom:18px;
}
/* capa intermedia: aquí vive el parallax (GSAP escribe su transform),
   así el zoom de hover puede seguir viviendo en el <img> sin pisarse */
.gcard .thumb-media{
  position:absolute;inset:-9% 0;
  width:100%;height:118%;
  will-change:transform;
}
.gcard .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.gcard:hover .thumb img{transform:scale(1.06);}
.gcard .thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(43,27,64,0) 55%, rgba(43,27,64,0.55) 100%);
  opacity:0;transition:opacity .4s ease;
}
.gcard:hover .thumb::after{opacity:1;}
.gcard .thumb .view{
  position:absolute;bottom:18px;left:18px;color:#fff;
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:all .35s ease;
}
.gcard:hover .thumb .view{opacity:1;transform:translateY(0);}
.gcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.gcard h3{font-size:19px;font-weight:700;}
.gcard .year{font-family:var(--f-mono);font-size:12px;color:var(--muted);}
.gcard .tagline{font-size:14px;color:var(--muted);margin-top:6px;}

@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid{grid-template-columns:1fr;} }

/* =========================================================================
   LIGHTBOX / CASE STUDY OVERLAY
   ========================================================================= */
.lightbox{
  position:fixed;inset:0;z-index:300;background:var(--paper);
  opacity:0;pointer-events:none;transform:translateY(2%);
  transition:opacity .4s ease, transform .4s ease;
  overflow-y:auto;
  /* al llegar al final no arrastra la página de atrás */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* recibe el foco al abrir para que las flechas y el espacio funcionen,
   pero sin dibujar el anillo alrededor de toda la pantalla */
.lightbox:focus,
.lightbox:focus-visible{outline:none;}
.drawer{overflow-y:auto;overscroll-behavior:contain;}
/* transform:none, no translateY(0): un transform en el ancestro haría que el
   position:fixed del botón de cerrar se resuelva contra este contenedor y la ×
   se iría hacia arriba al hacer scroll dentro del proyecto */
.lightbox.open{opacity:1;pointer-events:auto;transform:none;}
.lightbox-close{
  position:fixed;top:26px;right:var(--pad);z-index:5;
  font-size:28px;background:var(--paper);border-radius:50%;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(43,27,64,0.12);
}
.lightbox-inner{max-width:1100px;margin:0 auto;padding:110px var(--pad) 100px;}
.lb-tags{display:flex;gap:8px;margin-bottom:18px;}
.lb-tag{font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;border:1px solid var(--line);padding:4px 10px;border-radius:14px;color:var(--muted);}
.lb-title{font-family:var(--f-display);font-weight:900;font-size:clamp(34px,5.5vw,64px);text-transform:uppercase;line-height:1;margin-bottom:10px;}
.lb-client{font-family:var(--f-mono);font-size:13px;color:var(--muted);margin-bottom:44px;}
.lb-gallery{display:flex;flex-direction:column;gap:20px;margin-bottom:48px;}
.lb-gallery img{width:100%;object-fit:cover;}
.lb-desc{max-width:680px;font-size:17px;line-height:1.75;margin-bottom:14px;}
.lb-behance{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:4px;
}
.lb-behance:hover{color:var(--orchid);border-color:var(--orchid);}

/* =========================================================================
   SERVICES
   ========================================================================= */
.services{background:var(--plum);color:var(--paper);}
.services .eyebrow{color:var(--mint);}
.services .section-sub{color:rgba(247,237,226,0.7);}
.svc-list{margin-top:20px;}
.svc-row{
  display:grid;grid-template-columns:60px 1fr 1fr auto;gap:26px;align-items:baseline;
  padding:30px 0;border-top:1px solid rgba(247,237,226,0.2);
  padding-left:0;padding-right:0;
  transition:background .45s cubic-bezier(0.22,1,0.36,1),
             color .45s ease,
             padding .45s cubic-bezier(0.22,1,0.36,1);
}
/* flecha al final de cada fila, como en el original */
.svc-row::after{
  content:'→';
  font-size:20px;
  opacity:0.45;
  align-self:center;
  transform:translateX(-6px);
  transition:opacity .45s ease, transform .45s cubic-bezier(0.22,1,0.36,1);
}
.svc-list .svc-row:last-child{border-bottom:1px solid rgba(247,237,226,0.2);}
.svc-num{font-family:var(--f-mono);font-size:13px;color:var(--mint);}
.svc-name{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,3vw,34px);text-transform:uppercase;position:relative;}
.svc-desc{font-size:15px;color:rgba(247,237,226,0.72);line-height:1.6;max-width:420px;}
.svc-row:hover{
  background:var(--paper);
  color:var(--ink);
  padding-left:clamp(16px,3vw,44px);
  padding-right:clamp(16px,3vw,28px);
}
.svc-row:hover .svc-num{color:var(--orchid);}
.svc-row:hover .svc-name{color:var(--plum);}
.svc-row:hover .svc-desc{color:rgba(43,27,64,0.7);}
.svc-row:hover::after{opacity:1;transform:translateX(0);color:var(--orchid);}

@media (max-width:700px){
  .svc-row{grid-template-columns:36px 1fr auto;}
  .svc-desc{grid-column:2/4;}
}
@media (hover:none){
  /* en táctil no hay hover: la fila se queda como estaba */
  .svc-row:hover{background:none;color:inherit;padding-left:0;padding-right:0;}
}

/* --- el puntero se vuelve la miniatura del servicio --- */
.svc-follower{
  position:fixed;left:0;top:0;z-index:60;
  width:clamp(180px,20vw,280px);
  height:clamp(130px,15vw,200px);
  margin:clamp(-100px,-7.5vw,-65px) 0 0 clamp(-140px,-10vw,-90px);
  pointer-events:none;
  will-change:transform;
}
/* la posición la escribe el JS en .svc-follower; la entrada vive aquí, así
   el fundido funciona igual con GSAP o sin él */
.svc-follower-in{
  position:absolute;inset:0;
  border-radius:10px;overflow:hidden;
  box-shadow:0 18px 44px rgba(27,20,36,0.32);
  opacity:0;transform:scale(0.86);
  transition:opacity .4s ease, transform .45s cubic-bezier(0.22,1,0.36,1);
}
.svc-follower.on .svc-follower-in{opacity:1;transform:scale(1);}
.svc-follower img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity .3s ease;
}
.svc-follower img.on{opacity:1;}
@media (max-width:900px),(hover:none){
  .svc-follower{display:none;}
}

/* =========================================================================
   CV TEASER
   ========================================================================= */
.cv-teaser{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:70px;align-items:center;
}
.cv-teaser p{font-size:17px;line-height:1.7;color:var(--muted);margin-bottom:30px;max-width:480px;}
.cv-actions{display:flex;gap:16px;flex-wrap:wrap;}
.btn{
  font-family:var(--f-mono);font-size:13px;letter-spacing:0.05em;text-transform:uppercase;
  padding:14px 26px;border-radius:30px;transition:all .25s ease;display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--orchid);}
.btn-outline{border:1px solid var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.cv-card{
  background:var(--paper-2);padding:50px 40px;border-radius:4px;position:relative;overflow:hidden;
}
.cv-card::before{
  content:'';position:absolute;width:220px;height:220px;background:var(--mint);
  border-radius:50%;filter:blur(50px);opacity:0.6;top:-60px;right:-60px;
}
.cv-card .sig{font-family:var(--f-script);font-size:52px;color:var(--plum);position:relative;z-index:1;}
.cv-card .role{font-family:var(--f-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-top:8px;position:relative;z-index:1;}
.cv-card ul{margin-top:30px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;}
.cv-card li{font-size:14px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;}
.cv-card li b{font-weight:700;}
@media (max-width:860px){ .cv-teaser{grid-template-columns:1fr;} }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{background:var(--ink);color:var(--paper);padding:120px 0 40px;}
.footer-title{
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(40px,8vw,110px);line-height:0.95;margin-bottom:20px;
}
.footer-title a{border-bottom:2px solid transparent;transition:border-color .3s ease;}
.footer-title a:hover{border-color:var(--mint);}
.footer-sub{color:rgba(247,237,226,0.6);font-size:16px;max-width:480px;margin-bottom:56px;}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-top:40px;border-top:1px solid rgba(247,237,226,0.16);}
.footer-col h4{font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mint);margin-bottom:16px;}
.footer-col a, .footer-col p{display:block;font-size:14px;color:rgba(247,237,226,0.8);margin-bottom:8px;}
.footer-col a:hover{color:var(--mint);}
.footer-col .lang-toggle button{color:rgba(247,237,226,0.55);}
.footer-col .lang-toggle button.active{background:var(--mint);color:var(--ink);}
.footer-bottom{
  margin-top:60px;padding-top:24px;border-top:1px solid rgba(247,237,226,0.16);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--f-mono);font-size:11px;color:rgba(247,237,226,0.45);
}

/* =========================================================================
   REVEAL UTILITY
   ========================================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.inview{opacity:1;transform:translateY(0);}

/* Con GSAP activo las transiciones CSS estorban: GSAP escribe opacity y
   transform cada frame y la transición las arrastraría. El zoom de hover de
   las miniaturas se queda intacto porque vive en otro selector. */
.has-gsap .reveal,
.has-gsap .gcard{transition:none;}
.has-gsap .hero-eyebrow{display:block;}

/* =========================================================================
   CV PAGE
   ========================================================================= */
.cv-page{padding:150px 0 100px;}
.cv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:70px;padding-bottom:40px;border-bottom:1px solid var(--line);}
.cv-head h1{font-family:var(--f-script);font-size:clamp(50px,7vw,90px);color:var(--plum);}
.cv-head .role{font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);margin-top:10px;}
.cv-doc{display:grid;grid-template-columns:1fr 2fr;gap:70px;}
.cv-side h4, .cv-main h4{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--orchid);margin-bottom:18px;
}
.cv-side section, .cv-main section{margin-bottom:56px;}
.cv-side p, .cv-main p{font-size:15px;line-height:1.7;color:var(--ink);}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;}
.tag-cloud span{font-size:13px;border:1px solid var(--line);padding:6px 12px;border-radius:20px;color:var(--muted);}
.client-list{display:flex;flex-direction:column;gap:10px;}
.client-list li{font-size:15px;border-bottom:1px solid var(--line);padding-bottom:10px;list-style:none;}
.placeholder-box{
  border:1.5px dashed var(--orchid);border-radius:6px;padding:22px 24px;background:rgba(161,103,165,0.06);
}
.placeholder-box p{color:var(--plum);font-size:14px;line-height:1.6;}
.placeholder-box .tag{
  display:inline-block;font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;
  background:var(--orchid);color:#fff;padding:3px 10px;border-radius:10px;margin-bottom:10px;
}
/* --- puestos y educación --- */
.cv-job{margin-bottom:30px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.cv-main .cv-job:last-child,
.cv-side .cv-job{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.cv-job-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;flex-wrap:wrap;margin-bottom:4px;
}
.cv-job-head h5{
  font-family:var(--f-display);font-weight:700;font-size:17px;
  letter-spacing:0.01em;color:var(--ink);
}
.cv-job-date{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.04em;
  color:var(--muted);white-space:nowrap;
}
.cv-job-role{
  font-family:var(--f-mono);font-size:12.5px;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--orchid);margin-bottom:12px;
}
.cv-job p{margin-bottom:10px;}
.cv-job p:last-child{margin-bottom:0;}

/* lista simple con viñeta discreta */
.cv-list{display:flex;flex-direction:column;gap:9px;}
.cv-list li{
  position:relative;padding-left:16px;
  font-size:14.5px;line-height:1.6;color:var(--ink);list-style:none;
}
.cv-list li::before{
  content:'';position:absolute;left:0;top:0.62em;
  width:5px;height:5px;border-radius:50%;background:var(--mint-deep);
}

.cv-download-bar{
  position:sticky;top:90px;display:flex;gap:14px;margin-bottom:50px;flex-wrap:wrap;
}
@media (max-width:860px){ .cv-doc{grid-template-columns:1fr;gap:40px;} }

@media print{
  .nav, .side-tab, .drawer-overlay, .drawer, .cv-download-bar, .footer{display:none !important;}
  .cv-page{padding:0;}
  body{background:#fff;}

  /* Chrome no fragmenta bien un grid de dos columnas entre hojas: la segunda
     columna se pierde. En papel el CV fluye en una sola columna. */
  .cv-doc{display:block;}
  .cv-side, .cv-main{display:block;width:100%;}
  .cv-side section, .cv-main section{margin-bottom:24px;}
  .cv-head{margin-bottom:28px;padding-bottom:18px;}
  .cv-head h1{font-size:44px;}

  /* solo los bloques cortos se protegen de partirse */
  .cv-job{break-inside:avoid;page-break-inside:avoid;margin-bottom:18px;padding-bottom:16px;}
  .cv-side h4, .cv-main h4{break-after:avoid;page-break-after:avoid;}
  .client-list{columns:2;column-gap:34px;}
  .client-list li{break-inside:avoid;}
  a{color:inherit !important;text-decoration:none;}
}