/* ============================================================
   EMIC Store — design system
   Tokens y componentes derivados del pitch deck (deck.html).
   Autónomo: NO depende del pipeline de Tailwind.
   ============================================================ */

/* ---------- Fuentes ---------- */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('/fonts/store/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('/fonts/store/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('/fonts/store/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('/fonts/store/inter-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url('/fonts/store/inter-800.woff2') format('woff2');}
@font-face{font-family:'Grotesk';font-weight:500;font-display:swap;src:url('/fonts/store/grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Grotesk';font-weight:600;font-display:swap;src:url('/fonts/store/grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Grotesk';font-weight:700;font-display:swap;src:url('/fonts/store/grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Mono';font-weight:400;font-display:swap;src:url('/fonts/store/mono-400.woff2') format('woff2');}
@font-face{font-family:'Mono';font-weight:600;font-display:swap;src:url('/fonts/store/mono-600.woff2') format('woff2');}

/* ---------- Tokens ---------- */
:root{
  --st-red:#E51C21; --st-red-600:#C71318; --st-red-700:#A60F14; --st-red-50:#FCEBEC; --st-red-100:#F9D5D7;
  --st-ink:#0E1626; --st-navy:#0F1A30; --st-navy-2:#16223D; --st-navy-3:#1E2D4D; --st-navy-line:#2A3A5C;
  --st-slate:#4C566E; --st-muted:#7C879C; --st-faint:#A9B2C4;
  --st-line:#E5E9F0; --st-line-2:#EEF1F6;
  --st-paper:#FFFFFF; --st-paper-2:#F6F8FB; --st-paper-3:#EFF3F8;
  --st-green:#159A66; --st-green-50:#E5F5EE;
  --st-amber:#C98A00; --st-amber-50:#FBF3DD;
  --st-radius:14px;
}

/* ---------- Base ---------- */
.store-body{margin:0;background:var(--st-paper);color:var(--st-ink);
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;}
.store-body *{box-sizing:border-box;}
.store-body a{color:inherit;text-decoration:none;}
.store-body img{max-width:100%;display:block;}

.st-mono{font-family:'Mono',monospace;}
.st-disp{font-family:'Grotesk','Inter',sans-serif;}

.st-container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.st-header{border-bottom:1px solid var(--st-line);background:var(--st-paper);position:sticky;top:0;z-index:50;}
.st-header-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px;}
.st-logo{height:26px;width:auto;}
.st-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600;color:var(--st-slate);}
.st-nav a:hover{color:var(--st-ink);}
.st-nav .active{color:var(--st-red);}
.st-lang{display:flex;gap:4px;font-family:'Mono';font-size:12px;font-weight:600;letter-spacing:.06em;}
.st-lang a{padding:4px 8px;border-radius:6px;color:var(--st-muted);text-transform:uppercase;}
.st-lang a.active{background:var(--st-paper-3);color:var(--st-ink);}
.st-lang a:hover{color:var(--st-ink);}

/* barra roja de marca */
.st-topbar{height:4px;background:linear-gradient(90deg,var(--st-red),#F0593F);}

/* ---------- Footer ---------- */
.st-footer{border-top:1px solid var(--st-line);margin-top:72px;padding:28px 0 36px;
  font-size:13px;color:var(--st-muted);}
.st-footer-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.st-footer img{height:18px;}

/* ---------- Tipografía ---------- */
.st-kicker{display:inline-flex;align-items:center;gap:10px;font-family:'Mono';font-weight:600;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--st-red);}
.st-kicker::before{content:"";width:26px;height:2px;background:var(--st-red);display:inline-block;}
.st-h1{font-family:'Grotesk';font-weight:700;font-size:clamp(30px,4.5vw,46px);line-height:1.06;
  letter-spacing:-.018em;color:var(--st-ink);margin:14px 0 0;}
.st-h2{font-family:'Grotesk';font-weight:700;font-size:clamp(22px,3vw,30px);line-height:1.1;
  letter-spacing:-.015em;color:var(--st-ink);margin:12px 0 0;}
.st-lead{font-size:17.5px;line-height:1.55;color:var(--st-slate);max-width:820px;margin:16px 0 0;}
.st-em{color:var(--st-red);}

/* ---------- Componentes ---------- */
.st-card{background:var(--st-paper);border:1px solid var(--st-line);border-radius:var(--st-radius);}
.st-card-soft{background:var(--st-paper-2);}

.st-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:600;white-space:nowrap;}
.st-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;}
.st-chip-red{background:var(--st-red-50);color:var(--st-red-700);}
.st-chip-green{background:var(--st-green-50);color:var(--st-green);}
.st-chip-amber{background:var(--st-amber-50);color:var(--st-amber);}
.st-chip-ink{background:var(--st-paper-3);color:var(--st-slate);}

.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 22px;
  border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;}
.st-btn-primary{background:var(--st-red);color:#fff;}
.st-btn-primary:hover{background:var(--st-red-600);}
.st-btn-ghost{border-color:var(--st-line);color:var(--st-ink);background:var(--st-paper);}
.st-btn-ghost:hover{border-color:var(--st-faint);}
.st-btn[aria-disabled="true"]{opacity:.45;pointer-events:none;}

/* ---------- Breadcrumbs ---------- */
.st-crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--st-muted);
  margin:22px 0 6px;flex-wrap:wrap;}
