/* ==========================================================================
   Draft Pro — Panel General (Ficha de Liga Pública)
   CSS puro, sin framework. Prefijo .dp- para no colisionar con tus estilos.
   Breakpoint único: 980px (escritorio arriba, móvil abajo).
   ========================================================================== */

.dp-panel {
  --dp-green: #2A7048;
  --dp-green-dark: #1F5537;
  --dp-green-soft: #7FC49B;
  --dp-green-pale: #B7E0C6;
  --dp-navy: #12243C;
  --dp-navy-hi: #1A3153;
  --dp-navy-line: #2E4767;
  --dp-navy-text: #C3CFDD;
  --dp-navy-mute: #8FA4BD;
  --dp-ink: #17191B;
  --dp-ink-2: #26292C;
  --dp-ink-3: #3D3A36;
  --dp-ink-4: #4A4741;
  --dp-gray: #5C5852;
  --dp-gray-2: #6E6A64;
  --dp-gray-3: #8A857E;
  --dp-line: #DCD9D4;
  --dp-line-soft: #EDEBE7;
  --dp-surface: #F4F3F1;
  --dp-pad: 40px;

  background: #fff;
  color: var(--dp-ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}
.dp-panel *,
.dp-panel *::before,
.dp-panel *::after { box-sizing: border-box; }
.dp-panel h1, .dp-panel h2, .dp-panel h3, .dp-panel p { margin: 0; }
.dp-panel .dp-main p a,
.dp-panel .dp-hero__lead a { color: var(--dp-green); text-decoration: none; }
.dp-panel a { text-decoration: none; }
.dp-panel .dp-main p a:hover,
.dp-panel .dp-hero__lead a:hover { color: var(--dp-green-dark); }
.dp-panel :focus-visible { outline: 2px solid var(--dp-green); outline-offset: 2px; }
.dp-panel img { display: block; max-width: 100%; }

/* Placeholder de foto — bórralo cuando pongas imágenes reales */
.dp-ph {
  background: repeating-linear-gradient(135deg, #E6E3DE 0 8px, #F1EFEB 8px 16px);
  display: flex;
  align-items: flex-end;
}
.dp-ph > span {
  font: 11px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: var(--dp-gray-2);
  padding: 10px 12px;
}

/* ---------- Botones ---------- */
.dp-btn {
  display: inline-block;
  padding: 14px 26px;
  border: 0;
  font: 800 14px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.dp-panel .dp-btn--navy { background: var(--dp-navy); color: #fff; }
.dp-panel .dp-btn--navy:hover { background: #1C3454; color: #fff; }
.dp-panel .dp-btn--green { background: var(--dp-green); color: #fff; padding: 12px 20px; font-size: 12px; }
.dp-panel .dp-btn--green:hover { background: var(--dp-green-dark); color: #fff; }
.dp-panel .dp-btn--outline {
  background: transparent; color: var(--dp-ink);
  border: 1px solid #C9C5BF; padding: 12px 20px; font-size: 12px;
}
.dp-panel .dp-btn--outline:hover { background: var(--dp-surface); color: var(--dp-ink); }
.dp-btn--block { display: block; text-align: center; padding: 15px; }

.dp-panel .dp-link {
  color: var(--dp-green);
  font: 800 12px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--dp-green);
  padding-bottom: 2px;
}

/* ---------- Header ---------- */
.dp-header__row {
  padding: 26px var(--dp-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dp-brand { display: flex; align-items: center; gap: 18px; }
.dp-brand__mark { height: 92px; width: auto; }
.dp-brand__name {
  display: block;
  font: 800 34px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .02em;
  color: var(--dp-navy);
  white-space: nowrap;
}
.dp-brand__name em { color: var(--dp-green); font-style: normal; }
.dp-brand__tagline {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  font: 600 12px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-gray-2);
  white-space: nowrap;
}
.dp-brand__tagline i { width: 16px; height: 2px; background: var(--dp-green); }

.dp-header__actions { display: flex; align-items: center; gap: 12px; }
.dp-visitor {
  font: 800 13px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dp-gray-3);
  white-space: nowrap;
}

/* Barra de secciones */
.dp-nav {
  padding: 0 var(--dp-pad);
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--dp-line-soft);
  border-bottom: 1px solid var(--dp-line);
}
.dp-panel .dp-nav__link {
  flex: 0 0 auto;
  padding: 16px 0;
  font: 800 14px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dp-gray);
  white-space: nowrap;
}
.dp-panel .dp-nav__link:hover { color: var(--dp-navy); }
.dp-panel .dp-nav__link.is-active {
  color: var(--dp-navy);
  border-bottom: 3px solid var(--dp-green);
  margin-bottom: -1px;
}

/* Hamburguesa — sólo móvil */
.dp-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--dp-line);
  cursor: pointer;
}
.dp-burger:hover { background: var(--dp-surface); border-color: var(--dp-green); }
.dp-burger span { width: 22px; height: 2px; background: var(--dp-navy); }

/* Menú desplegable */
.dp-menu { background: var(--dp-navy); border-bottom: 2px solid var(--dp-ink); }
.dp-menu[hidden] { display: none; }
.dp-menu__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  font: 800 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-green-soft);
}
.dp-menu__close {
  background: none; border: 0; cursor: pointer;
  font-size: 22px; font-weight: 800; line-height: 1; color: #fff; padding: 2px 8px;
}
.dp-menu__close:hover { color: var(--dp-green-soft); }
.dp-panel .dp-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  border-top: 1px solid var(--dp-navy-line);
  font: 800 15px/1.2 "Archivo", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dp-navy-text);
}
.dp-panel .dp-menu__link:hover { background: var(--dp-navy-hi); color: #fff; }
.dp-panel .dp-menu__link.is-active { background: var(--dp-navy-hi); color: #fff; }
.dp-menu__link em {
  font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--dp-green-soft);
}
.dp-menu__foot { padding: 16px 18px; border-top: 1px solid var(--dp-navy-line); }

/* ---------- Hero ---------- */
.dp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--dp-ink);
}
.dp-hero__text {
  padding: 34px var(--dp-pad);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  border-right: 2px solid var(--dp-ink);
}
.dp-kicker {
  display: flex; align-items: center; gap: 12px;
  font: 800 14px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dp-green);
}
.dp-rule { width: 28px; height: 3px; background: var(--dp-green); flex: 0 0 auto; }
.dp-hero__title {
  font: 800 40px/1.06 "Archivo", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--dp-navy);
  max-width: 22ch;
  text-wrap: balance;
}
.dp-slogan {
  font: 800 16px/1.45 "Archivo", system-ui, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--dp-green);
  padding-left: 16px;
  border-left: 3px solid var(--dp-green);
  max-width: 34ch;
}
.dp-hero__lead { font-size: 16px; line-height: 1.6; color: var(--dp-ink-3); max-width: 50ch; }
.dp-hero__cta { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.dp-hero__photo { min-height: 280px; }

/* ---------- Franja de capacidades ---------- */
.dp-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--dp-surface);
  border-bottom: 2px solid var(--dp-ink);
}
.dp-strip__cell { padding: 20px 24px; border-right: 1px solid var(--dp-line); }
.dp-strip__cell:first-child { padding-left: var(--dp-pad); }
.dp-strip__cell:last-child { border-right: 0; }
.dp-strip__label {
  font: 800 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dp-green);
  margin-bottom: 6px;
}
.dp-strip__text { font-size: 15px; color: var(--dp-ink-2); }

