/* TuSmartMatch — edición clara, noviembre 2026.
   CSS adicional: conserva la aplicación y permite volver al tema anterior retirando este archivo. */
:root {
  color-scheme: light;
  --navy: #f6f8fa;
  --navy2: #ecf4f5;
  --navy3: #e4f1f2;
  --cyan: #008d92;
  --teal: #087e85;
  --blue: #326fb4;
  --text: #152b3d;
  --muted: #607687;
  --line: #e0e8ed;
  --surface: #ffffff;
  --shadow: 0 22px 60px rgba(28, 68, 89, .065);
}
html { scroll-padding-top: 24px; }
body {
  color:var(--text);
  background:linear-gradient(180deg,#ffffff 0%,#f7fafb 45%,#f3f8f9 100%);
  font-family: Inter, ui-sans-serif, system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
button,select,input { accent-color:#118f93; }
.topbar {
  height:79px;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid #e7eef1;
  box-shadow:0 2px 15px #223e4a08;
}
.brand { color:#163249; font-weight:790; }
.brand-accent { color:#008e94; }
.brand-symbol i { background:linear-gradient(180deg,#19c5b9,#1382ad); }
.topnav { color:#435a6c; font-weight:600; }
.topnav a:hover,.text-link:hover { color:#00767c; }
.version { color:#85949e; font-weight:450; }
.welcome { min-height:605px; gap:5%; padding-block:82px 68px; }
.eyebrow,.section-kicker,.category-label { color:#008f91; }
.dot { background:#11b5aa; box-shadow:0 0 0 4px #d7f7f0; }
h1,h2,h3 { color:#142c41; letter-spacing:-.045em; }
h1 { font-size:clamp(2.9rem,5.15vw,5.35rem); line-height:1.12; }
.hero-copy h1 { margin:22px 0 25px; }
.gradient-text {
  background:linear-gradient(93deg,#009d9a 0%,#0e838b 55%,#306ab2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-intro { color:#536b7b; max-width:565px; line-height:1.85; }
.btn { border-radius:11px; box-shadow:none; }
.primary { background:#087f87;color:#fff;box-shadow:0 10px 24px #087f8724; }
.primary:hover { background:#056970; }
.secondary { background:white;color:#285267;border-color:#d1e0e6; }
.secondary:hover { background:#edf7f7;border-color:#6fc7c4; }
.text-link { color:#007b83; }
.fine-print { color:#81929e; }
.btn:focus-visible,.skip:focus-visible,.answer-card:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #39aba6;outline-offset:3px;
}
/* Area visual pastel, con teléfono y chips sobre tarjetas blancas */
.hero-visual {
  min-height:425px;
  border:1px solid #cfe7e7;
  border-radius:27px;
  background:radial-gradient(ellipse at 77% 15%,#c9e8f5 0%,transparent 45%),
             linear-gradient(143deg,#e4f7f0 0%,#e5f2f9 62%,#f8fcfe 100%);
  box-shadow:0 24px 65px #26798a13;
}
.hero-visual:after {
  content:"";position:absolute;width:270px;height:270px;right:-112px;bottom:-144px;
  border-radius:50%;border:32px solid #ffffff70;pointer-events:none;
}
.glow { background:radial-gradient(ellipse at 43% 51%,#a1ddda88,transparent 58%);opacity:.8;filter:blur(20px); }
.micro-label { color:#497b85;font-weight:750; }
.live-dot { color:#00a59c; }
.device-outline {
  border:5px solid #173d51;
  background:linear-gradient(158deg,#fff,#edfbfb);
  box-shadow:0 17px 45px #16485c25,0 0 0 13px #ffffff7d,inset 0 0 25px #b8e5e53b;
  transform:rotate(-7deg);
}
.device-speaker { background:#294d5a; }
.device-bars span { background:linear-gradient(#5ad9c9,#0f8e9a); }
.device-label { color:#357684; }
.floating-tag {
  border:1px solid #d2e5e7;background:#fff;color:#284d5b;
  box-shadow:0 11px 25px #1a5f711b;border-radius:11px;font-weight:650;
}
.floating-tag b { color:#028f8e; }
.tag-1 { top:31px;left:0; }
.tag-2 { top:105px;right:-3%; }
.tag-3 { bottom:37px;left:-2%; }
.visual-footer { border-top:1px solid #c9e1e3;color:#5e8390; }
.visual-footer b { color:#088c8c; }
.stats { border-top:1px solid #e3edf1;border-bottom:1px solid #e3edf1; }
.stats strong { color:#1b4558; }
.stats small { color:#7a8f9a; }
.quiz-section { padding-block:64px 80px; }
.quiz-header #progress-label { color:#627988; }
.progress-track { background:#dfebec;height:7px; }
.progress-fill { background:linear-gradient(90deg,#1a9a95,#49cdbb); }
.quiz-card {
  background:#fff;
  border:1px solid #e1ebef;
  border-radius:24px;
  box-shadow:0 18px 60px #2a5b7410;
}
.percentage { color:#78929e; }
.question-hint { color:#61798a; }
.answer-card {
  background:#f9fbfc;color:#264459;border:1px solid #dbe7ea;
  border-radius:13px;
}
.answer-card:hover { background:#f1faf9;border-color:#53b3b3; }
.answer-card.selected { color:#145055;background:#e7f8f5;border-color:#12958f;box-shadow:inset 0 0 0 1px #149c9a21; }
.answer-indicator { border-color:#9db4c0;color:transparent; }
.selected .answer-indicator { background:#0e9491;border-color:#0e9491;color:#fff; }
.group-label,.photo-row label { color:#355468; }
.photo-row select,.admin-input { background:#fff;border-color:#cbdde5;color:#244455; }
.question-actions { border-top:1px solid #e6ecef; }
.skip { color:#607c8b; }
.quiz-error { color:#b33e32; }
.quiz-footnote { color:#8397a2; }
.nps-labels { color:#7c909a; }
.budget-box {
  padding:24px 25px 18px;
  border:1px solid #d8e9e7;
  background:linear-gradient(135deg,#f3fbf9,#f8fbff);
  border-radius:17px;
}
.budget-value label { color:#577385;font-weight:620; }
.budget-value input {
  background:#fff;border:1px solid #d2e2e6;color:#164458;
  border-radius:10px;max-width:100%;
}
.budget-line .base { background:#d0e4e3;height:9px; }
.budget-line .range-fill { background:linear-gradient(90deg,#07888c,#26b7ab);height:9px; }
.budget-line input[type=range]::-webkit-slider-thumb {
  border:4px solid #fff;background:#07918e;width:27px;height:27px;
  box-shadow:0 2px 12px #147b9a38,0 0 0 2px #0b9993;
}
.budget-line input[type=range]::-moz-range-thumb {
  border:4px solid #fff;background:#07918e;width:23px;height:23px;
  box-shadow:0 2px 12px #147b9a38,0 0 0 2px #0b9993;
}
.budget-ticks { color:#698492; }
.budget-hint { color:#698391; }
.budget-selection { margin:8px 0 2px;font-weight:700;color:#176371;font-size:.91rem; }
.budget-openend {
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  background:#e0f5ee;color:#176657;padding:6px 11px;border-radius:8px;font-size:.78rem;font-weight:650;
}
.results-heading p { color:#647c89; }
.result-info { background:#e9f8f5;border-left:3px solid #0b9b93;color:#286f70; }
.result-card {
  background:#fff;border:1px solid #dfebef;border-radius:18px;
  box-shadow:0 11px 32px #275d7411;
}
.result-card:first-child { border:1.5px solid #1aa9a4;box-shadow:0 16px 34px #15969018; }
.result-rank { color:#078b89; }
.result-sub { color:#718894; }
.score-number { color:#078e8a; }
.score-number small { color:#718994; }
.price { color:#20495b; }
.scorebar { background:#e1eeef; }
.scorebar i { background:linear-gradient(90deg,#087f91,#36c9aa); }
.result-meta { border-top:1px solid #e7eef1; }
.result-meta small { color:#7e919d; }
.result-meta b { color:#315567; }
.reason { color:#55707f; }
.notice { background:#fff8ed;border-color:#f1d3a9;color:#896029; }
.card-link { background:#f0faf9;border-color:#b7dfdc;color:#087d7d; }
.card-link:hover { background:#dff5f1; }
.result-disclaimer { color:#8195a0; }
.method-section { background:#eff6f7;border-top:1px solid #e1ebee; }
.method-heading p { color:#607b89; }
.method-index { color:#8c9eaa; }
.method-card { background:#fff;border:1px solid #deebee;border-radius:17px;box-shadow:0 10px 25px #24576d08; }
.method-number { color:#008d89; }
.method-card p { color:#637e8b; }
.method-details { background:#fff;border:1px solid #dbe8ec;border-radius:13px; }
.method-details summary { color:#244356; }
.method-details summary span { color:#078d88; }
.detail-body { color:#5c7383; }
.detail-body b { color:#224459; }
.detail-body code { color:#077a7a;background:#f1f8f8;border-radius:3px;padding:0 3px; }
.site-footer { background:#fff;border-top:1px solid #e0eaef; }
.footer-flex { color:#7b919d; }
.footer-brand { color:#1b3d4f; }
.loading { color:#2d7c80; }
.error-banner { color:#933a30;background:#fff1ed; }
@media(max-width:900px) {
  .welcome { padding-block:56px; }
  .hero-visual { max-width:580px; }
}
@media(max-width:640px) {
  .topbar { height:66px; }
  .welcome { padding-block:47px 44px;gap:25px; }
  .hero-visual { min-height:375px; }
  .tag-1{left:0}.tag-2{right:0}.tag-3{left:0}
  .budget-box { padding:17px 14px 15px; }
  .budget-value input { width:100%; }
  .budget-ticks { font-size:.7rem; }
  .budget-selection { font-size:.86rem; }
  .quiz-card { border-radius:16px; }
}

/* Confirmación no intrusiva del guardado anónimo del cuestionario. */
.save-bar { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; margin:12px 0 22px; }
#save-status { color:#66818c;font-size:.88rem;line-height:1.5; }
#save-status[data-state="saved"] { color:#08766b;font-weight:600; }
#save-status[data-state="error"] { color:#a34839;font-weight:600; }
#save-retry { font-size:.82rem;padding:9px 15px; }
#save-retry[hidden] { display:none!important; }

/* Campo de marca libre, visible sólo al elegir «Otra marca». */
.other-brand-entry {
  width:100%;margin-top:18px;padding:20px 22px;
  background:linear-gradient(135deg,#f2faf9,#f8fbff);
  border:1px solid #c7e5e3;border-radius:15px;
}
.other-brand-entry label {display:block;margin-bottom:9px;font-weight:700;color:#24465b;font-size:.93rem;}
.other-brand-input {
  display:block;width:100%;min-height:48px;box-sizing:border-box;padding:12px 14px;
  color:#153b4d;background:#fff;border:1px solid #b8d3dc;border-radius:10px;
  font:inherit;font-size:1rem;
}
.other-brand-input:focus {border-color:#0b958e;box-shadow:0 0 0 3px #0b958e1a;}
.other-brand-help {margin:10px 0 0;font-size:.82rem;line-height:1.5;color:#617b88;}
@media (max-width:600px){.other-brand-entry{padding:16px 14px;margin-top:14px;}}

.footer-links a[aria-current=page] { color:#00767c; }
.legal-body { background:#fff;border:1px solid #deebee;box-shadow:0 10px 25px #24576d08; }
.legal-body section+section { border-top:1px solid #e6ecef; }
.legal-body p,.legal-body li { color:#536b7b; }
.legal-body li::marker { color:#008d89; }
.legal-body a { color:#007b83; }
.legal-body a:hover { color:#056970; }