/* ============================================================
   DIAGNÓSTICO DE PRESENCIA EN GOOGLE — Liliana Vianch
   Sistema de diseño alineado al branding real del sitio:
   salmón/coral + gris + contorno azul marino, tipografía
   redondeada (Baloo 2 / Nunito), botones píldora, collage
   por capas (bloque de color + grid de puntos) tal como en
   las fotos del sitio.
   ============================================================ */

:root{
  /* --- Paleta de marca (extraída de capturas del sitio) ------ */
  --dg-ink:        #3A3A42;   /* texto principal, gris-negro suave */
  --dg-ink-soft:   #86868F;   /* gris de marca (texto secundario, "Servicios") */
  --dg-bg:         #FFFFFF;   /* fondo general, como el sitio */
  --dg-surface:    #FFFFFF;   /* tarjetas */
  --dg-surface-2:  #FBEDEC;   /* tinte salmón muy suave para paneles */
  --dg-border:     #F3DEDC;   /* borde con tinte rosado, sutil */

  --dg-accent:       #EE9A96; /* salmón/coral de marca */
  --dg-accent-dark:  #DA7C77; /* salmón más oscuro (hover) */
  --dg-accent-soft:  #FCEDEC; /* salmón pálido para eyebrows/badges */
  --dg-accent-deep:  #363B5E; /* azul marino — el contorno de "Cotizar Ahora!" */

  --dg-gray-solid:      #8B8B93; /* gris de marca, para botones sólidos grandes (como "QUIEN SOY") */
  --dg-gray-solid-dark: #74747C;

  --dg-cta-1: #EE9A96;
  --dg-cta-2: #363B5E;

  /* Colores de estado — reservados EXCLUSIVAMENTE para el semáforo */
  --dg-status-excelente: #4C9A6A;
  --dg-status-bueno:     #2E9E93;
  --dg-status-regular:   #E0A23D;
  --dg-status-deficiente:#D6524C;

  --dg-status-excelente-bg: #E9F4EC;
  --dg-status-bueno-bg:     #E4F5F2;
  --dg-status-regular-bg:   #FCF0DD;
  --dg-status-deficiente-bg:#FBE9E8;

  /* --- Tipografía (según el sitio: redondeada y amigable) ----- */
  --dg-font-display: 'Baloo 2', 'Segoe UI', sans-serif;
  --dg-font-body: 'Nunito', 'Segoe UI', sans-serif;
  --dg-font-badge: 'Oswald', sans-serif;

  /* --- Forma / elevación (el sitio es plano, sombras mínimas) -*/
  --dg-radius-sm: 999px;   /* botones — píldora, como "Cotizar Ahora!" */
  --dg-radius-md: 20px;    /* tarjetas — redondeadas y suaves */
  --dg-radius-lg: 28px;
  --dg-shadow-card: 0 1px 2px rgba(58,58,66,0.04), 0 6px 18px -12px rgba(58,58,66,0.10);
  --dg-shadow-card-hover: 0 3px 8px rgba(58,58,66,0.05), 0 14px 26px -14px rgba(58,58,66,0.14);
  --dg-ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET LIGERO Y BASE
   ============================================================ */
.dg-app, .dg-app *, .dg-app *::before, .dg-app *::after{ box-sizing: border-box; }
.dg-app{
  font-family: var(--dg-font-body);
  color: var(--dg-ink);
  background: var(--dg-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 56px 20px 80px;
  line-height: 1.55;
}
.dg-app h1, .dg-app h2, .dg-app h3{
  font-family: var(--dg-font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--dg-ink);
}
.dg-app p{ margin: 0; }
.dg-app button, .dg-app input{ font-family: inherit; }
.dg-app .dg-icon{ display:inline-block; vertical-align: -3px; flex-shrink:0; }

@media (prefers-reduced-motion: reduce){
  .dg-app *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============================================================
   VISTAS (form / scan / results)
   ============================================================ */
.dg-view{ display:none; }
.dg-view.is-active{ display:block; animation: dgFadeUp 0.5s var(--dg-ease); }
@keyframes dgFadeUp{ from{ opacity:0; transform: translateY(14px); } to{ opacity:1; transform: translateY(0); } }

.dg-shell{ max-width: 620px; margin: 0 auto; }
.dg-shell--wide{ max-width: 980px; }
.dg-shell--center{ text-align:center; }

/* ============================================================
   EYEBROW — inspirado en la placa "SINCE · TECHNOLOGY · 2018"
   ============================================================ */
.dg-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--dg-font-badge);
  font-size: 12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color: var(--dg-accent-dark);
  background: var(--dg-accent-soft);
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.dg-h1{ font-size: clamp(30px, 4.4vw, 44px); font-weight:700; line-height:1.14; }
.dg-h1-accent{ color: var(--dg-accent); }
.dg-h2{ font-size: 21px; font-weight:700; margin-top:6px; }
.dg-h3{ font-size: 21px; font-weight:700; }
.dg-lead{ margin-top:16px; font-size:17px; color: var(--dg-ink-soft); max-width: 54ch; }
.dg-muted{ color: var(--dg-ink-soft); font-size: 14.5px; margin-top:4px; }

/* ============================================================
   FORMULARIO — PASO 1
   ============================================================ */
.dg-view--form{ padding-top: 24px; }
.dg-form{ margin-top: 34px; display:flex; flex-direction:column; gap:16px; }
.dg-field{ display:flex; flex-direction:column; gap:7px; }
.dg-field label{ font-size:13.5px; font-weight:700; color: var(--dg-ink); }
.dg-optional{ font-weight:400; color: var(--dg-ink-soft); }
.dg-field input{
  border: 1.5px solid var(--dg-border);
  background: var(--dg-surface);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 15.5px;
  color: var(--dg-ink);
  transition: border-color .18s var(--dg-ease), box-shadow .18s var(--dg-ease);
}
.dg-field input::placeholder{ color: #B7ABAA; }
.dg-field input:focus{
  outline:none;
  border-color: var(--dg-accent);
  box-shadow: 0 0 0 4px var(--dg-accent-soft);
}
.dg-field.is-invalid input{ border-color: var(--dg-status-deficiente); }
.dg-form-note{ text-align:center; font-size:13px; color: var(--dg-ink-soft); margin-top:2px; }

/* ============================================================
   BOTONES — píldora + contorno oscuro, como "Cotizar Ahora!"
   ============================================================ */
.dg-btn{
  --h: 54px;
  display:inline-flex !important; align-items:center; justify-content:center; gap:9px;
  height: var(--h);
  padding: 0 26px;
  border-radius: var(--dg-radius-sm);
  font-family: var(--dg-font-display);
  font-size: 16px; font-weight:600 !important;
  cursor:pointer; text-decoration:none !important; white-space: nowrap;
  transition: transform .16s var(--dg-ease), box-shadow .16s var(--dg-ease), background .16s var(--dg-ease);
}
.dg-btn:focus-visible{ outline: 3px solid var(--dg-accent-deep); outline-offset: 2px; }
.dg-btn--block{ width:100%; }
.dg-btn--primary{
  background: var(--dg-accent) !important;
  color:#fff !important;
  border: 2px solid var(--dg-accent-deep);
  box-shadow: 0 10px 22px -12px rgba(238,154,150,0.7);
}
.dg-btn--primary:hover{ background: var(--dg-accent-dark) !important; transform: translateY(-1px); }
.dg-btn--primary:hover *{ color:#fff !important; }
.dg-btn--primary:disabled{ opacity:.65; cursor:progress; transform:none; }
.dg-btn--primary, .dg-btn--primary *{ color:#fff !important; }
.dg-btn--light{
  background:#fff !important; color: var(--dg-cta-2) !important;
  border: 2px solid transparent;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,0.3);
}
.dg-btn--light, .dg-btn--light *{ color: var(--dg-cta-2) !important; }
.dg-btn--light:hover{ transform: translateY(-1px); }
.dg-btn--whatsapp{
  background: #25D366 !important;
  color:#fff !important;
  border: 2px solid rgba(255,255,255,0.7);
}
.dg-btn--whatsapp, .dg-btn--whatsapp *{ color:#fff !important; }
.dg-btn--whatsapp:hover{ background:#20bd5a !important; transform: translateY(-1px); }

.dg-restart{
  display:flex; align-items:center; gap:8px; margin: 36px auto 0;
  background:none; border:none; cursor:pointer;
  font-family: var(--dg-font-display);
  color: var(--dg-ink-soft); font-size:14.5px; font-weight:600;
  padding: 10px 18px; border-radius: 999px;
  transition: background .15s;
}
.dg-restart:hover{ background: var(--dg-surface-2); color: var(--dg-accent-dark); }

/* ============================================================
   MOTIVO DE COLLAGE POR CAPAS
   (bloque de acento + grid de puntos, tal como en las fotos
   del sitio: color detrás en una esquina + puntos en la otra)
   ============================================================ */
.dg-collage-block{
  position:absolute; background: var(--dg-accent);
  border-radius: 18px; z-index:0;
}
.dg-collage-dots{
  position:absolute; z-index:0;
  background-image: radial-gradient(var(--dg-ink-soft) 1.4px, transparent 1.4px);
  background-size: 12px 12px;
  opacity: .35;
}

/* ============================================================
   PASO 2 — ESCÁNER / ANIMACIÓN DE ANÁLISIS
   ============================================================ */
.dg-view--scan{ padding-top: 60px; }
.dg-scanner-collage{
  position:relative; width:220px; height:220px; margin: 0 auto 34px;
  display:flex; align-items:center; justify-content:center;
}
.dg-scanner-collage .dg-collage-block{ width:110px; height:110px; top:-6px; left:-6px; opacity:.9; }
.dg-scanner-collage .dg-collage-dots{ width:90px; height:90px; bottom:-8px; right:-8px; }
.dg-scanner{ position:relative; width:180px; height:180px; display:flex; align-items:center; justify-content:center; z-index:1; }
.dg-scanner-ring{
  position:absolute; inset:0; border-radius:50%;
  border: 1.5px solid var(--dg-accent-deep);
  opacity:0;
  animation: dgPing 2.2s var(--dg-ease) infinite;
}
.dg-scanner-ring--2{ animation-delay: 1.1s; }
@keyframes dgPing{ 0%{ transform: scale(.55); opacity:.5; } 100%{ transform: scale(1); opacity:0; } }
.dg-scanner-sweep{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 260deg, rgba(238,154,150,0.5) 300deg, var(--dg-accent) 360deg);
  animation: dgSpin 1.6s linear infinite;
  mask: radial-gradient(circle, transparent 46%, black 47%);
  -webkit-mask: radial-gradient(circle, transparent 46%, black 47%);
}
@keyframes dgSpin{ to{ transform: rotate(360deg); } }
.dg-scanner-core{
  position:relative; z-index:2;
  width:78px; height:78px; border-radius:50%;
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-card);
  display:flex; align-items:center; justify-content:center;
  color: var(--dg-accent-deep);
  border: 2px solid var(--dg-accent);
}
.dg-scan-title{ font-size:21px; font-weight:700; }
.dg-scan-checklist{
  list-style:none; padding:0; margin: 30px auto 0; max-width: 380px;
  display:flex; flex-direction:column; gap:11px; text-align:left;
}
.dg-scan-checklist li{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; color: var(--dg-ink-soft);
  opacity:0; transform: translateX(-6px);
  transition: opacity .35s var(--dg-ease), transform .35s var(--dg-ease), color .2s;
}
.dg-scan-checklist li.is-visible{ opacity:1; transform:none; }
.dg-scan-checklist li.is-done{ color: var(--dg-ink); }
.dg-scan-checklist .dg-scan-dot{
  width:20px; height:20px; border-radius:50%; flex-shrink:0;
  border: 1.5px solid var(--dg-border);
  display:flex; align-items:center; justify-content:center;
  color:#fff; transition: all .2s var(--dg-ease);
}
.dg-scan-checklist li.is-done .dg-scan-dot{ background: var(--dg-status-excelente); border-color: var(--dg-status-excelente); }

/* ============================================================
   PASO 3 — PANEL DE PUNTUACIÓN / MEDIDOR
   ============================================================ */
.dg-score-panel{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 12px;
  align-items: stretch;
}
.dg-score-card{
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding: 18px 18px;
  box-shadow: var(--dg-shadow-card);
}
.dg-score-card--business{ display:flex; flex-direction:column; justify-content:center; }
.dg-score-card--gauge{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.dg-score-card--meaning{ display:flex; flex-direction:column; justify-content:center; background: var(--dg-surface-2); }
.dg-score-meaning-title{ font-family: var(--dg-font-display); font-weight:700; font-size:14px; color: var(--dg-ink); margin:0 0 6px; }
.dg-score-status-text{ font-size:13.5px; color: var(--dg-ink-soft); }

@media screen and (max-width: 900px){
  .dg-score-panel{ grid-template-columns: 1fr; }
}

.dg-gauge-wrap{ position:relative; width: 190px; flex-shrink:0; margin: 6px auto 0; z-index:1; }
.dg-collage-block--gauge{ width:60px; height:60px; top:-14px; right:-10px; left:auto; opacity:.55; }
.dg-collage-dots--gauge{ width:70px; height:56px; bottom:-4px; left:-16px; }
.dg-gauge{ position:relative; z-index:1; width:100%; height:auto; overflow:visible; }
.dg-gauge-track{ fill:none; stroke: var(--dg-surface-2); stroke-width:16; stroke-linecap:round; }
.dg-gauge-band{ fill:none; stroke-width:16; stroke-linecap:butt; opacity:0.95; }
.dg-gauge-band--red{ stroke: var(--dg-status-deficiente); }
.dg-gauge-band--yellow{ stroke: var(--dg-status-regular); }
.dg-gauge-band--green{ stroke: var(--dg-status-excelente); }
.dg-gauge-needle{
  stroke: var(--dg-accent-deep); stroke-width:3.5; stroke-linecap:round;
  transform-origin: 120px 140px;
  transform: rotate(-90deg);
  transition: transform 1.4s cubic-bezier(.34,1.2,.4,1);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}
.dg-gauge-pivot{ fill: var(--dg-accent-deep); }
.dg-gauge-tick{ stroke: var(--dg-ink-soft); stroke-width:1.5; opacity:.45; }
.dg-gauge-value{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); text-align:center; line-height:1; z-index:2; }
.dg-gauge-number{
  font-family: var(--dg-font-display); font-weight:700;
  font-size: 38px; color: var(--dg-ink);
  font-variant-numeric: tabular-nums;
}
.dg-gauge-max{ font-size:14px; color: var(--dg-ink-soft); font-weight:700; }

/* ============================================================
   SECCIONES EVALUADAS — TARJETAS
   ============================================================ */
.dg-section-header{ margin: 48px 0 20px; }
.dg-cards-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.dg-card{
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-md);
  padding: 20px 20px 18px;
  box-shadow: var(--dg-shadow-card);
  transition: transform .2s var(--dg-ease), box-shadow .2s var(--dg-ease);
  display:flex; flex-direction:column; gap:12px;
}
.dg-card:hover{ transform: translateY(-3px); box-shadow: var(--dg-shadow-card-hover); }
.dg-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dg-card-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--dg-accent-soft); color: var(--dg-accent-deep);
}
.dg-card-title{ font-family: var(--dg-font-display); font-size:15px; font-weight:700; margin-top:2px; }
.dg-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px;
  white-space:nowrap; height: fit-content;
}
.dg-badge--excelente{ background: var(--dg-status-excelente-bg); color: var(--dg-status-excelente); }
.dg-badge--bueno{ background: var(--dg-status-bueno-bg); color: var(--dg-status-bueno); }
.dg-badge--regular{ background: var(--dg-status-regular-bg); color: var(--dg-status-regular); }
.dg-badge--deficiente{ background: var(--dg-status-deficiente-bg); color: var(--dg-status-deficiente); }
.dg-card-text{ font-size:13.8px; color: var(--dg-ink-soft); line-height:1.55; }

