/* ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   Rediseño de /diagnostico/ con el lenguaje de la web nueva (propuesta aprobada por Albert el 28/09/2026; encargo del 27/09: «actúa como experto… haz una propuesta de esta página en
   la nueva» · «es una landing para campañas de Paid Media» · «ok a rediseñarla, pero no modifiques nada el copy ni los
   encabezados»). Va ENCIMA de landing.css (el guion y los estados de siempre no cambian); solo cambia el aspecto.

   Criterio (landing de pago, una sola acción: «Comprueba si tu web encaja»):
   · el lenguaje de la web nueva: titulares en redonda con la parte clave en negrita (el «bloqueado antes de
     publicarla» del H1, que hoy no se distingue porque todo va en peso 900), cantos de 22 px en cajas y de píldora en
     botones, franjas blanco/gris, el verde solo como acento (puntos, vistos, barra de progreso);
   · cabecera fija y fina, con el botón siempre a mano; en el móvil, la barra inferior con el botón;
   · el precio, claro y cerca de la promesa; el test, como una tarjeta amable (respuestas grandes, fáciles de pulsar);
   · formularios con los campos de la web nueva (más altos, foco verde) y el resumen del precio al lado;
   · sin sombras ni degradados (norma de Albert para esta landing).
   ───────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

body.pr {
  --radio: 22px; --radio-s: 12px; --band: #F4F4F4; --linea: #D9D9D9; --ink-2: #5C5C5C;
  --ease: cubic-bezier(.645, .045, .355, 1);
  font-size: 17px;
}
/* mismo contenedor que la web nueva (.container de global.css): 1344 px de ancho útil y el mismo margen lateral */
body.pr { --max: 1344px; --gutter: clamp(16px, 4vw, 56px); }
body.pr .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* tipografía: titulares en redonda, la parte clave en negrita; la parte «ligera» (.lt) en redonda */
body.pr h1 { font-size: clamp(2.6rem, 1.35rem + 3.3vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 400; }
body.pr .hero h1, body.pr .hero h1 strong { font-weight: 400; }
body.pr .hero h1 strong { font-weight: 700; }
body.pr h2 { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 700; }
body.pr .lt { font-weight: 400; }
body.pr h3 { font-size: clamp(1.25rem, 1.05rem + .55vw, 1.55rem); line-height: 1.2; letter-spacing: -.02em; }
body.pr .lead, body.pr .section-head > p { font-weight: 400; color: var(--ink-2); }

/* etiquetas: píldora gris con el punto verde (redondo, como el del logo) y texto en redonda */
body.pr .eyebrow, body.pr .card-tag, body.pr .sec-label, body.pr .result-good, body.pr .result-bad, body.pr .step-label {
  display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: var(--band); font-size: .82rem; line-height: 1.3; font-weight: 700; letter-spacing: 0; text-transform: none;
}
body.pr .eyebrow::before, body.pr .card-tag::before, body.pr .sec-label::before, body.pr .result-good::before, body.pr .result-bad::before {
  content: ""; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--neon);
}
body.pr .result-bad::before { background: #707070; }
body.pr .section--gray .sec-label { background: #fff; }

/* botones: píldora oscura de la web nueva; al pasar, verde */
body.pr .btn { min-height: 48px; padding: 0 26px; border-radius: 999px; font-size: 1rem; font-weight: 600; transition: background-color .35s var(--ease), color .35s var(--ease); }
body.pr .btn:hover { background: var(--neon); color: var(--ink); }
body.pr .arrow-link, body.pr .back-link { font-size: .92rem; letter-spacing: .01em; }

/* cabecera: la misma que en el resto de la web nueva (Albert, 27/09/2026: «la posición del logo y del header tiene que ser
   consistente»): fija arriba, 104 px de alto que se encogen a 76 al bajar (88/72 por debajo de 1180 px), el mismo logo al
   mismo tamaño y en el mismo sitio, y el botón en píldora de 44 px como «Contacto» */
body.pr .site-head { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
body.pr .nav { min-height: 0; height: 104px; gap: 24px; transition: height .3s cubic-bezier(.2, .7, .2, 1); }
body.pr .site-head.is-scrolled .nav { height: 76px; }
body.pr .brand { flex: none; }
body.pr .brand img { width: clamp(150px, calc(20.8vw - 87px), 212px); height: auto; }
body.pr .nav-links { gap: clamp(14px, 1.6vw, 26px); }
body.pr .nav-link { position: relative; padding: 14px 0 6px; font-size: 1rem; font-weight: 500; text-decoration: none; }
body.pr .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--neon); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
body.pr .nav-link:hover { text-decoration: none; }
body.pr .nav-link:hover::after { transform: scaleX(1); }
body.pr .nav-links .btn { min-height: 0; height: 44px; margin-left: 8px; padding: 0 24px; font-size: .974rem; font-weight: 600; }
@media (max-width: 1180px) {
  body.pr .nav { height: 88px; }
  body.pr .site-head.is-scrolled .nav { height: 72px; }
  body.pr .brand img { width: clamp(140px, 14vw, 172px); }
}
@media (max-width: 760px) {
  /* ancho fijo en el móvil: con «100 %» el enlace del logo tomaba el ancho natural del dibujo (500 px) y la página se
     desplazaba de lado en pantallas de 375 (Albert, 29/09/2026) */
  body.pr .brand { max-width: 100%; }
  body.pr .brand img { width: min(236px, calc(100vw - 32px)); }
}

/* portada: promesa a la izquierda; a la derecha, el precio en una tarjeta gris */
body.pr .hero { padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); }
body.pr .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 48px clamp(40px, 6vw, 96px); align-items: center; }
body.pr .hero .eyebrow { margin-bottom: 24px; }
body.pr .hero h1 { max-width: 16ch; }
body.pr .hero .lead { max-width: 58ch; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height: 1.55; font-weight: 400; }
body.pr .hero-actions { gap: 18px 32px; }
body.pr .hero-actions .btn { min-height: 54px; padding: 0 30px; font-size: 1.02rem; }
body.pr .micro { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .9rem; font-weight: 400; color: var(--ink-2); }
body.pr .hero-card { background: var(--band); color: var(--ink); border-radius: var(--radio); padding: clamp(28px, 3vw, 40px); }
body.pr .hero-card .card-tag { background: #fff; color: var(--ink); }
body.pr .hero-card .price, body.pr .hero-card .price .price-tax { color: var(--ink); }
body.pr .price { font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.6rem); line-height: 1; letter-spacing: -.05em; margin: 22px 0 16px; }
body.pr .price .price-tax { font-size: .95rem; font-weight: 400; color: var(--ink-2); margin-top: 10px; }
body.pr .card-line { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; font-size: .92rem; font-weight: 700; color: var(--ink); }
body.pr .card-line::before { width: 10px; height: 10px; border-radius: 50%; background: var(--neon); }
body.pr .hero-card .card-line { color: var(--ink); }
body.pr .list-neon li, body.pr .hero-card .list-neon li { padding: 14px 0 14px 36px; border-top: 1px solid var(--linea); border-bottom: 0; font-weight: 400; color: var(--ink); }
body.pr .list-neon li:last-child, body.pr .hero-card .list-neon li:last-child { border-bottom: 0; }
body.pr .list-neon li::before { top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--neon) var(--tick-ink) no-repeat center / 12px; }
body.pr .dotlines { display: none; }

