/* ============================================================
   CRAW Studio — sistema visual (oscuro + naranja Arounda)
   ============================================================ */
@font-face{font-family:"Europa Grotesk";src:url("assets/fonts/europa-grotesk-sh-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat Light";src:url("assets/fonts/montserrat-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat Regular";src:url("assets/fonts/montserrat-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Scholar";src:url("assets/fonts/scholar-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --bg:#161413;
  --orange:#FF6D29;
  --brown:#453027;
  --grey:#BABABA;
  --ink:#FFFFFF;
  --beige:#EDE4D3;
  --line:rgba(255,255,255,.12);
  --edge:clamp(24px,5vw,64px);
  --max:1240px;
  --header-h:84px;
  --display:"Europa Grotesk",Arial,sans-serif;
  --serif:"Scholar",Georgia,"Times New Roman",serif;
  --body:"Montserrat Light",Arial,sans-serif;
  --body-regular:"Montserrat Regular",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%}
body{min-width:320px;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,ol,ul,figure{margin:0}
::selection{color:#161413;background:var(--orange)}

.wrap{width:min(calc(100% - var(--edge) * 2),var(--max));margin-inline:auto}
.skip-link{position:fixed;z-index:1000;top:10px;left:10px;padding:10px 14px;color:#161413;background:var(--orange);border-radius:6px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* ---------- Loader ---------- */
.site-loader{position:fixed;z-index:999;inset:0;display:grid;place-items:center;background:var(--bg);transition:opacity .5s ease,visibility .5s ease}
.site-loader img{width:clamp(90px,11vw,150px);height:auto;opacity:.92}
.site-loader span{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform-origin:left;animation:loader 1.05s cubic-bezier(.76,0,.24,1) both}
.site-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.no-js .site-loader{display:none}
@keyframes loader{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Fondo: gradiente cálido que fluye + arrastre ---------- */
.bgfield{position:fixed;inset:-6%;z-index:0;pointer-events:none;background-color:var(--bg);will-change:transform;
  background-image:
    radial-gradient(46% 56% at 72% 2%, rgba(255,109,41,.5), transparent 60%),
    radial-gradient(42% 50% at 96% 38%, rgba(226,90,40,.4), transparent 62%),
    radial-gradient(60% 60% at 24% 100%, rgba(138,58,30,.3), transparent 64%),
    radial-gradient(40% 44% at 86% 90%, rgba(255,109,41,.24), transparent 60%);
  background-size:170% 170%,160% 160%,180% 180%,150% 150%;
  animation:flow 42s ease-in-out infinite alternate}
@keyframes flow{
  0%{background-position:0% 0%,100% 0%,0% 100%,100% 100%}
  50%{background-position:18% 14%,82% 26%,14% 82%,86% 76%}
  100%{background-position:6% 24%,92% 8%,24% 92%,78% 94%}
}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(22,20,19,.55),rgba(22,20,19,.2) 30%,rgba(22,20,19,.35) 70%,rgba(22,20,19,.72))}
.grain{position:fixed;inset:-60px;z-index:2;pointer-events:none;opacity:.4;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-12px,9px)}40%{transform:translate(9px,-11px)}60%{transform:translate(-7px,-7px)}80%{transform:translate(11px,6px)}100%{transform:translate(0,0)}}

/* ---------- Header ---------- */
.site-header{position:fixed;z-index:100;top:0;left:0;width:100%;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  height:var(--header-h);padding-inline:var(--edge);
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease}
.site-header.is-scrolled{background:rgba(18,17,16,.55);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.brand{display:inline-flex;align-items:center;white-space:nowrap}
.brand-logo{height: 35px;px;width:auto;display:block}
.nav-pill{justify-self:center;display:flex;gap:4px;padding:7px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-pill a{padding:9px 16px;border-radius:999px;color:var(--grey);font-family:var(--body-regular);font-size:13px;letter-spacing:.01em;transition:color .2s,background .2s}
.nav-pill a:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.top-cta{justify-self:end}

/* ---------- Botones ---------- */
.glow-btn{position:relative;display:inline-flex;isolation:isolate;transition:transform .18s}
.glow-btn:hover{transform:translateY(-2px)}
.glow-btn>span{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;color:#fff;font-family:var(--display);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .25s,color .25s,border-color .25s}
.glow-btn:hover>span{background:#fff;color:#161413;border-color:transparent}
.glow-btn::after{content:"";position:absolute;inset:-2.5px;border-radius:999px;z-index:0;background:conic-gradient(from var(--a),#FF6D29,#FFB05A,#E23B2E,#8A3A1E,#FF6D29);filter:blur(6px);opacity:0;transition:opacity .35s;animation:spin 5s linear infinite}
.glow-btn::before{content:"";position:absolute;inset:-1.5px;border-radius:999px;z-index:0;padding:1.6px;background:conic-gradient(from var(--a),#FF6D29,#FFB05A,#E23B2E,#8A3A1E,#FF6D29);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s;animation:spin 5s linear infinite}
.glow-btn:hover::before{opacity:1}
.glow-btn:hover::after{opacity:.55}
@keyframes spin{to{--a:360deg}}

.btn-ghost{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--ink);font-family:var(--display);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;transition:border-color .25s,transform .18s}
.btn-ghost::after{content:"";position:absolute;inset:-2px;border-radius:999px;z-index:-1;padding:3px;background:conic-gradient(from var(--a),#FF6D29,#FFB05A,#E23B2E,#8A3A1E,#FF6D29);filter:blur(8px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .35s;animation:spin 5s linear infinite}
.btn-ghost::before{content:"";position:absolute;inset:-1px;border-radius:999px;z-index:-1;padding:1.3px;background:conic-gradient(from var(--a),#FF6D29,#FFB05A,#E23B2E,#8A3A1E,#FF6D29);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s;animation:spin 5s linear infinite}
.btn-ghost:hover{transform:translateY(-2px);border-color:transparent}
.btn-ghost:hover::before{opacity:1}
.btn-ghost:hover::after{opacity:.5}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Tipografía ---------- */
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:.92}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.h1{font-size:clamp(46px,6vw,104px)}
.h1 .serif{display:block;font-size:.6em;line-height:1.02;margin-top:.14em}
.h2{font-size:clamp(34px,4.4vw,72px);line-height:.96}
.h2 .serif{display:block;color:var(--ink);line-height:1;margin-top:.08em}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--orange)}
.lead{max-width:52ch;margin-top:22px;font-size:clamp(14px,1.05vw,16px);line-height:1.65;color:var(--grey)}
.lead b{color:var(--ink);font-family:var(--body-regular);font-weight:400}

/* ---------- Layout de secciones ---------- */
main{position:relative;z-index:3}
.section{position:relative;padding:clamp(90px,12vh,150px) 0}
.hero{min-height:100svh;display:flex;align-items:center;padding-top:120px}

/* ---------- Hero ---------- */
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero .h1{margin-top:22px}
.meta{margin-top:32px;display:flex;gap:28px;flex-wrap:wrap;font-size:12px;color:var(--grey)}
.meta b{display:block;font-family:var(--display);font-size:22px;color:var(--ink);text-transform:uppercase;margin-bottom:2px}
.hero__showcase{position:relative;justify-self:center}
.hero__note{position:absolute;right:6px;top:-14px;z-index:3;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.cover-card{position:relative;width:min(360px,80vw);aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#0e0d0c;box-shadow:0 44px 96px -36px rgba(0,0,0,.85)}
.cover-card img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);backface-visibility:hidden}

/* Mazo (baraja) del hero */
.deck{position:relative;width:min(360px,80vw);aspect-ratio:3/4}
.deck .cover-card{position:absolute;inset:0;width:auto;transform-origin:center;transition:transform 1.15s cubic-bezier(.16,1,.3,1),box-shadow .4s;will-change:transform}
/* inicial: apiladas cerca de la esquina inferior derecha (sutil) */
.deck__card{transform:translate(24%,30%) rotate(4deg) scale(.94)}
.deck__card--1{z-index:3}
.deck__card--2{z-index:2}
.deck__card--3{z-index:1}
/* desplegado: sutil, MÁS POSICIÓN que rotación; restaurante --1 abajo/al frente = viajera */
.deck.is-deployed .deck__card--3{transform:translate(-13%,-11%) rotate(-4deg) scale(.92);transition-delay:0s}
.deck.is-deployed .deck__card--2{transform:translate(-7%,-6%) rotate(-2deg) scale(.955);transition-delay:.11s}
.deck.is-deployed .deck__card--1{transform:rotate(1.5deg);transition-delay:.22s}
.deck.is-deployed .deck__card--1:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 48px 120px -28px rgba(255,109,41,.42);transition-delay:0s}
/* colapso al hacer scroll (apila en la del frente para viajar) */
/* colapso al bajar: sin transición CSS (lo maneja el JS ligado al scroll); las traseras se ALINEAN detrás del frente, sin desvanecerse */
.deck.is-stacked .cover-card{transition:none}
.cover-card--hero{transform:rotate(2deg);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.cover-card--hero:hover{transform:rotate(0);box-shadow:0 44px 120px -30px rgba(255,109,41,.4)}
.cover-tag{position:absolute;left:14px;bottom:14px;padding:8px 13px;border-radius:999px;background:rgba(22,20,19,.55);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--display);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
/* ciclo del hero: la baraja avanza de verdad (JS rota nodos por slots); cada portada necesita su etiqueta y voluntad de animar */
.deck .deck__card{will-change:transform,opacity}

/* ---------- Cabecera de sección ---------- */
.section-head{max-width:760px}
.section-head .h2{margin-top:16px}
.section-sub{margin-top:18px;max-width:60ch;font-size:clamp(14px,1vw,15px);line-height:1.6;color:var(--grey)}

/* ---------- Plantillas (parada de lectura compacta) ---------- */
/* centrado en el ÁREA VISIBLE (viewport menos el header fijo): padTop - padBottom == header */
.templates{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,1.8vh,24px);
  padding-top:calc(var(--header-h) + clamp(6px,1.2vh,18px));padding-bottom:clamp(6px,1.2vh,18px)}
.templates__head{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px}
/* nombre + abanico + estado agrupados (nombre arriba, estado abajo, pegados). Sin align-items:center para que el coverflow ocupe todo el ancho; el nombre/estado se centran con text-align */
.cf-block{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,18px)}
.templates__head .h2{margin-top:2px;font-size:clamp(26px,2.9vw,44px)}
.cf-pill{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--display);font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--grey);cursor:default}
.cf-pill i{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px 1px rgba(255,109,41,.7)}

/* ---------- Coverflow ---------- */
/* --cf-h = altura del stage; el ancho de la tarjeta se deriva de ahí para que SIEMPRE quepa dentro (sin desbordar sobre el pill/hint) */
/* --cf-h atado al alto (para caber vertical) Y al ancho (para que el abanico no desborde en pantallas angostas) */
.coverflow{position:relative;margin-top:0;--cf-h:min(clamp(260px,45vh,410px),34vw)}
/* perspective en el propio stage (cards son hijas directas) → hit-testing/getBoundingClientRect correctos */
.cf-stage{position:relative;width:100%;max-width:1260px;margin-inline:auto;height:var(--cf-h);perspective:1600px;perspective-origin:50% 44%}
.cf-card{position:absolute;top:50%;left:50%;width:calc(var(--cf-h) * .72);aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  background:#0e0d0c;box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
  transform-style:preserve-3d;transform:translate(-50%,-50%);
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .6s ease,box-shadow .55s ease;will-change:transform,opacity}
/* despliegue ligado al scroll: sin transición para que siga el scroll 1:1 (las laterales entran desde afuera hacia el centro) */
.cf-stage.is-deploying .cf-card{transition:box-shadow .55s ease}
.cf-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.04);backface-visibility:hidden}
.cf-card::after{content:"";position:absolute;inset:0;background:rgba(14,13,12,.5);opacity:0;transition:opacity .3s}
.cf-card:not(.is-active)::after{opacity:.55}
/* glow SOLO en hover (JS pone .is-hover en la portada bajo el mouse, detectada por sus límites reales) */
.cf-card.is-hover{box-shadow:0 44px 96px -26px rgba(255,109,41,.6),0 30px 70px -34px rgba(0,0,0,.9)}
.cf-card.is-hover::after{opacity:0}
.cf-card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.cf-card--soon img{filter:grayscale(.15)}

.cf-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;display:grid;place-items:center;border-radius:999px;color:var(--ink);border:1px solid var(--line);background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s,border-color .2s}
.cf-prev{left:clamp(4px,3vw,40px)}
.cf-next{right:clamp(4px,3vw,40px)}
.cf-nav:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}

/* Rótulo sobre la portada central (nombre + estado), estilo editorial */
/* nombre ARRIBA del abanico + estado ABAJO (centrados, Europa Grotesk, sombra suave color marca, animación de entrada) */
.cf-name{margin:0;text-align:center;font-family:var(--display);font-size:clamp(22px,2.7vw,36px);text-transform:uppercase;letter-spacing:.015em;line-height:1;color:var(--ink);text-shadow:0 2px 13px rgba(22,20,19,.5);will-change:transform}
.cf-name-in{display:inline-block;animation:capIn .6s cubic-bezier(.22,1,.36,1) both}
.cf-status{margin:0;text-align:center;font-family:var(--body-regular);font-weight:400;font-size:clamp(11px,1.05vw,13px);letter-spacing:.16em;text-transform:uppercase;color:var(--orange);animation:capIn .55s cubic-bezier(.22,1,.36,1) .07s both}
.cf-status.is-soon{color:var(--grey)}
@keyframes capIn{0%{opacity:0;transform:translateY(14px);filter:blur(6px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}

/* Hint de avance (baja / clic) */
.cf-hint{margin:0 auto;display:inline-flex;flex-direction:column;align-items:center;gap:5px;color:var(--grey);font-family:var(--body-regular);font-size:11.5px;letter-spacing:.04em;opacity:.5;transition:opacity .3s,color .3s;cursor:pointer}
.cf-hint:hover{opacity:.9;color:var(--ink)}
.cf-hint svg{animation:hintbob 2.1s ease-in-out infinite}
.templates.is-armed .cf-hint{opacity:1;color:var(--orange)}
.templates.is-armed .cf-hint svg{animation-duration:.55s}
@keyframes hintbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- Editor ---------- */
.editor__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.editor .h2{margin-top:16px}
.steps{margin-top:30px;padding:0;list-style:none;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.steps__n{font-family:var(--display);font-size:13px;color:var(--orange);padding-top:2px}
.steps strong{display:block;font-family:var(--display);font-size:clamp(15px,1.2vw,19px);text-transform:uppercase;letter-spacing:.01em}
.steps p{margin-top:5px;color:var(--grey);font-size:clamp(12px,.9vw,14px);line-height:1.5}
.editor__preview{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.editor__preview::before{content:"";position:absolute;inset:-20% -10% auto;height:60%;z-index:-1;background:radial-gradient(60% 100% at 50% 0,rgba(255,109,41,.4),transparent 70%);filter:blur(50px)}
/* Editor: píldora "Probar editor" + preview clicable (abren el probador) */
.editor__previewwrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.editor__try{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border:0;border-radius:999px;
  background:var(--orange);color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(255,109,41,.55);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.editor__try:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(255,109,41,.72)}
.editor__try-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:tryPulse 1.8s ease-out infinite}
@keyframes tryPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.editor__preview{cursor:pointer;width:100%;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.editor__preview:hover{transform:translateY(-3px);box-shadow:0 50px 100px -40px rgba(0,0,0,.95)}
.editor__preview-hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%,8px);z-index:2;
  padding:7px 14px;border-radius:999px;background:rgba(20,18,17,.82);color:#fff;font-size:12px;font-weight:600;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.editor__preview:hover .editor__preview-hint{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.editor__try-dot{animation:none}}

/* ---------- Ventajas ---------- */
.value .h2{margin-top:16px;max-width:20ch}
.value__lead{margin-top:22px}
.value__grid{margin-top:clamp(40px,4vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v-card{padding:24px 22px 24px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);min-height:0;display:flex;flex-direction:column;transition:border-color .3s,background .3s}
.v-card:hover{border-color:rgba(255,109,41,.5);background:rgba(255,109,41,.05)}
.v-card__n{font-family:var(--display);font-size:12px;color:var(--orange)}
.v-card h3{margin-top:auto;font-family:var(--display);font-size:clamp(20px,2vw,30px);text-transform:uppercase;letter-spacing:.01em;line-height:.98}
.v-card p{margin-top:12px;color:var(--grey);font-size:13px;line-height:1.55}

/* ---------- Cierre ---------- */
.closing{text-align:center;padding-top:clamp(96px,14vh,160px);padding-bottom:clamp(52px,7vh,72px)}
.closing__inner{display:flex;flex-direction:column;align-items:center}
.closing .h2{margin-top:16px;max-width:16ch}
.closing__actions{margin-top:38px;justify-content:center}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:3;border-top:1px solid var(--line);padding-block:clamp(30px,4vw,44px);background:rgba(18,17,16,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.site-footer__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;font-size:12px;color:var(--grey)}
.brand--footer .brand-logo{height:35px}
.site-footer__copy{justify-self:end}

/* ---------- Reveals ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.js .reveal.is-visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero__grid,.editor__grid{grid-template-columns:1fr;gap:40px}
  .editor__grid{direction:ltr}
  .editor__previewwrap{order:-1}
  .value__grid{grid-template-columns:1fr}
  .v-card{min-height:0}
}
@media(max-width:760px){
  :root{--header-h:66px}
  .site-header{grid-template-columns:1fr auto;gap:10px}
  .nav-pill{display:none}
  .hero{padding-top:96px}
  .cf-stage{height:clamp(340px,80vw,440px)}
  .cf-card{width:min(58vw,240px)}
  .site-footer__inner{grid-template-columns:1fr;text-align:center;gap:8px}
  .site-footer__copy{justify-self:center}
}
@media(prefers-reduced-motion:reduce){
  .bgfield,.grain,.glow-btn::before,.glow-btn::after,.btn-ghost::before,.btn-ghost::after{animation:none}
  .js .reveal{transition-duration:.2s}
}

/* ============================================================
   Portada viajera (story: hero → coverflow → editor)
   ============================================================ */
.travel-cover{position:fixed;top:0;left:0;z-index:40;pointer-events:none;opacity:0;visibility:hidden;
  will-change:transform,opacity;transform-origin:top left;backface-visibility:hidden}
.travel-cover.is-on{opacity:1;visibility:visible}
.travel-face{position:absolute;inset:0;z-index:1;border-radius:18px;overflow:hidden;background:#0e0d0c;box-shadow:0 44px 96px -36px rgba(0,0,0,.85)}
.travel-face img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
/* capas de la pila (se ven detrás de la portada y se desvanecen al llegar) */
.travel-layer{position:absolute;inset:0;border-radius:18px;background:#18140f;box-shadow:0 30px 70px -34px rgba(0,0,0,.85);opacity:var(--stack,1)}
.travel-layer--2{transform:translate(-5%,4%) scale(.965)}
.travel-layer--3{transform:translate(-10%,8%) scale(.93)}
/* badge "+" al soltar en el editor (estás agregando la plantilla) */
.travel-plus{position:absolute;top:-16px;right:-16px;width:54px;height:54px;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-family:var(--body-regular);font-weight:400;font-size:40px;line-height:0;padding-bottom:4px;
  box-shadow:0 8px 26px rgba(0,0,0,.42);opacity:0;transform:scale(.5);z-index:3;
  transition:opacity .25s ease,transform .38s cubic-bezier(.34,1.56,.64,1)}
.travel-cover.is-dropping .travel-plus{opacity:1;transform:scale(1)}
/* mientras la portada viaja, el editor recibe un glow de "drop" */
.editor__preview.is-dropping::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(255,109,41,.6);opacity:0;animation:dropPulse .6s ease}
@keyframes dropPulse{0%{opacity:0}40%{opacity:1}100%{opacity:0}}

/* ---------- Probador: overlay del editor real ---------- */
html.probador-open,html.probador-open body{overflow:hidden}
.probador-modal{position:fixed;inset:0;z-index:200;background:#0e0b09;opacity:0;transition:opacity .4s ease}
.probador-modal.is-open{opacity:1}
.probador-modal[hidden]{display:none}
.probador-iframe{width:100%;height:100%;border:0;display:block;background:#0e0b09}
.probador-close{position:fixed;top:14px;right:14px;z-index:210;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(20,16,14,.72);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:background .2s ease,color .2s ease,transform .2s ease}
.probador-close:hover{background:#ff6d29;color:#161413;border-color:#ff6d29;transform:scale(1.06)}
.probador-close:focus-visible{outline:2px solid #ff6d29;outline-offset:2px}