/* Landing «Diagnóstico web» — connectalia.com/diagnostico/
   Dirección E1 «Tarjetas y rejillas» (2026-09-23): misma marca que connectalia.com (blanco y #353535, DM Sans light
   300 + bold 700, gris #F4F4F4, neón #00FF8F, radios 8/10, sin sombras ni degradados) pero con la ESTRUCTURA del
   prototipo: cada dato en su tarjeta, rejillas regulares, títulos cortos en negrita, pasos numerados unidos por una
   línea, precio destacado. Todas las secciones llevan la misma cabecera (etiqueta numerada en negrita, titular y una
   línea de intro a la derecha). El test, los formularios y el pie se conservan tal cual (solo ajustes de encaje). */

:root {
  --ink: #353535;
  --bg: #FFFFFF;
  --gray: #F4F4F4;
  --neon: #00FF8F;
  --line: #353535;
  --line-soft: rgba(53, 53, 53, .3);
  --line-card: rgba(53, 53, 53, .35); /* borde en reposo de las tarjetas de respuesta */
  --card-line: rgba(53, 53, 53, .22); /* borde de las tarjetas blancas de contenido y del panel de preguntas */
  --err: #B3261E;
  --field: #F4F4F4;
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --dot: url(connectalia-ico-puntos-4.svg);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M11.65 .8V11.05L1.1.5.5 1.1 11.05 11.65H.8V12.5H12.5V.8Z' fill='%23353535'/%3E%3C/svg%3E");
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect y='10' width='22' height='2' fill='%23353535'/%3E%3Crect x='10' width='2' height='22' fill='%23353535'/%3E%3C/svg%3E");
  --minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Crect y='10' width='22' height='2' fill='%23353535'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23353535' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --tick-neon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%2300FF8F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.4px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: none; /* connectalia.com usa el corte «texto» de DM Sans también en los titulares (sin eje óptico) */
  counter-reset: sec; /* numera las cabeceras de sección (01…06) */
}
a { color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
p { margin: 0; }
strong, b { font-weight: 700; }
p strong, p b, li b { letter-spacing: -.03em; }

.wrap { width: min(1206px, 100% - 48px); margin-left: auto; margin-right: auto; }

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.cta-band :where(a):focus-visible { outline-color: var(--neon); }
[tabindex="-1"]:focus { outline: none; } /* títulos y avisos que reciben el foco por programa: sin anillo */

/* ── Tipografía: la firma de la marca es light 300 + bold 700 en la misma frase ── */
h1, h2, h3 { margin: 0; font-weight: 700; color: inherit; }
h1 { font-size: 64px; line-height: 66px; letter-spacing: -.05em; font-weight: 300; }
h1 strong { font-weight: 700; }
h2 { font-size: 50px; line-height: 52px; letter-spacing: -.05em; }
h3 { font-size: 35px; line-height: 35px; letter-spacing: -.06em; }
.lt { font-weight: 300; }
.step-label, .result-good, .result-bad {
  display: block; font-size: 16px; line-height: 24px; font-weight: 300; letter-spacing: -.06em; text-transform: uppercase;
}
.lead { font-size: 16.4px; line-height: 1.6; }
.micro { font-size: 14px; line-height: 24px; font-weight: 300; }

/* ── Etiquetas (la misma en toda la página): cuadradito de neón + texto pequeño en negrita y mayúsculas.
   En la portada y en el bloque del precio llevan su texto; en las cabeceras de sección son el numeral 01…06
   (lo pone el CSS: el copy no cambia). ── */
.eyebrow, .card-tag, .sec-label {
  display: inline-flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
}
.eyebrow::before, .card-tag::before, .sec-label::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 2px; background: var(--neon); /* centrado en la primera línea aunque la etiqueta se parta en dos */
}
.sec-label::after { content: counter(sec, decimal-leading-zero); }

/* ── Enlace con flecha (acción secundaria, patrón principal de la web) ── */
.arrow-link, .back-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 16px; line-height: 1.2; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.arrow-link .arrow { flex: 0 0 auto; width: 13px; height: 13px; transition: transform .18s ease; }
.arrow-link:hover .arrow { transform: translate(2px, 2px); }
.back-link::before {
  content: ""; width: 13px; height: 13px; flex: 0 0 auto;
  background: var(--arrow) no-repeat center / 13px; transform: rotate(180deg); transition: transform .18s ease;
}
.back-link:hover::before { transform: rotate(180deg) translate(2px, 2px); }

/* ── Botón sólido (solo formularios y acción principal) ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  background: var(--ink); color: #fff; font-size: 15.58px; font-weight: 600; line-height: 1.2; text-align: center;
  border: 0; border-radius: 8px; text-decoration: none; cursor: pointer; transition: background-color .18s ease;
}
.btn:hover { background: #1F1F1F; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn-block { width: 100%; }

/* ── Cabecera: blanca, sin borde, logotipo de una línea ── */
.site-head { background: var(--bg); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 136px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { width: 233px; height: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 44px; }
.nav-link { font-size: 16px; font-weight: 500; text-decoration: none; }
.nav-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ── Portada: dos columnas claras. Izquierda: etiqueta, titular, párrafo, botón sólido + enlace, línea pequeña.
   Derecha: el bloque oscuro del precio (radio 8), con la cifra grande y la lista con ticks de neón. ── */
.hero { padding: 40px 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 48px 96px; align-items: center; }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1, .hero h1 strong { font-weight: 900; } /* titular entero en peso 900 (Albert, 23/09, tras probar 700 y 900) */
.hero h1 { max-width: 680px; }
.hero .lead { margin-top: 28px; max-width: 560px; font-size: 18px; line-height: 1.55; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 36px; }
.hero-actions .btn { min-height: 52px; padding: 0 26px; font-size: 16px; }
.hero .micro { margin-top: 18px; }

.price { display: block; font-size: 60px; line-height: 60px; font-weight: 700; letter-spacing: -.06em; margin: 20px 0 14px; }
.price .price-tax { display: block; font-size: 16.4px; line-height: 1.6; font-weight: 300; letter-spacing: 0; margin-top: 8px; }
.card-line { display: flex; align-items: center; gap: 12px; font-size: 16.4px; font-weight: 700; }
.card-line::before { content: ""; flex: 0 0 auto; width: 30px; height: 30px; background: var(--dot) no-repeat center / 30px; }
.list-neon { list-style: none; margin: 28px 0 0; padding: 0; }
.list-neon li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--line-soft); font-weight: 300; }
.list-neon li::before { content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px; background: var(--tick-neon) no-repeat center / 18px; }
.list-neon li:last-child { border-bottom: 1px solid var(--line-soft); }

