/* =========================
   CONTENEDOR + LIENZO
   ========================= */
.cv {
  --size: 500px;  /* tamaño base */
  --s: 1;         /* factor de escala responsive */
  display: grid;
  place-items: center;     /* centra horiz + vert */
  position: relative;
  padding: 24px;
  border-radius: 8px;
  color: #fff;
  min-height: var(--size); /* reserva alto mínimo */
}

.cv__wrap {
  position: relative;
  width: calc(var(--size) + 40px);
  height: var(--size);
  margin: 0;                 /* sin márgenes que desplacen */
  transform: scale(var(--s));/* escala controlada por var */
  transform-origin: center;  /* escala desde el centro */
}

.cv__wrap_border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

/* =========================
   CÍRCULOS
   ========================= */
.cv__circle {
  position: absolute;
  width: 66%;
  height: 66%;
  border: 1.5px solid var(--cv-border, #fff);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
  opacity: .9;
}

.cv__label {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  letter-spacing: .2em;
  font-size: clamp(10px, 2.2vmin, 14px);
  pointer-events: none;
}

/* estado activo por color */
.cv__circle--1.is-active { background: color-mix(in srgb, var(--cv-c1, #ff6d5f) 85%, transparent); }
.cv__circle--2.is-active { background: color-mix(in srgb, var(--cv-c2, #ff6d5f) 85%, transparent); }
.cv__circle--3.is-active { background: color-mix(in srgb, var(--cv-c3, #16a085) 85%, transparent); }
.cv__circle:not(.is-active) { opacity: .35; }

/* =========================
   CENTRO / TRIPLE / BORDES
   ========================= */
.cv__triple {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* no tapa interacciones */
  z-index: -1;
}

/* bordes por encima */
.cv__center {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cv-bg, #083a35);
  padding-top: 70px;
  font-weight: bold;
  font-size: 16px;
}

/* =========================
   PANELES
   ========================= */
.cv__panel {
  position: absolute;
  width: 300px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #000;
  background-color: var(--cv-bg, #083a35);
  z-index: 10;
  cursor: pointer;
}

.cv__wrap_border .cv__panel {
  border: 1px solid var(--cv-border, #fff);
  background-color: transparent;
}

.cv__panel-inner {
  width: 100%;
  height: 100%;
  position: absolute;
}

/* paneles ubicados dentro de cada círculo */
[data-cv-panel="1"] { left: 50%; top: 0; transform: translateX(-50%); }
[data-cv-panel="2"] { right: 0; bottom: 0; }
[data-cv-panel="3"] { left: 0; bottom: 0; }

[data-cv-panel="1"] .cv__panel-text { padding-top: 80px; }
[data-cv-panel="2"] .cv__panel-text { padding-top: 100px; padding-left: 70px; }
[data-cv-panel="3"] .cv__panel-text { padding-top: 85px;  padding-right: 70px; }

[data-cv-panel="1"][role="region"].active { z-index: 0; background: var(--cv-c1, #FF9148); }
[data-cv-panel="2"][role="region"].active { z-index: 0; background: var(--cv-c2, #ff6d5f); }
[data-cv-panel="3"][role="region"].active { z-index: 0; background: var(--cv-c3, #16a085); }

[role="region"].active .cv__panel-text { display: flex; }

.cv__panel-title {
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4em;
  font-size: clamp(12px, 2.4vmin, 18px);
  shape-outside: circle();
  clip-path: circle();
  width: 100%;
  height: 100%;
  position: absolute;
}

.cv__panel-text {
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  width: 300px;
  padding: 50px;
  position: absolute;
  height: 300px;
  color: var(--cv-border);
  display: none;
}

.cv__panel-title svg { width: 100%; height: 100%; }

.cv_wrap_border .cv_panel { pointer-events: none; }

/* =========================
   RESPONSIVE (solo escala)
   ========================= */
@media (max-width: 1440px) { .cv { --s: 0.90; } }
@media (max-width: 1200px) { .cv { --s: 0.80; } }
@media (max-width: 992px)  { .cv { --s: 0.70; } }
@media (max-width: 768px)  { .cv { --s: 0.60; } }
@media (max-width: 576px)  { .cv { --s: 0.60; } }
@media (max-width: 375px)  { .cv { --s: 0.50; } }
@media (max-width: 320px)  { .cv { --s: 0.50; } }

/* Fix centrado en móviles */
@media (max-width: 767px) {
  .cv {
    position: relative;
    min-height: calc(var(--size) * var(--s));
    overflow: visible;
  }

  .cv__wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(var(--s));
    overflow: visible;
  }
}