/* ============================= */
/* RESET */
/* ============================= */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  color: #000;
  line-height: 1.5;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}


/* ============================= */
/* CONTAINER */
/* ============================= */

.container{
width:1100px;
margin:auto;
}


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

.cf-hero{
padding:40px 0 40px;
background:#fff;
border-bottom:1px solid #eee;
}

.cf-hero-content{
max-width:700px;
}

.cf-badge{
display:inline-block;
background:#111;
color:#fff;
padding:6px 12px;
border-radius:30px;
font-size:12px;
margin-bottom:16px;
}

.cf-hero h1{
font-size:42px;
margin-bottom:14px;
}

.cf-hero p{
font-size:18px;
color:#555;
line-height:1.6;
}

.cf-hero-actions{
margin-top:28px;
display:flex;
gap:14px;
}


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

.cf-btn{
padding:12px 22px;
border-radius:10px;
font-size:15px;
cursor:pointer;
border:none;
text-decoration:none;
display:inline-block;
transition:.2s;
}

.cf-btn-primary,
.cf-btn-primary-diseno{
background:#ffe600;
color:#000;
padding:10px 18px;
border-radius:10px;
font-weight:700;
text-decoration:none;
display:inline-block;
transition:all .25s ease;
position:relative;
overflow:hidden;
}

.cf-btn-primary-diseno{
margin-top:10px;
}

/* hover */
.cf-btn-primary:hover,
.cf-btn-primary-diseno:hover{
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(255,230,0,0.45);
background:#ffe600;
}

/* brillo animado */
.cf-btn-primary::after,
.cf-btn-primary-diseno::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:120%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transition:all .6s;
}

.cf-btn-primary:hover::after,
.cf-btn-primary-diseno:hover::after{
left:120%;
}
.cf-btn-secondary{
background:#eee;
color:#111;
}

.cf-btn-secondary:hover{
background:#ddd;
}

.cf-btn-full{
width:100%;
margin-top:15px;
}


/* ============================= */
/* PROGRESS */
/* ============================= */

.cf-progress-wrap{
background:#fff;
border-bottom:1px solid #eee;
padding:25px 0;
}

.cf-progress{
display:flex;
justify-content:space-between;
position:relative;
}

.cf-progress-line{
position:absolute;
top:20px;
left:0;
right:0;
height:3px;
background:#eee;
z-index:1;
}

.cf-step-indicator{
position:relative;
z-index:2;
text-align:center;
}

.cf-step-indicator span{
display:flex;
align-items:center;
justify-content:center;
width:40px;
height:40px;
border-radius:50%;
background:#ddd;
color:#333;
font-weight:bold;
margin:auto;
}

.cf-step-indicator p{
font-size:12px;
margin-top:6px;
color:#777;
}

.cf-step-indicator.active span{
background:#ffe600;
color:#000;
}

.cf-step-indicator.done span{
background:#4CAF50;
color:#fff;
}


/* ============================= */
/* MAIN */
/* ============================= */

.cf-main{
padding:50px 0 80px;
}

.cf-step-section{
display:none;
}

.cf-step-section.active{
display:block;
}


/* ============================= */
/* STEP HEADER */
/* ============================= */

.cf-step-header{
margin-bottom:35px;
max-width:650px;
}

.cf-step-kicker{
font-size:12px;
text-transform:uppercase;
color:#999;
}

.cf-step-header h2{
font-size:32px;
margin:8px 0;
}

.cf-step-header p{
color:#555;
line-height:1.6;
}


.cf-calidades-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}

.cf-calidad-card{
background:#fff;
border-radius:22px;
padding:26px;
border:2px solid #e9e9e9;
cursor:pointer;
transition:.25s ease;
position:relative;
min-height:280px;
display:flex;
flex-direction:column;
}

.cf-calidad-card:hover{
transform:translateY(-5px);
box-shadow:0 14px 34px rgba(0,0,0,0.08);
}

.cf-calidad-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
}

.cf-calidad-tag{
font-size:11px;
font-weight:700;
letter-spacing:1px;
color:#777;
}

.cf-calidad-check{
display:none;
font-size:18px;
font-weight:700;
}

.cf-calidad-card h3{
font-size:30px;
margin-bottom:10px;
line-height:1;
}

