/* ============================================================
   JurisOne — SISTEMA A · librería de componentes.
   Si dos cosas se ven igual, comparten clase. Nada se duplica.
   La misma librería sirve a la propuesta oscura y a la clara: cambia el
   contexto, no el componente.
   Consume EXCLUSIVAMENTE tokens semánticos.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   TAXONOMÍA DE FAMILIAS
   Único lugar del sistema donde se asigna un color de familia.
   Cualquier componente con [data-familia] hereda --familia y lo usa.
   ══════════════════════════════════════════════════════════ */
[data-familia]                { --familia: var(--color-borde-control); }
[data-familia="identidad"]    { --familia: var(--color-familia-identidad); }
[data-familia="dinero"]       { --familia: var(--color-familia-dinero); }
[data-familia="emision"]      { --familia: var(--color-familia-emision); }
[data-familia="aceptacion"]   { --familia: var(--color-familia-aceptacion); }
[data-familia="inteligencia"] { --familia: var(--color-familia-inteligencia); }


/* ══════════════════════════════════════════════════════════
   BOTÓN
   ══════════════════════════════════════════════════════════ */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-corto);
  min-height: var(--toque-minimo);
  padding: var(--espacio-texto) var(--espacio-grupo);
  border: var(--trazo-hairline) solid transparent;
  border-radius: var(--radio-chip);
  background-color: transparent;
  color: var(--color-texto-principal);
  font-family: var(--fuente-display);
  font-weight: var(--peso-cuerpo-fuerte);
  font-size: var(--tamano-placa);
  font-variation-settings: "wdth" var(--ancho-placa);
  letter-spacing: var(--tracking-placa);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--duracion-presion) var(--curva-salida),
    background-color var(--duracion-hover) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida);
}
.boton:active { transform: scale(var(--escala-presion)); }

.boton--primario {
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
  border-color: var(--color-superficie-inversa);
}

/* El borde es lo único que identifica este botón: por eso usa el token de
   borde de control, obligado a 3:1. */
.boton--secundario {
  border-color: var(--color-borde-control);
  color: var(--color-texto-principal);
}

.boton--llano {
  padding-inline: var(--espacio-corto);
  color: var(--color-texto-secundario);
}

@media (hover: hover) and (pointer: fine) {
  .boton--primario:hover {
    background-color: color-mix(in srgb, var(--color-superficie-inversa) 88%, var(--color-superficie-base));
  }
  .boton--secundario:hover { border-color: var(--color-texto-principal); }
  .boton--llano:hover { color: var(--color-texto-principal); }
}


/* ══════════════════════════════════════════════════════════
   PLACA — la tarjeta del sistema. Una sola clase, varias variantes.
   ══════════════════════════════════════════════════════════ */
.placa {
  position: relative;
  display: block;
  width: 100%;
  padding: var(--espacio-grupo);
  background-color: var(--color-superficie-elevada);
  border: var(--trazo-hairline) solid var(--color-borde-sutil);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-placa);
  text-align: left;
  transition:
    transform var(--duracion-hover) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida),
    opacity var(--duracion-filtro) var(--curva-salida),
    filter var(--duracion-filtro) var(--curva-salida);
}

/* Familia: la clasificación la lleva la etiqueta de texto, no una barra
   superior. La barra se retiró por decisión de marca. */

.placa--hundida  { background-color: var(--color-superficie-hundida); }
.placa--plana    { background-color: transparent; }
.placa--compacta { padding: var(--espacio-elemento); border-radius: var(--radio-chip); }
.placa--panel    { padding: var(--espacio-bloque); border-radius: var(--radio-panel); }

.placa--pulsable { cursor: pointer; }
.placa--pulsable:active { transform: scale(var(--escala-presion-placa)); }
@media (hover: hover) and (pointer: fine) {
  .placa--pulsable:hover {
    transform: translateY(var(--elevacion-hover));
    border-color: var(--color-borde-fuerte);
  }
}

/* Estado atenuado por el filtro de familia */
.placa[data-atenuada] {
  opacity: var(--atenuacion-filtrado);
  filter: saturate(var(--saturacion-filtrado));
}

.placa__titulo  { margin-bottom: var(--espacio-corto); }
.placa__familia { display: block; color: var(--familia); margin-bottom: var(--espacio-minimo); }
.placa__texto   { color: var(--color-texto-secundario); font-size: var(--tamano-cuerpo-menor); }


/* ══════════════════════════════════════════════════════════
   LEYENDA DE FAMILIAS — la clave de lectura de toda la página
   ══════════════════════════════════════════════════════════ */
.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto);
  align-items: center;
}

