/* Arroz Studio — anuario de láminas
   Hoja casi blanca sin estucar, tinta #16181A, un sello perla, filetes de 1px y cruces de registro.
   Una sola grotesca (Schibsted Grotesk) para títulos y texto; Fragment Mono para rótulos. */

@font-face{font-family:"Schibsted Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Fragment Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/fragment-mono-latin-400-normal.woff2") format("woff2")}

:root{
  --paper:#f5f4f6;
  --paper-warm:#faf6f5;
  --paper-cool:#eef3ef;
  --ink:#16181a;
  --ink-2:#4a4c50;          /* texto secundario: 7.9:1 sobre papel */
  --seal:#dcddf3;
  --seal-ink:#2c2f6b;
  --rule:#c9c7c4;
  --dot:#b9b7b4;
  --plate:#ecebed;          /* fondo de las láminas */
  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gutter:40px;
  --margin:clamp(20px,4.2vw,72px);
  --vh:1vh;
  --out:cubic-bezier(.19,1,.22,1);
  --bar:72px;
}
@supports (height:1svh){ :root{ --vh:1svh } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  background:var(--paper);
  background-image:linear-gradient(135deg,var(--paper-warm) 0%,rgba(245,244,246,0) 38%),linear-gradient(315deg,var(--paper-cool) 0%,rgba(245,244,246,0) 42%);
  background-attachment:fixed}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--seal);color:var(--ink)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
html{scrollbar-color:var(--rule) var(--paper)}
.skip{position:absolute;left:var(--margin);top:-80px;z-index:60;background:var(--ink);color:var(--paper);padding:12px 16px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.skip:focus{top:calc(var(--bar) + 12px)}

/* ---------- vocabulario ---------- */
.label{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.display{font-weight:400;font-size:clamp(40px,6.4vw,92px);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
.title{font-weight:400;font-size:clamp(28px,3.2vw,44px);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.title--xl{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.03em;line-height:1}
.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:36ch;margin-top:28px;text-wrap:pretty}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;background:var(--ink);color:var(--paper);text-decoration:none;
  font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);border-radius:0;
  transition:background .1s ease,color .1s ease}
.btn svg{width:16px;height:16px;flex:none;transition:transform .6s var(--out)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.btn--sm{min-height:40px;padding:0 16px;gap:9px}
.btn--block{width:100%}
.link{display:inline-flex;align-items:center;gap:8px;margin-top:0;font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding-bottom:6px;border-bottom:1px solid var(--ink)}
.link svg{width:14px;height:14px;transition:transform .6s var(--out)}
.link:hover svg{transform:translate(2px,-2px)}

/* cruces de registro */
.x{position:absolute;width:14px;height:14px;pointer-events:none;color:var(--ink)}
.x::before,.x::after{content:"";position:absolute;background:currentColor}
.x::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.x::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.x--tl{left:-21px;top:-21px}.x--tr{right:-21px;top:-21px}.x--bl{left:-21px;bottom:-21px}.x--br{right:-21px;bottom:-21px}

/* láminas */
.plate{position:relative;background:var(--plate);overflow:visible}
.plate img{width:100%}
.plate__cap{position:absolute;left:0;right:0;bottom:-30px;display:flex;justify-content:space-between;font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);pointer-events:none}
.plate__cap svg{width:16px;height:16px}

/* matriz de puntos para los vacíos */
.dots{background-image:radial-gradient(circle,var(--dot) .8px,transparent 1px);background-size:8px 8px}

/* ---------- barra ---------- */
.bar{position:sticky;top:0;z-index:40;height:var(--bar);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gutter);padding:0 var(--margin);
  background:rgba(245,244,246,.92);border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 15px/1 var(--sans);letter-spacing:-.01em}
.brand svg{width:12px;height:22px}
.bar__nav{display:flex;gap:34px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.bar__nav a{text-decoration:none;padding:6px 0;position:relative}
.bar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--out)}
.bar__nav a:hover::after{transform:scaleX(1)}
.bar > .btn{justify-self:end}

