/* Formulario de arranque · FLUX.
   Comparte la base con los cuestionarios y agrega lo propio de un formulario: renglones
   repetibles, campos con sufijo, y el acuse del final.
   Animaciones solo con transform y opacity. */
:root {
  --vp: #0D2818;
  --vm: #065F46;
  --ac: #34D399;
  --ac2: #6EE7B7;
  --cr: #F5F5F0;
  --tk: #0A0A0A;
  --white: #FFFFFF;
  --line: rgba(13, 40, 24, 0.1);
  --soft: #4A574F;          /* 7.1:1 sobre el crema. El 0.55 del test corto no llegaba a 4.5:1 */
  --soft2: #5E6B64;         /* 5.4:1, para texto de 0.9rem y mayor */
  --amber: #F2B544;
  --shadow: 0 10px 40px rgba(13, 40, 24, 0.08);
  --r-lg: 28px;
  --r-md: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --text-hero: clamp(2.2rem, 1.4rem + 4vw, 3.6rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; background: var(--cr); color: var(--vp); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid var(--vm); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Marco ---------- */
.top { position: sticky; top: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 16px 12px; background: rgba(245, 245, 240, 0.9); backdrop-filter: blur(10px); }
.iso { width: 38px; height: auto; display: block; }
.progress { width: min(640px, 100%); height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--vm), var(--ac)); transform-origin: left center; transform: scaleX(0); transition: transform 0.5s var(--ease); }
/* Más ancho que el quiz de voz a propósito: aquí se elige mirando, y tres composiciones
   en una columna de 680px salen del tamaño de una estampilla. */
.app { flex: 1; width: min(880px, 100%); margin: 0 auto; padding: 8px 16px 40px; }
.foot { display: flex; justify-content: center; padding: 28px 16px 40px; }
.logo { width: 120px; height: auto; display: block; }

/* ---------- Pantallas ---------- */
.screen { min-height: calc(100vh - 220px); display: flex; flex-direction: column; justify-content: center; gap: 28px; animation: enter 0.6s var(--ease) both; }
.screen.top-aligned { justify-content: flex-start; padding-top: 12px; }
@keyframes enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm); }
.hero-title { font-size: var(--text-hero); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; }
.hero-title em { font-style: normal; color: var(--vm); background: linear-gradient(transparent 62%, rgba(52, 211, 153, 0.45) 62%); }
.h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.lead { font-size: 1.05rem; color: var(--soft); line-height: 1.55; max-width: 34ch; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 0.82rem; font-weight: 600; padding: 8px 14px; border-radius: 99px; background: var(--white); border: 1px solid var(--line); }

.actions { display: flex; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; border-radius: 16px; padding: 17px 26px; font-size: 1rem; font-weight: 700; background: var(--vp); color: var(--cr); transition: transform 0.2s var(--ease), background 0.2s; text-decoration: none; }
.btn:hover { transform: translateY(-2px); background: var(--vm); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.btn.mint { background: var(--ac); color: var(--vp); }
.btn.mint:hover { background: var(--ac2); }
.btn.ghost { background: transparent; color: var(--soft); border: 2px solid var(--line); }
.btn.ghost:hover { color: var(--vp); border-color: var(--vp); }
.btn.full { width: 100%; }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.dots { display: flex; gap: 6px; }
.dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width 0.3s var(--ease), background 0.3s; }
.dots i.on { width: 26px; background: var(--vp); }

/* Tarjetas de la intro */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { background: var(--white); border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; animation: enter 0.6s var(--ease) both; }
.tile:nth-child(2) { animation-delay: 0.06s; } .tile:nth-child(3) { animation-delay: 0.12s; } .tile:nth-child(4) { animation-delay: 0.18s; }
.tile .ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(52, 211, 153, 0.16); color: var(--vm); font-size: 1.3rem; font-weight: 700; }
.tile b { font-size: 1.05rem; letter-spacing: -0.01em; }
.tile span { font-size: 0.88rem; color: var(--soft); line-height: 1.4; }
.tile.dark { background: var(--vp); color: var(--cr); }
.tile.dark span { color: rgba(245, 245, 240, 0.65); }
.tile.dark .ic { background: rgba(52, 211, 153, 0.18); color: var(--ac); }
.steps { display: grid; gap: 12px; counter-reset: s; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; background: var(--white); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow); animation: enter 0.6s var(--ease) both; }
.step:nth-child(2) { animation-delay: 0.08s; } .step:nth-child(3) { animation-delay: 0.16s; }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-size: 1.7rem; font-weight: 700; color: var(--ac); letter-spacing: -0.04em; }
.step b { display: block; font-size: 1.05rem; } .step span { font-size: 0.88rem; color: var(--soft); }

