/* CRO: keep the existing brand, flow and lead contract. */
.lead strong{color:var(--ink);font-weight:700}
.opt{background:var(--accent);color:var(--ink);font-weight:600}
.opt svg{opacity:1;width:22px;height:22px}
.opt small{color:var(--ink);font-weight:400}
.opt:hover{background:var(--accent-press)}
.opt:active,.opt[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.opt:active small,.opt[aria-pressed="true"] small{color:var(--ground)}
.opt[data-value="no"]{background:var(--tile);font-size:16px;font-weight:400}
.opt[data-value="no"]:hover{background:var(--tile-press)}
.opt[data-value="no"]:active,.opt[data-value="no"][aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.cta:hover:not(:disabled){background:var(--accent-press)}
.step[data-step="contacto"]{padding-top:24px;padding-bottom:20px}
.step[data-step="contacto"] h2{font-size:30px;line-height:1.12}
.step h2[tabindex="-1"]:focus{outline:none}
.step[data-step="contacto"] .lead{font-size:16px;line-height:1.4;margin-top:8px}
#form .field{margin-top:12px}
#form .field label{font-size:14px;margin-bottom:4px}
#form .input{height:48px;font-size:16px;padding:0 12px}
#form .prefix span{padding:0 12px;font-size:16px}
#form .check{margin-top:14px;font-size:13px;line-height:1.4;gap:10px;position:relative}
#form .check input{width:24px;height:24px;margin-top:0}
#form .check::before{content:"";position:absolute;left:0;top:-8px;width:44px;height:44px}
#form .check a{position:relative;text-underline-offset:2px}
.contact-responsible{font-size:12px;line-height:1.4;margin-top:12px;color:var(--ink-soft)}
#form .contact-responsible+.check{margin-top:6px}
.foot-links{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}
.foot-links a,.foot-links button{display:inline-flex;align-items:center;min-height:44px}
.foot-links button{border:0;background:none;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
#form .cta{min-height:52px;margin-top:16px;font-size:18px}
#form .err:not(:empty){margin-top:4px;font-size:13px;line-height:1.35}
#form .err:empty{margin-top:0}
#form .linkbtn{font-size:14px;padding:4px 0}
.contact-notice{font-size:13px;line-height:1.45;margin-top:14px;color:var(--ink-soft)}
.contact-notice a{color:var(--ink);text-underline-offset:2px}
@media(max-width:599px){
  .step[data-step="contacto"]{padding-top:16px}
  .step[data-step="contacto"] h2{font-size:26px}
  #form .field{margin-top:10px}
  #form .check{margin-top:12px}
  #form .cta{margin-top:14px}
}
@media(max-height:650px) and (max-width:599px){
  body.contact-mode .top .wrap{height:52px}
  body.contact-mode .top .logo{height:30px}
  body.contact-mode .back{top:4px}
  .step[data-step="contacto"]{padding-top:12px;padding-bottom:12px}
  .step[data-step="contacto"] .lead{font-size:15px;margin-top:6px}
  #form .field{margin-top:8px}
  #form .input{height:44px}
  #form .field label{font-size:13px;margin-bottom:3px}
  #form .check{margin-top:10px;font-size:12px}
  #form .cta{margin-top:12px;min-height:48px}
}

/* Answer buttons share dimensions across every question at each viewport. */
#main .opt{height:64px;min-height:64px;padding:8px 14px;font-size:18px;line-height:1.25}
#main .opt small{font-size:13px;line-height:1.25;margin-top:0}
@media(max-width:799px){#main .opt{height:60px;min-height:60px;font-size:17px}}
@media(max-height:650px) and (max-width:799px){#main .opt{height:52px;min-height:52px;padding:6px 14px;font-size:16px}#main .opt small{font-size:12px}}