:root {
  --bg: #f6f8fc;
  --bg-soft: #eef1f9;
  --card: #ffffff;
  --card-border: #e3e8f3;
  --text: #131a2e;
  --text-dim: #64708a;
  --accent: #4f7cff;
  --accent-2: #7c5cff;
  --accent-3: #14b8a6;

  /* Colores de estado: el tono "fuerte" se usa como texto/ícono (pensado
     para buen contraste sobre blanco/fondos pastel), el "-bg" es el fondo
     pastel de badges y chips. Mismos valores en pantalla e impresión. */
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --fail: #b91c1c;
  --fail-bg: #fee2e2;
  --info: #64748b;
  --info-bg: #eef1f9;

  --radius: 18px;
  --shadow-card: 0 1px 2px rgba(19, 26, 46, 0.04), 0 12px 28px rgba(19, 26, 46, 0.07);
  --shadow-card-hover: 0 4px 10px rgba(19, 26, 46, 0.06), 0 20px 40px rgba(19, 26, 46, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Movimiento reducido: se apagan blobs, entradas escalonadas y "respiración"
   de elementos decorativos para quien lo pida a nivel sistema operativo. Las
   transiciones funcionales (hover, ancho de la barra de progreso) se dejan,
   solo se acortan. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Barra superior
   ========================================================================== */
.topbar {
  padding: 0 24px;
  border-bottom: 1px solid var(--card-border);
  background: rgba(246, 248, 252, 0.75);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Mismo ancho máximo que .container: en pantallas anchas el logo queda
   alineado con el resto del contenido de la página en vez de pegado a la
   esquina izquierda de toda la ventana. */
.topbar-inner {
  max-width: 1216px;
  margin: 0 auto;
  padding: 16px 0;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(79, 124, 255, 0.3);
}

.brand h1 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.brand p { margin: 1px 0 0; font-size: 12.5px; color: var(--text-dim); }

/* ==========================================================================
   Hero: fondo decorativo + título + buscador + tarjetas destacadas
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 56px 24px 40px;
  transition: padding 0.4s ease;
}

/* Al primer "Analizar sitio" (ver resetUI() en script.js) el hero pasa a
   modo compacto: la presentación (badge, título, subtítulo, tarjetas
   destacadas, blobs) se pliega para que el buscador quede pegado arriba y la
   barra de progreso / el resultado no requieran bajar toda la página cada
   vez que se repite un análisis. */
.hero.compact { padding: 20px 24px 16px; }

.hero-badge,
.hero-title,
.hero-subtitle,
.hero-trust,
.hero-highlights {
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
  overflow: hidden;
}

.hero.compact .hero-badge,
.hero.compact .hero-title,
.hero.compact .hero-subtitle,
.hero.compact .hero-trust,
.hero.compact .hero-highlights {
  /* Anula la animación de entrada (fade-in-up, fill-mode "both"): un efecto
     de animación en curso/retenido gana por sobre cualquier regla normal del
     cascade sin importar su especificidad, así que sin este "animation: none"
     el opacity:0 de abajo quedaría ignorado y el elemento seguiría viéndose. */
  animation: none;
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

.hero.compact .hero-blobs { opacity: 0; transition: opacity 0.4s ease; }

.hero-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.blob-1 {
  width: 520px;
  height: 520px;
  top: -220px;
  left: 50%;
  transform: translateX(-60%);
  background: radial-gradient(circle, rgba(79, 124, 255, 0.35), transparent 70%);
  animation: blob-drift-1 16s ease-in-out infinite;
}

.blob-2 {
  width: 380px;
  height: 380px;
  top: -40px;
  right: -80px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.28), transparent 70%);
  animation: blob-drift-2 18s ease-in-out infinite;
}

.blob-3 {
  width: 320px;
  height: 320px;
  top: 40px;
  left: -100px;
  background: radial-gradient(circle, rgba(20, 184, 166, 0.22), transparent 70%);
  animation: blob-drift-3 20s ease-in-out infinite;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes blob-drift-1 {
    0%, 100% { transform: translateX(-60%) translateY(0) scale(1); }
    50% { transform: translateX(-55%) translateY(20px) scale(1.06); }
  }
  @keyframes blob-drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-24px, 24px) scale(1.08); }
  }
  @keyframes blob-drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -16px) scale(1.05); }
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1216px;
  margin: 0 auto;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(79, 124, 255, 0.25);
  background: rgba(79, 124, 255, 0.08);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
  animation: fade-in-up 0.6s ease both;
}

