/* ============================================================
   Caverna Tecnológica — styles.css
   Paleta y tipografía según el brief de marca v1.0
   ============================================================ */

/* ---- fuentes AUTOALOJADAS ----
   Antes venían de fonts.googleapis.com / fonts.gstatic.com (Google) y de
   api/cdn.fontshare.com. Eso significaba entregar la IP del visitante a dos
   terceros en la PRIMERA carga, antes del banner de cookies, y contradecía su
   propia frase ("no se activa ninguna hasta que lo aceptes"). Servidas desde
   nuestro dominio, la web no hace ni una petición externa sin consentimiento.

   Solo los pesos que el sitio usa de verdad: Clash Display 500/600 (display),
   Satoshi 400/500/700 (cuerpo) y JetBrains Mono 400/500 (mono). Nada de
   familias enteras.

   JetBrains Mono es VARIABLE: 400 y 500 apuntan al mismo archivo y el navegador
   lo descarga una sola vez. De sus seis subconjuntos se conservan latin y
   latin-ext; cirílico, griego y vietnamita se descartan porque el sitio es solo
   en español (los acentos y la ¿ ¡ están en latin, U+0000-00FF). Las de
   Fontshare no traen unicode-range: son fuentes completas, no subdivididas.

   font-display:swap en todas: el texto se ve desde el primer instante con la
   fuente de reserva y se cambia al cargar, sin bloquear el render. */

@font-face{
  font-family:'Clash Display';
  src:url('/assets/fonts/clash-display-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Clash Display';
  src:url('/assets/fonts/clash-display-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}

@font-face{
  font-family:'Satoshi';
  src:url('/assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('/assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('/assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --obs:#0B0C10; --deep:#07080B; --slate:#161A21; --stone:#22272F;
  --amber:#FF6A2B; --cyan:#35E0D0; --ivory:#ECE5D8; --muted:#8A857A;
  --dim:#5d5a54; --carve:#4a4842;
  --display:'Clash Display','Fraunces',Georgia,serif;
  --body:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--ivory);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,blockquote,figure{margin:0}
ul{list-style:none;padding:0}
a{color:var(--cyan);text-decoration:none;transition:color .3s ease}
a:hover,a:focus-visible{color:var(--amber)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::selection{background:var(--amber);color:var(--obs)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--amber);color:var(--obs);padding:12px 18px}

/* --- atmósfera de cueva --- */
.vignette,.grain,.torch{position:fixed;inset:0;pointer-events:none}
.vignette{z-index:45;background:radial-gradient(120% 95% at 50% 42%,rgba(0,0,0,0) 38%,rgba(0,0,0,.45) 82%,rgba(0,0,0,.7) 100%)}
.grain{z-index:46;opacity:.055;mix-blend-mode:overlay;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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.torch{inset:auto;top:0;left:0;width:760px;height:760px;margin:-380px 0 0 -380px;z-index:60;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(255,140,70,.09) 0%,rgba(255,106,43,.045) 28%,rgba(53,224,208,.022) 52%,rgba(0,0,0,0) 72%)}
.rail{position:fixed;left:22px;bottom:26px;z-index:55;display:none;flex-direction:column;gap:10px;font-family:var(--mono)}
.rail__track{width:1px;height:120px;position:relative;background:linear-gradient(180deg,rgba(53,224,208,0) 0%,rgba(53,224,208,.35) 100%)}
.rail__dot{position:absolute;left:-2px;top:0;width:5px;height:5px;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.rail__label{font-size:10px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.rail__value{font-size:12px;letter-spacing:.08em;color:var(--cyan)}

/* --- tipografía --- */
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--amber);box-shadow:0 0 10px var(--amber)}
h1,.h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.9vw,74px);line-height:1.02;letter-spacing:-.008em;color:var(--ivory);text-wrap:pretty}
.h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,50px);line-height:1.06;letter-spacing:-.006em;color:var(--ivory);text-wrap:pretty}
.h2--sm{font-size:clamp(28px,3.3vw,46px)}
.h3{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.22;color:var(--ivory)}
em{font-style:normal;color:var(--amber)}
em.cool{color:var(--cyan)}
em.quiet{color:var(--muted)}
h1 em{text-shadow:0 0 44px rgba(255,106,43,.35)}
p{color:var(--muted);text-wrap:pretty}
.lead{font-size:17px;line-height:1.68}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim)}

/* --- botones --- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-weight:700;font-size:15px;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
.btn--primary{background:var(--amber);color:var(--obs)}
.btn--primary:hover,.btn--primary:focus-visible{color:var(--obs);box-shadow:0 0 40px rgba(255,106,43,.5);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--stone);background:rgba(22,26,33,.55);color:var(--ivory);font-weight:500}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ivory);border-color:var(--cyan);box-shadow:0 0 30px rgba(53,224,208,.18)}
.btn--ghost svg{color:var(--cyan)}
.btn--sm{padding:13px 22px;font-size:14px;font-weight:500}

/* --- cabecera --- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,8,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(34,39,47,.9)}
.nav{position:relative;height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ivory);font-family:var(--display);font-weight:600;font-size:17px}
.brand:hover{color:var(--ivory)}
.sigil{position:relative;width:24px;height:24px;flex:0 0 auto}
.sigil::before{content:"";position:absolute;inset:0;background:var(--slate);border:1px solid var(--stone);transform:rotate(45deg)}
.sigil::after{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{font-size:14px;color:var(--muted)}
.navlinks a:hover{color:var(--ivory)}
.nav-cta{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory);border:1px solid var(--stone);padding:11px 18px;background:rgba(22,26,33,.6)}
.nav-cta:hover{color:var(--obs);background:var(--amber);border-color:var(--amber)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--stone);color:var(--ivory)}

/* --- hero --- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid #14171D;
  background:radial-gradient(120% 90% at 78% 40%,#101520 0%,#0A0B0F 45%,#07080B 100%)}
.strata{position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(178deg,rgba(236,229,216,.022) 0 1px,rgba(0,0,0,0) 1px 46px)}
.cave-top,.cave-bottom{position:absolute;left:0;right:0;z-index:3;pointer-events:none}
.cave-top{top:0;height:160px;background:linear-gradient(180deg,#0D1118 0%,#070A0E 88%,#05070A 100%);
  clip-path:polygon(0 0,100% 0,100% 26%,96% 52%,92% 18%,88% 44%,84% 66%,79% 30%,74% 55%,69% 22%,64% 62%,58% 34%,52% 68%,46% 38%,40% 58%,34% 24%,28% 50%,22% 64%,17% 32%,12% 54%,6% 22%,0 44%)}
.cave-bottom{bottom:0;height:120px;background:linear-gradient(0deg,#0A0C11 0%,#070A0E 100%);
  clip-path:polygon(0 100%,100% 100%,100% 48%,94% 22%,89% 56%,84% 34%,78% 62%,72% 30%,66% 52%,60% 20%,54% 58%,47% 36%,41% 66%,35% 32%,29% 54%,22% 26%,16% 60%,10% 38%,4% 56%,0 30%)}
.hero__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:40px;align-items:center;min-height:min(88vh,860px)}
.hero__copy{position:relative;z-index:4;padding:130px 0 100px}
.hero__copy h1{margin-top:26px}
.hero__copy .lead{margin-top:26px;max-width:540px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__note{margin-top:28px}
.stage{position:relative;z-index:4;height:min(78vh,720px);min-height:420px}
.stage caverna-tablet,.stage .stage__poster{position:absolute;inset:0}
.stage__poster{display:grid;place-items:center;transition:opacity .9s ease;background:
  radial-gradient(60% 50% at 50% 58%,rgba(255,106,43,.18) 0%,rgba(255,106,43,0) 70%),
  repeating-linear-gradient(135deg,#13171E 0 10px,#0D1015 10px 20px)}
.stage__poster span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stage__caption{position:absolute;left:0;right:0;bottom:18px;max-width:400px;font-family:var(--mono);font-size:11px;line-height:1.75;letter-spacing:.04em;color:var(--dim)}
.stage__caption b{color:var(--ivory);font-weight:400}

/* --- secciones (narrativa: de la caverna a la luz) --- */
/* Aquí vivía `section{content-visibility:auto;contain-intrinsic-size:auto 700px}`.
   Se quitó porque es incompatible con la navegación por anclas de este sitio:
   el navegador estimaba 700px por sección sin pintar, así que al aterrizar en
   /#contacto (o en cualquier #ancla del menú desde otra página) el salto caía
   fuera de sitio — medido: 242px de desvío en escritorio. Todo el menú y los
   CTA son anclas, así que la navegación pesa más que ese ahorro de pintado. */
