/**
 * EntregaChef — capa visual B2B (más punch, reversible)
 * Imágenes genéricas enmarcadas · naranja refinado · contraste
 */

:root {
  --heat: #ff6a1a;
  --heat-d: #e85d0a;
  --heat-bright: #ff9248;
  --heat-soft: rgba(255, 106, 26, 0.11);
  --heat-soft-strong: rgba(255, 106, 26, 0.18);
  --heat-glow: 0 10px 36px rgba(255, 106, 26, 0.32);
  --heat-glow-sm: 0 4px 18px rgba(255, 106, 26, 0.22);
  --heat-ring: 0 0 0 3px rgba(255, 106, 26, 0.16);
}

.next-light-theme {
  --primary: 255, 106, 26;
}

/* ── Hero: ambiente + profundidad ── */
.gXvFm#inicio.ec-hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(128deg, #ffffff 0%, #fff9f4 42%, #f8fafc 100%);
  border-bottom: 1px solid rgba(255, 106, 26, 0.14);
  overflow: hidden;
}

.gXvFm#inicio.ec-hero::before {
  content: "";
  position: absolute;
  inset: -20% -15% auto auto;
  width: min(58vw, 640px);
  height: min(70vh, 520px);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 106, 26, 0.16) 0%,
    rgba(255, 146, 72, 0.06) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.gXvFm#inicio.ec-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--heat) 18%,
    var(--heat-bright) 50%,
    var(--heat) 82%,
    transparent 100%
  );
  opacity: 0.85;
  z-index: 2;
}

#inicio.ec-hero .bVvYng,
#inicio .ec-hero-visual.kjBgca {
  position: relative;
  z-index: 1;
}

#inicio .idrxjM.iQxMko {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--heat-soft);
  border: 1px solid rgba(255, 106, 26, 0.22);
  color: var(--heat-d) !important;
  font-weight: 700;
}

#inicio .ec-hero-badges {
  gap: 0.55rem;
}

#inicio .ec-hero-badge {
  border-left: 3px solid var(--heat);
  background: linear-gradient(90deg, var(--heat-soft) 0%, rgba(255, 255, 255, 0.9) 100%);
  box-shadow: var(--ec-elev-1);
}

#inicio .ec-hero-title .ec-hero-mark {
  color: var(--heat);
  background: linear-gradient(135deg, var(--heat) 0%, var(--heat-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  filter: drop-shadow(
    var(--ec-hero-shadow-offset, 2px) var(--ec-hero-shadow-offset, 2px) 0
      var(--ec-hero-shadow-color, rgba(15, 23, 42, 0.45))
  );
}

#inicio .bDjvej,
.ec-landing-section .bDjvej,
.ec-demo-showcase .bDjvej,
.ec-demo-ctas .bDjvej,
.ec-demo-modal .ec-demo-ctas .bDjvej {
  background: linear-gradient(180deg, var(--heat-bright) 0%, var(--heat) 48%, var(--heat-d) 100%) !important;
  border-color: var(--heat-d) !important;
  box-shadow: var(--heat-glow-sm), var(--ec-elev-2) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#inicio .bDjvej:hover,
.ec-landing-section .bDjvej:hover,
.ec-demo-showcase .bDjvej:hover,
.ec-demo-ctas .bDjvej:hover,
.ec-demo-modal .ec-demo-ctas .bDjvej:hover {
  transform: translateY(-2px);
  box-shadow: var(--heat-glow), var(--ec-elev-3) !important;
}

/* Hero visual stack */
.ec-hero-visual-stack {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
}

#inicio .ec-hero-visual .ec-hero-illustration {
  filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.12));
}

.ec-hero-device {
  position: absolute;
  right: 4%;
  bottom: 8%;
  width: clamp(9.5rem, 32%, 11.5rem);
  padding: 0.45rem;
  border-radius: 1.15rem;
  background: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--ec-elev-dark), var(--heat-glow-sm);
  text-decoration: none;
  transform: rotate(-4deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ec-hero-device:hover {
  transform: rotate(-2deg) translateY(-4px);
  box-shadow: var(--ec-elev-dark), var(--heat-glow);
}

.ec-hero-device img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0.85rem;
}