/* ---------- portada + láminas (la lámina queda fija) ---------- */
.story{display:grid;grid-template-columns:5fr 7fr;column-gap:var(--gutter);padding:0 var(--margin);align-items:start}
.story__plate{position:sticky;top:var(--bar);grid-column:2;grid-row:1;height:calc(var(--vh) * 100 - var(--bar));display:grid;align-items:center;padding:48px 0 60px 24px}
.story__plate::after{content:"";position:absolute;left:24px;right:0;bottom:22px;height:28px;background-image:radial-gradient(circle,var(--dot) .8px,transparent 1px);background-size:8px 8px;pointer-events:none}
.entry::before{content:"";position:absolute;left:0;top:-1px;width:120px;height:8px;background-image:radial-gradient(circle,var(--dot) .8px,transparent 1px);background-size:8px 8px}
.plate--stage{aspect-ratio:1.18/1;max-height:calc(var(--vh) * 100 - var(--bar) - 108px);width:100%;margin:0 auto}
.plate--stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s ease}
.is-live > canvas{opacity:1}
.poster{position:absolute;inset:0;overflow:hidden;transition:opacity .5s ease}
.is-live > .poster{opacity:0}
.poster__phone{position:absolute;left:50%;top:50%;width:33%;aspect-ratio:71.6/147.6;transform:translate(-50%,-50%) perspective(1600px) rotateY(-14deg);
  border-radius:12% / 6%;border:3px solid #1d1f22;outline:1px solid #45484c;overflow:hidden;background:#111}
.poster__phone img{width:100%}
.story__text{grid-column:1;grid-row:1}

.seal{position:absolute;left:-30px;bottom:34px;width:clamp(120px,11vw,168px);aspect-ratio:1;z-index:3}
.seal svg{width:100%;height:100%;overflow:visible}
.seal circle{fill:var(--seal)}
.seal text{font:400 12.5px var(--mono);letter-spacing:.16em;fill:var(--seal-ink)}
.seal use{color:var(--seal-ink)}
.seal__ring{transform-origin:100px 100px;animation:turn 25s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}

.hero{min-height:calc(var(--vh) * 100 - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:48px 0 80px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero__price{margin-top:22px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px var(--gutter);margin-top:64px;padding-top:24px;border-top:1px solid var(--rule)}
.facts dd{margin-top:6px;font-size:15px;line-height:1.4;color:var(--ink-2)}

.entry{position:relative;min-height:calc(var(--vh) * 100 - var(--bar));display:flex;flex-direction:column;justify-content:center;padding:64px 0;border-top:1px solid var(--rule)}
.entry__body{margin-top:18px;max-width:40ch;line-height:1.5;text-wrap:pretty}
.credits{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin-top:28px;padding-top:16px;border-top:1px solid var(--rule);font-size:15px}
.credits div{display:contents}
.credits dt{font:400 11px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.credits dd{color:var(--ink-2)}
.plate--shot{margin-top:36px;max-width:420px;margin-bottom:56px}
.plate--shot img{aspect-ratio:16/10;object-fit:cover;object-position:top}

/* ---------- hojas ---------- */
.sheet{padding:clamp(80px,10vw,140px) var(--margin) clamp(90px,10vw,150px);border-top:1px solid var(--rule)}
.sheet__head{display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:end}
.sheet__aside{max-width:34ch;color:var(--ink-2);text-wrap:pretty}
.sheet__aside + .plan__price{margin-top:40px}

/* proceso */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(56px,6vw,96px)}
.step{display:flex;flex-direction:column}
.plate--step{aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center;padding:7%}
.plate--step img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.plate--step img[src$="step-2.webp"]{width:100%;height:100%;object-fit:cover;max-width:none}
.step:nth-child(2) .plate--step{padding:0}
.step__n{margin-top:36px;font:400 11px/1 var(--mono);letter-spacing:.14em;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.step h3{margin-top:18px;font-weight:400;font-size:24px;letter-spacing:-.02em;line-height:1.1}
.step p + h3{margin-top:16px}
.step h3 + p{margin-top:10px;max-width:34ch;color:var(--ink-2);text-wrap:pretty}

/* qué incluye */
.include{display:grid;grid-template-columns:5fr 3fr 4fr;gap:var(--gutter);align-items:start}
.include__intro .sheet__aside{margin-top:24px}
.plate--object{aspect-ratio:3/4;background-color:transparent;background-image:radial-gradient(circle,var(--dot) .8px,transparent 1px);background-size:8px 8px;display:grid;place-items:center;margin:0 auto;max-width:400px;width:100%;border:1px solid var(--rule)}
.plate--object img{width:78%}
.spec{display:grid;gap:0;padding-top:4px}
.spec li{display:flex;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.35;text-wrap:pretty}
.spec li:first-child{border-top:1px solid var(--rule)}
.spec svg{width:22px;height:22px;flex:none}
.statement{grid-column:1 / -1;margin-top:clamp(56px,6vw,96px);font-weight:400;font-size:clamp(28px,3.6vw,52px);line-height:1.05;letter-spacing:-.03em;max-width:22ch;text-wrap:balance}

/* precios: tabla de créditos */
.plans{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,6vw,96px);border-top:1px solid var(--ink)}
.plan{display:flex;flex-direction:column;padding:32px clamp(20px,2.4vw,40px) 36px;border-bottom:1px solid var(--rule)}
.plan + .plan{border-left:1px solid var(--rule)}
.plan:first-child{padding-left:0}
.plan:last-child{padding-right:0}
.plan--featured{background:var(--paper-warm)}
.plan__name{display:flex;align-items:center;gap:14px;font-weight:400;font-size:28px;letter-spacing:-.02em;line-height:1}
.plan__tag{font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:var(--seal);color:var(--seal-ink);padding:7px 9px 6px}
.plan__for{margin-top:12px;color:var(--ink-2);font-size:15px}
.plan__price{margin-top:28px;font-weight:400;font-size:clamp(44px,4.4vw,64px);line-height:1;letter-spacing:-.01em;font-variant-numeric:lining-nums proportional-nums}
.plan__price small{font:400 11px/1 var(--mono);letter-spacing:.14em;margin-left:10px;vertical-align:.5em}
.plan ul{flex:1;margin:28px 0 32px;padding-top:4px;display:grid;gap:12px;font-size:15px;line-height:1.4}
.plan li{position:relative;padding-left:22px;text-wrap:pretty}
.plan li::before{content:"";position:absolute;left:1px;top:.42em;width:6px;height:11px;border-radius:50%;background:var(--ink);transform:rotate(28deg)}
.plan__promo{font-weight:500}
.extras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:clamp(40px,4vw,56px)}
.extras dt{font:400 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.extras dd{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.note{margin-top:40px;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:60ch}

/* invitación */
.invite{display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:center}
.plate--invite{aspect-ratio:1.18/1;max-height:calc(var(--vh) * 80);width:100%;cursor:grab;touch-action:pan-y}
.plate--invite:active{cursor:grabbing}
.plate__cap--hint{justify-content:flex-start;gap:10px}
.invite__list{display:grid;gap:12px;margin-top:28px;font-size:15px;line-height:1.4}
.invite__list li{position:relative;padding-left:22px;text-wrap:pretty}
.invite__list li::before{content:"";position:absolute;left:1px;top:.42em;width:6px;height:11px;border-radius:50%;background:var(--ink);transform:rotate(28deg)}
.invite .btn{margin-top:32px}

/* cierre */
.closing{padding-bottom:clamp(90px,10vw,150px)}
.closing__row{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);align-items:end;margin-top:clamp(40px,4vw,56px)}
.closing__row p{max-width:40ch;font-size:clamp(17px,1.35vw,20px);line-height:1.45;text-wrap:pretty}
.closing .actions{margin-top:0;justify-content:flex-end}

/* colofón */
.colophon{display:grid;grid-template-columns:auto 1fr auto;gap:var(--gutter);align-items:center;padding:28px var(--margin);border-top:1px solid var(--ink);font-size:13px;color:var(--ink-2)}
.colophon__links{display:flex;gap:24px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.colophon__links a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px}
.colophon__links a:hover{border-color:var(--ink)}

/* ---------- la información se arma al llegar ---------- */
.js .bld{transition:clip-path .9s var(--out),translate .9s var(--out),opacity .4s ease;transition-delay:calc(var(--bd,0ms) + var(--bi,0) * 90ms)}
.js .bld:not(.is-built){opacity:0;translate:0 18px;clip-path:inset(0 0 100% 0)}
.js .bld--line:not(.is-built){translate:0 0;clip-path:inset(0 100% 0 0)}
.js .bld.is-built{clip-path:inset(-40px)}

/* entrada de la portada */
@keyframes rise{from{opacity:0;translate:0 .3em}to{opacity:1;translate:0 0}}
.js .hero > *{animation:rise .9s var(--out) both}
.js .hero > :nth-child(2){animation-delay:.08s}
.js .hero > :nth-child(3){animation-delay:.16s}
.js .hero > :nth-child(4){animation-delay:.22s}
.js .hero > :nth-child(5){animation-delay:.3s}

/* ---------- celular (tamaños chicos) ---------- */
@media (max-width:1100px){
  .story{grid-template-columns:1fr 1fr}
  .include{grid-template-columns:1fr 1fr}
  .include__intro{grid-column:1 / -1}
  .plans{grid-template-columns:1fr}
  .plan + .plan{border-left:0}
  .plan{padding-left:0;padding-right:0}
  .extras{grid-template-columns:1fr}
  .steps{gap:28px}
}
@media (max-width:760px){
  :root{--bar:60px;--gutter:20px}
  .bar{grid-template-columns:auto 1fr}
  .bar__nav{display:none}
  .btn--sm{min-height:36px;padding:0 12px;font-size:11px}
  .story{display:block}
  .story__plate{position:sticky;top:var(--bar);height:auto;padding:22px 0 44px;z-index:2;
    background:var(--paper)}
  .story__plate::after{display:none}
  .plate--stage{aspect-ratio:1.18/1;max-height:calc(var(--vh) * 40)}
  .seal{left:-10px;bottom:52px;width:96px}
  .hero,.entry{min-height:0;padding:28px 0 56px}
  .hero{justify-content:flex-start}
  .display{font-size:clamp(38px,10.4vw,60px)}
  .lead{margin-top:20px}
  .actions{margin-top:28px}
  .actions .btn{flex:1 1 100%}
  .facts{grid-template-columns:1fr 1fr;margin-top:40px;gap:18px 20px}
  .entry{border-top:1px solid var(--rule)}
  .plate--shot{max-width:none}
  .sheet{padding-left:var(--margin);padding-right:var(--margin)}
  .sheet__head,.closing__row{grid-template-columns:1fr}
  .sheet__head .sheet__aside{margin-top:18px}
  .steps{grid-template-columns:1fr;gap:48px;margin-top:48px}
  .plate--step{aspect-ratio:4/3;padding:5%}
  .step:nth-child(2) .plate--step{aspect-ratio:4/5}
  .include{grid-template-columns:1fr}
  .plate--object{max-width:280px}
  .statement{font-size:clamp(26px,7.4vw,40px)}
  .invite{grid-template-columns:1fr;gap:56px}
  .plate--invite{max-height:none}
  .closing .actions{justify-content:flex-start}
  .closing .actions .btn{flex:1 1 100%}
  .colophon{grid-template-columns:1fr;gap:14px;align-items:start}
  .colophon__links{flex-wrap:wrap;gap:14px 20px}
  .x--tl{left:-14px;top:-14px}.x--tr{right:-14px;top:-14px}.x--bl{left:-14px;bottom:-14px}.x--br{right:-14px;bottom:-14px}
  .x{width:10px;height:10px}
}

/* ---------- sin 3D / movimiento reducido ---------- */
.no-webgl .plate__cap--hint{display:none}
.no-webgl .plate--invite{cursor:default}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero > *,.seal__ring{animation:none}
  .js .bld,.js .bld:not(.is-built){opacity:1;translate:none;clip-path:none;transition:none}
  .btn svg,.link svg,.bar__nav a::after{transition:none}
}

/* enlace a la página de ejemplo de cada plan (13 nov 2026) */
.plan__ejemplo{align-self:flex-start;min-height:44px;margin:-16px 0 12px}
.note a{color:inherit;text-underline-offset:3px}