/* ═══════════════════════════════════════════════════════════════════════════
   ROMANO & LANZAGORTA ASOCIADOS
   05 · Componentes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Revelado ────────────────────────────────────────────────────────────────
   Una sola gramatica de movimiento: aparecer y asentarse. Sin escala,
   sin desplazamiento lateral, sin paralaje. Nada se mueve dos veces.        */

.rev {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--v-media) var(--curva),
              transform var(--v-media) var(--curva);
}

.rev.visible { opacity: 1; transform: none; }

.rev--d1 { transition-delay:  90ms; }
.rev--d2 { transition-delay: 180ms; }
.rev--d3 { transition-delay: 270ms; }
.rev--d4 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; }
  .seccion__filete { transform: scaleX(1); }
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--alto-cabecera);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--blanco) 84%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}

.cabecera::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--filete);
  background: var(--linea);
  opacity: 0;
  transition: opacity var(--v-corta) linear;
}

.cabecera.desplazada::after { opacity: 1; }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  width: 100%;
}

.cabecera__marca {
  display: block;
  color: var(--tinta);
  transition: opacity var(--v-corta) linear;
}

.cabecera__marca:hover { opacity: 0.55; }
.cabecera__marca svg { height: 15px; width: auto; }
.cabecera__marca--min { display: none; }
.cabecera__marca--min svg { height: 30px; }

/* ── Navegacion ─────────────────────────────────────────────────────────── */

.nav { display: flex; align-items: center; gap: var(--e-4); }

.nav__enlace {
  position: relative;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 400;
  letter-spacing: var(--k-rotulo);
  text-transform: uppercase;
  color: var(--gris);
  padding-block: 0.5rem;
  transition: color var(--v-corta) linear;
}

/* El interletraje del ultimo rotulo arrastra un espacio final: se descuenta
   para que el menu cierre a plomo con el margen de la pagina. */
.nav__enlace:last-child { margin-right: calc(var(--k-rotulo) * -1); }

.nav__enlace::after {
  content: "";
  position: absolute;
  inset: auto 0 0.15rem 0;
  height: var(--filete);
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 380ms var(--curva);
}

.nav__enlace:hover,
.nav__enlace[aria-current="true"] { color: var(--tinta); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="true"]::after { transform: scaleX(1); }

/* Indice para pantalla reducida */
.indice-boton {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 400;
  letter-spacing: var(--k-rotulo);
  text-transform: uppercase;
  color: var(--tinta);
}

.indice-boton__trazos { display: block; width: 18px; }
.indice-boton__trazos span { display: block; height: var(--filete); background: var(--tinta); }
.indice-boton__trazos span + span { margin-top: 5px; }

.indice {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--alto-cabecera) var(--margen) var(--e-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--curva), visibility 420ms;
}

.indice.abierto { opacity: 1; visibility: visible; }

.indice__enlace {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-2);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.010em;
  color: var(--tinta);
  padding-block: 0.34em;
  border-bottom: var(--filete) solid var(--linea);
}

.indice__enlace:first-of-type { border-top: var(--filete) solid var(--linea); }
.indice__enlace .micro { color: var(--gris); }
.indice__pie { margin-top: var(--e-5); }

/* ── Marca ──────────────────────────────────────────────────────────────── */

.marca { display: block; color: var(--tinta); }
.marca svg { width: 100%; height: auto; }

/* ── Datos: la banda de identificacion del expediente ───────────────────── */

.datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: var(--e-3) var(--canal);
  border-top: var(--filete) solid var(--linea-media);
  padding-top: var(--e-2);
}

.datos__campo > .rotulo { margin-bottom: 0.6rem; }
.datos__valor { font-size: var(--t-menor); font-weight: 400; color: var(--tinta); line-height: 1.5; }

/* ── Campo: par rotulo / contenido ──────────────────────────────────────── */

.campo { border-top: var(--filete) solid var(--linea); padding-block: var(--e-3); }
.campo:last-child { border-bottom: var(--filete) solid var(--linea); }
.campo__rotulo { padding-top: 0.3rem; }

.campo__valor {
  font-size: var(--t-menor);
  line-height: 1.7;
  color: var(--tinta);
  max-width: 62ch;
}

.campo__valor + .campo__valor { margin-top: 0.9rem; }
.campo__valor--gris { color: var(--gris); }

.enlace {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: var(--linea-media);
  transition: text-decoration-color var(--v-corta) linear;
}

.enlace:hover { text-decoration-color: var(--tinta); }

/* ── Alcance: lo que la firma hace y lo que no ─────────────────────────────
   Los dos grupos se disuelven en la reticula del padre (display: contents) y
   cada par de enunciados comparte fila. Asi los filetes de una columna y de la
   otra se enfrentan a cualquier ancho, sin recortar el texto a una medida fija.
   Es la unica forma de que la comparacion se lea como una sola tabla.        */

.alcance__grupo { display: contents; }

.alcance__grupo > *              { grid-row: auto; }
.alcance__grupo > *:nth-child(1) { grid-row: 1; }
.alcance__grupo > *:nth-child(2) { grid-row: 2; }
.alcance__grupo > *:nth-child(3) { grid-row: 3; }
.alcance__grupo > *:nth-child(4) { grid-row: 4; }
.alcance__grupo > *:nth-child(5) { grid-row: 5; }
.alcance__grupo > *:nth-child(6) { grid-row: 6; }

