/* =====================================================================
   CAPITAL GUARANÍ — Estilos del sitio público
   Entrega 008 — paleta de la marca
   Mobile-first.

   PALETA
   Los tres colores salen del logo, medidos sobre los archivos originales:
   azul marino #06203F, dorado #AF7631 y turquesa #037C7E.

   Sobre el dorado hay una decisión que conviene no deshacer. El dorado de
   la marca da 3,85:1 sobre blanco, y el mínimo accesible para texto chico
   es 4,5:1. Así que el dorado de marca se usa para trazos, bordes, íconos
   y títulos grandes, y para texto chico existe `--cg-oro-texto`, que es el
   mismo tono oscurecido hasta 5:1. No son dos dorados por capricho: son el
   dorado que se ve y el dorado que se lee.

   Por lo mismo, el botón principal es azul marino con texto blanco
   (16,3:1) y no dorado con texto oscuro, que no llegaría al mínimo.
   ===================================================================== */

:root {
  /* Azul marino: la estructura */
  --cg-navy:         #06203f;
  --cg-navy-claro:   #0e3461;
  --cg-navy-hondo:   #01173e;
  --cg-navy-suave:   #e7ecf3;

  /* Dorado: el acento */
  --cg-oro:          #af7631;
  --cg-oro-texto:    #95652a;
  --cg-oro-claro:    #c48736;
  --cg-oro-suave:    #f6ebda;

  /* Turquesa: el detalle */
  --cg-teal:         #037c7e;
  --cg-teal-claro:   #00beb7;
  --cg-teal-suave:   #e3f2f1;

  /* Neutros */
  --cg-nieve:        #f8fafb;
  --cg-nube:         #edf1f5;
  --cg-tinta:        #16202e;
  --cg-gris:         #5c6673;
  --cg-borde:        #e1e6ec;

  --cg-radio:        12px;
  --cg-sombra:       0 1px 2px rgba(6,32,63,.05), 0 8px 24px rgba(6,32,63,.07);

  /* Nombres viejos, por si quedó algo sin migrar. No usar en código nuevo. */
  --cg-verde:        var(--cg-navy);
  --cg-verde-claro:  var(--cg-navy-claro);
  --cg-verde-suave:  var(--cg-navy-suave);
  --cg-arena:        var(--cg-nieve);
  --cg-arena-media:  var(--cg-nube);
  --cg-ambar:        var(--cg-oro);
  --cg-ambar-claro:  var(--cg-oro-suave);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--cg-tinta);
  background: #ffffff;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .cg-marca, .cg-pie-marca {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

a { color: var(--cg-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cg-navy-claro); }

