/* ══════════════════════════════════════════════════════════════════════════
   precios.css — «Cuánto cuesta». Sólo lo que es de ESTA página.

   Se monta sobre `caliber.css` (tokens y clases base) y sobre `puertas.css`,
   de donde vienen `--t0`, el revelado `.pu-rev` / `.pu-asienta`, el desplegable
   `.pu-mas` y la franja de cifras. Duplicar aquí cualquiera de esas cuatro sería
   fabricar la copia que la cabecera acaba de dejar de tener.

   LAS TRES REGLAS DE LA CASA, QUE AQUÍ APRIETAN MÁS QUE EN OTRAS PÁGINAS
   ─────────────────────────────────────────────────────────────────────
   1. TODO A LA IZQUIERDA. Una tabla de precios centrada se lee a plantilla de
      SaaS, que es exactamente lo que este sitio no es.
   2. UN SOLO PESO (400) Y SEIS TAMAÑOS + `--t0`. La cifra manda por TAMAÑO y
      por TONO, nunca por negrita ni por color de acento.
   3. NI UNA TARJETA CON BORDE DE 1 px. Tres columnas iguales enmarcadas es el
      patrón de precios más repetido de internet y está en la lista negra del
      director. Aquí la densidad la dan el filete, el tono y el aire.
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 EL ANCHO SE TOPA CON `padding-inline`, NUNCA CON `max-width` EN LA SECCIÓN.
   Estas secciones llevan su propio fondo (`data-cuerpo`, `data-niebla`): al
   caparlas con `max-width` dejan de ser página y se convierten en un rectángulo
   con canto visible a los lados. Ya lo cazó paco en `/proceso`. */
.pc-abre, .pc-escala, .pc-niveles, .pc-mueve, .pc-fuera, .pc-pago,
.pc-prueba, .pc-faq, .pc-cierre{
  padding-inline: max(1.5rem, (100% - 80rem) / 2);
}

/* ── P0 · LA APERTURA ─────────────────────────────────────────────────────
   El titular al séptimo escalón y el texto de apoyo en DOS columnas debajo, no
   en una sola de 75 caracteres: bajo un titular de 104 px una columna sola deja
   la mitad derecha del cuadro vacía y la apertura se lee rota. */
