/* ===========================================================
   «Lo tuyo se vota el 29N» — clients.urbsdc.com/psoe3
   Maqueta del PDF web_octubre.pdf (lienzo de 1440 px).
   Marca, tipografías y color tomados del tema themeps2026
   de pedrosanchez.kinsta.cloud.
   Todas las medidas son proporciones de ese lienzo: la página
   escala entera hasta 1440 px y ahí se queda.
   =========================================================== */

/* --- tipografías, servidas desde la propia carpeta -------- */
@font-face{
  font-family:"Barlow";
  src:url("../fuentes/barlow-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fuentes/barlow-400-ext.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Barlow";
  src:url("../fuentes/barlow-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url("../fuentes/barlow-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Geomanist Ultra";
  src:url("../fuentes/geomanist-ultra.woff2") format("woff2"),
      url("../fuentes/geomanist-ultra.woff") format("woff");
  font-weight:400 900;font-style:normal;font-display:swap;
}

:root{
  --rojo:#E00A16;
  --rojo-oscuro:#BD181B;        /* el segundo rojo del diseño */
  --granate:#BD191C;            /* la extrusión del titular de portada */
  --negro:#000000;
  --blanco:#FFFFFF;
  --gris:#9D9D9C;

  --lienzo:min(100vw,1440px);               /* el ancho del PDF */
  --ancho:calc(var(--lienzo) * .8639);      /* 1244 px de caja de contenido */

  --titulos:"Geomanist Ultra","Futura PT","Century Gothic",sans-serif;
  --textos:"Interstate","Barlow","Helvetica Neue",Arial,sans-serif;
  --curva:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--blanco);
  color:var(--negro);
  font-family:var(--textos);
  line-height:1.3;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
p,h2,h3,ul{margin:0;}
ul{list-style:none;padding:0;}
a{color:inherit;}

/* La caja del diseño: 1244 px, centrados en el lienzo */
.contenedor{width:var(--ancho);margin-inline:auto;}
.rojo{color:var(--rojo);}
.rojo-oscuro{color:var(--rojo-oscuro);}

.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--rojo);color:#fff;padding:12px 20px;font-weight:700;text-decoration:none;
}
.saltar:focus{left:0;}

:where(a,button):focus-visible{outline:3px solid var(--negro);outline-offset:3px;}

/* Todo lo gordo va en Geomanist: titulares, párrafos destacados y las fichas.
   Solo las notas al pie, el cuerpo de las tarjetas y el detalle de edad van en Barlow. */
.hero__l1,.hero__l2,.bandera__ante,.bandera__palabra,
.titular,.entradilla p,.bajada,.reclamo,.cierre,.pizarra,
.tarjeta__titulo,.fila__quien-titulo,.fila__que,.fila__cifra,
.boton{
  font-family:var(--titulos);
  font-weight:800;
  letter-spacing:0;
}
.hero__l1,.hero__l2,.bandera__ante,.bandera__palabra,
.titular,.tarjeta__titulo,.fila__quien-titulo,.fila__que,.fila__cifra,
.pizarra,.boton{
  text-transform:uppercase;
}

/* ══ CABECERA ══════════════════════════════════════════════ */
.cabecera__inner{
  width:var(--ancho);margin-inline:auto;        /* la cabecera, en la misma caja */
  display:flex;align-items:flex-start;
  padding:calc(var(--lienzo) * .0194) 0 calc(var(--lienzo) * .0097);   /* 28 arriba, 14 de aire sobre la franja */
}
.marca img{width:calc(var(--lienzo) * .1424);height:auto;}   /* 205 px */

.cabecera__acciones{
  margin-left:auto;
  display:flex;flex-direction:column;align-items:flex-end;
  gap:calc(var(--lienzo) * .0115);
}

/* Menú: grotesca normal, muy espaciada, con rayitas separadoras.
   Igual que en el tema de Kinsta. */
.nav ul{display:flex;align-items:center;}
.nav a{
  display:block;
  font-family:var(--textos);font-weight:500;text-transform:uppercase;
  color:var(--rojo);text-decoration:none;
  font-size:calc(var(--lienzo) * .0132);        /* 19 px */
  letter-spacing:.042em;
  line-height:1.62;                             /* la rayita, de 28 px */
  padding:0 calc(var(--lienzo) * .0125);
  border-right:1px solid var(--rojo);
  transition:color .2s;
}
.nav li:last-child a{border-right:0;padding-right:0;}
.nav a:hover{color:var(--negro);}

