/* ============================================================
   DataTrust Widgets · Hero SEO (capa de composición)
   Se apoya en hero.css (layout, copy, fondo) y serp.css (simulador).
   Solo añade lo necesario para colocar el Simulador SEO en la
   columna derecha del Hero y su comportamiento responsive.
   ============================================================ */

/* La columna derecha ya no es una imagen: contiene el simulador.
   El grid .dtw-hero__inner (1.05fr .95fr, align-items:center) de hero.css
   se reutiliza tal cual. */
.dtw-hero__visual--seo{
  min-width:0;               /* evita overflow del grid (Safari) */
  min-height:0;              /* el simulador define su propia altura */
  display:flex;
  justify-content:flex-end;  /* pega la tarjeta al borde derecho */
  align-items:center;
}

/* El simulador, transparente (--noband ya lo hace), ocupa su columna sin
   ancho máximo heredado ni padding lateral del wrap. */
.dtw-hero__visual--seo .dtw-serp{padding:0;width:100%}
.dtw-hero__visual--seo .dtw-serp__wrap{padding:0;max-width:none}
.dtw-hero__visual--seo .dtw-serp__shell{margin:0 0 0 auto}

/* --- Responsive: apilar como el Hero (contenido arriba, simulador abajo) --- */
@media(max-width:900px){
  .dtw-hero--seo .dtw-hero__inner{grid-template-columns:1fr;gap:40px}
  .dtw-hero--seo .dtw-hero__visual--seo{display:flex;justify-content:center}
  .dtw-hero__visual--seo .dtw-serp__shell{margin:0 auto}
}