.pc-abre{ padding-block: clamp(7rem, 22vh, 12rem) clamp(3rem, 8vh, 5rem); }
.pc-abre__t{
  font-size: var(--t0); line-height: 1.0; letter-spacing: -.035em;
  color: var(--osc-1); margin: .5rem 0 0; max-width: 20ch;
  text-wrap: balance;
}
.pc-abre__pie{
  display: grid; grid-template-columns: repeat(2, minmax(0, 28ch));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 6vh, 3.5rem);
}
.pc-abre__pie .parrafo{ max-width: none; margin: 0; }
@media (max-width: 720px){
  .pc-abre__pie{ grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ══ P1 · LA REGLA ════════════════════════════════════════════════════════
   🔴 LAS CIFRAS DEL CSS SON PESOS, NO PORCENTAJES. La posición sale de
   `calc(var(--de) / 45000 * 100%)`, así que editar un precio en el HTML mueve
   la barra sola. Un porcentaje precalculado es una mentira esperando a que
   alguien cambie el número y se olvide de la barra — y el error sería invisible.

   Las tres columnas se declaran UNA vez en variables porque el eje de abajo
   tiene que alinearse con la pista, y si se escriben dos veces se desalinean
   a la primera edición. */
.pc-escala{ padding-block: clamp(3rem, 8vh, 6rem); }
.pc-regla{
  --tope: 45000;            /* el techo del eje = el techo del escalón más caro */
  --col-n: 15rem;           /* nombre */
  --col-r: 7.5rem;          /* rango */
  --sep: 1.25rem;
  margin-top: clamp(1.8rem, 5vh, 3rem);
}
/* 🔴 EL DIBUJO ES UN CALIBRE, Y NO ES UN CAPRICHO: ES EL NOMBRE DEL ESTUDIO.
   La primera versión eran cinco rieles rellenos de gris con una barra gorda
   encima, y el problema no era el color: los rieles PESABAN MÁS que el dato.
   Cinco rectángulos macizos apilados leen a gráfica de plantilla, y de paso el
   ojo tiene que decidir cuál de los dos grises mirar.
   Ahora cada renglón es una línea de 1 px con un tramo encendido y DOS
   MORDAZAS —los dos filetes verticales de los extremos—, que es como un calibre
   marca una medida. El dato deja de ser un bulto y pasa a ser una lectura.

   Las mordazas salen de `border-left`/`border-right` del MISMO pseudoelemento
   que pinta el tramo: el elemento mide 14 px de alto (las mordazas), y la banda
   luminosa se pinta como un fondo de 3 px centrado. Un solo nodo, cero HTML de
   más — que era la otra opción y habría metido dos `<span>` vacíos por fila. */
.pc-regla{ position: relative; }
/* Las guías verticales de 10 en 10 mil, detrás de todo. Sin ellas hay que bajar
   la vista al eje para saber dónde cae cada extremo, y bajar la vista es
   exactamente el trabajo que esta pieza viene a ahorrar.
   `repeating-linear-gradient` a 22.222% = 10k de 45k: las guías caen SOLAS
   donde el eje pone su número, sin una segunda lista que mantener. */
.pc-regla::before{
  content: ''; position: absolute; z-index: 0;
  inset-block: 0 1.95rem;
  inset-inline: calc(var(--col-n) + var(--sep)) calc(var(--col-r) + var(--sep));
  background: repeating-linear-gradient(to right,
              rgba(255,255,255,.055) 0 1px, transparent 1px 22.2222%);
  pointer-events: none;
}
.pc-regla__filas{
  list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem;
  position: relative; z-index: 1;
}
.pc-barra{
  display: grid;
  grid-template-columns: var(--col-n) minmax(0,1fr) var(--col-r);
  align-items: center; gap: var(--sep);
}
.pc-barra__n{
  font-size: var(--t5); color: var(--osc-3);
  transition: color var(--lento) var(--curva);
}
/* El precio pesa más que el nombre: es lo que se viene a buscar. Un escalón de
   tono, no de tamaño ni de peso. */
.pc-barra__r{
  font-size: var(--t5); color: var(--osc-2); text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color var(--lento) var(--curva);
}
/* El riel: UN FILETE, no una barra. De extremo a extremo, para que se vea dónde
   NO llega cada escalón — sin él, un tramo corto parece un error de maqueta. */
/* El renglón respira: a 2.6rem las cinco medidas se apelotonaban y la pieza se
   leía como una nota al pie de la sección. A 3.4 es un instrumento. */
.pc-barra__t{ position: relative; block-size: 3.4rem; }
.pc-barra__t::before{
  content: ''; position: absolute; inset-inline: 0; top: 50%;
  block-size: 1px; translate: 0 -50%;
  background: rgba(255,255,255,.085);
}
/* El tramo medido, con sus dos mordazas. */
.pc-barra__t::after{
  content: ''; position: absolute; top: 50%;
  left:  calc(var(--de) / var(--tope) * 100%);
  width: calc((var(--a) - var(--de)) / var(--tope) * 100%);
  block-size: 16px; translate: 0 -50%;
  border-left:  1px solid var(--acento);
  border-right: 1px solid var(--acento);
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--acento) 55%, transparent),
      var(--acento))
    center / 100% 3px no-repeat;
  /* 🔴 EL HALO VA CON `drop-shadow`, NO CON `box-shadow`. `box-shadow` dibuja la
     sombra de la CAJA —16 px de alto— y saldría un rectángulo borroso detrás de
     una línea de 3 px. `drop-shadow` sigue el alfa de lo REALMENTE pintado, así
     que el resplandor abraza la banda y las dos mordazas y nada más. Es el mismo
     idioma del hero: luz sobre materia, no un objeto con sombra. */
  filter: drop-shadow(0 0 7px color-mix(in oklab, var(--acento) 30%, transparent));
  transform-origin: left center;
  transition: background-size var(--lento) var(--curva),
              border-color var(--lento) var(--curva),
              block-size var(--lento) var(--curva);
}
/* El crecimiento va escalonado: las cinco barras saliendo a la vez se leen como
   un parpadeo, en cascada se leen como una escala. `scaleX` y nada más —
   animar `width` sería maquetación por cuadro. */