/* ---------- Bloque verde Misión / Visión ---------- */
/* Ancla "Qué es Draft Pro" (2026-08-18, bug real corregido): el topbar de
   la app es sticky (.dp-header, 100px de alto -- ver styles.css) y se
   queda pegado arriba de la pantalla incluso después de saltar con
   href="#dp-mission-vision" -- sin este scroll-margin-top, el salto nativo
   del navegador alinea el borde superior de la sección justo debajo del
   borde superior de la PANTALLA, pero el header sticky lo tapa encima,
   dejando "MISIÓN"/"VISIÓN" y el arranque del texto escondidos. 116px =
   100px del header + margen de respiro visual.
   */
#dp-mission-vision { scroll-margin-top: 116px; }

/* "¿Qué es Draft Pro?" (2026-08-18, texto fijo, no editable desde Gestión
   -- identidad permanente de la página). Franja blanca propia ANTES del
   verde a propósito: el bloque verde es "el punto de respiro visual...
   no fragmentar" (declaración formal única, ver más abajo); esta
   introducción es de un registro más cercano/cálido -- separarla en su
   propia franja preserva ambos tonos en vez de mezclarlos dentro del
   mismo bloque. Mismo filete de 2px que separa el resto de las secciones
   de la página (hero/franja de capacidades) -- no rompe la sensación de
   "una sola narrativa" al hacer scroll, es el mismo lenguaje visual de
   siempre.
   */
