/* ==================================================================
PRECIO DEL LEAD: EXPLICACION Y LOGICA (/partners/precio-del-lead)
24/09/2026
------------------------------------------------------------------
La hoja de la pagina del precio del aviso. Va aparte porque
estilos.css pasa de mil lineas y la regla es no engordarlo, igual
que bienvenidas.css. La carga la propia vista con un dentro
del cuerpo, que es HTML valido y la politica de seguridad admite
(es de esta casa).
LA REGLA DE SIEMPRE: se sube el ?v= de la vista cada vez que cambie
esta hoja, o quien ya entro sigue con la vieja.
LOS COLORES SON LOS DE LA CASA. La pagina lleva `.pv-portada`, asi
que hereda la paleta de las dos paginas de venta
(`body:has(.pv-portada)` en estilos.css): aqui solo se usan sus
variables, ningun color escrito a mano. Siguiendo la guia de
/diagram-design, UN acento por diagrama: el verde azulado de la
llamada (`--cta`), el mismo del boton "Darme de alta". El oro no se
usa nunca como letra (test_contraste.php).
LOS DIAGRAMAS SON SVG CON CLASES, sin style="": la politica de
seguridad los tiraria sin avisar. Estas reglas pintan formas y
letras dentro del SVG; las unidades son las del viewBox (360 de
ancho), y el SVG se estira al ancho de la caja.
================================================================== */
/* ---------- La caja de cada diagrama ------------------------------ */
.pl-figura {
max-width: 520px;
margin: 20px auto 28px;
padding: 16px 10px 12px;
background: var(--papel);
border: 1px solid var(--linea);
border-radius: var(--radio);
}
.pl-figura figcaption {
margin: 10px 6px 0;
font-size: 14px;
line-height: 1.45;
color: var(--tinta-poca);
text-align: center;
}
/* El SVG ocupa el ancho de la caja y conserva su proporcion. */
.pl-svg {
display: block;
width: 100%;
height: auto;
}
/* En un movil estrecho, menos margen: cada pixel de ancho es letra. */
@media (max-width: 420px) {
.pl-figura { padding: 12px 4px 10px; }
}
/* ---------- Las letras del diagrama ------------------------------- */
.pl-svg text {
font-family: var(--letra-sistema);
fill: var(--tinta);
}
/* La cifra grande: el numero que hay que leer primero. */
.pl-svg .pl-d-cifra { font-size: 19px; font-weight: 700; }
/* El rotulo: el nombre de cada barra o de cada caja. */
.pl-svg .pl-d-rotulo { font-size: 15px; font-weight: 600; }
/* El texto de dentro de una caja del diagrama de flujo. */
.pl-svg .pl-d-texto { font-size: 14px; font-weight: 400; }
/* La nota pequena: lo que acompana, no lo que manda. */
.pl-svg .pl-d-nota { font-size: 13.5px; font-weight: 400; fill: var(--tinta-poca); }
/* El texto del foco. El oscuro del verde azulado: 7 de contraste sobre
su fondo claro, y el normal (`--cta`) se queda para filos y flechas. */
.pl-svg .pl-d-foco-texto { fill: var(--cta-oscuro); }
/* ---------- Las formas -------------------------------------------- */
/* Los totales (precio base, lo que pagas): lo mas pesado despues del foco. */
.pl-d-total {
fill: var(--azul-claro);
stroke: var(--azul);
stroke-width: 1;
}
/* El foco: UNO por diagrama, lo que el dibujo existe para ensenar. */
.pl-d-foco {
fill: var(--cta-fondo);
stroke: var(--cta);
stroke-width: 1.5;
}
/* Lo que pagas en el mes, lleno: se lee como "esto sale de tu bolsillo". */
.pl-d-pagas {
fill: var(--azul);
}
/* Las cajas normales del diagrama de flujo y de las fichas. */
.pl-d-caja {
fill: var(--papel);
stroke: var(--tinta);
stroke-width: 1;
}
.pl-d-caja-suave {
fill: var(--papel);
stroke: var(--linea-fuerte);
stroke-width: 1;
}
/* Trazo punteado: lo que no se paga (el ahorro) o lo que sobra. */
.pl-d-rayas {
stroke-dasharray: 5 4;
}
/* ---------- Las lineas -------------------------------------------- */
/* La linea del suelo de la cascada. */
.pl-d-base {
stroke: var(--linea-fuerte);
stroke-width: 1;
}
/* El arrastre: lleva el total de una barra a la siguiente. */
.pl-d-arrastre {
stroke: var(--tinta-poca);
stroke-width: 1;
stroke-dasharray: 3 3;
}
/* Las flechas del diagrama de flujo, en angulo recto. */
.pl-d-linea {
fill: none;
stroke: var(--tinta-poca);
stroke-width: 1.2;
}
.pl-d-linea-foco {
stroke: var(--cta);
}
/* Las puntas de flecha: van dentro de y se pintan igual. */
.pl-d-punta { fill: var(--tinta-poca); }
.pl-d-punta-foco { fill: var(--cta); }
/* Las llaves que agrupan fichas en el pictograma. */
.pl-d-llave {
fill: none;
stroke: var(--tinta-poca);
stroke-width: 1.2;
}
.pl-d-llave-foco {
stroke: var(--cta);
}
/* ---------- La factura de ejemplo --------------------------------- */
/* Parece un papel: fondo blanco, filo fino, sin sombra. Y cabe en un
movil sin partirse: son dos columnas, concepto e importe. */
.pl-factura {
max-width: 520px;
margin: 16px auto 20px;
padding: 16px 18px 14px;
background: var(--papel);
border: 1px solid var(--linea-fuerte);
border-radius: var(--radio);
}
.pl-factura-rotulo {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--tinta-poca);
}
.pl-factura-tabla {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.pl-factura-tabla th,
.pl-factura-tabla td {
padding: 7px 0;
border-bottom: 1px solid var(--linea);
}
.pl-factura-tabla th {
font-weight: 400;
text-align: left;
}
.pl-factura-tabla td {
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.pl-factura-descuento th,
.pl-factura-descuento td {
color: var(--cta-oscuro);
font-weight: 600;
}
.pl-factura-total th,
.pl-factura-total td {
border-bottom: 0;
font-weight: 700;
}
/* La frase de la factura, tal cual. Un filo a la izquierda para que se
lea como lo que es: una cita del papel. */
.pl-factura-frase {
margin: 12px 0 0;
padding: 10px 12px;
border-left: 3px solid var(--cta);
background: var(--cta-fondo);
font-size: 14.5px;
line-height: 1.5;
color: var(--tinta);
}