/* ═══════════════════════════════════════════════════════════════
   sesion-vivo.css · Sistema Sesión en Vivo · Sphaera
   Lote 89 · Fase 1

   Alcance: estilos del lado CLIENTE
   - Overlay de pantalla completa cuando hay sesión activa
   - Logo girando (estado espera / entre herramientas)
   - Pantalla de cierre de sesión
   - Transiciones entre estados
   ═══════════════════════════════════════════════════════════════ */

/* ─── OVERLAY SESIÓN EN VIVO ─── */
/* Ocupa toda la ventana por encima del portal cuando está activo */
.sv-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--sand, #f5f0e8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  overflow: hidden;
}

.sv-overlay.sv-visible {
  opacity: 1;
  pointer-events: all;
}

/* Fondo de textura sutil — hereda del portal si existe */
.sv-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 0;
}

/* ─── CONTENIDO DEL OVERLAY ─── */
.sv-overlay__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 32px 24px;
  text-align: center;
  width: 100%;
  max-width: 360px;
}

/* ─── LOGO GIRATORIO ─── */
/* SVG de círculos concéntricos del sistema Sphaera */
.sv-logo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sv-logo-svg {
  width: 96px;
  height: 96px;
}

/* Los tres anillos exteriores giran suavemente */
.sv-logo-ring-1 {
  animation: sv-girar 18s linear infinite;
  transform-origin: 48px 48px;
}
.sv-logo-ring-2 {
  animation: sv-girar 12s linear infinite reverse;
  transform-origin: 48px 48px;
}
.sv-logo-ring-3 {
  animation: sv-girar 8s linear infinite;
  transform-origin: 48px 48px;
}

@keyframes sv-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── MENSAJE DE ESPERA ─── */
.sv-mensaje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sv-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terra, #a0764e);
  opacity: .7;
}

.sv-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.2;
}

.sv-titulo em {
  font-style: italic;
  color: var(--terra, #a0764e);
}

.sv-subtitulo {
  font-family: 'Jost', sans-serif;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--warm-mid, #6b5c48);
  line-height: 1.7;
  max-width: 280px;
}

/* ─── PUNTOS DE ESPERA (animados) ─── */
.sv-dots {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.sv-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra, #a0764e);
  opacity: .3;
  animation: sv-pulso .9s ease-in-out infinite;
}

.sv-dot:nth-child(2) { animation-delay: .2s; }
.sv-dot:nth-child(3) { animation-delay: .4s; }

@keyframes sv-pulso {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%       { opacity: .9; transform: scale(1.2); }
}

/* ─── ESTADO: HERRAMIENTA ACTIVA ─── */
/* Cuando el coach activa una herramienta, el overlay muestra
   el contenido de la herramienta en vez del logo girando */
.sv-overlay--herramienta .sv-espera {
  display: none;
}
.sv-overlay--herramienta .sv-herramienta-wrap {
  display: flex;
}

.sv-espera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.sv-herramienta-wrap {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 0 16px;
}

/* ─── PANTALLA DE CIERRE ─── */
.sv-cierre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  transition: opacity .5s ease;
}

.sv-cierre.sv-visible {
  opacity: 1;
}

.sv-cierre__icono {
  font-size: 36px;
}

