/* ==========================================================================
   IMPERIO MUEBLES — Sistema visual "Ultra Futurista Premium"
   Dark glass, glow acentuado en cobre/oro, grid tecnológico, micro-animaciones.
   Tipografía: Space Grotesk (display) + Inter (texto), vía Google Fonts.
   ========================================================================== */

:root{
  /* Superficies */
  --bg-0:  #06070a;
  --bg-1:  #0b0d11;
  --bg-2:  #12151b;
  --bg-3:  #191d25;

  --glass:         rgba(255,255,255,.045);
  --glass-strong:  rgba(255,255,255,.08);
  --border-glass:  rgba(255,255,255,.10);
  --border-glass-2: rgba(255,255,255,.20);

  /* Texto */
  --c-ink:     #f4eee3;
  --c-muted:   #aca295;
  --c-muted-2: #726b62;

  /* Acento marca (cobre/oro) */
  --c-terracotta: #e08a4f;
  --c-terracotta-dark: #a85a2f;
  --c-rust:  #e2632e;
  --c-gold:  #edc784;
  --c-cyan:  #63e8cd;

  --grad-brand: linear-gradient(120deg, var(--c-gold) 0%, var(--c-terracotta) 55%, var(--c-rust) 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(237,199,132,.16), rgba(224,138,79,.10));

  --glow-brand: 0 0 0 1px rgba(224,138,79,.25), 0 8px 30px rgba(224,138,79,.18);
  --glow-brand-strong: 0 0 40px rgba(224,138,79,.35), 0 0 90px rgba(224,138,79,.12);
  --glow-cyan: 0 0 40px rgba(99,232,205,.18);

  --c-error:   #ff6f5c;
  --c-success: #6fd396;

  /* Tipografía */
  --font-display: "Space Grotesk", "Segoe UI", var(--font-sans);
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Espaciado */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  --container: 1240px;
  --header-h: 84px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
body, h1, h2, h3, h4, p, ul, ol, figure{ margin: 0; }
ul, ol{ padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
svg{ display: block; }

body{
  font-family: var(--font-sans);
  color: var(--c-ink);
  background: var(--bg-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}

h1, h2, h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }

::selection{ background: var(--c-terracotta); color: #150d08; }

::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: var(--bg-0); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--c-terracotta-dark), var(--c-terracotta)); border-radius: 8px; border: 2px solid var(--bg-0); }
html{ scrollbar-color: var(--c-terracotta-dark) var(--bg-0); scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- */
/* Fondo tecnológico global (grid + glows fijos)                          */
/* ---------------------------------------------------------------------- */
.bg-fx{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-grid{
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgba(244,238,227,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,238,227,.05) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 30%, transparent 78%);
  animation: gridDrift 60s linear infinite;
}
@keyframes gridDrift{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-68px,-68px,0); }
}
.bg-glow{
  position: absolute;
  width: 56vw;
  height: 56vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .28;
  will-change: transform;
}
.bg-glow--1{ background: radial-gradient(circle, var(--c-terracotta) 0%, transparent 72%); top: -18%; left: -14%; animation: floatSlow 24s ease-in-out infinite; }
.bg-glow--2{ background: radial-gradient(circle, var(--c-cyan) 0%, transparent 72%); bottom: -22%; right: -16%; opacity: .16; animation: floatSlow 28s ease-in-out infinite reverse; }
.bg-glow--3{ background: radial-gradient(circle, var(--c-gold) 0%, transparent 72%); top: 38%; left: 45%; opacity: .14; animation: floatSlow 32s ease-in-out infinite; }
@keyframes floatSlow{
  0%, 100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(4%, 5%, 0) scale(1.08); }
}

/* Cursor spotlight (desktop, pointer fino) */
.cursor-glow{
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,138,79,.14) 0%, rgba(224,138,79,0) 68%);
  z-index: 1;
  pointer-events: none;
  transform: translate3d(-100vw,-100vh,0);
  transition: opacity var(--dur-med) var(--ease);
  opacity: 0;
}
.cursor-glow.is-active{ opacity: 1; }

