/* ==========================================================================
   DIGITAL FEEDBACK — WORLD-CLASS DESIGN SYSTEM v3.0
   Dark-Tech Aesthetic / Lumen & Logic
   REGLA: object-fit: contain — INQUEBRANTABLE
   LCP TARGET: < 1.2s
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;800;900&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  --df-bg:              #0A0A0A;
  --df-surface:         #111111;
  --df-surface-2:       #1a1a1a;
  --df-border:          rgba(255,255,255,0.06);
  --df-border-accent:   rgba(0,255,0,0.2);
  --df-accent:          #00FF00;
  --df-accent-dim:      rgba(0,255,0,0.08);
  --df-accent-glow:     0 0 40px rgba(0,255,0,0.15);
  --df-accent-glow-md:  0 0 24px rgba(0,255,0,0.12);
  --df-accent-glow-lg:  0 0 32px rgba(0,255,0,0.25), 0 0 64px rgba(0,255,0,0.1);
  --df-text:            #F0F0F0;
  --df-text-secondary:  #A0A0A0; /* A11Y WCAG 2.1: 7.56:1 → AAA ✅ (era #888888, 5.57:1 AA) */
  --df-text-muted:      #808080; /* A11Y WCAG 2.1: 4.80:1 → AA  ✅ (era #444444, 2.04:1 FAIL) */
  --df-font-display:    'Outfit', system-ui, sans-serif;
  --df-font-body:       'Inter', system-ui, sans-serif;
  --df-text-xs:         clamp(11.5px, 0.75vw + 10px, 12.5px);
  --df-text-sm:         clamp(13px, 0.85vw + 11px, 14.5px);
  --df-text-base:       clamp(15px, 1vw + 12px, 16.5px);
  --df-text-lg:         clamp(17px, 1.1vw + 13px, 19px);
  --df-text-xl:         clamp(20px, 1.4vw + 15px, 24px);
  --df-text-2xl:        clamp(24px, 2vw + 16px, 32px);
  --df-text-3xl:        clamp(30px, 3vw + 20px, 44px);
  --df-text-hero:       clamp(38px, 4.5vw + 22px, 68px);
  --df-pad-x:           clamp(1rem, 4vw, 5rem);
  --df-pad-y:           clamp(3rem, 8vw, 7rem);
  --df-radius:          clamp(6px, 0.5vw + 3px, 12px);
  --df-radius-lg:       clamp(10px, 0.8vw + 5px, 20px);
  --df-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }

.df-hero,
.df-proof,
.df-stitch,
.df-home-compare,
.df-home-bento,
.df-triage {
  background-color: var(--df-bg);
  color: var(--df-text);
  font-family: var(--df-font-body);
  font-size: var(--df-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.df-hero img,
.df-stitch img,
.df-home-compare img,
.df-home-bento img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-touch-callout: none; /* Bloquea el menú "Guardar/Compartir" en iOS */
  -webkit-user-select: none;   /* Evita selección de la imagen */
  user-select: none;
}

/* Protección general para todas las imágenes del sitio (Portafolios/Landing) */
img {
  -webkit-touch-callout: none;
}

/* ==========================================================================
   3. HEADER GLOBAL
   ========================================================================== */

.df-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--df-border);
  transition: transform 0.4s ease, background 0.4s ease;
}

/* Evitar colisión con la barra de administración de WordPress */
.admin-bar .df-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .df-header {
    top: 46px;
  }
}

.df-header .brxe-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--df-pad-x);
  max-width: 100%;
}

.df-header-logo {
  max-height: 48px;
  width: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(0,255,0,0));
}

.df-header-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(0,255,0,0.2));
}

/* ==========================================================================
   4. HERO
   ========================================================================== */

.df-hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--df-pad-y) var(--df-pad-x);
  overflow: hidden;
}

.df-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  pointer-events: none;
  animation: df-grid-pulse 10s ease-in-out infinite;
}

.df-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  contain: layout style paint;
}

.df-hero__media img,
.df-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.22) contrast(1.1);
  transition: filter 1.2s ease;
}

.df-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 20%, var(--df-bg) 80%),
              linear-gradient(to bottom, transparent 50%, var(--df-bg) 100%);
}

.df-hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}

.df-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--df-accent);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  animation: df-fade-up 0.8s var(--df-ease-out) 0.1s both;
}

.df-hero__kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-accent);
  box-shadow: 0 0 12px var(--df-accent);
  animation: df-pulse-dot 2s ease infinite;
}

.df-hero__h1 {
  font-family: var(--df-font-display);
  font-size: var(--df-text-hero);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--df-text);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  animation: df-fade-up 0.9s var(--df-ease-out) 0.2s both;
}

.df-hero__h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #00FF00 0%, #a3ffa3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.4));
}

.df-hero__subtitle {
  font-size: var(--df-text-lg);
  color: var(--df-text-secondary);
  max-width: 580px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  line-height: 1.55;
  animation: df-fade-up 0.9s var(--df-ease-out) 0.35s both;
}

.df-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  animation: df-fade-up 0.9s var(--df-ease-out) 0.5s both;
}

.df-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--df-font-body);
  font-size: var(--df-text-base);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: #000000;
  background: var(--df-accent);
  border: 1px solid var(--df-accent);
  border-radius: 4px;
  padding: 0.875em 1.75em;
  cursor: pointer;
  transition: background 0.3s var(--df-ease-out), border-color 0.3s var(--df-ease-out), box-shadow 0.4s var(--df-ease-out), transform 0.3s var(--df-ease-out);
  will-change: transform, box-shadow;
}

.df-btn-primary:hover {
  background: #1aff1a;
  border-color: #1aff1a;
  box-shadow: var(--df-accent-glow-lg);
  transform: translateY(-2px);
}