.cf-calidad-card p{
font-size:14px;
color:#555;
line-height:1.6;
margin-bottom:18px;
}

.cf-calidad-card ul{
padding-left:18px;
margin-top:auto;
}

.cf-calidad-card li{
font-size:14px;
color:#444;
margin-bottom:8px;
line-height:1.4;
}


.cf-calidad-card.selected .cf-calidad-check{
display:block;
}

.cf-calidad-card.pro.selected{
background:#ff6400;
border-color:#ff6400;
color:#000;
}

.cf-calidad-card.pro.selected p,
.cf-calidad-card.pro.selected li,
.cf-calidad-card.pro.selected .cf-calidad-tag,
.cf-calidad-card.pro.selected .cf-calidad-check{
color:#000;
}

.cf-calidad-card.elite.selected{
background:#ffe600;
border-color:#ffe600;
color:#000;
}

.cf-calidad-card.elite.selected p,
.cf-calidad-card.elite.selected li,
.cf-calidad-card.elite.selected .cf-calidad-tag,
.cf-calidad-card.elite.selected .cf-calidad-check{
color:#000;
}

.cf-calidad-card.legend.selected{
background:#7b3fcf;
border-color:#7b3fcf;
color:#fff;
}

.cf-calidad-card.legend.selected p,
.cf-calidad-card.legend.selected li,
.cf-calidad-card.legend.selected .cf-calidad-tag,
.cf-calidad-card.legend.selected .cf-calidad-check{
color:#fff;
}




/* ============================= */
/* DISEÑOS */
/* ============================= */

.cf-diseno-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.cf-disenos-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.cf-diseno-card{
background:#fff;
border-radius:14px;
border:2px solid #eee;
overflow:hidden;
cursor:pointer;
transition:.2s;
}

.cf-diseno-card:hover{
transform:translateY(-3px);
}

.cf-diseno-card img{
width:100%;
display:block;
}

.cf-diseno-card.selected{
border-color:#4CAF50;
}

.cf-empty-state{
text-align:center;
background:#fff;
padding:50px;
border-radius:14px;
border:2px dashed #ddd;
}

.cf-empty-icon{
font-size:40px;
margin-bottom:10px;
}


/* ============================= */
/* PRESUPUESTADOR */
/* ============================= */

.cf-presupuestador-wrap{
background:#fff;
padding:30px;
border-radius:16px;
border:2px solid #eee;
}

.cf-presupuesto-top{
display:flex;
gap:40px;
margin-bottom:20px;
font-size:15px;
}

.cf-presupuestador-box{
background:#fafafa;
padding:40px;
border-radius:10px;
border:1px dashed #ddd;
}

.cf-placeholder-box{
text-align:center;
}

.cf-placeholder-box h3{
margin-bottom:8px;
}


/* ============================= */
/* RESUMEN FINAL */
/* ============================= */

.cf-resumen-final{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.cf-resumen-card{
background:#fff;
padding:28px;
border-radius:16px;
border:2px solid #eee;
}




.cf-resumen-card.highlight{
border-color:#ffe600;
}

.cf-resumen-card h3{
margin-bottom:18px;
}
.cf-resumen-card p{
margin-bottom:18px;
}
.cf-resumen-item{
display:flex;
justify-content:space-between;
margin-bottom:12px;
font-size:15px;
}

.cf-resumen-item.total{
margin-top:18px;
padding-top:12px;
border-top:1px solid #eee;
font-size:18px;
font-weight:bold;
}


/* ============================= */
/* STEP ACTIONS */
/* ============================= */

.cf-step-actions{
margin-top:35px;
display:flex;
gap:12px;
}

.cf-step-actions.between{
justify-content:space-between;
}


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

.cf-footer{
background:#111;
color:#aaa;
text-align:center;
padding:30px 0;
margin-top:60px;
font-size:13px;
}	














/* NAVBAR */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 64px;
  background: #000;
  z-index: 1000;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav-content nav{
display:flex;
gap:8px;
justify-content:center;
flex:1;
}

/* LOGO */
.logo img {
  height: 34px;
  display: block;
  margin-right: 32px; /* margen a la derecha */
}
/* MENU */
nav a {
  margin-left: 24px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  transition: opacity 0.2s ease;
}

nav a:hover {
  opacity: 0.7;
}

/* NAV DROPDOWN */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
}