/* Barra de progreso de scroll */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--grad-brand);
  box-shadow: 0 0 12px rgba(224,138,79,.6);
  z-index: 200;
  transition: width 80ms linear;
}

main, header, footer{ position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* Utilidades                                                              */
/* ---------------------------------------------------------------------- */
.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-terracotta);
  color: #150d08;
  padding: .9rem 1.4rem;
  z-index: 999;
  border-radius: 0 0 6px 0;
  font-weight: 700;
}
.skip-link:focus{ left: 0; }

:focus-visible{ outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; }

.kicker{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.kicker::before{
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(224,138,79,.8);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.kicker--light{ color: var(--c-gold); }
@keyframes pulseDot{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.5); opacity: .55; }
}

.section-tag{
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--c-muted-2);
}

.section-title{
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  max-width: 20ch;
  color: var(--c-ink);
}
.section-title--light{ color: var(--c-ink); max-width: 22ch; }
.section-title em, .section-title span.grad{
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-link{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  color: var(--c-gold);
  border-bottom: 1px solid rgba(237,199,132,.4);
  padding-bottom: .15em;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.text-link:hover{ transform: translateX(4px); border-color: var(--c-gold); color: var(--c-white, #fff); }

/* Botones */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: .85em 1.7em;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px); }
.btn-lg{ padding: 1.05em 2.1em; font-size: .92rem; }

.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-expo);
}
.btn:hover::before{ transform: translateX(120%); }

.btn-solid{ background: var(--grad-brand); color: #170f09; box-shadow: var(--glow-brand); }
.btn-solid:hover{ box-shadow: var(--glow-brand-strong); }

.btn-outline{ border: 1px solid var(--border-glass-2); color: var(--c-ink); background: var(--glass); backdrop-filter: blur(8px); }
.btn-outline:hover{ background: var(--glass-strong); border-color: var(--c-gold); box-shadow: var(--glow-brand); }

.btn-outline--light{ border: 1px solid var(--border-glass-2); color: var(--c-ink); background: var(--glass); margin-top: var(--space-4); }
.btn-outline--light:hover{ background: var(--glass-strong); border-color: var(--c-gold); box-shadow: var(--glow-brand); }

.btn-line{ border: 1px solid var(--border-glass-2); color: var(--c-ink); background: var(--glass); backdrop-filter: blur(8px); }
.btn-line:hover{ background: var(--glass-strong); border-color: var(--c-cyan); }

/* Reveal on scroll */
.reveal{
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease-expo), transform var(--dur-slow) var(--ease-expo), filter var(--dur-slow) var(--ease-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); filter: blur(0); }

/* Tarjetas de vidrio reutilizables */
.glass-card{
  position: relative;
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--border-glass);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.glass-card:hover{ border-color: var(--border-glass-2); box-shadow: var(--glow-brand); }

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6,7,10,.62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border-glass);
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.site-header.is-hidden{ transform: translateY(-100%); }
.site-header.is-scrolled{ box-shadow: 0 12px 40px rgba(0,0,0,.45); background: rgba(6,7,10,.86); }

.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.brand{ flex-shrink: 0; }
.brand-logo{
  height: 42px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.brand:hover .brand-logo{ filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(224,138,79,.6)); opacity: 1; }

.main-nav{ flex: 1; }
.main-nav ul{ display: flex; gap: var(--space-4); }
.main-nav a{
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  padding: .3em 0;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease);
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--grad-brand);
  box-shadow: 0 0 8px rgba(224,138,79,.7);
  transition: width var(--dur-fast) var(--ease);
}
.main-nav a:hover{ color: var(--c-gold); }
.main-nav a:hover::after{ width: 100%; }