.df-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--df-font-body);
  font-size: var(--df-text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--df-text);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 0.875em 1.75em;
  cursor: pointer;
  transition: border-color 0.3s var(--df-ease-out), color 0.3s var(--df-ease-out), background-color 0.3s var(--df-ease-out), box-shadow 0.4s var(--df-ease-out), transform 0.3s var(--df-ease-out);
  will-change: transform, box-shadow;
}

.df-btn-ghost:hover {
  border-color: var(--df-accent);
  color: var(--df-accent);
  background: rgba(0, 255, 0, 0.02);
  box-shadow: var(--df-accent-glow-md);
  transform: translateY(-2px);
}

.df-hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--df-text-muted);
  font-size: var(--df-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: df-fade-up 1s ease 1.2s both;
}

.df-hero__scroll span {
  animation: df-scroll-bounce 2.4s ease-in-out 1.8s infinite;
}

.df-hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--df-accent), transparent);
  opacity: 0.5;
  animation: df-scroll-line 2s ease-in-out 1.5s infinite;
}

/* ==========================================================================
   4. PROOF STRIP
   ========================================================================== */

.df-proof {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
  border-top: 1px solid var(--df-border);
  border-bottom: 1px solid var(--df-border);
  overflow: hidden;
  position: relative;
}

/* Máscara de fade en los bordes laterales para efecto de desvanecimiento */
.df-proof::before,
.df-proof::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3rem, 8vw, 7rem);
  z-index: 2;
  pointer-events: none;
}
.df-proof::before {
  left: 0;
  background: linear-gradient(to right, var(--df-bg) 0%, transparent 100%);
}
.df-proof::after {
  right: 0;
  background: linear-gradient(to left, var(--df-bg) 0%, transparent 100%);
}

/* Track infinito: contiene dos copias del listado para loop seamless */
.df-proof__track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: df-ticker 32s linear infinite;
  will-change: transform;
}

.df-proof__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}

.df-proof__item {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--df-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--df-text-secondary);
  white-space: nowrap;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem);
  transition: color 0.3s ease;
}

.df-proof__item:hover {
  color: var(--df-text);
}

.df-proof__item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--df-accent);
  box-shadow: 0 0 6px var(--df-accent);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Separador vertical entre ítems */
.df-proof__item::after {
  content: '|';
  margin-left: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--df-text-muted);
  opacity: 0.3;
  font-weight: 300;
}

/* ==========================================================================
   5. SCROLLYTELLING (Stitch Pattern)
   ========================================================================== */

.df-stitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0;
  padding: 0 var(--df-pad-x);
}

.df-stitch__visual {
  position: sticky;
  top: 0;
  height: 100svh;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.df-stitch__frame {
  position: relative;
  width: 90%;
  max-width: 500px;
  aspect-ratio: 3 / 4;
  border-radius: var(--df-radius-lg);
  border: 1px solid var(--df-border);
  overflow: hidden;
  background: var(--df-surface);
  contain: layout style paint;
}

.df-stitch__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(100%) brightness(0.6);
  transition: opacity 0.6s var(--df-ease-out), filter 0.6s var(--df-ease-out), transform 0.8s var(--df-ease-out);
  will-change: opacity, filter, transform;
}

.df-stitch__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s var(--df-ease-out), filter 0.6s var(--df-ease-out);
  will-change: opacity;
  z-index: 1;
}

.df-stitch__label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--df-accent);
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--df-border);
  padding: 0.4em 0.8em;
  border-radius: 4px;
  z-index: 3;
}

.df-stitch__steps {
  display: flex;
  flex-direction: column;
}

.df-stitch__step {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 2rem 4rem 4rem;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--df-ease-out), transform 0.8s var(--df-ease-out);
  will-change: opacity, transform;
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
  backface-visibility: hidden;
}

.df-stitch__step.in-view {
  opacity: 1;
  transform: translateY(0);
}

.df-stitch__step-number {
  font-family: var(--df-font-display);
  font-size: clamp(60px, 10vw, 110px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--df-text-muted);
  margin-bottom: 0.25em;
  -webkit-text-stroke: 1px var(--df-border);
}

.df-stitch__step-tag {
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-accent);
  margin-bottom: 0.75rem;
}

.df-stitch__step-title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--df-text);
  margin-bottom: 1rem;
}

.df-stitch__step-title em {
  font-style: normal;
  background: linear-gradient(135deg, #00FF00 0%, #a3ffa3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(0, 255, 0, 0.35));
}

.df-stitch__step-body {
  font-size: var(--df-text-base);
  color: var(--df-text-secondary);
  line-height: 1.65;
  max-width: 440px;
}

/* ==========================================================================
   6. BENTO GRID HOME
   ========================================================================== */

.df-home-bento {
  padding: var(--df-pad-y) var(--df-pad-x);
}

.df-home-bento__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.df-home-bento__kicker {
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-accent);
  display: block;
  margin-bottom: 0.6em;
}

