/* Tarjeta del CEO — Jhonn Lenon M · SeixTech
   Nivel de la casa para su vitrina mayor: héroe épico oscuro, el Mundo al
   centro, el ecosistema en una rejilla de puertas y los servicios con
   PAGAR. Una pantalla primero; lo demás, a un toque. Sin grises sombríos. */
:root{
  --tinta:#101736; --suave:#3D4A7A; --fondo:#F4F7FF;
  --azul:#2563EB; --azul-osc:#1E3A8A; --violeta:#5B21B6;
  --hero-a:#0B1030; --hero-b:#1D2A6B; --hero-c:#5B21B6;
  --borde:#D7E0FF; --ok:#128C4A;
  --acento:#2563EB; --primario:#2563EB; --verde:#128C4A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo); color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
.topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:7px;
  padding:7px 10px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--borde);
}
.brand{font-size:20px;font-weight:800;color:var(--tinta);text-decoration:none;letter-spacing:-.5px}
.brand b{color:var(--azul)}
.ceo-tag{
  font-size:8.5px;font-weight:800;letter-spacing:.9px;color:var(--azul-osc);white-space:nowrap;
  background:linear-gradient(90deg,#FDF3D7,#F8E2AC);border:1px solid #DFA83E;
  padding:3px 6px;border-radius:999px;
}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:5px}
.langbtn{
  border:1px solid var(--borde);background:#fff;color:var(--azul-osc);
  font-weight:800;font-size:12px;border-radius:999px;padding:6px 10px;cursor:pointer;
}
.volver{
  color:#fff;background:var(--azul);text-decoration:none;font-weight:800;font-size:12px;
  border-radius:999px;padding:7px 10px;white-space:nowrap;
}
.card{max-width:680px;margin:0 auto;padding:0 10px 4px}
.cargando{text-align:center;color:var(--suave);padding:48px 0}