.nav-dropdown-trigger {
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding-top: 20px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1100;
  min-width: 190px;
}

.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  inset: 20px 0 0 0;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  z-index: -1;
}

.nav-dropdown-menu > * {
  position: relative;
}

.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: #bbb !important;
  margin-left: 0 !important;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  opacity: 1 !important;
}

.nav-dropdown-menu a:hover {
  background: #1e1e1e;
  color: #fff !important;
  opacity: 1 !important;
}

/* ─── MEGA MENU PRODUCTOS ─── */
.nav-mega-menu { min-width: 520px; }
.nav-mega-menu .mega-inner { display: flex; padding: 16px 8px; }
.mega-col { flex: 1; padding: 0 14px; border-right: 1px solid #222; }
.mega-col:last-child { border-right: none; }
.mega-col-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #ffffff;
  padding: 2px 0 10px; margin-bottom: 4px; border-bottom: 1px solid #1e1e1e;
}
.mega-col-title--ts { color: #c9a800; }
.mega-ts-btn,
.nav-dropdown-menu a.mega-ts-btn {
  display: inline-flex !important; align-items: center; gap: 6px;
  margin-top: 8px; background: #ffe600; color: #000 !important;
  border-radius: 8px; padding: 8px 14px !important;
  font-size: 12.5px !important; font-weight: 700 !important; text-decoration: none;
}
.mega-ts-btn:hover,
.nav-dropdown-menu a.mega-ts-btn:hover { background: #ffd700 !important; color: #000 !important; opacity: 1 !important; }

/* ─── CARRITO NAVBAR ─── */
.nav-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  margin-left: 20px;
  transition: opacity .2s;
}
.nav-cart-link:hover { opacity: .7; }
.cart-count {
  display: none;
  position: absolute;
  top: -7px;
  right: -10px;
  background: #ffe600;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
}

/* HERO */
.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  background: var(--white);
  padding-top: 64px;
}

.hero-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
}

.hero-content p {
  font-size: 18px;
  color: var(--gray);
  margin-bottom: 32px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
}


.btn-compra-facil{
  background:#ffe600;
  color:#000;
  padding:6px 18px;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  margin-left:12px;
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

/* hover */
.btn-compra-facil:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,230,0,0.45);
}

/* brillo animado */
.btn-compra-facil::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.6),
    transparent
  );
  transition:all .6s;
}

.btn-compra-facil:hover::after{
  left:120%;
}


/* BUTTONS */
.btn {
  padding: 12px 28px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 30px;
  font-size: 14px;
  transition: all 0.2s ease;
}
.btn.primary{
  background: #000;
  color: #fff;
  border-radius: 999px;
  padding: 14px 34px;
  font-weight: 600;
  border: 1px solid #000;
  transition: background 0.25s ease, color 0.25s ease;
}



.btn.secondary {
  border: 1px solid var(--black);
  color: var(--black);
}

.btn.secondary:hover {
  background: var(--black);
  color: var(--white);
}


nav {
  display: flex;
  align-items: center;
  gap: 15px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.user-box{
display:flex;
align-items:center;
gap:10px;
margin-left:1px;
opacity:0;
transition:opacity .2s;
}


.login-btn{
background:#fff;
border:none;
padding:8px 14px;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

.user-avatar{
width:32px;
height:32px;
border-radius:50%;
}


.user-area{
display:flex;
align-items:center;
gap:14px;
}

.user-avatar-icon{
width:22px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
}
.user-avatar-icon svg{
width:22px;
height:22px;
stroke:#000;
stroke-width:2;
fill:none;
}
.nav-badge{
position:absolute;
top:-5px;
right:-8px;
background:#ffe600;
color:#000;
font-size:10px;
font-weight:700;
border-radius:999px;
padding:0 4px;
height:15px;
line-height:15px;
min-width:15px;
text-align:center;
pointer-events:none;
display:none;
}

.user-cart{
font-size:20px;
text-decoration:none;
transition:.2s;
}

.user-cart:hover{
transform:scale(1.15);
}

.logout-btn{
background:none;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
padding:0;
}

.logout-icon{
width:22px;
height:22px;
transition:.2s;
}

.logout-btn:hover .logout-icon{
transform:scale(1.15);
opacity:.8;
}


body{
padding-top:64px;
}

.popup-overlay{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.55);

display:none;
align-items:center;
justify-content:center;

z-index:9999;

}

.popup-overlay.active{
display:flex;
}

.popup-box{

background:white;
padding:40px;
border-radius:18px;

max-width:420px;
width:90%;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,0.2);

}