/* ── Bloque del precio de la portada: opción «bloque oscuro» elegida por Albert el 2026-09-23. La franja oscura de
   connectalia.com en miniatura: fondo #353535, sin sombra, filetes blancos al 25 % y punto verde de 30 px. (En el
   resultado «encaja» el precio va en un resumen claro junto al formulario desde M354.) ── */
.hero-card {
  background: #353535;
  color: #FFFFFF;
  border-top: 0;
  border-radius: 0;
  padding: 40px 40px 36px;
}
.hero-card { margin-top: 0; border-radius: 8px; padding: 36px 36px 32px; } /* bloque suelto: mismo radio que los botones de connectalia.com (Albert, 23/09) */

/* Etiqueta: la misma de toda la página, en #F4F4F4 */
.hero-card .card-tag {
  color: #F4F4F4;
}

/* Cifra: blanca, 68px/700, con «(IVA incluido)» en 300 debajo */
.hero-card .price {
  color: #FFFFFF;
  font-size: 68px;
  line-height: 68px;
  font-weight: 700;
  margin: 18px 0 16px;
}
.hero-card .price .price-tax {
  color: #F4F4F4;
  font-weight: 300;
  margin-top: 10px;
}

/* «● Entrega en 48 h»: punto verde de 30 px (el mismo SVG de marca) y texto blanco en 700 */
.hero-card .card-line {
  color: #FFFFFF;
  font-weight: 700;
}

/* Lista: filetes finos en blanco al 25 %, texto en 400 blanco, tick de neón delante */
.hero-card .list-neon { margin-top: 30px; }
.hero-card .list-neon li {
  color: #FFFFFF;
  font-weight: 400; /* en blanco sobre oscuro, la light se pierde en móvil */
  border-top-color: rgba(255, 255, 255, .25);
}
.hero-card .list-neon li:last-child {
  border-bottom-color: rgba(255, 255, 255, .25);
}

/* Adaptación del bloque de la portada */
@media (max-width: 1100px) {
  .hero-card { padding: 36px; }
}
@media (max-width: 640px) {
  /* En móvil el bloque va a sangre dentro del margen: mismo ancho que el contenido (el .wrap) */
  .hero-card { padding: 28px 24px 24px; }
  .hero-card .price { font-size: 56px; line-height: 56px; }
}

/* Firma gráfica bajo la portada: líneas finas con el punto verde a distinta longitud (Group-89) */
.dotlines { margin-top: 72px; }
.dotline { display: block; position: relative; height: 31px; }
.dotline + .dotline { margin-top: 14px; }
.dotline::before { content: ""; position: absolute; left: 0; right: 15px; top: 15px; height: 1px; background: var(--line); }
.dotline::after { content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 30px; background: var(--dot) no-repeat center / 30px; }
.dotline:nth-child(2) { width: 62%; }
.dotline:nth-child(3) { width: 31%; }

/* ── Secciones: alternas blanco / #F4F4F4, 100 px verticales. Cabecera IGUAL en todas: etiqueta numerada arriba,
   titular a la izquierda, línea de intro a la derecha alineada por abajo (debajo en móvil). ── */
.section { padding: 100px 0; }
.section--gray { background: var(--gray); --field: #FFFFFF; }
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 96px; align-items: end; margin-bottom: 48px; counter-increment: sec; }
.section-head .sec-label { grid-column: 1; }
.section-head h2 { grid-column: 1; max-width: 720px; }
.section-head > p { grid-column: 2; grid-row: 1 / 3; align-self: end; font-weight: 300; font-size: 17px; line-height: 1.6; max-width: 440px; padding-bottom: 6px; }

/* Icono de trazo (24 px, 1.5 px) dentro de un cuadrado blanco de 44 px: el mismo en «situaciones» y «qué no incluye» */
.ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; background: #FFFFFF; border-radius: 8px; color: var(--ink); }
.ico svg { width: 24px; height: 24px; display: block; }

/* ── Situaciones: 4×2 tarjetas grises (radio 10), icono arriba a la izquierda, título corto en negrita, texto breve ── */
.pain-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pain { display: flex; flex-direction: column; align-items: flex-start; background: var(--gray); border-radius: 10px; padding: 24px; }
.pain .ico { margin-bottom: 22px; }
.pain b { display: block; font-size: 19px; line-height: 25px; letter-spacing: -.02em; margin-bottom: 8px; }
.pain .pain-text { display: block; font-size: 15px; line-height: 24px; font-weight: 400; }