.chip-familia {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-corto);
  min-height: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  background-color: transparent;
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  color: var(--familia);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--duracion-presion) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida),
    background-color var(--duracion-hover) var(--curva-salida);
}
.chip-familia:active { transform: scale(var(--escala-presion)); }
.chip-familia[aria-pressed="true"] {
  color: var(--color-texto-principal);
  border-color: var(--familia);
  background-color: color-mix(in srgb, var(--familia) 12%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .chip-familia:hover { color: var(--color-texto-principal); border-color: var(--color-texto-principal); }
}


/* ══════════════════════════════════════════════════════════
   CANTO LAMINADO — la costura.
   Sustituye a la banda de difracción, retirada por decisión de marca.
   El canto de una tarjeta cortada deja ver el apilado de láminas: eso es
   esto, hairlines a paso regular. Marca el mismo punto que marcaba la
   banda —dónde termina JurisOne y empieza la marca del cliente— pero en
   material, no en color. Aparece exactamente dos veces en la página.
   ══════════════════════════════════════════════════════════ */
.canto {
  position: relative;
  z-index: var(--capa-firma);   /* por encima del velo de foto de la sección */
  height: var(--altura-canto);
  background-color: var(--color-superficie-base);
  /* La cara del corte, y debajo las láminas, cada una un punto más tenue. */
  border-top: var(--trazo-hairline) solid var(--color-texto-secundario);
  background-image: linear-gradient(
    to bottom,
    transparent 0 var(--paso-canto),
    var(--color-trazo-diagrama) var(--paso-canto) calc(var(--paso-canto) + var(--trazo-hairline)),
    transparent calc(var(--paso-canto) + var(--trazo-hairline)) calc(var(--paso-canto) * 2),
    var(--color-borde-fuerte) calc(var(--paso-canto) * 2) calc(var(--paso-canto) * 2 + var(--trazo-hairline)),
    transparent calc(var(--paso-canto) * 2 + var(--trazo-hairline)) 100%
  );
}


/* ══════════════════════════════════════════════════════════
   CINTA DE SECCIÓN — el otro relevo de la banda.
   Una sección ya no se anuncia con color: se anuncia con una regla a todo
   el ancho que declara qué empieza y de cuánto se compone. Es dato, no
   adorno: las cifras salen del contenido real.
   ══════════════════════════════════════════════════════════ */
.cinta-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-texto);
  border-top: var(--trazo-hairline) solid var(--color-borde-fuerte);
  margin-bottom: var(--espacio-bloque-mayor);
}


/* ══════════════════════════════════════════════════════════
   REGLA CON MARCAS — abre cada capa. Regla de medición, no adorno:
   los ticks cuentan tantos como elementos hay en la capa.
   ══════════════════════════════════════════════════════════ */
.regla-marcas {
  --marcas: 8;
  position: relative;
  height: var(--espacio-corto);
  border-top: var(--trazo-hairline) solid var(--color-trazo-diagrama);
}
.regla-marcas::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--espacio-corto);
  background-image: linear-gradient(
    to right,
    var(--color-trazo-diagrama) 0 var(--trazo-hairline),
    transparent var(--trazo-hairline) 100%
  );
  background-size: calc(100% / var(--marcas)) 100%;
  background-repeat: repeat-x;
}


/* ══════════════════════════════════════════════════════════
   DETALLE COLAPSABLE — capacidades destacadas visibles, detalle a demanda
   ══════════════════════════════════════════════════════════ */
.detalle__disparador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  width: 100%;
  min-height: var(--toque-minimo);
  padding: 0;
  background: none;
  border: 0;
  border-top: var(--trazo-hairline) solid var(--color-borde-sutil);
  margin-top: var(--espacio-elemento);
  padding-top: var(--espacio-elemento);
  cursor: pointer;
  text-align: left;
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  transition: color var(--duracion-hover) var(--curva-salida);
}
@media (hover: hover) and (pointer: fine) {
  .detalle__disparador:hover { color: var(--color-texto-principal); }
}
/* El signo del disparador es tipográfico, no un icono: es el texto
   «ABRIR / CERRAR», que además dice qué va a pasar. */
.detalle__disparador::after {
  content: attr(data-etiqueta-abrir);
  color: var(--color-texto-principal);
}
.detalle__disparador[aria-expanded="true"]::after { content: attr(data-etiqueta-cerrar); }

.detalle__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--duracion-detalle-cierra) var(--curva-salida),
    opacity var(--duracion-detalle-cierra) var(--curva-salida);
}
.detalle__panel > * { overflow: hidden; }
.detalle__disparador[aria-expanded="true"] + .detalle__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-duration: var(--duracion-detalle-abre);
}


/* ══════════════════════════════════════════════════════════
   LISTA LLANA — listas sin viñetas ni checks. Separadas por hairline.
   ══════════════════════════════════════════════════════════ */
.lista-llana > li {
  padding-block: var(--espacio-corto);
  font-size: var(--tamano-cuerpo-menor);
  color: var(--color-texto-secundario);
}
.lista-llana > li + li { border-top: var(--trazo-hairline) solid var(--color-borde-sutil); }