.dp-mv-intro {
  padding: 40px var(--dp-pad) 44px;
  border-bottom: 2px solid var(--dp-ink);
  display: flex;
  gap: 44px;
}
/* Reparto de ancho (2026-08-18, pedido real: la columna izquierda se
   quedaba demasiado ancha -- sobraba espacio en blanco bajo su párrafo
   más corto -- mientras la derecha, angosta, apretaba su texto en saltos
   de línea muy juntos, y por `align-items:stretch` esa altura extra de la
   derecha terminaba estirando el contenedor de la izquierda, agrandando
   el hueco vacío). Antes: izquierda con max-width fijo de 660px
   absorbiendo todo lo que quería, derecha con flex:1 quedándose con las
   sobras -- nunca equilibrado. Ahora: proporción 4:6 a favor de la
   derecha (compensa el "carril" del escudo -- 32px de padding + 112px de
   escudo + 34px de gap -- que le come ancho de texto antes de empezar).
   Ajustado de 5:6 a 4:6 cuando se igualó el tamaño de letra entre ambas
   columnas: el texto del escudo dejó de beneficiarse de una fuente más
   chica, así que necesita más ancho relativo para conservar el mismo
   equilibrio. Proporcional (flex-grow), no píxeles fijos, para que el
   equilibrio se mantenga sin importar el ancho real de la ventana -- los
   max-width son solo un tope de seguridad en pantallas muy anchas. */
.dp-mv-intro__col { flex: 4 1 0; max-width: 560px; min-width: 0; }
.dp-mv-intro__title {
  margin: 0 0 14px;
  font: 800 30px/1.2 "Archivo", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--dp-navy);
}
.dp-mv-intro__text {
  font-size: 17px;
  line-height: 1.6;
  color: var(--dp-ink-3);
  text-align: justify;
  hyphens: auto;
}

/* "Nuestro escudo" (2026-08-18, texto fijo, no editable desde Gestión --
   identidad permanente, igual que la introducción). Rellena la columna
   derecha que quedaba vacía junto a "¿Qué es Draft Pro?". Solo una regla
   vertical de 2px separa -- sin caja ni fondo propio, mismo criterio que
   el resto del sistema ("nada de sombras, bordes estructurales de 2px"). */
.dp-crest {
  /* 6:5 -> 6:4 a favor de la derecha (2026-08-18): al igualar el tamaño de
     letra con la introducción, el texto del escudo dejó de beneficiarse
     de una fuente más chica -- necesita algo más de ancho para conservar
     el mismo equilibrio de antes, no solo el mismo tamaño de letra. */
  flex: 6 1 0;
  max-width: 740px;
  min-width: 0;
  border-left: 2px solid var(--dp-navy);
  padding-left: 32px;
  display: flex;
  gap: 34px;
  align-items: stretch;
}
/* Escudo (2026-08-18, pedido real: se veía apretado/pequeño para ser el
   protagonista del texto que lo describe) -- 72px -> 112px (+56%), y más
   aire alrededor (gap 14px -> 22px hacia el filete, gap del bloque 26px ->
   34px hacia el texto) para que respire, no solo crecer en el mismo hueco. */
.dp-crest__rail { display: flex; flex-direction: column; align-items: center; gap: 22px; flex-shrink: 0; }
.dp-crest__rail img { width: 112px; height: 112px; display: block; }
/* El filete verde crece hasta igualar el alto del texto -- ata el escudo
   al párrafo en vez de dejarlo flotando solo arriba. */
