/* =========================================================================
   TELETÓN 20-30 · LANDING «EL CORAZÓN DE PANAMÁ» — Provincias Centrales
   -------------------------------------------------------------------------
   Línea gráfica híbrida tomada del deck de campaña (02.-T26---Provincias-
   Centrales.pptx): azul marino y rojo, paneles rosados redondeados, pasos
   numerados en rojo y serif en los cuatro titulares de campaña. Todo lo
   demás (cuerpo, botones, formularios, movimiento) sigue el sistema del
   sitio: teleton.css + teleton-motion.css + teleton-evento.css.

   Colores muestreados del deck: azul #0a3484 (modo entre #003D83 y #00338B
   en los titulares), rojo #ff2723, panel #fef8f9. El rojo de Donar sigue
   siendo el institucional (--t30-action-donate-bg).
   ========================================================================= */
.pc {
  --pc-navy: #0a3484;
  --pc-navy-deep: #061f52;
  --pc-red: #ff2723;
  --pc-rose: #fef8f9;
  --pc-rose-line: #f6d9dc;
  --pc-red-deep: #b5121a;      /* mismo tono del deck, más profundo: blanco encima pasa 6:1 */
  --pc-red-dark: #8e0c12;
  --font-campaign: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---------- Titulares de campaña (serif, dos líneas, segunda en rojo) ---- */
.pc-h {
  font-family: var(--font-campaign);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--pc-navy);
  text-wrap: balance;
}
.pc-h > span { display: block; }
.pc-h__b { color: var(--pc-red); }
.pc-h--xl { font-size: clamp(2.75rem, 7.2vw, 6.5rem); }
.pc-h--lg { font-size: clamp(2.25rem, 4.6vw, 4.25rem); }
.pc-dark .pc-h { color: #fff; }
.pc-dark .pc-h__b { color: var(--pc-red); }

/* ---------- Héroe sobre fotografía real (Teletón Chiriquí, marzo 2026) ---- */
.pc-hero {
  position: relative;
  color: #fff;
  background: var(--pc-navy-deep);
  overflow: clip;
  isolation: isolate;
}
.pc-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 40%;
  /* Fondo decorativo recortable: la misma foto va completa en la galería del programa. */
}
.pc-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgb(6 31 82 / .96) 0%, rgb(6 31 82 / .9) 42%, rgb(6 31 82 / .55) 72%, rgb(6 31 82 / .35) 100%),
    linear-gradient(180deg, rgb(6 31 82 / .2) 0%, rgb(6 31 82 / .7) 100%);
}
.pc-hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 6.5rem);
}
/* El ancho de lectura va en un hijo: ponerlo en `.shell` lo recentra. */
.pc-hero__content { display: grid; gap: var(--space-8); max-width: 48rem; }
.pc-hero .pc-h { color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / .25); }
.pc-hero .pc-h__b { color: var(--pc-red); }

/* Sub-marca: logotema del deck (corazón con mapa, fondo eliminado) sobre un
   resplandor blanco radial, como en la lámina 1. El resplandor es CSS, así
   que no tiene borde y se funde con la fotografía. */
