/* ============================================================
   JurisOne — SISTEMA A' · «MARCA» · librería de componentes.
   Si dos cosas se ven igual, comparten clase. Nada se duplica.
   Es la librería de «la lámina» con tres cambios, y los tres vienen del
   logotipo:
     1. La ranura del logotipo se sustituye por el logotipo, con su métrica
        real (tamaño por altura de x, área de respeto y corrección óptica).
     2. El canto laminado —el elemento firma— pasa a ser el canto de la
        lámina violeta con la cara del corte en menta.
     3. Las cinco tintas de familia se retiran: con un color de marca en el
        sistema, cinco tintas más serían seis colores, y seis colores no son
        una marca. La familia la lleva la palabra, que siempre estuvo ahí.
   Consume EXCLUSIVAMENTE tokens semánticos.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   TAXONOMÍA DE FAMILIAS — sin tintas.
   Con el logotipo entra un color de marca al sistema, y cinco tintas de
   familia junto a él son seis colores. La clasificación no pierde nada al
   quedarse en monocromo: el nombre de la familia siempre estuvo escrito
   dentro de la placa, el color nunca fue el único portador (§8), y el
   filtro de la leyenda sigue demostrando que el sistema clasifica sin
   iconos. Es la misma decisión de la ronda 3 en «Autorizado» y «Una sola».
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   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));
  }
  /* Lo que se puede pulsar responde en color de marca. Es el único trabajo
     que hace el violeta fuera del canto: señalar acción. */
  .boton--secundario:hover { border-color: var(--color-marca); }
  .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);
}


.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-marca);
  }
}

/* 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); }
/* La familia ya no es un color: es la primera palabra de la placa. */
.placa__familia { display: block; color: var(--color-texto-secundario); 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(--color-texto-principal);
  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)); }
/* Seleccionada, la familia se estampa en la superficie de marca. Es la
   misma placa que usa el CTA: lo elegido y lo accionable se ven igual. */
.chip-familia[aria-pressed="true"] {
  color: var(--color-texto-inverso);
  background-color: var(--color-superficie-inversa);
  border-color: var(--color-superficie-inversa);
}
@media (hover: hover) and (pointer: fine) {
  .chip-familia:hover { border-color: var(--color-marca); }
}


/* ══════════════════════════════════════════════════════════
   CANTO LAMINADO — la costura, y el elemento firma de esta versión.
   Al cortar una tarjeta queda a la vista el canto: el apilado de láminas.
   Marca dónde termina JurisOne y empieza la marca del cliente, y aparece
   exactamente dos veces en la página — borde inferior del hero y cabecera
   del bloque de atribución.
   Aquí es donde el logotipo entra en el sistema. El canto deja de ser del
   color de la página y pasa a ser del color del material: violeta de
   marca, con la cara del corte cogiendo la luz en menta y, por debajo, las
   láminas hundiéndose en sombra, cada una un punto más tenue.
   Es el ÚNICO sitio del sitio donde el violeta ocupa superficie corrida y
   el único donde el violeta y la menta se tocan, como en el logotipo. Todo
   lo demás se queda quieto: la audacia se gasta aquí y en ningún otro sitio.
   ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   CINTA DE SECCIÓN — ya sin regla (ronda 5).
   Sigue siendo lo que abre una sección: el rótulo a la izquierda y un dato
   real a la derecha, en las dos puntas del ancho de la página. Lo que se
   fue es el filete que la subrayaba a todo lo ancho. Una sección no se
   anuncia con una línea: se anuncia declarando qué empieza y de cuánto se
   compone, y separándose de lo anterior con aire.
   El aire tiene que ser desigual —mucho por arriba, poco por abajo— para
   que la cinta se lea pegada a SU sección y no flotando entre las dos.
   ══════════════════════════════════════════════════════════ */
.cinta-seccion {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-elemento);
  padding-block-end: var(--espacio-texto);
  margin-bottom: var(--espacio-bloque-mayor);
}


