/* =====================================================================
   CrudoStudio
   Paleta derivada del logo: arroz, alga (nori) y atún (maguro).
   ===================================================================== */

:root{
  /* Superficies claras */
  --rice:      #F2EEE3;
  --rice-2:    #E9E3D5;
  --rice-3:    #DED7C5;

  /* Tinta y paneles oscuros */
  --nori:      #10312A;
  --nori-d:    #0A241E;
  --nori-key:  #17453A;
  --nori-edge: #061710;

  /* Acento */
  --maguro:      #C2183A;   /* sobre fondo claro */
  --maguro-lite: #FF5C77;   /* sobre fondo oscuro */

  /* Texto secundario */
  --shoyu:     #625A4D;

  /* Líneas */
  --line:      rgba(16,49,42,.16);
  --line-2:    rgba(16,49,42,.08);
  --line-inv:  rgba(242,238,227,.16);

  /* Tipografía */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(4.5rem, 9vw, 8rem);

  /* Cabecera. Estos dos valores mandan sobre su altura total. */
  --mark:    clamp(52px, 5.6vw, 68px);   /* tamaño del nigiri */
  --hdr-pad: clamp(.9rem, 1.4vw, 1.25rem); /* aire arriba y abajo */

  /* Texturas generadas, sin archivos externos */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --nori-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23m)'/%3E%3C/svg%3E");
  --wood:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .012' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23w)'/%3E%3C/svg%3E");

  /* Papel: pulpa de relieve fino + hebras largas de washi */
  --pulp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E");
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; scroll-padding-top:7.75rem; -webkit-text-size-adjust:100% }

body{
  background:var(--rice);
  color:var(--nori);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100% }
button,input,textarea{ font:inherit; color:inherit }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--nori); color:var(--rice);
  padding:.75rem 1.25rem; border-radius:6px; text-decoration:none;
  font-family:var(--mono); font-size:.8rem;
  transition:top .2s;
}
.skip:focus{ top:1rem }

/* Foco visible, global y consistente */
:focus-visible{
  outline:2px solid var(--maguro);
  outline-offset:3px;
  border-radius:3px;
}
.panel :focus-visible,
.hdr :focus-visible{ outline-color:var(--maguro-lite) }

.wrap{ width:min(1140px, 100% - 2.5rem); margin-inline:auto }

/* ── Tipografía compartida ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--maguro); margin-bottom:1.1rem;
}
.eyebrow-inv{ color:var(--maguro-lite) }

.h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3.1rem);
  line-height:1.04; letter-spacing:-.025em;
  text-wrap:balance;
}
.h2-inv{ color:var(--rice) }

.lede{ font-size:1.15em; margin-bottom:1.1rem }

/* ── Revelado al hacer scroll ────────────────────────────────────── */
.js .reveal{ opacity:0; transform:translateY(20px) }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1) }