.header-actions{ display: flex; align-items: center; gap: var(--space-2); }
.header-actions .icon{ margin-right: -.15em; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}
.nav-toggle span{
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display: none;
  max-height: 0;
  overflow: hidden;
  background: rgba(6,7,10,.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-glass);
  transition: max-height var(--dur-med) var(--ease);
}
.mobile-nav.is-open{ max-height: 480px; }
.mobile-nav nav ul{ padding: var(--space-2) var(--space-3) 0; }
.mobile-nav nav a{
  display: block;
  padding: .9em 0;
  border-bottom: 1px solid var(--border-glass);
  font-weight: 600;
  font-family: var(--font-display);
}
.mobile-cta{ margin: var(--space-2) var(--space-3) 0; justify-content: center; }
.mobile-whatsapp{
  display: block;
  text-align: center;
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-weight: 600;
  color: var(--c-gold);
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: calc(100svh - var(--header-h));
  padding: var(--space-2);
}
.hero-frame{
  position: relative;
  height: calc(100svh - var(--header-h) - (var(--space-2) * 2));
  min-height: 480px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border-glass);
}
.hero-img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.05) contrast(1.06) brightness(.92);
  animation: heroKenBurns 26s var(--ease) infinite alternate;
  will-change: transform;
}
@keyframes heroKenBurns{
  from{ transform: scale(1); }
  to{ transform: scale(1.08); }
}
.hero-overlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 15% 100%, rgba(224,138,79,.28) 0%, transparent 55%),
    linear-gradient(190deg, rgba(6,7,10,.25) 0%, rgba(6,7,10,.55) 48%, rgba(6,7,10,.92) 100%);
}
.hero-corner{
  position: absolute;
  width: 64px; height: 64px;
  border: 1px solid rgba(237,199,132,.55);
  filter: drop-shadow(0 0 6px rgba(237,199,132,.35));
  animation: cornerPulse 3.6s ease-in-out infinite;
}
.hero-corner--tl{ top: var(--space-3); left: var(--space-3); border-width: 1px 0 0 1px; }
.hero-corner--br{ bottom: var(--space-3); right: var(--space-3); border-width: 0 1px 1px 0; animation-delay: 1.8s; }
@keyframes cornerPulse{
  0%, 100%{ opacity: .5; }
  50%{ opacity: 1; }
}

