/* ==========================================================
   El Mero Mero — hoja de estilos
   Paleta: hueso / grafito / petroleo / oro / terracota
   ========================================================== */
:root{
  --hueso:#f4f1ea;
  --papel:#fffdf9;
  --grafito:#1d2126;
  --tinta:#2c3238;
  --tenue:#6d7680;
  --linea:#e2ddd2;
  --acento:#157a86;
  --oro:#c2941f;
  --oro-suave:#fdf4dc;
  --plata:#6f7a85;
  --bronce:#b45a2e;
  --uva:#5f4b8b;
  --ok:#1f8a53;
  --alerta:#b02b2b;
  --r:18px;
  --sombra:0 1px 2px rgba(29,33,38,.05), 0 8px 24px -14px rgba(29,33,38,.22);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--hueso);
  color:var(--grafito);
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font-family:inherit}

/* ---------- Cabecera ---------- */
.cabecera{padding:38px 20px 6px;text-align:center}
.marca{display:inline-flex;align-items:center;gap:10px;color:var(--acento)}
.marca-icono{display:flex}
.marca-texto{font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--grafito)}
.marca-texto em{color:var(--acento);font-style:normal}
.sub{margin:6px 0 0;color:var(--tenue);font-size:14px}
.pulso{margin:10px 0 0;font-size:14px;color:var(--tenue);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}
.pulso strong{color:var(--ok);font-weight:600}
.punto{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(31,138,83,.6);animation:latido 2.2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(31,138,83,.45)}70%{box-shadow:0 0 0 9px rgba(31,138,83,0)}100%{box-shadow:0 0 0 0 rgba(31,138,83,0)}}

/* ---------- Contenedor ---------- */
.contenedor{max-width:680px;margin:0 auto;padding:14px 18px 40px}

/* ---------- Oferta ---------- */
.oferta{text-align:center;padding:14px 0 4px}
.oferta h1{margin:8px 0 6px;font-size:clamp(22px,4.6vw,31px);font-weight:700;letter-spacing:-.02em;line-height:1.22}
.resalte{color:var(--acento)}
.lider{margin:0 0 18px;color:var(--tenue);font-size:15px}
.lider strong{color:var(--grafito);font-weight:600}

.pujador{display:block}
.stepper{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
.paso{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);
  background:var(--papel);color:var(--tinta);font-size:22px;line-height:1;cursor:pointer;
  transition:.15s;
}
.paso:hover{border-color:var(--acento);color:var(--acento);transform:translateY(-1px)}
.campo-monto{display:inline-flex;align-items:baseline;gap:4px}
.campo-monto .signo{font-size:26px;font-weight:600;color:var(--acento);font-family:'IBM Plex Mono',monospace}
#monto{
  width:auto;min-width:3ch;max-width:9ch;border:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:clamp(30px,7vw,40px);font-weight:600;
  color:var(--acento);text-align:center;padding:0;
}
#monto:focus{outline:2px dashed var(--linea);outline-offset:6px;border-radius:6px}

.boton-grande{
  display:block;width:100%;border:none;cursor:pointer;
  background:linear-gradient(180deg,var(--acento),color-mix(in srgb,var(--acento) 82%,#000));
  color:#fff;font-size:17px;font-weight:600;padding:17px 20px;border-radius:14px;
  box-shadow:0 10px 24px -12px var(--acento);transition:.16s;
}
.boton-grande:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--acento)}
.boton-grande:active{transform:translateY(0)}

.nota-pago{margin:12px 0 0;font-size:13px;color:var(--tenue);display:flex;align-items:center;justify-content:center;gap:6px}
.ultimo-movimiento{text-align:center;font-size:13px;color:var(--tenue);margin:26px 0 12px}
.ultimo-movimiento strong{color:var(--grafito);font-weight:600}

