/* =========================================================
   TUPACKDIGITAL.CL
   APP.CSS DEFINITIVO - ESTILO HISTORIETA CLARO
   Reemplaza assets/css/app.css completo.
   ========================================================= */

:root{
  --bg:#fff4bd;
  --paper:#fffdf1;
  --paper2:#fff2a6;
  --ink:#07070a;
  --blue:#00aeff;
  --blue2:#006fff;
  --yellow:#ffd21f;
  --red:#ff2356;
  --pink:#ff2ebd;
  --orange:#ff8a00;
  --muted:#253044;
  --border:#000;
  --shadow:7px 7px 0 #000;
  --shadow-sm:4px 4px 0 #000;
  --radius:20px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--bg)!important}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink)!important;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 12% 7%,rgba(255,35,86,.22),transparent 17%),
    radial-gradient(circle at 86% 9%,rgba(0,174,255,.22),transparent 18%),
    radial-gradient(circle at 50% 2%,rgba(255,210,31,.30),transparent 26%),
    linear-gradient(180deg,#fff8dc 0%,#fff0a6 48%,#ffe376 100%)!important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.35;
  background-image:radial-gradient(circle,rgba(0,0,0,.16) 1px,transparent 1.2px);
  background-size:13px 13px;
  mix-blend-mode:multiply;
}

body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-3;
  opacity:.25;
  background:repeating-conic-gradient(
    from -20deg at 50% 4%,
    rgba(255,35,86,.23) 0deg,
    rgba(255,35,86,.23) 6deg,
    transparent 6deg,
    transparent 18deg,
    rgba(0,174,255,.21) 18deg,
    rgba(0,174,255,.21) 24deg,
    transparent 24deg,
    transparent 38deg,
    rgba(255,210,31,.32) 38deg,
    rgba(255,210,31,.32) 44deg,
    transparent 44deg,
    transparent 58deg
  );
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:min(1440px,calc(100% - 40px));
  margin:auto;
}

/* =========================
   NAVBAR
   ========================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff!important;
  border-bottom:6px solid #000;
  box-shadow:0 7px 0 rgba(0,0,0,.25);
}

.site-header::before{
  content:"";
  display:block;
  height:12px;
  border-bottom:4px solid #000;
  background:repeating-linear-gradient(
    90deg,
    var(--red) 0 22px,
    var(--yellow) 22px 44px,
    var(--blue) 44px 66px,
    #000 66px 76px
  );
}

.nav-wrap{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand img{
  width:280px;
  height:72px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(3px 3px 0 #000);
}

.nav{
  display:flex;
  gap:22px;
  align-items:center;
}

.nav a{
  color:#111!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-weight:900;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-shadow:2px 2px 0 var(--yellow);
  padding:8px 10px;
  border-radius:12px;
  transition:.18s;
}

.nav a:hover{
  color:#fff!important;
  background:var(--red);
  text-shadow:2px 2px 0 #000;
  transform:translateY(-2px);
}

.menu-btn{
  display:none;
  border:4px solid #000;
  border-radius:12px;
  background:var(--yellow);
  color:#111;
  font-size:1.4rem;
  box-shadow:var(--shadow-sm);
}

/* =========================
   BOTONES
   ========================= */

.btn,
button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:4px solid #000!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#22d8ff 0%,#0077e6 100%)!important;
  color:#fff!important;
  padding:14px 23px;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-weight:900!important;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-shadow:2px 2px 0 #000;
  box-shadow:var(--shadow-sm)!important;
  cursor:pointer;
  transition:.18s;
}

.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform:translate(-2px,-2px) rotate(-1deg);
  box-shadow:7px 7px 0 #000!important;
  filter:saturate(1.1);
}