.hero-content{
  position: absolute;
  left: calc(var(--space-3) + var(--space-2));
  bottom: calc(var(--space-4) + var(--space-2));
  max-width: 620px;
  color: var(--c-ink);
}
.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  color: var(--c-gold);
  padding: .5em 1em;
  border: 1px solid var(--border-glass-2);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(10px);
}
.hero-kicker::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-terracotta);
  box-shadow: 0 0 10px rgba(224,138,79,.9);
  animation: pulseDot 2.4s ease-in-out infinite;
}
.hero-title{
  font-size: clamp(2.9rem, 7.2vw, 5.8rem);
  letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 0%, var(--c-ink) 55%, var(--c-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 60px rgba(224,138,79,.25);
}
.hero-tagline{
  margin-top: var(--space-3);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 30ch;
  color: var(--c-muted);
}
.hero-actions{ display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }

.hero-vertical-label{
  position: absolute;
  right: calc(var(--space-3) + var(--space-2) + 10px);
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  color: rgba(244,238,227,.6);
  font-family: var(--font-display);
  font-size: .74rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.scroll-cue{
  position: absolute;
  left: 50%;
  bottom: calc(var(--space-2) + 6px);
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  background: linear-gradient(rgba(244,238,227,.5), transparent);
}
.scroll-cue span{
  position: absolute;
  top: 0; left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 10px rgba(237,199,132,.8);
  animation: scrollCue 2.2s var(--ease) infinite;
}
@keyframes scrollCue{
  0%{ top: 0; opacity: 1; }
  80%{ opacity: 1; }
  100%{ top: 40px; opacity: 0; }
}

/* ---------------------------------------------------------------------- */
/* Marquee                                                                 */
/* ---------------------------------------------------------------------- */
.marquee{
  position: relative;
  background: linear-gradient(90deg, var(--bg-1), var(--bg-2), var(--bg-1));
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  color: var(--c-gold);
  overflow: hidden;
  padding: 1.1rem 0;
}
.marquee-track{
  display: flex;
  gap: .9rem;
  width: max-content;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  animation: marqueeScroll 34s linear infinite;
}
.marquee-track span:nth-child(2n){ color: var(--c-muted); }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------- */
/* Nosotros                                                                */
/* ---------------------------------------------------------------------- */
.about{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.about-media{ position: relative; perspective: 1200px; }

/* Marcos: fijan proporción real de la foto (sin deformar) y recortan con object-fit */
.about-frame-media{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.about-frame-media--main{
  width: 78%;
  aspect-ratio: 800 / 820;
  border: 1px solid var(--border-glass);
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.about-frame-media--offset{
  position: absolute;
  width: 52%;
  aspect-ratio: 800 / 870;
  right: 0;
  bottom: -10%;
  border: 6px solid var(--bg-0);
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px var(--border-glass);
}
.about-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: inset(0 0 100% 0);
  transition: transform var(--dur-med) var(--ease), clip-path 1.1s var(--ease-expo);
  transition-delay: 0ms, var(--reveal-delay, 0ms);
}
.about-frame-media.is-visible .about-img{ clip-path: inset(0 0 0% 0); }
.about-media:hover .about-img--main{ transform: rotateY(-2deg) rotateX(1deg) scale(1.05); }
.about-media:hover .about-img--offset{ transform: rotateY(2deg) scale(1.05) translateY(-4px); }

/* Brillo premium que recorre la foto al pasar el cursor */
.about-shine{
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.about-media:hover .about-shine{
  transform: translateX(120%);
  transition: transform 1.1s var(--ease-expo);
}

.about-frame{
  position: absolute;
  top: -22px; left: -22px;
  width: 78%; height: 88%;
  border: 1px solid var(--c-gold);
  border-radius: 14px;
  opacity: .5;
  z-index: -1;
}

/* Revelado escalonado: la foto se descubre como una cortina (clip-path en la img,          */
/* nunca en el elemento observado) con leve zoom-out y grado de color en el marco.           */
/* Importante: el clip-path NUNCA va en el elemento que observa el IntersectionObserver —    */
/* Chrome calcula la intersección sobre el área ya recortada, así que un marco que nace       */
/* con altura recortada a 0 jamás se reportaría como visible (deadlock).                     */
.about-frame-media.reveal{
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(.5) brightness(.8);
  transition: opacity var(--dur-slow) var(--ease-expo), transform 1.1s var(--ease-expo), filter var(--dur-slow) var(--ease-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.about-frame-media.reveal.is-visible{
  opacity: 1;
  transform: scale(1);
  filter: saturate(1) brightness(1);
}

/* El marco decorativo dorado se revela con un simple fundido, sin tocar su opacidad de reposo (.5) */
.about-frame.reveal{
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
.about-frame.reveal.is-visible{ opacity: .5; }
.about-lead{ font-size: 1.12rem; margin: var(--space-2) 0; color: var(--c-ink); }
.about-content p + p{ margin-top: var(--space-2); color: var(--c-muted); }
.about-pillars{
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-2);
}
.about-pillars li{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--c-ink);
  padding: .6em 1.1em .6em 1.8em;
  position: relative;
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.about-pillars li:hover{ border-color: var(--c-gold); transform: translateY(-2px); }
.about-pillars li::before{
  content: "";
  position: absolute;
  left: .9em; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  background: var(--c-rust);
  box-shadow: 0 0 8px rgba(224,138,79,.8);
  border-radius: 50%;
}

.about .kicker::after{ content: "/ 01"; margin-left: .5em; color: var(--c-muted-2); font-weight: 500; letter-spacing: .1em; }

/* ---------------------------------------------------------------------- */
/* Proceso                                                                 */
/* ---------------------------------------------------------------------- */
.process{
  position: relative;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: var(--c-muted);
  padding: var(--space-6) var(--space-3);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}
.process-head{ max-width: var(--container); margin: 0 auto var(--space-5); }
.process .kicker::after{ content: "/ 02"; margin-left: .5em; color: var(--c-muted-2); font-weight: 500; letter-spacing: .1em; }
.process-list{
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
}
.process-list::before{
  content: "";
  position: absolute;
  left: 34px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--c-terracotta), var(--c-gold), var(--c-terracotta));
  background-size: 100% 220%;
  opacity: .5;
  animation: flowLine 6s linear infinite;
}
@keyframes flowLine{
  0%{ background-position: 0 0; }
  100%{ background-position: 0 220%; }
}
.process-item{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  transition: transform var(--dur-med) var(--ease);
}
.process-item:hover{ transform: translateX(6px); }
.process-number{
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-gold);
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-glass-2);
  background: var(--glass);
  backdrop-filter: blur(8px);
  transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.process-item:hover .process-number{ box-shadow: var(--glow-brand); border-color: var(--c-gold); }
.process-body h3{ color: var(--c-ink); font-size: 1.3rem; margin-bottom: .4em; font-family: var(--font-display); }
.process-body p{ max-width: 52ch; color: var(--c-muted); }
.process > .btn{ margin-left: calc(70px + var(--space-3) + var(--space-3)); }
@media (max-width: 767px){
  .process > .btn{ margin-left: 0; }
}

/* ---------------------------------------------------------------------- */
/* Productos                                                               */
/* ---------------------------------------------------------------------- */
.products{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
}
.products > .kicker{ display: flex; justify-content: center; margin-left: auto; margin-right: auto; }
.products > .kicker::after{ content: "/ 03"; margin-left: .5em; color: var(--c-muted-2); font-weight: 500; letter-spacing: .1em; }
.products > .section-title{ text-align: center; margin-left: auto; margin-right: auto; max-width: none; margin-bottom: var(--space-5); }
.products-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.product-col{
  padding: var(--space-4);
  border-radius: 18px;
  border: 1px solid var(--border-glass);
  background: linear-gradient(165deg, var(--glass-strong), var(--glass));
  backdrop-filter: blur(16px);
  transition: transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.product-col:hover{ transform: translateY(-6px); border-color: var(--c-gold); box-shadow: var(--glow-brand); }
.product-icon{
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(224,138,79,.5));
  opacity: .85;
  margin-bottom: var(--space-2);
}
.product-col h3{ font-size: 1.4rem; margin-bottom: var(--space-3); color: var(--c-ink); font-family: var(--font-display); }
.product-list{ margin-bottom: var(--space-3); }
.product-list li{
  padding: .65em 0;
  border-bottom: 1px dashed var(--border-glass);
  font-size: .98rem;
  color: var(--c-muted);
  position: relative;
  padding-left: 1.1em;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.product-list li::before{
  content: "→";
  position: absolute;
  left: -.3em;
  color: var(--c-terracotta);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), left var(--dur-fast) var(--ease);
}
.product-list li:hover{ color: var(--c-ink); padding-left: 1.5em; }
.product-list li:hover::before{ opacity: 1; left: 0; }

/* ---------------------------------------------------------------------- */
/* Portafolio                                                             */
/* ---------------------------------------------------------------------- */
.portfolio{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.portfolio-head{ margin-bottom: var(--space-5); }
.portfolio .kicker{ justify-content: center; }
.portfolio .kicker::after{ content: "/ 04"; margin-left: .5em; color: var(--c-muted-2); font-weight: 500; letter-spacing: .1em; }
.portfolio-filters{ display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.filter-btn{
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .6em 1.4em;
  border: 1px solid var(--border-glass-2);
  border-radius: 999px;
  color: var(--c-muted);
  background: var(--glass);
  backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.filter-btn.is-active, .filter-btn:hover{ background: var(--grad-brand); border-color: transparent; color: #170f09; box-shadow: var(--glow-brand); }

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  text-align: left;
}
.portfolio-item{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  aspect-ratio: 1 / 1;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.portfolio-item.is-hidden{
  display: none;
}
.portfolio-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  transition: transform var(--dur-slow) var(--ease-expo), filter var(--dur-slow) var(--ease);
}
.portfolio-item:hover{ transform: translateY(-4px); border-color: var(--c-gold); box-shadow: var(--glow-brand); }
.portfolio-item:hover img{ transform: scale(1.09); }
.portfolio-item figcaption{
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-2);
  background: linear-gradient(0deg, rgba(6,7,10,.92), rgba(6,7,10,0));
  color: var(--c-ink);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  transform: translateY(60%);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.portfolio-item:hover figcaption, .portfolio-item:focus-within figcaption{ transform: translateY(0); opacity: 1; }
.portfolio-item figcaption span{ font-weight: 600; font-family: var(--font-display); }
.portfolio-item figcaption small{ color: var(--c-gold); text-transform: uppercase; letter-spacing: .08em; font-size: .7rem; }
.portfolio > .btn{ margin-top: var(--space-5); }

/* ---------------------------------------------------------------------- */
/* Compromiso                                                              */
/* ---------------------------------------------------------------------- */
.commitment{
  position: relative;
  background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-0) 100%);
  padding: var(--space-6) var(--space-3);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}
.commitment-inner{ max-width: var(--container); margin: 0 auto; }
.commitment .kicker--light::after{ content: "/ 05"; margin-left: .5em; color: var(--c-muted-2); font-weight: 500; letter-spacing: .1em; }
.commitment-title{
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  max-width: 16ch;
  margin-bottom: var(--space-3);
}
.commitment-text{ color: var(--c-muted); max-width: 68ch; font-size: 1.05rem; }
.commitment-grid{
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  border-top: 1px solid var(--border-glass);
  padding-top: var(--space-4);
}
.commitment-item{
  padding: var(--space-3);
  border-radius: 16px;
  border: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.commitment-item:hover{ border-color: var(--border-glass); background: var(--glass); transform: translateY(-4px); }
.commitment-num{
  font-family: var(--font-display);
  color: var(--c-gold);
  font-size: 1.5rem;
  font-weight: 600;
  display: block;
  margin-bottom: .6em;
  text-shadow: 0 0 20px rgba(237,199,132,.4);
}
.commitment-item p{ color: var(--c-muted); }

/* ---------------------------------------------------------------------- */
/* Contacto                                                                */
/* ---------------------------------------------------------------------- */
.contact{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-5);
}
.contact .kicker::after{ content: "/ 06"; margin-left: .5em; color: var(--c-muted-2); font-weight: 500; letter-spacing: .1em; }
.contact-lead{ margin-bottom: var(--space-4); max-width: 46ch; color: var(--c-muted); }
.form-row{ margin-bottom: var(--space-3); }
.form-row label{
  display: block;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .5em;
  color: var(--c-gold);
}
.form-row input, .form-row textarea, .form-row select{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-glass-2);
  background: transparent;
  padding: .75em .2em;
  font-size: 1rem;
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-row select{ color-scheme: dark; }
.form-row select option{ background: var(--bg-2); color: var(--c-ink); }
.form-row input::placeholder, .form-row textarea::placeholder{ color: var(--c-muted-2); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  border-color: var(--c-gold);
  box-shadow: 0 1px 0 0 var(--c-gold);
  outline: none;
}
.form-row.has-error input, .form-row.has-error textarea{ border-color: var(--c-error); }
.form-error{
  display: block;
  min-height: 1.2em;
  font-size: .8rem;
  color: var(--c-error);
  margin-top: .3em;
}
.form-status{ margin-top: var(--space-2); font-weight: 600; min-height: 1.4em; }
.form-status.is-success{ color: var(--c-success); }
.form-status.is-error{ color: var(--c-error); }

.contact-info{
  background: linear-gradient(165deg, var(--glass-strong), var(--glass));
  border: 1px solid var(--border-glass);
  color: var(--c-muted);
  padding: var(--space-4);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  align-self: start;
}
.contact-info-block{ padding: var(--space-2) 0; border-bottom: 1px solid var(--border-glass); transition: transform var(--dur-fast) var(--ease); }
.contact-info-block:hover{ transform: translateX(4px); }
.contact-info-block:last-child{ border-bottom: none; }
.contact-info-block h3{
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: .5em;
}
.contact-info-block a:hover{ color: var(--c-ink); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{ position: relative; background: var(--bg-1); color: var(--c-muted); border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--c-terracotta), var(--c-gold), var(--c-terracotta), transparent) 1; overflow: hidden; }
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--space-5) / 2) var(--space-3) calc(var(--space-4) / 2);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr;
  align-items: center;
  gap: var(--space-4);
}

.footer-brand{
  display: inline-flex;
  align-items: center;
  justify-self: start;
  transition: transform var(--dur-med) var(--ease-expo);
}
.footer-brand img{
  height: 55px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.footer-brand:hover{ transform: translateY(-2px); }
.footer-brand:hover img{ opacity: 1; filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(237,199,132,.45)); }

.footer-heading{
  display: block;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: .9em;
  opacity: .85;
}

.footer-nav ul{ display: flex; flex-direction: column; gap: .55em; }
.footer-nav a,
.footer-meta a{
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.footer-nav a::after,
.footer-social a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-expo);
}
.footer-nav a:hover,
.footer-meta a:hover{ color: var(--c-gold); }
.footer-nav a:hover::after,
.footer-social a:hover::after{ transform: scaleX(1); }