/* Lista en línea, separada por hairline vertical */
.lista-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto) var(--espacio-elemento);
}
.lista-inline > li + li {
  padding-inline-start: var(--espacio-elemento);
  border-inline-start: var(--trazo-hairline) solid var(--color-borde-sutil);
}


/* ══════════════════════════════════════════════════════════
   MARCO DE FOTO — placeholder sobrio de las imágenes de Recraft.
   Indica qué prompt va en cada hueco (ver docs/prompts-imagenes.md).
   ══════════════════════════════════════════════════════════ */
.marco-foto {
  position: relative;
  display: grid;
  place-content: center;
  gap: var(--espacio-minimo);
  aspect-ratio: var(--proporcion-tarjeta);
  padding: var(--espacio-grupo);
  background-color: var(--color-superficie-elevada);
  border: var(--trazo-hairline) dashed var(--color-borde-fuerte);
  border-radius: var(--radio-panel);
  text-align: center;
}
.marco-foto--fondo {
  position: absolute;
  inset: 0;
  z-index: var(--capa-foto);
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  background-color: transparent;
  place-content: end start;
  text-align: left;
  padding: var(--espacio-borde-pantalla);
}
/* La mancha ocupa el sitio de la foto, atenuada al valor real del sistema. */
.marco-foto--fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--foto-mancha);
  opacity: var(--foto-opacidad);
}
.marco-foto--fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--foto-velo);
}
/* La anotación de andamiaje se lee siempre: no la atenúa la opacidad de la foto. */
.marco-foto > * { position: relative; z-index: 1; }
.marco-foto__clave { color: var(--color-texto-secundario); }
.marco-foto__nota  {
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-size: var(--tamano-utilidad-menor);
  text-transform: none;
  letter-spacing: 0;
  max-width: var(--ancho-lectura);
}


/* ══════════════════════════════════════════════════════════
   MARCA Y NAVEGACIÓN
   ══════════════════════════════════════════════════════════ */
.barra-nav {
  position: relative;
  z-index: var(--capa-nav);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-block: var(--espacio-grupo);
}

/* Ranura del logotipo: JurisOne no tiene logo todavía (encargo aparte).
   Se marca el lugar exacto donde irá, sin inventarlo. */
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espacio-corto);
  padding: var(--espacio-corto) var(--espacio-texto);
  border: var(--trazo-hairline) dashed var(--color-borde-control);
  border-radius: var(--radio-chip);
  text-decoration: none;
  color: var(--color-texto-principal);
}
.marca__nombre {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display-fuerte);
  font-size: var(--tamano-placa);
  font-variation-settings: "wdth" var(--ancho-titular);
  letter-spacing: var(--tracking-placa);
}
.marca__nota { color: var(--color-texto-secundario); }

.acciones-nav { display: flex; align-items: center; gap: var(--espacio-corto); }

.selector-idioma {
  display: inline-flex;
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  overflow: hidden;
}
.selector-idioma__opcion {
  min-height: var(--toque-minimo);
  min-width: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  background-color: transparent;
  border: 0;
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad);
  letter-spacing: var(--tracking-utilidad);
  cursor: pointer;
  transition:
    background-color var(--duracion-hover) var(--curva-salida),
    color var(--duracion-hover) var(--curva-salida);
}
.selector-idioma__opcion[aria-pressed="true"] {
  background-color: var(--color-superficie-inversa);
  color: var(--color-texto-inverso);
}


/* ══════════════════════════════════════════════════════════
   SELECTOR DE PROPUESTA — andamiaje de la ronda 2.
   Existe para que el cliente compare las tres direcciones sin editar la URL.
   No forma parte de la página final: sale cuando se elija una.
   ══════════════════════════════════════════════════════════ */
.selector-propuesta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-corto);
}
.selector-propuesta__opcion {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);
  padding-inline: var(--espacio-texto);
  border: var(--trazo-hairline) solid var(--color-borde-control);
  border-radius: var(--radio-chip);
  color: var(--color-texto-secundario);
  font-family: var(--fuente-utilidad);
  font-weight: var(--peso-utilidad);
  font-size: var(--tamano-utilidad-menor);
  letter-spacing: var(--tracking-utilidad);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    color var(--duracion-hover) var(--curva-salida),
    border-color var(--duracion-hover) var(--curva-salida);
}
.selector-propuesta__opcion[aria-current="page"] {
  color: var(--color-texto-principal);
  border-color: var(--color-texto-principal);
}
@media (hover: hover) and (pointer: fine) {
  .selector-propuesta__opcion:hover { color: var(--color-texto-principal); }
}

@media (max-width: 30rem) {
  /* La nota de andamiaje del logotipo no compite por el ancho en móvil. */
  .marca__nota { display: none; }
}