/*
Theme Name:  MAMUT Chiconcuac
Theme URI:   https://chiconcuac.info
Description: Tema para MAMUT Chiconcuac — Mayor y Mejor Uso del Territorio. Mercado de locales comerciales en Chiconcuac, Estado de México.
Author:      MAMUT
Version:     1.0.0
Text Domain: mamut-child
*/

/* ─────────────────────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────────────────────── */
:root {
  --red:   #B62828;
  --red2:  #E23535;
  --ink:   #07070A;
  --steel: #141418;
  --mesh:  #1E1E26;
  --rust:  #1A0808;
  --gray:  #606068;
  --warm:  #C0B29E;
  --white: #EFE9E1;
  --card:  #0E0E13;
  --sora:  'Sora', system-ui, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;
}

/* ─────────────────────────────────────────────────────────────
   RESET / BASE
───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sora);
  background: var(--ink);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: none; border: none; outline: none; }
:focus-visible { outline: 2px solid var(--red2); outline-offset: 3px; }
/* Remove WP default margins */
.entry-content, .wp-site-blocks, .wp-block-post-content { max-width: 100%; padding: 0 !important; margin: 0 !important; }
p { font-weight: 300; line-height: 1.72; color: rgba(239,233,225,.68); }

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--sora); font-weight: 800; line-height: .94; letter-spacing: -.025em; color: var(--white); }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--red2); margin-bottom: 18px; display: block; }
.sec-title { font-size: clamp(30px, 5vw, 60px); font-weight: 800; line-height: .94; letter-spacing: -.025em; margin-bottom: 30px; }
.sec-title em { font-style: normal; color: var(--red2); }
.manifest { list-style: none; margin-top: 4px; }
.manifest li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--mesh); font-size: 14.5px; line-height: 1.72; color: rgba(239,233,225,.66); font-weight: 300; }
.manifest li:first-child { border-top: 1px solid var(--mesh); }
.manifest li b { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--red2); padding-top: 4px; align-self: start; }

/* ─────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────── */
.mamut-section { padding: 96px 48px; border-top: 1px solid var(--mesh); }
@media (max-width: 700px) { .mamut-section { padding: 64px 24px; } }
.mamut-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
@media (max-width: 840px) { .mamut-split { grid-template-columns: 1fr; gap: 44px; } }

/* ─────────────────────────────────────────────────────────────
   GLASS SYSTEM
───────────────────────────────────────────────────────────── */
.gl {
  position: relative; isolation: isolate;
  backdrop-filter: blur(18px) saturate(1.5) brightness(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.5) brightness(1.1);
  backdrop-filter: url(#f-clear) blur(1px) saturate(1.4);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.45);
}
.gl-r {
  position: relative; isolation: isolate;
  backdrop-filter: blur(16px) saturate(1.7) brightness(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.05);
  backdrop-filter: url(#f-red) blur(0.6px) saturate(1.7);
  background: rgba(182,40,40,.13);
  border: 1px solid rgba(226,53,53,.26);
  box-shadow: inset 0 1.5px 0 rgba(255,160,160,.25), inset 0 -1px 0 rgba(182,40,40,.18), 0 8px 28px rgba(182,40,40,.22);
}
.gl-d {
  position: relative; isolation: isolate;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: url(#f-dark) blur(1.5px) saturate(1.2);
  background: rgba(7,7,10,.42);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.25), 0 12px 40px rgba(0,0,0,.6);
}
.gl-tilt {
  transform: perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition: transform .09s linear;
  will-change: transform;
}
.gl-tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(
    calc(130deg - var(--ty,0deg)*3 + var(--tx,0deg)*2),
    rgba(255,255,255, calc(.18 + var(--sh,0)*.1)) 0%,
    rgba(255,255,255,.05) 30%, transparent 55%
  );
}

/* ─────────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────────── */
.mamut-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 28px; cursor: none; position: relative; isolation: isolate; overflow: hidden;
  transition: transform .12s, box-shadow .15s; text-decoration: none;
}
.mamut-btn:active { transform: scale(.96) !important; }
.mamut-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  transform: translateX(-100%); pointer-events: none;
}
.mamut-btn:hover::before { transform: translateX(150%); transition: transform .55s ease; }
.mamut-btn-r {
  backdrop-filter: url(#f-red) blur(0.4px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  background: rgba(182,40,40,.78); color: var(--white);
  box-shadow: inset 0 1.5px 0 rgba(255,200,200,.28), inset 0 -1px 0 rgba(0,0,0,.3), 0 4px 20px rgba(182,40,40,.35);
}
.mamut-btn-r:hover { background: rgba(215,50,50,.85); box-shadow: inset 0 1.5px 0 rgba(255,200,200,.35), inset 0 -1px 0 rgba(0,0,0,.3), 0 6px 30px rgba(226,53,53,.5); }
.mamut-btn-g {
  backdrop-filter: url(#f-clear) blur(0.5px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  background: rgba(255,255,255,.055); color: var(--white);
  border: 1px solid rgba(255,255,255,.2) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.18), 0 4px 16px rgba(0,0,0,.3);
}
.mamut-btn-g:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.35) !important; }
.mamut-btn-lg { padding: 18px 40px; font-size: 12.5px; }
.mamut-btn-xs { padding: 10px 18px; font-size: 10px; }

