/* ═══════════════════════════════════════════════════════
   HAVANA CLUB BARBER SHOP — Scorecard Survey
   styles.css — Paleta oficial de marca
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Playfair+Display:ital,wght@1,700&display=swap');

:root {
  --black:      #050505;
  --charcoal:   #111111;
  --card:       #161616;
  --card2:      #1c1c1c;
  --red:        #8E1F2F;
  --red-vivid:  #B3263E;
  --red-dim:    rgba(142,31,47,0.18);
  --red-dim2:   rgba(142,31,47,0.08);
  --gold:       #C9A13B;
  --gold-light: #DDB85A;
  --gold-dim:   rgba(201,161,59,0.14);
  --navy:       #0F2747;
  --navy-mid:   #1C3F6E;
  --navy-dim:   rgba(15,39,71,0.6);
  --ivory:      #F3EEE4;
  --muted:      #7A6F62;
  --muted2:     #5A5248;
  --border:         rgba(201,161,59,0.18);
  --border-red:     rgba(142,31,47,0.35);
  --border-navy:    rgba(28,63,110,0.5);
  --border-hover:   rgba(201,161,59,0.45);
  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 5px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--ivory);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.55;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* PROGRESS BAR */
#progress-bar-wrap{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,5,5,0.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-red);padding:10px 18px 9px;}
#progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;}
.progress-logo{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:3px;color:var(--gold);display:flex;align-items:center;gap:8px;}
.logo-dot{width:6px;height:6px;background:var(--red-vivid);border-radius:50%;display:inline-block;}
#step-label{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;}
#progress-track{height:2px;background:rgba(255,255,255,0.05);border-radius:99px;overflow:hidden;}
#progress-fill{height:100%;background:linear-gradient(90deg,var(--red),var(--gold));border-radius:99px;transition:width 0.45s cubic-bezier(0.4,0,0.2,1);width:0%;}

/* LAYOUT */
#app{max-width:680px;margin:0 auto;padding:96px 16px 72px;}

/* SCREENS */
.screen{display:none;}
.screen.active{display:block;animation:fadeUp 0.38s cubic-bezier(0.4,0,0.2,1);}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}

/* WELCOME */
.welcome-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--red-dim);border:1px solid var(--border-red);color:#E07080;font-size:9px;letter-spacing:3.5px;text-transform:uppercase;padding:5px 14px;border-radius:99px;margin-bottom:26px;}
.welcome-eyebrow::before{content:'';width:5px;height:5px;background:var(--red-vivid);border-radius:50%;}
.welcome-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,13vw,80px);line-height:0.9;letter-spacing:3px;margin-bottom:4px;color:var(--ivory);}
.welcome-title .hl-gold{color:var(--gold);}
.welcome-title .hl-red{color:var(--red-vivid);}
.welcome-tagline{font-family:'Playfair Display',serif;color:var(--muted);font-size:15px;font-style:italic;margin-bottom:32px;}
.welcome-divider{height:1px;background:linear-gradient(90deg,var(--red-dim),var(--border),transparent);margin-bottom:28px;}
.welcome-desc{background:var(--card);border:1px solid var(--border-red);border-left:3px solid var(--red);border-radius:var(--radius);padding:20px 22px;margin-bottom:28px;font-size:14px;opacity:0.9;}
.welcome-desc p{margin-bottom:8px;}
.welcome-desc p:last-child{margin-bottom:0;}
.welcome-desc strong{color:var(--gold);}
.welcome-bullets{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:32px;}
.welcome-bullet{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius-sm);padding:13px 15px;font-size:13px;display:flex;align-items:center;gap:10px;opacity:0.85;transition:border-color 0.2s,opacity 0.2s;}
.welcome-bullet:hover{border-color:var(--border);opacity:1;}
.bullet-icon{font-size:17px;flex-shrink:0;}

