/* ============================================================================
   ESTILOS DE LA MAQUETA · copiados literalmente de
   Propuesta-Sitio-y-Posicionamiento.html (rediseño de Julio).

   NO se editan a mano: si la maqueta cambia, se vuelve a extraer. Lo que haga
   falta ajustar va en app.css, después de este archivo.
   ============================================================================ */
/* Los rotulos de los cuadros de poder adquisitivo van parejos, para que las
   tres cifras arranquen a la misma altura (Tono-y-Voz.md 1bis.3). */
@media (min-width:768px){ .rotulo-cuadro{min-height:3.4em} }

  html{scroll-behavior:smooth;font-size:18px}
  /* ===== MODO CLARO (Diseno.md 1-bis.4: cian y rojo se intensifican) ===== */
  body.light{background:#F2F4F7;color:#0A0B0D}
  body.light .bg-base{background-color:#F2F4F7 !important}
  body.light .bg-base\/95{background-color:rgba(242,244,247,.95) !important}
  body.light .bg-card{background-color:#FFFFFF !important}
  body.light .bg-card2,body.light .bg-card2\/40{background-color:#E9ECF1 !important}
  body.light .hover\:bg-card:hover{background-color:#FFFFFF !important}
  body.light .hover\:bg-card2:hover{background-color:#E9ECF1 !important}
  body.light .bg-cyan{background-color:#0E7C8C !important}
  body.light .text-base{color:#F2F4F7 !important}
  body.light .text-ink{color:#0A0B0D !important}
  body.light .text-cyan{color:#0E7C8C !important}
  body.light .fill-cyan{fill:#0E7C8C !important}
  body.light .text-gris{color:#5A616B !important}
  body.light .text-micro{color:#6B7280 !important}
  body.light .text-rojo{color:#B03B37 !important}
  body.light .bg-rojo{background-color:#B03B37 !important}
  body.light .border-hair,body.light .border-hair-b,body.light .border-hair-t{border-color:rgba(10,11,13,.12) !important}
  body.light .divide-white\/10>*+*{border-color:rgba(10,11,13,.12) !important}
  body.light .bg-white\/10{background-color:rgba(10,11,13,.10) !important}
  body.light .ring{border-color:#0E7C8C !important}
  body.light input,body.light select{background-color:#FFFFFF !important;color:#0A0B0D !important}
  body.light ::selection{background:#0E7C8C;color:#F2F4F7}

  body{background:#0A0B0D;color:#F2F4F7;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .h-black{font-weight:900;letter-spacing:-0.02em;line-height:0.96}
  .border-hair{border:1px solid rgba(242,244,247,0.10)}
  .border-hair-b{border-bottom:1px solid rgba(242,244,247,0.10)}
  .border-hair-t{border-top:1px solid rgba(242,244,247,0.10)}
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}
  .tick{font-variant-numeric:tabular-nums}
  /* checklist: senalamiento de respuesta faltante y eleccion de pago */
  .falta{border-color:#D9534F !important}
  .pago-op{opacity:.62}
  .pago-op:hover{opacity:.85}
  .pago-on{opacity:1;border-color:#22D3EE !important;box-shadow:0 0 0 1px #22D3EE inset}
  .pago-op input:disabled{opacity:.5;cursor:not-allowed}
  details>summary{list-style:none;cursor:pointer}
  details>summary::-webkit-details-marker{display:none}
  details[open] .plus{transform:rotate(45deg)}
  .wordmark{font-family:'Special Elite',monospace !important}
  .ring{border:1.5px solid #22D3EE;border-radius:9999px;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1}
  .hidden{display:none}
  .page{display:none}
  .page.active{display:block}
  .flow{display:none}
  .flow.active{display:block}
  .chip{font-size:12px;padding:6px 12px;border-radius:9999px;border:1px solid rgba(242,244,247,0.10);background:#13161B;color:#9AA1AB;cursor:pointer}
  .chip:hover{color:#F2F4F7}
  .chip.on{border-color:#22D3EE;color:#22D3EE}
  .err{display:none;margin-top:8px;font-size:12px;color:#D9534F}
  .err.show{display:block}
  select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9AA1AB 50%),linear-gradient(135deg,#9AA1AB 50%,transparent 50%);background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  body.light .chip{background:#E9ECF1;color:#5A616B}
  .navlink.on{color:#F2F4F7}
  .marq{display:inline-block;white-space:nowrap;animation:marq 90s linear infinite;will-change:transform}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  input[type=range]{-webkit-appearance:none;appearance:none;height:2px;background:#22343a;border-radius:2px}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:50%;background:#22D3EE;cursor:pointer;border:3px solid #0A0B0D}
  ::selection{background:#22D3EE;color:#0A0B0D}