/* ============================================================
   CDV · Catalina de Vasconcellos Marinsalda
   Portfolio editorial — "no es solo lo que se ve. es la huella que queda."
   Stack: HTML/CSS/JS vanilla
   ============================================================ */

/* ---------- Variables de sistema ---------- */
:root{
  /* Paleta */
  --cream:        #f4e9cd;  /* fondo principal (papel) */
  --cream-deep:   #ecdfba;  /* crema sombra */
  --cream-soft:   #f8f1dd;  /* crema claro */
  --orange:       #eb5a35;  /* acento / detalles */
  --orange-deep:  #c8431f;  /* hover acento */
  --green:        #17391f;  /* texto principal */
  --green-soft:   rgba(23,57,31,0.62);
  --green-faint:  rgba(23,57,31,0.34);
  --hair:         rgba(23,57,31,0.16); /* hairlines */

  /* Tipografía */
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'Courier Prime', 'Courier New', monospace;

  /* Layout */
  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 76px);
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--green);
  background:var(--cream);
  line-height:1.55;
  overflow-x:hidden;
  /* Cursor custom solo en desktop (ver media query) */
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.mono{
  font-family:var(--mono);
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:0.02em;
}

/* ============================================================
   CURSOR PERSONALIZADO — cuadrado fino, borde naranja
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none;
  transform:translate(-50%,-50%);
  display:none; /* se activa por JS solo en dispositivos con puntero fino */
}
.cursor__square{
  display:block;
  width:26px; height:26px;
  border:1px solid var(--orange);
  transition:width .25s var(--ease), height .25s var(--ease),
             border-color .25s var(--ease), opacity .25s var(--ease),
             transform .25s var(--ease);
}
.cursor__dot{
  position:absolute; top:50%; left:50%;
  width:3px; height:3px;
  background:var(--orange);
  transform:translate(-50%,-50%);
  transition:opacity .25s var(--ease);
}
/* Estado al pasar sobre elementos interactivos */
.cursor.is-hover .cursor__square{ width:46px; height:46px; border-color:var(--orange-deep); }
.cursor.is-hover .cursor__dot{ opacity:0; }
.cursor.is-down .cursor__square{ transform:rotate(45deg) scale(.8); }

body.has-cursor{ cursor:none; }
body.has-cursor a,
body.has-cursor button,
body.has-cursor [data-cursor]{ cursor:none; }

/* ============================================================
   TEXTURA + MARCAS DE IMPRENTA
   ============================================================ */
.grain{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

.crop-marks{ position:fixed; inset:0; z-index:2; pointer-events:none; }
.crop{ position:absolute; width:16px; height:16px; }
.crop::before,.crop::after{ content:''; position:absolute; background:var(--green-faint); }
.crop::before{ width:1px; height:16px; } .crop::after{ height:1px; width:16px; }
.crop--tl{ top:20px; left:20px; } .crop--tr{ top:20px; right:20px; }
.crop--bl{ bottom:20px; left:20px; } .crop--br{ bottom:20px; right:20px; }
.crop--tr::before,.crop--tr::after,.crop--br::before,.crop--br::after{ right:0; }
.crop--bl::before,.crop--br::before{ bottom:0; }

/* ============================================================
   HEADER
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:background .5s var(--ease), padding .4s var(--ease);
}
.topbar--scrolled{
  background:rgba(244,233,205,0.82);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--hair);
  padding-top:14px; padding-bottom:14px;
}
/* Naming CDV — Courier Prime, naranja, mayor jerarquía */
.topbar__brand{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing:0.06em;
  color:var(--orange);
  text-transform:uppercase;
  line-height:1;
}
.topbar__nav{ display:flex; gap:clamp(14px,2.4vw,38px); }
.topbar__nav a{
  font-family:var(--mono);
  font-size:0.74rem;
  text-transform:lowercase;
  letter-spacing:0.04em;
  color:var(--green);
  position:relative;
  padding-bottom:3px;
  transition:color .3s var(--ease);
}
.topbar__nav a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--orange);
  transition:width .35s var(--ease);
}
.topbar__nav a:hover{ color:var(--orange); }
.topbar__nav a:hover::after,
.topbar__nav a.is-active::after{ width:100%; }
.topbar__nav a.is-active{ color:var(--orange); }