/* ---------- héroe ---------- */
.hero{
  margin:8px -10px 0;padding:14px;text-align:left;color:#fff;
  background:
    radial-gradient(120% 90% at 85% -10%,rgba(91,33,182,.55),transparent 60%),
    radial-gradient(90% 70% at 8% 110%,rgba(37,99,235,.5),transparent 55%),
    linear-gradient(160deg,var(--hero-a),var(--hero-b) 58%,var(--hero-c));
  border-radius:0 0 22px 22px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto -20% -55% -20%;height:70%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.14),transparent 70%);
  pointer-events:none;
}
.hero-main{display:flex;align-items:flex-start;gap:12px;position:relative;z-index:1}
.hero-id{flex:1;min-width:0}
.foto{
  width:76px;height:76px;flex:none;border-radius:50%;object-fit:cover;
  border:2.5px solid rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(3,7,30,.45);
  position:relative;z-index:1;background:#2A3A8F;
}
.iniciales{
  width:76px;height:76px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:27px;font-weight:900;color:#fff;letter-spacing:1px;
  background:linear-gradient(140deg,var(--azul),var(--violeta));
  border:2.5px solid rgba(255,255,255,.85);box-shadow:0 8px 22px rgba(3,7,30,.45);
  position:relative;z-index:1;
}
.hero h1{font-size:25px;line-height:1.03;margin:0 0 4px;font-weight:900;letter-spacing:-.4px;position:relative;z-index:1}
.hero-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 7px}
.rol{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.1px;
  color:#DCE7FF;text-transform:uppercase;position:relative;z-index:1;
}
.negocio{font-size:11.5px;font-weight:700;color:#AEC2FF;position:relative;z-index:1}
.lema{font-size:12.5px;line-height:1.35;color:#EDF2FF;margin:6px 0 0;position:relative;z-index:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:11px;color:#B9C8F5;margin:6px 0 0;position:relative;z-index:1}
.firma{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:13px;color:#FFE9A8;position:relative;z-index:1}
.qr-mini{flex:none;width:54px;border:0;border-radius:14px;background:#fff;color:var(--azul-osc);
  padding:5px;cursor:pointer;box-shadow:0 7px 18px rgba(3,7,30,.3);font-family:inherit}
.qr-mini img{display:block;width:40px;height:40px;margin:0 auto}
.qr-mini span{display:block;font-size:9px;font-weight:900;letter-spacing:1.2px;line-height:1;margin-top:2px}

/* ---------- el mundo al centro ---------- */
.mundo{
  display:block;margin:10px 0 2px;border-radius:18px;overflow:hidden;position:relative;
  text-decoration:none;color:#fff;min-height:118px;
  background:
    radial-gradient(90% 120% at 80% 0%,rgba(2,132,199,.65),transparent 60%),
    radial-gradient(80% 100% at 10% 100%,rgba(91,33,182,.55),transparent 55%),
    linear-gradient(150deg,#0B1030,#1D2A6B 60%,#0284C7);
  box-shadow:0 10px 24px rgba(11,16,48,.3);
}
.mundo .orbit{position:absolute;inset:0;opacity:.75}
.mundo .velo{position:relative;display:block;padding:13px 14px 12px}
.mundo .k{font-size:9px;font-weight:900;letter-spacing:1.7px;color:#9FD8FF}
.mundo h2{font-size:19px;line-height:1.13;margin:4px 0 5px;font-weight:900;max-width:520px}
.mundo .sub{font-size:11.5px;color:#D7E6FF;max-width:520px;display:block;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mundo .entra{
  display:inline-block;margin-top:8px;background:#fff;color:var(--azul-osc);
  font-weight:900;font-size:12.5px;padding:8px 13px;border-radius:999px;
  box-shadow:0 6px 16px rgba(3,7,30,.3);
}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mundo .entra{animation:flotar 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.mundo .entra{animation:none}}

/* ---------- secciones ---------- */
.sec-lab{display:flex;align-items:baseline;gap:7px;margin:9px 2px 6px}
.sec-lab h2{font-size:15px;margin:0;font-weight:900;letter-spacing:-.2px}
.sec-lab span{color:var(--azul);font-weight:800;font-size:11px}
.eco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.eco a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:47px;text-decoration:none;color:var(--tinta);text-align:center;
  background:#fff;border:1px solid var(--borde);border-radius:12px;padding:6px 3px;
  box-shadow:0 2px 7px rgba(16,23,54,.045);
}
.eco .dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(16,23,54,.05)}
.eco .eco-txt{display:block;min-width:0}
.eco .nm{font-weight:800;font-size:clamp(9.5px,2.7vw,11px);display:block;line-height:1.08;
  white-space:nowrap;letter-spacing:-.15px}
.eco .tg{display:none}
.prods{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.prod{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--borde);
  border-radius:14px;padding:8px 9px;margin:0;min-height:78px;
  box-shadow:0 2px 7px rgba(16,23,54,.045);
}
.prod .pr-head{display:flex;align-items:flex-start;gap:7px}
.prod .pem{font-size:20px;line-height:1.05}
.prod h3{font-size:12.5px;margin:0;font-weight:800;line-height:1.16;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod p{display:none}
.prod .pr-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.price{font-size:14px;font-weight:900;color:var(--azul-osc)}
.pagar{
  background:var(--azul);color:#fff;border:0;font-weight:900;font-size:11px;
  padding:7px 11px;border-radius:999px;cursor:pointer;letter-spacing:.3px;
  box-shadow:0 4px 11px rgba(37,99,235,.3);
}
.pagar.big{font-size:15.5px;padding:12px 24px}
.social-strip{display:flex;align-items:center;gap:7px;margin-top:8px}
.social-strip .sec-lab{margin:0;flex:none}
.social-strip .sec-lab span{display:none}
.soc-row{display:flex;flex-wrap:nowrap;gap:5px;justify-content:flex-end;margin:0 0 0 auto}
.soc{
  width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;font-size:16px;text-decoration:none;
  box-shadow:0 2px 7px rgba(16,23,54,.05);flex:none;
}
.dock{
  position:sticky;bottom:8px;display:flex;gap:5px;margin-top:9px;z-index:30;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);
  border:1px solid var(--borde);border-radius:999px;padding:5px;
  box-shadow:0 9px 22px rgba(16,23,54,.14);
}
.btn{
  flex:1;text-align:center;text-decoration:none;border:0;cursor:pointer;
  font-weight:800;font-size:11px;padding:9px 2px;border-radius:999px;color:#fff;
  font-family:inherit;white-space:nowrap;
}
.btn-wa{background:#128C4A}.btn-call{background:var(--azul)}
.btn-mail{background:var(--violeta)}.btn-save{background:#0E7490}.btn-share{background:#B45309}

/* ---------- hojas y modal ---------- */
.sheet{position:fixed;inset:0;z-index:80}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(9,12,35,.55);backdrop-filter:blur(3px)}
.sheet-box{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(560px,100%);background:#fff;border-radius:24px 24px 0 0;
  padding:24px 22px 30px;box-shadow:0 -14px 40px rgba(9,12,35,.3);
}
.sheet-box.center{text-align:center}
.sheet-box h3{margin:0 30px 10px 0;font-size:19px;font-weight:900}
.sheet-box.center h3{margin-right:0}
.sx{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--borde);background:#fff;font-size:15px;cursor:pointer;color:var(--tinta);
}
.qr{width:196px;height:196px;border:1px solid var(--borde);border-radius:14px}
.url{font-weight:800;color:var(--azul-osc);margin:11px 0 4px;font-size:15.5px}
.ps-desc{font-size:13.5px;color:var(--suave);line-height:1.5;margin:6px 0 0}
.copybtn{
  margin-top:15px;background:var(--azul);color:#fff;border:0;font-weight:900;
  padding:12px 22px;border-radius:999px;cursor:pointer;font-size:14.5px;font-family:inherit;
}
.foot{max-width:680px;margin:0 auto;padding:0 12px 8px;text-align:center}
.foot p{font-size:10.5px;color:var(--suave);line-height:1.25;margin:2px 0 0}
.foot a{color:var(--azul-osc);font-weight:700}
@media (min-width:640px){
  .hero h1{font-size:30px}
  .foto,.iniciales{width:88px;height:88px}
  .mundo{min-height:126px}
  .eco a{min-height:52px}
  .eco .tg{display:block;font-size:9px;color:var(--suave);line-height:1.1;margin-top:2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ===== v3: idioma (10), sonido, detalle de servicio, carrito, edición ===== */
.langsel{font:inherit;font-size:.72rem;font-weight:700;border-radius:999px;padding:5px 6px;
  cursor:pointer;background:#fff;border:1.5px solid var(--azul);color:var(--azul-osc);max-width:96px}
.sndbtn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--azul);
  background:#fff;font-size:.9rem;cursor:pointer;line-height:1;flex:none}
.sndbtn.off{opacity:.45;border-color:var(--suave)}
.products-head{align-items:center}
.products-head .head-actions{margin-left:auto;display:flex;align-items:center;gap:5px}
.editlink{margin:0;background:#fff;border:1.5px solid var(--borde);border-radius:999px;color:var(--azul);font:inherit;
  font-size:.7rem;font-weight:800;cursor:pointer;padding:5px 8px;white-space:nowrap}
.prod .pr-head{cursor:pointer}
.cnuevo{background:#128C4A;color:#fff;font-size:.58rem;font-weight:900;border-radius:999px;
  padding:2px 6px;letter-spacing:.4px;vertical-align:2px}
.addprod{display:inline-block;width:auto;margin:0;padding:6px 9px;border:1.5px dashed var(--azul);
  border-radius:999px;background:#E3EBFF;color:var(--azul-osc);font:inherit;font-weight:800;
  font-size:.7rem;cursor:pointer;white-space:nowrap}
.ps-em{font-size:2.6rem;line-height:1}
.psimg{width:74px;height:74px;border-radius:16px;object-fit:cover}
.ps-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.ps-price{font-size:1.45rem;font-weight:900;color:var(--azul-osc)}
.ps-qty{display:flex;align-items:center;gap:7px}
.ps-qtyl{font-size:.74rem;font-weight:800;color:var(--suave)}
.ps-qty button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--borde);
  background:#fff;font-weight:900;cursor:pointer;font-size:16px;font-family:inherit;color:var(--tinta)}
.ps-qty b{min-width:20px;text-align:center;font-size:1.05rem}
.ps-actions{display:flex;gap:9px;margin-top:14px}
.ps-actions .pagar{flex:1}
.pagar.alt{background:#fff;color:var(--verde);border:2px solid var(--verde);box-shadow:none}
.ps-hint{margin-top:13px;font-size:.78rem;color:var(--suave);line-height:1.5}
.pc-pulso{animation:pcPulso .65s ease}
@keyframes pcPulso{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ===== v4 · Modelo Tarjeta Inteligente Compacta (2026-10-30) =====
   La vitrina se aprecia de un vistazo; la profundidad vive en las hojas
   y en el Mundo. Las descripciones largas no desaparecen: quedan en la
   hoja de detalle de cada servicio y en el título accesible de cada
   puerta. El muelle de contacto ya no flota sobre las redes: todo se
   lee en orden, sin capas encima. */
.dock{position:static}
.pc-cartbtn .pc-n[hidden]{display:none!important}
/* El carrito al pie: botón en línea junto al pie, sin flotar sobre nada. */
.cart-slot{display:inline-block;vertical-align:middle;margin-left:8px}
.cart-slot .pc-cartbtn{position:relative;right:auto;bottom:auto;width:32px;height:32px;
  font-size:15px;box-shadow:0 4px 12px rgba(20,5,12,.28)}
@media (min-width:640px){
  .mundo .velo{padding:11px 14px 10px}
  .prod{min-height:74px}
}
@media (max-width:430px){
  .ceo-tag{letter-spacing:.35px}
  .langsel{max-width:86px}
  .hero{padding:11px 12px}
  .hero-main{gap:9px}
  .hero h1{font-size:23px;line-height:1.02}
  .lema{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .meta{flex-wrap:nowrap;white-space:nowrap}
  .qr-mini{width:48px;border-radius:12px}
  .qr-mini img{width:34px;height:34px}
  .mundo .velo{padding:11px 12px 10px}
  .mundo h2{font-size:17px;line-height:1.08}
  .mundo .entra{margin-top:7px;padding:7px 12px}
  .social-strip .sec-lab h2{font-size:13px}
  .soc{width:31px;height:31px;font-size:15px}
  .btn{font-size:10.5px}
  .foot p{font-size:10px;line-height:1.3}
}
@media (max-width:360px){
  .ceo-tag{display:none}
  .hero h1{font-size:22px}
  .prod h3{font-size:11.5px}
}