.df-home-bento__title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-3xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.df-home-bento__title em {
  font-style: normal;
  background: linear-gradient(135deg, #00FF00 0%, #a3ffa3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(0, 255, 0, 0.35));
}

.df-home-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(280px, 28vw, 380px);
  gap: clamp(8px, 0.5vw + 4px, 12px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.df-home-bento__item {
  position: relative;
  border-radius: var(--df-radius);
  overflow: hidden;
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  cursor: pointer;
  contain: layout style paint;
  opacity: 0;
  transform: scale(0.96) translateY(16px);
  transition: opacity 0.8s var(--df-ease-out), transform 0.8s var(--df-ease-out), border-color 0.3s var(--df-ease-out), box-shadow 0.4s var(--df-ease-out);
  will-change: opacity, transform, border-color, box-shadow;
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.df-home-bento__item.in-view {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.df-home-bento__item:nth-child(3n+1) { grid-row: span 2; }
.df-home-bento__item:nth-child(6n+4) { grid-column: span 2; }

.df-home-bento__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(60%) brightness(0.7);
  transition: filter 0.6s var(--df-ease-out), transform 0.8s var(--df-ease-out);
  background: var(--df-surface);
  will-change: filter, transform;
}

.df-home-bento__item:hover img {
  filter: grayscale(0%) brightness(1.02);
  transform: scale(1.03);
}

.df-home-bento__item:hover {
  border-color: rgba(0, 255, 0, 0.5);
  box-shadow: var(--df-accent-glow-lg), inset 0 0 15px rgba(255, 255, 255, 0.01);
  transform: scale(1.01) translateY(-2px);
}

.df-bento-video-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--df-surface);
  pointer-events: none;
}

.df-bento-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: grayscale(60%) brightness(0.6);
  transition: opacity 0.6s var(--df-ease-out), transform 0.8s var(--df-ease-out), filter 0.6s var(--df-ease-out);
  will-change: opacity, transform, filter;
}

.df-home-bento__item:hover .df-bento-video {
  opacity: 0.9;
  filter: grayscale(0%) brightness(1.05);
  transform: scale(1.03);
}

.df-home-bento__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.4) 40%, transparent 70%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--df-ease-out), transform 0.4s var(--df-ease-out);
  z-index: 3;
}

.df-home-bento__item:hover .df-home-bento__item-overlay,
.df-home-bento__item:focus-within .df-home-bento__item-overlay {
  opacity: 1;
  transform: translateY(0);
}

.df-home-bento__item-category {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-accent);
  background: var(--df-accent-dim);
  padding: 0.25em 0.6em;
  border-radius: 4px;
  margin-bottom: 0.4em;
  border: 1px solid rgba(0, 255, 0, 0.15);
}

.df-home-bento__item-title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--df-text);
}

.df-home-bento__item-client {
  font-size: var(--df-text-xs);
  color: var(--df-text-secondary);
  margin-top: 0.25em;
}

.df-home-bento__axis {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-text-muted);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--df-border);
  justify-content: center;
  flex-wrap: wrap;
}

.df-home-bento__axis-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.df-home-bento__axis-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-accent);
}

/* ==========================================================================
   7. SLIDER HIBRIDO (RAW vs IA)
   ========================================================================== */

.df-home-compare {
  padding: var(--df-pad-y) var(--df-pad-x);
  background: linear-gradient(180deg, var(--df-bg) 0%, var(--df-surface) 50%, var(--df-bg) 100%);
}

.df-home-compare__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

.df-home-compare__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.df-home-compare__kicker {
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-accent);
}

.df-home-compare__title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.df-home-compare__title em {
  font-style: normal;
  background: linear-gradient(135deg, #00FF00 0%, #a3ffa3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(0, 255, 0, 0.35));
}

.df-home-compare__body {
  font-size: var(--df-text-base);
  color: var(--df-text-secondary);
  line-height: 1.65;
}

.df-home-compare__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

.df-home-compare__stat {
  background: var(--df-surface-2);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  padding: 1rem 1.25rem;
}

.df-home-compare__stat-value {
  font-family: var(--df-font-display);
  font-size: var(--df-text-2xl);
  font-weight: 900;
  color: var(--df-accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.25em;
}

.df-home-compare__stat-label {
  font-size: var(--df-text-xs);
  color: var(--df-text-secondary);
  line-height: 1.4;
}

/* ── CONTENEDOR PRINCIPAL DEL SLIDER ── */
.df-home-compare__slider.df-compare {
  --df-split: 50%;
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--df-radius-lg);
  border: 1px solid var(--df-border);
  background-color: var(--df-surface);
  cursor: col-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  contain: layout style paint;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--df-ease-out), transform 0.8s var(--df-ease-out), border-color 0.3s ease, box-shadow 0.4s ease;
  will-change: opacity, transform, clip-path;
}

.df-home-compare__slider.df-compare.in-view {
  opacity: 1;
  transform: translateY(0);
}

.df-compare:focus-within {
  outline: 2px solid var(--df-accent);
  outline-offset: 2px;
  box-shadow: var(--df-accent-glow);
}

/* ── CAPAS DE IMAGEN (ANTI-CROP) ── */
.df-compare__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.df-compare__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Capa "Before" (RAW): visible a la izquierda */
.df-compare__before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--df-split)) 0 0);
  will-change: clip-path;
}

/* Capa "After" (IA Élite): visible a la derecha */
.df-compare__after {
  z-index: 1;
}

/* ── ETIQUETAS (RAW / IA ÉLITE) ── */
.df-compare__label {
  position: absolute;
  bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  z-index: 5;
  font-family: var(--df-font-body);
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.df-compare__before .df-compare__label {
  left: clamp(0.75rem, 1.5vw, 1.25rem);
  color: var(--df-text);
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--df-border);
}

.df-compare__after .df-compare__label {
  right: clamp(0.75rem, 1.5vw, 1.25rem);
  color: #000000;
  background: var(--df-accent);
  border: 1px solid var(--df-accent);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

/* ── LÍNEA DIVISORIA + HANDLE ── */
.df-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Copia espejo de compare-slider.css (world-class se encola DESPUÉS y gana
     el conflicto: ambas copias deben moverse juntas). Ancho completo +
     translateX → el arrastre va al COMPOSITOR (LEY 4). */
  width: 100%;
  pointer-events: none;
  transform: translateX(calc(var(--df-split) - 50%));
  will-change: transform;
}

.df-compare__handle::before,
.df-compare__handle::after {
  content: '';
  flex: 1;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 255, 0, 0.4) 15%,
    rgba(0, 255, 0, 0.4) 85%,
    transparent
  );
  border-radius: 1px;
}

