/* =========================================================================
   FARIGEN — HOME DESIGN SYSTEM (v2, built from the logo)
   Loaded ONLY by index.html, after css/style.css.
   Every selector is prefixed .fg- so the shared components used by
   catalogo / producto / carrito / checkout / cuenta / admin are untouched.

   Derived from the logo:
   - Deep black canvas (the logo lives on black)
   - #FFC907 "energy yellow" reserved for action + accent
   - Angular / diagonal cuts echoing the bolt mark
   - Wide letter-spaced uppercase display type echoing the wordmark
   ========================================================================= */

.fg{
  --fg-black:    #050505;
  --fg-surface:  #0e0e0e;
  --fg-surface2: #141414;
  --fg-line:     #232323;
  --fg-white:    #ffffff;
  --fg-text:     #f2f2f0;
  --fg-muted:    #8f8f8a;
  --fg-yellow:   #FFC907;
  --fg-yellow-d: #e0ac00;
  --fg-ease:     cubic-bezier(.16,.84,.44,1);
  --fg-ease-out: cubic-bezier(.22,1,.36,1);

  background:var(--fg-black);
  color:var(--fg-text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
}

.fg *,.fg *::before,.fg *::after{ box-sizing:border-box; }
.fg img{ display:block; max-width:100%; }
.fg a{ color:inherit; text-decoration:none; }
.fg button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }

.fg-wrap{ max-width:1440px; margin:0 auto; padding:0 40px; }

/* ---------- Display type (echoes the wordmark) ---------- */
.fg-display{
  font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  line-height:1.05; margin:0;
}
.fg-h1{ font-size:clamp(1.9rem,3.6vw,3.1rem); letter-spacing:.12em; }
.fg-h2{ font-size:clamp(1.5rem,2.6vw,2.2rem); letter-spacing:.2em; }
.fg-kicker{
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--fg-yellow); font-weight:600; display:inline-block;
}
.fg-lede{ color:var(--fg-muted); font-size:1.02rem; line-height:1.6; letter-spacing:.01em; }

/* ---------- Angular button (bolt-inspired clipped corner) ---------- */
.fg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:16px 34px; font-size:.76rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition:transform .4s var(--fg-ease-out), background .3s var(--fg-ease), color .3s var(--fg-ease);
  position:relative; overflow:hidden;
}
.fg-btn::after{
  content:""; position:absolute; inset:0; background:var(--fg-white);
  transform:translateY(101%); transition:transform .4s var(--fg-ease-out);
}
.fg-btn > *{ position:relative; z-index:1; }
.fg-btn-solid{ background:var(--fg-yellow); color:var(--fg-black); }
.fg-btn-solid:hover::after{ transform:translateY(0); }
.fg-btn-ghost{ background:transparent; color:var(--fg-text); box-shadow:inset 0 0 0 1px var(--fg-line); }
.fg-btn-ghost:hover{ color:var(--fg-black); }
.fg-btn-ghost::after{ background:var(--fg-yellow); }
.fg-btn-ghost:hover::after{ transform:translateY(0); }
.fg-btn:active{ transform:scale(.97); }

/* ---------- Hero slider (near-full viewport) ---------- */
.fg-hero{ position:relative; height:56vh; min-height:360px; max-height:560px; overflow:hidden; background:var(--fg-black); }
.fg-slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity 1.1s var(--fg-ease);
}
.fg-slide.is-on{ opacity:1; pointer-events:auto; }
.fg-slide-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.04); filter:blur(6px);
  transition:transform 1.4s var(--fg-ease-out), filter 1.1s var(--fg-ease);
}
.fg-slide.is-on .fg-slide-img{ transform:scale(1); filter:blur(0); animation:fg-drift 9s var(--fg-ease-out) forwards; }
@keyframes fg-drift{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.fg-slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(5,5,5,.95) 0%, rgba(5,5,5,.72) 42%, rgba(5,5,5,.15) 100%);
}
.fg-slide-body{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  max-width:640px;
}
.fg-slide-body > *{ opacity:0; transform:translateY(26px); }
.fg-slide.is-on .fg-slide-body > *{ animation:fg-rise .9s var(--fg-ease-out) forwards; }
.fg-slide.is-on .fg-slide-body > *:nth-child(1){ animation-delay:.16s; }
.fg-slide.is-on .fg-slide-body > *:nth-child(2){ animation-delay:.28s; }
.fg-slide.is-on .fg-slide-body > *:nth-child(3){ animation-delay:.40s; }
.fg-slide.is-on .fg-slide-body > *:nth-child(4){ animation-delay:.52s; }
@keyframes fg-rise{ to{ opacity:1; transform:translateY(0); } }
.fg-slide-title{ margin:12px 0 10px; color:var(--fg-white); }
.fg-slide-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }

