/* ============================================================
   PromoCondon — Diseño 2026, mobile-first, sin frameworks externos
   ============================================================ */

:root{
  --color-bg:        #faf7fb;
  --color-surface:    #ffffff;
  --color-primary:    #6d28d9;
  --color-primary-dk: #4c1d95;
  --color-primary-lt: #ede6fb;
  --color-accent:     #ff5d8f;
  --color-accent-dk:  #e0436f;
  --color-text:       #211a2c;
  --color-text-soft:  #6b6478;
  --color-border:     #e9e3f3;
  --color-success:    #1f9d55;
  --color-danger:     #d23b3b;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;

  --shadow-card: 0 4px 18px rgba(76, 29, 149, 0.10);
  --shadow-pop:  0 12px 32px rgba(76, 29, 149, 0.18);

  --container: 1180px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:800;letter-spacing:-0.01em;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

.visually-hidden{position:absolute;left:-9999px;}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 22px;
  font-size:1rem;
  font-weight:700;
  border-radius:var(--radius-s);
  border:none;
  cursor:pointer;
  min-height:48px;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  font-family:inherit;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:0 6px 16px rgba(255,93,143,.35);}
.btn-primary:hover{background:var(--color-accent-dk);}
.btn-secondary{background:var(--color-primary-lt);color:var(--color-primary-dk);}
.btn-secondary:hover{background:#e0d3f7;}
.btn-outline{background:transparent;border:2px solid var(--color-surface);color:var(--color-surface);}
.btn-block{width:100%;}
.btn-lg{padding:17px 26px;font-size:1.08rem;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,251,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--color-border);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  max-width:var(--container);margin:0 auto;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--color-primary-dk);}
.logo__img{height:48px;width:auto;display:block;}
.logo__img--small{height:30px;}
.nav-desktop{display:none;gap:28px;font-weight:600;color:var(--color-text-soft);}
.nav-desktop a:hover{color:var(--color-primary);}
.header-cta{display:none;}
.btn-menu{
  background:none;border:none;width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.btn-menu span, .btn-menu span::before, .btn-menu span::after{
  content:'';display:block;width:22px;height:2px;background:var(--color-text);border-radius:2px;
  position:relative;transition:.2s;
}
.btn-menu span::before{position:absolute;top:-7px;}
.btn-menu span::after{position:absolute;top:7px;}

.mobile-nav{
  position:fixed;inset:0;background:rgba(33,26,44,.55);z-index:90;
  display:none;
}
.mobile-nav.open{display:block;}
.mobile-nav__panel{
  position:absolute;top:0;right:0;height:100%;width:78%;max-width:320px;
  background:var(--color-surface);padding:24px 20px;
  display:flex;flex-direction:column;gap:6px;
  box-shadow:var(--shadow-pop);
}
.mobile-nav__panel a{
  padding:14px 10px;font-weight:700;font-size:1.05rem;border-radius:var(--radius-s);
}
.mobile-nav__panel a:active{background:var(--color-primary-lt);}
.mobile-nav__close{align-self:flex-end;background:none;border:none;font-size:1.6rem;line-height:1;padding:6px 10px;cursor:pointer;color:var(--color-text-soft);}

@media(min-width:900px){
  .nav-desktop{display:flex;}
  .header-cta{display:inline-flex;}
  .btn-menu{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  padding:36px 0 30px;
  background:radial-gradient(circle at 80% -10%, var(--color-primary-lt), transparent 60%);
}
.hero h1{font-size:clamp(1.7rem,5vw,2.6rem);color:var(--color-primary-dk);}
.hero p.lead{font-size:1.05rem;color:var(--color-text-soft);max-width:520px;}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--color-surface);border:1px solid var(--color-border);
  padding:8px 14px;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--color-primary-dk);
  box-shadow:var(--shadow-card);
}