.df-compare__knob {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 4vw, 44px);
  height: clamp(36px, 4vw, 44px);
  border-radius: 50%;
  background: var(--df-bg);
  border: 2px solid rgba(0, 255, 0, 0.5);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 0 0 rgba(0, 255, 0, 0);
  flex-shrink: 0;
  transition:
    border-color 0.3s var(--df-ease-out),
    box-shadow 0.4s var(--df-ease-out),
    transform 0.3s var(--df-ease-out);
}

.df-compare__knob svg {
  width: 55%;
  height: 55%;
  fill: none;
  stroke: var(--df-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

/* Hover y Estados Activos del Slider */
.df-compare:hover .df-compare__knob {
  border-color: var(--df-accent);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(0, 255, 0, 0.35);
}

.df-compare--active .df-compare__knob {
  transform: scale(1.12);
  border-color: var(--df-accent);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.8),
    0 0 36px rgba(0, 255, 0, 0.5);
}

.df-compare--active .df-compare__handle::before,
.df-compare--active .df-compare__handle::after {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 255, 0, 0.8) 15%,
    rgba(0, 255, 0, 0.8) 85%,
    transparent
  );
}

/* ── INPUT RANGE (Invisible pero accesible) ── */
.df-compare__range {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: col-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.df-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1px;
  height: 100%;
}

.df-compare__range::-moz-range-thumb {
  width: 1px;
  height: 100%;
  border: 0;
  background: transparent;
}

/* ==========================================================================
   8. TRIAGE FORM
   ========================================================================== */

.df-triage {
  padding: var(--df-pad-y) var(--df-pad-x);
  background: linear-gradient(180deg, var(--df-surface) 0%, var(--df-bg) 100%);
  border-top: 2px solid transparent;
  position: relative;
}

/* Borde superior difuso con glow verde */
.df-triage::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--df-accent), transparent);
  opacity: 0.5;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.25), 0 0 40px rgba(0, 255, 0, 0.1);
  pointer-events: none;
}

.df-triage__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Kicker con estilo badge/chip neón */
.df-triage__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-accent);
  background: var(--df-accent-dim);
  border: 1px solid rgba(0, 255, 0, 0.25);
  border-radius: 100px;
  padding: 0.35em 0.9em;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.1);
}

.df-triage__kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-accent);
  box-shadow: 0 0 8px var(--df-accent);
  animation: df-pulse-dot 2s ease infinite;
}

/* Título con gradiente neón idéntico al Hero h1 */
.df-triage__title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 0.6rem;
  background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 60%, #00FF00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.2));
}

.df-triage__subtitle {
  font-size: var(--df-text-base);
  color: var(--df-text-secondary);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.df-triage .bricks-form input,
.df-triage .bricks-form select,
.df-triage .bricks-form textarea {
  background: var(--df-bg) !important;
  border: 1px solid var(--df-border) !important;
  border-radius: var(--df-radius) !important;
  color: var(--df-text) !important;
  font-family: var(--df-font-body) !important;
  font-size: var(--df-text-sm) !important;
  padding: 0.8em 1em !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  width: 100%;
}

.df-triage .bricks-form input:focus,
.df-triage .bricks-form select:focus,
.df-triage .bricks-form textarea:focus {
  outline: none !important;
  border-color: var(--df-accent) !important;
  box-shadow: 0 0 0 3px var(--df-accent-dim) !important;
}

.df-triage .bricks-form-submit button,
.df-triage .bricks-form-submit input[type="submit"] {
  background: var(--df-accent) !important;
  color: var(--df-bg) !important;
  font-family: var(--df-font-body) !important;
  font-weight: 600 !important;
  font-size: var(--df-text-sm) !important;
  letter-spacing: 0.06em !important;
  border: 1px solid var(--df-accent) !important;
  border-radius: 4px !important;
  padding: 0.875em 2.5em !important;
  cursor: pointer !important;
  transition: background 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
  width: 100%;
}

.df-triage .bricks-form-submit button:hover,
.df-triage .bricks-form-submit input[type="submit"]:hover {
  background: #1aff1a !important;
  box-shadow: 0 0 28px rgba(0,255,0,0.3) !important;
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   9. KEYFRAMES
   ========================================================================== */

@keyframes df-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes df-step-reveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes df-item-enter {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes df-pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.8); }
}

@keyframes df-scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* Bounce para el texto "Explorar" del scroll indicator */
@keyframes df-scroll-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%       { transform: translateY(6px); opacity: 1; }
}

/* Ticker horizontal infinito para el proof strip */
@keyframes df-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes df-grid-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes df-compare-hint {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-8px); }
  75%      { transform: translateX(8px); }
}

/* Animación del hint de compare slider (primera carga) */
.df-compare:not(.df-compare--interacted) .df-compare__knob {
  animation: df-compare-hint 2s ease-in-out 1s 2;
}

.df-compare--interacted .df-compare__knob {
  animation: none;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .df-stitch {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .df-stitch__visual {
    position: relative;
    height: 50vh;
    top: auto;
  }
  .df-stitch__step {
    padding: 3rem var(--df-pad-x);
    min-height: auto;
  }
  .df-home-compare__inner {
    grid-template-columns: 1fr;
  }
  .df-home-compare__copy { order: 2; }
  .df-home-compare__slider.df-compare { order: 1; }
  .df-home-bento__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(240px, 30vw, 340px);
  }
  .df-home-bento__item:nth-child(3n+1) { grid-row: span 1; }
  .df-home-bento__item:nth-child(6n+4) { grid-column: span 1; }
  .df-home-bento__item:nth-child(odd) { grid-row: span 2; }
}

@media (max-width: 600px) {
  .df-home-bento__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(280px, 75vw, 380px);
  }
  .df-home-bento__item:nth-child(n) {
    grid-row: span 1;
    grid-column: span 1;
  }
  .df-home-compare__stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   11. ACCESIBILIDAD
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .df-stitch__step,
  .df-home-bento__item,
  .df-home-compare__slider.df-compare,
  .df-hero__kicker,
  .df-hero__h1,
  .df-hero__subtitle,
  .df-hero__ctas {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .df-hero__kicker::before { animation: none; }
}

