/* Start custom CSS for wd_text_block, class: .elementor-element-6910a35 */:root{
  --c-negro: #000000;
  --c-acento: #ff0080;
  --c-gris: #575756;
  --c-rosa-fondo: #ffd6ea; /* rosa suave para fondos si lo necesitas */
}

/* HERO: logo izq + video der */
.hero-bar{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--c-rosa-fondo);
  position: relative; /* ya lo tienes, pero por si acaso */
  overflow: hidden;   /* evita que los puntitos se salgan */
}
/* Capa de puntitos animados (fondo decorativo) */
.hero-dots{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Capa base: puntos finos, todos del mismo tamaño */
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,1) 1.6px, transparent 1.7px);
  background-size: 20px 20px;
  background-position: 0 0;

  /* recorte en cuña */
  clip-path: polygon(0% 0%, 58% 0%, 0% 78%);

  /* movimiento sutil */
  animation: dots-drift 28s ease-in-out infinite alternate;

  /* Máscara: controla la opacidad de los puntos
     (lado largo más claro, extremos a 100%) */
  -webkit-mask-image: linear-gradient(
    135deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.65) 60%,
    rgba(0,0,0,1)    100%
  );
          mask-image: linear-gradient(
    135deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.65) 60%,
    rgba(0,0,0,1)    100%
  );
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Segunda capa: puntos un poco más grandes para “crecer” hacia los extremos */
.hero-dots::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(circle at center, rgba(255,255,255,1) 2.6px, transparent 2.7px);
  background-size: 28px 28px;
  background-position: 6px 6px;

  clip-path: inherit;
  animation: dots-drift-b 36s ease-in-out infinite alternate;

  /* Máscara inversa para que esta capa aparezca
     sobre todo cerca de los extremos */
  -webkit-mask-image: linear-gradient(
    135deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0.2) 45%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,1)   100%
  );
          mask-image: linear-gradient(
    135deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0.2) 45%,
    rgba(0,0,0,0.6) 70%,
    rgba(0,0,0,1)   100%
  );
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Animaciones sutiles */
@keyframes dots-drift{
  0%   { background-position: 0px 0px; }
  100% { background-position: -24px -18px; }
}
@keyframes dots-drift-b{
  0%   { background-position: 6px 6px; }
  100% { background-position: -12px -10px; }
}

/* Respeta preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce){
  .hero-dots,
  .hero-dots::before{ animation: none; }
}

/* Asegura que logo/video estén por encima de los puntos */
.hero-bar > *:not(.hero-dots){ position: relative; z-index: 1; }

/* Asegura que logo/video estén por encima de los puntos */
.hero-bar > *:not(.hero-dots){ position: relative; z-index: 1; }

/* Asegura que el contenido “flote” por encima de los puntos */
.hero-bar > *:not(.hero-dots){
  position: relative;
  z-index: 1;
}
.logo-revista{
  height: 42px; width: auto; display: block;
}
.header-video{
  width: 260px;
  max-width: 35vw;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.header-video iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width: 560px){
  .header-video{ display:none; } /* o reduce: width: 180px; */
}

/* Intro */
.section-intro{
  max-width: 1200px; margin: 0 auto; padding: 24px 16px 36px; color: var(--c-negro);
}
.intro-title{
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.1;
  margin: 0 0 8px;
  font-weight: 800;
}
.intro-sub{
  color: var(--c-gris);
  font-size: clamp(14px, 2vw, 18px);
  margin: 0 0 18px;
}

/* CTA frame: resalta el botón sin tocar su estética interna */
.cta-frame{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,0,128,.10), rgba(255,0,128,.05));
  border: 1.5px solid rgba(255,0,128,.35);
  box-shadow: 0 10px 30px rgba(255,0,128,.15);
  margin: 10px 0 26px;
}
.cta-copy{
  color: var(--c-negro);
  font-size: 16px;
  line-height: 1.35;
}
.cta-copy strong{ color: var(--c-acento); font-weight: 900; }
.cta-button{ display:flex; align-items:center; justify-content:flex-end; }

/* Bullets */
.bullets{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px){
  .bullets{ grid-template-columns: repeat(3, 1fr); }
}

.bullet{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px 16px 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.bullet-title{
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-negro);
  font-weight: 800;
}
.bullet-text{
  margin: 0;
  color: var(--c-gris);
  font-size: 15px;
  line-height: 1.55;
}

/* Último article a ancho completo */
.bullet-full{
  grid-column: 1 / -1;
}

/* Lista bonita para "Valores" (opcional) */
.bullet-list{
  margin: 8px 0 0 1.2em;
  color: var(--c-gris);
  font-size: 15px;
  line-height: 1.55;
}
.bullet-list li{ margin: 6px 0; }
.bullet-list strong{ color: var(--c-negro); }

.revista-footer{
  background: #fff;
  color: #575756;
  padding: 24px 16px;
  margin-top: 40px;
  text-align: center;
  border-top: 4px solid #ff0080;
}

.footer-content{
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
}

.footer-title{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #ff0080; /* acento */
  margin: 0 0 6px;
}

.footer-name{
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.footer-phone,
.footer-email{
  margin: 0 0 4px;
  color: #e0e0e0;
}

.footer-email a{
  color: #ff0080;
  text-decoration: none;
  font-weight: 600;
}
.footer-email a:hover{
  text-decoration: underline;
}/* End custom CSS */
/* Start custom CSS */.page-id-11641 .page-title{
    display:none;
}
.page-id-11641 .main-page-wrapper{
    padding-top: 0 ;
}/* End custom CSS */