.popup-box h2{
margin-bottom:12px;
}

.popup-box p{
opacity:.8;
margin-bottom:25px;
}

.popup-box button{

background:#ff6400;
border:none;
color:white;

padding:12px 28px;
border-radius:10px;

font-weight:600;
cursor:pointer;

}

.popup-box button:hover{
opacity:.9;
}


.cf-diseno-toolbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
gap:20px;
}

.cf-diseno-info{
display:flex;
flex-direction:column;
gap:6px;
}

.cf-diseno-info span{
font-size:14px;
color:#666;
}

.cf-disenos-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.cf-diseno-card{
background:#fff;
border-radius:16px;
border:2px solid #eee;
overflow:hidden;
cursor:pointer;
transition:.2s ease;
position:relative;
}

.cf-diseno-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

.cf-diseno-card img{
  width:100%;
  height:220px;
  object-fit:contain;
  display:block;
  background:#fff;
  padding:10px;
}
.cf-diseno-body{
padding:12px;
}

.cf-diseno-body h4{
font-size:14px;
margin:0;
color:#111;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.cf-diseno-check{
position:absolute;
top:10px;
right:10px;
width:30px;
height:30px;
border-radius:50%;
background:rgba(255,255,255,0.95);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
font-weight:700;
color:#00a651;
opacity:0;
transform:scale(.8);
transition:.2s ease;
box-shadow:0 4px 10px rgba(0,0,0,0.12);
}

.cf-diseno-card.selected{
border-color:#00c853;
box-shadow:0 0 0 2px rgba(0,200,83,0.08);
}

.cf-diseno-card.selected .cf-diseno-check{
opacity:1;
transform:scale(1);
}

.cf-empty-state{
text-align:center;
background:#fff;
padding:50px;
border-radius:14px;
border:2px dashed #ddd;
}

.cf-empty-icon{
font-size:40px;
margin-bottom:10px;
}


.cf-presupuesto-inline{
display:grid;
grid-template-columns:1.2fr 0.8fr;
gap:30px;
align-items:start;
}

.cf-presupuesto-bloque{
background:#fff;
border:1px solid #eee;
border-radius:16px;
padding:22px;
margin-bottom:18px;
}

.cf-presupuesto-titulo{
font-size:20px;
margin-bottom:16px;
}

.cf-presupuesto-resumen-wrap{
position:sticky;
top:100px;
}

.cf-presupuestador-box{
background:transparent;
padding:0;
border:none;
}

.product-row{
display:flex;
gap:12px;
margin-bottom:12px;
align-items:center;
}

.product-dropdown{
flex:1;
padding:14px;
border-radius:12px;
border:1px solid #ddd;
background:#fff;
font-size:14px;
}

.product-qty{
width:120px;
padding:14px;
border-radius:12px;
border:1px solid #ddd;
text-align:center;
font-size:14px;
}

.remove-item{
background:#f3f3f3;
border:none;
width:42px;
height:42px;
border-radius:10px;
cursor:pointer;
font-size:16px;
}

.remove-item:hover{
background:#e7e7e7;
}

.extras-toggle{
background:#FFF;
border:none;
padding: 14px 26px;
border-radius: 999px;
border: 2px solid #000;
font-weight:600;
font-size:14px;
cursor:pointer;
margin-top:0px;
transition:.2s;
}

.extras-toggle.active{
background:#000;
color:#fff;
}

.extras-container{
margin-top:18px;
display:none;
}

.extras-container.active{
display:block;
}