/* Formulario */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--soft); }
.field input { font-size: 1.1rem; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--white); color: var(--vp); transition: border-color 0.2s; }
.field input:focus { outline: none; border-color: var(--ac); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg button { padding: 16px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--white); cursor: pointer; font-size: 0.98rem; font-weight: 600; color: var(--vp); display: grid; gap: 4px; text-align: left; transition: border-color 0.2s, background 0.2s; }
.seg button small { font-size: 0.78rem; font-weight: 500; color: var(--soft); }
.seg button[aria-checked="true"],
.seg button[aria-pressed="true"] { border-color: var(--ac); background: rgba(52, 211, 153, 0.1); }

/* Y que la selección se vea sin lugar a dudas: un punto que se llena. Con solo el borde
   en menta, sobre crema, no se distingue de un botón cualquiera. */
.seg.col button { position: relative; padding-left: 46px; }
.seg.col button::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border-radius: 50%; border: 2px solid var(--line); background: var(--white);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.seg.col button[aria-checked="true"]::before,
.seg.col button[aria-pressed="true"]::before {
  border-color: var(--vm); box-shadow: inset 0 0 0 4px var(--ac);
}

/* Preguntas */
.qnum { font-size: 0.85rem; font-weight: 700; color: var(--vm); letter-spacing: 0.08em; }
.qtext { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.qhint { font-size: 0.92rem; color: var(--soft); margin-top: -14px; }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 17px 18px; border-radius: 16px; border: 2px solid var(--line); background: var(--white); cursor: pointer; font-size: 1rem; line-height: 1.4; color: var(--tk); transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s; }
.opt:hover { transform: translateY(-2px); border-color: var(--ac); }
.opt .k { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--cr); font-size: 0.8rem; font-weight: 700; color: var(--soft); }
.opt[aria-checked="true"] { border-color: var(--ac); background: rgba(52, 211, 153, 0.08); }
.opt[aria-checked="true"] .k { background: var(--ac); color: var(--vp); }

/* ---------- Resultados ---------- */
.res { display: grid; gap: 14px; animation: enter 0.7s var(--ease) both; }
.card { background: var(--white); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
.card h3 { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card h3 small { font-size: 0.75rem; font-weight: 600; color: var(--soft); letter-spacing: 0.04em; white-space: nowrap; }

.hero { background: var(--vp); color: var(--cr); border-radius: var(--r-lg); padding: 30px 26px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; position: relative; overflow: hidden; }
.hero::after { content: ''; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(rgba(52, 211, 153, 0.25), transparent 70%); }
.hero .who { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac); }
.hero .arch { font-size: clamp(2rem, 1.5rem + 2.5vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 8px 0 10px; }
.hero .motto { color: rgba(245, 245, 240, 0.72); font-size: 1rem; }
.ring { position: relative; width: 112px; height: 112px; z-index: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .bg { stroke: rgba(245, 245, 240, 0.12); }
.ring .fg { stroke: var(--ac); stroke-linecap: round; transition: stroke-dashoffset 1.4s var(--ease); }
.ring .val { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring .val b { font-size: 1.7rem; letter-spacing: -0.04em; display: block; line-height: 1; }
.ring .val span { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245, 245, 240, 0.6); }

/* Barras horizontales con porcentaje */
.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 112px 1fr 48px; gap: 12px; align-items: center; font-size: 0.92rem; font-weight: 600; }
.bar .track { height: 12px; border-radius: 99px; background: var(--cr); overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vm), var(--ac)); transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease); }
.bar.top .track i { background: linear-gradient(90deg, var(--vp), var(--ac)); }
.bar .pct { text-align: right; font-variant-numeric: tabular-nums; }
.bar.muted { color: var(--soft); }

