:root{
  --cream:      #E8DED5;
  --cream-warm: #DDCFBE;
  --ink:        #2E1B14;
  --coffee:     #3D2219;
  --coffee-2:   #28130D;
  --stone:      #8C7867;
  --stone-line: rgba(46,27,20,0.14);
  --clay:       #6A1C2A;
  --clay-dim:   #59191D;
  --cream-line: rgba(232,222,213,0.22);
  --maxw: 720px;
  --edge: clamp(24px, 6vw, 96px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Libre Franklin', sans-serif; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4,.serif{ font-family:'Fraunces', serif; font-weight:400; margin:0; }
.italic{ font-style:italic; }
a{ color:inherit; }

.grain{ position:fixed; inset:0; pointer-events:none; z-index:5; opacity:0.05; mix-blend-mode:multiply; }
.ribbon{
  position:fixed; top:0; right:clamp(14px,4vw,40px); width:10px; height:0%;
  background:linear-gradient(180deg, var(--clay), var(--clay-dim)); z-index:50;
  transition:height 0.08s linear; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}

/* ===== NAV ===== */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--edge); background:rgba(232,222,213,0.88);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--stone-line);
}
.topnav .nmark{ font-family:'Fraunces', serif; font-style:italic; font-size:15px; text-decoration:none; color:var(--ink); }
.topnav ul{ list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.topnav a.nlink{
  font-size:12.5px; letter-spacing:0.04em; text-decoration:none; color:var(--ink);
  border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color 0.2s ease, color 0.2s ease;
}
.topnav a.nlink:hover{ color:var(--clay); border-color:var(--clay); }
.nav-toggle{
  display:none; background:none; border:none; padding:6px 0; cursor:pointer;
  font-family:'Libre Franklin', sans-serif; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink);
}
@media (max-width:860px){
  .nav-toggle{ display:block; }
  .topnav ul{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--cream); border-bottom:1px solid var(--stone-line); padding:8px var(--edge) 18px;
  }
  .topnav.open ul{ display:flex; }
  .topnav ul li a.nlink{ display:block; padding:12px 0; font-size:15px; border-bottom:1px solid var(--stone-line); }
}

section{ position:relative; padding:min(14vw,140px) var(--edge) min(10vw,110px); }
.section-inner{ max-width:var(--maxw); margin:0 auto; }
.wide{ max-width:960px; }

.eyebrow{ text-transform:uppercase; letter-spacing:0.16em; font-size:11.5px; font-weight:600; color:var(--clay); margin-bottom:18px; display:block; }
.on-dark .eyebrow{ color:#BD8891; }

.folio{ position:absolute; right:var(--edge); bottom:28px; font-family:'Fraunces', serif; font-style:italic; font-size:13px; color:var(--stone); letter-spacing:0.04em; }
.on-dark .folio{ color:rgba(232,222,213,0.4); }

.reveal{ opacity:0; transform:translateY(18px); transition:opacity 0.9s ease, transform 0.9s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ===== HERO ===== */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:min(10vw,110px); padding-bottom:min(10vw,90px); }
.wordmark{ font-size:13px; letter-spacing:0.22em; text-transform:uppercase; font-weight:600; color:var(--stone); margin-bottom:14px; }
.descriptor{ font-size:13.5px; color:var(--clay-dim); font-weight:500; letter-spacing:0.01em; margin-bottom:min(9vw,56px); max-width:40ch; }
.hero h1{ font-size:clamp(32px, 5.4vw, 56px); line-height:1.2; max-width:17ch; font-weight:400; letter-spacing:-0.01em; }
.hero h1 em{ font-style:italic; font-weight:400; color:var(--clay-dim); }
.hero p{ font-size:clamp(16px,1.9vw,19px); line-height:1.65; color:#4A2E22; max-width:50ch; margin:28px 0 36px; }
.cta-row{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--coffee); color:var(--cream);
  font-family:'Libre Franklin', sans-serif; font-weight:600; font-size:14.5px; letter-spacing:0.03em;
  padding:16px 26px; border:none; border-radius:2px; text-decoration:none; cursor:pointer; width:fit-content;
  transition:background 0.25s ease, transform 0.25s ease;
}
.cta:hover{ background:var(--clay-dim); transform:translateY(-1px); }
.cta-secondary{ font-family:'Fraunces', serif; font-style:italic; font-size:15px; color:var(--clay-dim); text-decoration:none; border-bottom:1px solid var(--clay-dim); padding-bottom:2px; }
.cta:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; }
.cta .arrow{ transition:transform 0.25s ease; }
.cta:hover .arrow{ transform:translateX(3px); }
.scroll-cue{ margin-top:auto; padding-top:52px; display:flex; align-items:center; gap:12px; color:var(--stone); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }
.scroll-cue .line{ width:34px; height:1px; background:var(--stone); }