/* Burger (mobile) */
.topbar__burger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; padding:8px;
}
.topbar__burger span{ width:24px; height:1.5px; background:var(--green); transition:.3s var(--ease); }
.topbar__burger[aria-expanded="true"] span:first-child{ transform:translateY(6.5px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:last-child{ transform:translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   REVEAL (aparición gradual)
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity 1s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   FOLIO + ENCABEZADOS DE SECCIÓN
   ============================================================ */
.section{ position:relative; z-index:3; padding:clamp(80px,12vh,150px) var(--pad); max-width:var(--maxw); margin:0 auto; }

.folio{
  display:flex; align-items:center; gap:14px;
  font-size:0.68rem; color:var(--green-soft);
  margin-bottom:clamp(36px,6vh,64px);
}
.folio__rule{ flex:0 0 56px; height:1px; background:var(--hair); }

.section__head{ max-width:760px; margin-bottom:clamp(40px,7vh,80px); }
.section__head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.section__kicker{ font-size:0.68rem; color:var(--orange); margin-bottom:18px; }
.section__title{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(2.6rem,7vw,5.4rem);
  line-height:0.98; letter-spacing:-0.03em;
}
.section__title em{ font-style:italic; color:var(--orange); }
.section__sub{
  margin-top:22px; max-width:48ch;
  font-size:clamp(1rem,1.4vw,1.15rem); color:var(--green-soft);
}
.section__head--center .section__sub{ margin-left:auto; margin-right:auto; }

/* ============================================================
   01 · HOME
   ============================================================ */
.home{
  position:relative; z-index:3;
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad);
  overflow:hidden;
}
/* Video de fondo a pantalla completa (cubre como object-fit:cover) */
.home__video{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  opacity:0.55;                 /* opacidad baja: el video se ve sutil */
}
.home__video iframe{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw;        /* 16:9 */
  min-width:177.78vh; min-height:100vh;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
/* Capa crema para legibilidad — translúcida, deja pasar el video */
.home__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 90% at 30% 40%, rgba(244,233,205,0.45), rgba(244,233,205,0.66));
}
.home__inner{ position:relative; z-index:2; max-width:1100px; }
.home__eyebrow{ font-size:0.72rem; color:var(--orange); margin-bottom:26px; }
.home__phrase{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(2.7rem,9vw,7.4rem);
  line-height:0.97; letter-spacing:-0.035em;
  color:var(--green);
}
.home__phrase-accent{ display:block; margin-top:0.12em; color:var(--orange); font-weight:300; }
.home__present{
  margin-top:clamp(30px,5vh,52px);
  font-size:0.78rem; line-height:1.8; color:var(--green-soft);
}
.home__present span{ color:var(--green-faint); }

.home__scroll{
  position:absolute; bottom:34px; left:var(--pad); z-index:2;
  display:flex; align-items:center; gap:14px;
  font-size:0.68rem; color:var(--green-soft);
}
.home__scroll-line{ width:0; height:1px; background:var(--orange); animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{width:0} 50%{width:54px} 100%{width:0} }

/* ============================================================
   02 · SOBRE MÍ — composición editorial
   ============================================================ */
.sobre__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:auto;
  gap:clamp(16px,2.4vw,30px);
  align-items:start;
}
.sobre__portrait{ grid-column:1 / span 5; }
.sobre__portrait img{ width:100%; filter:saturate(0.92) contrast(1.02); }
.sobre__text{ grid-column:7 / span 6; padding-top:10px; }
.sobre__lead{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.35rem,2.3vw,2rem);
  line-height:1.3; letter-spacing:-0.015em;
  margin-bottom:24px;
}
.sobre__text p:not(.sobre__lead){ color:var(--green-soft); max-width:46ch; font-size:1.05rem; }
.sobre__tags{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:30px; }
.sobre__tags li{
  font-size:0.66rem; color:var(--orange);
  border:1px solid var(--hair); border-radius:40px;
  padding:6px 14px;
}
/* Tres imágenes de naturaleza/textura componiendo abajo */
.sobre__nat{ position:relative; overflow:hidden; }
.sobre__nat img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.sobre__nat:hover img{ transform:scale(1.04); }
.sobre__nat--a{ grid-column:1 / span 4; aspect-ratio:3/4; margin-top:24px; }
.sobre__nat--b{ grid-column:5 / span 4; aspect-ratio:3/4; margin-top:64px; }
.sobre__nat--c{ grid-column:9 / span 4; aspect-ratio:3/4; margin-top:24px; }