.btn-sm{padding:9px 13px;font-size:.78rem;border-radius:12px!important}
.btn-lg{min-height:58px;padding:16px 28px}
.btn-ghost{background:#111!important;color:#fff!important}

/* =========================
   TIPOGRAFÍA
   ========================= */

.eyebrow,
.badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:7px 13px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--yellow)!important;
  color:#000!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1;
  text-shadow:none!important;
  box-shadow:var(--shadow-sm);
}

.hero h1,
.section-head h2,
.section-center h2,
.page-title h1,
.product-detail h1,
.status-card h1{
  color:#111!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.035em;
  text-shadow:3px 3px 0 var(--yellow),6px 6px 0 #000!important;
}

.hero h1 span{
  color:var(--blue)!important;
  -webkit-text-stroke:2px #000;
  text-shadow:3px 3px 0 #fff,6px 6px 0 #000!important;
}

/* =========================
   HERO
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 78px;
  border-bottom:6px solid #000;
  background:
    radial-gradient(circle at 75% 35%,rgba(0,174,255,.30),transparent 25%),
    radial-gradient(circle at 20% 20%,rgba(255,35,86,.20),transparent 23%),
    linear-gradient(135deg,#fff4c5 0%,#ffe16a 48%,#78ddff 100%)!important;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.28;
  background:
    repeating-linear-gradient(115deg,transparent 0 20px,rgba(0,0,0,.09) 20px 24px),
    radial-gradient(circle at 50% 20%,transparent 0 6px,rgba(0,0,0,.08) 7px,transparent 9px);
}

.hero::after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:0;
  height:22px;
  z-index:2;
  border-top:5px solid #000;
  border-bottom:5px solid #000;
  background:repeating-linear-gradient(90deg,var(--red) 0 26px,var(--yellow) 26px 52px,var(--blue) 52px 78px,#000 78px 90px);
}

.hero-grid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:54px;
  align-items:center;
}

.hero-copy{
  position:relative;
  background:#fff!important;
  color:#111!important;
  border:6px solid #000;
  border-radius:28px;
  padding:34px;
  box-shadow:var(--shadow);
}

.hero-copy::before{
  content:"¡NUEVO!";
  position:absolute;
  top:-20px;
  right:20px;
  padding:8px 15px;
  border:4px solid #000;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-size:1rem;
  text-shadow:2px 2px 0 #000;
  box-shadow:var(--shadow-sm);
  transform:rotate(3deg);
}

.hero h1{
  font-size:clamp(3.2rem,6.1vw,6.6rem);
  line-height:.91;
  margin:16px 0 25px;
}

.hero p{
  color:#111!important;
  font-size:1.17rem;
  max-width:650px;
  font-weight:900;
}

.hero-actions{
  display:flex;
  gap:15px;
  margin:30px 0 31px;
  flex-wrap:wrap;
}

.trust-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.trust-row>span{
  display:flex;
  align-items:center;
  gap:11px;
  background:#fff8dc;
  color:#111;
  border:4px solid #000;
  border-radius:14px;
  padding:10px 12px;
  box-shadow:var(--shadow-sm);
}

.trust-row b{
  color:var(--red);
  font-size:1.5rem;
}

.trust-row strong{
  display:flex;
  flex-direction:column;
  color:#111;
  font-size:.9rem;
}

.trust-row small{
  color:#111;
  font-weight:700;
}

.hero-card{
  position:relative;
  padding:14px;
  background:#fff;
  border:6px solid #000;
  border-radius:28px;
  box-shadow:var(--shadow);
  transform:rotate(1deg);
}

.hero-card::before{
  content:"";
  position:absolute;
  inset:-16px;
  z-index:-1;
  border-radius:34px;
  background:linear-gradient(135deg,var(--red),var(--yellow),var(--blue));
}

.hero-card::after{
  content:"DESCARGA DIGITAL";
  position:absolute;
  bottom:-18px;
  left:28px;
  z-index:4;
  padding:8px 13px;
  border:4px solid #000;
  border-radius:999px;
  background:var(--yellow);
  color:#000;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  box-shadow:var(--shadow-sm);
}

.hero-card img{
  position:relative;
  width:100%;
  max-height:680px;
  object-fit:contain;
  border-radius:18px;
  filter:saturate(1.15) contrast(1.08);
}

/* =========================
   SECCIONES
   ========================= */

