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

/* Capa pública compartida. No afecta a los paneles administrativos. */
:root{--crea-width:1180px;--crea-gutter:24px;--crea-red:#ff151f;--crea-body:Inter,Arial,sans-serif;--crea-heading:Oswald,'Arial Narrow',sans-serif;--cg-header-height:116px}
html:has(#cgHeader){scroll-padding-top:calc(var(--cg-header-height) + 16px)!important}
html body.crea-public.crea-public.crea-public{font-family:var(--crea-body)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.crea-public.crea-public.crea-public *,body.crea-public.crea-public.crea-public *::before,body.crea-public.crea-public.crea-public *::after{box-sizing:border-box}
body.crea-public.crea-public.crea-public :is(.wrap,.container,.container-wide,.crea-container,.cg-bar,.cg-sub__in,.cg-faq__wrap,.cg-footer__grid,.cg-footer__bottom){width:calc(100% - var(--crea-gutter)*2)!important;max-width:var(--crea-width)!important;margin-inline:auto!important;padding-inline:0!important}
body.crea-public.crea-public.crea-public :is(h1,h2,h3,h4,h5){font-family:var(--crea-heading)!important;letter-spacing:.01em!important}
body.crea-public.crea-public.crea-public h1{font-size:clamp(46px,4.4vw,64px)!important;line-height:1.08!important;font-weight:600!important;text-wrap:balance;margin-block:14px 22px!important}
body.crea-public.crea-public.crea-public :is(h2,.crea-section-title){font-size:clamp(30px,3vw,44px)!important;line-height:1.15!important;font-weight:600!important}
body.crea-public.crea-public.crea-public :is(h3,h4){line-height:1.25!important}
body.crea-public.crea-public.crea-public :is(p,.hero-lead,.hero-text,.bdg-lead,.pd-lead,.dw-lead){font-family:var(--crea-body)!important;line-height:1.7}
body.crea-public.crea-public.crea-public :is(.hero p,.hero-social p,.bdg-lead,.dw-lead,.pd-lead){font-size:16px!important;max-width:60ch!important}
body.crea-public.crea-public.crea-public :is(.hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero,.pf-hero){padding-block:52px 60px!important;margin-top:0!important}
body.crea-public.crea-public.crea-public :is(.hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-social-grid,.hero-inner,.pf-hero-grid){display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:48px!important;align-items:center!important;padding-block:0!important;min-height:480px!important}
body.crea-public.crea-public.crea-public :is(.hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-social-grid,.hero-inner,.pf-hero-grid)>*{min-width:0}
body.crea-public.crea-public.crea-public :is(.hero-visual img,.bdg-art-main img,.dw-art-main img,.pd-art-main img){max-width:100%!important;margin-inline:0!important}
body.crea-public.crea-public.crea-public :is(.bdg-title,.dw-title,.pd-title) span{font-family:inherit!important;font-weight:inherit!important}
body.crea-public.crea-public.crea-public :is(.btn,.crea-btn,.pf-btn,.cg-cta,.cg-faq__btn,.mx-form__btn){min-height:46px;font-family:var(--crea-body)!important;font-size:12px!important;font-weight:800!important;line-height:1.35!important;border-radius:999px!important}
body.crea-public.crea-public.crea-public :is(.actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions){gap:12px!important;flex-wrap:wrap}
body.crea-public.crea-public.crea-public .cg-header{margin-bottom:0!important}
body.crea-public.crea-public.crea-public .cg-crumb{margin-bottom:0!important;padding:12px max(var(--crea-gutter),calc((100% - var(--crea-width))/2))!important;line-height:1.5}
body.crea-public.crea-public.crea-public .cg-sub__in a{min-height:42px;display:inline-flex;align-items:center}
body.crea-public.crea-public.crea-public .cg-sub__in a[aria-current="location"]{background:#281114;color:#fff!important;box-shadow:inset 0 -2px var(--crea-red)}
body.crea-public.crea-public.crea-public .cg-menu>a,body.crea-public.crea-public.crea-public .cg-dd>button{min-height:44px}
body.crea-public.crea-public.crea-public .cg-logo img{width:132px;height:auto;max-height:56px;object-fit:contain}
.cg-skip{position:fixed;top:8px;left:24px;z-index:7000;transform:translateY(-150%);background:#fff;color:#111;padding:12px 20px;border:2px solid #ff151f;border-radius:8px;font:700 14px Inter,sans-serif}
.cg-skip:focus{transform:none}
.cg-content-start{display:block;height:0;scroll-margin-top:calc(var(--cg-header-height) + 16px)}
/* La animación se controla en la navegación compartida, también al cambiar el hash. */
html:has(#cgHeader){scroll-behavior:auto!important}
/* El título de módulos empieza junto a las tarjetas también en escritorio. */
body.crea-public.crea-public.crea-public .solution .solution-grid{align-items:start}
body.crea-public.crea-public.crea-public :focus-visible{outline:3px solid #ff5c64;outline-offset:4px}
body.crea-public.crea-public.crea-public .cg-faq__cta{top:calc(var(--cg-header-height) + 24px)}
body.crea-public.crea-public.crea-public .cg-panel{overscroll-behavior:contain}
body.crea-public.crea-public.crea-public .cg-panel__wa{margin-top:24px;flex-shrink:0}
body.crea-public.crea-public.crea-public .cg-footer{position:static;background:#070708!important;color:#c7c7ce!important;padding:56px 0 0!important;border-top:1px solid #27272d!important;font:400 14px/1.7 var(--crea-body)!important}
.cg-footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1.15fr 1fr;gap:36px;padding-bottom:40px}
body.crea-public.crea-public.crea-public .cg-footer h2{color:#fff!important;font:700 12px/1.4 var(--crea-body)!important;text-transform:uppercase;letter-spacing:.1em!important;margin:0 0 18px}
body.crea-public.crea-public.crea-public .cg-footer p{margin:12px 0;color:#b4b4be;font-size:14px}
body.crea-public.crea-public.crea-public .cg-footer a{color:#d2d2d9!important;text-decoration:none}
body.crea-public.crea-public.crea-public .cg-footer a:hover{color:#fff!important}
.cg-footer__brand img{width:132px;height:auto}
.cg-footer__brand>span{font-size:12px;color:#8e8e9a}
.cg-footer nav>a,.cg-footer__grid>div:not(:first-child)>a{display:block;padding:6px 0}
.cg-footer__social{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.cg-footer__social a{display:grid;place-items:center;width:42px;height:42px;border:1px solid #34343d;border-radius:50%;font-size:17px}
.cg-footer__contact{font-size:13px}
.cg-footer__contact span{color:#ff4149}
/* Mantiene legible el primer pantallazo, incluso durante la animación heredada. */
body.crea-public.crea-public.crea-public :is(.hero-copy,.hero-visual){opacity:1!important;transform:none!important;animation:none!important}
body.crea-public.crea-public.crea-public h1{max-width:100%!important}
body.crea-public.crea-public.crea-public .hero :is(.kicker,.hero-kicker,.eyebrow){font-size:12px!important;line-height:1.5!important}
body.crea-public.crea-public.crea-public :is(.seo-identity,.seo-context,.hero-copy>p[style*="font-size:10px"]){font-size:10px!important;line-height:1.45!important}
body.crea-public.crea-public.crea-public header.site-header:has(>[data-crea-unified-nav]){display:none!important}
body.crea-public.crea-public.crea-public .header[data-crea-unified-nav]+main{margin-top:0!important}
body.crea-public.crea-public.crea-public .hero-art{min-height:0!important}
body.crea-public.crea-public.crea-public:is(.pf-modal-open,.video-modal-open,.erp-modal-open) :is(.cg-wabar,.float){display:none!important}
body.crea-public.crea-public.crea-public .modal{z-index:7000}
body.crea-public.crea-public.crea-public .modal-backdrop{z-index:6500}
body.crea-public.crea-public.crea-public :is(a.btn-outline,a.btn-red,a.btn-dark,.cta-main-btn){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:14px 22px;border-radius:999px!important;font:800 12px/1.35 var(--crea-body)!important}
.cg-footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #27272d;padding-block:20px;font-size:12px;color:#92929f}
@media(max-width:1020px){body.crea-public.crea-public.crea-public :is(.hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-social-grid,.hero-inner,.pf-hero-grid){gap:28px!important}.cg-footer__grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:760px){
 :root{--crea-gutter:20px;--cg-header-height:108px}
 body.crea-public.crea-public.crea-public .cg-bar{height:64px}
 body.crea-public.crea-public.crea-public .cg-crumb{display:none!important}
 body.crea-public.crea-public.crea-public h1{font-size:clamp(34px,10vw,46px)!important;line-height:1.12!important;letter-spacing:0!important;margin-block:12px 20px!important;text-wrap:pretty}
 body.crea-public.crea-public.crea-public :is(h2,.crea-section-title){font-size:clamp(28px,8vw,36px)!important;line-height:1.18!important}
 body.crea-public.crea-public.crea-public :is(.hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero,.pf-hero){padding-block:32px 40px!important}
 body.crea-public.crea-public.crea-public :is(.hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-social-grid,.hero-inner,.pf-hero-grid){grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:28px!important}
 body.crea-public.crea-public.crea-public :is(.bdg-title,.dw-title,.pd-title) span{display:inline!important}
 body.crea-public.crea-public.crea-public :is(.hero p,.hero-social p,.bdg-lead,.dw-lead,.pd-lead){font-size:15px!important;line-height:1.7!important}
 body.crea-public.crea-public.crea-public :is(.actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions){display:flex!important;flex-direction:column!important;align-items:stretch!important}
 body.crea-public.crea-public.crea-public :is(.actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions) a{width:100%;justify-content:center;min-height:48px}
 body.crea-public.crea-public.crea-public .hero-visual{min-height:0!important}
 body.crea-public.crea-public.crea-public .hero-visual:before{display:none}
 body.crea-public.crea-public.crea-public .hero-visual img{width:100%!important;max-height:420px!important;object-fit:contain}
 body.crea-public.crea-public.crea-public .hero-art-img{width:100%!important;max-width:100%!important;margin-inline:0!important}
 body.crea-public.crea-public.crea-public .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
 body.crea-public.crea-public.crea-public .cg-sub__in>span{display:none}
 body.crea-public.crea-public.crea-public .cg-sub__in{width:100%!important;padding-inline:12px!important;max-width:none!important;scroll-padding-inline:12px;gap:0}
 body.crea-public.crea-public.crea-public .cg-faq__wrap{gap:28px}
 body.crea-public.crea-public.crea-public .mobile-carousel-shell>:is(.video-grid,.service-grid,.port-grid){width:100%!important;max-width:100%!important;margin-inline:0!important;padding-inline:0!important}
 .cg-footer__grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:32px}
 .cg-footer__bottom{padding-bottom:88px;gap:8px}
}

/* ===== CREA Studio · REGLAS DEFINITIVAS v4 (deben permanecer al final) ===== */
body.crea-public.crea-public.crea-public .cg-crumb{display:none!important}
body.crea-public.crea-public.crea-public :is(.hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero){margin:0!important;padding:0!important;overflow:hidden!important}
body.crea-public.crea-public.crea-public :is(.hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid){min-height:0!important;padding-top:0!important;padding-bottom:0!important;align-items:stretch!important}
body.crea-public.crea-public.crea-public :is(.hero-copy,.bdg-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,.hero-grid>div:first-child,.hero-inner>div:first-child){align-self:center!important;padding-top:clamp(46px,4vw,96px)!important;padding-bottom:clamp(46px,4vw,96px)!important}
body.crea-public.crea-public.crea-public :is(.hero .hero-visual,.hero .hero-media,.hero .hero-media-real,.hero-social .hero-art,.bdg-hero .bdg-art-wrap,.dw-hero .dw-device-stage-real,.pd-hero .pd-hero-real-visual,.pd-dashboard-wrap-real){align-self:stretch!important;min-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}
html:has(#cgHeader){scroll-padding-top:calc(var(--cg-header-height) + 10px)!important}
body.crea-public.crea-public.crea-public :is(section[id],header[id],main[id],footer[id],div[id]){scroll-margin-top:calc(var(--cg-header-height) + 10px)!important}

@media(max-width:900px){
  body.crea-public.crea-public.crea-public :is(.hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero){padding:0!important}
  body.crea-public.crea-public.crea-public :is(.hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid){display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:0!important;min-height:0!important;padding:0!important;align-items:start!important}
  body.crea-public.crea-public.crea-public :is(.hero-copy,.bdg-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,.hero-grid>div:first-child,.hero-inner>div:first-child){width:100%!important;max-width:none!important;align-self:start!important;margin:0!important;padding:clamp(24px,7vw,38px) var(--crea-hero-gutter) 8px!important}
  body.crea-public.crea-public.crea-public :is(.hero .hero-visual,.hero .hero-media,.hero .hero-media-real,.hero-social .hero-art,.bdg-hero .bdg-art-wrap,.dw-hero .dw-device-stage-real,.pd-hero .pd-hero-real-visual,.pd-dashboard-wrap-real){width:100%!important;height:auto!important;min-height:0!important;align-self:start!important;margin:-1px 0 0!important;padding:0!important;overflow:hidden!important}
  body.crea-public.crea-public.crea-public :is(.hero-visual-frame,.bdg-art-main,.pd-dashboard-wrap-real){width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
  body.crea-public.crea-public.crea-public :is(.hero .hero-visual img,.hero .hero-media img,.hero .hero-media-real img,.hero-social .hero-art img,.bdg-hero .bdg-art-wrap img,.dw-hero .dw-device-stage-real img,.pd-hero .pd-hero-real-visual img){display:block!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;object-fit:contain!important;object-position:center top!important}
  html:has(#cgHeader){scroll-padding-top:calc(var(--cg-header-height) + 6px)!important}
  body.crea-public.crea-public.crea-public :is(section[id],header[id],main[id],footer[id],div[id]){scroll-margin-top:calc(var(--cg-header-height) + 6px)!important}
}
@media(prefers-reduced-motion:reduce){html:has(#cgHeader){scroll-behavior:auto!important}body.crea-public.crea-public.crea-public *,body.crea-public.crea-public.crea-public *::before,body.crea-public.crea-public.crea-public *::after{animation:none!important;transition:none!important}}

/* ===== CREA Studio · ancho completo y heroes integrados · 2026-10-16 =====
   Solo afecta el sitio público. Conserva los fondos y franjas de cada página. */
:root{
  --crea-fluid-gutter:clamp(20px,4.25vw,104px);
  --crea-hero-black:#030303;
}

/* El contenido utiliza todo el ancho disponible con márgenes proporcionales. */
body.crea-public.crea-public.crea-public :is(
  .wrap,.container,.container-wide,.crea-container,
  .cg-bar,.cg-sub__in,.cg-faq__wrap,.cg-footer__grid,.cg-footer__bottom
){
  width:100%!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:var(--crea-fluid-gutter)!important;
}

/* El logo permanece plano y estable. */
body.crea-public.crea-public.crea-public .cg-logo img{
  width:132px!important;
  max-height:56px!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
}

/* Todos los heroes comparten proporción, distribución y ancho. */
body.crea-public.crea-public.crea-public :is(
  .hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero
){
  width:100%!important;
  max-width:none!important;
  overflow:hidden!important;
}
body.crea-public.crea-public.crea-public :is(
  .hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-inner
){
  width:100%!important;
  max-width:none!important;
  grid-template-columns:minmax(360px,43%) minmax(0,57%)!important;
  gap:0!important;
  min-height:clamp(540px,61vh,1320px)!important;
  padding-left:var(--crea-fluid-gutter)!important;
  padding-right:0!important;
  margin-inline:0!important;
  align-items:center!important;
}
body.crea-public.crea-public.crea-public :is(
  .hero-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy
){
  position:relative!important;
  z-index:5!important;
  min-width:0!important;
  max-width:760px!important;
  padding-right:clamp(24px,3vw,64px)!important;
}

/* La fotografía llega al borde derecho. El único degradado está en la unión central. */
body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual,
  .hero .hero-media,
  .hero .hero-media-real,
  .hero-social .hero-art,
  .bdg-hero .bdg-art-wrap,
  .dw-hero .dw-device-stage-real,
  .pd-hero .pd-hero-real-visual
){
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  min-height:clamp(500px,58vh,1280px)!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  isolation:isolate;
}
body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual,
  .hero .hero-media,
  .hero .hero-media-real,
  .hero-social .hero-art,
  .bdg-hero .bdg-art-wrap,
  .dw-hero .dw-device-stage-real,
  .pd-hero .pd-hero-real-visual
)::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  inset:0 auto 0 0!important;
  width:clamp(130px,24%,310px)!important;
  height:100%!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    var(--crea-hero-black) 0%,
    rgba(3,3,3,.96) 12%,
    rgba(3,3,3,.78) 34%,
    rgba(3,3,3,.42) 61%,
    rgba(3,3,3,.12) 84%,
    rgba(3,3,3,0) 100%)!important;
  filter:none!important;
}
body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual img,
  .hero .hero-media img,
  .hero .hero-media-real img,
  .hero-social .hero-art img,
  .bdg-hero .bdg-art-wrap img,
  .dw-hero .dw-device-stage-real img,
  .pd-hero .pd-hero-real-visual img
){
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  max-height:none!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:right center!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
}

/* ERP legado: usa el mockup final sin alterar su contenido PHP. */
body.crea-public.crea-public.crea-public .hero .hero-visual:has(>.laptop){
  background:url('../img/erp-premium/hero-collection.png') right center/contain no-repeat!important;
}
body.crea-public.crea-public.crea-public .hero .hero-visual:has(>.laptop)>:is(.hero-person,.shade,.laptop,.phone){
  display:none!important;
}

/* Botones seguros: nunca se montan entre sí ni sobre otros contenidos. */
body.crea-public.crea-public.crea-public :is(
  .actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions
){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:12px!important;
  position:relative!important;
  z-index:9!important;
}
body.crea-public.crea-public.crea-public :is(
  .actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions
) a{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  text-align:center!important;
}

/* Microinteracciones discretas en tarjetas, botones e iconos. */
body.crea-public.crea-public.crea-public :is(
  .service-card,.service-box,.feature-card,.benefit,.mod,.process-step,.problem-items article
){
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important;
}
body.crea-public.crea-public.crea-public :is(
  .service-card,.service-box,.feature-card,.benefit,.mod,.process-step,.problem-items article
):hover{
  transform:translateY(-5px)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.18)!important;
}
body.crea-public.crea-public.crea-public :is(
  .service-card,.service-box,.feature-card,.benefit,.mod,.process-step,.problem-items article
) i{
  display:inline-flex;
  transform-origin:center;
  transition:transform .22s ease!important;
}
body.crea-public.crea-public.crea-public :is(
  .service-card,.service-box,.feature-card,.benefit,.mod,.process-step,.problem-items article
):hover i{
  transform:scale(1.16)!important;
}
body.crea-public.crea-public.crea-public :is(.btn,.crea-btn,.btn-red,.btn-dark,.btn-outline,.cg-cta){
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
body.crea-public.crea-public.crea-public :is(.btn,.crea-btn,.btn-red,.btn-dark,.btn-outline,.cg-cta):hover{
  transform:translateY(-2px)!important;
}

/* Escala tipográfica proporcional en monitores grandes. */
@media(min-width:1500px){
  body.crea-public.crea-public.crea-public h1{font-size:clamp(64px,4.3vw,88px)!important}
  body.crea-public.crea-public.crea-public :is(h2,.crea-section-title){font-size:clamp(42px,3.1vw,60px)!important}
  body.crea-public.crea-public.crea-public :is(p,.hero-lead,.hero-text,.bdg-lead,.pd-lead,.dw-lead){font-size:clamp(16px,1vw,19px)!important}
}

@media(max-width:900px){
  :root{--crea-fluid-gutter:clamp(18px,5vw,34px)}
  body.crea-public.crea-public.crea-public :is(
    .hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-inner
  ){
    grid-template-columns:minmax(0,1fr)!important;
    min-height:0!important;
    padding-left:var(--crea-fluid-gutter)!important;
    padding-right:0!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy
  ){
    max-width:none!important;
    padding-right:var(--crea-fluid-gutter)!important;
    padding-bottom:18px!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual,
    .hero .hero-media,
    .hero .hero-media-real,
    .hero-social .hero-art,
    .bdg-hero .bdg-art-wrap,
    .dw-hero .dw-device-stage-real,
    .pd-hero .pd-hero-real-visual
  ){
    width:calc(100% + var(--crea-fluid-gutter))!important;
    min-height:clamp(300px,70vw,560px)!important;
    margin-left:calc(-1 * var(--crea-fluid-gutter))!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual,
    .hero .hero-media,
    .hero .hero-media-real,
    .hero-social .hero-art,
    .bdg-hero .bdg-art-wrap,
    .dw-hero .dw-device-stage-real,
    .pd-hero .pd-hero-real-visual
  )::after{
    inset:0 0 auto 0!important;
    width:100%!important;
    height:clamp(90px,25%,170px)!important;
    background:linear-gradient(180deg,
      var(--crea-hero-black) 0%,
      rgba(3,3,3,.96) 14%,
      rgba(3,3,3,.72) 40%,
      rgba(3,3,3,.30) 68%,
      rgba(3,3,3,0) 100%)!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual img,
    .hero .hero-media img,
    .hero .hero-media-real img,
    .hero-social .hero-art img,
    .bdg-hero .bdg-art-wrap img,
    .dw-hero .dw-device-stage-real img,
    .pd-hero .pd-hero-real-visual img
  ){
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions
  ){
    flex-direction:column!important;
    align-items:stretch!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .actions,.hero-actions,.bdg-actions,.dw-actions,.pd-actions,.pf-actions
  ) a{
    width:100%!important;
    flex:0 0 auto!important;
  }
}

/* ===== CREA Studio · ajuste de encuadre, móvil y anclas v3 =====
   El hero comienza al terminar la navegación y termina con la imagen. */
body.crea-public.crea-public.crea-public .cg-crumb{
  display:none!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero
){
  margin:0!important;
  padding:0!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid
){
  min-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  align-items:stretch!important;
}

/* El texto conserva aire; la imagen no recibe relleno y define los bordes del hero. */
body.crea-public.crea-public.crea-public :is(
  .hero-copy,.bdg-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,
  .hero-grid>div:first-child,.hero-inner>div:first-child
){
  align-self:center!important;
  padding-top:clamp(46px,4vw,96px)!important;
  padding-bottom:clamp(46px,4vw,96px)!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual,
  .hero .hero-media,
  .hero .hero-media-real,
  .hero-social .hero-art,
  .bdg-hero .bdg-art-wrap,
  .dw-hero .dw-device-stage-real,
  .pd-hero .pd-hero-real-visual,
  .pd-dashboard-wrap-real
){
  align-self:stretch!important;
  min-height:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero-visual-frame,.bdg-art-main,.pd-dashboard-wrap-real
){
  align-self:stretch!important;
}

/* Respaldo nativo para enlaces con hash; el JS compartido afina el cálculo. */
html:has(#cgHeader){
  scroll-padding-top:calc(var(--cg-header-height) + 10px)!important;
}
body.crea-public.crea-public.crea-public :is(
  section[id],header[id],main[id],footer[id],div[id]
){
  scroll-margin-top:calc(var(--cg-header-height) + 10px)!important;
}

@media(max-width:900px){
  body.crea-public.crea-public.crea-public :is(
    .hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero
  ){
    padding:0!important;
  }

  body.crea-public.crea-public.crea-public :is(
    .hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid
  ){
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    gap:0!important;
    padding:0!important;
    min-height:0!important;
    align-items:start!important;
  }

  body.crea-public.crea-public.crea-public :is(
    .hero-copy,.bdg-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,
    .hero-grid>div:first-child,.hero-inner>div:first-child
  ){
    width:100%!important;
    max-width:none!important;
    align-self:start!important;
    margin:0!important;
    padding:clamp(24px,7vw,38px) var(--crea-hero-gutter) 8px!important;
  }

  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual,
    .hero .hero-media,
    .hero .hero-media-real,
    .hero-social .hero-art,
    .bdg-hero .bdg-art-wrap,
    .dw-hero .dw-device-stage-real,
    .pd-hero .pd-hero-real-visual,
    .pd-dashboard-wrap-real
  ){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
    margin:-1px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.crea-public.crea-public.crea-public :is(
    .hero-visual-frame,.bdg-art-main,.pd-dashboard-wrap-real
  ){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }

  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual img,
    .hero .hero-media img,
    .hero .hero-media-real img,
    .hero-social .hero-art img,
    .bdg-hero .bdg-art-wrap img,
    .dw-hero .dw-device-stage-real img,
    .pd-hero .pd-hero-real-visual img
  ){
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center top!important;
  }

  /* El último píxel del hero coincide con el último píxel de la imagen. */
  body.crea-public.crea-public.crea-public :is(
    .hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid
  )>:last-child{
    margin-bottom:0!important;
  }

  html:has(#cgHeader){
    scroll-padding-top:calc(var(--cg-header-height) + 6px)!important;
  }
  body.crea-public.crea-public.crea-public :is(
    section[id],header[id],main[id],footer[id],div[id]
  ){
    scroll-margin-top:calc(var(--cg-header-height) + 6px)!important;
  }
}

@media(max-width:560px){
  body.crea-public.crea-public.crea-public :is(
    .wrap,.container,.container-wide,.crea-container,
    .cg-bar,.cg-sub__in,.cg-faq__wrap,.cg-footer__grid,.cg-footer__bottom
  ){padding-inline:18px!important}
  body.crea-public.crea-public.crea-public :is(
    .hero-grid,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid,.hero-inner
  ){padding-left:18px!important;padding-right:0!important}
  body.crea-public.crea-public.crea-public :is(
    .hero-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy
  ){padding-right:18px!important}
}

/* ===== CREA Studio · integración visual profesional v2 · 2026-10-16 =====
   La imagen conserva su proporción 4:3, gana presencia y se funde solamente
   en la unión con el texto. El borde derecho permanece totalmente nítido. */
:root{
  --crea-hero-overlap:clamp(110px,9vw,360px);
  --crea-hero-gutter:clamp(24px,4vw,96px);
}

body.crea-public.crea-public.crea-public :is(
  .hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero
){
  overflow:hidden!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid
){
  grid-template-columns:minmax(390px,44%) minmax(0,56%)!important;
  gap:0!important;
  min-height:clamp(720px,43vw,1650px)!important;
  padding-left:var(--crea-hero-gutter)!important;
  padding-right:0!important;
  padding-block:clamp(34px,3vw,74px)!important;
  overflow:visible!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,
  .hero-grid>div:first-child,.hero-inner>div:first-child
){
  position:relative!important;
  z-index:7!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual,
  .hero .hero-media,
  .hero .hero-media-real,
  .hero-social .hero-art,
  .bdg-hero .bdg-art-wrap,
  .dw-hero .dw-device-stage-real,
  .pd-hero .pd-hero-real-visual
){
  position:relative!important;
  z-index:3!important;
  width:calc(100% + var(--crea-hero-overlap))!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 0 calc(-1 * var(--crea-hero-overlap))!important;
  padding:0!important;
  overflow:visible!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  transform:none!important;
  isolation:isolate!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

/* Se anulan marcos y velos antiguos: el fundido vive en la propia imagen. */
body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual,
  .hero .hero-media,
  .hero .hero-media-real,
  .hero-social .hero-art,
  .bdg-hero .bdg-art-wrap,
  .dw-hero .dw-device-stage-real,
  .pd-hero .pd-hero-real-visual
)::before,
body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual,
  .hero .hero-media,
  .hero .hero-media-real,
  .hero-social .hero-art,
  .bdg-hero .bdg-art-wrap,
  .dw-hero .dw-device-stage-real,
  .pd-hero .pd-hero-real-visual
)::after{
  display:none!important;
  content:none!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero-visual-frame,
  .bdg-art-main,
  .pd-dashboard-wrap-real,
  .hero .hero-visual picture,
  .hero .hero-media picture,
  .bdg-art-wrap picture,
  .dw-device-stage-real picture,
  .pd-hero-real-visual picture
){
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  transform:none!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero-visual-frame,.bdg-art-main,.pd-dashboard-wrap-real
)::before,
body.crea-public.crea-public.crea-public :is(
  .hero-visual-frame,.bdg-art-main,.pd-dashboard-wrap-real
)::after{
  display:none!important;
  content:none!important;
}

body.crea-public.crea-public.crea-public :is(
  .hero .hero-visual img,
  .hero .hero-media img,
  .hero .hero-media-real img,
  .hero-social .hero-art img,
  .bdg-hero .bdg-art-wrap img,
  .dw-hero .dw-device-stage-real img,
  .pd-hero .pd-hero-real-visual img
){
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:right center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  opacity:1!important;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.05) 4%,
    rgba(0,0,0,.22) 9%,
    rgba(0,0,0,.52) 15%,
    rgba(0,0,0,.82) 21%,
    #000 29%,
    #000 100%)!important;
  mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.05) 4%,
    rgba(0,0,0,.22) 9%,
    rgba(0,0,0,.52) 15%,
    rgba(0,0,0,.82) 21%,
    #000 29%,
    #000 100%)!important;
  -webkit-mask-size:100% 100%!important;
  mask-size:100% 100%!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
}

/* El ERP heredado usa la misma integración aunque su visual no sea una etiqueta img. */
body.crea-public.crea-public.crea-public .hero .hero-visual:has(>.laptop){
  min-height:clamp(680px,42vw,1500px)!important;
  background-image:url('../img/erp-premium/hero-collection.png')!important;
  background-position:right center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 9%,rgba(0,0,0,.72) 21%,#000 30%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 9%,rgba(0,0,0,.72) 21%,#000 30%,#000 100%)!important;
}

@media(min-width:1800px){
  body.crea-public.crea-public.crea-public :is(
    .hero-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,
    .hero-grid>div:first-child,.hero-inner>div:first-child
  ){
    max-width:920px!important;
  }
}

@media(max-width:900px){
  :root{
    --crea-hero-gutter:clamp(18px,5vw,30px);
    --crea-hero-overlap:0px;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid
  ){
    grid-template-columns:minmax(0,1fr)!important;
    min-height:0!important;
    gap:0!important;
    padding:clamp(30px,8vw,54px) 0 0!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,
    .hero-grid>div:first-child,.hero-inner>div:first-child
  ){
    width:100%!important;
    max-width:none!important;
    padding-left:var(--crea-hero-gutter)!important;
    padding-right:var(--crea-hero-gutter)!important;
    padding-bottom:clamp(12px,4vw,24px)!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual,
    .hero .hero-media,
    .hero .hero-media-real,
    .hero-social .hero-art,
    .bdg-hero .bdg-art-wrap,
    .dw-hero .dw-device-stage-real,
    .pd-hero .pd-hero-real-visual
  ){
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  body.crea-public.crea-public.crea-public :is(
    .hero .hero-visual img,
    .hero .hero-media img,
    .hero .hero-media-real img,
    .hero-social .hero-art img,
    .bdg-hero .bdg-art-wrap img,
    .dw-hero .dw-device-stage-real img,
    .pd-hero .pd-hero-real-visual img
  ){
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.10) 5%,
      rgba(0,0,0,.42) 11%,
      rgba(0,0,0,.76) 17%,
      #000 24%,
      #000 100%)!important;
    mask-image:linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.10) 5%,
      rgba(0,0,0,.42) 11%,
      rgba(0,0,0,.76) 17%,
      #000 24%,
      #000 100%)!important;
  }
  body.crea-public.crea-public.crea-public .hero .hero-visual:has(>.laptop){
    width:100%!important;
    min-height:75vw!important;
    margin:0!important;
    background-position:center top!important;
    background-size:100% auto!important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.50) 13%,#000 25%,#000 100%)!important;
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.50) 13%,#000 25%,#000 100%)!important;
  }
}

/* ===== CREA Studio · REGLAS DEFINITIVAS v4 · FINAL DEL ARCHIVO ===== */
body.crea-public.crea-public.crea-public .cg-crumb{display:none!important}
body.crea-public.crea-public.crea-public :is(.hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero){margin:0!important;padding:0!important;overflow:hidden!important}
body.crea-public.crea-public.crea-public :is(.hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid){min-height:0!important;padding-top:0!important;padding-bottom:0!important;align-items:stretch!important}
body.crea-public.crea-public.crea-public :is(.hero-copy,.bdg-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,.hero-grid>div:first-child,.hero-inner>div:first-child){align-self:center!important;padding-top:clamp(46px,4vw,96px)!important;padding-bottom:clamp(46px,4vw,96px)!important}
body.crea-public.crea-public.crea-public :is(.hero .hero-visual,.hero .hero-media,.hero .hero-media-real,.hero-social .hero-art,.bdg-hero .bdg-art-wrap,.dw-hero .dw-device-stage-real,.pd-hero .pd-hero-real-visual,.pd-dashboard-wrap-real){align-self:stretch!important;min-height:0!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}
html:has(#cgHeader){scroll-padding-top:calc(var(--cg-header-height) + 10px)!important}
body.crea-public.crea-public.crea-public :is(section[id],header[id],main[id],footer[id],div[id]){scroll-margin-top:calc(var(--cg-header-height) + 10px)!important}
@media(max-width:900px){
  body.crea-public.crea-public.crea-public :is(.hero,.hero-social,.bdg-hero,.dw-hero,.pd-hero){padding:0!important}
  body.crea-public.crea-public.crea-public :is(.hero-grid,.hero-inner,.bdg-hero-grid,.dw-hero-grid,.pd-hero-grid){display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:0!important;min-height:0!important;padding:0!important;align-items:start!important}
  body.crea-public.crea-public.crea-public :is(.hero-copy,.bdg-copy,.bdg-hero-copy,.dw-hero-copy,.pd-hero-copy,.hero-grid>div:first-child,.hero-inner>div:first-child){width:100%!important;max-width:none!important;align-self:start!important;margin:0!important;padding:clamp(24px,7vw,38px) var(--crea-hero-gutter) 8px!important}
  body.crea-public.crea-public.crea-public :is(.hero .hero-visual,.hero .hero-media,.hero .hero-media-real,.hero-social .hero-art,.bdg-hero .bdg-art-wrap,.dw-hero .dw-device-stage-real,.pd-hero .pd-hero-real-visual,.pd-dashboard-wrap-real){width:100%!important;height:auto!important;min-height:0!important;align-self:start!important;margin:-1px 0 0!important;padding:0!important;overflow:hidden!important}
  body.crea-public.crea-public.crea-public :is(.hero-visual-frame,.bdg-art-main,.pd-dashboard-wrap-real){width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
  body.crea-public.crea-public.crea-public :is(.hero .hero-visual img,.hero .hero-media img,.hero .hero-media-real img,.hero-social .hero-art img,.bdg-hero .bdg-art-wrap img,.dw-hero .dw-device-stage-real img,.pd-hero .pd-hero-real-visual img){display:block!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:0!important;object-fit:contain!important;object-position:center top!important}
  html:has(#cgHeader){scroll-padding-top:calc(var(--cg-header-height) + 6px)!important}
  body.crea-public.crea-public.crea-public :is(section[id],header[id],main[id],footer[id],div[id]){scroll-margin-top:calc(var(--cg-header-height) + 6px)!important}
}