/* SECTION HEADERS */
.section-header{margin-bottom:28px;}
.section-tag{font-size:9px;letter-spacing:3.5px;text-transform:uppercase;color:var(--red-vivid);margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.section-tag::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-red),transparent);}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(32px,8vw,42px);letter-spacing:1.5px;line-height:1;margin-bottom:7px;color:var(--ivory);}
.section-desc{color:var(--muted);font-size:13px;}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;transition:border-color 0.2s;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--gold),transparent);border-radius:3px 0 0 3px;opacity:0;transition:opacity 0.2s;}
.card:hover{border-color:var(--border-hover);}
.card:hover::before{opacity:1;}
.card-red{border-color:var(--border-red);}
.card-red::before{background:linear-gradient(180deg,var(--red),transparent);opacity:0.7;}
.card-navy{border-color:var(--border-navy);}
.card-navy::before{background:linear-gradient(180deg,var(--navy-mid),transparent);opacity:0.7;}
.card-title{font-weight:600;font-size:14px;margin-bottom:15px;color:var(--ivory);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.badge-gold{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 9px;border-radius:99px;background:var(--gold-dim);color:var(--gold);border:1px solid var(--border);}
.badge-red{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 9px;border-radius:99px;background:var(--red-dim);color:#E07080;border:1px solid var(--border-red);}
.badge-navy{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:2px 9px;border-radius:99px;background:var(--navy-dim);color:#7AABDD;border:1px solid var(--border-navy);}

/* FORM */
.field{margin-bottom:16px;}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;letter-spacing:0.3px;}
input[type=text],input[type=tel],input[type=email],input[type=url],input[type=number],textarea,select{width:100%;background:var(--card2);border:1px solid rgba(255,255,255,0.07);border-radius:var(--radius-sm);color:var(--ivory);font-family:'DM Sans',sans-serif;font-size:14px;padding:11px 14px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;-webkit-appearance:none;}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,161,59,0.1);}
textarea{resize:vertical;min-height:72px;}
select option{background:#1c1c1c;color:var(--ivory);}

/* TOGGLES */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.04);gap:14px;}
.toggle-row:last-child{border-bottom:none;}
.toggle-label{font-size:13px;flex:1;color:var(--ivory);}
.toggle{position:relative;width:44px;height:25px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle-track{position:absolute;inset:0;background:rgba(255,255,255,0.08);border-radius:99px;cursor:pointer;border:1px solid rgba(255,255,255,0.06);transition:background 0.22s,border-color 0.22s;}
.toggle-track::before{content:'';position:absolute;width:19px;height:19px;left:2px;top:2px;background:var(--muted);border-radius:50%;transition:transform 0.22s,background 0.22s;box-shadow:0 1px 3px rgba(0,0,0,0.4);}
.toggle input:checked+.toggle-track{background:var(--red-dim);border-color:var(--red);}
.toggle input:checked+.toggle-track::before{transform:translateX(19px);background:var(--red-vivid);}

/* CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip-input{display:none;}
.chip-label{display:inline-block;padding:7px 15px;border:1px solid rgba(255,255,255,0.1);border-radius:99px;font-size:12px;cursor:pointer;color:var(--muted);transition:all 0.2s;user-select:none;background:var(--card2);}
.chip-label:hover{border-color:var(--border);color:var(--ivory);}
.chip-input:checked+.chip-label{background:var(--red-dim);border-color:var(--red-vivid);color:#EE8888;}
.chip-gold-group .chip-input:checked+.chip-label{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}

/* CHECKBOXES */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.check-item{display:flex;align-items:center;gap:10px;cursor:pointer;padding:2px 0;}
.check-item input{display:none;}
.check-box{width:20px;height:20px;border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;font-size:11px;font-weight:700;color:transparent;background:var(--card2);}
.check-item input:checked~.check-box{background:var(--red-dim);border-color:var(--red-vivid);color:var(--red-vivid);}
.check-item.gold-check input:checked~.check-box{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.check-text{font-size:13px;color:var(--ivory);}

/* SERVICE CARDS */
.service-card{background:var(--card2);border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius);padding:18px;margin-bottom:12px;transition:border-color 0.2s,opacity 0.2s;}
.service-card:hover{border-color:var(--border);}
.service-card.inactive-toggle{opacity:0.38;}
.service-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.service-name{font-weight:600;font-size:14px;color:var(--ivory);}
.service-def{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.price-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px;}
.price-field label{font-size:10px;letter-spacing:0.5px;}
.price-field input{padding:8px 11px;font-size:13px;}
.tier-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px;}
.tier-btn{flex:1;min-width:58px;padding:6px 6px;border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-xs);font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;cursor:pointer;background:var(--card);color:var(--muted2);font-family:'DM Sans',sans-serif;transition:all 0.2s;text-align:center;}
.tier-btn:hover{border-color:var(--border);color:var(--muted);}
.tier-btn[data-tier="Básico"].active-tier{border-color:rgba(255,255,255,0.2);color:var(--ivory);background:rgba(255,255,255,0.06);}
.tier-btn[data-tier="Estándar"].active-tier{border-color:var(--border-navy);color:#7AABDD;background:rgba(28,63,110,0.2);}
.tier-btn[data-tier="Premium"].active-tier{border-color:var(--gold);color:var(--gold);background:var(--gold-dim);}
.tier-btn[data-tier="VIP"].active-tier{border-color:var(--red-vivid);color:#EE8888;background:var(--red-dim);}
.service-flags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.flag-btn{padding:4px 11px;border:1px solid rgba(255,255,255,0.08);border-radius:99px;font-size:10px;cursor:pointer;color:var(--muted2);background:transparent;font-family:'DM Sans',sans-serif;transition:all 0.2s;user-select:none;}
.flag-btn:hover{border-color:var(--border);color:var(--muted);}
.flag-btn.on{background:var(--gold-dim);border-color:var(--gold);color:var(--gold);}
.flag-btn.red-on{background:var(--red-dim);border-color:var(--red-vivid);color:#EE8888;}

/* ADDON CARDS */
.addon-card{background:var(--card2);border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:9px;display:flex;align-items:center;gap:14px;transition:border-color 0.2s;}
.addon-card:hover{border-color:var(--border);}
.addon-main{flex:1;}
.addon-name{font-size:13px;font-weight:500;color:var(--ivory);margin-bottom:6px;}
.addon-price{width:90px;flex-shrink:0;}
.addon-price input{padding:7px 10px;font-size:13px;}
.suggest-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:3px 10px;border-radius:99px;cursor:pointer;user-select:none;border:1px solid rgba(255,255,255,0.08);color:var(--muted2);background:transparent;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.suggest-tag.on{background:var(--navy-dim);border-color:var(--navy-mid);color:#7AABDD;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;border-radius:var(--radius-sm);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all 0.22s;letter-spacing:0.5px;text-decoration:none;}
.btn-red{background:linear-gradient(135deg,var(--red),var(--red-vivid));color:#fff;box-shadow:0 4px 18px rgba(142,31,47,0.35);}
.btn-red:hover{opacity:0.88;transform:translateY(-2px);box-shadow:0 6px 24px rgba(142,31,47,0.45);}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#0a0a0a;box-shadow:0 4px 18px rgba(201,161,59,0.25);}
.btn-gold:hover{opacity:0.9;transform:translateY(-2px);}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.12);color:var(--muted);}
.btn-outline:hover{border-color:var(--border);color:var(--gold);}
.btn-navy{background:linear-gradient(135deg,var(--navy),var(--navy-mid));color:#AACCEE;box-shadow:0 4px 18px rgba(15,39,71,0.5);}
.btn-navy:hover{opacity:0.9;transform:translateY(-2px);}
.btn-block{width:100%;}
.nav-row{display:flex;gap:10px;margin-top:34px;}
.nav-row .btn{flex:1;}

/* REVIEW */
.review-section{margin-bottom:22px;}
.review-section h4{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1.5px;color:var(--gold);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);}
.review-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.03);font-size:13px;gap:14px;}
.review-item .key{color:var(--muted);flex-shrink:0;max-width:40%;}
.review-item .val{text-align:right;color:var(--ivory);}

/* FINAL */
.final-wrap{text-align:center;padding:20px 0;}
.final-icon{font-family:'Bebas Neue',sans-serif;font-size:72px;line-height:1;color:var(--gold);margin-bottom:12px;display:block;}
.final-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,12vw,68px);line-height:0.95;letter-spacing:2px;margin-bottom:10px;}
.final-title .hl{color:var(--red-vivid);}
.final-sub{color:var(--muted);font-size:14px;margin-bottom:36px;font-style:italic;}
.final-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:36px;}
.final-footer{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;line-height:1.8;}
.final-footer .hl{color:var(--red-vivid);}