.section{padding:104px 0}
.trust{background:#0A0B0F;border-bottom:1px solid #14171D}
.trust .wrap{padding-top:44px;padding-bottom:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:center}
.trust p{font-size:14.5px;max-width:340px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--slate)}
.stat{background:#0A0B0F;padding:16px 20px}
.stat b{display:block;font-family:var(--display);font-size:26px;font-weight:600;color:var(--ivory)}
.stat b.hot{color:var(--amber)}
.stat span{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.problem{background:var(--obs);border-bottom:1px solid #14171D}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:start}
.split__aside{border-left:1px solid var(--stone);padding-left:34px}

.solutions{background:var(--obs);border-bottom:1px solid #14171D}
.section__head{max-width:760px}
.section__head .h2{margin-top:22px}
.section__head .lead{margin-top:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--slate);margin-top:56px}
.card{position:relative;padding:38px 32px 32px;background:linear-gradient(180deg,#101319 0%,#0A0C11 100%);transition:box-shadow .35s ease,transform .35s ease}
.card:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(53,224,208,.35),0 24px 60px -30px rgba(53,224,208,.35)}
.card__top{display:flex;align-items:center;justify-content:space-between}
.card h3{margin:26px 0 0;font-family:var(--display);font-weight:500;font-size:22px;line-height:1.2;color:var(--ivory)}
.card p{margin:14px 0 26px;font-size:15.5px;line-height:1.66}
.go{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.tally{display:flex;gap:4px;align-items:flex-end}
.tally i{display:block;width:2px;height:15px;background:var(--carve)}
.tally i:last-child:not(:only-child){transform:rotate(14deg)}

.why{background:#0D0F14;border-bottom:1px solid #14171D}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;margin-top:56px}
.why-item{border-top:1px solid var(--stone);padding-top:22px}
.why-item h3{margin:18px 0 8px;font-family:var(--display);font-weight:500;font-size:19px;color:var(--ivory)}
.why-item p{font-size:15px;line-height:1.62}

.folio{background:#0E1116;border-bottom:1px solid #171B22;padding-top:104px}
.folio__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:30px}
.folio__head .h2{margin-top:22px}
.folio__nav{display:flex;gap:10px}
.folio__nav button{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--stone);background:rgba(22,26,33,.6);color:var(--ivory);transition:border-color .3s,color .3s}
.folio__nav button:hover{border-color:var(--cyan);color:var(--cyan)}
.folio__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:28px;scrollbar-width:none;max-width:var(--wrap);margin:0 auto;padding:16px 28px 104px}
.folio__track::-webkit-scrollbar{display:none}
.folio-card{flex:0 0 clamp(260px,34vw,420px);scroll-snap-align:start;transition:transform .35s ease}
.folio-card:hover{transform:translateY(-4px)}
.shot{aspect-ratio:16/10;width:100%;object-fit:cover;border:1px solid var(--stone);background:repeating-linear-gradient(135deg,#13171E 0 9px,#0D1015 9px 18px);box-shadow:0 30px 70px -40px rgba(53,224,208,.4)}
.folio-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding-top:14px}
.folio-card strong{font-family:var(--display);font-weight:500;font-size:17px;color:var(--ivory)}
.folio-card span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.steps{background:#0F1218;border-bottom:1px solid #171B22}
.steps__list{margin-top:52px}
.step{display:grid;grid-template-columns:clamp(0px,8vw,96px) clamp(46px,7vw,84px) 1fr;gap:28px;align-items:start;padding:30px 0;border-top:1px solid #1B2027;transition:background .35s ease}
.step:hover{background:rgba(255,106,43,.035)}
.step__depth{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#4f4c47;padding-top:8px}
.step__num{font-family:var(--display);font-weight:600;font-size:38px;line-height:1;color:var(--stone)}
.step__body{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;align-items:start}
.step__body p{font-size:15.5px;line-height:1.68}

.founder{background:#11151B;border-bottom:1px solid #1B2027}
.founder .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px;align-items:center}
/* recorte con fondo transparente: sin marco ni recorte 4:5, que le cortaría
   los hombros. Se apoya en un halo ámbar como el resto de ilustraciones. */
.founder__photo{position:relative;max-width:360px;width:100%;aspect-ratio:1/1;object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(255,106,43,.16))}
.founder blockquote{margin-top:26px;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.6vw,36px);line-height:1.22;letter-spacing:-.004em;color:var(--ivory);text-wrap:pretty}
.founder .who{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--dim)}
.founder .who b{color:var(--ivory);font-weight:500}

.brands{background:#12161C;border-bottom:1px solid #1B2027}
.brand-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:48px}
.brand-card{border:1px solid var(--stone);background:linear-gradient(180deg,var(--slate) 0%,#101318 100%);padding:38px 34px;transition:border-color .35s,box-shadow .35s}
.brand-card:hover{border-color:var(--amber);box-shadow:0 0 60px -20px rgba(255,106,43,.4)}
.brand-card h3{font-family:var(--display);font-weight:600;font-size:28px;color:var(--ivory)}
.brand-card p{margin:14px 0 28px;font-size:15.5px;line-height:1.66}
.brand-card .btn--ghost:hover{border-color:var(--amber);color:var(--amber)}

.testi{background:#14181F;border-bottom:1px solid #1F242C}
.testi__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:34px}
.testi__top .h2{max-width:680px}
.testi__rating{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.testi__rating b{color:var(--amber)}
.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:48px}
.review{display:flex;flex-direction:column;gap:16px;border:1px solid var(--stone);background:#101318;padding:30px 28px;transition:border-color .35s}
.review:hover{border-color:var(--cyan)}
.review__stars{color:var(--amber);font-size:14px;letter-spacing:.22em}
.review p{flex:1;font-size:15.5px;line-height:1.7;color:var(--ivory)}
.review__who{display:flex;align-items:center;gap:12px;padding-top:6px;border-top:1px solid #1B2027}
.review__avatar{width:36px;height:36px;flex:0 0 auto;object-fit:cover;display:grid;place-items:center;border:1px solid var(--stone);font-family:var(--mono);font-size:12px;color:var(--cyan)}
.review__who b{display:block;font-size:14px;font-weight:500;color:var(--ivory)}
.review__who span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

.faq{background:var(--slate);border-bottom:1px solid var(--stone)}
.faq .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:56px;align-items:start}
.faq .h2{position:sticky;top:100px}
details{border-top:1px solid var(--stone);padding:22px 0}
summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;color:var(--ivory)}
summary::-webkit-details-marker{display:none}
.chev{flex:0 0 auto;font-family:var(--mono);font-size:20px;color:var(--cyan);transition:transform .3s,color .3s}
details[open] .chev{transform:rotate(45deg);color:var(--amber)}
details p{margin-top:16px;font-size:15.5px;line-height:1.7;max-width:640px}

.contact{position:relative;overflow:hidden;text-align:center;background:
  radial-gradient(90% 130% at 50% 118%,rgba(255,106,43,.28) 0%,rgba(255,106,43,.07) 38%,rgba(27,32,40,0) 70%),#1B2028}
.cave-mouth{position:absolute;top:0;left:0;right:0;height:150px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#0F1218 0%,#12161C 70%,rgba(18,22,28,0) 100%);
  clip-path:polygon(0 0,100% 0,100% 30%,95% 58%,90% 24%,85% 50%,80% 70%,74% 34%,68% 60%,62% 26%,56% 64%,50% 38%,44% 70%,38% 30%,32% 56%,26% 22%,20% 52%,14% 66%,8% 34%,3% 56%,0 28%)}
.contact .wrap{position:relative;padding-top:130px;padding-bottom:140px}
.contact .eyebrow{justify-content:center;font-size:11px;letter-spacing:.22em}
.contact .h2{margin:24px auto 0;max-width:900px;font-size:clamp(32px,4.4vw,64px)}
.contact p{margin:22px auto 0;max-width:620px;font-size:17.5px;color:#a8a29a}
.contact__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:38px}
.contact .btn--ghost{border-color:#3a4048}
.nap{margin-top:44px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
/* --- destinos de ancla ---
   La cabecera es pegajosa (70px): sin este margen taparía el arranque de la
   sección a la que se salta. El destino de los CTA (#contacto) además recibe
   el foco al llegar, para que el siguiente tabulador caiga en sus botones;
   sin contorno, porque el contenedor no es interactivo y los botones ya
   tienen el suyo. */
section[id]{scroll-margin-top:70px}
.contact[tabindex]:focus{outline:none}

.site-footer{background:var(--obs);border-top:1px solid var(--stone)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:44px;padding-top:70px;padding-bottom:34px}
.foot-grid p{margin-top:18px;max-width:330px;font-size:14.5px;line-height:1.62}
.foot-grid h3{margin-bottom:16px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.foot-grid ul{display:flex;flex-direction:column;gap:11px}
.foot-grid ul a{font-size:14.5px;color:var(--muted)}
.foot-grid ul a:hover{color:var(--ivory)}
.copyright{border-top:1px solid #14171D;padding:22px 28px 40px;max-width:var(--wrap);margin:0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#4f4c47}

/* --- revelado al hacer scroll --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.16,.8,.28,1),transform .85s cubic-bezier(.16,.8,.28,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal,.no-motion .reveal{opacity:1;transform:none}

/* --- responsive --- */
@media (min-width:1181px){ .rail{display:flex} }
@media (max-width:900px){
  .burger{display:flex}
  .navlinks{position:absolute;top:70px;left:-28px;right:-28px;display:none;flex-direction:column;align-items:flex-start;gap:0;padding:8px 28px 20px;background:rgba(7,8,11,.97);border-bottom:1px solid var(--stone)}
  .navlinks.open{display:flex}
  .navlinks a{width:100%;padding:14px 0;font-size:16px;border-bottom:1px solid #14171D}
  .nav-cta{margin-top:14px;border-bottom:1px solid var(--stone)}
  .hero__copy{padding:110px 0 80px}
  .stage{height:62vh;min-height:360px}
  .split,.faq .wrap,.founder .wrap{gap:36px}
  .faq .h2{position:static}
  .section{padding:80px 0}
  .contact .wrap{padding-top:100px;padding-bottom:110px}
}
@media (max-width:620px){
  .wrap{padding:0 20px}
  .step{grid-template-columns:52px 1fr;gap:16px}
  .step__depth{grid-column:1 / -1;padding-top:0}
  .folio__track{padding-left:20px;padding-right:20px;scroll-padding-inline-start:20px}
  .cave-top{height:110px}
  .btn{width:100%;justify-content:center}
  .hero__cta,.contact__cta{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .torch{display:none}
}
@media print{ .torch,.vignette,.grain,.rail,.site-header{display:none} body{background:#fff;color:#000} }

/* ============================================================
   Blog — índice de artículos (/blog/)
   ============================================================ */
:root{--stone-dark:#0E1116}   /* fondo de las miniaturas que no cargan */

.navlinks a[aria-current]{color:var(--ivory)}
.blog-index .section__head h1{margin-top:22px}
.blog-index .section__head .lead{margin-top:18px}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.post-card{background:var(--slate);border:1px solid rgba(138,133,122,.16);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .25s}
.post-card:hover{transform:translateY(-5px);border-color:rgba(255,106,43,.5);box-shadow:0 16px 44px rgba(0,0,0,.45)}
.post-card__img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--stone-dark)}
.post-card__img--ph{display:block}
.post-card__body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-card__cat{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.post-card__title{font-family:var(--display);font-size:1.15rem;line-height:1.25;margin-bottom:10px;color:var(--ivory);font-weight:500}
.post-card__excerpt{color:var(--muted);font-size:.95rem;flex:1;margin-bottom:16px}
.post-card__meta{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.post-card__more{color:var(--amber);font-weight:600}
.post-grid__msg{grid-column:1 / -1;color:var(--muted);font-size:15px}

/* Artículo aún no migrado: la ficha se ve, pero no es un enlace. Sin cursor de
   mano, sin elevación al pasar por encima: nada debe insinuar que es clicable. */
.post-card--soon{cursor:default;border-style:dashed;border-color:rgba(138,133,122,.22)}
.post-card--soon:hover{transform:none;border-color:rgba(138,133,122,.22);box-shadow:none}
.post-card--soon .post-card__img{opacity:.55;filter:saturate(.6)}
.post-card--soon .post-card__title{color:var(--muted)}
.post-card__soon{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid rgba(138,133,122,.3);border-radius:999px;padding:3px 10px}

/* Paginación del índice: solo se pinta a partir de 10 fichas. */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:44px}
.pager__btn{font-family:var(--mono);font-size:.78rem;line-height:1;min-width:40px;min-height:40px;
  padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--muted);border:1px solid rgba(138,133,122,.28);
  border-radius:10px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.pager__btn:hover:not([disabled]),.pager__btn:focus-visible{color:var(--ivory);border-color:rgba(255,106,43,.55)}
.pager__btn[disabled]{opacity:.35;cursor:default}
.pager__btn[aria-current="page"]{color:var(--obs);background:var(--amber);border-color:var(--amber);font-weight:700;cursor:default}
.pager__gap{font-family:var(--mono);font-size:.78rem;color:var(--dim);padding:0 2px}
/* el contenedor recibe foco al cambiar de página; el anillo lo pinta :focus-visible */
.post-grid:focus{outline:none}
/* puente del blog hacia las páginas de solución */
.blog-servicios{margin-top:40px;font-size:15.5px;line-height:1.7;max-width:760px}
.blog-servicios a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,106,43,.4)}
.blog-servicios a:hover,.blog-servicios a:focus-visible{color:var(--ivory);text-decoration-color:var(--ivory)}

/* la tarjeta se revela con el mismo patrón que el resto del sitio */
.post-card.reveal{opacity:0;transform:translateY(22px)}
.post-card.reveal.in{opacity:1;transform:none}

@media(max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .post-card.reveal{opacity:1;transform:none}
  .post-card:hover{transform:none}
}

/* ============================================================
   Blog — plantilla de artículo (/blog/articulos/)
   Columna de lectura estrecha; el resto hereda del sitio.
   ============================================================ */
.post-wrap{max-width:776px;padding-top:56px;padding-bottom:8px}

/* --- miga de pan --- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--amber)}
.breadcrumb span[aria-hidden]{color:var(--carve)}
.breadcrumb [aria-current="page"]{color:var(--dim);overflow-wrap:anywhere}

/* --- cabecera del artículo --- */
.post-header{margin-top:30px}
.post-header h1{margin-top:20px;font-size:clamp(32px,4.2vw,52px)}
.post-meta{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)}

/* --- portada --- */
.post-cover{margin-top:36px}
.post-cover img,.post-cover__ph{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid rgba(138,133,122,.16);background:var(--stone-dark)}

/* --- tabla de contenido --- */
.toc{margin-top:44px;padding:24px 26px;background:var(--slate);border:1px solid rgba(138,133,122,.16);border-radius:14px}
.toc[hidden]{display:none}
.toc__title{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.toc__list{margin:16px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:10px;list-style:decimal;color:var(--carve)}
.toc__list a{font-size:15px;color:var(--muted)}
.toc__list a:hover,.toc__list a:focus-visible{color:var(--amber)}
/* segundo nivel: solo lo usan los artículos que marcan sus <h3 data-toc> */
.toc__sub{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:8px;list-style:lower-latin;color:var(--carve)}
.toc__sub a{font-size:14px}

/* --- cuerpo del artículo --- */
.post-body{margin-top:48px;font-size:1.05rem;line-height:1.75;color:var(--muted)}
.post-body>*+*{margin-top:22px}
.post-body__lead{font-size:1.18rem;line-height:1.65;color:var(--ivory)}
.post-body h2{margin-top:58px;font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.16;letter-spacing:-.004em;color:var(--ivory);scroll-margin-top:96px}
.post-body h3{margin-top:40px;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.24;color:var(--ivory);scroll-margin-top:96px}
/* Cuarto nivel: hoy solo lo usan las preguntas de un FAQ que cuelga de un H3.
   Sin esta regla heredaría el h4 por defecto del navegador (bold, 1em) y el
   gris de .post-body, que lo dejaba a medio camino entre pregunta y párrafo. */
.post-body h4{margin-top:30px;font-family:var(--display);font-weight:500;font-size:17.5px;line-height:1.3;color:var(--ivory);scroll-margin-top:96px}
.post-body h4+p{margin-top:10px}
.post-body h2:focus-visible,.post-body h3:focus-visible,.post-body h4:focus-visible{outline:2px solid var(--cyan);outline-offset:8px}
.post-body a{color:var(--amber);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,106,43,.45)}
.post-body a:hover,.post-body a:focus-visible{color:var(--ivory);text-decoration-color:var(--ivory)}
.post-body strong{color:var(--ivory);font-weight:700}
.post-body ul,.post-body ol{display:flex;flex-direction:column;gap:11px;padding-left:24px}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li::marker{color:var(--amber)}
.post-body blockquote{padding:22px 26px;background:var(--slate);border-left:3px solid var(--amber);border-radius:0 12px 12px 0;color:var(--ivory);font-size:1.06rem;line-height:1.6}
.post-body pre{overflow-x:auto;padding:20px 22px;background:var(--slate);border:1px solid var(--stone);border-radius:12px}
.post-body code{font-family:var(--mono);font-size:.88em;color:var(--cyan);background:rgba(53,224,208,.08);border:1px solid rgba(53,224,208,.15);border-radius:5px;padding:2px 6px}
.post-body pre code{display:block;font-size:13.5px;line-height:1.7;color:var(--ivory);background:none;border:0;padding:0;white-space:pre}
.post-body img{max-width:100%;height:auto;border-radius:12px;border:1px solid rgba(138,133,122,.16)}
.post-body figcaption{margin-top:12px;font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.04em;color:var(--dim)}
.post-body figcaption code{font-size:11px}
.post-body hr{margin-top:46px;border:0;border-top:1px solid var(--stone)}

/* ---- texto + ilustración vertical a un lado ----
   Para assets en retrato (el bot animado de Artiro, 9:16): a ancho completo
   ocuparían media pantalla. En móvil se apilan y la imagen queda centrada
   con un ancho máximo, no a sangre. */
.bot-split{display:grid;grid-template-columns:1fr minmax(160px,215px);gap:30px;align-items:center}
.bot-split__texto>*+*{margin-top:18px}
.bot-split__fig{margin:0}
/* Hijo directo a propósito: cuando la ilustración va dentro de un .phone,
   manda el bloque de abajo y esta regla no debe pisarlo. */
.bot-split__fig>img{display:block;width:100%;height:auto}
@media (max-width:620px){
  .bot-split{grid-template-columns:1fr;gap:22px}
  .bot-split__fig{max-width:210px;margin-left:auto;margin-right:auto}
}

/* ---- marco de teléfono (CSS, nunca horneado en la imagen) ----
   La animación del bot es una interfaz de chat sobre fondo BLANCO: suelta
   sobre la obsidiana flota como un recorte. El marco la convierte en pantalla.

   Se dibuja aquí y no en el .webp por tres razones: el asset se queda con solo
   contenido (y con su proporción real intacta), el bisel se reescala con la
   columna en vez de pixelarse, y el color sale de los tokens de la caverna.

   CLS: .phone__screen reserva el hueco con aspect-ratio, así que el marco ya
   tiene su altura final antes de que llegue la animación (que es lazy). El
   padding del bisel es fijo en px y entra en el cálculo desde el primer frame.

   Sin muesca ni altavoz: la animación empieza con la cabeza del robot a un 2 %
   del borde superior, y cualquier detalle ahí se le montaría encima. */
.phone{
  position:relative;
  padding:7px;
  border-radius:26px;
  background:linear-gradient(158deg,var(--stone) 0%,var(--obs) 52%,#05060A 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,229,216,.10),
    0 1px 2px rgba(0,0,0,.6),
    0 16px 34px -16px rgba(0,0,0,.85);
  transition:box-shadow .35s ease;
}
.phone__screen{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  border-radius:20px;
  background:var(--deep);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.75);
}
/* Anula el borde y el radio que .post-body img pone a toda ilustración: aquí
   el que redondea y recorta es .phone__screen. */
.phone__screen img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  border:0;border-radius:0
}
.phone:hover{
  box-shadow:
    inset 0 1px 0 rgba(236,229,216,.14),
    0 0 0 1px rgba(255,106,43,.30),
    0 16px 38px -14px rgba(0,0,0,.9),
    0 0 30px -6px rgba(255,106,43,.22);
}
@media (prefers-reduced-motion:reduce){
  .phone{transition:none}
}

/* ---- tabla comparativa dentro de un artículo ----
   Siempre envuelta en .tabla-scroll: en móvil la tabla desborda, y el que tiene
   que scrollear es su contenedor, nunca el <body>. */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--stone);border-radius:12px;background:var(--slate)}
/* min-width 700: cabe entera en la columna del artículo (776 px) y solo
   desborda —con scroll propio— por debajo de eso, es decir en móvil. */
.post-tabla{width:100%;min-width:700px;border-collapse:collapse;table-layout:fixed;
  font-size:14.5px;line-height:1.55}
.post-tabla th,.post-tabla td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(138,133,122,.14)}
/* anchos fijos: sin esto la 1.ª columna de datos se estrangula y parte "1.500 USD" en cuatro líneas */
.post-tabla thead th:first-child{width:23%}
.post-tabla thead th:not(:first-child){width:25.6%}
.post-tabla thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);background:rgba(53,224,208,.05);border-bottom:1px solid var(--stone)}
.post-tabla tbody th{color:var(--ivory);font-weight:700}
.post-tabla tbody td{color:var(--muted)}
.post-tabla tbody tr:last-child th,.post-tabla tbody tr:last-child td{border-bottom:0}
.post-tabla tbody tr:hover td,.post-tabla tbody tr:hover th{background:rgba(255,106,43,.04)}

/* ---- aviso de afiliación ----
   Discreto pero legible: nunca oculto ni por debajo del tamaño del cuerpo. */
.post-aff-note{padding:12px 16px;border-left:2px solid rgba(53,224,208,.5);border-radius:0 8px 8px 0;
  background:rgba(53,224,208,.05);font-size:14px;line-height:1.6;color:var(--muted)}
/* Divulgación de colaboración comercial. Va entre la cabecera del artículo y
   la tabla de contenido, en HTML estático: tiene que verse sin JavaScript.
   Sobria a propósito —ni recuadro ni color de alarma—, pero nunca del color
   del fondo ni por debajo de 13 px. */
.post-collab-note{margin-top:20px;padding:2px 0 2px 14px;border-left:2px solid rgba(53,224,208,.45);
  font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:.02em;color:var(--muted)}

/* Botón dentro del cuerpo del artículo. Dos clases con el mismo aspecto pero
   distinto significado, y conviene no mezclarlas: .post-aff-cta es un enlace
   de AFILIADO (lleva rel="sponsored" y su aviso visible antes); .post-body-cta
   es un CTA normal a producto propio, que nunca lleva sponsored. */
.post-aff-cta,.post-body-cta{text-align:center}
.post-body .post-aff-cta a,.post-body .post-body-cta a{text-decoration:none;color:var(--obs)}
.post-body .post-aff-cta a:hover,.post-body .post-aff-cta a:focus-visible,
.post-body .post-body-cta a:hover,.post-body .post-body-cta a:focus-visible{color:var(--obs)}

/* ---- vídeo con carátula de clic ----
   Sin JS es un enlace a YouTube con su miniatura; con JS, articulo.js mete el
   iframe en su lugar. Hasta que el lector pulsa no sale ni una petición a
   Google: ni cookies, ni el ~1 MB del reproductor. */
.post-body .video-embed{position:relative}
.video-embed__link{position:relative;display:block;border-radius:12px;overflow:hidden;
  border:1px solid rgba(138,133,122,.16);text-decoration:none;background:var(--obs)}
.post-body .video-embed__link{text-decoration:none}
.video-embed__poster{display:block;width:100%;height:auto;border:0!important;border-radius:0!important;
  transition:opacity .25s,transform .4s}
.video-embed__link:hover .video-embed__poster{opacity:.82;transform:scale(1.015)}
/* botón de play: triángulo hecho con bordes, cero imágenes */
.video-embed__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;background:rgba(11,12,16,.72);
  border:2px solid var(--amber);box-shadow:0 0 40px rgba(255,106,43,.35);
  transition:background .25s,box-shadow .25s}
.video-embed__play::after{content:'';position:absolute;top:50%;left:calc(50% + 3px);
  transform:translate(-50%,-50%);width:0;height:0;
  border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:21px solid var(--amber)}
.video-embed__link:hover .video-embed__play,.video-embed__link:focus-visible .video-embed__play{
  background:rgba(255,106,43,.9);box-shadow:0 0 60px rgba(255,106,43,.6)}
.video-embed__link:hover .video-embed__play::after,.video-embed__link:focus-visible .video-embed__play::after{
  border-left-color:var(--obs)}
.video-embed__link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* el nombre accesible del enlace: visible sobre la carátula, no oculto */
.video-embed__label{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  background:linear-gradient(to top,rgba(7,8,11,.9),transparent);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ivory)}
/* al pulsar, el iframe ocupa el hueco con la misma proporción */
.video-embed__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  border:1px solid rgba(138,133,122,.16)}
.video-embed__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){
  .video-embed__poster,.video-embed__play{transition:none}
  .video-embed__link:hover .video-embed__poster{transform:none}
}

/* ---- acordeón de prompts (artículos con prompts por sector) ----
   Cerrado por defecto: cada bloque enseña solo su título hasta que el
   lector abre el que le interesa. Anula el <details> global de las FAQ. */
.post-body .prompt-acc{padding:0;border:1px solid var(--stone);border-top:1px solid var(--stone);
  border-radius:12px;background:var(--slate);overflow:hidden}
.post-body .prompt-acc+.prompt-acc{margin-top:14px}
.post-body .prompt-acc__sum{padding:16px 20px;gap:18px;align-items:flex-start}
.post-body .prompt-acc__sum:hover{background:rgba(255,106,43,.05)}
.post-body .prompt-acc__sum:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.post-body .prompt-acc__title{margin-top:0;font-size:18px;line-height:1.35;font-weight:500}
/* chevrón dibujado con CSS: un signo + que gira hasta la × al abrirse */
.post-body .prompt-acc__sum::after{content:'+';flex:none;font-family:var(--mono);font-size:20px;
  line-height:1;color:var(--dim);transition:transform .2s,color .2s}
.post-body .prompt-acc[open] .prompt-acc__sum::after{transform:rotate(45deg);color:var(--amber)}
.post-body .prompt-acc[open] .prompt-acc__sum{border-bottom:1px solid var(--stone)}
.post-body .prompt-acc__body{padding:20px}
.post-body .prompt-acc__body>*+*{margin-top:18px}
.post-body .prompt-acc__body>p{font-size:.98rem}

/* ---- bloque de prompt copiable ---- */
.prompt-box{border:1px solid var(--stone);border-radius:10px;background:var(--obs);overflow:hidden}
.prompt-box__label{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--stone);background:rgba(53,224,208,.05);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.prompt-box__copy{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:7px 12px;min-height:34px;background:transparent;color:var(--muted);
  border:1px solid rgba(138,133,122,.32);border-radius:8px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.prompt-box__copy:hover,.prompt-box__copy:focus-visible{color:var(--ivory);border-color:rgba(255,106,43,.6)}
.prompt-box__copy.is-ok{color:var(--obs);background:var(--cyan);border-color:var(--cyan)}
.prompt-box__msg{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:none;color:var(--dim);flex-basis:100%}
.prompt-box__msg:empty{display:none}
/* el prompt sí se ajusta al ancho: son párrafos, no código que deba scrollear */
.post-body .prompt-box pre{padding:16px 18px;background:none;border:0;border-radius:0;max-height:26rem;overflow:auto}
.post-body .prompt-box pre code{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65}

@media (max-width:620px){
  .post-body .prompt-acc__sum{padding:14px 16px}
  .post-body .prompt-acc__title{font-size:16.5px}
  .post-body .prompt-acc__body{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  .post-body .prompt-acc__sum::after,.prompt-box__copy{transition:none}
}

/* ============================================================
   Banner de cookies (lo inyecta /js/cookies.js)
   ============================================================ */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:0 20px 20px;pointer-events:none}
.cookie-banner__caja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;max-width:var(--wrap);margin:0 auto;padding:20px 24px;pointer-events:auto;
  background:var(--slate);border:1px solid rgba(138,133,122,.22);border-radius:14px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.cookie-banner__texto{flex:1 1 380px;min-width:0}
.cookie-banner__titulo{font-family:var(--display);font-weight:500;font-size:16px;color:var(--ivory)}
.cookie-banner__texto p+p{margin-top:6px}
.cookie-banner__texto p:last-child{font-size:14px;line-height:1.6;color:var(--muted)}
.cookie-banner__texto a{color:var(--cyan)}
.cookie-banner__texto a:hover,.cookie-banner__texto a:focus-visible{color:var(--amber)}
.cookie-banner__btns{display:flex;flex-wrap:wrap;gap:10px;flex:0 0 auto}
.cookie-banner__btns .btn{justify-content:center}
@media (max-width:620px){
  .cookie-banner{padding:0 14px 14px}
  .cookie-banner__caja{padding:18px 18px;gap:14px}
  .cookie-banner__btns{width:100%}
  .cookie-banner__btns .btn{flex:1 1 0;width:auto}
}

/* enlace "Configurar cookies" del pie: es un <button>, se disfraza de enlace */
.cookie-prefs{background:none;border:0;padding:0;font:inherit;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(138,133,122,.4);cursor:pointer;transition:color .25s ease}
.cookie-prefs:hover,.cookie-prefs:focus-visible{color:var(--amber);text-decoration-color:var(--amber)}

/* ============================================================
   Páginas legales — columna de lectura estrecha
   ============================================================ */
.legal{padding-top:56px;padding-bottom:20px}
.legal .post-body{margin-top:34px}
.legal .post-body h2{margin-top:46px;font-size:clamp(21px,2.4vw,27px)}
.legal__meta{margin-top:18px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim)}

/* --- soluciones relacionadas (plantilla de artículo) --- */
.post-solutions{margin-top:60px;padding:26px 28px;background:var(--slate);
  border:1px solid rgba(138,133,122,.16);border-radius:14px}
.post-solutions__title{font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.post-solutions ul{display:flex;flex-direction:column;gap:12px;margin-top:16px;list-style:none;padding:0}
.post-solutions li{font-size:15px;line-height:1.6;color:var(--muted)}
.post-solutions a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,106,43,.4)}
.post-solutions a:hover,.post-solutions a:focus-visible{color:var(--ivory);text-decoration-color:var(--ivory)}

/* --- CTA final --- */
.post-cta{margin-top:68px;padding:40px 34px;text-align:center;border:1px solid rgba(255,106,43,.3);border-radius:16px;box-shadow:0 0 70px -24px rgba(255,106,43,.55);
  background:radial-gradient(120% 150% at 50% 0%,rgba(255,106,43,.15) 0%,rgba(255,106,43,0) 62%),var(--slate)}
.post-cta h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.14;color:var(--ivory)}
.post-cta p{margin-top:15px;font-size:15.5px}
.post-cta strong{color:var(--ivory)}
/* segunda línea del CTA: bifurca hacia la página de servicio que toque */
.post-cta__nota{font-size:14.5px;color:var(--dim);max-width:640px;margin-left:auto;margin-right:auto}
.post-cta__nota a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,106,43,.4)}
.post-cta__nota a:hover,.post-cta__nota a:focus-visible{color:var(--ivory);text-decoration-color:var(--ivory)}
.post-cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}

