/* ═══════════════════════════════════════════════════════════════════
   LEGACONT · Plantilla amigable de herramientas
   La zona de cálculo va en claro (hueso + tarjetas blancas). Truco:
   dentro de .zona se redefinen las variables de color, así todos los
   componentes de cada calculadora (tarjetas, campos, botones, calendario)
   pasan a claro sin reescribirlos uno por uno.
   ═══════════════════════════════════════════════════════════════════ */
.zona{--bg:#fff;--bg2:#fff;--bg3:#fbfaf8;--cream:#232222;--cream-soft:#6d655d;--line:#e3ddd4;
  background:#F2F1F0;color:#232222;margin-top:34px;padding:34px 0 44px;border-top:4px solid #d5a575}
.zona .wrap{max-width:1040px}
.zona .card{background:#fff;border:1px solid #e3ddd4;box-shadow:0 18px 40px -30px rgba(35,34,34,.45);color:#232222}
.zona .grid,.zona .datos{margin-top:0}
.zona label{color:#6d655d}
.zona input[type=text],.zona input[type=date],.zona select{background:#fff;border-color:#d9d2c8;color:#232222}
.zona input:focus,.zona select:focus{border-color:#8A6236;box-shadow:0 0 0 3px rgba(213,165,117,.25)}
.zona .tab{border-color:#d9d2c8;color:#6d655d}
.zona .tab.active{background:#1a1613;color:#d5a575;border-color:#1a1613}
.zona .row span:first-child{color:#6d655d}
.zona .row.total b{color:#232222}
.zona .note,.zona small{color:#8b847d}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 22px}
.paso{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #e3ddd4;border-radius:14px;padding:12px 14px}
.paso b{flex:0 0 32px;height:32px;border-radius:50%;background:#1a1613;color:#d5a575;display:grid;place-items:center;font-family:"Fraunces",serif;font-size:16px}
.paso span{font-size:14px;line-height:1.35;color:#3a3633}
@media(max-width:760px){.pasos{grid-template-columns:1fr}}

/* interruptor de dos lados */
.zona .tabs{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:#F2F1F0;border:1.5px solid #d9d2c8;border-radius:999px;padding:4px;gap:0;margin-bottom:18px}
.zona .tabs .tab{border:0;border-radius:999px;margin:0;padding:10px 14px;text-align:center;background:transparent}
.zona .tabs .tab.active{background:#1a1613;color:#d5a575;box-shadow:0 4px 12px -6px rgba(0,0,0,.5)}
@media(max-width:600px){.zona .tabs{display:grid;width:100%}.zona .tabs .tab{padding:10px 6px;font-size:12.5px}}

/* ⓘ: en computador al pasar el mouse; en celular al tocar */
.i{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#F5EBDF;color:#8A6236;font-size:11px;font-weight:800;font-style:normal;cursor:help;position:relative;text-transform:none;letter-spacing:0;vertical-align:middle;margin-left:4px}
.i:hover::after,.i:focus::after,.i.on::after{content:attr(data-t);position:absolute;left:50%;bottom:130%;transform:translateX(-50%);width:240px;background:#1a1613;color:#f4f2ef;font-size:12.5px;font-weight:500;line-height:1.45;padding:10px 12px;border-radius:10px;z-index:30;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);text-align:left}
@media(hover:none){.i:hover::after,.i:focus::after{content:none}.i.on::after{content:attr(data-t)}}
@media(max-width:600px){.i::after,.i.on::after{left:auto;right:-10px;transform:none;width:min(260px,78vw)}}

.ejemplo{background:none;border:0;color:#8A6236;font:700 13px Inter,sans-serif;cursor:pointer;padding:0;text-decoration:underline;margin:10px 0 2px;display:inline-block;text-align:left}

/* resultado en una frase */
.frase{background:#1a1613;color:#f4f2ef;border-radius:16px;padding:18px 20px;margin-bottom:14px}
.frase .fk{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#d5a575}
.frase .fv{font-family:"Fraunces",serif;font-size:36px;font-weight:600;line-height:1.1;margin-top:4px;color:#d5a575}
.frase .fp{margin:6px 0 0;font-size:14px;color:#cfc8bf;line-height:1.45}
.frase .fp b{color:#f4f2ef}

/* barra fija en celular con el resultado */
.fija{display:none}
@media(max-width:820px){.fija{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#1a1613;color:#f4f2ef;border-top:2px solid #d5a575;padding:10px 18px;justify-content:space-between;align-items:center;font-size:13px;font-family:Inter,sans-serif}
  .fija b{font-family:"Fraunces",serif;font-size:22px;color:#d5a575}
  body.con-fija{padding-bottom:62px}}

/* cabecera en celular: el botón dorado no se parte en dos líneas */
@media(max-width:600px){.nav-s .cta-nav{white-space:nowrap;padding:9px 14px;font-size:13px}}
.ejemplo{margin-bottom:10px}