/* ============================================================
   KOAI Studios · Claridad Premium — design system (template build)
   Implementado desde el proyecto Claude Designs de Jesús.
   Light-first · Inter (Light/300 en títulos) + Instrument Serif itálica
   morada para UNA palabra clave · morado #7B2D8E con moderación ·
   lima #D4E94B solo un dato/CTA · mucho aire.
   ============================================================ */

:root{
  /* palette */
  --koai-white:#FFFFFF; --koai-surface:#F6F7F9; --koai-ink:#1A1A1A; --koai-ink-soft:#5F6368;
  --koai-line:#ECECEC; --koai-purple:#7B2D8E; --koai-lime:#D4E94B; --koai-noir:#0D0D0D;
  --koai-purple-700:#5F1F70; --koai-purple-600:#7B2D8E; --koai-purple-100:#F3E9F6;
  /* semantic */
  --canvas:var(--koai-white); --surface-card:var(--koai-surface); --surface-noir:var(--koai-noir); --surface-purple:var(--koai-purple-100);
  --text-primary:var(--koai-ink); --text-secondary:var(--koai-ink-soft); --text-accent:var(--koai-purple);
  --border-hairline:var(--koai-line); --border-card:var(--koai-line);
  --accent:var(--koai-purple); --accent-strong:var(--koai-purple-700); --energy:var(--koai-lime);
  --focus-ring:var(--koai-purple);
  /* type */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600;
  --tracking-tight:-0.02em; --tracking-kicker:0.16em;
  /* spacing / radius / shadow / motion */
  --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --shadow-soft:0 1px 2px rgba(13,13,13,.04); --shadow-card:0 2px 8px rgba(13,13,13,.05);
  --shadow-mockup:0 12px 40px rgba(13,13,13,.08); --shadow-lift:0 8px 24px rgba(13,13,13,.07);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-soft:cubic-bezier(0.4,0,0.2,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms;
  --wrap:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--font-sans);
  font-weight:var(--weight-regular);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
h1,h2,h3,h4{font-weight:var(--weight-light);letter-spacing:var(--tracking-tight);margin:0}
::selection{background:var(--energy);color:var(--koai-ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:32px}

/* accent word — serif italic purple, UNA palabra clave */
.accent{font-family:var(--font-serif);font-style:italic;font-weight:var(--weight-regular);color:var(--text-accent)}
/* kicker */
.kicker{font-size:14px;font-weight:var(--weight-medium);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--text-secondary)}
/* lima underline behind a number/word */
.energy-underline{box-shadow:inset 0 -8px 0 var(--energy);width:fit-content}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:var(--weight-medium);
  font-size:15px;line-height:1;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
  transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft),border-color var(--dur-base) var(--ease-soft),opacity var(--dur-base) var(--ease-soft);
  padding:0 24px;height:48px;white-space:nowrap}
.btn.sm{height:44px;font-size:14px;padding:0 20px}
.btn.md{height:52px;font-size:15px;padding:0 28px}
.btn.block{width:100%}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-strong);color:#fff}
.btn-secondary{background:var(--canvas);color:var(--text-primary);border-color:var(--border-card)}
.btn-secondary:hover{border-color:var(--text-primary);color:var(--text-primary)}
.btn-energy{background:var(--energy);color:var(--koai-ink)}
.btn-energy:hover{filter:brightness(0.96);color:var(--koai-ink)}
.btn-ghost{background:#fff;color:var(--text-primary);border-color:var(--border-hairline)}
.btn-ghost:hover{border-color:var(--text-primary);color:var(--text-primary)}

/* badge */
.badge{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:var(--weight-medium);line-height:1}
.badge-energy{background:var(--energy);color:var(--koai-ink)}

/* card */
.card{border:1px solid var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);background:var(--canvas)}

/* image slot placeholder (used where no real photo maps) */
.imgslot{width:100%;height:100%;background:var(--surface-card);display:flex;align-items:center;justify-content:center;
  color:#AEB2B8;font-size:12.5px;letter-spacing:.04em;text-align:center;padding:12px}
.imgslot.cover img{width:100%;height:100%;object-fit:cover}

/* promo bar */
.promo{background:var(--surface-purple);display:flex;align-items:center;justify-content:center;gap:10px;height:42px;
  font-size:13px;letter-spacing:.01em;color:var(--accent-strong);text-align:center;padding:0 16px}
.promo .dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--energy);display:inline-block;flex:none}
.promo strong{font-weight:600}