/* ─────────────────────────────────────────────────────────────
   PILLS
───────────────────────────────────────────────────────────── */
.mamut-pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 18px; cursor: none; position: relative; isolation: isolate; overflow: hidden;
  backdrop-filter: url(#f-clear) blur(0.4px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.3);
  color: var(--gray); transition: background .2s, border-color .2s, color .2s;
}
.mamut-pill.active, .mamut-pill.on {
  backdrop-filter: url(#f-red) blur(0.4px) saturate(1.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  background: rgba(182,40,40,.7); color: var(--white); border-color: rgba(226,53,53,.5);
  box-shadow: inset 0 1.5px 0 rgba(255,180,180,.25), 0 4px 16px rgba(182,40,40,.35);
}
.mamut-pill:hover:not(.active):not(.on) { background: rgba(255,255,255,.09); color: var(--white); }

/* ─────────────────────────────────────────────────────────────
   CARD CORNER BRACKETS
───────────────────────────────────────────────────────────── */
.bracket { position: relative; }
.bracket::before, .bracket::after, .bracket .cb-b {
  content: ''; position: absolute; width: 16px; height: 16px; pointer-events: none;
  opacity: .6; transition: opacity .28s, width .28s, height .28s, box-shadow .28s;
}
.bracket::before { top: 0; left: 0; border-top: 2px solid var(--red2); border-left: 2px solid var(--red2); box-shadow: -1px -1px 6px rgba(226,53,53,.45); }
.bracket::after  { top: 0; right: 0; border-top: 2px solid var(--red2); border-right: 2px solid var(--red2); box-shadow: 1px -1px 6px rgba(226,53,53,.45); }
.cb-b { width: 16px !important; height: 16px !important; bottom: 0 !important; }
.cb-bl { left: 0 !important; border-bottom: 2px solid var(--red2); border-left: 2px solid var(--red2); box-shadow: -1px 1px 6px rgba(226,53,53,.45); }
.cb-br { right: 0 !important; border-bottom: 2px solid var(--red2); border-right: 2px solid var(--red2); box-shadow: 1px 1px 6px rgba(226,53,53,.45); }
.bracket:hover::before, .bracket:hover::after, .bracket:hover .cb-b {
  opacity: 1; width: 24px; height: 24px;
  box-shadow: 0 0 10px rgba(226,53,53,.8), 0 0 20px rgba(226,53,53,.35);
}

/* ─────────────────────────────────────────────────────────────
   GLASS ORBS
───────────────────────────────────────────────────────────── */
.glass-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(226,53,53,.1);
  box-shadow: inset 0 0 100px rgba(182,40,40,.06), 0 0 120px rgba(182,40,40,.04);
  animation: orbf var(--dur,13s) var(--del,0s) ease-in-out infinite alternate;
}
@keyframes orbf { from { transform: translate(0,0) scale(1); } to { transform: translate(var(--tx,18px), var(--ty,-28px)) scale(var(--sc,1.05)); } }

/* ─────────────────────────────────────────────────────────────
   NAV
───────────────────────────────────────────────────────────── */
.mamut-nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  transition: padding .25s, background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.mamut-nav.stuck {
  padding: 13px 48px;
  backdrop-filter: url(#f-red) blur(12px) saturate(1.6) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  background: rgba(10,8,8,.55);
  border-bottom-color: rgba(226,53,53,.18);
  box-shadow: 0 1px 0 rgba(226,53,53,.12), 0 4px 24px rgba(0,0,0,.5);
}
@media (max-width: 860px) { .mamut-nav { padding: 16px 24px; } .mamut-nav.stuck { padding: 11px 24px; } }
.mamut-nav-logo img { height: 30px; width: auto; display: block; }
.mamut-nav-links { display: flex; gap: 34px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); }
.mamut-nav-links a { transition: color .15s; }
.mamut-nav-links a:hover { color: var(--white); }
@media (max-width: 800px) { .mamut-nav-links { display: none; } }