/* ==========================================================================
   12. SINGLE — PROYECTO B2B (template_include override de Bricks)
   ========================================================================== */

/* ── Reset de página ── */
.df-single-proyecto-b2b,
.df-page {
  background: var(--df-bg);
  color: var(--df-text);
  font-family: var(--df-font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Secciones genéricas ── */
.df-section {
  padding: var(--df-pad-y) var(--df-pad-x);
}

.df-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.df-section__inner--full {
  max-width: 100%;
  padding: 0;
}

.df-section__inner--centered {
  text-align: center;
  max-width: 640px;
}

.df-section__header {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.df-section__kicker {
  display: inline-block;
  font-size: var(--df-text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--df-accent);
  margin-bottom: 0.5rem;
}

/* ── HERO del Proyecto ── */
.df-proyecto-hero {
  position: relative;
  min-height: 70svh;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--df-pad-y) var(--df-pad-x);
  overflow: hidden;
  background: var(--df-bg);
}

.df-proyecto-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.df-proyecto-hero__media picture,
.df-proyecto-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zero-Crop Policy */
  object-position: center 30%;
  filter: brightness(0.45) grayscale(20%);
}

.df-proyecto-hero__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--df-bg) 0%,
    rgba(10,10,10,0.75) 40%,
    rgba(10,10,10,0.2) 100%
  );
}

.df-proyecto-hero__content {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

/* Breadcrumb */
.df-breadcrumb {
  font-size: var(--df-text-xs);
  color: var(--df-text-muted);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.df-breadcrumb a {
  color: var(--df-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.df-breadcrumb a:hover { color: var(--df-accent); }
.df-breadcrumb [aria-current="page"] { color: var(--df-text-secondary); }

/* Tags de taxonomía */
.df-proyecto-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.df-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.25em 0.75em;
  border-radius: 4px;
  border: 1px solid;
  transition: border-color 0.2s, color 0.2s;
}

.df-tag--industria {
  color: var(--df-accent);
  background: var(--df-accent-dim);
  border-color: rgba(0,255,0,0.25);
}

.df-tag--industria:hover {
  border-color: var(--df-accent);
  box-shadow: 0 0 12px var(--df-accent-dim);
}

.df-tag--formato {
  color: var(--df-text-secondary);
  background: rgba(255,255,255,0.03);
  border-color: var(--df-border);
}

/* Kicker cliente */
.df-proyecto-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--df-text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-text-secondary);
  margin-bottom: 0.75rem;
}

.df-proyecto-hero__kicker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--df-accent);
  box-shadow: 0 0 8px var(--df-accent);
  flex-shrink: 0;
}

/* H1 del proyecto */
.df-proyecto-hero__title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-hero);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--df-text);
  margin-bottom: 1rem;
}

.df-proyecto-hero__excerpt {
  font-size: var(--df-text-lg);
  color: var(--df-text-secondary);
  line-height: 1.55;
  max-width: 560px;
}

/* ── Bento Grid del Proyecto ── */
.df-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(220px, 22vw, 320px);
  gap: clamp(6px, 0.4vw + 3px, 10px);
  padding: 0 var(--df-pad-x) var(--df-pad-y);
}

.df-bento__item {
  position: relative;
  background: var(--df-surface);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.3s var(--df-ease-out),
    box-shadow 0.4s var(--df-ease-out),
    transform 0.3s var(--df-ease-out);
}

.df-bento__item:hover,
.df-bento__item:focus-within {
  border-color: rgba(0,255,0,0.4);
  box-shadow: var(--df-accent-glow-md);
  transform: translateY(-2px);
}

.df-bento__item:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }

/* Wide: spans 2 columnas */
.df-bento__item--wide { grid-column: span 2; }

/* CTA card */
.df-bento__item--cta {
  background: linear-gradient(135deg, rgba(0,255,0,0.06) 0%, rgba(0,0,0,0) 100%);
  border-color: rgba(0,255,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.df-bento__cta-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 320px;
}

.df-bento__cta-kicker {
  font-size: var(--df-text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--df-accent);
}

.df-bento__cta-title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--df-text);
}

.df-bento__cta-sub {
  font-size: var(--df-text-xs);
  color: var(--df-text-secondary);
}

/* Media en bento */
.df-bento__media {
  width: 100%;
  height: 100%;
  margin: 0;
}

.df-bento__media picture,
.df-bento__media img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zero-Crop Policy INQUEBRANTABLE */
  object-position: center;
  background: var(--df-surface);
  transition: transform 0.6s var(--df-ease-out), filter 0.4s ease;
  filter: brightness(0.9);
}

.df-bento__item:hover .df-bento__media img {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Overlay de info */
.df-bento__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,0.9) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.df-bento__item:hover .df-bento__overlay,
.df-bento__item:focus-within .df-bento__overlay {
  opacity: 1;
  transform: translateY(0);
}

.df-bento__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--df-font-display);
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 900;
  color: rgba(255,255,255,0.06);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  pointer-events: none;
}

.df-bento__category {
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--df-accent);
}

/* ── Compare Section ── */
.df-compare-section .df-compare {
  margin-top: 2rem;
  border-radius: var(--df-radius-lg);
  overflow: hidden;
  border: 1px solid var(--df-border);
}

/* ── IA Motor Badge ── */
.df-ia-motor {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--df-surface-2);
  border: 1px solid var(--df-border-accent);
  border-radius: 999px;
  padding: 0.4em 1em;
  margin-bottom: 1.5rem;
}

.df-ia-motor__label {
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--df-text-muted);
}