/* Segunda fila: botón de donar y redes */
.cabecera__fila{display:flex;align-items:center;gap:calc(var(--lienzo) * .0167);}

.boton{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;line-height:1;
  transition:background-color .25s,color .25s;
}
.boton--donar{
  width:calc(var(--lienzo) * .15);              /* 216 px */
  height:calc(var(--lienzo) * .0299);           /* 43 px */
  padding-top:calc(var(--lienzo) * .0021);
  background:var(--negro);color:var(--blanco);
  font-size:calc(var(--lienzo) * .0167);        /* 24 px */
}
.boton--donar:hover{background:var(--rojo);}

.redes{display:flex;gap:calc(var(--lienzo) * .0118);}
.redes a{
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--lienzo) * .0271);height:calc(var(--lienzo) * .0271);   /* 39 px */
  background:var(--rojo);color:var(--blanco);border-radius:50%;
  transition:transform .3s var(--curva);
}
.redes svg{width:60%;height:60%;}
.redes a:hover{transform:scale(1.1);}

/* ══ PORTADA ═══════════════════════════════════════════════
   Bloque rojo a sangre. El titular va en blanco con una
   extrusión granate (ver «sombra de la portada» más abajo) que
   el propio bloque recorta: el canto diagonal que se ve es la
   envolvente de esas copias, no un paño aparte. */
.hero{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--rojo);
  overflow:hidden;
  padding:calc(var(--lienzo) * .0486) 0 calc(var(--lienzo) * .0375);
}

.hero__l1,.hero__l2{color:var(--blanco);line-height:1;}
.hero__l1{font-size:calc(var(--lienzo) * .0586);}   /* 84,4 px: mismo ancho que la línea de abajo */
.hero__l2{
  font-size:calc(var(--lienzo) * .1701);            /* 245 px */
  margin-top:calc(var(--lienzo) * -.0035);
}

.banderas{
  display:grid;grid-template-columns:1fr 1fr;
  gap:calc(var(--lienzo) * .0208);                  /* 30 px */
  margin-top:calc(var(--lienzo) * .0222);
}
.bandera{text-align:center;}
.bandera__ante{
  line-height:1;
  font-size:calc(var(--lienzo) * .0326);            /* 47 px */
  margin-bottom:calc(var(--lienzo) * .0028);
}
.bandera__palabra{
  color:var(--blanco);line-height:1;
  font-size:calc(var(--lienzo) * .0569);            /* 82 px */
}
/* la barra negra mide lo mismo que la palabra, por eso va dentro */
.bandera__palabra span{display:inline-block;}
.bandera__palabra span::after{
  content:"";display:block;
  height:calc(var(--lienzo) * .0208);               /* 30 px */
  margin-top:calc(var(--lienzo) * .0125);
  background:var(--negro);
}

/* ══ ENTRADILLA ════════════════════════════════════════════ */
.entradilla{margin-top:calc(var(--lienzo) * .0236);}
.entradilla p{
  line-height:1.05;
  font-size:calc(var(--lienzo) * .0319);        /* 46 px */
}

/* ══ RAYAS Y BLOQUES ═══════════════════════════════════════ */
.raya{
  width:var(--ancho);margin:calc(var(--lienzo) * .0427) auto calc(var(--lienzo) * .0611);
  border:0;border-top:1px solid var(--negro);
}
.raya--der{margin-top:calc(var(--lienzo) * .0438);margin-bottom:calc(var(--lienzo) * .0472);}

.titular{
  color:var(--negro);line-height:1.05;
  font-size:calc(var(--lienzo) * .0458);        /* 66 px */
}
.titular--rojo{color:var(--rojo);}

.bajada{
  line-height:1.08;
  font-size:calc(var(--lienzo) * .0319);        /* 46 px */
  margin-top:calc(var(--lienzo) * .0104);
}

