:root{
  --azul:#24456B;
  --amarillo:#F4C95D;
  --crema:#FFF9F0;
  --verde:#8FAF9A;
  --blanco:#FFFFFF;
  --gris:#343A40;
  --rojo:#C0392B;
  --radio:16px;
  --sombra:0 4px 14px rgba(36,69,107,0.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Nunito Sans','Inter',system-ui,-apple-system,sans-serif;
  background:var(--crema);
  color:var(--gris);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--azul);text-decoration:none;}
img{max-width:100%;}
.container{max-width:480px;margin:0 auto;padding:24px 20px 100px;}
.container-wide{max-width:720px;margin:0 auto;padding:24px 20px 100px;}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.brand-icon{width:36px;height:36px;border-radius:12px;background:var(--azul);
  display:flex;align-items:center;justify-content:center;font-size:18px;}
.brand-name{font-weight:800;color:var(--azul);font-size:18px;}
.tagline{color:var(--verde);font-weight:700;font-size:13px;letter-spacing:.3px;
  text-transform:uppercase;margin-bottom:18px;}

h1{color:var(--azul);font-size:26px;margin:0 0 10px;line-height:1.3;}
h2{color:var(--azul);font-size:20px;margin:0 0 10px;}
h3{color:var(--azul);font-size:17px;margin:0 0 6px;}
p{margin:0 0 14px;}

.card{
  background:var(--blanco);
  border-radius:18px;
  box-shadow:var(--sombra);
  padding:20px;
  margin-bottom:16px;
}
.card-flat{background:var(--blanco);border-radius:14px;padding:16px;margin-bottom:12px;border:1px solid #EFE7D8;}

.btn{
  display:block;width:100%;text-align:center;
  padding:16px 18px;border-radius:14px;border:none;
  font-size:16px;font-weight:800;cursor:pointer;
  transition:transform .05s ease, opacity .15s ease;
  text-decoration:none;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--azul);color:var(--blanco);}
.btn-accent{background:var(--amarillo);color:var(--azul);}
.btn-outline{background:transparent;color:var(--azul);border:2px solid var(--azul);}
.btn-danger{background:transparent;color:var(--rojo);border:2px solid var(--rojo);}
.btn-sm{padding:10px 14px;font-size:14px;border-radius:10px;width:auto;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

label{display:block;font-weight:700;font-size:14px;color:var(--azul);margin:14px 0 6px;}
input,select,textarea{
  width:100%;padding:14px;border-radius:12px;border:2px solid #E7DFCF;
  font-size:16px;font-family:inherit;background:var(--blanco);color:var(--gris);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul);}
textarea{resize:vertical;min-height:80px;}

.msg{padding:12px 14px;border-radius:12px;font-size:14px;margin:14px 0;}
.msg-ok{background:#EAF3EE;color:#2F6B4F;}
.msg-err{background:#FBEAE8;color:var(--rojo);}
.msg-info{background:#EDF2F8;color:var(--azul);}

.hidden{display:none !important;}
.center{text-align:center;}
.muted{color:#6b7280;font-size:14px;}
.small-link{font-size:14px;display:inline-block;margin-top:10px;}

.benefit{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;}
.benefit .dot{width:10px;height:10px;border-radius:50%;background:var(--verde);margin-top:7px;flex-shrink:0;}

.price-tag{background:var(--azul);color:var(--blanco);border-radius:16px;padding:20px;text-align:center;margin:18px 0;}
.price-tag .amount{font-size:30px;font-weight:800;}
.price-tag .sub{font-size:13px;opacity:.85;}

.faq details{border-bottom:1px solid #EFE7D8;padding:12px 0;}
.faq summary{font-weight:700;color:var(--azul);cursor:pointer;}
.faq p{margin-top:8px;}

.spinner{width:20px;height:20px;border:3px solid #E7DFCF;border-top-color:var(--azul);
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* App shell */
.appbar{position:sticky;top:0;background:var(--crema);padding:16px 20px 10px;
  display:flex;align-items:center;justify-content:space-between;z-index:5;
  padding-top:calc(16px + env(safe-area-inset-top,0px));}
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;background:var(--blanco);
  display:flex;justify-content:space-around;border-top:1px solid #EFE7D8;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));z-index:10;
}
.navitem{flex:1;text-align:center;background:none;border:none;font-family:inherit;
  color:#9aa3ad;font-size:12px;font-weight:700;padding:6px 2px;cursor:pointer;}
.navitem.active{color:var(--azul);}
.navitem .ic{font-size:20px;display:block;margin-bottom:2px;}

.view{display:none;}
.view.active{display:block;}

.accordion summary{cursor:pointer;font-weight:800;color:var(--azul);padding:6px 0;list-style:none;
  display:flex;align-items:center;justify-content:space-between;}
.accordion summary::-webkit-details-marker{display:none;}
.accordion[open] summary .chev{transform:rotate(90deg);}
.chev{transition:transform .15s ease;color:var(--verde);}

.entry-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:12px 0;border-bottom:1px solid #F1EADC;}
.entry-row:last-child{border-bottom:none;}
.entry-text{font-size:14.5px;}
.entry-text b{color:var(--azul);}
.link-del{color:var(--rojo);font-size:13px;font-weight:700;background:none;border:none;cursor:pointer;font-family:inherit;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --crema:#1B2430; --blanco:#232D3B; --gris:#EDEFF2; --azul:#8FB6E8;
  }
  body{background:var(--crema);}
  input,select,textarea{background:#1B2430;color:var(--gris);border-color:#334155;}
  .card-flat{border-color:#334155;}
}