/* Motivaciones: barra apilada */
.stack { display: flex; height: 18px; border-radius: 99px; overflow: hidden; gap: 3px; }
.stack i { display: block; height: 100%; transform-origin: left center; transform: scaleX(0); transition: transform 1s var(--ease); }
.legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; margin-top: 16px; }
.legend div { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; }
.legend i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Tono: radar + ejes */
.tone { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: center; }
.radar { width: 100%; height: auto; }
.radar .grid { fill: none; stroke: var(--line); }
.radar .you { fill: rgba(52, 211, 153, 0.35); stroke: var(--vm); stroke-width: 2; transform-origin: 110px 110px; transform: scale(0); transition: transform 1.2s var(--ease); }
.radar .typ { fill: none; stroke: var(--vp); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: 0.45; }
.radar text { font-size: 9px; font-weight: 700; fill: var(--soft); letter-spacing: 0.06em; text-transform: uppercase; }
.axes { display: grid; gap: 20px; }
/* La lectura va en su propia línea. Puesta entre los dos polos con space-between, un texto
   como «Mixto: depende del canal o de la persona» se encimaba con ambos. */
.axis .alect { font-size: 0.88rem; font-weight: 700; color: var(--vp); display: flex; align-items: center; gap: 8px; }
.atag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: rgba(242, 181, 68, 0.22); color: #6B4A05; }
.atag.gris { background: var(--cr); color: var(--soft2); }
.axis .polos { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft2); }
.axis .rail { position: relative; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--cr), rgba(52, 211, 153, 0.35)); margin-top: 8px; }
.axis .kw { position: absolute; inset: 0; transform: translateX(0); transition: transform 1.1s var(--ease); }
.axis .knob { position: absolute; top: 50%; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--vp); border: 3px solid var(--ac); }
.key { display: flex; gap: 16px; font-size: 0.78rem; color: var(--soft); margin-top: 12px; }
.key i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Chat */
.chat { background: #E9EFEA; border-radius: var(--r-md); padding: 16px; display: grid; gap: 10px; }
.bub { justify-self: start; max-width: 88%; background: var(--white); border-radius: 16px 16px 16px 4px; padding: 11px 14px; font-size: 0.95rem; line-height: 1.4; box-shadow: 0 2px 6px rgba(13, 40, 24, 0.06); opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s var(--ease); }
.bub small { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vm); margin-bottom: 4px; }
.in .bub { opacity: 1; transform: none; }
.in .bub:nth-child(2) { transition-delay: 0.25s; } .in .bub:nth-child(3) { transition-delay: 0.5s; }