/* ── Botones ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  letter-spacing:.04em;
  padding:.95rem 1.7rem; border-radius:7px; border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active{ transform:translateY(1px) }
.btn-solid{ background:var(--nori); color:var(--rice) }
.btn-solid:hover{ background:var(--maguro) }
.btn-line{ border-color:var(--line); color:var(--nori) }
.btn-line:hover{ border-color:var(--nori); background:var(--rice-2) }
.btn-full{ width:100%; text-align:center }

/* ═══════════ HEADER ═══════════ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:1.5rem;
  padding:var(--hdr-pad) clamp(1.5rem,4vw,3.25rem);
  background:rgba(242,238,227,.82);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.hdr.stuck{ border-bottom-color:var(--line); background:rgba(242,238,227,.94) }

.brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color:var(--nori); margin-right:auto;
}
.brand-mark{ width:var(--mark); height:auto; flex:none }
.m-fish{ fill:var(--maguro) }
.m-rice{ fill:var(--rice); stroke:var(--nori); stroke-width:4 }
.m-nori{ fill:var(--nori) }
.brand-word{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.15rem,.95rem + .65vw,1.5rem);
  letter-spacing:-.025em; line-height:1;
}
.brand-word b{ font-weight:800 }

.nav{ display:flex; align-items:center; gap:clamp(1.3rem,1.9vw,2rem) }
.nav a{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.02em;
  color:var(--shoyu); text-decoration:none;
  padding:.4rem 0; position:relative;
  transition:color .2s;
}
.nav a:hover, .nav a.active{ color:var(--nori) }
.nav a:not(.nav-cta)::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--maguro); transition:width .25s;
}
.nav a:hover:not(.nav-cta)::after, .nav a.active:not(.nav-cta)::after{ width:100% }
.nav-cta{
  background:var(--nori); color:var(--rice) !important;
  padding:.68rem 1.25rem; border-radius:7px;
}
.nav-cta:hover{ background:var(--maguro) }

.hdr-toggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:6px; padding:.6rem .7rem; cursor:pointer;
}
.hdr-toggle-bars{ display:block; width:20px }
.hdr-toggle-bars i{
  display:block; height:1.5px; background:var(--nori); border-radius:2px;
  transition:transform .25s, opacity .25s;
}
.hdr-toggle-bars i+i{ margin-top:5px }
.hdr-toggle[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg) }
.hdr-toggle[aria-expanded="true"] i:last-child{ transform:translateY(-3.25px) rotate(-45deg) }

/* ═══════════ HERO ═══════════ */
.hero{ padding:clamp(9rem,17vh,12rem) 0 clamp(3.5rem,7vw,5.5rem) }
.hero-h{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,1.1rem + 7.2vw,6.2rem);
  line-height:.98; letter-spacing:-.04em;
  margin-bottom:1.6rem;
}
.hero-h em{ font-style:normal; color:var(--maguro) }
.hero-p{ max-width:46ch; color:var(--shoyu); font-size:1.1em; margin-bottom:2.2rem }
.hero-btns{ display:flex; gap:.8rem; flex-wrap:wrap }
.hero-rule{
  width:min(1140px, 100% - 2.5rem); margin:clamp(3.5rem,7vw,5.5rem) auto 0;
  height:1px; background:var(--line);
}

/* Variante CRUD del titular */
.hero-crud{
  font-size:clamp(2rem,.9rem + 4.4vw,4.2rem);
  line-height:1.04;
}
.hero-crud span{
  display:block;
  color:var(--shoyu);
  font-size:.6em;
  letter-spacing:-.02em;
}
.hero-crud em{
  display:block;
  color:var(--nori);
  font-style:normal;
  margin-top:.14em;
}
.hero-crud b{ color:var(--maguro); font-weight:inherit }

/* ═══════════ BANDAS CLARAS ═══════════ */
.band{ padding:var(--pad) 0 }
.band-alt{ background:var(--rice-2) }
.band-head{ margin-bottom:clamp(2.5rem,5vw,3.5rem); max-width:46ch }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(2rem,5vw,4.5rem) }
.split-side{ position:sticky; top:8.75rem; align-self:start }
.split-main p{ color:var(--shoyu); margin-bottom:1.1rem }
.split-main p:last-of-type{ margin-bottom:0 }
.split-main .lede{ color:var(--nori) }

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1.5rem 1rem; margin-top:2.5rem;
  border-top:1px solid var(--line); padding-top:1.75rem;
}
.facts dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--shoyu); margin-bottom:.3rem;
}
.facts dd{ font-family:var(--display); font-weight:500; font-size:1.05rem }

/* ═══════════ PANELES OSCUROS ═══════════ */
.panel{
  background:var(--nori-d); color:var(--rice);
  padding:var(--pad) 0;
}
.panel-head{ max-width:52ch; margin-bottom:clamp(2.5rem,5vw,3.5rem) }
.panel-sub{ color:rgba(242,238,227,.62); margin-top:1rem; max-width:46ch }