.alcance__grupo:first-child > * { grid-column: 1 / 5;  }
.alcance__grupo:last-child  > * { grid-column: 5 / 10; }

.alcance__enc {
  align-self: end;
  padding-bottom: var(--e-2);
  border-bottom: var(--filete) solid var(--linea-firme);
}

.alcance__item {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  align-items: start;
  font-size: var(--t-menor);
  line-height: 1.62;
  color: var(--tinta);
  padding-block: 0.85rem;
  border-bottom: var(--filete) solid var(--linea);
}

.alcance__item span:first-child { color: var(--gris); }

/* ── Regla: los tres criterios de emision ───────────────────────────────── */

.regla { border-top: var(--filete) solid var(--linea); padding-block: var(--e-4); }
.regla:last-of-type { border-bottom: var(--filete) solid var(--linea); }
.regla__cuerpo { font-size: var(--t-cuerpo); line-height: var(--l-cuerpo); color: var(--tinta); }

/* ── Fase del proceso ───────────────────────────────────────────────────── */

.fase { border-top: var(--filete) solid var(--linea); padding-block: var(--e-4); }
.fase:last-of-type { border-bottom: var(--filete) solid var(--linea); }

.fase__cifra {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
}

.fase__cuerpo { font-size: var(--t-cuerpo); line-height: var(--l-cuerpo); color: var(--tinta); }

/* Sin filete: la separacion la hace el espacio. Dos filetes a treinta
   pixeles uno del otro compiten y ninguno significa nada. */
.fase__constancia { margin-top: var(--e-3); }
.fase__constancia .rotulo { color: var(--gris); }
.fase__constancia strong { font-weight: 400; color: var(--tinta); }

/* ── Nota al expediente ─────────────────────────────────────────────────── */

.nota { border-top: var(--filete) solid var(--linea-media); padding-top: var(--e-2); }
.nota__rotulo { margin-bottom: 0.7rem; }
.nota__cuerpo { font-size: var(--t-menor); line-height: 1.7; color: var(--gris); max-width: 58ch; }

/* ── Declaracion: la regla de comunicacion de la firma ──────────────────── */

.declaracion { background: var(--hueso); padding-block: var(--e-8); }
.declaracion__cuerpo { grid-column: 4 / 12; }
.declaracion__marca { width: 56px; color: var(--tinta); margin-bottom: var(--e-3); }
.declaracion__marca svg { width: 100%; height: auto; }
.declaracion__rotulo { margin-bottom: var(--e-3); }

@media (max-width: 1180px) { .declaracion__cuerpo { grid-column: 4 / -1; } }
@media (max-width: 860px)  { .declaracion__cuerpo { grid-column: 1 / -1; } }

/* ── Pie ────────────────────────────────────────────────────────────────── */

.pie { background: var(--hueso); padding-block: var(--e-7) var(--e-4); }

.pie__marca { grid-column: 1 / 5; }
.pie__marca svg { width: min(320px, 100%); height: auto; }

.pie__nav { grid-column: 7 / 10; }
.pie__nav a {
  display: block;
  font-family: var(--texto);
  font-size: var(--t-rotulo);
  font-weight: 400;
  letter-spacing: var(--k-rotulo);
  text-transform: uppercase;
  color: var(--gris);
  padding-block: 0.5rem;
  transition: color var(--v-corta) linear;
}
.pie__nav a:hover { color: var(--tinta); }

.pie__dir { grid-column: 10 / 13; }
.pie__dir .rotulo { margin-bottom: 0.75rem; }
.pie__dir p { font-size: var(--t-menor); line-height: 1.8; color: var(--tinta); }

.pie__cierre {
  grid-column: 1 / -1;
  margin-top: var(--e-6);
  padding-top: var(--e-2);
  border-top: var(--filete) solid var(--linea);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-4) var(--e-5);
  flex-wrap: wrap;
}

/* El aviso legal es el texto que protege a la firma: tiene que poder leerse.
   Nada de versalitas con interletraje abierto en un parrafo de cuatro lineas. */
.pie__legal {
  flex: 1 1 58ch;
  font-size: 0.75rem;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris);
  max-width: 74ch;
}

.pie__meta { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: baseline; }
.pie__meta a { color: var(--gris); transition: color var(--v-corta) linear; }
.pie__meta a:hover { color: var(--tinta); }

@media (max-width: 980px) {
  .pie__marca { grid-column: 1 / -1; margin-bottom: var(--e-5); }
  .pie__nav   { grid-column: 1 / 7; }
  .pie__dir   { grid-column: 7 / -1; }
}
@media (max-width: 620px) {
  .pie__nav, .pie__dir { grid-column: 1 / -1; }
  .pie__dir { margin-top: var(--e-4); }
}

/* ── Cabecera en pantalla reducida ──────────────────────────────────────── */

@media (max-width: 860px) {
  .alcance__grupo > * { grid-row: auto !important; grid-column: 1 !important; }
  .alcance__enc { margin-top: var(--e-4); }
  .alcance__grupo:first-child > .alcance__enc { margin-top: 0; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .indice-boton { display: flex; }
}

@media (max-width: 620px) {
  .cabecera__marca--ancha { display: none; }
  .cabecera__marca--min { display: block; }
}