.pc-submark {
  display: grid; justify-items: center;
  justify-self: start; width: max-content;   /* el resplandor abraza al logotema, no la columna */
  margin-inline-start: calc(-1 * var(--space-8));
  padding: var(--space-8) var(--space-10);
  background: radial-gradient(closest-side, rgb(255 255 255 / .96) 55%, rgb(255 255 255 / .6) 75%, rgb(255 255 255 / 0) 100%);
}
.pc-submark__lockup { display: block; width: clamp(180px, 18vw, 240px); height: auto; }
.pc-submark__wordmark { width: clamp(132px, 14vw, 172px); height: auto; display: block; }
.pc-submark__name {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1; letter-spacing: -0.02em;
  text-transform: uppercase;
}
.pc-submark__provinces {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: rgb(255 255 255 / .85); letter-spacing: .02em;
}
.pc-submark__provinces b { font-weight: var(--weight-bold); color: #fff; }

/* =========================================================================
   HÉROE ROJO CENTRADO — alfabeto táctil + objetos en profundidad
   ========================================================================= */
.pc-hero--red {
  background:
    radial-gradient(ellipse 60% 45% at 50% 48%, rgb(255 39 35 / .85) 0%, rgb(255 39 35 / 0) 70%),
    linear-gradient(180deg, var(--pc-red-deep) 0%, #c3141a 45%, var(--pc-red-dark) 100%);
}
.pc-hero--red::after { display: none; }
.pc-hero--red .pc-hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 6rem); }
.pc-hero__content--center { max-width: 64rem; margin-inline: auto; justify-items: center; text-align: center; }
.pc-hero__content--center .pc-submark { justify-self: center; margin-inline-start: 0; }
.pc-hero--red .pc-facts > li { border-inline-start-color: rgb(255 255 255 / .55); }
.pc-hero--red .pc-facts__icon { color: #fff; }
.pc-facts--center { justify-content: center; text-align: left; }
.pc-hero__status--center { justify-content: center; }
.pc-hero__actions--center { justify-content: center; }
/* Sobre rojo, el botón de donar es blanco: es la única lectura posible. */
.pc-hero--red .btn--donate { background: #fff; color: var(--pc-red-deep); }
.pc-hero--red .btn--donate:hover, .pc-hero--red .btn--donate:focus-visible { background: #ffe0e1; color: var(--pc-red-dark); }

/* Versión blanca de la misma escena: lienzo blanco del toolkit, texto en
   azul marino, logotema sin resplandor (ya está sobre blanco), Donar en su
   rojo institucional. El rojo profundo se guarda solo para padrinos. */
.pc-hero--white {
  color: var(--pc-navy);
  background:
    radial-gradient(ellipse 55% 42% at 50% 46%, rgb(255 39 35 / .07) 0%, rgb(255 39 35 / 0) 70%),
    #ffffff;
}
.pc-hero--white::after { display: none; }
.pc-hero--white .pc-hero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 6rem); }
.pc-hero--white .pc-submark { background: none; padding: 0; }
.pc-hero--white .pc-facts > li { border-inline-start-color: var(--pc-red); }
.pc-hero--white .pc-facts__icon { color: var(--pc-red); }
.pc-hero--white .pc-facts__label { color: var(--pc-red-deep); }
.pc-hero--white .pc-facts__value { color: var(--pc-navy); }
.pc-hero--white .countdown__value { color: var(--pc-navy); }
.pc-hero--white .countdown__label { color: var(--t30-text-secondary); }
.pc-hero--white .pc-word__punct { color: var(--pc-navy); }
.pc-hero--white .pc-letter img { filter: drop-shadow(0 12px 22px rgb(10 52 132 / .18)); }
.pc-hero--white .pc-obj img { filter: drop-shadow(0 18px 28px rgb(10 52 132 / .22)); }
.pc-hero--white .btn--ghost { color: var(--pc-navy); border-color: var(--pc-navy); }
.pc-hero--white .btn--ghost:hover { background: var(--pc-navy); color: #fff; }

/* Objetos de la región: planos a los lados, nunca sobre el titular.
   Posiciones en % del héroe; los tamaños bajan con el ancho y en teléfonos
   solo quedan tres, en las esquinas. */
.pc-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pc-obj { width: var(--w, 160px); }
.pc-obj--tambor   { --w: 170px; left: 2.5%; top: 18%; }
.pc-obj--mejorana { --w: 150px; right: 3%;  top: 10%; }
.pc-obj--cutarra  { --w: 150px; left: 8%;   bottom: 12%; }
.pc-obj--diablo   { --w: 170px; right: 2%;  bottom: 10%; }
.pc-obj--vaca     { --w: 120px; right: 20%; top: 5%; }
.pc-obj img { filter: drop-shadow(0 18px 28px rgb(0 0 0 / .35)); }
/* Chiriquí */
.pc-obj--colibri   { --w: 190px; left: 3%;   top: 14%; }
.pc-obj--flor-cafe { --w: 150px; right: 3%;  top: 10%; }
.pc-obj--fresa     { --w: 140px; left: 3%;   bottom: 10%; }
.pc-obj--ternero   { --w: 170px; right: 3%;  bottom: 10%; }
.pc-obj--flor      { --w: 110px; right: 21%; top: 5%; }
/* Panamá City */
.pc-obj--sombrero   { --w: 180px; left: 3%;  top: 12%; }
.pc-obj--rana       { --w: 150px; right: 3%; top: 10%; }
.pc-obj--viejo      { --w: 110px; left: 9%;  bottom: 8%; }
.pc-obj--diablorojo { --w: 170px; right: 3%; bottom: 10%; }
/* Logotemas regionales (más anchos que el corazón) sobre el mismo resplandor */
.pc-submark__lockup--wide { width: clamp(220px, 24vw, 340px); }

/* Titular en alfabeto táctil: cada letra conserva su proporción (ancho auto
   sobre una altura común --u). Las palabras no se parten; las líneas sí. */
.pc-word {
  --u: clamp(2.6rem, 9vw, 8.5rem);
  display: grid; justify-items: center; gap: calc(var(--u) * .18);
  margin: 0; width: 100%;
}
.pc-word__line { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: calc(var(--u) * .2) calc(var(--u) * .5); }
.pc-word__w { display: inline-flex; align-items: flex-end; gap: calc(var(--u) * .1); white-space: nowrap; }
.pc-letter { display: block; }
.pc-letter__in { display: block; }
.pc-letter img { display: block; height: var(--u); width: auto; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .3)); }
.pc-word__punct {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: calc(var(--u) * .62); line-height: 1; color: #fff;
  align-self: flex-end; margin-inline-start: calc(var(--u) * .02);
  transform: translateY(calc(var(--u) * .08));
}

