/* Smart Link MCO · colores de la marca (manual de marca): azul, azul noche, azul luz, plata, perla */
:root { --azul:#0A308B; --noche:#0B1640; --luz:#2C4CC0; --grafito:#303030; --plata:#9AA1AE; --perla:#F3F4F6; --claro:#C9D3F5;
  --linea:#dfe2e7; --texto:#2b3142; --suave:#5b6272; }
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { min-height:100vh; font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; color:#fff; line-height:1.5;
  background:radial-gradient(circle at 50% 0%, #1d2f7a 0%, var(--noche) 55%) fixed var(--noche); }
a { color:inherit; }
:focus-visible { outline:3px solid #fff; outline-offset:3px; border-radius:6px; }
[hidden] { display:none !important; }
.wrap { width:100%; max-width:480px; margin:0 auto; padding:40px 20px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.wrap.ancho { max-width:760px; }

/* cabecera */
.foto { width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:50% 18%; border:3px solid #fff; box-shadow:0 0 0 5px rgba(44,76,192,.55); }
h1 { font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; font-size:31px; line-height:1.1; text-align:center; margin-top:6px; }
h1 em { font-style:italic; color:var(--claro); }
.sub { font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--claro); text-align:center; }
.lema { font-size:14px; color:#dfe5f7; text-align:center; max-width:340px; }

/* botones */
.lista { width:100%; display:flex; flex-direction:column; gap:12px; margin-top:12px; }
a.btn { display:flex; align-items:center; gap:14px; width:100%; padding:16px 18px; border-radius:16px; text-decoration:none;
  background:#fff; color:var(--noche); font-weight:600; font-size:15.5px; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .15s; }
a.btn:hover { transform:translateY(-2px); }
a.btn .ic { width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--perla); color:var(--azul); }
a.btn .ic svg { width:22px; height:22px; }
a.btn small { display:block; font-weight:500; font-size:12px; color:var(--suave); margin-top:2px; }
a.btn.pri { background:var(--luz); color:#fff; } a.btn.pri .ic { background:rgba(255,255,255,.18); color:#fff; } a.btn.pri small { color:var(--claro); }
a.btn .flecha { margin-left:auto; color:var(--plata); }

.volver { align-self:flex-start; font-size:13px; font-weight:600; color:var(--claro); text-decoration:none; }
footer { font-size:11px; color:var(--plata); text-align:center; line-height:1.6; margin-top:18px; max-width:380px; }

/* tarjetas de contenido (guía, calculadora) */
.tarjeta { width:100%; background:#fff; color:var(--texto); border-radius:22px; padding:26px 22px; box-shadow:0 10px 30px rgba(0,0,0,.22); }
.eyebrow { font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--luz); font-weight:700; }
.tarjeta h2 { font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; line-height:1.1; color:var(--noche); margin:6px 0 4px; }
.tarjeta h2 em { color:var(--luz); }
.paso { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--linea); }
.paso:last-child { border-bottom:0; }
.paso .n { width:40px; height:40px; border-radius:50%; border:1.5px solid var(--plata); display:grid; place-items:center;
  font-family:'Cormorant Garamond',Georgia,serif; font-size:21px; font-weight:600; color:var(--azul); }
.paso h3 { font-size:15px; color:var(--noche); margin-bottom:3px; }
.paso p { font-size:14px; color:var(--texto); }
.aviso { font-size:12px; color:var(--suave); margin-top:14px; }
a.descarga { margin-top:4px; }

/* calculadora */
.field { display:flex; flex-direction:column; gap:7px; margin:0 0 18px; }
.field label { font-size:14px; font-weight:600; color:var(--noche); }
.field .opt { font-weight:500; color:var(--suave); }
.field input, .field select { width:100%; min-height:50px; padding:12px 14px; border-radius:12px; border:1.5px solid #cfd4de; background:var(--perla);
  font:16px 'Montserrat',system-ui,sans-serif; color:var(--texto); -webkit-appearance:none; appearance:none; }
.field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235d6376' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.field input:focus, .field select:focus { border-color:var(--luz); outline:none; box-shadow:0 0 0 4px rgba(44,76,192,.16); }
.field [aria-invalid="true"] { border-color:#b3261e; }
.field small { font-size:12.5px; color:var(--suave); }
.err { color:#b3261e; font-size:13px; }
.affix { position:relative; } .affix span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--suave); }
.affix input { padding-left:30px; font-variant-numeric:tabular-nums; }
.row2 { display:grid; gap:0 14px; grid-template-columns:1fr; } @media (min-width:560px) { .row2 { grid-template-columns:1fr 1fr; } }
button.calcular { width:100%; min-height:54px; border:0; border-radius:14px; background:var(--luz); color:#fff; font:700 16px 'Montserrat',system-ui,sans-serif; cursor:pointer; }
button.calcular:hover { background:var(--azul); }
.resultado { margin-top:18px; }
.res-label { font-size:13px; color:var(--suave); }
.total { font-family:'Cormorant Garamond',Georgia,serif; font-size:48px; font-weight:600; color:var(--noche); line-height:1.05; margin:4px 0; font-variant-numeric:tabular-nums; }
.rtable { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; table-layout:fixed; }
.rtable td { padding:11px 0; border-bottom:1px solid var(--linea); vertical-align:top; }
.rtable td:last-child { text-align:right; font-weight:600; width:42%; font-variant-numeric:tabular-nums; }
.rtable tr.ind td { color:var(--luz); }
.nota { font-size:12.5px; color:var(--texto); background:var(--perla); border-radius:12px; padding:12px 14px; margin:0 0 12px; }
.alerta { font-size:13px; color:#7a4b00; background:#fff3dc; border:1px solid #f0d29a; border-radius:12px; padding:12px 14px; margin:0 0 12px; }