/* Web Express — tema oscuro para páginas secundarias (tienda, pedido, soluciones, portafolio, EN, privacidad, gracias).
   Se carga DESPUÉS de site-20260914.css (y de los CSS de portafolio). Replica el lenguaje de la home (home-20261013.css):
   fondo #16171b, tarjetas #1d1e23 con borde fino, titulares sans apretados, kickers mono, botones píldora lima / ghost,
   cabecera flotante en píldora. */
@font-face{font-family:Gambetta;src:url('/assets/fonts/gambetta-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Mono;src:url('/assets/fonts/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --bg:#16171b;--bg2:#1d1e23;--bg3:#25272d;--fg:#f2f0ea;--muted:#a3a49e;--lime:#c9f84a;
  --line:rgba(242,240,234,.12);--line-strong:rgba(242,240,234,.34);
  --display:General,"Helvetica Neue",Arial,sans-serif;--serif:Gambetta,Georgia,serif;--mono:Mono,ui-monospace,monospace;
  /* tokens heredados de site-20260914.css: --ink se queda oscuro (fondos/texto sobre lima), --paper pasa a fondo oscuro */
  --ink:#16171b;--paper:#16171b;--gray:var(--muted);--white:var(--bg2);
  /* portafolio */
  --folio-bg:#16171b;--folio-ink:#f2f0ea;--folio-line:rgba(242,240,234,.12);--folio-muted:#a3a49e;
  color-scheme:dark;
}
html{overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--display);overflow-x:clip}
::selection{background:var(--lime);color:var(--bg)}
em{font-family:var(--serif);font-style:italic;font-weight:400}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible,
.portfolio-page a:focus-visible,.portfolio-page button:focus-visible,.portfolio-page summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{color:var(--bg);border-radius:8px}

