/* Grupo Tregón · CUATRO LENGUAJES DE FORMA
   Sesión del 24-ago: "que no se vea cuadrado".

   DOS REGLAS QUE VIENEN DE MIGUEL
   1. La forma NO se toca en el banner. El hero es idéntico en las cuatro, botones incluidos.
   2. Redondo y círculo tienen que verse distintos. Redondo es una esquina suave;
      círculo se casa con el círculo de verdad, nada de óvalos ni píldoras disfrazadas.

   Cada opción tiene un gesto propio, tomado de referentes corporativos:
     ACTUAL      · esquina recta, rejilla estricta, nada se encima.
     REDONDAS    · radios suaves + la insignia encimada en la foto (Finbiz).
     DIAGONALES  · corte a 45° en tarjetas, fotos y bordes de sección.
     CÍRCULOS    · foto circular, número en círculo y anillos concéntricos (Dustrium).

   Es una capa encima de estilos.css; la maqueta no se duplica. */


/* ══════════════════════════════════════════════════════════
   A · REDONDAS — la esquina suave.
   El radio es generoso pero contenido: el botón NO es píldora,
   para que no se confunda con la opción de círculos.
   ══════════════════════════════════════════════════════════ */

html[data-formas="redondas"] .u{border-radius:24px}
html[data-formas="redondas"] .tj{border-radius:20px}
html[data-formas="redondas"] .tj .im{border-radius:20px 20px 0 0}
html[data-formas="redondas"] .casa{border-radius:20px}
html[data-formas="redondas"] .casa .im{border-radius:20px 20px 0 0}
html[data-formas="redondas"] .paso,
html[data-formas="redondas"] .razon{border-radius:18px}
html[data-formas="redondas"] .vac{border-radius:16px}
html[data-formas="redondas"] .lista{border-radius:20px;overflow:hidden}
html[data-formas="redondas"] .mosaico figure{border-radius:20px;overflow:hidden}
html[data-formas="redondas"] .retrato{border-radius:26px;overflow:hidden}
html[data-formas="redondas"] .espec{border-radius:16px;overflow:hidden}
html[data-formas="redondas"] .form{border-radius:22px}
html[data-formas="redondas"] .campo .c{border-radius:11px}
html[data-formas="redondas"] .pastillas .op{border-radius:13px}

/* Radio moderado, no píldora. Aquí es donde se separa de la opción de círculos. */
html[data-formas="redondas"] .btn{border-radius:10px}
html[data-formas="redondas"] .hero .btn{border-radius:3px}

/* EL GESTO: la etiqueta se sale de la tarjeta y se encima en la foto.
   Es lo que hace Finbiz con su icono, y lo que le quita rigidez a la rejilla. */
html[data-formas="redondas"] .tj{position:relative}
html[data-formas="redondas"] .tj:not(.plana) .k{
  position:absolute;left:20px;top:190px;transform:translateY(-50%);margin:0;
  background:#fff;color:var(--navy);padding:10px 16px;border-radius:999px;
  box-shadow:0 10px 26px -14px rgba(29,52,97,.75);
}
html[data-formas="redondas"] .tj:not(.plana) .cn{padding-top:38px}
html[data-formas="redondas"] .tj .et{border-radius:999px}
html[data-formas="redondas"] .casa .est{border-radius:999px}

html[data-formas="redondas"] .linea .h::before{border-radius:50%;transform:none}


/* ══════════════════════════════════════════════════════════
   B · DIAGONALES — el corte a 45°. Es la que más habla de obra.
   ══════════════════════════════════════════════════════════ */

html[data-formas="diagonales"] .u{
  border-radius:0;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 38px 100%, 0 calc(100% - 38px));
}
html[data-formas="diagonales"] .u .cn{padding-left:34px}

html[data-formas="diagonales"] .tj{
  border-radius:0;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}
