/*
 * ac-pnu.css — consulta-patentes.php. Sólo esta página.
 *
 * No define ni un color: los tokens --ac-* vienen de css/ac-header.css (que
 * carga header.php en las 19 páginas) y los componentes .ac-btn, .ac-enc,
 * .ac-bloque, .ac-cierre y .ac-rev de css/ac-home.css, que esta página también
 * enlaza. Aquí sólo vive lo que no existía: el recorrido por pasos, sus campos,
 * el resultado y el formulario.
 *
 * Secuencia de fondos, respetando la regla de que nunca hay dos seguidos
 * iguales: petróleo (portada) · papel · blanco (recorrido) · papel (resultado)
 * · blanco (consideraciones) · papel (cierre).
 *
 * Contrastes medidos sobre petróleo #004F71, que es el único fondo oscuro:
 *   blanco            8,91:1  AA
 *   blanco α.90       7,64:1  AA
 *   blanco α.75       5,81:1  AA  ← el rótulo de 12px va aquí, no en cian
 *   cian #5CC2E7      4,38:1  sólo texto grande; no se usa para cuerpo
 */

/* ========================================================================
   1. Portada
   El navbar es fijo con min-height 77px: el padding superior lo compensa,
   igual que el `padding: 100px` de buscador-canales.css.
   ======================================================================== */

.pnu-portada {
  background: var(--ac-petroleo);
  padding-top: calc(77px + clamp(2.5rem, 5vw, 4.5rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.pnu-rotulo {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
  margin: 0 0 1.1rem;
}

.pnu-portada__titulo {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
  max-width: 24ch;
  margin: 0 0 1.25rem;
}

.pnu-portada__bajada {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  /* Sobre oscuro el interlineado sube 0,06 y el tracking 0,01em respecto del
     equivalente sobre papel: es la regla tipográfica del sistema. */
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.66;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.9);
  max-width: 58ch;
  text-wrap: pretty;
  margin: 0 0 2rem;
}
.pnu-portada__bajada strong {
  font-weight: 500;
  color: #fff;
}

.pnu-portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
/* .ac-btn--tinta es para fondo claro (borde oscuro, texto tinta): sobre
   petróleo desaparece. Aquí toma la piel de .ac-btn--fantasma. */
.pnu-portada .ac-btn--tinta {
  background-color: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.5);
  color: #fff;
}
.pnu-portada .ac-btn--tinta:hover,
.pnu-portada .ac-btn--tinta:focus-visible {
  background-color: rgb(255 255 255 / 0.16);
  border-color: #fff;
  color: #fff;
}
.pnu-portada .ac-btn:focus-visible {
  outline-color: var(--ac-cian);
}

.pnu-portada__cobertura {
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.75);
}
.pnu-portada__cobertura .ac-cifra {
  font-weight: 500;
  color: #fff;
}

/* ========================================================================
   2. Explicación: por qué la patente sigue al derecho
   Rejilla asimétrica 7/5, como .ac-relato: el relato pesa más que la lista.
   ======================================================================== */

.pnu-explica {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .pnu-explica {
    grid-template-columns: 7fr 5fr;
  }
}

.pnu-parrafo {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ac-tinta-2);
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0 0 1.1rem;
}
.pnu-parrafo:last-child {
  margin-bottom: 0;
}
.pnu-parrafo strong {
  font-weight: 500;
  color: var(--ac-tinta);
}

.pnu-claves {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pnu-claves li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-claves li:last-child {
  border-bottom: 1px solid var(--ac-borde-claro);
}
.pnu-claves__t {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ac-tinta);
}
.pnu-claves__d {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  text-wrap: pretty;
}

/* ========================================================================
   3. El recorrido: riel de progreso
   La numeración la llevan contadores CSS y no el HTML, porque cuáles pasos se
   muestran lo decide el paso 1: un número escrito a mano quedaría desfasado.
   ======================================================================== */

.pnu-recorrido {
  max-width: 900px;
}