.sobre__portrait figcaption{ font-size:0.64rem; color:var(--green-soft); margin-top:10px; }
.sobre__nat figcaption{ position:absolute; left:10px; bottom:10px; font-size:0.62rem; color:var(--cream); mix-blend-mode:difference; }

/* ============================================================
   03 · PROYECTOS
   ============================================================ */
/* Proyecto destacado */
.feature{
  display:flex; flex-direction:column; gap:clamp(20px,3vh,40px);
  padding-bottom:clamp(50px,8vh,90px);
  margin-bottom:clamp(50px,8vh,90px);
  border-bottom:1px solid var(--hair);
}
.feature__info{ max-width:60ch; }

/* Escenario en escalera: las 3 imágenes completas, flotando */
.feature__stage{
  position:relative; width:100%;
  height:clamp(460px, 80vh, 880px);
}
.pinguino-slide{
  position:absolute; height:66%; margin:0;
  /* entrada de abajo hacia arriba, escalonada */
  opacity:0; transform:translateY(80px);
  transition:opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay:calc(var(--i) * 0.18s);
}
.pinguino-slide a{ display:block; height:100%; }
.pinguino-slide img{
  height:100%; width:auto; display:block;
  box-shadow:0 40px 70px -30px rgba(23,57,31,0.5), 0 14px 26px -16px rgba(23,57,31,0.35);
}
/* posiciones en escalera ascendente (izq-abajo → der-arriba) */
.pinguino-slide:nth-child(1){ left:2%;  bottom:0;   z-index:1; }
.pinguino-slide:nth-child(2){ left:34%; bottom:16%; z-index:2; }
.pinguino-slide:nth-child(3){ left:64%; bottom:32%; z-index:3; }
/* al entrar en viewport: suben a su lugar */
.feature__stage.is-in .pinguino-slide{ opacity:1; transform:translateY(0); }
/* flotación suave una vez posicionadas (en <a> para no pisar el transform de entrada) */
.feature__stage.is-in .pinguino-slide a{
  animation:pinguinoFloat 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * 0.7s + 1.2s);
}
.pinguino-slide:nth-child(2) a{ animation-duration:7.2s; }
.pinguino-slide:nth-child(3) a{ animation-duration:6.6s; }
@keyframes pinguinoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

/* Fotos cuadradas esparcidas tipo collage (menor jerarquía) */
.pinguino-extra{
  position:absolute; z-index:0; margin:0;
  width:clamp(115px, 13.5vw, 195px);
  opacity:0; transform:translateY(60px) rotate(var(--rot,0deg));
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--d, 0s);
}
.pinguino-extra img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  box-shadow:0 22px 40px -22px rgba(23,57,31,0.45), 0 8px 16px -12px rgba(23,57,31,0.3);
}
.feature__stage.is-in .pinguino-extra{ opacity:1; transform:translateY(0) rotate(var(--rot,0deg)); }
.feature__stage.is-in .pinguino-extra img{ animation:pinguinoFloat 8.5s ease-in-out infinite; animation-delay:calc(var(--d,0s) + 1.4s); }

/* mobile: escalera más compacta para que entren las 3 */
@media (max-width:720px){
  .feature__stage{ height:clamp(420px, 72vh, 640px); }
  .pinguino-slide{ height:50%; }
  .pinguino-slide:nth-child(1){ left:0;   bottom:0;   }
  .pinguino-slide:nth-child(2){ left:25%; bottom:18%; }
  .pinguino-slide:nth-child(3){ left:50%; bottom:36%; }
  .pinguino-extra{ width:clamp(74px, 21vw, 110px); }
}
/* reduce-motion: sin entrada ni flotación, imágenes visibles */
@media (prefers-reduced-motion: reduce){
  .pinguino-slide, .pinguino-extra{ opacity:1; transform:rotate(var(--rot,0deg)); transition:none; }
  .feature__stage.is-in .pinguino-slide a,
  .feature__stage.is-in .pinguino-extra img{ animation:none; }
}