.pc-regla[data-visto] .pc-barra__t::after{
  animation: pc-crece .85s var(--curva) both;
}
.pc-regla[data-visto] .pc-barra:nth-child(2) .pc-barra__t::after{ animation-delay: .09s }
.pc-regla[data-visto] .pc-barra:nth-child(3) .pc-barra__t::after{ animation-delay: .18s }
.pc-regla[data-visto] .pc-barra:nth-child(4) .pc-barra__t::after{ animation-delay: .27s }
.pc-regla[data-visto] .pc-barra:nth-child(5) .pc-barra__t::after{ animation-delay: .36s }
@keyframes pc-crece{ from{ scale: 0 1 } to{ scale: 1 1 } }

/* 🔴 EL FOCO NO SE HACE APAGANDO LA FILA ENTERA. Antes bajaba a `opacity:.38`
   todo el renglón —nombre y precio incluidos— y eso APAGA JUSTO LA COMPARACIÓN,
   que es lo único que la pieza sirve: en cuanto pasabas el cursor dejabas de
   poder comparar con las otras cuatro. Ahora los textos SUBEN de tono en la fila
   activa y las demás se quedan legibles; lo que se atenúa es sólo el tramo.
   Es la regla de la casa aplicada a un gráfico: la jerarquía es de TONO. */
@media (hover: hover){
  .pc-regla__filas:hover .pc-barra__t::after{
    border-color: color-mix(in oklab, var(--acento) 30%, transparent);
    background-size: 100% 1px;
    filter: none;                     /* el halo se apaga en las que no se leen */
  }
  .pc-barra:hover .pc-barra__n,
  .pc-barra:hover .pc-barra__r{ color: var(--osc-1) }
  /* La fila viva recupera su grosor y estira las mordazas: el gesto de un
     calibre cerrándose sobre la medida. */
  .pc-regla__filas .pc-barra:hover .pc-barra__t::after{
    border-color: var(--acento-vivo);
    background-size: 100% 3px;
    block-size: 22px;
    filter: drop-shadow(0 0 12px color-mix(in oklab, var(--acento) 55%, transparent));
  }
}

/* El eje. Se alinea con la pista restando las columnas de los lados: por eso
   `--col-n` y `--col-r` viven en el padre y no escritas dos veces. */
.pc-regla__eje{
  position: relative; block-size: 1.4rem; margin: .55rem 0 0;
  margin-inline: calc(var(--col-n) + var(--sep)) calc(var(--col-r) + var(--sep));
  border-top: 1px solid var(--linea-osc);
}
.pc-regla__eje span{
  position: absolute; top: .5rem;
  left: calc(var(--x) / var(--tope) * 100%);
  translate: -50% 0;
  font-size: var(--t6); color: var(--osc-3);
  font-variant-numeric: tabular-nums;
}
/* La marquita que cuelga del eje. Sin ella el número flota y el eje es una raya
   con cifras debajo; con ella el eje se lee como la graduación de una regla, que
   es lo que es. 4 px: lo justo para que exista y no compita. */
.pc-regla__eje span::before{
  content: ''; position: absolute; top: -.5rem; left: 50%;
  inline-size: 1px; block-size: 4px; background: rgba(255,255,255,.22);
}
.pc-regla__eje span:first-child::before{ left: 0 }
.pc-regla__eje span:last-child::before{ left: auto; right: 0 }
/* El primero y el último se pegan a su extremo: centrados se salen del cuadro.
   Y el último es 45k y no 40k a propósito: sin él, la barra de «Sistema» llega
   hasta el borde y el eje se queda en 40 — el ojo no sabe dónde termina la
   regla, que es justo lo único que esta pieza tiene que dejar claro. */
.pc-regla__eje span:first-child{ translate: 0 0 }
.pc-regla__eje span:last-child{ translate: -100% 0 }