/* ---------- Tarjetas ---------- */
.lista{display:flex;flex-direction:column;gap:16px}
.tarjeta{
  position:relative;background:var(--papel);border:1.5px solid var(--linea);
  border-radius:var(--r);padding:16px 18px 12px;box-shadow:var(--sombra);
  transition:.18s;overflow:hidden;
}
.tarjeta:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(29,33,38,.05),0 18px 34px -18px rgba(29,33,38,.35)}
.fila-top{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.insignia{
  min-width:34px;height:24px;padding:0 8px;border-radius:8px;background:var(--linea);
  color:var(--grafito);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
}
.insignia::before{content:'#'}
.emo{font-size:16px;line-height:1}
.tiempo{font-size:12.5px;color:var(--tenue)}
.precio{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;color:var(--tinta)}
.titulo{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.desc{margin:0 0 12px;color:var(--tenue);font-size:14.5px;line-height:1.45}
.fila-bajo{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--linea);padding-top:10px}
.dominio{font-size:13px;color:var(--tenue);display:inline-flex;align-items:center;gap:6px}
.favicon{border-radius:4px;flex-shrink:0;background:var(--linea)}
.cta{font-size:14px;font-weight:600;text-decoration:none;color:var(--acento)}
.cta:hover{text-decoration:underline}

/* jerarquia por puesto */
.tarjeta.p1{border-color:var(--oro);background:linear-gradient(105deg,var(--oro-suave) 0%,var(--papel) 55%)}
.tarjeta.p1::after{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--oro),#eccb6b,var(--oro))}
.tarjeta.p1 .insignia{background:var(--oro);color:#fff}
.tarjeta.p1 .precio,.tarjeta.p1 .cta{color:#916d0d}
.tarjeta.p1 .titulo{font-size:22px}
.tarjeta.p2{border-color:var(--acento)}
.tarjeta.p2 .insignia{background:var(--acento);color:#fff}
.tarjeta.p2 .precio,.tarjeta.p2 .cta{color:var(--acento)}
.tarjeta.p3{border-color:var(--plata)}
.tarjeta.p3 .insignia{background:var(--plata);color:#fff}
.tarjeta.p3 .precio,.tarjeta.p3 .cta{color:var(--plata)}
.tarjeta.p4{border-color:var(--uva)}
.tarjeta.p4 .insignia{background:var(--uva);color:#fff}
.tarjeta.p4 .precio,.tarjeta.p4 .cta{color:var(--uva)}
.tarjeta.p5{border-color:var(--bronce)}
.tarjeta.p5 .insignia{background:var(--bronce);color:#fff}
.tarjeta.p5 .precio,.tarjeta.p5 .cta{color:var(--bronce)}
.tarjeta.p6{opacity:.94}

.vacio{background:var(--papel);border:1.5px dashed var(--linea);border-radius:var(--r);padding:40px 20px;text-align:center;color:var(--tenue)}
.vacio p{margin:0}
.vacio .chico{font-size:13.5px;margin-top:6px}

.ver-todos{
  width:100%;margin-top:16px;background:transparent;border:1.5px solid var(--linea);
  border-radius:14px;padding:15px;font-size:15px;font-weight:600;color:var(--tinta);cursor:pointer;transition:.15s;
}
.ver-todos:hover{border-color:var(--acento);color:var(--acento)}
.ver-todos span{color:var(--tenue);font-family:'IBM Plex Mono',monospace;margin-left:6px}
#resto{display:flex;flex-direction:column;gap:16px;margin-top:16px}

/* ---------- Pie ---------- */
.pie{max-width:680px;margin:0 auto;padding:26px 18px 60px;border-top:1px solid var(--linea);color:var(--tenue);font-size:13.5px}
.pie .lema{margin:0 0 12px}
.pie .enlaces{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px}
.pie .enlaces a{color:var(--acento);font-weight:600;text-decoration:none}
.pie .enlaces a:hover{text-decoration:underline}
.pie .aviso{margin:0;line-height:1.55;max-width:60ch}
.pie .version{margin:14px 0 0;font-size:12px;opacity:.7;font-family:'IBM Plex Mono',monospace}

/* ---------- Formularios ---------- */
.hoja{max-width:620px;margin:0 auto;padding:28px 18px 60px}
.hoja h1{font-size:26px;margin:0 0 6px;letter-spacing:-.02em}
.hoja .guia{color:var(--tenue);margin:0 0 24px;font-size:15px}
.caja{background:var(--papel);border:1.5px solid var(--linea);border-radius:var(--r);padding:20px;box-shadow:var(--sombra)}
.campo{margin-bottom:16px}
.campo label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.campo .pista{font-weight:400;color:var(--tenue);font-size:12.5px;margin-left:6px}
.campo input[type=text],.campo input[type=email],.campo input[type=url],.campo input[type=number],.campo input[type=password],.campo textarea,.campo select{
  width:100%;padding:11px 13px;border:1.5px solid var(--linea);border-radius:11px;background:#fff;
  font-family:inherit;font-size:15px;color:var(--grafito);transition:.15s;
}
.campo textarea{min-height:88px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.dos{grid-template-columns:1fr}}
.contador{float:right;font-size:12px;color:var(--tenue);font-family:'IBM Plex Mono',monospace}

.aviso-caja{border-radius:12px;padding:13px 15px;font-size:14px;margin-bottom:18px;line-height:1.5}
.aviso-caja.err{background:#fdeceb;border:1px solid #f2c2be;color:#8a2320}
.aviso-caja.ok{background:#e9f6ee;border:1px solid #b9dfc9;color:#166a3f}
.aviso-caja.info{background:#eef6f7;border:1px solid #bdd9dd;color:#155e68}

.previa{margin-top:26px}
.previa h2{font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--tenue);margin:0 0 10px}

.volver{display:inline-block;margin-bottom:18px;font-size:14px;color:var(--acento);text-decoration:none;font-weight:600}
.volver:hover{text-decoration:underline}

.datos{list-style:none;padding:0;margin:0;font-size:14.5px}
.datos li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--linea)}
.datos li:last-child{border-bottom:none}
.datos b{font-family:'IBM Plex Mono',monospace;font-weight:600}
.ref{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600;color:var(--acento);letter-spacing:.04em}

/* ---------- Widget embebido ---------- */
body.widget{background:transparent;padding:0}
body.widget .contenedor{padding:0;max-width:none}
body.widget .lista{gap:12px}
body.widget .tarjeta{padding:13px 15px 10px}
body.widget .titulo{font-size:17px}
body.widget .tarjeta.p1 .titulo{font-size:18px}
body.widget .desc{font-size:13.5px;margin-bottom:10px}
.widget-pie{text-align:center;font-size:12px;color:var(--tenue);padding:12px 0 2px}
.widget-pie a{color:var(--acento);font-weight:600;text-decoration:none}

/* ---------- Admin ---------- */
body.admin{background:var(--grafito);color:#e8e5df}
.admin-barra{background:#171a1e;border-bottom:1px solid #2a2f35;padding:12px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.admin-barra .logo{font-weight:700;font-size:17px;color:#fff}
.admin-barra a{color:#a9b2bb;text-decoration:none;font-size:14px;font-weight:500}
.admin-barra a:hover,.admin-barra a.activo{color:var(--oro)}
.admin-barra .der{margin-left:auto;display:flex;gap:16px;align-items:center}
.admin-cont{max-width:1080px;margin:0 auto;padding:26px 20px 60px}
.admin-cont h1{font-size:22px;margin:0 0 18px}
.panel{background:#22272d;border:1px solid #2f353c;border-radius:14px;padding:18px;margin-bottom:22px}
.panel h2{font-size:15px;margin:0 0 14px;color:var(--oro);text-transform:uppercase;letter-spacing:.08em}
table.tabla{width:100%;border-collapse:collapse;font-size:14px}
table.tabla th{text-align:left;color:#8d97a1;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid #2f353c}
table.tabla td{padding:10px;border-bottom:1px solid #2a2f35;vertical-align:top}
table.tabla tr:last-child td{border-bottom:none}
.eti{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.eti.borrador{background:#3a3f45;color:#c3ccd5}
.eti.revision{background:#5c4a12;color:#f2d78a}
.eti.publicado{background:#14472f;color:#8ee0b1}
.eti.rechazado{background:#4d1f1f;color:#f0a9a9}
.eti.expirado{background:#33383e;color:#98a2ac}
.btn{display:inline-block;border:none;border-radius:9px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s}
.btn.ok{background:var(--ok);color:#fff}
.btn.no{background:#5a2222;color:#f3b7b7}
.btn.gris{background:#333941;color:#d3dae1}
.btn:hover{filter:brightness(1.12)}
.admin-cont .campo label{color:#c6ced6}
.admin-cont .campo input,.admin-cont .campo textarea,.admin-cont .campo select{background:#1a1e23;border-color:#333941;color:#e8e5df}
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.metrica{background:#22272d;border:1px solid #2f353c;border-radius:14px;padding:16px}
.metrica .n{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--oro)}
.metrica .t{font-size:12px;color:#8d97a1;text-transform:uppercase;letter-spacing:.07em}
.entrar{max-width:360px;margin:12vh auto;background:#22272d;border:1px solid #2f353c;border-radius:16px;padding:28px}
.entrar h1{font-size:20px;margin:0 0 20px;text-align:center}
.entrar .boton-grande{background:var(--oro);box-shadow:none;color:#241c02}