/* =========================================================
   wopi – Página "PUBLICIDAD"
   Se carga después de styles.css (cabecera, pie, contacto,
   formulario, --m, .in-wrap, .caja-titulo, .like, botones).
   ========================================================= */

/* Íconos chiquitos de las pantallas (dibujados en SVG) */
:root {
  --ico-cam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  --ico-env: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z'/%3E%3C/svg%3E");
  --ico-com: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M21 12a9 9 0 1 1-3.6-7.2A9 9 0 0 1 21 12Zm0 0v8l-3.5-2'/%3E%3C/svg%3E");
  --ico-cor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M12 20 10.6 18.7C5.4 14 2 10.9 2 7.1 2 4 4.4 1.6 7.5 1.6c1.7 0 3.4.8 4.5 2.1 1.1-1.3 2.8-2.1 4.5-2.1C19.6 1.6 22 4 22 7.1c0 3.8-3.4 6.9-8.6 11.6L12 20Z'/%3E%3C/svg%3E");
  --ico-cor-lleno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' fill='%23FF4D67'%3E%3Cpath d='M12 20 10.6 18.7C5.4 14 2 10.9 2 7.1 2 4 4.4 1.6 7.5 1.6c1.7 0 3.4.8 4.5 2.1 1.1-1.3 2.8-2.1 4.5-2.1C19.6 1.6 22 4 22 7.1c0 3.8-3.4 6.9-8.6 11.6L12 20Z'/%3E%3C/svg%3E");
}

/* =========================================================
   1. HERO
   ========================================================= */
.pb-hero {
  position: relative;
  z-index: 3;
  background: var(--salmon) radial-gradient(ellipse 45% 90% at 100% 100%,
              var(--azul) 0%, #9a5fc4 35%, #d4568e 68%, var(--salmon) 100%);
}
.pb-hero::before {                   /* mitad izquierda celeste con trama */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(50% + 120 * var(--m));
  background: url("../img/trama-fondo.png") center / cover no-repeat, var(--celeste);
}
.pb-hero__fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pb-hero__redes {
  position: absolute;
  top: calc(22 * var(--m));
  left: calc(100% - 190 * var(--m));   /* cortado contra el borde derecho, como en las otras páginas */
  margin: 0;
  font-family: var(--font-titulos);
  font-size: calc(62 * var(--m));
  line-height: calc(66 * var(--m));
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.3 * var(--m))) rgba(255, 255, 255, .7);
}

.pb-hero__wrap { min-height: calc(400 * var(--m)); }

.pb-hero__texto {
  position: relative;
  width: calc(560 * var(--m));
  padding: calc(52 * var(--m)) 0 calc(44 * var(--m)) calc(70 * var(--m));
}
.pb-hero__titulo {
  font-size: calc(27 * var(--m));
  padding: calc(12 * var(--m)) calc(22 * var(--m)) calc(14 * var(--m));
  text-align: left;
  width: max-content;
  white-space: nowrap;               /* siempre en dos renglones, como en el diseño */
}
.pb-hero__bajada {
  max-width: calc(420 * var(--m));
  margin: calc(22 * var(--m)) 0 calc(20 * var(--m));
  font-size: max(13px, calc(12.5 * var(--m)));
  font-weight: 600;
  line-height: 1.45;
}