/* ══ TARJETAS DE VIVIENDA ══════════════════════════════════ */
.tarjetas{
  display:grid;
  grid-template-columns:repeat(3,calc(var(--ancho) * .3127));   /* 389 px */
  gap:calc(var(--ancho) * .0249);                               /* 31 px */
  margin-top:calc(var(--lienzo) * .0174);
}
.tarjeta{
  color:var(--blanco);
  padding:calc(var(--lienzo) * .0194) calc(var(--lienzo) * .0153);   /* 28 px arriba y abajo, 22 a los lados */
}
.tarjeta--roja{background:var(--rojo);}
.tarjeta--negra{background:var(--negro);}
.tarjeta--roja-oscuro{background:var(--rojo-oscuro);}   /* el tercer bloque, en el rojo oscuro */
.tarjeta__titulo{
  line-height:1.13;
  font-size:calc(var(--lienzo) * .0234);        /* 33,7 px */
}
.tarjeta__texto{
  font-weight:500;line-height:1.29;
  font-size:calc(var(--lienzo) * .0161);        /* 23 px */
  margin-top:calc(var(--lienzo) * .0021);       /* el interlineado ya deja el aire */
}

/* ══ NOTA AL PIE DE BLOQUE ═════════════════════════════════ */
.nota{
  font-weight:500;line-height:1.1;
  font-size:calc(var(--lienzo) * .0184);        /* 26,5 px */
  margin-top:calc(var(--lienzo) * .0194);
}

/* ══ FILAS DE DERECHOS ═════════════════════════════════════ */
.reclamo{
  color:var(--rojo);line-height:1.05;
  font-size:calc(var(--lienzo) * .0319);        /* 46 px */
  margin-top:calc(var(--lienzo) * .0056);
}

.filas{
  display:flex;flex-direction:column;
  gap:calc(var(--lienzo) * .0104);              /* 15 px */
  margin-top:calc(var(--lienzo) * .0208);
}
.fila{
  position:relative;
  color:var(--blanco);
}
.fila > *{
  position:absolute;top:0;bottom:0;
  display:flex;flex-direction:column;
  line-height:1.13;
  font-size:calc(var(--lienzo) * .0233);        /* 33,5 px */
}

/* La caja negra y la cuña roja arrancan a la misma altura en todas
   las filas (30 px desde arriba), no centradas: así no bailan. */
.fila__quien,.fila__que{
  justify-content:flex-start;
  padding-top:calc(var(--lienzo) * .0208);      /* 30 px */
}

.fila__quien{
  left:0;width:26.93%;                          /* 335 px */
  background:var(--negro);
  padding-left:calc(var(--lienzo) * .0153);     /* 22 px */
}
.fila__quien-detalle{
  font-family:var(--textos);font-weight:400;text-transform:none;
  font-size:calc(var(--lienzo) * .0125);        /* 18 px */
  line-height:1.1;
  margin-top:calc(var(--lienzo) * -.0063);      /* sube al aire que deja el título */
}

/* La cuña roja: la diagonal le abre el lado derecho hacia abajo */
.fila__que{
  left:28.14%;width:30.55%;                     /* de 429 a 809 px */
  background:var(--rojo);
  clip-path:polygon(0 0,65.53% 0,100% 100%,0 100%);   /* la diagonal cae 131 px */
  padding-left:calc(var(--lienzo) * .0153);
  z-index:2;
}

/* La banda gris encaja en esa misma diagonal, con 30 px de aire */
/* La banda gris es la única que va en flujo: es ella la que marca el
   alto de la fila, y las otras dos se estiran a lo que mida. Con tres
   líneas da los 128 px de siempre; con más, la fila crece. */
.fila__cifra{
  position:relative;left:auto;
  margin-left:50.56%;width:49.28%;              /* de 708 a 1321 px */
  min-height:calc(var(--lienzo) * .0889);       /* 128 px: tres líneas */
  background:var(--gris);
  clip-path:polygon(0 0,100% 0,100% 100%,21.37% 100%);
  padding:calc(var(--lienzo) * .005) calc(var(--lienzo) * .0208)
          calc(var(--lienzo) * .005) calc(var(--lienzo) * .0993);  /* el texto, a 851 px */
  justify-content:center;                       /* la cifra sí va centrada */
  z-index:1;
}

.cierre{
  line-height:1.05;
  font-size:calc(var(--lienzo) * .0319);        /* 46 px */
  margin-top:calc(var(--lienzo) * .0236);
}

/* ══ PIZARRAS ═════════════════════════════════════════════
   Los dos bloques macizos: mismo cuerpo que las fichas. */