/* Entrada: cada letra sube y endereza, escalonada 40ms; luego deriva. */
.js .pc-letter__in { opacity: 0; transform: translate3d(0, 38%, 0) rotate(-7deg); transition: opacity var(--motion-scene) var(--ease-enter), transform var(--motion-scene) var(--ease-enter); transition-delay: calc(var(--i) * var(--motion-stagger)); }
.js .pc-word.is-in .pc-letter__in { opacity: 1; transform: none; }
.js .pc-word.reveal { opacity: 1; transform: none; }   /* el h1 no se desvanece entero: lo hacen sus letras */
.js .pc-word.is-in .pc-letter img { animation: t30-drift var(--drift-dur, 11s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.js .pc-word__punct { opacity: 0; transition: opacity var(--motion-scene) var(--ease-enter); transition-delay: calc(var(--i) * var(--motion-stagger)); }
.js .pc-word.is-in .pc-word__punct { opacity: 1; }

/* Tira de datos (slide 1): tres bloques separados por reglas rojas */
/* Rejilla de tres columnas automáticas: los tres datos comparten siempre una
   fila, las columnas se reparten el ancho y el texto largo (sede, transmisión)
   parte en dos líneas en vez de saltar a una segunda fila. Alineados por abajo. */
.pc-facts {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, auto); align-items: end;
  gap: var(--space-4) 0;
  margin: 0;
}
.pc-facts > li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-width: 0;
  padding-inline: var(--space-6);
  border-inline-start: 2px solid var(--pc-red);
}
.pc-facts__icon { margin-top: .1em; }
.pc-facts > li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.pc-facts__icon { flex: none; color: var(--pc-red); }
.pc-facts__label { display: block; font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .78); }
.pc-facts__value { display: block; font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: 1.3; }

.pc-hero__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); }
.pc-hero__status .countdown__value { font-size: clamp(2.5rem, 5vw, 3.75rem); }
.pc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pc-hero__credit {
  position: absolute; z-index: 2; right: var(--page-gutter); bottom: var(--space-4);
  font-size: var(--text-xs); color: rgb(255 255 255 / .72);
  max-width: 24rem; text-align: right;
}