.sv-cierre__texto {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 300;
  font-style: italic;
  color: var(--charcoal, #2c2925);
  line-height: 1.4;
  max-width: 280px;
  text-align: center;
}

/* ─── SEPARADOR DECORATIVO ─── */
.sv-sep {
  width: 32px;
  height: 1px;
  background: var(--mist, #ddd6c8);
}

/* ═══════════════════════════════════════════════════════════════
   ESCÁNER DE ESTADO · Herramienta Fase 3
   ═══════════════════════════════════════════════════════════════ */

/* Contenedor principal de la herramienta activa */
.sv-tool-wrap {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 4px;
}

/* Cabecera de herramienta */
.sv-tool-header {
  text-align: center;
}
.sv-tool-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--terra, #a0764e);
  opacity: .7;
  margin-bottom: 8px;
}
.sv-tool-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.2;
  margin-bottom: 8px;
}
.sv-tool-titulo em { font-style: italic; color: var(--terra, #a0764e); }
.sv-tool-subtitulo {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--warm-mid, #6b5c48);
  line-height: 1.6;
}

/* ── Eje del escáner ── */
.sv-eje {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sv-eje-label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sv-eje-ico {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.sv-eje-nombre {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--charcoal, #2c2925);
  letter-spacing: .04em;
}
.sv-eje-valor {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-weight: 300;
  color: var(--terra, #a0764e);
  margin-left: auto;
  min-width: 24px;
  text-align: right;
}

/* Escala de botones táctiles — mínimo 48x48px según el plan */
.sv-escala {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sv-escala-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1.5px solid var(--mist, #ddd6c8);
  background: var(--white, #fdfaf5);
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.sv-escala-btn:hover {
  border-color: var(--terra, #a0764e);
}
.sv-escala-btn:active {
  transform: scale(0.93);
}
.sv-escala-btn.seleccionado {
  border-color: var(--terra, #a0764e);
  background: var(--terra, #a0764e);
  color: #fff;
  font-weight: 500;
}
.sv-escala-etiquetas {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--warm-mid, #6b5c48);
  opacity: .55;
  margin-top: 2px;
  padding: 0 2px;
}

/* Separador entre ejes */
.sv-eje-sep {
  height: 1px;
  background: var(--mist, #ddd6c8);
  opacity: .6;
}

/* ── Resultado del escáner ── */
.sv-resultado-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: sv-fade-in .4s ease;
}
@keyframes sv-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Radar SVG */
.sv-radar-wrap {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.sv-radar-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Valores numéricos del resultado */
.sv-resultado-valores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.sv-resultado-eje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--white, #fdfaf5);
  border: 1px solid var(--mist, #ddd6c8);
  border-radius: 10px;
  padding: 12px 10px;
}
.sv-resultado-eje__ico   { font-size: 20px; }
.sv-resultado-eje__num   {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 300;
  color: var(--terra, #a0764e);
  line-height: 1;
}
.sv-resultado-eje__label {
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--warm-mid, #6b5c48);
  opacity: .7;
}

/* Botón "Nueva exploración" */
.sv-btn-nueva {
  background: transparent;
  border: 1.5px solid var(--mist, #ddd6c8);
  border-radius: 10px;
  padding: 12px 24px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--warm-mid, #6b5c48);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sv-btn-nueva:hover { border-color: var(--terra, #a0764e); color: var(--terra, #a0764e); }

/* ─── RESPONSIVE ─── */
@media (max-width: 480px) {
  .sv-logo-wrap { width: 80px; height: 80px; }
  .sv-logo-svg  { width: 80px; height: 80px; }
  .sv-logo-ring-1,
  .sv-logo-ring-2,
  .sv-logo-ring-3 {
    transform-origin: 40px 40px;
  }
}

@media (min-width: 768px) {
  .sv-overlay__inner {
    gap: 40px;
    padding: 48px 32px;
  }
  .sv-logo-wrap { width: 112px; height: 112px; }
  .sv-logo-svg  { width: 112px; height: 112px; }
  .sv-logo-ring-1,
  .sv-logo-ring-2,
  .sv-logo-ring-3 {
    transform-origin: 56px 56px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TERMÓMETRO DE COMPROMISOS · Herramienta Fase 4
   ═══════════════════════════════════════════════════════════════ */

.sv-termo-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-termo-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--white, #fdfaf5);
  border: 1.5px solid var(--mist, #ddd6c8);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.sv-termo-opcion:hover {
  border-color: var(--terra, #a0764e);
  background: #fdf9f5;
}
.sv-termo-opcion:active { transform: scale(0.99); }
.sv-termo-opcion.seleccionado {
  border-color: var(--terra, #a0764e);
  background: #fdf6ef;
}
.sv-termo-opcion__texto {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.5;
  flex: 1;
}
.sv-termo-opcion__check {
  font-size: 14px;
  color: var(--terra, #a0764e);
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
}
.sv-termo-opcion.seleccionado .sv-termo-opcion__check { opacity: 1; }

.sv-termo-confianza {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--mist, #ddd6c8);
  animation: sv-fade-in .3s ease;
}

.sv-termo-resultado {
  background: var(--white, #fdfaf5);
  border: 1px solid var(--mist, #ddd6c8);
  border-left: 3px solid var(--terra, #a0764e);
  border-radius: 10px;
  padding: 16px 20px;
  width: 100%;
  max-width: 420px;
}
.sv-termo-resultado__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra, #a0764e);
  opacity: .75;
  margin-bottom: 8px;
}
.sv-termo-resultado__texto {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.55;
}

.sv-termo-termometro {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sv-termo-termometro__etiqueta {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra, #a0764e);
  opacity: .75;
}
.sv-termo-barra-wrap {
  width: 100%;
  height: 10px;
  background: var(--mist, #ddd6c8);
  border-radius: 100px;
  overflow: hidden;
}
.sv-termo-barra-fill {
  height: 100%;
  background: var(--terra, #a0764e);
  border-radius: 100px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
.sv-termo-barra-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 300;
  color: var(--terra, #a0764e);
  line-height: 1;
}
.sv-termo-barra-num span {
  font-size: 14px;
  color: var(--warm-mid, #6b5c48);
  opacity: .6;
}


/* ═══════════════════════════════════════════════════════════════
   CONSTRUCTOR DE OBJETIVO · Herramienta Fase 4
   ═══════════════════════════════════════════════════════════════ */

.sv-constructor-logro {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(17px, 4.5vw, 22px);
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.5;
  background: var(--white, #fdfaf5);
  border: 1px solid var(--mist, #ddd6c8);
  border-radius: 10px;
  padding: 14px 18px;
  min-height: 56px;
  margin-top: 4px;
}

.sv-campo-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-campo-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra, #a0764e);
  opacity: .75;
}

.sv-plazos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sv-plazo-btn {
  padding: 12px 8px;
  background: var(--white, #fdfaf5);
  border: 1.5px solid var(--mist, #ddd6c8);
  border-radius: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.sv-plazo-btn:hover { border-color: var(--terra, #a0764e); }
.sv-plazo-btn:active { transform: scale(0.97); }
.sv-plazo-btn.seleccionado {
  border-color: var(--terra, #a0764e);
  background: #fdf6ef;
  font-weight: 500;
  color: var(--terra, #a0764e);
}

.sv-constructor-alin {
  padding-top: 20px;
  border-top: 1px solid var(--mist, #ddd6c8);
  animation: sv-fade-in .3s ease;
}

.sv-constructor-objetivo-card {
  background: var(--white, #fdfaf5);
  border: 1px solid var(--mist, #ddd6c8);
  border-left: 3px solid var(--terra, #a0764e);
  border-radius: 10px;
  padding: 18px 20px;
  width: 100%;
  max-width: 420px;
}
.sv-constructor-objetivo-card__pre {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm-mid, #6b5c48);
  opacity: .65;
  margin-bottom: 8px;
}
.sv-constructor-objetivo-card__logro {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   PIZARRA COMPARTIDA · Canvas apilado · Herramienta Fase 4
   Dos canvas superpuestos = pizarra única compartida visualmente.
   ═══════════════════════════════════════════════════════════════ */

/* Contenedor: position:relative para que el canvas absoluto se ancle */
.sv-pizarra-contenedor {
  position: relative;
  width: 100%;
  border-radius: 12px;
  border: 1.5px solid var(--terra, #a0764e);
  overflow: hidden;  /* recorta los canvas al border-radius */
}

/* Canvas base — establece el height del contenedor, recibe trazos del coach */
.sv-pizarra-canvas--base {
  display: block;
  width: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  /* background linen se pinta via JS (fillRect) */
}

/* Canvas encima — transparente, intercepta todos los pointer events */
.sv-pizarra-canvas--encima {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
  background: transparent;
}

/* Leyenda de colores debajo de la pizarra */
.sv-pizarra-leyenda {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding: 0 2px;
}
.sv-pizarra-leyenda__item {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
}
.sv-pizarra-leyenda__item--coach   { color: var(--terra, #a0764e); }
.sv-pizarra-leyenda__item--cliente { color: var(--sage, #7a8c7e); }

/* ═══════════════════════════════════════════════════════════════
   LÍNEA DE RECURSOS · Herramienta Fase 5
   ═══════════════════════════════════════════════════════════════ */

.sv-linea-cat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mist, #ddd6c8);
  margin-bottom: 4px;
}
.sv-linea-cat:last-of-type { border-bottom: none; }

.sv-linea-cat__header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-linea-cat__ico {
  font-size: 16px;
  line-height: 1;
}
.sv-linea-cat__nombre {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}

.sv-linea-tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sv-recurso-btn {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--mist, #ddd6c8);
  background: var(--white, #fdfaf5);
  color: var(--charcoal, #2c2925);
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
.sv-recurso-btn:hover { border-color: var(--cat-color, #a0764e); }
.sv-recurso-btn:active { transform: scale(0.97); }
.sv-recurso-btn.seleccionado {
  background: var(--cat-color, #a0764e);
  border-color: var(--cat-color, #a0764e);
  color: #fff;
}

.sv-linea-contador {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--warm-mid, #6b5c48);
  opacity: .65;
  text-align: center;
  padding: 8px 0;
}

/* Botón primario dentro del overlay (reutilizable) */
.sv-btn-primario-sv {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--terra, #a0764e);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
}
.sv-btn-primario-sv:hover  { background: var(--terra-d, #8b6b4a); }
.sv-btn-primario-sv:active { transform: scale(0.99); }

/* Resultado constelación */
.sv-linea-svg-wrap {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.sv-linea-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.sv-linea-resultado-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}
.sv-linea-resultado-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sv-linea-resultado-cat__nombre {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .8;
}
.sv-linea-resultado-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sv-linea-resultado-item {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  background: var(--white, #fdfaf5);
  border: 1px solid var(--mist, #ddd6c8);
  border-radius: 100px;
  padding: 4px 10px;
  color: var(--charcoal, #2c2925);
}
.sv-linea-total {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  color: var(--terra, #a0764e);
  text-align: center;
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   CÍRCULOS DE PODER · Herramienta Fase 5
   ═══════════════════════════════════════════════════════════════ */

.sv-circulos-tarjetas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.sv-circulo-tarjeta {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--white, #fdfaf5);
  border: 1.5px solid var(--mist, #ddd6c8);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Jost', sans-serif;
}
.sv-circulo-tarjeta:hover  { border-color: var(--terra, #a0764e); }
.sv-circulo-tarjeta:active { transform: scale(0.97); }
.sv-circulo-tarjeta.activa {
  border-color: var(--terra, #a0764e);
  background: #fdf6ef;
  box-shadow: 0 0 0 3px rgba(160,118,78,.15);
}
.sv-circulo-tarjeta__ico   { font-size: 16px; line-height: 1; flex-shrink: 0; }
.sv-circulo-tarjeta__label {
  font-size: 13px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.3;
}

/* Zonas de destino (los 3 círculos) */
.sv-circulos-zonas {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-circulo-zona {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: var(--white, #fdfaf5);
  border: 2px solid var(--circulo-color, #ddd6c8);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .15s, transform .1s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  opacity: .55;
}
.sv-circulo-zona--activa { opacity: 1; }
.sv-circulo-zona--activa:hover {
  background: #fdf9f5;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--circulo-color) 20%, transparent);
}
.sv-circulo-zona--activa:active { transform: scale(0.99); }

.sv-circulo-zona__label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--charcoal, #2c2925);
  line-height: 1.4;
  flex: 1;
}
.sv-circulo-zona__badge {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--circulo-color, #a0764e);
  min-width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* SVG resultado */
.sv-circulos-svg-wrap {
  width: 100%;
  max-width: 300px;
  margin: 8px auto 0;
}
.sv-circulos-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}