/* ============================================================
   OPORTUNIDADES — bloques rectangulares apilados de ancho
   completo, como el menú "QUIEN SOY / MARKETING / CIBERSEGURIDAD"
   ============================================================ */
.dg-opportunities{ margin-top: 56px; }
.dg-opportunities-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.dg-opportunity{
  display:flex; align-items:center; gap:16px;
  background: var(--dg-surface);
  border: 1.5px solid var(--dg-border);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--dg-shadow-card);
}
.dg-opportunity-rank{
  font-family: var(--dg-font-display); font-weight:700; font-size:19px;
  color: var(--dg-accent-deep); flex-shrink:0; width:26px;
}
.dg-opportunity-body strong{ display:block; font-family: var(--dg-font-display); font-size:14.5px; margin-bottom:3px; color: var(--dg-ink); }
.dg-opportunity-body span{ font-size:13.6px; color: var(--dg-ink-soft); }
.dg-opportunity--priority{ background: var(--dg-accent); border-color: var(--dg-accent); }
.dg-opportunity--priority .dg-opportunity-rank{ color: var(--dg-accent-deep); }
.dg-opportunity--priority .dg-opportunity-body strong,
.dg-opportunity--priority .dg-opportunity-body span{ color:#fff; }

/* ============================================================
   CTA
   ============================================================ */
.dg-cta{
  position:relative; overflow:hidden;
  margin-top: 40px;
  border-radius: var(--dg-radius-lg);
  padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(120deg, var(--dg-cta-1), var(--dg-cta-2));
  color:#fff;
  text-align:center;
}
.dg-cta, .dg-cta *{ color:#fff !important; }
.dg-cta-glow{
  position:absolute; width:100%; height:100%; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.5) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(circle at 88% 8%, black, transparent 45%);
  mask-image: radial-gradient(circle at 88% 8%, black, transparent 45%);
  opacity:.5;
}
.dg-cta-content{ position:relative; max-width:560px; margin:0 auto; }
.dg-cta-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--dg-font-badge);
  font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  background: rgba(255,255,255,0.16); padding:7px 15px; border-radius:999px;
  margin-bottom:16px;
}
.dg-cta-title{ font-size: clamp(24px,3vw,32px); font-weight:700; color:#fff; }
.dg-cta-text{ margin-top:12px; font-size:16px; opacity:.94; }
.dg-cta-actions{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media screen and (max-width: 720px){
  .dg-app{ padding: 36px 16px 60px; }
  .dg-cta-actions{ flex-direction:column; }
  .dg-cta-actions .dg-btn{ width:100%; }
}

/* ============================================================
   PASO 2.5 — CAPTURA DE LEAD (gate previo al resultado)
   ============================================================ */
.dg-view--gate{ padding-top: 40px; }
.dg-gate-card{
  position:relative;
  background: var(--dg-surface-2);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding: clamp(28px, 5vw, 44px);
  overflow:hidden;
}
.dg-collage-block--gate{ width:70px; height:70px; top:-14px; right:-14px; left:auto; opacity:.5; }
.dg-collage-dots--gate{ width:60px; height:60px; bottom:-10px; left:-10px; }
.dg-gate-card .dg-form{ position:relative; z-index:1; }
.dg-gate-card .dg-eyebrow,
.dg-gate-card .dg-h2,
.dg-gate-card .dg-lead{ position:relative; z-index:1; }

/* ============================================================
   PRUEBA SOCIAL
   ============================================================ */
.dg-social-proof{
  margin-top: 48px;
  display:flex; flex-direction:column; gap:16px;
  align-items:center; text-align:center;
}
.dg-social-rating{
  display:flex; align-items:center; gap:8px;
  color: var(--dg-accent-deep); font-family: var(--dg-font-display); font-size:15px;
}
.dg-social-rating .dg-icon{ color: var(--dg-status-regular); }
.dg-social-quotes{
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
}
.dg-social-quote{
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 13.6px; font-style:italic; color: var(--dg-ink-soft);
  max-width: 320px;
  box-shadow: var(--dg-shadow-card);
}

/* ============================================================
   URGENCIA (dentro del CTA)
   ============================================================ */
.dg-cta-urgency{
  margin-top: 10px;
  font-size: 13.5px; font-weight:700; letter-spacing:.02em;
  color: #fff; opacity:.9;
}

/* ============================================================
   INSIGNIA DE DATO REAL (cuando la sección viene de Places API)
   ============================================================ */
.dg-real-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size: 11.5px; font-weight:700;
  color: var(--dg-status-excelente);
  background: var(--dg-status-excelente-bg);
  padding: 4px 10px; border-radius: 999px;
  width: fit-content;
}

/* ============================================================
   PASO 0 — SELECCIÓN DE RAMA (¿tienes perfil de Google?)
   ============================================================ */
.dg-view--branch{ padding-top: 24px; }
.dg-branch-options{ margin-top: 30px; display:flex; flex-direction:column; gap:12px; }
.dg-branch-option{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  background: var(--dg-surface);
  border: 1.5px solid var(--dg-border);
  border-radius: 16px;
  padding: 18px 20px;
  cursor:pointer;
  transition: transform .16s var(--dg-ease), box-shadow .16s var(--dg-ease), border-color .16s var(--dg-ease);
  box-shadow: var(--dg-shadow-card);
}
.dg-branch-option:hover{ transform: translateY(-2px); border-color: var(--dg-accent); box-shadow: var(--dg-shadow-card-hover); }
.dg-branch-option-title{ font-family: var(--dg-font-display); font-weight:700; font-size:16px; color: var(--dg-ink) !important; display:block; }
.dg-branch-option-sub{ font-size:13.5px; color: var(--dg-ink-soft) !important; display:block; margin-top:3px; }
.dg-branch-arrow{ margin-left:auto; color: var(--dg-accent-deep); flex-shrink:0; }

/* ============================================================
   RADIOGRAFÍA DE OPORTUNIDADES PERDIDAS
   ============================================================ */
.dg-view--noprofile{ padding-top: 24px; }
.dg-lost-list{ list-style:none !important; margin: 28px 0 30px; padding:0; display:flex; flex-direction:column; gap:14px; }
.dg-lost-list li{
  display:flex !important; align-items:flex-start; gap:12px;
  font-size:14.5px; color: var(--dg-ink) !important; line-height:1.5;
  background: #F2F2F4 !important;
  border-radius: 14px;
  padding: 13px 16px;
  list-style:none !important;
}
.dg-lost-list li::before, .dg-lost-list li::marker{ content:none !important; }
.dg-lost-list li .dg-icon{ color: var(--dg-accent-deep) !important; margin-top:1px; flex-shrink:0; }

/* ============================================================
   HALLAZGOS (dashboard ejecutivo)
   ============================================================ */
.dg-findings-list{ display:flex; flex-direction:column; gap:14px; }
.dg-finding{
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-left: 5px solid var(--dg-status-regular);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--dg-shadow-card);
}
.dg-finding--critico{ border-left-color: var(--dg-status-deficiente); }
.dg-finding--atencion{ border-left-color: var(--dg-status-regular); }
.dg-finding--crecimiento{ border-left-color: var(--dg-accent); }
.dg-finding-top{ display:flex !important; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.dg-finding-title-wrap{ display:flex; align-items:flex-start; gap:12px; }
.dg-finding-icon{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--dg-accent-soft); color: var(--dg-accent-deep) !important;
}
.dg-finding-title{ font-family: var(--dg-font-display); font-weight:700; font-size:16px; color: var(--dg-ink) !important; margin-top:5px; }
.dg-finding-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.dg-finding-impact{ margin-top:10px; font-size:14px; color: var(--dg-ink-soft) !important; line-height:1.55; }
.dg-finding-meta{ margin-top:12px; display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; }
.dg-finding-meta span{ color: var(--dg-ink-soft) !important; }
.dg-finding-meta strong{ color: var(--dg-ink) !important; }