.pizarra{
  color:var(--blanco);
  line-height:1.13;
  font-size:calc(var(--lienzo) * .0234);        /* 33,7 px */
  padding:calc(var(--lienzo) * .016) calc(var(--lienzo) * .0153);   /* la tinta cae a 30 px del borde */
  margin-top:calc(var(--lienzo) * .0104);
}
.pizarra--negra{background:var(--negro);}
.pizarra--roja{background:var(--rojo);margin-top:calc(var(--lienzo) * .0139);}

/* ══ PROPUESTAS ESTRELLA ══════════════════════════════════ */
.tarjeta--gris{background:var(--gris);}
.tarjeta--propuesta{padding-bottom:calc(var(--lienzo) * .0347);}   /* el aire del diseño */
.tarjeta--propuesta .tarjeta__titulo{
  min-height:calc(var(--lienzo) * .0792);       /* tres líneas: los cuerpos arrancan a la vez */
}
.tarjeta--propuesta .tarjeta__texto{margin-top:calc(var(--lienzo) * .016);}

/* las rayas de esta mitad, con el aire que marca el PDF */
.raya--cierre{margin-top:calc(var(--lienzo) * .0597);margin-bottom:calc(var(--lienzo) * .0590);}
.raya--propuestas{margin-top:calc(var(--lienzo) * .0396);margin-bottom:calc(var(--lienzo) * .0521);}
.raya--final{margin-top:calc(var(--lienzo) * .0319);margin-bottom:calc(var(--lienzo) * .0299);}
.cierre--final{margin-top:0;}

/* ══ PIE ══════════════════════════════════════════════════
   Banda roja a sangre; dentro, la misma caja que el resto. */
.pie{
  background:var(--rojo);color:var(--blanco);
  margin-top:calc(var(--lienzo) * .0299);
  padding:calc(var(--lienzo) * .0146) 0 calc(var(--lienzo) * .0292);
}
.pie__inner{display:flex;align-items:flex-end;}
.pie__marca img{
  width:calc(var(--lienzo) * .1528);            /* 220 px */
  height:auto;
  filter:brightness(0) invert(1);               /* el logo, en blanco */
}
.pie__razon{flex:1;text-align:center;}
.pie__enlaces{text-align:right;}
.pie__razon,.pie__enlaces{
  font-weight:500;line-height:1.4;
  font-size:calc(var(--lienzo) * .0139);        /* 20 px */
}
.pie__enlaces p + p{margin-top:calc(var(--lienzo) * .0139);}

/* ══ VÍDEO ════════════════════════════════════════════════
   De banda a banda. No descarga nada hasta que se pulsa play. */
.video{
  width:100vw;margin-left:calc(50% - 50vw);
  background:var(--negro);
  margin-top:calc(var(--lienzo) * .0417);
}
.video__marco{position:relative;aspect-ratio:16/9;}
.video__pieza{width:100%;height:100%;object-fit:cover;display:block;}
.video__play{
  position:absolute;inset:0;margin:auto;
  width:calc(var(--lienzo) * .0764);height:calc(var(--lienzo) * .0764);   /* 110 px */
  padding:0;border:0;border-radius:50%;
  background:var(--rojo);cursor:pointer;
  transition:transform .3s var(--curva),background-color .25s;
}
.video__play::after{
  content:"";position:absolute;top:50%;left:56%;transform:translate(-50%,-50%);
  border-left:calc(var(--lienzo) * .0236) solid var(--blanco);
  border-top:calc(var(--lienzo) * .0146) solid transparent;
  border-bottom:calc(var(--lienzo) * .0146) solid transparent;
}
.video__play:hover{transform:scale(1.08);background:var(--rojo-oscuro);}
.video--andando .video__play{display:none;}
.video .compartir{width:var(--ancho);margin-inline:auto;padding-bottom:calc(var(--lienzo) * .0208);}

/* ══ COMPARTIR ════════════════════════════════════════════ */
.compartir{margin:calc(var(--lienzo) * .0174) 0 calc(var(--lienzo) * .0278);}
.compartir a{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--rojo);color:var(--blanco);text-decoration:none;
  font-family:var(--textos);font-weight:700;text-transform:uppercase;
  font-size:calc(var(--lienzo) * .0118);                /* 17 px */
  letter-spacing:.04em;line-height:1;
  padding:.8em 1.3em;border-radius:999px;
  transition:background-color .25s,transform .25s var(--curva);
}
.compartir svg{width:1.3em;height:1.3em;flex:0 0 auto;}
.compartir a:hover{background:var(--negro);transform:translateY(-2px);}