/* ── Qué revisamos: 3×2 tarjetas blancas con borde (radio 10) y el número en un cuadrado de neón ── */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* «Qué no incluye el informe» tiene dos puntos desde el 25/09: dos columnas (en el móvil, una, como las demás). */
.three.excluye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three.revision { counter-reset: rev; }
.info-card { padding: 28px; border-radius: 10px; }
.info-card h3 { font-size: 19px; line-height: 25px; letter-spacing: -.02em; }
.info-card p { margin-top: 8px; font-size: 15px; line-height: 24px; font-weight: 400; }
.revision .info-card { background: #FFFFFF; border: 1px solid var(--card-line); }
.revision .info-card::before {
  counter-increment: rev; content: counter(rev, decimal-leading-zero);
  display: grid; place-items: center; width: 44px; height: 44px; background: var(--neon); border-radius: 8px;
  font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0; margin-bottom: 22px;
}

/* ── Cómo funciona: 4 tarjetas blancas en fila; el número grande en 700 dentro de un cuadrado oscuro y una línea
   que las une pasando por los números (en móvil la línea baja en vertical por la izquierda) ── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.step { position: relative; background: #FFFFFF; border-radius: 10px; padding: 28px; }
/* Sobre fondo blanco (desde el 25/09 «Cómo funciona» va en blanco), las tarjetas de los pasos van en gris para que se vean. */
.section:not(.section--gray) .step { background: var(--gray); }
.step::before {
  counter-increment: s; content: counter(s);
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--ink); color: #FFFFFF; border-radius: 8px; font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: 22px;
}
.step::after { content: ""; position: absolute; top: 56px; left: -24px; right: -24px; height: 1px; background: var(--line); }
.step:first-child::after { left: 84px; }
.step:last-child::after { right: calc(100% - 28px); }
.step > div { display: block; }
.step h3 { font-size: 19px; line-height: 25px; letter-spacing: -.02em; }
.step p { margin-top: 8px; font-size: 15px; line-height: 24px; font-weight: 400; }