.pnu-pasos {
  counter-reset: pnu-paso;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  list-style: none;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--ac-borde-claro);
}
.pnu-pasos li {
  counter-increment: pnu-paso;
}
.pnu-pasos button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.2rem 0;
  background: none;
  border: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ac-tinta-2);
  cursor: pointer;
  transition: color 160ms var(--ease-out-quart);
}
.pnu-pasos button::before {
  content: counter(pnu-paso);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ac-tinta-2);
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}
.pnu-pasos button:disabled {
  cursor: default;
  opacity: 0.55;
}
.pnu-pasos button:not(:disabled):hover {
  color: var(--ac-azul);
}
.pnu-pasos button:focus-visible {
  outline: 2px solid var(--ac-azul);
  outline-offset: 3px;
}
.pnu-pasos button:focus:not(:focus-visible) {
  outline: none;
}
.pnu-pasos .is-actual button {
  color: var(--ac-tinta);
  font-weight: 500;
}
.pnu-pasos .is-actual button::before {
  color: var(--ac-azul);
  border-bottom-color: var(--ac-acento);
}
.pnu-pasos .is-visitado button::before {
  color: var(--ac-azul);
}

/* ========================================================================
   4. Pasos y campos
   ======================================================================== */

.pnu-paso {
  /* El <fieldset> trae borde, márgenes y padding propios del navegador. */
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pnu-paso[hidden] {
  display: none;
}

.pnu-paso__titulo {
  /* Un <legend> no acepta bien width ni display:block en todos los motores;
     float:left lo saca del flujo del fieldset y se comporta como un h3. */
  float: left;
  width: 100%;
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ac-tinta);
  text-wrap: balance;
  margin: 0 0 0.7rem;
  padding: 0;
}

.pnu-paso__ayuda {
  clear: both;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ac-tinta-2);
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0 0 1.5rem;
}
.pnu-paso__ayuda strong {
  font-weight: 500;
  color: var(--ac-tinta);
}

.pnu-paso__nota {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  max-width: 72ch;
  margin: 0.85rem 0 0;
  text-wrap: pretty;
}
.pnu-paso__nota strong {
  font-weight: 500;
}
.pnu-paso__nota a,
.pnu-paso__ayuda a,
.pnu-parrafo a {
  color: var(--ac-azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Un <button> que se lee como enlace: la acción es "llévame a ese paso", que es
   navegación dentro del recorrido y no un destino, así que no puede ser un <a>
   con href. */
.pnu-enlace {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  color: var(--ac-azul);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pnu-enlace:hover {
  color: var(--ac-petroleo);
}
.pnu-enlace:focus-visible {
  outline: 2px solid var(--ac-azul);
  outline-offset: 2px;
}
.pnu-enlace:focus:not(:focus-visible) {
  outline: none;
}

.pnu-sub {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-sub__titulo {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ac-tinta);
  margin: 0 0 0.6rem;
}

/* ---------- Campos ---------- */
.pnu-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 1rem;
}
.pnu-campos:last-child {
  margin-bottom: 0;
}
/* Fila de campos cortos (fojas · vuelta · número · año). Con el mínimo general
   de 240px auto-fit dejaba tres arriba y el año solo en una segunda línea. */
.pnu-campos--apretado {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}

.pnu-campo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
}
.pnu-campo--corto {
  max-width: 22rem;
}
.pnu-campo__rot {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}
.pnu-campo__opt {
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}
.pnu-campo__pista {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--ac-tinta-2);
}

.pnu-campo input[type='text'],
.pnu-campo input[type='email'],
.pnu-campo input[type='tel'],
.pnu-campo select,
.pnu-campo textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 1px solid var(--ac-linea);
  border-radius: 3px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ac-tinta);
  transition: border-color 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart);
}
.pnu-campo textarea {
  resize: vertical;
  min-height: 5.5rem;
}
.pnu-campo select {
  /* La flecha nativa de un select en Windows es gris claro sobre blanco:
     se conserva la nativa (accesible) y sólo se iguala la caja. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ac-tinta-2) 50%),
    linear-gradient(135deg, var(--ac-tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}
.pnu-campo input:focus,
.pnu-campo select:focus,
.pnu-campo textarea:focus {
  outline: 2px solid var(--ac-azul);
  outline-offset: 1px;
  border-color: var(--ac-azul);
}
.pnu-campo input::placeholder,
.pnu-campo textarea::placeholder {
  color: #7b8894;
}
/* Todo dato numérico en cifras tabulares: es una página de fojas, años y
   coordenadas, y las cifras proporcionales se leen peor en columna. */
.pnu-campo input[inputmode='numeric'],
.pnu-campo input[inputmode='decimal'],
.pnu-codigo {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pnu-campo--archivo input[type='file'] {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  color: var(--ac-tinta-2);
}
.pnu-campo.is-mal input,
.pnu-campo.is-mal select,
.pnu-campo.is-mal textarea {
  border-color: #c0392b;
}

/* Teléfono con el prefijo del país pegado, como en el formulario del pie. */
.pnu-tel {
  display: flex;
  align-items: stretch;
}
.pnu-tel__pais {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  background: var(--ac-papel);
  border: 1px solid var(--ac-linea);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  color: var(--ac-tinta-2);
}
.pnu-tel input {
  border-radius: 0 3px 3px 0 !important;
}

/* ---------- Opciones grandes (paso 1) ---------- */
.pnu-opciones {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.9rem;
  margin: 0;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px solid var(--ac-borde-claro);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out-quart);
}
.pnu-opcion:hover {
  background: var(--ac-papel);
}
.pnu-opcion input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ac-azul);
  flex: 0 0 auto;
}
.pnu-opcion__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.pnu-opcion__t {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--ac-tinta);
}
.pnu-opcion__d {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ac-tinta-2);
  text-wrap: pretty;
}

