/* ============================================================================
   Sistema de tarjetas — pauta visual del cliente.

   Tres piezas y una regla.

   PIEZAS
     .tarjeta            blanca, radio grande, sombra difusa
     .tarjeta-marca      rellena con el degradado rosa→magenta
     .insignia           cuadrado redondeado con el degradado, en la esquina

   REGLA
     El degradado de marca NUNCA se usa en una pantalla de resultado. Con una
     marca rosa, un relleno de marca al lado de un «CONTIENE» rojo se lee como
     otro veredicto. Por eso el rojo se ha profundizado (distancia RGB 156) y
     por eso el degradado se queda en el sitio público, los encabezados y las
     acciones — nunca junto a una evidencia.
   ========================================================================= */

.tarjeta {
  position: relative;
  background: var(--no-fondo);
  border-radius: var(--no-radio);
  padding: var(--no-e5);
  box-shadow: var(--no-sombra);
  transition: transform var(--no-transicion), box-shadow var(--no-transicion);
}

/* La tarjeta desplazada que asoma por detrás, abajo a la derecha. Es el detalle
   que le da profundidad a la pauta: parecen dos hojas apiladas, no una sombra. */
.tarjeta::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border-radius: var(--no-radio); background: var(--no-superficie-2);
  z-index: -1;
}
.tarjeta > * { position: relative; z-index: 1; }
.tarjeta-marca::after { background: var(--no-marca-halo); }
a.tarjeta, button.tarjeta { display: block; text-align: left; border: 0; cursor: pointer; width: 100%; }
a.tarjeta:hover, button.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--no-sombra-alta); }

/* La tarjeta destacada de la pauta: degradado y texto en blanco. */
.tarjeta-marca {
  background: var(--no-degradado);
  color: var(--no-sobre-marca);
  box-shadow: var(--no-sombra-marca);
}
.tarjeta-marca .tarjeta-titulo,
.tarjeta-marca .tarjeta-numero { color: var(--no-sobre-marca); }
/* El cuerpo de la tarjeta destacada va a 19 px en negrita. No es capricho: en su
   punto más claro el degradado da 3.32:1 con blanco, que basta para TEXTO GRANDE
   y no para cuerpo normal. A este tamaño y peso, cumple. Y además es lo que hace
   la pauta: en la tarjeta destacada el texto pesa más. */
.tarjeta-marca p { color: var(--no-sobre-marca); font-size: 1.1875rem; font-weight: 700; line-height: 1.4; }

/* El número del paso, encima del título. */
.tarjeta-numero {
  display: block; font-size: var(--no-t-l); font-weight: 800;
  color: var(--no-tinta-suave); margin: 0 0 var(--no-e2);
  font-variant-numeric: tabular-nums;
}
.tarjeta-titulo {
  font-size: var(--no-t-l); font-weight: 800; margin: 0 0 var(--no-e3);
  color: var(--no-marca-texto); line-height: 1.2;
}
.tarjeta p:last-child { margin-bottom: 0; }

/* La insignia: DOS capas, como en la pauta. Un contenedor pálido con mucho radio
   y, dentro, un cuadrado con el degradado. La capa exterior es la que la separa
   del fondo y la hace parecer un sello pegado encima. */
.insignia-icono {
  position: absolute; top: -26px; right: var(--no-e5);
  width: 64px; height: 64px; border-radius: 20px;
  background: var(--no-marca-halo);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(16,16,36,.10);
}
.insignia-icono::before {
  content: ""; position: absolute; inset: 7px; border-radius: 14px;
  background: var(--no-degradado-corto);
}
.insignia-icono svg { width: 24px; height: 24px; color: #fff; position: relative; z-index: 1; }
/* Sobre la tarjeta de marca, el contenedor se vuelve blanco: así sigue
   despegándose del degradado que tiene detrás. */
.tarjeta-marca .insignia-icono { background: var(--no-fondo); }

/* Rejilla de tarjetas con el aire de la pauta. */
.rejilla-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--no-e6); list-style: none; padding: 0; margin: var(--no-e7) 0 0;
}
.rejilla-tarjetas > li { margin: 0; }

