/* ==========================================================================
   CALCULADORA DE PRÉSTAMOS — Herramienta global multimoneda
   Sistema de diseño: "recibo digital" — la tarjeta de resultado se piensa
   como un ticket que se imprime y se comparte, no como una tarjeta genérica.
   ========================================================================== */

:root{
  color-scheme: light;
  --font-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:-apple-system, BlinkMacSystemFont,'Segoe UI', Roboto,'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono','Cascadia Mono','Roboto Mono','Courier New', monospace;

  --bg:#F4F7F6;
  --surface:#FFFFFF;
  --surface-alt:#E7F1EF;
  --text:#0A2540;
  --text-soft:#4C6479;
  --primary:#2E86AB;
  --primary-dark:#1F6486;
  --accent:#B9862E;
  --accent-bg:#D9A441;
  --danger:#C23B3B;
  --border:#DCE3E1;
  --whatsapp:#1FA855;
  --shadow: 0 1px 2px rgba(10,37,64,.06), 0 8px 24px -8px rgba(10,37,64,.12);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-s:10px; --radius-m:16px; --radius-l:22px;
}

[data-theme="dark"]{
  color-scheme: dark;
  --bg:#071B2C;
  --surface:#0F3355;
  --surface-alt:#123A5E;
  --text:#EAF2F0;
  --text-soft:#9FBAD0;
  --primary:#5CB2DA;
  --primary-dark:#3AA1C7;
  --accent:#F0BE63;
  --accent-bg:#D9A441;
  --danger:#FF8C86;
  --border:#1E4A6E;
  --whatsapp:#3AD679;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#071B2C; --surface:#0F3355; --surface-alt:#123A5E;
    --text:#EAF2F0; --text-soft:#9FBAD0;
    --primary:#5CB2DA; --primary-dark:#3AA1C7;
    --accent:#F0BE63; --accent-bg:#D9A441;
    --danger:#FF8C86; --border:#1E4A6E; --whatsapp:#3AD679;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
img{ max-width:100%; display:block; }
a{ color:var(--primary); }
button{ font-family:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--primary); color:#fff;
  padding:10px 16px; border-radius:0 0 8px 0; z-index:1000;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

.wrap{ max-width:600px; margin:0 auto; padding:0 var(--space-4); }
.article-wrap{ max-width:640px; margin:0 auto; padding:0 var(--space-4); }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--space-3); padding-bottom:var(--space-3);
}
.logo{
  display:flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--text); text-decoration:none; letter-spacing:-.01em;
}
.logo-mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(160deg, var(--primary), var(--primary-dark));
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.logo-mark::after{
  content:"$"; font-family:var(--font-mono); font-weight:700; font-size:.85rem;
  color:var(--accent-bg);
}
.theme-toggle{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.theme-toggle:active{ transform:scale(.92); }
.theme-toggle svg{ width:18px; height:18px; }
.icon-sun{ display:none; }
[data-theme="dark"] .icon-moon{ display:none; }
[data-theme="dark"] .icon-sun{ display:block; }

/* ---------------- Ad slots ---------------- */
.ad-slot{
  max-width:600px; margin:var(--space-5) auto; padding:0 var(--space-4);
}
.ad-slot .ad-inner{
  border:1px dashed var(--border); border-radius:var(--radius-s);
  min-height:100px; display:flex; align-items:center; justify-content:center;
  color:var(--text-soft); font-size:.78rem; text-align:center; padding:var(--space-3);
  background:color-mix(in srgb, var(--surface) 60%, transparent);
}
.ad-label{
  display:block; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft); margin-bottom:var(--space-1);
}
/* Google AdSense: sustituye el contenido de .ad-inner por tu <ins class="adsbygoogle">
   una vez tu cuenta esté aprobada. Ver comentarios junto a cada slot más abajo. */

/* ---------------- Hero ---------------- */
.hero{ padding:var(--space-6) 0 var(--space-4); text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); background:var(--surface-alt); border-radius:999px;
  padding:6px 14px; margin-bottom:var(--space-4);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--whatsapp); }
h1{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.55rem, 5.4vw, 2.15rem); line-height:1.15; margin:0 0 var(--space-3);
}
.hero p{ color:var(--text-soft); font-size:1rem; max-width:44ch; margin:0 auto; }

/* ---------------- Botón de instalación PWA (📲 Instalar Bryxo) ---------------- */
.pwa-install{ max-width:420px; margin:0 auto var(--space-6); text-align:center; }
.pwa-install-btn{ max-width:420px; margin:0 auto; }
.pwa-install-btn.is-installed{
  background:var(--surface-alt); color:var(--text-soft); cursor:default;
}
.pwa-install-btn.is-installed:active{ transform:none; }
.pwa-ios-hint{
  margin:var(--space-3) auto 0; max-width:420px; color:var(--text-soft); font-size:.85rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:var(--space-3) var(--space-4);
}
.pwa-ios-hint strong{ color:var(--text); }
.pwa-hidden{ display:none !important; }

