/* ============================================================
   Mac3D — main.css
   Ubicación: /home/macdcom/mac3d.xyz/backend/assets/css/main.css
   ============================================================ */

/* ── IMPORTS ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── VARIABLES ── */
:root {
  --bg-dark:    #1E1F1C;
  --bg-dark2:   #272820;
  --bg-light:   #F5F4EF;
  --bg-light2:  #ECEAE3;
  --bg-white:   #FAFAF7;

  --text-dark:  #1A1B18;
  --text-mid:   #52524A;
  --text-light: #F0EFE8;
  --text-muted: #9A9990;

  --orange:     #D94F1E;
  --orange2:    #E86332;
  --orange3:    #FF7A50;
  --o-bg:       #FBF0EB;

  --border-dk:  rgba(240,239,232,.10);
  --border-lt:  rgba(26,27,24,.10);

  --fd: 'Bricolage Grotesque', sans-serif;
  --fb: 'Inter', sans-serif;
  --fm: 'JetBrains Mono', monospace;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: var(--fb); }

/* ── CURSOR ── */
.cur {
  position: fixed; width: 9px; height: 9px;
  background: var(--orange); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .14s, width .2s, height .2s;
}
.cur-r {
  position: fixed; width: 34px; height: 34px;
  border: 1.5px solid var(--orange); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%); opacity: .45;
  transition: width .38s cubic-bezier(.16,1,.3,1),
              height .38s cubic-bezier(.16,1,.3,1);
}
.cur.big   { transform: translate(-50%,-50%) scale(2.2); }
.cur-r.big { width: 52px; height: 52px; opacity: .6; }
.cur.dk    { background: var(--text-dark); }
.cur-r.dk  { border-color: var(--text-dark); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 64px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 48px;
  background: rgba(30,31,28,.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-dk);
}
.logo {
  font-family: var(--fd); font-size: 1.45rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--text-light); text-decoration: none;
}
.logo span { color: var(--orange); }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-size: .85rem; font-weight: 500;
  color: rgba(240,239,232,.45); text-decoration: none;
  letter-spacing: .01em; transition: color .18s;
}
.nav-links a:hover { color: var(--text-light); }
.nav-taller {
  border: 1px solid rgba(217,79,30,.4);
  padding: .3rem .9rem; border-radius: 5px;
  color: var(--orange) !important;
}
.nav-taller:hover { background: rgba(217,79,30,.1) !important; }
.nav-r { display: flex; gap: .7rem; align-items: center; }
.btn-nav {
  font-size: .82rem; font-weight: 500;
  color: rgba(240,239,232,.5); background: none;
  border: 1px solid rgba(240,239,232,.15);
  padding: .38rem 1rem; border-radius: 5px;
  cursor: none; transition: all .18s; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-nav:hover { color: var(--text-light); border-color: rgba(240,239,232,.35); }
.btn-nav-cta {
  font-size: .82rem; font-weight: 600; color: #fff;
  background: var(--orange); border: none;
  padding: .4rem 1.1rem; border-radius: 5px;
  cursor: none; transition: all .18s; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-nav-cta:hover { background: var(--orange2); transform: translateY(-1px); }
.nav-avatar { display: flex; align-items: center; cursor: none; }
.nav-avatar-initials {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-size: .65rem; font-weight: 500;
}

/* ── BOTONES COMPARTIDOS ── */
.btn-or {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--fb); font-size: .95rem; font-weight: 600;
  background: var(--orange); color: #fff; border: none;
  padding: .88rem 1.9rem; border-radius: 7px;
  cursor: none; transition: all .2s; text-decoration: none;
}
.btn-or:hover { background: var(--orange2); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217,79,30,.3); }
.btn-or .a, .btn-wh .a, .btn-dk .a { transition: transform .2s; }
.btn-or:hover .a, .btn-wh:hover .a, .btn-dk:hover .a { transform: translateX(4px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 500;
  color: rgba(240,239,232,.6);
  border: 1.5px solid rgba(240,239,232,.18);
  padding: .86rem 1.9rem; border-radius: 7px;
  cursor: none; transition: all .2s; text-decoration: none; background: none;
}
.btn-outline:hover { color: var(--text-light); border-color: rgba(240,239,232,.45); }

.btn-dk {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 600;
  background: var(--text-dark); color: var(--bg-light);
  border: none; padding: .88rem 1.9rem; border-radius: 7px;
  cursor: none; transition: all .2s; text-decoration: none;
}
.btn-dk:hover { background: #2c2d29; transform: translateY(-2px); }

.btn-ghost-lt {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 500; color: var(--text-mid);
  border: 1.5px solid var(--border-lt);
  padding: .86rem 1.9rem; border-radius: 7px;
  cursor: none; transition: all .2s; text-decoration: none; background: none;
}
.btn-ghost-lt:hover { color: var(--text-dark); border-color: rgba(26,27,24,.3); }

.btn-wh {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 700; background: #fff; color: var(--orange);
  border: none; padding: .9rem 2.1rem; border-radius: 7px;
  cursor: none; transition: all .2s; text-decoration: none;
}
.btn-wh:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(26,27,24,.15); }

.btn-ghost-wh {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.75);
  border: 1.5px solid rgba(255,255,255,.28);
  padding: .86rem 2.1rem; border-radius: 7px;
  cursor: none; transition: all .2s; text-decoration: none; background: none;
}
.btn-ghost-wh:hover { color: #fff; border-color: rgba(255,255,255,.6); }

.lnk {
  font-size: .9rem; font-weight: 500; color: var(--text-mid);
  text-decoration: none; display: inline-flex; align-items: center;
  gap: .4rem; transition: color .2s;
}
.lnk:hover { color: var(--text-dark); }
.lnk.lt { color: rgba(240,239,232,.4); }
.lnk.lt:hover { color: var(--text-light); }
.lnk .a { transition: transform .2s; }
.lnk:hover .a { transform: translateX(4px); }

/* ── HERO ── */
.hero {
  min-height: 88vh; padding-top: 64px;
  display: grid; grid-template-columns: 52% 48%;
  background: var(--bg-dark); overflow: hidden;
}
.hero-l {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 3rem 4rem 48px;
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(217,79,30,.14);
  border: 1px solid rgba(217,79,30,.28); border-radius: 100px;
  padding: .3rem 1rem .3rem .65rem; margin-bottom: 2.5rem;
  opacity: 0; animation: up .65s .05s forwards;
}
.hero-tag-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; }
.hero-tag-txt {
  font-family: var(--fm); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange3);
}
.hero-h {
  font-family: var(--fd);
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
  font-weight: 800; line-height: .97; letter-spacing: -.03em;
  color: var(--text-light); margin-bottom: 1.4rem;
  opacity: 0; animation: up .85s .18s forwards;
}
.hero-h span { color: var(--orange); }
.hero-p {
  font-size: 1rem; font-weight: 400; line-height: 1.68;
  color: rgba(240,239,232,.58); max-width: 400px; margin-bottom: 1.8rem;
  opacity: 0; animation: up .85s .32s forwards;
}
.hero-p strong { color: var(--text-light); font-weight: 600; }
.hero-pills {
  display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.8rem;
  opacity: 0; animation: up .85s .44s forwards;
}
.pill {
  font-family: var(--fm); font-size: .62rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .75rem; border: 1px solid var(--border-dk);
  border-radius: 100px; color: rgba(240,239,232,.4);
}
.pill.hi { border-color: rgba(217,79,30,.3); color: var(--orange3); }
.hero-ctas {
  display: flex; gap: 1rem; align-items: center; margin-bottom: 2.5rem;
  opacity: 0; animation: up .85s .55s forwards;
}
.hero-nums {
  display: flex; border: 1px solid var(--border-dk); border-radius: 8px;
  overflow: hidden; opacity: 0; animation: up .85s .68s forwards;
}
.hn { flex: 1; padding: .9rem 1.2rem; border-right: 1px solid var(--border-dk); }
.hn:last-child { border-right: none; }
.hn-n {
  font-family: var(--fd); font-size: 2rem; font-weight: 800;
  color: var(--text-light); line-height: 1; letter-spacing: -.03em;
}
.hn-n span { color: var(--orange); }
.hn-l {
  font-family: var(--fm); font-size: .62rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,239,232,.35); margin-top: .2rem;
}

