/**
 * Precios — de qué se compone el número, contado en dinero.
 *
 * La página tiene una sola idea: el precio no es una tarifa escondida, es una
 * suma que se muestra. Tres escenas la sostienen: las piezas que se funden en
 * una sola barra —la propuesta—, el recibo de un solo trabajo con su costo en
 * dinero, y la barra de gasto que se frena contra la marca del tope.
 *
 * El vocabulario común vive en `escenas.css`; acá quedan las composiciones y
 * las animaciones que este relato pidió y ninguna otra página tenía: una pieza
 * que baja, un segmento que se suma y un gasto que se frena donde se le dijo.
 *
 * Ni un monto dentro de la barra de la portada: los anchos cambian con cada
 * operación, y ponerles número sería publicar la tabla que la página dice que
 * no existe. Los montos van donde son verdad: en el recibo y en el tope.
 *
 * Las animaciones van en longhand, nunca con el atajo `animation:`. El atajo
 * reinicia `animation-delay`, y el escalonado por `data-paso` de `escenas.css`
 * —que se carga antes— vive justo en esa propiedad.
 */

/* --- 1 · Portada: tres piezas se vuelven una barra --------------------------
   Tres tarjetas con nombre arriba, un hilo que baja de cada una, y una sola
   barra continua con los mismos tres tintes. El chip de abajo es el resultado.
   Todo cuelga del flujo normal —grid, no porcentajes—: los hilos se alinean
   solos con el centro de su columna porque comparten la misma grilla. */

.precio-suma {
  margin-top: clamp(40px, 6vh, 72px);
  padding: clamp(30px, 4vw, 60px) clamp(20px, 4vw, 64px);
}

.precio-compo {
  display: grid;
  max-width: 1040px;
  margin-inline: auto;
}

.precio-fuentes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

/* El marcador de cada pieza es un cuadradito con el tinte de su segmento: la
   tarjeta y su porción de barra se reconocen por el mismo color, y el nombre
   escrito hace el resto —el color solo nunca carga el significado—. */
.precio-pieza small { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.precio-pieza small i { width: 10px; height: 10px; flex: none; border-radius: 3px; }

.precio-pieza--plataforma small i { background: var(--violet); }
.precio-pieza--consumo small i { background: var(--cian); }
.precio-pieza--servicio small i { background: var(--violet-soft); }

.precio-hilos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  height: 34px;
  margin-block: 4px;
}

.precio-hilos i {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, rgba(124, 58, 237, .05), rgba(124, 58, 237, .45));
  transform-origin: top center;
}

