/* ============================================================
   T.O.Q — Transforma o Quiebra · Hoja de estilos global
   Vanilla CSS. Sin build, sin dependencias.
   ============================================================ */

:root{
  --bg:#08090b; --bg-soft:#0c0e11;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22);
  --text:#f2f4f7; --muted:#8d949e;
  --accent:#3b82f6; --accent-soft:rgba(59,130,246,.16); --accent-line:rgba(59,130,246,.32);
  --ok:#4ade80; --r:4px; --maxw:1120px;
  --eo:cubic-bezier(.23,1,.32,1); --eio:cubic-bezier(.77,0,.175,1);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --header-bg:rgba(8,9,11,.66); --header-bg-strong:rgba(8,9,11,.9);
}

/* ---- Esquema claro por sección · efecto scroll dark ↔ blanco (insp. rsnlcreative) ---- */
html[data-scheme="light"]{
  --bg:#f5f6f8; --bg-soft:#ffffff;
  --border:rgba(10,12,16,.12); --border-strong:rgba(10,12,16,.24);
  --text:#0a0c10; --muted:#565e69;
  --accent:#2563eb; --accent-soft:rgba(37,99,235,.12); --accent-line:rgba(37,99,235,.30);
  --header-bg:rgba(255,255,255,.74); --header-bg-strong:rgba(255,255,255,.92);
}
html{background:var(--bg)}