/* Utilidad genérica para ocultar bloques según la ruta del flujo */
.is-hidden{ display:none !important; }

/* ============================================================
   PIE DE MARCA (visible también al imprimir/compartir como PDF)
   ============================================================ */
.dg-report-footer{
  text-align:center; margin-top:18px;
  font-size:12px; color: var(--dg-ink-soft);
}
.dg-report-footer a{ color: var(--dg-accent-deep); font-weight:700; text-decoration:none; }
.dg-report-footer a:hover{ text-decoration:underline; }

/* ============================================================
   CHECKLIST DENTRO DEL CTA FINAL
   ============================================================ */
.dg-cta-checklist{
  list-style:none !important; margin: 16px 0 0; padding:0;
  display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  text-align:left;
}
.dg-cta-checklist li{
  display:flex !important; align-items:center; gap:8px;
  font-size:14px; color:#fff !important; opacity:.95;
}
.dg-cta-checklist li .dg-icon{ color:#fff !important; flex-shrink:0; }

/* ============================================================
   BOTÓN DE IMPRIMIR / DESCARGAR INFORME + ESTILOS DE IMPRESIÓN
   ============================================================ */
.dg-post-actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top: 36px;
}
.dg-post-actions .dg-restart{ margin-top:0; }
.dg-print-btn{ border: 1.5px solid var(--dg-border) !important; }