/* --- sigue leyendo --- */
.post-next{margin-top:80px;padding:72px 0 96px;background:var(--obs);border-top:1px solid #14171D}
.post-next[hidden]{display:none}
.post-next h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,32px);color:var(--ivory)}
.post-next__nota{margin-top:16px;max-width:640px;font-size:15.5px;line-height:1.7}
.post-next__nota a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,106,43,.4)}
.post-next__nota a:hover,.post-next__nota a:focus-visible{color:var(--ivory);text-decoration-color:var(--ivory)}
.post-next .post-grid{grid-template-columns:repeat(2,1fr);margin-top:30px}

@media (max-width:620px){
  .post-wrap{padding-top:36px}
  .post-body{font-size:1.02rem}
  .post-cta{padding:32px 22px}
  .post-next{padding:56px 0 72px}
  .post-next .post-grid{grid-template-columns:1fr}
}

/* ============================================================
   Páginas de solución (/software-marca-blanca-agencias/ …)
   Reutilizan las secciones de la home; aquí solo van los ajustes.
   ============================================================ */

/* hero sin objeto 3D: en móvil una sola columna (texto primero, ilustración
   debajo); en escritorio se parte en dos más abajo */
.hero--lite .hero__grid{grid-template-columns:1fr;min-height:auto}
.hero--lite .hero__copy{max-width:860px;padding:88px 0 84px}
.hero--lite .hero__copy .lead{max-width:700px}
.hero--lite .breadcrumb{margin-bottom:30px}

