/* ============================================================
   Refugio de Glaciares — Reservas
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --glaciar-900:#0C2E34; --glaciar-800:#123A42; --glaciar-600:#1E5A63;
  --teal-400:#3E8790; --hielo:#EAF2F1; --niebla:#EDEFEC; --papel:#F8F9F6;
  --lenga:#4C6140; --brasa:#E28E3A; --brasa-700:#C46E22;
  --carbon:#182320; --piedra:#5D655F; --linea:#D9DFD9; --error:#B23A2E;
  --font-display:"Zilla Slab", Georgia, serif;
  --font-body:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --shadow:0 18px 50px -24px rgba(12,46,52,.45);
  --mp-bg: #ffe600;        /* debe coincidir con el amarillo oficial de MercadoLibre */
  --mp-bg-hover: #c1ae03;  /* ~10% más oscuro, para el hover */
  --pp-bg: #0070ba;        /* azul oficial de PayPal */
  --pp-bg-hover: #005ea6;  /* ~10% más oscuro, para el hover */
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font-body); color:var(--carbon);
  background:var(--niebla); -webkit-font-smoothing:antialiased;
}
/* La página 1 usa layout de columna para empujar el footer abajo */
body.page-busqueda, body.page-terminos{display:flex; flex-direction:column; min-height:100vh}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0}
a{color:inherit}
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal-400);
}
main{padding:2rem 0 3.5rem}
.section-title{font-size:clamp(1.7rem,4vw,2.2rem); letter-spacing:-.01em; margin-bottom: 1rem; }
.section-sub{color:var(--piedra); margin:.4rem 0 0}

/* ============================================================
   Barras superiores (pasos 2 y 3)
   ============================================================ */
.topbar{background:var(--glaciar-900); color:#EAF2F1; padding:.9rem 0}
.topbar .brand{font-family:var(--font-display); font-size:1.15rem}
.topbar a.back{
  font-family:var(--font-mono); font-size:.75rem; color:#9FC2C5;
  text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
}
.topbar a.back:hover{color:#EAF2F1}

.staybar{background:var(--papel); border-bottom:1px solid var(--linea)}
.staybar .inner{display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; padding:.9rem 0}
.staybar .seg{display:flex; flex-direction:column}
.staybar .seg .k{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--piedra)}
.staybar .seg .v{font-family:var(--font-display); font-size:1.05rem}
.staybar .arrow{color:var(--teal-400)}
.staybar .change{margin-left:auto; font-family:var(--font-mono); font-size:.75rem; color:var(--glaciar-600); text-decoration:none; border-bottom:1px dashed var(--teal-400); padding-bottom:1px}

/* ============================================================
   Tarjeta "bitácora" (pasos 1 y 3)
   ============================================================ */
.logbook{
  background:var(--papel); border:1px solid var(--linea); border-radius:18px;
  box-shadow:var(--shadow); overflow:hidden;
}
.logbook__head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.5rem; border-bottom:1px solid var(--linea);
  background:linear-gradient(var(--papel),var(--hielo));
}
.logbook__head .eyebrow{color:var(--glaciar-600)}
.logbook__head .stamp{
  font-family:var(--font-mono); font-size:.7rem; color:var(--piedra);
  border:1px dashed var(--linea); border-radius:6px; padding:.28rem .55rem; white-space:nowrap;
}
.logbook__body{padding:1.5rem}

/* ============================================================
   Campos de formulario (compartidos)
   ============================================================ */