@media print{
  @page{ size: portrait; margin: 8mm; }

  /* Solo se imprime la vista de resultados; el resto de pasos y controles
     de navegación se ocultan para que el PDF se vea como un informe limpio. */
  .dg-view--form, .dg-view--branch, .dg-view--scan, .dg-view--gate, .dg-view--noprofile{ display:none !important; }
  .dg-post-actions, .dg-restart, .dg-print-btn{ display:none !important; }
  .dg-app{ padding: 0 !important; background:#fff !important; }
  .dg-card, .dg-finding, .dg-score-panel, .dg-cta{ box-shadow:none !important; break-inside: avoid; }

  /* Sin esto, muchos navegadores NO imprimen fondos de color (como el
     degradado del CTA), dejando el texto blanco invisible sobre la
     página blanca. Se fuerza en todo el informe. */
  .dg-app, .dg-app *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* El degradado del CTA final a veces se ve "lavado"/tenue en el motor
     de impresión del navegador — se usa un color sólido en su lugar,
     para que el texto blanco nunca se pierda. */
  .dg-cta{ background: var(--dg-accent) !important; }
  .dg-cta, .dg-cta *{ color: var(--dg-ink) !important; }
  .dg-btn--whatsapp, .dg-btn--whatsapp *{ color:#fff !important; }

  /* Logo y encabezado del sitio — confirmado con el inspector: son las
     clases reales de tu tema (custom-logo / site-logo / site-branding),
     ya no es un intento a ciegas. */
  .custom-logo{ max-width: 110px !important; height: auto !important; }
  .site-logo, .site-branding{ margin: 0 !important; padding: 2px 0 !important; }
  .site-header{ padding: 2px 0 !important; margin: 0 0 4px !important; min-height: 0 !important; }

  /* Intento adicional: ocultar el menú de navegación del sitio (Inicio,
     Marketing, Ciberseguridad, etc.) que aparece arriba — no es parte de
     esta herramienta, es el menú principal de tu tema. */
  nav, .main-navigation, #site-navigation, .site-header nav,
  .menu, .menu-toggle, #primary-menu{
    display: none !important;
  }

  /* Intento adicional (a ciegas) para ocultar el pie de página del sitio
     ("Todos los derechos reservados", etc.) que empuja el informe a una
     segunda hoja — no es parte de esta herramienta. */
  footer, .site-footer, #colophon, .footer, .elementor-location-footer{
    display: none !important;
  }


  /* Intento de reducir el título de la página de WordPress (fuera de esta
     herramienta) que aparece arriba en tu sitio — es un ajuste "a ciegas"
     porque depende del tema; si no funciona, se puede ocultar el título
     desde los ajustes de la página en WordPress (plantilla tipo "en blanco"
     o "sin encabezado"). */
  h1.entry-title, .page-title, .entry-header h1, article > header h1{
    font-size: 16px !important;
    margin: 0 0 4px !important;
  }

  /* Intento adicional para el espacio en blanco a los lados: algunos temas
     limitan el ancho del contenido con un contenedor propio. Se fuerza
     ancho completo en los nombres de contenedor más comunes — es otro
     ajuste "a ciegas", sin garantía si el tema usa nombres distintos. */
  .entry-content, .site-content, .content-area, .page-content,
  article, .elementor, .elementor-widget-container, .elementor-section-wrap{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Algunos temas de WordPress agregan automáticamente la URL después de
     cada enlace al imprimir (para accesibilidad) — eso es lo que hacía
     aparecer el link de WhatsApp como texto codificado ilegible. Se anula
     solo dentro de la herramienta. */
  .dg-app a[href]::after,
  .dg-app a[href]:after{
    content: "" !important;
  }

  /* ------------------------------------------------------------
     COMPRESIÓN AGRESIVA: con zoom y espacios normales no alcanzaba
     ni en horizontal, así que además de reducir todo aún más, se
     quitan del impreso las tarjetas de estadísticas (la tabla de
     categorías ya cubre información parecida) para ganar espacio.
     ------------------------------------------------------------ */
  .dg-app{ zoom: 0.48; }

  .dg-verified-banner{ display:none !important; }

  /* Insignias circulares compactas (ícono + valor, sin la etiqueta larga)
     en una sola fila, en vez de tarjetas apiladas — así no consumen casi
     nada de alto y siguen mostrando el dato. */
  .dg-stats-row{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    justify-content:space-between !important; gap:4px !important;
    margin-top:6px !important;
  }
  .dg-stat-card{
    flex:1 1 0 !important; display:flex !important; flex-direction:column !important;
    align-items:center !important; text-align:center !important;
    padding:5px 3px !important; border-radius:10px !important;
  }
  .dg-stat-card-top{ flex-direction:column !important; margin-bottom:1px !important; gap:0 !important; }
  .dg-stat-icon{ width:16px !important; height:16px !important; border-radius:50% !important; }
  .dg-stat-label{ font-size:6.5px !important; line-height:1.1 !important; }
  .dg-stat-value{ font-size:9px !important; line-height:1.1 !important; }

  .dg-shell, .dg-shell--wide{ max-width: 100% !important; }
  /* Refuerzo: el ancho de página al imprimir puede considerarse angosto,
     así que se fuerza explícitamente el layout de escritorio (3 columnas)
     en vez de dejar que las reglas responsive de pantalla se apliquen. */
  .dg-score-panel{ grid-template-columns: 1.1fr 1fr 1.1fr !important; gap: 6px !important; margin-bottom: 6px !important; }
  .dg-score-card{ padding: 8px 10px !important; border-radius: 8px !important; }
  .dg-score-meaning-title{ margin-bottom:3px !important; font-size:12px !important; }
  .dg-score-status-text{ font-size:11px !important; }
  .dg-score-highlight{ margin-top:4px !important; padding:6px 8px !important; font-size:10.5px !important; }
  .dg-gauge-wrap{ width: 110px !important; margin-top:2px !important; }
  .dg-gauge-number{ font-size: 22px !important; }
  .dg-gauge-level{ margin-top:2px !important; font-size:11px !important; }
  .dg-business-photo{ width:48px !important; height:40px !important; }
  .dg-h2{ font-size:15px !important; }
  .dg-result-meta{ font-size:10px !important; }
  .dg-maps-link{ margin-top:4px !important; font-size:10.5px !important; }
  .dg-opportunities-count{ font-size:11px !important; }

  .dg-section-header{ margin: 8px 0 5px !important; }
  .dg-h3{ font-size:12.5px !important; }
  .dg-muted{ font-size:9.5px !important; }
  .dg-legend{ margin-top:4px !important; gap:4px 10px !important; font-size:8.5px !important; }

  .dg-category-table{ border-radius:8px !important; }
  .dg-category-row{ padding:4px 8px !important; font-size:9.5px !important; }
  .dg-category-bar-track{ height:4px !important; }

  .dg-potential-banner{ margin-top:8px !important; padding:7px 10px !important; border-radius:8px !important; }
  .dg-potential-title{ margin-bottom:4px !important; font-size:11px !important; }
  .dg-potential-items{ gap:4px 10px !important; }
  .dg-potential-items span{ font-size:9px !important; }

  .dg-social-proof{ margin-top:10px !important; gap:5px !important; }
  .dg-social-rating{ font-size:11px !important; }
  .dg-social-quote{ padding:6px 8px !important; font-size:9.5px !important; }

  .dg-cta{ margin-top:10px !important; padding:12px 14px !important; border-radius:10px !important; }
  .dg-cta-eyebrow{ margin-bottom:6px !important; padding:4px 10px !important; font-size:9.5px !important; }
  .dg-cta-title{ font-size:14px !important; }
  .dg-cta-text{ margin-top:4px !important; font-size:10px !important; }
  .dg-cta-checklist{ margin-top:8px !important; gap:4px !important; }
  .dg-cta-actions{ margin-top:10px !important; }
  .dg-btn{ height:34px !important; font-size:11.5px !important; padding: 0 14px !important; }

  .dg-report-footer{ margin-top:8px !important; }

  /* Los bloques decorativos (manchas de color, puntos) no aportan al
     informe impreso y solo restan espacio. */
  .dg-collage-block, .dg-collage-dots{ display:none !important; }
}

/* ============================================================
   ESTRELLAS DE RESEÑAS (prueba social — número real, no genérico)
   ============================================================ */
.dg-social-stars{ display:inline-flex; gap:2px; }
.dg-social-stars .dg-icon{ color:#E0A23D !important; }

/* ============================================================
   CONTEO DE OPORTUNIDADES (debajo del score)
   ============================================================ */
.dg-opportunities-count{
  margin-top: 10px; font-size: 13.5px; font-weight:700;
  color: var(--dg-accent-deep) !important;
}

/* ============================================================
   LEYENDA DEL SEMÁFORO (una sola vez, arriba de los hallazgos)
   ============================================================ */
.dg-legend{
  display:flex; flex-wrap:wrap; gap: 14px 22px;
  margin-top: 14px; font-size: 12.5px; color: var(--dg-ink-soft) !important;
}
.dg-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dg-legend-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dg-legend-dot--critico{ background: var(--dg-status-deficiente) !important; }
.dg-legend-dot--atencion{ background: var(--dg-status-regular) !important; }
.dg-legend-dot--bien{ background: var(--dg-status-excelente) !important; }

/* ============================================================
   LÍNEA "POR QUÉ IMPORTA" EN CADA HALLAZGO
   ============================================================ */
.dg-finding-why{
  margin-top:6px; font-size:13px; color: var(--dg-accent-deep) !important;
  font-weight:600;
}

/* ============================================================
   FOTO/LOGO REAL DEL NEGOCIO (personalización del informe)
   ============================================================ */
.dg-result-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.dg-result-text{ min-width:0; }
.dg-business-photo{
  width:96px; height:80px; border-radius:14px; object-fit:cover;
  border: 1px solid var(--dg-border);
  box-shadow: var(--dg-shadow-card);
  flex-shrink:0;
}

/* ============================================================
   CASILLA DE CONSENTIMIENTO (tratamiento de datos personales)
   ============================================================ */
.dg-field-checkbox{ flex-direction:row !important; }
.dg-checkbox-label{
  display:flex !important; align-items:flex-start; gap:9px;
  font-size:13px; color: var(--dg-ink-soft) !important;
  cursor:pointer; line-height:1.45;
}
.dg-checkbox-label input[type="checkbox"]{
  margin-top:2px; width:16px; height:16px; flex-shrink:0; accent-color: var(--dg-accent);
}
.dg-checkbox-label a{ color: var(--dg-accent-deep) !important; font-weight:600; }
.dg-field-checkbox.is-invalid .dg-checkbox-label{ color: var(--dg-status-deficiente) !important; }

/* ============================================================
   METADATOS DEL NEGOCIO (categoría + link a Google)
   ============================================================ */
.dg-result-meta{ font-size:13px; color: var(--dg-ink-soft) !important; margin-top:2px; }
.dg-maps-link{
  display:inline-flex !important; align-items:center; gap:5px;
  margin-top:10px; font-size:13px; font-weight:700;
  color: var(--dg-accent-deep) !important; text-decoration:none !important;
}
.dg-maps-link:hover{ text-decoration:underline !important; }

/* ============================================================
   TARJETAS DE ESTADÍSTICAS RÁPIDAS
   ============================================================ */
.dg-stats-row{
  margin-top: 28px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
}
.dg-stat-card{
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--dg-shadow-card);
}
.dg-stat-card-top{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
.dg-stat-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--dg-accent-soft); color: var(--dg-accent-deep) !important;
}
.dg-stat-label{ font-size:12.5px; color: var(--dg-ink-soft) !important; }
.dg-stat-value{ font-family: var(--dg-font-display); font-weight:700; font-size:15px; color: var(--dg-ink) !important; }
.dg-stat-value--excelente{ color: var(--dg-status-excelente) !important; }
.dg-stat-value--bueno{ color: var(--dg-status-bueno) !important; }
.dg-stat-value--regular{ color: var(--dg-status-regular) !important; }
.dg-stat-value--deficiente{ color: var(--dg-status-deficiente) !important; }

