/* tiendasweb.net — la portada de la plataforma.
   Deliberadamente distinta de los dominios regionales: aquellos son cálidos y
   locales (verde Atlántico, toxo, serif editorial); éste es la marca de
   producto — tinta casi negra, un solo acento vivo, retícula visible.
   Misma regla que el resto: sin fuentes externas, sin cookies, sin JS. */

:root{
  --ink:#12141A; --ink-2:#1C1F27; --ink-soft:#5A606E; --ink-faint:#8B92A1;
  --paper:#FFFFFF; --paper-2:#F4F5F7; --line:#E3E5EA; --line-2:#CBD0D9;
  --spark:#FF5A36;            /* el único acento: naranja señal */
  --spark-soft:#FFF1ED;
  --ok:#0E7C5A;
  --sans:ui-sans-serif,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0; line-height:1.06; letter-spacing:-.035em; font-weight:700}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--spark); outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 44px); margin-inline:auto}

/* ── chrome ─────────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px); z-index:10}
.top .wrap{display:flex; align-items:center; gap:24px; padding:15px 0}
.mark{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:800;
  letter-spacing:-.02em; font-size:19px}
.mark i{width:11px; height:11px; background:var(--spark); border-radius:2px;
  transform:rotate(45deg); display:block}
.top nav{margin-left:auto; display:flex; gap:26px; font-size:15px; color:var(--ink-soft)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--ink)}

.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:650;
  font-size:16px; padding:13px 22px; border-radius:4px; border:1.5px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease}
.btn.primary{background:var(--spark); color:#fff}
.btn.primary:hover{background:#F04A26; transform:translateY(-1px)}
.btn.line{border-color:var(--line-2); color:var(--ink)}
.btn.line:hover{border-color:var(--ink); transform:translateY(-1px)}
.btn.sm{padding:9px 16px; font-size:15px}
.btn .arw{transition:transform .15s ease}
.btn:hover .arw{transform:translateX(3px)}

/* ── hero: retícula técnica, no fotografía ──────────────────── */
.hero{position:relative; overflow:hidden; padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px)}
.hero::before{content:""; position:absolute; inset:0; z-index:0; opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 70% 0%,#000 20%,transparent 72%)}
.hero .wrap{position:relative; z-index:1}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--spark);
  background:var(--spark-soft); border-radius:100px; padding:6px 14px; margin-bottom:24px}
.hero h1{font-size:clamp(38px,6.4vw,76px); max-width:15ch; text-wrap:balance}
.hero h1 span{color:var(--ink-faint)}
.hero .lede{margin-top:24px; max-width:54ch; font-size:clamp(17px,1.4vw,20px);
  color:var(--ink-soft); line-height:1.6}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; align-items:center}
.cta .note{font-size:14px; color:var(--ink-faint); width:100%; margin-top:4px}

/* ── franja de dominios ─────────────────────────────────────── */
.strip{border-block:1px solid var(--line); background:var(--paper-2)}
.strip .wrap{display:flex; align-items:center; gap:14px 30px; padding:20px 0; flex-wrap:wrap;
  font-size:15px; color:var(--ink-soft)}
.strip b{color:var(--ink); font-weight:650}
.strip .dom{display:inline-flex; align-items:center; gap:8px; background:var(--paper);
  border:1px solid var(--line-2); border-radius:4px; padding:6px 12px; font-size:14.5px}
.strip .dom::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok)}
.strip .dom.soon::before{background:var(--ink-faint)}

/* ── secciones ──────────────────────────────────────────────── */
.sec{padding:clamp(60px,8vw,104px) 0}
.sec-hd{max-width:58ch; margin-bottom:clamp(36px,5vw,54px)}
.sec-hd .kick{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px}
.sec-hd h2{font-size:clamp(28px,3.7vw,44px); text-wrap:balance}
.sec-hd p{margin-top:15px; color:var(--ink-soft); font-size:17.5px; max-width:52ch}