/* ── Qué no incluye: 3 tarjetas grises con el pictograma de «no» ── */
.excluye .info-card { background: var(--gray); }
/* Sobre la sección gris (desde el 25/09), tarjetas blancas para que se distingan. */
.section--gray .excluye .info-card { background: #FFFFFF; }
.section--gray .excluye .ico { background: var(--gray); }
.excluye .ico { margin-bottom: 22px; }
/* Desde el 25/09 son dos frases, no título + texto: tarjeta horizontal (pictograma a la izquierda, frase centrada en
   vertical), con el mismo borde fino que las tarjetas de «Qué revisamos» y la frase en peso medio. */
.excluye .info-card { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border: 1px solid var(--card-line); }
.excluye .info-card .ico { margin: 0; }
.excluye .excluye-txt { margin: 0; font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }

/* ── Preguntas frecuentes: acordeón lineal con «+», dentro de un panel blanco con borde ── */
.faq { background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 10px; padding: 6px 40px; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none; display: block; position: relative; padding: 22px 46px 22px 0;
  font-size: 20px; line-height: 26px; font-weight: 300; letter-spacing: -.035em; cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary strong { font-weight: 700; }
/* «+» / «−»: más pequeños que al principio (14 px en vez de 22; Albert, 25/09), sin recuadro, centrados con la primera línea. */
.faq summary::after { content: ""; position: absolute; right: 0; top: 28px; width: 14px; height: 14px; background: var(--plus) no-repeat center / 14px; }
.faq details[open] summary::after { background-image: var(--minus); }
.faq details p { padding: 0 46px 26px 0; font-weight: 300; max-width: 800px; }

/* ── Franja oscura: titular blanco y enlace en neón sobre un filete que cruza la franja ── */
.contact-section { padding: 0; }
.cta-band { background: var(--ink); color: #fff; padding: 85px 0; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: end; }
.cta-band h2 { color: #fff; max-width: 720px; }
.cta-band p { margin-top: 24px; font-weight: 300; font-size: 17px; color: var(--gray); max-width: 560px; }
.cta-band .arrow-link { color: var(--neon); padding-bottom: 6px; }
.cta-band .wrap::after { content: ""; grid-column: 1 / -1; height: 1px; background: var(--gray); margin-top: 40px; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   A partir de aquí, TEST, FORMULARIOS, PIE y BOTÓN FIJO: se conservan tal cual (mismo orden de reglas). ══════ */

/* ── Test: PANEL blanco dentro de la sección gris, para que se lea como un formulario y no como un bloque más de
   texto. Cabecera del panel («Pregunta 1 de 7» + línea de progreso con el punto verde) separada del cuerpo por un
   filete que cruza todo el panel. Las respuestas son TARJETAS clicables en rejilla de dos columnas. ── */
.quiz-shell { background: #FFFFFF; border: 1px solid var(--line); border-radius: 0; padding: 0 40px 40px; --field: #F4F4F4; }
.quiz-top { display: flex; align-items: center; gap: 32px; margin: 0 -40px 40px; padding: 22px 40px; border-bottom: 1px solid var(--line); }
.step-label { order: -1; white-space: nowrap; }
.progress-track { position: relative; flex: 1; height: 31px; margin-left: 15px; } /* el punto verde (30 px) queda dentro del margen al empezar */
.progress-track::before { content: ""; position: absolute; left: -15px; right: 0; top: 15px; height: 1px; background: var(--line-soft); }
.progress-bar { position: absolute; left: 0; top: 15px; height: 1px; width: 0; background: var(--line); transition: width .25s ease; }
.progress-bar::after { content: ""; position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; background: var(--dot) no-repeat center / 30px; }
.question { display: none; }
.question.active { display: block; }
.question h3 { max-width: 760px; }
.question p { margin-top: 16px; font-weight: 300; max-width: 720px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.opt {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 64px; text-align: left;
  background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-card); border-radius: 8px; padding: 18px 20px;
  font-size: 16.4px; line-height: 1.5; font-weight: 400; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.opt::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--ink); background: #FFFFFF; transition: background-color .15s ease, border-color .15s ease, border-width .15s ease;
}
.opt:hover { border-color: var(--ink); }
.opt:hover::before { border-width: 2px; }
.opt[aria-checked="true"], .opt.selected { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.opt[aria-checked="true"]::before, .opt.selected::before { background: var(--neon); border-color: var(--neon); border-width: 1px; }
.opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.quiz-nav { margin-top: 0; }
.quiz-nav .back-link { margin-top: 28px; } /* solo ocupa sitio cuando «Anterior» está a la vista */
/* Pregunta de varias respuestas: casillas cuadradas (como las de los formularios de la web), en filas iguales
   a las opciones de una sola respuesta, y un botón «Continuar» que se enciende al marcar algo */
.checkopt {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 20px; width: 100%;
  border-bottom: 1px solid var(--line); padding: 18px 0; font-size: 16.4px; line-height: 1.6; font-weight: 400; cursor: pointer;
}
.checkopt:first-child { border-top: 1px solid var(--line); }
.checkopt input {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0;
  border: 1px solid var(--ink); border-radius: 6px; background: #fff; cursor: pointer;
  transition: background-color .15s ease, border-width .15s ease;
}
.checkopt:hover input { border-width: 2px; }
.checkopt input:checked { background: var(--ink) var(--tick) no-repeat center / 14px; border-width: 1px; }
.checkopt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.quiz-continue { margin-top: 32px; }
.quiz-continue .btn[disabled] { cursor: not-allowed; }
.hidden { display: none !important; }

/* ── Resultado dentro del mismo panel. En «encaja» (M354, opción B de Albert): etiqueta, titular y entradilla y, debajo,
   dos columnas: a la izquierda el formulario de pago ya abierto y a la derecha el resumen del precio en una tarjeta gris
   clara; «Cambiar mis respuestas» cierra el bloque. En tableta y móvil, una columna con el resumen arriba. ── */
.result { display: none; }
.result.active { display: block; }
.result-good, .result-bad { margin-bottom: 24px; }
.result h2 { font-size: 50px; line-height: 50px; max-width: 760px; }
.result .lead { margin-top: 28px; max-width: 720px; }
.note { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 24px; font-weight: 300; max-width: 720px; }
.result-no .arrow-link { margin-top: 32px; }
/* Aterrizaje tras el test: el guion centra el bloque del resultado en pantalla; cuando el bloque es más alto que la
   pantalla, ese centrado cortaba el titular por arriba. El margen de desplazamiento extiende el bloque hacia arriba
   para que el titular quede a la vista. («Encaja» lleva la caja entera arriba: ver .quiz-shell.) */
#resultNo { scroll-margin-top: 300px; }
.quiz-shell { scroll-margin-top: 24px; }

/* Cabecera de la caja en el resultado «encaja»: los pasos «Test ✓ · Tus datos · Pago» en lugar de «Resultado» y la barra */
.quiz-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 31px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.03em; color: rgba(255, 255, 255, .6); }
.quiz-steps[hidden] { display: none; }
.quiz-steps li { display: inline-flex; align-items: center; gap: 10px; }
.quiz-steps li::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .6); } /* pendiente: círculo vacío */
.quiz-steps .is-done { color: #FFFFFF; }
.quiz-steps .is-done::before { width: 18px; height: 18px; border: 0; border-radius: 0; background: var(--tick-neon) no-repeat center / 18px; } /* hecho: ✓ de neón */
.quiz-steps .is-current { color: var(--neon); }
.quiz-steps .is-current::before { border: 0; background: var(--neon); } /* ahora: punto de neón */
.quiz-shell.is-yes .progress-track, .quiz-shell.is-yes .step-label { display: none; }

.result-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; margin-top: 40px; }
.result-cols > * { min-width: 0; }
/* Resumen: tarjeta gris clara con filete fino; mismo texto que tenía la franja oscura */
/* Resumen del precio (M354; M355: sin puntos verdes). El neón queda reservado al botón de pagar del formulario, que
   es la acción; aquí todo en el gris oscuro de la marca: sin cuadrado en la etiqueta, sin círculo en «Entrega en 48 h»
   y ✓ finos sin círculo ni líneas entre ventajas. Caja recta, como las cajas de connectalia.com. */
.price-summary { background: var(--gray); border: 1px solid var(--card-line); border-radius: 0; padding: 32px; }
.price-summary .card-tag { color: #6b6b6b; }
.price-summary .card-tag::before { display: none; }
.price-summary .price { margin: 12px 0 6px; font-size: 50px; line-height: 50px; }
.price-summary .price .price-tax { display: inline; margin: 0 0 0 8px; font-size: 16.4px; }
.price-summary .card-line { display: block; font-size: 15px; font-weight: 400; color: #6b6b6b; }
.price-summary .card-line::before { display: none; }
.price-summary .list-neon { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--card-line); }
.price-summary .list-neon li { border: 0; padding: 5px 0 5px 26px; font-weight: 400; }
.price-summary .list-neon li:last-child { border: 0; }
.price-summary .list-neon li::before { top: 10px; width: 14px; height: 14px; background: var(--tick-ink) no-repeat center / 14px; border-radius: 0; }
.price-summary .note { margin-top: 18px; padding-top: 18px; max-width: none; border-top: 1px solid var(--card-line); color: #555; }
.result-cols + .js-back-to-quiz { margin-top: 32px; }

/* ── Formularios: calcados del de contacto (etiquetas bold, campos grises sin borde radio 10, botón negro radio 8).
   El de pago vive dentro del panel blanco del test, en la columna izquierda del resultado «encaja», con campos grises; el de proyecto es
   un panel gris #F4F4F4 sin borde con campos blancos, como el bloque de contacto de connectalia.com. Los botones de
   envío («Continuar al pago», «Enviar») a 56 px: son el paso siguiente y tienen que mandar. ── */
.checkout h3 { margin-bottom: 28px; font-size: 26px; line-height: 30px; letter-spacing: -.05em; } /* título de columna, como el de las tarjetas de la videollamada */
.proyecto-form h3 { margin-bottom: 32px; }
.checkout .btn, .proyecto-form .btn { min-height: 56px; font-size: 16.4px; }
.checkout .btn { background: var(--neon); color: var(--ink); font-weight: 700; } /* «Continuar al pago»: el paso siguiente, en neón (M354) */
.checkout .btn:hover { background: #00E882; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: block; }
.field > span { display: block; font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.field input, .field textarea {
  width: 100%; height: 44px; border: 0; border-radius: 10px; background: var(--field); padding: 0 16px;
  font-size: 16px; font-weight: 300; line-height: 44px; color: var(--ink);
}
.field textarea { height: 160px; line-height: 1.5; padding: 10px 16px; resize: vertical; display: block; }
.field input::placeholder, .field textarea::placeholder { color: #6B6B6B; opacity: 1; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { outline: 1px solid var(--err); outline-offset: 0; }
.fields .full { grid-column: 1 / -1; }
.checks { display: grid; gap: 14px; margin-top: 28px; }
.checks--factura { margin-top: 24px; } /* «Necesito la factura a nombre de una empresa o con NIF», bajo nombre y correo */
.fiscal { display: none; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-soft); } /* los cinco datos fiscales: solo con la casilla marcada */
.fiscal.is-open { display: block; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; line-height: 24px; font-weight: 300; cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 3px 0 0;
  border: 2px solid var(--ink); border-radius: 6px; background: #fff; cursor: pointer;
}
.check input:checked { background: var(--ink) var(--tick) no-repeat center / 12px; }
.check a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* campo trampa anti-spam: invisible para las personas */
.form-error { display: none; margin-top: 20px; font-size: 14px; line-height: 24px; font-weight: 500; color: var(--err); }
.form-error.is-visible { display: block; }
.form-actions { margin-top: 28px; }
.privacy-line { margin-top: 20px; font-size: 14px; line-height: 24px; font-weight: 300; }
.privacy-line a, .basic-info a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.basic-info { margin-top: 16px; font-size: 14px; line-height: 24px; font-weight: 300; }
.basic-info summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; min-height: 44px; }
.basic-info summary::-webkit-details-marker { display: none; }
.basic-info summary::before { content: ""; width: 12px; height: 12px; background: var(--plus) no-repeat center / 12px; }
.basic-info[open] summary::before { background-image: var(--minus); }
.basic-info ul { margin: 4px 0 0; padding-left: 18px; }
.basic-info li { margin: 6px 0; }
.basic-info b { letter-spacing: 0; }

/* «Cuéntanos tu proyecto»: panel gris sin borde (bloque de contacto de connectalia.com), campos blancos */
.proyecto-form { --field: #FFFFFF; max-width: 760px; margin: 100px 0; padding: 40px; background: var(--gray); border-radius: 0; }
.result .proyecto-form.is-inline { margin: 40px 0 0; padding: 40px; border-top: 0; }
.result .form-ok.is-inline { padding: 40px 0 0; margin-top: 40px; border-top: 1px solid var(--line); }
.form-ok { display: flex; align-items: center; gap: 14px; padding: 100px 0; font-weight: 700; }
.form-ok svg { flex: 0 0 auto; }

/* ── Pie corporativo: gris claro, logotipo apilado y barra inferior ── */
.site-foot { background: var(--gray); }
.foot-top { padding: 72px 0 56px; }
.foot-top img { width: 159px; height: auto; display: block; }
.foot-brand { display: inline-block; } /* el logotipo del pie lleva a connectalia.com en pestaña nueva (Albert, 23/09) */
.foot-bar { border-top: 1px solid var(--line-soft); padding: 22px 0 40px; font-size: 14.76px; line-height: 24px; }
/* Textos legales: menú discreto y horizontal, como la barra inferior de connectalia.com (decisión de Albert, 2026-09-23) */
.foot-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 32px; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 22px; font-weight: 300; }
.foot-legal a, .foot-legal button { color: var(--ink); opacity: .72; text-decoration: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.foot-legal a:hover, .foot-legal button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal > * + *::before { content: "|"; margin: 0 10px; opacity: .4; }

/* Botón fijo de móvil (solo en pantallas pequeñas) */
.mobile-stick {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line);
  transition: transform .25s ease;
}
.mobile-stick.is-hidden { transform: translateY(110%); pointer-events: none; }
.mobile-stick .btn { width: 100%; }

/* ── Página de gracias: mismo lenguaje (tick en un cuadrado de neón, referencia en una tarjeta gris) ── */
/* Página de gracias (rediseño 25/09): una tarjeta blanca centrada sobre fondo gris; el check es lo único en neón;
   la referencia, discreta bajo una línea fina; una sola acción, el botón oscuro de la marca. Mismos textos. */
.thanks { background: var(--gray); padding: 88px 0 112px; }
.thanks-card { max-width: 560px; margin: 0 auto; background: #FFFFFF; border: 1px solid var(--card-line); border-radius: 12px; padding: 48px 48px 40px; text-align: center; }
/* Tamaños propios de la tarjeta (25/09): el h1 general de la landing (64 px) es de portada y aquí resultaba enorme. */
.thanks-icon { width: 52px; height: 52px; margin: 0 auto 22px; background: var(--neon); border-radius: 50%; display: grid; place-items: center; }
.thanks-icon svg { width: 24px; height: 24px; }
.thanks-card h1 { font-size: 40px; line-height: 44px; letter-spacing: -.04em; }
.thanks-card .lead { margin: 14px auto 0; max-width: 420px; font-size: 16.4px; line-height: 1.6; font-weight: 300; }
.thanks-ref { margin: 30px auto 0; padding-top: 20px; border-top: 1px solid var(--line-soft); max-width: 420px; font-size: 13.5px; color: #6b6b6b; font-variant-numeric: tabular-nums; }
.thanks-ref span { color: var(--ink); font-weight: 700; letter-spacing: .02em; }
.thanks-actions { margin-top: 24px; }
.thanks-actions .btn { min-height: 46px; padding: 0 22px; }

/* ── Adaptación ── */
@media (max-width: 1100px) {
  h1 { font-size: 54px; line-height: 56px; }
  h2 { font-size: 44px; line-height: 46px; }
  .result h2 { font-size: 42px; line-height: 42px; }
  .hero-grid, .section-head { grid-template-columns: 1fr; }
  .hero-grid { gap: 48px; }
  .hero-card { max-width: 560px; }
  .section-head { gap: 16px; }
  .section-head > p { grid-column: 1; grid-row: auto; padding-bottom: 0; max-width: 560px; }
  .pain-grid, .three.revision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* «Cómo funciona» tiene 3 pasos desde el 25/09: siguen en 3 columnas hasta el móvil (en 2, uno quedaría solo). */
  .step::after { display: none; } /* en dos filas la línea ya no une los pasos */
  .cta-band .wrap { grid-template-columns: 1fr; row-gap: 36px; }
  .cta-band .wrap::after { margin-top: 4px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 44px; line-height: 46px; letter-spacing: -.05em; }
  h2, .result h2 { font-size: 36px; line-height: 38px; letter-spacing: -.045em; }
  h3 { font-size: 30px; line-height: 32px; letter-spacing: -.05em; }
  .nav { min-height: 102px; }
  .brand img { width: 183px; }
  .nav-links { display: none; }
  .hero { padding-top: 24px; }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero .lead { margin-top: 20px; font-size: 17px; }
  .hero-actions { margin-top: 28px; gap: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-grid { gap: 40px; }
  .hero-card { max-width: none; }
  .price { font-size: 50px; line-height: 50px; }
  .dotlines { margin-top: 44px; }
  .dotline:nth-child(2) { width: 66%; }
  .dotline:nth-child(3) { width: 38%; }
  .section { padding: 64px 0; }
  .hero + .section { padding-top: 56px; }
  .section-head { margin-bottom: 32px; gap: 14px; }
  .section-head > p { font-size: 16px; }
  .pain-grid, .three, .three.revision, .three.excluye, .steps, .fields { grid-template-columns: 1fr; }
  .pain-grid, .three, .steps { gap: 12px; }
  /* Tarjetas en móvil: icono o número a la izquierda del título, texto debajo a todo el ancho */
  .ico { width: 40px; height: 40px; }
  .pain { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 20px; }
  .pain .ico { margin: 0; }
  .pain b { font-size: 18px; line-height: 24px; margin: 0; }
  .pain .pain-text { grid-column: 1 / -1; margin-top: 10px; }
  .info-card { padding: 20px; }
  .revision .info-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .revision .info-card::before { width: 40px; height: 40px; margin: 0; }
  .excluye .info-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .excluye .ico { margin: 0; }
  .info-card h3 { font-size: 18px; line-height: 24px; }
  .info-card p { grid-column: 1 / -1; margin-top: 10px; }
  .excluye .info-card { padding: 20px; column-gap: 16px; }
  .excluye .excluye-txt { grid-column: auto; margin: 0; font-size: 16px; line-height: 24px; }
  /* Pasos en móvil: número a la izquierda, texto a la derecha, línea vertical que une los números */
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px; }
  .step::before { width: 48px; height: 48px; font-size: 24px; margin: 0; }
  .step::after, .step:first-child::after { display: block; top: 68px; bottom: -12px; left: 44px; right: auto; width: 1px; height: auto; }
  .step:last-child::after { display: none; }
  .step h3 { font-size: 18px; line-height: 24px; padding-top: 12px; }
  .faq { padding: 0 20px; }
  .faq summary { font-size: 18px; line-height: 24px; padding: 18px 40px 18px 0; }
  .faq summary::after { top: 23px; }
  .faq details p { padding: 0 0 22px; }
  .cta-band { padding: 64px 0; }
  .cta-band p { font-size: 16px; }
  .thanks { padding: 40px 0 56px; }
  .thanks-card { padding: 36px 22px 28px; border-radius: 10px; }
  .thanks-card h1 { font-size: 32px; line-height: 36px; }
  .thanks-card .lead { font-size: 16px; }
  .thanks-actions .btn { width: 100%; }
  /* ── Test y formularios en móvil (tal cual) ── */
  .eyebrow, .card-tag, .step-label, .result-good, .result-bad { font-size: 14px; line-height: 22px; }
  .eyebrow, .card-tag { font-size: 13px; line-height: 20px; }
  /* Panel del test: 24 px de padding; cabecera más baja; tarjetas en una columna */
  .quiz-shell { padding: 0 24px 24px; }
  .quiz-top { gap: 16px; margin: 0 -24px 28px; padding: 14px 24px; }
  .question p { margin-top: 12px; }
  .options { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .opt { gap: 14px; padding: 16px 18px; }
  .opt::before { width: 20px; height: 20px; }
  .quiz-nav .back-link { margin-top: 22px; }
  /* Resultado «encaja» en móvil: resumen y formulario en una columna (el resumen arriba, ver la regla de 900 px) */
  .result .lead { margin-top: 24px; }
  .quiz-steps { gap: 6px 20px; font-size: 15px; }
  .result-cols { margin-top: 28px; gap: 28px; }
  .price-summary { padding: 22px 16px; }
  .price-summary .price { font-size: 44px; line-height: 44px; }
  .checkout h3 { font-size: 24px; line-height: 28px; }
  #resultNo { scroll-margin-top: 900px; }
  .checkopt { column-gap: 16px; padding: 16px 0; }
  .quiz-continue .btn { width: 100%; }
  .proyecto-form { margin: 72px 0; padding: 28px 24px; }
  .form-ok { padding: 72px 0; }
  .result .proyecto-form.is-inline { margin: 24px -24px -24px; padding: 28px 24px; } /* a sangre hasta los bordes y el pie del panel */
  .result .form-ok.is-inline { padding: 32px 0 0; margin-top: 32px; }
  .foot-top { padding: 56px 0 40px; }
  .foot-bar { padding-bottom: 120px; }
  /* Textos legales en móvil (25/09): sin separadores «|» (al partir la línea quedaban sueltos al principio), en dos
     columnas alineadas, letra de 14 px y cada enlace con 40 px de alto para pulsarlo bien con el dedo. */
  .foot-legal { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin-top: 10px; font-size: 14px; line-height: 20px; width: 100%; }
  .foot-legal > * + *::before { content: none; }
  .foot-legal a, .foot-legal button { display: flex; align-items: center; min-height: 40px; text-align: left; opacity: .8; }
  .mobile-stick { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ── Injerto D1 + retoques del jurado (2026-09-23) ── */
/* Etiquetas del formulario en negrita (no versalita ligera): «Pregunta 1 de 7», «Resultado», veredicto */
.quiz-top .step-label, .result-good, .result-bad { font-size: 16px; line-height: 24px; font-weight: 700; text-transform: none; letter-spacing: -.03em; }
/* Tarjetas de respuesta: borde pleno de 1 px (menos «tarjeta de app»), relleno gris al pasar el ratón */
.opt { border-color: var(--ink); }
.opt:hover { background: var(--gray); }
/* Pregunta 5: casillas con el mismo aspecto de tarjeta, pero con cuadrado (varias a la vez) */
.options--multi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.checkopt { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 18px 20px; margin: 0; background: #fff; border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; font-size: 16.4px; line-height: 1.4; font-weight: 400; color: var(--ink); transition: background-color .15s ease, color .15s ease; }
.checkopt:hover { background: var(--gray); }
.checkopt input { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 22px; height: 22px; margin: 0; border: 1px solid var(--ink); border-radius: 4px; background: #fff; cursor: pointer; }
.checkopt:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.checkopt input:checked { background: var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3l2.6 2.6L10 3.4' fill='none' stroke='%23353535' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px; border-color: var(--neon); }
.checkopt input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.checkopt:has(input:checked) input:focus-visible { outline-color: #fff; }
.quiz-continue { margin-top: 24px; }
.quiz-continue .btn { min-height: 56px; padding: 0 28px; }
.quiz-continue .btn[disabled] { opacity: .4; cursor: not-allowed; }
@media (max-width: 640px) {
  .options--multi { grid-template-columns: 1fr; gap: 12px; }
  .checkopt { gap: 16px; padding: 16px 18px; }
  .quiz-continue .btn { width: 100%; }
  /* Panel del test a sangre en móvil: gana anchura de columna, sin bordes laterales */
  .quiz-shell { margin-left: -24px; margin-right: -24px; border-left: 0; border-right: 0; padding-left: 20px; padding-right: 20px; }
  /* Los bloques que van a sangre dentro del panel siguen el nuevo relleno de 20 px (si no, sobresalen 4 px y aparece desplazamiento lateral) */
  .quiz-top { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .result .proyecto-form.is-inline, .result .form-ok.is-inline { margin-left: -20px; margin-right: -20px; }
  .checkout .btn { font-size: 15.58px; padding: 0 14px; } /* «Continuar al pago · 39 € (IVA incluido)» en una sola línea */
}
/* ── Navegación del test: «Anterior» a la izquierda, «Continuar» a la derecha y en verde cuando se puede seguir (Albert, 23/09) ── */
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; }
.quiz-nav .back-link { margin-top: 0; }
.quiz-continue { margin: 0 0 0 auto; }
.quiz-continue .btn { min-height: 56px; padding: 0 32px; }
.quiz-continue .btn:not([disabled]) { background: var(--neon); color: var(--ink); font-weight: 700; }
.quiz-continue .btn:not([disabled]):hover { background: #00E882; }
.quiz-continue .btn[disabled] { background: var(--gray); color: var(--ink); opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .quiz-nav { flex-direction: column-reverse; align-items: stretch; gap: 20px; margin-top: 24px; }
  .quiz-continue { margin: 0; }
  .quiz-continue .btn { width: 100%; }
}
/* ── «Cuéntanos tu proyecto» integrado en la franja oscura (Albert, 23/09): toda la sección va en oscuro y el formulario
   se abre como un panel blanco justo bajo la línea de la franja, con su mismo ancho: continuidad, no una caja aparte ── */
.contact-section { background: var(--ink); padding: 0 0 85px; }
.cta-band { padding-bottom: 0; }
.contact-section .proyecto-form:not(.is-inline) { --field: #F4F4F4; max-width: none; margin: 40px 0 0; padding: 40px; background: #fff; border-radius: 8px; }
.contact-section .form-ok:not(.is-inline) { margin: 40px 0 0; padding: 32px 40px; background: #fff; border-radius: 8px; }
@media (max-width: 640px) {
  .contact-section { padding-bottom: 64px; }
  .cta-band { padding-bottom: 0; }
  .contact-section .proyecto-form:not(.is-inline) { margin: 32px 0 0; padding: 28px 20px; }
  .contact-section .form-ok:not(.is-inline) { margin: 32px 0 0; padding: 24px 20px; }
}
/* ── Decisión de Albert (23/09): respuestas con fondo gris de campo (B) y letra A, B, C… en lugar del círculo (E);
   caja del test con la cabecera oscura (2) ── */
.options { counter-reset: letra; }
.opt { counter-increment: letra; background: var(--gray); border-color: transparent; border-radius: 10px; min-height: 60px; }
.opt:hover { background: #ECECEC; border-color: transparent; }
.opt::before { content: counter(letra, upper-alpha); width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--ink); background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.opt:hover::before { border-width: 1px; background: var(--ink); color: #fff; }
.opt.selected, .opt[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt.selected::before, .opt[aria-checked="true"]::before { background: var(--neon); border-color: var(--neon); color: var(--ink); }
/* Pregunta de varias respuestas: mismo fondo gris; la casilla cuadrada se mantiene (varias a la vez) */
.checkopt { background: var(--gray); border-color: transparent; border-radius: 10px; min-height: 60px; }
.checkopt:hover { background: #ECECEC; }
.checkopt:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Caja: borde de 2 px, esquinas de 8 px y cabecera oscura con el punto verde */
.quiz-shell { border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; }
.quiz-top { background: var(--ink); color: #fff; border-bottom: 0; }
.quiz-top .step-label { color: #fff; }
.progress-track::before { background: rgba(255, 255, 255, .3); }
.progress-bar { background: #fff; }
@media (max-width: 640px) {
  .quiz-shell { border-radius: 0; border-left: 0; border-right: 0; }
  .opt::before { width: 28px; height: 28px; font-size: 12px; }
}
/* «Cambiar mis respuestas» en los resultados: enlace de vuelta, discreto */
.result .js-back-to-quiz { margin-top: 24px; }

/* ── Videollamada con TidyCal para quien no encaja (M344, prototipo A «Tira de días»). Bajo el mensaje «no encaja»: a
   la izquierda la reserva (la principal, borde de 2 px como la caja del test) y a la derecha «¿Prefieres escribirnos?»
   con el formulario «Cuéntanos tu proyecto» de siempre (el guion lo traslada aquí). En móvil, una debajo de otra.
   Solo se enseña si el servidor dice que la videollamada está encendida. ── */
.vc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; margin-top: 40px; --field: #F4F4F4; }
.vc-grid > * { min-width: 0; }
.vc-card, .vc-side { background: #FFFFFF; border-radius: 8px; padding: 32px; }
.vc-card { border: 2px solid var(--ink); }
.vc-side { border: 1px solid var(--card-line); }
.vc-grid h3 { font-size: 26px; line-height: 30px; letter-spacing: -.05em; }
.vc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 24px; padding: 0; list-style: none; font-size: 14px; line-height: 20px; font-weight: 300; }
.vc-meta li { display: inline-flex; align-items: center; gap: 6px; }
.vc-meta b { font-weight: 700; }
.vc-meta svg { flex: 0 0 auto; }
/* Tira de cinco días laborables con flechas para pasar de semana */
.vc-strip { display: flex; align-items: stretch; gap: 6px; }
.vc-arrow { flex: 0 0 auto; width: 36px; min-height: 56px; border: 1px solid var(--line-soft); border-radius: 8px; background: #FFFFFF; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.vc-arrow:hover:not([disabled]) { border-color: var(--ink); }
.vc-arrow[disabled] { opacity: .25; cursor: default; }
.vc-days { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vc-day { min-width: 0; min-height: 56px; padding: 6px 2px; border: 1px solid transparent; border-radius: 8px; background: var(--gray); color: var(--ink); font-size: 12.5px; line-height: 1.25; font-weight: 400; text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.vc-day b { display: block; font-size: 17px; line-height: 1.3; font-weight: 700; }
.vc-day:hover:not([disabled]) { background: #ECECEC; }
.vc-day[disabled] { background: #FFFFFF; border: 1px dashed var(--line-soft); color: #8A8A8A; cursor: default; }
.vc-day[aria-busy="true"], .vc-day[aria-busy="true"][disabled] { background: var(--gray); border: 1px solid transparent; color: var(--ink); opacity: .5; cursor: progress; } /* buscando horas: aún no se sabe si hay */
.vc-day[aria-pressed="true"], .vc-day[aria-pressed="true"]:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
/* Horas libres del día elegido, en rejilla de tres */
.vc-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.vc-slot { min-height: 44px; border: 1px solid var(--line-soft); border-radius: 8px; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.vc-slot:hover { border-color: var(--ink); }
.vc-slot[aria-pressed="true"] { background: var(--neon); border-color: var(--neon); }
.vc-hint { margin-top: 12px; font-size: 14px; line-height: 22px; font-weight: 300; }
.vc-hint:empty { display: none; }
/* Zona horaria: una línea discreta que solo se abre si hace falta */
.vc-tz { margin-top: 12px; font-size: 13px; line-height: 20px; font-weight: 300; }
.vc-tz b { font-weight: 700; }
.vc-tz button { padding: 0; border: 0; background: none; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vc-tz select { display: block; width: 100%; max-width: 100%; height: 44px; margin-top: 8px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; font-size: 14px; }
.vc-fields { grid-template-columns: 1fr 1fr; margin-top: 28px; }
.vc-card .checks { margin-top: 20px; }
.vc-card .form-actions { margin-top: 24px; }
.vc-btn { min-height: 56px; background: var(--neon); color: var(--ink); font-size: 16.4px; font-weight: 700; }
.vc-btn:hover { background: #00E882; }
.vc-btn[disabled] { opacity: .45; cursor: not-allowed; }
.vc-btn[aria-busy="true"] { cursor: progress; }
/* Reservado */
.vc-done-box { display: flex; align-items: flex-start; gap: 14px; margin-top: 20px; padding: 20px; border-radius: 8px; background: var(--gray); }
.vc-done-box svg { flex: 0 0 auto; }
.vc-done-box b { display: block; font-size: 17px; line-height: 24px; }
.vc-done-box p { margin-top: 6px; font-size: 14px; line-height: 22px; font-weight: 300; }
/* «¿Prefieres escribirnos?»: el formulario de siempre, sin su panel gris ni su título (lo pone la tarjeta) */
.vc-side-lead { margin-top: 10px; font-size: 14px; line-height: 22px; font-weight: 300; }
.vc-side .proyecto-form.in-vc { --field: #F4F4F4; max-width: none; margin: 24px 0 0; padding: 0; background: transparent; border-radius: 0; }
.vc-side .proyecto-form.in-vc h3 { display: none; }
.vc-side .proyecto-form.in-vc .fields { grid-template-columns: 1fr; gap: 20px; }
.vc-side .proyecto-form.in-vc .field textarea { height: 120px; }
.vc-side .form-ok.in-vc { margin: 24px 0 0; padding: 20px; border-radius: 8px; background: var(--gray); }
@media (max-width: 900px) {
  .vc-grid { grid-template-columns: 1fr; }
  .result-cols { grid-template-columns: 1fr; }
  .price-summary { order: -1; } /* en una columna, primero qué se compra y luego los datos (M354) */
}
@media (max-width: 640px) {
  .vc-grid { margin-top: 28px; gap: 16px; }
  .vc-card, .vc-side { padding: 22px 16px; }
  .vc-grid h3 { font-size: 24px; line-height: 28px; }
  .vc-strip, .vc-days { gap: 4px; }
  .vc-arrow { width: 28px; }
  .vc-day { font-size: 11.5px; padding: 6px 0; }
  .vc-day b { font-size: 15px; }
  .vc-fields { grid-template-columns: 1fr; gap: 20px; }
}