/* ============================================================
   DataTrust Widgets · Hero Google Ads (composición del navegador)
   Se apoya en hero.css (layout, copy, fondo). Aquí va solo el
   navegador de Google con anuncios rotativos, la etiqueta, los
   chips claros y el responsive de la columna.
   ============================================================ */

.dtw-hero__visual--hgads{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center}

.dtw-hgads{position:relative;width:100%;font-family:'Poppins',sans-serif;padding-top:14px}
.dtw-hgads__frame{position:relative}

/* Etiqueta "Top 1 en Google Perú" (rosa = anuncio pagado) */
.dtw-hgads__pos{position:absolute;top:0;right:16px;z-index:10;display:inline-flex;align-items:center;gap:6px;
  background:#F54576;color:#fff;font-size:12px;font-weight:600;padding:7px 14px;border-radius:999px;
  box-shadow:0 8px 22px rgba(245,69,118,.45);white-space:nowrap}
.dtw-hgads__pos i{font-size:14px}

/* Navegador */
.dtw-hgads__browser{width:100%;background:#fff;border-radius:14px;overflow:hidden;color:#1F1F1F;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.75);opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.dtw-hgads.on .dtw-hgads__browser{opacity:1;transform:none}
.dtw-hgads__bar{display:flex;align-items:center;gap:9px;padding:11px 15px;background:#ececec;border-bottom:1px solid #d9d9d9}
.dtw-hgads__dots{display:flex;gap:7px}
.dtw-hgads__dots span{width:11px;height:11px;border-radius:50%}
.dtw-hgads__dots span:nth-child(1){background:#ff5f57}.dtw-hgads__dots span:nth-child(2){background:#febc2e}.dtw-hgads__dots span:nth-child(3){background:#28c840}
.dtw-hgads__addr{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:8px;padding:6px 12px;font-size:12px;color:#3c3c3c;min-width:0}
.dtw-hgads__addr i{color:#8a8a8a;flex:none}
.dtw-hgads__u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dtw-hgads__g{padding:16px 0 12px}
.dtw-hgads__top{display:flex;align-items:center;gap:16px;padding:8px 22px 14px}
.dtw-hgads__logo{font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1}
.dtw-hgads__logo span:nth-child(1){color:#4285F4}.dtw-hgads__logo span:nth-child(2){color:#EA4335}.dtw-hgads__logo span:nth-child(3){color:#FBBC05}.dtw-hgads__logo span:nth-child(4){color:#4285F4}.dtw-hgads__logo span:nth-child(5){color:#34A853}.dtw-hgads__logo span:nth-child(6){color:#EA4335}
.dtw-hgads__search{flex:1;display:flex;align-items:center;gap:8px;border:1px solid #dfe1e5;border-radius:999px;padding:9px 15px;font-size:14px;color:#1F1F1F;box-shadow:0 1px 5px rgba(32,33,36,.1);min-width:0}
.dtw-hgads__search i{color:#70757A;flex:none}
.dtw-hgads__q{white-space:nowrap;overflow:hidden}
.dtw-hgads__caret{width:1px;height:16px;background:#1F1F1F;flex:none;animation:dtwHgadsBlink 1s step-end infinite}
@keyframes dtwHgadsBlink{50%{opacity:0}}
.dtw-hgads__tabs{display:flex;gap:18px;padding:0 22px;border-bottom:1px solid #ebebeb;font-size:12.5px;color:#4D5156}
.dtw-hgads__tabs span{padding:6px 0 9px;white-space:nowrap}
.dtw-hgads__tabs .act{color:#1F1F1F;border-bottom:2px solid #1a73e8;font-weight:500}

/* Anuncios rotativos */
.dtw-hgads__stage{position:relative;padding:16px 22px 6px;min-height:200px}
.dtw-hgads__ad{position:absolute;left:22px;right:170px;top:16px;opacity:0;transition:opacity .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.dtw-hgads__ad.on{opacity:1}
.dtw-hgads__spon{font-size:13.5px;font-weight:600;color:#1F1F1F;margin-bottom:12px}
.dtw-hgads__site{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.dtw-hgads__fav{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #dadce0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.dtw-hgads__fav img{width:18px;height:18px;object-fit:contain}
.dtw-hgads__fb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
.dtw-hgads__brand{font-size:13px;color:#202124;line-height:1.2}
.dtw-hgads__url{font-size:12px;color:#4D5156}
.dtw-hgads__title{font-size:18px;color:#1a0dab;line-height:1.3;margin-bottom:6px;font-weight:500}
.dtw-hgads__snip{font-size:12.8px;line-height:1.5;color:#4D5156;margin:0 0 9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dtw-hgads__links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dtw-hgads__link{font-size:12.5px;color:#1a0dab}
.dtw-hgads__links .dot{color:#70757A;font-size:11px}

/* Indicador de rotación + cliente */
.dtw-hgads__rotbar{display:flex;align-items:center;justify-content:flex-start;padding:8px 22px 4px;gap:14px;max-width:62%}
.dtw-hgads__rot{display:flex;gap:7px}
.dtw-hgads__rot i{display:block;width:7px;height:7px;border-radius:50%;background:#d0d0d5;transition:background .3s,width .3s}
.dtw-hgads__rot i.on{background:#F54576;width:20px;border-radius:4px}
.dtw-hgads__client{font-size:11.5px;color:#70757A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtw-hgads__client b{color:#4D5156;font-weight:600}

/* Chips técnicos: claros (paper) sobre el fondo oscuro del hero */
.dtw-hgads__chips{position:absolute;right:-10px;bottom:-14px;z-index:8;display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.dtw-hgads__chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:#413C58;
  background:#FAFAF8;border:1px solid rgba(65,60,88,.14);border-radius:7px;padding:7px 11px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;transform:translateX(10px);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.dtw-hgads__chip i{font-size:13px;color:#0f9d78}
.dtw-hgads__chip.pink i{color:#F54576}
.dtw-hgads.on .dtw-hgads__chip{opacity:1;transform:none}
.dtw-hgads.on .dtw-hgads__chip:nth-child(1){transition-delay:.9s}
.dtw-hgads.on .dtw-hgads__chip:nth-child(2){transition-delay:1.05s}
.dtw-hgads.on .dtw-hgads__chip:nth-child(3){transition-delay:1.2s}
.dtw-hgads.on .dtw-hgads__chip:nth-child(4){transition-delay:1.35s}

/* Leyenda */
.dtw-hgads__legend{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:30px;font-size:12.5px;letter-spacing:.02em;color:rgba(250,250,248,.62)}
.dtw-hgads__legend i{color:#10FFCB;font-size:16px}

@media(prefers-reduced-motion:reduce){
  .dtw-hgads__browser,.dtw-hgads__chip{transition:none!important;opacity:1!important;transform:none!important}
  .dtw-hgads__caret{animation:none}
}

/* --- Responsive: apilar copy arriba, navegador abajo --- */
@media(max-width:900px){
  .dtw-hero--hgads .dtw-hero__inner{grid-template-columns:1fr;gap:40px}
  .dtw-hero--hgads .dtw-hero__visual--hgads{display:flex}
  .dtw-hgads__chips{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start;margin-top:18px}
  .dtw-hgads__legend{margin-top:22px}
  .dtw-hgads__stage{min-height:220px}
  .dtw-hgads__ad{right:22px}
  .dtw-hgads__rotbar{max-width:none}
}
@media(max-width:520px){
  .dtw-hgads__tabs span:nth-child(n+4){display:none}
  .dtw-hgads__top{gap:10px;padding:8px 14px 12px}
  .dtw-hgads__stage{padding:14px 14px 6px;min-height:240px}
  .dtw-hgads__ad{left:14px;right:14px}
  .dtw-hgads__rotbar{padding:8px 14px 4px}
  .dtw-hgads__title{font-size:16px}
}