.hero-badge i { animation: sparkle-pulse 2.4s ease-in-out infinite; }

@keyframes sparkle-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.2) rotate(12deg); opacity: 0.75; }
}

.hero-title {
  margin: 0 0 16px;
  font-size: clamp(34px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  animation: fade-in-up 0.6s ease 0.05s both;
}

.hero-title-gradient {
  background: linear-gradient(120deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title-solid { color: var(--text); }

.hero-subtitle {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-dim);
  animation: fade-in-up 0.6s ease 0.1s both;
}

.hero-subtitle strong { color: var(--text); font-weight: 700; }

.hero-trust {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
  text-align: left;
}

.highlight-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: fade-in-up 0.6s ease both;
}

.highlight-card:nth-child(1) { animation-delay: 0.15s; }
.highlight-card:nth-child(2) { animation-delay: 0.25s; }
.highlight-card:nth-child(3) { animation-delay: 0.35s; }

.highlight-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

.highlight-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
}

.highlight-blue .highlight-icon { background: #e5edff; color: var(--accent); }
.highlight-green .highlight-icon { background: #e2f8f1; color: #0d9488; }
.highlight-amber .highlight-icon { background: #fef3e2; color: #b45309; }

.highlight-card h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.highlight-card p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }

/* ==========================================================================
   Layout general
   ========================================================================== */
/* Mismo patrón que .topbar/.topbar-inner y .hero/.hero-inner: .container es
   el wrapper de ancho completo que aporta el padding lateral, y
   .container-inner es quien centra el contenido a max-width. Antes
   .container hacía las dos cosas a la vez (max-width Y padding en la misma
   caja), lo que corría su contenido ~24px hacia adentro respecto al logo del
   topbar y al buscador del hero (que no tienen ese padding extra) — de ahí
   el desfase de ancho entre secciones. */
.container {
  padding: 0 24px 80px;
}

.container-inner {
  max-width: 1216px;
  margin: 0 auto;
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

.search-card {
  padding: 20px 22px;
  max-width: 1216px;
  margin: 0 auto 0;
  text-align: left;
  animation: fade-in-up 0.6s ease 0.15s both;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 6px 6px 6px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
}

.input-icon { color: var(--text-dim); }

#url-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px;
  padding: 12px 0;
  font-family: inherit;
}

#url-input::placeholder { color: var(--text-dim); }

#submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

#submit-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(79, 124, 255, 0.35); }
#submit-btn:active { transform: translateY(0) scale(0.97); }
#submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--text-dim);
}

.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox input { accent-color: var(--accent); width: 15px; height: 15px; }

.hidden { display: none !important; }

.progress-card { padding: 20px 24px; }

.progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

#progress-label { color: var(--text); font-weight: 500; }

.progress-track {
  height: 10px;
  border-radius: 6px;
  background: var(--bg-soft);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.4s ease;
}

.error-card {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fail);
  border-color: #fecaca;
  background: var(--fail-bg);
}

.print-header {
  display: none; /* solo visible al imprimir, ver @media print */
}

.results-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.print-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Rojo "documento PDF" (mismo token --fail que ya usa el resto del sitio
     para íconos/badges de error) en vez del gris neutro anterior, que se
     perdía entre los gráficos de colores del reporte al bajar la página. */
  background: var(--fail-bg);
  border: 1.5px solid var(--fail);
  color: var(--fail);
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.print-btn i { color: var(--fail); font-size: 17px; }

.print-btn:hover { background: #fecaca; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(185, 28, 28, 0.25); }
.print-btn:active { transform: translateY(0) scale(0.97); }

/* --- Tareas prioritarias --- */
.priority-card {
  border-color: rgba(79, 124, 255, 0.25);
  background: linear-gradient(180deg, rgba(79, 124, 255, 0.05), var(--card) 60%);
}

.priority-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.priority-subtitle {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--text-dim);
}