/* Botón de texto bajo la descripción */
.feature__btn{
  display:inline-block; margin-top:24px;
  padding:13px 26px;
  border:1px solid var(--orange); color:var(--orange);
  font-size:0.74rem; letter-spacing:0.04em;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.feature__btn:hover{ background:var(--orange); color:var(--cream); }
@media (hover:none){ .feature__open{ opacity:1; transform:translate(-50%,0); } }
.feature__num{ font-size:0.7rem; color:var(--orange); }
.feature__title{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(2.4rem,4.6vw,3.8rem); line-height:1; letter-spacing:-0.03em;
  margin:14px 0 16px;
}
.feature__cat{ font-size:0.7rem; color:var(--green-soft); margin-bottom:20px; }
.feature__desc{ color:var(--green-soft); max-width:42ch; font-size:1.05rem; }

/* Grilla de casos */
.cases{ display:flex; flex-direction:column; gap:clamp(50px,9vh,100px); }
.cases__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); }

.case__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:14px; }
.case__num{ font-size:0.7rem; color:var(--orange); }
.case__title{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(1.8rem,3.4vw,2.8rem); line-height:1.02; letter-spacing:-0.025em;
  margin-top:6px;
}
.case__cat{ font-size:0.68rem; color:var(--green-soft); text-align:right; line-height:1.6; }
.cases__row .case__cat{ text-align:left; margin-bottom:18px; }
.case__desc{ color:var(--green-soft); max-width:56ch; font-size:1.02rem; margin-top:18px; }
.case__more{ margin-top:18px; font-size:0.72rem; }
.case__more a{ color:var(--orange); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.case__more a:hover{ border-color:var(--orange); }

/* Media genérico */
.media{ position:relative; overflow:hidden; background:var(--cream-deep); margin-top:22px; }
.media img{ width:100%; transition:transform 1.2s var(--ease); }
.media:hover img{ transform:scale(1.035); }
.media figcaption{ position:absolute; left:12px; bottom:12px; font-size:0.62rem; color:var(--cream); mix-blend-mode:difference; }
.media--square img{ aspect-ratio:1/1; object-fit:cover; }
.media--tall img{ aspect-ratio:3/4; object-fit:cover; }
.media--portrait img{ aspect-ratio:4/5; object-fit:cover; }

.case__pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); }
.case__triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }

/* Flipbook embebido */
.flipbook{ position:relative; width:100%; aspect-ratio:16/10; margin-top:26px; background:var(--cream-deep); overflow:hidden; border:1px solid var(--hair); }
.flipbook iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Collage de cuadrados flotantes dispersos (Casa tomada) */
.case__btn{
  display:inline-block; margin-top:20px;
  padding:13px 26px;
  border:1px solid var(--orange); color:var(--orange);
  font-size:0.74rem; letter-spacing:0.04em; text-transform:lowercase;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.case__btn:hover{ background:var(--orange); color:var(--cream); }

.collage-stage{
  position:relative; width:100%;
  height:clamp(460px, 72vh, 760px);
  margin-top:clamp(28px,5vh,52px);
}
.collage-card{
  position:absolute; display:block;
  width:clamp(180px, 25vw, 330px);
  opacity:0; transform:translateY(60px) rotate(var(--rot,0deg));
  transition:opacity .9s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--d, 0s);
}
.collage-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  box-shadow:0 28px 50px -26px rgba(23,57,31,0.5), 0 10px 20px -14px rgba(23,57,31,0.32);
  transition:transform .5s var(--ease);
}
.collage-card:hover img{ transform:scale(1.03); }
/* variante chica y dispersa (Perdidos en Tokio) */
.collage-stage--three{ height:clamp(420px, 64vh, 680px); }
.collage-stage--three .collage-card{ width:clamp(140px, 17vw, 230px); }
/* el pin es apaisado: encuadrar al frente (corazón de ramas) */
.collage-card--pin img{ object-position:18% center; }
/* par de imágenes más juntas (Rolling Stones): escenario más bajo */
.collage-stage--pair{ height:clamp(380px, 56vh, 600px); }
/* escalera de dos tapas (Vinilos): dos cuadrados chicos en diagonal */
.collage-stage--stair{ height:clamp(360px, 52vh, 560px); }
.collage-stage--stair .collage-card{ width:clamp(150px, 19vw, 250px); }
/* cuadrado flotante único, centrado (Curitas): primera vista en columna media */
.collage-stage--solo{ height:auto; display:flex; justify-content:center; margin-top:clamp(18px,3vh,32px); }
.collage-stage--solo .collage-card{ position:relative; width:clamp(220px, 80%, 360px); }
.collage-stage.is-in .collage-card{ opacity:1; transform:translateY(0) rotate(var(--rot,0deg)); }
.collage-stage.is-in .collage-card img{ animation:pinguinoFloat 8s ease-in-out infinite; animation-delay:calc(var(--d,0s) + 1.2s); }
@media (max-width:720px){
  .collage-stage{ height:clamp(420px, 66vh, 620px); }
  .collage-card{ width:clamp(130px, 40vw, 200px); }
}
@media (prefers-reduced-motion: reduce){
  .collage-card{ opacity:1; transform:rotate(var(--rot,0deg)); transition:none; }
  .collage-stage.is-in .collage-card img{ animation:none; }
}