.precio-barra {
  display: flex;
  height: clamp(42px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 44px rgba(76, 29, 149, .16);
}

/* Los anchos son un ejemplo, no una tarifa: la plataforma manda, el consumo
   escolta y el servicio completa. Cada segmento crece desde la izquierda,
   como se suma. */
.precio-seg {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform-origin: left center;
}

.precio-seg--plataforma { width: 46%; background: linear-gradient(150deg, #8b5cf6, var(--violet-deep)); }
.precio-seg--consumo { width: 32%; background: linear-gradient(150deg, #0ea5c9, #0e7490); }
.precio-seg--servicio { width: 22%; color: var(--tinta); background: linear-gradient(150deg, #c4b5fd, var(--violet-soft)); }

.precio-propuesta { justify-self: center; margin-top: 18px; }

/* --- 2 · Las tres cartas -----------------------------------------------------
   Tres columnas parejas a propósito: en el precio ninguna pieza es la letra
   chica de otra. El tinte de cada carta repite el de su segmento en la
   portada; la lista de adentro es lo que esa pieza cubre, no una promesa. */

.precio-piezas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.precio-carta {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--radio-shell);
  background: var(--panel);
  box-shadow: var(--brillo-canto), 0 14px 40px rgba(76, 29, 149, .07);
}

.precio-carta--plataforma { background: radial-gradient(ellipse 90% 70% at 15% 0%, rgba(167, 139, 250, .24), transparent 70%), var(--panel); }
.precio-carta--consumo { background: radial-gradient(ellipse 90% 70% at 85% 0%, rgba(8, 145, 178, .1), transparent 72%), var(--panel); }
.precio-carta--servicio { background: radial-gradient(ellipse 90% 70% at 50% 100%, rgba(167, 139, 250, .1), transparent 72%), var(--panel); }

.precio-carta-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.precio-carta-rotulo i { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.precio-carta--plataforma .precio-carta-rotulo i { background: var(--violet); }
.precio-carta--consumo .precio-carta-rotulo i { background: var(--cian); }
.precio-carta--servicio .precio-carta-rotulo i { background: var(--violet-soft); }

.precio-carta h3 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); font-weight: 650; letter-spacing: -.03em; }
.precio-carta > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }

.precio-carta ul { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.precio-carta li {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--tinta-suave);
  font-size: 13.5px;
  line-height: 1.55;
}

/* --- 3 · El recibo de un trabajo ---------------------------------------------
   La versión comercial de la traza: una sola ejecución, línea por línea, y
   cada línea con su costo en dinero. La traza completa —firmas, hallazgos,
   versiones— vive en Seguridad; acá solo importa lo que costó. */

.precio-registro {
  display: grid;
  justify-items: center;
  padding: clamp(30px, 4vw, 60px) clamp(18px, 3vw, 40px);
}

.precio-recibo {
  width: min(100%, 620px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 36px);
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: var(--radio-nucleo);
  background: var(--panel);
  box-shadow: var(--brillo-canto), var(--shadow-1);
}

.precio-recibo-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.precio-recibo-cab small {
  display: block;
  margin-bottom: 4px;
  color: var(--rotulo);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.precio-recibo-cab b { font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; }

.precio-lineas { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }

.precio-lineas li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line-soft);
  color: var(--tinta-suave);
  font-size: 13.5px;
  line-height: 1.5;
}

/* El total ya trae su propia raya arriba: dos separadores pegados leen como
   un error de imprenta. */
.precio-lineas li:last-child { border-bottom: 0; }

/* Los montos en columna tabular: un recibo donde las cifras bailan de ancho
   deja de leerse como recibo. */
.precio-lineas b,
.precio-total b { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.precio-lineas b { font-size: 13.5px; font-weight: 650; color: var(--tinta); }

.precio-punto {
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

.precio-punto--dato { background: var(--cian); box-shadow: 0 0 0 3px rgba(8, 145, 178, .12); }
/* La aprobación humana se marca con un hueco —no la hizo un agente— y cuesta
   cero: decidir no consume nada, y que se vea es parte del argumento. */
.precio-punto--humano { background: var(--panel); border: 2px solid var(--violet); box-shadow: 0 0 0 3px rgba(124, 58, 237, .1); }

.precio-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.precio-total span { font-size: 14px; font-weight: 640; letter-spacing: -.015em; }
.precio-total b { font-size: clamp(20px, 2vw, 25px); font-weight: 680; color: var(--tinta); }

.precio-nota {
  max-width: 52ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

/* Dentro de la nota, el enlace es texto corrido: sin la altura tocable de
   48 px, que en una línea de 13,5 px descuadra el renglón entero. */
.precio-nota .text-link { min-height: 0; padding: 0; color: var(--violet-deep); font-size: inherit; }

/* --- 4 · El tope: una barra que se frena -------------------------------------
   La marca del tope está puesta desde antes de que la barra arranque: primero
   el límite, después el gasto. La barra crece y se detiene exactamente en la
   marca; lo que queda a la derecha es el gasto que no va a ocurrir. */

.precio-tope-escena { padding: clamp(30px, 4.4vw, 64px) clamp(22px, 4vw, 64px); }

.precio-tope-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(34px, 4.6vh, 52px);
}

.precio-tope-cab b { font-variant-numeric: tabular-nums; }

.precio-pista-zona { position: relative; padding: 44px 0 56px; }

.precio-pista {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(30, 27, 75, .07);
  box-shadow: inset 0 1px 2px rgba(30, 27, 75, .08);
}

.precio-gasto {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--violet-soft), var(--violet));
  box-shadow: 0 6px 18px rgba(124, 58, 237, .35);
  transform-origin: left center;
}

/* La marca es tinta, no violeta: el límite lo puso una persona, no un agente,
   y se distingue de todo lo que corre por la pista. */
.precio-limite {
  position: absolute;
  left: 72%;
  top: 0;
  /* Por encima de la pista: la pista es `relative` y llega después en el
     documento, así que sin esto pintaría su relleno sobre la mitad del palo. */
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 5px;
  translate: -50% 0;
}

.precio-limite b {
  color: var(--tinta);
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: .06em;
  white-space: nowrap;
}

.precio-limite i {
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: var(--tinta);
}

/* El cero vive colgado de la pista, no de la zona: así queda siempre debajo
   del arranque de la barra, se recomponga lo que se recomponga. */
.precio-cero {
  position: absolute;
  left: 2px;
  top: calc(100% + 8px);
  color: var(--rotulo);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* La palabra al lado de la marca. El glifo de pausa —dos barritas— se dibuja
   con un degradado: es un estado, no una alarma. */
.precio-freno {
  position: absolute;
  left: 72%;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 14px;
  color: var(--violet-deep);
  font-size: 12.5px;
  font-weight: 620;
  white-space: nowrap;
}

.precio-freno i {
  width: 8px;
  height: 11px;
  flex: none;
  border-radius: 1px;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}

/* --- 5 · El puente honesto ---------------------------------------------------
   La declaración de por qué no hay una tabla de precios, y la única puerta a
   Seguridad. Menos relleno vertical que una sección plena: es una bisagra
   entre el argumento y el pedido, no un capítulo. */

.precio-honesto { padding-block: clamp(24px, 5vh, 64px); }

.precio-declara {
  max-width: 800px;
  margin: 0 auto;
  color: var(--tinta-suave);
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 620;
  letter-spacing: -.03em;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.precio-honesto-nexo { margin: 18px 0 0; text-align: center; }

/* --- Movimiento propio de esta página ---------------------------------------
   Tres piezas que `escenas.css` no tenía: el hilo que baja, el segmento que
   se suma y el gasto que se carga hasta frenar. El retardo de casi todo lo
   pone `data-paso`; el chip de la propuesta y la señal del freno esperan a
   mano, porque llegan después del último paso del escalonado común. */

.visto .precio-hilos i {
  animation-name: precio-baja;
  animation-duration: .5s;
  animation-timing-function: var(--curva);
  animation-fill-mode: both;
}

.visto .precio-seg {
  animation-name: precio-crece;
  animation-duration: .6s;
  animation-timing-function: var(--curva);
  animation-fill-mode: both;
}

.visto .precio-propuesta { animation-delay: 2s; }

.visto .precio-gasto {
  animation-name: precio-crece;
  animation-duration: 1s;
  animation-timing-function: var(--curva);
  animation-fill-mode: both;
  animation-delay: .45s;
}

/* El golpecito de la marca cuando el gasto llega: la barra no se desvanece,
   choca contra algo que estaba puesto desde antes. */
.visto .precio-limite i {
  animation-name: precio-golpe;
  animation-duration: .5s;
  animation-timing-function: var(--curva);
  animation-fill-mode: both;
  animation-delay: 1.35s;
}

.visto .precio-freno { animation-delay: 1.5s; }

@keyframes precio-baja {
  from { transform: scaleY(0); }
}

@keyframes precio-crece {
  from { transform: scaleX(0); }
}

@keyframes precio-golpe {
  40% { transform: scaleY(1.16); box-shadow: 0 0 0 4px rgba(30, 27, 75, .1); }
}

/* Cinturón y tirantes, igual que en `escenas.css`: si `.visto` llegara con el
   sistema pidiendo quietud, una animación frenada dejaría la barra clavada en
   su primer cuadro —vacía—. Apagarlas devuelve la escena a su estado por
   defecto, que es el final. */
@media (prefers-reduced-motion: reduce) {
  .visto .precio-hilos i,
  .visto .precio-seg,
  .visto .precio-gasto,
  .visto .precio-limite i { animation: none; }
}

/* --- Escalas -----------------------------------------------------------------
   En angosto cada escena **se recompone**. Las tres piezas de la portada se
   apilan y los hilos se retiran —tres hilos sobre una pila mentirían el
   orden—; la barra conserva sus tres segmentos con el nombre más chico; las
   cartas pasan a una columna; y la señal del freno baja debajo de la pista,
   donde hay lugar para leerla entera. */

@media (max-width: 900px) {
  .precio-piezas { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .esc { border-radius: 26px; }

  .precio-fuentes { grid-template-columns: 1fr; gap: 10px; }
  .precio-hilos { display: none; }
  .precio-barra { margin-top: 18px; }
  /* El segmento más angosto —Servicio, 22 %— mide unos 55 px en un teléfono:
     el nombre entra con este cuerpo y este tracking, y no con más. */
  .precio-seg { font-size: 9px; letter-spacing: .05em; }

  .precio-registro { padding: clamp(22px, 5vw, 36px) clamp(16px, 4vw, 28px); }
  .precio-lineas li { gap: 11px; font-size: 12.5px; }
  .precio-lineas b { font-size: 12.5px; }

  .precio-tope-escena { padding: clamp(24px, 5vw, 40px) clamp(18px, 4vw, 28px); }
  .precio-pista-zona { padding-bottom: 0; }
  .precio-freno { position: static; margin: 20px 0 0; }
  /* En angosto la señal del freno ocupa el renglón de abajo entero; el cero
     le cedería el lugar o se le montaría encima. Se retira: la pista vacía a
     la izquierda ya dice dónde arranca. */
  .precio-cero { display: none; }
}

/* --- Preguntas frecuentes ----------------------------------------------------
   Un acordeón sobrio: la pregunta es un renglón con el quevrón del sistema
   escondido y un más propio que rota al abrir. Nada de tarjetas: es lectura. */

.precio-faq .faq-lista {
  max-width: 720px;
  margin: 0 auto;
  border-top: 1px solid var(--linea, rgba(47, 32, 88, .12));
}

.faq-item { border-bottom: 1px solid var(--linea, rgba(47, 32, 88, .12)); }

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 2px;
  list-style: none;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 590;
  color: var(--tinta);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--violet);
  font-weight: 500;
  transition: rotate .25s ease;
}

.faq-item[open] summary::after { rotate: 45deg; }

.faq-item > p {
  margin: 0;
  padding: 0 2px 20px;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.65;
}