/* pasos numerados sobre línea */
.rail{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,42px)}
.rail .step{border-top:2px solid var(--ink); padding-top:20px}
.rail .n{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:4px;
  background:var(--ink); color:#fff; font-size:14px; font-weight:700; margin-bottom:14px}
.rail h3{font-size:20px; margin-bottom:9px}
.rail p{color:var(--ink-soft); font-size:16px}

/* rejilla de capacidades */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:6px; overflow:hidden}
.cell{background:var(--paper); padding:clamp(22px,2.4vw,30px)}
.cell h3{font-size:18px; margin-bottom:8px}
.cell p{color:var(--ink-soft); font-size:15.5px}
.cell .k{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--spark); margin-bottom:10px}

/* ejemplo */
.demo{background:var(--ink); color:#fff}
.demo .sec-hd h2{color:#fff}
.demo .sec-hd p{color:#A8AEBC}
.demo .sec-hd .kick{color:var(--spark)}
.card{background:var(--ink-2); border:1px solid #2A2E39; border-radius:8px;
  display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden}
.card .txt{padding:clamp(26px,3vw,40px)}
.card h3{font-size:clamp(22px,2.3vw,29px); margin-bottom:12px}
.card p{color:#A8AEBC; margin-bottom:20px; font-size:16.5px}
.card .url{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  font-weight:650; border-bottom:2px solid var(--spark); padding-bottom:3px; word-break:break-all}
.shot{background:#0C0E13; padding:clamp(20px,2.4vw,32px); display:grid; align-content:center; gap:8px}
.shot i{display:block; height:9px; border-radius:2px; background:#2A2E39}
.shot i.t{height:20px; width:58%; background:var(--spark); opacity:.85}
.shot i.a{width:86%} .shot i.b{width:72%}
.shot .row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px}
.shot .row i{height:42px}

/* cierre */
.end{background:var(--paper-2); border-top:1px solid var(--line)}
.end h2{font-size:clamp(28px,4vw,44px); max-width:18ch; text-wrap:balance}
.end p{margin-top:16px; color:var(--ink-soft); max-width:48ch; font-size:17.5px}

/* ── páginas legales ────────────────────────────────────────── */
.legal-head{border-bottom:1px solid var(--line); padding:26px 0 clamp(30px,4vw,52px)}
.legal-head .mark{margin-bottom:clamp(24px,4vw,44px)}
.legal-head h1{font-size:clamp(30px,4.4vw,50px)}
.legal-body{padding:clamp(38px,5vw,64px) 0 clamp(50px,7vw,88px)}
.legal-body .col{max-width:66ch}
.legal-body h2{font-size:20px; margin:34px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--ink-soft); margin-bottom:12px}
.legal-body strong{color:var(--ink); font-weight:650}
.legal-body .pend{border-left:3px solid var(--spark); background:var(--spark-soft);
  padding:15px 18px; border-radius:0 4px 4px 0; color:var(--ink-2); font-size:16px;
  margin-bottom:12px}
.legal-body .back{display:inline-block; margin-top:34px; text-decoration:none;
  font-weight:650; border-bottom:2px solid var(--spark); padding-bottom:2px}

.foot{border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft)}
.foot .wrap{display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; padding:28px 0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .right{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) backwards}
  .rise:nth-child(1){animation-delay:.03s} .rise:nth-child(2){animation-delay:.09s}
  .rise:nth-child(3){animation-delay:.15s} .rise:nth-child(4){animation-delay:.21s}
  @keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
}

@media (max-width:900px){
  .rail{grid-template-columns:1fr; gap:26px}
  .grid{grid-template-columns:1fr 1fr}
  .card{grid-template-columns:1fr}
  .shot{order:-1}
  .top nav{display:none}
}
@media (max-width:560px){ .grid{grid-template-columns:1fr} .foot .right{margin-left:0; width:100%} }