.proyectos__foot{ margin-top:clamp(50px,8vh,90px); font-size:0.78rem; color:var(--green-soft); }
.proyectos__foot a{ color:var(--orange); }

/* ============================================================
   04 · MATERIALIDADES — módulo interactivo
   ============================================================ */
.materia__intro{
  text-align:center; max-width:60ch; margin:0 auto clamp(34px,6vh,60px);
  font-size:0.86rem; color:var(--green-soft); line-height:1.7;
}
.materia__lab{
  display:grid; grid-template-columns:1fr 0.85fr; gap:clamp(28px,5vw,70px);
  align-items:center;
  margin-bottom:clamp(40px,7vh,72px);
}
.materia__stage{ position:relative; }

/* Previsualización compuesta por capas */
.materia__build{
  position:relative; width:100%; aspect-ratio:4/5;
  border:1px solid var(--hair);
  box-shadow:0 30px 60px -40px rgba(23,57,31,0.5);
  overflow:hidden; background:var(--cream-deep);
}
.materia__layer{ position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .5s var(--ease), background-image .5s var(--ease); }
.materia__layer--base{ z-index:1; }
.materia__layer--tex{  z-index:2; mix-blend-mode:multiply; }
.materia__layer--tint{ z-index:3; mix-blend-mode:soft-light; }
/* cruz de registro */
.materia__build::after{
  content:''; position:absolute; z-index:4; top:14px; left:14px;
  width:14px; height:14px;
  background:
    linear-gradient(var(--orange),var(--orange)) center/1.5px 100% no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/100% 1.5px no-repeat;
  opacity:0.85;
}
/* gesto "hacela": pulso de cierre */
.materia__build.is-made{ animation:materiaMade .9s var(--ease); }
@keyframes materiaMade{
  0%{ transform:scale(1); box-shadow:0 30px 60px -40px rgba(23,57,31,0.5); }
  35%{ transform:scale(0.985); box-shadow:0 0 0 2px var(--orange), 0 30px 60px -40px rgba(23,57,31,0.5); }
  100%{ transform:scale(1); box-shadow:0 30px 60px -40px rgba(23,57,31,0.5); }
}