.promo-options{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.promo-btn{
background:#FFF;
border:none;
padding: 14px 26px;
border-radius: 999px;
border: 2px solid #000;
font-weight:600;
font-size:14px;
cursor:pointer;
margin-top:0px;
transition:.2s;
}

.promo-btn:hover{
background:#000;
color:#fff;
}

.promo-btn.active{
background:#4CAF50;
border-color:#4CAF50;
color:#000;
}

.promo-info-box{
margin-top:12px;
background:#1a1a1a;
color:#ddd;
padding:12px 16px;
border-radius:10px;
font-size:13px;
line-height:1.5;
border-left:4px solid #4CAF50;
}

.resumen-card{
border:1px solid #eaeaea;
padding:28px;
border-radius:22px;
box-shadow:0 20px 40px rgba(0,0,0,0.06);
background:#fff;
}

.resumen-card.pro{
background:#ff6a00;
border-color:#ff6a00;
color:#fff;
}

.resumen-card.elite{
background:#faed0b;
border-color:#faed0b;
color:#000;
}

.resumen-card.legend{
background:#6c3cff;
border-color:#6c3cff;
color:#fff;
}

.resumen-line{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-size:14px;
}

.resumen-divider{
height:1px;
background:#eee;
margin:18px 0;
}

.resumen-card.elite .resumen-divider{
background:#000;
}

.resumen-total{
display:flex;
justify-content:space-between;
font-size:20px;
font-weight:700;
margin-top:10px;
}

.resumen-promo-descuento{
background:#4caf50;
color:#000;
padding:10px 12px;
border-radius:8px;
font-weight:600;
display:flex;
justify-content:space-between;
margin-top:8px;
}

.resumen-promo-regalo{
background:#E3F2FD;
color:#000;
padding:10px 12px;
border-radius:8px;
font-weight:600;
display:flex;
justify-content:space-between;
margin-top:6px;
}

.resumen-fecha-top{
background:#000;
color:#ff4d4d;
padding:10px 14px;
border-radius:8px;
font-weight:700;
display:flex;
justify-content:space-between;
margin-bottom:15px;
}

.info-conjuntos{
margin-top:14px;
padding:12px 14px;
background:#fff7e6;
border:1px solid #ffd591;
border-radius:10px;
font-size:13px;
line-height:1.5;
color:#8a5b00;
}

@media (max-width:1100px){
.cf-presupuesto-inline{
grid-template-columns:1fr;
}
.cf-presupuesto-resumen-wrap{
position:relative;
top:0;
}
}


#promo-info-container,
#selector-disenos-descuento{
display:none !important;
}






.footer {
  background: #000;
  color: #fff;
  padding: 120px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.footer-col h4 {
  font-size: 18px;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 12px;
  font-size: 14px;
  color: #ccc;
}

.footer-col a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: #fff;
}

.footer-bottom {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 13px;
  color: #777;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}


.crear-diseno-card{
border:2px dashed #ddd;
border-radius:16px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:0.25s;
background:#fafafa;
}

.crear-diseno-card:hover{
border-color:#ffe600;
background:#fff;
transform:translateY(-3px);
}

.crear-diseno-inner{
text-align:center;
padding:25px;
}

.crear-plus{
font-size:50px;
font-weight:700;
color:#ffe600;
margin-bottom:10px;
}

.crear-diseno-card h4{
margin:5px 0;
font-size:16px;
}

.crear-diseno-card p{
font-size:13px;
color:#666;
line-height:1.4;
}





/* =========================
BOX PRINCIPAL
========================= */

.puntos-box9{
background:#000;
border-radius:22px;
padding:30px;
margin-top:5px;
display:flex;
flex-direction:column;
gap:12px;
color:white;
max-width:720px;
}


/* =========================
PUNTOS DISPONIBLES
========================= */

.puntos-info9{
display:flex;
justify-content:space-between;
align-items:center;
font-size:25px;
color:#e6e6e6;
font-weight:600;
}

/* NUMERO GRANDE */

#puntos-disponibles{
font-size:50px;
color:#ffe600;
line-height:1;
letter-spacing:1px;
}


/* =========================
TEXTO DISPONIBLE $
========================= */

.puntos-disponible-text{
font-size:15px;
color:#d0d0d0;
margin-top:-5px;
}


/* =========================
INFO EXTRA
========================= */

.puntos-info-extra9{
font-size:14px;
color:#cfcfcf;
margin-top:8px;
}

.puntos-info-extra9 strong{
color:#ffe600;
}


/* =========================
INPUT + BOTON
========================= */