/* Hero right — image wall */
.hero-r { background: var(--bg-light2); position: relative; overflow: hidden; }
.hero-r::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 80px; height: 100%;
  background: linear-gradient(to right, var(--bg-dark), transparent);
  z-index: 10; pointer-events: none;
}
.wall {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; padding: 4px;
  animation: drift 28s linear infinite;
}
@keyframes drift { 0% { transform: translateY(0); } 100% { transform: translateY(-33.33%); } }
.wc { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--bg-light); }
.wc-art {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.wc:hover .wc-art { transform: scale(1.07); }
.wc-art svg { width: 50%; height: 50%; opacity: .25; transition: opacity .3s; }
.wc:hover .wc-art svg { opacity: .45; }
.wc-ov {
  position: absolute; inset: 0; background: rgba(217,79,30,.06);
  opacity: 0; transition: opacity .3s;
}
.wc:hover .wc-ov { opacity: 1; }

/* ── STRIP ── */
.strip { background: var(--orange); padding: 1.05rem 0; overflow: hidden; }
.strip-inner {
  display: flex; gap: 3rem;
  animation: sc 22s linear infinite;
  white-space: nowrap; align-items: center;
}
@keyframes sc { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.si {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--fb); font-size: .82rem; font-weight: 600;
  color: rgba(255,255,255,.75); letter-spacing: .01em;
}
.si b { color: #fff; font-weight: 700; }
.si-dot { width: 4px; height: 4px; background: rgba(255,255,255,.5); border-radius: 50%; flex-shrink: 0; }

/* ── SECCIONES SHARED ── */
.wrap { padding: 8.5rem 48px; }
.sec-label {
  font-family: var(--fm); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange);
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
}
.sec-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--orange); }
.sec-label.lo3 { color: var(--orange3); }
.sec-label.lo3::before { background: var(--orange3); }
h2.sh {
  font-family: var(--fd); font-size: clamp(3rem, 4.2vw, 4rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.03em; color: var(--text-dark);
}
h2.sh span { color: var(--orange); }
h2.sh.lt { color: var(--text-light); }
h2.sh.lt span { color: var(--orange3); }
.sec-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 4rem; }

