/* ============================================================================
   VivaColombia — contest landing (contest.html / en/contest.html)
   Mercado system. One giveaway, one obvious entry action.
   Layout: two columns split by a 3px ink rule; the right column is the entry
   panel on sunken paper. The panel occupies the same slot in every state —
   only the contents of the box change, so the page never jumps.
   ========================================================================= */

.cp-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  border-bottom: 3px solid var(--vc-tinta);
}
.cp-main {
  padding: 40px var(--vc-gutter) 56px;
  border-right: 3px solid var(--vc-tinta);
  min-width: 0;
}
.cp-side {
  background: var(--vc-papel-hundido);
  padding: 40px 34px 56px;
}

/* Status chips row */
.cp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cp-chip-outline {
  display: inline-flex; align-items: center;
  border: 1.5px solid rgba(26,23,20,.35);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px; white-space: nowrap;
}

/* Headline */
.cp-title {
  font-family: var(--vc-font-display);
  font-size: clamp(38px, 4.5vw, 62px);
  font-weight: 800; line-height: .94; letter-spacing: -.035em;
  margin: 0 0 14px; text-wrap: pretty;
}
.cp-subtitle {
  font-size: 19px; color: rgba(26,23,20,.7); line-height: 1.5;
  margin: 0 0 26px; max-width: 640px;
}