/* MISC */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.divider{height:1px;background:linear-gradient(90deg,var(--border-red),var(--border),transparent);margin:24px 0;}
.group-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;margin:26px 0 12px;display:flex;align-items:center;gap:10px;color:var(--ivory);}
.group-title span{color:var(--red-vivid);}
.group-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border-red),transparent);}
.note-area textarea{min-height:60px;}
#save-notice{position:fixed;bottom:22px;right:18px;background:var(--red-dim);border:1px solid var(--border-red);color:#EE8888;padding:7px 16px;border-radius:99px;font-size:11px;letter-spacing:0.5px;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:200;}
#save-notice.show{opacity:1;}

@media(max-width:480px){
  #app{padding:88px 14px 64px;}
  .two-col{grid-template-columns:1fr;}
  .check-grid{grid-template-columns:1fr;}
  .welcome-bullets{grid-template-columns:1fr;}
  .price-row{grid-template-columns:1fr;}
  .tier-btn{font-size:9px;}
  .nav-row{flex-direction:column;}
  .nav-row .btn-outline{order:2;}
  .nav-row .btn-red,.nav-row .btn-gold{order:1;}
}

@media print{
  #progress-bar-wrap,.nav-row,#save-notice,.btn{display:none !important;}
  body{background:#fff;color:#111;}
  .screen{display:block !important;}
  .card{border:1px solid #ddd;margin-bottom:10px;}
}

/* ══════════════════════════════════════════════════════════
   EMAIL SUBMISSION BLOCK
══════════════════════════════════════════════════════════ */
.email-send-block {
  background: var(--card);
  border: 1px solid var(--border-red);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 24px;
}

.email-send-label {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.email-status {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  display: none;
}

.status-sending {
  background: rgba(201,161,59,0.08);
  border: 1px solid var(--border);
  color: var(--gold);
}

.status-success {
  background: rgba(40,120,60,0.12);
  border: 1px solid rgba(40,160,60,0.3);
  color: #6EC987;
}

.status-error {
  background: var(--red-dim);
  border: 1px solid var(--border-red);
  color: #EE8888;
}

.status-config {
  background: var(--navy-dim);
  border: 1px solid var(--border-navy);
  color: #7AABDD;
}