/* ==========================================================================
   TEMA 2 · propagandapolitica.mx — "Propaganda Política"
   Papel cálido · alto contraste · tipografía condensada · foto documental
   Ángulo: volumen y velocidad. Territorial, calle, lonas y volantes.
   ========================================================================== */

[data-tema="calido"] {
  /* Papel calentado: matiz desplazado al ámbar */
  --fondo:        #F7F3EA;
  --fondo-2:      #EFE8DA;
  --fondo-3:      #E2D8C4;
  --texto:        #14100B;
  --texto-suave:  #6B6154;
  --borde:        #14100b1f;
  --borde-fuerte: #14100b4d;
  --accion:       #14100B;
  --accion-texto: #F7F3EA;

  background: var(--fondo);
  color: var(--texto);
}

/* --- Condensada: el rasgo tipográfico del tema --- */
[data-tema="calido"] h1,
[data-tema="calido"] h2,
[data-tema="calido"] h3 { --ancho-titulo: 78; letter-spacing: -0.012em; }
[data-tema="calido"] .hero-titulo {
  --ancho-hero: 72;
  font-weight: 900;
  /* 1.0 y no 0.90: el resalte agrega caja vertical y con 0.90 pisaba la línea anterior */
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* --- Alto contraste: bloques de tinta sólida --- */
[data-tema="calido"] .hero {
  background: var(--texto);
  color: var(--fondo);
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
[data-tema="calido"] .hero .ojo,
[data-tema="calido"] .hero .entrada { color: #F7F3EAb3; }
/* El hero va en tinta sólida: el botón primario se invierte para no perderse */
[data-tema="calido"] .hero .btn:not(.btn--linea):not(.btn--wa):not(.btn--accion) {
  --btn-bg: var(--fondo);
  --btn-fg: var(--texto);
}
[data-tema="calido"] .hero .btn:not(.btn--linea):not(.btn--wa):not(.btn--accion):hover {
  box-shadow: 0 8px 22px -10px #000;
}
[data-tema="calido"] .hero .btn--linea {
  --btn-fg: var(--fondo);
  border-color: #F7F3EA59;
}
[data-tema="calido"] .hero .btn--linea:hover {
  border-color: var(--fondo);
  background: #F7F3EA1a;
}

/* Marcador de resalte — como tinta sobre papel */
[data-tema="calido"] .resalte {
  background: var(--p6);
  color: #14100B;
  padding: 0.02em 0.26em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Foto documental: contraste alto, grano, recorte cerrado */
[data-tema="calido"] .documental img {
  filter: contrast(1.14) saturate(1.06) brightness(0.98);
  border-radius: var(--radio);
}
[data-tema="calido"] .documental {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
}
[data-tema="calido"] .documental::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.16;
}

/* Cinta de urgencia — lenguaje de campaña en calle */
[data-tema="calido"] .cinta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--p4); color: #fff;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 2px;
}

[data-tema="calido"] .tarjeta { background: var(--blanco); }

/* El hero va en tinta, pero el formulario que vive dentro va en papel.
   Sin esto, los botones del formulario heredan el color claro del hero
   y quedan texto-papel sobre fondo-papel: contraste 1:1, invisibles. */
[data-tema="calido"] .hero .form-hero .btn--linea {
  --btn-fg: var(--texto);
  border-color: var(--borde-fuerte);
}
[data-tema="calido"] .hero .form-hero .btn--linea:hover {
  border-color: var(--accion);
  background: var(--tinta-06);
}
/* .btn--accion queda fuera: trae su propio amarillo y esta regla,
   pensada para los botones neutros del formulario, se lo pisaba. */
[data-tema="calido"] .hero .form-hero .btn:not(.btn--linea):not(.btn--wa):not(.btn--accion) {
  --btn-bg: var(--accion);
  --btn-fg: var(--accion-texto);
}