/* ─────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────── */
.mamut-hero { position: relative; height: 100svh; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(rgba(30,30,38,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(30,30,38,.7) 1px, transparent 1px); background-size: 60px 60px; opacity: .3; animation: gpulse 10s ease-in-out infinite; }
@keyframes gpulse { 0%,100%{opacity:.3} 50%{opacity:.14} }
.hero-photo { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; opacity: 0; animation: hfade 1.4s .3s forwards; filter: brightness(.52) saturate(1.15); }
@keyframes hfade { to { opacity: .58; } }
.hero-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 85% 70% at 65% 50%, transparent, rgba(7,7,10,.65)), linear-gradient(to top, rgba(7,7,10,.95) 0%, transparent 55%); }
.hero-line { position: absolute; z-index: 3; background: var(--red); opacity: .8; }
.hero-line.h { height: 1px; width: 0; animation: dh .85s cubic-bezier(.4,0,.2,1) forwards; }
.hero-line.v { width: 1px; height: 0; animation: dv .85s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes dh { to { width: var(--w); } } @keyframes dv { to { height: var(--h); } }
.hero-badge { position: absolute; top: 92px; left: 48px; z-index: 4; display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 8px 16px; opacity: 0; animation: aup .5s 1.2s forwards; }
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red2); animation: blink 2.4s 1.8s infinite; }
@keyframes blink { 0%,100%{opacity:1} 45%,55%{opacity:.1} }
@keyframes aup { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.hero-copy { position: relative; z-index: 4; padding: 0 48px 52px; }
.hero-h1-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.hero-logo { margin-bottom: 20px; opacity: 0; animation: aup .5s 1.45s forwards; }
.hero-logo img { height: clamp(48px, 7.5vw, 94px); width: auto; object-position: left; }
.hero-row { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; opacity: 0; animation: aup .5s 1.7s forwards; }
.hero-tagline { font-size: clamp(14px, 1.55vw, 18px); line-height: 1.65; color: var(--warm); max-width: 40ch; font-weight: 300; }
.hero-tagline strong { color: var(--white); font-weight: 700; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 38px; left: 48px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-family: var(--mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gray); opacity: 0; animation: aup .4s 2.1s forwards; }
.hero-shaft { width: 1px; height: 44px; background: var(--gray); transform-origin: top; animation: shaft 2.3s 2.4s infinite; }
@keyframes shaft { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width: 640px) { .hero-copy { padding: 0 24px 40px; } .hero-badge { left: 24px; } }

/* ─────────────────────────────────────────────────────────────
   REVEAL SLIDER
───────────────────────────────────────────────────────────── */
#reveal { padding: 0 48px 80px; }
@media (max-width: 700px) { #reveal { padding: 0 24px 60px; } }
.r-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gray); margin-bottom: 14px; }
.r-h { font-size: clamp(22px, 3vw, 36px); font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-bottom: 26px; }
.r-h span { color: var(--red2); }
.reveal-stage { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--mesh); cursor: none; user-select: none; touch-action: none; }
.reveal-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reveal-overlay { clip-path: inset(0 0 0 var(--sp,50%)); }
.reveal-tag { position: absolute; top: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; background: rgba(7,7,10,.82); padding: 5px 11px; pointer-events: none; border: 1px solid var(--mesh); }
.reveal-tag-l { left: 12px; } .reveal-tag-r { right: 12px; }
.reveal-divider { position: absolute; top: 0; bottom: 0; left: var(--sp,50%); width: 2px; background: var(--red2); pointer-events: none; box-shadow: 0 0 14px rgba(226,53,53,.6); }
.reveal-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: var(--red); border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 0 20px rgba(182,40,40,.5); }
.smeta { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--gray); }