/* ---------- cabecera flotante (píldora) ---------- */
.header,.portfolio-page .header{position:sticky;top:0;z-index:40;background:transparent;border:0;padding:14px 0 0;pointer-events:none}
.header .nav{pointer-events:auto;width:min(1240px,calc(100% - 2*clamp(16px,4vw,56px)));min-height:0;gap:16px;padding:7px 7px 7px 8px;border-radius:999px;background:rgba(22,23,27,.82);border:1px solid var(--line)}
@supports (backdrop-filter:blur(1px)){.header .nav{background:rgba(22,23,27,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.header .nav>a{display:inline-flex;border-radius:999px}
.brand{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;gap:10px}
.brand img,.portfolio-page .brand img{width:40px;height:40px;padding:6px;border-radius:50%;background:var(--fg);flex:none}
.nav-links,.portfolio-nav{gap:2px;font-size:15px}
.nav-links a,.portfolio-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;color:rgba(242,240,234,.82);font-weight:400;font-size:15px;text-decoration:none;transition:color .2s,background .2s}
.nav-links a:hover,.portfolio-nav a:hover{color:var(--fg);background:rgba(242,240,234,.08);text-decoration:none}
.nav-links .bag{padding:0 12px;min-width:0}
.bag .bag-label{display:none}
.cart-icon{width:auto;height:auto;margin:0;gap:6px}
.cart-icon svg{width:22px;height:22px}
.bag span[data-bag-count]{position:static;border:0;background:var(--lime);color:var(--bg);min-width:20px;height:20px;padding:0 5px;font:400 12px/1 var(--mono)}
.nav-links .hd-cta,.portfolio-nav .nav-contact{background:var(--lime);color:var(--bg);font-weight:700;padding:0 18px;border:0}
.nav-links .hd-cta:hover,.portfolio-nav .nav-contact:hover{background:var(--fg);color:var(--bg)}
@media(max-width:800px){.header .nav{min-height:0}.nav-links{gap:0}}
@media(max-width:440px){.header .brand>span{display:none}.nav-links a,.portfolio-nav a{padding:0 11px;font-size:14px}.nav-links .hd-cta{padding:0 14px}}

/* ---------- tipografía ---------- */
.eyebrow,.folio-kicker,.case-status,.screen-label{font:400 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eyebrow:before{width:7px;height:7px;border-radius:50%;box-shadow:none}
.hero h1,.page-hero h1,.section-heading h2,.display,.contact-band h2,.faq h2,.calculator h2,.checkout h2,.detail-body h2,
.portfolio-hero h1,.case-title h2,.case-description h3,.portfolio-contact h2,.privacy h1,.privacy h2{font-family:var(--display);font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.hero h1{line-height:1;letter-spacing:-.045em}
.page-hero h1,.portfolio-hero h1{line-height:1.02;letter-spacing:-.045em}
.hero h1 em,.page-hero h1 em,.portfolio-hero h1 em{font-family:var(--serif);font-weight:400;color:var(--lime);letter-spacing:-.02em}
.hero h1 em:before{display:none}
.section-heading h2,.display{line-height:1.04}
.route-step .num{font:700 30px var(--display);color:var(--lime);letter-spacing:-.03em}
.intro,.page-hero p,.section-heading p,.hero-intro{color:var(--muted)}
.note,.crumb,.product-count{color:var(--muted)}
.crumb a{color:var(--fg)}
.text-link{color:var(--fg)}
.text-link:hover{color:var(--lime)}
a{text-decoration-color:rgba(242,240,234,.4)}

/* ---------- botones (píldora) ---------- */
.btn{border-radius:999px;background:var(--lime);color:var(--bg);font-size:16px;gap:12px;padding:15px 24px;min-height:52px;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:var(--fg);color:var(--bg);transform:translateY(-2px)}
.btn.dark{background:var(--lime);color:var(--bg)}
.btn.dark:hover{background:var(--fg);color:var(--bg)}
.btn.outline{background:transparent;color:var(--fg);box-shadow:none;border-color:rgba(242,240,234,.34)}
.btn.outline:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.outline[aria-pressed=true]{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.btn.small{min-height:44px;padding:9px 16px;font-size:15px}
button:disabled.btn:hover{transform:none}

/* ---------- home EN (estructura antigua) ---------- */
.hero-media{background:var(--bg2);border:1px solid var(--line)}
.video-control button{background:rgba(242,240,234,.92);color:var(--bg)}
.orbit-label{background:var(--bg2);color:var(--fg);border-color:var(--line);border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.orbit-label.second{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.ribbon{background:transparent;color:var(--muted);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ribbon .wrap{font:400 12px var(--mono);letter-spacing:.1em}
.ribbon span+span:before{color:var(--lime)}
.proof-section{background:var(--bg2);color:var(--fg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-section .section-heading p,.work p{color:var(--muted)}
.work-image{background:var(--bg3);border:1px solid var(--line)}
.work:hover h3{color:var(--lime)}
.route-map{background:var(--bg2);border-color:var(--line);border-radius:20px}
.route-step{border-bottom-color:var(--line)}

/* ---------- tarjetas de soluciones ---------- */
.solution{background:var(--bg2);border-color:var(--line);color:var(--fg)}
.solution:hover{border-color:rgba(201,248,74,.5)}
.solution-art{background:var(--bg3)}
.solution:nth-child(2n) .solution-art{background:#1f251a}
.solution:nth-child(3n) .solution-art{background:var(--lime)}
.solution h3{letter-spacing:-.02em}
.solution .index{font:400 11px var(--mono);letter-spacing:.1em;color:var(--muted)}
.solution:hover h3{color:var(--lime)}
.detail-hero .solution-art{background:var(--lime)}
.detail-body h2{letter-spacing:-.03em}
.detail-body li::marker{color:var(--lime)}

/* ---------- banda de contacto y FAQ ---------- */
.contact-band{background:radial-gradient(ellipse at 85% 120%,rgba(201,248,74,.2),transparent 60%),var(--bg2);border:1px solid var(--line);color:var(--fg)}
.contact-band p{color:var(--muted)}
.faq details,.faq-grid details{border-bottom-color:var(--line)}
details p{color:var(--muted)}
summary{color:var(--fg)}

/* ---------- footer ---------- */
footer{border-top-color:var(--line)}
footer p{color:var(--muted)}
footer .foot-links a{color:var(--muted);text-decoration:none}
footer .foot-links a:hover{color:var(--lime)}

/* ---------- tienda ---------- */
.search-box{background:var(--bg2);color:var(--fg);border:1px solid var(--line-strong);border-radius:999px;padding:14px 22px}
.search-box::placeholder{color:#8f908a}
.filter{border-radius:999px;border-color:var(--line-strong);color:rgba(242,240,234,.86);background:transparent}
.filter:hover{border-color:var(--fg);color:var(--fg)}
.filter[aria-pressed=true]{background:var(--lime);color:var(--bg);border-color:var(--lime)}
.product{background:var(--bg2);border-color:var(--line);border-radius:20px}
.product.selected{border:2px solid var(--lime)}
.product-art{background:var(--bg3)}
.product[data-category="ia"] .product-art,.product[data-category="marca"] .product-art{background:var(--lime)}
.product[data-category="marketing"] .product-art{background:#1f251a}
.product-price{font-family:var(--display);letter-spacing:-.02em}
.product-price small{color:var(--muted)}
.product .desc{color:var(--muted)}
.product summary{color:var(--fg)}
.product .demo-link a,.product .demo-link{color:var(--fg)}
.shop-help{border-color:var(--line);background:var(--bg2);border-radius:20px}
.shop-help a{color:var(--lime)}
.no-js{background:#3a3214;color:var(--fg)}

/* calculadora / carrito */
.calculator{background:var(--bg2);border:1px solid var(--line);color:var(--fg);border-radius:20px}
.calculator .note{color:var(--muted)}
.cart-line{border-bottom-color:var(--line)}
.cart-line small{color:var(--muted)}
.cart-line .remove{border-radius:50%}
.cart-line .remove:hover{background:rgba(242,240,234,.08)}
.cart-totals .total{border-top-color:var(--line-strong)}
.cart-explanation{border-bottom-color:var(--line)}
.coupon input{border-color:var(--line-strong);border-radius:10px;background:var(--bg);color:var(--fg)}
.coupon input::placeholder{color:#8f908a}
.calculator [data-begin-checkout]{box-shadow:0 0 0 8px var(--bg2)}
.calculator a.text-link{color:var(--fg)}
.empty-cart{color:var(--muted)}
.status{background:var(--bg2);color:var(--fg);border:1px solid rgba(201,248,74,.5);border-radius:12px}
.store-dialog{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:20px}
.store-dialog .calculator{border:0;background:transparent}
.store-dialog .calculator [data-begin-checkout]{box-shadow:0 0 0 8px var(--bg2)}
.dialog-head{border-bottom-color:var(--line)}
.dialog-head button{border-color:var(--line-strong);border-radius:999px;padding:6px 16px}
.dialog-head button:hover{background:var(--fg);color:var(--bg)}
@media(max-width:800px){
  .mobile-cart{background:rgba(29,30,35,.96);color:var(--fg);border-top:1px solid var(--line)}
  @supports (backdrop-filter:blur(1px)){.mobile-cart{background:rgba(29,30,35,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
}

/* ---------- pedido / checkout ---------- */
.checkout-panel{background:var(--bg2);border-color:var(--line);border-radius:20px}
.field input,.field textarea,.field select{font-weight:400;background:var(--bg);color:var(--fg);border:1px solid var(--line-strong);border-radius:10px}
.field input::placeholder,.field textarea::placeholder{color:#8f908a}
.field input:focus,.field textarea:focus{border-color:var(--lime)}
.terms input,.pay-choice input{accent-color:var(--lime)}
.pay-choice{border-color:var(--line-strong);border-radius:14px;background:var(--bg)}
.pay-choice:has(input:checked){border-color:var(--lime);background:rgba(201,248,74,.06)}
.pay-choice small{color:var(--muted)}
.manual-pay{border-color:var(--line);background:var(--bg2);border-radius:20px}
.qr-row img{background:#fff;border-radius:10px;padding:6px}
.error{color:#ff8a7a}
.checkout-list li{border-bottom-color:var(--line)}

/* ---------- privacidad / gracias ---------- */
.privacy a{color:var(--lime)}
.privacy a.btn{color:var(--bg)}

/* ---------- portafolio ---------- */
.portfolio-page{background:var(--bg);color:var(--fg)}
.portfolio-hero h1{font-size:clamp(42px,4.8vw,72px)}
.portfolio-hero h1 em{color:var(--lime)}
.project-index a{color:var(--fg);border-bottom-color:var(--line)}
.project-index a:hover{color:var(--lime)}
.project-index a span{color:var(--muted);font-family:var(--mono)}
.case{border-top-color:var(--line)}
.case-link{color:var(--fg)}
.case-link:hover{color:var(--lime)}
.case-visual{border-radius:20px;border:1px solid var(--line)}
.punto-visual,.colegio-visual,.illari-visual,.batuta-front{background:var(--bg2)}
.batuta-panel{background:#101114}
.batuta-panel .screen-label{color:#d9cba8}
.capture-frame{border-radius:10px;box-shadow:0 24px 50px -20px rgba(0,0,0,.7)}
.technical-detail{border-color:var(--line)}
.technical-detail summary{color:var(--fg)}
.technical-detail li::marker{color:var(--lime)}
.disclosure{color:var(--muted)}
.portfolio-contact{background:radial-gradient(ellipse at 85% 120%,rgba(201,248,74,.2),transparent 60%),var(--bg2);border:1px solid var(--line);border-radius:20px;color:var(--fg)}
.portfolio-contact p:not(.folio-kicker){color:var(--muted)}
.folio-button{background:var(--lime);color:var(--bg)!important;border-radius:999px;transition:background .25s,transform .25s}
.folio-button:hover{background:var(--fg);transform:translateY(-2px)}
.services-link{color:var(--muted)}
.services-link:hover{color:var(--lime)}
.capture-dialog,.capture-dialog-header{background:var(--bg2);color:var(--fg)}
.capture-dialog{border:1px solid var(--line);border-radius:14px}
.capture-dialog-header button{background:transparent;color:var(--fg);border:1px solid var(--line-strong);border-radius:999px}
.capture-dialog-header button:hover{background:var(--fg);color:var(--bg)}

@media(prefers-reduced-motion:reduce){.btn,.folio-button{transition:none}}

@media (max-width:520px){.nav-links>a[href="/tienda/"]{display:none}}
@media (max-width:520px){.nav-links{gap:4px!important}.nav-links>a{padding-left:8px;padding-right:8px}}
@media (max-width:520px){.nav{gap:8px!important}.nav-links .bag{padding:0 4px!important;min-width:0}.nav-links .bag .cart-icon{width:30px}.nav-links .hd-cta{padding:10px 14px!important}}
#conversemos h2 em{color:#c9f84a}
@media (max-width:520px){.portfolio-nav .nav-home{display:none}}

/* Cielo nocturno de fondo */
.cielo{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Temporada alta en el header: enlace normal + etiqueta hasta -40% */
.hd-pack{display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;font-weight:600;color:var(--fg,#f2f0ea)!important}
.hd-pack b{font-family:var(--mono,ui-monospace,monospace);font-size:11px;font-weight:700;letter-spacing:.02em;background:#c9f84a;color:#16171b;padding:3px 7px;border-radius:6px;transform:rotate(-4deg);transition:transform .3s}
.hd-pack:hover b{transform:rotate(0) scale(1.08)}
@media (max-width:520px){.hd-pack .hp-h{display:none}.hd-pack .hp-t{display:none}.hd-pack::before{content:"Pack";font-weight:600}}

/* Calculadora: controles cómodos al tacto y foco visible sobre el fondo oscuro. */
.calculator .cart-line .remove,.store-dialog [data-close-cart]{min-width:48px;min-height:48px}
.calculator :focus-visible,.store-dialog :focus-visible{outline:3px solid #c9f84a;outline-offset:3px}