/* Accesibilidad -------------------------------------------------- */
.cg-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--cg-navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--cg-radio) 0; text-decoration: none;
}
.cg-saltar:focus { left: 0; color: #fff; }

:focus-visible {
  outline: 3px solid var(--cg-oro);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cabecera ------------------------------------------------------- */
.cg-cabecera {
  background: #fff;
  border-bottom: 1px solid var(--cg-borde);
  position: sticky; top: 0; z-index: 1030;
}
.cg-cabecera .navbar { padding-top: .75rem; padding-bottom: .75rem; }
.cg-marca { font-size: 1.3rem; color: var(--cg-navy); }
.cg-cabecera .nav-link {
  color: var(--cg-tinta); font-weight: 500; font-size: .95rem;
  padding-left: .85rem; padding-right: .85rem;
}
.cg-cabecera .nav-link:hover,
.cg-cabecera .nav-link:focus { color: var(--cg-navy); }
.navbar-toggler { border-color: var(--cg-borde); }
.navbar-toggler:focus { box-shadow: none; }

/* Botones -------------------------------------------------------- */
.btn-cg, .btn-cg:visited {
  background: var(--cg-navy); color: #fff; border: 1px solid var(--cg-navy);
  border-radius: 999px; padding: .62rem 1.5rem; font-weight: 600; font-size: .95rem;
  transition: background .15s ease, transform .15s ease;
}
.btn-cg:hover, .btn-cg:focus { background: var(--cg-navy-claro); border-color: var(--cg-navy-claro); color: #fff; }
.btn-cg:active { transform: translateY(1px); }

.btn-cg-outline, .btn-cg-outline:visited {
  background: transparent; color: var(--cg-navy); border: 1px solid var(--cg-borde);
  border-radius: 999px; padding: .62rem 1.5rem; font-weight: 600; font-size: .95rem;
}
.btn-cg-outline:hover, .btn-cg-outline:focus {
  border-color: var(--cg-navy); background: var(--cg-navy-suave); color: var(--cg-navy);
}

.btn-cg-ambar, .btn-cg-ambar:visited {
  background: var(--cg-oro); color: #fff; border: 1px solid var(--cg-oro);
  border-radius: 999px; padding: .62rem 1.5rem; font-weight: 600;
}
.btn-cg-ambar:hover { background: var(--cg-oro-texto); border-color: var(--cg-oro-texto); color: #fff; }

.btn-lg { padding: .85rem 2rem; font-size: 1.02rem; }

/* Portada -------------------------------------------------------- */
.cg-hero {
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(194,134,58,.13), transparent 60%),
    linear-gradient(180deg, var(--cg-nieve) 0%, #ffffff 100%);
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--cg-borde);
}
@media (min-width: 992px) { .cg-hero { padding: 5.5rem 0 4.5rem; } }

.cg-hero h1 { margin-bottom: 1.1rem; }
.cg-hero-bajada {
  font-size: 1.1rem; color: var(--cg-gris); max-width: 42rem; margin-bottom: 1.9rem;
}
@media (min-width: 992px) { .cg-hero-bajada { font-size: 1.2rem; } }

.cg-etiqueta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--cg-navy-suave); color: var(--cg-navy);
  border-radius: 999px; padding: .34rem .9rem;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  margin-bottom: 1.2rem;
}

/* Secciones ------------------------------------------------------ */
.cg-seccion { padding: 3.2rem 0; }
@media (min-width: 992px) { .cg-seccion { padding: 4.5rem 0; } }
.cg-seccion-arena { background: var(--cg-nieve); }
/* Entrega 010 — `g-5` separa las columnas 3rem, y para eso la fila usa
   márgenes negativos de 24px por lado. El `.container` solo tiene 12px
   de relleno, así que en celular sobraban 12px y la página se podía
   correr de costado. Se achica la separación horizontal; la vertical
   queda igual. */
@media (max-width: 575.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

.cg-seccion-titulo { margin-bottom: .75rem; }
.cg-seccion-intro { color: var(--cg-gris); max-width: 44rem; margin-bottom: 2.4rem; }

/* Tarjetas ------------------------------------------------------- */
.cg-tarjeta {
  background: #fff; border: 1px solid var(--cg-borde); border-radius: var(--cg-radio);
  padding: 1.6rem; height: 100%; box-shadow: var(--cg-sombra);
}
/* Entrega 010 — `height: 100%` sirve para emparejar el alto de tarjetas
   que están una al lado de la otra, con una sola por columna. Cuando hay
   DOS apiladas en la misma columna cada una tomaba el alto completo de
   la columna, así que entre las dos medían el doble y se derramaban
   sobre la sección siguiente: eso era lo que pisaba las preguntas
   frecuentes en «Cómo funciona». Apiladas, cada una mide lo suyo. */
.cg-tarjeta:not(:only-child) { height: auto; }
.cg-tarjeta h3 { font-size: 1.12rem; margin-bottom: .55rem; }
.cg-tarjeta p { color: var(--cg-gris); margin-bottom: 0; font-size: .95rem; }

.cg-icono {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--cg-navy-suave); color: var(--cg-navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.cg-icono-ambar { background: var(--cg-oro-suave); color: var(--cg-oro); }

/* Pasos ---------------------------------------------------------- */
.cg-paso { display: flex; gap: 1.1rem; margin-bottom: 1.8rem; }
.cg-paso-numero {
  flex: 0 0 38px; height: 38px; border-radius: 50%;
  background: var(--cg-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem;
}
.cg-paso h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.cg-paso p { color: var(--cg-gris); margin-bottom: 0; font-size: .95rem; }

/* Bloque de franqueza -------------------------------------------- */
.cg-franqueza {
  background: var(--cg-navy); color: #fff;
  border-radius: var(--cg-radio); padding: 2rem;
}
.cg-franqueza h2 { color: #fff; }
.cg-franqueza p { color: rgba(255,255,255,.82); margin-bottom: 0; }
@media (min-width: 992px) { .cg-franqueza { padding: 3rem; } }

/* Formularios ---------------------------------------------------- */
.cg-caja {
  max-width: 480px; margin: 0 auto;
  background: #fff; border: 1px solid var(--cg-borde);
  border-radius: var(--cg-radio); padding: 1.8rem; box-shadow: var(--cg-sombra);
}
.cg-caja-ancha { max-width: 760px; }
.cg-caja h1 { font-size: 1.6rem; margin-bottom: .4rem; }
.cg-caja .form-label { font-weight: 500; font-size: .92rem; margin-bottom: .3rem; }
.form-control, .form-select {
  border-radius: 9px; border-color: var(--cg-borde); padding: .62rem .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cg-navy-claro);
  box-shadow: 0 0 0 .2rem rgba(23,88,74,.12);
}
.form-text { font-size: .84rem; color: var(--cg-gris); }

/* Contenido administrable ---------------------------------------- */
.cg-contenido { font-size: 1.03rem; }
.cg-contenido h2 { margin-top: 2.2rem; margin-bottom: .8rem; }
.cg-contenido h3 { margin-top: 1.7rem; margin-bottom: .6rem; }
.cg-contenido p, .cg-contenido ul, .cg-contenido ol { margin-bottom: 1.1rem; }
.cg-contenido img { max-width: 100%; height: auto; border-radius: var(--cg-radio); }
.cg-contenido table { width: 100%; margin-bottom: 1.3rem; border-collapse: collapse; }
.cg-contenido th, .cg-contenido td { border: 1px solid var(--cg-borde); padding: .6rem .75rem; }
.cg-contenido th { background: var(--cg-nieve); text-align: left; }
.cg-contenido li { margin-bottom: .35rem; }

/* =====================================================================
   Entrega 011 — Páginas administrables: recuadro centrado
   ===================================================================== */

/* El encabezado y el recuadro comparten ancho y centro, así el título
   queda justo encima del texto y no corrido a un lado. */
.cg-hero-centrado { text-align: center; }
.cg-pagina-encabezado { max-width: 52rem; margin: 0 auto; }

/* El recuadro: blanco sobre el fondo gris de la sección, centrado.
   52rem da una línea de unos 78 caracteres, que es donde el ojo todavía
   encuentra el renglón siguiente sin perderse. Más ancho se lee peor,
   por más que sobre lugar en la pantalla. */
.cg-pagina-caja {
  max-width: 52rem; margin: 0 auto;
  background: #fff; border: 1px solid var(--cg-borde);
  border-radius: var(--cg-radio); box-shadow: var(--cg-sombra);
  padding: 3rem;
}
@media (max-width: 767.98px) {
  .cg-pagina-caja { padding: 1.5rem; border-radius: 10px; }
}
.cg-pagina-revision { margin: 2.5rem 0 0; text-align: center; }

/* Títulos centrados y texto justificado.
   La partición de palabras es imprescindible acá: justificar sin
   partir, en español y portugués, abre huecos enormes entre palabras.
   Funciona porque la etiqueta <html> declara el idioma. */
.cg-contenido-pagina {
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
}
.cg-contenido-pagina h2,
.cg-contenido-pagina h3,
.cg-contenido-pagina h4 { text-align: center; hyphens: none; }
.cg-contenido-pagina h2 { margin-top: 2.6rem; }
.cg-contenido-pagina h2:first-child,
.cg-contenido-pagina > :first-child { margin-top: 0; }

/* En celular NO se justifica. Con 316 px de ancho útil y palabras largas
   como «responsabilidad» o «consentimiento», justificar deja renglones
   con el triple de espacio entre palabras: se ven canales blancos
   bajando por el texto y cuesta leer. La partición de palabras ayuda
   pero no alcanza a ese ancho.
   Si lo querés justificado también en el teléfono, cambiá `left` por
   `justify` acá abajo. */
@media (max-width: 575.98px) {
  .cg-contenido-pagina { text-align: left; }
}

/* Lo que no se justifica nunca: una celda o un renglón corto justificado
   queda con las palabras desparramadas. */
.cg-contenido-pagina th,
.cg-contenido-pagina td,
.cg-contenido-pagina code { text-align: left; hyphens: none; }
.cg-contenido-pagina a { hyphens: none; }

/* Alineación elegida desde el editor del panel (entrega 011). */
.cg-al-izquierda  { text-align: left !important; }
.cg-al-centro     { text-align: center !important; }
.cg-al-derecha    { text-align: right !important; }
.cg-al-justificado{ text-align: justify !important; }

/* Entrega 009 — piezas que usan las páginas legales e institucionales. */

/* Primer párrafo: resume la página para quien no la va a leer entera. */
.cg-contenido .cg-entradilla {
  font-size: 1.16rem; line-height: 1.6; color: var(--cg-tinta);
  border-left: 3px solid var(--cg-oro); padding-left: 1rem;
  margin-bottom: 1.6rem;
}

/* Nombres de cookies y códigos de licencia. */
.cg-contenido code {
  font-size: .9em; color: var(--cg-navy-claro);
  background: var(--cg-navy-suave); border-radius: 4px;
  padding: .12rem .34rem; word-break: break-word;
}

/* Las tablas de cookies y de bases legales no caben en un celular: en
   pantalla chica se desplazan en lugar de romper el ancho de la página. */
@media (max-width: 575.98px) {
  .cg-contenido table { display: block; overflow-x: auto; font-size: .92rem; }
  .cg-contenido th, .cg-contenido td { padding: .5rem .55rem; }
}

.cg-revision {
  display: inline-block; font-size: .82rem; color: var(--cg-gris);
  background: var(--cg-nube); border-radius: 999px; padding: .28rem .8rem;
}

/* Panel del usuario ---------------------------------------------- */
.cg-panel-nav { border-bottom: 1px solid var(--cg-borde); margin-bottom: 2rem; }
.cg-panel-nav .nav-link { color: var(--cg-gris); font-weight: 500; padding: .7rem 1rem; }
.cg-panel-nav .nav-link.active { color: var(--cg-navy); border-bottom: 2px solid var(--cg-navy); }

.cg-estado {
  display: inline-block; font-size: .8rem; font-weight: 600;
  border-radius: 999px; padding: .22rem .7rem;
}
.cg-estado-aviso { background: var(--cg-oro-suave); color: var(--cg-oro-texto); }

/* El turquesa de la marca es la señal de «esto está bien». Sin él,
   verificado y borrador se distinguían solo por el texto. */
.cg-estado-ok    { background: var(--cg-teal-suave); color: #026466; }
.cg-estado-neutro{ background: var(--cg-nube); color: var(--cg-gris); }

/* Pie ------------------------------------------------------------ */
.cg-pie {
  background: var(--cg-tinta); color: rgba(255,255,255,.72);
  padding: 3rem 0 1.6rem; margin-top: 4rem; font-size: .93rem;
}
.cg-pie-marca { color: #fff; font-size: 1.2rem; margin-bottom: .6rem; }
.cg-pie-texto { color: rgba(255,255,255,.66); font-size: .9rem; font-style: normal; }
.cg-pie h6 {
  color: #fff; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .9rem;
}
.cg-pie ul { list-style: none; padding: 0; margin: 0; }
.cg-pie li { margin-bottom: .45rem; }
.cg-pie a { color: rgba(255,255,255,.72); text-decoration: none; }
.cg-pie a:hover { color: #fff; text-decoration: underline; }
.cg-pie-redes { margin-top: 1rem; display: flex; gap: .9rem; font-size: 1.15rem; }
/* El aviso legal va primero, suelto y a todo el ancho: es lo que la
   persona tiene que poder leer sin esfuerzo.

   Entrega 010 — tenía `max-width: 58rem`, que lo partía en dos líneas
   dejando «correspondiente.» solo, aun sobrando lugar: en una pantalla
   de 1536 el aviso medía 928 px dentro de un contenedor de 1320. Sin el
   tope entra en una sola línea en escritorio. */
.cg-pie-aviso {
  margin: 2.4rem 0 0;
  font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.55);
}

/* Cuando ya no entra en una línea, centrado: dos líneas de distinto
   largo alineadas a la izquierda es lo que se veía mal. */
@media (max-width: 991.98px) {
  .cg-pie-aviso { text-align: center; margin-top: 2rem; }
}

/* Y abajo, separados por la línea, el copyright y la autoría. */
.cg-pie-base {
  border-top: 1px solid rgba(255,255,255,.13);
  margin-top: 1.3rem; padding-top: 1.3rem;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.cg-pie-autor a {
  color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 2px;
}
.cg-pie-autor a:hover { color: #fff; }

/* En pantalla ancha, uno a cada lado. En celular quedan apilados, que es
   más legible que dos textos chicos peleando por el ancho. */
@media (min-width: 768px) {
  .cg-pie-base { flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem; }
}

/* Utilidades ----------------------------------------------------- */
.cg-texto-gris { color: var(--cg-gris); }
.cg-sep { border: 0; border-top: 1px solid var(--cg-borde); margin: 2rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Entrega 002 — Cuestionario e informe
   ===================================================================== */

/* Cuestionario ---------------------------------------------------- */
.cg-cuest { padding: 2rem 0 3rem; }
@media (min-width: 992px) { .cg-cuest { padding: 3rem 0 4rem; } }

.cg-cuest-barra { margin-bottom: 1.8rem; }
.cg-cuest-paso { font-size: .88rem; font-weight: 600; color: var(--cg-navy); }
.cg-cuest-pct  { font-size: .88rem; color: var(--cg-gris); }
.cg-cuest .progress { background: var(--cg-nube); border-radius: 999px; }
.cg-cuest .progress-bar { background: var(--cg-navy); border-radius: 999px; }

.cg-cuest-titulo { font-size: clamp(1.5rem, 3.6vw, 2rem); margin-bottom: .4rem; }

.cg-pregunta {
  border: 1px solid var(--cg-borde); border-radius: var(--cg-radio);
  padding: 1.25rem; margin-bottom: 1.1rem; background: #fff;
}
.cg-pregunta-error { border-color: #d98b82; background: #fdf7f6; }
.cg-pregunta legend {
  font-size: 1.02rem; font-weight: 600; float: none; width: auto;
  margin-bottom: .35rem; padding: 0; line-height: 1.45;
}
.cg-req { color: var(--cg-oro); margin-left: .15rem; }
.cg-pregunta-ayuda { font-size: .88rem; color: var(--cg-gris); margin-bottom: .9rem; }
.cg-pregunta-err { font-size: .88rem; color: #a0342a; margin: .7rem 0 0; }

/* Opciones en lista */
.cg-opciones-lista { display: flex; flex-direction: column; gap: .5rem; }
.cg-opcion {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1px solid var(--cg-borde); border-radius: 10px;
  padding: .7rem .9rem; cursor: pointer; background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.cg-opcion:hover { border-color: var(--cg-navy-claro); background: var(--cg-navy-suave); }
.cg-opcion.elegida { border-color: var(--cg-navy); background: var(--cg-navy-suave); }
.cg-opcion input { margin-top: .22rem; flex: 0 0 auto; accent-color: var(--cg-navy); }
.cg-opcion span { font-size: .95rem; }
.cg-opcion:focus-within { outline: 3px solid var(--cg-oro); outline-offset: 2px; }

/* Opciones en tarjetas */
.cg-opciones-tarjetas {
  display: grid; gap: .7rem; grid-template-columns: 1fr;
}
@media (min-width: 576px) { .cg-opciones-tarjetas { grid-template-columns: 1fr 1fr; } }
.cg-opciones-tarjetas.cg-chicas { grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .cg-opciones-tarjetas.cg-chicas { grid-template-columns: repeat(3, 1fr); } }

.cg-opcion-tarjeta {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--cg-borde); border-radius: 11px;
  padding: 1rem .9rem; cursor: pointer; background: #fff;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.cg-opcion-tarjeta:hover { border-color: var(--cg-navy-claro); transform: translateY(-1px); }
.cg-opcion-tarjeta.elegida { border-color: var(--cg-navy); background: var(--cg-navy-suave); }
.cg-opcion-tarjeta input { position: absolute; opacity: 0; width: 0; height: 0; }
.cg-opcion-tarjeta:focus-within { outline: 3px solid var(--cg-oro); outline-offset: 2px; }
.cg-opcion-tarjeta i { font-size: 1.3rem; color: var(--cg-navy); }
.cg-opcion-tarjeta .t { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.cg-opcion-tarjeta .d { font-size: .85rem; color: var(--cg-gris); line-height: 1.45; }

/* Escapes: no sé / prefiero no responder */
.cg-escapes { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem; }
.cg-escape { display: flex; align-items: center; gap: .4rem; font-size: .86rem; color: var(--cg-gris); cursor: pointer; }
.cg-escape input { accent-color: var(--cg-gris); }

.cg-cuest-acciones {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; margin-top: 1.6rem;
}
.cg-enlace-boton {
  background: none; border: 0; padding: 0; color: var(--cg-gris);
  font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cg-enlace-boton:hover { color: var(--cg-navy); }
.cg-autoguardado { display: block; font-size: .82rem; color: var(--cg-gris); margin-top: .4rem; min-height: 1.1em; }

/* Informe --------------------------------------------------------- */
.cg-lista-informe { padding-left: 1.2rem; margin-bottom: 0; }
.cg-lista-informe li { margin-bottom: .7rem; line-height: 1.6; }
.cg-lista-informe li:last-child { margin-bottom: 0; }
.cg-lista-num { padding-left: 1.3rem; }

.cg-bloque-favor   { border-left: 4px solid var(--cg-teal); }
.cg-bloque-favor h2 { color: #026466; }
.cg-bloque-revisar { border-left: 4px solid var(--cg-oro); }
.cg-bloque-revisar h2 { color: var(--cg-oro-texto); }

.cg-aviso-informe {
  background: var(--cg-nieve); border: 1px solid var(--cg-borde);
  border-radius: var(--cg-radio); padding: 1.1rem 1.25rem;
  font-size: .89rem; color: var(--cg-gris);
}

.cg-lista-categorias { list-style: none; padding: 0; margin: 0 0 1rem; }
.cg-lista-categorias li {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0; font-size: .93rem; border-bottom: 1px solid var(--cg-borde);
}
.cg-lista-categorias li:last-child { border-bottom: 0; }
.cg-lista-categorias i { color: var(--cg-navy); font-size: 1.05rem; }

/* =====================================================================
   Entrega 003 — Datos de Paraguay
   ===================================================================== */

.cg-datos-filtros {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem;
}
.cg-datos-zonas { margin-bottom: 1.5rem; }
.cg-filtro {
  display: inline-flex; align-items: center;
  border: 1px solid var(--cg-borde); border-radius: 999px;
  padding: .38rem .9rem; font-size: .88rem; font-weight: 500;
  color: var(--cg-tinta); background: #fff; text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}
.cg-filtro:hover { border-color: var(--cg-navy-claro); background: var(--cg-navy-suave); color: var(--cg-navy); }
.cg-filtro.activo { background: var(--cg-navy); border-color: var(--cg-navy); color: #fff; }
.cg-datos-zonas .cg-filtro { font-size: .83rem; padding: .3rem .8rem; }

.cg-datos-grupo { margin-bottom: 1.4rem; }
.cg-datos-grupo:last-child { margin-bottom: 0; }
.cg-datos-cat {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cg-gris); font-family: 'Inter', sans-serif; font-weight: 600;
  margin-bottom: .6rem; padding-bottom: .35rem; border-bottom: 1px solid var(--cg-borde);
}

.cg-dato {
  padding: .85rem 0;
  border-bottom: 1px solid var(--cg-borde);
}
.cg-dato:last-child { border-bottom: 0; padding-bottom: 0; }

.cg-dato-cab {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem;
}
.cg-dato-nombre { font-weight: 600; font-size: .98rem; }
.cg-dato-valor {
  font-weight: 600; color: var(--cg-navy);
  background: var(--cg-navy-suave); border-radius: 7px;
  padding: .18rem .6rem; font-size: .93rem; white-space: nowrap;
}
.cg-dato-detalle { font-size: .92rem; color: var(--cg-gris); margin: .35rem 0 0; }
.cg-dato-nota {
  font-size: .85rem; color: var(--cg-oro-texto); background: var(--cg-oro-suave);
  border-radius: 7px; padding: .4rem .65rem; margin: .5rem 0 0;
}
.cg-dato-sello {
  font-size: .8rem; color: var(--cg-gris); margin: .45rem 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.cg-dato-sello a { color: var(--cg-gris); text-decoration: underline; text-underline-offset: 2px; }
.cg-dato-sello a:hover { color: var(--cg-navy); }
.cg-dato-zona {
  background: var(--cg-nube); border-radius: 999px;
  padding: .12rem .55rem; font-size: .76rem; font-weight: 600;
}

/* =====================================================================
   Entrega 004 — Compra
   ===================================================================== */

.cg-compra-linea {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--cg-borde);
}
.cg-compra-linea:last-child { border-bottom: 0; }
.cg-compra-precio { font-weight: 600; white-space: nowrap; font-size: 1.05rem; }

/* =====================================================================
   Entrega 005 — Informe completo y ejemplo público
   ===================================================================== */

/* Licencia personal, discreta: identifica la compra, no al titular. */
.cg-licencia {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; letter-spacing: .02em;
  background: var(--cg-nube); border-radius: 6px;
  padding: .1rem .45rem;
}

/* Medida de preparación */
.cg-prep-cifra {
  font-size: 1.15rem; font-weight: 600; color: #026466;
  background: var(--cg-teal-suave); border-radius: 9px;
  padding: .6rem .85rem; margin: 0 0 1rem;
}
.cg-lista-prep { list-style: none; margin: 0; padding: 0; }
.cg-lista-prep li {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem 0; border-bottom: 1px solid var(--cg-borde);
  font-size: .95rem; line-height: 1.45;
}
.cg-lista-prep li:last-child { border-bottom: 0; }
.cg-lista-prep i { flex: 0 0 auto; margin-top: .15rem; }
.cg-prep-ok i { color: var(--cg-teal); }
.cg-prep-falta { color: var(--cg-gris); }
.cg-prep-falta i { color: #b4bcc8; }

/* Cuadro de compatibilidad */
.cg-tabla-compat { font-size: .93rem; }
.cg-tabla-compat thead th {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cg-gris); font-weight: 600;
  border-bottom: 2px solid var(--cg-borde); white-space: nowrap;
}
.cg-tabla-compat td { vertical-align: top; }
.cg-tabla-compat td span.d-block + span.d-block { margin-top: .3rem; }

/* Secciones que todavía no están desbloqueadas */
.cg-lista-bloqueada { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.cg-lista-bloqueada li {
  padding: .7rem 0 .7rem 1.9rem; position: relative;
  border-bottom: 1px solid var(--cg-borde); font-size: .95rem; line-height: 1.5;
}
.cg-lista-bloqueada li:last-child { border-bottom: 0; }
.cg-lista-bloqueada li::before {
  content: "\F47B";   /* bi-lock */
  font-family: "bootstrap-icons"; position: absolute; left: 0; top: .72rem;
  color: var(--cg-gris); font-size: .95rem;
}

/* Fuentes */
.cg-lista-fuentes { margin: 0; padding-left: 1.15rem; font-size: .92rem; }
.cg-lista-fuentes li { margin-bottom: .45rem; line-height: 1.45; }

/* Aviso del ejemplo: tiene que leerse antes que el contenido. */
.cg-aviso-muestra {
  background: var(--cg-oro-suave); color: var(--cg-oro-texto);
  border-left: 4px solid var(--cg-oro); border-radius: 9px;
  padding: .85rem 1rem; font-size: .93rem; line-height: 1.5;
}

/* =====================================================================
   Entrega 006 — Directorio: panel del proveedor y badge
   ===================================================================== */

/* Faltaban los tonos neutro y alerta para los estados del proveedor. */
.cg-estado-neutro { background: var(--cg-nube); color: var(--cg-gris); }
.cg-estado-alerta { background: #fbe9e7; color: #a0342a; }

/* Niveles de verificación */
.cg-niveles { display: grid; gap: .7rem; }
.cg-nivel {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--cg-nube); border-radius: 9px; padding: .7rem .85rem;
}
.cg-nivel i { color: #b4bcc8; font-size: 1.05rem; margin-top: .1rem; flex: 0 0 auto; }
.cg-nivel-ok { background: var(--cg-teal-suave); }
.cg-nivel-ok i { color: var(--cg-teal); }

/* Aviso de cupo o de alcance, dentro de una tarjeta */
.cg-aviso-cupo {
  background: var(--cg-nube); border-radius: 9px;
  padding: .6rem .8rem; font-size: .9rem; color: var(--cg-tinta);
}

/* Selección de categorías y zonas */
.cg-cats { display: grid; gap: .5rem; border: 0; padding: 0; margin: 0; }
.cg-cat-item {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--cg-borde); border-radius: 9px;
  padding: .65rem .8rem; font-size: .94rem; line-height: 1.4;
  transition: border-color .15s, background .15s;
}
.cg-cat-item:hover { border-color: #c3d2e4; }
.cg-cat-item input { margin-top: .2rem; flex: 0 0 auto; }
.cg-cat-item input:checked ~ span { color: #026466; }
.cg-cat-item:has(input:checked) { border-color: var(--cg-teal); background: var(--cg-teal-suave); }
.cg-cat-bloqueada { opacity: .5; cursor: not-allowed; }

/* Insignia */
.cg-badge-muestra {
  background: #fff; border: 1px dashed var(--cg-borde);
  border-radius: 9px; padding: 1.1rem; text-align: center;
}
.cg-badge-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.12rem; font-weight: 600; letter-spacing: .04em;
  background: var(--cg-nube); border-radius: 8px;
  padding: .6rem .8rem; margin: 0 0 .5rem; word-break: break-all;
}
.cg-badge-bien { border-left: 4px solid var(--cg-teal); }
.cg-badge-bien h2 { color: #026466; }
.cg-badge-mal { border-left: 4px solid #a0342a; }
.cg-badge-mal h2 { color: #a0342a; }

/* =====================================================================
   Entrega 007 — Integraciones: Google, captcha y consentimiento
   ===================================================================== */

/* Botón de Google. Fondo blanco y borde gris, que es lo que pide Google
   para su marca, y no el verde del sitio. */
.btn-cg-google {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: #fff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: 999px;
  padding: .62rem 1.3rem; font-weight: 600; font-size: .98rem;
  text-decoration: none; transition: background .15s, box-shadow .15s;
}
.btn-cg-google:hover { background: #f7f8f8; color: #3c4043; box-shadow: 0 1px 3px rgba(60,64,67,.15); }
.btn-cg-google svg { flex: 0 0 auto; }

/* Separador «o» entre el formulario y el botón de Google */
.cg-separador-o {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.3rem 0; color: var(--cg-gris); font-size: .88rem;
}
.cg-separador-o::before,
.cg-separador-o::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--cg-borde);
}

/* Captcha */
.cg-captcha { margin: 1rem 0; }
.cg-captcha-aviso {
  margin: 1rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--cg-gris);
}
.cg-captcha-aviso a { color: var(--cg-gris); text-decoration: underline; text-underline-offset: 2px; }

/* Aviso de medición. Abajo, sin tapar el contenido ni bloquear el sitio:
   rechazar tiene que costar lo mismo que aceptar. */
.cg-consentimiento {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.2rem;
  background: #fff; border-top: 1px solid var(--cg-borde);
  box-shadow: 0 -4px 18px rgba(15, 61, 51, .08);
}
.cg-consentimiento-texto { flex: 1 1 320px; font-size: .9rem; line-height: 1.45; }
.cg-consentimiento-texto p { color: var(--cg-gris); margin-top: .2rem; }
.cg-consentimiento-botones { display: flex; gap: .6rem; flex: 0 0 auto; }

@media (max-width: 575.98px) {
  .cg-consentimiento { padding: .9rem 1rem; }
  .cg-consentimiento-botones { width: 100%; }
  .cg-consentimiento-botones .btn { flex: 1 1 0; }
}

/* =====================================================================
   Entrega 008 — Marca
   ===================================================================== */

/* Logo de la cabecera. El ancho fijo evita que la barra salte mientras
   carga la imagen, que es lo que pasa si solo se le da alto. */
/* Entrega 010 — los logos estaban chicos y la bajada «Asunción, capital
   de oportunidades» no se leía. Se hicieron dos cosas: recortar el
   margen transparente del PNG (era el 29% del alto, así que el dibujo
   ocupaba solo 71% de su caja) y subir la altura. Entre las dos, el
   trazo se ve un 66% más grande sin que la barra crezca casi nada. */
.cg-logo {
  height: 54px; width: auto; display: block;
}
@media (max-width: 575.98px) {
  .cg-logo { height: 42px; }
}

.cg-pie-logo {
  height: 68px; width: auto; display: block; margin-bottom: 1rem;
}

/* Selector de idioma con bandera (entrega 010) --------------------- */
.cg-bandera {
  width: 20px; height: 14px; border-radius: 2px;
  display: inline-block; vertical-align: -2px; flex: 0 0 auto;
}
.cg-idioma-boton, .cg-idioma-opcion {
  display: flex; align-items: center; gap: .45rem;
}
/* Sin esto Bootstrap pone el triangulito pegado al texto. */
.cg-idioma-boton::after { margin-left: .1rem; }

/* La marca en texto (.cg-marca, más arriba) sigue siendo el respaldo
   cuando el administrador sube su propio logo. */