.interlude{ padding:min(9vw,90px) var(--edge); text-align:center; background:var(--cream); }
.interlude p{ font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:clamp(19px,2.6vw,25px); color:var(--clay-dim); max-width:28ch; margin:0 auto; line-height:1.5; }

.bg-warm{ background:var(--cream-warm); }
h2{ font-size:clamp(27px,3.8vw,38px); line-height:1.22; margin-bottom:26px; max-width:19ch; }
.lede{ font-size:clamp(16px,1.9vw,18.5px); line-height:1.75; color:#4A2E22; }
.lede + .lede{ margin-top:18px; }
.idea-synthesis{ margin-top:34px; font-family:'Fraunces', serif; font-style:italic; font-size:clamp(20px,2.6vw,26px); color:var(--clay-dim); border-top:1px solid var(--stone-line); padding-top:26px; }
.idea-synthesis small{ display:block; font-family:'Libre Franklin', sans-serif; font-style:normal; font-size:13.5px; color:var(--stone); margin-top:8px; letter-spacing:0.01em; }

/* situaciones */
.situations{ display:flex; flex-direction:column; margin-top:36px; }
.situation{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:20px 0; border-top:1px solid var(--stone-line); align-items:baseline; }
.situation:last-child{ border-bottom:1px solid var(--stone-line); }
.situation .sit-name{ font-family:'Fraunces', serif; font-style:italic; font-size:17px; color:var(--clay-dim); }
.situation .sit-need{ font-size:14.5px; color:#4A2E22; line-height:1.55; }
.situations-note{ margin-top:30px; font-size:14.5px; color:var(--stone); line-height:1.6; }

/* etapas */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:30px 0; border-top:1px solid var(--stone-line); }
.step:last-child{ border-bottom:1px solid var(--stone-line); }
.step .num{ font-family:'Fraunces', serif; font-style:italic; font-size:22px; color:var(--clay); padding-top:2px; }
.step h3{ font-size:clamp(18px,2.2vw,21px); font-weight:500; margin-bottom:8px; }
.step p{ color:#4A2E22; line-height:1.65; font-size:15.5px; max-width:54ch; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip{ font-size:12.5px; border:1px solid var(--stone-line); color:var(--clay-dim); padding:5px 12px; border-radius:20px; }
.steps-note{ margin-top:30px; font-size:14px; color:var(--stone); line-height:1.6; max-width:58ch; border-top:1px solid var(--stone-line); padding-top:24px; }

.on-dark{ background:var(--coffee); color:var(--cream); }
.litany{ list-style:none; margin:0; padding:0; }
.litany li{ font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:clamp(18px,2.6vw,24px); line-height:1.6; padding:14px 0; border-top:1px solid var(--cream-line); }
.litany li:last-child{ border-bottom:1px solid var(--cream-line); }
.not-for{ margin-top:36px; font-size:14px; color:rgba(232,222,213,0.55); line-height:1.7; max-width:56ch; }

/* proyectos */
.projects-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--stone-line); margin-top:40px; border:1px solid var(--stone-line); }
.project{ background:var(--cream-warm); padding:28px 26px; }
.project h4{ font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:19px; margin-bottom:10px; color:var(--clay-dim); }
.project p{ font-size:14px; line-height:1.62; color:#4A2E22; }
.projects-note{ margin-top:28px; font-size:14px; color:var(--stone); font-style:italic; font-family:'Fraunces', serif; }

/* about */
.about-quote{ border-left:2px solid var(--clay); padding-left:24px; margin:34px 0; font-family:'Fraunces', serif; font-style:italic; font-size:clamp(18px,2.4vw,22px); line-height:1.55; color:var(--clay-dim); }
.signature-line{ margin-top:30px; font-size:13px; letter-spacing:0.06em; color:var(--stone); text-transform:uppercase; }
.disclaimer{ margin-top:38px; padding-top:26px; border-top:1px solid var(--stone-line); font-size:13.5px; line-height:1.7; color:var(--stone); max-width:58ch; }

/* talleres */
.workshop-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--stone-line); margin-top:40px; border:1px solid var(--stone-line); }
.workshop{ background:var(--cream); padding:28px 26px; }
.workshop h4{ font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:19px; margin-bottom:6px; color:var(--clay-dim); }
.workshop .wtag{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--stone); display:block; margin-bottom:10px; }
.workshop p{ font-size:14px; line-height:1.62; color:#4A2E22; }
.workshops-note{ margin-top:28px; font-size:14.5px; color:#4A2E22; line-height:1.65; max-width:58ch; }

/* faq */
.faq-item{ padding:26px 0; border-top:1px solid var(--stone-line); }
.faq-item:last-child{ border-bottom:1px solid var(--stone-line); }
.faq-item h3{ font-size:18px; font-weight:500; margin-bottom:10px; }
.faq-item p{ color:#4A2E22; line-height:1.65; font-size:15px; max-width:56ch; }

.start-sub{ color:rgba(232,222,213,0.75); line-height:1.7; font-size:16px; max-width:46ch; margin-top:14px; }
form{ margin-top:48px; display:flex; flex-direction:column; gap:26px; max-width:560px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:rgba(232,222,213,0.55); font-weight:600; }
.field input, .field textarea{
  background:transparent; border:none; border-bottom:1px solid rgba(232,222,213,0.3); color:var(--cream);
  font-family:'Libre Franklin', sans-serif; font-size:16px; padding:10px 2px; resize:vertical; min-height:44px;
  transition:border-color 0.25s ease;
}
.field textarea{ min-height:80px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(232,222,213,0.32); }
.field input:focus, .field textarea:focus{ border-color:var(--clay); outline:none; }
.submit-row{ margin-top:8px; }
.submit-btn{
  background:var(--clay); color:var(--cream); border:none; border-radius:2px; font-family:'Libre Franklin', sans-serif;
  font-weight:600; font-size:14.5px; letter-spacing:0.03em; padding:16px 30px; cursor:pointer;
  transition:background 0.25s ease, transform 0.25s ease;
}
.submit-btn:hover{ background:#7A2231; transform:translateY(-1px); }
.form-note{ font-size:13px; color:rgba(232,222,213,0.45); margin-top:14px; }
.success-msg{ display:none; font-family:'Fraunces', serif; font-style:italic; font-size:19px; color:#C9939B; margin-top:20px; }
.success-msg.show{ display:block; }

footer{ background:var(--coffee-2); color:rgba(232,222,213,0.55); padding:56px var(--edge) 36px; }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid rgba(232,222,213,0.12); }
.footer-top .fmark{ font-family:'Fraunces', serif; font-style:italic; color:rgba(232,222,213,0.85); font-size:17px; display:block; margin-bottom:8px; }
.footer-top .floc{ font-size:13px; line-height:1.7; max-width:32ch; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; font-size:13px; }
.footer-links a{ text-decoration:none; color:rgba(232,222,213,0.55); border-bottom:1px solid transparent; transition:border-color 0.2s ease, color 0.2s ease; }
.footer-links a:hover{ color:var(--cream); border-color:rgba(232,222,213,0.4); }
.footer-bottom{ padding-top:24px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12px; color:rgba(232,222,213,0.35); }

@media (max-width:640px){
  .situation{ grid-template-columns:1fr; gap:6px; }
  .projects-grid, .workshop-grid{ grid-template-columns:1fr; }
  .step{ grid-template-columns:40px 1fr; }
  .field-row{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; }
  .ribbon{ width:7px; right:14px; }
  .topnav{ padding:14px 32px 14px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  .cta, .submit-btn{ transition:none; }
}

/* ===== IDIOMA ===== */
.nav-right{ display:flex; align-items:center; gap:22px; }
.lang-switch{
  font-size:12px; letter-spacing:0.08em; text-decoration:none; color:var(--stone);
  border:1px solid var(--stone-line); border-radius:20px; padding:5px 11px; white-space:nowrap;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.lang-switch .on{ color:var(--ink); font-weight:600; }
.lang-switch:hover{ border-color:var(--clay); color:var(--clay); }