/* ── HOW ── */
.how { background: var(--bg-light); }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; }
.step {
  background: var(--bg-white); padding: 3rem 2.5rem;
  position: relative; overflow: hidden; transition: background .25s;
}
.step:hover { background: var(--bg-light2); }
.step-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.step:hover .step-bar { transform: scaleX(1); }
.step-n {
  font-family: var(--fd); font-size: 5rem; font-weight: 800;
  color: var(--bg-light2); line-height: 1; display: block;
  margin-bottom: 1.5rem; letter-spacing: -.05em;
}
.step-ico { display: block; margin-bottom: 1.2rem; }
.step-t {
  font-family: var(--fd); font-size: 1.55rem; font-weight: 800;
  color: var(--text-dark); margin-bottom: .65rem;
  line-height: 1.15; letter-spacing: -.02em;
}
.step-d { font-size: 1.02rem; font-weight: 400; line-height: 1.72; color: var(--text-mid); }
.step-note {
  margin-top: 1.5rem; font-family: var(--fm); font-size: .68rem;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange); display: inline-flex; align-items: center; gap: .4rem;
}
.step-note::before { content: '→'; }

/* ── FEED ── */
.feed-s { background: var(--bg-dark2); }
.feed-tabs {
  display: flex; border-bottom: 1px solid var(--border-dk);
  margin: 1rem 0 2.5rem;
}
.ftab {
  font-family: var(--fm); font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(240,239,232,.3); padding: .78rem 1.5rem;
  cursor: none; border-bottom: 2.5px solid transparent;
  margin-bottom: -1px; transition: all .2s;
}
.ftab.on { color: var(--text-light); border-bottom-color: var(--orange); }
.ftab:hover { color: rgba(240,239,232,.7); }
.feed-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
.fi { position: relative; aspect-ratio: 3/4; overflow: hidden; cursor: none; background: #2A2B28; }
.fi-bg {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.fi:hover .fi-bg { transform: scale(1.06); }
.fi-bg svg { width: 55%; height: 55%; opacity: .18; transition: opacity .3s; }
.fi:hover .fi-bg svg { opacity: .32; }
.fi-over {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,31,28,.94) 0%, transparent 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.3rem; opacity: 0; transition: opacity .3s;
}
.fi:hover .fi-over { opacity: 1; }
.fi-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(217,79,30,.2); border: 1.5px solid rgba(217,79,30,.45);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fm); font-size: .6rem; font-weight: 500;
  color: var(--orange3); margin-bottom: .5rem;
}
.fi-t { font-family: var(--fd); font-size: 1.08rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.fi-m { font-family: var(--fb); font-size: .78rem; color: rgba(240,239,232,.4); display: flex; gap: .5rem; }
.fi-badge {
  position: absolute; top: .9rem; right: .9rem;
  font-family: var(--fm); font-size: .62rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--orange); color: #fff; padding: .24rem .6rem;
  border-radius: 4px; opacity: 0; transition: opacity .22s;
  text-decoration: none;
}
.fi:hover .fi-badge { opacity: 1; }