/* ---------- Grid de packs ---------- */
.packs-section{padding:10px 0 60px;}
.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px;}
.section-title h2{font-size:1.5rem;color:var(--color-primary-dk);}
.packs-grid{
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:18px;
}
@media(min-width:560px){ .packs-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){ .packs-grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1180px){ .packs-grid{grid-template-columns:repeat(4,1fr);} }

.pack-card{
  background:var(--color-surface);
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid var(--color-border);
}
.pack-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);}
.pack-card__img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden;}
.pack-card__img img{
  width:100%;height:100%;object-fit:contain;
  border-radius:var(--radius-m);
  transform:scale(1.07); /* recorta el fino borde de color de algunas fotos de producto originales */
  box-shadow:0 0 0 1px var(--color-border) inset;
}
.pack-card__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pack-card__title{font-size:1.02rem;font-weight:800;min-height:2.6em;}
.pack-card__tag{font-size:.85rem;color:var(--color-text-soft);font-weight:600;}
.pack-card__footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pack-card__price{font-size:1.35rem;font-weight:800;color:var(--color-accent-dk);}
.pack-card__cta{padding:10px 18px;font-size:.92rem;min-height:40px;}

/* ---------- Ficha de pack ---------- */
.pack-detail{padding:28px 0 60px;}
.breadcrumb{font-size:.85rem;color:var(--color-text-soft);margin-bottom:16px;}
.breadcrumb a:hover{color:var(--color-primary);}
.pack-detail__grid{display:grid;grid-template-columns:1fr;gap:28px;}
@media(min-width:900px){ .pack-detail__grid{grid-template-columns:1fr 1fr;align-items:start;} }
.pack-detail__img{
  background:#fff;border-radius:var(--radius-l);border:1px solid var(--color-border);
  box-shadow:var(--shadow-card);padding:20px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pack-detail__img img{
  border-radius:var(--radius-m);
  transform:scale(1.05);
  box-shadow:0 0 0 1px var(--color-border) inset;
}
.pack-detail__price{font-size:2rem;font-weight:800;color:var(--color-accent-dk);margin:6px 0 18px;}
.pack-detail__desc{color:var(--color-text-soft);font-size:1.02rem;}

/* ---------- Formulario ---------- */
.form-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-l);
  padding:22px;box-shadow:var(--shadow-card);
}
.form-card h3{color:var(--color-primary-dk);font-size:1.2rem;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--color-text);}
.field .hint{font-size:.78rem;color:var(--color-text-soft);margin-top:4px;}
.field input[type=text],
.field input[type=tel],
.field input[type=email],
.field textarea{
  width:100%;padding:13px 14px;border-radius:var(--radius-s);
  border:1.5px solid var(--color-border);font-size:1rem;font-family:inherit;
  background:#fff;color:var(--color-text);
}
.field input:focus, .field textarea:focus{
  outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-lt);
}
.field-row{display:grid;grid-template-columns:1fr;gap:14px;}
@media(min-width:560px){ .field-row{grid-template-columns:1fr 1fr;} }
.checkbox-field{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--color-text-soft);}
.checkbox-field input{width:20px;height:20px;flex-shrink:0;margin-top:2px;}
.field.has-error input, .field.has-error textarea{border-color:var(--color-danger);}
.error-text{color:var(--color-danger);font-size:.82rem;margin-top:4px;}
.alert{padding:14px 16px;border-radius:var(--radius-s);margin-bottom:18px;font-weight:600;}
.alert-error{background:#fdeaea;color:var(--color-danger);border:1px solid #f3b9b9;}
.alert-success{background:#e9fbe9;color:var(--color-success);border:1px solid #a9e3b4;}

/* ---------- Confianza / iconos ---------- */
.trust-section{padding:30px 0;background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.trust-grid{display:grid;grid-template-columns:1fr;gap:18px;text-align:center;}
@media(min-width:700px){ .trust-grid{grid-template-columns:repeat(3,1fr);} }
.trust-item{padding:10px;}
.trust-item .ic{font-size:1.8rem;}
.trust-item h4{margin:8px 0 4px;font-size:1rem;}
.trust-item p{font-size:.88rem;color:var(--color-text-soft);margin:0;}

/* ---------- Página de gracias ---------- */
.thanks{padding:60px 0;text-align:center;}
.thanks .check{
  width:72px;height:72px;border-radius:50%;background:var(--color-success);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-primary-dk);color:#e8defa;padding:40px 0 20px;margin-top:30px;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:700px){ .footer-grid{grid-template-columns:2fr 1fr 1fr;} }
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:10px;}
.site-footer a{color:#cdb9f2;}
.site-footer a:hover{color:#fff;}
.footer-links li{margin-bottom:8px;list-style:none;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:16px;font-size:.78rem;color:#b6a3df;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- Botón flotante WhatsApp/teléfono ---------- */
.float-cta{
  position:fixed;bottom:18px;right:18px;z-index:60;
  width:58px;height:58px;border-radius:50%;
  background:var(--color-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 8px 20px rgba(255,93,143,.45);
}

/* ---------- Páginas estáticas / legales ---------- */
.static-page{padding:36px 0 60px;}
.static-page h1{color:var(--color-primary-dk);}
.static-page h2{font-size:1.2rem;margin-top:1.6em;}
.static-page .container{max-width:820px;}

/* ---------- Admin ---------- */
.admin-body{background:#f4f2f8;font-family:var(--font);margin:0;color:var(--color-text);}
.admin-shell{display:flex;min-height:100vh;}
.admin-sidebar{width:230px;background:var(--color-primary-dk);color:#fff;padding:20px 14px;flex-shrink:0;}
.admin-sidebar .logo{color:#fff;margin-bottom:24px;}
.admin-sidebar a{display:block;padding:11px 12px;border-radius:10px;color:#dccdf5;font-weight:600;margin-bottom:2px;font-size:.92rem;}
.admin-sidebar a:hover, .admin-sidebar a.active{background:rgba(255,255,255,.12);color:#fff;}
.admin-main{flex:1;padding:24px;max-width:100%;overflow-x:auto;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.admin-card{background:#fff;border-radius:var(--radius-m);padding:20px;box-shadow:var(--shadow-card);margin-bottom:20px;}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px;}
.stat-box{background:#fff;border-radius:var(--radius-m);padding:18px;box-shadow:var(--shadow-card);}
.stat-box .num{font-size:1.8rem;font-weight:800;color:var(--color-primary);}
.stat-box .lbl{font-size:.82rem;color:var(--color-text-soft);}
table.admin-table{width:100%;border-collapse:collapse;font-size:.9rem;}
table.admin-table th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--color-border);color:var(--color-text-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
table.admin-table td{padding:12px;border-bottom:1px solid var(--color-border);vertical-align:middle;}
table.admin-table tr:hover td{background:#faf8fd;}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700;}
.pill-nuevo{background:#fde6ec;color:#c23764;}
.pill-visto{background:#fff4d6;color:#9a6a00;}
.pill-gestionado{background:#dff5e3;color:#1f7a40;}
.pill-ok{background:#dff5e3;color:#1f7a40;}
.pill-fallo{background:#fdeaea;color:#c23535;}
.admin-login{display:flex;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary),var(--color-accent));}
.admin-login__box{background:#fff;border-radius:var(--radius-l);padding:34px;width:100%;max-width:380px;box-shadow:var(--shadow-pop);}
.img-thumb{width:54px;height:54px;object-fit:contain;background:#fff;border:1px solid var(--color-border);border-radius:8px;padding:4px;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.toolbar input, .toolbar select{padding:10px 12px;border-radius:var(--radius-s);border:1.5px solid var(--color-border);font-family:inherit;}
.empty-state{text-align:center;padding:40px 20px;color:var(--color-text-soft);}