/* ── EL TECLADO ── */
.kb-stage{ perspective:1400px; display:flex; justify-content:center; padding:1rem 0 2.5rem }
.kb-deck{
  transform:rotateX(var(--rx,17deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
  padding:clamp(.9rem,2vw,1.5rem);
  background:var(--nori);
  border:1px solid rgba(242,238,227,.10);
  border-radius:16px;
  box-shadow:0 16px 0 var(--nori-edge), 0 40px 60px -20px rgba(0,0,0,.65);
}
/* Entrada: el teclado da una vuelta completa la primera vez que aparece.
   Rápido al girar, lento al asentarse, para que se lea como aterrizaje. */
@keyframes kb-spin-in{
  0%{
    transform:rotateX(var(--rx,17deg)) rotateY(-360deg) scale(.82);
    opacity:0;
  }
  28%{ opacity:1 }
  100%{
    transform:rotateX(var(--rx,17deg)) rotateY(0deg) scale(1);
    opacity:1;
  }
}
.kb-deck.spin{
  animation:kb-spin-in 1.25s cubic-bezier(.16,.86,.3,1) both;
  will-change:transform;
}

.kb-rows{ display:flex; flex-direction:column; gap:clamp(.4rem,1vw,.6rem) }
.kb-row{ display:flex; gap:clamp(.4rem,1vw,.6rem); justify-content:center }
.kb-row:nth-child(2){ padding-left:clamp(.6rem,2vw,1.6rem) }
.kb-row:nth-child(3){ padding-left:clamp(1.2rem,4vw,3.2rem) }

.key{
  --edge:var(--nori-edge);
  flex:none;
  width:clamp(62px,15vw,104px); height:clamp(54px,11vw,72px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem;
  background:var(--nori-key); color:var(--rice);
  font-family:var(--mono); font-size:clamp(.62rem,1.6vw,.8rem); font-weight:500;
  letter-spacing:.02em;
  border:1px solid rgba(242,238,227,.09);
  border-radius:9px; cursor:pointer;
  box-shadow:0 7px 0 var(--edge), 0 11px 16px rgba(0,0,0,.35);
  transition:transform .26s cubic-bezier(.16,.84,.44,1),
             box-shadow .26s ease, background .2s, color .2s;
  touch-action:manipulation;               /* sin retraso de 300 ms al tocar */
  -webkit-tap-highlight-color:transparent; /* sin destello azul en Android */
}

/* Baja rápido mientras el dedo la mantiene… */
.key:active{
  transform:translateY(6px);
  box-shadow:0 1px 0 var(--edge), 0 2px 5px rgba(0,0,0,.3);
  transition-duration:.06s;
}

/* …y al soltar sube frenando, sin pasarse de su posición de reposo.
   Es como se comporta una tecla real: el resorte la devuelve, no la lanza. */
@keyframes key-press{
  from { transform:translateY(6px) }
  to   { transform:translateY(0) }
}
.key.press{ animation:key-press .28s cubic-bezier(.16,.84,.44,1) }
.key-sub{
  font-size:.55em; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(242,238,227,.45);
}
.key:hover{ transform:translateY(3px); box-shadow:0 4px 0 var(--edge), 0 7px 10px rgba(0,0,0,.3) }
.key[aria-checked="true"]{
  background:var(--maguro); color:#fff; border-color:transparent;
  --edge:#8A1029;              /* el canto también se pone rojo */
}
.key[aria-checked="true"] .key-sub{ color:rgba(255,255,255,.65) }
.key-wide{ width:clamp(200px,52vw,340px) }

.readout{
  max-width:640px; margin-inline:auto;
  border:1px solid var(--line-inv); border-radius:12px;
  padding:clamp(1.25rem,3vw,1.75rem);
  background:rgba(242,238,227,.03);
}
.readout-top{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem }
.readout-name{ font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em }
.readout-lvl{ font-family:var(--mono); font-size:.85rem; color:var(--maguro-lite) }
.meter{ height:4px; background:rgba(242,238,227,.14); border-radius:2px; margin:.9rem 0 1rem; overflow:hidden }
.meter span{ display:block; height:100%; background:var(--maguro-lite); border-radius:2px; transition:width .45s cubic-bezier(.2,.7,.3,1) }
.readout-note{ color:rgba(242,238,227,.7); font-size:.95em }

/* ═══════════ TRABAJO ═══════════ */
.work{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem); align-items:center;
  border:1px solid var(--line); border-radius:14px;
  padding:clamp(1.25rem,3vw,2rem);
  background:var(--rice);
}
/* Miniatura dentro de un marco de navegador */
.work-cover{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; border-radius:10px;
  background:var(--nori-d); color:var(--rice);
  border:1px solid var(--line);
  box-shadow:0 12px 28px -14px rgba(16,49,42,.45);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.work-cover:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -16px rgba(16,49,42,.55);
}

.work-frame-bar{
  position:absolute; inset:0 0 auto 0; z-index:2;
  height:26px; display:flex; align-items:center; gap:5px;
  padding:0 10px;
  background:var(--nori);
  border-bottom:1px solid rgba(242,238,227,.10);
}
.work-frame-bar i{
  width:7px; height:7px; border-radius:50%;
  background:rgba(242,238,227,.22);
}
.work-frame-bar b{
  margin-inline:auto;
  font-family:var(--mono); font-weight:400; font-size:.62rem;
  letter-spacing:.04em; color:rgba(242,238,227,.45);
  transform:translateX(-13px);
}

.work-cover img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  padding-top:26px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.work-cover:hover img{ transform:scale(1.03) }

.work-cover-tag{
  position:absolute; z-index:3; top:38px; right:12px;
  font-family:var(--mono); font-size:.68rem;
  color:var(--rice); background:rgba(10,36,30,.75);
  padding:.2rem .5rem; border-radius:4px;
  backdrop-filter:blur(4px);
}
.work-name{ font-family:var(--display); font-weight:800; font-size:1.75rem; letter-spacing:-.02em }
.work-desc{ color:var(--shoyu); margin:.7rem 0 1.1rem }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; margin-bottom:1.4rem }
.tags li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.04em;
  border:1px solid var(--line); border-radius:20px; padding:.28rem .75rem;
  color:var(--shoyu);
}
.work-link{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.82rem; font-weight:500;
  color:var(--nori); text-decoration:none;
  border-bottom:1.5px solid var(--maguro); padding-bottom:.2rem;
  transition:color .2s, gap .2s;
}
.work-link:hover{ color:var(--maguro); gap:.75rem }
.work-link::after{ content:'↗' }
.work-link[aria-disabled="true"]{
  color:var(--shoyu); border-bottom-style:dashed; border-bottom-color:var(--line);
  cursor:default; pointer-events:none;
}
.work-link[aria-disabled="true"]::after{ content:'' }