/* ---------- Elección única (paso 3) ---------- */
.pnu-eleccion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pnu-eleccion__op {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 1rem;
  border: 1px solid var(--ac-linea);
  border-radius: 999px;
  background: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  color: var(--ac-tinta);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart);
}
.pnu-eleccion__op:hover {
  border-color: var(--ac-azul);
}
.pnu-eleccion__op input {
  accent-color: var(--ac-azul);
  margin: 0;
}
.pnu-eleccion__op:has(input:checked) {
  border-color: var(--ac-azul);
  background: rgb(32 96 173 / 0.06);
}
/* Respaldo para motores sin :has(): el JS marca la clase. */
.pnu-eleccion__op.is-elegida {
  border-color: var(--ac-azul);
  background: rgb(32 96 173 / 0.06);
}

.pnu-condicional {
  margin-top: 1.5rem;
}
.pnu-condicional[hidden] {
  display: none;
}

/* ---------- Filas repetibles (titulares anteriores, inscripciones) ---------- */
.pnu-repetible {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pnu-fila {
  position: relative;
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--ac-papel);
  border: 1px solid var(--ac-borde-claro);
  border-radius: 3px;
}
.pnu-fila__enc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.pnu-fila__rot {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}
.pnu-fila .pnu-campo input,
.pnu-fila .pnu-campo select {
  background: #fff;
}
.pnu-fila__quitar {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  background: none;
  border: 0;
  border-radius: 3px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  color: var(--ac-tinta-2);
  cursor: pointer;
  transition: color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart);
}
.pnu-fila__quitar:hover {
  background: rgb(16 24 32 / 0.06);
  color: var(--ac-tinta);
}
.pnu-fila__quitar:focus-visible {
  outline: 2px solid var(--ac-azul);
  outline-offset: 2px;
}
.pnu-fila__quitar:focus:not(:focus-visible) {
  outline: none;
}

.pnu-btn-agregar {
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: 0.6rem 1rem;
  background: none;
  border: 1px dashed var(--ac-linea);
  border-radius: 3px;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ac-azul);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart);
}
.pnu-btn-agregar:hover {
  border-color: var(--ac-azul);
  background: rgb(32 96 173 / 0.05);
}
.pnu-btn-agregar[hidden] {
  display: none;
}
.pnu-btn-agregar:focus-visible {
  outline: 2px solid var(--ac-azul);
  outline-offset: 2px;
}
.pnu-btn-agregar:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Navegación del recorrido ---------- */
.pnu-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-nav .ac-btn[hidden] {
  display: none;
}

/* ---------- Resumen previo a la búsqueda ---------- */
.pnu-resumen {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-resumen__fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--ac-borde-claro);
}
@media (min-width: 640px) {
  .pnu-resumen__fila {
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}
.pnu-resumen__rot {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}
.pnu-resumen__val {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ac-tinta);
  overflow-wrap: anywhere;
}

/* ========================================================================
   5. Avisos
   ======================================================================== */