html[data-formas="diagonales"] .tj .et,
html[data-formas="diagonales"] .casa .est{
  clip-path:polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);padding-right:20px;
}
html[data-formas="diagonales"] .casa{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

/* EL GESTO: la etiqueta cuelga del borde de la foto como una pestaña cortada.
   Es el "Read More" de Finbiz, que se sale de la tarjeta. */
html[data-formas="diagonales"] .tj:not(.plana) .k{
  display:inline-block;margin:-30px 0 16px 0;padding:11px 22px;
  background:var(--grad);color:#fff;position:relative;z-index:2;
  clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

html[data-formas="diagonales"] .paso,
html[data-formas="diagonales"] .razon{
  border-top:0;border-left:3px solid var(--azul);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
html[data-formas="diagonales"] .vac{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
html[data-formas="diagonales"] .dato{
  border-top:0;border-left:3px solid var(--azul);padding-top:0;padding-left:18px;
}

/* Galería: cada imagen con una esquina rebanada, alternando el lado */
html[data-formas="diagonales"] .mosaico figure{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
html[data-formas="diagonales"] .mosaico figure:nth-child(even){
  clip-path:polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
html[data-formas="diagonales"] .retrato{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
}

/* Las cuñas entre secciones se quitaron el 24-ago: el corte del sitio es el
   traslape, igual en las cuatro opciones. Lo diagonal vive en las tarjetas,
   las fotos y las fichas, no en el borde de las franjas. */

html[data-formas="diagonales"] .form{
  border-radius:0;
  clip-path:polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
html[data-formas="diagonales"] .btn{
  border-radius:0;
  clip-path:polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}
html[data-formas="diagonales"] .hero .btn{clip-path:none;border-radius:3px}
html[data-formas="diagonales"] .pastillas .op,
html[data-formas="diagonales"] .campo .c{border-radius:0}


/* ══════════════════════════════════════════════════════════
   C · CÍRCULOS — el círculo, y nada que se le parezca.
   La tarjeta casi no se redondea (6px): el círculo tiene que ser
   la figura, no un rectángulo con las puntas limadas.
   ══════════════════════════════════════════════════════════ */

html[data-formas="circulos"] .u{border-radius:6px}
html[data-formas="circulos"] .tj{border-radius:6px;text-align:center;align-items:center}
html[data-formas="circulos"] .casa{border-radius:6px}
html[data-formas="circulos"] .paso,
html[data-formas="circulos"] .razon{border-radius:6px;border-top:0;padding-top:30px}
html[data-formas="circulos"] .vac{border-radius:6px}
html[data-formas="circulos"] .espec{border-radius:6px;overflow:hidden}
html[data-formas="circulos"] .form{border-radius:8px}

/* LA FOTO DE LA TARJETA ES UN CÍRCULO */
html[data-formas="circulos"] .tj .im{
  width:186px;height:186px;border-radius:50%;margin:30px auto 4px;overflow:hidden;flex:0 0 auto;
}
html[data-formas="circulos"] .tj .cn{align-items:center}
html[data-formas="circulos"] .tj .et{
  border-radius:999px;left:50%;transform:translateX(-50%);top:auto;bottom:-12px;
}
/* Y el retrato de apoyo también */
html[data-formas="circulos"] .retrato{border-radius:50%;overflow:hidden;aspect-ratio:1/1;height:auto}
html[data-formas="circulos"] .mosaico figure{border-radius:10px;overflow:hidden}

/* EL NÚMERO ES UN CÍRCULO DE VERDAD, no una píldora estirada */
html[data-formas="circulos"] .k.num{display:flex;align-items:center;justify-content:center;gap:11px}
html[data-formas="circulos"] .k.num i{
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad);color:#fff;font-size:14px;letter-spacing:0;
}
html[data-formas="circulos"] .paso .k,
html[data-formas="circulos"] .razon .k{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:10px;letter-spacing:.02em;white-space:nowrap;
}
html[data-formas="circulos"] .u .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.55);color:#fff;font-size:12.5px;letter-spacing:.04em;
}

/* Cada cifra dentro de un anillo */
html[data-formas="circulos"] .cifras .g>div{position:relative}
html[data-formas="circulos"] .cifras .g>div::before{
  content:"";position:absolute;left:-20px;top:-30px;width:108px;height:108px;
  border-radius:50%;border:1px solid rgba(143,208,232,.32);pointer-events:none;
}
html[data-formas="circulos"] .dato{border-top:0;position:relative;padding-top:0}
html[data-formas="circulos"] .dato::before{
  content:"";position:absolute;left:-22px;top:-26px;width:96px;height:96px;
  border-radius:50%;border:1px solid rgba(36,123,160,.32);pointer-events:none;
}

/* ANILLOS CONCÉNTRICOS en las franjas oscuras, como Dustrium */
html[data-formas="circulos"] .cifras,
html[data-formas="circulos"] .integral,
html[data-formas="circulos"] .contacto,
html[data-formas="circulos"] .cta-final{position:relative;overflow:hidden}
html[data-formas="circulos"] .cifras::after,
html[data-formas="circulos"] .integral::after,
html[data-formas="circulos"] .contacto::after,
html[data-formas="circulos"] .cta-final::after{
  content:"";position:absolute;left:50%;top:50%;width:1500px;height:1500px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(circle,
    rgba(255,255,255,.085) 0 1px, transparent 1px 96px);
}
html[data-formas="circulos"] .cifras .wrap,
html[data-formas="circulos"] .integral .wrap,
html[data-formas="circulos"] .contacto .wrap,
html[data-formas="circulos"] .cta-final .wrap{position:relative;z-index:1}

/* Botones y campos: píldora completa. Es lo contrario de la esquina suave. */
html[data-formas="circulos"] .btn{border-radius:999px;padding-left:34px;padding-right:34px}
html[data-formas="circulos"] .hero .btn{border-radius:3px;padding-left:28px;padding-right:28px}
html[data-formas="circulos"] .campo .c{border-radius:999px;padding-left:18px}
html[data-formas="circulos"] .pastillas .op{border-radius:999px;text-align:center}
html[data-formas="circulos"] .casa .est{border-radius:999px}
html[data-formas="circulos"] .linea .h::before{
  border-radius:50%;transform:none;width:14px;height:14px;left:-34px;
}
html[data-formas="circulos"] .trayecto{position:relative;overflow:hidden}
html[data-formas="circulos"] .trayecto::before{
  content:"";position:absolute;left:-150px;bottom:-180px;width:440px;height:440px;
  border-radius:50%;background:radial-gradient(circle,rgba(36,123,160,.10),transparent 70%);
  pointer-events:none;
}


/* ══════════════════════════════════════════════════════════
   Los componentes nuevos, en cada lenguaje.
   La galería y las fichas de casa también entran al círculo:
   dejarlas redondeadas era justo lo que hacía que redondo y
   círculo se confundieran.
   ══════════════════════════════════════════════════════════ */

/* ── REDONDAS ── */
html[data-formas="redondas"] .testimonio{border-radius:20px}
html[data-formas="redondas"] .flotante{border-radius:20px}

/* ── DIAGONALES ── */
html[data-formas="diagonales"] .testimonio{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
html[data-formas="diagonales"] .flotante{
  clip-path:polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}

/* ── CÍRCULOS: la galería es de círculos, no de rectángulos limados ── */
html[data-formas="circulos"] .mosaico{gap:26px 20px}
html[data-formas="circulos"] .mosaico figure{
  height:auto;border-radius:0;overflow:visible;
}
html[data-formas="circulos"] .mosaico figure.ancha{grid-column:span 1}
html[data-formas="circulos"] .mosaico img{
  aspect-ratio:1/1;height:auto;border-radius:50%;
}
html[data-formas="circulos"] .mosaico figcaption{
  position:static;background:none;color:var(--navy);text-align:center;
  padding:15px 6px 0;font-size:10.5px;letter-spacing:.11em;
}

/* La ficha de casa también estrena foto circular, para que no rompa el idioma */
html[data-formas="circulos"] .casa{text-align:center}
html[data-formas="circulos"] .casa .im{
  width:172px;height:172px;border-radius:50%;margin:28px auto 2px;overflow:hidden;
}
html[data-formas="circulos"] .casa .est{
  left:50%;transform:translateX(-50%);top:auto;bottom:-12px;
}
html[data-formas="circulos"] .casa .d{justify-content:center}

/* El dato flotante es un círculo completo */
html[data-formas="circulos"] .flotante{
  width:200px;height:200px;max-width:none;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;right:-18px;bottom:-18px;
}
html[data-formas="circulos"] .testimonio{border-radius:6px;text-align:center}
html[data-formas="circulos"] .testimonio .comilla{
  width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  font-size:26px;line-height:1;
}
html[data-formas="circulos"] .testimonio .quien{border-top:0}

/* La insignia se sale del circulo, asi que el recorte se lo queda la imagen y no
   el contenedor. Si no, PREVENTA queda a medias detras de la circunferencia. */
html[data-formas="circulos"] .casa .im,
html[data-formas="circulos"] .tj .im{overflow:visible;background:none}
html[data-formas="circulos"] .casa .im img,
html[data-formas="circulos"] .tj .im img{border-radius:50%}


/* ══════════════════════════════════════════════════════════════════════
   SEGUNDA VUELTA · que la diferencia se vea de lejos
   Miguel, 24-ago: los cambios eran demasiado sutiles.
   Aquí ya no se toca el acabado, se toca la COMPOSICIÓN: cómo está armada
   la tarjeta, cómo se acomoda la rejilla y cómo entra el encabezado.
   El banner sigue intocado en las cuatro.
   ══════════════════════════════════════════════════════════════════════ */


/* ── ACTUAL · la estricta ─────────────────────────────────────────────
   Rejilla pareja, borde fino, marca cuadrada. Es la referencia contra la
   que se comparan las otras tres. */

html[data-formas="base"] .eyebrow{padding-left:24px;position:relative}
html[data-formas="base"] .eyebrow::before{
  content:"";position:absolute;left:0;top:2px;width:13px;height:10px;background:var(--medio);
}
html[data-formas="base"] .hero .eyebrow{padding-left:0}
html[data-formas="base"] .hero .eyebrow::before{display:none}


/* ── REDONDAS · la foto se sale de la tarjeta ─────────────────────────
   Es la cabeza saliente de Finsco: la tarjeta pierde el borde, gana sombra
   y la foto flota por encima de ella. Cambia la silueta completa, no la esquina. */

html[data-formas="redondas"] .tarjetas{padding-top:28px}
html[data-formas="redondas"] .tj:not(.plana){
  overflow:visible;border:0;background:#fff;
  box-shadow:0 22px 54px -36px rgba(29,52,97,.8);
}
html[data-formas="redondas"] .tj:not(.plana) .im{
  margin:-28px 18px 0;height:198px;border-radius:18px;
  box-shadow:0 24px 46px -26px rgba(29,52,97,.85);
}
/* Con la foto saliente, la etiqueta ya no se encima: vuelve a su lugar como pastilla */
html[data-formas="redondas"] .tj:not(.plana) .k{
  position:static;transform:none;display:inline-block;align-self:flex-start;
  background:#eef4f8;color:var(--navy);padding:8px 15px;border-radius:999px;
  margin:0 0 12px;box-shadow:none;
}
html[data-formas="redondas"] .tj:not(.plana) .cn{padding-top:22px;padding-right:72px}

/* El disco de "ver más" que asoma en la esquina, como Solutek */
html[data-formas="redondas"] .tj:not(.plana){position:relative}
html[data-formas="redondas"] .tj:not(.plana)::after{
  content:"+";position:absolute;right:22px;bottom:22px;width:40px;height:40px;
  border-radius:50%;background:#eef4f8;color:var(--medio);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--texto);font-size:21px;font-weight:700;line-height:1;
  transition:background .22s ease,color .22s ease;
}
html[data-formas="redondas"] .tj:not(.plana):hover::after{background:var(--grad);color:#fff}

/* La ficha de casa también pierde el borde y gana aire */
html[data-formas="redondas"] .casa{border:0;box-shadow:0 22px 54px -36px rgba(29,52,97,.8)}

/* Antetítulo en pastilla */
html[data-formas="redondas"] .eyebrow{
  display:inline-block;background:#eef4f8;padding:8px 17px;border-radius:999px;
  color:var(--medio);margin-bottom:17px;
}
html[data-formas="redondas"] .cifras .eyebrow{background:rgba(255,255,255,.12)}
html[data-formas="redondas"] .hero .eyebrow{background:none;padding:0}


/* ── DIAGONALES · todo va inclinado ───────────────────────────────────
   Ya no solo las esquinas: la foto se corta en cuña, el antetítulo trae su
   propia barra sesgada y las secciones grises llevan una plancha inclinada. */

html[data-formas="diagonales"] .tj:not(.plana) .im{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
}
html[data-formas="diagonales"] .casa .im{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 24px));
}
html[data-formas="diagonales"] .eyebrow{padding-left:28px;position:relative}
html[data-formas="diagonales"] .eyebrow::before{
  content:"";position:absolute;left:0;top:1px;width:17px;height:12px;
  background:var(--medio);transform:skewX(-24deg);
}
html[data-formas="diagonales"] .hero .eyebrow{padding-left:0}
html[data-formas="diagonales"] .hero .eyebrow::before{display:none}

/* Plancha inclinada de fondo en las secciones grises */
html[data-formas="diagonales"] .seccion.gris{position:relative;overflow:hidden}
html[data-formas="diagonales"] .seccion.gris::before{
  content:"";position:absolute;left:-140px;top:-70px;width:460px;height:240px;
  background:linear-gradient(135deg,rgba(31,72,126,.09),rgba(36,123,160,.02));
  transform:skewY(-9deg);pointer-events:none;z-index:0;
}
html[data-formas="diagonales"] .seccion.gris>.wrap{position:relative;z-index:1}

/* Los pasos se escalonan, como un talud */
html[data-formas="diagonales"] .pasos>*:nth-child(2){margin-top:18px}
html[data-formas="diagonales"] .pasos>*:nth-child(3){margin-top:36px}
html[data-formas="diagonales"] .pasos>*:nth-child(4){margin-top:54px}


/* ── CÍRCULOS · la rejilla se acomoda como un dial ────────────────────
   Las tarjetas pares bajan, el encabezado centrado se apoya en un anillo y
   el antetítulo trae su punto. Es lo que hace que se lea distinto de lejos. */

html[data-formas="circulos"] .tarjetas>*:nth-child(even){margin-top:52px}
html[data-formas="circulos"] .casas>*:nth-child(even){margin-top:52px}
html[data-formas="circulos"] .uu>*:nth-child(even){margin-top:38px}

html[data-formas="circulos"] .cab.centro{position:relative}
html[data-formas="circulos"] .cab.centro::before{
  content:"";position:absolute;left:50%;top:-62px;width:240px;height:240px;
  transform:translateX(-50%);border-radius:50%;border:1px solid rgba(36,123,160,.26);
  pointer-events:none;z-index:0;
}
html[data-formas="circulos"] .cab.centro>*{position:relative;z-index:1}

html[data-formas="circulos"] .eyebrow{display:inline-flex;align-items:center;gap:10px}
html[data-formas="circulos"] .eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--medio);flex:0 0 9px;
}
html[data-formas="circulos"] .hero .eyebrow::before{display:none}

/* El disco de "ver más", aquí trazado en vez de relleno */
html[data-formas="circulos"] .tj:not(.plana){position:relative}
html[data-formas="circulos"] .tj:not(.plana)::after{
  content:"+";position:absolute;right:20px;bottom:20px;width:40px;height:40px;
  border-radius:50%;border:1.5px solid var(--line);color:var(--medio);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--texto);font-size:21px;font-weight:700;line-height:1;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
html[data-formas="circulos"] .tj:not(.plana):hover::after{
  background:var(--grad);color:#fff;border-color:transparent;
}

@media (max-width:1100px){
  html[data-formas="circulos"] .tarjetas>*:nth-child(even),
  html[data-formas="circulos"] .casas>*:nth-child(even),
  html[data-formas="circulos"] .uu>*:nth-child(even){margin-top:0}
  html[data-formas="diagonales"] .pasos>*{margin-top:0 !important}
}

/* En los encabezados centrados el antetitulo es un parrafo de ancho completo, asi que
   su marca se iba al extremo izquierdo del contenedor. Encogiendolo al ancho del texto
   la marca vuelve a pegarse a la palabra. */
html[data-formas="base"] .cab.centro .eyebrow,
html[data-formas="diagonales"] .cab.centro .eyebrow{display:inline-block}


/* ══════════════════════════════════════════════════════════════════════
   TERCERA VUELTA · los componentes de referencia, uno por opción
   Cada lenguaje se queda con un patrón que los otros no tienen. A tres
   metros de la pantalla se distinguen sin leer una sola palabra.
   ══════════════════════════════════════════════════════════════════════ */


/* ── REDONDAS · la fila se alterna, como Finsco ───────────────────────
   Una tarjeta blanca, la siguiente en navy. Es el cambio más visible de
   los cuatro y el que de verdad rompe la sensación de rejilla. */

html[data-formas="redondas"] .tarjetas>.tj:nth-child(even){background:var(--navy);border-color:var(--navy)}
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even) h3{color:#fff}
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even) p{color:#c6d4e6}
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even) .ir{color:#fff}
html[data-formas="redondas"] .tarjetas>.tj:not(.plana):nth-child(even) .k{
  background:rgba(255,255,255,.14);color:#fff;
}
/* En las tarjetas sin foto la clave sigue siendo un bloque de ancho completo:
   si se le pone fondo, sale una barra atravesada. Solo se le cambia el color. */
html[data-formas="redondas"] .tarjetas>.tj.plana:nth-child(even) .k{color:var(--claro)}
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even) .palomas li{color:#dbe7f2}
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even) .palomas li::before,
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even) .palomas li::after{border-color:var(--claro)}
html[data-formas="redondas"] .tarjetas>.tj:nth-child(even)::after{
  background:rgba(255,255,255,.14);color:#fff;
}
html[data-formas="redondas"] .palomas li::before{border-radius:50%}
html[data-formas="redondas"] .barra .pista,
html[data-formas="redondas"] .barra .pista i{border-radius:999px}
html[data-formas="redondas"] .barra .pista{height:10px}


