/* ============================================================
   DataTrust Widgets · Google Ads Móvil (UNIFE)
   Mockup de teléfono, dark mode, animado. Namespace .dtw-gam.
   Azul #8ab4f8 = azul de enlace de Google en dark (realismo).
   ============================================================ */
.dtw-gam{
  --gam-pink:#F54576;
  --gam-purple:#413C58;
  --gam-muted:#8b8798;
  --gam-border:#e5e1ec;
  --gam-dark:#202124;      /* fondo Google dark */
  --gam-dark2:#303134;     /* superficies */
  --gam-dtext:#e8eaed;     /* texto claro sobre dark */
  --gam-dtext2:#9aa0a6;    /* texto secundario dark */
  --gam-dlink:#8ab4f8;     /* enlace azul en dark (Google real) */
  padding:80px 0;
  font-family:'Poppins',sans-serif;
  color:var(--gam-purple);
}
.dtw-gam--noband{background:transparent;padding:0}
.dtw-gam__wrap{width:100%;max-width:640px;margin:0 auto;padding:0 20px}

.dtw-gam__head{margin-bottom:20px;text-align:center}
.dtw-gam__eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--gam-pink);text-transform:uppercase;margin-bottom:8px}
.dtw-gam__title{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;line-height:1.25;color:var(--gam-purple)}
.dtw-gam__sub{font-size:13px;color:var(--gam-muted);margin-top:6px}