/* ─────────────────────────────────────────────────────────────
   LOCALE CARDS
───────────────────────────────────────────────────────────── */
.mamut-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--mesh); }
@media (max-width: 880px) { .mamut-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .mamut-grid { grid-template-columns: 1fr; } }
.locale-card { background: var(--card); display: flex; flex-direction: column; overflow: hidden; transition: background .2s; text-decoration: none; color: inherit; }
.locale-card:hover { background: var(--steel); }
.locale-card-fig { position: relative; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; }
.locale-card-fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65); transition: transform .45s, filter .45s; }
.locale-card:hover .locale-card-fig img { transform: scale(1.05); filter: saturate(1); }
.locale-card-badge { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--red); padding: 5px 9px; }
.locale-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.locale-card-size { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.locale-card-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; flex: 1; }
.locale-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 13px; border-top: 1px solid var(--mesh); }
.locale-card-price { font-size: 16px; font-weight: 700; }
.locale-card-price small { font-size: 10px; font-weight: 400; color: var(--gray); }
.locale-card-cta { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red2); }

/* ─────────────────────────────────────────────────────────────
   BLOG / ARTÍCULOS
───────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mesh);
}
@media (max-width: 880px) { .blog-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { background: var(--card); display: flex; flex-direction: column; overflow: hidden; transition: background .2s; text-decoration: none; color: inherit; }
.blog-card:hover { background: var(--steel); }
.blog-card-fig { position: relative; aspect-ratio: 16/9; overflow: hidden; flex-shrink: 0; }
.blog-card-fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65); transition: transform .45s, filter .45s; }
.blog-card:hover .blog-card-fig img { transform: scale(1.05); filter: saturate(1); }
.blog-card-badge { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; background: var(--red); padding: 5px 9px; }
.blog-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.blog-card-date { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }
.blog-card-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.blog-card-excerpt { font-size: 13px; line-height: 1.65; color: rgba(239,233,225,.55); font-weight: 300; flex: 1; margin: 0; }
.blog-card-cta { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--red2); padding-top: 8px; border-top: 1px solid var(--mesh); margin-top: 4px; }

/* Single article body (WPBakery / Muffin Builder content area) */
.mamut-article { max-width: 760px; margin: 0 auto; padding: 140px 24px 96px; }
.mamut-article-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--red2); margin-bottom: 18px; }
.mamut-article-title { font-size: clamp(28px, 5vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 28px; }
.mamut-article-fig { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 36px; }
.mamut-article-fig img { width: 100%; height: 100%; object-fit: cover; }
.mamut-article-body { font-size: 16px; line-height: 1.85; color: rgba(239,233,225,.82); font-weight: 300; }
.mamut-article-body p { margin-bottom: 22px; }
.mamut-article-body h2 { font-size: 28px; margin: 40px 0 18px; letter-spacing: -.01em; }
.mamut-article-body h3 { font-size: 21px; margin: 32px 0 14px; letter-spacing: -.01em; }
.mamut-article-body img { width: 100%; height: auto; margin: 28px 0; }
.mamut-article-body a { color: var(--red2); text-decoration: underline; }
.mamut-article-body ul, .mamut-article-body ol { margin: 0 0 22px 22px; }
.mamut-article-back { display: inline-block; margin-top: 48px; }

/* ─────────────────────────────────────────────────────────────
   MARCAS
───────────────────────────────────────────────────────────── */
.marcas-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--mesh); padding: 0 48px; scrollbar-width: none; }
.marcas-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .marcas-tabs { padding: 0 24px; } }
.marcas-tab { flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; background: none; border: none; border-bottom: 2px solid transparent; padding: 18px 24px; cursor: none; white-space: nowrap; color: var(--gray); transition: color .15s, border-color .15s; }
.marcas-tab.active { color: var(--white); border-bottom-color: var(--red2); }
.marcas-tab:hover:not(.active) { color: rgba(239,233,225,.7); }
.marcas-panel { display: none; }
.marcas-panel.active { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; }
@media (max-width: 760px) { .marcas-panel.active { grid-template-columns: 1fr; min-height: auto; } }
.marcas-media { position: relative; overflow: hidden; background: var(--steel); }
.marcas-media img, .marcas-media video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .marcas-media { aspect-ratio: 16/9; } }
.m-badge { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--red); padding: 6px 12px; }
.marcas-copy { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
@media (max-width: 760px) { .marcas-copy { padding: 36px 24px; } }
.marcas-copy-cat { font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--red2); }
.marcas-copy-title { font-size: clamp(26px, 3.8vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -.022em; }
.marcas-copy-desc { font-size: 14.5px; line-height: 1.76; color: rgba(239,233,225,.66); font-weight: 300; }
.marcas-copy-facts { display: flex; flex-direction: column; }
.marcas-fact { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--mesh); font-size: 13px; color: rgba(239,233,225,.55); font-weight: 300; }
.marcas-fact:first-child { border-top: 1px solid var(--mesh); }
.marcas-fact strong { color: var(--white); font-weight: 700; min-width: 86px; }