/* Tabla de palabras */
.words { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.words th { text-align: left; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 0 10px; }
.words th.yes { color: var(--vm); } .words th.no { color: #B42318; }
.words td { padding: 9px 0; border-top: 1px solid var(--line); width: 50%; }
.words td.no { color: rgba(180, 35, 24, 0.85); padding-left: 12px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mini .big { font-size: 1.9rem; letter-spacing: 0.08em; }
.mini p { font-size: 0.9rem; color: var(--soft); margin-top: 6px; }
.meter { display: flex; gap: 5px; margin-top: 12px; }
.meter i { flex: 1; height: 8px; border-radius: 99px; background: var(--cr); }
.meter i.on { background: var(--ac); }

.cta { background: var(--vp); color: var(--cr); border-radius: var(--r-lg); padding: 30px 26px; display: grid; gap: 16px; text-align: center; justify-items: center; }
.cta h3 { font-size: 1.45rem; letter-spacing: -0.02em; line-height: 1.2; max-width: 22ch; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

details.how { background: transparent; border: 2px dashed var(--line); border-radius: var(--r-md); }
details.how summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary::after { content: '+'; font-size: 1.4rem; color: var(--vm); transition: transform 0.3s var(--ease); }
details.how[open] summary::after { transform: rotate(45deg); }
details.how ul { padding: 0 20px 18px 38px; display: grid; gap: 8px; font-size: 0.9rem; color: var(--soft); line-height: 1.5; }

/* ---------- Partes de la intro ---------- */
.pasos { display: grid; gap: 10px; }
.pas { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; background: var(--white); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow); }
.pas .pk { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--vp); color: var(--ac); font-weight: 700; }
.pas b { display: block; font-size: 1.02rem; }
.pas span { font-size: 0.88rem; color: var(--soft2); line-height: 1.45; }

/* ---------- Bloque A · escala de 1 a 5 ---------- */
.vinetas { display: grid; gap: 12px; }
.vin { background: var(--white); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color 0.2s; }
.vin.contestada { border-color: rgba(52, 211, 153, 0.5); }
.vsit { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vm); }
.vmsg { margin-top: 8px; font-size: 1.02rem; line-height: 1.5; color: var(--tk); }
.lik { margin-top: 14px; display: flex; align-items: center; gap: 6px; }
.lik .lmin, .lik .lmax { font-size: 0.68rem; color: var(--soft2); line-height: 1.2; flex: 1 1 0; }
.lik .lmax { text-align: right; }
.lk { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); background: var(--cr); cursor: pointer; font-size: 0.95rem; font-weight: 700; color: var(--soft); transition: transform 0.18s var(--ease), background 0.18s, border-color 0.18s, color 0.18s; }
.lk:hover { transform: translateY(-2px); border-color: var(--ac); }
.lk.on { background: var(--vp); border-color: var(--vp); color: var(--cr); }

/* ---------- Bloque B · opción alta (desempate) ---------- */
.opt.alto { align-items: flex-start; }
.opt.alto .k { margin-top: 2px; }