/* --- ilustración del hero de las páginas de solución ---
   Va sobre un halo ámbar del mismo tinte que la antorcha y la boca de la
   cueva, para que se funda con la piedra en vez de leerse como un recuadro
   pegado encima. */
.hero__art,.faq__art{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/10}          /* reserva el hueco: sin saltos de maqueta */
.hero__art[hidden],.faq__art[hidden]{display:none}
.hero__art::before,.faq__art::before{content:"";position:absolute;left:50%;top:52%;width:112%;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,106,43,.22) 0%,
    rgba(255,106,43,.10) 30%,
    rgba(53,224,208,.055) 52%,
    rgba(0,0,0,0) 72%)}
.hero__art img,.faq__art img{position:relative;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.65)) drop-shadow(0 0 44px rgba(255,106,43,.14));
  /* el borde se desvanece: disimula el recorte del PNG */
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 64%,rgba(0,0,0,0) 97%);
  mask-image:radial-gradient(circle at 50% 50%,#000 64%,rgba(0,0,0,0) 97%)}
@media (prefers-reduced-motion:no-preference){
  .hero__art img,.faq__art img{animation:flotar-art 11s ease-in-out infinite}
}
/* Órbita suave: sube, deriva, baja y vuelve. Con solo ±9px de vertical el
   movimiento era imperceptible sobre una imagen de 500px; este recorrido se
   ve flotar sin llegar a distraer. */
@keyframes flotar-art{
  0%   {transform:translate3d(0,-15px,0) rotate(-1.3deg)}
  25%  {transform:translate3d(8px,-2px,0) rotate(0deg)}
  50%  {transform:translate3d(0,15px,0) rotate(1.3deg)}
  75%  {transform:translate3d(-8px,-2px,0) rotate(0deg)}
  100% {transform:translate3d(0,-15px,0) rotate(-1.3deg)}
}

/* --- ilustración de las preguntas frecuentes ---
   Vive en la columna izquierda, bajo el titular y enfrente del acordeón:
   el robot señala hacia la derecha, justo hacia las preguntas.
   El título NO es pegajoso: se queda en su sitio y no acompaña al scroll. */
.faq__aside{position:static}
.faq__aside .h2{position:static}
.faq__art{aspect-ratio:16/9;max-width:380px;margin-top:28px}
.faq__art img{animation-duration:6s}      /* algo más vivo que el del hero */
@media (max-width:900px){
  .faq__art{max-width:320px;margin:24px auto 0}
}

/* Tres reseñas: caben en una sola fila en cualquier escritorio, sin dejar
   ninguna suelta ni estrangular el texto. */
@media (min-width:901px){ #reviewsGrid{grid-template-columns:repeat(3,1fr)} }

/* si el archivo no existe, la columna desaparece y el texto recupera el ancho */
.hero--noart .hero__grid{grid-template-columns:1fr}
.hero--noart .hero__art{display:none}

/* la narrativa "de la caverna a la luz": cada sección aclara sobre la anterior */
.page-servicio .problem{background:#0B0C10}
.page-servicio .steps{background:#0D0F14}
.page-servicio .solutions{background:#0F1218}
.page-servicio .why{background:#12161C}

/* --- prueba real --- */
.proof{border-bottom:1px solid #1B2027;background:
  radial-gradient(85% 120% at 50% 0%,rgba(255,106,43,.13) 0%,rgba(255,106,43,0) 58%),#11151B}
.proof__lead{margin-top:20px}
.review--big{margin-top:46px;padding:42px 38px;border-color:rgba(255,106,43,.3);box-shadow:0 0 80px -28px rgba(255,106,43,.55)}
.review--big:hover{border-color:rgba(255,106,43,.55)}
.review--big .review__stars{font-size:18px}
.review--big blockquote{margin:0}
.review--big p{font-family:var(--display);font-weight:500;font-size:clamp(18px,2vw,25px);line-height:1.42;letter-spacing:-.002em;text-wrap:pretty}
.review--big .review__avatar{width:44px;height:44px;font-size:13px}
.proof__link{display:inline-block;margin-top:24px}

/* --- precio --- */
.page-servicio .price{background:#14181F;border-bottom:1px solid #1F242C}
.price__tag{margin-top:30px;font-family:var(--display);font-weight:600;font-size:clamp(34px,4.6vw,58px);line-height:1.05;color:var(--ivory)}
.price__tag span{display:block;margin-top:12px;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.price .lead{margin-top:26px}
.price__cta{margin-top:34px}
/* ancla de precio en la banda de confianza de la home.
   Vive dentro de .trust__texto, no como hijo suelto del grid. */
.trust__texto{max-width:380px}
.trust__texto p{max-width:none}
.trust__precio{margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.7;
  letter-spacing:.06em;color:var(--dim)}
.trust__precio b{color:var(--amber);font-weight:500}

/* mecánica de margen / amortización, bajo el bloque de precio */
.price__margen{margin-top:24px;padding:20px 22px;font-size:15px;line-height:1.7;
  background:var(--slate);border-left:3px solid var(--amber);border-radius:0 12px 12px 0}
.price__margen b{color:var(--ivory)}

/* nota de capacidad limitada en el cierre */
.contact__nota{margin:22px auto 0;max-width:640px;font-family:var(--mono);font-size:12px;
  line-height:1.75;letter-spacing:.04em;color:var(--dim)}

/* la página web tiene 5 razones: en 3+2 no queda una suelta a media fila */
@media (min-width:901px){ .page-web .why-grid{grid-template-columns:repeat(3,1fr)} }

.price__nota{margin-top:18px}
.price__nota a{color:var(--cyan)}
.price__nota a:hover,.price__nota a:focus-visible{color:var(--amber)}

/* ============================================================
   Home — hero en formato 16:9
   Antes el hero medía 88vh con el texto empujado por 130px de padding:
   el CTA acababa pegado al borde inferior y la columna de texto casi
   rozaba el objeto 3D. Ahora el hero es un marco 16:9 con el contenido
   centrado y aire real entre las dos columnas.
   Se usa min-height (no aspect-ratio) porque .hero recorta con
   overflow:hidden: así, si algún día el texto crece, el hero crece con
   él en vez de cortarlo.
   ============================================================ */
@media (min-width:901px){
  /* El marco 16:9 es SOLO para la home: es la que lleva el objeto 3D que
     lo llena. Las páginas de solución usan .hero--lite (una sola columna
     de texto) y dentro de un marco de 900px su contenido quedaría
     flotando en el centro con un vacío enorme arriba y abajo. */
  .hero:not(.hero--lite){display:flex;align-items:center;min-height:clamp(600px,52vw,900px)}
  .hero:not(.hero--lite) .hero__grid{
    width:100%;max-width:1340px;min-height:0;padding-top:26px;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(48px,5.5vw,110px);align-items:center}
  .hero:not(.hero--lite) .hero__copy{padding:0}
  /* algo más contenido que el clamp global (4.9vw): en anchos medios ese
     tamaño rompía el titular en seis líneas y empujaba el CTA al fondo */
  .hero:not(.hero--lite) .hero__copy h1{margin-top:20px;font-size:clamp(36px,3.85vw,66px)}
  .hero:not(.hero--lite) .hero__copy .lead{margin-top:22px;max-width:620px}
  .hero:not(.hero--lite) .hero__cta{margin-top:30px}
  .hero:not(.hero--lite) .hero__note{margin-top:22px}
  /* el objeto crece para llenar el marco: menos aire muerto arriba */
  .stage{height:clamp(430px,43vw,660px);min-height:0}
  .stage__caption{bottom:-46px;max-width:380px}

  /* --- páginas de solución: texto a la izquierda, ilustración a la derecha,
     con la misma rejilla y las mismas proporciones que la home --- */
  .hero--lite .hero__grid{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:clamp(44px,5vw,96px);align-items:center;max-width:1300px}
  .hero--lite .hero__copy{max-width:none;padding:76px 0 76px}
  .hero--lite .hero__copy .lead{max-width:600px}
  .hero--lite .hero__art{max-width:600px}
}
/* A partir de 1181px aparece el raíl de profundidad a la izquierda:
   reservamos su carril para que el hero ancho no se le eche encima. */
@media (min-width:1181px){
  .hero:not(.hero--lite) .hero__grid{max-width:min(1340px,calc(100vw - 230px))}
  .hero--lite .hero__grid{max-width:min(1300px,calc(100vw - 230px))}
}

/* ============================================================
   Home — el raíl de profundidad cava mientras bajas
   Solo en escritorio: .rail ya está oculto por debajo de 1181px.
   ============================================================ */
.rail__pick{position:absolute;left:11px;top:0;width:30px;height:30px;margin-top:-20px;
  color:var(--amber);opacity:.9;pointer-events:none;transform:rotate(-30deg);
  transform-origin:22% 14%;will-change:transform}
.rail__pick svg{display:block;filter:drop-shadow(0 0 8px rgba(255,106,43,.45))}
.rail__pick.dig{animation:cavar .44s cubic-bezier(.32,.72,.38,1)}
@keyframes cavar{
  0%{transform:rotate(-30deg)}
  34%{transform:rotate(24deg)}
  46%{transform:rotate(16deg)}
  100%{transform:rotate(-30deg)}
}
.rail__dirt{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;
  pointer-events:none;background:#9a7550;animation:tierra var(--dur,.62s) cubic-bezier(.25,.6,.5,1) forwards}
@keyframes tierra{
  0%{opacity:.95;transform:translate(0,0) scale(1)}
  70%{opacity:.7}
  100%{opacity:0;transform:translate(var(--dx,10px),var(--dy,14px)) scale(.35)}
}

/* ============================================================
   Home — visor ampliado de proyectos
   ============================================================ */
.folio-shot{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.folio-shot:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}

.lightbox{border:0;padding:0;background:transparent;color:var(--ivory);
  max-width:min(94vw,1280px);max-height:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(5,6,9,.88);backdrop-filter:blur(7px)}
.lightbox__fig{position:relative;margin:0}
.lightbox__img{display:block;width:100%;height:auto;max-height:78vh;object-fit:contain;
  border:1px solid var(--stone);background:repeating-linear-gradient(135deg,#13171E 0 9px,#0D1015 9px 18px);
  box-shadow:0 50px 130px -45px rgba(0,0,0,.95),0 0 70px -30px rgba(53,224,208,.35)}
.lightbox__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:14px;padding-top:16px}
.lightbox__cap strong{font-family:var(--display);font-weight:500;font-size:18px;color:var(--ivory)}
.lightbox__cap span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.lightbox__close{position:absolute;top:-54px;right:0;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stone);background:rgba(22,26,33,.7);color:var(--ivory);
  transition:border-color .3s,color .3s}
.lightbox__close:hover,.lightbox__close:focus-visible{border-color:var(--amber);color:var(--amber)}
@media (max-width:620px){
  .lightbox{max-width:94vw}
  .lightbox__close{top:-50px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .rail__pick.dig{animation:none}
  .rail__dirt{display:none}
}

/* --- fidelización y web: su orden de secciones cambia el degradado --- */
.page-fidelizacion .solutions,.page-web .solutions{background:#0D0F14}
.page-fidelizacion .testi,.page-web .testi{background:#0F1218}

/* --- rejilla de proyectos de la página web ---
   Cuatro capturas: en 2x2 se ven de verdad; en una fila quedarían miniaturas
   de 275px y el objetivo aquí es enseñar el trabajo. */
/* --- carrusel del home: el NOMBRE del proyecto enlaza a su web ---
   Solo el nombre es clicable; la tarjeta sigue abriendo el visor. Hereda el
   marfil del <strong> (si no, el azul cian de los enlaces lo delataría como
   otra cosa) y se pone ámbar al pasar por encima. */
.folio-card figcaption strong a{color:inherit;text-decoration:none;transition:color .25s ease}
.folio-card figcaption strong a:hover,
.folio-card figcaption strong a:focus-visible{color:var(--amber);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* miniatura que no existe: fondo sólido, nunca una imagen rota */
.shot.post-card__img--ph{display:block;background:var(--stone-dark)}
.folio-shot[disabled]{cursor:default}

/* contador de proyectos junto al encabezado del portafolio: reutiliza el
   estilo del rating de reseñas, así no introduce un componente nuevo */
.folio-badge{margin-top:18px}

.folio-grid{margin-top:52px}
.folio-grid .post-card__meta{margin-top:auto}
.testi-grid--solo{grid-template-columns:1fr;max-width:720px;margin-top:44px}
@media (min-width:901px){
  .page-web .folio-grid{grid-template-columns:repeat(2,1fr)}
}

/* 6 tarjetas piden 3×2: con auto-fit caerían 4+2 y quedaría un hueco vacío */
@media (min-width:901px){
  .page-servicio .cards{grid-template-columns:repeat(3,1fr)}
  /* 5 tarjetas: 3 arriba y 2 abajo repartiéndose el ancho, sin celdas vacías */
  .page-fidelizacion .cards{grid-template-columns:repeat(6,1fr)}
  .page-fidelizacion .card{grid-column:span 2}
  .page-fidelizacion .card:nth-child(n+4){grid-column:span 3}
}
@media (max-width:900px){
  /* el texto manda: la ilustración baja debajo y se queda contenida */
  .hero--lite .hero__copy{padding:84px 0 40px}
  .hero--lite .hero__art{max-width:440px;width:100%;margin:0 auto 64px}
}
@media (max-width:620px){
  .review--big{padding:30px 24px}
  .review--big .review__avatar{width:38px;height:38px}
}