.puntos-input-group9{
display:flex;
gap:12px;
align-items:center;
margin-top:10px;
}

/* INPUT */

#input-puntos-canje{
width:110px;
padding:14px;
border-radius:14px;
border:none;
font-size:18px;
font-weight:800;
text-align:center;
background:#111;
color:white;
}

/* BOTON MAX */

.btn-puntos-max9{
background:#ffe600;
color:#000;
border:none;
padding:14px 18px;
border-radius:14px;
font-size:14px;
font-weight:400;
cursor:pointer;
transition:.2s;
}

.btn-puntos-max9:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.25);
}



/* BOTON PRINCIPAL */

.btn-usar-puntos9{
background:#FFF;
border:none;
padding: 14px 26px;
border-radius: 999px;
border: 2px solid #000;
font-weight:600;
font-size:14px;
cursor:pointer;
margin-top:0px;
transition:.2s;

}



.btn-usar-puntos9.active{
  background:#ffe600;
  border-color:#ffe600;
  color:#000;
}

.btn-usar-puntos9:hover{

transform:translateY(-1px);
}

/* CONTENEDOR EXPANDIBLE */

.puntos-expand9{
max-height:0;
overflow:hidden;
transition:all .35s ease;
}

.puntos-expand9.activo{
max-height:500px;
margin-top:15px;
}


.resumen-puntos-descuento{
background:#4caf50;
color:#000;
padding:10px 12px;
border-radius:8px;
font-weight:600;
display:flex;
justify-content:space-between;
margin-top:8px;
}



.beneficios-nivel-titulo{

margin-top:12px;
margin-bottom:6px;

font-size:13px;
font-weight:700;

opacity:.9;

}

.beneficio-item2{

font-size:13px;
margin:2px 0;

opacity:.9;

}


.cf-login-required{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

background:#fff;
border-radius:18px;
padding:50px 30px;
margin-top:20px;

box-shadow:0 10px 30px rgba(0,0,0,0.06);
border:1px solid #eee;

max-width:520px;
margin-left:auto;
margin-right:auto;
}

.cf-login-required h3{
font-size:22px;
margin:10px 0;
color:#111;
}

.cf-login-required p{
font-size:14px;
color:#666;
max-width:380px;
}

.cf-login-required .cf-empty-icon{
font-size:40px;
margin-bottom:10px;
}

.cf-login-required .cf-btn{
margin-top:15px;
}

.cf-login-required a{
color:#6c3cff;
text-decoration:none;
font-weight:500;
}

.cf-login-required a:hover{
text-decoration:underline;
}
.link-calidades {
  display: block;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 13px;
  color: #666;
  text-decoration: none;
  transition: all .2s ease;
}

.link-calidades:hover {
  color: #000;
  text-decoration: underline;
}

/* ===== PASO 2 - DISEÑOS ===== */

/* Badge 10% OFF — misma forma que cf-btn-secondary pero verde */
.cf-diseno-toolbar .cf-promo-tag {
  display: inline-flex;
  align-items: center;
  background: #00c853;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  border: 2px solid #00c853;
}

.cf-toolbar-sep {
  margin-top: 36px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.cf-toolbar-sub {
  font-size: 13px;
  color: #888;
}

/* Card diseño personalizado */
.cf-personalizado-card-wrap {
  margin-top: 14px;
}

.cf-personalizado-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  padding: 18px 22px;
  border: 2px dashed #aaa !important;
  border-radius: 16px;
  position: relative;
  overflow: visible;
  cursor: pointer;
  transition: .2s;
  background: #fafafa;
}

.cf-personalizado-card:hover {
  border-color: #555 !important;
  background: #f3f3f3;
  transform: translateY(-2px);
}

.cf-personalizado-card.selected {
  border: 2px solid #1a1a1a !important;
  background: #f0f0f0;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.cf-personalizado-inner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cf-personalizado-icon {
  font-size: 28px;
  line-height: 1;
}

.cf-personalizado-inner h4 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
}

.cf-personalizado-inner p {
  margin: 0;
  font-size: 12px;
  color: #777;
}

.cf-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.promo-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cf-calidad-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cf-calidad-select {
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
}

.cf-calidad-select:hover,
.cf-calidad-select:focus {
  border-color: #1a1a1a;
}