@media (prefers-reduced-motion: no-preference){
  html,body,[data-hero],[data-sec],[data-footer],
  [data-hero] *,[data-sec] *,[data-footer] *{
    transition-property: background-color, color, border-color, fill, box-shadow;
    transition-duration: 1.5s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
  }
  /* Los elementos con revelado propio (opacity/transform inline) también funden
     su color con el cambio de esquema, sin perder su animación de entrada. */
  [data-reveal]{
    transition: opacity .8s var(--eo), transform .8s var(--eo), filter .8s var(--eo),
                color 1.5s cubic-bezier(.4,0,.2,1), border-color 1.5s cubic-bezier(.4,0,.2,1) !important;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
ul{list-style:none}
input,textarea,button{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--text)}
::selection{background:var(--accent);color:#08090b}
:focus-visible{outline:1px solid var(--text);outline-offset:3px}
section[id]{scroll-margin-top:86px}
[data-btn]{position:relative;overflow:hidden;isolation:isolate}
[data-btn][data-shine]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.20) 50%,transparent 62%);transform:translateX(-135%);transition:transform .26s var(--eo);pointer-events:none;z-index:2}
[data-btn][data-shine]:hover::after{transform:translateX(135%)}
[data-btn][data-shine][data-inv]::after{background:linear-gradient(105deg,transparent 38%,rgba(8,9,11,.14) 50%,transparent 62%)}
[data-arrow]{display:inline-block;transition:transform .3s var(--eo)}
[data-btn]:hover [data-arrow]{transform:translateX(5px)}
[data-zoom]{transition:transform .8s var(--eo)}
[data-card]:hover [data-zoom],[data-feature]:hover [data-zoom]{transform:scale(1.05)}
[data-team]:hover [data-photo],[data-team]:focus-visible [data-photo],[data-team][data-color] [data-photo]{filter:grayscale(0) contrast(1)!important;transform:scale(1.03)}
[data-navlink]{position:relative}
[data-navlink]::after{content:"";position:absolute;left:0;bottom:-7px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--eo)}
[data-navlink]:hover::after,[data-navlink][data-on]::after{transform:scaleX(1)}
[data-tech] span{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--muted);white-space:nowrap;transition:color .25s ease,opacity .25s ease;opacity:.75}
[data-tech] span:hover{color:var(--text);opacity:1}
[data-tech]:hover{animation-play-state:paused}
[data-tick]::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--accent);transform-origin:0 50%;transition:width .35s var(--eo)}
[data-card]:hover [data-tick]::before,[data-feature]:hover [data-tick]::before{width:15px}
[data-flink]:hover{color:var(--text)}
@keyframes toqRise{from{opacity:0;transform:translateY(28px);filter:blur(9px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes toqFade{from{opacity:0}to{opacity:1}}
@keyframes toqTrack{from{opacity:0;letter-spacing:.85em}to{opacity:1;letter-spacing:.32em}}
@keyframes toqSheen{0%{transform:translateX(-115%)}100%{transform:translateX(115%)}}
@keyframes toqDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,4%,0) scale(1.14)}100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes toqDrift2{0%{transform:translate3d(0,0,0) scale(1.06)}50%{transform:translate3d(-6%,-5%,0) scale(.94)}100%{transform:translate3d(0,0,0) scale(1.06)}}
@keyframes toqGrid{from{transform:translate3d(0,0,0)}to{transform:translate3d(-72px,-72px,0)}}
@keyframes toqScan{0%{transform:translateY(-8%);opacity:0}14%{opacity:.85}86%{opacity:.85}100%{transform:translateY(100%);opacity:0}}
@keyframes toqProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes toqSpin{to{transform:rotate(360deg)}}
@keyframes toqPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 7px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
[data-pulse]{animation:toqPulse 2.1s var(--eo) infinite}
[data-out]{transition:transform .3s var(--eo)}
[data-slide]{opacity:0;transform:scale(1.045);transition:opacity .75s var(--eo),transform 1.15s var(--eo)}
[data-slide][data-on]{opacity:1;transform:scale(1)}
[data-tab]{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:var(--r);padding:7px 12px;cursor:pointer;transition:color .25s var(--eo),border-color .25s var(--eo),background .25s var(--eo)}
[data-tab]:hover{color:var(--text);border-color:var(--border-strong)}
[data-tab][data-on]{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}
[data-tablet]{transition:transform .7s var(--eo),box-shadow .7s var(--eo)}
[data-card]:hover [data-tablet]{transform:translateY(-10px) rotate(-1.5deg) scale(1.04)}
[data-btn]:hover [data-out]{transform:translate(3px,-3px)}
@keyframes toqGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes toqFlip{from{opacity:0;transform:perspective(900px) rotateX(56deg) translateY(36%);filter:blur(10px)}to{opacity:1;transform:perspective(900px) rotateX(0deg) translateY(0);filter:blur(0)}}
@keyframes toqFloor{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,90px,0)}}
[data-glare]{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--eo);z-index:3;mix-blend-mode:screen}
[data-card]:hover [data-glare],[data-frame]:hover [data-glare]{opacity:1}
[data-depth]{transition:opacity .5s var(--eo)}
[data-lift]{transition:transform .3s var(--eo),filter .45s var(--eo),border-color .45s var(--eo)}
[data-card]:hover [data-lift]{transform:scale(1.05)}
[data-card]:hover [data-parallax]{transform:translateZ(26px)}
[data-parallax]{transition:transform .55s var(--eo)}
[data-word]{will-change:transform,opacity}

/* --- Hero: composición asimétrica T.O.Q + brief, solo esta sección --- */
.hero-grid{display:grid;grid-template-columns:auto 1fr;column-gap:48px;align-items:center}
.hero-word{justify-content:flex-start}
.hero-word-col{width:min(max-content,100%)}
.hero-tagline{text-align:center}
.hero-line{margin:30px 0 0}
.hero-cta-row{justify-content:flex-start}
.hero-cta-secondary{color:var(--muted);transition:color .2s ease}
.hero-cta-secondary:hover{color:var(--text)}
@media (min-width:921px){
  .hero-mark{border-right:1px solid var(--border);padding-right:32px}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;row-gap:40px;text-align:center}
  .hero-word{justify-content:center}
  .hero-word-col{margin:0 auto}
  .hero-line{margin:30px auto 0}
  .hero-desc{margin-left:auto;margin-right:auto}
  .hero-cta-row{justify-content:center}
}