main,
.section,
.catalog-section,
.how,
.status-page,
.auth-section,
.account-head{
  background:transparent!important;
  color:#111!important;
}

.section{
  padding:64px 0;
}

.catalog-section{
  background:transparent!important;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  margin-bottom:32px;
  background:#fff;
  border:6px solid #000;
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:22px;
}

.section-head h2,
.section-center h2,
.page-title h1{
  font-size:clamp(2rem,3.4vw,3.55rem);
  line-height:1.05;
  margin:8px 0;
}

.section-center{
  text-align:center;
  margin-bottom:28px;
}

/* =========================
   CATÁLOGO
   ========================= */

.grid{display:grid;gap:18px}
.cards{grid-template-columns:repeat(5,minmax(0,1fr))}

.product-card{
  position:relative;
  overflow:visible!important;
  background:linear-gradient(180deg,#ff3c75 0%,#ff2ebd 45%,#00aef7 100%)!important;
  border:5px solid #000!important;
  border-radius:20px!important;
  color:#fff!important;
  box-shadow:var(--shadow-sm)!important;
  transition:.18s;
}

.product-card::before{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border:3px solid #000;
  border-radius:25px;
  background:linear-gradient(135deg,var(--yellow),var(--red),var(--blue));
}

.product-card::after{
  content:"¡OFERTA!";
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  padding:5px 10px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--yellow);
  color:#000;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-size:.72rem;
  box-shadow:3px 3px 0 #000;
}

.product-card:hover{
  transform:translate(-3px,-5px) scale(1.015);
  box-shadow:9px 9px 0 #000!important;
}

.card-image{
  display:block;
  overflow:hidden;
  border-radius:14px 14px 0 0;
  border-bottom:5px solid #000;
  background:#000;
}

.product-card>img{
  border-radius:14px 14px 0 0;
  border-bottom:5px solid #000;
}

.product-card img{
  width:100%;
  aspect-ratio:10/7;
  object-fit:cover;
  transition:.35s;
  filter:saturate(1.22) contrast(1.08);
}

.product-card:hover img{transform:scale(1.04)}

.card-body{padding:16px}

.card-body h3{
  margin:9px 0 5px;
  color:#fff!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-size:1.12rem;
  line-height:1;
  text-transform:uppercase;
  text-shadow:2px 2px 0 #000;
}

.card-body p{
  color:#fff!important;
  font-size:.78rem;
  min-height:38px;
  margin:0;
  font-weight:700;
  text-shadow:1px 1px 0 rgba(0,0,0,.55);
}

.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:13px;
}

.product-price{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.05;
  gap:4px;
}

.product-price__sale,
.product-price__regular,
.card-footer strong{
  color:var(--yellow)!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-size:1.4rem!important;
  -webkit-text-stroke:1px #000;
  text-shadow:2px 2px 0 #000!important;
}

.product-price__old,
del{
  color:#fff!important;
  opacity:.86!important;
  text-decoration-color:#000!important;
  text-decoration-thickness:3px!important;
}

/* =========================
   CÓMO FUNCIONA / ICONOS
   ========================= */

.how{
  background:#fff6cf!important;
  color:#111!important;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  background:#fff;
  border:6px solid #000;
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
}

.steps>div{
  position:relative;
  padding:25px 20px;
  text-align:center;
  background:#fff;
  color:#111;
  border:4px solid #000;
  border-radius:18px;
  box-shadow:var(--shadow-sm);
}

.steps b{
  position:absolute;
  top:13px;
  left:13px;
  width:34px;
  height:34px;
  border:3px solid #000;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:#000;
  font-size:.95rem;
  box-shadow:3px 3px 0 #000;
}