/* ═══════════ SERVICIOS ═══════════ */
.svc{ list-style:none; border-top:1px solid var(--line) }
.svc-item{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:1rem clamp(1.5rem,4vw,3rem);
  padding:clamp(1.5rem,3vw,2.1rem) 0;
  border-bottom:1px solid var(--line);
}
.svc-item h3{ font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.02em }
.svc-item p{ color:var(--shoyu) }

/* ═══════════ PROCESO ═══════════ */
.steps{
  list-style:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
}
.step{ border-top:2px solid var(--nori); padding-top:1.1rem }
.step-n{
  display:block; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.14em; color:var(--maguro); margin-bottom:.65rem;
}
.step h3{ font-family:var(--display); font-weight:800; font-size:1.15rem; margin-bottom:.5rem }
.step p{ color:var(--shoyu); font-size:.95em }

/* ═══════════ CONTACTO ═══════════ */
.panel-end{ padding-bottom:calc(var(--pad) + 1rem) }
.contact{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2.5rem,6vw,5rem) }
.contact-p{ color:rgba(242,238,227,.65); margin:1.2rem 0 .6rem }

/* Lista de canales de contacto */
.channels{ list-style:none; margin-top:1.5rem; border-top:1px solid var(--line-inv) }
.channel a{
  display:grid; grid-template-columns:1fr auto auto;
  align-items:center; gap:1rem;
  padding:.95rem .25rem;
  border-bottom:1px solid var(--line-inv);
  text-decoration:none; color:var(--rice);
  transition:padding-left .2s, color .2s;
}
.channel a:hover{ padding-left:.7rem; color:var(--maguro-lite) }
.channel a::after{
  content:'↗'; font-size:.85rem;
  color:rgba(242,238,227,.4); transition:color .2s, transform .2s;
}
.channel a:hover::after{ color:var(--maguro-lite); transform:translate(2px,-2px) }
.channel-name{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,238,227,.55); transition:color .2s;
}
.channel-val{ font-family:var(--mono); font-size:.85rem; letter-spacing:.01em }
.channel a:hover .channel-name{ color:rgba(242,238,227,.8) }

.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.field{ margin-bottom:1rem; display:block }
.field label{
  display:block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,238,227,.55); margin-bottom:.45rem;
}
.field input, .field textarea{
  width:100%; background:rgba(242,238,227,.05);
  border:1px solid var(--line-inv); border-radius:7px;
  padding:.8rem .9rem; color:var(--rice);
  transition:border-color .2s, background .2s;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--maguro-lite); background:rgba(242,238,227,.08);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--maguro-lite) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form .btn-solid{ background:var(--rice); color:var(--nori-d); margin-top:.5rem }