/* ─────────────────────────────────────────────────────────────
   TRUTH / STATS
───────────────────────────────────────────────────────────── */
.truth-figure { position: relative; overflow: hidden; }
.truth-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: saturate(.8) brightness(.88); }
.truth-stats { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.truth-stat-key { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.truth-stat-key b { color: var(--red2); }
.truth-stat-label { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin-top: 3px; }

/* ─────────────────────────────────────────────────────────────
   HONESTY
───────────────────────────────────────────────────────────── */
.honesty-section { padding: 108px 48px; background: var(--rust); position: relative; overflow: hidden; }
.honesty-section::before { content: 'AQUÍ NO VAMOS A OCULTAR NADA.'; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: clamp(46px, 9vw, 138px); font-weight: 800; white-space: nowrap; color: rgba(182,40,40,.085); letter-spacing: -.03em; pointer-events: none; line-height: 1; }
.honesty-inner { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; align-items: start; }
@media (max-width: 800px) { .honesty-inner { grid-template-columns: 1fr; gap: 44px; } }
.honesty-quote { font-size: clamp(28px, 4.5vw, 54px); font-weight: 800; line-height: .97; letter-spacing: -.025em; }
.honesty-quote em { font-style: normal; color: var(--red2); display: block; }
.honesty-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.honesty-item { display: flex; gap: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.72; color: rgba(239,233,225,.74); font-weight: 300; }
.honesty-item-yes { font-family: var(--mono); color: var(--red2); font-weight: 700; font-size: 10px; letter-spacing: .1em; flex-shrink: 0; padding-top: 3px; }

/* ─────────────────────────────────────────────────────────────
   OBRA
───────────────────────────────────────────────────────────── */
.obra-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2px; background: var(--mesh); margin-top: 44px; }
@media (max-width: 700px) { .obra-grid { grid-template-columns: 1fr; } }
.obra-fig { position: relative; overflow: hidden; background: var(--steel); }
.obra-fig img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .45s, filter .45s; }
.obra-fig:hover img { transform: scale(1.03); filter: saturate(1); }
/* corridor1.png — wide corridor shot */
.obra-fig:nth-child(1) img { aspect-ratio: 16/9; }
/* restrooms-1.png — portrait detail */
.obra-fig:nth-child(2) img { aspect-ratio: 4/5; }
/* isometric-aerial.png — full panoramic */
.obra-fig:nth-child(3) { grid-column: 1 / -1; }
.obra-fig:nth-child(3) img { aspect-ratio: 21/7; }
/* corridor3.png — wide corridor shot */
.obra-fig:nth-child(4) img { aspect-ratio: 16/9; }
@media (max-width: 700px) { .obra-fig img { aspect-ratio: 16/9 !important; } .obra-fig:nth-child(3) { grid-column: auto; } }
.obra-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; background: linear-gradient(transparent, rgba(7,7,10,.88)); font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); }

/* ─────────────────────────────────────────────────────────────
   PASOS
───────────────────────────────────────────────────────────── */
.pasos-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--mesh); margin-top: 44px; }
@media (max-width: 800px) { .pasos-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .pasos-grid { grid-template-columns: 1fr; } }
.paso { padding: 28px 22px; min-height: 200px; display: flex; flex-direction: column; background: var(--card); }
.paso-number { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--red2); margin-bottom: 16px; }
.paso-title { font-size: 17px; font-weight: 700; line-height: 1.15; margin-bottom: 10px; letter-spacing: -.01em; }
.paso-desc { font-size: 13px; line-height: 1.7; color: rgba(239,233,225,.5); font-weight: 300; flex: 1; }
.paso-when { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mesh); }
.pasos-bar { height: 2px; background: var(--mesh); margin-top: 1px; }
.pasos-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--red2)); transition: width 1.8s cubic-bezier(.4,0,.2,1); }