/* ── DIAGONALES · el número fantasma detrás de la tarjeta ─────────────
   Es el recurso de los temas industriales: un numeral enorme, casi
   invisible, que le da fondo a la ficha. Aquí va sesgado con la tarjeta. */

html[data-formas="diagonales"] .tj[data-n]{position:relative}
html[data-formas="diagonales"] .tj[data-n]::before{
  content:attr(data-n);position:absolute;right:2px;bottom:-24px;z-index:0;
  font-family:var(--display);font-size:104px;line-height:1;
  color:rgba(29,52,97,.075);pointer-events:none;
}
html[data-formas="diagonales"] .tj[data-n].destacada::before{color:rgba(255,255,255,.10)}
html[data-formas="diagonales"] .tj .cn{position:relative;z-index:1}

/* Las barras van sesgadas, como todo lo demás */
html[data-formas="diagonales"] .barra .pista{height:13px;transform:skewX(-22deg)}
html[data-formas="diagonales"] .palomas li::before{transform:skewX(-16deg)}


/* ── CÍRCULOS · anillo alrededor de la foto y avance en dona ──────────
   El anillo alterna trazado y sólido, así que la fila también se alterna
   pero sin rellenar la tarjeta: aquí el que manda es el círculo. */

html[data-formas="circulos"] .tj:not(.plana) .im img{
  box-shadow:0 0 0 7px #fff, 0 0 0 9px var(--line);
}
html[data-formas="circulos"] .tarjetas>.tj:nth-child(even) .im img{
  box-shadow:0 0 0 7px #fff, 0 0 0 9px var(--medio);
}
html[data-formas="circulos"] .palomas{justify-items:center}
html[data-formas="circulos"] .palomas li{padding-left:0;padding-top:26px;text-align:center}
html[data-formas="circulos"] .palomas li::before{left:50%;top:0;margin-left:-8px;border-radius:50%}
html[data-formas="circulos"] .palomas li::after{left:50%;top:2px;margin-left:-2px}