/* ---------- Fondo cielo (lámina 3) y figuras de campaña ------------------- */
.pc-sky { background: linear-gradient(180deg, #eef5fc 0%, #ffffff 70%); }
.pc-figure img { display: block; width: 100%; height: auto; border-radius: 1.5rem; }
.pc-steps { list-style: none; display: grid; gap: var(--space-5); }
.pc-steps .pc-step { grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; }
.pc-step__icon { color: var(--pc-red); flex: none; }

/* ---------- Paneles rosados y pasos numerados (slides 2–4) ---------------- */
.pc-panel {
  background: var(--pc-rose);
  border: 1px solid var(--pc-rose-line);
  border-radius: 1.5rem;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}
.pc-panel--white { background: #fff; }
.pc-panel--navy { background: var(--pc-navy); border-color: var(--pc-navy); color: #fff; }
/* Rojo profundo: el blanco encima pasa 6:1 (texto pequeño incluido). */
.pc-panel--red { background: var(--pc-red-deep); border-color: var(--pc-red-deep); color: #fff; }

.pc-num {
  display: inline-grid; place-items: center; flex: none;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--pc-red); color: #fff;
  font-weight: var(--weight-black); font-size: var(--text-xl); line-height: 1;
}
.pc-step { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pc-step__title {
  font-weight: var(--weight-black); font-size: var(--text-xl); line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase; color: var(--pc-red);
}
.pc-step__text { margin-top: var(--space-2); color: var(--pc-navy); font-size: var(--text-lg); line-height: 1.5; }
.pc-step__text b { color: var(--pc-red); font-weight: var(--weight-bold); }

/* Texto de apoyo en azul (el deck escribe el cuerpo en azul marino) */
.pc-lede { color: var(--pc-navy); }

/* ---------- Programa: dos bloques con fotografía real -------------------- */
.pc-programme { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.pc-programme__card {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--pc-rose); border: 1px solid var(--pc-rose-line);
  border-radius: 1.5rem; overflow: clip;
  transition: border-color var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard);
}
.pc-programme__card:hover { border-color: var(--pc-navy); box-shadow: var(--shadow-raised); }
.pc-programme__photo { display: block; width: 100%; height: auto; }
.pc-programme__body { padding: clamp(var(--space-6), 3vw, var(--space-8)); display: grid; gap: var(--space-4); }
.pc-programme__title {
  font-family: var(--font-campaign); font-weight: 900; color: var(--pc-red);
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: .96; letter-spacing: -0.02em;
}
.pc-programme__objects { display: flex; align-items: flex-end; gap: var(--space-4); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--pc-rose-line); }
.pc-programme__objects img { height: 56px; width: auto; display: block; }
.pc-programme__meta { margin-inline-start: auto; font-size: var(--text-sm); color: var(--pc-navy); text-align: right; }
.pc-programme__meta b { display: block; font-weight: var(--weight-bold); }

/* Ficha del evento junto al titular (slide 2) */
.pc-eventcard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-8); }
.pc-eventcard > div { display: flex; align-items: center; gap: var(--space-4); }
.pc-eventcard__icon { flex: none; color: var(--pc-red); }
.pc-eventcard dt { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--pc-red-deep); }
.pc-eventcard dd { margin: 2px 0 0; font-weight: var(--weight-semibold); color: var(--pc-navy); font-size: var(--text-lg); line-height: 1.25; }
/* Variante debajo del titular: ficha a todo el ancho, dos datos lado a lado */
.pc-eventcard--wide { margin-top: var(--space-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-5) var(--space-10); align-items: start; }
.pc-eventcard--wide > div { align-items: flex-start; }
.pc-eventcard--wide .pc-eventcard__icon { margin-top: 2px; }

/* ---------- Salud: cifras y listas (propuesta de patrocinio) ------------- */
/* Tres filas compartidas (cifra, nota, etiqueta) vía subgrid: cada fila se
   alinea entre las tres columnas y las etiquetas terminan en la misma línea. */
.pc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: var(--space-5); margin: 0; }
.pc-stats > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--space-2); padding-top: var(--space-4); border-top: 2px solid var(--pc-red); }
.pc-stats dt { grid-row: 3; align-self: end; font-size: var(--text-sm); color: var(--t30-text-secondary); }
.pc-stats dd { grid-row: 1 / 3; margin: 0; display: grid; grid-template-rows: subgrid; row-gap: 2px; }
.pc-stats__num { grid-row: 1; align-self: end; }
.pc-stats__note { grid-row: 2; align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .pc-stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-start; }
  .pc-stats dd { display: grid; }
}
.pc-stats__num { font-family: var(--font-display); font-weight: var(--weight-black); font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--pc-navy); }
.pc-stats__note { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--pc-red-deep); }
.pc-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-3); color: var(--pc-navy); }
.pc-list li::marker { color: var(--pc-red); }