.pnu-aviso {
  margin: 1.25rem 0 0;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--ac-borde-claro);
  border-radius: 3px;
  background: var(--ac-papel);
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  text-wrap: pretty;
}
.pnu-aviso strong {
  font-weight: 500;
  color: var(--ac-tinta);
}
.pnu-aviso a {
  color: var(--ac-azul);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pnu-aviso[hidden] {
  display: none;
}
/* El rojo de marca #EF5046 da 3,56:1 sobre blanco y falla como tinta; como
   filete lateral es superficie y no texto, así que ahí sí se usa. */
.pnu-aviso--alerta {
  background: #fdf4f3;
  border-color: rgb(239 80 70 / 0.35);
  color: var(--ac-tinta);
}
.pnu-aviso--ok {
  background: rgb(32 96 173 / 0.06);
  border-color: rgb(32 96 173 / 0.28);
  color: var(--ac-tinta);
}
/* Dentro del recuadro de resultado el fondo ya es papel: un aviso del mismo
   color desaparece y sólo se vería su filete. */
.pnu-resultado .pnu-aviso {
  background: #fff;
}

/* ========================================================================
   6. Resultado
   ======================================================================== */

/* El resultado vive dentro del bloque blanco del recorrido (ver el comentario
   del marcado): su peso visual lo da este recuadro de papel, no un cambio de
   fondo de sección, que dejaría dos blancos seguidos mientras está oculto. */
#pnu-resultado-bloque {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
#pnu-resultado-bloque[hidden] {
  display: none;
}
/* El resultado aparece donde hasta ese momento no había nada. Un recorrido
   corto hacia arriba lo liga al botón que lo produjo, en vez de dejarlo
   parpadear de golpe a mitad de página. */
.pnu-aparece {
  animation: pnu-entrar 420ms var(--ease-out-quart) both;
}
@keyframes pnu-entrar {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pnu-resultado {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--ac-papel);
  border: 1px solid var(--ac-borde-claro);
  border-radius: 3px;
}
.pnu-resultado:focus {
  outline: none;
}
.pnu-resultado__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--ac-borde-claro);
}
.pnu-resultado__titulo {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ac-tinta);
  text-wrap: balance;
  max-width: 34ch;
  margin: 0 0 1rem;
}
.pnu-resultado__titulo .pnu-n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ac-petroleo);
}
.pnu-resultado__cuerpo {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ac-tinta-2);
  max-width: 68ch;
  text-wrap: pretty;
  margin: 0 0 1.25rem;
}
.pnu-resultado__cuerpo strong {
  font-weight: 500;
  color: var(--ac-tinta);
}

/* ---------- Las pasadas, una por línea ---------- */
.pnu-vias {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-vias__enc {
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ac-tinta-2);
}
.pnu-vias__enc + .pnu-vias {
  margin-top: 0.85rem;
}
/* Aclara que el número del titular no es la suma de las líneas de arriba. */
.pnu-vias__resumen {
  margin: 0.85rem 0 0;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  max-width: 72ch;
  text-wrap: pretty;
}
.pnu-vias li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--ac-borde-claro);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: var(--ac-tinta);
}
.pnu-vias__marca {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  width: 1.25rem;
  text-align: center;
}
.pnu-vias__marca--si { color: var(--ac-petroleo); }
.pnu-vias__marca--no { color: var(--ac-tinta-2); }
.pnu-vias__marca--duda { color: var(--ac-azul); }
.pnu-vias__que {
  overflow-wrap: anywhere;
}
.pnu-vias__estado {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ac-tinta-2);
  white-space: nowrap;
}
.pnu-vias__nota {
  grid-column: 2 / -1;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ac-tinta-2);
}
/* En pantalla angosta el conteo a la derecha le deja al rótulo unos 140px y un
   expediente se parte por la mitad. Baja a su propia línea. */
@media (max-width: 559px) {
  .pnu-vias li {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0.2rem;
  }
  .pnu-vias__estado {
    grid-column: 2 / -1;
  }
}

.pnu-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.pnu-bloque {
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--ac-borde-claro);
  border-radius: 3px;
}
.pnu-bloque__t {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ac-tinta);
  margin: 0 0 0.7rem;
}
.pnu-bloque ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pnu-bloque li {
  position: relative;
  padding: 0 0 0 1.1rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  text-wrap: pretty;
}
.pnu-bloque li + li {
  margin-top: 0.5rem;
}
.pnu-bloque li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ac-azul);
}

/* ---------- Salto al formulario ----------
   Cierra el recuadro del resultado. Existe porque el formulario queda fuera de
   pantalla al terminar la búsqueda: sin este llamado hay que descubrirlo
   desplazándose, y la mitad de la herramienta es justamente lo que viene
   después.

   Va a sangre en el borde inferior de la tarjeta, no como un recuadro suelto
   dentro de ella: los márgenes negativos cancelan el relleno de .pnu-resultado
   y queda como la barra de acción del resultado, blanca sobre su papel y
   separada por un filete. Así el botón azul tiene el mayor contraste posible
   sin tener que adornar la caja. */