.pc-nota{
  font-size: var(--t6); color: var(--osc-3); line-height: 1.55;
  max-width: 62ch; margin: clamp(1.5rem, 4vh, 2.4rem) 0 0;
}

@media (max-width: 860px){
  /* En teléfono el nombre y el rango van en un renglón y la pista debajo, a
     todo el ancho: con tres columnas de 15rem la pista se queda en 60 px y la
     comparación —que es el único trabajo de esta pieza— deja de verse. */
  .pc-regla{ --col-n: 0px; --col-r: 0px; --sep: 0px }
  .pc-barra{
    grid-template-columns: 1fr auto; gap: .3rem .8rem;
    padding-block: .35rem;
  }
  /* 🔴 LA FILA SE COLOCA EXPLÍCITAMENTE, LAS TRES. Con sólo las columnas puestas,
     la rejilla automática mandaba por ORDEN DEL CÓDIGO: la pista es el segundo
     hijo y ocupa las dos columnas, así que empujaba el rango a un tercer renglón
     y el precio quedaba debajo de su propia barra, huérfano. Se veía casi bien
     —que es lo peor— y rompía la lectura «nombre … precio» de un vistazo. */
  .pc-barra__n{ grid-column: 1; grid-row: 1; color: var(--osc-2) }
  .pc-barra__r{ grid-column: 2; grid-row: 1; color: var(--osc-1) }
  .pc-barra__t{ grid-column: 1 / -1; grid-row: 2; block-size: 1.9rem }
  .pc-regla__filas{ gap: .9rem }
  .pc-regla__eje{ margin-inline: 0 }
  /* Las guías van a todo el ancho porque en teléfono la pista también. Y el
     hueco de abajo crece: el eje es el mismo, pero el último renglón ya no
     termina donde terminaba. */
  .pc-regla::before{ inset-inline: 0 }
  /* Sin cursor no hay foco que dar, así que el tramo nace ya a tono pleno: en
     teléfono la versión «apagada» sería el único estado que se ve nunca. */
  .pc-barra__t::after{ border-color: var(--acento) }
}

/* En teléfono el «40k» y el «45k» se tocan: a 342 px de pista sus cajas se
   solapan 4 px y se leen como «40k45k». Se calla el 40k y se queda el tope, que
   es el que dice dónde termina la regla. La GUÍA vertical sigue ahí: sale del
   degradado repetido, no de esta lista. */
@media (max-width: 560px){
  .pc-regla__eje span:nth-child(5){ display: none }
}

/* ══ P2 · LOS CINCO ESCALONES ═════════════════════════════════════════════
   Filas, no tarjetas. La cifra es lo más grande de cada fila porque es lo que
   se viene a buscar; el nombre va debajo y en menos tono. */