/* --- Servicios ("Software a tu medida"): composición editorial sin cards, solo esta sección --- */
.svc-heading{font-weight:600;letter-spacing:-.03em;line-height:1.15}
.svc-heading--lg{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:14px}
.svc-heading--sm{font-size:1.05rem;margin-bottom:10px}
.svc-panel{display:grid;grid-template-columns:1fr auto;column-gap:28px;align-items:start;max-width:640px}
.svc-mark{display:block;object-fit:contain;width:72px;height:72px}
.svc-list{display:grid;gap:11px;margin-top:20px;border-left:1px solid var(--border);padding-left:20px}
.svc-divider{grid-column:1 / -1;position:relative;height:1px;background:var(--border);margin:36px 0}
.svc-divider::before{content:"";position:absolute;left:0;top:-5px;width:1px;height:11px;background:var(--accent)}
@media (min-width:921px){
  .svc-intro{border-right:1px solid var(--border)}
}
@media (max-width:920px){
  .svc-panel{grid-template-columns:1fr}
  .svc-mark{margin-top:16px}
}

/* --- Contacto: canales integrados + formulario sin card exterior, solo esta sección --- */
.contact-channels{border-top:1px solid var(--border);margin-top:32px}
.contact-channel{display:flex;align-items:center;gap:15px;padding:18px 2px;border-bottom:1px solid var(--border);color:var(--text);font-size:.92rem;transition:border-color .25s var(--eo)}
.contact-channel:hover{border-color:var(--border-strong)}
.contact-channel:hover [data-lift]{transform:scale(1.05)}
@media (min-width:921px){
  .contact-intro{border-right:1px solid var(--border);padding-right:28px}
}
@media (max-width:920px){
  .contact-intro{text-align:center}
}
@media (max-width:1100px){
  [data-pricebar]{grid-template-columns:1fr!important;gap:18px!important}
  [data-pricebar] > div:last-child{justify-content:flex-start!important}
}
@media (max-width:920px){
  [data-desknav]{display:none!important}
  [data-burger]{display:flex!important}
  [data-split]{grid-template-columns:1fr!important;gap:38px!important}
  [data-bento]{grid-template-columns:1fr!important}
  [data-bento] > *{grid-column:auto!important}
  [data-bentorow]{grid-template-columns:1fr!important;gap:26px!important}
  [data-featpad]{padding:30px!important}
  [data-offset]{margin-top:0!important}
  [data-sticky]{position:static!important}
}
@media (max-width:640px){
  [data-sec]{padding:78px 0!important}
  [data-hero]{min-height:auto!important;padding:84px 0 76px!important}
  [data-cta-row]{flex-direction:column!important;align-items:stretch!important}
}
html[data-motion="ninguno"] *{animation:none!important}
html[data-motion="sutil"] [data-aurora]{opacity:.65!important}
html[data-motion="sutil"] [data-floor]{opacity:.55!important}
html[data-motion="sutil"] [data-orbit]{opacity:.35!important}
html[data-motion="ninguno"] [data-scan]{display:none!important}
html[data-motion="ninguno"] [data-floor],html[data-motion="ninguno"] [data-orbit]{opacity:.2!important}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* --- estados controlados por main.js --- */
[data-mobilenav]{display:none!important}
[data-mobilenav][data-open]{display:flex!important}
[data-err]{display:none!important}
[data-err][data-on]{display:block!important}
[data-spinner]{display:none!important}
[data-spinner][data-on]{display:inline-block!important}
[data-sent]{display:none!important}
[data-sent][data-on]{display:block!important}