/* Teléfono */
.dtw-gam__phone-holder{display:flex;justify-content:center;margin-bottom:18px}
.dtw-gam__phone{position:relative;width:300px}
.dtw-gam__frame{position:relative;background:var(--gam-dark);border:10px solid #0D0C10;border-radius:38px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(65,60,88,.55);aspect-ratio:9/18.6}
.dtw-gam__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#0D0C10;border-radius:0 0 14px 14px;z-index:10}
.dtw-gam__screen{width:100%;height:100%;overflow:hidden;background:var(--gam-dark);transition:opacity .25s}

/* Indicadores de formato (dots) */
.dtw-gam__dots{display:flex;gap:7px;justify-content:center;margin-bottom:8px}
.dtw-gam__dot{width:7px;height:7px;border-radius:50%;background:var(--gam-border);transition:all .3s}
.dtw-gam__dot.on{background:var(--gam-pink);width:20px;border-radius:4px}

.dtw-gam__metrics{text-align:center;font-size:12.5px;color:var(--gam-muted);min-height:18px}
.dtw-gam__metrics b{color:var(--gam-purple)}
.dtw-gam__foot{text-align:center;color:#a9a4bd;font-size:12px;margin-top:10px}

/* ====== Contenido de la pantalla (dark) ====== */
.dtw-gam__scr{padding:14px 14px 18px;color:var(--gam-dtext);font-size:13px}

/* Topbar Google */
.dtw-gam__gtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dtw-gam__gmenu{font-size:20px;color:var(--gam-dtext2)}
.dtw-gam__gavatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#F54576,#413C58)}
.dtw-gam__gsearch{display:flex;align-items:center;gap:9px;background:var(--gam-dark2);border-radius:999px;padding:9px 15px;margin-bottom:12px;font-size:13.5px;color:var(--gam-dtext)}
.dtw-gam__gsearch .mic{margin-left:auto;color:var(--gam-dtext2)}
.dtw-gam__caret{display:inline-block;width:1.5px;height:15px;background:var(--gam-pink);animation:dtwGamCaret 1s step-end infinite;vertical-align:middle}
@keyframes dtwGamCaret{50%{opacity:0}}

/* Tabs Google */
.dtw-gam__gtabs{display:flex;gap:16px;font-size:13px;color:var(--gam-dtext2);border-bottom:1px solid #3c4043;padding-bottom:0;margin-bottom:14px;overflow:hidden}
.dtw-gam__gtabs span{padding-bottom:10px;white-space:nowrap}
.dtw-gam__gtabs .on{color:#fff;border-bottom:3px solid #8ab4f8;font-weight:500}

/* Sponsored */
.dtw-gam__sponsored{font-size:15px;font-weight:700;color:var(--gam-dtext);margin-bottom:14px}

/* Anuncio */
.dtw-gam__adhead{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.dtw-gam__fav{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}
.dtw-gam__fav img{width:100%;height:100%;object-fit:cover}
.dtw-gam__fav-fb{width:100%;height:100%;background:var(--gam-pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.dtw-gam__adinfo{flex:1;min-width:0}
.dtw-gam__adname{font-size:13px;color:var(--gam-dtext);font-weight:500;line-height:1.2}
.dtw-gam__adurl{font-size:12px;color:var(--gam-dtext2);line-height:1.2}
.dtw-gam__addots{color:var(--gam-dtext2);font-size:18px;align-self:flex-start}
.dtw-gam__adtitle{font-size:20px;color:var(--gam-dlink);font-weight:400;line-height:1.3;margin:6px 0 10px}
.dtw-gam__addesc{font-size:13.5px;color:var(--gam-dtext);line-height:1.5;margin-bottom:8px;opacity:.92}
.dtw-gam__advisits{font-size:13px;color:var(--gam-dtext2);margin-bottom:12px}

/* Sitelinks apilados */
.dtw-gam__sitelinks{border-top:1px solid #3c4043}
.dtw-gam__sl{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #3c4043}
.dtw-gam__sl-t{font-size:15px;color:var(--gam-dtext);font-weight:400}
.dtw-gam__sl-d{font-size:12.5px;color:var(--gam-dtext2);margin-top:3px;line-height:1.4}
.dtw-gam__sl-arrow{color:var(--gam-dtext2);font-size:18px;flex-shrink:0;margin-left:12px}

/* Display */
.dtw-gam__banner{border-radius:12px;overflow:hidden;margin-bottom:12px}
.dtw-gam__banner img{width:100%;height:180px;object-fit:cover;display:block}
.dtw-gam__banner-fb{width:100%;height:180px;background:linear-gradient(135deg,#5a2d3a,#17161a);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px;color:#fff}
.dtw-gam__banner-fb .k{font-size:10px;font-weight:600;letter-spacing:.05em;opacity:.85}
.dtw-gam__banner-fb .t{font-size:18px;font-weight:700;line-height:1.15;margin:4px 0}

/* YouTube */
.dtw-gam__yt-top{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 12px}
.dtw-gam__yt-icons{display:flex;gap:14px;color:var(--gam-dtext2);font-size:15px}
.dtw-gam__yt-art{position:relative;border-radius:0;overflow:hidden}
.dtw-gam__yt-art img{width:100%;height:200px;object-fit:cover;display:block}
.dtw-gam__yt-art-fb{width:100%;height:200px;background:linear-gradient(135deg,#3a2d4a,#17161a);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:11px}
.dtw-gam__yt-cta{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#1c3a5e}
.dtw-gam__yt-cta span:first-child{color:#8ab4f8;font-weight:500;font-size:14px}
.dtw-gam__yt-cta span:last-child{color:#8ab4f8}
.dtw-gam__yt-foot{display:flex;gap:10px;padding:14px 4px;align-items:flex-start}
.dtw-gam__yt-foot .info{flex:1}
.dtw-gam__yt-name{font-size:14px;font-weight:600;color:var(--gam-dtext)}
.dtw-gam__yt-sub{font-size:12.5px;color:var(--gam-dtext2);margin:3px 0}
.dtw-gam__yt-sp{font-size:12px;color:var(--gam-dtext2)}
.dtw-gam__yt-sp b{color:var(--gam-dtext)}

@media(max-width:520px){
  .dtw-gam__title{font-size:20px}
  .dtw-gam__phone{width:280px}
}