.priority-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: priority-counter;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.priority-item {
  counter-increment: priority-counter;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.priority-item:hover { border-color: var(--accent); transform: translateX(3px); box-shadow: var(--shadow-card); }

.priority-item::before {
  content: counter(priority-counter);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(79, 124, 255, 0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.priority-icon { display: none; } /* el número del contador ya identifica el orden */

.priority-body { flex: 1; min-width: 0; }

.priority-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.priority-label { font-weight: 700; font-size: 14px; }

.priority-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.priority-badge-fail { background: var(--fail-bg); color: var(--fail); }
.priority-badge-warn { background: var(--warn-bg); color: var(--warn); }

.priority-category {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.priority-detail {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 6px;
  word-break: break-word;
}

.priority-fix {
  font-size: 12px;
  color: #1e3a8a;
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.priority-fix i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

@keyframes highlight-flash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px var(--accent); }
}

.highlight-flash { animation: highlight-flash 1.5s ease; }

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin: 28px 4px 12px;
}

.section-title:first-of-type { margin-top: 4px; }

/* El auto-scroll (ver scrollToSummary() en script.js) apunta acá: scroll-
   margin-top deja lugar para la barra superior sticky (~75px), así el
   destino del scroll queda debajo de ella en vez de tapado, y "Resumen
   general" termina siendo el primer texto visible tras el scroll.
   Vive DENTRO de .summary-card (que es flex): flex-basis 100% lo fuerza a
   ocupar toda la fila y hace que el resto de los hijos (anillo, detalles,
   barras) bajen a la línea siguiente en vez de quedar al lado del título.
   El padding de 24px de .card ya da aire arriba, así que solo hace falta
   margen abajo para separarlo del resto del contenido. */
#summary-heading {
  scroll-margin-top: 92px;
  flex: 0 0 100%;
  margin: 0 0 18px;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#live-summary-wrap {
  animation: fade-in-up 0.4s ease;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.score-gauge { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; }

.big-ring {
  position: relative;
  isolation: isolate; /* crea un contexto de apilamiento propio: el numero
                          siempre queda arriba del "hueco" del anillo, sin
                          depender de z-index heredados de contenedores padres */
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring-color, var(--accent)) calc(var(--pct, 0) * 1%), var(--bg-soft) 0);
  /* Nota: no se usa "transition: background" aquí a propósito. Los
     navegadores no interpolan de forma confiable un conic-gradient() que
     depende de custom properties (--pct) sin registrarlas con @property, así
     que el cambio se vería como un salto brusco en vez de un movimiento
     suave. En su lugar, --pct se anima manualmente desde JS (ver
     animateRingValue en script.js), frame a frame, lo que funciona igual en
     todos los navegadores. */
}

.big-ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--card);
  z-index: 0;
}

.score-number {
  position: relative;
  z-index: 1;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
}

/* Mientras el análisis está en curso, el anillo "respira" (crece y se
   reduce) para transmitir que sigue trabajando, además de ir creciendo de
   verdad conforme cambia --pct con cada categoría que termina. Se quita la
   clase .pulsing en cuanto el análisis termina. */
@keyframes ring-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.big-ring.pulsing {
  animation: ring-pulse 1.6s ease-in-out infinite;
}

.score-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.widget-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 9px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.widget-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.widget-btn i { color: var(--accent); }

.summary-details { flex: 1; min-width: 240px; }
.summary-details h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; word-break: break-all; color: var(--text-dim); }

/* Grilla de barras por categoría dentro del propio "Resumen general" (idea
   tomada de la tarjeta de puntuación de Seobility): da un vistazo completo
   de las 18 categorías sin tener que bajar hasta "Puntuación por categoría".
   flex-basis:100% la manda a una fila propia debajo del anillo+detalles,
   ya que .summary-card es un flex container. */
.summary-bars {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--card-border);
}

.summary-bar-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.summary-bar-row span:last-child { color: var(--text-dim); font-weight: 700; }

.summary-bar-track {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
}

.summary-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.summary-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

.badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-fail { background: var(--fail-bg); color: var(--fail); }

.summary-meta { font-size: 13px; color: var(--text-dim); display: flex; gap: 18px; flex-wrap: wrap; }
.summary-meta span { display: inline-flex; align-items: center; gap: 6px; }