/* secciones: franjas blanco/gris y cabecera de sección con su número en píldora */
body.pr .section { padding: clamp(64px, 8vw, 120px) 0; }
body.pr .section-head { gap: 18px clamp(40px, 6vw, 96px); margin-bottom: clamp(32px, 4vw, 56px); }
body.pr .section-head .sec-label { justify-self: start; }
body.pr .section-head h2 { max-width: 18ch; }
body.pr .section-head > p { font-size: clamp(1rem, .96rem + .2vw, 1.1rem); max-width: 46ch; }

/* situaciones: tarjetas grises con el icono en un círculo blanco */
body.pr .pain-grid { gap: clamp(12px, 1.4vw, 20px); }
body.pr .pain { border-radius: var(--radio); padding: clamp(22px, 2.2vw, 30px); background: var(--band); transition: background-color .35s var(--ease); }
body.pr .pain:hover { background: #ECECEC; }
body.pr .pain .ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 50%; background: #fff; }
body.pr .pain b { font-size: 1.08rem; line-height: 1.3; }
body.pr .pain .pain-text { font-size: .95rem; line-height: 1.55; color: var(--ink-2); }

/* qué revisamos: número grande con el punto verde (como en la web nueva) */
body.pr .info-card { border-radius: var(--radio); padding: clamp(24px, 2.4vw, 34px); }
body.pr .revision .info-card { border: 0; }
body.pr .revision .info-card::before {
  display: inline-block; width: auto; height: auto; margin: 0 0 28px; padding: 0 14px 0 0; border: 0; border-radius: 0;
  background: radial-gradient(circle at calc(100% - 4px) calc(100% - 9px), var(--neon) 4px, transparent 4.6px);
  font-size: 2.6rem; line-height: 1; font-weight: 500; letter-spacing: -.04em; color: var(--ink);
}
body.pr .info-card h3 { font-size: 1.12rem; line-height: 1.3; }
body.pr .info-card p { font-size: .96rem; line-height: 1.55; color: var(--ink-2); }

/* test: tarjeta con cabecera gris, barra de progreso verde y respuestas grandes */
body.pr .quiz-shell { border: 1px solid var(--linea); border-radius: var(--radio); padding: 0 clamp(20px, 3vw, 44px) clamp(24px, 3vw, 44px); overflow: hidden; }
body.pr .quiz-top { margin: 0 calc(-1 * clamp(20px, 3vw, 44px)) clamp(24px, 3vw, 40px); padding: 18px clamp(20px, 3vw, 44px); background: var(--band); border-bottom: 0; }
body.pr .step-label { background: #fff; }
body.pr .step-label::before { content: none; }
body.pr .progress-track { height: 14px; margin-left: 0; }
body.pr .progress-track::before { left: 0; top: 5px; height: 4px; border-radius: 4px; background: #fff; }
body.pr .progress-bar { top: 5px; height: 4px; border-radius: 4px; background: var(--ink); }
body.pr .progress-bar::after { right: -7px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--neon); }
body.pr .quiz-steps li { font-weight: 600; }
body.pr .question h3 { max-width: 32ch; }
body.pr .question > p { margin-top: 10px; color: var(--ink-2); }
body.pr .options { gap: 12px; margin-top: 28px; }
body.pr .opt { min-height: 64px; padding: 14px 20px; border: 1.5px solid transparent; border-radius: 16px; background: var(--band); color: var(--ink); font-size: 1rem; font-weight: 500; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
body.pr .opt::before { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--linea); background: #fff; font-size: .82rem; }
body.pr .opt:hover { border-color: var(--ink); }
body.pr .opt:hover::before { border-width: 1px; border-color: var(--ink); }
body.pr .opt[aria-checked="true"], body.pr .opt.selected { background: #fff; color: var(--ink); border-color: var(--ink); }
body.pr .opt[aria-checked="true"]::before, body.pr .opt.selected::before { background: var(--neon); border-color: var(--neon); color: var(--ink); }
body.pr .checkopt { border-radius: 16px; }
body.pr .checkopt input { border-radius: 6px; }
/* «Continuar», «Continuar al pago» y «Reservar videollamada» siguen en verde (decisión de Albert en la landing: el paso
   siguiente, en neón); al pasar el ratón, oscuros */
body.pr .quiz-continue .btn:not([disabled]):hover, body.pr .checkout .btn:hover, body.pr .vc-btn:not([disabled]):hover { background: var(--ink); color: #fff; }

/* resultados y formularios: campos de la web nueva; el resumen del precio, en tarjeta gris */
body.pr .result h2 { font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.1; }
body.pr .result .lead { color: var(--ink-2); }
body.pr .fields { gap: 18px; }
body.pr .field > span { margin-bottom: 8px; font-size: .95rem; font-weight: 600; }
body.pr .field input, body.pr .field textarea { min-height: 52px; padding: 14px 18px; border: 1px solid var(--linea); border-radius: var(--radio-s); background: #fff; }
body.pr .field textarea { min-height: 140px; }
body.pr .field input:focus, body.pr .field textarea:focus { outline: 2px solid var(--neon); outline-offset: 1px; border-color: transparent; }
body.pr .check { font-size: .92rem; font-weight: 400; color: var(--ink-2); }
body.pr .check input { border-radius: 5px; }
body.pr .checkout, body.pr .vc-card, body.pr .proyecto-form { border-radius: var(--radio); }
body.pr .price-summary { border: 0; border-radius: var(--radio); background: var(--band); padding: clamp(24px, 2.6vw, 34px); }
body.pr .price-summary .price { font-size: 3rem; }
body.pr .price-summary .list-neon li { border: 0; padding: 6px 0 6px 32px; }
body.pr .price-summary .list-neon li::before { top: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--neon) var(--tick-ink) no-repeat center / 11px; }
body.pr .price-summary .note { border-radius: var(--radio-s); background: #fff; border: 0; padding: 16px 18px; color: var(--ink-2); }
body.pr .basic-info summary { font-size: .88rem; }
body.pr .privacy-line { font-size: .85rem; color: var(--ink-2); }

/* videollamada */
body.pr .vc-card { border: 1px solid var(--linea); }
body.pr .vc-day, body.pr .vc-slot { border-radius: 14px; }
/* flechas de la tira de días: círculo de verdad (44 px, centrado en la fila; antes el radio 50 % sobre un rectángulo
   de 36×56 daba una elipse aplastada: Albert, 28/09/2026), con el mismo verde al pasar el ratón que los botones */
body.pr .vc-arrow { flex: 0 0 44px; width: 44px; height: 44px; min-height: 0; align-self: center; padding: 0; border-radius: 50%; display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
body.pr .vc-arrow:hover:not([disabled]) { background: var(--neon); border-color: var(--neon); }
@media (max-width: 640px) { body.pr .vc-arrow { flex-basis: 36px; width: 36px; height: 36px; } }

/* qué no incluye */
body.pr .excluye .info-card { border: 0; }
body.pr .excluye .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; }

/* cómo funciona (Albert, 27/09/2026: «se trata de señalar al usuario los tres pasos; mejórala»): un recorrido, no tres
   tarjetas sueltas. Cada paso lleva su número en un círculo sobre una línea que los une, en orden de izquierda a derecha;
   el último (el informe, lo que el cliente consigue) va en verde. Sin cajas: la línea y los números hacen de guía.
   En el móvil, el recorrido baja en vertical, con la línea a la izquierda. */
body.pr .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
body.pr .step, body.pr .section:not(.section--gray) .step { position: relative; background: none; border-radius: 0; padding: 0; }
body.pr .step::before {
  counter-increment: s; content: counter(s);
  position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; margin: 0 0 28px; padding: 0;
  border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 0 0 10px #fff;
  font-size: 1.45rem; line-height: 1; font-weight: 700; letter-spacing: -.02em;
}
body.pr .step:last-child::before { background: var(--neon); color: var(--ink); }
body.pr .step::after, body.pr .step:first-child::after {
  display: block; content: ""; position: absolute; top: 29px; left: 60px; right: calc(-1 * clamp(24px, 3vw, 48px)); height: 2px; background: var(--linea);
}
body.pr .step:last-child::after { display: none; }
body.pr .step h3 { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.45rem); line-height: 1.25; letter-spacing: -.02em; max-width: 20ch; }
body.pr .step p { margin-top: 12px; max-width: 36ch; font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) {
  body.pr .steps { grid-template-columns: 1fr; gap: 0; }
  body.pr .step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; align-items: start; padding-bottom: 32px; }
  body.pr .step::before { width: 52px; height: 52px; margin: 0; font-size: 1.25rem; box-shadow: 0 0 0 8px #fff; }
  body.pr .step::after, body.pr .step:first-child::after { top: 52px; bottom: 0; left: 25px; right: auto; width: 2px; height: auto; }
  body.pr .step:last-child { padding-bottom: 0; }
  body.pr .step h3 { padding-top: 12px; }
}

/* preguntas frecuentes: el título a la izquierda y las preguntas a la derecha, como en la web nueva */
@media (min-width: 900px) {
  body.pr .section:has(.faq) .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  body.pr .section:has(.faq) .section-head { display: block; position: sticky; top: 110px; margin: 0; }
  body.pr .section:has(.faq) .section-head .sec-label { margin-bottom: 18px; }
}
body.pr .section:has(.faq) { background: var(--band); }
/* preguntas frecuentes con el estilo de las de la web nueva (Albert, 27/09/2026): sin caja, filete oscuro arriba, cada
   pregunta separada por una línea fina, pregunta en 19–22 px seminegrita y el «+» de dos trazos que gira al pasar */
body.pr .faq { border: 0; border-top: 1.5px solid var(--ink); border-radius: 0; padding: 0; background: transparent; }
body.pr .faq details { border-bottom: 1px solid var(--linea); }
body.pr .faq details:last-child { border-bottom: 1px solid var(--linea); }
body.pr .faq summary { position: relative; padding: 24px 44px 24px 0; font-size: clamp(1.1875rem, 1rem + .45vw, 1.35rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.35; }
body.pr .faq summary strong { font-weight: 700; }
body.pr .faq summary::after { top: 50%; right: 0; width: 20px; height: 20px; margin-top: -10px; border-radius: 0; background: var(--plus) no-repeat center / 18px; transition: transform .35s var(--ease); }
body.pr .faq summary:hover::after { transform: rotate(90deg); }
body.pr .faq details[open] summary::after { background-image: var(--minus); transform: none; }
body.pr .faq details p { padding: 0 0 28px; max-width: 70ch; color: var(--ink-2); font-weight: 400; }

/* franja final con el estilo de las llamadas finales de la web nueva (Albert, 27/09/2026): fondo oscuro #2B2B2B, titular
   en blanco a 32–46 px (la parte ligera en redonda), texto en gris claro y el enlace en verde, en mayúsculas y con la
   flecha, alineado abajo a la derecha con la última línea del titular; sin cinta de logos, así que sin filete debajo */
body.pr .cta-band { background: #2B2B2B; color: #fff; padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 6vw, 80px); }
body.pr .cta-band > .wrap:first-child { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: clamp(36px, 4vw, 56px); border-bottom: 0;
  /* la línea, solo a lo ancho del contenido (no por los márgenes), como en la web */
  background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)) center bottom / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
/* cinta de logos de clientes, igual que en las llamadas finales de la web (CtaLogos.astro) */
body.pr .cta-band .marquee { margin-top: clamp(40px, 5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
body.pr .cta-band .track { display: flex; width: max-content; align-items: center; animation: pr-desliza 45s linear infinite; }
body.pr .cta-band .track img { height: 52px; width: auto; margin-right: clamp(48px, 6vw, 96px); opacity: .85; transition: opacity .25s; }
body.pr .cta-band .track img:hover { opacity: 1; }
body.pr .cta-band .marquee:hover .track { animation-play-state: paused; }
@keyframes pr-desliza { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { body.pr .cta-band .track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } body.pr .cta-band .track img[aria-hidden] { display: none; } }
body.pr .cta-band .wrap::after { content: none; }
body.pr .band-copy { flex: 1 1 auto; min-width: 0; }
body.pr .cta-band h2 { max-width: 26ch; color: #fff; font-size: clamp(2rem, 1.2rem + 1.9vw, 2.9rem); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; }
body.pr .cta-band h2 .lt { font-weight: 700; color: #fff; }   /* titular entero en negrita, como las demás llamadas finales */
body.pr .cta-band p { margin-top: 18px; max-width: 56ch; color: rgba(255,255,255,.75); font-size: clamp(1.075rem, 1rem + .25vw, 1.25rem); line-height: 1.5; font-weight: 400; }
body.pr .cta-band .arrow-link { flex: none; min-height: 0; gap: 10px; padding-bottom: .35em; color: var(--neon); font-size: 1rem; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; }
body.pr .cta-band .arrow-link .arrow { width: 13px; height: 13px; }
@media (max-width: 760px) {
  body.pr .cta-band > .wrap:first-child { flex-direction: column; align-items: flex-start; gap: 28px; }
}
body.pr .contact-section .proyecto-form:not(.is-inline) { border-radius: var(--radio); }


/* barra inferior del móvil */
body.pr .mobile-stick { background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.pr .mobile-stick .btn { width: 100%; min-height: 52px; }

/* aviso de la muestra */
.pr-muestra { position: fixed; left: 12px; bottom: 12px; z-index: 90; padding: 8px 14px; border-radius: 999px; background: #111; color: #fff; font: 600 12px/1.2 var(--font); opacity: .88; pointer-events: none; }

@media (max-width: 1100px) {
  body.pr .hero-grid { grid-template-columns: 1fr; }
  body.pr .hero-card { max-width: 520px; }
}
@media (max-width: 640px) {
  body.pr .pain { padding: 20px; }
  body.pr .pain .ico { width: 48px; height: 48px; margin-bottom: 18px; }
  body.pr .opt { min-height: 58px; }
  .pr-muestra { bottom: 84px; }
  /* el test, a sangre en el móvil: el margen negativo tiene que ser igual al del contenedor (16 px), si no la página
     se desplaza de lado */
  body.pr .quiz-shell { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
  body.pr .quiz-top { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  body.pr .result .proyecto-form.is-inline { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* la cabecera del test es clara: su texto, en tinta (en la versión de hoy es oscura con texto blanco) */
body.pr .quiz-top, body.pr .quiz-top .step-label, body.pr .quiz-steps, body.pr .quiz-steps li { color: var(--ink); }

/* flecha de los enlaces de acción: «↗», como en la web nueva (en la landing de hoy, «↘») */
body.pr .arrow-link .arrow { transform: rotate(-90deg); }
body.pr .arrow-link:hover .arrow { transform: rotate(-90deg) translate(2px, 2px); }

/* la franja final no lleva el margen de las secciones (si no, sale un borde oscuro de otro tono por encima y por debajo) */
body.pr .section.contact-section { padding: 0; background: #2B2B2B; }
/* al abrir «Cuéntanos tu proyecto», el formulario sale en un panel blanco dentro de la misma franja oscura */
body.pr .contact-section:has(.proyecto-form:not([hidden]):not(.is-inline), .form-ok:not([hidden]):not(.is-inline)) { padding-bottom: clamp(48px, 6vw, 80px); }
body.pr .contact-section .proyecto-form:not(.is-inline), body.pr .contact-section .form-ok:not(.is-inline) { margin-top: 0; }

/* «Cómo funciona» con el estilo de los enlaces del menú de la web: 16 px en seminegrita, su número pequeño arriba a la
   derecha (adorno, como «01» en el menú) y la línea verde que aparece debajo al pasar el ratón */
body.pr .nav-link { color: var(--ink); }
body.pr .nav-link::before { content: "01"; position: absolute; right: 0; top: 0; font-size: .6rem; font-weight: 500; line-height: 1; color: #707070; letter-spacing: .04em; }

/* pie: el de la web nueva (Footer.astro), sin el menú ni el boletín (Albert, 28/09/2026). Mismas columnas que en la web,
   así el logo y el contacto quedan en el mismo sitio; el año se pone solo (propuesta.js) */
body.pr .pie-web { background: var(--band); padding-block: clamp(64px, 8vw, 110px) 32px; font-size: .95rem; color: var(--ink); }
body.pr .pie-rejilla { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1.4fr; gap: clamp(28px, 4vw, 64px); }
body.pr .pie-contacto { grid-column: 3; }
body.pr .pie-marca img { display: block; width: 150px; height: auto; }
body.pr .pie-redes { margin-top: 28px; font-weight: 700; }
body.pr .pie-web a { text-decoration: none; color: inherit; }
body.pr .pie-web a:hover { text-decoration: underline; text-decoration-color: var(--neon); text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.pr .pie-rot { font-weight: 700; margin-bottom: 1.1em; }
body.pr .pie-contacto p { margin-bottom: 1.4em; }
body.pr .pie-empleo { margin-top: 2.2em; color: var(--ink-2); }
body.pr .pie-empleo p { margin-bottom: .4em; }
body.pr .pie-empleo .pie-rot { color: var(--ink); margin-bottom: .6em; }
body.pr .pie-base { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--linea); font-size: .875rem; color: var(--ink-2); }
body.pr .pie-base p { margin: 0; }
body.pr .pie-arriba { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink) !important; }
body.pr .pie-web a.pie-arriba:hover { text-decoration: none; }
body.pr .pie-arriba-circ { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color .35s, border-color .35s; }
body.pr .pie-arriba-circ svg { width: 12px; height: 12px; transition: transform .35s; }
body.pr .pie-arriba:hover .pie-arriba-circ { background: var(--neon); border-color: var(--neon); }
body.pr .pie-arriba:hover .pie-arriba-circ svg { transform: translateY(-2px); }
body.pr .pie-como-enlace { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
body.pr .pie-como-enlace:hover { text-decoration: underline; }
@media (max-width: 1024px) { body.pr .pie-rejilla { grid-template-columns: 1fr 1fr; } body.pr .pie-contacto { grid-column: 2; } }
@media (max-width: 560px) { body.pr .pie-rejilla { grid-template-columns: 1fr; } body.pr .pie-contacto { grid-column: 1; } body.pr .pie-arriba { margin-left: 0; } }
body.pr .cta-band > .wrap:last-child { display: block; }

/* página «Pago recibido» (/diagnostico/gracias/): tarjeta blanca centrada sobre gris, con el lenguaje de la web nueva */
body.pr .thanks { background: var(--band); padding: clamp(56px, 8vw, 112px) 0; }
body.pr .thanks-card { max-width: 600px; border: 0; border-radius: var(--radio); padding: clamp(32px, 4vw, 52px) clamp(22px, 4vw, 52px) clamp(28px, 3vw, 44px); }
body.pr .thanks-icon { width: 60px; height: 60px; margin-bottom: 26px; }
body.pr .thanks-card h1 { font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3rem); line-height: 1.05; letter-spacing: -.04em; font-weight: 400; }
body.pr .thanks-card h1 strong { font-weight: 700; }
body.pr .thanks-card .lead { max-width: 44ch; font-weight: 400; color: var(--ink-2); }
body.pr .thanks-ref { border-top: 1px solid var(--linea); }
body.pr .thanks-actions .btn { min-height: 0; height: 48px; padding: 0 26px; }

/* pie mínimo «Una línea» (propuesta A, elegida por Albert el 28/09/2026: «el footer de la landing, que sea minimal»):
   fondo blanco con un filete fino arriba y todo en una sola línea baja: el logo de una línea en pequeño, el ©, los
   textos legales y, a la derecha, «Ir arriba». En el móvil, apilado. */
body.pr .pie-web { padding: 0; background: #fff; }
body.pr .pie-web .pie-base { margin-top: 0; padding-block: 22px; border-top: 1px solid var(--linea); gap: 8px 22px; font-size: .82rem; }
body.pr .pie-mini--firma { display: block; width: 104px; height: auto; margin-right: 10px; }
body.pr .pie-arriba-circ { width: 28px; height: 28px; }
@media (max-width: 640px) {
  body.pr .pie-web .pie-base { flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 24px 96px; }
  body.pr .pie-arriba { margin-left: 0; }
}


/* «Pago recibido»: si la pantalla es más alta que el contenido, el pie queda abajo del todo y la franja gris ocupa el
   hueco (Albert, 28/09/2026) */
body.pr-gracias { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.pr-gracias > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.pr-gracias > main > .thanks { flex: 1 0 auto; display: flex; align-items: center; }
body.pr-gracias > main > .thanks > .wrap { width: 100%; }

/* «¿Querías decir …?» bajo el campo del correo cuando tiene una errata evidente (landing.js, 30/09/2026) */
body.pr .email-hint { margin: 8px 0 0; font-size: 14px; line-height: 22px; color: #5c5c5c; }
body.pr .email-hint button { font: inherit; font-weight: 700; color: #353535; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: #00ff8f; text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
body.pr .email-hint button:hover { text-decoration-color: #353535; }