/* ============================================================
   TABLA DE DIAGNÓSTICO POR CATEGORÍAS
   ============================================================ */
.dg-category-table{
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--dg-shadow-card);
}
.dg-category-row{
  display:grid; grid-template-columns: 1.6fr .9fr .7fr 1fr;
  align-items:center; gap:10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--dg-border);
  font-size: 13.5px;
}
.dg-category-row:last-child{ border-bottom:none; }
.dg-category-name{ display:flex; align-items:center; gap:9px; font-weight:600; color: var(--dg-ink) !important; }
.dg-category-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.dg-category-dot--excelente, .dg-category-dot--bueno{ background: var(--dg-status-excelente) !important; }
.dg-category-dot--regular{ background: var(--dg-status-regular) !important; }
.dg-category-dot--deficiente{ background: var(--dg-status-deficiente) !important; }
.dg-category-impact{ color: var(--dg-ink-soft) !important; }
.dg-category-bar-track{ height:7px; border-radius:999px; background: var(--dg-surface-2); overflow:hidden; }
.dg-category-bar-fill{ height:100%; border-radius:999px; }
@media screen and (max-width: 640px){
  .dg-category-row{ grid-template-columns: 1fr; gap:4px; }
}

/* ============================================================
   TARJETA DE OPORTUNIDAD (etiqueta de prioridad a la derecha)
   ============================================================ */