/* ---------------- Segmented control (tipo de préstamo) ---------------- */
.loan-types{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2);
  margin:var(--space-5) 0 var(--space-4);
}
.loan-type{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:var(--space-3) var(--space-2); border-radius:var(--radius-s);
  border:1.5px solid var(--border); background:var(--surface); color:var(--text-soft);
  cursor:pointer; font-size:.82rem; font-weight:600; transition:all .15s ease;
}
.loan-type svg{ width:22px; height:22px; }
.loan-type[aria-pressed="true"]{
  border-color:var(--primary); color:var(--primary); background:var(--surface-alt);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}
.loan-type:active{ transform:scale(.97); }

/* ---------------- Form card ---------------- */
.card{
  background:var(--surface); border-radius:var(--radius-m); padding:var(--space-5);
  box-shadow:var(--shadow); border:1px solid var(--border);
}
.field{ margin-bottom:var(--space-4); }
.field label{
  display:block; font-size:.82rem; font-weight:600; color:var(--text-soft);
  margin-bottom:var(--space-2);
}
.field-hint{ font-size:.76rem; color:var(--text-soft); margin-top:6px; min-height:1.1em; }
.field-error{ font-size:.78rem; color:var(--danger); margin-top:6px; display:none; font-weight:600; }
.field.has-error .field-error{ display:block; }
.field.has-error input{ border-color:var(--danger); }

.input-group{
  display:flex; align-items:stretch; border:1.5px solid var(--border); border-radius:var(--radius-s);
  overflow:hidden; background:var(--bg); transition:border-color .15s ease;
}
.input-group:focus-within{ border-color:var(--primary); }
.input-affix{
  display:flex; align-items:center; padding:0 var(--space-3); font-family:var(--font-mono);
  font-weight:700; color:var(--text-soft); background:var(--surface-alt); font-size:.95rem;
}
.input-group input{
  border:0; background:transparent; flex:1; min-width:0; padding:14px var(--space-3);
  font-family:var(--font-mono); font-size:1.05rem; color:var(--text); font-weight:600;
}
.input-group input:focus{ outline:none; }

.currency-select{
  border:1.5px solid var(--border); border-radius:var(--radius-s); background:var(--bg);
  color:var(--text); font-family:var(--font-mono); font-weight:700; font-size:.95rem;
  padding:14px var(--space-3); width:100%; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C6479' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.currency-select:focus{ outline:none; border-color:var(--primary); }

.term-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.chip{
  border:1.5px solid var(--border); background:var(--bg); color:var(--text-soft);
  border-radius:999px; padding:8px 14px; font-size:.82rem; font-weight:600; cursor:pointer;
  font-family:var(--font-mono); transition:all .15s ease;
}
.chip[aria-pressed="true"]{
  border-color:var(--primary); background:var(--primary); color:#fff;
}
.chip:active{ transform:scale(.95); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--radius-s); font-weight:700; cursor:pointer;
  padding:16px var(--space-5); font-size:1rem; width:100%;
  transition:transform .12s ease, filter .15s ease; font-family:var(--font-body);
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-ghost{ background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-whatsapp{ background:var(--whatsapp); color:#fff; }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-row{ display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-4); }

/* ---------------- Result "receipt" ---------------- */
.result-wrap{ margin-top:var(--space-6); display:none; }
.result-wrap.visible{ display:block; }

@media (prefers-reduced-motion: no-preference){
  .result-wrap.visible .receipt{ animation:print-out .45s cubic-bezier(.2,.9,.3,1) both; }
}
@keyframes print-out{
  from{ opacity:0; transform:translateY(-14px) scaleY(.9); }
  to{ opacity:1; transform:translateY(0) scaleY(1); }
}

.receipt{
  position:relative; background:var(--surface); border-radius:0 0 var(--radius-m) var(--radius-m);
  padding:var(--space-6) var(--space-5) var(--space-5); box-shadow:var(--shadow);
  transform-origin:top;
}
.receipt::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:14px;
  background-image:
    linear-gradient(-45deg, var(--surface) 8px, transparent 0),
    linear-gradient(45deg, var(--surface) 8px, transparent 0);
  background-size:16px 16px; background-repeat:repeat-x; background-position:top;
}
.receipt-stamp{
  position:absolute; top:var(--space-4); right:var(--space-4);
  border:2px solid var(--whatsapp); color:var(--whatsapp); border-radius:8px;
  padding:3px 9px; font-family:var(--font-mono); font-size:.62rem; font-weight:700;
  letter-spacing:.06em; transform:rotate(-7deg); text-transform:uppercase;
}
.receipt-eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); margin:0 0 6px;
}
.receipt-amount{
  font-family:var(--font-mono); font-weight:700; color:var(--accent);
  font-size:clamp(2.1rem, 10vw, 2.9rem); line-height:1.05; margin:0; word-break:break-word;
}
.receipt-amount span{ font-size:.5em; color:var(--text-soft); font-weight:600; }
.receipt-divider{
  border:none; border-top:2px dashed var(--border); margin:var(--space-5) 0;
}
.receipt-row{
  display:flex; justify-content:space-between; gap:var(--space-3);
  font-size:.92rem; padding:7px 0; color:var(--text-soft);
}
.receipt-row strong{ color:var(--text); font-family:var(--font-mono); font-weight:700; }
.receipt-barcode{
  height:26px; margin-top:var(--space-5);
  background:repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 5px, var(--text) 5px 6px, transparent 6px 11px);
  opacity:.55;
}
.receipt-caption{
  text-align:center; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-soft); margin-top:var(--space-2);
}