.chart-card h3, .rings-card h3, .screenshots-card h3 { margin: 0 0 18px; font-size: 16px; font-weight: 700; }

/* --- Anillos circulares por categoría --- */
.rings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 22px 12px;
}

.ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(var(--ring-color, var(--accent)) calc(var(--pct, 0) * 1%), var(--bg-soft) 0);
  transition: background 0.6s ease, transform 0.15s ease;
}

.ring-item:hover .ring { transform: scale(1.05); }

.ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--card);
}

.ring span {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 17px;
}

.ring-label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  line-height: 1.3;
  max-width: 120px;
}

/* --- Capturas de pantalla del sitio --- */
.screenshots-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.screenshot-item {
  flex: 1;
  min-width: 220px;
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}

.screenshot-item .screenshot-label {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.screenshot-item img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-soft);
}

.screenshot-item.desktop img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.screenshot-item.mobile { flex: 0 0 240px; }

/* El marco del móvil tiene ancho y alto FIJOS en píxeles (no depende de la
   propiedad CSS aspect-ratio combinada con flex, que puede comportarse de
   forma distinta según el navegador). Al fijar ambas dimensiones del marco
   y decirle a la imagen que llene ese marco exacto (width/height:100%) con
   object-fit:contain, la imagen JAMÁS puede desbordarse ni quedar recortada
   sin importar el tamaño real que devuelva el servicio de capturas: si no
   coincide exactamente con 220x440 simplemente se ve con márgenes blancos,
   nunca cortada. */
.screenshot-item.mobile .screenshot-body {
  width: 220px;
  height: 440px;
  margin: 0 auto;
  overflow: hidden;
}

.screenshot-item.mobile .screenshot-body img {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.screenshots-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}

.screenshot-body {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenshot-loading {
  padding: 30px 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.screenshot-loading i { font-size: 18px; color: var(--accent); }

.screenshot-error {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.screenshot-error i { font-size: 20px; color: var(--warn); }
.screenshot-error p { margin: 0; }

.screenshot-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.screenshot-link:hover { text-decoration: underline; }

.retry-screenshot-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.retry-screenshot-btn:hover { background: var(--bg-soft); }

.category-card { padding: 0; overflow: hidden; transition: box-shadow 0.2s ease; }

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
}

.category-header:hover { background: var(--bg-soft); }

.category-title { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }

.category-header-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.category-bar {
  display: none; /* aparece a partir de --sm, ver media query: en angosto no entra junto al título */
  width: 90px;
  height: 6px;
  border-radius: 4px;
  background: var(--bg-soft);
  overflow: hidden;
}

.category-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

@media (min-width: 480px) {
  .category-bar { display: block; }
}

.category-score {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.score-high { background: var(--ok-bg); color: var(--ok); }
.score-mid { background: var(--warn-bg); color: var(--warn); }
.score-low { background: var(--fail-bg); color: var(--fail); }
.score-unverified { background: var(--info-bg); color: var(--info); }

.category-pending-note {
  padding: 8px 22px;
  font-size: 12.5px;
  color: var(--info);
  background: var(--info-bg);
  border-top: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-toggle { color: var(--text-dim); transition: transform 0.2s ease; }
.category-card.open .category-toggle { transform: rotate(180deg); }

.category-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  border-top: 1px solid var(--card-border);
}

.category-card.open .category-body { max-height: 3000px; }

.check-item {
  display: flex;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--card-border);
  font-size: 14px;
}

.check-item:last-child { border-bottom: none; }

.check-icon { margin-top: 2px; flex-shrink: 0; width: 18px; text-align: center; }
.check-icon.ok { color: var(--ok); }
.check-icon.warn { color: var(--warn); }
.check-icon.fail { color: var(--fail); }
.check-icon.info { color: var(--info); }
.check-icon.pending { color: var(--info); }

.check-label { font-weight: 600; }
.check-detail { color: var(--text-dim); margin-top: 2px; word-break: break-word; }

.check-samples {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.5;
}

.check-samples li {
  word-break: break-word;
  margin-bottom: 2px;
}

.check-samples-more { font-style: italic; opacity: 0.8; }

.check-samples-collapsible { display: none; }
.check-samples.expanded .check-samples-collapsible { display: list-item; }

.check-samples-toggle {
  display: inline-block;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.check-samples-toggle:hover { text-decoration: underline; }

.check-fix {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(79, 124, 255, 0.08);
  border: 1px solid rgba(79, 124, 255, 0.2);
  border-radius: 8px;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.4;
}

.check-fix i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* ==========================================================================
   Gauges de Core Web Vitals (estilo PageSpeed Insights/GTmetrix) y panel de
   sugerencias de PSI
   ========================================================================== */

@keyframes psi-gauge-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.psi-gauges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--card-border);
}

.psi-gauge {
  animation: psi-gauge-in 0.5s ease both;
}

.psi-gauge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.psi-gauge-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.psi-gauge-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.psi-gauge-badge-good { background: var(--ok-bg); color: var(--ok); }
.psi-gauge-badge-needs-improvement { background: var(--warn-bg); color: var(--warn); }
.psi-gauge-badge-poor { background: var(--fail-bg); color: var(--fail); }

.psi-gauge-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  overflow: visible;
  margin-top: 22px; /* deja lugar al valor que flota sobre la barra */
}

