/* ============================================================================
   POST-ACTION.CSS
   Layout de la página de campaña (actions.php) · AnimaNaturalis

   RESPONSABILIDAD
   ────────────────
   Este archivo estiliza ÚNICAMENTE el layout y los elementos de UI propios
   de la página de campaña. No toca estilos del widget de formulario.

   1. Grid de dos columnas (imagen | form sticky)
   2. Columna imagen
   3. Columna artículo (debajo de la imagen, columna izquierda)
   4. Counter bar grande (.cpn-counter-bar) — animado por actions.js
   5. Contenido de la columna de formulario (tag, titular, bajada, petition)
   6. Toggle y preview de la carta + botón de edición
   7. Share bar y CTA fijo mobile
   8. Overrides de campaña para el botón de envío y el estado de éxito
      (diseño diagonal clip-path = identidad visual de campaña)

   LO QUE YA NO HACE ESTE ARCHIVO (movido a form-theme-sidebar.css)
   ─────────────────────────────────────────────────────────────────
   · Skin de los inputs del formulario (underline, label muted)
   · Skin del counter pequeño (#form-counter / .total-bar)
   · Ocultamiento de columnas .col-letter / .col-md-7
   → Ver form-theme-sidebar.css, sección "Overrides contexto campaña"

   TOKENS Y COHERENCIA
   ────────────────────
   Los tokens --cpn-* se definen aquí y referencian _variables.css donde
   hay correspondencia directa. Carga DESPUÉS de actions/_tokens.css.

   PERSONALIZAR SIN TOCAR ESTE ARCHIVO
   ─────────────────────────────────────
   Sobreescribe los tokens --cpn-* en tu hoja de temas después de cargar
   este archivo:
     :root {
       --cpn-accent:     #e53935;   // color de acento alternativo
       --cpn-img-ratio:  50%;       // balance imagen/form 
       --cpn-nav-h:      80px;      // si tu nav mide diferente
     }
   ============================================================================ */


/* ── Tokens propios del layout de campaña ─────────────────────────────────── */
:root {
  /* Acento de campaña — no tiene correspondencia en _variables.css.
     Es el color de la cuenta atrás, la barra de progreso grande, el tag
     "Actúa", los iconos de share y el CTA mobile.                          */
  --cpn-accent:       #ffb600;
  --cpn-accent-dk:    #e5a000;

  /* Paleta oscura — referencia directa a los primitivos del sistema        */
  --cpn-dark:         var(--nero-base);          /* #1D252C — nav/counter bg */
  --cpn-dark-mid:     var(--nero-mid);           /* #2E3A44 — hover states */

  /* Fondos de sección                                                      */
  --cpn-light-bg:     #f2f4f5;                   /* columna formulario */
  --cpn-article-bg:   var(--gray-white);

  /* Anchura del artículo — coincide con --content-narrow-width en _variables */
  --cpn-article-max-w: var(--content-narrow-width); /* 680px */

  /* Bordes y texto muted                                                   */
  --cpn-border:       var(--gray-pale);          /* #E8E8E5 ≈ prev #e1e3e5 */
  --cpn-muted:        rgba(29, 37, 44, 0.52);    /* --nero-base al 52% */

  /* Tipografía de impacto — hereda del sistema                             */
  --cpn-font-impact:  var(--font-family-headline, 'Arial Narrow', Arial, sans-serif);

  /* Clip-path diagonal del botón de envío (identidad visual de campaña)   */
  --cpn-clip-btn:     polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);

  /* Altura del nav fijo — sincronizado con --nav-height de _variables.css
     Antes: 70px. Ahora: referencia al token del sistema (72px).           */
  --cpn-nav-h:        var(--nav-height, 72px);

  /* Proporción imagen / form en desktop (configurable por tema)            */
  --cpn-img-ratio:    55%;
}