.field label{
  display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--piedra); margin-bottom:.5rem;
}
.field label .req{color:var(--brasa-700)}
.control{
  height:54px; border:1px solid var(--linea); border-radius:12px; background:#fff;
  display:flex; align-items:center; transition:border-color .15s, box-shadow .15s;
}
.control:focus-within{border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(62,135,144,.18)}
.control input, .control select{
  border:0; background:transparent; width:100%; height:100%; outline:none;
  font-family:var(--font-body); font-size:1rem; color:var(--carbon); padding:0 1rem;
}
.control input[readonly]{cursor:pointer}
.control select{
  cursor:pointer; appearance:none; padding-right:2.6rem;
  background-repeat:no-repeat; background-position:right 1rem center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233E8790' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.hint{font-family:var(--font-mono); font-size:.66rem; color:var(--teal-400); margin-top:.35rem; min-height:.9rem}

/* Validación (paso 3) */
.field.invalid .control{border-color:var(--error); box-shadow:0 0 0 3px rgba(178,58,46,.14)}
.field .err{color:var(--error); font-size:.78rem; margin-top:.35rem; display:none}
.field.invalid .err{display:block}

/* ============================================================
   Botones de acción (brasa)
   ============================================================ */
.btn-buscar, .btn-pago{
  height:54px; border:0; border-radius:12px; cursor:pointer;
  background:var(--brasa); color:#2A1A08; font-family:var(--font-body); font-weight:600;
  font-size:1rem; display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  transition:background .15s, transform .05s;
}
.btn-buscar{padding:0 1.6rem}
.btn-pago{padding:0 1.8rem; justify-content:center}
.btn-buscar:hover, .btn-pago:hover:not(:disabled){background:var(--brasa-700); color:#fff}
.btn-buscar:active, .btn-pago:active:not(:disabled){transform:translateY(1px)}
.btn-pago:disabled{background:#E3E6E1; color:#9AA29B; cursor:not-allowed}

/* ============================================================
   PASO 1 — Búsqueda
   ============================================================ */
.hero{
  position:relative; overflow:hidden; color:#EAF2F1;
  background:
    radial-gradient(120% 90% at 82% -10%, #1E5A63 0%, rgba(30,90,99,0) 55%),
    linear-gradient(165deg, #0C2E34 0%, #0F343B 60%, #123A42 100%);
  padding:clamp(2.4rem,6vw,4.6rem) 0 clamp(3.6rem,8vw,6rem);
}
.hero .contours{position:absolute; inset:0; opacity:.28; pointer-events:none}
.hero .contours path{fill:none; stroke:#4E8A92; stroke-width:1}
.hero-inner{position:relative; z-index:1}
.hero .eyebrow{color:#7FB6BC}
.hero h1{font-size:clamp(2.5rem,7vw,4.6rem); letter-spacing:-.01em; margin:.5rem 0 .9rem; max-width:14ch}
.hero h1 em{font-style:normal; color:var(--brasa)}
.hero p.lead{color:#B9D4D6; font-size:1.05rem; max-width:42ch; margin:0}

.stage{margin-top:clamp(-3rem,-6vw,-4.4rem); position:relative; z-index:2; padding-bottom:3.5rem}

.notice{
  display:flex; gap:.9rem; align-items:flex-start;
  background:#FBF1E6; border:1px solid #EAC79B; border-left:4px solid var(--brasa);
  border-radius:12px; padding:1rem 1.1rem; margin-bottom:1.4rem;
}
.notice svg{flex:0 0 22px; margin-top:2px}
.notice h3{font-family:var(--font-body); font-weight:600; font-size:1rem; margin:0 0 .2rem}
.notice p{margin:0; color:#7A5A2E; font-size:.92rem; line-height:1.45}

.fields{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:1rem; align-items:end}
.control input.date{padding:0 .6rem 0 1rem; cursor:pointer}
.control .cal-ico{padding-left:1rem; color:var(--teal-400); display:flex}

.stepper{justify-content:space-between; padding:0 .35rem}
.stepper button{
  width:40px; height:40px; border:0; border-radius:9px; background:var(--hielo);
  color:var(--glaciar-800); font-size:1.35rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.stepper button:hover{background:#DCE9E7}
.stepper button:disabled{opacity:.4; cursor:not-allowed}
.stepper .val{font-family:var(--font-mono); font-size:1.15rem; font-weight:500; min-width:2ch; text-align:center}
.stepper .val small{display:block; font-size:.58rem; letter-spacing:.1em; color:var(--piedra); text-transform:uppercase}

.fieldnotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.6rem}
.note-card{background:var(--papel); border:1px solid var(--linea); border-radius:14px; padding:1.1rem 1.2rem}
.note-card .k{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-400)}
.note-card .v{font-family:var(--font-display); font-size:1.25rem; margin-top:.35rem}
.note-card .d{font-size:.85rem; color:var(--piedra); margin-top:.15rem}

footer{margin-top:auto; background:var(--glaciar-900); color:#9FC2C5; padding:1.6rem 0}
footer .brand{font-family:var(--font-display); color:#EAF2F1; font-size:1.1rem}
footer .small{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em}

/* ============================================================
   PASO 2 — Selección de camas
   ============================================================ */
.legend{display:flex; gap:1.3rem; flex-wrap:wrap; margin:1.4rem 0 1.1rem}
.legend span{display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--piedra)}
.legend i{width:16px; height:16px; border-radius:5px; display:inline-block}
.sw-free{background:#fff; border:1px solid var(--linea)}
.sw-sel{background:var(--brasa)}
.sw-occ{background:repeating-linear-gradient(45deg,#E3E6E1,#E3E6E1 4px,#D3D8D1 4px,#D3D8D1 8px); border:1px solid var(--linea)}

.dorm{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem}
.litera{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:1rem 1rem 1.1rem}
.litera__label{display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem}
.litera__label .name{font-family:var(--font-display); font-size:1.05rem}
.litera__label .tag{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-400); background:var(--hielo); padding:.2rem .45rem; border-radius:5px}
.slots{display:flex; flex-direction:column; gap:.5rem}

.bed{
  --bed-bg:#fff; --bed-bd:var(--linea); --bed-fg:var(--carbon);
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:var(--bed-bg); border:1.5px solid var(--bed-bd); color:var(--bed-fg);
  border-radius:11px; padding:.7rem .8rem; cursor:pointer; font:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.bed:hover:not(:disabled){border-color:var(--teal-400)}
.bed:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(62,135,144,.3)}
.bed .ico{flex:0 0 26px; color:var(--teal-400); display:flex}
.bed .txt{flex:1}
.bed .lvl{display:block; font-weight:600; font-size:.95rem; line-height:1.1}
.bed .st{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--piedra); margin-top:.15rem}
.bed .check{flex:0 0 20px; opacity:0; color:#2A1A08; transition:opacity .15s}
.bed.selected{--bed-bg:var(--brasa); --bed-bd:var(--brasa); --bed-fg:#2A1A08}
.bed.selected .ico,.bed.selected .st{color:#5A3A12}
.bed.selected .check{opacity:1}
.bed:disabled{
  cursor:not-allowed; color:var(--piedra);
  background:repeating-linear-gradient(45deg,#F0F2EF,#F0F2EF 5px,#E7EAE6 5px,#E7EAE6 10px);
  border-color:var(--linea);
}
.bed:disabled .ico{color:#AEB5AF}

.counter{margin-top:1.3rem; font-family:var(--font-mono); font-size:.85rem; color:var(--glaciar-600)}
.counter b{color:var(--brasa-700)}

/* Panel de tarifa (paso 2) y resumen (paso 3) */
.rate, .summary{
  background:var(--papel); border:1px solid var(--linea); border-radius:18px;
  box-shadow:var(--shadow); padding:1.4rem; position:sticky; top:1.4rem;
}
.rate h3, .summary h3{font-size:1.2rem; margin-bottom:.15rem}
.rate .place, .summary .place{font-size:.85rem; color:var(--piedra); margin-bottom:1.1rem}
.rate .row, .summary .row{display:flex; justify-content:space-between; align-items:baseline; padding:.55rem 0; border-top:1px solid var(--linea)}
.rate .row .lbl, .summary .row .lbl{color:var(--piedra); font-size:.92rem}
.rate .row .lbl small{display:block; font-family:var(--font-mono); font-size:.66rem; color:var(--teal-400); letter-spacing:.06em}
.rate .row .amt, .summary .row .amt{font-family:var(--font-mono); font-size:.95rem}
.rate .total, .summary .total{margin-top:.4rem; padding-top:.9rem; border-top:2px solid var(--carbon)}
.rate .total .lbl, .summary .total .lbl{font-family:var(--font-display); font-size:1.15rem; color:var(--carbon)}
.rate .total .amt, .summary .total .amt{font-family:var(--font-display); font-size:1.7rem; color:var(--brasa-700)}
.rate .fine{font-family:var(--font-mono); font-size:.66rem; color:var(--piedra); margin-top:.7rem; line-height:1.4}
.rate .btn-pago{width:100%; margin-top:1.1rem}

/* Barra fija inferior en mobile (paso 2) */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:none;
  background:var(--papel); border-top:1px solid var(--linea);
  box-shadow:0 -12px 30px -18px rgba(12,46,52,.4); padding:.75rem 0;
}
.mobilebar .inner{display:flex; align-items:center; gap:1rem}
.mobilebar .m-total{display:flex; flex-direction:column; line-height:1.1}
.mobilebar .m-total .k{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--piedra)}
.mobilebar .m-total .v{font-family:var(--font-display); font-size:1.35rem; color:var(--brasa-700)}
.mobilebar .btn-pago{margin:0; flex:1; height:48px}

/* ============================================================
   PASO 3 — Datos del pasajero
   ============================================================ */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem}
.field.col-full{grid-column:1 / -1}
.doc-row{display:grid; grid-template-columns:150px 1fr; gap:1.2rem}

.terms{
  grid-column:1 / -1; display:flex; gap:.8rem; align-items:flex-start; margin-top:.4rem;
  background:var(--hielo); border:1px solid var(--linea); border-radius:12px; padding:1rem 1.1rem;
}
.terms .check-wrap{position:relative; flex:0 0 22px; width:22px; height:22px}
.terms input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2}
.terms .box{position:absolute; inset:0; border:1.5px solid var(--teal-400); border-radius:6px; background:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s}
.terms .box svg{opacity:0; color:#2A1A08; transition:opacity .15s}
.terms input:checked ~ .box{background:var(--brasa); border-color:var(--brasa)}
.terms input:checked ~ .box svg{opacity:1}
.terms input:focus-visible ~ .box{box-shadow:0 0 0 3px rgba(62,135,144,.3)}
.terms label{font-family:var(--font-body); font-size:.92rem; color:var(--carbon); line-height:1.5; text-transform:none; letter-spacing:0; margin:0; cursor:pointer}
.terms a{color:var(--glaciar-600); text-decoration:underline}

.actions{display:flex; justify-content:flex-end; margin-top:1.6rem}

/* ============================================================
   flatpickr — tema (pasos 1 y 3)
   ============================================================ */
.flatpickr-calendar{border-radius:14px; box-shadow:var(--shadow); border:1px solid var(--linea); font-family:var(--font-body)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--brasa); border-color:var(--brasa); color:#2A1A08}
.flatpickr-day.today{border-color:var(--teal-400)}
.flatpickr-months .flatpickr-month{color:var(--glaciar-800)}
.flatpickr-current-month .flatpickr-monthDropdown-months,.flatpickr-current-month input.cur-year{font-weight:600}
span.flatpickr-weekday{color:var(--teal-400)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:991px){
  .aside-desktop{display:none}
  .mobilebar{display:block}
  .has-fixedbar main{padding-bottom:6rem}
  .summary{position:static}
}
@media (max-width:820px){
  .fields{grid-template-columns:1fr 1fr; gap:.9rem}
  .field--date{grid-column:1 / -1}
  .btn-buscar{grid-column:1 / -1; justify-content:center}
  .fieldnotes{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .doc-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================
   PÁGINA — Términos y condiciones
   ============================================================ */
.legal-head{padding:2.6rem 0 1.8rem; border-bottom:1px solid var(--linea)}
.legal-head .eyebrow{color:var(--teal-400)}
.legal-head h1{font-size:clamp(2rem,5vw,3rem); letter-spacing:-.01em; margin:.55rem 0 .6rem}
.legal-head .updated{font-family:var(--font-mono); font-size:.72rem; color:var(--piedra); letter-spacing:.04em}
.legal{max-width:70ch; margin:0 auto; padding:2.2rem 0 1rem}
.legal .lead{font-size:1.1rem; color:var(--carbon); line-height:1.7; margin:0 0 2rem}
.legal h2{font-family:var(--font-display); font-size:1.3rem; margin:2.4rem 0 .7rem; display:flex; gap:.6rem; align-items:baseline}
.legal h2 .num{font-family:var(--font-mono); font-size:.82rem; color:var(--brasa-700)}
.legal p{color:var(--piedra); line-height:1.75; margin:0 0 1rem}
.legal ul{color:var(--piedra); line-height:1.75; padding-left:1.2rem; margin:0 0 1.2rem}
.legal li{margin-bottom:.4rem}
.legal strong{color:var(--carbon)}
.legal .back-link{display:inline-flex; align-items:center; gap:.45rem; margin-top:1.5rem; font-family:var(--font-mono); font-size:.8rem; color:var(--glaciar-600); text-decoration:none; border-bottom:1px dashed var(--teal-400); padding-bottom:2px}
.legal .back-link:hover{color:var(--brasa-700)}

/* ============================================================
   PÁGINA — Pago
   ============================================================ */
body.page-pago{display:flex; flex-direction:column; min-height:100vh}
.pago .summary{position:static}
.camas-note{display:flex; gap:.5rem; align-items:flex-start; margin-top:.7rem; font-size:.82rem; color:var(--piedra); line-height:1.45}
.camas-note svg{flex:0 0 16px; margin-top:2px; color:var(--teal-400)}
.camas-note strong{color:var(--carbon)}
.pay-card{background:var(--papel); border:1px solid var(--linea); border-radius:18px; box-shadow:var(--shadow); padding:1.4rem; position:sticky; top:1.4rem}
.pay-card h3{font-size:1.2rem; margin-bottom:.15rem}
.pay-card .amount{display:flex; justify-content:space-between; align-items:baseline; padding:.2rem 0 1rem; border-bottom:1px solid var(--linea); margin-bottom:1.1rem}
.pay-card .amount .lbl{font-family:var(--font-display); font-size:1.1rem}
.pay-card .amount .amt{font-family:var(--font-display); font-size:1.6rem; color:var(--brasa-700)}
#wallet_container{min-height:52px}
.wallet-placeholder{border:1.5px dashed var(--linea); border-radius:12px; padding:1.1rem; text-align:center; color:var(--piedra); font-family:var(--font-mono); font-size:.78rem}
.secure{display:flex; align-items:center; gap:.45rem; margin-top:.9rem; font-family:var(--font-mono); font-size:.7rem; color:var(--piedra)}
.secure svg{color:var(--lenga)}

@media (max-width:991px){ .pay-card{position:static} }


/* ============================================================
   Botón de Mercado Pago
   ============================================================ */

.mp-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 48px;          /* cómodo para tocar en mobile */
  box-sizing: border-box;

  background-color: var(--mp-bg);
  color: #fff;
  border: none;
  border-radius: 12px;

  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;

  cursor: pointer;
  transition: background-color .15s ease;
}

.mp-pay-btn:hover {
  background-color: var(--mp-bg-hover);
}

.mp-pay-btn:active {
  transform: translateY(1px);
}

.mp-pay-btn:focus-visible {
  outline: 3px solid rgba(0, 158, 227, .4);
  outline-offset: 2px;
}

.mp-pay-btn__logo {
  height: 60px;
  width: auto;
  display: block;
}
 

/* En pantallas chicas, que ocupe todo el ancho disponible. */
@media (max-width: 480px) {
  .mp-pay-form,
  .mp-pay-btn {
    width: 100%;
  }
}


/* ============================================================
   Botón de PayPal
   ============================================================ */

.pp-pay-form {
  margin-top: .6rem;
}

.pp-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 48px;          /* cómodo para tocar en mobile */
  box-sizing: border-box;

  background-color: var(--pp-bg);
  color: #fff;
  border: none;
  border-radius: 12px;

  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  text-decoration: none;

  cursor: pointer;
  transition: background-color .15s ease;
}

.pp-pay-btn:hover {
  background-color: var(--pp-bg-hover);
}

.pp-pay-btn:active {
  transform: translateY(1px);
}

.pp-pay-btn:focus-visible {
  outline: 3px solid rgba(0, 112, 186, .4);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .pp-pay-form,
  .pp-pay-btn {
    width: 100%;
  }
}


body.page-estado { display:flex; flex-direction:column; min-height:100vh; }

.estado {display:flex; align-items:center; justify-content:center; padding:3rem 0; }

.estado-card {max-width:520px; margin:0 auto; text-align:center; background:var(--papel); border:1px solid var(--linea); border-radius:18px; box-shadow:var(--shadow); padding:2.8rem 2rem; }
.estado-badge {width:76px; height:76px; border-radius:50%; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center; }
.estado-badge .ico { display:none; }
.estado-badge .ico svg{width:36px; height:36px; }
.estado-title {font-size:clamp(1.5rem,4vw,2rem); margin-bottom: .7rem; }
.estado-text {color:var(--piedra); line-height:1.7; margin:0 auto; max-width:44ch; }
.estado-cta {margin-top:1.9rem; text-decoration:none; }

.estado--ok    .estado-badge {background:#E4EFE1; color:var(--lenga); }
.estado--error .estado-badge {background:#F7E4E1; color:var(--error); }
.estado--info  .estado-badge {background:var(--hielo); color:var(--glaciar-600); }
.estado--ok    .ico-ok {display:flex; }
.estado--error .ico-error {display:flex; }
.estado--info  .ico-info {display:flex; }