/* ── PRODUCTS ── */
.products { background: var(--bg-white); }
.prod-grid {
  display: grid; grid-template-columns: 1.45fr 1fr 1fr;
  grid-template-rows: auto auto; gap: 3px; margin-top: 4rem;
}
.pc {
  background: var(--bg-light); overflow: hidden; cursor: none;
  transition: transform .28s, box-shadow .28s;
}
.pc:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(26,27,24,.1); }
.pc.feat { grid-row: span 2; }
.pv {
  background: var(--bg-light2); display: flex; align-items: center;
  justify-content: center; position: relative; overflow: hidden;
}
.pc .pv { aspect-ratio: 1; }
.pc.feat .pv { aspect-ratio: 4/5; }
.pv svg { position: relative; z-index: 1; opacity: .2; transition: opacity .3s; }
.pc:hover .pv svg { opacity: .34; }
.pv-pulse {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(217,79,30,.12) 0%, transparent 65%);
  opacity: 0; transition: opacity .4s;
}
.pc:hover .pv-pulse { opacity: 1; }
.pi { padding: 1.5rem; }
.p-cat {
  font-family: var(--fm); font-size: .65rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange); margin-bottom: .4rem;
}
.p-name {
  font-family: var(--fd); font-size: 1.15rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: .42rem;
  line-height: 1.2; letter-spacing: -.02em;
}
.pc.feat .p-name { font-size: 1.42rem; }
.p-sp {
  font-size: .84rem; font-weight: 400; color: var(--text-mid);
  margin-bottom: 1rem; display: flex; gap: .7rem; flex-wrap: wrap;
}
.p-ft { display: flex; align-items: center; justify-content: space-between; }
.p-price {
  font-family: var(--fd); font-size: 1.55rem; font-weight: 800;
  color: var(--text-dark); letter-spacing: -.02em;
}
.p-price small { font-family: var(--fb); font-size: .85rem; font-weight: 400; color: var(--text-mid); }
.btn-buy {
  font-family: var(--fm); font-size: .65rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--text-dark); border: none;
  padding: .52rem 1.1rem; border-radius: 5px;
  cursor: none; transition: all .2s; text-decoration: none;
  display: inline-flex; align-items: center;
}
.btn-buy:hover { background: var(--orange); }
.p-comm {
  display: flex; align-items: center; gap: .38rem;
  font-family: var(--fb); font-size: .82rem; font-weight: 400;
  color: var(--text-mid); margin-top: .52rem;
}
.p-cd { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); opacity: .7; }

/* ── TALLER ── */
.taller { background: var(--bg-light); }
.taller-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; margin-top: 4rem; }
.tc {
  background: var(--bg-white); padding: 2.2rem 2rem; cursor: none;
  position: relative; overflow: hidden; transition: transform .28s, box-shadow .28s;
}
.tc:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(26,27,24,.08); }
.tc-bar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--orange); transform: scaleX(0);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.tc:hover .tc-bar { transform: scaleX(1); }
.tc-ico { display: block; margin-bottom: 1.2rem; }
.tc-t { font-family: var(--fd); font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: .45rem; }
.tc-d { font-size: .95rem; font-weight: 400; line-height: 1.65; color: var(--text-mid); margin-bottom: 1.1rem; }
.tc-pill {
  font-family: var(--fm); font-size: .65rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
  border: 1.5px solid rgba(217,79,30,.28); padding: .22rem .65rem;
  border-radius: 100px; display: inline-block;
}
.tc.ghost {
  border: 2px dashed var(--bg-light2); background: transparent;
  transform: none !important; box-shadow: none !important;
}
.tc.ghost .tc-bar { display: none; }