.df-ia-motor__value {
  font-size: var(--df-text-sm);
  font-weight: 700;
  color: var(--df-accent);
}

.df-ia-prompt {
  margin-top: 1rem;
}

.df-ai-evolution__upsell {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(0,255,0,0.03);
  border: 1px dashed rgba(0,255,0,0.15);
  border-radius: var(--df-radius);
}

/* ── CTA Final ── */
.df-proyecto-cta {
  border-top: 1px solid var(--df-border);
}

.df-proyecto-cta__title {
  font-family: var(--df-font-display);
  font-size: var(--df-text-2xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--df-text);
  margin-bottom: 0.5rem;
}

.df-proyecto-cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .df-bento__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(160px, 40vw, 240px);
  }

  .df-bento__item--wide { grid-column: span 2; }

  .df-proyecto-hero {
    min-height: 55svh;
    min-height: 55vh;
  }
}

@media (max-width: 480px) {
  .df-bento__grid {
    grid-template-columns: 1fr;
  }

  .df-bento__item--wide { grid-column: span 1; }
}

/* ==========================================================================
   FORMULARIO DE CONTACTO (TRIAGE)
   ========================================================================== */
.df-contact-form {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.df-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.df-form-group label {
  font-family: var(--df-font-display);
  font-size: var(--df-text-base);
  color: var(--df-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.df-contact-form input,
.df-contact-form textarea {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--df-border);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--df-text);
  font-family: var(--df-font-body);
  font-size: 16px;
  transition: all 0.3s ease;
  width: 100%;
}

.df-contact-form input:focus,
.df-contact-form textarea:focus {
  outline: none;
  border-color: var(--df-accent);
  background: rgba(0, 255, 0, 0.02);
  box-shadow: 0 0 0 1px var(--df-accent);
}

.df-contact-form input::placeholder,
.df-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

.df-submit-btn {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
  position: relative;
  min-height: 56px;
  border: none;
  cursor: pointer;
}

.df-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.df-btn-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: df-spin 1s linear infinite;
}

@keyframes df-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.df-form-feedback {
  padding: 1rem;
  border-radius: 4px;
  font-family: var(--df-font-body);
  font-size: var(--df-text-sm);
  text-align: center;
  margin-top: 1rem;
}

.df-form-feedback.is-success {
  background: rgba(0, 255, 0, 0.1);
  color: var(--df-accent);
  border: 1px solid var(--df-accent);
}

.df-form-feedback.is-error {
  background: rgba(255, 0, 0, 0.1);
  color: #ff4444;
  border: 1px solid #ff4444;
}

/* ==========================================================================
   WHATSAPP FLOATING BUTTON
   ========================================================================== */
.df-whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background-color: var(--df-accent); /* Verde Neón #00FF00 */
  color: #000; /* Ícono negro sobre fondo neón */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 20px rgba(0, 255, 0, 0.3);
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.3s ease;
}

.df-whatsapp-float:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 255, 0, 0.5);
}

@media (max-width: 768px) {
  .df-whatsapp-float {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
  }
  .df-whatsapp-float svg {
    width: 24px;
    height: 24px;
  }
}

/* ==========================================================================
   CLIENT LOGOS MARQUEE
   ========================================================================== */
.df-clients-marquee {
  width: 100%;
  overflow: hidden;
  padding: 4rem 0;
  background: var(--df-bg);
  border-top: 1px solid var(--df-border);
  position: relative;
  display: flex;
}
.df-clients-marquee::before,
.df-clients-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.df-clients-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--df-bg) 0%, transparent 100%);
}
.df-clients-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--df-bg) 0%, transparent 100%);
}

.df-marquee-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  animation: dfMarquee 30s linear infinite;
}

.df-marquee-track:hover {
  animation-play-state: paused;
}

.df-marquee-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  /* Look plateado corporativo */
  filter: grayscale(100%) brightness(1.3) contrast(1.1) opacity(0.5) drop-shadow(0 0 2px rgba(255,255,255,0.1));
  transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
  cursor: pointer;
}

.df-marquee-logo:hover {
  filter: grayscale(0%) brightness(1) contrast(1) opacity(1) drop-shadow(0 0 12px rgba(0,255,0,0.3));
  transform: scale(1.15);
}

@keyframes dfMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - 2rem));
  }
}

/* =========================================================================
   16. CSS TRAP OVERLAY (ESCUDO ANTI-ROBO GLOBAL)
   ========================================================================= */

/* 
 * Inyecta una capa invisible sobre elementos sensibles 
 * para frustrar intentos de descarga por click derecho o scrapers básicos.
 */
.df-secure-media-container {
  position: relative;
  display: inline-block;
}

.df-secure-media-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: auto; /* Captura los clicks */
  background: transparent;
}

/* Prevenir selección de texto en el sitio */
body.df-shield-active {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ==========================================================================
   17. GRILLA BENTO INDUSTRIAL — SECCIÓN "OPERATIVA A ESCALA INDUSTRIAL"
   Ancla maestra: .df-industrial-grid (toda especificidad vive aquí)
   Leyes: Zero-Crop (contain), Dark-Tech, Space Grotesk + Inter, LCP-safe
   ========================================================================== */

/* ── Variables locales de la sección ──
   NOTA CRÍTICA: Bricks fija html{font-size:62.5%} → 1rem = 10px en este sitio.
   Toda la tipografía de esta sección usa px absolutos (inmune al root 62.5%). */
.df-industrial-grid {
  --df-bg-card: #111111;
  --df-border-hover: rgba(0, 255, 0, 0.35);
  --df-row-h: clamp(240px, 26vw, 340px);
  color: var(--df-text);
  font-family: var(--df-font-body);
}

/* ── Tipografía corporativa B2B (px absolutos) ── */
.df-industrial-grid .df-bento__heading {
  font-family: 'Space Grotesk', var(--df-font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--df-text);
}

.df-industrial-grid .df-bento__subtitle {
  font-family: var(--df-font-body);
  font-weight: 400;
  font-size: 16px;
  color: #EDEDED; /* Gris luminoso — legible sobre fondo negro */
  line-height: 1.65;
  max-width: 760px;
}

/* ── Grid Bento asimétrico (2 columnas: tall izquierda + 2 apiladas derecha) ──
   Sobrescribe el padding heredado de .df-bento__grid global (evita aire muerto). */
.df-industrial-grid .df-bento__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--df-row-h);
  gap: clamp(10px, 1.2vw, 16px);
  padding: 0 var(--df-pad-x) clamp(2rem, 4vw, 3.5rem);
}