/* slider controls */
.fg-slide-ctas .fg-btn{ padding:13px 26px; font-size:.72rem; }
.fg-slide-body .fg-lede{ font-size:.94rem; }
.fg-hero-nav{
  position:absolute; left:0; right:0; bottom:22px; z-index:5;
  display:flex; align-items:center; gap:18px;
}
.fg-dots{ display:flex; gap:10px; flex:1; }
.fg-dot{ width:38px; height:3px; background:rgba(255,255,255,.22); position:relative; overflow:hidden; }
.fg-dot span{ position:absolute; inset:0; background:var(--fg-yellow); transform:scaleX(0); transform-origin:left; }
.fg-dot.is-on span{ animation:fg-fill 7s linear forwards; }
@keyframes fg-fill{ to{ transform:scaleX(1); } }
.fg-arrows{ display:flex; gap:8px; }
.fg-arrow{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:var(--fg-white);
  transition:background .3s var(--fg-ease), color .3s var(--fg-ease);
}
.fg-arrow:hover{ background:var(--fg-yellow); color:var(--fg-black); }
.fg-hero-count{ font-size:.72rem; letter-spacing:.3em; color:var(--fg-muted); }
.fg-hero-count b{ color:var(--fg-white); font-weight:600; }

/* ---------- Section shell ---------- */
.fg-sec{ padding:104px 0; }
.fg-sec-tight{ padding:64px 0; }
.fg-sec-chips{ padding:26px 0 22px; }
.fg-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:52px; flex-wrap:wrap; }
.fg-sec-head h2{ margin:16px 0 0; color:var(--fg-white); }
.fg-link{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:10px; color:var(--fg-text);
  transition:color .3s var(--fg-ease);
}
.fg-link:hover{ color:var(--fg-yellow); }
.fg-link i{ width:22px; height:1px; background:currentColor; transition:width .3s var(--fg-ease-out); display:inline-block; }
.fg-link:hover i{ width:34px; }

/* ---------- Category chips (horizontal, quick-filter) ---------- */
.fg-chips{ display:flex; gap:12px; flex-wrap:wrap; }
.fg-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  box-shadow:inset 0 0 0 1px var(--fg-line); color:var(--fg-muted);
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:color .3s var(--fg-ease), box-shadow .3s var(--fg-ease), background .3s var(--fg-ease);
}
.fg-chip svg{ width:15px; height:15px; }
.fg-chip:hover{ color:var(--fg-text); box-shadow:inset 0 0 0 1px var(--fg-muted); }
.fg-chip.is-on{ background:var(--fg-yellow); color:var(--fg-black); box-shadow:none; }

/* ---------- Product card (big, image-first) ---------- */
.fg-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.fg-card{
  background:var(--fg-surface); position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .5s var(--fg-ease-out), background .4s var(--fg-ease);
}
.fg-card::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--fg-line);
  transition:box-shadow .4s var(--fg-ease);
}
.fg-card:hover{ transform:translateY(-8px); background:var(--fg-surface2); }
.fg-card:hover::before{ box-shadow:inset 0 0 0 1px rgba(255,201,7,.4); }
.fg-card-media{
  aspect-ratio:1; position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 45%, #1c1c1a 0%, #0b0b0b 72%);
  display:flex; align-items:center; justify-content:center;
}
.fg-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--fg-ease-out); }
.fg-card-media svg{ width:38%; height:38%; color:var(--fg-yellow); opacity:.9; transition:transform .7s var(--fg-ease-out); }
.fg-card:hover .fg-card-media img, .fg-card:hover .fg-card-media svg{ transform:scale(1.08); }
.fg-tag{
  position:absolute; top:0; left:0; z-index:2;
  background:var(--fg-yellow); color:var(--fg-black);
  font-size:.6rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:8px 16px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.fg-card-body{ padding:24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.fg-card-brand{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-muted); }
.fg-card-name{ font-size:1.02rem; font-weight:600; color:var(--fg-white); line-height:1.35; margin:0; }
.fg-card-price{
  font-size:1.5rem; font-weight:700; color:var(--fg-white); letter-spacing:.01em; margin-top:6px;
}
.fg-card-price small{ font-size:.72rem; color:var(--fg-muted); font-weight:500; display:block; letter-spacing:.06em; margin-top:2px; }
.fg-card-actions{ display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:18px; }
.fg-buy{
  background:var(--fg-yellow); color:var(--fg-black);
  padding:14px; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:background .3s var(--fg-ease);
}
.fg-buy:hover{ background:var(--fg-white); }
.fg-addcart{
  width:50px; display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--fg-line); color:var(--fg-text);
  transition:background .3s var(--fg-ease), color .3s var(--fg-ease);
}
.fg-addcart:hover{ background:var(--fg-yellow); color:var(--fg-black); }
.fg-addcart svg{ width:17px; height:17px; }