/* El avance deja de ser una barra y se vuelve una dona */
html[data-formas="circulos"] .barras{grid-template-columns:repeat(5,1fr);gap:30px}
html[data-formas="circulos"] .barra{
  grid-template-columns:1fr;justify-items:center;text-align:center;gap:16px;position:relative;
}
html[data-formas="circulos"] .barra .pista{
  order:1;width:124px;height:124px;border-radius:50%;overflow:visible;
  background:conic-gradient(var(--medio) calc(var(--p) * 1%), var(--line) 0);
}
html[data-formas="circulos"] .barra .pista::after{
  content:"";position:absolute;inset:14px;border-radius:50%;background:#fff;
}
html[data-formas="circulos"] .barra .pista i{display:none}
html[data-formas="circulos"] .barra .et{order:2;font-size:10.5px;line-height:1.4}
html[data-formas="circulos"] .barra .pct{
  position:absolute;top:0;left:0;right:0;height:124px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--navy);z-index:1;
}

@media (max-width:900px){
  html[data-formas="circulos"] .barras{grid-template-columns:repeat(2,1fr)}
}




/* ── La tarjeta de cifras, en el lenguaje de cada opción ── */
html[data-formas="redondas"] .cifras>.wrap{border-radius:24px}
html[data-formas="diagonales"] .cifras>.wrap{
  clip-path:polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px);
}
html[data-formas="circulos"] .cifras>.wrap{border-radius:8px}

/* En círculos los anillos concéntricos se mudan de la sección a la tarjeta:
   con el fondo transparente se quedaban flotando fuera de ella. */
html[data-formas="circulos"] .cifras{overflow:visible}
html[data-formas="circulos"] .cifras::after{display:none}
html[data-formas="circulos"] .cifras>.wrap{overflow:hidden}
html[data-formas="circulos"] .cifras>.wrap::after{
  content:"";position:absolute;left:50%;top:50%;width:1500px;height:1500px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-radial-gradient(circle,
    rgba(255,255,255,.085) 0 1px, transparent 1px 96px);
}
html[data-formas="circulos"] .cifras>.wrap>*{position:relative;z-index:1}