/* ─────────────────────────────────────────────────────────────
   CTA
───────────────────────────────────────────────────────────── */
.cta-section { padding: 108px 48px; text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 52% at 50% 50%, rgba(182,40,40,.16), transparent); pointer-events: none; }
.cta-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; display: inline-block; padding: 8px 22px; margin-bottom: 22px; }
.cta-heading { font-size: clamp(44px, 9.5vw, 120px); font-weight: 800; line-height: .86; letter-spacing: -.03em; margin-bottom: 24px; }
.cta-heading span { color: var(--red2); }
.cta-sub { font-size: 15.5px; line-height: 1.72; color: rgba(239,233,225,.62); max-width: 46ch; margin: 0 auto 36px; font-weight: 300; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────── */
.mamut-footer { padding: 32px 48px; border-top: 1px solid var(--mesh); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.mamut-footer img { height: 16px; width: auto; filter: opacity(.35); }
@media (max-width: 700px) { .mamut-footer { padding: 24px; } }

/* ─────────────────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────────────────── */
.sr { opacity: 0; transform: translateY(22px); transition: opacity .65s, transform .65s; }
.sr.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────────────────────
   CURSOR
───────────────────────────────────────────────────────────── */
#mamut-cur { position: fixed; z-index: 9999; pointer-events: none; transform: translate(-50%,-50%); will-change: transform; }
.cur-arm { position: absolute; background: var(--red2); transition: opacity .18s, width .18s, height .18s; }
.cur-n { width:1px; height:10px; left:50%; top:calc(-10px - 5px); transform:translateX(-50%); }
.cur-s { width:1px; height:10px; left:50%; top:5px; transform:translateX(-50%); }
.cur-w { height:1px; width:10px; top:50%; left:calc(-10px - 5px); transform:translateY(-50%); }
.cur-e { height:1px; width:10px; top:50%; left:5px; transform:translateY(-50%); }
.cur-center { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--red2); top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 4px rgba(226,53,53,.7); transition:width .15s,height .15s,box-shadow .15s,background .15s,border-radius .15s; }
.cur-coords { position:absolute; top:8px; left:8px; font-family:var(--mono); font-size:8px; letter-spacing:.08em; color:var(--red2); opacity:.7; white-space:nowrap; transition:opacity .2s; text-shadow:0 0 8px rgba(226,53,53,.5); }
.cur-ret { position:absolute; width:10px; height:10px; border-color:var(--red2); border-style:solid; opacity:0; transition:opacity .18s,transform .18s; }
.cur-ret-tl { top:-20px; left:-20px; border-width:2px 0 0 2px; transform:translate(4px,4px); }
.cur-ret-tr { top:-20px; right:-20px; border-width:2px 2px 0 0; transform:translate(-4px,4px); }
.cur-ret-bl { bottom:-20px; left:-20px; border-width:0 0 2px 2px; transform:translate(4px,-4px); }
.cur-ret-br { bottom:-20px; right:-20px; border-width:0 2px 2px 0; transform:translate(-4px,-4px); }
.cur-ruler { position:absolute; top:50%; left:-40px; transform:translateY(-50%); width:80px; height:24px; opacity:0; transition:opacity .2s; pointer-events:none; }
.cur-tick { position:absolute; top:50%; width:1px; background:var(--red2); transform:translateY(-50%); }
body.cs-hover .cur-arm { opacity:0; }
body.cs-hover .cur-center { width:5px; height:5px; box-shadow:0 0 10px rgba(226,53,53,1),0 0 20px rgba(226,53,53,.4); }
body.cs-hover .cur-ret { opacity:1; transform:translate(0,0); }
body.cs-hover .cur-coords { opacity:0; }
body.cs-btn .cur-arm { opacity:.5; }
body.cs-btn .cur-center { width:28px; height:28px; border-radius:50%; background:transparent; border:1.5px solid rgba(226,53,53,.5); box-shadow:0 0 12px rgba(226,53,53,.35),inset 0 0 12px rgba(226,53,53,.1); animation:btnpulse 1.2s ease-in-out infinite; }
@keyframes btnpulse { 0%,100%{box-shadow:0 0 8px rgba(226,53,53,.3),inset 0 0 8px rgba(226,53,53,.08)} 50%{box-shadow:0 0 18px rgba(226,53,53,.65),inset 0 0 14px rgba(226,53,53,.2)} }
body.cs-btn .cur-coords { opacity:0; }
body.cs-drag .cur-arm { opacity:.3; }
body.cs-drag .cur-coords { opacity:0; }
body.cs-drag .cur-ruler { opacity:1; }
body.cs-drag .cur-center { box-shadow:none; background:var(--red); }
@media (hover:none) { #mamut-cur { display:none; } body { cursor:auto; } }
@media (prefers-reduced-motion:reduce) {
  .sr { opacity:1; transform:none; transition:none; }
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  body { cursor:auto; } #mamut-cur { display:none; }
  .glass-orb, .mamut-btn::before { animation:none !important; }
  .gl-tilt { transition:none !important; transform:none !important; }
}