/* ---------- Split feature band ---------- */
.fg-split{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.fg-split-media{ min-height:440px; background-size:cover; background-position:center; position:relative; }
.fg-split-body{ background:var(--fg-surface); padding:72px 64px; display:flex; flex-direction:column; justify-content:center; }
.fg-split-body h2{ color:var(--fg-white); margin:18px 0 18px; }

/* ---------- Trust rail ---------- */
.fg-trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--fg-line); }
.fg-trust-cell{ padding:38px 30px; border-right:1px solid var(--fg-line); transition:background .4s var(--fg-ease); }
.fg-trust-cell:last-child{ border-right:0; }
.fg-trust-cell:hover{ background:var(--fg-surface); }
.fg-trust-cell svg{ width:22px; height:22px; color:var(--fg-yellow); margin-bottom:16px; }
.fg-trust-cell strong{ display:block; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-white); margin-bottom:8px; }
.fg-trust-cell span{ font-size:.84rem; color:var(--fg-muted); line-height:1.5; }

/* ---------- Closing CTA ---------- */
.fg-close{ text-align:center; padding:120px 0; position:relative; overflow:hidden; }
.fg-close::before{
  content:""; position:absolute; left:50%; top:50%; width:760px; height:760px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,201,7,.13), transparent 66%);
}
.fg-close > *{ position:relative; z-index:1; }
.fg-close h2{ color:var(--fg-white); margin:20px auto 20px; max-width:16ch; }
.fg-close .fg-lede{ max-width:46ch; margin:0 auto 34px; }

/* ---------- Reveal on scroll ---------- */
.fg-rv{ opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .9s var(--fg-ease-out), transform .9s var(--fg-ease-out), filter .9s var(--fg-ease-out); }
.fg-rv.in{ opacity:1; transform:translateY(0); filter:blur(0); }
.fg-rv-d1{ transition-delay:.08s; } .fg-rv-d2{ transition-delay:.16s; }
.fg-rv-d3{ transition-delay:.24s; } .fg-rv-d4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  .fg *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .fg-rv{ opacity:1; transform:none; filter:none; }
  .fg-slide-body > *{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .fg-grid{ grid-template-columns:repeat(3,1fr); }
  .fg-trust{ grid-template-columns:repeat(2,1fr); }
  .fg-trust-cell:nth-child(2){ border-right:0; }
}
@media (max-width:880px){
  .fg-wrap{ padding:0 24px; }
  .fg-hero{ height:54vh; min-height:340px; }
  .fg-slide::after{ background:linear-gradient(0deg, rgba(5,5,5,.96) 8%, rgba(5,5,5,.6) 55%, rgba(5,5,5,.3) 100%); }
  .fg-slide-body{ max-width:100%; justify-content:flex-end; padding-bottom:84px; }
  .fg-sec{ padding:72px 0; }
  .fg-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .fg-split{ grid-template-columns:1fr; }
  .fg-split-media{ min-height:280px; }
  .fg-split-body{ padding:48px 28px; }
  .fg-card-body{ padding:18px; }
  .fg-card-price{ font-size:1.25rem; }
}
@media (max-width:520px){
  .fg-wrap{ padding:0 16px; }
  .fg-card-actions{ grid-template-columns:1fr; }
  .fg-addcart{ width:100%; height:46px; }
  .fg-trust{ grid-template-columns:1fr; }
  .fg-trust-cell{ border-right:0; border-bottom:1px solid var(--fg-line); }
  .fg-slide-ctas{ flex-direction:column; gap:8px; }
  .fg-slide-ctas .fg-btn{ text-align:center; justify-content:center; }
  .fg-hero-nav{ padding:0 16px 18px; }
  .fg-display.fg-h1{ font-size:clamp(1.5rem,6vw,2.2rem); }
}

/* ---------- Shop bar: compact head sitting right under the hero ---------- */
.fg-shop-bar{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:20px;
}
.fg-shop-titles h2{ margin:8px 0 0; color:var(--fg-white); }
@media (max-width:880px){
  .fg-sec-chips{ padding:22px 0 18px; }
  .fg-shop-bar{ margin-bottom:16px; }
  .fg-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; }
  .fg-chips::-webkit-scrollbar{ display:none; }
  .fg-chip{ flex:0 0 auto; }
}

/* 360° availability badge on product cards */
.fg-360{
  position:absolute; bottom:12px; right:12px; z-index:2;
  background:rgba(5,5,5,.82); color:var(--fg-yellow); backdrop-filter:blur(4px);
  font-size:.58rem; font-weight:700; letter-spacing:.14em; padding:6px 11px;
}