.ec-hero-device__label {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent-on-dark);
}

/* ── Marcos de imagen ── */
.ec-visual-frame {
  --ec-aspect: 4 / 3;
  margin: 0;
  position: relative;
  border-radius: calc(var(--ec-radius) + 0.15rem);
  overflow: hidden;
  background: var(--ink);
  border: var(--ec-card-stroke);
  box-shadow: var(--ec-card-shadow), var(--heat-ring);
}

.ec-visual-frame::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--heat-bright), var(--heat-d));
  z-index: 2;
}

.ec-visual-frame img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ec-aspect);
  object-fit: cover;
  transition: transform 0.35s ease;
}

.ec-visual-frame:hover img {
  transform: scale(1.04);
}

.ec-visual-frame__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.65rem 0.85rem;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.88) 0%, transparent 100%);
  z-index: 1;
}

/* ── Banda prueba visual ── */
#operacion-real {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.ec-visual-proof-band {
  text-align: center;
}

.ec-visual-proof-band .ec-landing-section__lead {
  max-width: min(100%, 52rem);
  margin: 0.65rem auto 1.75rem;
}

.ec-visual-proof-grid {
  display: grid;
  gap: var(--ec-gap-md);
}

@media (min-width: 768px) {
  .ec-visual-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ec-proof-card {
  padding: 0;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ec-proof-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ec-card-shadow-hover), var(--heat-glow-sm);
}

.ec-proof-card .ec-visual-frame {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.ec-proof-card .ec-visual-frame::before {
  width: 100%;
  height: 4px;
  inset: 0 0 auto 0;
}

/* ── Solución: columnas 50/50 (imagen + tarjeta) ── */
.ec-ba-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ec-gap-md);
  margin-top: var(--ec-gap-md);
  width: 100%;
}

@media (min-width: 768px) {
  .ec-ba-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.ec-ba-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ec-ba-column__media {
  margin: 0;
}

.ec-ba-column__media .ec-visual-frame {
  --ec-aspect: 3 / 2;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  box-shadow: var(--ec-card-shadow), var(--heat-ring);
}

.ec-ba-column .ec-ba-card {
  flex: 1;
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Demo showcase con preview ── */
.ec-demo-showcase__media {
  margin: -0.25rem 0 0.35rem;
}

.ec-demo-showcase__media .ec-visual-frame {
  --ec-aspect: 16 / 10;
}

.ec-demo-showcase__card--featured .ec-demo-showcase__media .ec-visual-frame {
  box-shadow: var(--heat-glow-sm), var(--ec-elev-2);
}

.ec-demo-showcase__card--featured {
  background: linear-gradient(
    165deg,
    rgba(255, 106, 26, 0.1) 0%,
    rgba(22, 163, 74, 0.05) 100%
  ) !important;
  border-color: rgba(255, 106, 26, 0.42) !important;
}

/* ── Acentos globales ── */
.ec-section-mark {
  position: relative;
  color: var(--heat-d);
}

.ec-impl-step__num {
  background: linear-gradient(135deg, var(--heat-bright), var(--heat-d)) !important;
  box-shadow: var(--heat-glow-sm);
}

.ec-surface-dark,
.ec-ba-card--after {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
}

.wquXK {
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1a2744 55%,
    #0f172a 100%
  ) !important;
  border-top: 4px solid var(--heat);
}

.wquXK .ec-risk-badge {
  border: 1px solid rgba(253, 186, 116, 0.35);
  background: rgba(255, 106, 26, 0.12);
}

/* Calculadora — borde de acción sutil */
#calculadora .ec-calc-mini {
  border: 1px solid rgba(255, 106, 26, 0.18);
  box-shadow: var(--ec-elev-2), var(--heat-ring);
}

#calculadora .ec-calc-mini__result--gain {
  border-color: rgba(22, 163, 74, 0.35);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.08);
}

/* Hero móvil/tablet apilado — ocultar ilustración (carga al final, gana en cascada) */
@media (max-width: 1024px) {
  #inicio.ec-hero .ec-hero-visual.kjBgca,
  #inicio .ec-hero-visual.kjBgca,
  #inicio .ec-hero-visual .ec-hero-illustration {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}