.dp-crest__stem { width: 2px; flex: 1; background: var(--dp-green); }
/* "IDENTIDAD" (2026-08-18, pedido real: se veía chica/discreta) -- 11px -> 15px. */
.dp-crest__kicker {
  font: 800 15px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dp-green);
  margin: 0 0 8px;
}
.dp-crest__title {
  margin: 0 0 12px;
  font: 800 22px/1.1 "Archivo", system-ui, sans-serif;
  letter-spacing: -.01em;
  color: var(--dp-navy);
}
/* Mismo tamaño que .dp-mv-intro__text (2026-08-18, pedido real: se veían
   distintos entre las dos columnas) -- 14px -> 17px, mismo line-height. */
.dp-crest__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #3F4D47;
  text-align: justify;
  hyphens: auto;
}

.dp-green {
  background: var(--dp-green);
  color: #fff;
  padding: 60px var(--dp-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
/* Etiquetas "Misión"/"Visión" (2026-08-18, pedido real: se sentían como
   una etiqueta pequeña y discreta -- ahora son un título con presencia
   real, más grande que el párrafo que las sigue). */
.dp-green__label {
  font: 800 32px/1.1 "Archivo", system-ui, sans-serif;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--dp-green-pale);
  margin-bottom: 18px;
}
.dp-green__text {
  font-size: 21px; line-height: 1.5; color: #fff;
  text-align: justify;
  hyphens: auto;
}

/* ---------- Cuerpo ---------- */
.dp-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  border-top: 2px solid var(--dp-ink);
}
.dp-main { padding: var(--dp-pad); border-right: 2px solid var(--dp-ink); }
.dp-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 22px;
}
.dp-h2 { font: 800 26px/1.2 "Archivo", system-ui, sans-serif; color: var(--dp-navy); }

.dp-article {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--dp-line);
}
.dp-article:first-of-type { padding-top: 0; }
.dp-article--last { border-bottom: 0; }
.dp-article__photo { height: 150px; }
.dp-article:first-of-type .dp-article__photo { height: 180px; }
.dp-tag {
  font: 800 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dp-gray-3);
  margin-bottom: 8px;
}
.dp-tag--green { color: var(--dp-green); }
.dp-article__title {
  font: 800 23px/1.2 "Archivo", system-ui, sans-serif;
  color: var(--dp-ink);
  margin-bottom: 8px;
}
.dp-article__title--sm { font-size: 21px; }
.dp-article__lead { font-size: 14px; line-height: 1.6; color: var(--dp-ink-4); text-align: justify; text-align-last: left; hyphens: auto; }

/* ---------- Barra lateral ---------- */
.dp-aside { display: flex; flex-direction: column; }

.dp-leaders { background: var(--dp-navy); padding: 24px; }
.dp-leaders__label {
  font: 800 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-green-soft);
  margin-bottom: 14px;
}
.dp-leaders__row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--dp-navy-line);
}
.dp-leaders__row:last-of-type { border-bottom: 0; }
.dp-leaders__row span { font-size: 13px; color: var(--dp-navy-text); }
.dp-leaders__row b { font-size: 17px; font-weight: 800; color: #fff; }
.dp-leaders__note { margin-top: 14px; font-size: 11px; line-height: 1.5; color: var(--dp-navy-mute); }

.dp-card { padding: 24px; border-bottom: 1px solid var(--dp-line); }
.dp-card--last { border-bottom: 0; }
.dp-card__label {
  font: 800 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-green);
  margin-bottom: 12px;
}
.dp-poll__q {
  font: 800 17px/1.25 "Archivo", system-ui, sans-serif;
  color: var(--dp-navy);
  margin-bottom: 16px;
}
.dp-poll__opt { margin-bottom: 12px; }
.dp-poll__top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.dp-poll__top span { font-size: 14px; color: var(--dp-ink-2); }
.dp-poll__top b { font-size: 13px; font-weight: 800; color: var(--dp-gray-2); }
.dp-poll__top .is-lead { color: var(--dp-ink); font-weight: 800; }
.dp-poll__top b.is-lead { color: var(--dp-green); }
.dp-poll__bar { height: 8px; background: var(--dp-line-soft); }
.dp-poll__bar i { display: block; height: 8px; background: var(--dp-green); }
.dp-poll__bar i.is-navy { background: var(--dp-navy); }

.dp-tip {
  padding: 10px 0;
  border-top: 1px solid var(--dp-line-soft);
  font-size: 14px; line-height: 1.55; color: var(--dp-ink-2);
}