.dg-finding-priority-tag{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  white-space:nowrap; height:fit-content;
}
.dg-finding-priority-tag--alta{ background: var(--dg-status-deficiente-bg) !important; color: var(--dg-status-deficiente) !important; }
.dg-finding-priority-tag--media{ background: var(--dg-status-regular-bg) !important; color: var(--dg-status-regular) !important; }

/* ============================================================
   BANNER DE POTENCIAL DE MEJORA
   ============================================================ */
.dg-potential-banner{
  margin-top: 32px;
  background: var(--dg-surface-2);
  border: 1px solid var(--dg-border);
  border-radius: 16px;
  padding: 18px 22px;
}
.dg-potential-title{
  display:flex; align-items:center; gap:8px;
  font-family: var(--dg-font-display); font-weight:700; font-size:14.5px;
  color: var(--dg-accent-deep) !important; margin-bottom:12px;
}
.dg-potential-items{ display:flex; flex-wrap:wrap; gap:12px 20px; }
.dg-potential-items span{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color: var(--dg-ink) !important; font-weight:600;
}
.dg-potential-items .dg-icon{ color: var(--dg-accent-deep) !important; }

/* ============================================================
   AVISO DE DATOS VERIFICADOS CON GOOGLE
   ============================================================ */
.dg-verified-banner{
  display:flex !important; align-items:center; gap:8px;
  margin-top: 20px;
  background: var(--dg-status-excelente-bg) !important;
  color: var(--dg-status-excelente) !important;
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px; font-weight:700;
}
.dg-verified-banner, .dg-verified-banner *{ color: var(--dg-status-excelente) !important; }
.dg-verified-banner .dg-icon{ color: var(--dg-status-excelente) !important; flex-shrink:0; }
#dg-verified-banner-text{ color: var(--dg-status-excelente) !important; }