.pnu-salto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2rem);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) calc(-1 * clamp(1.5rem, 3.5vw, 2.5rem))
    calc(-1 * clamp(1.5rem, 3.5vw, 2.5rem));
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3.5vw, 2.5rem);
  background: #fff;
  border-top: 1px solid var(--ac-borde-claro);
  border-radius: 0 0 2px 2px;
}
.pnu-salto__texto {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.pnu-salto__t {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ac-tinta);
  text-wrap: balance;
  margin: 0;
}
.pnu-salto__d {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}
.pnu-salto .ac-btn {
  flex: 0 0 auto;
}
/* La flecha baja un pelo al pasar el cursor: el botón desplaza hacia abajo, y
   el gesto lo dice antes de que haya que leerlo. */
.pnu-salto__flecha {
  transition: transform 180ms var(--ease-out-quart);
}
.pnu-salto .ac-btn:hover .pnu-salto__flecha,
.pnu-salto .ac-btn:focus-visible .pnu-salto__flecha {
  transform: translateY(2px);
}

/* ========================================================================
   7. Formulario de contacto
   Es una tarjeta, no una sección más: es el único lugar de la página donde el
   visitante entrega datos suyos. La banda en petróleo lo separa del recuadro
   de papel del resultado sin repetir fondo (papel · petróleo · papel).
   ======================================================================== */

.pnu-contacto {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--ac-papel);
  border: 1px solid var(--ac-borde-claro);
  border-radius: 3px;
  /* La banda superior llega a los bordes y toma la curva de la tarjeta. */
  overflow: hidden;
  box-shadow: var(--ac-sombra-1);
}

.pnu-contacto__enc {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--ac-petroleo);
}
.pnu-contacto__rotulo {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.75);
  margin: 0 0 0.7rem;
}
.pnu-contacto__titulo {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  text-wrap: balance;
  margin: 0;
}
/* Sobre oscuro el interlineado sube 0,06 y el tracking 0,01em respecto del
   equivalente sobre papel, igual que en la portada. */
.pnu-contacto__bajada {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.66;
  letter-spacing: 0.01em;
  color: rgb(255 255 255 / 0.9);
  max-width: 64ch;
  text-wrap: pretty;
  margin: 0.6rem 0 0;
}
.pnu-contacto__bajada:empty {
  display: none;
}

.pnu-form--contacto {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
}
/* Dentro de la tarjeta los campos se reparten en rejilla: el tope de 22rem de
   .pnu-campo--corto dejaba el teléfono a media celda y la fila descuadrada. */
.pnu-form--contacto .pnu-campo--corto {
  max-width: none;
}
.pnu-form--contacto .pnu-campo {
  margin-bottom: 0;
}
/* El cuerpo de la tarjeta es papel: el prefijo del teléfono, que en el pie es
   papel sobre blanco, aquí se perdería contra su propio fondo. */
.pnu-form--contacto .pnu-tel__pais {
  background: #fff;
}
/* Mismo motivo para el aviso neutro. Los de alerta y acuse traen su propio
   color y no se tocan. */
.pnu-form--contacto .pnu-aviso:not(.pnu-aviso--alerta):not(.pnu-aviso--ok) {
  background: #fff;
}

/* ---------- Adjunto ----------
   El <input type="file"> nativo es lo único de la página que se ve como un
   control del sistema operativo. Se recorta a un punto (no display:none, que
   lo sacaría del orden de tabulación) y la caja visible es su propia <label>,
   así que el clic, el foco y el teclado siguen siendo los del control real. */
.pnu-adjunto {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.pnu-adjunto__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.pnu-adjunto__caja {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border: 1px dashed var(--ac-linea);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart);
}
.pnu-adjunto__caja:hover {
  border-color: var(--ac-azul);
  background: rgb(32 96 173 / 0.04);
}
.pnu-adjunto__input:focus-visible + .pnu-adjunto__caja {
  outline: 2px solid var(--ac-azul);
  outline-offset: 2px;
}
.pnu-adjunto__icono {
  display: inline-flex;
  color: var(--ac-azul);
}
.pnu-adjunto__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.pnu-adjunto__t {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ac-tinta);
}
.pnu-adjunto__d {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ac-tinta-2);
  /* Un nombre de archivo largo no tiene espacios donde partirse. */
  overflow-wrap: anywhere;
}
/* Con archivo elegido la caja deja de ser una invitación y pasa a ser un dato:
   el trazo discontinuo se cierra. */