/* ── MAQUINAS ── */
.maquinas { background: var(--bg-dark); }
.mq-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; margin-top: 4rem; }
.mq-lead { font-family: var(--fd); font-size: 1.3rem; font-weight: 600; line-height: 1.62; color: rgba(240,239,232,.72); margin-bottom: 1.2rem; }
.mq-lead strong { color: var(--text-light); font-weight: 700; }
.mq-body { font-size: 1rem; font-weight: 400; line-height: 1.75; color: rgba(240,239,232,.42); margin-bottom: 1.8rem; }
.mq-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.mq-tag {
  font-family: var(--fm); font-size: .65rem; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .3rem .78rem; border: 1px solid rgba(240,239,232,.14);
  border-radius: 4px; color: rgba(240,239,232,.45);
}
.mq-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.mc { background: rgba(255,255,255,.05); padding: 1.4rem; transition: background .2s; }
.mc:hover { background: rgba(255,255,255,.08); }
.mc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .65rem; }
.mc-type { font-family: var(--fm); font-size: .63rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--orange3); }
.mc-badge { font-family: var(--fm); font-size: .6rem; font-weight: 500; padding: .14rem .5rem; border-radius: 100px; background: rgba(217,79,30,.18); color: var(--orange3); }
.mc-name { font-family: var(--fd); font-size: 1.08rem; font-weight: 700; color: var(--text-light); margin-bottom: .22rem; }
.mc-loc { font-size: .84rem; font-weight: 400; color: rgba(240,239,232,.4); display: flex; align-items: center; gap: .3rem; }
.mc-specs { margin-top: .72rem; padding-top: .72rem; border-top: 1px solid rgba(240,239,232,.07); display: flex; gap: 1rem; }
.mc-spec { font-family: var(--fm); font-size: .63rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(240,239,232,.28); }
.mc-spec strong { font-family: var(--fb); font-weight: 600; font-size: .82rem; color: rgba(240,239,232,.65); display: block; margin-bottom: .06rem; }
.mc-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed rgba(240,239,232,.12); background: transparent; }
.mc-add-in { text-align: center; padding: 1.5rem; }
.mc-add-t { font-family: var(--fm); font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--orange3); margin-top: .5rem; }
.mc-add-s { font-size: .82rem; font-weight: 400; color: rgba(240,239,232,.3); margin-top: .2rem; }

/* ── CTA ── */
.cta-s {
  padding: 11rem 48px; background: var(--orange);
  text-align: center; position: relative; overflow: hidden;
}
.cta-bg {
  position: absolute; font-family: var(--fd); font-size: 24vw; font-weight: 800;
  color: rgba(255,255,255,.07); left: 50%; top: 50%;
  transform: translate(-50%,-50%); pointer-events: none;
  white-space: nowrap; letter-spacing: -.05em;
}
.cta-h {
  font-family: var(--fd); font-size: clamp(3.8rem, 7.5vw, 6.8rem); font-weight: 800;
  line-height: .96; color: #fff; margin-bottom: 1.5rem;
  letter-spacing: -.04em; position: relative;
}
.cta-p { font-size: 1.12rem; font-weight: 400; color: rgba(255,255,255,.75); max-width: 450px; margin: 0 auto 3rem; line-height: 1.72; position: relative; }
.cta-btns { display: flex; justify-content: center; gap: 1rem; position: relative; }