/* Tarjeta vertical: ocupa 2 filas (columna izquierda) */
.df-industrial-grid .df-bento__item--tall {
  grid-row: span 2;
}

/* Tarjeta ancha: en layout 2-col ocupa 1 columna (fila superior derecha) */
.df-industrial-grid .df-bento__item--wide {
  grid-column: span 1;
}

/* ── Tarjetas Dark-Tech ── */
.df-industrial-grid .df-bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--df-radius);
  overflow: hidden;
  cursor: pointer; /* Fuerza el :hover en iOS al tocar */
  -webkit-tap-highlight-color: transparent; /* Quita el parpadeo azul en móviles */
  transition:
    border-color 0.3s ease,
    box-shadow 0.35s ease,
    transform 0.3s ease;
}

.df-industrial-grid .df-bento__item:hover,
.df-industrial-grid .df-bento__item:focus-within {
  border-color: var(--df-border-hover);
  box-shadow: 0 0 28px rgba(0, 255, 0, 0.08);
  transform: translateY(-3px);
}

/* ── Media: Zero-Crop (LEY 2) ── */
.df-industrial-grid .df-bento__media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--df-surface); /* letterbox intencional, nunca recorte */
}

.df-industrial-grid .df-bento__media img,
.df-industrial-grid .df-bento__media picture {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zero-Crop INQUEBRANTABLE */
  object-position: center;
}

/* Hover: solo brillo, sin scale para proteger Zero-Crop */
.df-industrial-grid .df-bento__item:hover .df-bento__media img {
  transform: none;
  filter: brightness(1.08);
}

/* ── Overlay: texto SIEMPRE visible (fix: hover ya no oculta textos) ── */
.df-industrial-grid .df-bento__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.45) 40%, transparent 72%);
  opacity: 1;
  transform: none;
  pointer-events: none;
}

/* Imagen dentro del overlay (caso tarjeta tall con placeholder roto) */
.df-industrial-grid .df-bento__overlay img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zero-Crop */
  object-position: center;
  z-index: 0;
}

/* Textos del overlay por encima de la imagen */
.df-industrial-grid .df-bento__overlay .df-bento__title,
.df-industrial-grid .df-bento__overlay .df-bento__client {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.df-industrial-grid .df-bento__title {
  font-family: 'Space Grotesk', var(--df-font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--df-text);
  margin-bottom: 5px;
}

.df-industrial-grid .df-bento__client {
  font-family: var(--df-font-body);
  font-weight: 400;
  font-size: 15px;
  color: #EDEDED; /* Gris luminoso — contraste AAA sobre #0A0A0A */
  line-height: 1.55; /* Interlineado que respira */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* el texto NUNCA desborda la tarjeta ni tapa la foto */
  overflow: hidden;
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); /* Legibilidad extra sobre fotografía */
}

/* Tarjetas cortas (no-tall): texto más compacto para dar protagonismo a la foto */
.df-industrial-grid .df-bento__item:not(.df-bento__item--tall) .df-bento__title {
  font-size: 18px;
  margin-bottom: 4px;
}

.df-industrial-grid .df-bento__item:not(.df-bento__item--tall) .df-bento__client {
  font-size: 14px;
  -webkit-line-clamp: 3;
}

/* Hover: acento neón en el título */
.df-industrial-grid .df-bento__item:hover .df-bento__title {
  color: var(--df-accent);
}

/* Interacción Expandible: Scroll nativo en hover de la tarjeta completa */
.df-industrial-grid .df-bento__item:hover .df-bento__client,
.df-industrial-grid .df-bento__item:active .df-bento__client {
  display: block;
  -webkit-line-clamp: unset;
  overflow-y: auto;
  max-height: 115px;
  padding-right: 5px;
  pointer-events: auto;
}
.df-industrial-grid .df-bento__item:hover .df-bento__client::-webkit-scrollbar,
.df-industrial-grid .df-bento__item:active .df-bento__client::-webkit-scrollbar { width: 4px; }
.df-industrial-grid .df-bento__item:hover .df-bento__client::-webkit-scrollbar-track,
.df-industrial-grid .df-bento__item:active .df-bento__client::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
.df-industrial-grid .df-bento__item:hover .df-bento__client::-webkit-scrollbar-thumb,
.df-industrial-grid .df-bento__item:active .df-bento__client::-webkit-scrollbar-thumb { background: var(--df-accent); border-radius: 4px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .df-industrial-grid .df-bento__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .df-industrial-grid .df-bento__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(260px, 62vw, 400px);
  }
  .df-industrial-grid .df-bento__item--tall {
    grid-row: span 1;
  }
  .df-industrial-grid .df-bento__item--wide {
    grid-column: span 1;
  }
}

/* Accesibilidad: reducir movimiento (LEY 4) */
@media (prefers-reduced-motion: reduce) {
  .df-industrial-grid .df-bento__item,
  .df-industrial-grid .df-bento__item:hover,
  .df-industrial-grid .df-bento__item:focus-within {
    transition: none;
    transform: none;
  }
}