/* --- Anuncio de ejemplo --- */
.anuncio {
  position: absolute;
  z-index: 2;
  left: calc(555 * var(--m));
  top: calc(30 * var(--m));
  width: calc(290 * var(--m));
  background: var(--blanco);
  border: max(2px, calc(2.5 * var(--m))) solid var(--negro);
  box-shadow: calc(8 * var(--m)) calc(8 * var(--m)) 0 var(--negro);
  transform: rotate(2deg);
  transition: transform .3s ease;
}
.anuncio:hover { transform: rotate(0deg) scale(1.02); }
.anuncio__cabecera {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--m));
  padding: calc(8 * var(--m)) calc(10 * var(--m));
}
.anuncio__avatar {
  display: grid;
  place-items: center;
  width: calc(24 * var(--m));
  height: calc(24 * var(--m));
  border-radius: 50%;
  background: var(--azul);
  border: max(1px, calc(1.5 * var(--m))) solid var(--negro);
  color: var(--blanco);
  font-family: var(--font-titulos);
  font-size: calc(5 * var(--m));
  line-height: 1;
  text-align: center;
}
.anuncio__marca { display: flex; flex-direction: column; line-height: 1.2; }
.anuncio__marca b { font-size: calc(11 * var(--m)); }
.anuncio__marca small { font-size: calc(8.5 * var(--m)); color: #777; }
.anuncio__foto {
  width: 100%;
  aspect-ratio: 1 / .86;
  object-fit: cover;
  object-position: 50% 40%;
  border-top: max(2px, calc(2.5 * var(--m))) solid var(--negro);
  border-bottom: max(2px, calc(2.5 * var(--m))) solid var(--negro);
}
.anuncio__pie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(9 * var(--m)) calc(10 * var(--m)) calc(10 * var(--m));
  font-size: calc(9.5 * var(--m));
  font-weight: 600;
}
.anuncio__comprar {
  padding: calc(2 * var(--m)) calc(10 * var(--m)) calc(3 * var(--m));
  font-family: var(--font-titulos);
  font-size: calc(11 * var(--m));
  font-weight: 400;
  color: var(--blanco);
  background: var(--azul);
  border: max(1px, calc(1.5 * var(--m))) solid var(--negro);
  box-shadow: calc(3 * var(--m)) calc(3 * var(--m)) 0 var(--negro);
}
.anuncio__puntero {
  position: absolute;
  right: calc(6 * var(--m));
  bottom: calc(-4 * var(--m));
  width: calc(24 * var(--m));
  animation: clic 2.4s ease-in-out infinite;
}
@keyframes clic {
  0%, 70%, 100% { transform: translate(0, 0); }
  80% { transform: translate(-3px, -3px) scale(.92); }
}
.pb-hero__like {
  right: calc(-42 * var(--m));
  top: 62%;
  font-size: calc(21 * var(--m));
  transform: rotate(-2deg);
}

.pb-hero__estrella {
  position: absolute;
  z-index: 1;
  left: calc(828 * var(--m));
  top: calc(305 * var(--m));
  width: calc(95 * var(--m));
  animation: girar 45s linear infinite;
}

/* =========================================================
   2. FRANJA "LLEGAMOS A DONDE ESTÁ TU CLIENTE"
   ========================================================= */
.pb-franja {
  position: relative;
  z-index: 2;
  padding: calc(47 * var(--m)) 20px calc(37 * var(--m));
  text-align: center;
  background: var(--negro);
}
.pb-franja__ads {
  position: absolute;
  top: calc(10 * var(--m));
  left: calc(22 * var(--m));
  margin: 0;
  font-family: var(--font-titulos);
  font-size: calc(28 * var(--m));
  color: transparent;
  -webkit-text-stroke: max(1px, calc(1.2 * var(--m))) var(--blanco);
}
.pb-franja__titulo {
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(31 * var(--m));
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--blanco);
}
.pb-subrayado {
  padding-bottom: calc(5 * var(--m));
  background: linear-gradient(90deg, var(--amarillo), var(--celeste)) left bottom / 100% max(3px, calc(4 * var(--m))) no-repeat;
}
.pb-franja__deco {
  position: absolute;
  right: calc(90 * var(--m));
  top: calc(88 * var(--m));
  width: calc(80 * var(--m));
  animation: flotar 6s ease-in-out infinite;
}

/* =========================================================
   3. META ADS · GOOGLE ADS
   ========================================================= */