.step-icon{
  font-size:3.3rem;
  margin:18px 0 8px;
  filter:drop-shadow(3px 3px 0 rgba(0,0,0,.20));
}

.steps h3{
  color:#111;
  margin:8px 0;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  text-transform:uppercase;
}

.steps p{
  color:#111;
  font-size:.88rem;
  font-weight:700;
}

/* =========================
   BENEFICIOS
   ========================= */

.benefit-strip{
  border-top:6px solid #000;
  border-bottom:6px solid #000;
  padding:20px 0;
  background:#fff!important;
  color:#111;
}

.benefit-strip .container{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.benefit-strip .container>div{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff8dc;
  border:4px solid #000;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  padding:10px 13px;
}

.benefit-strip b{
  font-size:1.8rem;
  color:var(--orange);
}

.benefit-strip span{display:flex;flex-direction:column}
.benefit-strip strong,.benefit-strip small{color:#111}

/* =========================
   FOOTER
   ========================= */

.footer,
.site-footer{
  position:relative;
  background:#fff!important;
  color:#111!important;
  border-top:6px solid #000;
  padding:0 0 20px;
  box-shadow:0 -8px 0 rgba(0,0,0,.22);
}

.footer::before,
.site-footer::before{
  content:"";
  display:block;
  height:14px;
  margin-bottom:34px;
  border-bottom:5px solid #000;
  background:repeating-linear-gradient(90deg,var(--red) 0 28px,var(--yellow) 28px 56px,var(--blue) 56px 84px,#000 84px 96px);
}

.footer-grid{
  display:grid;
  grid-template-columns:1.45fr .8fr .9fr 1fr .9fr;
  gap:30px;
}

.footer h4{
  color:#111;
  margin-top:0;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  text-transform:uppercase;
  text-shadow:2px 2px 0 var(--yellow);
}

.footer a,
.footer p{
  color:#111!important;
  font-weight:700;
}

.footer a{display:block;margin:7px 0}

.footer-logo{
  width:270px;
  filter:drop-shadow(3px 3px 0 #000);
}

.socials{display:flex;gap:9px;margin-top:15px}
.socials a{
  width:38px;
  height:38px;
  border:2px solid #d5dce8;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
}

.payments{display:flex;flex-wrap:wrap;gap:8px}
.payments span{
  background:var(--yellow);
  color:#000;
  border:3px solid #000;
  box-shadow:3px 3px 0 #000;
  padding:7px 9px;
  border-radius:7px;
  font-weight:900;
  font-size:.72rem;
}

.footer-bottom{
  border-top:4px solid #000;
  margin-top:30px;
  padding-top:17px;
  color:#111;
  font-size:.83rem;
  text-align:center;
}

/* =========================
   FORMULARIOS / DETALLE / ESTADOS
   ========================= */

.filters{
  display:grid;
  grid-template-columns:1fr 260px auto;
  gap:12px;
  margin:30px 0;
}

.filters input,
.filters select,
label input,
label select,
label textarea,
input,
select,
textarea{
  width:100%;
  background:#fff8dc!important;
  border:4px solid #000!important;
  border-radius:14px!important;
  color:#111!important;
  padding:13px;
  font-weight:800;
  box-shadow:var(--shadow-sm);
}

label{
  color:#111!important;
  font-weight:900;
}

.product-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
  background:#fff;
  color:#111;
  border:6px solid #000;
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow);
}

.detail-image{
  border:5px solid #000;
  border-radius:22px;
  box-shadow:var(--shadow-sm);
  width:100%;
  aspect-ratio:10/7;
  object-fit:cover;
}

.product-detail h1{
  font-size:clamp(2.4rem,5vw,4.6rem);
  line-height:1;
  margin:14px 0;
}

.lead,
.benefits,
.legal-note,
.prose{
  color:#111!important;
}

.price,
.detail-price strong{
  color:var(--red)!important;
  font-family:Impact,"Arial Black",system-ui,sans-serif;
  font-size:2.2rem;
  font-weight:900;
  margin:20px 0;
  -webkit-text-stroke:1px #000;
}

.content-box,
.auth-card,
.status-card,
.purchase,
.empty{
  background:#fff!important;
  color:#111!important;
  border:5px solid #000!important;
  border-radius:22px!important;
  padding:30px;
  box-shadow:var(--shadow-sm)!important;
}

.auth-section,
.status-page{
  min-height:70vh;
  display:grid;
  place-items:center;
  padding:50px 16px;
  background:transparent!important;
}

.status-card{text-align:center}
.status-icon{
  display:grid;
  place-items:center;
  width:70px;
  height:70px;
  margin:auto;
  border:4px solid #000;
  border-radius:50%;
  background:var(--yellow);
  font-size:2rem;
  box-shadow:var(--shadow-sm);
}

.alert{padding:12px 14px;border-radius:10px;margin:12px 0}
.alert-danger{background:#ffe0e5;color:#641020;border:3px solid #000}
.alert-success{background:#d9f7e7;color:#073b22;border:3px solid #000}
.alert-warning{background:#fff0b8;color:#4f3600;border:3px solid #000}

.account-head{margin-bottom:30px}
.purchase-list{display:grid;gap:16px}
.purchase{
  display:grid;
  grid-template-columns:130px 1fr auto;
  gap:20px;
  align-items:center;
}

.purchase img{
  width:130px;
  aspect-ratio:10/7;
  object-fit:cover;
  border:4px solid #000;
  border-radius:12px;
}

.order-status{
  display:inline-block;
  padding:3px 8px;
  border:2px solid #000;
  border-radius:999px;
  background:var(--yellow);
  color:#000;
  font-size:.72rem;
  font-weight:900;
}

.status-paid{background:#d9f7e7}
.expired,.pending{color:#111}

/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1200px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}

@media(max-width:920px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .hero-grid,
  .product-detail{grid-template-columns:1fr}
  .hero-card{max-width:700px;margin:auto;transform:none}
  .steps,
  .benefit-strip .container{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}

  .nav{
    display:none;
    position:absolute;
    top:94px;
    left:0;
    right:0;
    background:#fff;
    padding:22px;
    flex-direction:column;
    border-top:5px solid #000;
    border-bottom:5px solid #000;
  }
  .nav.open{display:flex}
  .menu-btn{display:block}
  .filters{grid-template-columns:1fr}
}

@media(max-width:650px){
  .container{width:min(100% - 24px,100%)}
  .cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .hero{padding-top:42px}
  .hero h1{font-size:3rem}
  .hero-copy{padding:22px}
  .brand img{width:215px}
  .section-head{align-items:flex-start;flex-direction:column;padding:16px}
  .steps,
  .benefit-strip .container,
  .footer-grid{grid-template-columns:1fr}
  .product-card .card-body{padding:11px}
  .card-body h3{font-size:.98rem}
  .card-body p{font-size:.72rem}
  .purchase{grid-template-columns:90px 1fr}
  .purchase>div:last-child{grid-column:1/-1}
}

/* =========================================================
   LIMPIEZA FINAL: FONDO CLARO REAL + SIN FRANJAS DE COLORES
   Este bloque debe quedar al final de app.css.
   ========================================================= */

html,
body{
  background:#fff3b8 !important;
  color:#111 !important;
}

body{
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 35, 86, .10), transparent 18%),
    radial-gradient(circle at 88% 10%, rgba(0, 174, 255, .12), transparent 19%),
    linear-gradient(180deg, #fff8dc 0%, #fff3b8 45%, #ffeaa0 100%) !important;
}

/* Fondo tipo papel suave, sin rayos oscuros */
body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  opacity:.20 !important;
  background-image:radial-gradient(circle, rgba(0,0,0,.14) 1px, transparent 1.2px) !important;
  background-size:14px 14px !important;
  mix-blend-mode:multiply !important;
}

body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-3 !important;
  pointer-events:none !important;
  background:#fff3b8 !important;
  opacity:1 !important;
}

/* Quita absolutamente todas las franjas tipo arcoíris */
.site-header::before,
.site-header::after,
.hero::after,
.footer::before,
.site-footer::before,
.inner-hero::after{
  content:none !important;
  display:none !important;
  height:0 !important;
  border:0 !important;
  background:none !important;
}

/* Header claro y limpio */
.site-header{
  background:#ffffff !important;
  border-bottom:5px solid #000 !important;
  box-shadow:0 6px 0 rgba(0,0,0,.18) !important;
}

.nav-wrap{
  min-height:82px !important;
}

.nav a{
  color:#111 !important;
  text-shadow:2px 2px 0 #ffd21f !important;
}

.nav a:hover{
  color:#fff !important;
  background:#ff2356 !important;
  text-shadow:2px 2px 0 #000 !important;
}

/* Hero con fondo claro, sin cortes oscuros */
.hero{
  background:
    radial-gradient(circle at 74% 34%, rgba(0,174,255,.18), transparent 26%),
    radial-gradient(circle at 18% 22%, rgba(255,35,86,.12), transparent 25%),
    linear-gradient(135deg,#fff8dc 0%, #ffe685 52%, #bcefff 100%) !important;
  border-bottom:5px solid #000 !important;
}

.hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  opacity:.12 !important;
  background-image:radial-gradient(circle, rgba(0,0,0,.20) 1px, transparent 1.25px) !important;
  background-size:14px 14px !important;
}

/* Fuerza todas las secciones a claro */
main,
.section,
.catalog-section,
.how,
.status-page,
.auth-section,
.account-head,
.inner-section,
.account-hero,
.page-section{
  background:transparent !important;
  color:#111 !important;
}

.catalog-section,
.how{
  background:#fff3b8 !important;
}

.section-head,
.steps,
.benefit-strip .container > div,
.product-detail,
.content-box,
.auth-card,
.status-card,
.purchase,
.empty{
  background:#fff !important;
  color:#111 !important;
}

/* Títulos legibles */
.hero h1,
.section-head h2,
.section-center h2,
.page-title h1,
.product-detail h1,
.status-card h1{
  color:#111 !important;
  text-shadow:3px 3px 0 #ffd21f, 6px 6px 0 #000 !important;
}

/* Footer blanco, sin franja */
.footer,
.site-footer{
  background:#ffffff !important;
  color:#111 !important;
  border-top:5px solid #000 !important;
  box-shadow:0 -6px 0 rgba(0,0,0,.18) !important;
  padding-top:34px !important;
}

.footer *,
.site-footer *{
  color:inherit;
}

.footer h4,
.site-footer h4{
  color:#111 !important;
  text-shadow:2px 2px 0 #ffd21f !important;
}

.footer p,
.footer a,
.footer-brand p,
.footer-col a,
.site-footer p{
  color:#111 !important;
}

/* Beneficios sin banda negra */
.benefit-strip{
  background:#fff !important;
  color:#111 !important;
  border-top:5px solid #000 !important;
  border-bottom:5px solid #000 !important;
}

/* Reduce sensación oscura de tarjetas sin perder estilo */
.product-card{
  background:linear-gradient(180deg,#ff5f8d 0%,#ff3eb8 45%,#15c6ff 100%) !important;
}

@media(max-width:920px){
  .nav{
    background:#fff !important;
  }
  .nav.open{
    background:#fff !important;
  }
  .nav.open a{
    color:#111 !important;
    text-shadow:2px 2px 0 #ffd21f !important;
  }
}