.pc-niveles{ padding-block: clamp(3rem, 8vh, 6rem); }
.pc-lista{
  list-style: none; margin: clamp(1.8rem, 5vh, 3rem) 0 0; padding: 0;
  border-top: 1px solid var(--linea-osc);
}
.pc-nivel{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.6fr);
  gap: clamp(1.2rem, 4vw, 4rem);
  padding-block: clamp(2.2rem, 6vh, 3.6rem);
  border-bottom: 1px solid var(--linea-osc);
}
.pc-nivel__cab{ align-self: start; }
.pc-nivel__t{ font-size: var(--t3); color: var(--osc-2); margin: 0; line-height: 1.15 }
.pc-nivel__p{
  font-size: var(--t2); line-height: 1; letter-spacing: -.035em;
  color: var(--osc-1); margin: .5rem 0 .45rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pc-nivel__q{ font-size: var(--t6); color: var(--osc-3); margin: 0 }
.pc-nivel__cuerpo .parrafo{ margin: 0; color: var(--osc-2); max-width: 58ch }

/* La lista de lo que llevas, con la palomita DIBUJADA con dos filetes girados
   —el mismo gesto que `/proceso`— y anclada a la primera línea con `margin-top`
   en `em`: media línea menos media palomita. Con `align-items:center` se
   descoloca en cuanto un renglón se parte en dos. */
.pc-trae{ list-style: none; margin: 1.15rem 0 0; padding: 0; display: grid; gap: .5rem }
.pc-trae li{
  display: grid; grid-template-columns: 1rem 1fr; gap: .65rem; align-items: start;
  font-size: var(--t5); color: var(--osc-2); line-height: 1.45;
}
.pc-trae li::before{
  content: ''; inline-size: .62rem; block-size: .34rem;
  border-left: 1px solid var(--acento); border-bottom: 1px solid var(--acento);
  rotate: -45deg; margin-top: .48em;
}
.pc-sube{
  font-size: var(--t6); color: var(--osc-3); line-height: 1.5;
  margin: 1.15rem 0 0; max-width: 56ch;
}
.pc-sube span{ color: var(--acento) }

@media (max-width: 860px){
  .pc-nivel{ grid-template-columns: 1fr; gap: 1.1rem }
  .pc-nivel__p{ font-size: var(--t3) }
}

/* ══ P3 · QUÉ MUEVE EL PRECIO ═════════════════════════════════════════════
   Ocho, numeradas con `counter` porque el ORDEN es la información: están
   puestas de más a menos peso, y una lista sin números no lo dice. */
/* 🔴 UNA COLUMNA, NO DOS, Y EL MOTIVO NO ES ESTÉTICO: EL TITULAR DICE «EN ESTE
   ORDEN». En dos columnas se lee 01 → 02 saltando de lado a lado y luego se
   baja, así que la única información que esta lista añade —el RANGO, están
   puestas de más a menos peso— se pierde en el zigzag. Además ocho celdas
   iguales en rejilla leen a TABLA, y una tabla es lo que se pone cuando no hay
   nada que jerarquizar.
   En columna, el orden se lee bajando y cada renglón puede respirar.

   🔴 Y NO SE DIBUJA UNA BARRA DE «CUÁNTO PESA CADA UNA». Fue lo primero que
   pensé y es inventar evidencia: no tenemos medido cuánto sube el precio una
   plantilla más contra una ronda más. El rango se dice con TONO —01 al máximo,
   08 al mínimo— que afirma «están ordenadas» sin afirmar un número que no
   existe. Es la regla de la casa: la jerarquía es de tono. */
.pc-mueve{ padding-block: clamp(3rem, 8vh, 6rem); }
.pc-mueve__lista{
  list-style: none; counter-reset: mv; margin: clamp(1.8rem, 5vh, 3rem) 0 0; padding: 0;
  border-top: 1px solid var(--linea-osc);
}
.pc-mueve__lista li{
  counter-increment: mv;
  display: grid;
  /* ⚠️ LA COLUMNA DEL TÍTULO VA EN `rem`, NO EN `ch`. Estaba en 24ch y salía
     estrecha: `ch` se mide con el tamaño de letra del ELEMENTO QUE LO DECLARA
     —el `li`, a 17 px— y quien vive dentro es un título de 28. La columna
     quedaba calculada para una letra que ahí no existe, y la mitad de los
     títulos se partían en dos renglones. */
  grid-template-columns: 3.5rem minmax(0, 24rem) minmax(0, 1fr);
  gap: .3rem clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(1.3rem, 3.2vh, 2rem);
  border-bottom: 1px solid var(--linea-osc);
  transition: border-color var(--lento) var(--curva);
}
/* 🔴 LA RAMPA EXISTIA Y NO SE VEIA. El titular de la seccion promete «ocho
   cosas mueven el precio, EN ESTE ORDEN», y el orden estaba expresado — pero
   solo en el tono del numerito de 17 px, que es lo ultimo que mira nadie. Los
   ocho TITULOS, que son lo que se escanea, salian los ocho al mismo tono: la
   lista se leia como ocho renglones identicos y el «en este orden» quedaba
   como una afirmacion sin respaldo en la pagina.
   Ahora la rampa llega al titulo. Un solo `--peso` de 1 a 0 alimenta las dos
   rampas con `calc()`, asi que no hay dos listas de numeros que se
   desincronizan a la primera edicion — que es justo lo que la nota de abajo
   advertia y aun asi habria pasado al duplicarla.
   ⚠️ LAS DOS RAMPAS NO PUEDEN TENER EL MISMO PISO. El numero baja a .30 porque
   es mobiliario; un TITULO a .30 sobre tinta deja de leerse. El del titulo va
   de 1.0 a .60, que es el mismo suelo que `--tx-2` usa para la prosa de todo
   el sitio. La del numero sale identica a la de antes (0.78 → 0.30, ±0.001):
   ese renglon no cambia un pixel. */
.pc-mueve__lista li::before{
  content: counter(mv, decimal-leading-zero);
  font-size: var(--t5);
  color: rgba(237,239,243, calc(.30 + var(--peso, .5) * .48));
  font-variant-numeric: tabular-nums;
  transition: color var(--lento) var(--curva);
}
.pc-mueve__lista li:nth-child(1){ --peso: 1     }
.pc-mueve__lista li:nth-child(2){ --peso: .857  }
.pc-mueve__lista li:nth-child(3){ --peso: .714  }
.pc-mueve__lista li:nth-child(4){ --peso: .571  }
.pc-mueve__lista li:nth-child(5){ --peso: .429  }
.pc-mueve__lista li:nth-child(6){ --peso: .286  }
.pc-mueve__lista li:nth-child(7){ --peso: .143  }
.pc-mueve__lista li:nth-child(8){ --peso: 0     }

/* El título sube DOS escalones —de 17 a 28— porque en una lista de ocho es lo
   único que se escanea. La descripción baja de tono y se va a su columna: leer
   los ocho títulos de corrido tiene que poder hacerse sin tropezar con la
   letra chica. */
.pc-mueve__lista h3{
  margin: 0; font-size: var(--t3); line-height: 1.15; font-weight: 400;
  color: rgba(237,239,243, calc(.60 + var(--peso, .5) * .40)); text-wrap: balance;
  transition: color var(--lento) var(--curva);
}
.pc-mueve__lista p{
  margin: 0; font-size: var(--t5); color: var(--osc-3); line-height: 1.5;
  max-width: 54ch; transition: color var(--lento) var(--curva);
}
@media (hover: hover){
  .pc-mueve__lista li:hover{ border-bottom-color: rgba(255,255,255,.24) }
  .pc-mueve__lista li:hover::before{ color: var(--acento) }
  .pc-mueve__lista li:hover h3{ color: var(--osc-1) }
  .pc-mueve__lista li:hover p{ color: var(--osc-2) }
}
@media (max-width: 900px){
  /* El título vuelve encima de su texto: a 24ch de columna en una pantalla
     angosta los títulos se parten en tres renglones y la lista se descuadra. */
  .pc-mueve__lista li{ grid-template-columns: 3rem minmax(0,1fr) }
  .pc-mueve__lista li::before{ grid-row: 1 / span 2 }
  .pc-mueve__lista h3{ font-size: var(--t4) }
}

/* ══ P4 · LA FRONTERA ═════════════════════════════════════════════════════
   La marca es una raya, no una palomita: aquí lo que se dice es que NO entra, y
   usar el mismo signo que la lista de lo incluido invierte el sentido de un
   vistazo. */
.pc-fuera{ padding-block: clamp(3rem, 8vh, 6rem); }
.pc-fuera__lista{
  list-style: none; margin: clamp(1.8rem, 5vh, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: clamp(2rem, 6vw, 5rem);
}
.pc-fuera__lista li{
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .25rem 1rem;
  padding-block: 1.3rem; border-top: 1px solid var(--linea-osc);
}
.pc-fuera__lista li::before{
  content: ''; grid-row: 1 / span 2;
  inline-size: .8rem; block-size: 1px; background: var(--osc-3);
  margin-top: .72em;
}
.pc-fuera__lista h3{ margin: 0; font-size: var(--t5); color: var(--osc-1); font-weight: 400 }
.pc-fuera__lista p{ margin: 0; font-size: var(--t6); color: var(--osc-2); line-height: 1.55; max-width: 42ch }

/* ⚠️ Aquí estaba también `.pc-mueve__lista`, que ya no es una rejilla: al pasar
   a una columna la regla se quedó apuntando a nada. Un selector huérfano no
   falla, sólo miente sobre lo que hace el archivo. */
@media (max-width: 760px){
  .pc-fuera__lista{ grid-template-columns: 1fr }
}

/* ══ P5 · CÓMO SE PAGA + MANTENIMIENTO ════════════════════════════════════ */
.pc-pago{ padding-block: clamp(3rem, 8vh, 6rem); }
.pc-pago__rejilla{
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
}
.pc-pago__col .d3{ margin: .35rem 0 0; max-width: 20ch }
.pc-pasos{ list-style: none; margin: clamp(1.5rem,4vh,2.4rem) 0 0; padding: 0; display: grid; gap: 1.4rem }
.pc-pasos li{ display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start }
.pc-pasos__n{ font-size: var(--t6); color: var(--acento); font-variant-numeric: tabular-nums; padding-top: .2em }
.pc-pasos h3{ margin: 0 0 .2rem; font-size: var(--t5); color: var(--osc-1); font-weight: 400 }
.pc-pasos p{ margin: 0; font-size: var(--t6); color: var(--osc-2); line-height: 1.55; max-width: 44ch }

/* La cifra del mantenimiento va grande porque es un precio, pero un escalón por
   debajo de las de los proyectos: es un cargo recurrente y no la decisión
   principal de la página. */
.pc-mant{ margin: 1rem 0 .2rem; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap }
.pc-mant__c{
  font-size: var(--t3); letter-spacing: -.03em; color: var(--osc-1);
  font-variant-numeric: tabular-nums;
}
.pc-mant__u{ font-size: var(--t6); color: var(--osc-3) }
.pc-pago__col .pc-trae{ margin-top: 1rem }
.pc-pago__col .parrafo{ margin-top: 1.2rem; max-width: 40ch }

@media (max-width: 860px){
  .pc-pago__rejilla{ grid-template-columns: 1fr; gap: 3rem }
}

/* ══ P6 · LA PRUEBA ═══════════════════════════════════════════════════════
   La cifra sola y grande, con la frase al lado. Es el patrón de `#entrada` en
   la portada, reescrito aquí porque allá vive bajo un `#id` y no alcanza. */
.pc-prueba{ padding-block: clamp(3rem, 8vh, 6rem); }
/* Sin la cifra al lado —un «4» como número grande dice lo contrario de lo que
   se quiere decir— la caja deja de ser dos columnas y se vuelve una sola
   medida de lectura. */
.pc-prueba__caja{
  display: grid; grid-template-columns: minmax(0, 58ch);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
}
.pc-prueba__caja .cifra{
  font-size: clamp(4.5rem, 11vw, 7rem); line-height: .82; letter-spacing: -.05em;
  color: var(--acento); font-variant-numeric: tabular-nums;
}
.pc-prueba__caja p{ margin: 0; font-size: var(--t4); color: var(--osc-2); line-height: 1.5 }
.pc-prueba__caja b{ color: var(--osc-1); font-weight: 400 }
.pc-prueba__caja a{
  color: var(--osc-1); text-decoration: none;
  border-bottom: 1px solid var(--linea-osc);
  transition: border-color var(--base) var(--curva);
}
.pc-prueba__caja a:hover{ border-bottom-color: var(--acento) }
@media (max-width: 700px){
  .pc-prueba__caja{ grid-template-columns: 1fr; gap: .6rem }
}

/* ══ P8 · EL CIERRE ═══════════════════════════════════════════════════════ */
.pc-cierre{ padding-block: clamp(4rem, 12vh, 8rem); }
.pc-cierre .d2{ margin: .4rem 0 1rem }
.pc-cierre .pie__rutas{ margin-top: clamp(1.5rem, 4vh, 2.4rem) }

@media (prefers-reduced-motion: reduce){
  .pc-regla[data-visto] .pc-barra__t::after{ animation: none }
  .pc-barra{ transition: none }
}