/* ---------- Bloque C · campos abiertos ---------- */
.campos { display: grid; gap: 16px; }
.clab { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--vp); }
.field textarea { font-family: inherit; font-size: 1rem; line-height: 1.5; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--white); color: var(--vp); resize: vertical; min-height: 84px; transition: border-color 0.2s; }
.field textarea:focus { outline: none; border-color: var(--ac); }
.seg.col { grid-template-columns: 1fr; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipb { font-size: 0.88rem; font-weight: 600; padding: 9px 14px; border-radius: 99px; border: 2px solid var(--line); background: var(--white); color: var(--soft); cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s, text-decoration-color 0.18s; }
.chipb:hover { border-color: var(--vp); color: var(--vp); }
.chipb.on { background: var(--vp); border-color: var(--vp); color: var(--cr); text-decoration: line-through; text-decoration-thickness: 2px; }
.chipb.fijo { cursor: not-allowed; background: rgba(180, 35, 24, 0.08); border-color: rgba(180, 35, 24, 0.35); color: #8E2A1E; text-decoration: none; }

.nota { font-size: 0.88rem; line-height: 1.5; color: var(--soft2); }
.nota.opcional { border-left: 3px solid var(--line); padding-left: 12px; }
.nota.aviso { background: rgba(242, 181, 68, 0.14); border-radius: 12px; padding: 12px 14px; color: #6B4A05; }
.nota.ok { background: rgba(52, 211, 153, 0.16); border-radius: 12px; padding: 12px 14px; color: #0A4C34; }

/* ---------- Resultado ---------- */
.desc { font-size: 1.02rem; line-height: 1.6; }
.desc.sec { margin-top: 10px; color: var(--soft2); }
.axis.mixto .knob { background: var(--amber); border-color: var(--vp); }
.axis.vacio .rail { background: var(--line); }
.axis.vacio .knob { background: var(--white); border-color: var(--line); }
.axnota { font-size: 0.8rem; line-height: 1.45; color: var(--soft2); margin-top: 8px; }
.bub { white-space: pre-line; }
.burb-alerta { color: #8E2A1E; font-weight: 600; }
.reglas { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.reglas th { text-align: left; font-weight: 600; color: var(--soft2); padding: 9px 12px 9px 0; border-top: 1px solid var(--line); width: 46%; vertical-align: top; }
.reglas tr:first-child th, .reglas tr:first-child td { border-top: 0; }
.reglas td { padding: 9px 0; border-top: 1px solid var(--line); }
.lista { display: grid; gap: 8px; padding-left: 20px; font-size: 0.95rem; line-height: 1.5; }
.lista.chico { font-size: 0.9rem; color: var(--soft2); }
.lista .tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8E2A1E; background: rgba(180, 35, 24, 0.1); padding: 2px 7px; border-radius: 99px; }
.card.alerta { border: 2px solid rgba(180, 35, 24, 0.3); }
.card.alerta h3 { color: #8E2A1E; }
.hall { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.hsrc { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft2); }
.hcit { margin-top: 6px; font-size: 0.95rem; line-height: 1.5; font-style: italic; color: var(--tk); }
.hreg { margin-top: 8px; font-size: 0.88rem; line-height: 1.5; color: var(--soft2); }
.hreg b { color: #8E2A1E; }
.hbase { display: block; margin-top: 3px; font-size: 0.76rem; color: var(--soft2); }
.howbody { padding: 0 20px 18px; }
.subt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vm); margin: 16px 0 8px; }
.lineas { display: grid; gap: 12px; padding-left: 18px; }
.lineas li b { display: block; font-size: 0.96rem; }
.lineas li span { display: block; font-size: 0.88rem; line-height: 1.5; color: var(--soft2); margin-top: 2px; }
.lineas li em { display: block; font-size: 0.76rem; color: var(--soft2); margin-top: 3px; font-style: normal; }

/* ---------- Muestras que se califican (parte A) ---------- */
.muestras { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.muestra { background: var(--white); border-radius: var(--r-md); padding: 12px; box-shadow: var(--shadow); border: 2px solid transparent; transition: border-color 0.2s; }
.muestra.contestada { border-color: rgba(52, 211, 153, 0.5); }
.lienzo { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
.muestra .lik { margin-top: 10px; }

/* ---------- Composiciones que se eligen (parte B) ---------- */
.lienzos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lienzos.dos { grid-template-columns: 1fr 1fr; }
.pick { display: block; width: 100%; text-align: left; padding: 10px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--white); cursor: pointer; transition: transform 0.2s var(--ease), border-color 0.2s, background 0.2s; }
.pick:hover { transform: translateY(-3px); border-color: var(--ac); }
.pick[aria-checked="true"] { border-color: var(--ac); background: rgba(52, 211, 153, 0.1); }
.pick .pie { display: block; margin-top: 9px; font-size: 0.8rem; line-height: 1.35; color: var(--soft2); }
.pick[aria-checked="true"] .pie { color: var(--vp); font-weight: 600; }

/* ---------- Resultado ---------- */
.aplic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aplic svg { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sw i { display: block; height: 56px; border-radius: 12px; border: 1px solid var(--line); }
.sw b { display: block; font-size: 0.84rem; margin-top: 8px; }
.sw span { font-size: 0.74rem; color: var(--soft2); font-variant-numeric: tabular-nums; }
.cita { font-family: inherit; font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; background: var(--cr); border-radius: 12px; padding: 14px 16px; margin: 0; }
.chipb.marca.on { text-decoration: none; }

/* ---------- Campos del formulario ---------- */
.chint { display: block; font-size: 0.82rem; line-height: 1.45; color: var(--soft2); margin: -2px 0 2px; }
.req { color: #B42318; font-style: normal; margin-left: 4px; }
.conSufijo { position: relative; display: flex; align-items: center; }
.conSufijo input { flex: 1; }
.sufijo { position: absolute; right: 16px; font-size: 0.85rem; color: var(--soft2); pointer-events: none; }

/* ---------- Renglones repetibles ---------- */
.lista { display: grid; gap: 8px; }
.lcab { display: flex; gap: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft2); padding: 0 2px; }
.lcab .lquita { flex: none; width: 34px; }
.lfila { display: flex; gap: 8px; align-items: stretch; }
.lfila input { flex: 1; min-width: 0; font-size: 0.98rem; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--white); color: var(--vp); }
.lfila input:focus { outline: none; border-color: var(--ac); }
.lquita { flex: none; width: 34px; border: 0; background: transparent; color: var(--soft2); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 10px; }
.lquita:hover { background: rgba(180, 35, 24, 0.09); color: #8E2A1E; }
.btn.chico { padding: 10px 16px; font-size: 0.88rem; justify-self: start; margin-top: 2px; }

/* ---------- Revisión y acuse ---------- */
.lista-ul { display: grid; gap: 10px; padding-left: 20px; font-size: 0.95rem; line-height: 1.5; }
.lista-ul .si { color: var(--vm); font-weight: 600; }
.lista-ul .no { color: #8E2A1E; font-weight: 600; }
.enlace { border: 0; background: transparent; color: var(--vm); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0 2px; }
.pasos-ol { display: grid; gap: 10px; padding-left: 20px; font-size: 0.97rem; line-height: 1.55; }
.pasos-ol li::marker { color: var(--ac); font-weight: 700; }
.card.suave { background: rgba(52, 211, 153, 0.07); box-shadow: none; border: 1px solid rgba(52, 211, 153, 0.3); }
.card.suave .nota { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(52, 211, 153, 0.25); }
.card.destacada { border: 2px solid var(--ac); }
.sigue { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); }
.sigue b { display: block; font-size: 1.02rem; }
.sigue span { display: block; font-size: 0.88rem; line-height: 1.5; color: var(--soft2); margin-top: 4px; }
.sigue .btn { flex: none; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { padding: 16px; }
  .hero { grid-template-columns: 1fr; }
  .ring { justify-self: start; }
  .tone { grid-template-columns: 1fr; }
  .radar { max-width: 300px; justify-self: center; }
  .bar { grid-template-columns: 96px 1fr 44px; font-size: 0.86rem; }
  .duo, .row { grid-template-columns: 1fr; }
  .card { padding: 22px 18px; }
  .muestras { grid-template-columns: 1fr; }
  .sigue { flex-direction: column; align-items: stretch; }
  .sigue .btn { width: 100%; }
  /* En teléfono un renglón no cabe en fila: cada campo baja y la cabecera sobra. */
  .lcab { display: none; }
  .lfila { flex-wrap: wrap; background: var(--white); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); position: relative; }
  .lfila input { flex: 1 1 100%; }
  .lfila .lquita { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; }
  .lienzos, .lienzos.dos { grid-template-columns: 1fr; }
  .aplic { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
  .lik { flex-wrap: wrap; justify-content: space-between; gap: 6px 0; }
  .lik .lmin, .lik .lmax { flex: 1 1 50%; order: 3; }
  .lk { width: 18%; height: 46px; }
  .vin { padding: 16px 14px; }
  .chipb { font-size: 0.84rem; padding: 8px 12px; }
}

/* ─────────────────────────────── Calendario de la sesión de arranque
   El alto real lo pone el propio widget por postMessage (ver acuse.js). El 640 de aquí es
   solo el piso mientras carga, para que la tarjeta no salte cuando aparezca. */
.cal-slot { position: relative; min-height: 640px; margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); }
.cal-slot iframe { display: block; width: 100%; height: 640px; border: 0; opacity: 0; transition: opacity 0.4s var(--ease); }
.cal-slot.listo iframe { opacity: 1; }
.cal-cargando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 0.9rem; color: var(--soft); transition: opacity 0.3s; }
.cal-slot.listo .cal-cargando { opacity: 0; pointer-events: none; }
.cal-cargando .spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ac); animation: giro 0.9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  /* Chrome no imprime fondos ni degradados si no se le pide explícitamente. Sin esta regla,
     la portada verde, las barras y las burbujas salen en blanco. */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .top, .foot, .cta, .row { display: none !important; }
  /* Un calendario en papel es un hueco de 640px: el texto de la tarjeta ya dice qué hacer. */
  .cal-slot { display: none !important; }
  body { background: #fff; }
  .card, .hero { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
  .bub { opacity: 1 !important; transform: none !important; }
  /* Las líneas rojas sí se imprimen: es la parte que tiene que quedar en papel. */
  details.how { border-color: #ccc; }
  details.how summary { font-size: 1rem; }
  /* Las barras y el radar NO se tocan aquí: su valor va en el estilo inline que puso el JS.
     Un transform:none !important las dejaría todas al 100%. El JS las dispara antes de imprimir. */
}