/* ══ FORMULARIO DE ALTA ═══════════════════════════════════
   El widget de Action Network trae su propia hoja; aquí solo
   se le da el aire y se le impide desbordar la caja. */
.formulario{margin-top:calc(var(--lienzo) * .0208);}
.formulario img{display:inline;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n{width:100%;}

/* El widget trae su propia hoja (Helvetica, naranja, caja estrecha)
   y la escribe entera con !important: por eso aquí hay que repetir
   el !important, y con un id más de peso en el selector. */
#can-survey-area-sabes-lo-que-te-juegas-el-29n h2{display:none!important;}   /* repetía el título de la sección */
#can-survey-area-sabes-lo-que-te-juegas-el-29n .can_embed{font-family:var(--textos)!important;max-width:none!important;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form{
  width:100%!important;max-width:none!important;float:none!important;
  background:var(--blanco)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  padding:0!important;
}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form_inner{max-width:none!important;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form h4{
  font-family:var(--titulos)!important;font-weight:800!important;text-transform:uppercase!important;
  color:var(--negro)!important;line-height:1.1!important;margin:0 0 .7em!important;
  font-size:calc(var(--lienzo) * .0215)!important;
}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form h4::after{display:none!important;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form label,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form p,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form li{
  font-family:var(--textos)!important;color:var(--negro)!important;
  font-size:calc(var(--lienzo) * .0111)!important;line-height:1.45!important;
}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=text],
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=email],
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=tel],
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=number],
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form select,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form textarea{
  font-family:var(--textos)!important;font-weight:500!important;
  font-size:calc(var(--lienzo) * .0125)!important;line-height:1.3!important;
  height:auto!important;padding:.85em 1em!important;
  border:1px solid var(--negro)!important;border-radius:0!important;
  background:var(--blanco)!important;color:var(--negro)!important;
}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input:focus,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form select:focus{
  outline:0!important;border-color:var(--rojo)!important;
  box-shadow:0 0 0 3px rgba(224,10,22,.18)!important;
}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=submit],
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form .can_button{
  background:var(--rojo)!important;color:var(--blanco)!important;
  font-family:var(--titulos)!important;font-weight:800!important;text-transform:uppercase!important;
  font-size:calc(var(--lienzo) * .0167)!important;letter-spacing:.02em!important;
  border:0!important;border-radius:0!important;padding:.85em 1.2em!important;
  cursor:pointer!important;transition:background-color .25s!important;
}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=submit]:hover{background:var(--negro)!important;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form input[type=checkbox]{accent-color:var(--rojo)!important;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form a{color:var(--rojo)!important;}
/* Sin caja exterior ni marcas de Action Network (logo y «Patrocinado por») */
#can-survey-area-sabes-lo-que-te-juegas-el-29n .can_embed,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form_inner{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;}
#can-survey-area-sabes-lo-que-te-juegas-el-29n #logo_wrap,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #action_info{display:none!important;}

/* ══ APARICIÓN ════════════════════════════════════════════
   La clase «anima» la pone el propio JS: sin él la página se ve
   entera, sin nada escondido. Solo se mueven opacidad y posición,
   así que no hay saltos de maquetación. */
.anima .aparece{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--curva),transform .55s var(--curva);
}
.anima .aparece.dentro{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .anima .aparece{opacity:1;transform:none;transition:none;}
}

/* ══ MÓVIL ═════════════════════════════════════════════════
   Se deshacen las diagonales: cada fila pasa a ser una ficha
   de tres bandas apiladas. */
@media (max-width:768px){
  :root{--ancho:calc(100vw - 40px);}

  .cabecera__inner{padding:16px 0 12px;flex-wrap:wrap;gap:14px;}
  .marca img{width:150px;}
  .cabecera__acciones{width:100%;align-items:flex-start;gap:12px;}
  .nav ul{flex-wrap:wrap;row-gap:4px;}
  .nav a{font-size:11px;padding:0 6px;letter-spacing:.03em;}   /* los cuatro, en una línea */
  .nav li:first-child a{padding-left:0;}
  .cabecera__fila{gap:12px;}
  .boton--donar{width:130px;height:36px;font-size:15px;}
  .redes a{width:34px;height:34px;}

  .hero{padding:34px 0 30px;}
  .hero__l1{font-size:31px;}
  .hero__l2{font-size:90px;}
  .banderas{grid-template-columns:1fr;gap:26px;margin-top:18px;}
  .bandera__ante{font-size:24px;margin-bottom:4px;}
  .bandera__palabra{font-size:42px;}
  .bandera__palabra span::after{height:14px;margin-top:9px;}

  .entradilla{margin-top:26px;}
  .entradilla p{font-size:23px;line-height:1.12;}

  .raya{margin:28px auto;}
  .titular{font-size:31px;}
  .bajada{font-size:22px;line-height:1.15;}

  .tarjetas{grid-template-columns:1fr;gap:16px;margin-top:20px;}
  .tarjeta{padding:18px 18px 20px;}
  .tarjeta__titulo{font-size:22px;}
  .tarjeta__texto{font-size:17px;margin-top:10px;}

  .nota{font-size:16px;line-height:1.3;margin-top:16px;}
  .reclamo{font-size:22px;}

  /* En móvil cada banda es un banderín con el pico abajo, como los
     de la portada: el pico mide siempre 30 px, lo marque quien lo
     marque, y por eso el relleno de abajo lo deja libre. */
  .filas{gap:34px;margin-top:20px;}   /* más aire entre filas que entre bandas, para que se lean de tres en tres */
  .fila{height:auto;display:flex;flex-direction:column;gap:14px;}
  .fila > *{
    position:static;width:auto;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),50% 100%,0 calc(100% - 30px));
    padding:18px 16px 46px;
    text-align:center;
    justify-content:center;
    font-size:21px;
  }
  .fila__quien,.fila__que{padding-top:18px;}
  .fila__cifra{margin-left:0;min-height:0;}   /* en móvil manda el apilado */
  .fila__quien-detalle{font-size:15px;margin-top:2px;font-weight:500;}
  .cierre{font-size:22px;margin-top:20px;}

  .video{margin-top:28px;}
  .video__play{width:64px;height:64px;}
  .video__play::after{border-left-width:20px;border-top-width:12px;border-bottom-width:12px;}
  .video .compartir{padding-bottom:18px;}
  .compartir{margin-bottom:26px;}
  .compartir a{font-size:14px;padding:.85em 1.2em;}
  #can-survey-area-sabes-lo-que-te-juegas-el-29n #form_col1,
  #can-survey-area-sabes-lo-que-te-juegas-el-29n #form_col2{width:100%;}
  .formulario{max-width:none;margin-top:18px;}

  .pizarra{font-size:19px;padding:16px 18px;margin-top:14px;}
  .pizarra--roja{margin-top:14px;}
  .raya--cierre,.raya--propuestas,.raya--final{margin-top:28px;margin-bottom:28px;}
  .tarjeta--propuesta{padding-bottom:20px;}
  .tarjeta--propuesta .tarjeta__titulo{min-height:0;}
  .tarjeta--propuesta .tarjeta__texto{margin-top:10px;}

  .pie{margin-top:28px;padding:22px 0 26px;}
  .pie__inner{display:block;}
  .pie__marca img{width:160px;}
  .pie__razon{text-align:left;margin-top:16px;}
  .pie__enlaces{text-align:left;margin-top:10px;}
  .pie__razon,.pie__enlaces{font-size:15px;}
  .pie__enlaces p + p{margin-top:6px;}
}

/* Mismas reglas para el id del formulario anterior, por si la página aún lo usa */
#can-form-area-unete-a-la-campana .can_embed,
#can-form-area-unete-a-la-campana #can_embed_form,
#can-form-area-unete-a-la-campana #can_embed_form_inner{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important;}
#can-form-area-unete-a-la-campana #logo_wrap,
#can-form-area-unete-a-la-campana #action_info{display:none!important;}

/* Texto de las casillas: un punto más pequeño y más compacto */
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form .checkbox_group_wrap label.checkbox,
#can-survey-area-sabes-lo-que-te-juegas-el-29n #can_embed_form #d_sharing label{
  font-size:calc(var(--lienzo) * .0098)!important;line-height:1.3!important;
}