/* Hero visual — background-image set by contest-detail.js */
.cp-visual {
  height: 340px; background: linear-gradient(135deg, #2C2621, #5A4636);
  background-size: cover; background-position: center 25%;
  margin-bottom: 26px; position: relative;
}
.cp-skel { animation: mc-skel 1.4s ease-in-out infinite; background: #E4DDCB; }

/* Meta pills */
.cp-meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

/* Prize block — full azul */
.cp-prize-block {
  background: var(--vc-azul); color: var(--vc-crema);
  padding: 24px 26px; margin-bottom: 32px;
}
.cp-prize-block .label {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vc-amarillo); margin-bottom: 8px;
}
.cp-prize-block h3 {
  font-family: var(--vc-font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 6px;
}
.cp-prize-block p { font-size: 15px; color: rgba(247,242,231,.8); margin: 0; }

/* Section headings inside the left column */
.cp-h2 {
  font-family: var(--vc-font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 16px;
}
.cp-h2--sm { font-size: 24px; margin-bottom: 10px; }

/* How-to list — azul checks */
.cp-rules-list { list-style: none; margin: 0 0 34px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cp-rules-list li { display: flex; gap: 12px; font-size: 15.5px; line-height: 1.5; }
.cp-rules-list li i, .cp-rules-list li .check { color: var(--vc-azul); font-weight: 700; flex: none; margin-top: 2px; }

.cp-fine { font-size: 14.5px; color: rgba(26,23,20,.65); line-height: 1.6; margin: 0 0 12px; max-width: 660px; }

/* Share bar — square outlined buttons (48px touch floor) */
.cp-share-bar {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--vc-linea); padding-top: 20px; margin-top: 26px;
}
.cp-share-bar .cp-share-label {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vc-tinta-apagada);
}
.cp-share-bar a {
  width: 44px; height: 44px; border: 1.5px solid var(--vc-tinta);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--vc-tinta);
  transition: background var(--vc-m-ui), color var(--vc-m-ui);
}
.cp-share-bar a:hover { background: var(--vc-tinta); color: var(--vc-crema); }

/* ============ ENTRY PANEL ============ */
.cp-entry-card {
  border: 3px solid var(--vc-tinta); background: var(--vc-papel);
  padding: 26px 24px 28px;
  position: sticky; top: 24px;
}
.cp-entry-card.is-success { border-color: var(--vc-azul); }
.cp-entry-card.is-dup { border-color: var(--vc-rojo-profundo); }
.cp-entry-card.is-closed { border-color: rgba(26,23,20,.45); background: var(--vc-papel-hundido); }
.cp-entry-card h3 {
  font-family: var(--vc-font-display);
  font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  margin: 0 0 6px;
}
.cp-entry-card .sub { font-size: 14px; color: rgba(26,23,20,.65); line-height: 1.5; margin: 0 0 22px; }

.cp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.cp-form-grid .span2 { grid-column: span 2; }
.cp-entry-card .mc-field input, .cp-entry-card .mc-field select { min-height: 46px; }
.cp-consents { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.cp-submit {
  width: 100%; border: 0; cursor: pointer;
  background: var(--vc-rojo); color: #fff;
  font: 700 17px/1.2 var(--vc-font-body);
  padding: 16px; text-align: center; margin-top: 22px;
  transition: background var(--vc-m-ui);
}
.cp-submit:hover { background: var(--vc-rojo-profundo); }
.cp-submit[disabled] { background: rgba(26,23,20,.72); cursor: default; }
.cp-entry-foot { font-size: 12.5px; color: var(--vc-tinta-apagada); text-align: center; margin-top: 12px; line-height: 1.5; }

.cp-entry-msg { margin-top: 14px; }
.cp-entry-msg:empty { display: none; }

/* Success state block */
.cp-success { text-align: center; padding: 8px 0 4px; }
.cp-success .tick {
  width: 48px; height: 48px; background: var(--vc-azul); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; margin: 0 auto 12px;
}
.cp-success h4 {
  font-family: var(--vc-font-display);
  font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  margin: 0 0 6px;
}
.cp-success p { font-size: 14px; color: rgba(26,23,20,.68); line-height: 1.5; margin: 0; }
.cp-success .share-cta {
  display: block; margin-top: 16px; border-top: 1px dashed rgba(26,23,20,.3);
  padding-top: 14px; font-size: 14px; font-weight: 700; color: var(--vc-rojo);
  background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; cursor: pointer;
}

/* Closed / scheduled panel states */
.cp-state-badge-row { margin-bottom: 12px; }
.cp-state-title {
  font-family: var(--vc-font-display);
  font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  margin: 0 0 6px;
}
.cp-state-text { font-size: 14px; color: rgba(26,23,20,.68); line-height: 1.5; margin: 0 0 14px; }

/* Sticky mobile CTA bar */
.cp-sticky {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--vc-papel); border-top: 3px solid var(--vc-tinta);
  padding: 12px 16px 16px;
}
.cp-sticky__facts { font-size: 11.5px; font-weight: 600; color: var(--vc-tinta-apagada); margin-bottom: 8px; }
.cp-sticky .cp-submit { margin-top: 0; }

/* Not-found / dead-link conversion surface */
.cp-dead {
  border: 2px solid var(--vc-tinta); background: var(--vc-papel);
  padding: 34px 32px; margin: 48px var(--vc-gutter);
}
.cp-dead .eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vc-rojo-profundo); margin-bottom: 10px;
}
.cp-dead h2 {
  font-family: var(--vc-font-display);
  font-size: 38px; font-weight: 800; letter-spacing: -.025em; line-height: 1;
  margin: 0 0 10px;
}
.cp-dead p { font-size: 15px; color: rgba(26,23,20,.7); line-height: 1.55; margin: 0 0 20px; max-width: 520px; }
.cp-dead .row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .cp-layout { grid-template-columns: 1fr; }
  .cp-main { border-right: 0; border-bottom: 3px solid var(--vc-tinta); padding-bottom: 40px; }
  .cp-side { padding: 32px var(--vc-gutter) 120px; }
  .cp-entry-card { position: static; }
  .cp-sticky { display: block; }
  body.cp-no-sticky .cp-sticky { display: none; }
  .cp-visual { height: 240px; }
}
@media (max-width: 640px) {
  .cp-subtitle { font-size: 16px; }
  .cp-visual { height: 200px; }
  .cp-form-grid { grid-template-columns: 1fr; }
  .cp-form-grid .span2 { grid-column: auto; }
  .cp-prize-block h3 { font-size: 24px; }
}