/* ============================================================================
   TestPsicométrico — Pantallas comerciales públicas
   ----------------------------------------------------------------------------
   Precios, ficha del paquete, contratación y orden.

   Se carga DESPUÉS de inicio.css y se apoya en sus variables (--azul, --tinta,
   --linea, --radio…), así que no redefine ni un solo color: si mañana cambia la
   paleta de la marca, estas pantallas cambian solas.

   Antes este flujo usaba el tema del panel administrativo. El cliente empezaba
   en la portada y terminaba capturando su RFC en una pantalla con otra cara.
   ============================================================================ */

/* ------------------------------------------------------------------- avisos */
.aviso {
    padding: 13px 16px; border-radius: var(--radio); font-size: .95rem;
    margin-bottom: 18px; border: 1px solid;
}
/* El borde toma el color del texto y no un tinte claro: un borde de 1.4:1 no
   se ve, y estos avisos son los que le dicen al cliente que su cobro fallo. */
.aviso--alto  { background: var(--ambar-tenue); border-color: var(--ambar); color: var(--ambar); }
.aviso--bien  { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); }
.aviso strong { color: inherit; }

/* ------------------------------------------------------- carrusel de planes */
/*
   Las tarjetas crecen a lo ancho y no hacia abajo.

   Es desplazamiento NATIVO del navegador, no un carrusel de JavaScript. Eso
   importa por tres razones: funciona con el dedo y con el trackpad sin que
   nadie programe nada, funciona aunque el JS no cargue, y las cinco tarjetas
   siguen estando en el documento -no se ocultan- así que un lector de pantalla
   y el buscador las encuentran todas.

   Las flechas son un extra: nacen ocultas y el JS solo las muestra si de
   verdad hay algo fuera de la vista. Un botón que no lleva a ningún lado es
   peor que no tener botón.

   NUNCA avanza solo. Un carrusel que se mueve mientras alguien lee un precio
   es de las cosas que más molestan de una página.
*/
.carrusel { position: relative; }

.planes {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Arriba, sitio para la cinta del recomendado, que sobresale 11px; abajo,
       para la sombra del hover. Sin esto, overflow las recorta. */
    padding: 18px 2px 14px;
    scrollbar-width: thin;
    scrollbar-color: #b9cfe2 transparent;
    -webkit-overflow-scrolling: touch;
}
.planes::-webkit-scrollbar { height: 8px; }
.planes::-webkit-scrollbar-thumb { background: #b9cfe2; border-radius: 999px; }
.planes::-webkit-scrollbar-track { background: transparent; }

/* La franja se puede recorrer con el teclado, así que necesita foco visible. */
.planes:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: var(--radio); }