.materia__caption{ margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.materia__caption-name{ font-size:0.74rem; color:var(--orange); }
.materia__caption-line{ font-size:0.72rem; color:var(--green-soft); transition:opacity .3s var(--ease); }

/* Pasos */
.materia__steps{ display:flex; flex-direction:column; gap:clamp(20px,3vh,30px); }
.materia__step{ border:0; padding:0; margin:0; }
.materia__step legend{
  display:flex; align-items:center; gap:10px;
  font-size:0.74rem; color:var(--green); margin-bottom:14px;
}
.materia__step-num{ color:var(--green-faint); font-size:0.7rem; }
.materia__opts{ display:flex; flex-wrap:wrap; gap:10px; }
.materia__opt{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  background:none; border:0; padding:0; width:56px;
  font-family:var(--mono); color:var(--green-soft);
}
.materia__opt-sw{
  width:48px; height:48px;
  background-size:cover; background-position:center;
  border:1px solid var(--hair);
  transition:outline-color .25s var(--ease), transform .25s var(--ease);
  outline:1px solid transparent; outline-offset:2px;
}
.materia__opt-sw--empty{
  background:
    linear-gradient(45deg, transparent 46%, var(--green-faint) 46%, var(--green-faint) 54%, transparent 54%),
    var(--cream-soft);
}
.materia__opt-name{ font-size:0.6rem; text-transform:lowercase; line-height:1.2; text-align:center; }
.materia__opt:hover .materia__opt-sw{ transform:translateY(-2px); }
.materia__opt.is-on .materia__opt-sw{ outline-color:var(--orange); }
.materia__opt.is-on .materia__opt-name{ color:var(--orange); }

.materia__make{
  align-self:flex-start; margin-top:6px;
  padding:14px 28px; border:1px solid var(--orange); background:var(--orange);
  color:var(--cream); font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em;
  text-transform:lowercase;
  transition:background .3s var(--ease), color .3s var(--ease), transform .2s var(--ease);
}
.materia__make:hover{ background:var(--orange-deep); border-color:var(--orange-deep); }
.materia__make:active{ transform:scale(0.97); }

.materia__phrases{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,40px);
  border-top:1px solid var(--hair); padding-top:34px;
}
.materia__phrases li{ font-size:0.82rem; color:var(--green-soft); line-height:1.6; }
.materia__phrases li::first-letter{ color:var(--orange); }

/* ============================================================
   05 · HABLEMOS
   ============================================================ */
.hablemos__inner{ max-width:900px; }
.hablemos__title{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(2.4rem,6vw,5rem); line-height:1; letter-spacing:-0.03em;
  margin:18px 0 clamp(34px,5vh,56px);
}
.hablemos__mail{
  display:inline-block;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.3rem,3vw,2.2rem); letter-spacing:-0.02em;
  color:var(--orange);
  border-bottom:1px solid var(--hair);
  padding-bottom:8px; margin-bottom:clamp(40px,6vh,64px);
  transition:border-color .35s var(--ease);
}
.hablemos__mail:hover{ border-color:var(--orange); }
.hablemos__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; max-width:760px; }
.hablemos__list li{
  display:flex; gap:18px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--hair);
  font-size:0.82rem;
}
.hablemos__list li span:first-child{ flex:0 0 92px; color:var(--green-faint); }
.hablemos__list a{ color:var(--green); transition:color .3s var(--ease); border-bottom:1px solid transparent; }
.hablemos__list a:hover{ color:var(--orange); border-color:var(--orange); }
.hablemos__quiet{ margin-top:34px; font-size:0.74rem; color:var(--green-soft); }

.colofon{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px;
  margin-top:clamp(60px,10vh,120px); padding-top:30px;
  border-top:1px solid var(--hair);
  font-size:0.66rem; color:var(--green-soft);
}
.colofon p{ line-height:1.8; }
.colofon__right{ text-align:right; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .feature{ grid-template-columns:1fr; }
  .materia__lab{ grid-template-columns:1fr; }
  .sobre__portrait{ grid-column:1 / span 7; }
  .sobre__text{ grid-column:1 / span 12; padding-top:24px; }
  .sobre__nat--a{ grid-column:1 / span 6; margin-top:24px; }
  .sobre__nat--b{ grid-column:7 / span 6; margin-top:24px; }
  .sobre__nat--c{ grid-column:1 / span 12; aspect-ratio:16/9; }
}

@media (max-width:720px){
  /* Header: nav colapsa en panel */
  .topbar__burger{ display:flex; }
  .topbar__nav{
    position:fixed; inset:0; z-index:99;
    flex-direction:column; align-items:center; justify-content:center;
    gap:30px;
    background:rgba(244,233,205,0.97);
    backdrop-filter:blur(6px);
    transform:translateY(-100%); transition:transform .5s var(--ease);
  }
  .topbar__nav.is-open{ transform:none; }
  .topbar__nav a{ font-size:1.1rem; }

  .cases__row{ grid-template-columns:1fr; }
  .case__head{ flex-direction:column; gap:6px; }
  .case__cat{ text-align:left; }
  .case__triptych{ grid-template-columns:1fr; }
  .materia__phrases{ grid-template-columns:1fr; gap:18px; }
  .hablemos__list{ grid-template-columns:1fr; }
  .home__scroll{ display:none; }
  .sobre__nat--a,.sobre__nat--b{ grid-column:1 / span 12; aspect-ratio:16/10; margin-top:14px; }
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}