/* ============================================================
   ÍCONO DE VERIFICACIÓN JUNTO AL NOMBRE DEL NEGOCIO
   ============================================================ */
.dg-verified-check{ color: var(--dg-status-excelente) !important; vertical-align: middle; margin-left:4px; }

/* ============================================================
   NIVEL BAJO EL VELOCÍMETRO + CAJA DESTACADA DE LA TARJETA "QUÉ SIGNIFICA"
   ============================================================ */
.dg-gauge-level{
  margin-top: 8px; font-size:13.5px; font-weight:700;
  color: var(--dg-ink-soft) !important;
}
.dg-score-highlight{
  display:flex !important; align-items:flex-start; gap:8px;
  margin-top: 14px;
  background: var(--dg-status-excelente-bg) !important;
  color: var(--dg-status-excelente) !important;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.8px; font-weight:600; line-height:1.4;
}
.dg-score-highlight .dg-icon{ color: var(--dg-status-excelente) !important; flex-shrink:0; margin-top:1px; }
.dg-score-highlight, .dg-score-highlight *{ color: var(--dg-status-excelente) !important; }

/* ============================================================
   FICHA DE FECHA/HORA DEL DIAGNÓSTICO
   ============================================================ */
.dg-timestamp{
  display:flex !important; align-items:center; gap:6px;
  margin-bottom: 14px; font-size:13px; font-weight:600;
  color: var(--dg-status-excelente) !important;
}
.dg-timestamp .dg-icon{ color: var(--dg-status-excelente) !important; }

/* ============================================================
   CAMPO TRAMPA PARA BOTS (honeypot) — invisible para personas
   ============================================================ */
.dg-honeypot{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   CAJA DE VELOCIDAD REAL DEL SITIO (PageSpeed, carga diferida)
   ============================================================ */
.dg-speed-box{
  margin-top: 20px;
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--dg-shadow-card);
}
.dg-speed-box-title{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color: var(--dg-ink-soft) !important;
  margin-bottom:6px;
}
.dg-speed-box-value{ font-family: var(--dg-font-display); font-weight:700; font-size:22px; }
.dg-speed-box-detail{ font-size:12.5px; color: var(--dg-ink-soft) !important; margin-top:2px; }