/* ── Reset de elementos del template de post normal ──────────────────────── */
.campaign-display .breadcrumb,
.campaign-display .author-container,
.campaign-display .pub-date,
.campaign-display .pub-location,
.campaign-display #scrollToFormBtn { display: none !important; }

.campaign-display .sticky-col { position: static !important; }

/* Eliminar márgenes negativos de _form.css dentro de la campaña
   (no necesarios porque la columna ya gestiona su padding)                 */
.campaign-display .form-post-action,
.campaign-display .form-post-success {
  margin-right: 0;
  margin-left:  0;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. GRID PRINCIPAL
   ══════════════════════════════════════════════════════════════════════════ */
.campaign-display {
  display:               grid;
  grid-template-columns: 1fr;     /* mobile: columna única */
  min-height:            100vh;
}

@media (min-width: 1000px) {
  .campaign-display {
    grid-template-columns: var(--cpn-img-ratio) 1fr;
    align-items:           start;   /* indispensable para position:sticky */
  }
}


/* ── Wrapper izquierdo: imagen + artículo ────────────────────────────────── */
.campaign-left {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}
@media (min-width: 1000px) {
  .campaign-left { grid-column: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. COLUMNA IMAGEN
   ══════════════════════════════════════════════════════════════════════════ */
.campaign-img-col {
  position:   relative;
  background: var(--nero-deep);   /* #0D151B — negro máximo */
  overflow:   hidden;
  height:     58vw;
  min-height: 220px;
  max-height: 380px;
}

@media (min-width: 1000px) {
  .campaign-img-col {
    height:     calc(100vh - var(--cpn-nav-h));
    max-height: none;
  }
}

.campaign-img-col picture,
.campaign-img-col img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  display:         block;
}

/* Gradiente: mejora legibilidad de texto eventual sobre la imagen */
.campaign-img-overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(
    135deg,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.08) 60%,
    transparent      100%
  );
  pointer-events: none;
}

/* Pie de foto (crédito fotográfico) */
.campaign-img-caption {
  position:      absolute;
  bottom:        0.6rem;
  left:          0.75rem;
  background:    var(--overlay-medium);    /* rgba(0,0,0,0.45) */
  color:         rgba(255, 255, 255, 0.85);
  font-size:     var(--fs-label);
  padding:       0.18em 0.5em;
  border-radius: var(--radius-sm);
}


/* ══════════════════════════════════════════════════════════════════════════
   3. ARTÍCULO (debajo de la imagen, columna izquierda)
   ══════════════════════════════════════════════════════════════════════════ */
.content-main.campaign-article {
  background: var(--cpn-article-bg);
  padding:    2rem 1.5rem 3rem;
  position:   relative;   /* para .cpn-article-fade absoluto */
}

@media (min-width: 1000px) {
  .content-main.campaign-article {
    padding:    2.5rem 2.5rem 4rem;
    border-top: 1px solid var(--cpn-border);
  }
}

/* Padding lateral para el contenido WYSIWYG dentro del artículo */
.content-main.campaign-article h1,
.content-main.campaign-article h2,
.content-main.campaign-article h3,
.content-main.campaign-article h4,
.content-main.campaign-article h5,
.content-main.campaign-article h6,
.content-main.campaign-article p,
.content-main.campaign-article ul,
.content-main.campaign-article ol {
  padding-left:  var(--space-sm);
  padding-right: var(--space-sm);
}

/* Limitar anchura del texto para legibilidad */
.campaign-article__inner {
  max-width: var(--cpn-article-max-w);
  margin:    0 auto;
}