/* ── FOOTER ── */
footer { background: var(--bg-dark); padding: 5rem 48px 2.5rem; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 3.5rem; margin-bottom: 3.5rem; }
.foot-logo { font-family: var(--fd); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-light); display: block; margin-bottom: 1rem; }
.foot-logo span { color: var(--orange); }
.foot-p { font-size: .95rem; font-weight: 400; line-height: 1.72; color: rgba(240,239,232,.42); max-width: 250px; margin-bottom: 1.5rem; }
.foot-langs { display: flex; gap: .4rem; }
.flang { font-family: var(--fm); font-size: .63rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: .24rem .6rem; border: 1px solid rgba(240,239,232,.12); border-radius: 4px; color: rgba(240,239,232,.3); cursor: none; transition: all .18s; }
.flang:hover, .flang.on { border-color: rgba(217,79,30,.5); color: var(--orange3); }
.foot-col h4 { font-family: var(--fm); font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: rgba(240,239,232,.28); margin-bottom: 1.1rem; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: .55rem; }
.foot-col a { font-size: .95rem; font-weight: 400; color: rgba(240,239,232,.45); text-decoration: none; transition: color .18s; }
.foot-col a:hover { color: var(--text-light); }
.foot-bot { border-top: 1px solid var(--border-dk); padding-top: 1.8rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.foot-copy { font-size: .82rem; font-weight: 400; color: rgba(240,239,232,.25); }
.foot-pays { display: flex; gap: .4rem; flex-wrap: wrap; }
.fpay { font-family: var(--fm); font-size: .62rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: rgba(240,239,232,.28); border: 1px solid rgba(240,239,232,.1); padding: .2rem .5rem; border-radius: 3px; }

/* ── ANIMACIONES ── */
@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.rev { opacity: 0; transform: translateY(26px); transition: opacity .88s cubic-bezier(.16,1,.3,1), transform .88s cubic-bezier(.16,1,.3,1); }
.rev.in { opacity: 1; transform: none; }
.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: #3A3B38; border-radius: 2px; }
::selection { background: rgba(217,79,30,.2); color: var(--orange2); }

/* ── RESPONSIVE BÁSICO ── */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; }
  .hero-r { display: none; }
  .steps { grid-template-columns: 1fr; }
  .feed-grid { grid-template-columns: repeat(2,1fr); }
  .prod-grid { grid-template-columns: 1fr 1fr; }
  .pc.feat { grid-row: auto; }
  .taller-grid { grid-template-columns: repeat(2,1fr); }
  .mq-layout { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  nav { padding: 0 24px; }
  .wrap { padding: 6rem 24px; }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .hero-l { padding: 4rem 24px; }
  .hero-h { font-size: 3.2rem; }
  .feed-grid { grid-template-columns: repeat(2,1fr); }
  .prod-grid { grid-template-columns: 1fr; }
  .taller-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .cta-s { padding: 7rem 24px; }
}

/* Logo imagen en nav */
.logo-img { display:flex; align-items:center; text-decoration:none; }
.logo-img img { height:32px; width:auto; display:block; }
/* ============================================================
   SKELETON — imágenes que no cargan muestran placeholder
   Agregar al final de main.css
   ============================================================ */

/* Contenedor de imagen siempre tiene fondo skeleton */
.pin-item,
.mc-item,
.phc-img,
.proceso-img-wrap {
  background: linear-gradient(
    135deg,
    #e8e6df 0%,
    #d8d5cd 25%,
    #ccc9c1 50%,
    #d8d5cd 75%,
    #e8e6df 100%
  );
  background-size: 400% 400%;
  animation: shimmer 2.8s ease infinite;
}

/* Colores levemente distintos por posición para que no se vean iguales */
.pin-col:nth-child(2) .pin-item { background-color: #d4d0c8; }
.pin-col:nth-child(3) .pin-item { background-color: #dbd8d0; }
.pin-col:nth-child(4) .pin-item { background-color: #cfc9be; }
.pin-col:nth-child(5) .pin-item { background-color: #d8d4cc; }
.pin-col:nth-child(6) .pin-item { background-color: #e2dfd8; }

.mc-col:nth-child(2) .mc-item { --sk: #ddd9d1; }
.mc-col:nth-child(3) .mc-item { --sk: #d0cdc5; }
.mc-col:nth-child(4) .mc-item { --sk: #e0ddd5; }

/* Shimmer suave */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Cuando la imagen SÍ carga, tapa el skeleton */
.pin-item img,
.mc-item img {
  position: relative;
  z-index: 1;
  /* La imagen flota sobre el fondo skeleton */
}

/* Si la imagen falla (onerror), el contenedor queda con el skeleton visible */
/* El onerror en PHP oculta solo la img, el contenedor con skeleton queda */
.pin-item img[data-failed],
.mc-item img[data-failed] {
  display: none;
}

/* Ícono sutil de imagen rota — opcional, muy discreto */
.pin-item::after,
.mc-item::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

/* Sección proceso — skeleton para la imagen del producto */
.proceso-img-wrap {
  background: linear-gradient(135deg, #e2dfd8 0%, #ccc9c0 50%, #e2dfd8 100%);
  background-size: 300% 300%;
}
.proceso-img-wrap img {
  position: relative;
  z-index: 1;
}