/* ==========================================================================
   18. CABECERA B2B (HERO) — REDISEÑO CORPORATIVO DARK-TECH
   Ancla maestra: .df-home-hero (clase asignada en la sección Bricks)
   Tipografías: Space Grotesk (display) + Inter (body) — LEY 4
   Selectores seguros: solo clases semánticas, cero IDs de Bricks
   ========================================================================== */

/* ── Ancla y contenedor maestro: Fondo Dark-Tech y contexto de apilamiento ── */
.df-home-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--df-bg, #0A0A0A);
}

.df-home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 108%, rgba(0, 255, 0, 0.07), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(10, 10, 10, 0.6) 100%);
  pointer-events: none;
}

/* Contenido por encima de los overlays */
.df-home-hero .df-hero__content {
  position: relative;
  z-index: 2;
}

/* ── Kicker: etiqueta técnica superior ── */
.df-home-hero .df-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--df-font-body);
  font-size: var(--df-text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--df-accent);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  animation: df-fade-up 0.8s var(--df-ease-out) 0.1s both;
}

.df-home-hero .df-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--df-accent);
  box-shadow: 0 0 12px var(--df-accent);
  animation: df-pulse-dot 2s ease infinite;
}

/* ── Titular: Space Grotesk, jerarquía corporativa ── */
.df-home-hero .df-hero__title {
  font-family: 'Space Grotesk', var(--df-font-display);
  font-size: clamp(34px, 20px + 4.2vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--df-text);
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  animation: df-fade-up 0.9s var(--df-ease-out) 0.2s both;
}

/* ── Subtítulo: Inter, lectura confortable ── */
.df-home-hero .df-subtitle {
  font-family: var(--df-font-body);
  font-size: var(--df-text-lg);
  font-weight: 400;
  line-height: 1.65;
  color: var(--df-text-secondary);
  max-width: 640px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  animation: df-fade-up 0.9s var(--df-ease-out) 0.35s both;
}

.df-home-hero .df-subtitle strong {
  color: var(--df-text);
  font-weight: 600;
}

/* ── Acciones: botones estandarizados Primario / Secundario ── */
.df-home-hero .df-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  animation: df-fade-up 0.9s var(--df-ease-out) 0.5s both;
}

.df-home-hero .df-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--df-font-body);
  font-size: var(--df-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: 4px;
  padding: 0.9em 1.9em;
  cursor: pointer;
  transition:
    background-color 0.3s var(--df-ease-out),
    border-color 0.3s var(--df-ease-out),
    color 0.3s var(--df-ease-out),
    box-shadow 0.4s var(--df-ease-out),
    transform 0.3s var(--df-ease-out);
  will-change: transform, box-shadow;
}

/* Primario: acento neón sólido */
.df-home-hero .df-btn--primary {
  background: var(--df-accent);
  border: 1px solid var(--df-accent);
  color: #000000;
  font-weight: 700;
}

.df-home-hero .df-btn--primary:hover,
.df-home-hero .df-btn--primary:focus-visible {
  background: #1aff1a;
  border-color: #1aff1a;
  box-shadow: var(--df-accent-glow-lg);
  transform: translateY(-2px);
}

/* Secundario: contorno sutil sobre fondo oscuro */
.df-home-hero .df-btn--outline {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--df-border);
  color: var(--df-text);
}

.df-home-hero .df-btn--outline:hover,
.df-home-hero .df-btn--outline:focus-visible {
  border-color: var(--df-accent);
  color: var(--df-accent);
  background: var(--df-accent-dim);
  box-shadow: var(--df-accent-glow-md);
  transform: translateY(-2px);
}

.df-home-hero .df-btn:focus-visible {
  outline: 2px solid var(--df-accent);
  outline-offset: 3px;
}

/* ── Visual: contenedor diferido para video tethering ── */
.df-home-hero .df-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0A0A0A;
  contain: layout style paint;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.df-home-hero .df-hero__visual img,
.df-home-hero .df-hero__visual video,
.df-home-hero .df-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #0A0A0A;
  filter: brightness(0.6) contrast(1.15);
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}

.df-home-hero .df-hero__visual img { object-fit: contain; } /* LEY 2: Zero-Crop */
.df-home-hero .df-hero__visual video,
.df-home-hero .df-hero__video { object-fit: cover; }  /* fondo ambiental, no portafolio */

/* ── Responsive ── */
@media (max-width: 640px) {
  .df-home-hero .df-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .df-home-hero .df-btn {
    justify-content: center;
  }
}

/* ── Accesibilidad: reducir movimiento (LEY 4) ── */
@media (prefers-reduced-motion: reduce) {
  .df-home-hero .df-kicker,
  .df-home-hero .df-hero__title,
  .df-home-hero .df-subtitle,
  .df-home-hero .df-hero__actions {
    animation: none;
  }
  .df-home-hero .df-kicker::before {
    animation: none;
  }
  .df-home-hero .df-btn,
  .df-home-hero .df-btn:hover,
  .df-home-hero .df-btn:focus-visible {
    transition: none;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BLOQUE 20 — ANCLA PORTAFOLIO: scroll-margin para el puente #portafolio
   ════════════════════════════════════════════════════════════════════════
   El DOM de Bricks no contiene id="portafolio". El puente JS en
   df-gallery-boot.js redirige el scroll hacia #df-portfolio-grid o la
   barra .df-gallery-filters. Este bloque compensa el header sticky para
   que el destino no quede oculto bajo la navegación.
   ════════════════════════════════════════════════════════════════════════ */
#df-portfolio-grid,
.df-portfolio-grid,
.df-apex-grid,
.df-gallery-filters {
  scroll-margin-top: 96px; /* header sticky + margen de respiración */
}

@media (max-width: 768px) {
  #df-portfolio-grid,
  .df-portfolio-grid,
  .df-apex-grid,
  .df-gallery-filters {
    scroll-margin-top: 72px;
  }
}