/* Tipografía del cuerpo del artículo */
.cpn-article-body {
  font-size:   var(--font-content);
  line-height: var(--line-height-relaxed);
  color:       var(--cpn-dark);
}
.cpn-article-body p                  { margin-bottom: 0.9rem; }
.cpn-article-body h2,
.cpn-article-body h3 {
  font-family:    var(--cpn-font-impact);
  font-weight:    var(--font-weight-bold);
  font-size:      var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin:         1.4rem 0 0.5rem;
  color:          var(--cpn-dark);
}
.cpn-article-body ol,
.cpn-article-body ul  { padding-left: 1.5rem; margin-bottom: 0.9rem; }
.cpn-article-body blockquote {
  border-left: 3px solid var(--cpn-accent);
  background:  var(--gray-pale);
  padding:     0.75rem 1rem;
  margin:      1rem 0;
  font-style:  italic;
  font-size:   var(--fs-caption);
}
.cpn-article-body a {
  color:       var(--brick-base);
  font-weight: var(--font-weight-semibold);
}

/* Leer más / leer menos (activo si campaign_intro_paras > 0) */
.cpn-article-extra {
  max-height: 0;
  overflow:   hidden;
  transition: max-height var(--motion-slow) var(--ease-decelerate);
}
.cpn-article-extra.open { max-height: 9000px; }

.cpn-article-fade {
  position:       absolute;
  bottom:         2.5rem;
  left:           0;
  right:          0;
  height:         72px;
  background:     linear-gradient(to bottom, transparent, var(--cpn-article-bg));
  pointer-events: none;
  transition:     opacity var(--motion-base) linear;
}
.cpn-article-fade.hidden { opacity: 0; }

.cpn-read-more-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  background:     none;
  border:         none;
  color:          var(--cpn-accent-dk);
  font-size:      0.8rem;
  font-weight:    var(--font-weight-bold);
  font-family:    var(--cpn-font-impact);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  cursor:         pointer;
  padding:        0;
  margin-top:     0.5rem;
  margin-bottom:  1.5rem;
  transition:     color var(--motion-fast) var(--ease-standard);
}
.cpn-read-more-btn:hover                 { color: var(--cpn-dark); }
.cpn-read-more-btn svg                   { transition: transform var(--motion-fast) var(--ease-standard); }
.cpn-read-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }


/* ══════════════════════════════════════════════════════════════════════════
   4. COLUMNA DE FORMULARIO (sticky, columna derecha)
   ══════════════════════════════════════════════════════════════════════════ */