/* ══════════════════════════════════════════════════════════
   REGLA CON MARCAS — RETIRADA en esta propuesta (ronda 5).
   Abría cada capa del descenso con un filete y sus ticks (tantos como
   elementos había en la capa). Era información honesta, pero era una regla
   horizontal más, y en esta ronda la página deja de articularse con reglas.
   El recuento no se pierde: la cinta de la sección ya declara
   «5 capas · 12 módulos · 3 rieles» y cada capa lleva su código
   «Capa 03 / 05» al lado. La capa la sigue abriendo su índice, no un trazo.

   El nodo (`.regla-marcas` la dibujaba, el nodo lo dibuja `.capa::after`)
   se mantiene: es un vértice de diagrama, no un separador.

   El elemento se sigue montando desde assets/js/arquitectura.js, que es
   compartido por las seis propuestas y no se toca. Se neutraliza aquí, que
   es donde vive el aspecto de ESTA propuesta.
   ══════════════════════════════════════════════════════════ */
.regla-marcas { display: none; }


/* ══════════════════════════════════════════════════════════
   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;
  /* Ronda 5: se va el filete que lo separaba del resumen de la placa. Lo
     separa el aire, y un punto más de aire del que había con línea: sin
     trazo que marque el corte, el blanco tiene que hacerlo solo. */
  margin-top: var(--espacio-grupo);
  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, sin checks y, desde la ronda 5, sin
   filete entre renglones. Un renglón se separa del siguiente por el
   interlineado y por su propio blanco, que sube de 8 a 12 px para que la
   lista siga leyéndose como renglones y no como un párrafo troceado.
   ══════════════════════════════════════════════════════════ */
.lista-llana > li {
  padding-block: var(--espacio-texto);
  font-size: var(--tamano-cuerpo-menor);
  color: var(--color-texto-secundario);
}

/* Lista en línea: la separa el hueco, no un filete vertical. */
.lista-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-corto) var(--espacio-bloque);
}


/* ══════════════════════════════════════════════════════════
   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
   ══════════════════════════════════════════════════════════ */
/* El hueco lateral de la barra no baja nunca del área de respeto del
   logotipo: es una regla de marca, no una decisión de layout. */
.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) max(var(--espacio-elemento), var(--respeto-logo-nav));
  padding-block: var(--espacio-grupo);
}

/* ══════════════════════════════════════════════════════════
   EL LOGOTIPO — dos apariciones, dos tamaños, una misma métrica.
   Un logotipo en minúsculas no se dimensiona por su caja: la caja incluye
   el rasgo descendente de la j y los destellos, que no cuentan para el
   tamaño percibido. Se dimensiona por la altura de x, y por eso el área de
   respeto y la corrección óptica salen de la misma constante (ver la
   métrica en tokens.css).
   ══════════════════════════════════════════════════════════ */
.marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-minimo);   /* el blanco de toque lo da el enlace */
  text-decoration: none;
}
/* La palabra se centra en el 46,6 % de la caja, no en el 50 %: alineada
   por caja quedaría alta. Se empuja hacia abajo esa diferencia exacta. */
.marca__logo {
  height: var(--altura-logo-nav);
  width: auto;
  translate: 0 calc(var(--altura-logo-nav) * var(--correccion-optica-logo));
}

/* Firma del cierre: el logotipo a tamaño de firma, con su área de respeto
   completa por debajo. El margen es el mínimo, no el hueco: si la pila de
   la sección pide más, manda la pila. */
.firma-marca {
  height: var(--altura-logo-firma);
  width: auto;
  margin-block-end: var(--respeto-logo-firma);
}

.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);
}
/* El idioma activo usa la misma placa de marca que el CTA y que la familia
   filtrada: en toda la página, «esto está seleccionado» tiene un solo color. */
.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); }
}

/* ══════════════════════════════════════════════════════════
   LA ALIANZA — las dos firmas del cierre.

   Sin placa detrás: un logotipo dentro de un recuadro se lee como un cromo
   coleccionable. Estas dos marcas firman el documento, y una firma va sobre
   el papel. Se separan por aire, no por línea ni por caja.
   ══════════════════════════════════════════════════════════ */
.alianza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--respeto-logo-alianza);
  margin: 0;
  padding: 0;
  list-style: none;
}

.alianza__firma { display: flex; align-items: center; }

.alianza__logo {
  display: block;
  width: auto;
  height: var(--altura-logo-alianza);
}

/* Juriscoop pesa menos a la misma altura: es una lengüeta ancha y de trazo
   fino frente a una palabra compacta. Sube por factor hasta igualar mancha,
   con tope de ancho para no rebasar la densidad real del archivo. */
.alianza__logo--juriscoop {
  height: calc(var(--altura-logo-alianza) * var(--factor-logo-juriscoop));
}