.psi-gauge-value {
  position: absolute;
  top: -20px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  /* El color (verde/naranja/rojo de texto según la calificación) lo pone
     el JS por style inline, ver PSI_RATING_COLORS en script.js. */
  white-space: nowrap;
  /* Posicionado (y animado) relativo al track, igual que el marcador de
     abajo, para que quede siempre exactamente arriba de él. */
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.psi-gauge-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  /* El color (verde/naranja/rojo vivo) lo pone el JS por style inline. */
  border: 2px solid var(--card);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(19, 26, 46, 0.35);
  transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.psi-gauge-thresholds {
  position: relative;
  height: 14px;
  margin-top: 2px;
}

.psi-gauge-thresholds span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

.psi-opportunities-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--info-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.psi-opportunities-toggle:hover { background: #e4e9f7; }
.psi-opportunities-toggle i.fa-lightbulb { color: var(--warn); }
.psi-opportunities-toggle span { flex: 1; }

.psi-opportunities-caret { transition: transform 0.2s ease; color: var(--text-dim); }
.psi-opportunities-toggle.expanded .psi-opportunities-caret { transform: rotate(180deg); }

.psi-opportunities-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.psi-opportunities-list.expanded { max-height: 3000px; }

.psi-opportunity {
  padding: 12px 4px;
  border-bottom: 1px solid var(--card-border);
}

.psi-opportunity:last-child { border-bottom: none; }

.psi-opportunity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 4px;
}

.psi-opportunity-title { font-size: 13.5px; font-weight: 700; color: var(--text); }

.psi-opportunity-savings {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-3);
  white-space: nowrap;
}

.psi-opportunity-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}

.psi-opportunity-desc a { color: var(--accent); }

footer {
  text-align: center;
  padding: 30px;
  color: var(--text-dim);
  font-size: 12px;
}

.build-version {
  margin-top: 4px;
  opacity: 0.7;
  font-size: 11px;
}