/* ---------------- Amortization table ---------------- */
.table-toggle-wrap{ margin-top:var(--space-3); }
.link-btn{
  background:none; border:none; color:var(--primary); font-weight:700; cursor:pointer;
  font-size:.9rem; width:100%; text-align:center; padding:var(--space-2);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.link-btn svg{ width:16px; height:16px; transition:transform .2s ease; }
.link-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.amort-section{ display:none; margin-top:var(--space-4); }
.amort-section.visible{ display:block; }
.table-scroll{
  overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-s);
  background:var(--surface); -webkit-overflow-scrolling:touch;
}
table.amort{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.82rem; min-width:520px; }
table.amort thead th{
  position:sticky; top:0; background:var(--surface-alt); color:var(--text);
  text-align:right; padding:10px 12px; font-weight:700; white-space:nowrap; border-bottom:1px solid var(--border);
}
table.amort thead th:first-child, table.amort td:first-child{ text-align:left; }
table.amort td{ padding:9px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--border); color:var(--text-soft); }
table.amort tr:last-child td{ border-bottom:none; }
table.amort tbody tr:nth-child(even){ background:color-mix(in srgb, var(--surface-alt) 40%, transparent); }

/* ---------------- Affiliate placeholder ---------------- */
.affiliate-card{
  margin-top:var(--space-6); border:1.5px dashed var(--primary); border-radius:var(--radius-m);
  padding:var(--space-5); text-align:center; background:var(--surface-alt);
}
.affiliate-badge{
  display:inline-block; background:var(--accent-bg); color:var(--text); font-family:var(--font-mono);
  font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:var(--space-3);
}
.affiliate-card h3{ font-family:var(--font-display); margin:0 0 6px; font-size:1.1rem; }
.affiliate-card p{ color:var(--text-soft); font-size:.9rem; margin:0; }
/* Espacio reservado para futuros enlaces de afiliados / comparadores de préstamos */

/* ---------------- SEO educational content ---------------- */
.content-section{ margin-top:var(--space-8); }
.content-section h2{
  font-family:var(--font-display); font-size:clamp(1.25rem, 4vw, 1.55rem); margin:var(--space-7) 0 var(--space-3);
  letter-spacing:-.01em;
}
.content-section h2:first-child{ margin-top:0; }
.content-section h3{ font-family:var(--font-display); font-size:1.05rem; margin:var(--space-5) 0 var(--space-2); }
.content-section p, .content-section li{ color:var(--text-soft); font-size:.98rem; }
.content-section ul{ padding-left:1.2em; }
.content-section li{ margin-bottom:6px; }
.content-section strong{ color:var(--text); }

/* ---------------- FAQ ---------------- */
.faq-section{ margin-top:var(--space-7); }
.faq-item{
  border-bottom:1px solid var(--border); padding:var(--space-4) 0;
}
.faq-item summary{
  cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:1rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .faq-icon{
  flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:transform .2s ease;
}
.faq-item[open] summary .faq-icon{ transform:rotate(45deg); border-color:var(--primary); color:var(--primary); }
.faq-item p{ color:var(--text-soft); margin:var(--space-3) 0 0; font-size:.95rem; }

/* ---------------- Footer ---------------- */
footer{ margin-top:var(--space-8); padding:var(--space-6) 0 var(--space-7); border-top:1px solid var(--border); text-align:center; }
footer p{ color:var(--text-soft); font-size:.8rem; margin:4px 0; }
footer .logo{ justify-content:center; margin-bottom:var(--space-3); }

/* ---------------- Install PWA banner ---------------- */
.install-bar{
  display:none; position:fixed; left:var(--space-4); right:var(--space-4); bottom:var(--space-4);
  max-width:568px; margin:0 auto; background:var(--text); color:var(--bg);
  border-radius:var(--radius-s); padding:var(--space-3) var(--space-4); z-index:50;
  align-items:center; justify-content:space-between; gap:var(--space-3); box-shadow:var(--shadow);
}
.install-bar.visible{ display:flex; }
.install-bar span{ font-size:.85rem; font-weight:600; }
.install-bar button{
  background:var(--accent-bg); color:var(--text); border:none; border-radius:8px;
  padding:8px 14px; font-weight:700; font-size:.82rem; cursor:pointer; flex:none;
}
.install-bar .dismiss{ background:none; color:var(--bg); opacity:.7; padding:8px; }

@media (min-width:640px){
  .wrap, .article-wrap, .ad-slot{ max-width:640px; }
  .hero{ padding-top:var(--space-8); }
  .card{ padding:var(--space-6); }
}