/* ============================================================
   site.css — Amazing Shops (consultoría apps · retail · foodservice)
   Construido sobre tokens.css / base.css de Amazing World (familia visual).
   ============================================================ */

.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.content{max-width:var(--content);margin:0 auto}
.section{padding-block:var(--space-12)}

/* ---- Reveal on scroll ---- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(252,250,247,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--border);box-shadow:0 6px 20px -12px rgba(17,24,39,.18)}
.bar{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-2)}
.wordmark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:var(--weight-black);font-size:1.15rem;letter-spacing:var(--tracking-tight);color:var(--ink)}
.wordmark .mark{width:22px;height:22px;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.wordmark .mark span{border-radius:4px;background:var(--aw-coral)}
.wordmark .mark span:nth-child(2){background:var(--aw-mint)}
.wordmark .mark span:nth-child(3){background:var(--aw-blue)}
.wordmark .mark span:nth-child(4){background:var(--aw-purple)}
.nav{display:flex;gap:var(--space-3)}
.nav a{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);transition:color var(--dur-1) var(--ease)}
.nav a:hover{color:var(--ink)}
.header-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);background:none}

/* ---- Hero ---- */
.hero{padding-block:var(--space-14) var(--space-10);text-align:left;position:relative;overflow:hidden}
.hero-blob{position:absolute;top:-180px;right:-230px;width:660px;height:660px;border-radius:50%;z-index:0;pointer-events:none;overflow:hidden;
  background:conic-gradient(from 200deg, var(--aw-coral), var(--aw-purple), var(--aw-blue), var(--aw-mint), var(--aw-coral));
  opacity:.16;
  animation:blob-spin 50s linear infinite}
.hero-blob::after{content:"";position:absolute;inset:0;background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.6) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.6) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 36px)}
@keyframes blob-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .hero-blob{animation:none}
}
.hero-content{position:relative;z-index:1}
.hero .eyebrow{margin-bottom:var(--space-2)}
.hero h1{max-width:16ch}
.hero p.lead{margin-top:var(--space-3);max-width:56ch;font-size:var(--text-lg);color:var(--text-muted)}
.hero-actions{display:flex;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-pill);font-weight:var(--weight-semibold);font-size:var(--text-sm);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border-strong)}

.hero-stats{display:flex;gap:var(--space-6);margin-top:var(--space-8);flex-wrap:wrap}
.stat b{display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-black);color:var(--ink)}
.stat span{font-size:var(--text-sm);color:var(--text-muted)}

/* ---- Pilares (Apps / Retail / Foodservice) ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.pillar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--border-strong)}
.pillar .tag{width:44px;height:44px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--weight-black);color:#fff}
.pillar--apps .tag{background:var(--aw-purple)}
.pillar--retail .tag{background:var(--aw-coral)}
.pillar--food .tag{background:var(--aw-mint)}
.pillar h3{font-size:var(--text-xl)}
.pillar p{color:var(--text-muted)}
.pillar ul{margin-top:var(--space-1);display:flex;flex-direction:column;gap:6px}
.pillar li{font-size:var(--text-sm);color:var(--text)}
.pillar li::before{content:"—  ";color:var(--text-faint)}

/* ---- Track record ---- */
.track{background:var(--dark);color:var(--on-dark);border-radius:var(--radius-lg)}
.track .content{padding-block:var(--space-10)}
.track h2{color:var(--on-dark)}
.track p.lead{color:var(--on-dark-muted);max-width:60ch}
.track-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin-top:var(--space-6)}
.track-item{border:1px solid var(--border-dark);border-radius:var(--radius);padding:var(--space-3)}
.track-item b{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--on-dark);margin-bottom:4px}
.track-item span{font-size:var(--text-sm);color:var(--on-dark-muted)}

/* ---- Marco de puntos en las esquinas (bloques destacados) ---- */
.corner-dots{position:relative;background-image:
    radial-gradient(circle, var(--border-strong) 1.4px, transparent 1.4px),
    radial-gradient(circle, var(--border-strong) 1.4px, transparent 1.4px),
    radial-gradient(circle, var(--border-strong) 1.4px, transparent 1.4px),
    radial-gradient(circle, var(--border-strong) 1.4px, transparent 1.4px);
  background-size:6px 6px;
  background-repeat:no-repeat;
  background-position:top 14px left 14px, top 14px right 14px, bottom 14px left 14px, bottom 14px right 14px}
.corner-dots.corner-dots--dark{background-image:
    radial-gradient(circle, var(--border-dark) 1.4px, transparent 1.4px),
    radial-gradient(circle, var(--border-dark) 1.4px, transparent 1.4px),
    radial-gradient(circle, var(--border-dark) 1.4px, transparent 1.4px),
    radial-gradient(circle, var(--border-dark) 1.4px, transparent 1.4px)}

/* ---- Texto resaltado dentro de párrafos ---- */
.hl{color:var(--aw-coral);font-weight:var(--weight-semibold)}
.track .hl{color:#ffb3a8}

/* ---- Nota de fundadores (pull-quote) ---- */
.founder-note{max-width:52ch;margin:0 auto;text-align:center;padding:var(--space-6) var(--space-6)}
.founder-note p{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-xl);line-height:var(--leading-snug);color:var(--ink);letter-spacing:var(--tracking-tight)}
.founder-note cite{display:block;margin-top:var(--space-2);font-style:normal;font-size:var(--text-sm);color:var(--text-muted)}

/* ---- Proceso ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);counter-reset:step;position:relative}
.steps::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--border-strong)}
.step{position:relative;padding-top:var(--space-4)}
.step::after{content:"";position:absolute;top:-5px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-14px;left:18px;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint)}
.step h4{margin-bottom:4px}
.step p{color:var(--text-muted);font-size:var(--text-sm)}

/* ---- Qué no hacemos ---- */
.not-list{margin-top:var(--space-6);display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;padding-top:var(--space-4);border-top:1px solid var(--border)}
.not-list li{font-size:var(--text-sm);color:var(--text-faint);text-decoration:line-through;text-decoration-color:var(--aw-coral)}

/* ---- FAQ ---- */
.faq{max-width:64ch;margin:var(--space-6) auto 0;display:flex;flex-direction:column;gap:var(--space-2)}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3) var(--space-4);background:var(--surface)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-weight:var(--weight-semibold);color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font-family:var(--font-display);font-size:1.25rem;color:var(--text-faint);transition:transform .25s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin-top:var(--space-2);color:var(--text-muted);font-size:var(--text-sm)}

/* ---- CTA / contacto ---- */
.cta{background-color:var(--bg-alt);border-radius:var(--radius-lg);text-align:center;padding-block:var(--space-10)}
.cta h2{max-width:20ch;margin-inline:auto}
.cta .hero-actions{justify-content:center}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--border);padding-block:var(--space-6);font-size:var(--text-sm);color:var(--text-muted)}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}
.footer-legal{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--text-faint);line-height:1.5}

@media (max-width:860px){
  .pillars,.track-grid,.steps{grid-template-columns:1fr 1fr}
  .nav{display:none}
  .hero-blob{width:440px;height:440px;top:-120px;right:-170px;opacity:.12}
}
@media (max-width:560px){
  .pillars,.track-grid,.steps{grid-template-columns:1fr}
  .hero-stats{gap:var(--space-3)}
  .hero-blob{display:none}
}