/* ==========================================================================
   Modal: widget de certificación
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(19, 26, 46, 0.5);
  backdrop-filter: blur(2px);
  animation: fade-in-up 0.2s ease both;
}

.modal-panel {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--card-border);
  position: sticky;
  top: 0;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.modal-header h3 i { color: var(--accent); }

.modal-close {
  background: var(--bg-soft);
  border: none;
  color: var(--text-dim);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-close:hover { background: var(--fail-bg); color: var(--fail); }

.modal-body { padding: 22px; }

.widget-intro { margin: 0 0 20px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }

.widget-options { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 22px; }

.widget-option-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.widget-option-buttons { display: flex; gap: 8px; }

.widget-option-btn {
  background: var(--bg-soft);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}

.widget-option-btn:hover { border-color: var(--accent); color: var(--text); }

.widget-option-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}

.widget-block-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin: 0 0 8px;
}

.widget-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 24px;
  border-radius: 12px;
  background:
    linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(-45deg, var(--bg-soft) 25%, transparent 25%) -8px 0 / 16px 16px,
    var(--card);
  border: 1px solid var(--card-border);
  margin-bottom: 22px;
}

.widget-code-wrap { position: relative; margin-bottom: 18px; }

.widget-code {
  margin: 0;
  padding: 16px 18px;
  padding-right: 130px;
  background: #131a2e;
  color: #cbd5f5;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 180px;
  overflow-y: auto;
}

.widget-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.widget-copy-btn:hover { transform: translateY(-1px); }
.widget-copy-btn:active { transform: translateY(0) scale(0.97); }
.widget-copy-btn.copied { background: var(--ok); }

.widget-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.widget-note i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }

@media (max-width: 760px) {
  .hero-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .topbar { padding: 0 16px; }
  .topbar-inner { padding: 14px 0; }
  .hero { padding: 40px 16px 32px; }
  .container { padding: 0 14px 60px; }
  .input-row { flex-wrap: wrap; }
  #submit-btn { width: 100%; justify-content: center; }
  .summary-card { flex-direction: column; text-align: center; }
  .summary-bars { grid-template-columns: 1fr; text-align: left; }
  .rings-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 18px 8px; }
  .ring { width: 70px; height: 70px; }
  .ring span { font-size: 14px; }
  .screenshots-grid { flex-direction: column; }
  .screenshot-item.mobile { flex: 1; max-width: none; }
  .screenshot-item.mobile .screenshot-body { width: 220px; height: 440px; }
}

/* ==========================================================================
   Impresión / exportar a PDF
   Se usa window.print() -> el usuario elige "Guardar como PDF" en el diálogo
   de impresión del navegador. El tema ya es claro en pantalla, así que estas
   reglas solo (1) ocultan todo lo que no es el reporte en sí, (2) fuerzan que
   las categorías colapsadas se vean completas (si no, el acordeón las
   imprimiría vacías), (3) evitan que las tarjetas se corten a la mitad entre
   una página y otra, y (4) apagan las animaciones/blobs decorativos.
   ========================================================================== */
@media print {
  /* Por defecto, los navegadores DESCARTAN todo background/background-image
     al imprimir (para "ahorrar tinta"), a menos que se les diga lo
     contrario: sin esto, los anillos (conic-gradient), las barras de
     categoría, los gauges de Core Web Vitals y las insignias de estado
     imprimen sin ningún color — todo el reporte se ve en blanco y negro. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .topbar,
  .hero,
  .progress-card,
  .error-card,
  .results-toolbar,
  footer,
  .category-toggle,
  .retry-screenshot-btn,
  .screenshot-loading {
    display: none !important;
  }

  .print-header {
    display: block !important;
    margin-bottom: 20px;
  }

  .print-header h1 { margin: 0 0 4px; font-size: 22px; }
  .print-header p { margin: 2px 0; font-size: 12px; color: #444; }

  body { background: #fff !important; }

  .container { padding: 0; }
  .container-inner { max-width: 100%; }

  .card {
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .ring::before, .big-ring::before { background: #fff !important; }

  /* El acordeón se colapsa con max-height en pantalla; al imprimir mostramos
     todo el contenido de cada categoría sin excepción. */
  .category-body {
    max-height: none !important;
    overflow: visible !important;
  }

  .check-item { break-inside: avoid; }

  /* Los gauges de Core Web Vitals y el panel de sugerencias de PSI deben
     verse completos en el PDF exportado — nada de acordeones colapsados ni
     animaciones de entrada a mitad de camino. Este es justamente el motivo
     por el que existe el panel: que el cliente vea las sugerencias sin
     tener que abrir pagespeed.web.dev aparte. */
  .psi-opportunities-list { max-height: none !important; overflow: visible !important; }
  .psi-opportunities-toggle { background: none !important; border: none !important; padding: 4px 0 !important; }
  .psi-opportunities-caret { display: none !important; }
  .psi-gauge { animation: none !important; opacity: 1 !important; transform: none !important; }
  .psi-gauge-marker, .psi-gauge-value { transition: none !important; }
  .psi-gauge, .psi-opportunity { break-inside: avoid; }

  /* Al imprimir se ven todos los elementos de cada lista, sin depender del
     botón "ver más" (que no tiene sentido en papel). */
  .check-samples-collapsible { display: list-item !important; }
  .check-samples-toggle { display: none !important; }

  .screenshot-item, .ring-item, .category-card, .highlight-card { break-inside: avoid; }

  a { color: #1d4ed8 !important; text-decoration: underline; }
}