/* ── Los tres pasos, en tres columnas ──────────────────────────────────────
   Aqui hubo una composicion en zigzag: el primer paso arriba a la izquierda y
   los otros dos escalonados a la derecha, unidos por conectores discontinuos.
   Se retira entera. Los conectores no existen en la pauta nueva, y sin ellos
   el escalonado solo dejaba un hueco muerto del tamano de una tarjeta.

   Se borra en vez de taparse con excepciones: dejar la retícula vieja debajo
   de tres `!important` es garantizar que el siguiente que la toque no entienda
   por que no le obedece.

   En movil, una columna: el orden de la lista ya es la guia.               */
@media (min-width: 900px) {
  .pasos-zigzag { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* Titular de exposición: muy pesado, muy apretado, con una palabra acentuada. */
.display {
  font-size: var(--no-t-display); font-weight: 900; line-height: 0.98;
  letter-spacing: -0.035em; text-wrap: balance; margin: 0 0 var(--no-e5);
  text-transform: uppercase;
}
.display em { font-style: normal; color: var(--no-marca-texto); }

/* Botón con el degradado. El texto va en blanco y en negrita: con 5.1:1 de
   contraste, cumple de sobra para cuerpo grande y para negrita normal. */
.boton-marca {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--no-e3);
  /* El color del texto sale del token, no de un #fff fijo: en modo oscuro el
     degradado se aclara y el blanco encima cae a 2.65:1. */
  background: var(--no-degradado); color: var(--no-sobre-marca); font-weight: 700;
  border: 0; border-radius: var(--no-radio-s); cursor: pointer;
  min-height: var(--no-toque); padding: var(--no-e4) var(--no-e6);
  /* 19px en negrita cuenta como TEXTO GRANDE, que sobre el degradado necesita
     3:1 y no 4.5:1. Con 17px el rosa vivo se quedaba en 3.59 y no llegaba.
     Además, un CTA de este tamaño es más fiel a la pauta. */
  font-size: 1.1875rem;
  box-shadow: var(--no-sombra-marca); text-decoration: none;
  transition: transform var(--no-transicion), box-shadow var(--no-transicion);
}
.boton-marca:hover { transform: translateY(-1px); box-shadow: var(--no-sombra-alta); }
.boton-marca:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .boton-marca { transition: none; }
  a.tarjeta:hover, button.tarjeta:hover, .boton-marca:hover { transform: none; }
}

/* ============================================================================
   PAUTA 19/09/2026 — el distintivo pasa a ser un DISCO NEGRO.

   En el original los iconos son circulos negros planos con el simbolo en
   blanco: el `+`, el corazon, las flechas. Nada de degradados ni de halos.
   ========================================================================= */
.insignia-icono {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--no-tinta-pauta);
  box-shadow: none; top: -22px;
}
/* El cuadrado interior con el degradado desaparece: el disco ya es el icono. */
.insignia-icono::before { content: none; }
.insignia-icono svg { color: #FFFFFF; }
/* Sobre la tarjeta violeta, el disco se invierte para seguir despegandose. */
.tarjeta-marca .insignia-icono { background: #FFFFFF; }
.tarjeta-marca .insignia-icono svg { color: var(--no-violeta); }

/* El titulo de la tarjeta ya no va en rosa: en el original los titulares son
   negros y el color lo pone el FONDO del panel, no la letra. */
.tarjeta-titulo { color: var(--no-tinta-pauta); font-weight: 700; letter-spacing: -0.02em; }
.tarjeta-marca .tarjeta-titulo { color: #FFFFFF; }

/* Las tarjetas dentro de la hoja: blancas con un borde finisimo, que es lo que
   las separa del blanco de la hoja ahora que no hay sombra de color. */
.tarjeta, .rejilla-tarjetas > li {
  background: #FFFFFF; border: 1px solid #E9E9EE; border-radius: var(--no-radio);
}
.tarjeta-marca { background: var(--no-violeta); border-color: var(--no-violeta); }


/* ── El zigzag se retira ────────────────────────────────────────────────────
   Tenia sentido cuando habia conectores discontinuos que unian una tarjeta con
   la siguiente. Al quitarlos —el original no los usa— el escalonado dejaba un
   hueco muerto del tamano de una tarjeta en la esquina inferior izquierda.
   Tres columnas iguales, que es como lo resuelve el original.               */