.footer-meta p{ margin-bottom: .5em; }
.footer-social{ display: flex; gap: 1.2em; }
.footer-social a{ position: relative; }

.footer-bottom{
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--space-2) / 2) var(--space-3) calc(var(--space-4) / 2);
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--c-muted-2);
  flex-wrap: wrap;
  gap: .5em;
  border-top: 1px solid var(--border-glass);
}

/* ---------------------------------------------------------------------- */
/* WhatsApp flotante                                                       */
/* ---------------------------------------------------------------------- */
.whatsapp-float{
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(150deg, #3fbf75, #2c8c53);
  color: var(--c-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 90;
  transition: transform var(--dur-fast) var(--ease);
}
.whatsapp-float::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(63,191,117,.55);
  animation: ringPulse 2.4s ease-out infinite;
}
.whatsapp-float:hover{ transform: scale(1.08); }
@keyframes ringPulse{
  0%{ transform: scale(1); opacity: .8; }
  100%{ transform: scale(1.5); opacity: 0; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ≤1440px */
@media (max-width: 1440px){
  :root{ --container: 1120px; }
}

/* ≤1200px */
@media (max-width: 1200px){
  .header-actions .btn-line span,
  .header-actions .btn-line{ font-size: .82rem; }
  .commitment-grid{ gap: var(--space-3); }
}

/* ≤992px */
@media (max-width: 992px){
  .main-nav{ display: none; }
  .header-actions .btn-line{ display: none; }
  .nav-toggle{ display: flex; }
  .mobile-nav{ display: block; }

  .about{ grid-template-columns: 1fr; gap: var(--space-4); }
  .about-media{ max-width: 420px; margin: 0 auto; }

  .products-grid{ grid-template-columns: 1fr; gap: var(--space-3); }

  .contact{ grid-template-columns: 1fr; }

  .footer-inner{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}

/* ≤768px */
@media (max-width: 768px){
  :root{ --header-h: 72px; }
  .hero-content{ left: var(--space-2); right: var(--space-2); bottom: var(--space-3); max-width: none; }
  .hero-vertical-label{ display: none; }
  .hero-frame{ height: auto; aspect-ratio: 3 / 4; min-height: unset; }
  .portfolio-grid{ grid-template-columns: repeat(2, 1fr); }
  .commitment-grid{ grid-template-columns: 1fr; }
  .process-item{ grid-template-columns: 50px 1fr; }
  .process-list::before{ left: 24px; }
  .process-number{ width: 44px; height: 44px; font-size: 1.05rem; }
  .cursor-glow{ display: none; }
}

/* ≤576px */
@media (max-width: 576px){
  .header-actions .btn-solid{ padding: .7em 1.1em; font-size: .78rem; }
  .brand-logo{ height: 34px; }
  .hero{ padding: var(--space-1); }
  .hero-frame{ aspect-ratio: 4 / 5; }
  .hero-title{ font-size: clamp(2.2rem, 12vw, 3rem); }
  .hero-actions{ flex-direction: column; align-items: flex-start; }
  .footer-inner{ grid-template-columns: 1fr; text-align: center; }
  .footer-brand{ justify-self: center; }
  .footer-nav ul{ align-items: center; }
  .footer-social{ justify-content: center; }
  .footer-bottom{ flex-direction: column; }
}

/* ≤390px */
@media (max-width: 390px){
  .kicker{ font-size: .7rem; }
  .btn-lg{ width: 100%; justify-content: center; }
  .portfolio-grid{ grid-template-columns: 1fr; }
}

@media (pointer: coarse){
  .cursor-glow{ display: none; }
}