.pb-servicios {
  position: relative;
  z-index: 1;
  padding: calc(78 * var(--m)) 20px calc(120 * var(--m));
  background: #0d0d0d url("../img/fondo-textura-negro.jpg") center / cover;
}
.pb-servicios__wrap {
  display: grid;
  grid-template-columns: calc(381 * var(--m)) calc(82 * var(--m)) calc(381 * var(--m));
  justify-content: center;
}

.servicio {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(22 * var(--m)) calc(26 * var(--m)) calc(32 * var(--m));
  text-align: center;
  border: max(2px, calc(3 * var(--m))) solid var(--negro);
  box-shadow: calc(10 * var(--m)) calc(10 * var(--m)) 0 rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.servicio--meta   { background: var(--salmon); }
.servicio--google { background: var(--celeste); }

.servicio__titulo {
  margin: calc(18 * var(--m)) 0 calc(14 * var(--m));
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(31 * var(--m));
  line-height: 1.05;
  text-transform: uppercase;
}
.servicio__titulo small { display: block; margin-top: calc(4 * var(--m)); font-size: .6em; text-transform: none; }
.servicio__texto {
  margin: 0 0 calc(22 * var(--m));
  font-size: max(13px, calc(12.5 * var(--m)));
  font-weight: 600;
  line-height: 1.45;
}
.servicio__texto strong { display: block; margin-bottom: calc(8 * var(--m)); font-weight: 700; }
.servicio__boton {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: max(17px, calc(19 * var(--m)));
  padding: calc(5 * var(--m)) calc(14 * var(--m)) calc(6 * var(--m));
  border-width: max(2px, calc(2.5 * var(--m)));
  box-shadow: calc(6 * var(--m)) calc(6 * var(--m)) 0 var(--negro);
}
.ico-chat { width: 1.05em; height: 1.05em; fill: var(--blanco); stroke: var(--negro); stroke-width: 1.4; }
.ico-chat circle { fill: var(--negro); stroke: none; }

/* --- Ilustraciones (todas las medidas en % del recuadro: cqw) --- */
.servicio__ilustra {
  position: relative;
  width: 100%;
  aspect-ratio: 321 / 272;
  container-type: inline-size;
}

/* Celulares de Instagram */
.tel {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  padding: 2.2cqw 2.2cqw 3cqw;
  background: var(--blanco);
  border: 1.4cqw solid #141414;
  border-radius: 6cqw;
  box-shadow: 2.5cqw 2.5cqw 0 rgba(0, 0, 0, .3);
  overflow: hidden;
}
.tel--1 { left: 9%;  top: 4%;  width: 42%; transform: rotate(-6deg); }
.tel--2 { left: 51%; top: 17%; width: 38%; transform: rotate(5deg); z-index: 1; }
.tel__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-titulos);
  font-size: 3.4cqw;
}
.tel__barra b { font-weight: 400; }
.tel__perfil { display: flex; align-items: center; gap: 1.5cqw; }
.tel__perfil i { width: 4.5cqw; height: 4.5cqw; border-radius: 50%; background: linear-gradient(135deg, var(--azul), var(--salmon)); }
.tel__perfil span { flex: 1; height: 1.4cqw; border-radius: 1cqw; background: #ddd; }
.tel__foto { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 30% 50%; }
.tel__post {
  display: grid;
  place-items: center;
  aspect-ratio: 1.15;
  background: var(--amarillo);
}
.tel__post img { width: 78%; }
.tel__cta {
  margin-top: -1.6cqw;
  padding: 1cqw 2cqw;
  font-size: 2.6cqw;
  font-weight: 700;
  color: var(--blanco);
  background: var(--azul);
}
.tel__acciones { display: flex; gap: 2cqw; }
.tel__acciones i {
  width: 3.8cqw;
  height: 3.8cqw;
  background: center / contain no-repeat;
}
.tel__barra i { width: 4cqw; height: 4cqw; background: center / contain no-repeat; }
.ico-cam { background-image: var(--ico-cam) !important; }
.ico-env { background-image: var(--ico-env) !important; }
.ico-com { background-image: var(--ico-com) !important; }
.ico-cor { background-image: var(--ico-cor) !important; }
.ico-cor--lleno { background-image: var(--ico-cor-lleno) !important; }
/* Segundo celular con estilo TikTok */
.tel--tiktok { background: #121212; color: var(--blanco); }
.tel--tiktok .tel__barra { justify-content: center; position: relative; }
.tel--tiktok .tel__barra b { border-bottom: .6cqw solid var(--blanco); padding-bottom: .4cqw; }
.tel--tiktok .tel__barra i { position: absolute; right: 0; }
.tel--tiktok .tel__perfil span,
.tel--tiktok .tel__lineas span { background: #444; }
.tel--tiktok .tel__acciones i:not(.ico-cor--lleno),
.tel--tiktok .ico-busca { filter: invert(1); }
.tel--tiktok .tel__cta { background: #fe2c55; }
.ico-busca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5' stroke-linecap='round'/%3E%3C/svg%3E") !important; }

.tel__lineas { display: flex; flex-direction: column; gap: 1.2cqw; }
.tel__lineas span { height: 1.4cqw; border-radius: 1cqw; background: #ddd; }
.tel__lineas span:last-child { width: 60%; }

.megusta {
  position: absolute;
  z-index: 2;
  left: 53%;
  top: 2%;
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.4cqw 3cqw;
  font-family: var(--font-titulos);
  font-size: 5.4cqw;
  background: var(--blanco);
  border: .8cqw solid var(--negro);
  border-radius: 2.5cqw;
  box-shadow: 1.6cqw 1.6cqw 0 var(--negro);
  transform: rotate(3deg);
  animation: flotar 5s ease-in-out infinite;
}
.megusta svg { width: 1.1em; fill: var(--salmon); }
.corazon-linea {
  position: absolute;
  left: 1%;
  top: 66%;
  width: 13cqw;
  fill: none;
  stroke: var(--blanco);
  stroke-width: 1.6;
  transform: rotate(-14deg);
}

/* Buscador + resultado de Google */
.servicio__ilustra--google { display: flex; flex-direction: column; justify-content: center; gap: 7cqw; }
.buscador {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  margin: 0 6cqw;
  padding: 2.4cqw 4cqw;
  font-size: 3.9cqw;
  font-weight: 600;
  background: var(--blanco);
  border: .8cqw solid var(--negro);
  border-radius: 99px;
  box-shadow: 1.6cqw 1.6cqw 0 var(--negro);
}
.buscador svg { width: 4.6cqw; color: var(--azul); flex-shrink: 0; }
.buscador__texto::after {          /* cursor que titila */
  content: "|";
  margin-left: .1em;
  font-weight: 400;
  animation: titilar 1s steps(1) infinite;
}
@keyframes titilar { 50% { opacity: 0; } }
.resultado {
  padding: 4cqw 4.5cqw 4.5cqw;
  text-align: left;
  background: var(--blanco);
  border: .8cqw solid var(--negro);
  box-shadow: 2.6cqw 2.6cqw 0 var(--negro);
}
.resultado p { margin: 0; }
.resultado__titulo { font-family: var(--font-titulos); font-size: 4.6cqw; line-height: 1.25; color: var(--azul); }
.resultado__etiqueta {
  display: inline-block;
  margin-right: 1cqw;
  padding: 0 1.4cqw .3cqw;
  font-size: 2.8cqw;
  vertical-align: .3em;
  border: .45cqw solid var(--negro);
}
.resultado__url  { margin: 1.4cqw 0 1cqw !important; font-size: 3.4cqw; font-weight: 700; color: #188038; }
.resultado__desc { font-size: 3.5cqw; line-height: 1.45; }

/* --- Flechas del medio --- */
.pb-flechas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--m));
  padding-bottom: calc(80 * var(--m));
  font-family: var(--font-titulos);
  font-size: calc(40 * var(--m));
  line-height: 1;
  color: var(--blanco);
}
.pb-flechas span { text-shadow: calc(2 * var(--m)) calc(2 * var(--m)) 0 #444; animation: empujar 2s ease-in-out infinite; }
.pb-flechas span:nth-child(3) { animation-name: empujar-izq; }
.pb-flechas__amarilla { color: var(--amarillo); animation-delay: -.6s !important; }
@keyframes empujar     { 50% { transform: translateX(calc(5 * var(--m))); } }
@keyframes empujar-izq { 50% { transform: translateX(calc(-5 * var(--m))); } }

/* --- Sticker amarillo "¡Atraé más clientes!" --- */
.sticker-atrae {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(-95 * var(--m));
  width: calc(160 * var(--m));
  aspect-ratio: 1;
  margin: 0 0 0 calc(-80 * var(--m));
  display: grid;
  place-items: center;
  animation: latir 3s ease-in-out infinite;
}
.sticker-atrae__forma { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticker-atrae span {
  position: relative;
  z-index: 1;
  font-family: var(--font-titulos);
  font-size: calc(17 * var(--m));
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-10deg);
}
@keyframes latir {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.05) rotate(-3deg); }
}

/* =========================================================
   4. PROCESO: PLANIFICAMOS · LANZAMOS · MEDIMOS
   ========================================================= */
.pb-proceso {
  padding: calc(46 * var(--m)) 20px calc(52 * var(--m));
  text-align: center;
  background: linear-gradient(90deg, var(--amarillo) 25%, #9ad8b9 100%);
}
.pb-proceso__titulo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 calc(16 * var(--m));
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(30 * var(--m));
  line-height: 1.15;
  color: var(--blanco);
  text-shadow: calc(3 * var(--m)) calc(3 * var(--m)) 0 var(--negro);
}
.pb-proceso__titulo span { white-space: nowrap; }

.pasos {
  display: grid;
  grid-template-columns: repeat(3, calc(227 * var(--m)));
  justify-content: center;
  gap: calc(33 * var(--m));
  margin: calc(40 * var(--m)) 0 0;
  padding: 0;
  list-style: none;
}
.paso {
  position: relative;
  padding: calc(16 * var(--m)) calc(14 * var(--m)) calc(16 * var(--m));
  background: var(--blanco);
  border: max(2px, calc(2.5 * var(--m))) solid var(--negro);
  box-shadow: calc(8 * var(--m)) calc(8 * var(--m)) 0 var(--negro);
  transition: transform .25s ease;
}
.paso:hover { transform: translateY(calc(-4 * var(--m))); }
.paso__num {
  position: absolute;
  left: calc(-14 * var(--m));
  top: calc(-14 * var(--m));
  display: grid;
  place-items: center;
  width: calc(40 * var(--m));
  height: calc(40 * var(--m));
  border-radius: 50%;
  font-family: var(--font-titulos);
  font-size: calc(20 * var(--m));
  color: var(--celeste);
  background: var(--negro);
}
.paso__titulo {
  margin: 0 0 calc(8 * var(--m));
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(17 * var(--m));
  text-transform: uppercase;
}
.paso p {
  margin: 0;
  font-size: max(12px, calc(11 * var(--m)));
  font-weight: 600;
  line-height: 1.45;
}
.paso__puntero {
  position: absolute;
  right: calc(-14 * var(--m));
  bottom: calc(-24 * var(--m));
  width: calc(28 * var(--m));
  animation: clic 2.4s ease-in-out infinite;
}

/* =========================================================
   5. REPORTE + 100% MEDIBLE
   ========================================================= */
.pb-reporte {
  padding: calc(50 * var(--m)) 20px calc(52 * var(--m));
  background: #0d0d0d url("../img/fondo-textura-negro.jpg") center / cover;
}
.pb-reporte__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(90 * var(--m));
}

.reporte {
  position: relative;
  width: calc(327 * var(--m));
  margin: 0;
  padding: calc(18 * var(--m)) calc(18 * var(--m)) calc(16 * var(--m));
  background: var(--blanco);
  border: max(2px, calc(3 * var(--m))) solid var(--negro);
  box-shadow: calc(8 * var(--m)) calc(8 * var(--m)) 0 rgba(255, 255, 255, .15);
}
.reporte__titulo {
  font-family: var(--font-titulos);
  font-size: calc(13 * var(--m));
  text-transform: uppercase;
}
.reporte__sticker {
  position: absolute;
  right: calc(-20 * var(--m));
  top: calc(-28 * var(--m));
  width: calc(100 * var(--m));
  transform: rotate(-4deg);
  animation: flotar 6s ease-in-out infinite;
}

.grafica {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(112 * var(--m));
  margin-top: calc(14 * var(--m));
}
.grafica__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.grafica__barra {
  height: calc(var(--alto) * .78);
  margin: 0 calc(6 * var(--m));
  background: var(--color);
  border: 2px solid var(--negro);
  border-bottom: 0;
  transform-origin: bottom;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.grafica__col:nth-child(2) .grafica__barra { transition-delay: .12s; }
.grafica__col:nth-child(3) .grafica__barra { transition-delay: .24s; }
.grafica__col:nth-child(4) .grafica__barra { transition-delay: .36s; }
.grafica.is-esperando .grafica__barra { transform: scaleY(0); }   /* main.js la saca al verse */
.grafica__col > span:last-child {
  padding-top: calc(5 * var(--m));
  font-size: max(10px, calc(9 * var(--m)));
  font-weight: 700;
  text-align: center;
  border-top: max(2px, calc(2.5 * var(--m))) solid var(--negro);
}
.reporte__texto {
  margin: calc(12 * var(--m)) 0 0;
  font-size: max(12px, calc(11 * var(--m)));
  font-weight: 600;
  line-height: 1.45;
}

.pb-medible {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(24 * var(--m));
  line-height: 1;
  text-transform: uppercase;
  color: var(--blanco);
}
.pb-medible__cien {
  margin: calc(6 * var(--m)) 0 calc(4 * var(--m));
  font-size: calc(72 * var(--m));
  background: linear-gradient(90deg, var(--salmon) 15%, var(--azul) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(calc(-3 * var(--m)) calc(3 * var(--m)) 0 var(--blanco));
}

/* =========================================================
   6. CASOS DE ÉXITO
   ========================================================= */
.pb-casos {
  padding: calc(45 * var(--m)) 20px calc(52 * var(--m));
  text-align: center;
  background: linear-gradient(90deg, var(--celeste), var(--amarillo));
}
.pb-casos__titulo {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-titulos);
  font-weight: 400;
  font-size: calc(40 * var(--m));
  line-height: 1.05;
  text-transform: uppercase;
}
.pb-casos__contorno { color: transparent; -webkit-text-stroke: max(1px, calc(1.3 * var(--m))) var(--negro); }
.pb-casos__boton { position: relative; display: inline-block; margin-top: calc(18 * var(--m)); }
.pb-casos__puntero {
  position: absolute;
  right: calc(-22 * var(--m));
  bottom: calc(-30 * var(--m));
  width: calc(30 * var(--m));
  pointer-events: none;
  animation: clic 2.4s ease-in-out infinite;
}

/* =========================================================
   MÓVIL Y TABLET CHICA (≤ 820px)
   ========================================================= */
@media (max-width: 820px) {
  .in-wrap { width: 100%; }

  /* 1. Hero: arriba celeste con el texto, abajo el anuncio sobre el degradé */
  .pb-hero::before { display: none; }
  .pb-hero__wrap { min-height: 0; padding-bottom: 50px; }
  .pb-hero__texto {
    width: auto;
    padding: 40px 20px 44px;
    text-align: center;
    background: url("../img/trama-fondo.png") center / 598px auto, var(--celeste);
  }
  .pb-hero__titulo,
  .caja-titulo.pb-hero__titulo { margin: 0 auto; max-width: 100%; width: auto; white-space: normal; font-size: min(25px, 6.4vw); padding: 12px 16px 14px; text-align: center; }
  .pb-hero__bajada { max-width: 420px; margin: 22px auto 20px; font-size: 14px; }
  .boton-wa--chico { --bw-fs: 18px; --bw-alto: calc(18px * 1.2 + 10px); gap: 8px; }
  .boton-wa--chico .boton-wa__texto { padding: 3px 12px; box-shadow: 4px 4px 0 var(--negro); }

  .anuncio {
    --m: 1.35px;                      /* el anuncio se dibuja a escala fija en móvil */
    position: relative;
    left: auto; top: auto;
    margin: 44px auto 0;
    width: min(320px, 84vw);
  }
  .pb-hero__estrella { left: auto; right: -26px; top: auto; bottom: -34px; width: 96px; }
  .pb-hero__texto { width: auto; }
  .pb-hero__like { left: auto; right: 6px; top: 58%; }
  .pb-hero__redes { display: none; }

  /* 2. Franja */
  .pb-franja { padding: 46px 18px 40px; }
  .pb-franja__ads { top: 10px; left: 12px; font-size: 24px; -webkit-text-stroke-width: 1px; }
  .pb-franja__titulo { font-size: min(26px, 7vw); }
  .pb-franja__deco { top: auto; bottom: -34px; right: 12px; width: 74px; }

  /* 3. Servicios */
  .pb-servicios { padding: 60px 20px 120px; }
  .pb-servicios__wrap { grid-template-columns: min(420px, 100%); gap: 46px; }
  .pb-flechas { display: none; }
  .servicio { padding: 20px 20px 28px; box-shadow: 8px 8px 0 rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
  .servicio__titulo { margin: 18px 0 12px; font-size: min(28px, 7.4vw); }
  .servicio__texto { font-size: 14px; margin-bottom: 22px; }
  .servicio__texto strong { margin-bottom: 8px; }
  .servicio__boton { font-size: 19px; padding: 5px 14px 7px; box-shadow: 5px 5px 0 var(--negro); }
  .sticker-atrae { width: 140px; margin-left: -70px; bottom: -100px; }
  .sticker-atrae span { font-size: 16px; }

  /* 4. Proceso */
  .pb-proceso { padding: 46px 20px 56px; }
  .pb-proceso__titulo { gap: 0 10px; font-size: min(28px, 7.4vw); text-shadow: 3px 3px 0 var(--negro); }
  .pasos { grid-template-columns: min(320px, 100%); gap: 34px; margin-top: 40px; }
  .paso { padding: 18px 18px 18px; box-shadow: 7px 7px 0 var(--negro); }
  .paso__num { width: 40px; height: 40px; left: -14px; top: -14px; font-size: 20px; }
  .paso__titulo { font-size: 18px; margin-bottom: 8px; }
  .paso p { font-size: 14px; }
  .paso__puntero { width: 28px; right: -12px; bottom: -22px; }

  /* 5. Reporte */
  .pb-reporte { padding: 64px 20px 56px; }
  .pb-reporte__wrap { flex-direction: column; gap: 50px; }
  .reporte { --m: 1.05px; width: min(340px, 100%); padding: 18px 16px 16px; }
  .reporte__titulo { font-size: 15px; }
  .reporte__sticker { width: 96px; right: -14px; top: -34px; }
  .grafica { height: 130px; }
  .grafica__col > span:last-child { font-size: 11px; }
  .reporte__texto { font-size: 13px; }
  .pb-medible { font-size: 24px; }
  .pb-medible__cien { font-size: 76px; filter: drop-shadow(-3px 3px 0 var(--blanco)); }

  /* 6. Casos */
  .pb-casos { padding: 44px 20px 54px; }
  .pb-casos__titulo { font-size: min(36px, 9.4vw); }
  .pb-casos__contorno { -webkit-text-stroke-width: 1.3px; }
  .pb-casos__boton { margin-top: 20px; }
  .pb-casos__puntero { width: 30px; right: -16px; bottom: -28px; }
}