.plan {
    flex: 0 0 clamp(266px, 31%, 330px);
    scroll-snap-align: start;
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
    padding: 26px; display: flex; flex-direction: column; position: relative;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.plan:hover { border-color: #b9cfe2; box-shadow: var(--sombra); transform: translateY(-2px); }

@media (max-width: 640px) {
    /* En un teléfono casi llena la pantalla y se pasa con el dedo. */
    .plan { flex-basis: 82%; }
}

/* --- flechas ------------------------------------------------------------- */
.carrusel__flecha {
    position: absolute; top: 46%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; color: var(--azul);
    border: 1px solid #75899b;          /* 3.62:1 contra el blanco */
    box-shadow: var(--sombra); cursor: pointer;
    font-size: 1.5rem; line-height: 1; padding: 0 0 3px;
    transition: background .15s, border-color .15s, opacity .15s;
    z-index: 2;
}
.carrusel__flecha:hover { background: var(--azul-tenue); border-color: var(--azul); }
.carrusel__flecha:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.carrusel__flecha[disabled] { opacity: .32; cursor: default; box-shadow: none; }
/* display:grid gana sobre el atributo hidden, asi que hay que decirlo aparte.
   Sin esta linea, quien entra sin JavaScript ve dos botones que no hacen nada. */
.carrusel__flecha[hidden] { display: none; }
.carrusel__flecha--izq { left: -20px; }
.carrusel__flecha--der { right: -20px; }

@media (max-width: 1200px) {
    .carrusel__flecha--izq { left: 2px; }
    .carrusel__flecha--der { right: 2px; }
}
/* Con pantalla táctil sobran: se pasa con el dedo. */
@media (hover: none), (max-width: 640px) {
    .carrusel__flecha { display: none; }
}

/* Degradado que insinúa que hay más de ese lado. Lo enciende el JS. */
.carrusel::before, .carrusel::after {
    content: ""; position: absolute; top: 18px; bottom: 14px; width: 46px;
    pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1;
}
.carrusel::before { left: 0;  background: linear-gradient(to right, var(--fondo), transparent); }
.carrusel::after  { right: 0; background: linear-gradient(to left,  var(--fondo), transparent); }
.carrusel--mas-izq::before { opacity: 1; }
.carrusel--mas-der::after  { opacity: 1; }
/* Sobre fondo blanco el degradado tiene que ser blanco. */
.comercial .carrusel::before { background: linear-gradient(to right, #fff, transparent); }
.comercial .carrusel::after  { background: linear-gradient(to left,  #fff, transparent); }

/* Si alguien pidió menos movimiento, el salto es instantáneo. */
@media (prefers-reduced-motion: reduce) {
    .planes { scroll-behavior: auto; }
    .plan:hover { transform: none; }
}

/* El recomendado se distingue por borde y no solo por color, para que se note
   también en escala de grises y para quien no percibe bien el azul. */
.plan--destacado { border: 2px solid var(--azul); }
.plan__cinta {
    position: absolute; top: -11px; left: 26px;
    background: var(--azul); color: #fff; font-size: .74rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
}

.plan__nombre { font-size: 1.12rem; margin: 4px 0 2px; }
/* El resumen NO absorbe el espacio sobrante. Si lo hiciera, al abrir «Ver que
   incluye» en una tarjeta las vecinas creceran por el medio y quedaria un hueco
   entre la descripcion y la lista. Con margin-top:auto en las acciones, el
   espacio se junta justo encima de los botones, que es donde no molesta. */
.plan__resumen { color: var(--tinta-suave); font-size: .93rem; margin: 8px 0 18px; }

.plan__precio { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.plan__monto  { font-size: 2.2rem; font-weight: 700; line-height: 1.05; letter-spacing: -.5px; }
.plan__moneda { font-size: .9rem; color: var(--tinta-suave); font-weight: 600; }
.plan__iva    { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 18px; }
.plan__unitario { font-size: .85rem; color: var(--verde); font-weight: 600; margin-bottom: 18px; }

.plan__incluye { list-style: none; padding: 0; margin: 0 0 22px; }
.plan__incluye li {
    position: relative; padding-left: 24px; margin-bottom: 8px;
    font-size: .93rem; color: var(--tinta);
}
.plan__incluye li::before {
    content: ""; position: absolute; left: 3px; top: .42em;
    width: 11px; height: 6px; border-left: 2px solid var(--verde);
    border-bottom: 2px solid var(--verde); transform: rotate(-45deg);
}
.plan__acciones { display: grid; gap: 8px; margin-top: auto; }
.plan .boton { width: 100%; }

/* Pie de la seccion de precios de la portada. Estaba en estilos en linea; asi
   se puede ajustar sin volver a tocar la vista. */
.precios__pie {
    margin-top: 26px; font-size: .93rem; color: var(--tinta-suave); max-width: 52em;
}
.precios__pie a { color: var(--azul); font-weight: 600; white-space: nowrap; }

/* --- «Ver que incluye» dentro de la tarjeta ------------------------------ */
/* Es un <details> nativo: se abre sin JavaScript, el teclado lo alcanza solo y
   el lector de pantalla anuncia si esta abierto o cerrado. Nada de esto habria
   que programarlo, y por eso conviene no programarlo. */
.incluye { width: 100%; }
.incluye > summary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 22px; border-radius: var(--radio);
    font-weight: 600; font-size: .97rem; cursor: pointer;
    background: #fff; color: var(--azul); border: 1px solid #b9cfe2;
    list-style: none; text-align: center;
    transition: background .15s, border-color .15s;
}
.incluye > summary::-webkit-details-marker { display: none; }
.incluye > summary::marker { content: ""; }
.incluye > summary:hover { border-color: var(--azul); background: var(--azul-tenue); }
.incluye > summary:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.incluye > summary::after {
    content: "▾"; font-size: .8em; transition: transform .15s;
}
.incluye[open] > summary::after { transform: rotate(180deg); }
.incluye[open] > summary { border-color: var(--azul); background: var(--azul-tenue); }

.incluye__tabla { width: 100%; border-collapse: collapse; margin-top: 12px; }
.incluye__tabla th, .incluye__tabla td {
    padding: 8px 2px; font-size: .89rem; text-align: left;
    border-bottom: 1px solid var(--linea); font-weight: 400;
}
.incluye__tabla th { color: var(--tinta-suave); }
.incluye__tabla td { text-align: right; font-weight: 600; white-space: nowrap; }
.incluye__tabla tr:last-child th, .incluye__tabla tr:last-child td { border-bottom: 0; }

.incluye__ficha {
    display: inline-block; margin-top: 12px; font-size: .89rem;
    color: var(--azul); font-weight: 600;
}

/* ------------------------------------------------- cabecera de una pantalla */
.comercial { padding: 54px 0 78px; }
.comercial__cabeza { max-width: 46em; margin-bottom: 38px; }
.comercial__cabeza h1 { font-size: 2rem; letter-spacing: -.4px; margin-bottom: 10px; }
.comercial__cabeza p  { color: var(--tinta-suave); font-size: 1.04rem; margin-bottom: 0; }

.miga { font-size: .88rem; color: var(--tinta-suave); margin-bottom: 16px; }
.miga a { color: var(--azul); }

/* ---------------------------------------------------- contratación: 2 columnas */
.contrata { display: grid; gap: 30px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .contrata { grid-template-columns: 1fr; } }

.bloque {
    background: #fff; border: 1px solid var(--linea);
    border-radius: var(--radio-lg); padding: 26px;
}
.bloque + .bloque { margin-top: 20px; }
.bloque h2 { font-size: 1.12rem; margin: 0 0 4px; }
.bloque__nota { color: var(--tinta-suave); font-size: .9rem; margin: 0 0 20px; }

.campos { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos .campo--ancho { grid-column: 1 / -1; }
@media (max-width: 620px) { .campos { grid-template-columns: 1fr; } }

/* select y textarea copian el input de inicio.css, incluido el borde de 3:1 */
.campo select, .campo textarea {
    width: 100%; padding: 11px 13px; font-size: .97rem; font-family: inherit;
    color: var(--tinta); background: #fff;
    border: 1px solid #75899b; border-radius: var(--radio);
}
.campo select:focus, .campo textarea:focus {
    outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 85, 138, .16);
}
.campo__ayuda { font-size: .84rem; color: var(--tinta-suave); margin: 5px 0 0; }
.campo__error { font-size: .86rem; color: #9d2d2d; margin: 5px 0 0; font-weight: 600; }
.campo--mal input, .campo--mal select { border-color: #9d2d2d; }
.campo label .req { color: #9d2d2d; }

/* ------------------------------------------------------------- resumen fijo */
.resumen {
    background: #fff; border: 1px solid var(--linea);
    border-radius: var(--radio-lg); padding: 24px; position: sticky; top: 20px;
}
.resumen h2 { font-size: 1.05rem; margin: 0 0 16px; }
.resumen__renglon {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 9px 0; font-size: .95rem; border-bottom: 1px solid var(--linea);
}
.resumen__renglon:last-of-type { border-bottom: 0; }
.resumen__renglon span:first-child { color: var(--tinta-suave); }
.resumen__renglon strong { white-space: nowrap; }
.resumen__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--tinta);
}
.resumen__total strong { font-size: 1.5rem; letter-spacing: -.4px; }
.resumen__nota { font-size: .85rem; color: var(--tinta-suave); margin: 16px 0 0; }
.resumen .boton { width: 100%; margin-top: 18px; }

/* ------------------------------------------------------------------- orden */
.folio {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
    background: var(--azul-tenue); color: var(--azul);
    padding: 7px 14px; border-radius: var(--radio);
}
.estatus {
    display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
}
.estatus--espera  { background: var(--ambar-tenue); color: var(--ambar); }
.estatus--pagada  { background: var(--verde-tenue); color: var(--verde); }
.estatus--muerta  { background: #f0f2f4; color: var(--tinta-suave); }

.pasos-pago { list-style: none; padding: 0; margin: 22px 0 0; counter-reset: p; }
.pasos-pago li {
    position: relative; padding-left: 38px; margin-bottom: 14px;
    font-size: .95rem; color: var(--tinta-suave);
}
.pasos-pago li::before {
    counter-increment: p; content: counter(p);
    position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%;
    background: var(--azul-tenue); color: var(--azul);
    display: grid; place-items: center; font-weight: 700; font-size: .82rem;
}

/* ------------------------------------------------------ tabla de lo incluido */
.incluye-tabla { width: 100%; border-collapse: collapse; font-size: .94rem; }
.incluye-tabla th, .incluye-tabla td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea);
}
.incluye-tabla th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.incluye-tabla td:last-child, .incluye-tabla th:last-child { text-align: right; white-space: nowrap; }

/* ------------------------------------------------------------------ estado vacío */
.vacio {
    text-align: center; padding: 60px 20px; background: #fff;
    border: 1px dashed #75899b; border-radius: var(--radio-lg);
}
.vacio h2 { font-size: 1.2rem; margin-bottom: 8px; }
.vacio p  { color: var(--tinta-suave); max-width: 34em; margin: 0 auto; }

/* El campo trampa del antiabuso: invisible para una persona, presente para un
   rellenador automático. No se usa display:none porque varios lo ignoran. */
.trampa {
    position: absolute !important; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

@media print {
    .cabecera, .pie, .plan__acciones, .resumen .boton { display: none !important; }
    .bloque, .resumen { border-color: #999; }
}

/* ============================================================================
   SECCIÓN LEGAL PÚBLICA (/legal)
   ----------------------------------------------------------------------------
   Un documento legal se lee de corrido y es largo. Todo aquí va contra eso:
   medida de línea acotada, interlineado amplio y jerarquía clara. Un aviso de
   privacidad que no se puede leer cumple la forma y no la función.
   ========================================================================== */

/* --- índice --- */
.legal-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.legal-ficha {
    display: block;
    padding: 22px 24px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.legal-ficha:hover, .legal-ficha:focus-visible {
    border-color: var(--azul);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}
.legal-ficha h2 {
    margin: 0 0 8px;
    font-size: 1.06rem;
    color: var(--azul);
}
.legal-ficha p {
    margin: 0 0 14px;
    font-size: .93rem;
    color: var(--tinta-suave);
    line-height: 1.55;
}
.legal-ficha__pie {
    font-size: .82rem;
    color: var(--tinta-suave);
    opacity: .8;
}

/* --- documento --- */
.legal-marco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 46px;
    align-items: start;
}
.legal-cuerpo {
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
    padding: 44px 48px;
}
.legal-cuerpo > h1 {
    margin: 0 0 10px;
    font-size: 1.85rem;
    line-height: 1.25;
}
.legal-sello {
    margin: 0 0 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--linea);
    font-size: .88rem;
    color: var(--tinta-suave);
}

/* El contenido lo captura el redactor en el editor: se le da forma aquí, y no
   con estilos incrustados en el texto, para que un cambio de identidad visual
   no obligue a reeditar diez documentos. */
.pt-doc-legal {
    /* ~72 caracteres por línea: por encima de eso el ojo pierde el renglón. */
    max-width: 68ch;
    line-height: 1.75;
    color: var(--tinta);
}
.pt-doc-legal h2 {
    margin: 2.1em 0 .6em;
    font-size: 1.22rem;
    color: var(--azul-oscuro);
}
.pt-doc-legal h3 {
    margin: 1.7em 0 .5em;
    font-size: 1.05rem;
}
.pt-doc-legal h4, .pt-doc-legal h5, .pt-doc-legal h6 {
    margin: 1.5em 0 .4em;
    font-size: .98rem;
}
.pt-doc-legal p { margin: 0 0 1.15em; }
.pt-doc-legal ul, .pt-doc-legal ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.pt-doc-legal li { margin-bottom: .5em; }
.pt-doc-legal a { color: var(--azul); }
.pt-doc-legal strong { color: var(--tinta); }
.pt-doc-legal blockquote {
    margin: 1.4em 0;
    padding: 2px 0 2px 20px;
    border-left: 3px solid var(--azul-tenue);
    color: var(--tinta-suave);
}
.pt-doc-legal hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--linea);
}
.pt-doc-legal img, .pt-doc-legal iframe { max-width: 100%; border-radius: var(--radio); }
.pt-doc-legal iframe { border: 1px solid var(--linea); }
.pt-doc-legal code {
    padding: 1px 5px;
    background: var(--azul-tenue);
    border-radius: 4px;
    font-size: .9em;
}

/* Las tablas del texto y las del catálogo de cookies comparten aspecto: para
   quien lee son lo mismo, aunque una venga del editor y otra de la base. */
.pt-doc-legal table, .legal-tabla {
    width: 100%;
    margin: 1.4em 0;
    border-collapse: collapse;
    font-size: .92rem;
}
.pt-doc-legal table th, .legal-tabla th {
    padding: 10px 12px;
    background: var(--azul-tenue);
    border: 1px solid var(--linea);
    text-align: left;
    font-weight: 600;
}
.pt-doc-legal table td, .legal-tabla td {
    padding: 10px 12px;
    border: 1px solid var(--linea);
    vertical-align: top;
}
/* Una tabla ancha no debe empujar la página entera a scroll horizontal: se
   desplaza ella sola. */
.legal-tabla-envoltura, .pt-doc-legal table { overflow-x: auto; display: block; }
.legal-tabla-envoltura { margin: 1.4em 0; }
.legal-tabla-envoltura .legal-tabla { margin: 0; }
.legal-tabla code { background: var(--fondo); }

.legal-cuerpo > h2 {
    max-width: 68ch;
    margin: 2.2em 0 .6em;
    font-size: 1.22rem;
    color: var(--azul-oscuro);
}
.legal-cuerpo > h3 { max-width: 68ch; margin: 1.7em 0 .5em; font-size: 1.05rem; }

.legal-contacto {
    max-width: 68ch;
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--linea);
    font-size: .92rem;
    color: var(--tinta-suave);
}

/* --- índice lateral --- */
.legal-lado {
    position: sticky;
    top: 90px;
    padding: 24px 26px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: var(--radio-lg);
}
.legal-lado h2 {
    margin: 0 0 14px;
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.legal-lado ul { margin: 0; padding: 0; list-style: none; }
.legal-lado li { margin-bottom: 11px; font-size: .92rem; line-height: 1.4; }
.legal-lado a { color: var(--tinta); text-decoration: none; }
.legal-lado a:hover { color: var(--azul); text-decoration: underline; }
.legal-lado__actual { color: var(--azul); font-weight: 600; }

@media (max-width: 900px) {
    .legal-marco { grid-template-columns: 1fr; gap: 28px; }
    .legal-cuerpo { padding: 30px 24px; }
    .legal-lado { position: static; }
}

/* Un documento legal se imprime y se archiva: es un uso real, no un adorno. */
@media print {
    .legal-lado, .legal-contacto, .miga { display: none !important; }
    .legal-marco { display: block; }
    .legal-cuerpo { border: 0; padding: 0; }
    .pt-doc-legal { max-width: none; }
}

/* Marca de campo opcional. Existe porque el formulario de contratación pasó a
   ser casi todo obligatorio: si solo se marcan los obligatorios con asterisco,
   veinte asteriscos seguidos dejan de leerse. Señalar los pocos opcionales
   comunica mejor que señalar los muchos requeridos. */
.opc { color: #8592a3; font-weight: 400; font-size: .85em; }