.section{ padding: 90px 20px; background:var(--panel); }
.container{ max-width:1100px; margin:0 auto }
.section h2{ margin:0 0 22px; font-weight:800; font-size:clamp(22px,3.5vw,34px) }
.lead{ color:var(--muted) }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:44px; padding:0 16px; border-radius:12px; text-decoration:none;
  color:white; background:var(--brand); box-shadow:0 8px 24px color-mix(in oklab, var(--brand) 30%, #0000);
  transition: transform .05s ease;
}
.btn-primary:active{ transform: translateY(1px); }

.how-steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:18px;
}
@media (max-width: 720px){
  .how-steps{ grid-template-columns:1fr; }
}

.how-step{
  border:1px solid var(--line);
  border-radius:16px;
  background:color-mix(in oklab, var(--panel) 92%, #0000);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.how-step:hover{
  transform:translateY(-2px);
  /*box-shadow:0 22px 60px rgba(0,0,0,.08);*/
  /*border-color:color-mix(in oklab, var(--line) 60%, var(--brand));*/
}

.how-step .viz{
  block-size:130px;
  background:
    radial-gradient(600px 300px at 80% -20%,
      color-mix(in oklab, var(--brand) 12%, #0000) 0%,
      transparent 60%)
    ,
    linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 96%, #0000),
      color-mix(in oklab, var(--panel) 86%, #0000)
    );
  border-bottom:1px solid var(--line);
  position:relative;
}

.how-body{ padding:16px 16px 18px; }
.how-body h3{ margin:0 0 6px; font:800 16px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
.how-body p{ margin:0; color:var(--muted); font-size:14px; }

.viz-grid{ display:block; width:100%; height:100%; }

.viz-upload .frame{
  position:absolute; inset:18px 16px auto 16px; height:94px;
  border:1px dashed color-mix(in oklab, var(--line) 90%, var(--ink));
  border-radius:12px;
  display:grid; place-items:center;
}
.viz-upload .file{
  width:54px; height:42px; border-radius:10px;
  background:linear-gradient(145deg,#9dd6ff,#78b9f7);
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  transform:translateY(-42px) rotate(-3deg);
  animation:upl-drop 1.4s ease-out infinite alternate;
}
@keyframes upl-drop{
  60%{ transform:translateY(0) rotate(0deg); }
  100%{ transform:translateY(-6px) rotate(.4deg); }
}
.viz-upload .bar{
  position:absolute; inset:auto 16px 14px 16px; height:6px;
  background:color-mix(in oklab, var(--panel) 72%, #0000);
  border:1px solid var(--line); border-radius:999px; overflow:hidden;
}
.viz-upload .bar::after{
  content:""; position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, var(--brand), color-mix(in oklab, var(--brand) 65%, #0000));
  animation:upl-fill 2.2s ease-in-out infinite;
}
@keyframes upl-fill{
  0%{ width:0% } 60%{ width:100% } 100%{ width:0% }
}

.how-step .viz-size{
  width: 100%;
  height:120px;
  display: block;
  border-radius: 0; 
  background: transparent;
}
@media (max-width: 720px){
  .how-step .viz-size{ width: 100%; height: 120px; }
}

.viz-url .urlbar{
  position:absolute; left:16px; right:16px; top:42px; height:40px;
  border-radius:10px; border:1px solid var(--line);
  background:color-mix(in oklab, var(--panel) 94%, #0000);
  display:flex; align-items:center; padding:0 10px;
  gap:8px;
}
.viz-url .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); opacity:.85 }
.viz-url .text{
  font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:nowrap; overflow:hidden;
  color:var(--ink);
  max-width:0;
  animation:typing 3s steps(var(--chars,28)) infinite alternate;
  display:flex; align-items:center;   
  height:100%; line-height:1;         
}
.viz-url .caret{
  width:2px; align-self:stretch; background:currentColor; margin-left:2px;
  animation:blink 1s steps(2) infinite;
  align-self:center;                  
  height:60%;                         
}
@keyframes typing{ to{ max-width: calc(var(--chars,28) * 1ch) } }
@keyframes blink{ 50%{ opacity:0 } }

.viz-publish .ring{
  position:absolute; inset:18px; display:grid; place-items:center;
}
.viz-publish svg{ width:74px; height:74px }
.viz-publish .ring circle{
  fill:none; stroke: color-mix(in oklab, var(--brand) 35%, var(--ink));
  stroke-width:6; stroke-dasharray:220; stroke-dashoffset:220;
  opacity:.25; animation:ring 1.1s ease forwards infinite alternate;
}
@keyframes ring{ to{ stroke-dashoffset:0 } }
.viz-publish .check path{
  fill:none; stroke: var(--brand); stroke-linecap:round; stroke-linejoin:round;
  stroke-width:6; stroke-dasharray:60; stroke-dashoffset:60;
  animation:check 1s .3s ease forwards infinite alternate;
}
@keyframes check{ to{ stroke-dashoffset:0 } }

/* confetti */
.viz-publish .confetti{
  position:absolute; bottom:12px; left:10%;
  width:6px; height:10px; border-radius:2px;
  background:color-mix(in oklab, var(--brand) 65%, #0000);
  opacity:0; transform:translateY(0) rotate(0deg);
  animation:conf 1.6s ease-out infinite;
}
@keyframes conf{
  0%{ opacity:0; transform:translateY(0) rotate(0deg) }
  10%{ opacity:1 }
  100%{ opacity:0; transform:translateY(-60px) rotate(220deg) }
}

/* CATALOG (Section 3) */
.market-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}
.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
  overflow:hidden;
  display:grid; grid-template-rows: auto 1fr;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  max-width: 420px;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px color-mix(in oklab, #000 16%, #0000);
  border-color:color-mix(in oklab, var(--line) 60%, var(--brand));
}
.card:has(a:focus-visible){ outline:2px solid var(--brand); outline-offset:2px; }
.card .thumb{
  position:relative;
  aspect-ratio:16/9;
  border-bottom:1px solid var(--line);

  background-color: color-mix(in oklab, var(--panel) 94%, #0000);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.card .thumb::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, #0000 0 11px, color-mix(in oklab, var(--ink) 7%, #0000) 11px 12px),
    repeating-linear-gradient(90deg,#0000 0 11px, color-mix(in oklab, var(--ink) 7%, #0000) 11px 12px);
  opacity:.22; pointer-events:none;
}
.card .thumb::after{
  content:""; position:absolute; inset:-40% -60% auto;
  height:140%; transform:rotate(12deg) translateX(-100%);
  background:linear-gradient(90deg,#fff0,#fff3 15%,#fff0 45%);
  transition:transform .8s ease;
  pointer-events:none;
}
.card:hover .thumb::after{ transform:rotate(5deg) translateX(30%); }
.card .body{ padding:14px; display:grid; gap:8px; }
.card .title{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.card .actions{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }


.card a.card-link{ position:absolute; inset:0; border-radius:inherit; z-index:1; }
.card[data-status="soon"] a.card-link{ display:none; } /* desactiva overlay */

.card[data-status="soon"] .thumb::after{
  content: attr(data-badge);   /* usa el texto del idioma */
  position:absolute; right:10px; top:10px;
  transform:none; height:auto; inset:auto;
  font:600 12px/1 system-ui; padding:6px 10px; border-radius:999px;
  color:#7a4a0a; background:#fff6e7; border:1px solid #f2d29a;
}

.card[data-status="soon"] .btn-primary{ opacity:.6; pointer-events:none; }
.badge{
  font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line);
  background: color-mix(in oklab, var(--panel) 90%, #0000);
}
.badge.ok{ color:#0a7a3d; border-color: #a7e0bf; background:#e7fff1 }
.badge.soon{ color:#7a4a0a; border-color:#f2d29a; background:#fff6e7; }
.card .desc{ color:var(--muted); font-size:14px; }
.btn-secondary{
  display:inline-flex; align-items:center; gap:.5rem; height:38px; padding:0 12px;
  border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink);
  background:color-mix(in oklab, var(--panel) 6%, transparent);
}
.btn-secondary[aria-disabled="true"]{ opacity:.55; pointer-events:none }

@media (max-width: 990px){
  .market-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .market-grid{ grid-template-columns: 1fr; }
}

.faq-list{ display:grid; gap:10px; }
.faq-item{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel);
}
.faq-item summary{
  cursor:pointer; padding:14px 16px; list-style:none; font-weight:600;
  display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item .content{ padding:0 16px 14px; color:var(--muted); font-size:14px }

.faq-item{
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.faq-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in oklab, #000 10%, #0000);
}

.faq-item summary svg{
  transition: transform .25s ease, opacity .2s ease;
  opacity:.75;
}
.faq-item[open] summary svg{
  transform: rotate(180deg);
  opacity:1;
}

.faq-item .content{
  max-height: 0;               
  opacity: 0;
  overflow: hidden;
  transform: translateY(-2px);
  transition:
    max-height .28s ease,
    opacity .22s ease,
    transform .28s ease;
}
.faq-item[open] .content{
  max-height: 320px;           
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .faq-item, .faq-item .content, .faq-item summary svg{ transition: none !important; }
}


.site-footer{
  position: relative;
  padding: 60px 20px;
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--panel) 94%, #0000),
      color-mix(in oklab, var(--panel) 86%, #0000));
  border-top: 1px solid var(--line);
  isolation: isolate; 
}

.site-footer::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(520px 180px at 12% -10%,
      color-mix(in oklab, var(--brand) 10%, #0000), transparent 60%),
    radial-gradient(520px 180px at 90% 0%,
      color-mix(in oklab, var(--brand) 8%, #0000), transparent 55%);
  opacity:.7;
}

.footer-grid{
  position:relative; z-index:1;
  display:grid; gap:24px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  max-width:1100px; margin:0 auto;
}

.f-col h4{
  margin:0 0 12px;
  font: 800 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing:.4px;
  text-transform: uppercase;
  color: var(--ink);
  opacity:.9;
}

.f-col ul{
  margin:0; padding:0; list-style:none; display:grid; gap:8px;
}

.f-col ul a{
  color: var(--ink);
  text-decoration:none;
  position:relative;
  display:inline-block;
  transition: color .15s ease, opacity .15s ease;
  opacity:.92;
}
.f-col ul a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: color-mix(in oklab, var(--ink) 45%, #0000);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.f-col ul a:hover{ color: color-mix(in oklab, var(--ink) 80%, var(--brand)); opacity:1; }
.f-col ul a:hover::after{ transform: scaleX(1); }

.copy{
  position:relative; z-index:1;
  margin-top:28px; padding-top:18px;
  text-align:center; color:var(--muted);
  border-top:1px dashed color-mix(in oklab, var(--line) 80%, #0000);
  font-size:13px;
}

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}


.how-step{
  opacity:0;
  transform: translateY(8px) scale(.98);
}
.how-step.reveal-in{
  opacity:1;
  transform:none;
  transition:
    opacity .55s ease var(--delay,0ms),
    transform .55s cubic-bezier(.2,.8,.2,1) var(--delay,0ms);
}

.how-step .viz{ clip-path: inset(20% 0 0 0 round 12px); }
.how-step.reveal-in .viz{
  transition: clip-path .6s ease var(--delay,0ms);
  clip-path: inset(0 0 0 0 round 12px);
}
.footer-grid .socials{
  display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; list-style:none;
}
.footer-grid .socials .ico{
  --size: 38px;
  width:var(--size); height:var(--size);
  display:inline-grid; place-items:center;
  border-radius:50%;
  color:var(--ink);
  background: color-mix(in oklab, var(--panel) 90%, #0000);
  border:1px solid var(--line);
  box-shadow: 0 2px 8px color-mix(in oklab, #000 6%, #0000);
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.footer-grid .socials .ico:hover{
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--brand) 12%, var(--panel));
  border-color: color-mix(in oklab, var(--line) 50%, var(--brand));
  color: color-mix(in oklab, var(--ink) 85%, var(--brand));
  box-shadow: 0 8px 22px color-mix(in oklab, var(--brand) 18%, #0000);
}
.footer-grid .socials .ico:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--brand) 55%, #0000);
  outline-offset: 2px;
}
.footer-grid .socials svg{
  width:20px; height:20px; display:block;
}
@media (max-width:560px){
  .footer-grid .socials{ gap:12px; }
  .footer-grid .socials .ico{ --size: 42px; }
  .footer-grid .socials svg{ width:22px; height:22px; }
}

.footer-grid .socials .ico{ text-decoration:none; position:relative; }
.footer-grid .socials .ico::after{ content:none !important; }