/* --- estados hover/focus/active extraídos del diseño --- */
.x1:hover{border-color:var(--border-strong) !important}
.x1:active{transform:scale(.95) !important}
.x2:hover{color:var(--text) !important}
.x3:hover{background:rgba(255,255,255,.06) !important;border-color:var(--text) !important}
.x3:active{transform:scale(.97) !important}
.x4:hover{background:#ffffff !important;box-shadow:0 16px 38px -14px rgba(255,255,255,.42) !important}
.x4:active{transform:scale(.97) !important}
.x5:hover{background:rgba(255,255,255,.06) !important;border-color:var(--text) !important;transform:translateY(-2px) !important}
.x5:active{transform:scale(.97) !important}
.x6:hover{border-color:var(--border-strong) !important;background:rgba(255,255,255,.02) !important;box-shadow:0 30px 60px -38px rgba(0,0,0,.9) !important}
.x7:hover{border-color:var(--border-strong) !important;box-shadow:0 30px 66px -36px rgba(0,0,0,.85) !important}
.x8:hover{border-color:var(--accent) !important;background:var(--accent-soft) !important;transform:translateY(-1px) !important}
.x9:hover{background:rgba(255,255,255,.06) !important;border-color:var(--text) !important;transform:translateY(-1px) !important}
.x9:active{transform:scale(.98) !important}
.x10:hover{background:#ffffff !important;box-shadow:0 14px 34px -14px rgba(255,255,255,.4) !important}
.x10:active{transform:scale(.98) !important}
.x11:hover{background:rgba(255,255,255,.06) !important;border-color:var(--text) !important}
.x11:active{transform:scale(.98) !important}
.x12:hover{background:rgba(255,255,255,.035) !important;border-color:var(--border-strong) !important}
.x13:hover{border-color:var(--border-strong) !important;background:rgba(255,255,255,.025) !important}
.x14:focus{outline:none !important;border-color:var(--text) !important;background:rgba(255,255,255,.03) !important;box-shadow:0 0 0 3px var(--accent-soft) !important}
.x15:hover{background:#ffffff !important;box-shadow:0 14px 34px -14px rgba(255,255,255,.4) !important}
.x15:active{transform:scale(.97) !important}

/* ============================================================
   Páginas internas: tienda · checkout · nosotros · legales
   ============================================================ */
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--text)}

/* --- prosa de documentos legales --- */
.prose-legal{max-width:72ch}
.prose-legal h2{font-size:1.04rem;font-weight:600;letter-spacing:-.02em;margin:46px 0 14px;scroll-margin-top:112px}
.prose-legal h2:first-child{margin-top:0}
.prose-legal p{color:var(--muted);font-size:.96rem;font-weight:300;line-height:1.8;margin-bottom:14px;text-wrap:pretty}
.prose-legal ul{display:grid;gap:11px;margin:0 0 16px}
.prose-legal li{position:relative;padding-left:22px;color:var(--muted);font-size:.94rem;font-weight:300;line-height:1.75;text-wrap:pretty}
.prose-legal li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--accent)}
.prose-legal strong{color:var(--text);font-weight:500}
.prose-legal a{color:var(--accent)}
.prose-legal a:hover{color:var(--text)}

/* --- índice lateral --- */
.toc{display:grid}
.toc a{display:block;padding:8px 0 8px 15px;border-left:1px solid var(--border);color:var(--muted);font-size:.83rem;font-weight:300;line-height:1.5;transition:color .25s var(--eo),border-color .25s var(--eo)}
.toc a:hover{color:var(--text);border-left-color:var(--border-strong)}
.toc a[data-on]{color:var(--text);border-left-color:var(--accent)}

/* --- checkout: métodos de pago y paneles --- */
[data-pay][data-on]{border-color:var(--accent-line)!important;background:var(--accent-soft)!important;box-shadow:0 22px 48px -32px rgba(0,0,0,.9)!important}
[data-pay][data-off]{pointer-events:none}
[data-panel]{display:none}
[data-panel][data-on]{display:block;animation:toqRise .5s var(--eo) both}
[data-conf]{display:none}
[data-conf][data-on]{display:block;animation:toqRise .6s var(--eo) both}
[data-hint]{display:none}
[data-hint][data-on]{display:block}

@media (max-width:1100px){
  [data-paygrid]{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:920px){
  [data-checkout]{grid-template-columns:1fr!important}
  [data-legal]{grid-template-columns:1fr!important;gap:34px!important}
  [data-shopgrid]{grid-template-columns:1fr!important}
  [data-medida-label]{writing-mode:horizontal-tb!important;transform:none!important;border-left:0!important;border-bottom:1px solid var(--accent-line)!important;padding:0 0 7px!important;display:inline-block!important}
  [data-manifiesto-line]{width:44px!important;height:1px!important;background:linear-gradient(90deg,var(--accent),transparent)!important;transform:scaleX(0)!important;transform-origin:0 50%!important;margin-top:14px!important}
}
@media (max-width:640px){
  [data-paygrid]{grid-template-columns:1fr!important}
}