/* header */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-hairline)}
.head-row{display:flex;align-items:center;gap:32px;height:84px}
.head-logo{display:flex;align-items:center;flex:0 0 auto}
.head-logo img{height:40px;width:auto;display:block}
.search{flex:1 1 auto;max-width:520px;position:relative}
.search-box{display:flex;align-items:center;gap:10px;height:46px;padding:0 18px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);background:var(--surface-card)}
.search-box input{flex:1;border:0;outline:none;background:transparent;font-family:inherit;font-size:14.5px;color:var(--text-primary)}
.sugg{position:absolute;top:54px;left:0;right:0;background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-lift);padding:8px;z-index:50}
.sugg a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);font-size:14px;color:var(--text-primary)}
.sugg a:hover{background:var(--surface-card)}
.sugg a span:last-child{font-size:12.5px;color:var(--text-secondary)}
.head-right{flex:0 0 auto;display:flex;align-items:center;gap:22px;margin-left:auto}
.lang{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill)}
.lang button{height:30px;padding:0 13px;border:0;border-radius:var(--radius-pill);cursor:pointer;font-family:inherit;font-size:12.5px;letter-spacing:.04em;background:transparent;color:var(--text-secondary)}
.lang button.on{background:var(--accent);color:#fff}
.head-link{font-size:14px;color:var(--text-secondary)}
.head-link:hover{color:var(--text-primary)}
.head-nav-row{border-top:1px solid var(--border-hairline)}
.head-nav{display:flex;align-items:center;gap:34px;height:52px;font-size:14px;color:var(--text-secondary);position:relative}
.head-nav .navitem{display:flex;align-items:center;gap:7px;height:100%;cursor:pointer;color:var(--text-primary)}
.head-nav .navitem svg{opacity:.6}
.head-nav a{color:var(--text-secondary);height:100%;display:flex;align-items:center}
.head-nav a:hover{color:var(--text-primary)}
.head-nav .active{color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--accent)}
.head-nav .deals{color:var(--accent);margin-left:auto}
.head-nav .deals:hover{color:var(--accent-strong)}
@media(max-width:900px){.head-nav-row{display:none}.search{max-width:none}}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--border-hairline);box-shadow:var(--shadow-lift);z-index:45;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:40px 32px 44px;display:grid;grid-template-columns:1fr 1fr 1fr 300px;gap:48px}
.mega col,.mega-col{display:flex;flex-direction:column;gap:14px}
.mega-col .h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.mega-col a{font-size:14.5px;color:var(--text-primary)}
.mega-col a:hover{color:var(--accent)}
.mega-promo{background:var(--surface-card);border-radius:var(--radius-md);padding:22px;display:flex;flex-direction:column;gap:14px}
.mega-promo .ph{height:120px;border-radius:var(--radius-sm);overflow:hidden}

/* footer */
.foot{border-top:1px solid var(--border-hairline)}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:48px;padding:72px 0 40px}
.foot-brand img{height:38px;width:auto;margin-bottom:18px}
.foot-brand p{margin:0;font-size:14px;line-height:1.6;color:var(--text-secondary);max-width:260px}
.foot-col .fh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:var(--weight-medium);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:14px;color:var(--text-primary);padding:6px 0}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--border-hairline);padding:26px 0 44px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;color:var(--text-secondary)}
.foot-bottom .legal{display:flex;gap:26px}
.foot-bottom .legal a{color:var(--text-secondary)}
.foot-bottom .legal a:hover{color:var(--text-primary)}
@media(max-width:900px){.foot-cols{grid-template-columns:1fr 1fr;gap:32px}.foot-brand{grid-column:span 2}}

/* toast */
.toast{position:fixed;right:28px;bottom:28px;z-index:90;background:var(--text-primary);color:#fff;padding:16px 22px;border-radius:var(--radius-md);
  font-size:14px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lift);opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.toast.show{opacity:1;transform:none}
.toast .dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--energy)}

/* generic reveal (calm fade) */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.rv{opacity:1;transform:none;transition:none}}

@media(max-width:820px){
  .wrap{padding-inline:20px}
  .foot-cols{grid-template-columns:1fr}.foot-brand{grid-column:span 1}
}