.campaign-form-col {
  background:     var(--cpn-light-bg);
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

@media (min-width: 1000px) {
  .campaign-form-col {
    grid-column: 2;
    grid-row:    1;
    position:    sticky;
    top:         var(--cpn-nav-h);
    max-height:  calc(100vh - var(--cpn-nav-h));
    overflow-y:  auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. COUNTER BAR GRANDE (.cpn-counter-bar)
   ─────────────────────────────────────────────────────────────────────────
   Exclusivo de actions.php. Diferente del #form-counter pequeño del widget.
   Los valores se animan por actions.js (initCounter con IntersectionObserver).
   Todos los colores tienen fallbacks explícitos como seguro ante el orden
   de carga en páginas con stack simplificado.
   ══════════════════════════════════════════════════════════════════════════ */
.cpn-counter-bar {
  background:  var(--cpn-dark, #1D252C);
  color:       var(--gray-white, #fff);
  padding:     0.65rem 1.25rem;
  display:     flex;
  align-items: center;
  gap:         1rem;
  flex-shrink: 0;
  font-family: var(--cpn-font-impact);
}

.cpn-counter-bar__item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      60px;
}

.cpn-counter-bar__label {
  font-size:      0.58rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  opacity:        0.55;
  line-height:    1;
}

/* tabular-nums evita que los números "bailen" al cambiar de dígito */
.cpn-counter-bar__value {
  font-size:            1.35rem;
  font-weight:          var(--font-weight-black);
  color:                var(--cpn-accent, #ffb600) !important;
  line-height:          1.1;
  font-variant-numeric: tabular-nums;
}

.cpn-counter-bar__progress {
  flex:          1;
  height:        4px;
  background:    rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  overflow:      hidden;
}

/* Fill: width:0 inicial, actions.js anima hasta el porcentaje calculado */
.cpn-counter-bar__fill {
  height:        100%;
  background:    var(--cpn-accent, #ffb600);
  border-radius: var(--radius-sm);
  width:         0%;
  transition:    width 1.4s var(--ease-decelerate);
}

/* ══════════════════════════════════════════════════════════════════════════
   6. CONTENIDO DE LA COLUMNA: TAG · TITULAR · BAJADA
   ══════════════════════════════════════════════════════════════════════════ */
.cpn-content {
  padding: 1.5rem;
  flex:    1;
}

@media (min-width: 600px) {
  .cpn-content { padding: 1.75rem 2rem 2rem; }
}

/* Tag "Actúa" — etiqueta diagonal sobre el titular */
.cpn-action-tag {
  display:         inline-block;
  background:      var(--cpn-accent);
  color:           var(--cpn-dark);
  font-family:     var(--cpn-font-impact);
  font-weight:     var(--font-weight-bold);
  font-size:       0.7rem;
  text-transform:  uppercase;
  letter-spacing:  var(--letter-spacing-wider);
  padding:         0.3em 1.2em 0.3em 0.8em;
  clip-path:       polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  text-decoration: none;
  margin-bottom:   0.75rem;
  transition:      background var(--motion-fast) var(--ease-standard);
}
.cpn-action-tag:hover {
  background: var(--cpn-accent-dk);
  color:      var(--cpn-dark);
}

/* Titular */
.cpn-headline {
  font-family:    var(--cpn-font-impact);
  font-weight:    var(--font-weight-black);
  font-size:      clamp(1.3rem, 2.5vw, 1.9rem);
  line-height:    var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-tight);
  color:          var(--cpn-dark);
  margin-bottom:  0.55rem;
}

/* Bajada (descr) */
.cpn-lead {
  font-size:     var(--fs-caption);
  color:         var(--cpn-dark);
  opacity:       0.78;
  line-height:   var(--line-height-snug);
  margin-bottom: 1.1rem;
}


/* ── Bloque del formulario (dentro de .cpn-content) ──────────────────────── */
.cpn-petition {
  border-top:  4px solid var(--cpn-accent);
  padding-top: 1.25rem;
  margin-top:  0.5rem;
}

.cpn-petition__title {
  font-family:    var(--cpn-font-impact);
  font-weight:    var(--font-weight-black);
  font-size:      1.35rem;
  text-transform: uppercase;
  color:          var(--cpn-dark);
  margin-bottom:  0.25rem;
}

.cpn-petition__intro {
  font-size:     var(--fs-label);
  color:         var(--cpn-muted);
  margin-bottom: 1rem;
}

/* Ocultar el h1/descr inline que genera form-post.php en render=landing
   (ya lo muestra el template actions.php en el exterior del widget)        */
.campaign-display .form-post-action .has-title,
.campaign-display .form-post-action .has-descr {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   7. TOGGLE, PREVIEW Y EDICIÓN DE CARTA (solo tipo letter)
   ══════════════════════════════════════════════════════════════════════════ */
.cpn-letter-toggle {
  display:        flex;
  align-items:    center;
  gap:            0.5rem;
  background:     var(--cpn-dark);
  color:          var(--gray-white);
  padding:        0.9rem 1rem;
  font-family:    var(--cpn-font-impact);
  font-size:      0.72rem;
  font-weight:    var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  cursor:         pointer;
  width:          100%;
  border:         none;
  transition:     background var(--motion-fast) var(--ease-standard);
}
.cpn-letter-toggle:hover,
.cpn-letter-toggle[aria-expanded="true"] { background: var(--cpn-dark-mid); }
.cpn-letter-toggle svg { flex-shrink: 0; transition: transform var(--motion-fast) var(--ease-standard); }
.cpn-letter-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

/* Preview colapsado — JS añade .open y lo anima via max-height             */
.cpn-letter-preview {
  position:     relative;
  max-height:   0;
  overflow:     hidden;
  background:   var(--form-letter-bg, #e4e7e9);
  border-left:  3px solid var(--cpn-accent);
  font-size:    0.78rem;
  line-height:  var(--line-height-relaxed);
  white-space:  pre-line;
  transition:   max-height var(--motion-slow) var(--ease-decelerate),
                padding    var(--motion-base) linear;
  padding:      0 1rem;
  cursor:       default;
}
.cpn-letter-preview.open {
  max-height:    500px;
  padding:       0 1.35rem 2rem;
  margin-bottom: 0.75rem;
  cursor:        pointer;
}

/* Botón de edición (inyectado por actions.js como primer hijo del preview) */
.cpn-letter-edit-btn {
  position:    absolute;
  top:         0;
  right:       0;
  z-index:     2;
  display:     inline-flex;
  align-items: center;
  gap:         0.3em;
  background:  none;
  border:      none;
  padding:     0.45rem 0.75rem;
  font-size:   0.67rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  line-height:    1;
  color:          var(--form-letter-accent, var(--brick-dark));
  cursor:         pointer;
  opacity:        0.65;
  transition:     opacity var(--motion-fast) var(--ease-standard);
}
.cpn-letter-edit-btn:hover                          { opacity: 1; }
.cpn-letter-preview.open:hover .cpn-letter-edit-btn { opacity: 1; }
.cpn-letter-edit-btn:focus-visible {
  outline:        2px solid var(--form-letter-accent, var(--brick-dark));
  outline-offset: 2px;
  opacity:        1;
  border-radius:  var(--radius-sm);
}
.cpn-letter-edit-btn svg { width: 10px; height: 10px; flex-shrink: 0; }
.cpn-letter-edit-btn .fas,
.cpn-letter-edit-btn .far { font-size: 10px; flex-shrink: 0; }

/* Hover sobre la preview entera → fondo ligeramente más oscuro              */
.cpn-letter-preview.open:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Contenedor del texto (creado por JS, padding-top para el botón absoluto)  */
.cpn-letter-text {
  padding-top: 1.6rem;
  white-space: pre-line;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. OVERRIDES DE CAMPAÑA PARA EL WIDGET DEL FORMULARIO
   ─────────────────────────────────────────────────────────────────────────
   Solo los overrides que SON ESPECÍFICOS del diseño de campaña:
   · Botón de envío con clip-path diagonal (identidad visual de campaña)
   · Estado de éxito tipografía de impacto
   Las demás overrides del formulario (inputs, labels, counter pequeño) están
   en form-theme-sidebar.css, sección "Contexto campaña".
   ══════════════════════════════════════════════════════════════════════════ */

/* Botón de envío: diseño diagonal de campaña */
.campaign-display .btn-submit.btn-gem {
  display:        block !important;
  width:          100% !important;
  background:     var(--cpn-accent) !important;
  color:          var(--cpn-dark) !important;
  font-family:    var(--cpn-font-impact) !important;
  font-weight:    var(--font-weight-black) !important;
  font-size:      1rem !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-wide) !important;
  border:         none !important;
  border-radius:  0 !important;
  clip-path:      var(--cpn-clip-btn) !important;
  padding:        1rem 1.5rem !important;
  margin-top:     0.5rem !important;
  transition:     background var(--motion-fast) var(--ease-standard) !important;
}
.campaign-display .btn-submit.btn-gem:hover {
  background: var(--cpn-accent-dk) !important;
}
.campaign-display .btn-submit.btn-gem::before {
  background: var(--cpn-accent);
}

/* Estado de éxito con tipografía de impacto */
.campaign-display .form-post-success {
  border-radius: 0;
  padding:       1rem;
}
.campaign-display .form-post-success h1 {
  font-family:    var(--cpn-font-impact);
  font-size:      1.4rem;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════════
   9. SHARE BAR
   ══════════════════════════════════════════════════════════════════════════ */
.cpn-share-section {
  background:  var(--cpn-dark);
  color:       var(--gray-white);
  padding:     1.1rem 1.5rem;
  text-align:  center;
  flex-shrink: 0;
}

.cpn-share-section__title {
  font-family:    var(--cpn-font-impact);
  font-size:      0.68rem;
  font-weight:    var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  opacity:        0.55;
  margin-bottom:  0.75rem;
}

.cpn-share-icons {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             0.55rem;
}

.cpn-share-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  background:      rgba(255, 255, 255, 0.08);
  border-radius:   50%;
  color:           var(--gray-white) !important;
  text-decoration: none;
  font-size:       1rem;
  transition:      background var(--motion-fast) var(--ease-standard),
                   color     var(--motion-fast) var(--ease-standard);
}
.cpn-share-icon:hover {
  background: var(--cpn-accent);
  color:      var(--cpn-dark);
}


/* ══════════════════════════════════════════════════════════════════════════
   10. CTA FIJO MOBILE
   ─────────────────────────────────────────────────────────────────────────
   actions.js (initFixedCta) lo muestra cuando el formulario no está en el
   viewport. En desktop lo oculta el CSS. Diferente de #scrollToFormBtn
   (formularios de post/sidebar): ese está oculto por el reset de la línea 48.
   ══════════════════════════════════════════════════════════════════════════ */
.cpn-fixed-cta {
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  background:      var(--cpn-accent);
  padding:         0.6rem 1rem;
  display:         flex;
  justify-content: center;
  z-index:         var(--z-fixed);
  box-shadow:      0 -3px 16px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1000px) { .cpn-fixed-cta { display: none !important; } }

.cpn-fixed-cta__btn {
  background:     var(--cpn-dark);
  color:          var(--gray-white);
  font-family:    var(--cpn-font-impact);
  font-weight:    var(--font-weight-black);
  font-size:      0.88rem;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding:        0.7rem 2.5rem;
  border:         none;
  cursor:         pointer;
  clip-path:      polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition:     background var(--motion-fast) var(--ease-standard);
}
.cpn-fixed-cta__btn:hover { background: var(--nero-deep); }   /* #0D151B */

/* Espacio inferior para que el CTA no tape el último contenido visible */
.cpn-body-bottom-pad { padding-bottom: 58px; }
@media (min-width: 1000px) { .cpn-body-bottom-pad { padding-bottom: 0; } }


/* ══════════════════════════════════════════════════════════════════════════
   11. ORDEN MOBILE: imagen → formulario → artículo
   ─────────────────────────────────────────────────────────────────────────
   En mobile el grid es de 1 columna y .campaign-left agrupa imagen+artículo,
   por lo que usamos display:contents para "aplanar" el wrapper y poder
   asignar order individual a cada bloque.
   En desktop (≥1000px) se restaura el layout grid de dos columnas normal.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 999px) {

  /* Convertir el grid en flex column para poder usar order */
  .campaign-display {
    display:        flex;
    flex-direction: column;
  }

  /* "Aplanar" .campaign-left: sus hijos (imagen y artículo)
     participan directamente en el flex padre             */
  .campaign-left {
    display:  contents;
  }

  /* Orden de los tres bloques */
  .campaign-img-col      { order: 1; }   /* 1º imagen   */
  .campaign-form-col     { order: 2; }   /* 2º formulario */
  .campaign-article      { order: 3; }   /* 3º artículo  */
}

@media (min-width: 1000px) {
  /* Restaurar el layout grid de dos columnas en desktop */
  .campaign-display {
    display:               grid;
    grid-template-columns: var(--cpn-img-ratio) 1fr;
  }

  /* Restaurar .campaign-left como flex column normal */
  .campaign-left {
    display:        flex;
    flex-direction: column;
    grid-column:    1;
  }
}