/* ---------- Tú puedes hacer la diferencia (slide 4) ---------------------- */
.pc-cost { display: grid; gap: var(--space-5); }
.pc-cost__label { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / .9); }
.pc-cost__value {
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(2rem, 9vw, 4.75rem); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  /* La moneda puede bajar de línea en teléfonos; el numeral nunca se parte. */
  overflow-wrap: normal;
}
.pc-cost__cur { font-size: .55em; letter-spacing: 0; margin-inline-end: .1em; vertical-align: .1em; }
.pc-panel .pc-panel { padding: clamp(var(--space-5), 3vw, var(--space-8)); }
.pc-spec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.pc-spec__icon { color: var(--pc-red); }
.pc-spec__label { color: var(--pc-navy); font-size: var(--text-lg); }
.pc-spec__value { font-family: var(--font-display); font-weight: var(--weight-black); color: var(--pc-red); font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.pc-spec__note { color: var(--pc-navy); font-size: var(--text-md); margin-top: var(--space-1); }

/* ---------- Formas de donar (piezas oficiales) --------------------------- */
.pc-methods { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
/* Tarjeta de método: el último bloque (montos, campo para copiar) se ancla al
   borde inferior, así los tres campos de la fila quedan alineados aunque los
   párrafos midan distinto. */
.pc-method { display: flex; flex-direction: column; gap: var(--space-4); }
.pc-method > :last-child:not(p) { margin-top: auto; }
.pc-method--wide { grid-column: 1 / -1; }
.pc-method__title { font-weight: var(--weight-black); font-size: var(--text-lg); letter-spacing: .06em; text-transform: uppercase; color: var(--pc-navy); }
.pc-amounts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pc-amounts a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--space-4);
  border: 2px solid var(--pc-red); border-radius: var(--radius-pill);
  color: var(--pc-red-deep); font-weight: var(--weight-black); text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.pc-amounts a:hover, .pc-amounts a:focus-visible { background: var(--pc-red); color: #fff; }
.pc-banks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.pc-banks .copy-row { background: #fff; }
.pc .copy-row__value { color: var(--pc-navy); }

/* ---------- Bloque de salud (menor jerarquía) + vídeo del proyecto ------- */
.pc-video { position: relative; border-radius: 1.5rem; overflow: clip; background: #000; border: 1px solid var(--t30-border-default); }
.pc-video video { display: block; width: 100%; height: auto; }
.pc-fronts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
/* Cada par ciudad + necesidad reparte dos filas compartidas y se alinea
   arriba: ciudades y necesidades de una misma fila empiezan en la misma línea. */
@supports (grid-template-rows: subgrid) {
  .pc-fronts > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-items: start; row-gap: var(--space-1); }
}
.pc-fronts > div { padding-top: var(--space-3); border-top: 1px solid var(--t30-border-default); }
.pc-fronts dt, .pc-fronts .small { color: var(--t30-text-secondary); }

/* ---------- Superficie roja (padrinos): rojo profundo del deck para que el
   texto blanco pase 4.5:1; el rojo vivo queda para acentos. ---------------- */
.pc-dark { background: var(--pc-red-deep); color: #fff; }
.pc-dark .section-kicker { color: #fff; }
.pc-dark .lede, .pc-dark .muted { color: rgb(255 255 255 / .84); }
.pc-dark .summary { background: transparent; border-color: rgb(255 255 255 / .4); color: #fff; }
.pc-dark .summary__row { border-color: rgb(255 255 255 / .2); }
.pc-dark .summary__row dt { color: rgb(255 255 255 / .72); }
.pc-dark .btn--inverse { background: #fff; color: var(--pc-red-deep); }
.pc-dark .btn--inverse:hover { background: #ffe0e1; color: var(--pc-red-deep); }
.pc-dark .input { background: #fff; color: #000; }
.pc-dark .field__label { color: #fff; }
.pc-dark .link { color: #fff; text-decoration-color: rgb(255 255 255 / .5); }

/* ---------- Decoración: objetos de la región fuera del texto ------------- */
.pc-objects { position: relative; }
.pc-objects .deco { z-index: 1; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 64rem) {
  .pc-obj--tambor   { --w: 110px; left: 2%;  top: 10%; }
  .pc-obj--mejorana { --w: 96px;  right: 2%; top: 8%; }
  .pc-obj--cutarra  { --w: 96px;  left: 3%;  bottom: 10%; }
  .pc-obj--diablo   { --w: 110px; right: 3%; bottom: 12%; }
  .pc-obj--vaca, .pc-obj--flor     { display: none; }
  .pc-obj--colibri, .pc-obj--sombrero { --w: 110px; left: 2%;  top: 8%; }
  .pc-obj--flor-cafe, .pc-obj--rana   { --w: 96px;  right: 2%; top: 8%; }
  .pc-obj--fresa, .pc-obj--viejo      { --w: 90px;  left: 3%;  bottom: 10%; }
  .pc-obj--ternero, .pc-obj--diablorojo { --w: 110px; right: 3%; bottom: 12%; }
  .pc-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-banks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  /* Datos del héroe apilados desde tableta vertical: en tres columnas se
     partían en cuatro líneas. */
  .pc-facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .pc-facts--center { justify-content: stretch; }
  .pc-facts > li { padding-inline: var(--space-4) 0; border-inline-start: 2px solid var(--pc-red); }
  .pc-facts > li:first-child { padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--pc-red); }
  .pc-programme { grid-template-columns: minmax(0, 1fr); }
  .pc-eventcard { grid-template-columns: minmax(0, 1fr); }
  .pc-methods { grid-template-columns: minmax(0, 1fr); }
  .pc-banks { grid-template-columns: minmax(0, 1fr); }
  .pc-fronts { grid-template-columns: minmax(0, 1fr); }
  .pc-stats { grid-template-columns: minmax(0, 1fr); }
  .pc-stats > div { grid-template-rows: auto auto auto; }
  .pc-stats dd { grid-template-rows: auto auto; }
  .pc-obj--tambor   { --w: 84px; left: 2%;  top: 5%; }
  .pc-obj--mejorana { --w: 72px; right: 2%; top: 4%; }
  .pc-obj--cutarra, .pc-obj--fresa, .pc-obj--viejo { display: none; }
  .pc-obj--diablo, .pc-obj--ternero, .pc-obj--diablorojo { --w: 84px; right: 2%; bottom: 4%; }
  .pc-obj--colibri, .pc-obj--sombrero { --w: 84px; left: 2%; top: 5%; }
  .pc-obj--flor-cafe, .pc-obj--rana   { --w: 72px; right: 2%; top: 4%; }
  .pc-hero__photo { object-position: 70% 30%; }
  .pc-hero__credit { position: static; text-align: left; margin-top: var(--space-6); max-width: none; }
}
@media (max-width: 37.5rem) {
  .pc-word { --u: clamp(2.4rem, 11vw, 3.2rem); }
  .pc-obj--tambor, .pc-obj--colibri, .pc-obj--sombrero { --w: 64px; top: 2%; left: 1%; }
  .pc-obj--mejorana, .pc-obj--flor-cafe, .pc-obj--rana { --w: 56px; top: 2%; right: 1%; }
  .pc-obj--diablo, .pc-obj--ternero, .pc-obj--diablorojo { --w: 64px; bottom: 2%; right: 1%; }
  .pc-hero__actions .btn { width: 100%; }
  .pc-step, .pc-steps .pc-step { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-4); }
  .pc-step__icon { display: none; }
  .pc-submark { margin-inline-start: 0; padding: var(--space-6) var(--space-8); }
  .pc-num { width: 2.75rem; height: 2.75rem; font-size: var(--text-lg); }
  .pc-programme__objects img { height: 44px; }
  .pc-programme__meta { text-align: left; margin-inline-start: 0; flex-basis: 100%; }
  .pc-programme__objects { flex-wrap: wrap; }
  .pc-panel { padding: var(--space-5); border-radius: 1.25rem; }
  .pc-spec { grid-template-columns: minmax(0, 1fr); }
  .pc-spec__icon { width: 44px; height: 44px; }
  .pc-spec__value { font-size: clamp(2rem, 11vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-programme__card:hover { box-shadow: none; }
  .js .pc-letter__in, .js .pc-word__punct { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .pc-word.is-in .pc-letter img { animation: none !important; }
}
.motion-paused .pc-word.is-in .pc-letter img { animation-play-state: paused; }
@media (forced-colors: active) {
  .pc-amounts a, .pc-panel, .pc-programme__card { border: 1px solid CanvasText; }
}

/* ---------- Landing de campaña (dona / yappy) ---------- */
.header--campaign .header__inner { justify-content: space-between; }
.footer__top--campaign { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 40rem) { .footer__top--campaign { grid-template-columns: minmax(0, 1fr); } }
.pc-yappy { display: grid; gap: var(--space-6); justify-items: start; max-width: 40rem; }
.pc-yappy__logo .yappy-logo { height: 3.25rem; }
.pc-yappy__steps { margin: 0; padding-inline-start: 1.4em; display: grid; gap: var(--space-3); color: var(--pc-navy); font-size: var(--text-md); }
.pc-yappy__steps li::marker { color: var(--pc-red-deep); font-weight: var(--weight-black); }