.form .btn-solid:hover{ background:var(--maguro-lite); color:#fff }
.form .btn-solid[disabled]{ opacity:.6; cursor:progress }
.form-msg{ min-height:1.4rem; margin-top:.8rem; font-size:.87rem; color:rgba(242,238,227,.75) }
.form-msg.err{ color:var(--maguro-lite) }
.form-msg.ok{ color:var(--rice) }

/* ═══════════ FOOTER ═══════════ */
.ftr{ background:var(--nori-d); color:rgba(242,238,227,.55); padding:2rem 0; border-top:1px solid var(--line-inv) }
.ftr-in{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; font-size:.82rem }
.ftr a{ color:inherit; text-decoration:none; font-family:var(--mono); font-size:.78rem }
.ftr a:hover{ color:var(--rice) }

/* ═══════════ TEXTURAS Y PROFUNDIDAD ═══════════ */
.hero, .band, .panel{ position:relative; isolation:isolate }
.hero::before, .band::before, .panel::before,
.hero::after,  .band::after,  .panel::after{
  content:''; position:absolute; inset:0; z-index:-1;
  pointer-events:none;
}

/* Capa 1 · papel con relieve: pulpa + hebras + veteado suave.
   soft-light aclara y oscurece a la vez, así que se lee como textura
   con volumen y no como polvo encima del color. */
.hero::before, .band::before{
  background-image:var(--pulp), var(--fiber), var(--mottle);
  background-size:200px 200px, 320px 320px, 100% 100%;
  background-repeat:repeat, repeat, no-repeat;
  opacity:.55;
  mix-blend-mode:soft-light;
}

/* La banda de servicios es madera de hinoki: veta vertical */
.band-alt::before{
  background-image:var(--wood), var(--pulp);
  background-size:100% 100%, 200px 200px;
  background-repeat:no-repeat, repeat;
  opacity:.5;
  mix-blend-mode:soft-light;
}

/* Capa 1 · mota de alga sobre los paneles oscuros */
.panel::before{
  background-image:var(--nori-tex), var(--mottle);
  background-size:240px 240px, 100% 100%;
  background-repeat:repeat, no-repeat;
  opacity:.09;
}

/* Capa 2 · la luz no es pareja y cada lámina tiene canto */
.hero::after{
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,.85), transparent 58%),
    linear-gradient(180deg, transparent 82%, rgba(16,49,42,.05) 100%);
}
.band::after{
  background:
    radial-gradient(130% 75% at 50% -12%, rgba(255,255,255,.8), transparent 62%),
    linear-gradient(180deg,
      rgba(16,49,42,.06) 0, transparent 9%,
      transparent 91%, rgba(16,49,42,.05) 100%);
}

/* Capa 2 · el panel oscuro se hunde en la página */
.panel::after{
  background:radial-gradient(100% 80% at 50% 0%, rgba(255,92,119,.08), transparent 60%);
  box-shadow:
    inset 0 16px 26px -16px rgba(0,0,0,.8),
    inset 0 -16px 26px -16px rgba(0,0,0,.8);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:900px){
  .split, .contact, .work{ grid-template-columns:1fr }
  .split-side{ position:static }
  .svc-item{ grid-template-columns:1fr; gap:.4rem }
}

@media (max-width:760px){
  .hdr{ flex-wrap:wrap }
  .hdr-toggle{ display:block }
  .nav{
    display:none; flex-direction:column; align-items:stretch;
    gap:.25rem; width:100%; padding:.75rem 0 .25rem;
    border-top:1px solid var(--line); margin-top:.85rem;
  }
  .nav.open{ display:flex }
  .nav a{ padding:.7rem .25rem; font-size:.9rem }
  .nav a:not(.nav-cta)::after{ display:none }
  .nav-cta{ text-align:center; margin-top:.5rem }
  .form .row{ grid-template-columns:1fr }
  /* Sin rotación 3D en táctil: el relieve lo dan las sombras, y así
     el navegador no tiene que calcular toques sobre una capa girada. */
  .kb-deck{ --rx:0deg; transform-style:flat }
  .kb-stage{ perspective:none; padding-bottom:3rem }
  .ftr-in{ justify-content:center; text-align:center }
  :root{ --mark:46px; --hdr-pad:.75rem }
}

@media (max-width:520px){
  .channel a{ grid-template-columns:1fr auto; row-gap:.2rem }
  .channel-name{ grid-column:1 }
  .channel-val{ grid-column:1 }
  .channel a::after{ grid-column:2; grid-row:1/3 }
}

/* ═══════════ MOVIMIENTO REDUCIDO ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .reveal{ opacity:1; transform:none }
  .kb-deck{ transition:none }
  .kb-deck.spin{ animation:none }
  .key.press{ animation:none }
  .work-cover:hover, .work-cover:hover img{ transform:none }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}