.dp-social { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-panel .dp-social__item {
  padding: 9px 14px;
  border: 1px solid var(--dp-line);
  font: 800 13px/1 "Archivo", system-ui, sans-serif;
  color: var(--dp-navy);
}
.dp-panel .dp-social__item:hover { background: var(--dp-surface); color: var(--dp-navy); }
.dp-social__slot {
  padding: 9px 14px;
  border: 1px dashed #C9C5BF;
  font: 11px/1 ui-monospace, Menlo, monospace;
  color: var(--dp-gray-3);
}

/* ---------- Footer ---------- */
.dp-footer {
  background: var(--dp-navy);
  border-top: 2px solid var(--dp-ink);
  padding: 30px var(--dp-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.dp-footer__brand { display: flex; align-items: center; gap: 13px; }
.dp-footer__brand img { height: 34px; width: auto; }
.dp-footer__brand p { font-size: 12px; color: var(--dp-navy-mute); }
.dp-panel .dp-footer__brand a { color: var(--dp-green-soft); }
.dp-panel .dp-footer__brand a:hover { color: #A6D9BB; }
.dp-footer__links { display: flex; gap: 22px; }
.dp-panel .dp-footer__links a {
  font: 800 12px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.dp-panel .dp-footer__links a:hover { color: var(--dp-green-soft); }

/* ---------- Cinta dinámica (eslogan + datos reales) ----------
   Compartida por todas las pantallas públicas. La pista lleva la secuencia
   DUPLICADA y se desplaza exactamente -50%: el bucle es continuo, sin salto.
   El contenido lo compone el servidor; ticker.js sólo lo refresca. */
@keyframes dp-ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dp-ticker-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.dp-ticker {
  background: var(--dp-navy);
  overflow: hidden;
  padding: 11px 0;
}
.dp-ticker__track {
  display: flex;
  width: max-content;
  animation: dp-ticker-slide 90s linear infinite;
}
.dp-ticker__item {
  display: flex; align-items: center; gap: 12px;
  padding-right: 26px;
  white-space: nowrap;
}
.dp-ticker__text {
  font: 800 13px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
/* El eslogan es el ancla: va más espaciado que los datos */
.dp-ticker__item--eslogan .dp-ticker__text { letter-spacing: .2em; }
.dp-ticker__tag {
  font: 800 10px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-green-soft);
}
.dp-ticker__sep {
  width: 7px; height: 7px;
  background: var(--dp-green-soft);
  transform: rotate(45deg);
  flex: 0 0 auto;
  margin-left: 14px;
}
/* Juego en vivo: el único elemento con punto latiendo */
.dp-ticker__live {
  width: 9px; height: 9px;
  background: #E8503A;
  border-radius: 50%;
  flex: 0 0 auto;
  animation: dp-ticker-pulse 1.6s ease-in-out infinite;
}
.dp-ticker__item--live .dp-ticker__tag { color: #FFB3A6; }
@media (prefers-reduced-motion: reduce) {
  .dp-ticker__track { animation: none; }
  .dp-ticker__live { animation: none; }
}

/* ---------- Patrocinadores ---------- */
.dp-sponsors {
  background: var(--dp-surface);
  border-top: 2px solid var(--dp-ink);
  padding: 26px var(--dp-pad);
}
.dp-sponsors--plain { background: #fff; }
.dp-sponsors__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.dp-sponsors__label {
  font: 800 11px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dp-gray-3);
}
.dp-sponsors__note { font-size: 11px; color: var(--dp-gray-3); }
.dp-sponsors__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.dp-panel .dp-sponsor {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 1px solid var(--dp-line);
  padding: 14px;
  color: var(--dp-navy);
}
.dp-panel .dp-sponsor:hover { border-color: var(--dp-green); color: var(--dp-navy); }
.dp-sponsor__logo { width: 44px; height: 44px; flex: 0 0 auto; }
.dp-sponsor__name { font: 800 13px/1.3 "Archivo", system-ui, sans-serif; }

/* ==========================================================================
   MÓVIL / TABLET — el menú hamburguesa cubre todo por debajo de 1340px,
   ancho mínimo que necesita la barra de 11 secciones sin comprimirse.
   ========================================================================== */
@media (max-width: 1339px) {
  .dp-panel { --dp-pad: 18px; }

  .dp-header__row { padding: 14px var(--dp-pad); }
  .dp-brand { gap: 12px; }
  .dp-brand__mark { height: 54px; }
  .dp-brand__name { font-size: 21px; }
  .dp-brand__tagline { font-size: 9px; letter-spacing: .14em; margin-top: 5px; }
  .dp-brand__tagline i { width: 12px; }

  .dp-visitor { display: none; }
  .dp-header__actions .dp-btn--navy { display: none; }
  .dp-burger { display: flex; }

  .dp-panel .dp-nav { display: none; }
  .dp-header { border-bottom: 2px solid var(--dp-ink); }

  .dp-hero { grid-template-columns: 1fr; }
  .dp-hero__text { padding: 22px var(--dp-pad); border-right: 0; gap: 12px; }
  .dp-hero__title { font-size: 28px; max-width: none; }
  .dp-slogan { font-size: 13px; padding-left: 12px; max-width: none; }
  .dp-hero__lead { font-size: 14px; }
  .dp-hero__photo { min-height: 190px; }

  .dp-strip { grid-template-columns: repeat(3, 1fr); }
  .dp-strip__cell { padding: 12px 10px; }
  .dp-strip__cell:first-child { padding-left: var(--dp-pad); }
  .dp-strip__label { font-size: 10px; letter-spacing: .1em; }
  .dp-strip__text { font-size: 12px; }

  .dp-mv-intro { padding: 28px var(--dp-pad) 22px; flex-direction: column; gap: 24px; }
  .dp-mv-intro__col { max-width: none; }
  .dp-mv-intro__title { font-size: 22px; }
  .dp-mv-intro__text { font-size: 15px; text-align: left; }

  .dp-crest { border-left: 0; padding-left: 0; border-top: 2px solid var(--dp-navy); padding-top: 24px; }
  .dp-crest__text { text-align: left; }

  .dp-green { padding: 28px var(--dp-pad); grid-template-columns: 1fr; gap: 24px; }
  .dp-green__label { font-size: 24px; }
  .dp-green__text { font-size: 16px; }

  .dp-body { grid-template-columns: 1fr; }
  .dp-main { padding: 22px var(--dp-pad); border-right: 0; }
  .dp-h2 { font-size: 22px; }
  .dp-article { grid-template-columns: 110px 1fr; gap: 14px; padding: 16px 0; }
  .dp-article__photo,
  .dp-article:first-of-type .dp-article__photo { height: 80px; }
  .dp-article__title,
  .dp-article__title--sm { font-size: 16px; }
  .dp-article__lead { display: none; }
  .dp-tag { font-size: 10px; margin-bottom: 5px; }

  .dp-aside { border-top: 1px solid var(--dp-line); }
  .dp-leaders { margin: 18px; }
  .dp-card { padding: 18px; }

  .dp-ticker { padding: 9px 0; }
  .dp-ticker__track { animation-duration: 60s; }
  .dp-ticker__text { font-size: 11px; letter-spacing: .1em; }
  .dp-ticker__item { gap: 10px; padding-right: 20px; }
  .dp-ticker__sep { margin-left: 10px; }

  .dp-sponsors { padding: 20px var(--dp-pad); }
  .dp-sponsors__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dp-sponsors__row .dp-sponsor:last-child { grid-column: 1 / -1; }
  .dp-panel .dp-sponsor { padding: 10px; gap: 10px; }
  .dp-sponsor__logo { width: 32px; height: 32px; }
  .dp-sponsor__name { font-size: 12px; }
  .dp-sponsors__note { display: none; }

  .dp-footer { flex-direction: column; align-items: flex-start; padding: 24px var(--dp-pad); }
  .dp-footer__links { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .dp-strip { grid-template-columns: 1fr; }
  .dp-strip__cell { border-right: 0; border-bottom: 1px solid var(--dp-line); padding-left: var(--dp-pad); }
  .dp-strip__cell:last-child { border-bottom: 0; }

  .dp-crest { flex-direction: column; }
  .dp-crest__rail { flex-direction: row; }
  .dp-crest__stem { display: none; }
}