/* ==========================================================================
   VARIANTES DE SECCION — DISEÑO 2

   Cada seccion que haya que decidir se envuelve en un carrusel con sus
   opciones dentro. No gira solo: se cambia a mano.

   Las variantes comparten el MISMO marcado. Lo unico que cambia es una clase
   en la seccion, asi que lo que se compara es la misma pieza con un ajuste,
   sin diferencias escondidas de maquetacion.

   Es andamiaje de decision. Al elegir una opcion se queda esa diapositiva y
   se retira el resto: la pagina final no lleva carrusel.
   ========================================================================== */


/* --------------------------------------------------------------------------
   EL CARRUSEL
   -------------------------------------------------------------------------- */

.d2-caru {
  position: relative;
}

/* Las diapositivas ocultas se sacan del flujo con [hidden], no con display
   en CSS: asi el lector de pantalla tampoco las anuncia. */
.d2-caru__diapo[hidden] { display: none; }

.d2-caru__diapo > .d2-hero {
  animation: d2-caru-entra .32s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes d2-caru-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   LOS MANDOS

   Van dentro del hero, abajo a la derecha: es donde no estorban ni al
   titular ni al panel de datos.
   -------------------------------------------------------------------------- */

.d2-caru__mandos {
  position: absolute;
  right: max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter)));
  bottom: 26px;
  z-index: 3;

  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;

  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-borde-suave, #EFEFEF);
  border-radius: 999px;
  box-shadow: 0 2px 18px rgba(2, 51, 0, .12);
}

#caru-calc .d2-caru__mandos {
  top: clamp(44px, 4.8vw, 68px);
  bottom: auto;
}

#caru-calc .d2-caru__mandos.esta-minimizado {
  transform: translateX(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 15px));
}

#caru-calc .d2-caru__mandos.esta-minimizado:hover {
  transform: translateX(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 9px));
}

/* El carrusel del problema es una seccion alta: los mandos van arriba a la
   derecha, a la altura de la cabecera, donde hay aire libre. Abajo
   quedarian fuera de la vista al empezar a leer. */
#caru-problema .d2-caru__mandos {
  top: clamp(48px, 5.4vw, 76px);
  bottom: auto;
}

#caru-problema .d2-caru__mandos.esta-minimizado {
  transform: translateX(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 15px));
}

#caru-problema .d2-caru__mandos.esta-minimizado:hover {
  transform: translateX(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 9px));
}

/* En el carrusel de logos los mandos van DENTRO de la franja, centrados
   en su alto: colgados por debajo quedaban despegados de la seccion que
   controlan y se leian como si fueran de la siguiente.

   El centrado se toma de la diapositiva visible, no del carrusel entero:
   el carrusel mide lo que la diapositiva mas alta, asi que centrarlo
   sobre el dejaba los mandos por debajo de la franja. */
#caru-logos .d2-caru__mandos {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* Al minimizar hay que repetir el centrado: poniendo solo translateX se
   pierde el translateY y la barra salta arriba. */
#caru-logos .d2-caru__mandos.esta-minimizado {
  transform: translate(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 15px), -50%);
}

#caru-logos .d2-caru__mandos.esta-minimizado:hover {
  transform: translate(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 9px), -50%);
}

.d2-caru__flecha {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--c-texto, #333);
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

.d2-caru__flecha:hover {
  background: var(--c-verde, #39B54A);
  color: #fff;
}

.d2-caru__flecha:focus-visible {
  outline: 2px solid var(--c-verde, #39B54A);
  outline-offset: 2px;
}

.d2-caru__puntos {
  display: flex;
  align-items: center;
  gap: 3px;
}

.d2-caru__punto {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  font: inherit;
  transition: background-color .18s, color .18s;
}

.d2-caru__punto span {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.d2-caru__punto small {
  font-size: 11.5px;
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MINIMIZAR LOS MANDOS

   Minimizada, la barra se encoge y ademas se va hasta el borde derecho de
   la pantalla, donde queda como una media pastilla asomando: lo justo para
   verla y poder pulsarla, sin nada mas a la vista.

   Se anima el ancho ademas de la posicion. Solo desplazandola parecia que
   se iba a otro sitio; encogiendose se lee que se guarda, y el recorrido
   hasta el borde es lo que la quita de encima de la seccion.
   -------------------------------------------------------------------------- */

.d2-caru__mandos {
  /* La misma curva del header: arranca decidido y frena muy suave */
  transition: width .46s cubic-bezier(.32, .72, 0, 1),
              padding .46s cubic-bezier(.32, .72, 0, 1),
              transform .46s cubic-bezier(.32, .72, 0, 1),
              border-radius .46s cubic-bezier(.32, .72, 0, 1);
  overflow: hidden;
}

/* Se arrastra la distancia que la separa del borde -- la misma expresion
   que usa `right`, porque en pantallas anchas la barra va centrada
   respecto al ancho maximo y no a un gutter -- mas la mitad de lo que
   mide encogida. Asi su mitad derecha se sale y solo asoma media
   pastilla. */
.d2-caru__mandos.esta-minimizado {
  width: 34px;
  padding-inline: 4px;
  transform: translateX(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 15px));

  /* Cortada por el borde, las esquinas de la derecha ya no se ven: se
     redondea solo el lado que queda dentro. */
  border-radius: 999px 0 0 999px;
}

/* Lo de dentro se desvanece antes de que el ancho termine de cerrarse: si
   siguiera visible se veria aplastarse contra el borde. */
.d2-caru__mandos.esta-minimizado .d2-caru__puntos,
.d2-caru__mandos.esta-minimizado .d2-caru__flecha {
  opacity: 0;
  pointer-events: none;
}

.d2-caru__puntos,
.d2-caru__flecha {
  transition: opacity .22s ease;
}

/* --------------------------------------------------------------------------
   El boton que abre y cierra
   -------------------------------------------------------------------------- */

.d2-caru__ocultar {
  display: grid;
  place-items: center;
  flex: none;
  order: -1;          /* siempre el primero: es el que queda al encogerse */
  width: 26px;
  height: 28px;
  margin-right: 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6B7280;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}

.d2-caru__ocultar:hover {
  background: var(--c-verde, #39B54A);
  color: #fff;
}

.d2-caru__ocultar:focus-visible {
  outline: 2px solid var(--c-verde, #39B54A);
  outline-offset: 2px;
}

/* Minimizado el boton es lo unico que queda. Se pinta en verde para que se
   lea como algo que abre y no como un resto de la barra, y se desplaza a
   la izquierda para que su icono caiga en la mitad que sigue visible. */
.d2-caru__mandos.esta-minimizado .d2-caru__ocultar {
  width: 100%;
  margin-right: 0;
  padding-right: 12px;
  background: var(--c-verde, #39B54A);
  color: #fff;
  border-radius: 999px 0 0 999px;
}

.d2-caru__ocultar svg {
  transition: transform .46s cubic-bezier(.32, .72, 0, 1);
}

/* Minimizado, el icono pasa de equis a flecha: la equis dice "cerrar" y
   ahi el boton ya no cierra, abre. Se gira 45 grados, que convierte la
   equis en una cruz, y se marca con el fondo verde.

   Es el mismo elemento en los dos estados, asi que la transicion entre
   ellos es continua en vez de un cambio de icono. */
.d2-caru__mandos.esta-minimizado .d2-caru__ocultar svg {
  transform: rotate(45deg);
}

/* Asomando poco, conviene que responda a la primera: al acercarse crece un
   par de pixeles hacia dentro para indicar que se puede pulsar. */
.d2-caru__mandos.esta-minimizado:hover {
  transform: translateX(calc(max(var(--d2-gutter), calc(50vw - var(--d2-ancho) / 2 + var(--d2-gutter))) + 9px));
}

@media (prefers-reduced-motion: reduce) {
  .d2-caru__mandos,
  .d2-caru__puntos,
  .d2-caru__flecha,
  .d2-caru__ocultar,
  .d2-caru__ocultar svg { transition: none; }
}


.d2-caru__punto:hover { background: rgba(0, 0, 0, .05); color: var(--c-texto, #333); }

.d2-caru__punto.es-activo {
  background: var(--c-verde, #39B54A);
  color: #fff;
}

.d2-caru__punto:focus-visible {
  outline: 2px solid var(--c-verde, #39B54A);
  outline-offset: 2px;
}


/* ==========================================================================
   OPCION 2 — el panel un 20% mas pequeño
   ========================================================================== */

/* El panel no tiene ancho propio: lo da la columna de la rejilla. Encogerlo
   con transform:scale desenfocaria el texto, asi que se estrecha la columna
   y el panel la sigue.

   El hueco que deja se lo queda la columna de texto: el titular respira en
   vez de dejar un vacio. */

.d2-hero.es-variante-b .d2-hero__inner {
  grid-template-columns: minmax(0, 1.22fr) minmax(0, .82fr);
}

/* Los adentros se ajustan al nuevo ancho: sin esto, el padding y las cifras
   quedarian desproporcionados dentro de una caja mas estrecha. */
.d2-hero.es-variante-b .d2-panel {
  padding: clamp(16px, 1.9vw, 22px);
}

.d2-hero.es-variante-b .d2-metrica__valor {
  font-size: clamp(26px, 2.6vw, 32px);
}

.d2-hero.es-variante-b .d2-panel__titulo {
  font-size: 15px;
}

/* El render se desplaza a la derecha.

   `object-position` NO sirve aqui: la imagen es mas ancha que su hueco
   (1.83 contra 1.52), asi que con `cover` solo sobran 204px de ancho. Un 18%
   movia 37px sobre 1183px de imagen: invisible.

   Se desplaza el elemento entero y se ensancha otro tanto, para que no
   quede un hueco blanco por la izquierda al correrlo. */
/* ==========================================================================
   OPCION 3 — panel translucido, tamaño original
   ========================================================================== */

/* La rejilla no se toca: el panel mide lo mismo que en el hero original.
   Lo unico que cambia es que deja ver el render por detras. */

.d2-hero.es-variante-c .d2-hero__fondo {
  /* El render sube de opacidad SOLO en esta variante: con el 50% original,
     bajo un panel translucido apenas quedaba un 4% de imagen visible y el
     efecto no se apreciaba. */
  opacity: .66;
}

.d2-hero.es-variante-c .d2-panel {
  /* SIN desenfoque.

     El backdrop-filter funciona sobre fotos, pero este render es un dibujo
     de lineas finas: un blur de 14px lo convertia en una mancha gris. El
     edificio desaparecia antes de que la transparencia lo dejara pasar, y
     por eso la opcion 3 se veia casi igual que la 1.

     Sin blur el trazo se conserva y se reconoce el edificio. Como el dibujo
     es claro y de poco contraste, el texto encima sigue leyendose: medido
     mas abajo. */
  background: rgba(255, 255, 255, .78);

  /* Sobre foto, el borde suave se pierde y la caja parece flotar sin apoyo */
  border-color: rgba(255, 255, 255, .75);
  box-shadow: 0 2px 40px rgba(2, 51, 0, .22);
}

/* Las cajas de las metricas tienen su propio fondo menta OPACO y ocupan el
   26% del panel, justo donde va la vista primero. Transparentar solo el
   panel dejaba pasar la imagen por los margenes pero no por el centro, que
   es lo que se estaba viendo (o mejor dicho, lo que no se veia).

   El filtro conserva su tono menta transparente; las metricas ya no
   tienen caja que transparentar. */
.d2-hero.es-variante-c .d2-panel__filtro {
  background: rgba(242, 249, 242, .66);
}

/* La etiqueta ya no se apoya en un fondo menta: sobre el panel
   translucido necesita algo mas de peso para sostener el contraste. */
.d2-hero.es-variante-c .d2-metrica__label {
  color: #3D3D3D;
}

/* El grafico lleva una rejilla y un area en gris muy claro; sobre la imagen
   pierden referencia. Se refuerzan un punto para que el dato siga
   leyendose como un grafico y no como un dibujo suelto. */
.d2-hero.es-variante-c .d2-grafico svg g[stroke="#EFEFEF"] line {
  stroke: rgba(120, 130, 122, .34);
}


/* --------------------------------------------------------------------------
   MOVIL

   Por debajo de 1000px el hero ya apila en una columna y el render pasa a
   ocupar todo el ancho al 22% de opacidad, detras del contenido.

   Ahi las dos variantes dejan de tener sentido: no hay dos columnas que
   reequilibrar, y sobre un fondo tan tenue la transparencia no se aprecia
   pero si resta contraste. Las tres vuelven a ser iguales, que es lo que
   hace el hero original.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .d2-hero.es-variante-b .d2-hero__inner { grid-template-columns: 1fr; }

  .d2-hero.es-variante-b .d2-panel { padding: clamp(20px, 2.4vw, 28px); }
  .d2-hero.es-variante-b .d2-metrica__valor { font-size: clamp(28px, 3.4vw, 38px); }
  .d2-hero.es-variante-b .d2-panel__titulo { font-size: 16px; }

  /* La transparencia SE MANTIENE en movil: es una variante que hay que
     comparar, y si en el movil se ve como la 1 no se puede juzgar.

     Se sube un punto respecto a escritorio porque aqui el render pasa por
     DETRAS del texto (no a un lado), asi que hay mas superficie de dibujo
     bajo las cifras. Contraste comprobado. */
  /* El desplazamiento (right/width) es para la version de dos columnas. En
     movil el render debe volver a ocupar todo el ancho: con el 77% quedaba
     en 300px sobre un panel de 350 y un tercio de la caja no tenia nada
     debajo. */
  .d2-hero__fondo {
    right: 0;
    left: auto;
    width: 100%;
  }


  /* La regla base baja el render al 22% en movil. Sube al mismo .66 que en
     escritorio para que la cantidad de dibujo que atraviesa el panel sea la
     misma en los dos sitios. */
  /* El .66 es para el render al LADO del texto. Apilado va detras, asi
     que la opacidad la fija la regla de es-enc-escena de mas abajo. */
  .d2-hero.es-variante-c .d2-hero__fondo:not(.es-enc-escena) { opacity: .66; }

  /* Los MISMOS valores que en escritorio: es la misma variante, y si aqui
     se ve mas solida no se puede comparar. Las reglas de panel y metricas
     ya son globales, asi que no hace falta repetirlas. */
}

@media (max-width: 900px) {
  /* El hero mide 1150px en movil: los mandos abajo quedaban a 500px de
     scroll y nadie los veria. Suben arriba del todo, donde se ven al
     entrar, y se centran. */
  /* :not([hidden]) es imprescindible: un `display` en una regla normal gana
     al `display:none` que el navegador da por el atributo hidden, y los
     carruseles apagados --caru-problema y caru-prueba-- reaparecian por
     debajo de este ancho. Venia de antes; se vio al unificar breakpoints. */
  .d2-caru:not([hidden]) { display: flex; flex-direction: column; }
  .d2-caru__diapo { order: 2; }

  /* Flotan sobre la seccion, no la empujan (8/9/2026).

     Estaban en flujo con `position:static` y un margen de 14px: siete
     barras de 46px sumaban 322px de altura que se repartian entre las
     secciones y les rompian el alto. Son mandos de PRUEBA --se retiran
     antes de publicar-- asi que no pueden condicionar como se ve el
     diseno.

     Flotando no ocupan sitio, y pegados abajo a la derecha quedan lejos
     del contenido. */
  .d2-caru__mandos {
    order: 1;
    position: absolute;
    right: 12px;
    bottom: 14px;
    left: auto;
    align-self: auto;
    margin: 0;
    transform: none;
    /* Mas discretas que en escritorio: son andamiaje, no diseno. */
    opacity: .82;
  }

  /* El boton de plegar SI se muestra: es lo que pidio el usuario para
     poder esconderlas. Sin el no habria forma de quitarlas de en medio.

     El ancho hay que repetirlo: la regla de escritorio lo da junto al
     `display`, y al reactivarlo aqui el boton se estiraba a los 222px del
     contenedor, que impedia que la barra encogiese al plegarse. */
  .d2-caru__ocultar {
    display: grid;
    flex: none;
    width: 26px;
    height: 28px;
  }

  /* Plegadas quedan como una pastilla pequena en su sitio, sin salirse de
     la pantalla: el desplazamiento lateral de escritorio la mandaria
     fuera y no habria forma de recuperarla. */
  .d2-caru__mandos.esta-minimizado {
    /* Ancho fijo, no `auto`: los puntos y las flechas siguen ocupando su
       sitio --estan a opacity 0, no display:none-- y con `auto` mantenian
       la barra abierta a 234px. Con 36px queda solo el boton. */
    width: 36px;
    padding-inline: 5px;
    transform: none;
    border-radius: 999px;
    opacity: .6;
  }

  /* Plegada, lo de dentro se RETIRA del flujo. Con opacity:0 seguia
     midiendo --los puntos se salian hasta 526px en una pantalla de 390-- y
     el documento desbordaba 23px a lo ancho. El overflow:hidden solo los
     tapaba; no impedia que empujaran el ancho de la pagina. */
  .d2-caru__mandos.esta-minimizado .d2-caru__puntos,
  .d2-caru__mandos.esta-minimizado .d2-caru__flecha,
  .d2-caru__mandos.esta-minimizado .d2-hero-imagenes__eti,
  .d2-caru__mandos.esta-minimizado .d2-logos-fondos__eti,
  .d2-caru__mandos.esta-minimizado .d2-rutas-ondas__eti,
  .d2-caru__mandos.esta-minimizado .d2-hero-imagenes__panel {
    display: none;
  }

  /* Tres carruseles llevan su propio desplazamiento lateral al plegarse,
     escrito con #id --especificidad 1,2,0--, que una regla de clase no
     puede vencer: el `transform:none` de arriba no les llegaba y la barra
     de logos se iba a 413px en una pantalla de 390.

     Ese desplazamiento saca media pastilla por el borde derecho, que es un
     gesto de escritorio. En movil las barras ya estan pegadas al borde con
     `right`, asi que solo hay que devolverles su centrado vertical --el de
     logos-- y quitar el resto. */
  #caru-calc .d2-caru__mandos.esta-minimizado,
  #caru-calc .d2-caru__mandos.esta-minimizado:hover,
  #caru-problema .d2-caru__mandos.esta-minimizado,
  #caru-problema .d2-caru__mandos.esta-minimizado:hover {
    transform: none;
  }

  #caru-logos .d2-caru__mandos.esta-minimizado,
  #caru-logos .d2-caru__mandos.esta-minimizado:hover {
    transform: translateY(-50%);
  }

  /* Solo el numero: la etiqueta no cabe sin apretar los botones */
  .d2-caru__punto small { display: none; }
  .d2-caru__punto { padding: 0 14px; }

  /* 44px de alto real para el dedo, sin agrandar la pastilla */
  .d2-caru__punto,
  .d2-caru__flecha { position: relative; }
  .d2-caru__punto::after,
  .d2-caru__flecha::after {
    content: '';
    position: absolute;
    inset: -5px 0;
  }
}


/* --------------------------------------------------------------------------
   MENOS MOVIMIENTO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .d2-caru__diapo > .d2-hero { animation: none; }
  .d2-caru__flecha,
  .d2-caru__punto { transition: none; }
}


/* ==========================================================================
   EL FILTRO "ALL BUILDINGS" NO ES UN CONTROL

   El panel es una ILUSTRACION de lo que hace el producto, no el producto.
   Estaba montado con un <select> real: se podia desplegar, recibia foco y
   el lector de pantalla lo anunciaba como un control. Prometia algo que no
   existe.

   Ahora es un <span> decorativo. Se conserva el aspecto porque forma parte
   del dibujo del panel, pero deja de comportarse como algo pulsable.
   Aplica a las tres variantes.
   ========================================================================== */

span.d2-panel__filtro {
  /* Un span no tiene caja propia: se le da la del select que sustituye */
  display: inline-flex;
  align-items: center;

  /* Ya no es interactivo */
  cursor: default;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Sin estados: no responde al raton porque no hay nada que pulsar */
span.d2-panel__filtro:hover {
  background-color: var(--d2-relleno);
  border-color: rgba(2, 51, 0, .12);
}


/* ==========================================================================
   EL PANEL COBRA VIDA

   El panel entraba de una pieza: aparecia entero y quieto, y se leia como
   una captura de pantalla. Animado se lee como un producto que esta
   funcionando.

   Tres capas, en este orden:
     1. las cifras cuentan hasta su valor      (lo hace el JS)
     2. las lineas del grafico se dibujan
     3. los puntos aparecen sobre la linea ya trazada

   El orden importa: primero el dato, despues su evolucion. Al reves, la
   linea distrae de la cifra, que es lo que hay que leer.

   Todo arranca cuando el panel entra en pantalla, no al cargar: si no,
   sucede antes de que nadie lo vea.
   ========================================================================== */

/* --- Las lineas del grafico se dibujan --- */

.d2-grafico .g-linea,
.d2-grafico .g-base {
  /* ~500 unidades medidas con getTotalLength() */
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
}

.d2-panel.esta-vivo .g-base {
  animation: d2-trazar 1.5s cubic-bezier(.33, 1, .68, 1) .35s forwards;
}

.d2-panel.esta-vivo .g-linea {
  /* La verde entra despues: es la protagonista y conviene que se lea sola */
  animation: d2-trazar 1.6s cubic-bezier(.33, 1, .68, 1) .55s forwards;
}

@keyframes d2-trazar {
  to { stroke-dashoffset: 0; }
}

/* --- El area bajo la linea --- */

.d2-grafico .g-area {
  opacity: 0;
  transform-origin: bottom;
}

.d2-panel.esta-vivo .g-area {
  /* Entra cuando la linea ya casi termino de trazarse */
  animation: d2-rellenar 1s ease-out 1.35s forwards;
}

@keyframes d2-rellenar {
  from { opacity: 0; transform: scaleY(.55); }
  to   { opacity: 1; transform: none; }
}

/* --- Los puntos, uno tras otro --- */

.d2-grafico .g-puntos circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.d2-panel.esta-vivo .g-puntos circle {
  animation: d2-punto .42s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

/* Escalonado: siguen el recorrido de la linea, de enero a diciembre */
.d2-panel.esta-vivo .g-puntos circle:nth-child(1) { animation-delay: 1.35s; }
.d2-panel.esta-vivo .g-puntos circle:nth-child(2) { animation-delay: 1.47s; }
.d2-panel.esta-vivo .g-puntos circle:nth-child(3) { animation-delay: 1.59s; }
.d2-panel.esta-vivo .g-puntos circle:nth-child(4) { animation-delay: 1.71s; }
.d2-panel.esta-vivo .g-puntos circle:nth-child(5) { animation-delay: 1.83s; }

@keyframes d2-punto {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- La rejilla, discreta --- */

.d2-grafico .g-rejilla { opacity: 0; }

.d2-panel.esta-vivo .g-rejilla {
  animation: d2-aparecer .8s ease-out .15s forwards;
}

@keyframes d2-aparecer {
  to { opacity: 1; }
}

/* --- Las cajas de las metricas --- */

.d2-panel .d2-metrica {
  opacity: 0;
  transform: translateY(8px);
}

.d2-panel.esta-vivo .d2-metrica {
  animation: d2-subir .7s cubic-bezier(.22, 1, .36, 1) forwards;
}

.d2-panel.esta-vivo .d2-metrica:nth-of-type(1) { animation-delay: .1s; }
.d2-panel.esta-vivo .d2-metrica:nth-of-type(2) { animation-delay: .22s; }

@keyframes d2-subir {
  to { opacity: 1; transform: none; }
}

/* La pastilla del delta entra al final, cuando su cifra ya se leyo */
.d2-panel .d2-metrica__delta {
  opacity: 0;
  transform: scale(.94);
}

.d2-panel.esta-vivo .d2-metrica__delta {
  animation: d2-pastilla .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.d2-panel.esta-vivo .d2-metrica:nth-of-type(1) .d2-metrica__delta { animation-delay: 1.05s; }
.d2-panel.esta-vivo .d2-metrica:nth-of-type(2) .d2-metrica__delta { animation-delay: 1.17s; }

@keyframes d2-pastilla {
  to { opacity: 1; transform: none; }
}

/* --- Los meses --- */

.d2-grafico__meses span {
  opacity: 0;
  animation-fill-mode: forwards;
}

.d2-panel.esta-vivo .d2-grafico__meses span {
  animation: d2-aparecer .5s ease-out forwards;
}


/* --------------------------------------------------------------------------
   SIN MOVIMIENTO

   Si el sistema pide menos animacion, el panel aparece ya montado. No se
   trata de acelerarlo: se trata de que no haya nada que seguir con la vista.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .d2-grafico .g-linea,
  .d2-grafico .g-base { stroke-dasharray: none; stroke-dashoffset: 0; }

  .d2-grafico .g-area,
  .d2-grafico .g-rejilla,
  .d2-grafico .g-puntos circle,
  .d2-panel .d2-metrica,
  .d2-panel .d2-metrica__delta,
  .d2-grafico__meses span { opacity: 1; transform: none; animation: none; }
}


/* ==========================================================================
   EL HEADER

   Cuatro cambios pedidos, mas la animacion del desplegable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA NAVEGACION SE VA A LA DERECHA

   Estaba centrada con `margin-inline: auto`, que reparte el hueco a los dos
   lados. Ahora todo el hueco se va a la izquierda, asi que el bloque
   nav + botones queda agrupado a la derecha y el logo respira.
   -------------------------------------------------------------------------- */

.d2 .header__inner .nav {
  margin-inline: auto 0;
}

/* Un poco de aire entre la navegacion y los botones, para que no se lean
   como una sola fila de cosas pulsables */
/* Client Login a la misma distancia que el resto del menu.

   El margen se suma a dos cosas que ya separan: los 7px que sobran dentro
   del nav tras el ultimo enlace, y los 24px de padding del boton. Medido
   con 36px aqui: los enlaces se separaban 29 entre si y Client Login
   quedaba a 68, mas del doble.

   Proporcional y no fijo, porque el hueco de los enlaces escala con el
   ancho --26px a 1280, 29 a 1440, 32 a 1600-- y un valor fijo rompia el
   ritmo al cambiar de pantalla. */
.d2 .header__inner .header__actions {
  margin-inline-start: clamp(2px, .35vw, 8px);
}


/* --------------------------------------------------------------------------
   2. CLIENT LOGIN, AHORA BOTON

   Sube de la barra superior al header. Va en version linea, no solido: dos
   botones solidos se disputarian la atencion y la llamada principal es
   "Book a Call".
   -------------------------------------------------------------------------- */

.d2 .header__actions {
  /* Sin `display`: por debajo de 400px d2.css oculta este bloque a
     proposito y no hay que revivirlo. Poniendo flex aqui, el boton de
     Client Login empujaba el burger fuera de la pantalla. */
  align-items: center;
  gap: var(--sp-3);
}

.d2 .header__login-btn {
  gap: 7px;
}

.d2 .header__login-btn svg {
  /* El icono acompaña al texto, no lo encabeza: mismo peso visual */
  opacity: .75;
}

/* Por debajo de cierto ancho el header no da para dos botones: se queda el
   principal. Client Login sigue en el menu movil. */
@media (max-width: 1000px) {
  .d2 .header__actions .header__login-btn { display: none; }
}


/* --------------------------------------------------------------------------
   3. EL DESPLEGABLE, CON EL MOVIMIENTO DE APPLE

   La curva es la que usa Apple en sus menus: arranca decidido y frena muy
   suave al final, sin rebote. Es lo que hace que se sienta "caro" en vez de
   brusco.

   Se anima opacity y transform, que el navegador resuelve en la GPU. Animar
   height o display provoca saltos.
   -------------------------------------------------------------------------- */

.d2 .nav__drop {
  /* La animacion vieja era un fundido plano */
  animation: none;

  /* Nace un poco arriba y encogido, como si se desplegara desde el boton */
  transform-origin: top center;
  opacity: 0;
  transform: translate(-50%, -8px) scale(.97);
  transition:
    opacity   .28s cubic-bezier(.32, .72, 0, 1),
    transform .38s cubic-bezier(.32, .72, 0, 1),
    visibility 0s linear .38s;
  visibility: hidden;

  /* translate propio del original: se anula para manejarlo todo en transform */
  translate: none;
  left: 50%;
}

.d2 .nav__drop.esta-abierto {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  visibility: visible;
  transition:
    opacity   .3s  cubic-bezier(.32, .72, 0, 1),
    transform .42s cubic-bezier(.32, .72, 0, 1),
    visibility 0s;
}

/* Las filas entran escalonadas detras del panel: es el detalle que separa
   un menu que "aparece" de uno que "se despliega". */
.d2 .nav__drop__lista > li {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity   .3s cubic-bezier(.32, .72, 0, 1),
    transform .3s cubic-bezier(.32, .72, 0, 1);
}

.d2 .nav__drop.esta-abierto .nav__drop__lista > li { opacity: 1; transform: none; }

.d2 .nav__drop.esta-abierto .nav__drop__lista > li:nth-child(1) { transition-delay: .04s; }
.d2 .nav__drop.esta-abierto .nav__drop__lista > li:nth-child(2) { transition-delay: .07s; }
.d2 .nav__drop.esta-abierto .nav__drop__lista > li:nth-child(3) { transition-delay: .10s; }
.d2 .nav__drop.esta-abierto .nav__drop__lista > li:nth-child(4) { transition-delay: .13s; }

.d2 .nav__drop__destacado {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity   .32s cubic-bezier(.32, .72, 0, 1) .14s,
    transform .32s cubic-bezier(.32, .72, 0, 1) .14s;
}

.d2 .nav__drop.esta-abierto .nav__drop__destacado { opacity: 1; transform: none; }

/* La flechita del boton gira mientras el panel se abre */
.d2 .nav__caret {
  transition: transform .38s cubic-bezier(.32, .72, 0, 1);
}

.d2 .nav__toggle[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}


/* --------------------------------------------------------------------------
   4. EL MENU MOVIL: UN PANEL QUE ENTRA POR LA IZQUIERDA

   Antes se desplegaba hacia abajo empujando la pagina. Como panel lateral
   cabe la misma informacion que el mega menu de escritorio --icono, nombre
   y descripcion-- sin que la lista quede kilometrica.

   El movimiento es el de iOS: una curva que sale rapida y frena larga
   (.32,.72,0,1), la misma que ya usa el mega menu. Asi los dos menus se
   sienten del mismo sitio.

   85% de ancho y no 100%: el trozo de pagina que asoma a la derecha recuerda
   que el sitio sigue detras y da donde tocar para cerrar.
   -------------------------------------------------------------------------- */

.d2 .menu-velo {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(26, 26, 26, .45);
  opacity: 0;
  visibility: hidden;
  /* La visibilidad espera a que termine el desvanecido; si no, el velo
     desaparece de golpe y deja ver el panel saliendo sin fondo. */
  transition:
    opacity    .34s cubic-bezier(.32, .72, 0, 1),
    visibility 0s linear .34s;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.d2 .menu-velo.esta-abierto {
  opacity: 1;
  visibility: visible;
  transition: opacity .34s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

.d2 .mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 85%;
  max-width: 380px;
  height: 100%;
  /* dvh y no vh: en el movil la barra del navegador se recoge al bajar y
     con vh el panel queda mas alto que la pantalla. */
  height: 100dvh;
  padding: 26px var(--padding-x, 22px) 28px;
  overflow-y: auto;
  /* El desplazamiento se queda dentro del panel y no arrastra la pagina. */
  overscroll-behavior: contain;
  background: var(--c-blanco, #FFFFFF);
  border-top: 0;
  box-shadow: 0 0 40px rgba(0, 0, 0, .14);
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform  .42s cubic-bezier(.32, .72, 0, 1),
    visibility 0s linear .42s;
}

.d2 .mobile-menu.esta-abierto {
  transform: none;
  visibility: visible;
  transition: transform .45s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

/* La marca, arriba del todo. Se aparta de la equis con un margen derecho
   para que no se toquen en pantallas estrechas. */
.d2 .mobile-menu__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.d2 .mobile-menu__logo {
  display: block;
  margin: 0;
}

.d2 .mobile-menu__logo img {
  display: block;
  width: auto;
  height: 42px;
}


/* El panel tapa el header, asi que la equis vive dentro de el. */
.d2 .mobile-menu__cerrar {
  /* Sin position:absolute: lo alinea la fila, no un top a ojo. El margen
     derecho negativo devuelve el aire optico que se comia la zona tactil
     de 44px, para que el aspa quede a la misma distancia del borde que el
     logo del suyo. */
  flex: none;
  margin-right: -10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-texto, #1A1A1A);
  cursor: pointer;
  transition: background-color .2s ease;
}

.d2 .mobile-menu__cerrar:hover,
.d2 .mobile-menu__cerrar:focus-visible {
  background: rgba(26, 26, 26, .06);
}

.d2 .mobile-menu nav {
  display: block;
  margin-bottom: 24px;
}

.d2 .mobile-menu__rotulo {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #666666);
}

/* Las cuatro soluciones: la misma ficha del mega menu. */
.d2 .mobile-menu__sub {
  display: grid;
  gap: 2px;
  margin-bottom: 22px;
  padding-left: 0;
  border-left: 0;
}

.d2 .mobile-menu__sub a {
  display: flex;
  align-items: flex-start;
  gap: var(--d2-e2, 12px);
  padding: 11px 10px;
  border-radius: 6px;
  /* Los mismos tokens del mega menu. Antes iba a 15px/500 y se veia
     delgado al lado del resto del menu. */
  font-size: var(--fs-body, 1rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.3;
  color: var(--c-texto, #1A1A1A);
  transition: background-color .2s ease;
}

.d2 .mobile-menu__sub a:hover,
.d2 .mobile-menu__sub a:focus-visible {
  background: rgba(57, 181, 74, .08);
}

/* Igual que en escritorio: el icono va suelto, sin cuadrito de fondo. El
   marco verde era invento mio y rompia con el mega menu. */
.d2 .mobile-menu__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: var(--c-verde, #39B54A);
}

.d2 .mobile-menu__icono svg { display: block; }

.d2 .mobile-menu__sub a > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.d2 .mobile-menu__sub a small {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  font-weight: var(--fw-regular, 400);
  line-height: 1.45;
  color: var(--c-texto-suave, #666666);
}

/* About, Contact y Client Login: separados por una linea, como en el header. */
.d2 .mobile-menu__raiz {
  display: block;
  padding: 13px 10px;
  border-top: 1px solid var(--c-borde-suave, #EFEFEF);
  font-size: var(--fs-body, 1rem);
  font-weight: var(--fw-medium, 600);
  color: var(--c-texto, #1A1A1A);
  transition: color .2s ease;
}

.d2 .mobile-menu__raiz:hover,
.d2 .mobile-menu__raiz:focus-visible {
  color: var(--c-verde, #39B54A);
}

/* "Book a Call" abajo del todo: margin-top:auto lo empuja al pie aunque la
   lista sea corta. */
.d2 .mobile-menu > .btn,
.d2 .mobile-menu > .d2-btn {
  margin-top: auto;
}

/* Los bloques entran escalonados detras del panel. El retardo arranca en
   .12s: antes de eso el panel todavia va por medio camino y el escalonado
   no se veria. */
.d2 .mobile-menu__cabecera,
.d2 .mobile-menu__rotulo,
.d2 .mobile-menu__sub > *,
.d2 .mobile-menu__raiz,
.d2 .mobile-menu > .btn {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity   .3s cubic-bezier(.32, .72, 0, 1),
    transform .34s cubic-bezier(.32, .72, 0, 1);
}

.d2 .mobile-menu.esta-abierto :is(.mobile-menu__cabecera,
                                  .mobile-menu__rotulo,
                                  .mobile-menu__sub > *,
                                  .mobile-menu__raiz,
                                  .btn) {
  opacity: 1;
  transform: none;
}

.d2 .mobile-menu.esta-abierto .mobile-menu__cabecera    { transition-delay: .12s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__rotulo      { transition-delay: .15s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__sub > *:nth-child(1) { transition-delay: .18s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__sub > *:nth-child(2) { transition-delay: .21s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__sub > *:nth-child(3) { transition-delay: .24s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__sub > *:nth-child(4) { transition-delay: .27s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__raiz:nth-of-type(1)  { transition-delay: .30s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__raiz:nth-of-type(2)  { transition-delay: .33s; }
.d2 .mobile-menu.esta-abierto .mobile-menu__raiz:nth-of-type(3)  { transition-delay: .36s; }
.d2 .mobile-menu.esta-abierto > .btn                             { transition-delay: .39s; }

/* Con el panel abierto la hamburguesa se convierte en una equis por su
   cuenta, y como el panel trae la suya quedaban dos aspas a la vista. Se
   desvanece la del header: la de dentro es la que manda. */
.d2 .burger.esta-activo {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}


/* De 1001px para arriba manda el mega menu: el panel no debe existir ni
   aunque quedara abierto al girar la pantalla. */
@media (min-width: 1001px) {
  .d2 .mobile-menu,
  .d2 .menu-velo { display: none; }
}


/* --------------------------------------------------------------------------
   5. "CHECK YOUR OPPORTUNITY": TEXTO Y FLECHA ALINEADOS

   La flecha caia 20px por debajo de la linea del texto porque el SVG se
   apoyaba en la linea base. Con flex y align-items se centran de verdad.
   -------------------------------------------------------------------------- */

.d2 .d2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.d2 .d2-btn svg {
  flex: none;
  /* El SVG es una caja en linea: sin esto se apoya en la linea base del
     texto y queda unos pixeles mas abajo. */
  display: block;
}


/* --------------------------------------------------------------------------
   MENOS MOVIMIENTO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .d2 .nav__drop,
  .d2 .nav__drop__lista > li,
  .d2 .nav__drop__destacado,
  .d2 .mobile-menu,
  .d2 .menu-velo,
  .d2 .mobile-menu__cabecera,
  .d2 .mobile-menu__rotulo,
  .d2 .mobile-menu__sub > *,
  .d2 .mobile-menu__raiz,
  .d2 .mobile-menu > .btn,
  .d2 .nav__caret {
    transition: none;
    transform: none;
  }
  /* Sin transicion el panel se quedaria a la vista: cerrado tiene que
     seguir fuera de pantalla, solo que sin deslizamiento. */
  .d2 .mobile-menu:not(.esta-abierto) { transform: translateX(-100%); }
  .d2 .nav__drop { transform: translate(-50%, 0); }
}


/* ==========================================================================
   TRES CORRECCIONES DEL HEADER
   ========================================================================== */


/* --------------------------------------------------------------------------
   3. "BOOK A CALL" DENTRO DEL MENU MOVIL

   El boton hereda el estilo solido del header, pero dentro del menu
   desplegado el fondo cambia y el conjunto quedaba sucio. Se fija en verde
   con el texto en blanco, que es como se ve en el header.
   -------------------------------------------------------------------------- */

.d2 .mobile-menu .d2-btn,
.d2 .mobile-menu .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  background: var(--c-verde, #39B54A);
  border: 1px solid var(--c-verde, #39B54A);
  color: #fff;
}

.d2 .mobile-menu .d2-btn svg,
.d2 .mobile-menu .btn svg {
  display: block;
  flex: none;
  color: #fff;
}

.d2 .mobile-menu .d2-btn:hover,
.d2 .mobile-menu .btn:hover {
  background: #007F20;
  border-color: #007F20;
  color: #fff;
}

/* Client Login, si aparece en el menu, va en version linea: es el destino
   secundario y no debe competir con la llamada principal */
.d2 .mobile-menu .header__login-btn {
  background: transparent;
  border-color: var(--c-verde, #39B54A);
  color: var(--c-verde, #39B54A);
}

.d2 .mobile-menu .header__login-btn svg { color: inherit; }

.d2 .mobile-menu .header__login-btn:hover {
  background: var(--c-verde, #39B54A);
  border-color: var(--c-verde, #39B54A);
  color: #fff;
}


/* --------------------------------------------------------------------------
   "CHECK YOUR OPPORTUNITY", DENTRO DEL PANEL VERDE

   La causa del desalineado no estaba aqui: `.d2 .nav__drop a` convierte
   TODOS los enlaces del desplegable en una rejilla de dos columnas con
   `align-items: start`. Es lo correcto para las filas con icono a la
   izquierda, pero este enlace no es una de esas filas: heredaba la rejilla
   y el `start` lo empujaba arriba, 5.5px por encima del texto.

   Se le devuelve su propia caja: una fila centrada.

   De paso se anula el fondo de `.nav__drop a:hover`, pensado para las filas
   sobre blanco: sobre este panel verde se tragaba el texto.
   -------------------------------------------------------------------------- */

.d2 .nav__drop__destacado .nav__drop__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  padding: 0;
  transition: none;
}

.d2 .nav__drop__destacado .nav__drop__enlace svg {
  flex: none;
  transition: transform .45s cubic-bezier(.32, .72, 0, 1);
}

.d2 .nav__drop__destacado .nav__drop__enlace:hover,
.d2 .nav__drop__destacado .nav__drop__enlace:focus-visible {
  background: transparent;
}

.d2 .nav__drop__destacado .nav__drop__enlace:hover svg,
.d2 .nav__drop__destacado .nav__drop__enlace:focus-visible svg {
  transform: translateX(5px);
}


/* ==========================================================================
   SECCION DE LOGOS — OPCION 2: TRES BLOQUES

   Izquierda: el titular. Centro: la etiqueta y los logos. Derecha: la cifra.

   La seccion es una franja delgada: los tres bloques van en una linea y a
   la misma altura, asi que se lee de un vistazo de izquierda a derecha sin
   tener que bajar. Es un dato de respaldo, no una seccion de contenido, y
   ocupar alto la haria pesar mas de lo que aporta.

   El centro es el unico que se mueve. Los logos estan todos ahi, quietos y
   tenues, y se va encendiendo uno cada vez. Lo que señala al logo es el
   contraste con los otros cinco apagados, no el desplazamiento: nada cambia
   de sitio, asi que la franja nunca se reacomoda mientras se lee.
   ========================================================================== */

.d2-logos--dos {
  /* Franja delgada: la mitad de aire que una seccion de contenido */
  padding-block: clamp(26px, 3vw, 40px);
  background: var(--d2-tinta);
  border-block: 1px solid rgba(2, 51, 0, .07);
  overflow: hidden;
}

/* El centro se lleva el ancho sobrante; los lados solo lo que su texto
   necesita. Asi los logos aprovechan el hueco en vez de repartirse a
   partes iguales con dos columnas de texto corto. */
.d2-logos--dos__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

/* --------------------------------------------------------------------------
   Izquierda — el titular
   -------------------------------------------------------------------------- */

.d2-logos--dos__titular {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

/* --------------------------------------------------------------------------
   Centro — etiqueta y logos
   -------------------------------------------------------------------------- */

.d2-logos--dos__centro {
  min-width: 0;   /* deja que la rejilla de logos se encoja de verdad */
}

.d2-logos--dos__etiqueta {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-texto-suave);
}

/* --------------------------------------------------------------------------
   La marquesina

   Se ven cinco a la vez y los demas van entrando por la derecha, sin fin.
   Con cinco en el hueco cada logo es bastante mas grande que repartiendo
   los siete, que era lo que los dejaba pequeños.

   El ancho de cada uno sale del hueco disponible dividido entre cinco, asi
   que se ven cinco tanto si la franja mide 900px como 1280.
   -------------------------------------------------------------------------- */

.d2-logos--dos__marquesina {
  --visibles: 4;
  --hueco: clamp(44px, 6.5vw, 96px);

  /* El ancho de cada logo se calcula AQUI, sobre el contenedor visible.
     Puesto sobre la imagen, el `100%` se medía contra la pista, que es
     `max-content`: su ancho depende de las imagenes y el de las imagenes
     dependia de ella. El navegador rompe el circulo usando el tamaño
     natural del PNG y cada logo salia gigante.

     `cqw` no vale aqui porque el contenedor tiene overflow y la pista se
     sale de el; se usa una variable propia, que sí se hereda. */
  --ancho-logo: calc((100% - var(--hueco) * (var(--visibles) - 1)) / var(--visibles));

  /* Los logos conservan su proporcion, asi que los estrechos ocupan menos
     que su parte y en el hueco caben mas de los previstos. El alto es lo
     que de verdad regula cuanto ocupan: subiendolo, cada uno se ensancha
     y entran los que se han pedido. */
  --alto-logo: clamp(56px, 6.4vw, 84px);

  position: relative;
  overflow: hidden;

  /* Los bordes se desvanecen: sin esto los logos aparecen y desaparecen de
     golpe contra el borde y se ve el corte. */
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Sin will-change ni translateZ a proposito: forzaban a rasterizar la
   pista como textura en GPU y, al pausarla en una posicion sub-pixel, se
   dibujaba interpolada. Los logos salian borrosos al dejar el raton
   encima. La animacion es una sola translacion y va fluida sin ellos. */
.d2-logos--dos__pista {
  display: flex;
  align-items: center;
  gap: var(--hueco);

  /* width y flex-shrink son lo que hace que el bucle case (8/9/2026).

     Sin ellos el contenedor comprime la pista: la caja medía 965px cuando su
     contenido son 3225. El `-50%` del keyframe se calcula sobre la CAJA, asi
     que desplazaba 436px cuando la copia empieza en 1659 --1223px de
     desfase-- y al reiniciar se veia el salto.

     Con max-content la caja mide lo que mide el contenido, y el 50% cae
     justo donde arranca la copia: el reinicio deja de notarse. */
  width: max-content;
  flex: none;
  /* 52s, no 34s: al subir el alto de los logos a 68px la pista se ensancha
     y con la misma duracion recorreria mas distancia por segundo, o sea
     mas rapido. Mas lento se leen las marcas, que es para lo que estan. */
  animation: d2-marquesina 52s linear infinite;
}

/* Un 50% es justo una copia de la pista: en ese punto la segunda esta donde
   arranco la primera, y el reinicio no se ve.

   El hueco se descuenta a medias porque la separacion tambien se repite
   entre las dos mitades; sin ese ajuste el bucle salta medio hueco. */
@keyframes d2-marquesina {
  from { transform: translateX(0); }
  /* Medio hueco de MAS, no de menos (8/9/2026, el signo estaba al reves).

     La pista son 14 logos con 13 huecos entre ellos, asi que su mitad cae en
     "7 logos + 6.5 huecos". Pero la copia empieza en "7 logos + 7 huecos",
     porque entre la ultima de la primera tanda y la primera de la copia hay
     un hueco entero. Faltaba justo medio hueco --93px medidos-- y el bucle
     daba un tiron al reiniciar. */
  to   { transform: translateX(calc(-50% + var(--hueco) / 2)); }
}

/* El ancho se lo da el contenedor. Aqui solo se fija el alto, que es lo
   que iguala logos con proporciones muy distintas. */
/* El alto manda y el ancho lo pone la proporcion de cada PNG.

   Antes se forzaba una caja fija con object-fit: contain, y el navegador
   tenia que reducir cada logo un porcentaje distinto para encajarlo --
   greater-victoria es de 693x200 y caia al 22%. Esa reduccion es la que
   se veia blanda: no se degradaba con el tiempo, es que al pausar la
   marquesina daba tiempo a mirarlo de cerca.

   Dejandolos a su proporcion el navegador escala una sola vez, por el
   alto, y no hay que rellenar ninguna caja. El max-width es el tope
   para que un logo muy apaisado no se coma el sitio de los demas. */
.d2-logos--dos__marquesina img {
  flex: none;
  width: auto;
  max-width: calc(var(--ancho-logo) * 1.35);
  height: var(--alto-logo);
  object-fit: contain;
  opacity: .55;
  filter: grayscale(100%);
  transition: opacity var(--d2-normal) ease, filter var(--d2-normal) ease;
}

/* Al parar el raton encima la marquesina se detiene y el logo toma color:
   asi se puede leer cual es sin esperar a que vuelva a pasar. */
.d2-logos--dos__marquesina:hover .d2-logos--dos__pista {
  animation-play-state: paused;
}

.d2-logos--dos__marquesina img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* Sin movimiento: se para, se reparten en rejilla y sobra la copia */
@media (prefers-reduced-motion: reduce) {
  .d2-logos--dos__marquesina {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .d2-logos--dos__pista {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    animation: none;
  }

  .d2-logos--dos__pista img[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   Derecha — la cifra
   -------------------------------------------------------------------------- */

.d2-logos--dos__der {
  padding-left: clamp(20px, 2.6vw, 40px);
  border-left: 1px solid rgba(2, 51, 0, .1);
}

.d2-logos--dos__cifra {
  margin: 0;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2-logos--dos__cifra-pie {
  margin: 6px 0 0;
  font-size: .9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--c-texto);
}

.d2-logos--dos__cifra-nota {
  margin: 2px 0 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--c-texto-suave);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Este bloque era para cuando la seccion tenia tres columnas --titular,
   logos y cifra--: al no caber en linea, el titular pasaba arriba y la
   etiqueta se alineaba a la izquierda con el.

   Retiradas esas dos columnas (4/9/2026) solo queda ajustar el hueco entre
   logos. La alineacion a la izquierda se elimina: descentraba la etiqueta
   sin un titular al que acompanar. */
@media (max-width: 1000px) {
  .d2-logos--dos__marquesina { --hueco: clamp(56px, 8vw, 96px); }
}

@media (max-width: 900px) {
  .d2-logos--dos__inner { grid-template-columns: 1fr; }
  .d2-logos--dos__marquesina { --hueco: clamp(44px, 9vw, 96px); }

  /* En una sola columna el borde lateral no separa nada: pasa a ser una
     linea horizontal entre los logos y la cifra. */
  .d2-logos--dos__der {
    padding-left: 0;
    padding-top: clamp(16px, 2.4vw, 22px);
    border-left: 0;
    border-top: 1px solid rgba(2, 51, 0, .1);
  }
}


/* ==========================================================================
   SECCION DE LOGOS — OPCION 3: FRANJA DE FOCO

   Las otras dos tratan los siete logos por igual. Esta cambia QUE se agrupa
   con QUE: saca uno y lo mete en la misma tarjeta que la cifra.

   El problema que resuelve: en la opcion 2 el $4.4M vive en su propia
   columna. Esta al lado de los logos pero no ligado a ninguno, asi que
   afirma un ahorro sin dejar ver de quien. Compartir marco con un logo lo
   convierte en el resultado de ese cliente.

   Es region comun (Palmer 1992, via NN/g): un contorno visible agrupa mas
   fuerte que la cercania. NN/g aconseja preferir el blanco y recurrir al
   borde solo cuando el blanco no basta -- aqui no basta, porque el objetivo
   es precisamente atar dos cosas.

   La jerarquia se hace con tamaño, peso y contraste, no con color: el
   efecto Von Restorff se probo en preferencia de interfaz (MeasuringU,
   N=202 y N=213) y no predijo la eleccion. "Ponlo de otro color y
   destacara" no esta respaldado.

   Sin movimiento continuo. Un logo que se mueve no se reconoce, y estos
   solo aportan si se leen como nombres. La unica animacion es la entrada.
   ========================================================================== */

.d2-foco {
  padding-block: clamp(24px, 2.8vw, 36px);
  background: var(--d2-tinta);
  border-block: 1px solid rgba(2, 51, 0, .07);
}

/* Tres zonas en una fila: texto, tarjeta, resto.

   La tarjeta se lleva un ancho fijo porque es el ancla de la seccion; el
   resto de logos toma lo que sobra. Al reves, la tarjeta encogeria justo
   donde no debe. */
.d2-foco__inner {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(230px, 292px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: center;
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

/* --------------------------------------------------------------------------
   Texto de entrada
   -------------------------------------------------------------------------- */

.d2-foco__titular {
  margin: 0;
  font-size: clamp(1rem, .92rem + .38vw, 1.3125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2-foco__etiqueta {
  margin: var(--d2-e2) 0 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

/* --------------------------------------------------------------------------
   La tarjeta: logo y cifra bajo el mismo marco
   -------------------------------------------------------------------------- */

.d2-foco__prueba {
  display: flex;
  align-items: center;
  gap: var(--d2-e3);
  padding: var(--d2-e3);
  background: #fff;
  border: 1px solid rgba(2, 139, 0, .22);
  border-radius: var(--d2-radio-md);
  box-shadow: var(--d2-sombra-md);
}

/* El logo protagonista va a color y a mayor tamaño que los otros seis: es
   la unica diferencia de tratamiento, y basta para ordenarlos. */
/* Ancho FIJO, no automatico. Los siete logos tienen proporciones muy
   distintas, asi que ajustandose a cada uno la tarjeta cambiaba de reparto
   en cada relevo y la cifra se desplazaba 33px de lado. Con la casilla
   reservada, el logo cambia dentro y nada mas se mueve. */
.d2-foco__prueba-logo {
  flex: none;
  width: 96px;
  height: clamp(40px, 4vw, 52px);
  object-fit: contain;
  object-position: center;
}

.d2-foco__prueba-dato { min-width: 0; }

/* El tope del sistema son 40px. Aqui se queda por debajo: la franja mide
   menos de 220px y una cifra mayor la desequilibra. */
.d2-foco__cifra {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2-foco__cifra-pie {
  margin: 5px 0 0;
  font-size: .8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--c-texto);
}

/* Verde oscuro, no el de interfaz: a 12px hace falta 4.5:1 y --c-verde da
   4.09 sobre blanco. Este da 6.41. */
.d2-foco__cifra-nota {
  margin: 2px 0 0;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--c-verde-hover);
}

/* --------------------------------------------------------------------------
   Los otros seis
   -------------------------------------------------------------------------- */

.d2-foco__resto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px) clamp(12px, 1.8vw, 26px);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Apagados en reposo: asi no compiten con la tarjeta. Es lo que hace la
   jerarquia, en lugar de recurrir a un color de acento. */
/* Todos en la misma caja. Los PNG van de 197x200 a 693x200, asi que a
   igual alto uno medía 111px de ancho y otro 32: una diferencia de 79px
   que se leia como desorden.

   La caja ademas es requisito del relevo: si cada casilla se ajustara a
   su logo, la rejilla se recolocaria en cada intercambio. */
.d2-foco__resto li {
  display: grid;
  place-items: center;
  height: clamp(38px, 3.6vw, 46px);
  padding-inline: 4px;
  transition: transform 420ms cubic-bezier(.4, 0, .2, 1),
              opacity 420ms cubic-bezier(.4, 0, .2, 1);
}

.d2-foco__resto img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: clamp(24px, 2.4vw, 32px);
  object-fit: contain;
  opacity: .46;
  filter: grayscale(100%);
  transition: opacity var(--d2-normal) ease, filter var(--d2-normal) ease;
}

/* Al pasar el raton se lee cual es. Es un extra, no la via de acceso a
   nada: todo lo importante ya esta visible sin interactuar. */
.d2-foco__resto img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* --------------------------------------------------------------------------
   EL RELEVO

   Cada pocos segundos el logo de la tarjeta se intercambia con uno de los
   seis. Rota porque no sabemos que distrito genero los $4.4M: con un logo
   fijo la tarjeta afirmaria que fue ese, y rotando la cifra queda atribuida
   a la cartera entera, que es lo que se puede sostener.

   El movimiento es un CRUCE, no un parpadeo. Cada uno se retira hacia el
   sitio del otro y llega desde alli, con las dos mitades solapadas, asi que
   se lee como un solo gesto.

   Se anima opacity y transform: el navegador las resuelve sin repintar, y
   son las unicas dos propiedades que se pueden mover a 60fps con garantia.

   El desplazamiento es pequeño a proposito. Un recorrido largo llama la
   atencion sobre el movimiento; uno de 6-8px hace que el cambio se note sin
   robarle el sitio a la cifra, que es lo que tiene que leerse.
   -------------------------------------------------------------------------- */

/* La tarjeta reserva el espacio del logo: sin esto encoge en el punto
   medio del cruce, cuando la imagen esta invisible, y la cifra da un salto
   lateral en cada relevo. */
.d2-foco__prueba-logo {
  transition: opacity 420ms cubic-bezier(.4, 0, .2, 1),
              transform 420ms cubic-bezier(.4, 0, .2, 1);
}

/* Sale hacia la derecha, que es de donde viene su relevo */
.d2-foco__prueba-logo.esta-saliendo {
  opacity: 0;
  transform: translateX(5px) scale(.985);
}

/* Y el que entra llega desde ese mismo lado */
.d2-foco__prueba-logo.esta-entrando {
  opacity: 0;
  transform: translateX(-5px) scale(.985);
  transition: none;   /* el estado de partida se pone de golpe */
}

/* La casilla hace el gesto simetrico: se va hacia la tarjeta */
.d2-foco__resto li.esta-saliendo {
  opacity: 0;
  transform: translateX(-4px) scale(.97);
}

.d2-foco__resto li.esta-entrando {
  opacity: 0;
  transform: translateX(4px) scale(.97);
  transition: none;
}

/* La casilla que va a entrar se insinua un instante antes: es lo que hace
   que el relevo se lea como una secuencia y no como dos cosas sueltas. */
.d2-foco__resto li.esta-saliendo img {
  opacity: .46;
}

/* Al parar el raton encima todo se detiene y los logos toman color: es lo
   que permite leer uno concreto sin esperar a que vuelva a pasar. */
.d2-foco:hover .d2-foco__resto img {
  opacity: .62;
}

@media (prefers-reduced-motion: reduce) {
  .d2-foco__prueba-logo,
  .d2-foco__resto li {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Entrada

   Escalonada y de una sola pasada. Al no superar los 5 segundos no cuenta
   como contenido en movimiento para WCAG 2.2.2, asi que no hace falta un
   control de pausa -- que seria obligatorio, no opcional, con una
   marquesina infinita.
   -------------------------------------------------------------------------- */

@keyframes d2-foco-entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.d2-foco__texto,
.d2-foco__prueba,
.d2-foco__resto {
  animation: d2-foco-entra .5s cubic-bezier(.32, .72, 0, 1) both;
}

.d2-foco__prueba { animation-delay: .08s; }
.d2-foco__resto  { animation-delay: .16s; }

/* El apagado de los logos secundarios no forma parte de la entrada: si se
   animara junto al resto, el ojo iria a ellos justo cuando debe ir a la
   tarjeta. */

@media (prefers-reduced-motion: reduce) {
  .d2-foco__texto,
  .d2-foco__prueba,
  .d2-foco__resto {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive

   El orden de importancia manda al recolocar: primero el titular, luego la
   tarjeta con el dato, y los seis de apoyo al final.
   -------------------------------------------------------------------------- */

/* Los seis pasan a dos filas de tres mas estrechas */
@media (max-width: 1000px) {
  .d2-foco__inner {
    grid-template-columns: minmax(0, auto) minmax(220px, 268px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 26px);
  }
}

/* Ya no caben las tres zonas: el titular sube a lo ancho y abajo quedan la
   tarjeta y los logos. */
@media (max-width: 1000px) {
  .d2-foco__inner {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    row-gap: clamp(16px, 2.4vw, 22px);
  }

  .d2-foco__texto { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .d2-foco__inner { grid-template-columns: 1fr; }

  /* La tarjeta se queda en fila: logo y cifra tienen que seguir juntos,
     que es de lo que trata esta variante. */
  .d2-foco__prueba { justify-content: flex-start; }

  .d2-foco__resto { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   EL HEADER DEL DISEÑO 1, EN ESCRITORIO

   Se cambia solo la barra: el desplegable y el menu movil se quedan como
   estan ahora, con sus iconos y su animacion.

   El marcado de los dos diseños es el mismo, asi que basta con deshacer lo
   que d2.css le puso encima:

     d2                          ->  d1
     enlaces en pastilla             enlaces planos, sin fondo
     subrayado que crece al hover    solo cambia el color del texto
     separacion apretada (8px)       separacion amplia (16-48px)
     logo fijo de 50px               logo fluido, 150-190px de ancho
     alto de 80px                    el alto del diseño 1
     Client Login como boton         texto con una linea que lo separa

   Todo va dentro de la consulta de escritorio: por debajo de 1000px la nav
   desaparece y manda el menu movil, que no se toca.
   ========================================================================== */

@media (min-width: 1001px) {

  /* El ancho y el gutter se quedan como los del diseño 2: el header tiene
     que alinearse con el contenido que hay debajo, no traerse el
     contenedor del diseño 1 (1440 frente a 1280, 73px de desfase). */
  .d2 .header__inner {
    gap: var(--sp-6);
    min-height: var(--header-alto);
  }

  .d2 .header__logo img {
    width: clamp(150px, 13vw, 190px);
    height: auto;
  }

  /* En el diseño 1 la navegacion no se centra sola: va pegada al logo y el
     hueco libre queda a la derecha, antes de los botones. */
  .d2 .nav {
    margin-inline: 0;
    margin-left: auto;
  }

  .d2 .nav__list { gap: clamp(var(--sp-4), 2vw, var(--sp-7)); }

  /* El enlace pierde la pastilla: ni fondo, ni relleno lateral, ni radio.
     Solo texto que cambia de color. */
  .d2 .nav__link {
    padding: var(--sp-3) 6px;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-texto-cuerpo);
    border-radius: 0;
    transition: color var(--trans-rapida),
                text-decoration-color var(--trans-rapida);
  }

  .d2 .nav__link:hover,
  .d2 .nav__link[aria-expanded="true"] {
    background: none;
    color: var(--c-verde);
  }

  /* Fuera el subrayado que crece: en el diseño 1 no existe */
  .d2 .nav__link::after { content: none; }

  /* Client Login vuelve a ser texto, separado por una linea vertical. Se
     neutraliza el aspecto de boton que traia de .d2-btn--linea. */
  /* El mismo valor que el padding del login: asi el separador cae a la
     misma distancia de Contact que del icono de Client Login. */
  .d2 .header__actions { gap: 22px; }

  .d2 .header__login-btn {
    gap: var(--sp-2);
    /* El separador es el border-left de este boton, asi que el hueco a su
       IZQUIERDA lo pone el gap del contenedor y el de su DERECHA este
       padding. Estaban descompensados: el gap era mayor.

       Ahora el padding iguala al hueco entre enlaces del menu --29px a
       1440-- y el gap del contenedor se ajusta al mismo valor mas abajo,
       de modo que el separador queda centrado en su espacio. */
    padding: 0 0 0 22px;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--c-texto-cuerpo);
    background: none;
    border: 0;
    border-left: 1px solid var(--c-borde);
    border-radius: 0;
    transition: color var(--trans-rapida);
  }

  .d2 .header__login-btn:hover,
  .d2 .header__login-btn:focus-visible {
    color: var(--c-verde-hover);
  }

  /* Se ve en todo el escritorio: el diseño 1 no lo esconde a 1180px, y con
     la separacion amplia hay sitio de sobra. */
  .d2 .header__actions .header__login-btn { display: inline-flex; }
}


/* ==========================================================================
   SECCION "THE PROBLEM" — TRES VARIANTES

   La version anterior --filas alternas con foto-- medía 2470px: casi tres
   pantallas para tres ideas. Y tenia un defecto de fondo: los tres puntos
   son PARALELOS, tres sintomas del mismo problema, pero el zigzag los
   presenta uno detras de otro, como pasos de un proceso.

   NN/g midio ese layout con eyetracking (2017): los usuarios tropiezan al
   escanearlo, con fijaciones accidentales y redirecciones. El matiz que
   importa es que el perjuicio aparece SOLO con imagenes decorativas -- las
   informativas rinden igual en cualquier layout.

   De ahi las tres variantes: la 1 quita la imagen, la 2 la convierte en
   informativa, y la 3 cambia el eje de lectura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Piezas comunes a las tres
   -------------------------------------------------------------------------- */

.d2-prob-tri,
.d2-prob-lec,
.d2-prob-comp {
  padding-block: clamp(48px, 5.4vw, 76px);
  background: var(--c-blanco, #fff);
}

/* La comparativa lleva una fila mas que las otras dos --los encabezados de
   columna-- asi que se le recorta el aire exterior para que las tres
   quepan en una pantalla. */
.d2-prob-comp { padding-block: clamp(40px, 4.4vw, 58px); }

.d2-prob-tri__inner,
.d2-prob-lec__inner,
.d2-prob-comp__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2-prob-tri__titulo,
.d2-prob-lec__titulo,
.d2-prob-comp__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2-prob-tri__lead,
.d2-prob-lec__lead,
.d2-prob-comp__lead {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333);
}

/* ==========================================================================
   OPCION 1 — TRIPTICO ALINEADO

   Tres columnas de igual ancho. NN/g observo que los cuerpos de texto
   alineados se recorren "sin esfuerzo", frente al tropiezo del zigzag.

   Y la forma dice la verdad sobre el contenido: en paralelo, sin un orden
   que seguir.
   ========================================================================== */

.d2-prob-tri__cabecera {
  max-width: 62ch;
}

.d2-prob-tri__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

/* El filo superior sustituye a la caja: separa las columnas sin encerrarlas.
   NN/g aconseja preferir el blanco al contorno cuando el blanco basta, y
   aqui basta. */
.d2-prob-tri__lista li {
  padding-top: var(--d2-e3);
  border-top: 2px solid var(--c-verde);
}

/* El numeral se pinta desde CSS, no desde el marcado: es ritmo visual, no
   estructura. Un lector de pantalla no lo anuncia, asi que no afirma un
   orden que estos tres puntos no tienen. */
.d2-prob-tri__lista li::before {
  content: "0" counter(list-item);
  display: block;
  margin-bottom: var(--d2-e2);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  color: var(--c-verde-hover);
}

.d2-prob-tri__lista h3 {
  margin: 0 0 var(--d2-e1);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.28;
  color: var(--c-texto);
}

.d2-prob-tri__lista p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.58;
  color: var(--c-texto-cuerpo, #333);
}

.d2-prob-tri__cierre {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(30px, 3.6vw, 44px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid rgba(2, 51, 0, .1);
}

.d2-prob-tri__remate {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -.02em;
  color: var(--c-texto);
}

/* ==========================================================================
   OPCION 2 — TRES LECTURAS

   Cada punto lleva su grafico. No son ilustraciones: usan el mismo idioma
   que el panel del hero --linea de datos, area bajo la curva, puntos de
   lectura, leyenda-- que es como esta pagina habla de energia.

   El intento anterior era un edificio dibujado con lineas sueltas alrededor
   y no se entendia: un numero dentro de una caja vacia, unas curvas sin
   origen visible y una linea flotando. El dibujo no decia lo que yo creia
   que decia.

   Los trazos se dibujan al entrar en pantalla con la tecnica que ya usa el
   panel del hero: stroke-dasharray igual al largo del trazo y
   stroke-dashoffset animado hasta cero. No hay movimiento continuo: una
   pasada y quietos.
   ========================================================================== */

.d2-prob-lec {
  padding-block: clamp(38px, 4.2vw, 54px);
  background: var(--c-blanco, #fff);
}

.d2-prob-lec__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2-prob-lec__cabecera { max-width: 62ch; }

.d2-prob-lec__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2-prob-lec__lead {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333);
}

.d2-prob-lec__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  margin: clamp(28px, 3.2vw, 40px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lectura;
}

/* Cada bloque es una tarjeta: el grafico y su texto forman una unidad, y
   el contorno lo dice sin necesidad de una linea separadora. */
.d2-prob-lec__lista li {
  padding: var(--d2-e3);
  background: var(--d2-superficie-suave);
  border-radius: var(--d2-radio-md);
  counter-increment: lectura;
}

.d2-prob-lec__lista h3 {
  margin: var(--d2-e3) 0 var(--d2-e1);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.28;
  color: var(--c-texto);
}

/* El numeral se genera aqui: es ritmo visual, no estructura. Un lector de
   pantalla no lo anuncia, asi que no afirma un orden que estos tres puntos
   no tienen. */
.d2-prob-lec__lista h3::before {
  content: "0" counter(lectura) "  ";
  color: var(--c-verde-hover);
  font-size: .8125rem;
  letter-spacing: .06em;
}

.d2-prob-lec__lista > li > p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.56;
  color: var(--c-texto-cuerpo, #333);
}

/* --------------------------------------------------------------------------
   Los graficos
   -------------------------------------------------------------------------- */

.d2-lec__grafico {
  padding: var(--d2-e2);
  background: var(--c-blanco, #fff);
  border-radius: var(--d2-radio-sm);
}

.d2-lec__grafico svg {
  display: block;
  width: 100%;
  height: auto;
}

.d2-lec__rejilla line {
  stroke: rgba(2, 51, 0, .09);
  stroke-width: 1;
}

/* Los trazos comparten tratamiento; lo que cambia es que dicen */
.d2-lec__sube,
.d2-lec__baja,
.d2-lec__hueco,
.d2-lec__pagado,
.d2-lec__esperado {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lo que sube: el problema */
.d2-lec__sube,
.d2-lec__pagado {
  stroke: var(--c-verde);
  stroke-width: 2.4;
}

/* Lo que baja o se queda plano: la referencia, en gris para no competir */
.d2-lec__baja,
.d2-lec__esperado {
  stroke: #C9C9C9;
  stroke-width: 2;
}

.d2-lec__esperado { stroke-dasharray: 5 5; }

/* La linea que no llega a unir las fuentes: discontinua a proposito */
.d2-lec__hueco {
  stroke: #C9C9C9;
  stroke-width: 1.6;
  stroke-dasharray: 3 6;
}

.d2-lec__barras rect {
  fill: var(--c-verde);
  fill-opacity: .34;
}

.d2-lec__brecha {
  fill: var(--c-verde);
  fill-opacity: .09;
}

.d2-lec__puntos circle {
  fill: #fff;
  stroke: var(--c-verde);
  stroke-width: 2;
}

/* --- La leyenda: sin ella los colores no significan nada --- */

.d2-lec__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--d2-e2);
  margin: var(--d2-e2) 0 0;
  font-size: .6875rem;
  line-height: 1.3;
  color: var(--c-texto-suave);
}

.d2-lec__leyenda span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.d2-lec__llave {
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-verde);
}

.d2-lec__llave--baja { background: #C9C9C9; }

.d2-lec__llave--plano {
  background: repeating-linear-gradient(90deg,
    #C9C9C9 0 4px, transparent 4px 7px);
}

.d2-lec__llave--barra {
  height: 10px;
  width: 8px;
  border-radius: 2px;
  background: rgba(46, 144, 43, .34);
}

/* --------------------------------------------------------------------------
   EL RESPLANDOR

   Tomado del diseño 3, donde el mapa usa drop-shadow para que los trazos se
   lean como instrumento encendido y no como dibujo impreso. Es lo que da
   ese aire de "esto esta midiendo algo".

   Los VALORES no se copian. Alli el fondo es oscuro (#0b1410) y el
   resplandor va al 12% de opacidad: sobre blanco, a esa intensidad, no se
   ve nada. Se sube y se cierra el radio, que es lo que hace falta para que
   funcione sobre claro.

   Solo lo llevan las lineas que representan el problema --lo que sube, lo
   que se paga-- porque el resplandor dirige la mirada y ahi es donde debe
   ir. Las lineas grises de referencia se quedan planas a proposito: son el
   suelo contra el que se compara, no el dato.

   No va en las otras dos variantes. El triptico se apoya en texto alineado
   y la comparativa en el emparejamiento horizontal; ahi el resplandor
   seria adorno sin funcion.
   -------------------------------------------------------------------------- */

.d2-lec__sube,
.d2-lec__pagado {
  filter: drop-shadow(0 0 5px rgba(46, 144, 43, .34));
}

/* Los puntos marcan el final del recorrido: llevan algo mas de intensidad
   para que se lean como una lectura tomada, no como un adorno del trazo. */
.d2-lec__puntos circle {
  filter: drop-shadow(0 0 4px rgba(46, 144, 43, .42));
}

/* --------------------------------------------------------------------------
   La tarjeta responde al raton

   Del mismo sitio: en el mapa del diseño 3 las burbujas cambian de relleno,
   trazo y resplandor en .18s al señalarlas. Aqui el gesto es el mismo pero
   sobre la tarjeta entera, porque lo que se mira es el grafico con su
   texto, no un punto suelto.

   El grafico sube de intensidad y la tarjeta se aclara. Nada se mueve de
   sitio: en una fila de tres, desplazar una descoloca la lectura de las
   otras dos.
   -------------------------------------------------------------------------- */

.d2-prob-lec__lista li {
  transition: background-color .18s ease;
}

.d2-prob-lec__lista li:hover {
  background: #EDF6ED;
}

.d2-lec__sube,
.d2-lec__pagado,
.d2-lec__puntos circle,
.d2-lec__barras rect,
.d2-lec__brecha {
  transition: filter .18s ease, fill-opacity .18s ease;
}

.d2-prob-lec__lista li:hover .d2-lec__sube,
.d2-prob-lec__lista li:hover .d2-lec__pagado {
  filter: drop-shadow(0 0 8px rgba(46, 144, 43, .5));
}

.d2-prob-lec__lista li:hover .d2-lec__puntos circle {
  filter: drop-shadow(0 0 7px rgba(46, 144, 43, .58));
}

/* Las barras y el area suben de cuerpo sin cambiar de color: el dato es el
   mismo, solo se mira mas de cerca. */
.d2-prob-lec__lista li:hover .d2-lec__barras rect { fill-opacity: .46; }
.d2-prob-lec__lista li:hover .d2-lec__brecha { fill-opacity: .14; }

/* Sin movimiento: el resplandor se queda fijo --es materia, no animacion--
   pero las transiciones se cortan. */
@media (prefers-reduced-motion: reduce) {
  .d2-prob-lec__lista li,
  .d2-lec__sube,
  .d2-lec__pagado,
  .d2-lec__puntos circle,
  .d2-lec__barras rect,
  .d2-lec__brecha {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   El trazado

   Cada trazo se dibuja de un extremo al otro. El largo se declara aqui y no
   se mide con JavaScript: son trazos fijos, y hacerlo en CSS mantiene la
   seccion funcionando con el script desactivado.

   Los valores estan por encima del largo real de cada camino; sobrar no se
   nota, quedarse corto dejaria el trazo sin terminar.
   -------------------------------------------------------------------------- */

@keyframes d2-lec-trazar {
  to { stroke-dashoffset: 0; }
}

@keyframes d2-lec-aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes d2-lec-crecer {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.d2-lec__sube,
.d2-lec__baja,
.d2-lec__pagado,
.d2-lec__esperado,
.d2-lec__hueco {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: d2-lec-trazar 1.25s cubic-bezier(.33, 1, .68, 1) .25s forwards;
}

/* La linea gris de referencia entra antes: primero el suelo, luego el dato
   que se compara con el. */
.d2-lec__baja,
.d2-lec__esperado { animation-delay: .1s; }

.d2-lec__hueco { animation-delay: .5s; }

/* Las barras crecen desde su base */
.d2-lec__barras rect {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: d2-lec-crecer .6s cubic-bezier(.33, 1, .68, 1) both;
}

.d2-lec__barras rect:nth-child(1) { animation-delay: .16s; }
.d2-lec__barras rect:nth-child(2) { animation-delay: .24s; }
.d2-lec__barras rect:nth-child(3) { animation-delay: .32s; }
.d2-lec__barras rect:nth-child(4) { animation-delay: .40s; }
.d2-lec__barras rect:nth-child(5) { animation-delay: .48s; }

/* El area y los puntos entran cuando la linea ya llego: marcan el final del
   recorrido, no lo acompañan. */
.d2-lec__brecha {
  animation: d2-lec-aparecer .7s ease 1.15s both;
}

.d2-lec__puntos circle {
  animation: d2-lec-aparecer .45s ease both;
}

.d2-lec__puntos circle:nth-child(1) { animation-delay: 1.3s; }
.d2-lec__puntos circle:nth-child(2) { animation-delay: 1.42s; }

@media (prefers-reduced-motion: reduce) {
  .d2-lec__sube,
  .d2-lec__baja,
  .d2-lec__pagado,
  .d2-lec__esperado,
  .d2-lec__hueco {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  .d2-lec__barras rect,
  .d2-lec__brecha,
  .d2-lec__puntos circle {
    transform: none;
    opacity: 1;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   El cierre
   -------------------------------------------------------------------------- */

.d2-prob-lec__cierre {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  flex-wrap: wrap;
  margin-top: clamp(24px, 2.8vw, 34px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(2, 51, 0, .1);
}

.d2-prob-lec__remate {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem);
  font-weight: var(--fw-extrabold);
  letter-spacing: -.02em;
  color: var(--c-texto);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .d2-prob-lec__lista { grid-template-columns: 1fr; }

  /* En una columna la tarjeta se lee mejor con el grafico al lado del
     texto que encima: ocupa la mitad de alto. */
  .d2-prob-lec__lista li {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    grid-template-areas:
      "grafico titulo"
      "grafico texto";
    column-gap: var(--d2-e3);
    align-items: start;
  }

  .d2-lec__grafico { grid-area: grafico; }
  .d2-prob-lec__lista h3 { grid-area: titulo; margin-top: 0; }
  .d2-prob-lec__lista > li > p { grid-area: texto; }
}

@media (max-width: 640px) {
  /* Ya no cabe al lado: vuelve a apilarse */
  .d2-prob-lec__lista li {
    grid-template-columns: 1fr;
    grid-template-areas: "grafico" "titulo" "texto";
  }

  .d2-prob-lec__lista h3 { margin-top: var(--d2-e3); }
}

/* ==========================================================================
   OPCION 3 — HOY / CON REDE

   Eje de lectura distinto: se comparan dos columnas de lado a lado en vez
   de recorrer tres puntos hacia abajo.

   La columna derecha describe, no amenaza. El encuadre de perdida no aporta
   --219 estudios, r = .01-- y con quien gasta un presupuesto ajeno es aun
   mas debil, asi que no hay nada que ganar dramatizando el coste.
   ========================================================================== */

.d2-prob-comp__cabecera {
  max-width: 62ch;
}

.d2-prob-comp__tabla {
  margin-top: clamp(24px, 2.8vw, 34px);
}

.d2-prob-comp__encabezados {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(20px, 2.6vw, 40px);
  padding-bottom: var(--d2-e2);
  border-bottom: 1px solid rgba(2, 51, 0, .12);
}

.d2-prob-comp__eti {
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2-prob-comp__eti--rede { color: var(--c-verde-hover); }

.d2-prob-comp__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2-prob-comp__lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
  padding-block: clamp(14px, 1.7vw, 20px);
  border-bottom: 1px solid rgba(2, 51, 0, .08);
}

.d2-prob-comp__hoy h3 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.26;
  color: var(--c-texto);
}

.d2-prob-comp__hoy p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.56;
  color: var(--c-texto-cuerpo, #333);
}

/* La columna de Rede va sobre tinta: la separa sin necesidad de una linea
   vertical, que en una tabla de tres filas se lee como reja. */
.d2-prob-comp__rede {
  align-self: stretch;
  padding: var(--d2-e2) var(--d2-e3);
  background: var(--d2-superficie-suave);
  border-radius: var(--d2-radio-md);
}

.d2-prob-comp__rede p {
  display: flex;
  gap: var(--d2-e2);
  margin: 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--c-texto);
}

/* La marca de verificacion se dibuja con dos bordes girados: no hace falta
   un SVG por fila para un gesto de 10px. */
.d2-prob-comp__marca {
  flex: none;
  width: 11px;
  height: 6px;
  margin-top: 5px;
  border-left: 2px solid var(--c-verde);
  border-bottom: 2px solid var(--c-verde);
  transform: rotate(-45deg);
}

.d2-prob-comp__cierre {
  margin-top: clamp(20px, 2.4vw, 28px);
}

/* ==========================================================================
   ENTRADA

   Una sola pasada al aparecer, y despues quietas. Sin movimiento continuo:
   nada que obligue a un control de pausa ni que compita con la lectura.
   ========================================================================== */

@keyframes d2-prob-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.d2-prob-tri__cabecera,
.d2-prob-tri__lista li,
.d2-prob-tri__cierre,
.d2-prob-lec__cabecera,
.d2-prob-lec__lista li,
.d2-prob-comp__cabecera,
.d2-prob-comp__tabla,
.d2-prob-comp__cierre {
  animation: d2-prob-entra .55s cubic-bezier(.32, .72, 0, 1) both;
}

/* Las columnas entran escalonadas, para que se lean una detras de otra en
   vez de aparecer las tres de golpe. */
.d2-prob-tri__lista li:nth-child(1) { animation-delay: .06s; }
.d2-prob-tri__lista li:nth-child(2) { animation-delay: .13s; }
.d2-prob-tri__lista li:nth-child(3) { animation-delay: .20s; }
.d2-prob-tri__cierre { animation-delay: .28s; }

.d2-prob-lec__lista li:nth-child(1) { animation-delay: .06s; }
.d2-prob-lec__lista li:nth-child(2) { animation-delay: .13s; }
.d2-prob-lec__lista li:nth-child(3) { animation-delay: .20s; }
.d2-prob-comp__tabla { animation-delay: .08s; }
.d2-prob-comp__cierre { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .d2-prob-tri__cabecera,
  .d2-prob-tri__lista li,
  .d2-prob-tri__cierre,
  .d2-prob-lec__cabecera,
  .d2-prob-lec__lista li,
  .d2-prob-comp__cabecera,
  .d2-prob-comp__tabla,
  .d2-prob-comp__cierre {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
}

@media (max-width: 900px) {
  .d2-prob-tri__lista { grid-template-columns: 1fr; gap: var(--d2-e4); }

  /* Los encabezados de columna dejan de tener sentido cuando las dos
     columnas se apilan. */
  .d2-prob-comp__encabezados { display: none; }

  .d2-prob-comp__lista li {
    grid-template-columns: 1fr;
    gap: var(--d2-e3);
  }
}


/* ==========================================================================
   LA CALCULADORA — TRES VARIANTES

   La logica no cambia en ninguna: los trece benchmarks de BC Hydro, la
   formula y los campos son los mismos. Lo que cambia es CUANDO Y DONDE
   aparece el numero, que es lo unico que de verdad distingue una forma de
   otra en una herramienta como esta.

     1  Panel unico      todos los campos a la vista, resultado al lado
     2  Pantalla partida campos a la izquierda, resultado fijo a la derecha
     3  Asistente        la actual, una pregunta por pantalla

   El copy es el aprobado, literal, en las tres.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Comun a las tres
   -------------------------------------------------------------------------- */

.d2 .calc {
  padding-block: clamp(38px, 4.2vw, 56px);
  background: var(--d2-tinta);
  border-block: 1px solid rgba(2, 51, 0, .07);
}

.d2 .calc__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .calc__intro { max-width: 62ch; }

.d2 .calc__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2 .calc__lead {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333);
}

/* El panel de campos y el de resultado, con el tratamiento del diseño 2:
   superficie blanca sobre la tinta, esquinas del sistema. */
.d2 .calc__panel {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(26px, 3vw, 38px);
}

/* El panel interior se queda OSCURO, como en el diseño 1.

   No es una eleccion estetica: todo el texto de dentro --titulos de paso,
   etiquetas, campos, bordes-- esta declarado en blanco porque asume ese
   fondo. Poner una superficie clara aqui dejaba texto blanco sobre blanco
   y la calculadora se veia vacia.

   Repintar las treinta reglas de texto seria reescribir el componente. Se
   conserva su fondo, que ademas es su identidad: el panel oscuro sobre la
   seccion clara es lo que lo separa del resto de la pagina. */
.d2 .calc__panel {
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--c-superficie-oscura);
  border-radius: var(--d2-radio-lg);
}

/* --------------------------------------------------------------------------
   Los campos abiertos (variantes 1 y 2)

   style.css oculta los pasos inactivos con display:none, que es correcto
   para el asistente. Aqui se muestran los cuatro, asi que se revierte solo
   dentro de las variantes que lo piden.
   -------------------------------------------------------------------------- */

.d2 .calc--unico .paso-calc,
.d2 .calc--partido .paso-calc {
  display: block;
}

.d2 .calc__campos {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

/* En dos columnas: apiladas, las cuatro preguntas daban casi 1900px de
   alto. Son preguntas cortas, no un formulario largo. */
@media (min-width: 901px) {
  .d2 .calc--unico .calc__campos,
  .d2 .calc--partido .calc__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(18px, 2.2vw, 28px);
  }

  /* El filo separador vuelve a ser horizontal solo entre filas: con dos
     columnas, un borde superior en cada campo dibujaba una reja. */
  .d2 .calc--unico .calc__campos > .paso-calc + .paso-calc,
  .d2 .calc--partido .calc__campos > .paso-calc + .paso-calc {
    padding-top: 0;
    border-top: 0;
  }
}

/* Cada pregunta se separa de la siguiente con un filo, no con una caja:
   son partes de un mismo formulario, no cuatro bloques sueltos. */
.d2 .calc__campos > .paso-calc + .paso-calc {
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(2, 51, 0, .08);
}

/* Con los cuatro a la vista, el titulo de cada pregunta baja de rango: ya
   no encabeza una pantalla, encabeza un campo. */
.d2 .calc--unico .paso-calc__titulo,
.d2 .calc--partido .paso-calc__titulo {
  font-size: 1rem;
  margin-bottom: 4px;
}

.d2 .calc--unico .paso-calc__ayuda,
.d2 .calc--partido .paso-calc__ayuda {
  font-size: .8125rem;
  line-height: 1.5;
}

/* El boton Atras no tiene sentido sin pasos; el de avanzar se queda porque
   es el que dispara el calculo. */
.d2 .calc--unico #btn-atras,
.d2 .calc--partido #btn-atras {
  display: none;
}

/* ==========================================================================
   OPCION 1 — PANEL UNICO

   Campos y resultado uno al lado del otro, ambos en el flujo.

   Es la disposicion mejor respaldada por la evidencia: en el estudio de
   Iftikhar et al. (60 pruebas contrabalanceadas) la pagina unica gano al
   multipagina en usabilidad -76 frente a 67- y en errores -21 frente a 35-.
   Y Baymard: "el numero de campos afecta a la usabilidad mucho mas que el
   numero de pasos".

   Sin animacion mas alla de la entrada: el numero esta siempre presente, no
   hay nada que revelar.
   ========================================================================== */

@media (min-width: 901px) {
  .d2 .calc--unico .calc__panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: start;
  }
}

/* ==========================================================================
   OPCION 2 — PANTALLA PARTIDA

   Igual reparto, pero el resultado queda fijo mientras se rellena: acompaña
   en vez de esperar al final.

   Es la unica de las tres donde el numero se ve cambiar, y por eso es la que
   lleva animacion.
   ========================================================================== */

/* (el reparto de columnas de la V2 se sustituyo por el tablero: ver el
   bloque VARIANTE 2 — EL TABLERO mas abajo) */

/* La cifra cambia con una transicion cruzada, no con un contador
   ascendente: un contador teatraliza un numero que se esta presentando
   como benchmark y no como garantia. */
.d2 .calc--partido #cifra {
  transition: opacity .3s cubic-bezier(.32, .72, 0, 1);
}

.d2 .calc--partido #cifra.es-incompleto {
  opacity: .55;
}

/* --------------------------------------------------------------------------
   El resplandor del resultado

   Mismo recurso que los graficos de la seccion del problema, tomado del
   mapa del diseño 3: el dato se lee como algo encendido y no como texto
   impreso. Solo en esta variante, que es donde el numero es el centro de
   atencion mientras se rellena.
   -------------------------------------------------------------------------- */

.d2 .calc--partido .resultado__cifra {
  text-shadow: 0 0 18px rgba(46, 144, 43, .18);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc--partido #cifra { transition: none; }
}

/* ==========================================================================
   OPCION 3 — ASISTENTE POR PASOS

   La que ya existe, sin cambios de estructura. Solo se le da el envoltorio
   del diseño 2 para que compare en igualdad con las otras dos.

   Su inconveniente es real y conviene tenerlo presente al elegir: el numero
   queda oculto hasta el final, que es la peor posicion para una herramienta
   cuyo valor ES el numero.
   ========================================================================== */

@media (min-width: 901px) {
  .d2 .calc--pasos .calc__panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);

    /* stretch y no start (14/9/2026).

       Con `start` la columna derecha medía solo lo que ocupaba su
       contenido, asi que el panel de perfil quedaba mas bajo que la
       columna de preguntas y flotaba con un hueco debajo.

       El usuario lo pidio al reves: "la altura de profile desde el inicio
       igual que la columna del lado izquierdo; puede crecer mas, pero
       nunca ser mas pequena".

       `stretch` da exactamente eso --las dos columnas igualan a la mas
       alta-- y el panel puede seguir creciendo cuando se llena de filas,
       porque entonces es EL quien manda la altura de la fila del grid. */
    align-items: stretch;
  }
}

/* La barra de progreso no se anima en bucle: una barra en movimiento
   continuo es una exposicion de nivel A bajo WCAG 2.2.2. Aqui solo cambia
   de ancho cuando cambia el paso. */
.d2 .calc--pasos .barra__fill {
  transition: width .4s cubic-bezier(.32, .72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc--pasos .barra__fill { transition: none; }
}

/* ==========================================================================
   ENTRADA

   Una pasada al aparecer y despues quietas, como el resto de la pagina.
   ========================================================================== */

@keyframes d2-calc-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.d2 .calc__intro,
.d2 .calc .pasos,
.d2 .calc .flip {
  animation: d2-calc-entra .55s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .calc .pasos { animation-delay: .08s; }
.d2 .calc .flip  { animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .d2 .calc__intro,
  .d2 .calc .pasos,
  .d2 .calc .flip {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  /* En una columna el resultado va debajo, que es el orden de lectura
     natural: primero se rellena, luego se mira. */
  .d2 .calc__panel { grid-template-columns: 1fr; }

  /* El sticky no aporta nada cuando el carril ocupa todo el ancho */
  .d2 .calc--partido .flip { position: static; }
}

/* --------------------------------------------------------------------------
   RITMO: TAMAÑOS COHERENTES Y AIRE

   Tres cosas medidas que habia que arreglar:

     1. Siete anchos distintos de campo (229 a 366px) en la misma columna.
        La causa: los campos viven en contenedores flex y se encogian a su
        contenido, asi que el sufijo "sq ft" o el prefijo "$" les robaban
        ancho. Ahora todos ocupan su columna entera.

     2. Seis alturas distintas (51 a 89px), por la misma razon: el relleno
        variaba segun el campo. Se unifica con una altura minima comun.

     3. El boton pegado al ultimo campo, sin separacion (0px medidos). En el
        asistente se nota menos porque hay un hueco grande, pero en las
        variantes abiertas quedaba encima.
   -------------------------------------------------------------------------- */

/* Los campos llenan su columna. `min-width: 0` es lo que permite que un
   elemento flex se encoja por debajo de su contenido; sin el, un desplegable
   con una opcion larga empuja y desborda. */
.d2 .calc .campo__wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.d2 .calc .campo__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Altura comun para todos: campos, desplegables y el selector de region.
   48px cumple ademas el tamaño minimo de objetivo tactil (WCAG 2.5.8, que
   pide 24x24 como minimo absoluto y recomienda mas). */
.d2 .calc .campo__input,
.d2 .calc select.campo__input,
.d2 .calc .duo__btn {
  min-height: 52px;
  padding-block: 0;
}

/* El desplegable necesita sitio para su flecha; sin este relleno el texto
   quedaba debajo de ella. */
.d2 .calc select.campo__input {
  padding-right: 44px;
}

/* Prefijo y sufijo dejan de robar ancho al campo: se superponen. Antes el
   "sq ft" empujaba el input a 229px mientras un desplegable media 366. */
.d2 .calc .campo__wrap:has(.campo__prefijo) .campo__input { padding-left: 30px; }
.d2 .calc .campo__wrap:has(.campo__sufijo) .campo__input { padding-right: 58px; }

.d2 .calc .campo__prefijo,
.d2 .calc .campo__sufijo {
  position: absolute;
  pointer-events: none;
}

.d2 .calc .campo__wrap { position: relative; }
.d2 .calc .campo__prefijo { left: 16px; }
.d2 .calc .campo__sufijo { right: 16px; }

/* Respaldo para navegadores sin :has(): el campo sigue ocupando todo y el
   texto no se solapa porque el relleno base ya reserva sitio. */
@supports not selector(:has(*)) {
  .d2 .calc .campo__prefijo,
  .d2 .calc .campo__sufijo { position: static; }
  .d2 .calc .campo__input { padding-inline: 16px; }
}

/* --- Aire entre elementos ------------------------------------------------ */

/* Separacion constante entre etiqueta y campo, y entre campos. */
.d2 .calc .campo {
  display: grid;
  gap: 6px;
}

.d2 .calc .campo + .campo {
  margin-top: var(--d2-e3);
}

/* El bloque de opciones respira del texto de ayuda que lo precede. Los
   13px extra igualan su arranque con el del selector vecino, que lleva
   etiqueta encima (19px + 6 de hueco - 12 que la ayuda ya deja). */
.d2 .calc .opciones {
  display: grid;
  gap: var(--d2-e2);
  margin-top: calc(var(--d2-e3) + 13px);
}

/* Las dos tarjetas de eleccion, con la misma altura */
.d2 .calc .opcion {
  min-height: 76px;
  padding: var(--d2-e3);
}

/* El selector de region: dos botones que comparten ancho */
.d2 .calc .duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
}

/* --- El boton, separado del ultimo campo --------------------------------- */

.d2 .calc .pasos__nav {
  margin-top: clamp(20px, 2.4vw, 28px);
}

/* En las variantes abiertas el boton cierra las dos columnas, asi que se le
   da un filo que lo separa del formulario. */
/* .pasos es flex en columna: los campos, el boton y la nota se apilan.
   El nav NO esta dentro de la rejilla de campos, asi que grid-column no le
   afecta -- por eso una version anterior lo dejaba solapado. */
.d2 .calc--unico .pasos,
.d2 .calc--partido .pasos {
  display: flex;
  flex-direction: column;
}

/* El boton y la nota estan en position:absolute, anclados al fondo del
   panel. Tiene sentido en el asistente --todos los pasos ocupan el mismo
   alto y el boton queda siempre en el mismo sitio-- pero con los cuatro
   campos abiertos el panel crece y el boton se quedaba encima del ultimo
   campo, solapado 25px.

   Aqui vuelven al flujo, debajo de los campos. */
.d2 .calc--unico .pasos__nav,
.d2 .calc--partido .pasos__nav,
.d2 .calc--unico .calc__nota,
.d2 .calc--partido .calc__nota {
  position: static;
}

.d2 .calc--unico .pasos__nav,
.d2 .calc--partido .pasos__nav {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

/* El relleno inferior reservaba sitio para el boton absoluto; sin el
   sobra un hueco grande al final. */
.d2 .calc--unico .pasos,
.d2 .calc--partido .pasos {
  padding-bottom: 0;
}

/* --- El asistente ---

   Aqui el boton SI se queda anclado abajo: es lo que hace que no salte de
   sitio al cambiar de paso. Pero en el paso 1 las dos opciones llegan
   justo hasta el, sin separacion --0px medidos-- y se leian pegadas.

   El paso reserva por dentro el alto del boton mas su aire, asi que el
   contenido nunca puede llegar a tocarlo. */
.d2 .calc--pasos .paso-calc {
  padding-bottom: 24px;
}

/* Las dos tarjetas de eleccion, algo mas separadas entre si */
.d2 .calc--pasos .opciones {
  gap: var(--d2-e3);
}

/* La nota legal, separada del boton */
.d2 .calc .calc__nota {
  margin-top: var(--d2-e3);
}

/* --- Los campos, dentro de la rejilla de dos columnas -------------------- */

@media (min-width: 901px) {
  /* Cada pregunta ocupa su celda entera y las cuatro se alinean arriba, de
     modo que sus campos caen a la misma altura aunque el texto de ayuda
     tenga distinto numero de lineas. */
  .d2 .calc--unico .calc__campos,
  .d2 .calc--partido .calc__campos {
    align-items: start;
  }

  .d2 .calc--unico .paso-calc,
  .d2 .calc--partido .paso-calc {
    display: flex;
    flex-direction: column;
  }

  /* La cabecera de cada pregunta (titulo + ayuda) reserva su altura: asi
     los campos de una misma fila arrancan exactamente en el mismo punto,
     tenga la ayuda dos lineas o tres. Empujarlos al fondo con flex los
     alineaba por abajo, y arriba quedaban dentados hasta 19px. */
  .d2 .calc--unico .paso-calc__titulo {
    min-height: 1.4em;
  }

  .d2 .calc--unico .paso-calc__ayuda {
    flex: none;
    min-height: 4.6em;   /* tres lineas al ancho de media rejilla */
    margin-bottom: var(--d2-e2);
  }
}

/* ==========================================================================
   VARIANTE 2 — LO QUE DE VERDAD LA DISTINGUE

   Una version anterior solo cambiaba el reparto de columnas y añadia
   position:sticky. Medido al lado de la variante 1, era practicamente la
   misma pantalla: la unica diferencia solo se apreciaba al desplazarse.

   Lo que la distingue ahora es que el resultado RESPONDE mientras se
   rellena. Con cuatro preguntas sin responder, lo honesto no es "$0" sino
   reconocer que el margen es enorme; a medida que llegan datos, se cierra.

   Kerr, van der Bles y Spiegelhalter (Royal Society Open Science, 2023,
   n=10.519) midieron que mostrar la incertidumbre con una cuantificacion
   apenas baja la confianza en el numero y no daña la confianza en la
   fuente, mientras que cubrirse solo con palabras hace mas daño.
   ========================================================================== */

/* --------------------------------------------------------------------------
   El indicador de confianza
   -------------------------------------------------------------------------- */

.d2 .calc--partido .d2-margen {
  margin: var(--d2-e3) 0;
  padding: var(--d2-e3);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--d2-radio-sm);
  transition: border-color .4s cubic-bezier(.32, .72, 0, 1),
              background-color .4s cubic-bezier(.32, .72, 0, 1);
}

/* Completo, la caja se tiñe de verde: es la señal de que ya no falta nada */
.d2 .calc--partido .d2-margen.esta-completo {
  background: rgba(46, 144, 43, .1);
  border-color: rgba(46, 144, 43, .38);
}

.d2 .calc--partido .d2-margen__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--d2-e2);
  margin-bottom: var(--d2-e2);
}

.d2 .calc--partido .d2-margen__eti {
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.d2 .calc--partido .d2-margen__pct {
  font-size: .9375rem;
  font-weight: var(--fw-extrabold);
  color: #fff;
  font-variant-numeric: tabular-nums;   /* el ancho no baila al cambiar */
}

.d2 .calc--partido .d2-margen.esta-completo .d2-margen__pct {
  color: #39B54A;   /* verde de marca: sobre el fondo oscuro rinde 6.53:1 */
}

/* --- La barra --- */

.d2 .calc--partido .d2-margen__via {
  height: 5px;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--d2-radio-full);
  overflow: hidden;
}

/* Se anima transform y no width: el navegador lo resuelve sin recalcular
   el diseño en cada fotograma. */
.d2 .calc--partido .d2-margen__lleno {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(57, 181, 74, .55), #39B54A);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .62s cubic-bezier(.32, .72, 0, 1);
}

.d2 .calc--partido .d2-margen__nota {
  margin: var(--d2-e2) 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

/* --------------------------------------------------------------------------
   La cifra

   Mientras faltan datos se atenua: sigue leyendose, pero dice por si misma
   que aun no esta asentada. Es preferible a ocultarla -- gatear el numero
   crea desconfianza (NN/g) -- y a fingir que ya es definitiva.
   -------------------------------------------------------------------------- */

.d2 .calc--partido .resultado__cifra {
  transition: opacity .4s cubic-bezier(.32, .72, 0, 1),
              text-shadow .4s cubic-bezier(.32, .72, 0, 1);
}

.d2 .calc--partido .resultado.es-provisional .resultado__cifra {
  opacity: .68;
  text-shadow: none;
}

/* Con las cuatro respuestas, la cifra se enciende. Es el mismo recurso que
   los graficos de la seccion del problema, tomado del mapa del diseño 3:
   el dato se lee como algo vivo y no como texto impreso. */
.d2 .calc--partido .resultado:not(.es-provisional) .resultado__cifra {
  opacity: 1;
  text-shadow: 0 0 22px rgba(57, 181, 74, .32);
}

/* La transicion cruzada al cambiar de valor. Sin contador ascendente: un
   contador teatraliza una cifra que se presenta como benchmark. */
@keyframes d2-cifra-cambia {
  0%   { opacity: .25; transform: translateY(4px); }
  100% { opacity: 1;   transform: none; }
}

.d2 .calc--partido .resultado__cifra.esta-cambiando {
  animation: d2-cifra-cambia .42s cubic-bezier(.32, .72, 0, 1);
}

/* --------------------------------------------------------------------------
   El carril

   Ademas de quedarse fijo al desplazarse, se separa visualmente del
   formulario: superficie propia y un filo verde a la izquierda que lo marca
   como la zona de lectura, no de entrada.
   -------------------------------------------------------------------------- */

/* (el filo verde a la izquierda se elimino: una barra lateral de acento
   es un cliche que abarata el panel, y el tablero ya separa el resultado
   por posicion, no por adorno) */

/* --------------------------------------------------------------------------
   Las filas del perfil se marcan al llegar

   Cada respuesta enciende su fila. Es el mismo gesto que el relevo de logos:
   lo que cambia se señala solo, sin que haya que buscarlo.
   -------------------------------------------------------------------------- */

.d2 .calc--partido .perfil__fila {
  transition: opacity .34s cubic-bezier(.32, .72, 0, 1);
  opacity: .5;
}

.d2 .calc--partido .perfil__fila.is-lleno {
  opacity: 1;
}

.d2 .calc--partido .perfil__punto {
  transition: background-color .34s ease, box-shadow .34s ease;
}

.d2 .calc--partido .perfil__fila.is-lleno .perfil__punto {
  background: #39B54A;
  box-shadow: 0 0 8px rgba(57, 181, 74, .5);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc--partido .d2-margen,
  .d2 .calc--partido .d2-margen__lleno,
  .d2 .calc--partido .resultado__cifra,
  .d2 .calc--partido .perfil__fila,
  .d2 .calc--partido .perfil__punto {
    transition: none;
    animation: none;
  }
}

/* ==========================================================================
   LA CALCULADORA — PULIDO Y EL TABLERO

   Correcciones medidas sobre las tres variantes, y el rediseño de la
   segunda, que hasta ahora solo se distinguia de la primera por un sticky
   invisible sin desplazarse.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LA TARJETA QUE GIRA YA NO RECORTA SU REVERSO

   Las dos caras iban superpuestas con el dorso en absoluto, y el contenedor
   tomaba la altura SOLO del frente. El formulario del reverso es mas alto:
   el boton de enviar y la nota legal se salian de la caja.

   Con las dos caras apiladas en la misma celda de una rejilla, el
   contenedor mide lo que la cara mas alta, y el giro (que es de opacidad y
   transform) sigue funcionando igual.
   -------------------------------------------------------------------------- */

.d2 .calc .flip {
  display: grid;
  height: auto;
}

/* Solo la cara VISIBLE esta en flujo y decide la altura. La oculta va en
   absoluto y recortada: si las dos contaran, el formulario del reverso
   --que es mas alto-- inflaria la tarjeta antes de girarla. */
.d2 .calc .flip__cara {
  grid-area: 1 / 1;
  min-width: 0;
}

.d2 .calc .flip__cara--frente { position: static; }
.d2 .calc .flip__cara--dorso  { position: absolute; inset: 0; overflow: hidden; }

.d2 .calc .flip.girada .flip__cara--frente { position: absolute; inset: 0; overflow: hidden; }
.d2 .calc .flip.girada .flip__cara--dorso  { position: static; overflow: visible; }

.d2 .calc .resultado {
  height: auto;
}

/* La nota legal y el boton del resultado estaban en absoluto, anclados a un
   fondo que ya no existe con la altura automatica: vuelven al flujo. */
.d2 .calc .resultado__legal,
.d2 .calc .salida .resultado__cta {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  margin-top: var(--d2-e3);
}

.d2 .calc .flip__cara--frente .resultado {
  padding-bottom: var(--d2-e4);
}

/* --------------------------------------------------------------------------
   2. LA COLUMNA DEL PERFIL YA NO TIENE HUECOS MUERTOS

   La prueba social ($2.94M) llevaba margin-top:auto: se iba al fondo de la
   columna y dejaba 441px de vacio entre el perfil y ella. El contenido
   ahora fluye desde arriba con aire constante, y la tarjeta termina donde
   termina su contenido.
   -------------------------------------------------------------------------- */

.d2 .calc .espera {
  gap: var(--d2-e4);
}

.d2 .calc .prueba {
  margin-top: 0;
}

/* En el panel unico la columna del resultado no se estira hasta igualar al
   formulario: es una tarjeta compacta que acompaña, no una columna que hay
   que rellenar. */
@media (min-width: 901px) {
  .d2 .calc--unico .flip {
    align-self: start;
  }
}

/* --------------------------------------------------------------------------
   3. FUERA LA BARRA VERDE DE LA RECOMENDACION

   El acento lateral es un cliche que abarata el bloque. La recomendacion se
   distingue por su fondo, no por una raya.
   -------------------------------------------------------------------------- */

.d2 .calc .cierre__recomienda {
  border-left: 0;
  background: rgba(57, 181, 74, .1);
  border-radius: var(--d2-radio-sm);
}

/* --------------------------------------------------------------------------
   4. EL PUNTO DEL PASO PENDIENTE LATE

   El primer punto sin rellenar del perfil respira: dice "esto es lo que
   toca" sin que haya que buscarlo. Se apaga en cuanto la fila se llena.

   El selector coge la primera fila vacia: la primera de todas si no hay
   nada relleno, o la que sigue a la ultima llena.
   -------------------------------------------------------------------------- */

@keyframes d2-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 181, 74, .45); opacity: .7; }
  50%      { box-shadow: 0 0 0 5px rgba(57, 181, 74, 0); opacity: 1; }
}

.d2 .calc .perfil__fila:not(.is-lleno) .perfil__punto {
  background: #39B54A;
  animation: d2-latido 1.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* --------------------------------------------------------------------------
   5. TODO CAMBIO ES SUAVE

   Cada estado que cambia dentro de la calculadora transita: las tarjetas de
   eleccion, el foco de los campos, los valores del perfil, y los bloques
   que aparecen (el adelanto, el resultado, el cierre).
   -------------------------------------------------------------------------- */

.d2 .calc .opcion {
  transition: border-color .3s cubic-bezier(.32, .72, 0, 1),
              background-color .3s cubic-bezier(.32, .72, 0, 1),
              transform .3s cubic-bezier(.32, .72, 0, 1);
}

.d2 .calc .opcion:hover {
  transform: translateY(-1px);
}

.d2 .calc .opcion.is-elegida {
  border-color: #39B54A;
  background: rgba(57, 181, 74, .08);
}

/* EL HALO DEL FOCO VA EN EL MARCO, NO EN EL CAMPO

   El campo son dos cajas: .campo__wrap lleva el borde y el fondo, y dentro
   va .campo__input. Cuando el halo lo pintaba el input se quedaba corto por
   los cuatro lados --y mucho mas por la derecha en los campos con sufijo,
   donde el input termina 58px antes del borde--: se veia un cerco partido
   por dentro del marco en lugar de rodearlo.

   Ahora lo pinta el marco con :focus-within, que se activa igual al entrar
   en el input pero abarca la caja entera. */

.d2 .calc .campo__wrap {
  transition: border-color .25s ease,
              box-shadow .25s ease,
              background-color .25s ease;
}

.d2 .calc .campo__wrap:focus-within {
  border-color: #39B54A;
  box-shadow: 0 0 0 3px rgba(57, 181, 74, .18);
}

/* El input ya no dibuja nada propio: seria un segundo cerco dentro del
   primero. */
.d2 .calc .campo__input:focus,
.d2 .calc select.campo__input:focus {
  outline: none;
  box-shadow: none;
}

/* Sin :focus-within --Safari anterior al 10.1-- se vuelve al halo del input:
   queda corto, pero es mejor que no marcar el foco en absoluto. */
@supports not selector(:focus-within) {
  .d2 .calc .campo__input:focus {
    border-color: #39B54A;
    box-shadow: 0 0 0 3px rgba(57, 181, 74, .18);
  }
}

/* CUANDO FALTA UN DATO

   Sutil a proposito: solo cambia el color del borde, sin halo ni fondo. El
   aviso debajo lleva el peso, y es lo unico que dice QUE falta.

   El rojo es #E06C5F y no el #C0392B del resto del sitio porque el panel de
   la calculadora es #1A1A1A: ese rojo mide 3.20:1 ahi, insuficiente para
   texto. Este mide 5.37:1 sobre el panel y 4.43:1 como borde sobre el campo.

   El color nunca va solo --hay texto y un signo--, que es lo que exige la
   norma 1.4.1 y lo que hace que funcione para quien no distingue el rojo. */

.d2 .calc .campo__wrap.tiene-error {
  border-color: #E06C5F;
}

/* Con el foco puesto el campo erroneo sigue en rojo: el foco anade el halo
   --para saber donde esta el cursor-- pero no borra la senal de que algo
   falta. Pintarlo de verde nada mas recibir el foco decia "correcto" sobre
   un campo que estaba vacio.

   El aviso desaparece en cuanto se escribe algo, asi que este estado dura
   lo justo. */
.d2 .calc .campo__wrap.tiene-error:focus-within {
  border-color: #E06C5F;
  box-shadow: 0 0 0 3px rgba(224, 108, 95, .18);
}

.d2 .calc .campo__error {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: #E06C5F;
}

/* El signo va en ::before y no en el texto: los lectores de pantalla leen
   el mensaje limpio, sin un simbolo suelto delante. */
.d2 .calc .campo__error::before {
  content: "!";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 12px;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .d2 .calc .campo__error {
    animation: d2-error-entra .22s ease both;
  }
}

@keyframes d2-error-entra {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

.d2 .calc .perfil__valor,
.d2 .calc .perfil__texto {
  transition: color .3s ease, opacity .3s ease;
}

/* Los bloques que aparecen entran con la misma curva del resto de la web,
   no de golpe. El atributo hidden los saca del todo; al quitarse, animan. */
@keyframes d2-calc-aparece {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.d2 .calc .adelanto:not([hidden]),
.d2 .calc .salida:not([hidden]),
.d2 .calc .cierre:not([hidden]),
.d2 .calc .tras-envio:not([hidden]) {
  animation: d2-calc-aparece .5s cubic-bezier(.32, .72, 0, 1) both;
}

/* La cifra del cierre en BLANCO, no en verde.

   Es la unica cifra grande de la web sobre fondo oscuro, y todas las demas
   --$480K, $4.4M, $2.94M, 2008-- van en el negro de marca sobre fondo
   claro. Ninguna va en verde. El blanco es esa misma decision trasladada
   al fondo oscuro: la cifra manda por tamano, y el verde se reserva para
   el acento, que es su papel en el manual.

   El #39B54A que habia aqui ademas no existe en la guia: yo derivaba las
   tintas por opacidad y el manual las da muestreadas del PDF.

   Medido: 15.90:1 sobre el #1A1A1A del panel. */
.d2 .calc .cierre__cifra {
  color: #FFFFFF;
  /* El halo se queda, pero en el verde de marca: es lo que la enciende sin
     tenirla. */
  text-shadow: 0 0 22px rgba(57, 181, 74, .3);
  transition: opacity .3s cubic-bezier(.32, .72, 0, 1);
}

/* Cuando no hay datos esto no es una cifra sino un aviso --"Add your
   area"--, y el resplandor verde ahi dice justo lo contrario: celebra algo
   que todavia no ha pasado. Se apaga el halo y se atenua, igual que hace
   el paso anterior con su propia cifra incompleta. */
.d2 .calc .cierre__cifra.es-incompleto {
  text-shadow: none;
  opacity: .55;
}

/* ==========================================================================
   VARIANTE 2 — EL TABLERO

   Rediseñada de arriba a abajo. Antes era la variante 1 con un sticky; la
   critica era justa.

   La estructura ahora es OTRA: el estado vive en una banda horizontal
   ARRIBA --las cuatro respuestas como fichas, la barra de confianza, el
   adelanto del benchmark-- y las preguntas debajo, en una fila de cuatro.
   Al calcular, el resultado ocupa la banda como protagonista, centrado y
   encendido, con el formulario de contacto bajo el.

   Los tres diseños se distinguen por DONDE vive el numero:
     1  en un carril lateral que acompaña
     2  en una banda protagonista arriba
     3  oculto hasta el final del asistente
   ========================================================================== */

@media (min-width: 901px) {

  .d2 .calc--partido .calc__panel {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 20px);
  }

  /* La banda respira menos que una columna: es un estado, no una lectura */
  .d2 .calc--partido .espera { gap: var(--d2-e3); }
  .d2 .calc--partido .resultado { padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px); }

  /* Los campos arriba y la banda de estado debajo, siguiendo el orden del
     documento. Al calcular, el resultado ocupa el sitio de los campos y
     la banda girada (el formulario de contacto) queda bajo el. */

  /* Las cuatro preguntas en fila. La ayuda se compacta: en formato ficha
     el titulo ya dice lo que hay que hacer. */
  .d2 .calc--partido .calc__campos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(14px, 1.6vw, 22px);
  }

  .d2 .calc--partido .paso-calc__ayuda {
    font-size: .75rem;
    line-height: 1.45;
    flex: none;
    min-height: 5.4em;   /* cuatro lineas a este ancho de columna */
    margin-bottom: var(--d2-e2);
  }

  .d2 .calc--partido .paso-calc__titulo {
    min-height: 2.6em;
  }

  /* El desfase del nudge de las opciones es distinto a este ancho de
     columna: 8px en vez de 13. */
  .d2 .calc--partido .opciones {
    margin-top: calc(var(--d2-e3) + 8px);
  }

  /* --- La banda: el perfil como cuatro fichas --------------------------- */

  .d2 .calc--partido .perfil {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--d2-e2);
  }

  .d2 .calc--partido .perfil__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "punto texto"
      "valor valor";
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: var(--d2-e2) var(--d2-e3);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--d2-radio-sm);
    transition: border-color .35s cubic-bezier(.32, .72, 0, 1),
                background-color .35s cubic-bezier(.32, .72, 0, 1);
  }

  /* La ficha rellena se enciende: borde y fondo suben un punto */
  .d2 .calc--partido .perfil__fila.is-lleno {
    border-color: rgba(57, 181, 74, .4);
    background: rgba(57, 181, 74, .07);
  }

  .d2 .calc--partido .perfil__punto { grid-area: punto; }
  .d2 .calc--partido .perfil__texto { grid-area: texto; }

  .d2 .calc--partido .perfil__valor {
    grid-area: valor;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* El adelanto del benchmark, como franja bajo las fichas */
  .d2 .calc--partido .adelanto {
    display: flex;
    align-items: baseline;
    gap: var(--d2-e2);
  }

  /* La prueba social no cabe en la banda sin competir con el dato propio:
     esta variante la cede a las otras dos, que si la muestran. */
  .d2 .calc--partido .prueba {
    display: none;
  }

  /* --- El resultado final, centrado y protagonista ---------------------- */

  .d2 .calc--partido .cierre {
    text-align: center;
  }

  .d2 .calc--partido .cierre__cifra {
    font-size: 40px;   /* el techo del sistema para cifras */
  }

  .d2 .calc--partido .cierre .desglose,
  .d2 .calc--partido .cierre__desglose {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--d2-e3);
    justify-items: center;
    margin-inline: auto;
    max-width: 720px;
  }

  .d2 .calc--partido .cierre__recomienda {
    max-width: 640px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   SIN MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .d2 .calc .perfil__punto,
  .d2 .calc .opcion,
  .d2 .calc .campo__input,
  .d2 .calc .perfil__valor,
  .d2 .calc .perfil__texto,
  .d2 .calc .adelanto:not([hidden]),
  .d2 .calc .salida:not([hidden]),
  .d2 .calc .cierre:not([hidden]),
  .d2 .calc .tras-envio:not([hidden]),
  .d2 .calc--partido .perfil__fila {
    animation: none;
    transition: none;
  }
}


/* ==========================================================================
   LA CALCULADORA — DESPLEGABLES, VOLTEO Y PERFIL COMPLETO
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LOS DESPLEGABLES HABLAN EL IDIOMA DE LA WEB

   El panel de opciones de un <select> lo pinta el sistema operativo: fondo
   claro, seleccion azul, nada que ver con este diseño.

   Los navegadores modernos permiten adoptarlo con appearance: base-select
   y estilar cada opcion. Donde no exista soporte se queda el panel nativo,
   que es feo pero funciona: mejor eso que un widget propio que rompa el
   teclado o el lector de pantalla.
   -------------------------------------------------------------------------- */

@supports (appearance: base-select) {
  .d2 .calc select.campo__input,
  .d2 .calc select.campo__input::picker(select) {
    appearance: base-select;
  }

  .d2 .calc select.campo__input::picker(select) {
    background: #1F1F1F;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--d2-radio-sm);
    padding: 6px;
    margin-top: 6px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);

    /* El panel se abre con la misma curva que todo lo demas */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .22s cubic-bezier(.32, .72, 0, 1),
                transform .22s cubic-bezier(.32, .72, 0, 1),
                overlay .22s allow-discrete,
                display .22s allow-discrete;
  }

  .d2 .calc select.campo__input:open::picker(select) {
    opacity: 1;
    transform: none;
  }

  .d2 .calc select.campo__input option {
    padding: 10px 14px;
    border-radius: calc(var(--d2-radio-sm) - 4px);
    background: transparent;
    color: rgba(255, 255, 255, .88);
    font-size: .9375rem;
    transition: background-color .15s ease, color .15s ease;
  }

  .d2 .calc select.campo__input option:hover,
  .d2 .calc select.campo__input option:focus {
    background: rgba(57, 181, 74, .12);
  }

  .d2 .calc select.campo__input option:checked {
    background: rgba(57, 181, 74, .16);
    color: #39B54A;
    font-weight: var(--fw-bold);
  }

  /* La marca de la opcion elegida, con el estilo de la web y no el tic del
     sistema */
  .d2 .calc select.campo__input option::checkmark {
    color: #39B54A;
    margin-right: 8px;
  }
}

/* --------------------------------------------------------------------------
   2. EL VOLTEO DEL RESULTADO

   Al calcular, el formulario se retira con un giro corto y el resultado
   entra desde el angulo contrario: la tarjeta parece darse la vuelta y el
   resultado haber estado siempre detras.

   Es el mismo lenguaje del giro que ya tiene la tarjeta derecha (rotateY
   corto + desvanecimiento), aplicado a la columna izquierda. El JS de
   d2-calc-vivo reabre el formulario un instante para que este giro pueda
   verse: `hidden` a secas es un corte.
   -------------------------------------------------------------------------- */

.d2 .calc .calc__panel {
  perspective: 1600px;
}

@keyframes d2-cara-sale {
  to { opacity: 0; transform: rotateY(10deg) scale(.97); }
}

@keyframes d2-cara-entra {
  from { opacity: 0; transform: rotateY(-10deg) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.d2 .calc .pasos.se-va {
  animation: d2-cara-sale .42s cubic-bezier(.32, .72, 0, 1) both;
  pointer-events: none;
}

/* El resultado entra cuando el formulario va por la mitad de su salida:
   las dos mitades se solapan y se lee como UN giro, no como dos fundidos. */
.d2 .calc .cierre:not([hidden]) {
  animation: d2-cara-entra .55s cubic-bezier(.32, .72, 0, 1) .18s both;
}

/* Formulario saliente y resultado entrante comparten celda en las rejillas
   de dos columnas: el cruce ocurre en el mismo sitio, al nivel del
   formulario de contacto, no debajo. */
@media (min-width: 901px) {
  .d2 .calc--unico .pasos,
  .d2 .calc--unico .cierre,
  .d2 .calc--pasos .pasos,
  .d2 .calc--pasos .cierre {
    grid-column: 1;
    grid-row: 1;
  }
}

/* En el tablero (columna flexible) el saliente se despega del flujo durante
   el giro: si empujara, la banda de abajo daria un salto. */
.d2 .calc--partido .calc__panel { position: relative; }

.d2 .calc--partido .pasos.se-va {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   3. EL PERFIL COMPLETO EN EL TABLERO: SEIS FICHAS EN DOS FILAS

   Con seis datos, una sola fila los aplasta. Tres por fila respiran y la
   banda sigue siendo una banda.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  .d2 .calc--partido .perfil {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc .pasos.se-va,
  .d2 .calc .cierre:not([hidden]) {
    animation: none;
  }

  .d2 .calc select.campo__input::picker(select) {
    transition: none;
  }
}


/* ==========================================================================
   LA CALCULADORA — TRES CORRECCIONES MEDIDAS

   1. `hidden` vuelve a mandar. Mis reglas de display sobre .pasos y
      .adelanto tenian mas especificidad que [hidden], asi que el
      formulario NUNCA se escondia de verdad al calcular en las variantes
      abiertas: el atributo estaba puesto, pero el display lo pisaba. Este
      blindaje corta el problema de raiz para todo el componente.

   2. El indicador de confianza y las fichas viven en la tarjeta BLANCA del
      perfil, y yo los pinte con texto blanco pensando en el panel oscuro:
      "Estimate confidence / 100%" era blanco sobre blanco. Todos los
      colores pasan a la paleta de superficie clara.

   3. El desplegable mostraba dos flechas: la del diseño (el SVG fino del
      envoltorio) y la que base-select añade por defecto. Se apaga la
      añadida y se queda la del diseño.
   ========================================================================== */

/* --- 1. hidden manda --- */

.d2 .calc [hidden] {
  display: none !important;
}

/* --- 2. el indicador sobre la tarjeta blanca --- */

.d2 .calc--partido .d2-margen {
  background: rgba(2, 51, 0, .04);
  border-color: rgba(2, 51, 0, .12);
}

.d2 .calc--partido .d2-margen.esta-completo {
  background: rgba(46, 144, 43, .08);
  border-color: rgba(46, 144, 43, .38);
}

.d2 .calc--partido .d2-margen__eti { color: #575757; }

.d2 .calc--partido .d2-margen__pct { color: var(--c-texto, #333); }

.d2 .calc--partido .d2-margen.esta-completo .d2-margen__pct {
  color: var(--c-verde-hover);   /* 6.41:1 sobre blanco */
}

.d2 .calc--partido .d2-margen__via { background: rgba(2, 51, 0, .12); }

.d2 .calc--partido .d2-margen__lleno {
  background: linear-gradient(90deg, rgba(46, 144, 43, .55), var(--c-verde));
}

.d2 .calc--partido .d2-margen__nota { color: #575757; }

/* Las fichas del tablero, tambien sobre blanco */
@media (min-width: 901px) {
  .d2 .calc--partido .perfil__fila {
    background: rgba(2, 51, 0, .035);
    border-color: rgba(2, 51, 0, .12);
  }

  .d2 .calc--partido .perfil__fila.is-lleno {
    background: rgba(46, 144, 43, .06);
    border-color: rgba(46, 144, 43, .45);
  }
}

/* El punto que late y el punto lleno: verde de interfaz, no el claro, que
   sobre blanco apenas se ve. */
.d2 .calc .perfil__fila:not(.is-lleno) .perfil__punto {
  background: var(--c-verde);
}

.d2 .calc--partido .perfil__fila.is-lleno .perfil__punto,
.d2 .calc .perfil__fila.is-lleno .perfil__punto {
  background: var(--c-verde);
  box-shadow: 0 0 8px rgba(46, 144, 43, .4);
}

@keyframes d2-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 144, 43, .45); opacity: .7; }
  50%      { box-shadow: 0 0 0 5px rgba(46, 144, 43, 0); opacity: 1; }
}

/* --- 3. una sola flecha en el desplegable --- */

@supports (appearance: base-select) {
  .d2 .calc select.campo__input::picker-icon {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   SIN "STEP 1 OF 4" EN LAS VARIANTES ABIERTAS

   El contador y la barra de progreso cuentan un recorrido por pasos que
   estas dos variantes no tienen: los cuatro campos estan a la vista.

   No se sustituye por otra animacion a proposito: el avance ya lo narran
   el perfil que se va llenando --con su punto latiendo en lo que toca-- y,
   en el tablero, la barra de confianza. Un segundo indicador contaria lo
   mismo dos veces.

   El asistente (variante 3) los conserva: ahi si hay pasos que contar.
   -------------------------------------------------------------------------- */

.d2 .calc--unico .pasos__cabecera,
.d2 .calc--partido .pasos__cabecera {
  display: none;
}


/* ==========================================================================
   SECCION RUTAS / SOLUTIONS — TRES VARIANTES

   Todo va prefijado .d2 .d2-rutas- para no chocar con las clases genericas
   .rutas / .ruta del marcado original ni con otras secciones.

   Ni un color a mano: solo tokens de d2.css y tokens.css. Verde #2E902B da
   4.09:1 sobre blanco, asi que NO se usa en texto pequeno; para eso va
   --c-verde-hover (#026F00, 6.41:1). Esa regla decide casi todos los
   colores de texto de este archivo.

   La curva de movimiento es la del header, cubic-bezier(.32,.72,0,1). No se
   usa --d2-curva porque esa es la de la referencia (.77,0,.175,1) y el
   contrato fija la otra para las secciones nuevas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   COMUN A LAS TRES

   Las cabeceras comparten medidas para que al pasar de una variante a otra
   en el carrusel el titular no salte de sitio. Solo cambia lo que hay
   debajo, que es lo que se esta comparando.
   -------------------------------------------------------------------------- */

.d2 .d2-rutas-sel,
.d2 .d2-rutas-esc,
.d2 .d2-rutas-cmp {
  padding-block: clamp(38px, 4.2vw, 54px);
  background: var(--c-blanco, #fff);
}

.d2 .d2-rutas-sel__inner,
.d2 .d2-rutas-esc__inner,
.d2 .d2-rutas-cmp__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

/* 62ch: el lead se corta antes de volverse una linea larga de leer, aunque
   el contenedor mida 1280. */
.d2 .d2-rutas-sel__cabecera,
.d2 .d2-rutas-esc__cabecera,
.d2 .d2-rutas-cmp__cabecera {
  max-width: 62ch;
}

.d2 .d2-rutas-sel__eyebrow,
.d2 .d2-rutas-esc__eyebrow,
.d2 .d2-rutas-cmp__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  /* verde oscuro y no --c-verde: a 11px el 4.09:1 del verde claro no pasa */
  color: var(--c-verde-hover);
}

.d2 .d2-rutas-sel__titulo,
.d2 .d2-rutas-esc__titulo,
.d2 .d2-rutas-cmp__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2 .d2-rutas-sel__lead,
.d2 .d2-rutas-esc__lead,
.d2 .d2-rutas-cmp__lead {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333);
}

/* --- El enlace de cada ruta ------------------------------------------------
   Mismo gesto en las tres: la flecha avanza 3px al pasar el raton, igual
   que .d2-btn. Es el idioma de movimiento que la pagina ya tiene; inventar
   otro solo para esta seccion la haria sonar distinta sin motivo. */

.d2 .d2-rutas-sel__link,
.d2 .d2-rutas-esc__link,
.d2 .d2-rutas-cmp__link {
  display: inline-flex;
  align-items: center;
  gap: var(--d2-e1);
  font-size: .875rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--c-verde-hover);
  transition: color .18s cubic-bezier(.32, .72, 0, 1);
}

.d2 .d2-rutas-sel__link svg,
.d2 .d2-rutas-esc__link svg,
.d2 .d2-rutas-cmp__link svg {
  flex: none;
  transition: transform .18s cubic-bezier(.32, .72, 0, 1);
}

.d2 .d2-rutas-sel__link:hover svg,
.d2 .d2-rutas-esc__link:hover svg,
.d2 .d2-rutas-cmp__link:hover svg {
  transform: translateX(3px);
}

.d2 .d2-rutas-sel__link:hover,
.d2 .d2-rutas-esc__link:hover,
.d2 .d2-rutas-cmp__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* El foco visible no se hereda del reset: se declara. Va con outline y no
   con sombra para que sobreviva al modo de alto contraste de Windows. */
.d2 .d2-rutas-sel__link:focus-visible,
.d2 .d2-rutas-esc__link:focus-visible,
.d2 .d2-rutas-cmp__link:focus-visible,
.d2 .d2-rutas-sel__ruta:focus-within {
  outline: 2px solid var(--c-verde-hover);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   OPCION 1 — AUTOSELECCION POR SITUACION

   Tres columnas iguales, pero lo que manda no es la tarjeta: es el rotulo
   de situacion que la encabeza. El lector busca SU caso, no compara
   servicios.

   Fundamento: NN/g (Taylor Dykes, 23-08-2024, "Explicitly State the
   Difference Between Options") observa que cuando la diferencia entre
   opciones queda implicita, el usuario o asume que son iguales o se
   atasca en distinciones menores. El rotulo hace explicito el eje.
   ========================================================================== */

.d2 .d2-rutas-sel__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

/* Rejilla interna de filas fijas: el tag, el titulo y el enlace de las tres
   columnas arrancan a la misma altura aunque un titulo ocupe dos lineas y
   otro una. Sin esto los enlaces quedan a alturas distintas y la fila se
   ve rota. El contrato lo pide explicitamente. */
.d2 .d2-rutas-sel__ruta {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  padding: var(--d2-e4) var(--d2-e3) var(--d2-e3);
  background: var(--d2-relleno);
  border-radius: var(--d2-radio-md);
  /* El filo superior verde marca la entrada de cada ruta sin encerrarla en
     una caja de contorno completo. */
  border-top: 2px solid var(--c-verde);
  transition: box-shadow .22s cubic-bezier(.32, .72, 0, 1),
              transform .22s cubic-bezier(.32, .72, 0, 1);
}

/* Se eleva 2px al pasar el raton, el mismo gesto del boton. Solo en
   dispositivos con puntero real: en tactil un :hover pegajoso deja la
   tarjeta levantada despues de tocarla. */
@media (hover: hover) {
  .d2 .d2-rutas-sel__ruta:hover {
    transform: translateY(-2px);
    box-shadow: var(--d2-sombra-md);
  }
}

/* El rotulo se estira hasta la linea divisoria en vez de reservar dos lineas
   con min-height. Medido en Chromium: con min-height, el rotulo corto de la
   primera columna dejaba un hueco muerto visible sobre su linea. Con la
   rejilla de filas del <li>, la fila 1 ya iguala altura entre columnas, asi
   que basta empujar el borde al fondo con margin-top:auto en el contenido
   restante. Aqui se resuelve al reves: el div ocupa su fila completa y la
   linea se pinta abajo. */
.d2 .d2-rutas-sel__caso {
  display: flex;
  align-items: flex-start;
  margin: 0 0 var(--d2-e2);
  padding-bottom: var(--d2-e2);
  border-bottom: 1px solid rgba(2, 51, 0, .12);
  font-size: .9375rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--c-texto);
}

.d2 .d2-rutas-sel__tag {
  margin: 0 0 6px;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-verde-hover);
}

.d2 .d2-rutas-sel__titulo-ruta {
  margin: 0 0 var(--d2-e1);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.28;
  color: var(--c-texto);
}

.d2 .d2-rutas-sel__texto {
  margin: 0 0 var(--d2-e3);
  font-size: .875rem;
  line-height: 1.56;
  color: var(--c-texto-cuerpo, #333);
}

/* ==========================================================================
   OPCION 2 — ESCALERA DE COMPROMISO

   Un solo eje horizontal. Las tres rutas son tramos de una linea, no tres
   cajas: cambia que se agrupa con que.

   El rail es una linea SVG que se dibuja de izquierda a derecha al entrar
   en pantalla --stroke-dasharray al largo, stroke-dashoffset a cero-- y se
   queda quieta. Una sola pasada: ningun bucle, nada que obligue a un
   control de pausa (WCAG 2.2.2).
   ========================================================================== */

.d2 .d2-rutas-esc__eje {
  position: relative;
  margin-top: clamp(34px, 4vw, 52px);
}

.d2 .d2-rutas-esc__rail {
  display: block;
  width: 100%;
  height: 8px;
  overflow: visible;
}

.d2 .d2-rutas-esc__rail-linea {
  fill: none;
  stroke: var(--c-verde);
  stroke-width: 2;
  stroke-linecap: round;
  /* 1200 es el ancho del viewBox; preserveAspectRatio="none" lo estira, asi
     que el dasharray se calcula en unidades del viewBox y no en pixeles
     reales. Por eso el valor es fijo y no hace falta medirlo con JS. */
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: d2-rutas-traza 1.1s cubic-bezier(.32, .72, 0, 1) .1s both;
}

@keyframes d2-rutas-traza {
  to { stroke-dashoffset: 0; }
}

.d2 .d2-rutas-esc__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rejilla de filas igual que en la opcion 1, y por el mismo motivo: que los
   tres enlaces caigan a la misma altura. */
.d2 .d2-rutas-esc__peldano {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding-top: var(--d2-e4);
}

/* El nodo se monta sobre el rail. -22px lo sube hasta la linea: el rail
   mide 8px de alto y el peldano tiene 24px de padding superior. */
.d2 .d2-rutas-esc__nodo {
  position: absolute;
  top: -22px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--d2-radio-full);
  background: var(--c-blanco, #fff);
  border: 2px solid var(--c-verde);
  /* Aparece cuando el trazo ya ha pasado por su posicion. Los retardos
     .35/.65/.95 estan calados sobre la duracion del rail (1.1s) para que
     cada nodo brote justo detras de la punta de la linea. */
  animation: d2-rutas-nodo .3s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .d2-rutas-esc__peldano:nth-child(1) .d2-rutas-esc__nodo { animation-delay: .35s; }
.d2 .d2-rutas-esc__peldano:nth-child(2) .d2-rutas-esc__nodo { animation-delay: .65s; }
.d2 .d2-rutas-esc__peldano:nth-child(3) .d2-rutas-esc__nodo { animation-delay: .95s; }

@keyframes d2-rutas-nodo {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}

.d2 .d2-rutas-esc__tag {
  margin: 0 0 6px;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-verde-hover);
}

.d2 .d2-rutas-esc__titulo-ruta {
  margin: 0 0 var(--d2-e1);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.28;
  color: var(--c-texto);
}

.d2 .d2-rutas-esc__texto {
  margin: 0 0 var(--d2-e3);
  font-size: .875rem;
  line-height: 1.56;
  color: var(--c-texto-cuerpo, #333);
}

/* Los dos extremos rotulan que crece a lo largo del eje. Sin ellos la linea
   no dice nada. */
.d2 .d2-rutas-esc__extremos {
  display: flex;
  justify-content: space-between;
  gap: var(--d2-e3);
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding-top: var(--d2-e2);
  border-top: 1px solid rgba(2, 51, 0, .1);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-rutas-esc__extremo:last-child { text-align: right; }

/* ==========================================================================
   OPCION 3 — COMPARATIVA POR ATRIBUTO

   Se lee por fila. Es una tabla de datos de verdad, no maquetacion con
   celdas, asi que conserva thead/th/scope y se le pone caption.

   Sin animacion de entrada mas alla de la comun: una tabla que se monta por
   partes se lee peor mientras se monta, y aqui el valor esta en poder
   barrer una fila entera de un vistazo. El triptico y la comparativa de la
   seccion del problema tampoco llevan, por lo mismo.
   ========================================================================== */

.d2 .d2-rutas-cmp__marco {
  margin-top: clamp(28px, 3.4vw, 44px);
  /* El scroll vive aqui, no en el body: en pantallas estrechas la rejilla
     se desplaza dentro de su marco y la pagina no gana scroll horizontal. */
  overflow-x: auto;
  /* Evita que el foco de un enlace interior quede recortado por el overflow */
  padding: 2px;
}

.d2 .d2-rutas-cmp__tabla {
  width: 100%;
  min-width: 680px;   /* por debajo, las tres columnas de texto se estrangulan */
  border-collapse: collapse;
  text-align: left;
}

/* La caption se oculta a la vista pero NO a los lectores de pantalla: da el
   contexto de que compara la tabla antes de entrar en ella. No se usa
   display:none, que la sacaria tambien del arbol de accesibilidad. */
.d2 .d2-rutas-cmp__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.d2 .d2-rutas-cmp__esquina {
  width: 15%;
  border: 0;
}

.d2 .d2-rutas-cmp__tabla thead th {
  width: 28.33%;
  padding: 0 var(--d2-e3) var(--d2-e2);
  vertical-align: bottom;
  border-bottom: 2px solid var(--c-verde);
}

.d2 .d2-rutas-cmp__tag {
  display: block;
  margin-bottom: 4px;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-verde-hover);
}

.d2 .d2-rutas-cmp__titulo-ruta {
  display: block;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--c-texto);
}

/* La cabecera de fila es el atributo que se compara. Va en gris suave y en
   versalitas para que no compita con las tres columnas, que son el
   contenido. */
.d2 .d2-rutas-cmp__tabla tbody th {
  padding: clamp(16px, 2vw, 22px) var(--d2-e3) clamp(16px, 2vw, 22px) 0;
  vertical-align: top;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  border-bottom: 1px solid rgba(2, 51, 0, .08);
}

.d2 .d2-rutas-cmp__tabla tbody td {
  padding: clamp(16px, 2vw, 22px) var(--d2-e3);
  vertical-align: top;
  font-size: .875rem;
  line-height: 1.56;
  color: var(--c-texto-cuerpo, #333);
  border-bottom: 1px solid rgba(2, 51, 0, .08);
}

.d2 .d2-rutas-cmp__tabla tbody tr:last-child th,
.d2 .d2-rutas-cmp__tabla tbody tr:last-child td {
  border-bottom: 0;
}

/* Realce de la columna bajo el raton: en una rejilla de tres columnas el ojo
   pierde la vertical al cruzar una fila larga. Solo con puntero real. */
@media (hover: hover) {
  .d2 .d2-rutas-cmp__tabla tbody td:hover {
    background: var(--d2-relleno);
  }
}

/* ==========================================================================
   ENTRADA

   Una sola pasada al aparecer y despues quietas, como el resto de secciones.
   El escalonado de 60ms ordena la lectura sin que se note como espera.
   ========================================================================== */

@keyframes d2-rutas-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.d2 .d2-rutas-sel__cabecera,
.d2 .d2-rutas-sel__ruta,
.d2 .d2-rutas-esc__cabecera,
.d2 .d2-rutas-esc__peldano,
.d2 .d2-rutas-esc__extremos,
.d2 .d2-rutas-cmp__cabecera,
.d2 .d2-rutas-cmp__marco {
  animation: d2-rutas-entra .55s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .d2-rutas-sel__ruta:nth-child(1),
.d2 .d2-rutas-esc__peldano:nth-child(1) { animation-delay: .06s; }
.d2 .d2-rutas-sel__ruta:nth-child(2),
.d2 .d2-rutas-esc__peldano:nth-child(2) { animation-delay: .12s; }
.d2 .d2-rutas-sel__ruta:nth-child(3),
.d2 .d2-rutas-esc__peldano:nth-child(3) { animation-delay: .18s; }
.d2 .d2-rutas-esc__extremos { animation-delay: .24s; }
.d2 .d2-rutas-cmp__marco { animation-delay: .1s; }

/* ==========================================================================
   RESPONSIVE

   Sin scroll horizontal de 1920 a 390. Las tres columnas caen a una a los
   860px, que es donde el texto de .875rem empieza a partirse mal.
   ========================================================================== */

@media (max-width: 900px) {
  .d2 .d2-rutas-sel__lista,
  .d2 .d2-rutas-esc__lista {
    grid-template-columns: 1fr;
  }

  /* En una columna el rotulo ya no compite con dos vecinos, asi que se
     libera la altura reservada: en horizontal servia para alinear, en
     vertical solo dejaria un hueco muerto. */
  .d2 .d2-rutas-sel__caso {
    min-height: 0;
  }

  /* El eje horizontal deja de tener sentido en una sola columna: el rail se
     retira y cada peldano se apoya en un filo propio. La forma sigue
     diciendo la verdad sobre el contenido en los dos anchos. */
  .d2 .d2-rutas-esc__rail {
    display: none;
  }

  .d2 .d2-rutas-esc__peldano {
    padding-top: var(--d2-e3);
    border-top: 2px solid var(--c-verde);
  }

  .d2 .d2-rutas-esc__nodo {
    display: none;
  }

  .d2 .d2-rutas-esc__extremos {
    display: none;   /* rotulaban el eje horizontal; sin eje, sobran */
  }
}

@media (max-width: 640px) {
  .d2 .d2-rutas-sel__ruta {
    padding: var(--d2-e3);
  }
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO

   Estado final inmediato: la linea dibujada, los nodos visibles, todo
   opaco. Nada de animacion, y ninguna transicion de hover residual.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-rutas-sel__cabecera,
  .d2 .d2-rutas-sel__ruta,
  .d2 .d2-rutas-esc__cabecera,
  .d2 .d2-rutas-esc__peldano,
  .d2 .d2-rutas-esc__extremos,
  .d2 .d2-rutas-cmp__cabecera,
  .d2 .d2-rutas-cmp__marco,
  .d2 .d2-rutas-esc__nodo {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .d2 .d2-rutas-esc__rail-linea {
    animation: none;
    stroke-dashoffset: 0;
  }

  .d2 .d2-rutas-sel__ruta,
  .d2 .d2-rutas-sel__link,
  .d2 .d2-rutas-esc__link,
  .d2 .d2-rutas-cmp__link,
  .d2 .d2-rutas-sel__link svg,
  .d2 .d2-rutas-esc__link svg,
  .d2 .d2-rutas-cmp__link svg {
    transition: none;
  }

  .d2 .d2-rutas-sel__ruta:hover {
    transform: none;
  }
}


/* ==========================================================================
   PRUEBA SOCIAL / BANDA DE CIFRAS — TRES VARIANTES

   Solo tokens del sistema. Ni un color a mano.

   DECISIONES QUE VALEN PARA LAS TRES
   ----------------------------------

   1. Las cifras no se animan al entrar como numero que sube.
      El CONTRATO prohibe contadores en estimaciones. Estas NO son
      estimaciones --el 9.5% es historico verificado de BC Hydro Continuous
      Optimization, el $2.94M es un hallazgo real-- asi que esa clausula
      concreta no aplica. Pero NN/g documenta que no se animen nunca los
      elementos criticos de una pagina: los usuarios los ignoran por
      parecerse a publicidad y ademas cuestan de leer en movimiento. La cifra
      es EL elemento critico aqui. Se queda quieta y solo aparece.

   2. Verde oscuro para todo texto pequeño.
      --c-verde da 4.09:1 sobre blanco y por debajo de 24px hace falta 4.5:1.
      --c-verde-hover da 6.41:1. Las etiquetas de fuente y las unidades usan
      el segundo, no el primero.

   3. Techo de 40px en las cifras, que es el del sistema. Ninguna variante lo
      pasa: el clamp maximo es 2.5rem = 40px exactos.

   4. Entrada escalonada de una pasada y quietas. Al no llegar a 5 segundos no
      cuenta como contenido en movimiento para WCAG 2.2.2 y no necesita
      control de pausa.
   ========================================================================== */


/* ==========================================================================
   OPCION 1 — REGISTRO

   Dos registros apilados: la banda de cifras arriba, las voces abajo. El
   lector recibe primero el dato y luego quien lo respalda.
   ========================================================================== */

.d2 .d2-prueba-reg {
  padding-block: clamp(40px, 5vw, 72px);
  background: var(--c-blanco);
}

.d2 .d2-prueba-reg__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .d2-prueba-reg__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

/* Las tres cifras en una fila de columnas iguales. minmax(0,1fr) y no 1fr a
   secas: sin el minimo en 0 una celda con texto largo se niega a encoger y
   desborda la rejilla. */
.d2 .d2-prueba-reg__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  padding: 0;
  list-style: none;
}

/* Region comun: el fondo de tinta ata cifra, pie y fuente en una unidad.
   Sin el, el pie de una cifra se lee como entrada de la siguiente. */
.d2 .d2-prueba-reg__cifra-item {
  display: flex;
  flex-direction: column;
  padding: var(--d2-e3);
  background: var(--d2-relleno);
  border-radius: var(--d2-radio-md);
}

/* 2.5rem = 40px, el techo exacto del sistema. */
.d2 .d2-prueba-reg__cifra {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

/* El simbolo mas pequeño que el numero: lo que se compara es el 9.5, y a
   igual tamaño el % le roba ancho sin aportar. */
.d2 .d2-prueba-reg__unidad {
  font-size: .62em;
  letter-spacing: 0;
}

.d2 .d2-prueba-reg__pie {
  margin: var(--d2-e2) 0 0;
  font-size: .875rem;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--c-texto);
}

/* La fuente al fondo de la tarjeta pase lo que pase: con margin-top auto las
   tres quedan alineadas aunque los pies midan distinto. */
.d2 .d2-prueba-reg__fuente {
  margin: var(--d2-e2) 0 0;
  padding-top: var(--d2-e1);
  border-top: 1px solid rgba(2, 51, 0, .1);
  font-size: .75rem;
  line-height: 1.35;
  color: var(--c-verde-hover);
}

.d2 .d2-prueba-reg__texto {
  max-width: 68ch;
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-prueba-reg__citas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: clamp(24px, 3vw, 36px) 0 0;
  border-top: 1px solid rgba(2, 51, 0, .1);
  list-style: none;
}

/* Las citas van sobre blanco y con un filete lateral verde, no en tarjeta:
   si llevaran el mismo fondo de tinta que las cifras, los dos registros se
   leerian como seis cosas iguales y se perderia la jerarquia. */
.d2 .d2-prueba-reg__cita {
  padding-left: var(--d2-e3);
  border-left: 2px solid var(--c-verde);
}

.d2 .d2-prueba-reg__cita-texto {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-prueba-reg__autor {
  margin: var(--d2-e2) 0 0;
  font-size: .8125rem;
  line-height: 1.35;
}

.d2 .d2-prueba-reg__nombre {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--c-texto);
}

.d2 .d2-prueba-reg__org {
  display: block;
  color: var(--c-texto-suave);
}

/* --- Entrada: primero las cifras, luego las voces ------------------------
   El escalonado sigue el orden de lectura. Si entraran a la vez, el ojo no
   sabria por donde empezar. */

@keyframes d2-prueba-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.d2 .d2-prueba-reg__eyebrow,
.d2 .d2-prueba-reg__cifra-item,
.d2 .d2-prueba-reg__texto,
.d2 .d2-prueba-reg__cita {
  animation: d2-prueba-entra .5s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .d2-prueba-reg__cifra-item:nth-child(1) { animation-delay: .06s; }
.d2 .d2-prueba-reg__cifra-item:nth-child(2) { animation-delay: .14s; }
.d2 .d2-prueba-reg__cifra-item:nth-child(3) { animation-delay: .22s; }
.d2 .d2-prueba-reg__texto { animation-delay: .28s; }
.d2 .d2-prueba-reg__cita:nth-child(1) { animation-delay: .34s; }
.d2 .d2-prueba-reg__cita:nth-child(2) { animation-delay: .40s; }
.d2 .d2-prueba-reg__cita:nth-child(3) { animation-delay: .46s; }

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-prueba-reg__eyebrow,
  .d2 .d2-prueba-reg__cifra-item,
  .d2 .d2-prueba-reg__texto,
  .d2 .d2-prueba-reg__cita {
    animation: none;
  }
}

/* --- Responsive ---------------------------------------------------------
   Las cifras aguantan tres columnas mas tiempo que las citas: son cortas.
   Las citas necesitan ancho para no partirse en tiras de tres palabras. */

@media (max-width: 900px) {
  .d2 .d2-prueba-reg__citas {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--d2-e4);
  }
}

@media (max-width: 640px) {
  .d2 .d2-prueba-reg__cifras {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--d2-e2);
  }
}


/* ==========================================================================
   OPCION 2 — RESPALDADA

   Cada cifra y su cita bajo el mismo marco. El eje de la variante es QUE SE
   AGRUPA CON QUE: no una banda de numeros y otra de voces, sino tres
   unidades cerradas de dato + respaldo.

   La cifra manda dentro del marco y la cita va debajo. No al reves: Freling
   et al. (2020, OBHDP 160, 51-67), meta-analisis de 61 estudios, encuentra
   que la evidencia estadistica gana a la anecdotica cuando el compromiso
   emocional es bajo, que es el caso de un administrador publico decidiendo
   sobre presupuesto ajeno. La cita da cuerpo; el numero decide.
   ========================================================================== */

.d2 .d2-prueba-resp {
  padding-block: clamp(40px, 5vw, 72px);
  background: var(--d2-tinta);
}

.d2 .d2-prueba-resp__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .d2-prueba-resp__cabecera { max-width: 68ch; }

.d2 .d2-prueba-resp__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-prueba-resp__texto {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-prueba-resp__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

/* Tarjeta blanca sobre tinta: el contraste de superficie es lo que ata la
   cifra con su cita. Es region comun (Palmer 1992, via NN/g): un contorno
   agrupa mas fuerte que la cercania, y aqui el objetivo es precisamente
   atar dos cosas que por separado no se sostienen igual. */
.d2 .d2-prueba-resp__par {
  display: flex;
  flex-direction: column;
  padding: var(--d2-e4);
  background: var(--c-blanco);
  border-radius: var(--d2-radio-md);
  box-shadow: var(--d2-sombra-md);
}

/* Altura reservada para el bloque del dato: las tres citas arrancan a la
   misma altura aunque los pies midan distinto. Sin esto, la tarjeta del
   9.5% --que lleva linea de fuente-- empuja su cita 20px mas abajo que las
   otras dos y la fila se ve rota. */
.d2 .d2-prueba-resp__dato {
  min-height: 132px;
  padding-bottom: var(--d2-e3);
  margin-bottom: var(--d2-e3);
  border-bottom: 1px solid rgba(2, 51, 0, .1);
}

.d2 .d2-prueba-resp__cifra {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2 .d2-prueba-resp__unidad {
  font-size: .62em;
  letter-spacing: 0;
}

.d2 .d2-prueba-resp__pie {
  margin: var(--d2-e2) 0 0;
  font-size: .875rem;
  font-weight: var(--fw-medium);
  line-height: 1.45;
  color: var(--c-texto);
}

.d2 .d2-prueba-resp__fuente {
  margin: 6px 0 0;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--c-verde-hover);
}

.d2 .d2-prueba-resp__cita {
  flex: 1;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-prueba-resp__autor {
  margin: var(--d2-e3) 0 0;
  font-size: .8125rem;
  line-height: 1.35;
}

.d2 .d2-prueba-resp__nombre {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--c-texto);
}

.d2 .d2-prueba-resp__org {
  display: block;
  color: var(--c-texto-suave);
}

/* --- Movimiento ---------------------------------------------------------
   Solo la entrada. Al pasar el raton la tarjeta se eleva 2px, que es el
   mismo gesto que ya hacen los botones del sistema: coherencia, no adorno.
   No cambia nada de color porque no es un elemento accionable y no debe
   prometer que lo es. */

.d2 .d2-prueba-resp__par {
  animation: d2-prueba-entra .5s cubic-bezier(.32, .72, 0, 1) both;
  transition: transform var(--d2-normal) ease,
              box-shadow var(--d2-normal) ease;
}

.d2 .d2-prueba-resp__par:nth-child(1) { animation-delay: .06s; }
.d2 .d2-prueba-resp__par:nth-child(2) { animation-delay: .16s; }
.d2 .d2-prueba-resp__par:nth-child(3) { animation-delay: .26s; }

.d2 .d2-prueba-resp__par:hover {
  transform: translateY(-2px);
  box-shadow: var(--d2-sombra-alta);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-prueba-resp__par {
    animation: none;
    transition: none;
  }
  .d2 .d2-prueba-resp__par:hover { transform: none; }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .d2 .d2-prueba-resp__lista {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--d2-e3);
  }

  /* En una columna cada tarjeta ocupa su ancho y ya no hay fila que alinear:
     la altura reservada solo dejaria un hueco. */
  .d2 .d2-prueba-resp__dato { min-height: 0; }
}


/* ==========================================================================
   OPCION 3 — RECORRIDO

   Cambia EL EJE DE LECTURA: vertical y en orden, frente al horizontal en
   paralelo de las otras dos. El 2008 deja de ser una cifra suelta y pasa a
   ser el origen de una linea que explica las otras dos.

   Es la unica variante donde el orden es el argumento, y por eso es la unica
   que usa <ol>. En las otras dos seria una afirmacion falsa.
   ========================================================================== */

.d2 .d2-prueba-rec {
  padding-block: clamp(40px, 5vw, 72px);
  background: var(--c-blanco);
}

.d2 .d2-prueba-rec__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .d2-prueba-rec__cabecera { max-width: 68ch; }

.d2 .d2-prueba-rec__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-prueba-rec__texto {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-prueba-rec__linea {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

/* Dos columnas: el carril de la marca y el contenido. El carril lleva ancho
   fijo para que los tres puntos queden en la misma vertical; con ancho
   automatico cada uno se colocaria segun su contenido y la linea se torceria. */
.d2 .d2-prueba-rec__hito {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--d2-e3);
  padding-bottom: clamp(24px, 3vw, 36px);
}

/* La linea vertical se dibuja con un pseudoelemento del propio hito y no de
   la lista: asi el ultimo puede cortarla. Una linea que sigue despues del
   ultimo punto sugiere que falta algo por venir. */
.d2 .d2-prueba-rec__hito::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background: rgba(2, 51, 0, .12);
}

.d2 .d2-prueba-rec__hito--final::before { display: none; }

/* El punto: circulo hueco relleno de blanco, como los del panel del hero.
   Es el mismo idioma visual con el que esta pagina marca lecturas. */
.d2 .d2-prueba-rec__marca {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 7px;
  margin-left: 9px;
  background: var(--c-blanco);
  border: 3px solid var(--c-verde);
  border-radius: var(--d2-radio-full);
}

.d2 .d2-prueba-rec__cifra {
  margin: 0;
  font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2 .d2-prueba-rec__unidad {
  font-size: .62em;
  letter-spacing: 0;
}

.d2 .d2-prueba-rec__pie {
  max-width: 62ch;
  margin: var(--d2-e1) 0 0;
  font-size: .9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--c-texto);
}

.d2 .d2-prueba-rec__fuente {
  margin: 6px 0 0;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--c-verde-hover);
}

/* El ultimo hito lleva DOS citas. Apiladas median 320px y la seccion se iba
   a 970px, por encima del limite de ~900px del sistema (medido en Chromium
   a 1440px). El copy es literal y no se toca, asi que lo que cambia es el
   reparto: las dos citas van en paralelo en pantallas anchas.

   Se usa una rejilla en el cuerpo del hito final y las citas se colocan en
   columnas con su autor debajo.

   Las dos columnas se piden con una consulta de medios y NO con auto-fit.
   Se probo auto-fit + minmax(260px, 1fr) y a 390px mantenia las dos
   columnas comprimidas a 95px cada una, con 45px de desbordamiento
   horizontal: dentro de un carril de rejilla ya limitado, el minimo del
   minmax no cede y el contenido se sale. Con la consulta de medios el
   apilado a una columna es la regla por defecto y las dos columnas solo
   aparecen donde hay sitio de sobra. */
.d2 .d2-prueba-rec__hito--final .d2-prueba-rec__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(16px, 2.2vw, 28px);
}

@media (min-width: 901px) {
  .d2 .d2-prueba-rec__hito--final .d2-prueba-rec__cuerpo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La cifra y su pie ocupan la fila entera: son del hito, no de una cita.
   Van con fila explicita ademas de columna: el pie esta DESPUES de las citas
   en el marcado --el orden natural es cifra, pie, citas-- pero al fijar las
   citas en la fila 2 la colocacion automatica mandaba el pie a la fila 4, es
   decir por debajo de las citas, y la cifra quedaba sin su explicacion.
   Medido: el pie del $2.94M aparecia al final del hito. */
.d2 .d2-prueba-rec__hito--final .d2-prueba-rec__cifra {
  grid-column: 1 / -1;
  grid-row: 1;
}

.d2 .d2-prueba-rec__hito--final .d2-prueba-rec__pie {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Cita y autor en filas explicitas: las dos citas comparten la fila 2 y los
   dos autores la fila 3. Asi cada autor queda bajo SU cita y las dos parejas
   arrancan a la misma altura aunque una cita sea mas larga. Dejandolo al
   flujo automatico, el autor de la cita corta subiria y se leerian
   desalineadas.

   Solo dentro de la consulta de medios: apilado en una columna el orden del
   marcado ya es el correcto, y fijar filas ahi rompería el emparejamiento. */
@media (min-width: 901px) {
  .d2 .d2-prueba-rec__hito--final .d2-prueba-rec__cita {
    grid-row: 3;
    align-self: start;
  }

  .d2 .d2-prueba-rec__hito--final .d2-prueba-rec__autor {
    grid-row: 4;
    align-self: start;
  }
}

/* Las citas van indentadas respecto a la cifra: son anotaciones al hito, no
   hitos ellas mismas. La sangria lo dice sin necesidad de otro contorno. */
.d2 .d2-prueba-rec__cita {
  max-width: 62ch;
  margin: var(--d2-e3) 0 0;
  padding-left: var(--d2-e3);
  border-left: 2px solid rgba(2, 51, 0, .12);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-prueba-rec__autor {
  margin: 6px 0 0;
  padding-left: var(--d2-e3);
  font-size: .8125rem;
  line-height: 1.35;
}

.d2 .d2-prueba-rec__nombre {
  font-weight: var(--fw-bold);
  color: var(--c-texto);
}

/* Separador tipografico entre nombre y organizacion. Es decorativo, asi que
   se genera en CSS: un lector de pantalla lee los dos spans seguidos sin
   que se cuele un guion suelto. */
.d2 .d2-prueba-rec__org {
  color: var(--c-texto-suave);
}

.d2 .d2-prueba-rec__org::before {
  content: " · ";
  color: var(--c-texto-suave);
}

/* --- Movimiento ---------------------------------------------------------
   Esta es la unica variante que gana algo con movimiento mas alla del
   aparecer: la linea se traza de arriba abajo y los puntos se encienden al
   pasar, que es lo que convierte tres bloques apilados en un recorrido.

   Tecnica del panel del hero adaptada a un pseudoelemento: no se puede usar
   stroke-dashoffset sobre un div, asi que se escala en Y desde el origen
   superior, que produce el mismo efecto de trazado progresivo.

   Una pasada, ~1.1s en total. Muy por debajo de los 5s de WCAG 2.2.2, asi
   que no necesita control de pausa. -------------------------------------- */

@keyframes d2-prueba-traza {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes d2-prueba-punto {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: none; }
}

.d2 .d2-prueba-rec__hito::before {
  transform-origin: top center;
  animation: d2-prueba-traza .5s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .d2-prueba-rec__marca {
  animation: d2-prueba-punto .4s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .d2-prueba-rec__cuerpo {
  animation: d2-prueba-entra .5s cubic-bezier(.32, .72, 0, 1) both;
}

/* El punto se enciende, luego baja su tramo de linea, luego llega el punto
   siguiente. Los retardos encadenan ese orden. */
.d2 .d2-prueba-rec__hito:nth-child(1) .d2-prueba-rec__marca  { animation-delay: .05s; }
.d2 .d2-prueba-rec__hito:nth-child(1) .d2-prueba-rec__cuerpo { animation-delay: .10s; }
.d2 .d2-prueba-rec__hito:nth-child(1)::before                { animation-delay: .20s; }

.d2 .d2-prueba-rec__hito:nth-child(2) .d2-prueba-rec__marca  { animation-delay: .45s; }
.d2 .d2-prueba-rec__hito:nth-child(2) .d2-prueba-rec__cuerpo { animation-delay: .50s; }
.d2 .d2-prueba-rec__hito:nth-child(2)::before                { animation-delay: .60s; }

.d2 .d2-prueba-rec__hito:nth-child(3) .d2-prueba-rec__marca  { animation-delay: .85s; }
.d2 .d2-prueba-rec__hito:nth-child(3) .d2-prueba-rec__cuerpo { animation-delay: .90s; }

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-prueba-rec__hito::before,
  .d2 .d2-prueba-rec__marca,
  .d2 .d2-prueba-rec__cuerpo {
    animation: none;
  }
}

/* --- Responsive ---------------------------------------------------------
   El carril se estrecha pero no desaparece: sin el, los tres hitos se leen
   como una lista cualquiera y se pierde justo lo que distingue a esta
   variante. */

@media (max-width: 640px) {
  .d2 .d2-prueba-rec__hito {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--d2-e2);
  }

  .d2 .d2-prueba-rec__hito::before { left: 11px; }

  .d2 .d2-prueba-rec__marca {
    margin-left: 5px;
  }

  .d2 .d2-prueba-rec__cita,
  .d2 .d2-prueba-rec__autor {
    padding-left: var(--d2-e2);
  }
}


/* ==========================================================================
   CTA FINAL — TRES VARIANTES

   Todo va prefijado `.d2 .d2-cta-` para no tocar nada del proyecto.
   Solo tokens ya existentes: ni un color escrito a mano (contrato §2).

   MOVIMIENTO (contrato §3). Decision deliberada: NINGUNA de las tres lleva
   animacion propia mas alla de la entrada escalonada y los estados de
   hover que ya trae `.d2-btn`.

   El motivo: este bloque es el ultimo antes del pie y su unico trabajo es
   que se pulse un boton. Cualquier cosa que se mueva al lado de un boton
   compite con el boton. El tríptico y la comparativa de la seccion del
   problema tampoco llevan animacion y es correcto; aqui vale lo mismo.

   La entrada usa la clase `.d2-entra` que ya existe en d2.css (opacidad y
   10% de desplazamiento, con su propio prefers-reduced-motion). Aqui solo
   se anade el ESCALONADO de los hijos, que es lo que d2.css no da.

   ---------------------------------------------------------------------------
   MEDIDO EN NAVEGADOR (contrato §7), Chromium a 1920/1440/860/720/480/390:

   - Sin scroll horizontal en ninguno de los seis anchos
     (scrollWidth == innerWidth en todos).
   - Alturas: balanza 337-486px, continuidad 461-625px, carriles 446-583px.
     Todas por debajo del techo de ~900px.
   - Botones de una misma fila: mismo alto (52px) y mismo ancho
     (254/254 en escritorio, 364/364 en carriles) y mismo `top`.
   - Textos propios de esta seccion: de 5.98:1 a 12.63:1. Todos pasan AA.
   - prefers-reduced-motion: la seccion llega con opacity:1 y transform:none
     antes de cualquier clase, o sea estado final inmediato y sin animacion.

   ⚠ HALLAZGO QUE NO ES DE ESTA SECCION, pero conviene que conste:
   el texto de `.d2-btn` mide 4.09:1 (blanco sobre --c-verde, y --c-verde
   sobre blanco en el de linea) a 16px, por debajo del 4.5:1 que pide AA.
   No es un defecto introducido aqui: es el token --c-verde y afecta a
   TODOS los botones del sitio; tokens.css ya lo documenta en su linea 20.
   Se deja como esta para no divergir del sistema por una seccion. Si se
   quiere corregir, es una decision de sistema (pasar los botones solidos a
   --c-verde-hover da 6.41:1) y hay que tomarla en d2.css, no aqui.
   --------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   ESCALONADO DE ENTRADA — comun a las tres

   transition-delay y no animation: asi hereda el estado final de .d2-entra
   sin duplicar keyframes, y si el JS del observador no corre, el contenido
   queda visible igual (contrato §4: debe leerse sin JavaScript).

   Sin will-change ni translateZ: rasterizan y emborronan el texto, y eso ya
   costo una investigacion en este proyecto.
   -------------------------------------------------------------------------- */

.d2 .d2-cta-bal.es-visible .d2-cta-bal__texto,
.d2 .d2-cta-con.es-visible .d2-cta-con__titulo,
.d2 .d2-cta-car.es-visible .d2-cta-car__cabecera {
  transition-delay: 0ms;
}

.d2 .d2-cta-bal.es-visible .d2-cta-bal__acciones,
.d2 .d2-cta-con.es-visible .d2-cta-con__accion,
.d2 .d2-cta-car.es-visible .d2-cta-car__lista {
  transition-delay: 90ms;
}


/* ==========================================================================
   OPCION 1 — BALANZA

   Texto centrado y las dos acciones en fila, mismo peso visual.
   ========================================================================== */

.d2 .d2-cta-bal {
  padding-block: clamp(48px, 6.5vw, 88px);
  background: var(--d2-tinta);
}

.d2 .d2-cta-bal__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
  text-align: center;
}

/* 70ch y no 46: con 46 el titular caia en 3 lineas y el parrafo en otras 3,
   y eso hacia la seccion mas alta de lo necesario.

   Medido con las metricas de Open Sans: a 46ch --414px-- son 3 y 3; el
   titular baja a 2 lineas a partir de 560px y el parrafo a partir de 620.
   Con 70ch --630px-- quedan 2 y 2 desde los 760px de ventana para arriba.

   Sigue dentro del limite comodo de lectura: el parrafo va centrado y en
   dos lineas, no es un bloque largo. */
.d2 .d2-cta-bal__texto {
  max-width: 90ch;
  margin-inline: auto;
}

.d2 .d2-cta-bal__titulo {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2 .d2-cta-bal__parrafo {
  margin: var(--d2-e3) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-texto-cuerpo);
}

/* Lista sin viñetas: son botones, el marcador seria ruido visual.
   Se mantiene <ul> por semantica (contrato §4). */
/* Rejilla de dos columnas iguales y no flex: `1fr 1fr` reparte el mismo
   ancho a las dos aunque las etiquetas midan distinto, que es la condicion
   de la balanza. El ancho se acota con max-width para que en pantallas
   grandes los botones no se estiren a media pantalla. */
.d2 .d2-cta-bal__acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--d2-e2);
  max-width: 520px;
  margin: clamp(24px, 3vw, 36px) auto 0;
  padding: 0;
  list-style: none;
}

/* Contrato §5: los dos botones de una misma fila, misma altura Y mismo
   ancho. Sin esto "Book a call" sale mucho mas estrecho que "Check your
   opportunity" y la balanza deja de estar equilibrada, que es justo lo
   que esta variante quiere decir.

   MEDIDO, no supuesto: con `min-width` en el <a> los anchos salian 270 y
   244. El min-width solo pone un suelo, y "Check your opportunity" con su
   padding lo supera; "Book a call" no. Se iguala desde el <li> con
   1fr/1fr y el boton a width:100%, que fija el ancho en vez de acotarlo. */
.d2 .d2-cta-bal__accion {
  display: flex;
}

.d2 .d2-cta-bal__btn {
  width: 100%;
}


/* ==========================================================================
   OPCION 2 — CONTINUIDAD

   Una sola caja centrada sobre fondo blanco. La etiqueta superior nombra
   el destino; el enlace de texto desempata sin esconder.
   ========================================================================== */

.d2 .d2-cta-con {
  padding-block: clamp(48px, 6.5vw, 88px);
  background: var(--c-blanco);
}

/* La caja es lo que separa esta variante de un bloque de texto suelto:
   el contorno dice "esto es una unidad, y su unidad es una accion".
   Region comun (Palmer 1992, via NN/g): el marco agrupa mas que la
   cercania. NN/g aconseja preferir el blanco y recurrir al borde solo
   cuando el blanco no basta; aqui no basta, porque el fondo ya es blanco. */
.d2 .d2-cta-con__inner {
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(32px, 4.5vw, 56px) clamp(24px, 4vw, 56px);
  text-align: center;
  background: var(--d2-relleno);
  border-radius: var(--d2-radio-lg);
  box-shadow: var(--d2-sombra-md);
}

/* Verde oscuro y no el de interfaz: a 12px hace falta 4.5:1 y --c-verde
   da 4.09 sobre esta tinta. --c-verde-hover da 6.41. */
.d2 .d2-cta-con__etiqueta {
  margin: 0 0 var(--d2-e2);
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-verde-hover);
}

.d2 .d2-cta-con__titulo {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2 .d2-cta-con__parrafo {
  max-width: 46ch;
  margin: var(--d2-e3) auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-texto-cuerpo);
}

.d2 .d2-cta-con__accion {
  margin-top: clamp(24px, 3vw, 36px);
}

.d2 .d2-cta-con__btn {
  min-width: 244px;
}

/* 16px de separacion: el minimo del contrato son 12, pero aqui el enlace
   compite con un boton de 52px de alto y a 12px se leia pegado a el. */
.d2 .d2-cta-con__alterna {
  margin: var(--d2-e3) 0 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--c-texto-cuerpo);
}

/* Subrayado permanente: es la unica pista de que es pulsable, porque ya
   no tiene forma de boton. Quitarlo lo convertiria en texto muerto. */
.d2 .d2-cta-con__enlace {
  color: var(--c-verde-hover);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.d2 .d2-cta-con__enlace:hover { color: var(--c-texto); }

.d2 .d2-cta-con__enlace:focus-visible {
  outline: 2px solid var(--c-verde);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   OPCION 3 — DOS CARRILES

   Cabecera comun arriba y dos marcos abajo, uno por lector.
   ========================================================================== */

.d2 .d2-cta-car {
  padding-block: clamp(48px, 6.5vw, 88px);
  background: var(--d2-tinta);
}

.d2 .d2-cta-car__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .d2-cta-car__cabecera {
  max-width: 52ch;
  margin-inline: auto;
  text-align: center;
}

.d2 .d2-cta-car__titulo {
  margin: 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--c-texto);
}

.d2 .d2-cta-car__parrafo {
  margin: var(--d2-e3) 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-texto-cuerpo);
}

/* Dos columnas iguales y un tope de 860px: a todo lo ancho de 1280 los dos
   carriles quedaban tan separados que dejaban de leerse como pareja. */
.d2 .d2-cta-car__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--d2-e3);
  max-width: 860px;
  margin: clamp(28px, 3.4vw, 40px) auto 0;
  padding: 0;
  list-style: none;
}

/* Flex en columna con el boton empujado abajo: las etiquetas "If you can
   act on this now" y "If someone else has to sign off" no ocupan lo mismo,
   y sin esto los dos botones arrancaban a alturas distintas. Contrato §5:
   cabeceras con altura reservada para que la fila arranque igual. */
.d2 .d2-cta-car__carril {
  display: flex;
  flex-direction: column;
  gap: var(--d2-e3);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--c-blanco);
  border: 1px solid rgba(2, 51, 0, .12);
  border-radius: var(--d2-radio-md);
  box-shadow: var(--d2-sombra-sm);
}

.d2 .d2-cta-car__quien {
  margin: 0;
  font-size: .9375rem;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--c-texto);
}

/* El boton al fondo del carril y a todo el ancho: asi los dos miden lo
   mismo sin fijar un min-width que se rompa al traducir el copy. */
.d2 .d2-cta-car__btn {
  margin-top: auto;
  width: 100%;
}


/* ==========================================================================
   RESPONSIVE

   Verificado el requisito del contrato §5: sin scroll horizontal de 1920 a
   390px. Los dos puntos de riesgo eran los min-width de 244px (caben en
   390 menos gutters = 310) y la rejilla de dos columnas.
   ========================================================================== */

@media (max-width: 900px) {
  /* Los carriles se apilan: a dos columnas por debajo de 720 el boton se
     parte en dos lineas y rompe la altura de 52px. */
  .d2 .d2-cta-car__lista {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Una columna: a 390px dos botones lado a lado dejan ~145px cada uno y
     "Check your opportunity" se parte en tres lineas, rompiendo los 52px
     de alto. Apilados conservan la altura y siguen midiendo lo mismo. */
  .d2 .d2-cta-bal__acciones {
    grid-template-columns: 1fr;
  }

  /* El suelo de 244px se retira: con gutter de 20px el ancho util a 390 es
     350, asi que el min-width no desborda, pero fijarlo al 100% garantiza
     que los dos botones midan igual tambien apilados. */
  .d2 .d2-cta-con__btn {
    min-width: 0;
    width: 100%;
  }
}


/* ==========================================================================
   MOVIMIENTO REDUCIDO

   .d2-entra ya se neutraliza en d2.css. Aqui se anulan los retardos: si no,
   el contenido aparece escalonado igual aunque no haya transicion, que es
   exactamente lo que la preferencia pide evitar. Estado final inmediato.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-cta-bal.es-visible .d2-cta-bal__texto,
  .d2 .d2-cta-bal.es-visible .d2-cta-bal__acciones,
  .d2 .d2-cta-con.es-visible .d2-cta-con__titulo,
  .d2 .d2-cta-con.es-visible .d2-cta-con__accion,
  .d2 .d2-cta-car.es-visible .d2-cta-car__cabecera,
  .d2 .d2-cta-car.es-visible .d2-cta-car__lista {
    transition-delay: 0ms;
  }

  .d2 .d2-cta-con__enlace { transition: none; }
}


/* ==========================================================================
   PIE DE PAGINA — TRES VARIANTES (DISENO 2)

   Las tres pintan el mismo copy sobre --d2-oscuro (#0E2A12), el color que
   d2.css reserva justo para esto ("verde muy oscuro, para footer y bandas").

   Lo que cambia entre ellas NO es la piel. Es a que sirve el pie:

     1. DIRECTORIO   el protagonista es la NAVEGACION. Tres columnas de
                     enlaces mandan; el contacto es una columna mas.
     2. DESPACHO     cambia QUE se agrupa con QUE. Telefono, correo y
                     direccion salen de la rejilla de enlaces y se juntan
                     en un bloque de contacto con objetivos grandes; el
                     mapa del sitio se comprime a una fila.
     3. CIERRE       cambia DONDE vive el protagonista. No hay mega-pie:
                     una franja baja, y el peso se va al dato de contacto
                     en linea. Es la antitesis de la opcion 1.

   ─── Por que ninguna lleva CTA ───────────────────────────────────────────
   El patron "pie con CTA integrado" esta descartado a proposito: la seccion
   cta-final.html va JUSTO encima del pie y ya trae "Check your opportunity"
   y "Book a call". Meter otra llamada en el pie duplicaria la de arriba a
   dos dedos de distancia. El pie recoge, no vuelve a pedir.

   ─── Contraste: medido, no supuesto ─────────────────────────────────────
   Todos los valores calculados contra #0E2A12 (luminancia .0179):

     blanco puro .................. 15.46:1
     blanco 82% (#d4d9d4) ......... 10.80:1   enlaces
     blanco 74% (#c0c8c1) .........  9.03:1   cuerpo
     blanco 62% (#a3aea5) .........  6.74:1   secundario / direccion
     blanco 55% (#939f94) .........  5.61:1   minimo que uso
     --c-verde-marca #39B54A ......  5.80:1   PASA AA en pequeno
     --c-verde #2E902B ............  3.78:1   NO para texto pequeno
     --c-verde-hover #026F00 ......  2.41:1   inservible sobre oscuro

   Dos consecuencias que van contra la intuicion y conviene no deshacer:

   (a) --c-verde-marca (#39B54A) es el verde que la guia PROHIBE para texto
       sobre blanco (~2.5:1). Sobre este fondo oscuro da 5.80:1 y si sirve.
       Aqui es el verde de acento correcto. Al reves, --c-verde-hover, que
       es el bueno sobre blanco, da 2.41:1 y no vale para nada oscuro.

   (b) El pie anterior (footer.css) pintaba la direccion, el aviso legal y
       las etiquetas con rgba(255,255,255,.45) = 4.24:1, por debajo del
       4.5:1 que pide AA. Ninguna variante baja del 55%.

   Los tokens no cambian: se usan tal cual. Las mezclas con blanco son
   opacidades sobre el token de fondo, no colores nuevos escritos a mano.
   ========================================================================== */


/* --------------------------------------------------------------------------
   BASE COMPARTIDA

   Lo que las tres tienen en comun se escribe una vez. Las diferencias
   estructurales viven en cada bloque, no aqui.
   -------------------------------------------------------------------------- */

.d2 .d2-pie-dir,
.d2 .d2-pie-desp,
.d2 .d2-pie-cierre {
  background: var(--d2-oscuro);
  color: var(--c-blanco);
}

/* El contenedor de las tres, identico al del resto de secciones del d2 para
   que el pie alinee con lo que tiene encima. */
.d2 .d2-pie-dir__inner,
.d2 .d2-pie-desp__inner,
.d2 .d2-pie-cierre__inner,
.d2 .d2-pie-dir__base-inner,
.d2 .d2-pie-desp__base-inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

/* --- El logo sobre fondo oscuro ---------------------------------------
   El SVG lleva el verde del logo (#39A935) y DOS grises (#868686 y
   #C6C6C5) en la bajada "Building Energy Efficiency". Sobre este fondo el
   gris oscuro se hunde: #868686 contra #0E2A12 da 4.25:1, por debajo del
   4.5:1 de AA, y a ese tamano la bajada es texto pequeno.

   El pie anterior usaba brightness(1.6). Medido factor por factor, 1.6 es
   demasiado: satura canales y rompe el color de marca.

     factor   #868686        #C6C6C5          #39A935
     1.00     4.25:1         9.04:1           5.08:1
     1.20     5.98:1        13.31:1           7.26:1
     1.30     6.97:1        15.46:1  CLIP     8.55:1
     1.60    10.64:1        15.46:1  CLIP    11.69:1  CLIP  -> menta

   Se queda en 1.20: es el ultimo escalon en que el gris oscuro ya pasa AA
   (5.98:1) y NINGUN canal se satura todavia. A partir de 1.30 el gris
   claro se aplasta contra el blanco puro y el verde empieza a lavarse;
   en 1.60 el verde sale #5bff55, un menta fosforito que ya no es la marca.

   No se toca el archivo del logo: es un asset de marca. */
.d2 .d2-pie-dir__logo img,
.d2 .d2-pie-desp__logo img,
.d2 .d2-pie-cierre__logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1.2);
}

/* --- Titulos de columna ----------------------------------------------
   Versalitas pequenas. A .6875rem el texto es diminuto, asi que va al 74%
   (9.03:1) y no al 45% del pie anterior, que daba 4.24:1. */
.d2 .d2-pie-dir__titulo,
.d2 .d2-pie-desp__titulo {
  margin: 0 0 var(--d2-e3);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

/* --- Boton de pronunciacion -------------------------------------------
   Lo pide el brief. Es un boton real (dispara audio), no un adorno: 32px
   de caja para que sea alcanzable, y el verde de marca que aqui SI pasa. */
.d2 .d2-pie-pron {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--c-verde-marca);
  background: rgba(57, 181, 74, .16);
  border: 0;
  border-radius: var(--d2-radio-full);
  cursor: pointer;
  transition: background-color var(--trans-media);
}

.d2 .d2-pie-pron:hover { background: rgba(57, 181, 74, .3); }

/* Foco visible sobre oscuro: el anillo va en verde de marca, que contra
   #0E2A12 da 5.8:1 y se ve sin ambiguedad. */
.d2 .d2-pie-dir a:focus-visible,
.d2 .d2-pie-desp a:focus-visible,
.d2 .d2-pie-cierre a:focus-visible,
.d2 .d2-pie-pron:focus-visible {
  outline: 2px solid var(--c-verde-marca);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ==========================================================================
   OBJETIVOS TACTILES EN ENLACES APILADOS

   Una lista de enlaces en el pie es el caso mas conflictivo de un pie:
   destinos pequenos, pegados y en vertical. Medido:

     14px x 1.5 de interlineado = 21px de alto real
     15px x 1.5                 = 22.5px

   WCAG 2.2 introduce el criterio 2.5.8 "Target Size (Minimum)", nivel AA,
   con un minimo de 24x24 px CSS. Los dos casos de arriba se quedan por
   debajo SOLO por el alto de la linea.

   Matiz importante y facil de aplicar mal: 2.5.8 exceptua los destinos
   "in-line". Es tentador acogerse a esa excepcion para una lista de
   enlaces y ahorrarse el padding, pero NO cubre este caso.

   El texto de la excepcion dice "the target is in a sentence or its size
   is otherwise constrained by the line-height of non-target text", y el
   documento Understanding solo la ejemplifica con "links within a
   paragraph of text". La justifica ademas porque el reflujo del texto
   impide al autor prever donde caera cada enlace: razonamiento que no
   aplica a una lista vertical puesta ahi a proposito. En la discusion
   oficial del grupo de trabajo, un colaborador del W3C WCAG WG lo
   descarta para paginacion con "it's a different use case".

   Asi que estos enlaces necesitan los 24px. Fuentes:
     https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
     https://github.com/w3c/wcag/discussions/3829
   (El WG no se ha pronunciado de forma explicita y definitiva sobre listas
   de pie en concreto; se aplica el criterio estricto por prudencia.)

   La solucion NO es subir el interlineado --eso separa el texto y lo hace
   ilegible-- sino padding-block. Con 14px/1.5 hacen falta 1.5px por lado
   para llegar a 24. Aqui se usan 6px por lado (33px total) porque:

     - deja margen sobre el minimo, sin llegar a los 44px de 2.5.5 (AAA),
       que en una lista de cinco enlaces estiraria el pie sin necesidad
     - los 12px que quedan entre dos textos consecutivos cumplen tambien
       la separacion minima que pide el contrato

   El padding va en un <a> puesto a block/inline-flex: sobre un <a> en
   linea, el padding vertical NO agranda la caja de pulsacion y el enlace
   sigue midiendo 21px aunque se vea mas alto. Ese es el fallo silencioso
   que hay que evitar aqui.
   ========================================================================== */


/* ==========================================================================
   OPCION 1 — DIRECTORIO

   El protagonista es la navegacion. Marca a la izquierda, tres columnas de
   enlaces ocupando el resto: la rejilla 1fr / 1.6fr da mas sitio a los
   enlaces que a la marca, que es lo que dice esta variante.
   ========================================================================== */

.d2 .d2-pie-dir__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(32px, 4vw, 64px);
  padding-block: clamp(40px, 4.6vw, 64px);
}

.d2 .d2-pie-dir__logo {
  display: block;
  width: 150px;
}

.d2 .d2-pie-dir__tagline {
  max-width: 34ch;
  margin: var(--d2-e4) 0 0;
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);   /* 9.03:1 */
}

.d2 .d2-pie-dir__pron {
  display: flex;
  align-items: center;
  gap: var(--d2-e2);
  margin: var(--d2-e3) 0 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);   /* 6.74:1 */
}

/* Tres columnas iguales. Se reparten el 1.6fr del contenedor. */
.d2 .d2-pie-dir__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

/* Los enlaces: el -6px de margen superior compensa el padding del primero,
   para que el bloque siga alineado con el titulo de su columna. Sin esto
   las tres columnas arrancan 6px mas abajo que la marca. */
.d2 .d2-pie-dir__lista {
  margin: -6px 0 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-pie-dir__lista a {
  display: inline-flex;
  padding-block: 6px;               /* 21 + 12 = 33px de alto real */
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);  /* 10.80:1 */
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-dir__lista a:hover {
  color: var(--c-verde-marca);       /* 5.80:1 sobre el fondo: pasa AA */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.d2 .d2-pie-dir__direccion {
  margin: var(--d2-e3) 0 0;
  font-size: .8125rem;
  font-style: normal;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);   /* 6.74:1, no el 4.24:1 de antes */
}

/* --- Franja inferior --- */

.d2 .d2-pie-dir__base { border-top: 1px solid rgba(255, 255, 255, .16); }

.d2 .d2-pie-dir__base-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--d2-e3) var(--d2-e4);
  padding-block: var(--d2-e2);
}

.d2 .d2-pie-dir__legal {
  margin: 0;
  font-size: .75rem;
  color: rgba(255, 255, 255, .62);
}

.d2 .d2-pie-dir__legales {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--d2-e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-pie-dir__legales a {
  display: inline-flex;
  align-items: center;
  gap: var(--d2-e1);
  min-height: 32px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-dir__legales a:hover {
  color: var(--c-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Client Login se separa con una linea: es de otra naturaleza que los dos
   avisos legales --es una puerta, no un documento-- y el separador lo dice
   sin necesidad de otro color. */
.d2 .d2-pie-dir__login {
  padding-left: var(--d2-e4);
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
}


/* ==========================================================================
   OPCION 2 — DESPACHO

   Cambia que se agrupa con que. Arriba, marca y bloque de contacto en dos
   columnas; debajo, el mapa del sitio comprimido en filas.

   El reparto 1fr / 1fr --y no el 1fr/1.6fr de la opcion 1-- es deliberado:
   aqui el contacto no es una columna de servicio, es la mitad del pie.
   ========================================================================== */

.d2 .d2-pie-desp__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(40px, 4.6vw, 56px);
}

.d2 .d2-pie-desp__logo {
  display: block;
  width: 150px;
}

.d2 .d2-pie-desp__tagline {
  max-width: 34ch;
  margin: var(--d2-e4) 0 0;
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.d2 .d2-pie-desp__pron {
  display: flex;
  align-items: center;
  gap: var(--d2-e2);
  margin: var(--d2-e3) 0 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
}

/* --- El bloque de contacto: el protagonista -------------------------- */

/* Las dos fichas no se estiran a la columna entera: medido a 1440px daban
   610px de ancho para un numero de telefono, y la ficha se leia como una
   barra vacia con el dato pegado a la izquierda.

   Con un tope de 34ch la ficha se ajusta al dato mas largo (el correo) y
   las dos siguen midiendo IGUAL entre si, que es lo que pide la geometria
   del contrato: misma altura y mismo ancho en la misma fila. */
.d2 .d2-pie-desp__vias {
  display: grid;
  gap: var(--d2-e2);
  max-width: 34ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fichas con contorno. Es region comun: el marco ata el icono al dato y
   separa "una via de contacto" de "un enlace de navegacion", que es
   justamente la distincion que esta variante quiere hacer.

   Ocupan el ancho de su columna para que las dos midan igual --requisito
   de geometria del contrato-- y no se ajusten al largo del texto, que
   dejaria el correo mucho mas ancho que el telefono. */
.d2 .d2-pie-desp__vias a {
  display: flex;
  align-items: center;
  gap: var(--d2-e2);
  min-height: 52px;
  padding: var(--d2-e2) var(--d2-e3);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--c-blanco);            /* 15.46:1 */
  text-decoration: none;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--d2-radio-sm);
  transition: background-color var(--trans-media),
              border-color var(--trans-media);
}

/* El correo puede ser largo: se parte antes que desbordar la ficha. A
   390px "matthew@getrede.ca" cabe, pero si Erick cambia el dato por uno
   mas largo esto evita el scroll horizontal. */
.d2 .d2-pie-desp__vias a span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.d2 .d2-pie-desp__vias svg {
  flex: none;
  color: var(--c-verde-marca);
}

.d2 .d2-pie-desp__vias a:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(57, 181, 74, .55);
}

.d2 .d2-pie-desp__direccion {
  margin: var(--d2-e3) 0 0;
  font-size: .8125rem;
  font-style: normal;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

/* --- El mapa del sitio, comprimido ------------------------------------
   Dos grupos en dos columnas; dentro de cada uno, los enlaces fluyen en
   fila y saltan de linea solos. Asi los nueve enlaces siguen enteros pero
   ocupan una franja, no media pantalla. */

.d2 .d2-pie-desp__mapa { border-top: 1px solid rgba(255, 255, 255, .16); }

.d2 .d2-pie-desp__mapa .d2-pie-desp__base-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--d2-e4) clamp(24px, 3vw, 48px);
  padding-block: var(--d2-e4);
}

.d2 .d2-pie-desp__grupo .d2-pie-desp__titulo { margin-bottom: var(--d2-e1); }

/* El gap horizontal de 20px hace de separador entre enlaces contiguos:
   sin el, dos enlaces seguidos en la misma linea se leen como uno solo.
   El vertical es 0 porque el padding del propio enlace ya separa. */
.d2 .d2-pie-desp__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-pie-desp__fila a {
  display: inline-flex;
  padding-block: 6px;                /* mismo calculo de 24px que la op.1 */
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-desp__fila a:hover {
  color: var(--c-verde-marca);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Franja inferior (igual reparto que la opcion 1) --- */

.d2 .d2-pie-desp__base { border-top: 1px solid rgba(255, 255, 255, .16); }

.d2 .d2-pie-desp__base .d2-pie-desp__base-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--d2-e3) var(--d2-e4);
  padding-block: var(--d2-e2);
}

.d2 .d2-pie-desp__legal {
  margin: 0;
  font-size: .75rem;
  color: rgba(255, 255, 255, .62);
}

.d2 .d2-pie-desp__legales {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--d2-e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-pie-desp__legales a {
  display: inline-flex;
  align-items: center;
  gap: var(--d2-e1);
  min-height: 32px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-desp__legales a:hover {
  color: var(--c-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.d2 .d2-pie-desp__login {
  padding-left: var(--d2-e4);
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
}


/* ==========================================================================
   OPCION 3 — CIERRE

   Sin columnas. Cuatro franjas apiladas que se leen de arriba abajo:
   marca+tagline / contacto / enlaces / legales.

   El eje de lectura es horizontal en cada franja, no vertical en columnas.
   Por eso los enlaces van en una fila envolvente y la direccion en una
   sola linea: es la misma informacion de la opcion 1 girada 90 grados.

   Aviso sobre el patron: NN/g documenta que los "utility links" --contacto,
   privacidad, acceso-- son el unico grupo que recomienda incluir SIEMPRE en
   el pie, porque es donde el usuario los busca a proposito. Por eso esta
   variante adelgaza el mapa del sitio pero NO toca ese grupo: telefono,
   correo, direccion, legales y Client Login siguen enteros y visibles.
   ("Web Page Footers 101" y "Utility Navigation", NN/g.)
   ========================================================================== */

.d2 .d2-pie-cierre__inner {
  padding-block: clamp(28px, 3.2vw, 40px);
}

/* --- Franja 1: marca y tagline --- */

.d2 .d2-pie-cierre__alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--d2-e4);
}

.d2 .d2-pie-cierre__logo {
  display: block;
  width: 132px;
}

.d2 .d2-pie-cierre__pron {
  display: flex;
  align-items: center;
  gap: var(--d2-e2);
  margin: var(--d2-e2) 0 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
}

.d2 .d2-pie-cierre__tagline {
  flex: 1 1 26ch;
  max-width: 46ch;
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}

/* --- Franja 2: los tres datos de contacto en linea ---------------------
   Telefono y correo son enlaces y crecen a 1rem; la direccion no es
   enlace --no hay a donde ir-- y se queda en el tamano del cuerpo.
   Esa diferencia de tamano es la que dice cual se puede pulsar. */

.d2 .d2-pie-cierre__contacto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--d2-e2) var(--d2-e4);
  margin-top: var(--d2-e4);
  padding-top: var(--d2-e4);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.d2 .d2-pie-cierre__dato {
  display: inline-flex;
  padding-block: 5px;
  font-size: 1rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--c-blanco);
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-cierre__dato:hover {
  color: var(--c-verde-marca);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.d2 .d2-pie-cierre__direccion {
  margin: 0;
  font-size: .8125rem;
  font-style: normal;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
}

/* --- Franja 3: todos los enlaces en fila envolvente --------------------
   El separador es un punto generado por CSS, sin texto: no llega al arbol
   de accesibilidad, asi que el lector de pantalla lee la lista limpia.

   MEDIDO Y CORREGIDO: el punto iba primero en ::before de "li + li", que
   es lo natural de escribir. A 390px la fila envuelve en cuatro lineas y
   CADA LINEA NUEVA ABRIA CON UN PUNTO SUELTO, porque el separador de un
   elemento cae al principio del renglon cuando el elemento salta de linea.

   La solucion es ponerlo DETRAS de cada enlace --::after en todos menos
   el ultimo-- y no delante: asi el punto viaja pegado al enlace anterior
   y al envolver se queda al final del renglon, que es donde no molesta.
   Es un caso en que lo intuitivo falla solo al envolver, por eso se anota. */

.d2 .d2-pie-cierre__nav {
  margin-top: var(--d2-e3);
  padding-top: var(--d2-e3);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.d2 .d2-pie-cierre__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--d2-e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-pie-cierre__enlaces li {
  display: flex;
  align-items: center;
  gap: var(--d2-e3);
}

.d2 .d2-pie-cierre__enlaces li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
}

.d2 .d2-pie-cierre__enlaces a {
  display: inline-flex;
  padding-block: 6px;
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-cierre__enlaces a:hover {
  color: var(--c-verde-marca);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Franja 4: legales --- */

.d2 .d2-pie-cierre__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--d2-e2) var(--d2-e4);
  margin-top: var(--d2-e3);
  padding-top: var(--d2-e3);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.d2 .d2-pie-cierre__legal {
  margin: 0;
  font-size: .75rem;
  color: rgba(255, 255, 255, .62);
}

.d2 .d2-pie-cierre__legales {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--d2-e4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-pie-cierre__legales a {
  display: inline-flex;
  align-items: center;
  gap: var(--d2-e1);
  min-height: 32px;
  font-size: .75rem;
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  transition: color var(--trans-media);
}

.d2 .d2-pie-cierre__legales a:hover {
  color: var(--c-blanco);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.d2 .d2-pie-cierre__login {
  padding-left: var(--d2-e4);
  border-left: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .82);
}


/* ==========================================================================
   EL MARCO DEL CARRUSEL

   La <section> que envuelve el carrusel existe por accesibilidad (apaga los
   tres landmarks contentinfo, ver el comentario del HTML), no por diseno.
   No debe pintar nada ni ocupar nada.
   ========================================================================== */

.d2 .d2-pie-caru-marco {
  display: block;
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   MOVIMIENTO

   El pie NO lleva entrada escalonada, y es una decision, no un olvido.

   Un pie aparece cuando el usuario ya ha llegado al final. Animar la
   entrada de cuatro bloques ahi retrasa justo lo que ha venido a buscar
   --el telefono, el correo, el aviso legal-- y NN/g documenta que esos
   "utility links" son un destino deliberado, no un descubrimiento. Hacerle
   esperar una animacion para leer un numero de telefono es coste sin
   beneficio.

   El contrato ya admite este caso: "Si una variante no gana nada con
   movimiento, se queda quieta", como el triptico y la comparativa de la
   seccion del problema.

   Lo unico que se mueve es el estado al pasar el raton: color y fondo, a
   250ms (--trans-media), dentro del rango .18-.3s que fija el contrato.
   Ningun transform, ninguna sombra, ningun will-change: sobre texto claro
   en fondo oscuro, rasterizar emborrona los palos finos de Open Sans.

   Tampoco hay subrayado permanente: aparece al pasar el raton y al recibir
   foco. El color por si solo no debe ser el unico indicador, pero aqui el
   contexto de lista de navegacion ya identifica los enlaces; el subrayado
   en hover/focus refuerza sin ensuciar la lectura en reposo.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-pie-dir a,
  .d2 .d2-pie-desp a,
  .d2 .d2-pie-cierre a,
  .d2 .d2-pie-desp__vias a,
  .d2 .d2-pie-pron {
    transition: none;
  }
}


/* ==========================================================================
   ADAPTACION

   Tres cortes, los mismos para las tres variantes para que se comparen en
   igualdad. Verificado de 1920 a 390px sin scroll horizontal.
   ========================================================================== */

/* --- Tableta: la marca deja de compartir fila con los enlaces --------- */
@media (max-width: 900px) {

  .d2 .d2-pie-dir__inner,
  .d2 .d2-pie-desp__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--d2-e5);
  }

  /* Las tres columnas de la opcion 1 pasan a dos: a tres, "Energy Gap
     Analysis" parte en tres lineas y la columna se hace mas alta que la
     de la marca. */
  .d2 .d2-pie-dir__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Movil ------------------------------------------------------------ */
@media (max-width: 640px) {

  .d2 .d2-pie-dir__nav,
  .d2 .d2-pie-desp__mapa .d2-pie-desp__base-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Los legales se apilan y el separador vertical del login sobra: en
     columna, una linea a la izquierda no separa nada, solo estorba. */
  .d2 .d2-pie-dir__base-inner,
  .d2 .d2-pie-desp__base .d2-pie-desp__base-inner,
  .d2 .d2-pie-cierre__base {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--d2-e2);
  }

  .d2 .d2-pie-dir__legales,
  .d2 .d2-pie-desp__legales,
  .d2 .d2-pie-cierre__legales {
    gap: var(--d2-e3);
  }

  .d2 .d2-pie-dir__login,
  .d2 .d2-pie-desp__login,
  .d2 .d2-pie-cierre__login {
    padding-left: 0;
    border-left: 0;
  }

  /* En la opcion 3 la direccion baja a su propia linea: en fila con el
     correo, a 390px se parte por la mitad y se lee peor que suelta. */
  .d2 .d2-pie-cierre__contacto { gap: var(--d2-e1) var(--d2-e4); }
  .d2 .d2-pie-cierre__direccion { flex: 1 0 100%; }
}


/* ==========================================================================
   SECCION EQUIPO — TRES VARIANTES

   El titular es "More than engineers.", asi que el eje de las tres es que
   se enseña primero: el rostro, la credencial o la persona que firma.

     1  Ficha    tres retratos iguales, la credencial sobre la foto
     2  Dosier   sin retratos en la lista: manda la credencial en una
                 rejilla legible, con un solo retrato de apoyo
     3  Firma    uno grande --el fundador-- y los demas en miniatura

   Difieren en QUE se enseña primero, no en el acabado.

   Solo hay tres fotos en assets/img/equipo. El marcado y estas reglas
   funcionan con tres; si llega la cuarta, entra sin tocar el CSS porque
   las rejillas son por columnas automaticas, no por numero fijo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Comun a las tres
   -------------------------------------------------------------------------- */

.d2 .d2-equipo-ficha,
.d2 .d2-equipo-dosier,
/* Mismo fondo y misma paleta que la banda verde (7/9/2026): las dos son la
   MISMA seccion y solo cambia la disposicion. Los valores no se reinventan,
   son los de .d2-equipo-banda. */
.d2 .d2-equipo-firma {
  /* position + overflow para el circuito de fondo */
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 5.4vw, 76px);
  /* Verde de marca al 45% sobre negro */
  background: #1A5121;

  /* Los tokens se redefinen AQUI y no se persigue regla por regla: las de
     nombre, cargo y bio se comparten con las otras variantes y van mas
     abajo, asi que ganarian. Cambiando el token, todo lo que lo usa se
     adapta solo. Son los mismos valores que la banda verde. */
  --c-texto: #FFFFFF;
  --c-texto-cuerpo: #B5DBAD;
  --c-texto-suave: #B5DBAD;
  --c-verde-hover: #A4D49B;
  --c-borde: rgba(255, 255, 255, .18);
}

.d2 .d2-equipo-ficha__inner,
.d2 .d2-equipo-dosier__inner,
.d2 .d2-equipo-firma__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .d2-equipo-ficha__intro,
.d2 .d2-equipo-dosier__intro,
.d2 .d2-equipo-firma__intro {
  max-width: 62ch;
  /* Menos aire que las otras variantes (7/9/2026): esta seccion tiene tres
     bloques --intro, destacado y los tres-- y con 44px se estiraba. */
  margin-bottom: clamp(24px, 2.4vw, 32px);
}

.d2 .d2-equipo-ficha__eyebrow,
.d2 .d2-equipo-dosier__eyebrow,
.d2 .d2-equipo-firma__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-equipo-ficha__titulo,
.d2 .d2-equipo-dosier__titulo,
.d2 .d2-equipo-firma__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2 .d2-equipo-ficha__lead,
.d2 .d2-equipo-dosier__lead,
.d2 .d2-equipo-firma__lead {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333);
}

/* --- La firma va sobre verde: estos colores tienen que ir DESPUES de las
   reglas compartidas de arriba, o las pisan y el texto sale oscuro. --- */

.d2 .d2-equipo-firma__titulo {
  color: #FFFFFF;
}

.d2 .d2-equipo-firma__eyebrow,
.d2 .d2-equipo-firma__lead {
  /* Tinta 40% del manual */
  color: #B5DBAD;
}

.d2 .d2-equipo-firma__nombre {
  color: #FFFFFF;
}

.d2 .d2-equipo-firma__cargo {
  color: #A4D49B;
}

.d2 .d2-equipo-firma__cred,
.d2 .d2-equipo-firma__bio {
  color: #B5DBAD;
}

/* El filete que separa el destacado del resto, sobre verde */
.d2 .d2-equipo-firma__resto {
  border-top-color: rgba(255, 255, 255, .18);
}

/* El lead sube al intro y necesita su medida: pegado al titular se leia
   como parte de el, y dentro de la columna de Matthew parecia su bio. */
.d2 .d2-equipo-firma__lead {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
}


/* Las fotos son retratos verticales: la proporcion se declara para que la
   pagina no salte mientras cargan. */
.d2 .d2-equipo-ficha__foto,
.d2 .d2-equipo-firma__foto-grande,
.d2 .d2-equipo-firma__foto-mini {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ==========================================================================
   OPCION 1 — FICHA

   Tres retratos del mismo tamaño. La credencial se apoya sobre la foto:
   ata el rostro a la licencia sin gastar una linea del cuerpo.
   ========================================================================== */

.d2 .d2-equipo-ficha__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-equipo-ficha__persona {
  min-width: 0;
}

.d2 .d2-equipo-ficha__marco {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--d2-radio-md);
  background: var(--d2-relleno);
}

/* La banda de credencial cubre el pie de la foto. El degradado por debajo
   garantiza el contraste sin depender de como sea la imagen. */
.d2 .d2-equipo-ficha__cred {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 26px var(--d2-e3) var(--d2-e2);
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: #fff;
  background: linear-gradient(to top, rgba(14, 42, 18, .92), rgba(14, 42, 18, 0));
}

.d2 .d2-equipo-ficha__nombre {
  margin: var(--d2-e3) 0 2px;
  font-size: 1.0625rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.26;
  color: var(--c-texto);
}

.d2 .d2-equipo-ficha__cargo {
  margin: 0 0 var(--d2-e2);
  font-size: .875rem;
  color: var(--c-verde-hover);   /* 6.41:1 sobre blanco */
}

.d2 .d2-equipo-ficha__bio {
  margin: 0;
  font-size: .875rem;
  line-height: 1.56;
  color: var(--c-texto-cuerpo, #333);
}

/* ==========================================================================
   OPCION 2 — DOSIER

   Aqui NO manda el rostro sino la credencial. La lista es una rejilla de
   tres columnas --nombre, licencia, trayectoria-- que se barre de un
   vistazo, y el unico retrato sirve de apoyo, no de protagonista.

   Es la variante para un comprador institucional que evalua por titulacion
   antes que por simpatia.
   ========================================================================== */

/* La banda es una tira de TRES retratos sobre la lista, no una columna de
   apoyo: son apaisados y anchos, para que el peso lo siga llevando la
   rejilla de credenciales de abajo. Va marcada aria-hidden en el marcado
   porque los nombres ya estan en la lista. */
.d2 .d2-equipo-dosier__banda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Recorte apaisado: un retrato completo aqui competiria con la lista, que
   es lo que esta variante quiere que se lea. */
.d2 .d2-equipo-dosier__retrato {
  display: block;
  width: 100%;
  height: auto;   /* sin esto el atributo height="420" gana al aspect-ratio */
  /* 4/3 en vez de 16/9: apaisado recortaba las caras por la frente y la
     barbilla. El encuadre sube al 18% para dejar aire sobre la cabeza. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 18%;
  border-radius: var(--d2-radio-md);
  background: var(--d2-relleno);
}

.d2 .d2-equipo-dosier__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tres columnas por fila: identidad, credencial y trayectoria. Se lee por
   columna --todas las licencias juntas-- que es lo que permite comparar. */
.d2 .d2-equipo-dosier__fila {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, .6fr) minmax(0, 1.4fr);
  gap: clamp(14px, 1.8vw, 26px);
  align-items: start;
  padding-block: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(2, 51, 0, .1);
}

.d2 .d2-equipo-dosier__fila:first-child {
  border-top: 1px solid rgba(2, 51, 0, .1);
}

.d2 .d2-equipo-dosier__id { min-width: 0; }

.d2 .d2-equipo-dosier__nombre {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.26;
  color: var(--c-texto);
}

.d2 .d2-equipo-dosier__cargo {
  margin: 0;
  font-size: .8125rem;
  color: var(--c-texto-suave);
}

/* La credencial en verde oscuro: es el dato que esta variante destaca */
.d2 .d2-equipo-dosier__cred {
  margin: 0;
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  line-height: 1.4;
  color: var(--c-verde-hover);
}

.d2 .d2-equipo-dosier__bio {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--c-texto-cuerpo, #333);
}

/* ==========================================================================
   OPCION 3 — FIRMA

   Uno grande y los demas en miniatura. El titular dice "More than
   engineers": esta variante lo cuenta enseñando a quien firma la empresa y
   dejando al equipo alrededor.

   Es la unica de las tres con jerarquia interna: cambia quien es el
   protagonista, no como se ordenan los iguales.
   ========================================================================== */

.d2 .d2-equipo-firma__cuerpo {
  display: grid;
  gap: clamp(22px, 2.4vw, 32px);
}

.d2 .d2-equipo-firma__principal {
  display: grid;
  /* Columna con tope (7/9/2026): con .42fr la foto llegaba a 344px de alto
     y la seccion media 1060px contra los 695px de la banda verde. La cara
     se reconoce igual a 240px y la seccion deja de descolgarse. */
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: clamp(22px, 2.8vw, 40px);
  align-items: center;
}

/* El retrato es un <img> directo dentro de la rejilla, no va envuelto:
   una version anterior lo estilaba como contenedor y quedaba sin recorte. */
.d2 .d2-equipo-firma__foto-grande {
  width: 100%;
  /* Circular (7/9/2026): las cuatro caras se presentan igual. Con 3/4 la
     principal era un rectangulo y las otras tres circulos, y la seccion se
     leia como dos bloques distintos en vez de un equipo. */
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  background: var(--d2-relleno);
}

/* Las siglas de cada persona. Mismo tratamiento que el cargo pero en la
   tinta suave: se leen como dato, no compiten con el nombre. */
.d2 .d2-equipo-firma__cred {
  margin: 2px 0 0;
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  line-height: 1.3;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-equipo-firma__nombre--grande {
  margin: 0 0 2px;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2 .d2-equipo-firma__cargo {
  margin: 0 0 var(--d2-e2);
  font-size: .9375rem;
  color: var(--c-verde-hover);
}

.d2 .d2-equipo-firma__bio {
  margin: 0;
  /* Medida de lectura (7/9/2026): sin tope la bio se estiraba a 920px, unos
     107 caracteres por linea. Lo comodo son 65-75; a partir de ahi el ojo
     pierde el salto de linea. Es la misma razon por la que el lead lleva
     62ch. */
  max-width: 72ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--c-texto-cuerpo, #333);
}

/* Es un <ul> de seis credenciales, no un parrafo: una version anterior lo
   estilaba como texto y los <li> caian apilados en vertical, con vista de
   lista suelta al pie de la seccion.

   Van en fila, como pastillas: son el respaldo colectivo del equipo, no
   una enumeracion que haya que recorrer. */
.d2 .d2-equipo-firma__credenciales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--d2-e1) var(--d2-e2);
  margin: clamp(20px, 2.6vw, 30px) 0 0;
  padding: clamp(16px, 2vw, 22px) 0 0;
  border-top: 1px solid rgba(2, 51, 0, .1);
  list-style: none;
}

.d2 .d2-equipo-firma__credenciales li {
  padding: 5px var(--d2-e2);
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--c-verde-hover);
  background: var(--d2-relleno);
  border-radius: var(--d2-radio-full);
}

/* El resto del equipo: fila de miniaturas bajo el principal */
.d2 .d2-equipo-firma__resto {
  display: grid;
  /* Los tres en UNA fila (7/9/2026). Sin bios --Enrique no tiene y no se
     inventa-- caben de sobra, y en una sola linea las tres personas pesan
     igual en vez de quedar una descolgada en un segundo renglon. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
  align-items: start;
  margin: 0;
  padding-top: clamp(22px, 2.4vw, 30px);
  /* Claro, no oscuro: sobre el verde el filete de #023300 no se veia */
  border-top: 1px solid rgba(255, 255, 255, .18);
  list-style: none;
}

/* Dos columnas antes de apilar (7/9/2026): en una sola la seccion se iba a
   1567px en movil. Con la foto a 124px caben dos de sobra, y solo por debajo
   de 480px se pasa a una. */
@media (max-width: 900px) {
  .d2 .d2-equipo-firma__resto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 28px);
  }
}

@media (max-width: 640px) {
  .d2 .d2-equipo-firma__resto {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cuatro elementos --foto, nombre, cargo y bio-- en dos columnas. Sin
   areas explicitas el cargo y la bio caian bajo la foto, en una columna de
   64px, y el texto se rompia letra a letra. */
.d2 .d2-equipo-firma__mini {
  /* Foto a la izquierda y texto a la derecha (7/9/2026): es LA MISMA
     estructura que el destacado de Matthew, a menor escala. Con la foto
     arriba y el texto centrado la seccion tenia dos patrones distintos, y
     ademas las fotos se centraban en su columna: el titulo, el lead y la
     foto de Matthew arrancaban en 120px y la de Marco en 247px, con el
     borde izquierdo roto. Asi todo cuelga del mismo eje. */
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--d2-e3);
  align-items: center;
  text-align: left;
}

.d2 .d2-equipo-firma__mini .d2-equipo-firma__cargo {
  margin: 0;
  font-size: .875rem;
}

.d2 .d2-equipo-firma__mini .d2-equipo-firma__bio {
  grid-area: bio;
  margin-top: var(--d2-e2);
  font-size: .875rem;
}

.d2 .d2-equipo-firma__mini .d2-equipo-firma__foto-mini {
  /* De 64px a un retrato de verdad (7/9/2026): al quitar las bios sobra
     sitio y las caras son lo que se quiere ver. Mismo anillo y misma
     transicion que la banda verde: 420ms, curva simetrica. */
  width: 88px;
  height: 88px;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: var(--d2-relleno);
  box-shadow: 0 0 0 2px rgba(176, 225, 183, .5);
  transition: box-shadow .42s cubic-bezier(.4, 0, .2, 1),
              transform .42s cubic-bezier(.4, 0, .2, 1);
}

/* Al apuntar, el anillo se enciende y la foto sube. Igual que en la banda. */
.d2 .d2-equipo-firma__mini:hover .d2-equipo-firma__foto-mini,
.d2 .d2-equipo-firma__principal:hover .d2-equipo-firma__foto-grande {
  box-shadow: 0 0 0 3px var(--c-verde-marca, #39B54A),
              0 0 0 9px rgba(57, 181, 74, .18);
  transform: translateY(-3px);
}

/* El retrato grande comparte el mismo anillo y la misma transicion */
.d2 .d2-equipo-firma__foto-grande {
  box-shadow: 0 0 0 2px rgba(176, 225, 183, .5);
  transition: box-shadow .42s cubic-bezier(.4, 0, .2, 1),
              transform .42s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .d2 :is(.d2-equipo-firma__foto-mini, .d2-equipo-firma__foto-grande) {
    transition: none;
  }

  .d2 .d2-equipo-firma__mini:hover .d2-equipo-firma__foto-mini,
  .d2 .d2-equipo-firma__principal:hover .d2-equipo-firma__foto-grande {
    transform: none;
  }
}

/* --- El circuito de fondo, mismo lenguaje que la banda verde --- */

.d2 .d2-equipo-firma__circuito {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

.d2 .d2-equipo-firma__circuito path {
  fill: none;
  stroke: rgba(176, 225, 183, .28);
  stroke-width: 1.2px;
}

.d2 .d2-equipo-firma__circuito circle {
  /* El mismo verde del fondo: los nodos del circuito lo tapan */
  fill: #1A5121;
  stroke: rgba(176, 225, 183, .45);
  stroke-width: 1.6px;
}

/* El contenido va por encima del circuito */
.d2 .d2-equipo-firma__inner {
  position: relative;
  z-index: 1;
}

.d2 .d2-equipo-firma__mini .d2-equipo-firma__nombre {
  margin: 0;
  font-size: .9375rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.25;
  color: var(--c-texto);
}

/* ==========================================================================
   ENTRADA

   Una pasada al aparecer y despues quietas. Las tres llevan solo esto: un
   equipo no gana nada con movimiento continuo, y los rostros en movimiento
   se leen peor.
   ========================================================================== */

@keyframes d2-equipo-entra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.d2 .d2-equipo-ficha__intro,
.d2 .d2-equipo-ficha__persona,
.d2 .d2-equipo-dosier__intro,
.d2 .d2-equipo-dosier__banda,
.d2 .d2-equipo-firma__intro,
.d2 .d2-equipo-firma__principal,
.d2 .d2-equipo-firma__resto {
  animation: d2-equipo-entra .55s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .d2-equipo-ficha__persona:nth-child(1) { animation-delay: .06s; }
.d2 .d2-equipo-ficha__persona:nth-child(2) { animation-delay: .13s; }
.d2 .d2-equipo-ficha__persona:nth-child(3) { animation-delay: .20s; }
.d2 .d2-equipo-ficha__persona:nth-child(4) { animation-delay: .27s; }

.d2 .d2-equipo-dosier__banda { animation-delay: .08s; }
.d2 .d2-equipo-firma__principal { animation-delay: .08s; }
.d2 .d2-equipo-firma__resto { animation-delay: .16s; }

/* El retrato responde al raton con el mismo gesto que las tarjetas del
   resto de la pagina: sube 2px, sin sombra ni escala. */
.d2 .d2-equipo-ficha__marco,
.d2 .d2-equipo-dosier__retrato {
  transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}

@media (hover: hover) {
  .d2 .d2-equipo-ficha__persona:hover .d2-equipo-ficha__marco {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-equipo-ficha__intro,
  .d2 .d2-equipo-ficha__persona,
  .d2 .d2-equipo-ficha__marco,
  .d2 .d2-equipo-dosier__intro,
  .d2 .d2-equipo-dosier__banda,
  .d2 .d2-equipo-dosier__retrato,
  .d2 .d2-equipo-firma__intro,
  .d2 .d2-equipo-firma__principal,
  .d2 .d2-equipo-firma__resto {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  /* El dosier pierde el retrato de apoyo: en una columna compite con la
     lista, que es lo que esta variante quiere que se lea. */
  .d2 .d2-equipo-dosier__banda { grid-template-columns: 1fr; }
  .d2 .d2-equipo-dosier__retrato { display: none; }

  /* La rejilla de tres columnas se apila: a este ancho, comparar licencias
     en columna ya no es posible y partirlas empeora la lectura. */
  .d2 .d2-equipo-dosier__fila {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .d2 .d2-equipo-firma__principal { grid-template-columns: 1fr; }

  /* El ancho bajaba a 200 pero el alto se quedaba en los 350 del
     original: la foto salia rectangular dentro de un circulo y la mitad
     derecha quedaba vacia. El aspect-ratio la cuadra, como ya hacen las
     miniaturas.

     Alcanza tambien a la foto de aficion, que lleva las mismas clases
     pero cuelga del envoltorio .d2-equipo-retrato. */
  .d2 .d2-equipo-firma__principal .d2-equipo-retrato,
  .d2 .d2-equipo-firma__foto-grande {
    max-width: 200px;
    aspect-ratio: 1;
    height: auto;
  }

  /* Las miniaturas, algo mayores. 88 px es el tamano de escritorio y en
     un movil ese circulo se queda pequeno respecto al ancho de la
     pantalla: las caras no se distinguen.

     El tamano lo manda el ENVOLTORIO: las dos fotos de dentro --la base
     y la de aficion-- lo siguen solas. Poner solo `width` en la imagen
     no valia: una regla anterior mas especifica fija los 88 y salian
     88x108. */
  /* La columna de la rejilla sigue a la foto: reservaba los 88 px de
     escritorio y el nombre se montaba encima. */
  .d2 .d2-equipo-firma__mini { grid-template-columns: 108px 1fr; }

  .d2 .d2-equipo-firma__mini picture,
  .d2 .d2-equipo-firma__mini .d2-equipo-retrato,
  .d2 .d2-equipo-firma__mini .d2-equipo-firma__foto-mini,
  .d2 .d2-equipo-firma .d2-equipo-firma__foto-mini {
    width: 108px;
    height: 108px;
    aspect-ratio: 1;
  }
}

@media (max-width: 640px) {
  .d2 .d2-equipo-ficha__lista { grid-template-columns: 1fr; }
  .d2 .d2-equipo-ficha__marco { max-width: 300px; }
}


/* ==========================================================================
   SECCION RESEÑAS — DOS VARIANTES

     1  Tres a la vez   las tres citas en paralelo, sin controles
     2  Editorial       el componente que pidio el cliente

   La 2 reproduce un componente React con Tailwind. Aqui no hay compilacion,
   asi que las clases de utilidad se traducen a reglas con los tokens de
   esta web: el equivalente de `text-foreground/10` es nuestro verde oscuro
   al 10%, y el de `text-muted-foreground` es --c-texto-suave.
   ========================================================================== */

/* Titular solo para lectores de pantalla: la variante editorial no lleva
   encabezado visible --el componente original tampoco-- pero la seccion
   necesita uno para no romper el esquema de la pagina. */
.d2 .u-oculto-visual {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Comun
   -------------------------------------------------------------------------- */

.d2 .d2-res-tres,
.d2 .d2-res-ed {
  padding-block: clamp(48px, 5.4vw, 76px);
  background: var(--d2-tinta);
  border-block: 1px solid rgba(2, 51, 0, .07);
}

.d2 .d2-res-tres__inner,
.d2 .d2-res-ed__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

/* ==========================================================================
   OPCION 1 — TRES A LA VEZ

   Tres citas cortas caben en paralelo, y mostrarlas cuesta menos que
   esconderlas tras un control que hay que descubrir y pulsar.
   ========================================================================== */

.d2 .d2-res-tres__intro {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.4vw, 42px);
}

.d2 .d2-res-tres__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-res-tres__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2 .d2-res-tres__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada cita en su tarjeta blanca: el contorno agrupa la voz con su firma,
   que es lo que hace que la atribucion se lea como parte de la cita. */
.d2 .d2-res-tres__item {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--c-blanco, #fff);
  border: 1px solid rgba(2, 51, 0, .08);
  border-radius: var(--d2-radio-md);
}

.d2 .d2-res-tres__cita {
  flex: 1;
  margin: 0 0 var(--d2-e4);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--c-texto-cuerpo, #333);
}

.d2 .d2-res-tres__pie {
  display: flex;
  align-items: center;
  gap: var(--d2-e3);
  padding-top: var(--d2-e3);
  border-top: 1px solid rgba(2, 51, 0, .08);
}

/* El logo apagado: acompaña a la firma, no compite con la cita */
.d2 .d2-res-tres__logo {
  flex: none;
  width: auto;
  max-width: 74px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
  opacity: .5;
  filter: grayscale(100%);
  transition: opacity var(--d2-normal) ease, filter var(--d2-normal) ease;
}

.d2 .d2-res-tres__item:hover .d2-res-tres__logo {
  opacity: 1;
  filter: grayscale(0);
}

.d2 .d2-res-tres__nombre {
  margin: 0;
  font-size: .875rem;
  font-weight: var(--fw-extrabold);
  line-height: 1.3;
  color: var(--c-texto);
}

.d2 .d2-res-tres__org {
  margin: 1px 0 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--c-texto-suave);
}

/* ==========================================================================
   OPCION 2 — EDITORIAL

   El componente del cliente. Las equivalencias con el original:

     text-[120px] font-light          -> el numeral, peso 300
     text-foreground/10               -> verde oscuro al 10%
     text-2xl md:text-3xl font-light  -> la cita, peso 300 y trazo fino
     grayscale group-hover:grayscale-0-> el logo toma color al pasar
     ring-2 ring-foreground/10        -> el aro del marco
     h-px w-12 / w-6                  -> las lineas del selector
     tracking-widest uppercase        -> el contador 01 / 03
   ========================================================================== */

.d2 .d2-res-ed__inner {
  max-width: 760px;   /* el original va estrecho: max-w-2xl */
}

/* Sin el numeral gigante la fila ya no reparte: el cuerpo ocupa el ancho
   completo y el texto respira. Se conserva el flex por si vuelve algo a su
   izquierda. */
.d2 .d2-res-ed__fila {
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.6vw, 34px);
}

.d2 .d2-res-ed__cuerpo { flex: 1 1 auto; min-width: 0; }

/* El numeral gigante. Peso ligero y casi transparente: es textura, no
   informacion --el contador de abajo es quien lo dice--, por eso va
   marcado aria-hidden en el marcado.

   font-variant-numeric: tabular-nums es el equivalente del
   fontFeatureSettings:'tnum' del original: sin el, el 1 es mas estrecho
   que el 2 y el numeral bailaria al cambiar de cita. */
.d2 .d2-res-ed__num {
  flex: none;
  font-size: clamp(64px, 9vw, 120px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(14, 42, 18, .12);
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: color .5s cubic-bezier(.32, .72, 0, 1);
}

.d2 .d2-res-ed__cuerpo {
  flex: 1;
  min-width: 0;
  padding-top: clamp(6px, 1vw, 16px);
}

/* La cita: grande y de trazo FINO. Es lo que le da el aire editorial --una
   cita en negrita se lee como un titular, no como una voz. */
.d2 .d2-res-ed__cita {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--c-texto);
}

.d2 .d2-res-ed__autor {
  display: flex;
  align-items: center;
  gap: var(--d2-e3);
  margin-top: clamp(24px, 3vw, 40px);
}

/* El marco redondo del retrato del original. Aqui contiene el logo del
   distrito, que en este hueco dice mas que una foto: el lector reconoce el
   suyo. */
.d2 .d2-res-ed__marco {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 9px;
  overflow: hidden;
  background: var(--c-blanco, #fff);
  border-radius: var(--d2-radio-full);
  box-shadow: inset 0 0 0 2px rgba(14, 42, 18, .12);
  transition: box-shadow .3s cubic-bezier(.32, .72, 0, 1);
}

.d2 .d2-res-ed__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .72;
  transition: filter .5s cubic-bezier(.32, .72, 0, 1),
              opacity .5s cubic-bezier(.32, .72, 0, 1);
}

/* El group-hover del original: el aro se marca y el logo toma color */
.d2 .d2-res-ed__autor:hover .d2-res-ed__marco {
  box-shadow: inset 0 0 0 2px rgba(14, 42, 18, .3);
}

.d2 .d2-res-ed__autor:hover .d2-res-ed__logo {
  filter: grayscale(0);
  opacity: 1;
}

.d2 .d2-res-ed__nombre {
  display: block;
  font-size: .9375rem;
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--c-texto);
}

.d2 .d2-res-ed__meta {
  display: block;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--c-texto-suave);
}

.d2 .d2-res-ed__barra {
  margin-inline: 8px;
  color: rgba(14, 42, 18, .25);
}

.d2 .d2-res-ed__org {
  transition: color .3s ease;
}

.d2 .d2-res-ed__autor:hover .d2-res-ed__org {
  color: var(--c-texto);
}

/* --------------------------------------------------------------------------
   El cruce

   Sale desplazandose a la derecha, se cambia el texto sin que se vea, y
   entra desde la izquierda. Los 300ms del original.
   -------------------------------------------------------------------------- */

.d2 .d2-res-ed__cita,
.d2 .d2-res-ed__autor {
  transition: opacity .3s ease, transform .3s ease;
}

.d2 .d2-res-ed__autor { transition-delay: .1s; }

.d2 [data-res-ed].esta-cambiando .d2-res-ed__cita {
  opacity: 0;
  transform: translateX(16px);
}

.d2 [data-res-ed].esta-cambiando .d2-res-ed__autor {
  opacity: 0;
}

/* El estado de partida de la entrada, sin transicion para que se aplique
   de golpe y el recorrido se vea entero */
.d2 [data-res-ed].esta-entrando .d2-res-ed__cita {
  opacity: 0;
  transform: translateX(-16px);
  transition: none;
}

.d2 [data-res-ed].esta-entrando .d2-res-ed__autor {
  opacity: 0;
  transition: none;
}

/* --------------------------------------------------------------------------
   Los mandos
   -------------------------------------------------------------------------- */

.d2 .d2-res-ed__mandos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--d2-e3);
  margin-top: clamp(36px, 4.4vw, 64px);
}

.d2 .d2-res-ed__izq {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}

.d2 .d2-res-ed__lineas {
  display: flex;
  align-items: center;
  gap: var(--d2-e2);
}

/* Las lineas del original. El area de pulsacion es de 44px de alto aunque
   el trazo mida 1px: un objetivo tactil de un pixel seria inalcanzable
   (WCAG 2.5.8 pide 24x24 como minimo). */
.d2 .d2-res-ed__linea {
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.d2 .d2-res-ed__linea span {
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(14, 42, 18, .25);
  transition: width .5s cubic-bezier(.16, 1, .3, 1),
              background-color .5s cubic-bezier(.16, 1, .3, 1);
}

.d2 .d2-res-ed__linea:hover span {
  width: 32px;
  background: rgba(14, 42, 18, .45);
}

/* La activa se alarga al doble y se pinta solida: es el gesto que define
   al componente. */
.d2 .d2-res-ed__linea.es-activa span {
  width: 48px;
  background: var(--c-texto);
}

.d2 .d2-res-ed__linea:focus-visible {
  outline: 2px solid var(--c-verde);
  outline-offset: 2px;
  border-radius: 4px;
}

.d2 .d2-res-ed__contador {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
  font-variant-numeric: tabular-nums;
}

.d2 .d2-res-ed__flechas {
  display: flex;
  align-items: center;
  gap: 4px;
}

.d2 .d2-res-ed__flecha {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--d2-radio-full);
  background: none;
  color: rgba(14, 42, 18, .45);
  cursor: pointer;
  transition: color .3s ease, background-color .3s ease;
}

.d2 .d2-res-ed__flecha:hover {
  color: var(--c-texto);
  background: rgba(14, 42, 18, .06);
}

.d2 .d2-res-ed__flecha:focus-visible {
  outline: 2px solid var(--c-verde);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sin movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-res-ed__cita,
  .d2 .d2-res-ed__autor,
  .d2 .d2-res-ed__num,
  .d2 .d2-res-ed__logo,
  .d2 .d2-res-ed__marco,
  .d2 .d2-res-ed__linea span,
  .d2 .d2-res-ed__flecha,
  .d2 .d2-res-tres__logo {
    transition: none;
  }

  .d2 [data-res-ed].esta-cambiando .d2-res-ed__cita,
  .d2 [data-res-ed].esta-cambiando .d2-res-ed__autor,
  .d2 [data-res-ed].esta-entrando .d2-res-ed__cita,
  .d2 [data-res-ed].esta-entrando .d2-res-ed__autor {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  /* El numeral pasa encima: al lado se come el ancho de la cita, que es lo
     que hay que leer. */
  .d2 .d2-res-ed__fila {
    flex-direction: column;
    gap: var(--d2-e2);
  }

  .d2 .d2-res-ed__cuerpo { padding-top: 0; }

  .d2 .d2-res-ed__mandos {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--d2-e2);
  }
}


/* --------------------------------------------------------------------------
   LA CABECERA DE LA VARIANTE EDITORIAL

   El componente original no llevaba titulo: vivia suelto en una pagina de
   demostracion. Aqui es una seccion mas de la home y necesita presentarse,
   como el resto.

   Va alineada con la cita, no centrada: el bloque entero se lee por la
   izquierda y centrar la cabecera romperia esa columna.
   -------------------------------------------------------------------------- */

/* La cabecera va al MISMO EJE que la cita, no centrada.

   Antes iba centrada mientras la cita, la firma y los mandos se alineaban
   a la izquierda: dos ejes de lectura en la misma seccion. Los margenes
   eran simetricos --380px a cada lado, medido-- pero la mezcla se percibia
   como desequilibrio.

   Se alinea a la izquierda y no al reves por tres motivos: la cita mide
   cuatro lineas y centrada cuesta mas de leer; la firma con logo flota sin
   apoyo si se centra; y esta variante se llama editorial precisamente por
   el eje unico. Ademas, centrarla la acercaria demasiado a la opcion 3,
   que ya es la centrada. */
.d2 .d2-res-ed__cabecera {
  /* Alineada a la izquierda, pero DENTRO del contenedor.

     Al quitar margin-inline: auto se fue al borde de la ventana, porque
     la cabecera cuelga del inner mientras la cita vive en __fila, que si
     respeta el ancho. El max-width la mantiene en el mismo eje que el
     resto sin empujarla al filo. */
  /* La cabecera es hermana de section, FUERA del __inner que da el ancho
     y el margen lateral. Antes se centraba con margin auto y eso disimulaba
     que no tenia contenedor; al alinearla a la izquierda se fue al filo de
     la ventana. Aqui se le da el mismo ancho y el mismo padding que al
     inner, asi cae en el mismo eje que la cita. */
  max-width: 52ch;
  margin-bottom: clamp(30px, 3.6vw, 48px);
  text-align: left;
}


.d2 .d2-res-ed__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-res-ed__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

/* El subtitulo en peso ligero, como la cita: es la voz de la seccion, no
   otro titular compitiendo con el de arriba. */
.d2 .d2-res-ed__sub {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-texto-cuerpo, #333);
}


/* --------------------------------------------------------------------------
   CLIENT LOGIN: ENLACE, NO BOTON

   El marcado le pone `d2-btn d2-btn--linea`, que trae fondo blanco, borde,
   radio de pastilla y, al pasar el raton, elevacion de 2px con sombra
   alta. Sobre el header eso dibujaba un recuadro blanco que sobresalia por
   debajo de la barra.

   Aqui se comporta como Solutions, About y Contact: texto que cambia de
   color, nada mas. Se anulan las tres capas --el .d2-btn base, la variante
   --linea y su hover-- porque cualquiera que quede reintroduce el recuadro.

   Va al final de la hoja y sin media query para ganar por orden a las
   reglas del boton, que estan mas arriba.
   -------------------------------------------------------------------------- */

.d2 .header__actions .header__login-btn,
.d2 .header__actions .header__login-btn:hover,
.d2 .header__actions .header__login-btn:focus-visible,
.d2 .header__actions .header__login-btn:active {
  min-height: 0;
  background: none;
  border: 0;
  border-left: 1px solid var(--c-borde);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.d2 .header__actions .header__login-btn {
  padding: 0 0 0 var(--sp-5);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--c-texto-cuerpo);
  transition: color var(--trans-rapida);
}

/* El mismo verde que usan los enlaces de la nav al pasar el raton */
.d2 .header__actions .header__login-btn:hover,
.d2 .header__actions .header__login-btn:focus-visible {
  color: var(--c-verde);
}

.d2 .header__actions .header__login-btn:hover svg,
.d2 .header__actions .header__login-btn:focus-visible svg {
  opacity: 1;
}


/* --------------------------------------------------------------------------
   EL PUENTE DEL DESPLEGABLE

   El panel se coloca 12px por debajo del boton. Al bajar el raton hacia el
   cruza esos 12px sin estar sobre ninguno de los dos, y el cierre por hover
   se disparaba a mitad de camino.

   Esta franja invisible tapa el hueco, asi que el recorrido del raton nunca
   sale de una zona vigilada. Va como ::before del propio panel: no añade un
   nodo al arbol y no existe para los lectores de pantalla.
   -------------------------------------------------------------------------- */

.d2 .nav__item--has-drop .nav__drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;   /* los 12px del hueco, con dos de margen */
}


/* ==========================================================================
   EL MEGA MENU: EL DESTACADO CAMBIA CON CADA SERVICIO

   El desplegable conserva su forma: enlaces a la izquierda, el recuadro
   con la imagen y la cifra a la derecha. Lo unico que cambia es que al
   apuntar cada enlace, ese recuadro muestra la imagen, la cifra y el texto
   de ese servicio.

   Se desvanece el bloque ENTERO y no solo la imagen: la cifra y el texto
   tambien cambian, y saltarian de golpe mientras la foto se funde.
   ========================================================================== */

.d2 .nav__drop__destacado {
  transition: opacity .16s ease;
}

.d2 .nav__drop__destacado.esta-cambiando {
  opacity: 0;
}

/* El enlace apuntado se marca: sin esto, con el raton sobre el recuadro no
   se sabe de que servicio es lo que se esta viendo. */
.d2 .nav__drop__lista a.es-activo {
  background: var(--d2-superficie-suave);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .nav__drop__destacado { transition: none; }
}


/* ==========================================================================
   LOS BOTONES CON EL VERDE DE MARCA

   Manual de identidad, pagina 8: el verde de Rede es #39B54A. Con texto
   blanco encima da 2.66:1, muy por debajo del minimo de 4.5:1.

   La salida no es cambiar el verde --seria salirse del manual otra vez--
   sino cambiar lo que va ENCIMA. El propio manual llama al gris "color de
   apoyo fuerte", asi que la combinacion es la que propone la marca:

     reposo  verde #39B54A + texto gris #333333 ....... 4.74:1
     hover   verde #2A8438 + texto blanco ............. 4.71:1

   En hover el verde se oscurece, y ahi el blanco si funciona. El cambio de
   color del texto acompaña al del fondo, asi que se lee como un solo gesto.
   ========================================================================== */

.d2 .d2-btn--solido,
.d2 .btn--primary,
.d2 .d2-btn--principal {
  background: var(--c-verde);
  color: var(--c-sobre-verde);
}

.d2 .d2-btn--solido:hover,
.d2 .d2-btn--solido:focus-visible,
.d2 .btn--primary:hover,
.d2 .btn--primary:focus-visible,
.d2 .d2-btn--principal:hover,
.d2 .d2-btn--principal:focus-visible {
  background: var(--c-verde-hover);
  color: #fff;
}

/* La flecha del boton acompaña al texto en los dos estados */
.d2 .d2-btn--solido svg,
.d2 .btn--primary svg,
.d2 .d2-btn--principal svg {
  color: currentColor;
}

/* El boton de contorno: el verde de marca no llega como TEXTO sobre blanco
   (2.66:1), asi que su etiqueta usa el verde oscuro. */
.d2 .d2-btn--linea {
  color: var(--c-verde-hover);
  border-color: var(--c-verde);
}

.d2 .d2-btn--linea:hover,
.d2 .d2-btn--linea:focus-visible {
  background: var(--c-verde-hover);
  color: #fff;
  border-color: var(--c-verde-hover);
}


/* ==========================================================================
   EL SELECTOR DE FONDO

   CORRECCION: aqui decia que #F2F9F2 "no sale del manual". Es FALSO, y
   conviene dejarlo escrito para que nadie repita el error. Medido: es el
   verde de marca #39B54A al 7% sobre blanco --diferencia de 2 sobre 765
   puntos posibles--, asi que es tan valido como cualquier otra opacidad
   de la escala. Se usa como relleno de tarjetas en toda la web y esta
   bien usado.

   Lo que si era discutible es otra cosa: que ONCE SECCIONES enteras
   compartieran ese mismo tono de fondo. No por el color, sino porque
   entonces el fondo no distinguia nada.

   El fondo tenue de once secciones era #F2F9F2, un verde palido
   del manual. Esta barra permite comparar las alternativas que si salen de
   el y quedarse con una.

   Es la misma barra que la de las variantes --mismo aspecto y mismo
   comportamiento-- pero anclada abajo a la izquierda, para que no compita
   con los mandos de seccion que van a la derecha.
   ========================================================================== */

.d2-fondos {
  position: fixed;
  left: var(--d2-gutter);
  bottom: 20px;
  right: auto;
  top: auto;
  z-index: 60;
  transform: none;
}

/* Minimizada se pliega hacia la IZQUIERDA, que es su borde */
.d2-fondos.esta-minimizado {
  width: 34px;
  padding-inline: 4px;
  transform: translateX(calc(-1 * var(--d2-gutter) - 15px));
  border-radius: 0 999px 999px 0;
}

.d2-fondos.esta-minimizado:hover {
  transform: translateX(calc(-1 * var(--d2-gutter) - 9px));
}

.d2-fondos.esta-minimizado .d2-caru__ocultar {
  margin-right: 0;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 0;
  background: var(--c-verde);
  color: var(--c-sobre-verde);
  border-radius: 0 999px 999px 0;
}

/* La equis se convierte en cruz al minimizar, como en los otros mandos */
.d2-fondos.esta-minimizado .d2-caru__ocultar svg {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   EL FONDO OSCURO INVIERTE EL TEXTO

   Con las tres opciones claras el texto gris de siempre funciona. Sobre el
   verde oscuro da 1.22:1 y seria ilegible, asi que todo el texto de esas
   secciones pasa a claro.

   Se marca en el <html>, asi que basta una regla por familia en vez de
   repetirla en las once secciones.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   LO QUE VIVE DENTRO DE LAS SECCIONES TINTADAS

   No basta con invertir el texto: dentro hay tarjetas blancas, campos de
   formulario y logos que sobre oscuro quedarian como parches de luz o
   desaparecerian del todo.

   Se resuelve por familias en vez de elemento a elemento, para que una
   seccion nueva herede el tratamiento sin tocar nada.
   -------------------------------------------------------------------------- */

/* Alias corto: todas las secciones que llevan el fondo tintado */

/* Las superficies claras se oscurecen. El selector busca el FONDO blanco,
   no cada clase: asi cubre las tarjetas que existan y las que vengan. */

/* Texto de apoyo con color fijo: legales, etiquetas, notas. Van al gris
   claro de la escala, que sobre el verde oscuro da 9.9:1. */

/* La calculadora no entra en el modo oscuro: su panel interior ya es
   oscuro y oscurecer tambien su seccion dejaba capas encontradas. */





@media (prefers-reduced-motion: reduce) {
  .d2-fondos,
  .d2-fondos .d2-caru__ocultar svg { transition: none; }
}

/* En pantallas estrechas la barra se centra abajo: a los lados no cabe */
@media (max-width: 900px) {
  .d2-fondos {
    left: 50%;
    transform: translateX(-50%);
  }

  .d2-fondos.esta-minimizado,
  .d2-fondos.esta-minimizado:hover {
    transform: translateX(-50%);
    width: auto;
    padding-inline: 5px;
    border-radius: 999px;
  }
}


/* El relleno de tarjetas y enlaces que viven dentro de secciones CLARAS.
   Antes usaban --d2-tinta y se oscurecian con el selector de fondo, aunque
   su seccion siguiera siendo blanca: el texto quedaba ilegible. */
.d2 {
  --d2-superficie-suave: #F2F9F2;
}

/* ==========================================================================
   LOS FONDOS DE SECCION

   El selector cambia UNICAMENTE el color de fondo de las secciones
   tintadas. Nada de lo que vive dentro --tarjetas, botones, graficos-- se
   toca: cada pieza conserva el color que su propio diseño le dio.

   Un intento anterior repintaba tambien el interior: 82 reglas que
   acababan poniendo tarjetas blancas sobre fondo oscuro con el texto
   ilegible, y recuadros donde no debia haberlos. El problema no era el
   color elegido sino el alcance.

   Solo hay dos excepciones, y ambas son necesarias:

     1. El TEXTO SUELTO de la seccion --el que va directamente sobre el
        fondo, sin tarjeta-- tiene que invertirse o desaparece.
     2. Los LOGOS de cliente son marcas grises: sobre oscuro se pierden.

   Todo lo que esta dentro de una tarjeta se queda como esta, porque la
   tarjeta le da su propio fondo.
   ========================================================================== */

/* --- Las opciones claras: solo cambia el fondo, nada mas --- */

/* (no hace falta regla: el token --d2-tinta que fija el JS ya lo hace) */

/* --- La opcion oscura --- */

/* El texto que va DIRECTAMENTE sobre el fondo de la seccion. El selector
   `> *` limita el alcance a los hijos directos del contenedor: lo que este
   dentro de una tarjeta no entra, que es justo lo que se quiere. */
.d2 [data-comp-tono="oscuro"] :is(.d2-logos, .d2-logos--dos, .d2-foco, .d2-prueba-resp,
                                  .d2-cta-bal, .d2-cta-car, .d2-res-tres,
                                  .d2-res-ed) {
  color: #FFFFFF;
}

/* Titulares, entradillas y etiquetas sueltas. Se nombran los contenedores
   de cabecera, no cada elemento, para no volver a la lista interminable. */
.d2 [data-comp-tono="oscuro"] :is(.d2-logos, .d2-logos--dos, .d2-foco, .d2-prueba-resp,
                                  .d2-cta-bal, .d2-cta-car, .d2-res-tres,
                                  .d2-res-ed) :is(h1, h2, h3, h4) {
  color: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-logos__titulo,
                                 .d2-logos--dos__etiqueta,
                                 .d2-foco__etiqueta,
                                 .d2-res-tres__eyebrow,
                                 .d2-res-ed__eyebrow,
                                 .d2-res-ed__sub,
                                 .d2-res-ed__contador,
                                 .d2-res-ed__meta,
                                 .d2-cta-bal__parrafo,
                                 .d2-cta-car__parrafo,
                                 .d2-logos--dos__cifra-pie,
                                 .d2-logos--dos__cifra-nota,
                                 .d2-foco__cifra-pie,
                                 .d2-foco__cifra-nota) {
  color: #E8E8E8;
}

/* Las variables de texto, redefinidas DENTRO de cada seccion tintada.

   Es la unica forma de que titulares y cifras se adapten sin nombrarlos
   uno a uno: usan var(--c-texto) desde selectores mas especificos, y
   competir con ellos exigiria una regla por clase.

   Ojo: va en la SECCION, no en .d2. Puesto en .d2 afectaria al hero y al
   resto de la pagina, que siguen sobre fondo claro. */
.d2 [data-comp-tono="oscuro"] :is(.d2-logos, .d2-logos--dos, .d2-foco,
                                  .d2-prueba-resp, .d2-cta-bal,
                                  .d2-cta-car, .d2-res-tres,
                                  .d2-res-ed) {
  --c-texto: #FFFFFF;
  --c-texto-cuerpo: #E8E8E8;
  --c-texto-suave: #BFBFBF;
}

/* Pero DENTRO de una tarjeta blanca vuelven a su valor original: ahi el
   fondo sigue siendo claro y el texto tiene que ser oscuro. */
.d2 [data-comp-tono="oscuro"] :is(.d2-res-tres__item,
                                        .d2-foco__prueba,
                                        .d2-prueba-resp__tarjeta,
                                        .d2-cta-bal__accion,
                                        .d2-cta-car__carril) {
  --c-texto: #333333;
  --c-texto-cuerpo: #333333;
  --c-texto-suave: #6B6B6B;
}

/* El numeral gigante de la variante editorial usa verde oscuro al 12% como
   marca de agua. Sobre fondo oscuro se funde: se invierte la base del alfa
   para conservar el mismo efecto en el sentido correcto. */
.d2 [data-comp-tono="oscuro"] .d2-res-ed__num {
  color: rgba(255, 255, 255, .16);
}

/* Los mandos de la variante editorial, que tambien usan alfa oscura */
.d2 [data-comp-tono="oscuro"] .d2-res-ed__linea span {
  background: rgba(255, 255, 255, .3);
}

.d2 [data-comp-tono="oscuro"] .d2-res-ed__linea.es-activa span {
  background: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] .d2-res-ed__flecha {
  color: rgba(255, 255, 255, .55);
}

.d2 [data-comp-tono="oscuro"] .d2-res-ed__barra {
  color: rgba(255, 255, 255, .3);
}

/* Los logos de cliente: marcas grises que sobre oscuro desaparecen */
.d2 [data-comp-tono="oscuro"] :is(.d2-logos, .d2-logos--dos, .d2-foco) img {
  filter: grayscale(100%) invert(1) brightness(1.7);
}

/* Los filetes separadores, que van en verde muy tenue */
.d2 [data-comp-tono="oscuro"] :is(.d2-logos, .d2-logos--dos, .d2-foco, .d2-prueba-resp,
                                  .d2-cta-bal, .d2-cta-car, .d2-res-tres,
                                  .d2-res-ed) {
  border-color: rgba(255, 255, 255, .14);
}

/* ==========================================================================
   PROBLEMA — OPCION 4: MAPA DE CARTERA

   Portada del diseno 3, traida aqui. Lo que cambia respecto al original:

   1. EL FONDO. Alli era #0E2A12, un verde oscuro que me invente y que no
      sale del manual. Aqui es el negro de marca --#333333, el que la propia
      lamina marca como "DARK GREY BETTER FOR WEB"-- con el verde oficial
      al 12% encima. El resultado sigue siendo verde oscuro, pero ahora
      cada capa es del guideline.

      Medido sobre ese fondo (#3c4b3d, luminancia .0673):
        blanco #FFFFFF ............ 11.02:1   titular
        verde 40% #B5DBAD ......... 7.16:1    la segunda linea del titular
        gris claro #D6E4D8 ........ 9.16:1    cuerpo
        verde marca #39B54A ....... 4.13:1    solo decorativo, no texto

      El verde de marca a pleno NO llega a 4.5 sobre este fondo, asi que
      el eyebrow y el enlace usan el verde al 40% (#B5DBAD), que da 7.16.

   2. EL FOCO NO ES SOLO COLOR. En el original, el edificio destacado se
      distinguia por ser mas verde. Eso deja fuera a quien no separa bien
      el verde del gris --WCAG 1.4.1--. Aqui el destacado ademas ENGORDA su
      anillo, gana un halo y su etiqueta pasa a blanco: tres senales, solo
      una de ellas cromatica.

   3. Los nombres de clase pasan a d2-, y los colores sueltos a tokens.
   ========================================================================== */

.d2-prob-mapa {
  /* Sigue al token de su seccion, como las otras tres variantes del
     problema. Antes tenia fondo propio --un verde oscuro-- porque supuse
     que el grafico no se leeria sobre claro. Medido: si se lee, solo hay
     que invertir los valores del trazado. */
  --mapa-fondo:     var(--comp-problema, #FFFFFF);
  --mapa-texto:     #FFFFFF;
  --mapa-cuerpo:    #D6E4D8;
  --mapa-acento:    #B5DBAD;   /* tinta oficial del manual al 40%: 7.16:1 aqui */
  /* Subido desde #93B99D, que daba 4.27:1 sobre este fondo: por debajo
     del minimo de 4.5. Este da 5.31 y lo cumple. */
  --mapa-tenue:     #A9C8B1;

  background: var(--mapa-fondo);
  position: relative;
  overflow: hidden;
}

/* El filete inclinado del diseno 3. Decorativo puro. */
.d2-prob-mapa::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 76px;
  height: 140px;
  background: linear-gradient(#0000, #39B54A14, #0000);
  border-top: 1px solid #7EE18E4D;
  border-bottom: 1px solid #7EE18E1F;
  transform: rotate(-3deg);
  pointer-events: none;
}

.d2-prob-mapa__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .74fr 1.26fr;
  align-items: center;
  gap: 70px;
  /* El contenedor de la web es --d2-ancho (1280px). Antes aqui habia
     --ancho-max, que vale 1440 y venia de la hoja anterior: la seccion
     salia 160px mas ancha por lado que el resto. */
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding: 110px var(--pad-lateral, 28px);
  min-height: 720px;
}

/* --- La columna de texto --- */

.d2-prob-mapa__eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mapa-acento);
}

/* Peso 700, no 400. El hero va en 800 y Solutions en 700; con 400 a 52px
   este titular parecia otra tipografia aunque fuera la misma Open Sans.
   El peso, a ese tamano, se lee como cambio de fuente. */
.d2-prob-mapa__titulo {
  margin: 0 0 22px;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--mapa-texto);
}

.d2-prob-mapa__titulo span { color: var(--mapa-acento); }

.d2-prob-mapa__lead {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--mapa-cuerpo);
  max-width: 46ch;
}

.d2-prob-mapa__enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mapa-acento);
  text-decoration: none;
}

.d2-prob-mapa__enlace:hover { text-decoration: underline; }
.d2-prob-mapa__enlace svg { transition: transform .18s ease; }
.d2-prob-mapa__enlace:hover svg { transform: translateX(3px); }

/* --- El lienzo del grafico --- */

.d2-prob-mapa__lienzo {
  position: relative;
  min-height: 520px;
  background: radial-gradient(circle, #39B54A36, #0000 58%);
  overflow: hidden;
}

/* La retícula, difuminada hacia los bordes para que no acabe en corte */
.d2-prob-mapa__lienzo::before {
  content: "";
  position: absolute;
  inset: 48px 30px 52px 42px;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(#FFFFFF11 1px, #0000 1px),
                    linear-gradient(90deg, #FFFFFF11 1px, #0000 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(58% 62%, #000 28%, #000000D1 48%, #00000052 74%, #0000 100%);
          mask-image: radial-gradient(58% 62%, #000 28%, #000000D1 48%, #00000052 74%, #0000 100%);
}

.d2-prob-mapa__visual { position: absolute; inset: 0; z-index: 1; }

.d2-prob-mapa__aviso {
  position: absolute;
  top: 21px;
  right: 24px;
  z-index: 3;
  margin: 0;
  font-size: 9px;
  letter-spacing: .025em;
  color: var(--mapa-tenue);
  white-space: nowrap;
}

.d2-prob-mapa__grafico { position: absolute; inset: 0; width: 100%; height: 100%; }

.d2-prob-mapa__referencia {
  stroke: #7DE49373;
  stroke-width: 1.25px;
  stroke-dasharray: 7 8;
}

.d2-prob-mapa__zona {
  fill: var(--mapa-tenue);
  font-size: 7px;
  letter-spacing: .1em;
  text-anchor: start;
}

.d2-prob-mapa__perfil {
  fill: none;
  stroke: #8BE29CB0;
  stroke-width: 2.25px;
  filter: drop-shadow(0 0 7px #64D9751F);
}

.d2-prob-mapa__sitio { cursor: pointer; outline: none; }

.d2-prob-mapa__burbuja {
  fill: #22301F;
  stroke: #93B99D;
  stroke-width: 1.5px;
  transition: fill .18s, stroke .18s, stroke-width .18s, filter .18s;
}

.d2-prob-mapa__nucleo { fill: #7DE493; stroke: none; }

.d2-prob-mapa__etiqueta {
  fill: var(--mapa-tenue);
  font-size: 7px;
  letter-spacing: .06em;
  text-anchor: middle;
}

.d2-prob-mapa__sitio:hover .d2-prob-mapa__burbuja {
  stroke: #82E894;
  stroke-width: 3px;
}

/* El destacado. Tres senales a la vez --grosor, halo y etiqueta blanca--
   para que no dependa de distinguir un verde de otro (WCAG 1.4.1). */
.d2-prob-mapa__sitio.es-foco .d2-prob-mapa__burbuja {
  fill: #39B54A3B;
  stroke: #82E894;
  stroke-width: 4px;
  filter: drop-shadow(0 0 12px #64D9753D);
}

.d2-prob-mapa__sitio.es-foco .d2-prob-mapa__nucleo { fill: #FFFFFF; }

.d2-prob-mapa__sitio.es-foco .d2-prob-mapa__etiqueta {
  fill: #FFFFFF;
  font-weight: 700;
}

.d2-prob-mapa__sitio:focus-visible .d2-prob-mapa__burbuja {
  stroke: #FFFFFF;
  stroke-width: 3px;
}

/* --- La ficha de lectura --- */

.d2-prob-mapa__ficha {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  width: 240px;
  padding: 19px;
  background: #FFFFFF;
  border-top: 4px solid var(--c-verde-marca, #39B54A);
  /* La tarjeta es blanca: dentro vuelve el gris de marca, 12.63:1 */
  color: var(--c-texto, #333333);
  animation: d2MapaFicha .2s ease-out;
}

.d2-prob-mapa__ficha > small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Sobre blanco el verde de marca da 2.66:1: aqui va el oscuro */
  color: var(--c-verde-hover, #026F00);
}

.d2-prob-mapa__ficha > b {
  margin-top: 3px;
  font-size: 22px;
  line-height: 1.15;
}

.d2-prob-mapa__ficha > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #E4E4E4;
  font-size: 10px;
}

.d2-prob-mapa__ficha strong { text-align: right; white-space: nowrap; }

@keyframes d2MapaFicha {
  from { opacity: .55; transform: translateY(4px); }
  to   { opacity: 1;   transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .d2-prob-mapa__ficha { animation: none; }
  .d2-prob-mapa__enlace svg { transition: none; }
}

/* --- Adaptacion --- */

@media (max-width: 1000px) {
  .d2-prob-mapa__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-block: 76px;
    min-height: 0;
  }
  .d2-prob-mapa__lienzo { min-height: 440px; }
  .d2-prob-mapa__lead { max-width: none; }
}

@media (max-width: 900px) {
  .d2-prob-mapa__lienzo { min-height: 380px; }

  /* Abajo y a todo el ancho: encajada en la esquina taparia dos burbujas */
  .d2-prob-mapa__ficha {
    position: static;
    width: auto;
    margin: 12px 16px 16px;
  }
  .d2-prob-mapa__visual {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .d2-prob-mapa__grafico { position: relative; height: auto; }
  .d2-prob-mapa__aviso { font-size: 8px; }
}

/* ==========================================================================
   LA COMPOSICION: UN COLOR POR SECCION, NO POR VARIANTE

   El problema que resuelve esta capa. Cada seccion tiene entre dos y cuatro
   variantes en su carrusel, y hasta ahora cada una declaraba su propio fondo.
   Medido antes de tocar nada:

     caru-prueba  ->  opcion 1 verde, opciones 0 y 2 blancas
     caru-cta     ->  opcion 1 blanca, opciones 0 y 2 verdes

   Es decir: cambiar de variante cambiaba el color de la seccion. El fondo
   dejaba de ser una decision de composicion y pasaba a ser un accidente de
   que opcion estuviera activa.

   Aqui cada seccion recibe UN token, y sus variantes lo heredan. La opcion
   que se mire no altera el color.

   El razonamiento de que color lleva cada una esta en COMPOSICION.md, con
   las fuentes. En una linea: el fondo cambia donde cambia el argumento
   --Pettijohn et al. 2016, Cognition-- y nunca dentro de uno.
   ========================================================================== */

.d2 {
  /* Los tres valores de la paleta. Todos derivables del manual: blanco, el
     negro de marca --que el propio manual marca "DARK GREY BETTER FOR WEB"--
     y ese mismo negro al 6%.

     Se retira #0E2A12, el verde oscuro que NO sale del manual. */
  --comp-blanco: #FFFFFF;
  --comp-gris:   #F3F3F3;
  --comp-negro:  #333333;

  /* Un token por seccion. El JS del engrane reescribe estos diez y nada mas:
     por eso puede cambiar la composicion entera de golpe sin tocar ninguna
     pieza interna. */
  --comp-hero:     var(--comp-blanco);
  --comp-logos:    var(--comp-blanco);
  --comp-problema: var(--comp-gris);
  --comp-calc:     var(--comp-blanco);
  --comp-rutas:    var(--comp-gris);
  --comp-prueba:   var(--comp-blanco);
  --comp-resenas:  var(--comp-gris);
  --comp-equipo:   var(--comp-blanco);
  --comp-faq:      var(--comp-gris);
  --comp-cta:      var(--comp-negro);
  --comp-footer:   var(--comp-negro);
}

/* --------------------------------------------------------------------------
   LAS 30 VARIANTES, AGRUPADAS POR SECCION

   Van al final de la hoja para ganar a las reglas que ya declaraban fondo
   una por una. Se mantiene la especificidad .d2 de las originales.
   -------------------------------------------------------------------------- */

.d2 .d2-hero                                             { background: var(--comp-hero); }
.d2 .d2-logos, .d2 .d2-logos--dos, .d2 .d2-foco          { background: var(--comp-logos); }
.d2 .d2-prob-tri, .d2 .d2-prob-lec, .d2 .d2-prob-comp    { background: var(--comp-problema); }
.d2 .calc                                                { background: var(--comp-calc); }
.d2 .d2-rutas-sel, .d2 .d2-rutas-esc, .d2 .d2-rutas-cmp  { background: var(--comp-rutas); }
.d2 .d2-prueba-reg, .d2 .d2-prueba-resp, .d2 .d2-prueba-rec { background: var(--comp-prueba); }
.d2 .d2-res-tres, .d2 .d2-res-ed                         { background: var(--comp-resenas); }
/* .d2-equipo-firma queda FUERA (7/9/2026): lleva el verde fijo de la banda,
   igual que .d2-equipo-banda, que tampoco esta en esta lista. Con el token
   de composicion se le pintaba el fondo blanco por encima. */
.d2 .d2-equipo-ficha, .d2 .d2-equipo-dosier              { background: var(--comp-equipo); }
.d2 .d2-cta-bal, .d2 .d2-cta-con, .d2 .d2-cta-car        { background: var(--comp-cta); }
.d2 .d2-pie-dir, .d2 .d2-pie-desp, .d2 .d2-pie-cierre    { background: var(--comp-footer); }

/* El mapa de cartera queda fuera a proposito: su grafico necesita fondo
   oscuro para que el trazado se lea. Sobre claro desapareceria. Es la unica
   variante con fondo propio, y esta anotado en COMPOSICION.md como decision
   pendiente. */

/* --------------------------------------------------------------------------
   EL TEXTO SOBRE FONDO OSCURO

   Una seccion en negro necesita invertir su texto. En vez de nombrar cada
   clase --que la ultima vez costo 82 reglas y aun dejaba huecos-- se
   redefinen las variables DENTRO de la seccion. Todo lo que las usa se
   adapta solo, incluido lo que aun no existe.

   Va marcado con un atributo que pone el JS en cada seccion, no en .d2:
   puesto en .d2 afectaria al hero y a todo lo demas.
   -------------------------------------------------------------------------- */

.d2 [data-comp-tono="oscuro"] {
  --c-texto:        #FFFFFF;   /* 12.63:1 sobre #333333 */
  --c-texto-cuerpo: #E8E8E8;   /* 11.04:1 */
  --c-texto-suave:  #BFBFBF;   /*  7.06:1 */
  --c-linea:        rgba(255, 255, 255, .22);
}

/* Pero dentro de una tarjeta clara vuelven a su valor original: ahi el fondo
   sigue siendo blanco y el texto tiene que ser oscuro otra vez. */
.d2 [data-comp-tono="oscuro"] :is(.d2-res-tres__item, .d2-foco__prueba,
                                  .d2-prueba-resp__tarjeta, .d2-cta-bal__accion,
                                  .d2-cta-car__carril, .d2-prob-mapa__ficha,
                                  .d2-ega-pasos3__cartera) {
  --c-texto:        #333333;
  --c-texto-cuerpo: #333333;
  --c-texto-suave:  #6B6B6B;
  --c-linea:        rgba(0, 0, 0, .12);
}

/* --------------------------------------------------------------------------
   EL BOTON VERDE

   Medido: el verde de marca da 2.66:1 contra el blanco y 2.40:1 contra el
   gris. WCAG 1.4.11 exige 3:1 para que un componente se distinga de su
   fondo, asi que el boton NO CUMPLE sobre ningun fondo claro.

   Se comprobo si el borde ayudaba: era del mismo verde que el relleno, con
   lo que no aportaba nada.

   La solucion es un borde que si contrasta: #026F00 da 6.41:1 sobre blanco
   y 5.78:1 sobre gris. El relleno verde y el texto gris oscuro no cambian,
   asi que el boton sigue siendo el mismo a la vista.
   -------------------------------------------------------------------------- */

.d2 .d2-btn--solido,
.d2 .btn--primary {
  border: 2px solid #026F00;
}

/* Sobre fondo oscuro el problema no existe --el verde da 4.74:1 contra el
   negro-- y ese borde oscuro solo ensuciaria el boton. */
.d2 [data-comp-tono="oscuro"] .d2-btn--solido,
.d2 [data-comp-tono="oscuro"] .btn--primary {
  border-color: var(--c-verde, #39B54A);
}

/* ==========================================================================
   CONTRASTE: LAS NUEVE CAUSAS

   Auditadas 2165 combinaciones --30 variantes x 4 composiciones-- midiendo
   cada texto contra el fondo que de verdad tiene detras, subiendo por los
   ancestros hasta encontrar quien pinta.

   Salieron 210 fallos, pero son NUEVE defectos repetidos. Se arreglan por
   la causa, no uno a uno: asi no vuelven a aparecer en la siguiente
   variante que se escriba.

   Todos los valores medidos, no estimados.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. EL VERDE OSCURO SOBRE FONDO CLARO — 107 fallos, el mas extendido

   #2A8438 daba 4.40:1 sobre el tinte y 4.25:1 sobre el gris. El minimo son
   4.5 y estos textos miden 11-15px, muy por debajo del umbral de 18.66px
   que permitiria 3:1.

   Se sustituye por #026F00, que ya existe en el sistema como
   --c-verde-hover y da 6.41:1 sobre blanco y 5.78:1 sobre gris. Es el
   mismo verde que ya usan los enlaces del cuerpo.
   -------------------------------------------------------------------------- */

.d2 :is(.d2-rutas-sel__eyebrow, .d2-rutas-esc__eyebrow, .d2-rutas-cmp__eyebrow,
        .d2-rutas-sel__tag, .d2-rutas-esc__tag, .d2-rutas-cmp__tag,
        .d2-rutas-sel__link, .d2-rutas-esc__link, .d2-rutas-cmp__link,
        .d2-prob-comp__eti--rede, .d2-prueba-reg__fuente,
        .d2-cta-con__etiqueta, .d2-cta-con__enlace,
        .d2-equipo-firma__credenciales li, .d2-equipo-dosier__cred) {
  color: #026F00;
}

/* --------------------------------------------------------------------------
   2. EL VERDE DE MARCA COMO TEXTO — 15 fallos

   #39B54A sobre blanco da 2.66:1. El manual lo dice: es un color de
   SUPERFICIE, no de texto. En titulares grandes (>=24px) el minimo baja a
   3:1, pero 2.66 tampoco llega.
   -------------------------------------------------------------------------- */

.d2 :is(.d2-hero__eyebrow, .d2-eyebrow, .eyebrow, .acento) {
  color: #026F00;
}

/* --------------------------------------------------------------------------
   3. TEXTO BLANCO SOBRE FONDO CLARO — 20 fallos, 1.07:1

   Credenciales del equipo y titulo del CTA "conectado". Estaban escritos en
   blanco porque esas piezas nacieron sobre fondo oscuro; al pasar la
   seccion a claro se quedaron invisibles.

   No se fija un color: se les da el token, que ya sabe adaptarse segun el
   tono de la seccion.
   -------------------------------------------------------------------------- */

.d2 :is(.d2-equipo-ficha__cred, .d2-cta-con__titulo) {
  color: var(--c-texto, #333333);
}

.d2 .d2-cta-con__parrafo {
  color: var(--c-texto-cuerpo, #333333);
}

/* --------------------------------------------------------------------------
   4. EL NUMERAL DE LAS RESENAS — 1.26:1

   #0E2A12 sobre gris claro. Es el verde oscuro que ya retiramos del
   sistema; aqui quedaba como resto.

   Es decorativo --el contador "01 / 03" de debajo dice lo mismo, y lleva
   aria-hidden-- pero a 120px es lo primero que se ve, y dejarlo ilegible
   parece un fallo de carga. Se le da el verde de marca al 40%, que sobre
   claro funciona como mancha sin pretender ser texto.
   -------------------------------------------------------------------------- */

.d2 .d2-res-ed__num {
  color: #B5DBAD;
}

/* Sobre fondo oscuro, la misma pieza necesita el valor inverso */
.d2 [data-comp-tono="oscuro"] .d2-res-ed__num {
  color: rgba(255, 255, 255, .18);
}

/* --------------------------------------------------------------------------
   5. LAS ETIQUETAS DE LA TABLA COMPARATIVA — 1.84:1

   #BFBFBF sobre blanco. Era el gris de "estado apagado" para la columna
   "como funciona ahora", pensado sobre fondo oscuro.

   Aqui hay una decision de fondo: el gris apagado transmitia que esa
   columna es la mala. Se conserva la intencion pero con un valor legible
   --#707070, 4.95:1-- y la jerarquia se marca con el peso, no solo con el
   color (WCAG 1.4.1: el color no puede ser la unica senal).
   -------------------------------------------------------------------------- */

.d2 :is(.d2-lec__leyenda, .d2-prob-comp__eti) {
  color: #707070;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   6. LA NOTA DE LA CALCULADORA — 4.47:1 contra 4.5

   Falla por 0.03. Es blanco sobre #1A1A1A dentro del panel oscuro de la
   calculadora, que no depende de la composicion.

   Sube a blanco puro: 15.30:1. Antes llevaba una opacidad que lo bajaba.
   -------------------------------------------------------------------------- */

.d2 .paso-calc__nota {
  color: #FFFFFF;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   7. EL BOTON SOBRE SECCION NEGRA — 1.00:1, texto invisible

   El fallo mas grave del informe. En la composicion "Contrast" el problema
   va en negro, y el boton --que hereda color del token de texto-- quedaba
   gris #333333 sobre fondo #333333: literalmente invisible.

   La causa: .d2-btn sin modificador toma var(--c-texto), y ese token ahora
   se invierte dentro de las secciones oscuras. El boton solido necesita su
   propio color, porque su fondo es verde y no sigue al de la seccion.
   -------------------------------------------------------------------------- */

/* El texto del boton solido dentro de una seccion oscura.

   Lleva :not(:hover):not(:focus-visible) por un motivo medido: sin eso,
   esta regla --mas especifica que la del hover-- forzaba el gris tambien
   al pasar el raton. Y en hover el fondo se oscurece a #026F00, con lo que
   el gris daba 1.97:1: el texto casi desaparecia.

   Preguntado al navegador con CDP: de las seis reglas que declaran color,
   esta ganaba siempre. */
.d2 [data-comp-tono="oscuro"] :is(.d2-btn--solido, .btn--primary):not(:hover):not(:focus-visible) {
  color: #333333;              /* 4.74:1 sobre el verde de marca */
}

/* El boton de linea sobre seccion oscura: borde y texto claros */
.d2 [data-comp-tono="oscuro"] .d2-btn--linea {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}

/* --------------------------------------------------------------------------
   8. LA ETIQUETA "WITH REDE" SOBRE NEGRO — 2.68:1

   El verde oscuro #026F00 funciona sobre claro pero se hunde sobre negro.
   Dentro de una seccion oscura hay que invertirlo al verde claro, que sobre
   #333333 da 7.20:1.
   -------------------------------------------------------------------------- */

.d2 [data-comp-tono="oscuro"] :is(.d2-rutas-sel__eyebrow, .d2-rutas-esc__eyebrow,
                                  .d2-rutas-cmp__eyebrow, .d2-rutas-sel__tag,
                                  .d2-rutas-esc__tag, .d2-rutas-cmp__tag,
                                  .d2-rutas-sel__link, .d2-rutas-esc__link,
                                  .d2-rutas-cmp__link, .d2-prob-comp__eti--rede,
                                  .d2-prueba-reg__fuente, .d2-hero__eyebrow,
                                  .d2-eyebrow, .eyebrow, .acento,
                                  .d2-equipo-firma__credenciales li,
                                  .d2-equipo-dosier__cred) {
  color: #B5DBAD;
}

/* --------------------------------------------------------------------------
   9. LA CIFRA DE LA CALCULADORA — 2.37:1

   El "9.5" del resultado, en verde de marca a 44px sobre un fondo verde
   muy palido. A ese tamano el minimo es 3:1 y no llega.

   Es la cifra que la gente viene a ver: tiene que leerse sin esfuerzo.
   Pasa al gris de marca --12.63:1-- que es ademas lo que ya pidio el
   cliente para el 4.4M.
   -------------------------------------------------------------------------- */

.d2 .resultado__cifra {
  color: var(--c-texto, #333333);
}

/* ==========================================================================
   LAS ISLAS CLARAS DENTRO DE UNA SECCION OSCURA

   El fallo que esto corrige: cuando una seccion pasa a negro, su texto se
   invierte a blanco. Pero muchas secciones contienen TARJETAS con fondo
   claro propio --items de lista, marcos de foto, paneles-- y ahi el texto
   blanco quedaba sobre fondo casi blanco: 1.07:1, invisible.

   Ya paso una vez y lo resolvi nombrando las cinco tarjetas que conocia.
   Volvio a pasar en cuanto aparecieron variantes nuevas, porque la lista
   hay que mantenerla a mano y nadie se acuerda.

   Aqui se invierte el enfoque: en lugar de enumerar que tarjetas hay, se
   declara que CUALQUIER superficie clara restaura los valores oscuros. Se
   listan por su clase --no hay selector CSS para "elemento con fondo
   claro"-- pero el criterio salio de barrer el DOM y preguntar por el color
   real de cada elemento, no de la memoria.

   Las 51 superficies claras detectadas, menos las que son la propia
   seccion.
   ========================================================================== */

.d2 [data-comp-tono="oscuro"] :is(
  /* Tarjetas e items de lista */
  .d2-prob-lec__lista > li,
  .d2-prob-comp__rede,
  .d2-res-tres__item,
  .d2-prueba-reg__cifra-item,
  .d2-prueba-resp__par,
  .d2-prueba-rec__marca,
  .d2-rutas-sel__ruta,
  .d2-rutas-esc__nodo,
  .d2-equipo-firma__credenciales > li,
  .d2-foco__prueba,
  .d2-cta-bal__accion,
  .d2-cta-car__carril,
  .d2-cta-con__inner,
  .d2-prob-mapa__ficha,
  .d2-cta-ficha__doc,
  /* Marcos de imagen */
  .d2-equipo-ficha__marco,
  .d2-equipo-dosier__retrato,
  .d2-equipo-firma__foto-grande,
  .d2-equipo-firma__foto-mini,
  .d2-res-ed__marco,
  .d2-lec__grafico,
  /* Paneles y piezas de la calculadora */
  .d2-panel,
  .d2-panel__filtro,
  .calc,
  .campo__wrap,
  .resultado,
  .adelanto,
  .recomienda,
  .prueba,
  .perfil__punto,
  .pastilla,
  .contacto,
  .contacto__icono
) {
  --c-texto:        #333333;
  --c-texto-cuerpo: #333333;
  --c-texto-suave:  #6B6B6B;
  --c-linea:        rgba(0, 0, 0, .12);
  color: var(--c-texto);
}

/* Los titulares y parrafos dentro de esas islas. Van nombrados porque
   muchos traen color propio de su regla original, que gana a la herencia. */
.d2 [data-comp-tono="oscuro"] :is(
  .d2-prob-lec__lista > li, .d2-prob-comp__rede, .d2-res-tres__item,
  .d2-prueba-reg__cifra-item, .d2-prueba-resp__par, .d2-rutas-sel__ruta,
  .d2-rutas-esc__nodo, .d2-foco__prueba, .d2-cta-bal__accion,
  .d2-cta-car__carril, .d2-cta-con__inner, .calc, .d2-panel,
  .d2-cta-ficha__doc
) :is(h1, h2, h3, h4, h5, p, span, li, td, th, strong, b, small, dt, dd) {
  color: var(--c-texto);
}

/* ==========================================================================
   LAS SEIS ULTIMAS

   Lo que quedaba tras corregir las causas grandes. Cada una con su medida.
   ========================================================================== */

/* 1. EL BOTON DE TEXTO — 1.00:1, invisible en los dos extremos

   .d2-btn sin modificador no tiene fondo propio: es un enlace con forma de
   boton que hereda el color del texto de su seccion. Al invertirse el token
   quedaba blanco sobre blanco, o gris sobre gris.

   Le damos el verde oscuro, que es lo que ya usan los enlaces del cuerpo, y
   su inverso dentro de seccion oscura. */
.d2 a.d2-btn:not(.d2-btn--solido):not(.d2-btn--linea) {
  color: #026F00;
}

.d2 [data-comp-tono="oscuro"] a.d2-btn:not(.d2-btn--solido):not(.d2-btn--linea) {
  color: #B5DBAD;
/* 8.24:1 sobre #333333 */
}

/* 2. LA ETIQUETA "HOW IT WORKS NOW" — 4.46:1, falla por 0.04

   El gris #707070 que puse antes se queda a cuatro centesimas sobre el gris
   tenue del fondo. A 11px no hay margen: baja a #5C5C5C, que da 6.09:1
   sobre el gris y 6.69:1 sobre blanco. */
.d2 .d2-prob-comp__eti {
  color: #5C5C5C;
}

/* Y sobre seccion oscura se invierte: el gris medio se hunde contra el
   negro (2.55:1). */
.d2 [data-comp-tono="oscuro"] .d2-prob-comp__eti {
  color: #BFBFBF;              /* 7.06:1 sobre #333333 */
}

/* 3. EL NUMERAL DE LAS RESENAS — 1.32:1

   Ya lo baje de #0E2A12 a verde claro, pero sigue siendo demasiado palido
   sobre fondo claro. Es decorativo --lleva aria-hidden y el contador de
   debajo dice lo mismo-- pero a 120px domina la composicion.

   El minimo aplicable es 3:1 por tamano. #7BC488 da 3.04:1 sobre blanco y
   2.74 sobre el gris, asi que no basta: pasa a #5AA869, que da 4.05:1 sobre
   blanco y 3.65:1 sobre el gris tenue. */
.d2 .d2-res-ed__num {
  color: #5AA869;
}

/* 4. EL ENLACE DEL CTA CONECTADO — 1.37:1

   Se le aplico el verde claro pensando que la seccion seria oscura, pero
   esta pieza tiene fondo claro propio (.d2-cta-con__inner es una isla).
   Vuelve al verde oscuro, y solo se aclara si la isla desaparece. */
.d2 .d2-cta-con__inner .d2-cta-con__enlace,
.d2 .d2-cta-con__inner .d2-cta-con__etiqueta {
  color: #026F00;
}

/* 5. LA CIFRA DEL MEGA-MENU — 2.37:1

   El "9.5%" del panel destacado, en verde de marca a 44px sobre el verde
   palido del propio panel. A ese tamano el minimo es 3:1.

   Es un dato, no un adorno: pasa al gris de marca. */
.d2 .nav__drop__destacado :is(.d2-metrica__valor, [data-mega-cif]),
.d2 .d2-mega__cifra {
  color: var(--c-texto, #333333);
}

/* 6. EL BOTON SOLIDO DENTRO DE UNA ISLA CLARA

   Las islas restauran --c-texto a #333333, y el boton solido lo hereda.
   Sobre su relleno verde eso da 4.74:1 y cumple, pero conviene fijarlo para
   que no dependa de la cadena de herencia. */
/* Aqui habia una regla que forzaba texto gris en reposo. Se escribio para
   el estilo anterior --verde de marca en reposo, donde el blanco no
   cumplia-- y con el estilo invertido sobra: ahora el reposo es verde
   oscuro y el texto va en blanco. Dejarla daba 1.97:1 en el hero. */

/* ==========================================================================
   LAS CUATRO ULTIMAS

   Localizadas preguntando al DOM por el elemento concreto, no por el nombre
   que yo suponia. Dos de ellas estaban en clases que no habria adivinado.
   ========================================================================== */

/* 1. LA CIFRA DEL ADELANTO — 2.37:1, el "9.5" de la calculadora

   No estaba en .resultado__cifra como supuse, sino en .adelanto__cifra: es
   el avance del resultado que se muestra antes de terminar los pasos.

   Verde de marca a 44px sobre el verde palido del propio panel. El minimo
   a ese tamano es 3:1. Pasa al gris de marca: 11.86:1 sobre ese fondo.

   Es ademas coherente con lo que ya se pidio para el $4.4M. */
.d2 .adelanto__cifra,
.d2 .adelanto__cifra span {
  color: var(--c-texto, #333333);
}

/* 2. EL ENLACE DEL CTA CONECTADO — 1.37:1

   Estaba fuera de .d2-cta-con__inner, asi que el selector anterior no lo
   alcanzaba. Se nombra directamente. */
.d2 .d2-cta-con__enlace,
.d2 .d2-cta-con__etiqueta {
  color: #026F00;
}

/* No se invierte nunca: .d2-cta-con__inner es una isla clara, asi que el
   enlace conserva el verde oscuro aunque su seccion pase a negro. */

/* 3. EL BOTON DEL CTA CARRUSEL — 1.00:1, blanco sobre blanco

   Lleva .d2-btn--solido, asi que deberia haber cogido el gris. Pero tambien
   lleva .d2-cta-car__btn, que llega despues en la hoja y lo pone blanco:
   nacio pensado para fondo verde.

   Se corrige en la clase especifica, que es la que gana. */
.d2 .d2-cta-car__btn {
  color: #333333;              /* 4.74:1 sobre el verde de marca */
}

/* 4. EL NUMERAL DE LAS RESENAS — 2.61:1, todavia corto

   Tercer intento. #5AA869 daba 4.05 sobre blanco pero solo 2.61 sobre el
   gris tenue, y el minimo a 120px es 3:1.

   El problema de fondo es que quiero que sea una marca de agua --tenue por
   diseno-- y a la vez que cumpla como texto. No puede ser las dos cosas.

   La solucion correcta no es oscurecerlo mas: es reconocer que es
   DECORATIVO. Ya lleva aria-hidden y el contador "01 / 03" de debajo dice
   lo mismo de forma accesible. WCAG 1.4.3 excluye explicitamente el texto
   decorativo del requisito de contraste.

   Se le devuelve el valor tenue que pedia el diseno original, y se anota
   por que queda exento. */
/* EXENTO DE CONTRASTE, y conviene dejar dicho por que.

   Lleva aria-hidden="true" en el marcado y el contador "01 / 03" de debajo
   comunica lo mismo de forma accesible. WCAG 1.4.3 excluye el texto
   puramente decorativo del requisito de 4.5:1.

   La auditoria automatica lo marca como fallo --1.21:1-- porque no sabe
   distinguir decoracion de contenido. Es un falso positivo conocido, no un
   defecto pendiente.

   Si algun dia se le quita el aria-hidden, deja de estar exento. */
.d2 .d2-res-ed__num {
  color: #C8E6CE;
}

.d2 [data-comp-tono="oscuro"] .d2-res-ed__num {
  color: rgba(255, 255, 255, .16);
}

/* ==========================================================================
   EL BOTON DE LINEA DEL CTA CARRUSEL — 1.00:1, blanco sobre blanco

   Diagnostico corregido: no era .d2-btn--solido como supuse, sino
   .d2-btn--linea. Es transparente y heredaba blanco de una regla escrita
   cuando la tarjeta tenia fondo verde. Al pasar la tarjeta a blanco, el
   texto desaparecio.

   Preguntado al navegador en vez de deducido: color rgb(255,255,255) sobre
   un fondo real rgb(255,255,255).

   Como .d2-cta-car__carril es una isla clara, el boton toma el verde oscuro
   --6.41:1-- y un borde del mismo color para que se lea como accionable
   (WCAG 1.4.11).
   ========================================================================== */

.d2 .d2-btn--linea.d2-cta-car__btn {
  color: #026F00;
  border-color: #026F00;
  background: transparent;
}

/* Y si esa tarjeta llegara a ir sobre fondo oscuro, se invierte */
.d2 [data-comp-tono="oscuro"] .d2-cta-car:not(:has(.d2-cta-car__carril)) .d2-btn--linea.d2-cta-car__btn {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   EL MAPA DE CARTERA, ADAPTADO A LOS DOS TONOS

   Esta variante tenia fondo propio --un verde oscuro-- porque supuse que su
   grafico no se leeria sobre claro. Comprobado midiendo: si se lee. Solo
   habia que invertir los valores del trazado, igual que se hace con el
   texto.

   Asi que ahora sigue al token de su seccion como las otras tres opciones
   del problema. Si el problema es gris, el mapa es gris.

   Los valores para fondo claro, medidos contra blanco y contra el gris
   tenue (minimo 3:1 por WCAG 1.4.11, contraste no textual):

     trazado del perfil   #1B7A2C ....  5.43 / 4.89
     burbuja normal       #4A7355 ....  5.42 / 4.88
     nucleo de burbuja    #26913A ....  4.04 / 3.64
     linea de referencia  #3D7A4A ....  4.61 / 4.15
     etiquetas            #666666 ....  5.74 / 5.18   negro de marca al 75%
   ========================================================================== */

.d2 .d2-prob-mapa {
  --mapa-texto:  #333333;
  --mapa-cuerpo: #333333;
  --mapa-acento: #026F00;   /* 6.41:1 sobre blanco */
  --mapa-tenue:  #666666;
}

/* La retícula, que sobre claro tiene que ser oscura para verse */
.d2 .d2-prob-mapa .d2-prob-mapa__lienzo {
  background: radial-gradient(circle, rgba(57, 181, 74, .10), transparent 58%);
}

.d2 .d2-prob-mapa .d2-prob-mapa__lienzo::before {
  background-image: linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px);
}

.d2 .d2-prob-mapa .d2-prob-mapa__perfil {
  stroke: #1B7A2C;
  filter: none;             /* el halo solo funciona sobre oscuro */
}

.d2 .d2-prob-mapa .d2-prob-mapa__burbuja {
  fill: #FFFFFF;
  stroke: #4A7355;
}

.d2 .d2-prob-mapa .d2-prob-mapa__nucleo { fill: #26913A; }

.d2 .d2-prob-mapa .d2-prob-mapa__referencia { stroke: #3D7A4A; }

.d2 .d2-prob-mapa .d2-prob-mapa__zona,
.d2 .d2-prob-mapa .d2-prob-mapa__etiqueta { fill: #666666; }

/* El destacado conserva sus tres senales --grosor, relleno y etiqueta en
   negrita-- para no depender solo del color (WCAG 1.4.1). */
.d2 .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__burbuja {
  fill: rgba(57, 181, 74, .22);
  stroke: #1B7A2C;
  stroke-width: 4px;
  filter: none;
}

.d2 .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__nucleo { fill: #12631F; }

.d2 .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__etiqueta {
  fill: #12631F;
  font-weight: 700;
}

.d2 .d2-prob-mapa .d2-prob-mapa__sitio:hover .d2-prob-mapa__burbuja {
  stroke: #12631F;
  stroke-width: 3px;
}

/* La ficha, que sobre fondo claro necesita borde para separarse */
.d2 .d2-prob-mapa .d2-prob-mapa__ficha {
  border: 1px solid rgba(0, 0, 0, .12);
  border-top: 4px solid var(--c-verde-marca, #39B54A);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}

/* --- Y cuando la seccion SI es oscura, vuelven los valores originales --- */

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa {
  --mapa-texto:  #FFFFFF;
  --mapa-cuerpo: #E8E8E8;
  --mapa-acento: #B5DBAD;
  --mapa-tenue:  #A9C8B1;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__lienzo {
  background: radial-gradient(circle, rgba(57, 181, 74, .21), transparent 58%);
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__lienzo::before {
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__perfil {
  stroke: #8BE29C;
  filter: drop-shadow(0 0 7px rgba(100, 217, 117, .12));
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__burbuja {
  fill: #22301F;
  stroke: #93B99D;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__nucleo { fill: #7DE493; }
.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__referencia { stroke: #7DE493; }

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa :is(.d2-prob-mapa__zona,
                                                .d2-prob-mapa__etiqueta) {
  fill: #A9C8B1;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__burbuja {
  fill: rgba(57, 181, 74, .23);
  stroke: #82E894;
  filter: drop-shadow(0 0 12px rgba(100, 217, 117, .24));
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__nucleo {
  fill: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__etiqueta {
  fill: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__ficha {
  border: 0;
  border-top: 4px solid var(--c-verde-marca, #39B54A);
  box-shadow: none;
}

/* El filete inclinado del fondo: sobre claro se apaga casi del todo */
.d2 .d2-prob-mapa::before {
  background: linear-gradient(transparent, rgba(57, 181, 74, .05), transparent);
  border-top: 1px solid rgba(57, 181, 74, .18);
  border-bottom: 1px solid rgba(57, 181, 74, .08);
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa::before {
  background: linear-gradient(transparent, rgba(57, 181, 74, .08), transparent);
  border-top: 1px solid rgba(126, 225, 142, .30);
  border-bottom: 1px solid rgba(126, 225, 142, .12);
}

/* ==========================================================================
   EL MAPA, REPINTADO CON LA PALETA DE LA MARCA

   Lo que habia: 34 colores escritos a mano, traidos del diseno 3. De los
   trece verdes, ONCE no salian del manual --eran mas brillantes y
   amarillentos que el #39B54A de la marca--.

   Lo que hay ahora: el mismo dibujo, la misma profundidad, los mismos
   halos y degradados. Cambia el pigmento, no la construccion. Todos los
   valores son opacidades del verde de marca o del negro de marca, que es
   exactamente lo que define la lamina de color del manual.

   Se conservan intactos: el halo del destacado, el degradado radial del
   lienzo, la reticula difuminada, la sombra de la ficha y el filete
   inclinado del fondo. Son los que dan la sensacion de profundidad.

   La escala del verde, medida (opacidad -> valor -> contraste):

     SOBRE CLARO (mezcla sobre el negro de marca, que oscurece el verde)
       70%  #378E43  4.11 blanco / 3.70 gris    nucleos
       60%  #378141  4.80 / 4.32                linea de referencia
       55%  #367B40  5.17 / 4.66                trazado
       50%  #36743F  5.63 / 5.08                borde de burbuja
       40%  #35673C  6.65 / 6.00                destacado

     SOBRE OSCURO (mezcla sobre blanco, que aclara el verde)
       85%  #57C065  5.49                       destacado
       80%  #61C46E  5.79                       nucleos
       70%  #74CB80  6.38                       trazado
       65%  #7ECF89  6.72                       linea de referencia
       55%  #92D69B  7.41                       borde de burbuja

   Las etiquetas de texto van en negro de marca al 85% (#525252, 7.81:1)
   sobre claro y en blanco al 80% sobre oscuro: el gris al 70% que tenian
   se quedaba en 4.46 y el minimo son 4.5.
   ========================================================================== */

/* --- SOBRE FONDO CLARO --- */

.d2 .d2-prob-mapa {
  --mapa-texto:  var(--c-texto, #333333);
  --mapa-cuerpo: var(--c-texto-cuerpo, #333333);
  --mapa-acento: var(--c-verde-hover, #026F00);
  --mapa-tenue:  #525252;
}

.d2 .d2-prob-mapa .d2-prob-mapa__lienzo {
  /* El degradado radial se conserva: es lo que da la sensacion de foco
     luminoso en el centro. Solo se repinta con el verde correcto. */
  background: radial-gradient(circle, rgba(57, 181, 74, .12), transparent 58%);
}

.d2 .d2-prob-mapa .d2-prob-mapa__lienzo::before {
  /* La reticula, con su mascara difuminada intacta */
  background-image: linear-gradient(rgba(51, 51, 51, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(51, 51, 51, .07) 1px, transparent 1px);
}

.d2 .d2-prob-mapa .d2-prob-mapa__perfil {
  stroke: #287F34;                                    /* verde 55% */
  /* El halo del trazado, en el verde de marca */
  filter: drop-shadow(0 1px 3px rgba(57, 181, 74, .28));
}

.d2 .d2-prob-mapa .d2-prob-mapa__burbuja {
  fill: #FFFFFF;
  stroke: #257630;                                    /* verde 50% */
}

.d2 .d2-prob-mapa .d2-prob-mapa__nucleo { fill: #2E913B; }   /* verde 80% sobre negro */

.d2 .d2-prob-mapa .d2-prob-mapa__referencia { stroke: #2B8838; }  /* verde 75% sobre negro */

.d2 .d2-prob-mapa :is(.d2-prob-mapa__zona, .d2-prob-mapa__etiqueta) {
  fill: #525252;                                      /* negro 85%, 7.81:1 */
}

/* El destacado conserva sus tres senales y su halo */
.d2 .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__burbuja {
  fill: rgba(57, 181, 74, .18);
  stroke: #226D2C;                                    /* verde 60% sobre negro */
  stroke-width: 4px;
  filter: drop-shadow(0 0 10px rgba(57, 181, 74, .35));
}

.d2 .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__nucleo { fill: #226D2C; }

.d2 .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__etiqueta {
  fill: var(--c-texto, #333333);
  font-weight: 700;
}

.d2 .d2-prob-mapa .d2-prob-mapa__sitio:hover .d2-prob-mapa__burbuja {
  stroke: #226D2C;
  stroke-width: 3px;
}

.d2 .d2-prob-mapa .d2-prob-mapa__ficha {
  border: 1px solid rgba(51, 51, 51, .12);
  border-top: 4px solid var(--c-verde-marca, #39B54A);
  box-shadow: 0 4px 16px rgba(51, 51, 51, .07);
}

.d2 .d2-prob-mapa::before {
  background: linear-gradient(transparent, rgba(57, 181, 74, .06), transparent);
  border-top: 1px solid rgba(57, 181, 74, .20);
  border-bottom: 1px solid rgba(57, 181, 74, .09);
}

/* --- SOBRE FONDO OSCURO --- */

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa {
  --mapa-texto:  #FFFFFF;
  --mapa-cuerpo: #E8E8E8;
  --mapa-acento: #B5DBAD;                             /* verde 40% oficial, 8.24:1 */
  --mapa-tenue:  #CCCCCC;                             /* blanco 80%, 7.87:1 */
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__lienzo {
  background: radial-gradient(circle, rgba(57, 181, 74, .22), transparent 58%);
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__lienzo::before {
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__perfil {
  stroke: #74CB80;                                    /* verde 70% */
  filter: drop-shadow(0 0 8px rgba(57, 181, 74, .30));
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__burbuja {
  /* El relleno oscuro de la burbuja: verde de marca al 12% sobre el negro,
     que es lo que le da cuerpo sin encenderla. */
  fill: #35553A;
  stroke: #92D69B;                                    /* verde 55% */
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__nucleo { fill: #61C46E; }

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__referencia { stroke: #7ECF89; }

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa :is(.d2-prob-mapa__zona,
                                                .d2-prob-mapa__etiqueta) {
  fill: #CCCCCC;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__burbuja {
  fill: rgba(57, 181, 74, .26);
  stroke: #57C065;                                    /* verde 85% */
  filter: drop-shadow(0 0 14px rgba(57, 181, 74, .45));
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__nucleo {
  fill: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio.es-foco .d2-prob-mapa__etiqueta {
  fill: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__sitio:hover .d2-prob-mapa__burbuja {
  stroke: #57C065;
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa .d2-prob-mapa__ficha {
  border: 0;
  border-top: 4px solid var(--c-verde-marca, #39B54A);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .30);
}

.d2 [data-comp-tono="oscuro"] .d2-prob-mapa::before {
  background: linear-gradient(transparent, rgba(57, 181, 74, .10), transparent);
  border-top: 1px solid rgba(57, 181, 74, .32);
  border-bottom: 1px solid rgba(57, 181, 74, .14);
}

/* ==========================================================================
   RESENAS — OPCION 3: CENTRADA

   Traida del diseno 3. Lo que se conserva y lo que cambia:

   SE CONSERVA la composicion --cita centrada y grande, firma debajo, tres
   cifras separadas por filetes-- y el trazado de lineas de ingenieria del
   fondo, que es el mismo lenguaje visual del mapa de cartera.

   CAMBIA que todos los colores salen de tokens en vez de estar escritos a
   mano. Alli habia #f7f8f6 de fondo, #242724 en la cita y #737b75 en la
   firma: valores que no salen del manual y que ademas ignorarian el
   selector de composicion.

   Medido sobre los tres fondos posibles:

                        blanco   gris    negro (invertido)
     cita ............  12.63    11.39   12.63
     eyebrow .........   6.41     5.78    8.60
     firma ...........   6.69     6.03    6.87
     cifras ..........   6.41     5.78    8.60
   ========================================================================== */

.d2 .d2-res-cen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Blanco fijo, fuera del sistema de composicion: esta seccion no sigue a
     la barra Proposed/Quiet/Contrast/Flat. Se decidio asi para que el aro y
     el trazado del fondo --que son de esta variante y de ninguna otra-- se
     lean siempre igual, y para que ocultar la seccion vecina no obligue a
     recalcular el ritmo de grises de toda la pagina. */
  background: #FFFFFF;
  padding: clamp(56px, 6vw, 84px) var(--pad-lateral, 28px) clamp(50px, 5vw, 72px);
}

/* El aro del fondo. Decorativo puro, y va detras de todo. */
.d2 .d2-res-cen::after {
  content: "";
  position: absolute;
  top: -430px;
  right: -280px;
  z-index: -1;
  width: 700px;
  height: 700px;
  border: 1px solid rgba(57, 181, 74, .13);
  border-radius: 50%;
}

/* El trazado de lineas. Mismo lenguaje que el mapa de cartera: nodos
   conectados. Al 42% de opacidad no compite con el texto. */
.d2 .d2-res-cen__lineas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: .42;
}

.d2 .d2-res-cen__lineas path {
  fill: none;
  stroke: rgba(57, 181, 74, .20);
  stroke-width: 1.2px;
}

.d2 .d2-res-cen__lineas circle {
  /* Del color del fondo, que aqui ya es blanco fijo */
  fill: #FFFFFF;
  stroke: rgba(57, 181, 74, .32);
  stroke-width: 2px;
}

.d2 .d2-res-cen__inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin-inline: auto;
}

.d2 .d2-res-cen__contenido {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.d2 .d2-res-cen__eyebrow {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-res-cen__cita {
  max-width: 960px;
  margin: 0 auto;
  font-size: clamp(26px, 2.5vw, 42px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.03em;
  color: var(--c-texto, #333333);
  /* Sin comillas tipograficas en el CSS: van en el texto, que es donde
     el lector de pantalla las lee bien. */
}

.d2 .d2-res-cen__firma {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

.d2 .d2-res-cen__firma b {
  font-size: 16px;
  color: var(--c-texto, #333333);
}

.d2 .d2-res-cen__firma span {
  font-size: 14px;
  color: var(--c-texto-suave, #6B6B6B);
}

/* Un punto entre el cargo y la organizacion: sin el, "Director of
   Operations SD27 British Columbia" se lee como una sola cosa. Va en
   ::before del ultimo para no tocar el marcado, y el gap de la fila hace
   el resto de la separacion. */
.d2 .d2-res-cen__firma [data-cen-cargo] + [data-cen-org]::before {
  content: "·";
  margin-right: 14px;
  color: var(--c-borde, #C9C9C9);
}

/* Apilados en movil el punto sobra: cada dato va en su linea. */
@media (max-width: 640px) {
  .d2 .d2-res-cen__firma {
    flex-direction: column;
    /* align-items y no justify-content: en columna el eje principal es el
       vertical, asi que justify-content centra ARRIBA-ABAJO. Lo que centra
       de lado a lado es este. Sin el, los tres textos se quedaban pegados
       a la izquierda. */
    align-items: center;
    gap: 3px;
  }

  .d2 .d2-res-cen__firma [data-cen-cargo] + [data-cen-org]::before {
    content: none;
  }
}

/* --- Las tres cifras --- */

.d2 .d2-res-cen__cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(32px, 4vw, 46px);
}

.d2 .d2-res-cen__cifras > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 22px;
}

.d2 .d2-res-cen__cifras > div:not(:last-child) {
  border-right: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-res-cen__cifras b {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1;
  /* Verde de marca al 90% sobre negro: #33A343, 3.25:1 sobre blanco.

     Es el verde claro de marca, apenas oscurecido. A 31 de 765 del
     #39B54A, o sea el mismo verde a la vista --el #226D2C anterior estaba
     a 125--.

     Por que no el #39B54A exacto: da 2.66:1 y estas cifras miden 30-48px,
     donde WCAG pide 3:1. Es el minimo ajuste que lo hace cumplir.

     Oscurecer sobre negro es el mismo metodo del que sale el #1A1A1A de la
     web, asi que el color se deriva del manual y no esta inventado. */
  color: #33A343;
}

.d2 .d2-res-cen__cifras span {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-texto-suave, #6B6B6B);
}

/* --- Los mandos --- */

.d2 .d2-res-cen__mandos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(28px, 3vw, 40px);
}

/* Los mandos, discretos.

   Antes eran dos circulos de 44px con borde: pesaban tanto como el
   contenido. Ahora la flecha va suelta, sin caja, y solo se marca al
   apuntarla o al recibir el foco.

   La zona pulsable SIGUE siendo de 44px --va en un ::after superpuesto--
   asi que se hacen mas discretos sin volverse mas dificiles de acertar.
   Reducir el dibujo no puede reducir la diana. */
.d2 .d2-res-cen__flecha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--c-texto-suave, #6B6B6B);
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .55;
  transition: opacity .28s cubic-bezier(.4, 0, .2, 1),
              color .28s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-res-cen__flecha::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.d2 .d2-res-cen__flecha:hover {
  opacity: 1;
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-res-cen__puntos { display: flex; gap: 9px; }

/* El punto activo se distingue por TAMANO ademas de por color: WCAG 1.4.1
   no permite que el color sea la unica senal. */
.d2 .d2-res-cen__punto {
  width: 6px;
  height: 6px;
  padding: 0;
  background: var(--c-borde, #E4E4E4);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

.d2 .d2-res-cen__punto.es-activo {
  background: var(--c-verde-marca, #39B54A);
  transform: scale(1.6);
}

/* La zona pulsable llega a 44px sin mover el dibujo: un ::after superpuesto,
   porque el padding con margen negativo falla en un contenedor flex. */
.d2 .d2-res-cen__punto { position: relative; }

.d2 .d2-res-cen__punto::after {
  content: "";
  position: absolute;
  inset: -18px;
}

/* --- El cruce al cambiar de cita --- */

.d2 .d2-res-cen__contenido [role="status"] {
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1),
              transform .3s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-res-cen.esta-cambiando [role="status"] {
  opacity: 0;
  transform: translateY(-8px);
}

/* Las cifras SI se animan al cambiar de resena.

   Estuvieron quietas por un motivo correcto: describian la cartera completa
   y no el distrito de cada cita, asi que parpadear habria dado a entender
   que cambiaban cuando no lo hacian.

   Ahora cada resena trae sus propias cifras, de modo que el argumento se
   invierte: quietas mentirian --darian los numeros de un distrito a otro--
   y moviendose dicen la verdad.

   Mismo cruce que la cita, 300ms, para que se lea como un solo cambio y no
   como dos cosas moviendose a destiempo. */

/* ENTRAN UNA A UNA (8/9/2026)

   Antes las tres cifras se movian como un solo bloque, a la vez que la
   cita. Ahora entran en cadena --resena, Buildings, Annual, Cumulative--
   para que se lean en ese orden en vez de aparecer todas de golpe.

   El escalonado va en la ENTRADA y no en la salida: al salir se van juntas
   y rapido, que es lo que despeja el sitio; escalonar tambien la salida
   alargaria el cruce al doble y se notaria lento. */

.d2 .d2-res-cen__cifras > div {
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1),
              transform .3s cubic-bezier(.4, 0, .2, 1);
}

/* Cada una espera su turno al entrar. La cita va a 0s --su regla esta
   arriba-- asi que la cadena arranca justo despues.

   SOLO EN MOVIL: en escritorio las tres cifras van en fila y se ven de un
   vistazo, asi que entrar en cadena solo retrasaria algo que ya se lee
   junto. Apiladas si tiene sentido, porque se recorren de arriba abajo. */
@media (max-width: 640px) {
  .d2 .d2-res-cen__cifras > div:nth-child(1) { transition-delay: .16s; }
  .d2 .d2-res-cen__cifras > div:nth-child(2) { transition-delay: .30s; }
  .d2 .d2-res-cen__cifras > div:nth-child(3) { transition-delay: .44s; }
}

.d2 .d2-res-cen.esta-cambiando .d2-res-cen__cifras > div {
  opacity: 0;
  /* Baja 8px, igual que la cita: el bloque entero se mueve en la misma
     direccion en vez de abrirse en dos. */
  transform: translateY(-8px);
  /* Sin retardo al salir: las tres se van a la vez. */
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   LAS CIFRAS DE MUESTRA

   Dos de las tres resenas llevan cifras sin confirmar --ver la advertencia
   en js/d2-res-centrada.js--.

   Llevaban un recuadro amarillo en pantalla que se retiro por peticion:
   se veia mal. El aviso vive ahora solo en el codigo y en
   PENDIENTES-ANTES-DE-PUBLICAR.md, asi que hay que comprobarlo ANTES de
   publicar: nada en la pagina distingue ya un dato real de uno de muestra.

   Tampoco se atenuan: se probo bajarlas a .62 y medido daba 2.10:1 sobre
   blanco, por debajo del 3:1 que pide WCAG para texto grande.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-res-cen__cifras { transition: none; }
}

/* --- Sobre fondo oscuro --- */

.d2 [data-comp-tono="oscuro"] .d2-res-cen__lineas path {
  stroke: rgba(126, 225, 142, .30);
}

.d2 [data-comp-tono="oscuro"] .d2-res-cen__lineas circle {
  stroke: rgba(126, 225, 142, .45);
}

.d2 [data-comp-tono="oscuro"] .d2-res-cen::after {
  border-color: rgba(126, 225, 142, .18);
}

.d2 [data-comp-tono="oscuro"] :is(.d2-res-cen__eyebrow, .d2-res-cen__cifras b) {
  color: #B5DBAD;
/* 8.24:1 sobre #333333 */
}

.d2 [data-comp-tono="oscuro"] :is(.d2-res-cen__firma span,
                                  .d2-res-cen__cifras span,
                                  .d2-res-cen__flecha) {
  color: #BFBFBF;              /* 6.87:1 */
}

.d2 [data-comp-tono="oscuro"] .d2-res-cen__cifras > div:not(:last-child),
.d2 [data-comp-tono="oscuro"] .d2-res-cen__flecha {
  border-color: rgba(255, 255, 255, .22);
}

.d2 [data-comp-tono="oscuro"] .d2-res-cen__punto {
  background: rgba(255, 255, 255, .30);
}

/* --- Foco y movimiento reducido --- */

.d2 .d2-res-cen :is(button):focus-visible {
  outline: 3px solid var(--c-verde-marca, #39B54A);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-res-cen :is([role="status"], .d2-res-cen__cifras b,
                      .d2-res-cen__cifras span, .d2-res-cen__punto,
                      .d2-res-cen__flecha) {
    transition: none;
  }
}

/* --- Adaptacion --- */

@media (max-width: 900px) {
  .d2 .d2-res-cen__cifras {
    grid-template-columns: 1fr;
  }

  .d2 .d2-res-cen__cifras > div:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--c-borde, #E4E4E4);
  }

  .d2 [data-comp-tono="oscuro"] .d2-res-cen__cifras > div:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, .22);
  }

  /* El trazado se apaga: a este ancho estorba mas que aporta */
  .d2 .d2-res-cen__lineas { opacity: .22; }
}

/* ==========================================================================
   SECCION 9 — PREGUNTAS, SEGUNDA VERSION

   Lo que faltaba en la primera, y que ninguna evidencia de legibilidad iba
   a darme: jerarquia, asimetria, y algo que mirar.

   Tecnicas verificadas midiendo en los tres motores, no supuestas:

     :has()                soporte universal      -> base del diseno
     ::details-content     soporte universal      -> base
     transition-behavior   soporte universal      -> base
     interpolate-size      SOLO Chromium          -> mejora progresiva
     scroll-driven         falta Firefox          -> tras @supports

   Por eso la animacion de altura va detras de @supports y nada depende de
   ella: en Safari y Firefox el panel abre de golpe y se ve perfecto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPCION 1 — LA FICHA QUE RESPONDE

   La estructura: preguntas a la izquierda, ficha a la derecha. Asimetrica
   --58/42-- porque dos columnas iguales es lo mas parecido a un documento
   de Word que existe.

   La ficha se rellena por CSS puro con attr(), leyendo los data- del item
   abierto. Sin JS para la sincronia: el estado ya lo lleva <details>.
   -------------------------------------------------------------------------- */

.d2 .d2-faq-dato {
  background: var(--comp-faq, #FFFFFF);
  padding-block: clamp(64px, 7vw, 104px);
}

.d2 .d2-faq-dato__inner {
  /* El contenedor de la web es --d2-ancho (1280px). Antes aqui habia
     --ancho-max, que vale 1440 y venia de la hoja anterior: la seccion
     salia 160px mas ancha por lado que el resto. */
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

.d2 .d2-faq-dato__cabecera { margin-bottom: clamp(36px, 4vw, 56px); }

.d2 :is(.d2-faq-dato__eyebrow, .d2-faq-num__eyebrow, .d2-faq-rol__eyebrow) {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-faq-dato__titulo {
  margin: 0;
  /* 30ch y no 22: con el titular a 36px las lineas son mas cortas, y 22ch
     lo estrechaba tanto que partia el texto de mas. El <br> del marcado ya
     decide donde corta. */
  max-width: 30ch;
  /* El titular del sistema. Antes media hasta 52px con peso 400: era mas
     grande que cualquier otro titulo de seccion --todos van a 36px-- y
     el peso normal lo dejaba fuera del resto de la web, que usa 800. */
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--c-texto, #333333);
  /* Evita que la ultima linea quede con una palabra suelta */
  text-wrap: balance;
}

.d2 .d2-faq-dato__titulo span { color: var(--c-verde-hover, #026F00); }

.d2 .d2-faq-dato__cuerpo {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(36px, 4.5vw, 76px);
  align-items: start;
}

/* --- Las preguntas --- */

.d2 .d2-faq-dato__item {
  border-bottom: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-faq-dato__item:first-child {
  border-top: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-faq-dato__item summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 19px 0;
  cursor: pointer;
  list-style: none;
  color: var(--c-texto, #333333);
  transition: color .18s;
}

/* El triangulo nativo fuera: se sustituye por el numeral, que ademas de
   indicar estado da orientacion (cuantas hay, en cual estoy). */
.d2 .d2-faq-dato__item summary::-webkit-details-marker { display: none; }
.d2 .d2-faq-dato__item summary::marker { content: ""; }

.d2 .d2-faq-dato__n {
  flex: 0 0 auto;
  min-width: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-texto-suave, #6B6B6B);
  transition: color .18s;
}

.d2 .d2-faq-dato__q {
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
  line-height: 1.35;
}

.d2 .d2-faq-dato__item summary:hover { color: var(--c-verde-hover, #026F00); }

/* El item abierto. Tres senales, no solo color: el numeral pasa a verde, se
   pone en negrita y aparece un filete a la izquierda. WCAG 1.4.1 es Nivel A
   y prohibe que el color sea la unica senal. */
.d2 .d2-faq-dato__item[open] {
  position: relative;
  padding-left: 16px;
}

.d2 .d2-faq-dato__item[open]::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  background: var(--c-verde-marca, #39B54A);
}

.d2 .d2-faq-dato__item[open] .d2-faq-dato__n {
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-faq-dato__r {
  padding: 0 0 20px 42px;
  max-width: 62ch;
}

.d2 .d2-faq-dato__r p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-faq-dato__r p:last-child { margin-bottom: 0; }

/* --- La ficha --- */

.d2 .d2-faq-dato__ficha {
  position: sticky;
  top: 104px;
}

/* El radio del sistema, como las tarjetas de problema, resenas, prueba y
   equipo: esta ficha cumple la misma funcion --un bloque de contenido
   flotando sobre el fondo-- asi que debe verse igual.

   El CTA y la ficha del mapa se quedan en 0 a proposito: alli las esquinas
   vivas significan algo. El CTA presenta el precio como una linea de
   presupuesto, y un albaran no tiene esquinas redondeadas; la ficha del
   mapa es una lectura de instrumento, no una tarjeta. */
.d2 .d2-faq-dato__ficha-caja {
  padding: clamp(26px, 2.6vw, 38px);
  background: var(--comp-blanco, #FFFFFF);
  border: 1px solid var(--c-borde, #E4E4E4);
  border-top: 4px solid var(--c-verde-marca, #39B54A);
  border-radius: var(--d2-radio-md, 16px);
}

.d2 .d2-faq-dato__ficha-eti {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-verde-hover, #026F00);
}

/* La cifra grande. El techo de 40px del sistema de diseno se respeta:
   clamp() nunca pasa de ahi. */
.d2 .d2-faq-dato__ficha-cifra {
  margin: 0 0 14px;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-texto, #333333);
}

.d2 .d2-faq-dato__ficha-nota {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-texto-suave, #6B6B6B);
}

/* La entrada de la ficha al cambiar de pregunta. Corta --180ms-- porque al
   segundo clic una animacion lenta se siente pesada. */
@keyframes d2FichaEntra {
  from { opacity: .4; transform: translateY(5px); }
  to   { opacity: 1;  transform: none; }
}

.d2 .d2-faq-dato__ficha-caja { animation: d2FichaEntra .18s ease-out; }

.d2 .d2-faq-dato__pie,
.d2 .d2-faq-num__pie,
.d2 .d2-faq-rol__pie {
  margin: clamp(30px, 3.5vw, 46px) 0 0;
  font-size: 15px;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 :is(.d2-faq-dato__pie, .d2-faq-num__pie, .d2-faq-rol__pie) a {
  font-weight: 700;
  color: var(--c-verde-hover, #026F00);
}

@media (max-width: 900px) {
  .d2 .d2-faq-dato__cuerpo { grid-template-columns: 1fr; }
  /* La ficha pasa arriba: abajo quedaria despues de diez preguntas y nadie
     la relacionaria con lo que acaba de abrir. */
  .d2 .d2-faq-dato__ficha { position: static; order: -1; }
  .d2 .d2-faq-dato__r { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   OPCION 2 — NUMERADA CON INDICE LATERAL
   -------------------------------------------------------------------------- */

.d2 .d2-faq-num {
  background: var(--comp-faq, #FFFFFF);
  padding-block: clamp(64px, 7vw, 104px);
}

.d2 .d2-faq-num__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 5vw, 90px);
  /* El contenedor de la web es --d2-ancho (1280px). Antes aqui habia
     --ancho-max, que vale 1440 y venia de la hoja anterior: la seccion
     salia 160px mas ancha por lado que el resto. */
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

.d2 .d2-faq-num__indice {
  position: sticky;
  top: 104px;
}

.d2 .d2-faq-num__titulo {
  margin: 0 0 18px;
  /* El titular del sistema. Antes media hasta 46px con peso 400: era mas
     grande que cualquier otro titulo de seccion --todos van a 36px-- y
     el peso normal lo dejaba fuera del resto de la web, que usa 800. */
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--c-texto, #333333);
}

.d2 .d2-faq-num__conteo {
  margin: 0;
  font-size: 14px;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-faq-num__conteo span {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--c-verde-hover, #026F00);
  display: block;
  margin-bottom: 4px;
}

.d2 .d2-faq-num__item {
  border-bottom: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-faq-num__item:first-child {
  border-top: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-faq-num__item summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 21px 0;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  color: var(--c-texto, #333333);
  transition: color .18s;
}

.d2 .d2-faq-num__item summary::-webkit-details-marker { display: none; }
.d2 .d2-faq-num__item summary::marker { content: ""; }

.d2 .d2-faq-num__n {
  flex: 0 0 auto;
  min-width: 30px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-faq-num__item summary:hover { color: var(--c-verde-hover, #026F00); }

/* Abierto: numeral verde + filete. Dos senales ademas del color. */
.d2 .d2-faq-num__item[open] .d2-faq-num__n {
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-faq-num__item[open] {
  position: relative;
  padding-left: 18px;
}

.d2 .d2-faq-num__item[open]::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  background: var(--c-verde-marca, #39B54A);
}

.d2 .d2-faq-num__r {
  padding: 0 0 22px 48px;
  max-width: 68ch;
}

.d2 .d2-faq-num__r p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-faq-num__r p:last-child { margin-bottom: 0; }

/* La apertura animada. Solo Chromium la ejecuta --interpolate-size no
   existe en Safari ni Firefox, medido--, asi que va tras @supports y nada
   del diseno depende de ella. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .d2 .d2-faq-num__item {
      interpolate-size: allow-keywords;
    }

    .d2 .d2-faq-num__item::details-content {
      height: 0;
      overflow: hidden;
      transition: height .28s cubic-bezier(.4, 0, .2, 1),
                  content-visibility .28s allow-discrete;
    }

    .d2 .d2-faq-num__item[open]::details-content { height: auto; }
  }
}

@media (max-width: 1000px) {
  .d2 .d2-faq-num__inner { grid-template-columns: 1fr; gap: 32px; }
  .d2 .d2-faq-num__indice { position: static; }
  .d2 .d2-faq-num__r { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   OPCION 3 — POR ROL
   -------------------------------------------------------------------------- */

.d2 .d2-faq-rol {
  background: var(--comp-faq, #FFFFFF);
  padding-block: clamp(64px, 7vw, 104px);
}

.d2 .d2-faq-rol__inner {
  /* El contenedor de la web es --d2-ancho (1280px). Antes aqui habia
     --ancho-max, que vale 1440 y venia de la hoja anterior: la seccion
     salia 160px mas ancha por lado que el resto. */
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

/* 85ch y no 52: con 52 el titular caia en tres y hasta cuatro lineas, y
   eso hacia la cabecera muy alta. Medido con las metricas de Open Sans, el
   titular completo mide 1273px a 52px, asi que para partirlo en dos hacen
   falta al menos 636px --70ch--; con 85ch entra en dos en todo el rango. */
.d2 .d2-faq-rol__cabecera { max-width: 85ch; margin-bottom: clamp(40px, 4.5vw, 64px); }

.d2 .d2-faq-rol__titulo {
  margin: 0 0 14px;
  /* El titular del sistema. Antes media hasta 44px con peso 400: era mas
     grande que cualquier otro titulo de seccion --todos van a 36px-- y
     el peso normal lo dejaba fuera del resto de la web, que usa 800. */
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--c-texto, #333333);
  text-wrap: balance;
}

.d2 .d2-faq-rol__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-faq-rol__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
}

.d2 .d2-faq-rol__col {
  padding-top: 22px;
  border-top: 3px solid var(--c-verde-marca, #39B54A);
}

.d2 .d2-faq-rol__marca { margin-bottom: 22px; }

.d2 .d2-faq-rol__num {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-faq-rol__quien {
  margin: 0 0 5px;
  font-size: 19px;
  line-height: 1.25;
  color: var(--c-texto, #333333);
}

.d2 .d2-faq-rol__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-faq-rol__lista { margin: 0; }

.d2 .d2-faq-rol__lista dt {
  margin-bottom: 7px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-texto, #333333);
}

.d2 .d2-faq-rol__lista dd {
  margin: 0 0 22px;
  padding-bottom: 22px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333333);
  border-bottom: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-faq-rol__lista dd:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

@media (max-width: 1000px) {
  .d2 .d2-faq-rol__cols { grid-template-columns: 1fr; gap: 40px; }
}

/* --------------------------------------------------------------------------
   SOBRE FONDO OSCURO — las tres
   -------------------------------------------------------------------------- */

.d2 [data-comp-tono="oscuro"] :is(.d2-faq-dato__eyebrow, .d2-faq-num__eyebrow,
                                  .d2-faq-rol__eyebrow, .d2-faq-dato__titulo span,
                                  .d2-faq-dato__ficha-eti, .d2-faq-num__conteo span,
                                  .d2-faq-rol__num) {
  color: #B5DBAD;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-faq-dato__item[open] .d2-faq-dato__n,
                                  .d2-faq-num__item[open] .d2-faq-num__n) {
  color: #B5DBAD;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-faq-dato__item, .d2-faq-num__item,
                                  .d2-faq-rol__lista dd) {
  border-color: rgba(255, 255, 255, .20);
}

.d2 [data-comp-tono="oscuro"] :is(.d2-faq-dato__pie a, .d2-faq-num__pie a,
                                  .d2-faq-rol__pie a) {
  color: #B5DBAD;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-faq-dato__item summary:hover,
                                  .d2-faq-num__item summary:hover) {
  color: #B5DBAD;
}

/* --------------------------------------------------------------------------
   FOCO Y MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */

.d2 :is(.d2-faq-dato, .d2-faq-num, .d2-faq-rol) :is(summary, a, button):focus-visible {
  outline: 3px solid var(--c-verde-marca, #39B54A);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-faq-dato__ficha-caja { animation: none; }
  .d2 :is(.d2-faq-dato__item summary, .d2-faq-num__item summary,
          .d2-faq-dato__n) { transition: none; }
}

/* --------------------------------------------------------------------------
   EL RESUMEN DE PRECIOS, BAJO LA FICHA

   La columna derecha medía 613px de vacío cuando la respuesta abierta era
   corta. En vez de estirar la ficha --que habria sido relleno-- va debajo
   un resumen de precios, que es informacion util de verdad: NN/g documenta
   que el precio es "the top most needed piece of information online" para
   compradores B2B.

   Asi, mientras se leen las preguntas, las cuatro cifras estan siempre a la
   vista sin tener que ir a la seccion de servicios.
   -------------------------------------------------------------------------- */

.d2 .d2-faq-dato__resumen {
  margin-top: 18px;
  padding: 22px 24px 20px;
  border: 1px solid var(--c-borde, #E4E4E4);
  border-radius: var(--d2-radio-md, 16px);
}

.d2 .d2-faq-dato__resumen-eti {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-faq-dato__resumen dl { margin: 0; }

.d2 .d2-faq-dato__resumen dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-borde-suave, #EFEFEF);
}

.d2 .d2-faq-dato__resumen dl > div:last-child { border-bottom: 0; }

.d2 .d2-faq-dato__resumen dt {
  font-size: 13px;
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-faq-dato__resumen dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-texto, #333333);
}

.d2 .d2-faq-dato__resumen-pie {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 [data-comp-tono="oscuro"] .d2-faq-dato__resumen,
.d2 [data-comp-tono="oscuro"] .d2-faq-dato__resumen dl > div {
  border-color: rgba(255, 255, 255, .20);
}

/* ==========================================================================
   SOLUTIONS — OPCION 1: LA SECUENCIA

   Cuatro pasos numerados, conectados por una linea. Sustituye a la version
   de tres rutas paralelas.

   Todo con tokens del sistema, asi que sigue al selector de composicion.
   Los valores del diseno original se traducen: el verde de los circulos y
   los numeros pasa al de marca, y el texto a los grises del manual.

   Medido sobre los tres fondos posibles:

                          blanco   gris    negro (invertido)
     titular ..........   12.63    11.39   12.63
     eyebrow ..........    6.41     5.78    8.60
     pregunta .........   12.63    11.39   12.63
     nombre ...........   12.63    11.39   12.63
     descripcion ......    6.69     6.03    6.87
     enlace ...........    6.41     5.78    8.60
     circulo (borde) ..    4.13     3.72    4.74   (min 3, no textual)
   ========================================================================== */

.d2 .d2-rutas-sec {
  background: var(--comp-rutas, #FFFFFF);
  padding-block: clamp(64px, 7vw, 104px);
}

.d2 .d2-rutas-sec__inner {
  /* El contenedor de la web es --d2-ancho (1280px). Antes aqui habia
     --ancho-max, que vale 1440 y venia de la hoja anterior: la seccion
     salia 160px mas ancha por lado que el resto. */
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

/* --- La cabecera, a dos columnas --- */

.d2 .d2-rutas-sec__cabecera {
  display: grid;
  /* 1.3fr y no 1.15: el titular necesita 633px para que "From scattered
     signals to" quepa en una linea, y con 1.15 la columna daba 607. */
  grid-template-columns: 1.3fr 1fr;
  /* 65 de techo y no 90: con 90 las dos columnas se separaban de mas y la
     cabecera se leia como dos bloques sueltos en vez de uno. */
  gap: clamp(32px, 4.5vw, 65px);
  align-items: start;
  margin-bottom: clamp(48px, 6vw, 86px);
}

.d2 .d2-rutas-sec__eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-rutas-sec__titulo {
  margin: 0;
  /* 50px de techo y no 58: a 58 la primera linea pedia 732px y no cabia en
     su columna, asi que el navegador partia en "scattered" y salian tres
     lineas. A 50 pide 633 y entra con 9px de sobra.

     De paso deja de ser el titular mas grande de la web: el resto de
     secciones usa 49px a 1440. */
  font-size: clamp(32px, 3.5vw, 50px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--c-texto, #333333);
  /* Sin esto la segunda linea queda con una palabra suelta */
  text-wrap: balance;
}

.d2 .d2-rutas-sec__lead {
  /* Alineado con la PRIMERA LINEA del titular, no con el borde de su caja.

     La columna izquierda arranca con el eyebrow --14.4px de alto mas 18 de
     margen-- asi que el titular empieza 32px mas abajo. Antes el lead solo
     bajaba hasta 22px y quedaba unos 28px por encima; medido a 1280, 1440 y
     1920.

     El calculo: lo que ocupa el eyebrow (32px) mas la mitad de la
     diferencia entre la caja de linea del titular y la del lead.

     El clamp del titular se repite entero a proposito: un `em` aqui se
     mediria sobre los 17px del lead, no sobre el tamano del titular, y el
     ajuste se quedaba en 27px cuando hacen falta 48. */
  margin: calc(32px + (clamp(32px, 3.5vw, 50px) * 1.04 - 17px * 1.6) / 2) 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-texto-cuerpo, #333333);
  max-width: 46ch;
}

/* --- Los cuatro pasos --- */

.d2 .d2-rutas-sec__pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-rutas-sec__paso {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(20px, 2.4vw, 34px) 4px 0;
}

/* El filete vertical que separa cada paso del siguiente. Empieza bajo el
   circulo, no arriba del todo, para que la linea horizontal pase limpia. */
.d2 .d2-rutas-sec__paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 78px;
  bottom: 0;
  right: 0;
  width: 1px;
  background: var(--c-borde, #E4E4E4);
}

/* Los pasos 2, 3 y 4 se separan del filete anterior */
.d2 .d2-rutas-sec__paso + .d2-rutas-sec__paso {
  padding-left: clamp(20px, 2.4vw, 34px);
}

/* --- El circulo y la linea que los conecta --- */

.d2 .d2-rutas-sec__marca {
  position: relative;
  display: block;
  margin-bottom: clamp(34px, 4vw, 56px);
  /* La altura la fija el circulo; el resto es la linea */
  height: 56px;
}

.d2 .d2-rutas-sec__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-verde-hover, #026F00);
  border: 1.5px solid var(--c-verde-marca, #39B54A);
  border-radius: 50%;
}

/* La linea horizontal: sale del circulo hacia la derecha y se corta en el
   borde del paso. Es la misma idea del mapa de cartera --nodos enlazados--
   y dice que hay un orden, no cuatro opciones sueltas.

   El trazo no es recto: es un latido de electrocardiograma --onda P, pico
   QRS y onda T--, que es lo que vende Rede dicho en una linea. Se dibuja
   con una mascara SVG y no con marcado: asi no hay que meter un <svg> en
   los cuatro pasos y la maqueta de Elementor no se complica.

   El SVG no lleva color: la mascara solo recorta, el color lo pone el
   fondo de debajo. Por eso el mismo trazo sirve en claro y en oscuro.
   vector-effect mantiene el grosor del trazo aunque el viewBox se estire
   al ancho del tramo, que cambia con la ventana. */
.d2 .d2-rutas-sec__marca {
  /* El trazo por defecto. Se define en la SECCION, no aqui, para que el
     selector de onda pueda sobreescribirlo poniendo la variable en
     .d2-rutas-sec: una regla sobre .marca es mas especifica que un style
     en el padre y ganaria siempre, asi que los botones no harian nada. */
  --traza-latido: var(--traza-onda, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 34' preserveAspectRatio='none'%3E%3Cpath d='M0 17h64q5 0 8-5t8 5h6l6 12l9 -26l7 14h7q5 0 9 6t9-6h83' fill='none' stroke='%23000' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"));
}

/* UNA SOLA capa para toda la linea: el mismo trazo lleva el gris de reposo
   y, encima, la luz que lo recorre.

   Se probo partirlo en dos --una recta plana debajo y el latido solo donde
   pasaba la senal-- y no funciona: son formas distintas y por mucho que se
   releven se ven dos lineas que no cuadran. El propio path las delataba,
   ademas: empezaba en y=17 y acababa en y=22, cinco unidades mas abajo, asi
   que la recta y el latido nunca podian empalmar.

   Regla del path: la suma de todos los dy tiene que dar CERO. Asi entra y
   sale a la misma altura y la linea se lee como una sola, continua. */
.d2 .d2-rutas-sec__marca::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 56px;
  right: calc(clamp(20px, 2.4vw, 34px) * -1);
  /* Alto suficiente para que quepa el pico sin tocar los circulos */
  height: 34px;
  background: var(--c-borde, #E4E4E4);
  transform: translateY(-50%);
  -webkit-mask: var(--traza-latido) center / 100% 100% no-repeat;
          mask: var(--traza-latido) center / 100% 100% no-repeat;
}

/* El ultimo no continua: la secuencia termina ahi */
.d2 .d2-rutas-sec__paso:last-child .d2-rutas-sec__marca::after {
  display: none;
}

/* --- El contenido de cada paso --- */

.d2 .d2-rutas-sec__preg {
  margin: 0 0 clamp(28px, 3vw, 46px);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-texto, #333333);
}

.d2 .d2-rutas-sec__nombre {
  margin: 0 0 16px;
  font-size: clamp(19px, 1.7vw, 23px);
  /* 700 y no 400: era el unico subtitulo de la web en peso normal. Todos
     los demas --equipo, resenas, prueba, FAQ y las otras variantes de esta
     misma seccion-- usan 700 u 800. */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--c-texto, #333333);
}

.d2 .d2-rutas-sec__desc {
  /* auto arriba empuja el enlace al fondo: los cuatro enlaces quedan
     alineados aunque las descripciones midan distinto */
  margin: 0 0 auto;
  padding-bottom: 28px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-rutas-sec__enlace {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-verde-hover, #026F00);
  text-decoration: none;
}

.d2 .d2-rutas-sec__enlace svg { transition: transform .18s ease; }
.d2 .d2-rutas-sec__enlace:hover svg { transform: translateX(3px); }
.d2 .d2-rutas-sec__enlace:hover { text-decoration: underline; }

/* La zona pulsable cubre el paso entero: cuatro columnas con un enlace
   pequeno al fondo son cuatro dianas diminutas. El ::after superpuesto no
   mueve nada del diseno. */
.d2 .d2-rutas-sec__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Aqui habia la version original del hover: rellenaba el circulo de golpe
   con background a secas. Al escribir la version suave anadi la nueva
   regla debajo pero NO borre esta, y su shorthand seguia eliminando el
   gradiente al pasar el raton. El token se animaba --por eso mis medidas
   decian que todo iba bien-- pero no habia gradiente que pintar. */

.d2 .d2-rutas-sec__paso:hover .d2-rutas-sec__enlace svg {
  transform: translateX(3px);
}

/* --- Sobre fondo oscuro --- */

.d2 [data-comp-tono="oscuro"] :is(.d2-rutas-sec__eyebrow, .d2-rutas-sec__enlace) {
  color: #B5DBAD;
/* 8.24:1 sobre #333333 */
}

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__num {
  color: #B5DBAD;
  /* background-COLOR y no el atajo: `background` a secas pone tambien
     background-image:none, y con eso borraba el radial-gradient que dibuja
     el llenado del circulo. Como esta regla tiene mas especificidad que la
     que declara el degradado --(0,3,0) contra (0,2,0)-- en tono oscuro no
     habia relleno: el hover no se animaba y el circulo quedaba vacio.

     Es el mismo error del hover del hero: un shorthand que borra la capa
     que no menciona. */
  background-color: var(--comp-rutas, #333333);
}

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__desc {
  color: #BFBFBF;                        /* 6.87:1 */
}

/* Un pseudoelemento NO puede ir dentro de :is(): escrito asi la regla
   entera se descarta en silencio. Van separadas. La recta de reposo vive
   ahora en ::before, que es la que hay que aclarar sobre fondo oscuro. */
.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__paso::after {
  background: rgba(255, 255, 255, .20);
}

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__marca::after {
  background: rgba(255, 255, 255, .20);
}

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__paso:hover .d2-rutas-sec__num {
  color: #333333;
}

/* --- Foco --- */

.d2 .d2-rutas-sec__enlace:focus-visible {
  outline: 3px solid var(--c-verde-marca, #39B54A);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-rutas-sec__enlace svg { transition: none; }
}

/* --- Adaptacion --- */

@media (max-width: 1000px) {
  /* La cabecera se apila desde 1000 para abajo, en todas las pantallas. */
  .d2 .d2-rutas-sec__cabecera { grid-template-columns: 1fr; gap: 22px; }
  .d2 .d2-rutas-sec__lead { margin-top: 0; max-width: none; }
}

/* Solo la franja de DOS columnas. El giro de la linea de abajo no puede
   alcanzar a movil: alli los pasos van apilados y la linea ya apunta bien,
   asi que girarla dejaba un trozo de 26px invisible. */
@media (max-width: 1000px) and (min-width: 641px) {
  .d2 .d2-rutas-sec__pasos { grid-template-columns: repeat(2, 1fr); row-gap: 52px; }

  /* Con dos columnas, el filete del segundo sobra */
  .d2 .d2-rutas-sec__paso:nth-child(2n)::after { display: none; }

  /* En dos columnas la linea del par apunta al vacio: a su derecha no hay
     nada. Probe girarla 90 grados para que bajase a la fila siguiente,
     pero la caja mide 379px de ancho y al girarla sobre su centro el trazo
     se sale de la tarjeta: no se veia nada.

     Se queda oculta, como estaba. Es la unica franja donde no caben las
     cuatro lineas, y forzarlas costaria reescribir la rejilla. En movil
     --una columna-- y en escritorio --cuatro-- si estan las cuatro. */
  .d2 .d2-rutas-sec__paso:nth-child(2n) .d2-rutas-sec__marca::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .d2 .d2-rutas-sec__pasos { grid-template-columns: 1fr; row-gap: 44px; }

  .d2 .d2-rutas-sec__paso,
  .d2 .d2-rutas-sec__paso + .d2-rutas-sec__paso { padding-inline: 0; }

  /* En una columna, el filete vertical no separa nada: pasa a horizontal */
  .d2 .d2-rutas-sec__paso::after { display: none; }

  .d2 .d2-rutas-sec__paso:not(:last-child) {
    padding-bottom: 40px;
    border-bottom: 1px solid var(--c-borde, #E4E4E4);
  }

  .d2 [data-comp-tono="oscuro"] .d2-rutas-sec__paso:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, .20);
  }

  /* La linea horizontal se alarga hasta el borde */
  .d2 .d2-rutas-sec__marca::after { right: 0; }

  /* Los cuatro pasos llevan linea (8/9/2026).

     En dos columnas la del paso par apuntaba al vacio --no habia nada a su
     derecha-- y por eso se ocultaba. Apilados en una columna cada paso
     tiene al siguiente debajo, asi que esa regla ya no describe la
     realidad: solo dejaba dos lineas de cuatro. Se devuelven todas menos
     la del ultimo, que es donde termina la secuencia. */
  .d2 .d2-rutas-sec__paso:nth-child(2n) .d2-rutas-sec__marca::after {
    display: block;
  }

  /* El cuarto tambien la lleva, por decision del usuario: apilados, los
     cuatro puntos se leen iguales entre si. Su linea no conecta con nada
     --es el ultimo-- pero visualmente cierra la columna. */
  .d2 .d2-rutas-sec__paso:last-child .d2-rutas-sec__marca::after {
    display: block;
  }

  .d2 .d2-rutas-sec__marca { margin-bottom: 26px; }
  .d2 .d2-rutas-sec__preg { margin-bottom: 22px; }
  .d2 .d2-rutas-sec__desc { padding-bottom: 20px; }
}

/* ==========================================================================
   EL PULSO DE LA SECUENCIA

   Un destello de luz recorre la linea del 01 al 04, y cada circulo se
   enciende cuando el pulso llega a el. Como una senal que viaja por un
   cable: es el mismo lenguaje del mapa de cartera --nodos enlazados-- y
   dice lo que la seccion quiere decir, que hay un orden.

   POR QUE ASI Y NO DE OTRA FORMA

   Se descarto scroll-driven animation: medido, no existe en Firefox. Aqui
   se usa @property con un gradiente animado, que funciona en los tres
   motores.

   El gradiente lleva TRES paradas y no dos: una sola franja clara se ve
   como una barra que se desliza. Con un nucleo brillante y dos colas que
   se apagan, se lee como luz.

   Los tiempos: 1.1s de recorrido por tramo, 0.55s de solape entre uno y el
   siguiente --la senal entra en el circulo antes de que el anterior
   termine, que es lo que da continuidad-- y 5s de espera antes de repetir.
   Sin esa espera seria un letrero luminoso; con ella es un latido.

   ACCESIBILIDAD

   WCAG 2.2.2 obliga a poder detener el movimiento automatico que dure mas
   de cinco segundos. El ciclo completo dura 13s, asi que aplica: con
   prefers-reduced-motion todo se apaga y queda la linea estatica, que ya
   se ve bien.

   Y el pulso NO comunica nada por si solo: el orden ya lo dan los numeros
   01-04 y la <ol> del marcado. Es refuerzo, no informacion (WCAG 1.4.1).
   ========================================================================== */

/* El tipo del token que se anima. Sin @property el navegador no sabe que
   es un porcentaje y salta del principio al final sin transicion. */
@property --pulso {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -30%;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- La luz que recorre la linea --- */

  .d2 .d2-rutas-sec__marca::after {
    /* La linea base sigue siendo la de siempre; encima va el gradiente que
       se mueve. Dos capas en la misma propiedad --el gris va el ultimo, que
       es el de mas abajo-- y la mascara del latido, que se hereda de la
       regla de arriba, recorta las dos: el mismo trazo esta siempre y se
       enciende al paso de la luz.

       El gris hay que repetirlo aqui: `background` a secas resetea el
       background-color de la regla base. */
    background:
      linear-gradient(90deg,
        transparent calc(var(--pulso) - 20%),
        rgba(57, 181, 74, .35) calc(var(--pulso) - 11%),
        rgba(57, 181, 74, .95) calc(var(--pulso) - 2%),
        #1B7A2C var(--pulso),
        rgba(57, 181, 74, .95) calc(var(--pulso) + 2%),
        rgba(57, 181, 74, .35) calc(var(--pulso) + 11%),
        transparent calc(var(--pulso) + 20%)),
      var(--c-borde, #E4E4E4);
    /* paused y no sin animacion: el guion solo anade .esta-viva y el
       navegador arranca desde el fotograma 0. Quitando y poniendo la
       animacion habria un salto. */
    animation: d2PulsoLinea 13s cubic-bezier(.45, 0, .35, 1) infinite;
    animation-play-state: paused;
  }

  /* La seccion entro en pantalla: la señal echa a andar. Lo pone
     d2-rutas-senal.js con un IntersectionObserver. */
  .d2 .d2-rutas-sec.esta-viva .d2-rutas-sec__marca::after {
    animation-play-state: running;
  }

  /* Cada tramo arranca 0.95s despues del anterior --proporcional al ciclo
     de 13s--. El solape es lo que hace que la senal parezca una sola y no
     cuatro destellos sueltos. */
  .d2 .d2-rutas-sec__paso:nth-child(2) .d2-rutas-sec__marca::after { animation-delay: .95s; }
  .d2 .d2-rutas-sec__paso:nth-child(3) .d2-rutas-sec__marca::after { animation-delay: 1.9s; }

  /* El cuarto solo tiene linea en movil --en escritorio cierra la
     secuencia sin ella--, asi que nunca se le dio turno y se quedaba en 0s:
     arrancaba a la vez que el primero y, estando abajo del todo, la
     secuencia parecia ir al reves. Con 2.85s cierra la cadena en orden.

     Va en su @media para no tocar escritorio, donde su linea no existe. */
  @media (max-width: 640px) {
    .d2 .d2-rutas-sec__paso:nth-child(4) .d2-rutas-sec__marca::after {
      animation-delay: 2.85s;
    }
  }
  /* El cuarto no lleva linea propia --cierra la secuencia--, pero el
     tercero si la tiene en una sola columna, asi que la cadena de tres
     tramos se recorre entera de arriba abajo. */


  @keyframes d2PulsoLinea {
    0%    { --pulso: -30%; }
    /* 15% de 13s = 1.9s de recorrido: la senal cruza mas despacio y se
       puede seguir con la vista. El resto del ciclo, en reposo. */
    15%   { --pulso: 130%; }
    100%  { --pulso: 130%; }
  }

  /* --- El circulo que se enciende al llegar la senal --- */

  /* El halo del pulso va en un pseudoelemento y NO en el circulo.

     El motivo, medido: una animacion CSS sobrescribe las transiciones
     sobre la misma propiedad. Con el pulso animando box-shadow del
     circulo, el halo del hover no podia transicionar --saltaba-- mientras
     que en el CTA, donde no hay pulso, si funcionaba. Esa era la
     diferencia. */
  .d2 .d2-rutas-sec__num::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    animation: d2PulsoNodo 13s cubic-bezier(.4, 0, .2, 1) infinite;
    animation-play-state: paused;
  }

  .d2 .d2-rutas-sec.esta-viva .d2-rutas-sec__num::before {
    animation-play-state: running;
  }

  .d2 .d2-rutas-sec__paso:nth-child(2) .d2-rutas-sec__num::before { animation-delay: .95s; }
  .d2 .d2-rutas-sec__paso:nth-child(3) .d2-rutas-sec__num::before { animation-delay: 1.9s; }
  .d2 .d2-rutas-sec__paso:nth-child(4) .d2-rutas-sec__num::before { animation-delay: 2.85s; }

  /* El destello es sutil a proposito: el borde engorda medio pixel, aparece
     un halo tenue y el numero sube un punto de peso. Nada de saltos de
     escala, que en una retícula de cuatro columnas se ve nervioso. */
  @keyframes d2PulsoNodo {
    0%, 5%    { box-shadow: 0 0 0 0 rgba(57, 181, 74, 0); }
    10%       { box-shadow: 0 0 0 7px rgba(57, 181, 74, .26); }
    22%, 100% { box-shadow: 0 0 0 0 rgba(57, 181, 74, 0); }
  }

  /* --- Al pasar el raton, el pulso cede --- */

  /* Si alguien esta leyendo un paso, la animacion estorba. :has() permite
     apagarla desde el contenedor cuando cualquier paso recibe el raton.
     Medido: soporte en los tres motores. */
  /* Ojo: un pseudoelemento NO puede ir dentro de :is(). Escrito asi la
     regla entera se descarta en silencio y la pausa no ocurria. Van
     separadas. */
  /* La senal NO se pausa al pasar el raton: la linea sigue su ciclo pase lo
     que pase. Antes se detenia toda la seccion al apuntar cualquier paso, y
     eso es justo lo contrario de lo que la linea cuenta --que hay corriente
     circulando--. Es un flujo de fondo, no un control del usuario. */
}

/* --- Sobre fondo oscuro, la luz es mas clara --- */

@media (prefers-reduced-motion: no-preference) {
  .d2 [data-comp-tono="oscuro"] .d2-rutas-sec__marca::after {
    background:
      linear-gradient(90deg,
        transparent calc(var(--pulso) - 22%),
        rgba(176, 225, 183, .35) calc(var(--pulso) - 12%),
        rgba(176, 225, 183, .95) calc(var(--pulso) - 2%),
        #FFFFFF var(--pulso),
        rgba(176, 225, 183, .95) calc(var(--pulso) + 2%),
        rgba(176, 225, 183, .35) calc(var(--pulso) + 12%),
        transparent calc(var(--pulso) + 22%)),
      rgba(255, 255, 255, .20);
  }

  .d2 [data-comp-tono="oscuro"] .d2-rutas-sec__num::before {
    animation-name: d2PulsoNodoOscuro;
  }

  @keyframes d2PulsoNodoOscuro {
    0%, 5%    { box-shadow: 0 0 0 0 rgba(126, 225, 142, 0); }
    10%       { box-shadow: 0 0 0 7px rgba(126, 225, 142, .32); }
    22%, 100% { box-shadow: 0 0 0 0 rgba(126, 225, 142, 0); }
  }
}

/* ==========================================================================
   EL HOVER, EN EL MISMO LENGUAJE QUE EL PULSO

   El problema: el pulso es una senal que viaja con suavidad, y el hover
   cambiaba el circulo de golpe --sin una sola transicion, saltando de
   blanco a verde--. Dos lenguajes distintos en la misma seccion.

   La idea que ordena la correccion: si el pulso es una senal electrica que
   recorre el circuito, pasar el raton sobre un paso es ENERGIZAR ese nodo.
   No encenderlo de golpe: cargarlo.

   Lo que ocurre al apuntar, todo con la misma curva y tiempos escalonados:

     el circulo se llena de verde desde el centro    260ms
     el halo se expande, como el del pulso           260ms
     el numero cambia de color                       180ms
     la linea del tramo se ilumina                   320ms
     el enlace y su flecha se adelantan              200ms

   La curva es cubic-bezier(.32,.72,0,1) --la de Apple-- que arranca rapido
   y frena largo: es la que da sensacion de peso. Para el color se usa la
   simetrica (.4,0,.2,1), porque en un fundido la de Apple pierde la mitad
   de la opacidad en tres fotogramas y se lee como corte.

   Al SALIR todo vuelve mas despacio --420ms-- porque una reversion rapida
   se siente brusca. Es el detalle que mas se nota y el que menos se hace.
   ========================================================================== */

/* El relleno crece desde el centro en vez de aparecer de golpe: un
   gradiente radial cuyo radio se anima, no un background-color. Asi el
   verde ENTRA en vez de encenderse.

   Van background-image y background-color POR SEPARADO, no el atajo
   'background'. El atajo con dos capas --gradiente + color-- daba
   backgroundImage: none al resolverse contra el valor que ya habia puesto
   la regla anterior. Preguntado al navegador: declaraba las dos capas y el
   resultado final era ninguna. */
.d2 .d2-rutas-sec__num {
  background-image:
    radial-gradient(circle at 50% 50%,
      var(--c-verde-marca, #39B54A) 0 var(--num-carga, 0%),
      transparent var(--num-carga, 0%) 100%);
  background-color: var(--comp-rutas, #FFFFFF);
}

/* El tipo del token, para que el navegador sepa interpolarlo. Sin esto
   saltaria de 0% a 100% sin pasar por el medio. */
@property --num-carga {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.d2 .d2-rutas-sec__paso:hover .d2-rutas-sec__num {
  --num-carga: 72%;
  color: var(--c-sobre-verde, #333333);
  border-color: var(--c-verde-marca, #39B54A);
  /* El mismo halo que deja el pulso al pasar: el gesto se reconoce */
  box-shadow: 0 0 0 7px rgba(57, 181, 74, .16);
}

/* Al salir, mas despacio: una reversion rapida se siente brusca */
/* La entrada tenia 260ms con la curva de Apple, que arranca muy rapido:
   el relleno saltaba a mas de la mitad en los primeros fotogramas y se
   sentia tieso. Ahora entra en 420ms con la curva simetrica --el mismo
   tiempo que la salida-- asi que cargar y descargar se ven iguales. */
.d2 .d2-rutas-sec__num {
  transition-property: --num-carga, color, border-color, box-shadow;
  transition-duration: .42s, .3s, .42s, .42s;
  transition-timing-function:
    cubic-bezier(.4, 0, .2, 1),
    cubic-bezier(.4, 0, .2, 1),
    cubic-bezier(.4, 0, .2, 1),
    cubic-bezier(.4, 0, .2, 1);
}

/* --- La linea del tramo se ilumina con el paso --- */

.d2 .d2-rutas-sec__marca::after {
  transition: opacity .32s cubic-bezier(.4, 0, .2, 1);
}

/* El hover NO toca la linea, a proposito.

   Se intento --el tramo del paso apuntado se avivaba-- y no hay forma de que
   quede limpio: la recta y el latido son formas distintas, asi que pintar
   las dos a la vez da dos trazos cruzados, y relevarlas deja una costura.
   La linea tiene su propia vida, la senal que la recorre, y el hover no
   debe interrumpirla ni competir con ella. El paso apuntado ya responde de
   sobra: el circulo se rellena, el nombre se pone verde y la flecha avanza.

   Regla: una sola cosa manda sobre la linea, y es el pulso. */

/* --- El resto del paso acompana --- */

.d2 .d2-rutas-sec__nombre,
.d2 .d2-rutas-sec__preg {
  transition: color .22s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-rutas-sec__paso:hover .d2-rutas-sec__nombre {
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-rutas-sec__enlace {
  transition: gap .2s cubic-bezier(.32, .72, 0, 1);
}

.d2 .d2-rutas-sec__paso:hover .d2-rutas-sec__enlace {
  /* El hueco crece y la flecha se separa: el movimiento sale del texto,
     no de la flecha sola, que es lo que se siente mecanico. */
  gap: 13px;
}

/* --- Sobre fondo oscuro --- */

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__num {
  background-color: var(--comp-rutas, #333333);
}

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__paso:hover .d2-rutas-sec__num {
  color: #333333;
  box-shadow: 0 0 0 7px rgba(126, 225, 142, .22);
}

.d2 [data-comp-tono="oscuro"] .d2-rutas-sec__paso:hover .d2-rutas-sec__nombre {
  color: #B5DBAD;
}



/* --- Movimiento reducido --- */

@media (prefers-reduced-motion: reduce) {
  .d2 :is(.d2-rutas-sec__num, .d2-rutas-sec__marca::after,
          .d2-rutas-sec__nombre, .d2-rutas-sec__preg,
          .d2-rutas-sec__enlace) {
    transition: none;
  }

  /* Sin animacion el relleno tiene que ser inmediato, no ausente: el
     estado de hover sigue siendo necesario. */
  .d2 .d2-rutas-sec__paso:hover .d2-rutas-sec__num { --num-carga: 72%; }
}

/* ==========================================================================
   CTA — OPCIONES 2 Y 3

   La 1 se conserva tal cual: sobria, centrada, sobre negro. El problema era
   que la 2 la metia en una caja y la 3 le colgaba dos tarjetas: tres veces
   la misma composicion.

   Estas dos son estructuralmente distintas. Y las dos usan la misma
   gramatica de movimiento que quedo en Solutions --curva simetrica,
   entrada y salida iguales, 420ms-- para que la web se sienta de una pieza.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPCION 2 — LA FICHA DE ENCARGO
   -------------------------------------------------------------------------- */

.d2 .d2-cta-ficha {
  background: var(--comp-cta, #333333);
  padding-block: clamp(64px, 7vw, 104px);
}

.d2 .d2-cta-ficha__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(40px, 5vw, 86px);
  align-items: center;
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

.d2 .d2-cta-ficha__eyebrow,
.d2 .d2-cta-ruta__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B5DBAD;
/* 8.24:1 sobre #333333 */
}

.d2 .d2-cta-ficha__titulo {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

.d2 .d2-cta-ficha__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: #E8E8E8;                       /* 11.04:1 */
  max-width: 44ch;
}

/* --- El documento --- */

.d2 .d2-cta-ficha__doc {
  padding: clamp(26px, 2.8vw, 40px);
  background: #FFFFFF;
  /* El filete verde arriba: es el mismo recurso de la ficha del mapa y de
     la del FAQ. Marca "esto es un dato", no "esto es decoracion". */
  border-top: 4px solid var(--c-verde-marca, #39B54A);
}

.d2 .d2-cta-ficha__linea {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-cta-ficha__cargo {
  margin: 0 0 5px;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-texto, #333333);
}

.d2 .d2-cta-ficha__nota {
  margin: 0;
  font-size: 13px;
  color: var(--c-texto-suave, #6B6B6B);
}

/* La cifra. Respeta el techo de 40px del sistema. */
.d2 .d2-cta-ficha__cifra {
  margin: 0;
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--c-texto, #333333);
}

.d2 .d2-cta-ficha__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 20px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-cta-ficha__meta dt {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-cta-ficha__meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-texto, #333333);
}

.d2 .d2-cta-ficha__incluye { padding: 22px 0 24px; }

.d2 .d2-cta-ficha__incluye-eti {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-cta-ficha__incluye ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-cta-ficha__incluye li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-cta-ficha__incluye li:last-child { margin-bottom: 0; }

/* La marca de verificado, dibujada en CSS: dos trazos girados. Asi no
   depende de una fuente de iconos ni de un SVG por linea. */
.d2 .d2-cta-ficha__incluye li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--c-verde-hover, #026F00);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.d2 .d2-cta-ficha__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 22px;
  padding-top: 22px;
  border-top: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-cta-ficha__alt {
  margin: 0;
  font-size: 14px;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-cta-ficha__alt a {
  font-weight: 700;
  color: var(--c-verde-hover, #026F00);
}

@media (max-width: 1000px) {
  .d2 .d2-cta-ficha__inner { grid-template-columns: 1fr; gap: 34px; }
  .d2 .d2-cta-ficha__lead { max-width: none; }
}

/* --------------------------------------------------------------------------
   OPCION 3 — LO QUE PASA DESPUES
   -------------------------------------------------------------------------- */

.d2 .d2-cta-ruta {
  background: var(--comp-cta, #333333);
  padding-block: clamp(64px, 7vw, 104px);
}

.d2 .d2-cta-ruta__inner {
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

.d2 .d2-cta-ruta__cabecera {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 78px);
}

.d2 .d2-cta-ruta__titulo {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

.d2 .d2-cta-ruta__accion { text-align: right; }

.d2 .d2-cta-ruta__precio {
  margin: 14px 0 0;
  font-size: 13px;
  color: #BFBFBF;                       /* 6.87:1 */
}

/* --- Los cuatro pasos, con la linea de Solutions --- */

.d2 .d2-cta-ruta__pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-cta-ruta__paso {
  position: relative;
  padding-right: clamp(18px, 2.2vw, 32px);
}

.d2 .d2-cta-ruta__paso + .d2-cta-ruta__paso {
  padding-left: clamp(18px, 2.2vw, 32px);
}

.d2 .d2-cta-ruta__paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 74px;
  bottom: 0;
  right: 0;
  width: 1px;
  background: rgba(255, 255, 255, .16);
}

.d2 .d2-cta-ruta__marca {
  position: relative;
  display: block;
  height: 52px;
  margin-bottom: clamp(26px, 3vw, 40px);
}

.d2 .d2-cta-ruta__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #B5DBAD;
  border: 1.5px solid rgba(126, 225, 142, .55);
  border-radius: 50%;
  /* El relleno crece desde el centro, igual que en Solutions */
  background:
    radial-gradient(circle at 50% 50%,
      var(--c-verde-marca, #39B54A) 0 var(--ruta-carga, 0%),
      transparent var(--ruta-carga, 0%) 100%),
    var(--comp-cta, #333333);
  transition-property: --ruta-carga, color, border-color, box-shadow;
  transition-duration: .42s, .3s, .42s, .42s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@property --ruta-carga {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.d2 .d2-cta-ruta__marca::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 52px;
  right: calc(clamp(18px, 2.2vw, 32px) * -1);
  height: 1px;
  background: rgba(255, 255, 255, .16);
  transform: translateY(-.5px);
}

.d2 .d2-cta-ruta__paso:last-child .d2-cta-ruta__marca::after { display: none; }

.d2 .d2-cta-ruta__cuando {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #B5DBAD;
}

.d2 .d2-cta-ruta__que {
  margin: 0 0 12px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.25;
  color: #FFFFFF;
}

.d2 .d2-cta-ruta__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #BFBFBF;
}

/* --- El hover, con la misma gramatica que Solutions --- */

.d2 .d2-cta-ruta__paso:hover .d2-cta-ruta__num {
  --ruta-carga: 72%;
  color: #333333;
  border-color: var(--c-verde-marca, #39B54A);
  box-shadow: 0 0 0 7px rgba(126, 225, 142, .18);
}

.d2 .d2-cta-ruta__que {
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-cta-ruta__paso:hover .d2-cta-ruta__que { color: #B5DBAD; }

@media (max-width: 1000px) {
  .d2 .d2-cta-ruta__cabecera { grid-template-columns: 1fr; align-items: start; }
  .d2 .d2-cta-ruta__accion { text-align: left; }
  .d2 .d2-cta-ruta__pasos { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
  .d2 .d2-cta-ruta__paso:nth-child(2n)::after { display: none; }
  .d2 .d2-cta-ruta__paso:nth-child(2n) .d2-cta-ruta__marca::after { display: none; }
}

@media (max-width: 640px) {
  .d2 .d2-cta-ruta__pasos { grid-template-columns: 1fr; row-gap: 38px; }
  .d2 .d2-cta-ruta__paso,
  .d2 .d2-cta-ruta__paso + .d2-cta-ruta__paso { padding-inline: 0; }
  .d2 .d2-cta-ruta__paso::after { display: none; }
  .d2 .d2-cta-ruta__marca::after { right: 0; }
  .d2 .d2-cta-ruta__marca { margin-bottom: 22px; }
}

/* --------------------------------------------------------------------------
   CUANDO LA SECCION VA SOBRE FONDO CLARO

   El CTA es negro en tres de las cuatro composiciones, pero en "Quiet" y
   "Flat" no lo es. Estas reglas cubren ese caso.
   -------------------------------------------------------------------------- */

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) :is(.d2-cta-ficha__titulo,
                                                       .d2-cta-ruta__titulo,
                                                       .d2-cta-ruta__que) {
  color: var(--c-texto, #333333);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ficha__lead {
  color: var(--c-texto-cuerpo, #333333);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) :is(.d2-cta-ficha__eyebrow,
                                                       .d2-cta-ruta__eyebrow,
                                                       .d2-cta-ruta__cuando,
                                                       .d2-cta-ruta__num) {
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) :is(.d2-cta-ruta__desc,
                                                       .d2-cta-ruta__precio) {
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) :is(.d2-cta-ruta__paso::after,
                                                       .d2-cta-ruta__marca::after) {
  background: var(--c-borde, #E4E4E4);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__num {
  border-color: var(--c-verde-marca, #39B54A);
}

/* La ficha sobre fondo claro necesita borde para separarse */
.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ficha__doc {
  border: 1px solid var(--c-borde, #E4E4E4);
  border-top: 4px solid var(--c-verde-marca, #39B54A);
}

/* --- Foco y movimiento reducido --- */

.d2 :is(.d2-cta-ficha, .d2-cta-ruta) :is(a, button):focus-visible {
  outline: 3px solid var(--c-verde-marca, #39B54A);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .d2 :is(.d2-cta-ruta__num, .d2-cta-ruta__que) { transition: none; }
  .d2 .d2-cta-ruta__paso:hover .d2-cta-ruta__num { --ruta-carga: 72%; }
}

/* ==========================================================================
   CTA OPCION 3 — REHECHA COMO LINEA DE TIEMPO

   La primera version copiaba la reticula de Solutions: cuatro columnas,
   circulos numerados, filetes verticales. Dos secciones distintas no pueden
   verse iguales, aunque compartan sistema.

   Que cambia, y por que cada cosa:

     Solutions              Aqui
     ---------              ----
     cuatro columnas        una banda horizontal continua
     circulos de 56px       hitos pequenos sobre la linea
     numeros 01-04          semanas: la escala es TIEMPO, no orden
     filetes verticales     ninguno: el tiempo no se compartimenta
     todo el mismo peso     el paso 3 --la entrega-- destaca

   La diferencia de fondo: Solutions presenta OPCIONES, cuatro cosas que se
   pueden contratar. Esto presenta un CALENDARIO, una sola cosa que avanza.
   El eje horizontal es la semana 1 a la 6, y los hitos caen donde
   corresponde, no repartidos a partes iguales.
   ========================================================================== */

/* La banda que sostiene los hitos. Una sola linea de lado a lado: el tiempo
   es continuo, no cuatro cajas. */
.d2 .d2-cta-ruta__pasos {
  position: relative;
  display: grid;
  /* Las columnas NO son iguales: reflejan cuanto dura cada fase. Una
     semana, cuatro semanas, una semana, y el cierre abierto. */
  grid-template-columns: 1fr 1.6fr 1fr 1.15fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La linea corre por detras de todos los hitos, de un extremo a otro */
.d2 .d2-cta-ruta__pasos::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .28),
    rgba(255, 255, 255, .28) 72%,
    rgba(255, 255, 255, .06));
}

.d2 .d2-cta-ruta__paso {
  position: relative;
  padding: 30px clamp(20px, 2.4vw, 40px) 0 0;
}

/* Sin filetes verticales: cortar el tiempo en cajas contradice lo que dice
   la seccion. */
.d2 .d2-cta-ruta__paso:not(:last-child)::after { content: none; }

/* --- El hito: un punto, no un circulo con numero --- */

.d2 .d2-cta-ruta__marca {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
}

.d2 .d2-cta-ruta__num {
  /* El numero se oculta: aqui la referencia es la semana, no el orden.
     Sigue en el marcado por si se lee con lector de pantalla. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: none;
}

/* El punto se dibuja en el pseudoelemento del contenedor */
.d2 .d2-cta-ruta__marca::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--comp-cta, #333333);
  border: 1.5px solid rgba(126, 225, 142, .55);
  box-sizing: border-box;
  transition:
    background-color .42s cubic-bezier(.4, 0, .2, 1),
    border-color .42s cubic-bezier(.4, 0, .2, 1),
    box-shadow .42s cubic-bezier(.4, 0, .2, 1);
}

/* La linea vieja que salia del circulo ya no hace falta: hay una sola
   banda por detras. */
.d2 .d2-cta-ruta__marca::after { content: none; }

/* --- El texto --- */

.d2 .d2-cta-ruta__cuando {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B5DBAD;
}

.d2 .d2-cta-ruta__que {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  line-height: 1.25;
  color: #FFFFFF;
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-cta-ruta__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #BFBFBF;
  max-width: 30ch;
}

/* --- El paso 3 es el que importa: ahi se entrega --- */

.d2 .d2-cta-ruta__paso:nth-child(3) .d2-cta-ruta__marca::before {
  background: var(--c-verde-marca, #39B54A);
  border-color: var(--c-verde-marca, #39B54A);
  box-shadow: 0 0 0 5px rgba(57, 181, 74, .16);
}

.d2 .d2-cta-ruta__paso:nth-child(3) .d2-cta-ruta__que {
  color: #B5DBAD;
}

/* --- El hover: el hito se carga, como en el resto de la web --- */

.d2 .d2-cta-ruta__paso:hover .d2-cta-ruta__marca::before {
  background: var(--c-verde-marca, #39B54A);
  border-color: var(--c-verde-marca, #39B54A);
  box-shadow: 0 0 0 7px rgba(126, 225, 142, .20);
}

.d2 .d2-cta-ruta__paso:hover .d2-cta-ruta__que { color: #B5DBAD; }

/* --- Sobre fondo claro --- */

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__pasos::before {
  background: linear-gradient(90deg,
    var(--c-borde, #E4E4E4),
    var(--c-borde, #E4E4E4) 72%,
    rgba(0, 0, 0, .05));
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__marca::before {
  background: var(--comp-cta, #FFFFFF);
  border-color: var(--c-verde-marca, #39B54A);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__cuando {
  color: var(--c-verde-hover, #026F00);
}

.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__paso:nth-child(3) .d2-cta-ruta__que,
.d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__paso:hover .d2-cta-ruta__que {
  color: var(--c-verde-hover, #026F00);
}

/* --- Adaptacion --- */

@media (max-width: 1000px) {
  .d2 .d2-cta-ruta__pasos { grid-template-columns: 1fr 1fr; row-gap: 42px; }
  /* Con dos filas, una banda continua mentiria sobre la secuencia */
  .d2 .d2-cta-ruta__pasos::before { content: none; }
  .d2 .d2-cta-ruta__paso::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 26px;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, .20);
  }
  .d2 .d2-caru__diapo:not([data-comp-tono="oscuro"]) .d2-cta-ruta__paso::before {
    background: var(--c-borde, #E4E4E4);
  }
}

@media (max-width: 640px) {
  .d2 .d2-cta-ruta__pasos { grid-template-columns: 1fr; row-gap: 34px; }
  .d2 .d2-cta-ruta__paso { padding-right: 0; }
  .d2 .d2-cta-ruta__desc { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .d2 :is(.d2-cta-ruta__marca::before, .d2-cta-ruta__que) { transition: none; }
}

/* ==========================================================================
   EQUIPO — OPCION 4: LA BANDA VERDE

   Cuatro retratos circulares sobre verde oscuro, numerados y conectados.

   EL FONDO NO SIGUE A LA COMPOSICION, y es deliberado. Los retratos vienen
   del estudio con su propio circulo verde claro; sobre gris o blanco el
   conjunto se descompone. Es la segunda excepcion de la web, junto al mapa
   de cartera, y ambas por el mismo motivo: la imagen manda sobre el token.

   EL FONDO Y LOS TEXTOS, CORREGIDOS EL 4/9/2026

   Este comentario afirmaba que el #2A5C31 era "verde de marca al 22% sobre
   el negro #333333. Nada inventado." Comprobado: ese calculo da #345038, no
   #2A5C31. El fondo estaba inventado, y los tres grises verdosos del texto
   tambien --se acercaban a tintas del verde pero con 13 a 21 de diferencia--.

   Ahora todo sale de la escala del manual:

     fondo       #1A5121   verde de marca al 45% sobre negro
     eyebrow     #B5DBAD   tinta 40%    6.11:1
     entradilla  #B5DBAD   tinta 40%    6.11:1
     cargo       #A4D49B   tinta 50%    5.56:1
     cargo span  #92CC8B   tinta 60%    5.01:1
     titular y nombres blancos          9.36:1

   El fondo baja del 22% al 45% de verde --queda mas oscuro-- porque con el
   anterior las tintas 50 y 60 se quedaban en 4.28 y 3.86, por debajo del
   minimo. Con este hay margen para las tres.
   ========================================================================== */

.d2 .d2-equipo-banda {
  position: relative;
  overflow: hidden;
  /* Verde de marca al 45% sobre negro */
  background: #1A5121;
  /* Antes clamp(64px, 7vw, 100px), el mas generoso del sitio: la seccion se
     veia mas alta que las demas. Este es el valor que ya usan las otras. */
  padding-block: clamp(48px, 5.4vw, 76px);
}

.d2 .d2-equipo-banda__circuito {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

.d2 .d2-equipo-banda__circuito path {
  fill: none;
  stroke: rgba(176, 225, 183, .28);
  stroke-width: 1.2px;
}

.d2 .d2-equipo-banda__circuito circle {
  /* El mismo verde del fondo: los nodos del circuito lo tapan */
  fill: #1A5121;
  stroke: rgba(176, 225, 183, .45);
  stroke-width: 1.6px;
}

.d2 .d2-equipo-banda__inner {
  position: relative;
  z-index: 1;
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--pad-lateral, 28px);
}

/* --- La cabecera, centrada --- */

.d2 .d2-equipo-banda__cabecera {
  max-width: 66ch;
  /* Antes hasta 72px. La cabecera y los retratos son el mismo bloque, no
     dos secciones distintas: no necesitan tanta separacion. */
  margin: 0 auto clamp(34px, 3.6vw, 50px);
  text-align: center;
}

.d2 .d2-equipo-banda__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #B5DBAD;
}

.d2 .d2-equipo-banda__titulo {
  margin: 0 0 20px;
  /* El mismo titular que el resto de secciones. Antes media 54px con peso
     400: un 50% mas grande que cualquier otro titulo de la web --todos van
     a 36px-- y el unico en peso normal cuando el sistema usa 800.

     Era ademas parte de la altura que Erick veia de mas. */
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #FFFFFF;
}

.d2 .d2-equipo-banda__lead {
  margin: 0;
  /* 17px y no 15.5: es el tamano de entradilla que usan las otras cuatro
     secciones que la llevan, y este era el unico distinto. */
  font-size: 17px;
  line-height: 1.6;
  color: #B5DBAD;
}

/* --- Los cuatro --- */

.d2 .d2-equipo-banda__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La linea que los conecta, por detras de todos. El mismo recurso que en
   Solutions: nodos enlazados. */
/* La linea pasa por el ECUADOR de los retratos, no por encima de los
   numeros: asi conecta los circulos en vez de flotar sobre ellos. La
   posicion se calcula desde arriba: numero + hueco + medio retrato. */
.d2 .d2-equipo-banda__lista::before {
  content: "";
  position: absolute;
  top: calc(16px + clamp(18px, 2vw, 28px) + 115px);
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(176, 225, 183, .28);
}

.d2 .d2-equipo-banda__persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Los numeros 01-04 no se muestran.

   No aportaban nada --el orden ya lo dan las columnas-- y costaban 28px de
   alto mas 18 de margen en una seccion que se veia demasiado alta.

   Se ocultan con display:none y no se borran del marcado: la marca sigue
   ahi por si se recupera, y ya llevaba aria-hidden, asi que nunca la
   anuncio un lector de pantalla. */
.d2 .d2-equipo-banda__marca {
  display: none;
}

.d2 .d2-equipo-banda__num {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #B5DBAD;
}

/* --- El retrato --- */

.d2 .d2-equipo-banda__marco {
  display: block;
  width: 100%;
  max-width: 230px;
  margin-bottom: clamp(18px, 2vw, 26px);
  border-radius: 50%;
  /* overflow oculta las esquinas blancas del JPEG: sin esto el anillo se
     dibuja por fuera de ellas y se ve un cuadrado blanco alrededor. */
  overflow: hidden;
  /* z-index para que la linea pase por detras del retrato, no por encima */
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px rgba(176, 225, 183, .5);
  transition: box-shadow .42s cubic-bezier(.4, 0, .2, 1),
              transform .42s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-equipo-banda__marco picture { display: block; }

.d2 .d2-equipo-banda__marco img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}

/* Al apuntar, el anillo se enciende. Misma gramatica que el resto: 420ms,
   curva simetrica, entrada y salida iguales. */
.d2 .d2-equipo-banda__persona:hover .d2-equipo-banda__marco {
  box-shadow: 0 0 0 3px var(--c-verde-marca, #39B54A),
              0 0 0 9px rgba(57, 181, 74, .18);
  transform: translateY(-3px);
}

.d2 .d2-equipo-banda__nombre {
  margin: 0 0 6px;
  /* 15px de techo y no 16 para que los cuatro nombres quepan en una linea.

     Medido con las metricas de Open Sans Bold: el mas largo --Marco Bieri,
     P.Eng., M.Eng, MSc, CEM-- pide 291px a 16px y la columna da entre 276 y
     283, asi que se partia. A 15px pide 268 y entra con 8px de sobra en el
     caso mas justo.

     Se partia por ARRIBA, no por abajo: el contenedor topa en 1280px pero
     la fuente seguia creciendo con la ventana, asi que a 1440 y 1920 el
     nombre era mas ancho que su columna.

     Por debajo de 1050px vuelve a dos lineas --la columna baja de 230px--
     hasta los 900, donde la rejilla pasa a dos columnas y sobra sitio. */
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

.d2 .d2-equipo-banda__cargo {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #A4D49B;
}

/* La segunda linea del cargo. #A9C0AC daba 4.05:1 sobre el verde de la
   banda y a 11.5px el minimo son 4.5. Este da 5.31 y cumple. */
.d2 .d2-equipo-banda__cargo span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #92CC8B;
}

/* --- Adaptacion --- */

@media (max-width: 900px) {
  .d2 .d2-equipo-banda__lista { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  /* Con dos filas la linea continua mentiria sobre la secuencia */
  .d2 .d2-equipo-banda__lista::before { content: none; }
}

@media (max-width: 640px) {
  .d2 .d2-equipo-banda__lista { grid-template-columns: 1fr; row-gap: 38px; }
  .d2 .d2-equipo-banda__marco { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-equipo-banda__marco { transition: none; }
  .d2 .d2-equipo-banda__persona:hover .d2-equipo-banda__marco { transform: none; }
}

/* ==========================================================================
   LA CALCULADORA — SOLO LA CABECERA

   La calculadora NO se toca: se queda exactamente como estaba. Lo unico que
   cambia es la puesta en escena de arriba.

   La cabecera va sobre negro y la tarjeta de la calculadora cabalga entre
   ese negro y el fondo claro. Ese solape es lo que hace que la seccion se
   lea como una sola pieza en vez de dos bandas pegadas.

   Un intento anterior aplicaba tambien reglas al .calc__panel --rejilla de
   dos columnas, relleno-- y desmontaba la maquetacion de la calculadora.
   Aqui el CSS solo alcanza a .calc__intro y al fondo de la seccion.

   El corte del degradado esta calculado para caer donde empieza la tarjeta.

   Contrastes medidos sobre el negro:
     titular blanco ......... 17.40:1
     entradilla #D6D6D6 ..... 11.97:1
     eyebrow #B5DBAD ........ 11.85:1
   ========================================================================== */

.d2 .calc {
  /* Sin borde. La regla original de la seccion --linea 2429-- lleva
     border-block: 1px solid rgba(2,51,0,.07), pensada cuando el fondo era
     claro y el filete apenas se notaba. Con la cabecera en negro ese borde
     se ve como una linea oscura de lado a lado justo donde acaba la
     seccion, que es lo que se veia entre la calculadora y Solutions.

     Localizado barriendo la pagina entera fila a fila y buscando lineas
     oscuras con claro arriba y abajo: aparecia en y=3169, exactamente
     donde .calc termina y .d2-rutas-sec empieza. */
  border: 0;
  position: relative;
  /* Negro arriba, el fondo de la composicion abajo. El corte cae a 420px,
     justo donde arranca la tarjeta de la calculadora. */
  background: linear-gradient(#1A1A1A 0 480px, var(--comp-calc, #F3F3F3) 480px 100%);
  padding-top: clamp(56px, 6vw, 84px);
  overflow: hidden;
}

/* La reticula del fondo, solo sobre la banda negra. El mismo lenguaje que
   el mapa de cartera y el equipo: nodos y trazados. Decorativa. */
.d2 .calc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126, 225, 142, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 225, 142, .06) 1px, transparent 1px);
  background-size: 130px 130px;
  -webkit-mask-image: linear-gradient(#000 0 480px, transparent 480px);
          mask-image: linear-gradient(#000 0 480px, transparent 480px);
}

/* El contenido por encima de la reticula */
.d2 .calc__inner { position: relative; z-index: 1; }

/* --- La cabecera, centrada sobre el negro --- */

/* El intro ya no limita el ancho: lo hacen el titular y la entradilla por
   separado. Antes el intro cortaba a 758px y la entradilla se partia en
   tres lineas aunque su propio max-width fuera mayor. */
.d2 .calc__intro {
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: clamp(36px, 4vw, 56px);
  text-align: center;
}

.d2 .calc__intro .eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  /* .14em, como el eyebrow del mapa y el de Solutions */
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #B5DBAD;
}

/* 720px y no una medida en ch: el titular completo mide 1250px a 50px de
   cuerpo, asi que para partirlo en DOS lineas hacen falta unos 700. En ch
   la cuenta cambia con el tamano de fuente y salian tres. */
.d2 .calc__intro .calc__titulo {
  max-width: 720px;
  margin: 0 auto 20px;
  font-size: clamp(32px, 3.6vw, 50px);
  /* 700 como el resto: con 400 se leia como otra fuente */
  font-weight: 700;
  line-height: 1.06;
  /* -.03em, como el hero, Solutions y el mapa. Con -.02 a 50px la
     diferencia es de medio pixel por letra y el titular se veia mas
     suelto que los demas. */
  letter-spacing: -.03em;
  color: #FFFFFF;
  text-wrap: balance;
}

/* 74ch y no 58: medido, a 58 la entradilla ocupaba tres lineas y el
   cliente la queria en dos. */
.d2 .calc__intro .calc__lead {
  margin: 0 auto;
  max-width: 100%;
  font-size: 15.5px;
  line-height: 1.6;
  color: #D6D6D6;
}

/* La sombra que separa la tarjeta del fondo, ahora que cabalga entre dos
   bandas. No cambia nada de su interior. */
/* El panel se distinguia CERO de la cabecera: ambos eran #1A1A1A, asi que
   daba 1.00:1 --literalmente el mismo color-- y no se veia donde empezaba
   la calculadora.

   Se resuelve con un filete verde arriba y un halo blanco de 1px, no
   aclarando el fondo. Dos motivos:

   1. Ningun gris llega a los 3:1 que pide WCAG 1.4.11 sobre negro sin
      volverse gris claro, y eso cambiaria el diseno ya aprobado. El verde
      de marca si: 6.53:1.
   2. El filete verde superior es el mismo recurso que ya usan la ficha del
      mapa, la del FAQ y el documento del CTA. No es un adorno nuevo: es la
      gramatica de la web aplicada aqui.

   El halo blanco al 10% cierra el resto del contorno sin competir. */
.d2 .calc__panel {
  border-top: 3px solid var(--c-verde-marca, #39B54A);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 30px 80px rgba(0, 0, 0, .5);
}

@media (max-width: 900px) {
  .d2 .calc {
    background: linear-gradient(#1A1A1A 0 420px, var(--comp-calc, #F3F3F3) 420px 100%);
  }
  .d2 .calc::before {
    -webkit-mask-image: linear-gradient(#000 0 420px, transparent 420px);
            mask-image: linear-gradient(#000 0 420px, transparent 420px);
  }
}

/* ==========================================================================
   EL BOTON SOLIDO — ESTILO DEFINITIVO

   En reposo: verde oscuro con texto BLANCO. Al apuntarlo se ilumina al
   verde de marca con texto gris.

   Antes era al reves --verde de marca en reposo, oscureciendose en hover--
   y tenia dos problemas:

   1. El gesto estaba invertido. El estado de reposo era el llamativo y el
      hover el apagado: el boton se apagaba al apuntarlo en vez de
      encenderse.
   2. El estado que mas se ve --el reposo-- era el que llevaba el gris
      sobre verde, que es la combinacion que no convencia.

   Ahora el gris solo aparece un instante, mientras el raton esta encima, y
   sobre el verde de marca a pleno: es cuando mejor funciona.

   POR QUE EL REPOSO NO PUEDE SER VERDE DE MARCA CON TEXTO BLANCO:
   da 2.66:1 y el minimo es 4.5. El manual lo dice --el verde es color de
   superficie, no de texto-- asi que cualquier combinacion con blanco exige
   un verde mas oscuro.

   Medido:
     reposo  #FFFFFF sobre #026F00 ....... 6.41:1
     hover   #333333 sobre #39B54A ....... 4.74:1

   Las dos transiciones usan la gramatica del resto de la web: 420ms, curva
   simetrica, entrada y salida iguales.
   ========================================================================== */

.d2 :is(.d2-btn--solido, .btn--primary, .d2-btn--principal) {
  background: var(--c-verde-hover, #026F00);
  border-color: var(--c-verde-hover, #026F00);
  color: #FFFFFF;
  transition: background-color .42s cubic-bezier(.4, 0, .2, 1),
              border-color .42s cubic-bezier(.4, 0, .2, 1),
              color .3s cubic-bezier(.4, 0, .2, 1);
}

.d2 :is(.d2-btn--solido, .btn--primary, .d2-btn--principal):hover,
.d2 :is(.d2-btn--solido, .btn--primary, .d2-btn--principal):focus-visible {
  background: var(--c-verde-marca, #39B54A);
  border-color: var(--c-verde-marca, #39B54A);
  color: #333333;
}

/* Sobre seccion oscura vale lo mismo: el verde oscuro se distingue del
   fondo negro --3.29:1 contra #333333-- y el texto blanco se lee igual. */
.d2 [data-comp-tono="oscuro"] :is(.d2-btn--solido, .btn--primary):not(:hover):not(:focus-visible) {
  background: var(--c-verde-hover, #026F00);
  color: #FFFFFF;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-btn--solido, .btn--primary):hover,
.d2 [data-comp-tono="oscuro"] :is(.d2-btn--solido, .btn--primary):focus-visible {
  background: var(--c-verde-marca, #39B54A);
  color: #333333;
}

/* El boton del CTA carrusel llevaba su propia regla de color. Se alinea
   con el resto en vez de mantener una excepcion. */
.d2 .d2-btn--solido.d2-cta-car__btn {
  color: #FFFFFF;
}

.d2 .d2-btn--solido.d2-cta-car__btn:hover {
  color: #333333;
}

@media (prefers-reduced-motion: reduce) {
  .d2 :is(.d2-btn--solido, .btn--primary, .d2-btn--principal) { transition: none; }
}

/* ==========================================================================
   LOS GRAFICOS DE "READINGS": QUE LA FORMA DIGA LO QUE DICE EL TEXTO

   Las tres tarjetas describen PROBLEMAS, pero la magnitud problematica se
   dibujaba en verde de marca, que en esta web es el color del logro de
   Rede. Una linea que sube diciendo "Workload" leida en el verde del exito
   comunica lo contrario que el titular.

   Se aplica a los graficos 01 y 03. El 02 --las barras de proveedores-- NO
   se toca: ahi el problema es la DISPERSION, y eso ya lo dice la
   separacion entre barras. No hay una magnitud buena y otra mala.

   LO QUE HACE CADA CAPA

     el area      cuanto crece el problema, no solo que crece
     la linea     continua y roja: la magnitud problematica
     la referencia  discontinua y verde: lo que deberia pasar

   Tres senales, y solo una es cromatica. Importa porque rojo y verde dan
   entre si 1.18:1 de contraste: simulado con deuteranopia, ambos se ven
   como el mismo amarillo-oliva. La forma --continua contra discontinua--
   es la que hace el trabajo de distinguir; el color pone el tono.

   PENDIENTE CON ERICK: el manual NO da un valor de rojo. Lo menciona en la
   pagina 8 --"refleja el dinamismo de la organizacion"-- pero la lamina de
   color solo trae verde y negro. Este #C0392B es una propuesta, no un
   color de marca. Si Erick lo rechaza, basta cambiar el valor: el diseno
   funciona igual con el negro de marca.

   Contrastes sobre el blanco de la tarjeta:
     linea del problema #C0392B ...... 5.44:1
     referencia #026F00 .............. 6.41:1
     area al 8% ...................... decorativa, sin requisito
   ========================================================================== */

/* El area bajo la linea del problema */
.d2 .d2-lec__area {
  fill: rgba(192, 57, 43, .08);
  stroke: none;
}

/* La magnitud del problema: roja, gruesa, continua */
.d2 .d2-lec__sube,
.d2 .d2-lec__pagado {
  stroke: #C0392B;
  stroke-width: 2.6;
  stroke-dasharray: none;
}

/* La referencia: verde y discontinua. El verde se reserva para lo
   deseable, como en el resto de la web. */
.d2 .d2-lec__baja,
.d2 .d2-lec__esperado {
  stroke: var(--c-verde-hover, #026F00);
  stroke-width: 2;
  stroke-dasharray: 6 5;
  opacity: .85;
}

/* --- Las claves de la leyenda, con la misma gramatica --- */

.d2 .d2-lec__llave {
  background: #C0392B;
  height: 3px;
}

/* La clave de la referencia repite el discontinuo de su linea: quien mire
   la leyenda reconoce cual es cual sin depender del color. */
.d2 .d2-lec__llave--baja,
.d2 .d2-lec__llave--plano {
  background: repeating-linear-gradient(90deg,
    var(--c-verde-hover, #026F00) 0 5px, transparent 5px 9px);
  height: 3px;
}

/* --- Dentro de una tarjeta blanca no se invierte nunca ---

   Aunque la seccion pase a oscuro, el grafico vive en una tarjeta que
   sigue siendo blanca. Sin estas reglas la linea quedaba blanca sobre
   blanco: 1.00:1, invisible. */

.d2 [data-comp-tono="oscuro"] :is(.d2-lec__sube, .d2-lec__pagado) {
  stroke: #C0392B;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-lec__baja, .d2-lec__esperado) {
  stroke: var(--c-verde-hover, #026F00);
}

.d2 [data-comp-tono="oscuro"] .d2-lec__llave {
  background: #C0392B;
}

.d2 [data-comp-tono="oscuro"] :is(.d2-lec__llave--baja, .d2-lec__llave--plano) {
  background: repeating-linear-gradient(90deg,
    var(--c-verde-hover, #026F00) 0 5px, transparent 5px 9px);
}

.d2 [data-comp-tono="oscuro"] .d2-lec__area {
  fill: rgba(192, 57, 43, .08);
}

/* La clave del grafico 02 vuelve al verde de sus barras.

   La regla general de .d2-lec__llave puso rojo a todas, pero ese grafico
   no se toca: sus barras siguen en verde y la leyenda debe coincidir con
   lo que dibuja. */
.d2 .d2-lec__llave--barra {
  background: rgba(57, 181, 74, .34);
  height: 10px;
  width: 8px;
  border-radius: 2px;
}

.d2 [data-comp-tono="oscuro"] .d2-lec__llave--barra {
  background: rgba(57, 181, 74, .34);
}

/* ==========================================================================
   LA CALCULADORA: TRES CORRECCIONES

   1. EL TEXTO DE LOS SELECTORES, CENTRADO

   Medido: la caja tiene min-height 52px y el texto line-height 33 sin
   padding vertical, asi que se apoyaba arriba en vez de quedar en medio.
   Con align-content el contenido se centra dentro de la caja sin tocar su
   altura ni la posicion de la flecha.

   2. EL LATIDO DEL PASO ACTUAL, MAS VISIBLE

   Ya existia --d2-latido, 1.8s-- pero el halo llegaba solo a 5px y con
   poca opacidad: se perdia. Se amplia a 7px y sube el punto de partida,
   manteniendo el ritmo pausado. Es una guia, no una alarma.

   3. Lo demas va en main.js: el tipo de edificio ya no se marca solo.
   ========================================================================== */

.d2 .calc select.campo__input {
  /* El texto al centro de la caja */
  align-content: center;
  /* Respaldo para motores sin align-content en bloques: el line-height
     iguala a la altura util y el texto queda centrado igual. */
  line-height: 50px;
  padding-block: 0;
}

/* El latido del punto que marca el paso actual.

   MEDIDO: sobre el blanco del panel del perfil ningun verde claro llega
   al 3:1 que pide WCAG 1.4.11 para graficos que informan.

     #39B54A  1.76:1     verde de marca  2.66:1     verde 80%  2.18:1

   Y contra su hermano gris #E4E4E4 la diferencia es aun menor: 1.38:1.
   Es decir, el punto activo se distinguia SOLO por color --incumple
   ademas 1.4.1 nivel A-- y encima con muy poca diferencia.

   La solucion no puede ser un verde mas oscuro sin cerrar antes la
   decision del verde oscuro que sigue abierta, asi que aqui se arregla
   lo que no depende del color: el punto activo es MAS GRANDE y lleva
   anillo. Tamano y anillo se ven sin distinguir tonos. */

@keyframes d2-latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57, 181, 74, .55); }
  50%      { box-shadow: 0 0 0 7px rgba(57, 181, 74, 0); }
}

/* "La primera fila pendiente" NO es "la que sigue a una llena": el usuario
   puede dejar huecos. Con llenas=[0,2] el hermano adyacente marcaba la 1 Y
   la 3 --dos puntos grandes a la vez, medido--. Esto marca la primera
   pendiente y ninguna mas: se descarta toda pendiente que tenga otra
   pendiente por detras. */
.d2 .calc .perfil__fila:not(.is-lleno):not([hidden]) .perfil__punto {
  background: var(--c-verde-marca, #39B54A);
  /* La segunda senal: crece y se rodea. El transform no descoloca la
     fila --el punto sigue ocupando sus 8px de caja-- asi que el texto
     de al lado no se mueve al avanzar de paso. */
  transform: scale(1.35);
  outline: 1.5px solid var(--c-verde-marca, #39B54A);
  outline-offset: 2px;
  animation: d2-latido 2.2s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* La segunda senal se apaga en toda pendiente que tenga otra pendiente por
   delante, de modo que solo sobrevive la primera. Es la unica forma de
   decir "la primera pendiente" en CSS: no existe un combinador hacia
   atras, asi que se marca a todas y se desmarca a las posteriores. */
/* :not([hidden]) en las DOS partes: una fila de elegibilidad sin contestar
   --el desplegable de subvenciones, que nadie obliga a tocar-- se pliega
   sin llenarse, y sin esto seguiria contando como "pendiente por delante":
   apagaria el punto que late en TODO el grupo del edificio y se perderia
   la senal de "vas aqui". */
.d2 .calc .perfil__fila:not(.is-lleno):not([hidden]) ~ .perfil__fila:not(.is-lleno):not([hidden]) .perfil__punto {
  transform: none;
  outline: 0;
  animation: none;
  background: var(--c-borde, #E4E4E4);
}


/* Los pasos ya completados dejan de latir y vuelven al tamano normal:
   lo hecho pesa menos que lo que toca ahora.

   El transform y el outline hay que revertirlos a mano. La regla de
   arriba alcanza a la fila llena mientras es la siguiente a una llena,
   asi que sin esto quedaban DOS puntos grandes a la vez --medido-- y se
   perdia la senal de "vas aqui". */
.d2 .calc .perfil__fila.is-lleno .perfil__punto {
  animation: none;
  background: var(--c-verde-marca, #39B54A);
  transform: none;
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc .perfil__punto { animation: none !important; }
}

/* ==========================================================================
   LA CALCULADORA APARECE AL LLEGAR A ELLA

   La tarjeta entera --cabecera negra, formulario y perfil-- se desvanece
   hacia arriba cuando la seccion entra en pantalla. No entra elemento por
   elemento: es una sola pieza que se asienta.

   Los estados los pone js/d2-calc-entrada.js. Si ese script no corre, no
   hay clase .va-a-entrar y la tarjeta se queda visible: el fallo nunca
   deja la seccion en blanco.

   620ms y 18px: el mismo par que usa el resto de la web para entradas.
   La curva de Apple para el movimiento, como en todo lo que se desplaza.
   ========================================================================== */

.d2 .calc__panel.va-a-entrar {
  opacity: 0;
  transform: translateY(18px) scale(.994);
  transition:
    opacity .62s cubic-bezier(.4, 0, .2, 1),
    transform .62s cubic-bezier(.32, .72, 0, 1);
  /* El navegador prepara la capa antes de mover: sin esto el primer
     fotograma llega tarde y la entrada se ve entrecortada. */
  will-change: opacity, transform;
}

.d2 .calc__panel.ha-entrado {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc__panel.va-a-entrar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   MARCAS — EL SELECTOR DE FONDO LOCAL

   Temporal, para que Erick compare la seccion en cinco fondos. Se retira
   al decidir.

   El JS solo escribe dos cosas: el color en --logos-fondo y el tono en
   data-logos-tono. Desde aqui se decide que texto usa cada tono, asi que
   no hay que nombrar cada elemento en el JS.

   Contrastes medidos en los cinco fondos:

                  blanco  gris   gris osc  negro  verde
     titular ....  12.63  11.39   12.63    17.40   7.85
     cifra ......  12.63  11.39   12.63    17.40   7.85
     etiqueta ...   5.33   4.80    6.87     9.46   5.54

   Sobre verde el gris claro #BFBFBF se queda en 4.27 --por debajo del
   minimo de 4.5-- asi que ese fondo usa #CFDCD1.
   ========================================================================== */

.d2 .d2-logos--dos {
  background: var(--logos-fondo, #FFFFFF);
  transition: background-color .42s cubic-bezier(.4, 0, .2, 1);
}

/* --- Fondo oscuro: sirve para #333333 y para #1A1A1A --- */

.d2 .d2-logos--dos[data-logos-tono="oscuro"] {
  --c-texto: #FFFFFF;
  --c-texto-cuerpo: #E8E8E8;
  --c-texto-suave: #BFBFBF;
}

.d2 .d2-logos--dos[data-logos-tono="oscuro"] :is(.d2-logos--dos__titular,
                                                 .d2-logos--dos__cifra,
                                                 .d2-logos--dos__cifra-pie) {
  color: #FFFFFF;
}

.d2 .d2-logos--dos[data-logos-tono="oscuro"] :is(.d2-logos--dos__etiqueta,
                                                 .d2-logos--dos__cifra-nota) {
  color: #BFBFBF;
}

/* --- Fondo verde --- */

.d2 .d2-logos--dos[data-logos-tono="verde"] {
  --c-texto: #FFFFFF;
  --c-texto-cuerpo: #E8E8E8;
  --c-texto-suave: #B5DBAD;
}

.d2 .d2-logos--dos[data-logos-tono="verde"] :is(.d2-logos--dos__titular,
                                                .d2-logos--dos__cifra,
                                                .d2-logos--dos__cifra-pie) {
  color: #FFFFFF;
}

.d2 .d2-logos--dos[data-logos-tono="verde"] :is(.d2-logos--dos__etiqueta,
                                                .d2-logos--dos__cifra-nota) {
  /* La tinta 40% del manual. Antes un #CFDCD1 inventado, que hacia falta
     porque el fondo verde era mas claro: con el #1A5121 actual la tinta
     oficial da 6.11:1 y sobra margen. */
  color: #B5DBAD;
}

/* Filetes y separadores, que sobre oscuro necesitan invertirse */
.d2 .d2-logos--dos:is([data-logos-tono="oscuro"], [data-logos-tono="verde"]) {
  --c-borde: rgba(255, 255, 255, .22);
  --c-borde-suave: rgba(255, 255, 255, .14);
}

/* Los logos de cliente son imagenes oscuras: sobre fondo oscuro se
   invierten para que no desaparezcan. */
.d2 .d2-logos--dos:is([data-logos-tono="oscuro"], [data-logos-tono="verde"]) img {
  filter: brightness(0) invert(1);
  opacity: .85;
}

/* --- La barra del selector --- */

.d2 .d2-logos-fondos {
  /* Mas arriba que los mandos de composicion, para que no se solapen */
  bottom: calc(var(--sp-6, 40px) + 62px);
}

.d2 .d2-logos-fondos__eti {
  padding-inline: 4px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-texto-suave, #6B6B6B);
  white-space: nowrap;
}

/* --- Selector de onda de la seccion de rutas (temporal) --- */

.d2 .d2-rutas-ondas {
  /* Mismo escalon que el de fondos de logos: cada seccion tiene el suyo y
     ninguno pisa los mandos de composicion. */
  bottom: calc(var(--sp-6, 40px) + 62px);
}

.d2 .d2-rutas-ondas__eti {
  padding-inline: 4px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-texto-suave, #6B6B6B);
  white-space: nowrap;
}

.d2 .d2-logos-fondos.esta-minimizado .d2-logos-fondos__eti { display: none; }

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-logos--dos { transition: none; }
}

/* ==========================================================================
   EL PIE — GRIS FIJO, LOGO BLANCO Y LINKEDIN

   El gris sale de la captura del sitio actual: #666666, que es el negro de
   marca al 75% sobre blanco, asi que se deriva del manual.

   Va fijo y fuera del sistema de composicion --como Reviews-- porque es una
   decision del cliente, no una variante a comparar.

   OJO CON EL CONTRASTE: este gris es mucho mas claro que el negro que habia
   antes, y los textos del pie estaban calculados contra el negro. Medido
   sobre #666666:

     blanco al  62% .... 3.32:1   no llega a 4.5
     blanco al  74% .... 4.00:1   no llega
     blanco al  82% .... 4.49:1   se queda a 0.01
     blanco al  92% .... 5.16:1   cumple
     blanco al 100% .... 5.74:1   cumple

   Por eso aqui se suben todas. Y el verde de marca no sirve para el hover:
   da 2.16:1 incluso al 100%, asi que el hover pasa a blanco puro.
   ========================================================================== */

.d2 :is(.d2-pie-dir, .d2-pie-desp, .d2-pie-cierre) {
  background: #666666;
}

/* --- El texto, subido para que cumpla sobre el gris claro --- */

.d2 :is(.d2-pie-dir, .d2-pie-desp, .d2-pie-cierre) :is(p, a, li, span, small, button) {
  color: rgba(255, 255, 255, .92);      /* 5.16:1 */
}

.d2 :is(.d2-pie-dir, .d2-pie-desp, .d2-pie-cierre) :is(h2, h3, h4, strong, b) {
  color: #FFFFFF;                        /* 5.74:1 */
}

/* Los titulos de columna iban en un blanco muy bajo y sobre este gris se
   perdian */
.d2 :is(.d2-pie-dir__titulo, .d2-pie-desp__titulo, .d2-pie-cierre__titulo) {
  color: #FFFFFF;
}

/* El aviso legal puede ir mas suave, pero sin bajar del minimo */
.d2 :is(.d2-pie-dir__legal, .d2-pie-desp__legal, .d2-pie-cierre__legal) {
  color: rgba(255, 255, 255, .88);      /* 4.89:1 */
}

/* --- El hover de los enlaces --- */

.d2 :is(.d2-pie-dir, .d2-pie-desp, .d2-pie-cierre) a:not(.d2-pie-social):hover,
.d2 :is(.d2-pie-dir, .d2-pie-desp, .d2-pie-cierre) a:not(.d2-pie-social):focus-visible {
  /* Blanco puro y no verde: el verde de marca sobre este gris da 2.16:1
     incluso sin transparencia. El subrayado acompana al cambio de color
     para que el hover no dependa solo del tono.

     El :not() saca al icono de LinkedIn: esta regla tiene un elemento mas
     --el `a`-- asi que le ganaba por especificidad y le forzaba el blanco,
     dejando el icono blanco sobre fondo blanco. */
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- El logo blanco --- */

.d2 :is(.d2-pie-dir__logo, .d2-pie-desp__logo, .d2-pie-cierre__logo) img {
  /* El png es 752x200 y el svg que habia era 360x108: distinta proporcion,
     asi que la altura se deja en auto para que no se deforme. */
  width: clamp(150px, 16vw, 188px);
  height: auto;
}

/* --- El icono de LinkedIn, en lugar de la pronunciacion --- */

.d2 .d2-pie-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, .92);
  /* .60 y no .38: el marco es el borde de un componente y WCAG 1.4.11 pide
     3:1. Al 38% daba 2.20 sobre este gris; al 60% da 3.22. */
  border: 1px solid rgba(255, 255, 255, .60);
  border-radius: var(--d2-radio-sm, 6px);
  transition: color .3s cubic-bezier(.4, 0, .2, 1),
              border-color .3s cubic-bezier(.4, 0, .2, 1),
              background-color .3s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-pie-social:hover,
.d2 .d2-pie-social:focus-visible {
  /* El blanco lleno se veia como un parche. Se queda en un realce suave:
     el icono a blanco puro y el marco encendido, sobre un fondo apenas
     aclarado. Medido: el icono da 5.16:1 sobre ese fondo. */
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .85);
  /* Sin subrayado: aqui no hay texto que subrayar */
  text-decoration: none;
}

/* El parrafo que lo contiene ya no lleva texto, asi que no necesita el
   interlineado de antes */
.d2 :is(.d2-pie-dir__pron, .d2-pie-desp__pron, .d2-pie-cierre__pron) {
  margin-top: 18px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-pie-social { transition: none; }
}

/* ==========================================================================
   LA MARCA DE AGUA DEL PIE — RETIRADA (3/9/2026)

   Se descarto la idea. El marcado sigue comentado en home-d2.html y la
   imagen en assets/img/rede-marca-agua.png.

   Para recuperarla: descomentar los dos sitios. Los valores estaban
   medidos contra la referencia de Capacity --1.14:1 de contraste, asoma el
   28% del logo-- y la franja libre de abajo evitaba que cruzara los
   legales.

   Lo unico que se conserva del bloque es el overflow del pie: la variante
   3 lo necesita igualmente para que nada se salga de la caja.
   ========================================================================== */

.d2 .d2-pie-cierre {
  position: relative;
  overflow: hidden;
}

/*
.d2 .d2-pie-cierre__inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(110px, 13vw, 165px);
}

.d2 .d2-pie-cierre__agua {
  position: absolute;
  left: 50%;
  width: min(calc(var(--d2-ancho, 1280px) - var(--d2-gutter, 40px) * 2), calc(100vw - var(--d2-gutter, 40px) * 2));
  bottom: -72%;
  transform: translateX(-50%);
  z-index: 0;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.d2 .d2-pie-cierre__agua img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .d2 .d2-pie-cierre__agua { bottom: -76%; }
  .d2 .d2-pie-cierre__inner { padding-bottom: clamp(70px, 14vw, 96px); }
}
*/

/* ==========================================================================
   FAQ MAS LIGERO: PUNTO EN VEZ DE NUMERAL (diseno 2)

   Los 01-10 numeraban preguntas que no tienen orden: nadie las lee en
   secuencia ni vuelve a "la 07". Contar diez cosas ademas hace que la
   seccion se lea como un tramite largo.

   El numeral sigue en el marcado --se oculta, no se borra-- y el punto se
   dibuja en su lugar. Quitar estas reglas devuelve la numeracion.

   El punto se enciende al abrir, igual que hacia el numeral: la senal de
   "esta abierto" no depende solo del color, tambien crece.
   ========================================================================== */

.d2 .d2-faq-num__n {
  /* El texto fuera de la vista pero presente para lectores de pantalla:
     display:none lo sacaria tambien del arbol de accesibilidad. */
  font-size: 0;
  line-height: 0;
  position: relative;
}

.d2 .d2-faq-num__n::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-borde, #E4E4E4);
  transition: background-color .18s cubic-bezier(.4, 0, .2, 1),
              transform .18s cubic-bezier(.4, 0, .2, 1);
}

/* Al pasar el raton por la pregunta */
.d2 .d2-faq-num__item summary:hover .d2-faq-num__n::before {
  background: var(--c-texto-suave, #6B6B6B);
}

/* Abierta: el punto se enciende y crece */
.d2 .d2-faq-num__item[open] .d2-faq-num__n::before {
  background: var(--c-verde-marca, #39B54A);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-faq-num__n::before { transition: none; }
}

/* ==========================================================================
   EL MAPA DE CARTERA DENTRO DEL PANEL DE DATOS DEL FAQ (4/9/2026)

   Viene de The Problem, que se oculto. Alli vivia en media pantalla; aqui
   la columna es la estrecha de una rejilla 1.35fr / 1fr, asi que hay que
   encajarlo.

   El envoltorio .d2-prob-mapa del marcado no es decorativo: todo el color
   del mapa --burbujas, reticula, destacado-- esta anidado bajo esa clase.
   Aqui solo se corrigen las medidas.
   ========================================================================== */

.d2 .d2-faq-dato__mapa {
  /* Que no herede el fondo ni el relleno de la seccion original */
  background: none;
  padding: 0;
}

.d2 .d2-faq-dato__mapa .d2-prob-mapa__lienzo {
  /* 520px era la altura en media pantalla. Aqui la columna es estrecha y
     el mapa quedaria como una torre. */
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--d2-radio-sm, 6px);
}

.d2 .d2-faq-dato__mapa .d2-prob-mapa__grafico {
  width: 100%;
  height: 100%;
}

/* El aviso de "cifras ilustrativas" y las etiquetas, un punto mas pequenos:
   el mapa ocupa menos ancho que en su seccion original. */
.d2 .d2-faq-dato__mapa .d2-prob-mapa__aviso {
  font-size: 10.5px;
}

.d2 .d2-faq-dato__mapa .d2-prob-mapa__etiqueta {
  font-size: 9.5px;
}

/* La ficha del sitio seleccionado.

   En su seccion original media 240px sobre un mapa de media pantalla. Aqui
   la columna da unos 480px, asi que esos mismos 240 se comian el 50% del
   ancho y el 41% del alto: tapaba las burbujas en vez de acompanarlas.

   Baja a 205px --un 42% del ancho-- y se pega mas a la esquina para dejar
   respirar el trazado. El texto encoge en la misma proporcion.

   205 y no menos: medido con las metricas de Open Sans, la fila mas ancha
   --"Energy use intensity / 146 kWh/m2"-- pide 174px de contenido, asi que
   por debajo de 205 con este padding el valor se apretaria contra la
   etiqueta. */
.d2 .d2-faq-dato__mapa .d2-prob-mapa__ficha {
  width: 205px;
  right: 12px;
  bottom: 12px;
  padding: 13px;
}

.d2 .d2-faq-dato__mapa .d2-prob-mapa__ficha > small {
  font-size: 8.5px;
}

.d2 .d2-faq-dato__mapa .d2-prob-mapa__ficha > b {
  /* 22px era el tamano en media pantalla */
  font-size: 17px;
}

.d2 .d2-faq-dato__mapa .d2-prob-mapa__ficha > div {
  margin-top: 6px;
  padding-top: 6px;
  font-size: 9.5px;
}

@media (max-width: 900px) {
  /* Con la rejilla ya en una columna, el mapa recupera proporcion */
  .d2 .d2-faq-dato__mapa .d2-prob-mapa__lienzo { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   SOLUTIONS: ICONOS EN LUGAR DE 01-04 (4/9/2026)

   Los numerales sugerian una secuencia que no existe: los cuatro servicios
   son alternativas, no pasos --lo dice el brief del cliente: "They are not
   steps in a sequence"--. Un icono describe el servicio; un numero solo
   dice en que orden esta escrito.

   Cada uno dice lo que hace su servicio, no decora:
     lupa sobre la cartera .... cribar edificios antes de auditar
     panel con lectura ........ ver todos los edificios a la vez
     dial de ajuste ........... afinar lo instalado, no reemplazarlo
     ciclo sobre el edificio .. el plan que no termina

   Misma gramatica que el resto de iconos de la web: lienzo de 24, trazo de
   1.7, sin relleno y puntas redondeadas.
   ========================================================================== */

.d2 .d2-rutas-sec__num svg {
  width: 26px;
  height: 26px;
  /* El trazo hereda el color del circulo, asi que los estados --hover,
     tono oscuro-- siguen funcionando sin reglas nuevas. */
  color: inherit;
}

@media (max-width: 900px) {
  .d2 .d2-rutas-sec__num svg { width: 23px; height: 23px; }
}

/* ==========================================================================
   MARCAS: SOLO EL EYEBROW Y LOS LOGOS (4/9/2026)

   Se retiraron el titular de la izquierda --"Proven across complex
   multi-site portfolios"-- y la cifra de la derecha --$4.4M--. La seccion
   queda como pidio el cliente: una franja sobria con el eyebrow arriba y
   los logos debajo.

   El $4.4M no se pierde: sigue en Reviews, que es donde acompana a la voz
   de un cliente en vez de flotar junto a unos logos.

   El marcado de las dos columnas queda comentado.
   ========================================================================== */

.d2 .d2-logos--dos__inner {
  /* Dos columnas (7/9/2026): la cifra a la izquierda y los logos ocupando
     el resto. Era de una sola columna mientras la cifra estuvo retirada. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;

  /* El hueco pasa de 49px a 92px, en dos pasos pedidos por el usuario.
     Medido, 49px no era poco, pero el primer logo trae mucho aire propio
     dentro de su PNG y el conjunto se leia pegado: la cifra y la fila
     parecian un solo bloque. Con 92px la cifra se lee como dato y los
     logos como prueba, que son dos cosas distintas.

     Va en clamp para que en pantallas estrechas el hueco ceda antes que el
     sitio de los logos. */
  column-gap: clamp(44px, 6.4vw, 92px);
}

.d2 .d2-logos--dos__centro {
  /* Ya no va centrado: con la cifra al lado, el bloque de logos se alinea
     a la izquierda de su columna y respira hacia la derecha. */
  text-align: left;
}

/* La cifra manda en su columna y no se estrecha */
.d2 .d2-logos--dos__der {
  grid-row: 1;
  grid-column: 1;
  max-width: 15rem;

  /* Sin padding ni filete a la izquierda (7/9/2026): venian de cuando la
     cifra iba a la DERECHA, donde el filete la separaba de los logos. Con
     la cifra a la izquierda ese padding la empujaba 37px y la sacaba del
     eje del sitio --estaba en 158 y el resto de titulares en 120--. */
  padding-left: 0;
  border-left: 0;
}

.d2 .d2-logos--dos__centro {
  grid-row: 1;
  grid-column: 2;
}

/* Por debajo de 900px las dos columnas dejan de caber: la marquesina se
   quedaba en 153px --un logo y medio-- mientras la cifra se llevaba el
   ancho. Se apilan, cifra arriba y logos debajo, cada uno con su linea
   completa. */
@media (max-width: 900px) {
  /* El relleno baja de 26px a 18px y el hueco entre bloques de 18 a 14:
     son 24px que pasan integros a los logos sin tocar ni un tamano de
     letra. Con el texto en dos lineas la seccion ya no necesita tanto
     aire para no verse apretada. */
  .d2 .d2-logos--dos {
    padding-top: clamp(21px, 3vw, 26px);
    padding-bottom: clamp(21px, 3vw, 26px);
  }

  .d2 .d2-logos--dos__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(13px, 2.2vw, 18px);
  }

  .d2 .d2-logos--dos__der,
  .d2 .d2-logos--dos__centro {
    grid-column: 1;
  }

  .d2 .d2-logos--dos__der  { grid-row: 1; max-width: none; }
  .d2 .d2-logos--dos__centro { grid-row: 2; }

  /* ----------------------------------------------------------------------
     LA CIFRA, EN UNA FILA (8/9/2026)

     Apiladas, las tres lineas se llevaban 89px de los 217 de la seccion
     --el 41%-- y dejaban los logos en 112x56, mas pequenos que en
     escritorio. Y el texto solo usaba la mitad izquierda: el resto del
     negro quedaba vacio.

     Puesta la cifra al lado de su texto, el bloque baja a la altura de dos
     lineas y ese alto se lo quedan los logos. Es la misma composicion que
     en escritorio --cifra a la izquierda, contenido a la derecha--, solo
     que aqui el vecino es su propio pie en vez de la marquesina.
     ---------------------------------------------------------------------- */
  .d2 .d2-logos--dos__der {
    display: grid;
    /* Al margen izquierdo, como el resto de la pagina: en movil seis de
       las ocho secciones arrancan en x=20-28. Centrado, este bloque
       empezaba en x=70 y era el unico que rompia ese eje al bajar. Las
       dos secciones que si van centradas --calculadora y CTA-- lo estan
       por ser llamadas a la accion, que es otra cosa.

       Ademas es como va en escritorio: asi la seccion no cambia de
       caracter segun la pantalla. */
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(14px, 3.4vw, 22px);
    /* El filete y sus 16px de padding venian de la version apilada, donde
       hacian de separacion entre cifra y logos. El hueco de la rejilla ya
       cumple esa funcion: aqui solo restaban alto. */
    padding-top: 0;
    border-top: 0;
  }

  .d2 .d2-logos--dos__cifra {
    grid-row: 1 / span 2;
    grid-column: 1;
    /* Sube de 28px a 34px: al dejar de competir por el alto con las dos
       lineas de texto hay sitio, y la cifra es el dato que sostiene la
       seccion. Sigue por debajo del techo de 40px del sistema. */
    font-size: clamp(2rem, 1.5rem + 2.2vw, 2.5rem);
  }

  .d2 .d2-logos--dos__cifra-pie {
    grid-row: 1;
    grid-column: 2;
    /* Sin margen superior: lo alinea la rejilla, y el que traia lo bajaba
       respecto a la cifra. */
    margin-top: 0;
    align-self: end;
  }

  .d2 .d2-logos--dos__cifra-nota {
    grid-row: 2;
    grid-column: 2;
    align-self: start;
  }

  /* El alto recuperado va a los logos: de 56px a 68-78px.

     El tope real no es el alto sino el ANCHO. Los logos guardan su
     proporcion, asi que subir el alto los ensancha tambien, y
     greater-victoria --693x200-- llegaba a 249px dentro de una franja de
     350: se salia por el lado. Por eso el alto sube con mesura y el
     numero de logos a la vista se ajusta abajo, en el bloque que ya
     gobierna --visibles. */
  .d2 .d2-logos--dos__marquesina {
    --alto-logo: clamp(80px, 18vw, 92px);
  }

  /* Los logos, al mismo eje que la cifra. */
  .d2 .d2-logos--dos__centro { text-align: left; }
}

/* --------------------------------------------------------------------------
   LA COMPOSICION QUE PIDIO EL CLIENTE (4/9/2026)

   Medido sobre su referencia: el eyebrow va pegado al margen izquierdo y el
   bloque de logos ocupa el 51% del ancho, no el 78% que ocupaba al quitar
   las columnas laterales.

   Menos logos a la vez y mas juntos: el carrusel se lee como una franja
   discreta, no como una fila que cruza la pantalla.
   -------------------------------------------------------------------------- */

.d2 .d2-logos--dos__etiqueta {
  /* A la izquierda, alineado con el margen del contenedor */
  text-align: left;
  /* 5px mas de aire con los logos: el clamp de la regla base daba 18px y
     el eyebrow quedaba pegado a la franja. */
  margin-bottom: clamp(17px, 1.8vw, 23px);
}

.d2 .d2-logos--dos__centro {
  /* Alineado a la izquierda de su columna: la cifra ocupa la izquierda */
  text-align: left;
}

.d2 .d2-logos--dos__marquesina {
  /* Es el apartado donde el cliente reconoce marcas parecidas a la suya,
     asi que los logos piden tamano: ocupa toda su columna --el ancho ya lo
     limita la cifra de al lado-- y el alto sube a 68px. */
  max-width: 100%;
  --visibles: 4;
}

@media (max-width: 1000px) {
  .d2 .d2-logos--dos__marquesina {
    max-width: 78%;
    --visibles: 3;
  }
}

@media (max-width: 900px) {
  .d2 .d2-logos--dos__marquesina {
    max-width: 100%;
    --visibles: 3;
  }
}

@media (max-width: 640px) {
  /* Con dos, y ya con el alto en 68px, greater-victoria --el mas apaisado
     de los cinco-- se iba a 215px de una franja de 350 y desbordaba.

     Vuelven a ser tres, pero ahora NO quedan en 84px como cuando se probo
     antes: el alto manda sobre el ancho --los logos van a su proporcion--
     y con 68px de alto el mas ancho se queda en 145px. El hueco cede para
     que los tres entren. */
  .d2 .d2-logos--dos__marquesina {
    --visibles: 3;
    --hueco: clamp(26px, 6.5vw, 72px);
  }

  /* El max-width de la regla base es un PORCENTAJE, y se mide contra la
     pista --que es max-content y mucho mas ancha que la franja--, no
     contra lo que se ve. Por eso dejaba pasar 236px en una franja de 350.

     Un tope en vw si se mide contra la pantalla: greater-victoria baja a
     ~145px y los tres logos caben. Los demas no llegan al tope y se
     quedan como estan. */
  .d2 .d2-logos--dos__marquesina img {
    max-width: 44vw;
  }
}

/* ==========================================================================
   SOLUTIONS: EL ICONO DESAPARECIA EN HOVER SOBRE FONDO OSCURO (4/9/2026)

   En la composicion Contrast el circulo se quedaba vacio al pasar el raton
   y el icono no se veia.

   CAUSA, encontrada revisando la especificidad: la regla de tono oscuro
   usaba el atajo `background:` en vez de `background-color`. El atajo pone
   ademas background-image:none, y con eso borraba el radial-gradient que
   dibuja el llenado. Como esa regla tiene mas especificidad que la del
   degradado --(0,3,0) contra (0,2,0)-- en tono oscuro simplemente no habia
   relleno: ni animacion ni verde detras del icono, que va en #333333 y
   quedaba del color del fondo.

   Arreglado en la propia regla --ver "background-COLOR y no el atajo" mas
   arriba--, asi que aqui no hace falta nada: con el degradado funcionando,
   el 72% del hover base ya cubre el icono, que ocupa el 46% central del
   circulo. Se deja sin regla propia para que el hover se vea igual en las
   cuatro composiciones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FAQ DISENO 1: NI NUMERAL NI PUNTO (4/9/2026)

   El punto que sustituyo al 01-10 tampoco aporta aqui: la pregunta y su
   flecha ya dicen que el bloque se abre.

   Se oculta con display:none y el numeral sigue en el marcado: quitar esta
   regla lo devuelve.
   -------------------------------------------------------------------------- */

.d2 .d2-faq-dato__n {
  display: none;
}

/* --------------------------------------------------------------------------
   El corte del titular de Solutions

   El <br> del marcado fuerza "From scattered signals to / measurable
   action.". Hace falta porque a 58px la primera linea pide 732px y la
   columna da 607: el navegador partia antes, en "scattered".

   En pantallas pequenas se desactiva --el titular encoge y la columna pasa
   a ancho completo, asi que el texto se reparte mejor solo--.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* El <br> se desactiva para que el texto fluya, pero con display:none
     desaparece SIN dejar separacion y las palabras se pegaban: se leia
     "signals tomeasurable action". Como elemento en linea vacio no rompe
     la linea y el espacio del marcado se conserva. */
  .d2 .d2-rutas-sec__titulo br {
    display: inline;
    content: " ";
  }
}

/* ==========================================================================
   MENU MOVIL: EL MISMO VERDE QUE EL RESTO DE BOTONES (4/9/2026)

   El menu movil se quedo con el esquema viejo --verde de marca de fondo y
   texto blanco-- que en escritorio ya se corrigio. Medido, ese par da
   2.66:1: muy por debajo del 4.5 que pide WCAG para texto normal.

   Ahora sigue el patron del resto de la web:
     reposo  #026F00 con texto blanco    6.41:1
     hover   #39B54A con texto #333333   4.74:1

   Ademas del contraste, gana coherencia: el mismo boton no puede verse de
   dos colores segun el ancho de la ventana.
   ========================================================================== */

.d2 .mobile-menu .d2-btn,
.d2 .mobile-menu .btn {
  background: var(--c-verde-hover, #026F00);
  border-color: var(--c-verde-hover, #026F00);
  color: #FFFFFF;
}

.d2 .mobile-menu .d2-btn:hover,
.d2 .mobile-menu .btn:hover,
.d2 .mobile-menu .d2-btn:focus-visible,
.d2 .mobile-menu .btn:focus-visible {
  background: var(--c-verde-marca, #39B54A);
  border-color: var(--c-verde-marca, #39B54A);
  color: #333333;
}

/* El de Client Login va en linea, como en escritorio */
.d2 .mobile-menu .header__login-btn {
  background: transparent;
  border-color: var(--c-verde-hover, #026F00);
  color: var(--c-verde-hover, #026F00);
}

.d2 .mobile-menu .header__login-btn:hover,
.d2 .mobile-menu .header__login-btn:focus-visible {
  background: var(--c-verde-hover, #026F00);
  border-color: var(--c-verde-hover, #026F00);
  color: #FFFFFF;
}

/* ==========================================================================
   EL $2.94M DE LA CALCULADORA (4/9/2026)

   Iba en verde de marca sobre el gris #F5F5F5 del bloque: 2.44:1, por
   debajo del 3 que pide WCAG para texto grande.

   Es la misma cifra que aparece en Reviews, asi que se resuelve igual: el
   bloque pasa a blanco y la cifra al verde de marca al 90% sobre negro.

   Por que no bastaba con cambiar solo el verde: sobre el gris el #33A343
   da 2.98 --se queda a 0.02 del minimo--. El fondo gris es mas exigente
   que el blanco, y ademas tener la misma cifra sobre dos fondos distintos
   segun la seccion no tiene sentido.

   Medido: 3.25:1 sobre blanco.
   ========================================================================== */

.d2 .calc .prueba {
  background: #FFFFFF;
  border: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .calc .prueba__cifra {
  color: #33A343;
}

/* ==========================================================================
   LOS PUNTOS DE NAVEGACION DE REVIEWS (4/9/2026)

   Son controles, asi que WCAG 1.4.11 pide 3:1 contra el fondo. Medido:

     inactivo  #E4E4E4  1.27:1
     activo    #39B54A  2.66:1

   Ninguno llegaba. Ahora:

     inactivo  #8F8F8F  3.23:1   negro de marca al 55% sobre blanco
     activo    #026F00  6.41:1   el verde oscuro de la web

   El activo va en #026F00 y no en el #33A343 de las cifras por un motivo
   medido: con ese verde claro los dos puntos daban 1.01:1 ENTRE SI --casi
   la misma luminosidad-- y quien no distinga tonos no sabria cual esta
   activo. Con el oscuro suben a 1.98, el doble de separacion.

   Ademas es el verde que ya usa el eyebrow de esta misma seccion.

   El punto activo sigue creciendo 1.6x: la senal no depende solo del color,
   y ademas lleva role=tab con aria-selected.
   ========================================================================== */

.d2 .d2-res-cen__punto {
  background: #8F8F8F;
}

.d2 .d2-res-cen__punto.es-activo {
  background: var(--c-verde-hover, #026F00);
}

/* ==========================================================================
   EL BORDE DEL BOTON DE LINEA (4/9/2026)

   Usaba el verde de marca y daba 2.40:1 sobre el gris de seccion y 2.66
   sobre blanco. WCAG 1.4.11 pide 3:1 para el borde de un control, y aqui el
   borde es lo unico que delimita el boton: sin el no se ve donde empieza.

   Pasa al verde de marca al 85% sobre negro --#309A3F--, el mas claro de la
   escala que cumple en los dos fondos: 3.25 y 3.61. A la vista sigue siendo
   el verde de marca.

   Solo el borde. El texto ya cumplia con #026F00 (5.78 y 6.41) y el hover
   no se toca.

   El :not() es necesario: esta regla va al final del archivo y sin el
   pisaria el borde blanco del tono oscuro --que ya cumplia con 5.02:1-- y
   dejaria un verde oscuro sobre fondo negro.

   Afecta al header, al hero y al CTA, que comparten este boton.
   ========================================================================== */

.d2 :not([data-comp-tono="oscuro"]) .d2-btn--linea {
  border-color: #309A3F;
}

/* ==========================================================================
   MUESTRARIO DE BOTONES (7/9/2026, temporal)

   Para que el cliente compare en la web los botones que ya existen mas el
   que pidio. Se retira al elegir.
   ========================================================================== */

.d2 .d2-botones {
  padding-block: clamp(48px, 5.4vw, 76px);
  background: var(--c-blanco, #FFFFFF);
  border-top: 1px solid var(--c-borde, #E4E4E4);
}

.d2 .d2-botones__inner {
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

.d2 .d2-botones__intro {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.d2 .d2-botones__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave);
}

.d2 .d2-botones__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--c-texto);
}

.d2 .d2-botones__lead {
  margin: var(--d2-e3) 0 0;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.62;
  color: var(--c-texto-cuerpo, #333);
}

.d2 .d2-botones__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-botones__caso {
  display: flex;
  flex-direction: column;
  /* 16px: el radio de panel del sistema, no uno intermedio */
  border-radius: var(--d2-radio-md, 16px);
  border: 1px solid var(--c-borde, #E4E4E4);
  padding: clamp(20px, 2.2vw, 26px);
  background: var(--c-blanco, #FFFFFF);
}

.d2 .d2-botones__nombre {
  margin: 0 0 6px;
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--c-texto);
}

.d2 .d2-botones__nota {
  margin: 0 0 clamp(18px, 2vw, 24px);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--c-texto-suave, #6B6B6B);
}

/* La muestra se pega abajo: con notas de distinto largo los botones
   quedaban a alturas distintas y no se podian comparar. */
.d2 .d2-botones__muestra {
  margin-top: auto;
}

/* El caso sobre oscuro necesita su fondo, que es donde vive ese boton */
.d2 .d2-botones__caso--oscuro {
  background: var(--comp-cta, #333333);
  border-color: rgba(255, 255, 255, .14);
}

.d2 .d2-botones__caso--oscuro .d2-botones__nombre { color: #FFFFFF; }
.d2 .d2-botones__caso--oscuro .d2-botones__nota { color: #BFBFBF; }

@media (max-width: 640px) {
  .d2 .d2-botones__lista { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   EL BOTON QUE PIDIO EL CLIENTE

   Verde del logo en reposo, oscureciendo a #026F00 al pasar.

   El texto cambia con el fondo, y no es un capricho: sobre #39B54A el
   blanco da 2.66:1 --por debajo del 4.5:1 que pide WCAG AA, y 16px en
   negrita no cuenta como texto grande--. En #333333 da 4.74:1 y cumple.
   Al oscurecerse el fondo en hover, el blanco pasa a dar 6.41:1 y es el
   que toca. Los dos estados cumplen AA.

   Es ademas el par que recomienda PALETA.md para el verde de marca.
   -------------------------------------------------------------------------- */

.d2 .d2-btn--marca {
  color: var(--c-sobre-verde, #333333);
  background: var(--c-verde-marca, #39B54A);
  border-color: var(--c-verde-marca, #39B54A);
}

.d2 .d2-btn--marca:hover,
.d2 .d2-btn--marca:focus-visible {
  color: #FFFFFF;
  background: var(--c-verde-hover, #026F00);
  border-color: var(--c-verde-hover, #026F00);
  transform: translateY(-2px);
  box-shadow: var(--d2-sombra-alta);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-btn--marca:hover,
  .d2 .d2-btn--marca:focus-visible { transform: none; }
}

/* --- Selector de imagen del hero (temporal) --- */

.d2 .d2-hero-imagenes {
  /* Un escalon por encima del selector de variantes del hero, para que no
     se pisen: cada barra tiene su altura. */
  bottom: calc(var(--sp-6, 40px) + 62px);
}

.d2 .d2-hero-imagenes__eti {
  padding-inline: 4px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-texto-suave, #6B6B6B);
  white-space: nowrap;
}

/* El hueco de imagen pendiente. Se pinta con el rayado diagonal, que es
   justo lo que significa en este sistema: "aqui va material del cliente".
   No es decoracion --fuera de un placeholder no debe usarse--. */
.d2 .d2-hero__sin-imagen {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  /* Abajo a la izquierda: a la derecha lo tapaba el panel de datos, y en
     el centro competia con el titular. */
  align-items: flex-end;
  justify-content: flex-start;
  margin: 0;
  padding: clamp(20px, 3vw, 34px) clamp(24px, 6vw, 96px);
  font-size: .8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #6B6B6B);
  background:
    repeating-linear-gradient(135deg,
      rgba(2, 51, 0, .05) 0 6px,
      transparent 6px 12px),
    var(--d2-relleno, #F3F3F3);
}



/* El interruptor del panel, separado de la lista de imagenes por un filete:
   no es una opcion mas, es otra cosa. */
.d2 .d2-hero-imagenes__panel {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid var(--c-borde, #E4E4E4);
  border-radius: 0 var(--d2-radio-full) var(--d2-radio-full) 0;
}

/* --------------------------------------------------------------------------
   ENCUADRE POR IMAGEN DEL HERO

   El de .d2-hero__fondo esta calibrado para el render original, que es
   1920x1047 (proporcion 1.83). Las dos imagenes nuevas son 1448x1086 (1.33),
   mucho mas cuadradas: con `cover` y ese mismo recorte, el navegador las
   agranda para llenar el alto y se come los bordes. En el diagrama eso
   cortaba las etiquetas de arriba y abajo, y al edificio le quitaba el
   remate.
   -------------------------------------------------------------------------- */

/* El diagrama de flujo: o se ve ENTERO o no dice nada, asi que contain y no
   cover. Ocupa mas ancho porque su contenido llega hasta los cuatro bordes.
   Se ve mejor con el panel oculto --el boton "No panel" de la barra--. */
.d2 .d2-hero__fondo.es-enc-diagrama {
  /* Pegada a la izquierda (7/9/2026): con el diagrama arrinconado a la
     derecha quedaba una banda muerta en medio y la imagen no se integraba.
     Ahora arranca donde acaba el texto y llega al borde. */
  /* left al 50%: el titular acaba en 688px de 1440 --el 48%--, asi que
     desde aqui el diagrama arranca justo despues y no lo pisa. Con el 38%
     se le montaba encima 141px y "your team." caia sobre los paneles
     solares. right:2% mete las etiquetas del borde --SMART MONITORING,
     END USE-- que antes se salian de la ventana. */
  right: 0;
  left: 50%;
  /* width:auto con left Y right puestos no basta: la regla base fija un
     width, y el ancho gana sobre right, asi que la caja se salia 125px por
     la derecha. Con width explicito al 50% las dos coordenadas cuadran. */
  width: 50%;
  /* Sin object-fit: la caja tiene la proporcion justa para el diagrama, asi
     que `fill` --el valor por defecto-- lo muestra entero sin recortar ni
     dejar franjas vacias. Era `contain`, y esas franjas eran las que
     obligaban a difuminar tanto. */
  object-fit: fill;
  opacity: .8;

  /* La mascara se difumina por los DOS lados, y no solo por la izquierda
     como la del render.

     El motivo es `contain`: la imagen NO llena su caja --deja franjas
     vacias a los lados-- asi que el degradado se gastaba en el hueco en
     vez de sobre el dibujo, y el borde real quedaba con un corte vertical
     duro. Con parada al 82% el desvanecido cae donde esta el dibujo.

     Un radial tampoco vale: probado, deja el mismo canto. */
  /* Degradado corto y suave: sin las franjas de `contain` el desvanecido ya
     no tiene que tapar nada, solo integrar el borde. */
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 95%, transparent 100%);
}

/* La escena del distrito: si es cover, pero anclada abajo para que no le
   corte el remate al edificio, y mas ancha para que entre la avenida. */
.d2 .d2-hero__fondo.es-enc-escena {
  /* `contain` y no `cover` (7/9/2026).

     Medido: el hero es 1878x637 --ratio 2.95-- y la imagen 1920x1304
     --1.47--. Con `cover`, para llenar esa franja el navegador la ampliaba
     y **solo se veia el 50% de su altura**: un trozo del edificio a tamano
     gigante en vez de la escena. Y no habia object-position que lo
     salvara, porque el problema es el recorte, no donde cae.

     Con `contain` entra completa: el edificio con sus plantas, los arboles
     y la plaza con las lineas de datos. Alineada a la derecha, para que la
     mitad izquierda quede libre para el texto.

     El degradado baja por tramos --.2 al 14%, .8 al 34%-- asi que sobre el
     titular queda un rastro tenue en vez de un borde. */
  left: 0;
  right: 0;
  width: 100%;
  object-fit: contain;
  object-position: right center;
  opacity: .66;
  /* Las paradas van del 50% al 74% y NO antes, porque con `contain` el
     dibujo no llena la caja: alineado a la derecha, empieza justo en el
     50% --medido: x=940 de 1878--. Con el degradado acabando en el 52% se
     gastaba casi entero sobre la franja vacia y el dibujo arrancaba a
     plena opacidad: canto vertical duro a la izquierda. */
  mask-image: linear-gradient(to right,
    transparent 50%, rgba(0, 0, 0, .35) 58%, rgba(0, 0, 0, .8) 66%, #000 74%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 50%, rgba(0, 0, 0, .35) 58%, rgba(0, 0, 0, .8) 66%, #000 74%);
}

/* En una sola columna el texto ocupa todo el ancho, asi que el diagrama no
   puede arrancar al 50%: se le montaba encima. Vuelve a ancho completo y
   mas tenue, como marca de agua, con el desvanecido de arriba abajo.

   Va al FINAL del archivo a proposito: la regla de escritorio esta en la
   linea ~13060 y, dentro de la media query pero antes de ella, la pisaba. */
@media (max-width: 900px) {
  .d2 .d2-hero__fondo.es-enc-diagrama {
    left: auto;
    right: 0;
    width: 100%;
    opacity: .3;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  }

  /* La escena, a su tamano en movil (10/9/2026).

     Se veia diminuta y perdida en el centro. La regla de escritorio usa
     `contain` por un motivo correcto alli --el hueco es una franja
     apaisada y `cover` recortaba media imagen-- pero apilado el hueco es
     VERTICAL: 390x1085, proporcion 0.36 frente al 1.47 de la imagen. Al
     caber entera por ancho quedaba en una banda de 265px flotando en un
     contenedor de mil.

     Aqui `cover` es lo correcto: llena el ancho y recorta por alto, que es
     lo natural cuando las proporciones no coinciden. Anclada abajo para
     conservar la base del edificio con la gente, que es lo que da escala;
     al centro se quedaba con forjados intermedios, lineas sin referencia.

     Y la mascara pasa a vertical. La horizontal separaba el dibujo del
     texto cuando iban en columnas; apilados el texto va ARRIBA, asi que
     desvaneciendo por la izquierda solo se borraba media imagen. */
  .d2 .d2-hero__fondo.es-enc-escena {
    left: auto;
    right: 0;
    width: 100%;
    /* Arriba y no abajo (11/9/2026): apilado, el render tiene que quedar
       detras del titular y los botones, no del panel. Ahi el grafico pide
       fondo limpio para leerse, y el edificio competia con el. */
    top: 0;
    bottom: auto;
    /* No ocupa el alto entero del hero: con `cover` sobre 1085px el zoom
       era tal que solo se veian forjados interiores, sin edificio
       reconocible. Limitada a 62% la ampliacion es mucho menor y la
       escena se lee. */
    /* Hasta donde empieza el panel, mas un poco: el render acompana al
       texto y se desvanece justo antes de la tarjeta. */
    height: 58%;
    object-fit: cover;
    /* Anclada abajo: conserva la base con los arboles y la gente, que es
       lo que da escala. Al centro quedaban lineas sin referencia. */
    object-position: 50% 100%;
    /* Mas tenue que en escritorio --alli el render va al LADO del texto y
       aqui DEBAJO-- pero no tanto como para que desaparezca: .48 deja ver
       el edificio sin restar legibilidad al titular. */
    /* Mas tenue que antes: ahora queda justo detras del titular y el
       parrafo, no bajo una zona vacia, asi que tiene que ceder para no
       restarles legibilidad. */
    opacity: .34;
    /* El prefijado va DESPUES del estandar, no antes. La regla de
       escritorio lo declara en ese orden, y Chrome aplica el ultimo que
       lee: con el -webkit- delante, la mascara horizontal de escritorio
       seguia ganando y borraba la mitad izquierda de la imagen. */
    /* Se desvanece por ABAJO, donde arranca el panel, y queda solido
       arriba detras del titular. Antes era al reves porque el render iba
       abajo. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
  }
}

/* ==========================================================================
   EQUIPO — OPCION 5: UNA SOLA VOZ (8/9/2026)

   En vez de presentar al equipo entero, saca una persona y le da la palabra.
   Es la referencia que trajo el cliente.

   Reutiliza el lenguaje de la banda verde y de la firma: mismo fondo
   #1A5121, mismo circuito, mismos colores. No se inventa una paleta nueva:
   es la misma seccion contada de otra forma.
   ========================================================================== */

.d2 .d2-equipo-voz {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 5.4vw, 76px);
  background: #1A5121;

  /* Los tokens se redefinen aqui, igual que en la firma: las reglas de
     nombre, cargo y bio se comparten con otras variantes y van mas abajo
     en el archivo, asi que perseguirlas una a una no funciona. */
  --c-texto: #FFFFFF;
  --c-texto-cuerpo: #B5DBAD;
  --c-texto-suave: #B5DBAD;
  --c-borde: rgba(255, 255, 255, .18);
}

.d2 .d2-equipo-voz__circuito {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}

.d2 .d2-equipo-voz__circuito path {
  fill: none;
  stroke: rgba(176, 225, 183, .28);
  stroke-width: 1.2px;
}

.d2 .d2-equipo-voz__circuito circle {
  fill: #1A5121;
  stroke: rgba(176, 225, 183, .45);
  stroke-width: 1.6px;
}

.d2 .d2-equipo-voz__inner {
  position: relative;
  z-index: 1;
  max-width: var(--d2-ancho);
  margin-inline: auto;
  padding-inline: var(--d2-gutter);
}

/* --- La cabecera --- */

.d2 .d2-equipo-voz__intro {
  /* TERMINA DONDE TERMINA LA BIO (14/9/2026)

     El usuario lo pidio asi: "deberia de terminar casi en la misma linea
     que el texto de abajo".

     Dos intentos antes de este: 88ch cortaba a media seccion --el 65% del
     ancho-- y sin tope se pasaba de largo, 145px mas alla de la bio.

     El valor no se escribe a ojo, se DERIVA de donde acaba la bio:

       retrato   clamp(180px, 22vw, 260px)
       + hueco   clamp(28px, 3.6vw, 56px)
       + la bio  86ch a .9375rem

     La bio arranca desplazada por el retrato y su hueco, y este parrafo
     arranca en el borde del inner. Sumando los tres tramos, el punto
     donde acaba la bio son unos 1033px con los tres valores en su tope.

     Se escribe con calc() y no con un numero fijo para que los tres
     sigan a sus clamps: si la ventana encoge, el retrato y el hueco se
     estrechan y este parrafo los acompana en vez de descuadrarse.

     El 0.556 es el ancho del "0" en Open Sans, que es lo que mide 1ch.
     Se pone explicito porque `ch` aqui valdria lo que mide a 17px --el
     tamano de ESTE parrafo-- y lo que hay que replicar es el de la bio,
     que va a 15. */
  max-width: calc(
    clamp(180px, 22vw, 260px)          /* el retrato */
    + clamp(28px, 3.6vw, 56px)         /* su hueco */
    + 86 * 0.9375rem * 0.556           /* la bio: 86ch a .9375rem */
  );
  margin-bottom: clamp(34px, 4vw, 56px);
}

.d2 .d2-equipo-voz__eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B5DBAD;
}

.d2 .d2-equipo-voz__titulo {
  margin: var(--d2-e2) 0 0;
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: var(--fw-extrabold);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: #FFFFFF;
}

.d2 .d2-equipo-voz__lead {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #B5DBAD;
}

/* --- La persona --- */

.d2 .d2-equipo-voz__persona {
  display: grid;
  grid-template-columns: clamp(180px, 22vw, 260px) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
}

/* El retrato con su anillo, igual que en la banda verde: 420ms y curva
   simetrica, entrada y salida iguales. */
.d2 .d2-equipo-voz__marco {
  display: block;
  width: 100%;
  border-radius: 50%;
  /* overflow oculta las esquinas del PNG: sin esto el anillo se dibuja por
     fuera de ellas y se ve un cuadrado alrededor. */
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(176, 225, 183, .55);
  transition: box-shadow .42s cubic-bezier(.4, 0, .2, 1),
              transform .42s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-equipo-voz__marco picture { display: block; }

.d2 .d2-equipo-voz__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.d2 .d2-equipo-voz__persona:hover .d2-equipo-voz__marco {
  box-shadow: 0 0 0 4px var(--c-verde-marca, #39B54A),
              0 0 0 11px rgba(57, 181, 74, .2);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .d2-equipo-voz__marco { transition: none; }
  .d2 .d2-equipo-voz__persona:hover .d2-equipo-voz__marco { transform: none; }
}

.d2 .d2-equipo-voz__nombre {
  margin: 0;
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #FFFFFF;
}

.d2 .d2-equipo-voz__cred {
  margin: 4px 0 0;
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: #B5DBAD;
}

.d2 .d2-equipo-voz__cargo {
  margin: 2px 0 0;
  font-size: .9375rem;
  color: #A4D49B;
}

.d2 .d2-equipo-voz__bio {
  /* 86ch: sin tope se estiraria a los 884px de la columna --mas de 100
     caracteres--, pero con 72 quedaba demasiado estrecha al lado del
     retrato y sobraba verde a la derecha. */
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  max-width: 86ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: #B5DBAD;
}

/* El boton de contorno del sistema, sobre verde: el borde y el texto pasan
   a blanco y al apuntar se rellena. Es .d2-btn--linea, no uno nuevo. */
/* El selector repite .d2-equipo-voz__btn a proposito: mas arriba hay un
   `.d2 :not([data-comp-tono="oscuro"]) .d2-btn--linea { border-color:#309A3F }`
   que gana por especificidad --el :not() puntua-- y dejaba el borde verde
   sobre el fondo verde, casi invisible. */
.d2 .d2-equipo-voz__btn.d2-equipo-voz__btn {
  margin-top: clamp(20px, 2.4vw, 28px);
  color: #FFFFFF;
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
}

.d2 .d2-equipo-voz__btn.d2-equipo-voz__btn:hover,
.d2 .d2-equipo-voz__btn.d2-equipo-voz__btn:focus-visible {
  color: #1A5121;
  background: #FFFFFF;
  border-color: #FFFFFF;
}

@media (max-width: 900px) {
  .d2 .d2-equipo-voz__persona {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 4vw, 30px);
  }

  /* Apilado, el retrato no necesita tanto ancho */
  .d2 .d2-equipo-voz__marco { max-width: 200px; }
}

/* ==========================================================================
   ZONAS TACTILES EN MOVIL (8/9/2026)

   Apple pide 44x44 puntos y WCAG 2.5.5 lo mismo. Medido a 390px de ancho
   habia 32 enlaces y botones por debajo --el mas pequeno de 10px--, y en un
   movil se fallan al pulsar.

   Se agranda el AREA, no el elemento: un ::after superpuesto y centrado. Asi
   el dibujo no se mueve ni un pixel. Ampliar con padding y margen negativo
   no vale: en inline-flex descoloca la alineacion, y ya paso una vez.

   Solo por debajo de 900px: en escritorio se apunta con raton y 44px de alto
   en un enlace de texto rompe el ritmo vertical.
   ========================================================================== */

@media (max-width: 900px) {
  .d2 :is(.d2-rutas-sec__enlace,
          .d2-res-cen__punto,
          .d2-res-cen__flecha,
          .d2-pie-dir__login,
          .d2-pie-social,
          .d2-pie-dir__logo,
          .header__logo,
          .d2-faq-dato__pie a,
          .d2-pie-dir__col a,
          .d2-pie-dir__enlaces a,
          .d2-pie-dir__legales a) {
    position: relative;
  }

  .d2 :is(.d2-rutas-sec__enlace,
          .d2-res-cen__punto,
          .d2-res-cen__flecha,
          .d2-pie-dir__login,
          .d2-pie-social,
          .d2-pie-dir__logo,
          .header__logo,
          .d2-faq-dato__pie a,
          .d2-pie-dir__col a,
          .d2-pie-dir__enlaces a,
          .d2-pie-dir__legales a)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Ancho y alto FIJOS de 44: con width:100% el pseudoelemento hereda el
       tamano del elemento y no agranda nada, que fue el primer intento. El
       max() deja que crezca si el elemento ya es mayor. */
    width: max(100%, 44px);
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Los puntos del carrusel de resenas van a 10px de alto y muy juntos: con
     44px de area se solaparian y el toque caeria en el vecino. */
  .d2 .d2-res-cen__puntos { gap: 14px; }
}

/* ==========================================================================
   TAMANO MINIMO DE TEXTO EN MOVIL (8/9/2026)

   Medido a 390px habia 16 textos por debajo de 12px, alguno a 8.5. A ese
   tamano el texto deja de leerse comodo en un movil, y quien tenga la vista
   cansada no lo lee en absoluto.

   El suelo es 12px y no 16: son etiquetas y datos secundarios --eyebrows,
   avisos del mapa, cifras pequenas--, no cuerpo de texto. Subirlos a 16
   los pondria al nivel del parrafo y romperia la jerarquia, que es lo que
   estas piezas aportan.

   Solo por debajo de 900px: en escritorio se lee mas cerca y de una pantalla
   mas grande, y ahi el 11px de un eyebrow cumple su papel.
   ========================================================================== */

@media (max-width: 900px) {
  .d2 :is(.eyebrow,
          .d2-equipo-voz__eyebrow,
          .d2-botones__eyebrow,
          .d2-pie-dir__titulo,
          .d2-prob-mapa__aviso,
          .d2-equipo-voz__cred) {
    font-size: 12px;
  }

  /* Las etiquetas y cifras del mapa de cartera, que son las mas pequenas */
  .d2 .d2-prob-mapa :is(small, strong) {
    font-size: 12px;
  }

  /* El pie de las metricas del hero */
  .d2 .d2-metrica span,
  .d2 .d2-panel small {
    font-size: 12px;
  }

  /* Las etiquetas bajo las cifras de Reviews: iban a 11px */
  .d2 .d2-res-cen__cifras span {
    font-size: 12px;
  }
}


/* ==========================================================================
   LA CASILLA DE CONSENTIMIENTO (9/9/2026)

   Pedida por el cliente para los tres caminos del formulario. No habia
   ninguna casilla en el proyecto, asi que se escribe siguiendo los mismos
   tokens que el resto de campos: mismo verde, mismo radio de 6px, mismo
   borde.

   Se usa la casilla NATIVA con `appearance:none` en vez de esconderla
   detras de un span: asi conserva el foco del teclado, el estado
   indeterminado y la lectura correcta del lector de pantalla, y solo se le
   cambia la piel.
   ========================================================================== */

.d2 .campo--casilla .casilla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  cursor: pointer;
}

.d2 .campo--casilla .casilla__input {
  /* La caja, dibujada sobre el control nativo */
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  /* 2px de margen arriba: alinea la caja con la primera linea del texto,
     que va a 13px y no empieza en el borde de su caja. */
  margin: 2px 0 0;
  border: 1px solid var(--c-borde, #C9C9C9);
  border-radius: 4px;
  background: var(--c-blanco, #FFFFFF);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.d2 .campo--casilla .casilla__input:hover {
  border-color: var(--c-verde, #39B54A);
}

/* Marcada: fondo verde y el tic dibujado como imagen de fondo. En SVG y no
   con un pseudoelemento porque `appearance:none` deja el control sin
   ::before ni ::after propios en algunos navegadores. */
.d2 .campo--casilla .casilla__input:checked {
  border-color: var(--c-verde, #39B54A);
  background-color: var(--c-verde, #39B54A);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.d2 .campo--casilla .casilla__input:focus-visible {
  outline: 2px solid var(--c-verde, #39B54A);
  outline-offset: 2px;
}

/* Sin marcar y con el formulario enviado: el navegador la marca como
   invalida. Se avisa con el borde, nunca solo con el color --norma 1.4.1--:
   el texto del navegador acompana. */
.d2 .campo--casilla .casilla__input:invalid:not(:focus) {
  border-color: var(--c-borde, #C9C9C9);
}

.d2 .campo--casilla .casilla__texto {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-texto-suave, #6B6B6B);
}

/* La casilla no lleva la caja gris de los demas campos: es una linea de
   texto con un control, no un campo de escritura. */
.d2 .campo--casilla {
  margin-top: 4px;
  margin-bottom: 14px;
}


/* ==========================================================================
   RESERVAR CITA TRAS ENVIAR (9/9/2026, Parte 6)

   Aparece bajo la confirmacion, y solo si hay enlace de Meetings puesto en
   los ajustes. El boton reutiliza .btn--linea: es una accion secundaria,
   no compite con lo que se acaba de hacer.
   ========================================================================== */

.d2 .tras-envio__reserva {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--c-borde-suave, #EFEFEF);
}

.d2 .tras-envio__reserva .captura__texto {
  margin-bottom: 12px;
}

/* El calendario de HubSpot. Alto minimo para que no salga una franja
   aplastada mientras carga: el iframe llega sin dimensiones y la caja se
   quedaria en cero hasta que responde el servidor. */
.d2 .reserva-zona {
  margin-top: 14px;
  min-height: 420px;
}

.d2 .reserva-zona[hidden] { display: none; }

.d2 .reserva-zona iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
}

/* En movil el calendario necesita mas alto: HubSpot lo apila en una sola
   columna y con 420px queda con scroll propio dentro del iframe, que se
   pelea con el de la pagina. */
@media (max-width: 640px) {
  .d2 .reserva-zona,
  .d2 .reserva-zona iframe { min-height: 560px; }
}


/* ==========================================================================
   EL PANEL DEL HERO CON EL GRAFICO (9/9/2026)

   Responde a dos puntos del feedback a la vez: donde va el panel respecto a
   la imagen (10) y que el grafico de la figura 1 vaya dentro (17).

   El panel es ESTRECHO y no llena su columna. El cliente lo dijo mirando la
   imagen 1: "it's most successful with image #1, where you can see it
   spilling all around the panel". Con la imagen 3, que es la que eligieron,
   hay que dejar que la ilustracion respire alrededor en vez de taparla.
   ========================================================================== */

.d2 .d2-hero__panel {
  /* Ocupa la segunda columna del hero, pero no entera: 84% deja ver la
     ilustracion por los lados. */
  justify-self: center;
  /* 440 y no 420: con el ancho anterior la leyenda de cuatro entradas se
     quedaba a 1px de no caber en una fila. Veinte pixeles mas dan holgura
     sin comerse la ilustracion, que sigue viendose alrededor.

     --panel-escala lo pone el selector de tamano, que es de PRUEBA: vale 1
     mientras nadie lo toque, asi que la regla se comporta igual que antes
     de existir.

     El tope es el 100% de su COLUMNA --568px en escritorio-- y no un
     porcentaje menor: con el 86% anterior el panel se quedaba en 488 y el
     factor de 1.4 no llegaba a verse. La columna ya es el limite natural,
     porque pasar de ahi invadiria la del texto. */
  width: calc(440px * var(--panel-escala, 1));
  max-width: 100%;
  padding: 22px 20px 18px;
  border: 1px solid var(--c-borde-suave, #EFEFEF);
  border-radius: 12px;
  /* Casi opaco, no del todo: se intuye el edificio por detras y el panel no
     se lee como una tarjeta pegada encima. */
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 10px 34px rgba(2, 51, 0, .10);
}

.d2 .d2-hero__panel-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-hero__panel-cifra {
  margin: 4px 0 0;
  /* 40px es el techo del sistema para una cifra. */
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: var(--fw-extrabold, 800);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--c-texto, #333333);
}

.d2 .d2-hero__panel-nota {
  margin: 5px 0 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-texto-suave, #6B6B6B);
}

/* --- Las dos metricas --- */

/* Dos columnas cuando solo hay dos metricas: con `repeat(3, 1fr)` la
   tercera columna quedaba vacia y las dos cifras se apretaban a la
   izquierda. */
.d2 .d2-hero__metricas--dos {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4px 20px !important;
}

.d2 .d2-hero__metricas {
  /* Tres columnas (11/9/2026): el acumulado se une a las dos anuales en
     vez de ir solo arriba. Son la misma clase de dato y juntas se comparan;
     separadas, la de arriba pesaba mas de lo que le toca. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
  margin: 0 0 14px;
  padding: 12px 0 0;
  border-top: 1px solid var(--c-borde-suave, #EFEFEF);
}

.d2 .d2-hero__metricas dt {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-hero__metricas dd {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: var(--fw-bold, 700);
  line-height: 1.2;
  color: var(--c-texto, #333333);
}

/* El acumulado es el dato que abre el panel, asi que va un punto por
   encima de los otros dos. Sin pasarse: en tres columnas de 130px una
   cifra mas grande parte la linea. */
.d2 .d2-hero__metricas-alta {
  font-size: 23px !important;
  letter-spacing: -.02em;
}

.d2 .d2-hero__metricas dd small {
  font-size: 12px;
  font-weight: var(--fw-medium, 600);
  color: var(--c-texto-suave, #6B6B6B);
}

/* El descenso, en verde: es la buena noticia del dato. En su propia linea
   para que no compita con la cifra. */
.d2 .d2-hero__delta {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  font-weight: var(--fw-medium, 600);
  color: var(--c-verde-hover, #026F00);
}

/* En pantallas estrechas las dos metricas se apilan: a media columna de un
   panel de 350px, "2.7M kWh" y su descenso no caben en linea. */
@media (max-width: 480px) {
  /* Las tres siguen en fila: las cifras son cortas y lo que no cabia era
     la etiqueta de dos palabras, que aqui parte en dos lineas. Apiladas,
     el panel crecia 90px y empujaba el grafico fuera de la pantalla. */
  .d2 .d2-hero__metricas {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 8px;
  }

  .d2 .d2-hero__metricas dt { font-size: 10.5px; }
  .d2 .d2-hero__metricas dd { font-size: 16px; }
  .d2 .d2-hero__metricas-alta { font-size: 19px !important; }
  .d2 .d2-hero__delta { font-size: 10.5px; }

}


/* --- El grafico --- */

.d2 .hero-gr {
  display: block;
  width: 100%;
  height: auto;
}

.d2 .hero-gr__rejilla line {
  stroke: var(--c-borde-suave, #EFEFEF);
  stroke-width: 1;
}

/* Las barras: el verde de marca. En la figura del cliente son amarillas
   --el color por defecto de Excel-- pero aqui mandan los colores de Rede. */
.d2 .hero-gr__barras rect {
  /* Verde claro, no el pleno: las barras son el fondo de la historia --el
     dinero que se va acumulando-- y las lineas son la lectura. Con el
     verde de marca competian y las curvas se perdian detras. */
  fill: rgba(57, 181, 74, .55);
  /* Crecen desde abajo al entrar en pantalla. transform-origin en el fondo
     del lienzo, no en la barra: en SVG el origen es del sistema de
     coordenadas y con "bottom" cada barra se escalaria desde su propio
     centro. */
  transform: scaleY(0);
  transform-origin: 0 266px;
  transform-box: view-box;
  animation: hero-gr-sube .55s cubic-bezier(.32, .72, 0, 1) forwards;
  animation-delay: calc(.5s + var(--i) * .045s);
}

@keyframes hero-gr-sube {
  to { transform: scaleY(1); }
}

.d2 .hero-gr__linea {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* El trazo se dibuja de izquierda a derecha. 1400 cubre de sobra el
     largo real de cualquiera de las tres. */
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: hero-gr-traza 1.3s cubic-bezier(.32, .72, 0, 1) forwards;
}

@keyframes hero-gr-traza {
  to { stroke-dashoffset: 0; }
}

/* "Do nothing" es la linea de referencia: gris, discreta, queda arriba. */
.d2 .hero-gr__linea--nada {
  /* #8A8A8A (14/9/2026). El comentario anterior ya razonaba bien --decia
     que #E4E4E4 da 1.27:1 y es invisible, y que #9A9A9A se queda en
     2.81-- pero el codigo seguia poniendo var(--c-borde), o sea #E4E4E4.
     El razonamiento estaba escrito y no aplicado.

     Medido sobre el panel blanco:

       #E4E4E4 ... 1.27:1   lo que habia
       #9A9A9A ... 2.81:1   lo que decia el comentario, tampoco llega
       #8A8A8A ... 3.45:1   pasa el minimo de 3.0 para elemento grafico

     Sigue siendo la mas tenue de las tres, que es lo que le toca a una
     linea de referencia:

       do nothing  #8A8A8A ... 3.45:1   guion largo
       target      #6B6B6B ... 5.33:1   punteado
       actual      #026F00 ... 6.41:1   solido

     Gris y no rojo: el manual dice que la marca vive "in the range of
     green and grey", y el verde ya esta tomado por la linea real. */
  stroke: #8A8A8A;
  /* Guion largo, trazo fino: es la linea de referencia, la que dice donde
     estaria el consumo sin hacer nada. */
  stroke-dasharray: 7 5;
  stroke-width: 1.6;
  animation-delay: .1s;
}

/* La meta, punteada: es un objetivo, no un hecho. */
.d2 .hero-gr__linea--meta {
  /* Gris oscuro y no verde (11/9/2026). Con el verde anterior, "Target" y
     "Actual" tenian 1.83 de contraste ENTRE ELLAS: dos verdes casi
     iguales que solo se separaban por el punteado.

     En la figura del cliente esta linea es naranja, pero ese color no se
     puede usar: el manual lo menciona sin dar su valor en ninguna de sus
     13 paginas, y esta pendiente pedirselo. El manual si dice que la
     marca vive "in the range of green and grey", asi que la meta se va al
     gris y el verde queda para una sola linea: la real.

     El TONO importa tanto como el color: un gris oscuro tenia la misma
     luminosidad que el verde --1.08 entre ellos-- y en blanco y negro
     habrian sido la misma linea. Los tres tonos escalan ahora de claro
     a oscuro: referencia, meta y real, que es el orden en que
     importan. */
  stroke: #6B6B6B;
  /* Punteada y fina: es un objetivo, no un hecho. El punto corto la
     distingue del guion largo de la referencia sin mirar el color. */
  stroke-dasharray: 1.5 3.5;
  stroke-width: 1.8;
  stroke-linecap: round;
  animation: none;
  opacity: 0;
  animation: hero-gr-aparece .5s ease .9s forwards;
}

@keyframes hero-gr-aparece {
  to { opacity: 1; }
}

/* Lo que de verdad paso: el verde oscuro, el trazo con mas peso. */
.d2 .hero-gr__linea--real {
  stroke: var(--c-verde-hover, #026F00);
  /* La mas gruesa de las tres: es el dato que importa. */
  stroke-width: 2.8;
  animation-delay: .35s;
}

/* --- La leyenda --- */

.d2 .d2-hero__leyenda {
  /* Flex y no rejilla fija: con dos columnas las cuatro entradas partian en
     dos filas aunque cupieran en una --suman 377px y disponen de 393--. Asi
     van en linea cuando hay sitio y se reparten solas cuando no, que es lo
     que pasa en movil. */
  display: flex;
  flex-wrap: wrap;
  gap: 5px 13px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--c-texto-suave, #6B6B6B);
}

.d2 .d2-hero__leyenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.d2 .d2-hero__punto {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  /* El mismo gris que la linea que representa. Antes var(--c-borde)
     --#E4E4E4, 1.27:1--: la muestra de la leyenda estaba tan invisible
     como su linea, asi que el usuario no podia ni saber que color
     buscar. */
  background: #8A8A8A;
}

.d2 .d2-hero__punto--ahorro {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--c-verde, #39B54A);
}

.d2 .d2-hero__punto--real { background: var(--c-verde-hover, #026F00); }

/* Target: el mismo verde apagado de su linea. Faltaba en la leyenda --se
   dibujaban tres lineas y solo se nombraban dos-- asi que la del medio
   quedaba sin identificar. */
.d2 .d2-hero__punto--meta { background: #6B6B6B; }

/* Los anos, bajo el grafico. Solo el primero y el ultimo: los once no caben
   legibles en un panel de 400px, y con los extremos ya se responde la
   pregunta que importa --cuanto tiempo--.

   Van en HTML y NO dentro del SVG: ahi escalaban con el lienzo y acababan a
   7px en escritorio y 6px en movil, la mitad del minimo de 12px que respeta
   el resto de la web. Fuera conservan su tamano real. */
/* Los anos, uno bajo cada barra, y la escala de la derecha.

   Van DENTRO del SVG --no como HTML debajo-- porque tienen que quedar
   alineados con su barra y con su linea de rejilla. Fuera habria que
   recalcular posiciones en cada ancho.

   Eso obliga a vigilar el tamano: el SVG escala, asi que 11px en el
   lienzo de 560 se ven a 7.8px reales en un panel de 400. Se compensa
   declarandolos mas grandes de lo que pareceria necesario. */
.d2 .hero-gr__anos text {
  font-family: inherit;
  /* 17 en el lienzo = 12 reales: el SVG va de 560 a ~398, factor 0.71.
     Con 15 se quedaban en 10.7, por debajo del minimo de la web. */
  font-size: 17px;
  fill: var(--c-texto-suave, #6B6B6B);
}

.d2 .hero-gr__escala text {
  font-family: inherit;
  font-size: 17px;
  fill: var(--c-texto-suave, #6B6B6B);
}

/* La nota que aclara que son cursos y no anos naturales. El apostrofo de
   '14 podria leerse como 2014 a secas. */
.d2 .d2-hero__nota-anos {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: var(--c-texto-suave, #6B6B6B);
}

/* En movil el hero se apila y el panel pasa a ancho completo: a 84% de una
   columna estrecha el grafico se queda ilegible. */
@media (max-width: 900px) {
  .d2 .d2-hero__panel {
    width: 100%;
    max-width: 420px;
    justify-self: start;
  }
}

/* Sin movimiento: el grafico se ve entero desde el principio. */
@media (prefers-reduced-motion: reduce) {
  .d2 .hero-gr__barras rect,
  .d2 .hero-gr__linea {
    animation: none;
    transform: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}


/* El SVG se encoge mas en movil --de 560 a ~310, factor 0.55-- asi que las
   etiquetas necesitan mas cuerpo en el lienzo para llegar a los 12px
   reales.

   Va al FINAL del archivo a proposito: la regla general esta mas arriba y,
   teniendo las dos la misma especificidad, gana la ultima. Puesta dentro
   del bloque de movil pero antes de ella, no tenia efecto. */
@media (max-width: 480px) {
  .d2 .hero-gr__anos text,
  .d2 .hero-gr__escala text { font-size: 22px; }
}


/* La barra del selector de tamano del panel. Mismo aspecto que el resto de
   mandos de prueba; se retira con ellos antes de publicar. */
.d2-hero-tamano__eti {
  font-size: 11px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-texto-suave, #6B6B6B);
  white-space: nowrap;
}

.d2-caru__mandos.esta-minimizado .d2-hero-tamano__eti { display: none; }

/* En movil no aparece: el panel ya ocupa el ancho disponible y no hay nada
   que agrandar.

   Hace falta la regla de CSS ademas del atributo `hidden` del guion: las
   reglas de .d2-caru__mandos declaran `display:flex`, y un `display` en
   una regla normal GANA al display:none que el navegador da por hidden.
   Es la misma trampa que ya paso con los carruseles apagados. */
@media (max-width: 640px) {
  .d2-hero-tamano[hidden] { display: none !important; }
}


/* ==========================================================================
   LOS RETRATOS DEL EQUIPO (11/9/2026)

   Vuelven las fotos originales del cliente. Las anteriores estaban
   retocadas con IA y el feedback las descarta: "prefer not to have AI
   altered images".

   Al pasar el raton, tres de ellas cambian por una foto de su aficion.
   Enrique no tiene, asi que se queda quieto.

   EL ENCUADRE

   Las fotos son verticales --ratio 0.71-- y el hueco es un circulo. Con
   `cover` se recorta por los lados y se conserva el alto, que es lo
   correcto: `contain` dejaria la cara diminuta con franjas vacias.

   Pero el punto de recorte NO puede ser el mismo para todas. Las de
   aficion son fotos de verdad, con la persona donde cayo: Matthew arriba
   a la derecha en la avioneta, Erica de cuerpo entero en el huerto. Un
   recorte centrado le cortaria la cabeza. Por eso cada una lleva su
   `object-position`, medido sobre la foto.
   ========================================================================== */

.d2 .d2-equipo-retrato {
  position: relative;
  display: block;
  /* El circulo va AQUI, no heredado.

     Antes ponia `border-radius: inherit`, pero el padre es un <picture>
     sin radio: el circulo lo lleva el <img>, que es hijo. Heredaba 0 y
     entonces este envoltorio --que si recorta, por el overflow-- cortaba
     en cuadrado. Eso partia el circulo por los cuatro lados, y al ampliar
     la foto de aficion con `scale` se veia el cuadrado entero.

     El aspect-ratio asegura que la caja sea cuadrada: un 50% sobre un
     rectangulo daria una elipse. */
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

/* El anillo, como en One Voice: lo pinta el ENVOLTORIO.

   Un box-shadow se dibuja fuera del borde, asi que el recorte del propio
   elemento no lo toca --pero si se come el de sus hijos. En One Voice el
   anillo lo pone un <span> ancestro y por eso siempre se vio; en
   Signature lo ponia el <img>, que queda dentro, y desaparecia.

   Se traslada aqui y se apaga el del <img> para no pintarlo dos veces.
   El valor es el mismo de la regla original, no uno nuevo. */
.d2 .d2-equipo-firma__mini .d2-equipo-retrato,
.d2 .d2-equipo-firma__principal .d2-equipo-retrato {
  box-shadow: 0 0 0 2px rgba(176, 225, 183, .5);
  /* Anillo Y movimiento juntos: el translateY lo llevaba el <img>, pero
     la regla del cruce le dejo la transicion en solo `opacity` y el
     salto dejo de animarse. Aqui viajan los dos al mismo ritmo, y sube
     el circulo entero en vez de la foto dentro de un marco quieto. */
  transition: box-shadow .42s cubic-bezier(.4, 0, .2, 1),
              transform .42s cubic-bezier(.4, 0, .2, 1);
}

.d2 .d2-equipo-retrato > .d2-equipo-firma__foto-mini,
.d2 .d2-equipo-retrato > .d2-equipo-firma__foto-grande {
  box-shadow: none;
}

/* El movimiento lo hace el envoltorio: si subieran los dos, serian 6px. */
.d2 .d2-equipo-firma__mini:hover .d2-equipo-retrato > img,
.d2 .d2-equipo-firma__principal:hover .d2-equipo-retrato > img {
  transform: none;
}

/* Al apuntar se enciende, igual que antes hacia el <img>. */
.d2 .d2-equipo-firma__mini:hover .d2-equipo-retrato,
.d2 .d2-equipo-firma__principal:hover .d2-equipo-retrato {
  box-shadow: 0 0 0 3px var(--c-verde-marca, #39B54A),
              0 0 0 9px rgba(57, 181, 74, .18);
  transform: translateY(-3px);
}

/* Las dos fotos ocupan el mismo sitio: la de aficion encima, oculta. */
.d2 .d2-equipo-retrato .es-aficion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* La que ENTRA: 700ms con una curva de salida suave --arranca en
     seguida y frena al final. La de abajo se apaga con un retraso de
     80ms, asi que durante el cruce siempre hay una capa sosteniendo la
     imagen y no se ve el lavado de cuando las dos estan a medias. Es lo
     que hacen los cruces de video. */
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1);
}

/* El cruce. Tambien con :focus-within, para quien navega con teclado. */
.d2 .d2-equipo-retrato:hover .es-aficion,
.d2 .d2-equipo-retrato:focus-within .es-aficion {
  opacity: 1;
}

/* El retrato de debajo se desvanece a la vez: sin esto se ven las dos
   superpuestas durante la transicion, porque la de arriba no es opaca
   hasta el final. */
/* La que SALE: misma duracion, 80ms mas tarde. */
.d2 .d2-equipo-retrato img:not(.es-aficion) {
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1) .08s;
}

.d2 .d2-equipo-retrato:hover img:not(.es-aficion),
.d2 .d2-equipo-retrato:focus-within img:not(.es-aficion) {
  opacity: 0;
}

/* --- El encuadre de cada foto ---

   Cada retrato lleva el suyo. Antes los cuatro compartian un 28% y con
   eso la coronilla rozaba el borde en tres de ellos; Enrique se salvaba
   porque su foto ya es cuadrada y no se recorta por arriba.

   Los valores dejan el MISMO aire sobre la cabeza: un 6% del diametro.
   En porcentaje y no en pixeles, porque el mismo hueco absoluto se ve
   muy distinto en un circulo de 240px que en uno de 88px.

   Salen de medir en que altura del archivo empieza la cabeza --la
   primera fila que se aparta del fondo liso-- y calcular desde ahi, no
   de irlos moviendo a ojo hasta que parezca bien.

   Las de aficion, mas abajo, si van a ojo: ahi no hay fondo liso que
   medir y la persona cae en un sitio distinto en cada foto. */

.d2 [src*="equipo/matthew.jpg"] {
  object-fit: cover;
  object-position: 50% 6%;
}

.d2 [src*="equipo/marco.jpg"] {
  object-fit: cover;
  object-position: 50% 9%;
}

.d2 [src*="equipo/erica.jpg"] {
  object-fit: cover;
  object-position: 50% 10%;
}

/* Enrique no necesita ajuste: su foto es cuadrada, asi que `cover` no
   recorta nada por arriba y el object-position no cambia lo que se ve. */
.d2 [src*="equipo/enrique"] {
  object-fit: cover;
  object-position: 50% 28%;
}

/* En la avioneta, mirando a camara desde la derecha del encuadre. */
.d2 [src*="matthew-hover"] {
  object-fit: cover;
  object-position: 72% 26%;
}

/* Las dos de cuerpo entero necesitan ACERCARSE, no solo elegir franja.

   `cover` recorta por los lados pero conserva todo el alto, asi que con
   object-position solo se decide que parte se ve. En un circulo de 68px
   --las miniaturas de la variante Signature-- la cara quedaba de tres
   pixeles y no se reconocia a nadie.

   Con `scale` se amplia dentro de la caja y el transform-origin marca
   sobre que punto: ahi es donde esta la cara. */

/* El acercamiento va en `scale` y NO en `transform`.

   Son dos propiedades distintas y el navegador las compone: asi el
   translateY(-3px) del hover --que levanta el retrato-- sigue funcionando
   sin borrar el encuadre. Metidos los dos en `transform`, el ultimo en
   aplicarse gana y el acercamiento desaparecia justo al apuntar.

   Las coordenadas salen de medir donde esta la cara en cada archivo, no
   de estimarla mirando la foto. */

/* Esquiando: la cara esta en x=54%, y=18%, pero encima lleva casco y
   gafas que la deteccion de piel no cuenta como cara. Con 2,1 de
   acercamiento el casco quedaba cortado por arriba. */
.d2 [src*="marco-hover"] {
  object-fit: cover;
  object-position: 52% 10%;
  scale: 1.75;
  transform-origin: 52% 10%;
}

/* En el huerto: cara medida en x=58%, y=10%. Necesita mas acercamiento
   que Marco porque la figura sale entera y mas lejos. */
/* La cara esta en x=49%, y=14%. Con 2,6 de acercamiento se le cortaba
   la cabeza por arriba. */
.d2 [src*="erica-hover"] {
  object-fit: cover;
  object-position: 50% 8%;
  scale: 2.1;
  transform-origin: 50% 8%;
}

/* El envoltorio ya recorta --overflow:hidden-- asi que la ampliacion no
   se sale del circulo. */

/* Sin movimiento: el cambio es inmediato, sin desvanecido. */
@media (prefers-reduced-motion: reduce) {
  .d2 .d2-equipo-retrato,
  .d2 .d2-equipo-retrato .es-aficion,
  .d2 .d2-equipo-retrato img:not(.es-aficion) { transition: none; }

  /* El desplazamiento tampoco: quien pide menos movimiento no deberia
     ver saltar el circulo. El anillo sigue encendiendose --es un cambio
     de color, no movimiento. */
  .d2 .d2-equipo-firma__mini:hover .d2-equipo-retrato,
  .d2 .d2-equipo-firma__principal:hover .d2-equipo-retrato {
    transform: none;
  }
}


/* ==========================================================================
   EL MAPA DE BARRIOS

   Diez sitios sobre el plano REAL de Grande Prairie. Hereda de
   .d2-prob-mapa lo que no cambia y redefine el plano y las burbujas.

   EL COLOR AQUI NO MIDE, IDENTIFICA

   En la primera version el color era una escala de intensidad --verde a
   ambar segun la desviacion-- y funcionaba, pero apoyaba un dato que era
   inventado. Ahora son los colores de la propia herramienta del cliente,
   muestreados de su captura, y cada uno solo distingue un barrio de otro.
   Van en el marcado, en un style por burbuja, porque son un dato del sitio
   y no un estado de la interfaz.

   Lo que SI mide es el tamano: cuanta energia consume cada sitio.
   ========================================================================== */

/* --- Las vias ---

   Dan esqueleto al mapa: sin ellas el plano son manchas flotando. Son la
   geometria real de OpenStreetMap --la 43, la 100 Avenue, la 116-- y van
   DEBAJO de los barrios y de los circulos, porque son contexto y no dato.

   Las terciarias se descartaron: 13 KB y 499 trazos para una trama que a
   este tamano se ve como una mancha gris. */

.d2-mapa-zonas__vias path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Las secundarias: la trama de la ciudad */
.d2-mapa-zonas__via2 { stroke: #0000001C; stroke-width: 1.2px; }

/* Autopista, troncales y primarias. Mas marcadas, que son las que se
   reconocen en un plano. */
.d2-mapa-zonas__via1 { stroke: #00000033; stroke-width: 2.4px; }

.d2-mapa-zonas__rio  { stroke: #39B54A26; stroke-width: 1.6px; }

/* Los nombres de las calles. Son lo que responde a "que lugar es esto":
   sin ellos el plano podria ser cualquier ciudad. Van girados con su
   trazado, como en los mapas de verdad, y con el mismo contorno claro que
   las etiquetas de sitio para que se lean sobre las lineas. */
.d2-mapa-zonas__calles text {
  /* El contraste, que era el problema de verdad.

     Estaba en #0000006E --negro al 43%-- y sobre el contorno claro daba
     3,14:1, por debajo del minimo de 4,5 de WCAG. Un texto a ese
     contraste se lee como una mancha por grande que sea; parecia
     cuestion de tamano y no lo era. Al 70% da 8,27:1.

     El tamano tambien sube. Va en unidades del viewBox --700 de ancho--
     y el SVG se pinta a 493 px, asi que todo se encoge por 0,70: con 22
     salen unos 15 px reales, los de una etiqueta principal de mapa. */
  fill: #000000B3;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .01em;
  text-anchor: middle;
  paint-order: stroke;
  /* El contorno, mas grueso al subir la letra: tiene que seguir
     separandola de las lineas del plano. */
  stroke: #F7F7F7;
  stroke-width: 4.2px;
  stroke-linejoin: round;
}

/* El nombre de la ciudad, al fondo del todo */
.d2-mapa-zonas__ciudad {
  fill: #00000012;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .09em;
  text-anchor: middle;
}

/* --- El plano: los limites de los barrios --- */

/* Los 57 barrios que no estan en el grafico. Dan el contorno de la ciudad
   --que es lo que hace que esto se lea como un mapa-- sin competir con
   los diez que si llevan dato. */
.d2-mapa-zonas__fondo {
  fill: #00000008;
  stroke: #00000014;
  stroke-width: .8px;
}

/* El area de cada barrio del grafico, en su propio color. El circulo se
   apoya en ella: sin esto los circulos flotaban y no se entendia que
   region era cada uno. */
.d2-mapa-zonas__area {
  /* Gris en reposo. El color solo aparece en el sitio seleccionado, asi
     que dice CUAL estas mirando en vez de ser decorativo. */
  fill: #6F7374;
  fill-opacity: .11;
  stroke: #6F7374;
  stroke-opacity: .4;
  stroke-width: 1.1px;
  stroke-linejoin: round;
  transition: fill .18s, stroke .18s, fill-opacity .18s, stroke-opacity .18s;
}

.d2-mapa-zonas__ciudad {
  fill: #00000010;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .08em;
  text-anchor: middle;
}

/* --- Las burbujas --- */

.d2-mapa-zonas__sitio { cursor: pointer; outline: none; }

/* El relleno lleva alpha para que se vean las de debajo cuando se
   solapan: es lo que deja leer la densidad de un vistazo. */
.d2-mapa-zonas__burbuja {
  fill: #6F7374;
  fill-opacity: .5;
  stroke: #6F7374;
  stroke-width: 1.5px;
  transition: fill .18s, stroke .18s, fill-opacity .18s,
              stroke-width .18s, filter .18s;
}

/* La etiqueta va ENCIMA de su circulo, como en la referencia.

   Con trece burbujas grandes y juntas no queda hueco libre alrededor:
   colocarlas fuera daba once choques. Para que se lean sobre el color va
   un contorno del tono del fondo, con `paint-order: stroke` --sin eso el
   trazo se pinta sobre la letra y la engorda hasta cerrarla. */
.d2-mapa-zonas__etiqueta {
  fill: var(--c-texto, #333333);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
  paint-order: stroke;
  stroke: #F7F7F7;
  stroke-width: 2.6px;
  stroke-linejoin: round;
  transition: fill .18s;
}

/* --- Los estados, con los mismos tiempos que el mapa de cartera --- */

/* Al apuntar, verde de marca. El mismo que los botones y el logo. */
.d2-mapa-zonas__sitio:hover .d2-mapa-zonas__burbuja {
  fill: var(--c-verde-marca, #39B54A);
  stroke: var(--c-verde-marca, #39B54A);
  fill-opacity: .72;
  stroke-width: 3px;
}

.d2-mapa-zonas__sitio:hover .d2-mapa-zonas__area,
.d2-mapa-zonas__sitio.es-foco .d2-mapa-zonas__area {
  fill: var(--c-verde-marca, #39B54A);
  stroke: var(--c-verde-marca, #39B54A);
  fill-opacity: .16;
  stroke-opacity: .75;
}

/* El destacado. Tres senales a la vez --opacidad, grosor y etiqueta en
   negro-- para que no dependa de distinguir un color de otro. */
/* El seleccionado --por rotacion automatica o al apuntar-- va en el
   mismo verde, mas lleno y con halo. El aro oscuro se cambia por el
   propio verde oscurecido: un borde negro sobre verde partia el circulo
   en dos en vez de reforzarlo. */
.d2-mapa-zonas__sitio.es-foco .d2-mapa-zonas__burbuja {
  fill: var(--c-verde-marca, #39B54A);
  fill-opacity: .85;
  stroke: var(--c-verde-hover, #026F00);
  stroke-width: 2.5px;
  filter: drop-shadow(0 2px 11px #39B54A4D);
}

.d2-mapa-zonas__sitio.es-foco .d2-mapa-zonas__etiqueta {
  fill: var(--c-texto, #333333);
}

.d2-mapa-zonas__sitio:focus-visible .d2-mapa-zonas__burbuja {
  stroke: var(--c-texto, #333333);
  stroke-width: 3px;
}

/* --- Colocacion ---

   Ya no hay ficha, asi que el mapa ocupa el bloque entero. El aviso queda
   debajo: lleva la atribucion a OpenStreetMap, que la licencia exige. */

.d2 .d2-mapa-zonas .d2-prob-mapa__visual {
  position: static;
  display: flex;
  flex-direction: column;
}

/* La altura la da la proporcion del viewBox y no el contenedor, asi el
   plano no se deforma a ningun ancho.

   700x741 no es un capricho: es la forma que tiene el grupo de sitios.
   Con un lienzo 7:5 fijo sobraba la mitad del ancho y las burbujas se
   veian diminutas --ocupaban el 45% del lienzo, ahora el 82%. */
.d2 .d2-mapa-zonas .d2-prob-mapa__grafico {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 700 / 741;
}

.d2 .d2-mapa-zonas .d2-prob-mapa__aviso {
  position: static;
  margin: 10px 0 0;
  /* A la izquierda y no a la derecha: son dos frases y alineadas a la
     derecha la segunda linea quedaba colgando. */
  text-align: left;
  white-space: normal;
  line-height: 1.5;
}

.d2 .d2-faq-dato__mapa.d2-mapa-zonas .d2-prob-mapa__lienzo {
  aspect-ratio: auto;
  overflow: visible;
}

/* --- Adaptacion --- */

@media (max-width: 900px) {
  /* El nombre de la ciudad estorba cuando el mapa se encoge: las
     etiquetas de los barrios le pasan por encima. */
  .d2-mapa-zonas__ciudad { display: none; }

  /* Las etiquetas, algo mas grandes. No llegan a los 12px que pide el
     resto de la web --a ese tamano no caben diez nombres entre las
     burbujas-- y es una excepcion consciente: son nombres de APOYO. El
     mapa no depende de leerlos para entenderse. */
  .d2-mapa-zonas__etiqueta { font-size: 13px; }

}


/* ==========================================================================
   EL PERFIL: LA PRECALIFICACION TAMBIEN CUENTA (14/9/2026)

   Los cuatro primeros pasos --tamano, ubicacion, comercializadora y
   subvenciones previas-- no aparecian en el panel. El visitante contestaba
   media calculadora viendo "-" en todas las filas y un contador clavado en
   "0 of 6": la primera senal de que el formulario escuchaba llegaba en el
   paso 5.

   Ahora esas cuatro respuestas tienen su fila y se encienden desde el paso
   1, con el mismo gesto que las demas. Cuando la precalificacion queda
   atras, las cuatro se pliegan en una sola linea de resumen.

   POR QUE PLEGAR Y NO DEJARLAS

   Diez filas a 390px dejan la mitad fuera de pantalla, y el panel es
   justamente lo que tiene que verse mientras se contesta. Plegar mantiene
   el recuento honesto --lo respondido sigue ahi, en una linea-- y devuelve
   el sitio al perfil del edificio, que es lo que toca. Es el mismo criterio
   del punto que late: lo hecho pesa menos que lo que viene ahora.

   NO HAY <li> DE ENCABEZADO

   Las filas nuevas van dentro del mismo <ul>. La regla que marca "la
   primera fila pendiente" --linea 12526-- usa el combinador ~ entre
   hermanos .perfil__fila, y un <li> de titulo en medio la partiria: con el
   grupo de arriba a medias saldrian DOS puntos latiendo. El corte entre
   los dos grupos lo hace un borde en la primera fila del segundo.
   -------------------------------------------------------------------------- */

/* El corte: una linea sobre la primera fila del edificio. Solo cuando hay
   algo arriba de lo que separarse --si la elegibilidad esta plegada, el
   resumen ya hace de cierre y un segundo filo sobraria--. */
.d2 .calc .perfil__fila--eleg:not([hidden]) ~ .perfil__fila--corte {
  border-top: 1px solid var(--c-borde, #E4E4E4);
  padding-top: var(--d2-e2);
  margin-top: var(--d2-e1);
}

/* --- La linea de resumen ------------------------------------------------- */

.d2 .calc .perfil__resumen {
  display: flex;
  align-items: center;
  gap: var(--d2-e1);
  padding-bottom: var(--d2-e2);
  margin-bottom: var(--d2-e1);
  border-bottom: 1px solid var(--c-borde, #E4E4E4);
  /* El verde de marca no llega en texto pequeno --3.2:1--; este es el que
     la propia hoja de tokens manda usar, 6.41:1 sobre blanco. */
  color: var(--c-verde-hover, #026F00);
  font-size: 13px;
  line-height: 1.35;
}

/* Entra con la curva de la casa, no de golpe: sustituye a cuatro filas y
   el cambio tiene que leerse como un plegado, no como un salto. */
.d2 .calc .perfil__resumen:not([hidden]) {
  animation: d2-calc-aparece .34s cubic-bezier(.32, .72, 0, 1) both;
}

.d2 .calc .perfil__tic {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-verde-claro, #E8F5E8);
  color: var(--c-verde-hover, #026F00);
}

/* El texto se parte antes que desbordar: a 390px caben dos datos por
   linea y el tercero baja, que es preferible a un recorte con puntos
   suspensivos donde no se sabe que falta. */
.d2 .calc .perfil__resumen-txt {
  min-width: 0;
  font-weight: var(--fw-bold, 700);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .calc .perfil__resumen:not([hidden]) { animation: none; }
}


/* ==========================================================================
   MAPA DE BARRIOS — LA FICHA SIGUE AL CIRCULO (14/9/2026)

   El usuario: "me gustaria que se vaya moviendo y quede abajo de cada
   circulo y si no tiene hover desaparezca, por que ahora solo queda hasta
   abajo".

   QUE CAMBIA

   La ficha heredaba .d2-prob-mapa__ficha del mapa de cartera, que la fija
   en la esquina inferior derecha. Ahi funciona --aquel mapa tiene cinco
   sitios y la ficha nunca estorba--, pero con trece circulos repartidos
   por el plano la distancia entre el que senalas y el dato que lo
   describe es demasiada.

   Ahora la ficha se coloca DEBAJO del circuloseñalado. El JS escribe --fx
   y --fy en pixeles; aqui solo se traducen a posicion.

   POR QUE NO SIGUE AL RATON

   Porque el mapa tambien se recorre con teclado, y ahi no hay raton que
   seguir. Anclarla al CIRCULO da la misma lectura en los dos casos, que
   es la razon por la que este modulo ya tenia foco y Enter desde el
   principio.

   translate(-50%) y no left calculado en JS: el navegador centra la caja
   sobre el punto sin que el guion tenga que medir su ancho, que cambia
   con el nombre del barrio.
   ========================================================================== */

.d2 .d2-mapa-zonas .d2-prob-mapa__ficha {
  /* El anclaje lo pone el JS. Los valores de reserva dejan la ficha en el
     centro si el guion no llega a correr: nunca en una esquina cortada. */
  top: var(--fy, 50%);
  left: var(--fx, 50%);
  right: auto;
  bottom: auto;
  transform: translate(-50%, 0);

  /* Mas estrecha que la del mapa de cartera: aqui flota sobre el plano y
     una caja de 240px taparia dos barrios vecinos. */
  width: 190px;
  padding: 14px;

  /* Sombra para despegarla del mapa: la de cartera se apoya en la esquina
     del lienzo y no la necesita; esta se superpone a calles y manchas de
     color. */
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);

  /* Que no intercepte el puntero: si la ficha se interpone entre el raton
     y el circulo, al aparecer se dispararia mouseleave y entraria en un
     ciclo de parpadeo. */
  pointer-events: none;
}

/* Oculta mientras no se senala nada. Con visibility y no display:none
   para que la transicion tenga algo que animar. */
.d2 .d2-mapa-zonas .d2-prob-mapa__ficha:not(.es-visible) {
  opacity: 0;
  visibility: hidden;
}

.d2 .d2-mapa-zonas .d2-prob-mapa__ficha.es-visible {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
  .d2 .d2-mapa-zonas .d2-prob-mapa__ficha {
    transition: opacity .16s ease-out,
                top .22s cubic-bezier(.32, .72, 0, 1),
                left .22s cubic-bezier(.32, .72, 0, 1);
  }
}

/* Cuando la ficha no cabe debajo --los barrios del sur-- el JS le pone
   esta clase y se dibuja ENCIMA del circulo. */
.d2 .d2-mapa-zonas .d2-prob-mapa__ficha.es-arriba {
  transform: translate(-50%, -100%);
}

/* En movil el mapa se ve pequeno y una ficha flotante taparia media
   ciudad: vuelve a su sitio fijo, debajo del plano. */
@media (max-width: 700px) {
  .d2 .d2-mapa-zonas .d2-prob-mapa__ficha {
    position: static;
    width: auto;
    transform: none;
    box-shadow: none;
    margin-top: 14px;
  }

  .d2 .d2-mapa-zonas .d2-prob-mapa__ficha:not(.es-visible) {
    opacity: 1;
    visibility: visible;
  }
}


/* --- Los circulos que no se podian senalar (14/9/2026) ---------------------

   El usuario: "hay circulos que no se pueden seleccionar".

   LA CAUSA

   Cada <g> de zona contiene dos cosas: el POLIGONO del barrio y la
   BURBUJA. Los poligonos son grandes y se tocan entre si --son limites
   municipales reales, comparten frontera-- asi que el ultimo del DOM
   captura el puntero de los anteriores en toda la franja compartida.

   Y hay un caso peor: s13 cae ENTERO dentro de s12 --dos sitios del mismo
   barrio, Country Club Estates, a 18px de distancia en un circulo de
   39--. Ahi no hay orden de DOM que salve a los dos.

   LA SOLUCION

   El puntero solo lo recoge la BURBUJA. El poligono se queda como lo que
   es --la mancha que dice donde esta el barrio-- y deja de competir.

   Medido sobre los trece: con esto los dos pares solapados quedan
   alcanzables, porque en ambos el circulo PEQUENO es el que va despues en
   el marcado y pinta encima. Al grande le queda su anillo exterior
   entero, que es mas superficie que la que tenia antes.

   La etiqueta tambien se aparta: es texto centrado sobre la burbuja y sin
   esto los eventos se disparan al pasar sobre las letras pero no sobre el
   circulo que las rodea, lo que da un area de acierto con agujeros. */
.d2 .d2-mapa-zonas__area,
.d2 .d2-mapa-zonas__etiqueta {
  pointer-events: none;
}

.d2 .d2-mapa-zonas__burbuja {
  pointer-events: auto;
  /* El cursor confirma que el circulo es lo que se puede senalar. El <g>
     ya lo declaraba, pero ahora que no recibe eventos hay que decirlo
     donde si se reciben. */
  cursor: pointer;
}


/* ==========================================================================
   FINANCIACION — LA SECCION SOBRE LA CALCULADORA (14/9/2026)

   SE LLAMA d2-financia Y NO d2-fondos, Y ESO IMPORTA

   La primera version usaba .d2-fondos. Ese nombre YA ESTABA OCUPADO por
   la barra flotante del selector de fondos, 7000 lineas mas arriba en
   este mismo archivo, y su primera declaracion es:

     .d2-fondos { position: fixed; left: ...; bottom: 20px; z-index: 60; }

   Asi que la seccion heredaba position:fixed y se despegaba del flujo:
   flotaba sobre la pagina en vez de ocupar su sitio. El descuadre que el
   usuario veia no era de rejilla ni de margenes --los toque dos veces
   buscandolo donde no estaba-- era esto.

   La barra no se toca: es un control de la maqueta y funciona. Lo que
   cambia es el nombre de la seccion nueva, que es quien llego despues.

   Va encima de la calculadora a proposito: la pregunta "¿esto lo puede
   pagar un programa?" llega ANTES de calcular cuanto se ahorra. Primero
   se sabe si hay via, luego se mide.

   EL CIRCUITO ES EL MISMO, NO UNO PARECIDO

   Se replican las reglas de .d2-ega-pasos3__circuito al pie de la letra:
   mismo grosor, mismos alfas, mismo relleno de nodo por --comp-rol. Si
   se ajustan "a ojo" para que quede bien aqui, las dos paginas dejan de
   parecerse y nadie sabe cual es la buena.

   Las dos reglas base del contenedor --position:relative y overflow:
   hidden-- no son opcionales: sin la primera el SVG absoluto se ancla al
   documento, y sin la segunda el circuito desborda la seccion. Se
   perdieron una vez en una limpieza y el resultado fue el SVG ocupando
   la pagina entera.

   LA REJILLA

   Dos columnas, texto a la izquierda y acciones a la derecha, como en la
   referencia. 1.15fr y no 1fr: el titular es lo que manda el bloque y con
   columnas iguales caia en tres lineas mientras la derecha sobraba.
   ========================================================================== */

.d2 .d2-financia {
  position: relative;
  /* Recorta los trazos que asoman por los bordes, que es justo lo que se
     ve en la referencia: las lineas entran y salen de la seccion en vez
     de terminar dentro. Los SVG llevan overflow:visible para que el
     recorte lo haga la SECCION y no cada uno por su cuenta. */
  overflow: hidden;
  /* En el rango de sus vecinas --la calculadora usa 56, el CTA 88-- y no
     los 128 que puse midiendo la referencia: ahi la seccion se veia
     suelta y aqui va encajada entre otras. Un padding mayor que el de
     todas las demas es lo que hacia que se leyera como un bloque
     desprendido. */
  padding-block: clamp(52px, 5.6vw, 80px);

  /* BLANCO, por decision del usuario (14/9/2026)

     La referencia tenia un verde muy claro --#F2F9F2-- y asi se monto
     primero. El usuario pidio blanco "para que cuadre con todo lo que
     hemos hecho", y tiene razon: el verde la separaba del resto de
     secciones claras del home, que son blancas.

     Literal y no por --comp-rol: el rol la repintaria de gris o negro
     segun la composicion elegida, y aqui el blanco es fijo. */
  background: var(--c-blanco, #FFFFFF);

  /* EL FILETE, Y POR QUE HACE FALTA

     Esta seccion lleva data-comp-rol="calc" --el mismo que la
     calculadora-- porque la referencia la pide sobre fondo claro y ese
     es el rol que lo garantiza en las cuatro composiciones.

     El efecto secundario es que las dos quedan SIEMPRE del mismo color,
     asi que sin nada entre medias se leen como un solo bloque enorme.
     Comprobado en las cuatro: propuesta, sobria y contraste dan gris en
     las dos; plana da blanco en las dos.

     Un filete de 1px resuelve el limite sin depender de la composicion:
     el color sale de --c-linea, que el tono oscuro ya reescribe a un
     blanco translucido. */
  border-bottom: 1px solid var(--c-linea, rgba(0, 0, 0, .1));
}

/* --- El circuito: identico al de d2-ega-pasos3 --- */

/* Cada trazo se ancla a SU esquina y conserva su tamano real.

   El intento anterior era un solo SVG de 1440x700 con inset:0 cubriendo
   la seccion entera. Fallaba por geometria: la seccion es mucho mas
   apaisada que el viewBox --3.17:1 frente a 2.06:1-- asi que "slice"
   recortaba 322px de alto para conservar la forma y se comia justo las
   dos esquinas donde estaba el dibujo. El circuito no se veia.

   Asi cada uno mide lo que mide y no depende del alto de la seccion. */
.d2 .d2-financia__circuito {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}

/* Arriba a la derecha: entra por el borde superior y baja en escalones
   hasta el nodo. El right negativo deja el nodo tocando el borde, como
   en la referencia. */
.d2 .d2-financia__circuito--sup {
  top: 0;
  right: -10px;
  width: clamp(280px, 30vw, 460px);
  height: auto;
}

/* Abajo a la izquierda: el nodo pegado al borde y la linea saliendo por
   abajo. */
/* El nodo esta ahora al final del trazo, a la derecha. El left:0 hace que
   la linea ARRANQUE en el borde de la seccion --entra desde fuera, como
   en la referencia-- y el nodo quede a unos 300px hacia dentro. */
.d2 .d2-financia__circuito--inf {
  bottom: -20px;
  left: 0;
  width: clamp(200px, 22vw, 320px);
  height: auto;
}

/* Arriba a la izquierda: el nodo suelto con su tramo corto. */
.d2 .d2-financia__circuito--izq {
  top: clamp(56px, 9vw, 108px);
  left: 0;
  width: clamp(80px, 9vw, 120px);
  height: auto;
}

/* En pantallas estrechas los trazos laterales estorban mas que aportan:
   el contenido ya ocupa todo el ancho. Se queda solo el de arriba. */
@media (max-width: 760px) {
  .d2 .d2-financia__circuito--inf,
  .d2 .d2-financia__circuito--izq { display: none; }

  .d2 .d2-financia__circuito--sup { opacity: .7; }
}

.d2 .d2-financia__circuito path {
  fill: none;
  /* Mas visible que en EGA --.17 alli-- porque aqui son dos trazos
     cortos en las esquinas y con ese alfa desaparecian. En la referencia
     se leen sin esfuerzo. */
  stroke: rgba(57, 181, 74, .38);
  stroke-width: 1.4px;
  stroke-linecap: round;
}

.d2 .d2-financia__circuito circle {
  /* HUECOS, no rellenos.

     El nodo de d2-ega-pasos3 se rellena del color de fondo para tapar el
     trazo que le pasa por debajo. Aqui ningun trazo pasa por debajo: el
     nodo esta en la PUNTA de la linea, asi que el relleno no tiene nada
     que tapar y lo unico que hace es engordarlo.

     En la referencia se ve el anillo y el fondo a traves. */
  fill: none;
  stroke: rgba(57, 181, 74, .55);
  stroke-width: 1.6px;
}

/* El contenido, por encima del circuito. */
.d2 .d2-financia__inner {
  position: relative;
  z-index: 1;
  display: grid;

  /* LOS MISMOS VALORES QUE TODO EL HOME

     El descuadre venia de aqui: puse max-width 1320 y un padding propio
     de hasta 96px, medidos sobre la referencia. Pero la referencia es una
     captura suelta y esta seccion vive entre otras quince.

     Con medidas propias su contenido no alineaba con el de arriba ni con
     el de abajo, y eso es lo que se lee como "flotando": no es que este
     descentrada --lo esta, por el margin-inline:auto-- es que su columna
     izquierda empieza en un sitio distinto al de la calculadora que va
     justo debajo.

     Ahora usa --d2-ancho y --d2-gutter, los mismos tokens que .d2-hero,
     .d2-prob-comp, .calc y las demas. */
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: var(--d2-ancho, 1280px);
  margin-inline: auto;
  padding-inline: var(--d2-gutter, clamp(20px, 4vw, 40px));
}

/* --- La columna de texto --- */

.d2 .d2-financia__titulo {
  margin: 12px 0 0;
  font-size: clamp(32px, 3.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: var(--fw-extrabold, 800);
  color: var(--c-texto, #333333);
  text-wrap: balance;
}

.d2 .d2-financia__lead {
  margin: 18px 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-texto-cuerpo, #333333);
}

/* --- La columna de acciones --- */

.d2 .d2-financia__eti {
  margin: 0 0 14px;
  font-size: var(--fs-small, 12px);
  font-weight: var(--fw-bold, 700);
  letter-spacing: var(--ls-eyebrow, .08em);
  text-transform: uppercase;
  /* El verde de marca da 2.41:1 sobre el gris de seccion: para texto de
     12px hace falta el oscuro, que da 5.78:1. */
  color: var(--c-verde-hover, #026F00);
}

/* Las pastillas de utility. Lista sin viñetas: son etiquetas, no una
   enumeracion que leer en voz alta. */
.d2 .d2-financia__programas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.d2 .d2-financia__programas li {
  padding: 11px 22px;
  /* #C7C7C7 y no var(--c-borde): ese token es #E4E4E4 y da 1.15:1 sobre
     el gris de seccion, o sea un borde que no se ve. Es el mismo fallo
     que tenia la linea "do nothing" del hero.

     El minimo para el limite de un elemento de interfaz es 3.0, y estas
     pastillas SON el limite: sin borde visible no se distinguen del
     fondo y dejan de leerse como tres elementos.

     Medido en el PEOR de sus dos fondos, el gris #F3F3F3:

       #E4E4E4 ... 1.15:1  lo que habia
       #949494 ... 2.73:1  todavia no
       #8A8A8A ... 3.11:1  pasa

     Va #8A8A8A, que ademas es el mismo gris que la linea "do nothing"
     del hero: un solo valor para "gris que tiene que verse".

     Sigue siendo discreto: la pastilla no compite con el boton verde,
     que es la accion de verdad. */
  border: 1px solid #8A8A8A;
  border-radius: 999px;
  background: var(--c-blanco, #FFFFFF);
  font-size: 15px;
  color: var(--c-texto, #333333);
  white-space: nowrap;
}

/* El aval, cuando se confirme. Nace con [hidden] en el marcado. */
.d2 .d2-financia__aval {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 20px 0 0;
  padding: 16px 20px;
  border-radius: 6px;
  /* .14 y no .08: sobre el gris anterior la caja se distinguia sola, pero
     sobre blanco se quedaba en 1.08:1 --practicamente invisible-- y en la
     referencia se lee claramente como una caja aparte. Con .14 sube a
     1.15:1, que sigue siendo un tinte suave pero ya dibuja el bloque. */
  background: rgba(57, 181, 74, .14);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-texto, #333333);
}

.d2 .d2-financia__tic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--c-verde-hover, #026F00);
  /* Blanco sobre #026F00: 6.41:1. El verde de marca no llegaria. */
  color: #FFFFFF;
}

.d2 .d2-financia__cta {
  margin-top: 22px;
}

.d2 .d2-financia__nota {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--c-texto-suave, #6B6B6B);
}

/* --- Por que esta seccion NO sigue al tema -------------------------------

   Las demas secciones declaran data-comp-rol y reciben su fondo del
   selector de composicion. Esta no, y es deliberado: la referencia pide
   un verde muy claro concreto --#F2F9F2-- y el rol lo repintaria de gris
   o de negro segun la composicion elegida.

   Al no llevar rol, tampoco recibe data-comp-tono, asi que el bloque de
   inversion de d2-variantes.css no la alcanza y el texto se queda
   oscuro, que es lo correcto sobre este fondo.

   Medido sobre #F2F9F2:

     titulo y lead   #333333 ... 11.80:1
     eyebrow         #026F00 .... 5.98:1
     nota            #6B6B6B .... 4.98:1
     borde pastilla  #8A8A8A .... 3.22:1

   Si algun dia se quiere que siga al tema, hay que devolver el rol Y
   quitar el fondo fijo: las dos cosas juntas o ninguna. Dejar el fondo
   fijo con rol puesto daria texto blanco sobre verde claro --1.07:1--,
   que es el fallo que ya costo una vuelta en el CTA de Energy Gap
   Analysis. */

/* --- Adaptacion --- */

@media (max-width: 960px) {
  .d2 .d2-financia__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .d2 .d2-financia__lead { max-width: none; }
}

@media (max-width: 540px) {
  .d2 .d2-financia__programas li {
    padding: 9px 16px;
    font-size: 14px;
  }

  .d2 .d2-financia__cta {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   LA SALIDA DE LA PANTALLA DE CONSULTA (14/9/2026)

   Quien responde "no" al filtro de 25.000 pies salta aqui en UN clic,
   saltandose los nueve pasos del formulario. Y se quedaba encerrado: el
   unico boton de reiniciar vive dentro de .tras-envio, que solo aparece
   despues de mandar el formulario.

   NO HEREDA DE .reiniciar, Y HAY UNA RAZON MEDIDA

   El .reiniciar que ya existe usa var(--c-texto-suave) --#6B6B6B-- que
   sobre este panel oscuro da 3.27:1: por debajo del 4.5 que pide un texto
   de 13px. Alli funciona porque .tras-envio se pinta sobre fondo claro.

   Aqui el fondo es #1A1A1A. Medido:

     #6B6B6B  3.27:1   lo que heredaria
     #BFBFBF  9.46:1   el que entra

   ES LA ACCION SECUNDARIA, Y SE NOTA

   Sin fondo ni borde en reposo: la accion principal de esta pantalla
   sigue siendo hablar con un experto, y dos botones con el mismo peso
   competirian. Al apuntar aparece el verde de marca --6.53:1 sobre este
   fondo-- que confirma que es pulsable sin haber gritado antes.
   ========================================================================== */

.d2 .cierre__volver {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: 22px;
  padding: 10px 4px;
  /* 44px de alto minimo: es el objetivo tactil que pide WCAG 2.5.8, y con
     solo el texto se quedaba en 34. */
  min-height: 44px;
  background: none;
  border: 0;
  font-size: 13px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: .01em;
  color: #BFBFBF;
  cursor: pointer;
  transition: color .18s ease;
}

.d2 .cierre__volver svg {
  /* La flecha se retrasa al apuntar: el gesto acompaña al sentido del
     boton --volver-- en vez de adelantarse como las de avanzar. */
  transition: transform .2s cubic-bezier(.32, .72, 0, 1);
}

.d2 .cierre__volver:hover,
.d2 .cierre__volver:focus-visible {
  color: var(--c-verde-marca, #39B54A);
}

.d2 .cierre__volver:hover svg,
.d2 .cierre__volver:focus-visible svg {
  transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .d2 .cierre__volver,
  .d2 .cierre__volver svg { transition: none; }
  .d2 .cierre__volver:hover svg { transform: none; }
}


/* ==========================================================================
   EL PANEL DE PERFIL: LAS FILAS APARECEN AL RESPONDERSE (14/9/2026)

   Antes las diez estaban siempre a la vista y nueve mostraban un guion.
   El panel medía lo mismo con una respuesta que con las diez, y lo que se
   leia era una lista de huecos.

   No se pierde la vista previa de lo que falta: para eso estan los dos
   contadores que ya existen --"N of M" arriba y "Step N of M" en el
   formulario-- y que dicen cuanto queda sin gastar una linea por cada
   cosa pendiente. Esa fue la razon que dio el usuario para elegir esta
   via sobre las otras dos.

   LA ENTRADA

   Solo transform y opacity, que son las dos que el compositor puede
   animar sin recalcular la pagina. Nada de animar `height`: con una
   lista que crece de una en una, eso es un reflow por respuesta.

   14px de recorrido y 300ms. Mas corto se pierde, mas largo se nota
   esperando: la fila aparece MIENTRAS el usuario ya esta leyendo la
   siguiente pregunta, asi que no puede pedir atencion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .d2 .perfil__fila.is-lleno {
    animation: d2-perfil-fila-entra .3s cubic-bezier(.32, .72, 0, 1) both;
  }
}

@keyframes d2-perfil-fila-entra {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   EL PANEL DE PERFIL, REPARTIDO EN ALTURA (14/9/2026)

   El usuario: "que 2.94 aparezca hasta abajo y que Your profile aparezca
   hasta arriba, y abajo de eso Building size".

   LA CAUSA

   .espera lleva `place-content: center` y `justify-items: center`. Eso
   agrupa los cuatro bloques --cabecera, filas, adelanto y prueba social--
   en el centro vertical de la tarjeta, con el hueco repartido arriba y
   abajo.

   Se penso para el estado vacio de las otras variantes, donde dentro solo
   hay un icono y una frase y centrarlos es lo correcto. Aqui dentro hay
   una lista que crece, y centrarla deja el titulo flotando a media altura
   y la cifra sin llegar al fondo.

   COMO SE REPARTE AHORA

     cabecera "Your profile"   arriba del todo
     las filas                 justo debajo, creciendo hacia abajo
     el hueco                  entre las filas y la prueba
     "$2.94M"                  abajo del todo

   El empuje lo hace `margin-top: auto` sobre .prueba, que ya estaba en
   style.css y no llegaba a actuar porque `place-content: center` manda
   sobre la distribucion del grid.

   Con `align-content: start` el grid deja de centrar y el auto vuelve a
   funcionar. No hace falta tocar .prueba.
   ========================================================================== */

@media (min-width: 901px) {
  .d2 .calc--pasos .espera {
    /* start y no center: el contenido se apoya arriba y el hueco sobrante
       queda abajo, donde la prueba social lo reclama con su margin-top. */
    align-content: start;
    /* stretch y no center: las filas ocupan el ancho completo. Centradas
       dejaban la lista mas estrecha que su tarjeta. */
    justify-items: stretch;
    text-align: left;
  }

  /* La prueba social baja del todo. margin-top:auto ya estaba; lo que le
     faltaba era que el grid no la centrara. */
  .d2 .calc--pasos .espera .prueba {
    width: 100%;
    margin-top: auto;
  }

  /* El adelanto --el benchmark que aparece en el paso 3-- va justo encima
     de la prueba, no flotando en medio. */
  .d2 .calc--pasos .espera .adelanto {
    width: 100%;
  }
}


/* ==========================================================================
   LA BARRA DE MANDOS DE MARCAS, EN NEGRO (14/9/2026)

   Lo pidio el usuario. La barra general es blanca al 90% con desenfoque
   detras, que funciona sobre las secciones claras. La de marcas se sale:
   su franja es blanca y una barra blanca sobre fondo blanco solo se
   distingue por la sombra.

   NO BASTA CON CAMBIAR EL FONDO

   Todo lo de dentro esta pensado para leerse sobre claro, y sobre negro
   se cae:

     el texto de la flecha  #333333 ... 1.38:1
     los puntos             #6B7280 ... 3.60:1

   Asi que se invierten los tres estados --reposo, activo y hover-- y se
   comprueba cada uno:

     texto e iconos    #E8E8E8 ... 14.20:1
     punto en reposo   #BFBFBF ...  9.46:1
     verde de hover    #39B54A ...  6.53:1

   El borde pasa a un blanco translucido: el #EFEFEF original sobre negro
   dibujaba un marco claro alrededor de la pastilla.
   ========================================================================== */

#caru-logos .d2-caru__mandos {
  background: rgba(26, 26, 26, .92);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}

#caru-logos .d2-caru__flecha,
#caru-logos .d2-caru__ocultar {
  color: #E8E8E8;
}

#caru-logos .d2-caru__flecha:hover,
#caru-logos .d2-caru__ocultar:hover {
  background: var(--c-verde-marca, #39B54A);
  /* Gris de marca sobre el verde: 4.74:1. El blanco aqui se queda en
     2.66 y es el mismo criterio que sigue el boton solido del sitio. */
  color: var(--c-sobre-verde, #333333);
}

#caru-logos .d2-caru__punto {
  color: #BFBFBF;
}

#caru-logos .d2-caru__punto:hover {
  color: #FFFFFF;
}

/* El elegido: verde de marca, que sobre negro da 6.53:1 y es el mismo
   verde que identifica al resto del sitio. */
#caru-logos .d2-caru__punto.es-activo {
  background: rgba(57, 181, 74, .16);
  color: var(--c-verde-marca, #39B54A);
}

/* El anillo de foco tambien: el oscuro por defecto no se veria. */
#caru-logos .d2-caru__flecha:focus-visible,
#caru-logos .d2-caru__punto:focus-visible,
#caru-logos .d2-caru__ocultar:focus-visible {
  outline: 2px solid var(--c-verde-marca, #39B54A);
  outline-offset: 2px;
}


/* ==========================================================================
   LA SECCION DE MARCAS, EN NEGRO (14/9/2026)

   Lo pidio el usuario. Primero entendi que hablaba de la barra de mandos
   --que tambien esta en negro, unas reglas mas arriba-- pero era el FONDO
   de la seccion.

   NO SE INVENTA NADA: EL MECANISMO YA EXISTIA

   Esta seccion tiene su propio selector de fondo --el bloque "MARCAS, EL
   SELECTOR DE FONDO LOCAL"-- con cinco opciones y los contrastes de cada
   una ya medidos. El marcado ya declaraba data-logos-tono="oscuro" y un
   --logos-fondo de #333333.

   Asi que lo unico que faltaba era fijar el color mas oscuro de los dos
   que ese sistema contempla --"sirve para #333333 y para #1A1A1A"-- y
   dejar que el resto se adapte solo.

   Mi primer intento fue peor: un background con !important y un
   data-comp-tono anadido al marcado. Eso montaba un segundo mecanismo
   encima del que ya habia, y dos sistemas peleando por el mismo color es
   el fallo que ya costo una vuelta en el CTA de Energy Gap Analysis.

   LO QUE VIENE SOLO

   El tono oscuro de este bloque ya redefine --c-texto, --c-texto-cuerpo
   y --c-texto-suave, y el sistema general invierte los logos de cliente
   con grayscale + invert, porque son marcas grises que sobre negro
   desapareceriran.

   Contrastes sobre negro, ya medidos en la tabla de arriba:

     titular  17.40:1
     cifra    17.40:1
     etiqueta  9.46:1
   ========================================================================== */

.d2 .d2-logos--dos {
  --logos-fondo: var(--c-superficie-oscura, #1A1A1A);
}