.elementor-6947 .elementor-element.elementor-element-d7da071{--spacer-size:50px;}@media(max-width:767px){.elementor-6947 .elementor-element.elementor-element-d7da071{--spacer-size:6px;}}/* Start custom CSS for html, class: .elementor-element-0cde248 *//* ========= HERO SECUENCIA (SIN JS) ========= */
.pecadoHero2{
  --typeDur: 1.2s;
  --boomDur: .55s;
  --smokeDur: .55s;
  --gap: 16px;

  background:#fff;
  text-align:center;
  padding: clamp(24px, 5vw, 70px) 16px;
}

/* 1) TYPEWRITER */
.tw2{
  margin: 0 auto 18px;
  font-weight: 1000;
  letter-spacing: -0.03em;
  line-height: .95;
  font-size: clamp(34px, 6.2vw, 86px);
  color:#111;
}

.tw2__text{
  display:inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.12em solid #111;
  max-width: 0;

  animation:
    twReveal var(--typeDur) steps(14,end) forwards,
    twCaret .75s step-end infinite;
}

@keyframes twReveal{ to{ max-width: 40ch; } }
@keyframes twCaret{ 50%{ border-color: transparent; } }

/* 2) BOOM BLOQUE AMARILLO */
.boom2{
  display:flex;
  justify-content:center;
  margin: 4px 0 18px;
}

.boom2__txt{
  display:inline-block;
  background:#FFC400;
  color:#fff;
  font-weight:1000;
  border-radius: 14px;
  padding: 12px 18px;
  font-size: clamp(18px, 3vw, 30px);

  opacity:0;
  transform: scale(.6);
  filter: none (1.5px);

  animation: boom2 var(--boomDur) cubic-bezier(.2,1.2,.2,1) forwards;
  animation-delay: var(--typeDur);
}

@keyframes boom2{
  0%{ opacity:0; transform:scale(.6); filter: blur(1.5px); }
  70%{ opacity:1; transform:scale(1.08); filter: blur(0); }
  100%{ opacity:1; transform:scale(1); }
}

/* 3) MENSAJE TURQUESA (ENTRA LATERAL + BORROSO -> CLARO) */
.smoke2{
  margin: 0 auto 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #18c7c4;
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;

  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;

  font-size: clamp(12px, 2.1vw, 20px);
  font-weight: 850;

  opacity: 0;
  transform: translateX(-26px);
  filter: blur(12px);

  animation: slideBlurIn2 var(--smokeDur) ease forwards;
  animation-delay: calc(var(--typeDur) + var(--boomDur));
}

@keyframes slideBlurIn2{
  to{ opacity: 1; transform: translateX(0); filter: blur(0); }
}

/* (sin humo extra) */
.smoke2::after{ content: none; }

/* 4) LOGOS PRO 2025 (stagger + blur->clear + sheen) */
.brands2{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap: var(--gap);
  flex-wrap: nowrap;
}

.brandCard2{
  width: min(360px, 42vw);
  min-width: 160px;
  border-radius: 18px;
  padding: 18px 16px;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  position: relative;
  overflow: hidden;

  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: saturate(140%) blur(10px);

  box-shadow:
    0 12px 26px rgba(0,0,0,.08),
    0 14px 0 rgba(0,0,0,.10);

  opacity: 0;
  transform: translateY(14px) scale(.96);
  filter: blur(10px);

  animation: cardReveal2025 .62s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--typeDur) + var(--boomDur) + var(--smokeDur) + var(--stagger, 0ms));

  transition: transform .18s ease, box-shadow .18s ease;
}

.brandCard2:nth-child(1){ --stagger: 0ms; }
.brandCard2:nth-child(2){ --stagger: 140ms; }

@keyframes cardReveal2025{
  to{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.brandCard2::before{
  content:"";
  position:absolute;
  inset:-45% -70%;
  pointer-events:none;
  opacity:0;

  background: linear-gradient(
    120deg,
    transparent 38%,
    rgba(255,255,255,.60) 48%,
    transparent 58%
  );

  transform: translateX(-38%) rotate(8deg);
  animation: sheen2025 .95s ease forwards;
  animation-delay: calc(var(--typeDur) + var(--boomDur) + var(--smokeDur) + var(--stagger,0ms) + 140ms);
}

@keyframes sheen2025{
  0%{ opacity:0; transform:translateX(-38%) rotate(8deg); }
  18%{ opacity:1; }
  100%{ opacity:0; transform:translateX(38%) rotate(8deg); }
}
/* ====== LLAMADA DE ATENCIÓN: PULSOS/ZOOMS EN LOGOS (INFINITO) ====== */

/* 1) Añadimos una animación extra al card, después del reveal */
.brandCard2{
  animation:
    cardReveal2025 .62s cubic-bezier(.16,1,.3,1) forwards,
    pulseAttention 1.05s ease-in-out infinite;

  /* Reveal con stagger (entra uno y luego el otro) */
  /* Pulse SIN stagger (los dos pulsan a la vez) */
  animation-delay:
    calc(var(--typeDur) + var(--boomDur) + var(--smokeDur) + var(--stagger, 0ms)),
    calc(var(--typeDur) + var(--boomDur) + var(--smokeDur) + .75s);
}

@keyframes pulseAttention{
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(0) scale(1.06); }
  55%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(0) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.brandCard2{
  will-change: transform;
}

.brandCard2:hover{
  transform: translateY(-2px) scale(1.03);
}/* End custom CSS */