.st-crumbs a:hover{color:var(--st-ink);}
.st-crumbs .sep{color:var(--st-faint);}

/* ---------- Hero (home) ---------- */
.st-hero{background:
  radial-gradient(1100px 620px at 82% -8%, #21325A 0%, rgba(33,50,90,0) 60%),
  radial-gradient(820px 520px at 6% 108%, #1A2742 0%, rgba(26,39,66,0) 58%),
  linear-gradient(160deg,#0F1A30 0%,#0C1426 100%);
  color:#fff;position:relative;overflow:hidden;}
.st-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.1px,transparent 1.1px);background-size:26px 26px;}
.st-hero-in{position:relative;z-index:1;padding:64px 0 56px;}
.st-hero .st-h1{color:#fff;max-width:900px;}
.st-hero .st-lead{color:#AEB9CE;}
.st-hero .st-lead b{color:#EAEFF7;}

.st-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;}
.st-stat{background:rgba(255,255,255,.04);border:1px solid var(--st-navy-line);border-radius:13px;padding:14px 20px;}
.st-stat .v{font-family:'Grotesk';font-weight:700;font-size:26px;color:#fff;}
.st-stat .v em{font-style:normal;color:var(--st-red);}
.st-stat .k{font-size:12.5px;color:#8A93A8;margin-top:2px;}

/* ---------- Caminos (home) ---------- */
.st-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.st-path{padding:26px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:190px;}
.st-path .n{font-family:'Mono';font-size:12px;color:var(--st-red);font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.st-path .t{font-family:'Grotesk';font-weight:700;font-size:22px;}
.st-path p{font-size:14px;line-height:1.5;color:var(--st-slate);margin:0;flex:1;}
.st-path .deco{position:absolute;right:-12px;top:-12px;width:74px;height:74px;border-radius:50%;background:var(--st-red-50);}
a.st-path{transition:border-color .15s, box-shadow .15s;}
a.st-path:hover{border-color:#F1C9C5;box-shadow:0 10px 30px -18px rgba(15,26,48,.35);}
.st-path.disabled{opacity:.62;}

/* ---------- Grillas de catálogo ---------- */
.st-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:26px;}
.st-mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px;margin-top:22px;}

.st-mod-card{display:flex;flex-direction:column;overflow:hidden;transition:border-color .15s, box-shadow .15s;}
.st-mod-card:hover{border-color:#F1C9C5;box-shadow:0 12px 32px -20px rgba(15,26,48,.4);}
.st-mod-img{background:var(--st-paper-2);border-bottom:1px solid var(--st-line-2);aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;padding:18px;}
.st-mod-img img{max-height:100%;object-fit:contain;mix-blend-mode:multiply;}
.st-mod-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.st-mod-body .sku{font-family:'Mono';font-size:11px;letter-spacing:.06em;color:var(--st-muted);}
.st-mod-body .name{font-family:'Grotesk';font-weight:700;font-size:17px;line-height:1.2;}
.st-mod-body .desc{font-size:13px;color:var(--st-slate);line-height:1.45;flex:1;}
.st-price{font-family:'Grotesk';font-weight:700;font-size:18px;color:var(--st-ink);}
.st-price .cur{font-size:12.5px;color:var(--st-muted);font-weight:600;margin-right:4px;}
.st-price .from{font-size:12px;color:var(--st-muted);font-weight:500;}
.st-price-ask{font-size:13.5px;font-weight:600;color:var(--st-amber);}

/* ---------- Ficha de módulo ---------- */
.st-detail{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;margin-top:26px;align-items:start;}
.st-detail-img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:30px;}
.st-detail-img img{max-height:100%;object-fit:contain;mix-blend-mode:multiply;}
.st-price-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px;}
.st-price-table th{font-family:'Mono';font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  text-align:left;color:var(--st-slate);background:var(--st-paper-3);padding:9px 12px;border-bottom:1.5px solid var(--st-ink);}
.st-price-table td{padding:10px 12px;border-bottom:1px solid var(--st-line);}
.st-price-table td.num{text-align:right;font-family:'Mono';white-space:nowrap;font-weight:600;}
.st-note{border-left:3px solid var(--st-red);background:var(--st-red-50);border-radius:0 8px 8px 0;
  padding:12px 16px;margin-top:18px;font-size:13.5px;color:var(--st-slate);line-height:1.5;}
.st-note b{color:var(--st-red-700);}

/* ---------- Secciones ---------- */
.st-section{margin-top:56px;}
.st-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.st-seeall{font-size:14px;font-weight:600;color:var(--st-red);white-space:nowrap;}
.st-seeall:hover{color:var(--st-red-700);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .st-stats{grid-template-columns:repeat(2,1fr);}
  .st-paths{grid-template-columns:1fr;}
  .st-detail{grid-template-columns:1fr;}
  .st-nav{display:none;}
}