.pnu-adjunto.is-cargado .pnu-adjunto__caja {
  border-style: solid;
  border-color: rgb(32 96 173 / 0.45);
  background: rgb(32 96 173 / 0.05);
}
.pnu-adjunto__quitar {
  flex: 0 0 auto;
  padding: 0.4rem 0.6rem;
  background: none;
  border: 0;
  border-radius: 3px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  color: var(--ac-tinta-2);
  cursor: pointer;
  transition: color 160ms var(--ease-out-quart), background-color 160ms var(--ease-out-quart);
}
.pnu-adjunto__quitar:hover {
  background: rgb(16 24 32 / 0.06);
  color: var(--ac-tinta);
}
.pnu-adjunto__quitar:focus-visible {
  outline: 2px solid var(--ac-azul);
  outline-offset: 2px;
}
.pnu-adjunto__quitar:focus:not(:focus-visible) {
  outline: none;
}
.pnu-adjunto__quitar[hidden] {
  display: none;
}

/* ---------- Consentimiento ---------- */
.pnu-consentimiento {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.95rem 1.1rem;
  background: #fff;
  border: 1px solid var(--ac-borde-claro);
  border-radius: 3px;
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ac-tinta-2);
  cursor: pointer;
  text-wrap: pretty;
}
.pnu-consentimiento input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ac-azul);
}

/* ---------- Envío ---------- */
.pnu-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ac-borde-claro);
}
/* El botón que cierra el recorrido pesa más que los del formulario. */
.pnu-btn-enviar {
  padding: 1rem 2rem;
  font-size: 1rem;
}
.pnu-envio .ac-btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}
/* En pantalla angosta los dos botones que cierran el recorrido toman el ancho
   completo: son la acción principal de su tarjeta y a media caja se leen como
   si fueran secundarios. */
@media (max-width: 559px) {
  .pnu-salto .ac-btn,
  .pnu-btn-enviar {
    width: 100%;
  }
}

/* ---------- Acuse de recibo ----------
   Reemplaza al formulario dentro de la tarjeta (dejarlo en pantalla invita a
   enviarlo dos veces), así que toma el mismo relleno que tenía el formulario y
   renuncia al borde: el de la tarjeta ya está ahí. */
.pnu-acuse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  /* El tinte azul de .pnu-aviso--ok es un 6 % y sobre el papel de la tarjeta no
     se distingue. Blanco, como el resto de las superficies interiores. */
  background: #fff;
  border: 0;
  border-radius: 0;
}
.pnu-acuse__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ac-azul);
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
}
.pnu-acuse__t {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ac-tinta);
  margin: 0 0 0.35rem;
}
.pnu-acuse__d {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ac-tinta-2);
  max-width: 64ch;
  text-wrap: pretty;
  margin: 0;
}

/* ---------- Indicador de espera ---------- */
.pnu-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pnu-girar 700ms linear infinite;
}
.pnu-spinner[hidden] {
  display: none;
}
@keyframes pnu-girar {
  to { transform: rotate(360deg); }
}
.ac-btn.is-esperando {
  pointer-events: none;
  opacity: 0.75;
}

/* ========================================================================
   8. Consideraciones
   ======================================================================== */

.pnu-consideraciones {
  max-width: 82ch;
}
.pnu-consideraciones__titulo {
  font-family: 'Archivo', 'Rubik', sans-serif;
  font-weight: 600;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ac-tinta);
  text-wrap: balance;
  margin: 0 0 1.5rem;
}
.pnu-consideraciones__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ac-borde-claro);
}
.pnu-consideraciones__lista li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--ac-borde-claro);
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ac-tinta-2);
  text-wrap: pretty;
}
.pnu-consideraciones__lista strong {
  font-weight: 500;
  color: var(--ac-tinta);
}

/* ========================================================================
   9. Movimiento reducido
   Lo único que se anima aquí son entradas de UI y un girador; con la
   preferencia activa quedan quietos, y el girador se sustituye por su
   presencia estática (sigue diciendo "estoy trabajando").
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .pnu-spinner {
    animation-duration: 3s;
  }
  .pnu-aparece {
    animation: none;
  }
  .pnu-opcion,
  .pnu-eleccion__op,
  .pnu-btn-agregar,
  .pnu-adjunto__caja,
  .pnu-salto__flecha,
  .pnu-campo input,
  .pnu-campo select,
  .pnu-campo textarea {
    transition: none;
  }
}