/* =====================================================================
   CREA Studio · Ajustes oct-2026
   1) Franjas: negro → blanco → negro → blanco (rojo solo después de blanco)
   2) Hero de fotografía y redes: la imagen llega al borde derecho
   Provisional: se integra a la hoja unificada en la limpieza de CSS.
   ===================================================================== */

/* ---------- Tokens de franja (los mismos del home) ---------- */
:root{
  --cf-black:linear-gradient(180deg,#030303 0%,#080809 100%);
  --cf-red:linear-gradient(115deg,#a90011 0%,#ef071d 48%,#a30011 100%);
  --cf-card-dark:rgba(255,255,255,.045);
  --cf-line-dark:rgba(255,255,255,.09);
  --cf-text-dark:rgba(255,255,255,.72);
}

/* =====================================================================
   PUBLICIDAD DIGITAL
   hero(N) · qué gestionamos + ideal para (B) · resultados (N)
   · cómo trabajamos (B) · CTA (ROJO) · preguntas (B) · footer (N)
   ===================================================================== */
html body.page-publicidad-digital .pd-section.pd-compact{
  background:var(--cf-black) !important;
  padding-block:clamp(56px,7vw,96px) !important;
}
html body.page-publicidad-digital .pd-compact .pd-section-kicker{color:#fff !important;}
html body.page-publicidad-digital .pd-compact .pd-results-grid article{
  background:var(--cf-card-dark) !important;
  border:1px solid var(--cf-line-dark) !important;
  box-shadow:none !important;
}
html body.page-publicidad-digital .pd-compact .pd-results-grid article h3{color:#fff !important;}
html body.page-publicidad-digital .pd-compact .pd-results-grid article p{color:var(--cf-text-dark) !important;}
html body.page-publicidad-digital .pd-compact .pd-results-grid article i{color:#ff151f !important;}

html body.page-publicidad-digital #como-funciona{padding-block:clamp(56px,7vw,96px) !important;}

html body.page-publicidad-digital .pd-section.pd-last{
  background:var(--cf-red) !important;
  padding-block:clamp(48px,6vw,80px) !important;
  margin:0 !important;
}
html body.page-publicidad-digital .pd-last .pd-cta-band{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body.page-publicidad-digital .pd-last .pd-cta-band h2{color:#fff !important;}
html body.page-publicidad-digital .pd-last .pd-cta-band p{color:rgba(255,255,255,.88) !important;}
html body.page-publicidad-digital .pd-last .pd-cta-icon{
  background:#fff !important;
  color:#e3061b !important;
  box-shadow:0 16px 32px rgba(0,0,0,.18) !important;
}
html body.page-publicidad-digital .pd-last .pd-cta-icon i{color:#e3061b !important;}
html body.page-publicidad-digital .pd-last .crea-btn-red{
  background:#fff !important;
  color:#c8001a !important;
  border-color:#fff !important;
  box-shadow:0 14px 30px rgba(0,0,0,.18) !important;
}

/* =====================================================================
   BRANDING Y DISEÑO GRÁFICO
   hero(N) · servicios (B) · beneficios (N) · proceso (B)
   · CTA (ROJO) · preguntas (B) · footer (N)
   ===================================================================== */
html body.page-branding-diseno .bdg-section.bdg-benefits-wrap{
  background:var(--cf-black) !important;
  padding-block:clamp(56px,7vw,96px) !important;
  margin:0 !important;
}
html body.page-branding-diseno .bdg-benefits-wrap .bdg-benefit-card{
  background:var(--cf-card-dark) !important;
  border:1px solid var(--cf-line-dark) !important;
  box-shadow:none !important;
}
html body.page-branding-diseno .bdg-benefits-wrap .bdg-benefit-card h3{color:#fff !important;}
html body.page-branding-diseno .bdg-benefits-wrap .bdg-benefit-card p{color:var(--cf-text-dark) !important;}

html body.page-branding-diseno .bdg-section.bdg-process-wrap{padding-block:clamp(56px,7vw,96px) !important;}

html body.page-branding-diseno .bdg-section.bdg-final-cta{
  background:var(--cf-red) !important;
  padding-block:clamp(48px,6vw,80px) !important;
  margin:0 !important;
}
html body.page-branding-diseno .bdg-final-cta .bdg-cta-box{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body.page-branding-diseno .bdg-final-cta .bdg-cta-box h2{color:#fff !important;}
html body.page-branding-diseno .bdg-final-cta .bdg-cta-box p{color:rgba(255,255,255,.88) !important;}
html body.page-branding-diseno .bdg-final-cta .bdg-cta-icon{
  background:#fff !important;
  color:#e3061b !important;
  box-shadow:0 16px 32px rgba(0,0,0,.18) !important;
}
html body.page-branding-diseno .bdg-final-cta .bdg-cta-icon i{color:#e3061b !important;}
html body.page-branding-diseno .bdg-final-cta .crea-btn-red{
  background:#fff !important;
  color:#c8001a !important;
  border-color:#fff !important;
  box-shadow:0 14px 30px rgba(0,0,0,.18) !important;
}

/* =====================================================================
   HERO · fotografía y redes sociales
   El contenedor tenía padding a la derecha y la imagen no llegaba al borde.
   Solo en escritorio (en celular el texto necesita ese margen).
   ===================================================================== */
@media (min-width: 992px){
  html body.crea-public.page-fotografia header.hero > .container,
  html body.crea-public.page-redes-sociales header.hero-social > .container{
    padding-right:0 !important;
  }
}

/* =====================================================================
   TANDA 2 · El rojo siempre va después de una franja blanca
   ===================================================================== */

/* Transporte: la franja de indicadores pasa a blanco
   (módulos + indicadores en blanco, luego el bloque rojo) */
html body.page-crea-transporte section.stats{
  background:#fff !important;
  background-image:none !important;
  color:#0a0a0a !important;
  padding-block:clamp(40px,5vw,64px) !important;
  border-top:1px solid #ececee !important;
}
html body.page-crea-transporte section.stats .section-title{color:#0a0a0a !important;}

/* Educa: "Información clara para avanzar mejor" pasa a blanco;
   los paneles del tablero siguen oscuros, como pantallas */
html body.crea-public section.insights-band{
  background:#fff !important;
  background-image:none !important;
  color:#0a0a0a !important;
}
html body.crea-public section.insights-band .insights-copy h2{color:#0a0a0a !important;}
html body.crea-public section.insights-band .insight-list li{color:#2a2a2e !important;}

/* Asambleas: misma sección, mismo criterio */
html body.page-crea-asambleas section.metrics{
  background:#fff !important;
  background-image:none !important;
  color:#0a0a0a !important;
}
html body.page-crea-asambleas section.metrics .metrics-copy h2{color:#0a0a0a !important;}
html body.page-crea-asambleas section.metrics .checks li{color:#2a2a2e !important;}

/* =====================================================================
   PORTAFOLIO · nueva franja roja de cierre antes de las preguntas
   ===================================================================== */
.cf-redcta{
  background:var(--cf-red);
  color:#fff;
  padding:clamp(48px,6vw,80px) 0;
}
.cf-redcta__wrap{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px 40px;
}
.cf-redcta h2{
  font-family:Oswald,"Arial Narrow",sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.05;
  margin:0 0 8px;
  color:#fff;
}
.cf-redcta p{margin:0;max-width:52ch;color:rgba(255,255,255,.88);font:400 16px/1.55 Inter,Arial,sans-serif;}
.cf-redcta__btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;color:#c8001a;
  font:700 14px/1 Inter,Arial,sans-serif;text-transform:uppercase;letter-spacing:.02em;
  padding:16px 26px;border-radius:999px;text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  transition:translate .25s ease, box-shadow .25s ease;
}
.cf-redcta__btn:hover{translate:0 -2px;box-shadow:0 18px 36px rgba(0,0,0,.24);}
.cf-redcta__btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}