/* ═══════════════════════════════════════════════════════════
   COTIZADOR PÚBLICO — CID Impresiones
   Paleta sagrada: verde limón #c4ff00 sobre negro #0a0a0a
   Diseño: POS fácil · 1 tap por decisión · tarjetas parejas
   ═══════════════════════════════════════════════════════════ */

:root{
  --lime:#c4ff00;
  --lime-dim:#a3d400;
  --bg:#0a0a0a;
  --bg2:#0f0f14;
  --bg3:#181820;
  --border:rgba(196,255,0,.2);
  --border-strong:rgba(196,255,0,.45);
  --glow:rgba(196,255,0,.25);
  --glow-strong:rgba(196,255,0,.5);
  --text:#e8e8ea;
  --text-dim:#9a9aa0;
  --red:#ff3366;
  /* Paleta neón acentos — empresa de publicidad, miles de tintas */
  --neon-magenta:#ff00c8;
  --neon-cyan:#00f0ff;
  --neon-orange:#ff6b00;
  --neon-purple:#a855f7;
  --neon-yellow:#ffd400;
}

/* Grid digital sutil de fondo + scanlines tenues */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(196,255,0,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(196,255,0,.025) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at top,black 30%,transparent 80%);
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,
    transparent 0,transparent 3px,
    rgba(255,255,255,.01) 3px,rgba(255,255,255,.01) 4px);
  opacity:.6;
}
.hdr,.wrap,.gate,.aviso,.promo-banner,.ftr{position:relative;z-index:1}

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

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}

a{color:var(--lime);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:16px}

/* ═══════════════════════════════════════════ HEADER */
.hdr{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:linear-gradient(180deg,#0f0f14 0%,#0a0a0a 100%);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(8px);
}
.hdr-logo img{height:42px;width:auto}
.hdr-title{flex:1;min-width:0}
.hdr-title h1{
  font-size:22px;font-weight:800;color:var(--lime);
  letter-spacing:-.5px;line-height:1;
  text-shadow:0 0 12px var(--glow);
}
.hdr-sub{font-size:12px;color:var(--text-dim);display:block;margin-top:2px}
.hdr-wa{
  background:#25D366;color:#fff;font-weight:700;font-size:14px;
  padding:8px 14px;border-radius:10px;white-space:nowrap;
}
.hdr-wa:hover{background:#1ebe5d;text-decoration:none}

.hdr-user{display:flex;align-items:center;gap:8px}
.hdr-usernom{
  font-size:13px;font-weight:700;color:var(--lime);
  max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hdr-logout{
  width:34px;height:34px;border-radius:8px;
  background:rgba(196,255,0,.08);color:var(--lime);
  font-size:16px;font-weight:700;
  transition:all .15s;
  border:1px solid var(--border);
}
.hdr-logout:hover{background:rgba(196,255,0,.18);border-color:var(--border-strong)}

/* ═══════════════════════════════════════════ GATE */
.gate{max-width:440px;margin:20px auto 40px;padding:0 18px}
.gate-hero{
  text-align:center;padding:16px 14px 14px;
  background:linear-gradient(180deg,rgba(196,255,0,.12),rgba(196,255,0,.02));
  border:1.5px solid var(--border-strong);
  border-radius:14px;
  margin-bottom:14px;
  position:relative;overflow:hidden;
}
.gate-hero::before{
  content:"";position:absolute;inset:-2px;
  background:radial-gradient(circle at 50% 0%,rgba(196,255,0,.25),transparent 60%);
  animation:heroHalo 3s ease-in-out infinite;
  pointer-events:none;
}
.gate-badge{
  display:inline-block;padding:3px 10px;
  background:var(--lime);color:var(--bg);
  font-size:10.5px;font-weight:900;letter-spacing:.5px;
  text-transform:uppercase;border-radius:999px;
  margin-bottom:6px;
  box-shadow:0 0 12px var(--glow-strong);
  position:relative;z-index:1;
}
.gate-hero-num{
  font-size:38px;font-weight:900;color:var(--lime);
  letter-spacing:-1.5px;line-height:1;
  margin-bottom:4px;
  position:relative;z-index:1;
  animation:pulseOff 1.8s ease-in-out infinite;
}
.gate-hero-num span{
  display:inline-block;
  animation:pulseOff 1.8s ease-in-out infinite;
  animation-delay:.2s;
}
.gate-hero p{color:var(--text);font-size:13px;position:relative;z-index:1}
@keyframes pulseOff{
  0%,100%{text-shadow:0 0 12px rgba(196,255,0,.5),0 0 22px rgba(196,255,0,.3);transform:scale(1)}
  50%{text-shadow:0 0 22px rgba(196,255,0,.9),0 0 40px rgba(196,255,0,.6);transform:scale(1.03)}
}
@keyframes heroHalo{
  0%,100%{opacity:.6}
  50%{opacity:1}
}

.gate-tabs{
  display:flex;gap:6px;padding:5px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:16px;
}
.gate-tab{
  flex:1;padding:10px 8px;
  font-size:13.5px;font-weight:700;
  color:var(--text-dim);
  border-radius:8px;
  transition:all .15s;
}
.gate-tab.active{
  background:var(--lime);color:var(--bg);
  box-shadow:0 0 12px var(--glow);
}
.gate-form{
  display:none;padding:18px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:14px;
}
.gate-form.active{display:block;animation:fadeIn .25s ease}
.gate-legal{
  margin-top:12px;font-size:11.5px;color:var(--text-dim);
  line-height:1.4;text-align:center;
}

/* ═══════════════════════════════════════════ PROMO BANNER */
.promo-banner{
  margin:0 18px 14px;padding:12px 16px;
  background:linear-gradient(90deg,rgba(196,255,0,.15),rgba(196,255,0,.05));
  border:1.5px solid var(--border-strong);
  border-radius:12px;
  text-align:center;
  font-size:14px;color:var(--text);
  box-shadow:0 0 16px rgba(196,255,0,.15);
  animation:pulsoSuave 2.5s ease-in-out infinite;
}
.promo-banner strong{color:var(--lime);text-shadow:0 0 10px var(--glow)}
@keyframes pulsoSuave{
  0%,100%{box-shadow:0 0 16px rgba(196,255,0,.15)}
  50%{box-shadow:0 0 24px rgba(196,255,0,.35)}
}

/* Confirm usuario */
.confirm-user{
  padding:14px 16px;background:var(--bg2);
  border:1px solid var(--border);
  border-radius:12px;margin-bottom:14px;
}
.cu-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:14px;color:var(--text-dim);
}
.cu-row strong{color:#fff;font-weight:700}

.ct-desc{color:var(--lime);font-weight:700}
.ct-desc span:last-child{color:var(--lime);font-weight:800}

/* ═══════════════════════════════════════════ AVISO */
.aviso{
  display:flex;align-items:center;gap:12px;
  margin:14px 18px;padding:12px 16px;
  background:rgba(196,255,0,.06);
  border:1px solid var(--border);
  border-radius:12px;
  font-size:13.5px;line-height:1.45;
}
.aviso span{font-size:22px;flex-shrink:0}
.aviso strong{color:var(--lime)}

/* ═══════════════════════════════════════════ LAYOUT */
.wrap{max-width:1100px;margin:0 auto;padding:0 18px 40px}
.paso{margin-bottom:32px}

.paso-titulo{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:20px;font-weight:800;color:#fff;
  margin:22px 0 6px;letter-spacing:-.3px;
}
.paso-titulo .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--lime);color:var(--bg);
  font-size:17px;font-weight:900;
  box-shadow:0 0 14px var(--glow);
}
.paso-lead{
  color:var(--text-dim);font-size:14px;
  margin:0 0 16px 44px;line-height:1.45;
}
.btn-back{
  margin-left:auto;color:var(--lime);font-size:13px;font-weight:700;
  padding:8px 12px;border-radius:8px;
  background:rgba(196,255,0,.08);
  border:1px solid var(--border);
}
.btn-back:hover{background:rgba(196,255,0,.18);border-color:var(--border-strong)}

/* ═══════════════════════════════════════════ HERO "ESTIMADA" (editorial) */
.hero-est{
  margin:8px 0 26px;padding:28px 26px 30px;
  background:
    radial-gradient(circle at top right,rgba(196,255,0,.14),transparent 55%),
    linear-gradient(180deg,#0f0f14 0%,#0a0a0a 100%);
  border:1.5px solid var(--border-strong);
  border-radius:18px;
  position:relative;overflow:hidden;
}
.hero-est::before{
  content:'';position:absolute;right:-10%;top:-30%;
  width:60%;height:160%;
  background:radial-gradient(ellipse,rgba(196,255,0,.1),transparent 60%);
  pointer-events:none;
}
.he-crumb{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:11px;font-weight:900;color:var(--lime);
  letter-spacing:2.5px;text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid var(--border);
  margin-bottom:14px;
  position:relative;z-index:1;
}
.he-h1{
  font-size:48px;font-weight:900;color:#fff;
  letter-spacing:-2px;line-height:.95;
  position:relative;z-index:1;
}
.he-who{
  color:var(--lime);
  text-shadow:0 0 24px var(--glow-strong);
  display:inline-block;
  font-style:italic;
  letter-spacing:-1.5px;
}
.he-dot{
  color:var(--lime);
  text-shadow:0 0 28px var(--glow-strong);
  font-size:1.2em;
  margin-left:2px;
}
.he-small{
  font-size:18px;font-weight:600;color:var(--text-dim);
  letter-spacing:0;
  display:inline-block;margin-top:6px;
}
.he-sub{
  margin-top:16px;font-size:14px;color:var(--text);
  line-height:1.55;max-width:540px;
  position:relative;z-index:1;
}

/* ═══════════════════════════════════════════ CATEGORÍAS (tiles editoriales) */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  grid-auto-rows:1fr;
  gap:14px;
}

.cat-tile{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:18px 20px 56px;
  min-height:200px;
  background:
    radial-gradient(circle at 120% -20%,rgba(196,255,0,.1),transparent 55%),
    var(--bg2);
  border:1.5px solid var(--border);
  border-radius:18px;
  transition:all .25s cubic-bezier(.2,.8,.3,1);
  cursor:pointer;text-align:left;
}
.cat-tile:hover{
  transform:translateY(-4px);
  border-color:var(--lime);
  box-shadow:0 18px 40px rgba(0,0,0,.65),0 0 28px var(--glow-strong);
}
.cat-tile:active{transform:translateY(-1px)}

.ct-top{
  display:flex;justify-content:space-between;align-items:center;
  position:relative;z-index:1;
  margin-bottom:6px;
}
.ct-tag{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:10px;font-weight:900;color:var(--lime);
  letter-spacing:1.5px;
  background:rgba(196,255,0,.1);
  padding:4px 10px;border-radius:4px;
  border:1px solid rgba(196,255,0,.28);
  box-shadow:inset 0 0 12px rgba(196,255,0,.06);
}

/* Número VISIBLE (no marca de agua) — estilo display digital */
.ct-num-wrap{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;gap:14px;
  margin:8px 0 14px;
}
.ct-num{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:72px;font-weight:900;
  color:var(--lime);
  letter-spacing:-4px;line-height:.85;
  text-shadow:0 0 18px var(--glow-strong),0 0 38px var(--glow);
}
.ct-line{
  flex:1;height:2px;
  background:linear-gradient(90deg,var(--lime),transparent);
  opacity:.55;
  margin-bottom:14px;
  box-shadow:0 0 8px var(--glow);
}

.ct-body{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px}
.ct-nom{
  font-size:22px;font-weight:900;color:#fff;
  letter-spacing:-.8px;line-height:.95;
  font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
}
.ct-dot{
  color:var(--lime);
  text-shadow:0 0 14px var(--glow-strong);
  font-size:1.1em;
}
.ct-sub{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:10.5px;color:var(--text-dim);
  font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;
  margin-top:4px;line-height:1.3;
}

.ct-arrow{
  position:absolute;bottom:18px;right:20px;
  font-size:22px;color:var(--lime);
  opacity:.35;font-weight:900;
  transition:all .25s;
  text-shadow:0 0 10px var(--glow);
}
.cat-tile:hover .ct-arrow{
  opacity:1;
  transform:translateX(6px);
  text-shadow:0 0 18px var(--glow-strong);
}

/* ═══ NEÓN por categoría — rotación multicolor (solo acentos sutiles) ═══
   Verde limón sigue siendo el actor principal.
   Los neones entran en el número gigante y el glow del hover. */
.cat-tile[data-num="01"]{--accent:var(--lime)}
.cat-tile[data-num="02"]{--accent:var(--neon-cyan)}
.cat-tile[data-num="03"]{--accent:var(--neon-magenta)}
.cat-tile[data-num="04"]{--accent:var(--neon-orange)}
.cat-tile[data-num="05"]{--accent:var(--neon-purple)}
.cat-tile[data-num="06"]{--accent:var(--lime)}
.cat-tile[data-num="07"]{--accent:var(--neon-yellow)}
.cat-tile[data-num="08"]{--accent:var(--neon-cyan)}
.cat-tile[data-num="09"]{--accent:var(--neon-magenta)}
.cat-tile[data-num="10"]{--accent:var(--neon-orange)}

.cat-tile[data-num] .ct-num{
  color:var(--accent,var(--lime));
  text-shadow:
    0 0 18px color-mix(in srgb,var(--accent,var(--lime)) 55%,transparent),
    0 0 38px color-mix(in srgb,var(--accent,var(--lime)) 30%,transparent);
}
.cat-tile[data-num] .ct-line{
  background:linear-gradient(90deg,var(--accent,var(--lime)),transparent);
}
.cat-tile[data-num]:hover{
  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    0 0 28px color-mix(in srgb,var(--accent,var(--lime)) 45%,transparent);
  border-color:color-mix(in srgb,var(--accent,var(--lime)) 80%,transparent);
}
/* El arrow y el "." siguen verde limón — identidad */
.cat-tile .ct-arrow,.cat-tile .ct-dot{color:var(--lime)}

/* ═══════════════════════════════════════════ MINI-HERO CATEGORÍA (editorial) */
.cat-hero-mini{
  margin:14px 0 24px;padding:26px 26px 22px;
  background:
    radial-gradient(circle at top right,rgba(196,255,0,.12),transparent 55%),
    linear-gradient(180deg,#0f0f14 0%,#0a0a0a 100%);
  border:1.5px solid var(--border-strong);
  border-radius:16px;
  position:relative;overflow:hidden;
}
.chm-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:'Courier New',ui-monospace,monospace;
  padding-bottom:10px;border-bottom:1px solid var(--border);
  margin-bottom:14px;
}
.chm-tag{
  font-size:11px;font-weight:900;color:var(--lime);
  letter-spacing:2px;
  background:rgba(196,255,0,.1);
  padding:3px 10px;border-radius:999px;
  border:1px solid rgba(196,255,0,.28);
}
.chm-prompt{
  color:var(--lime);font-weight:900;font-size:14px;
  text-shadow:0 0 8px var(--glow-strong);
  margin-right:2px;
}
.chm-led{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 10px var(--lime),0 0 18px var(--glow-strong);
  margin-left:auto;
  animation:ledPulse 1.4s ease-in-out infinite;
}
@keyframes ledPulse{
  0%,100%{opacity:1;box-shadow:0 0 10px var(--lime),0 0 18px var(--glow-strong)}
  50%{opacity:.4;box-shadow:0 0 4px var(--lime)}
}
.chm-sep{color:var(--text-dim);font-weight:900}
.chm-upper{
  font-size:10.5px;color:var(--text-dim);
  font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
}
.chm-h1{
  font-size:56px;font-weight:900;color:#fff;
  letter-spacing:-2px;line-height:.9;
  margin-bottom:10px;
  font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;
}
.chm-dot{
  color:var(--lime);
  text-shadow:0 0 24px var(--glow-strong);
  font-size:1.1em;margin-left:2px;
}
.chm-cursor{
  display:inline-block;color:var(--lime);
  font-weight:400;margin-left:4px;
  text-shadow:0 0 14px var(--glow-strong);
  animation:blinkCursor 1s steps(2) infinite;
}
@keyframes blinkCursor{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
.chm-desc{
  font-size:14.5px;color:var(--text);line-height:1.55;
  max-width:560px;margin-bottom:18px;
}
.chm-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;padding-top:14px;
  border-top:1px solid var(--border);
}
.chm-m{display:flex;flex-direction:column;gap:3px}
.chm-m small{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:10px;color:var(--text-dim);
  letter-spacing:1.5px;text-transform:uppercase;font-weight:800;
}
.chm-m strong{
  font-size:13.5px;color:#fff;font-weight:700;
  letter-spacing:-.2px;line-height:1.3;
}

/* ═══════════════════════════════════════════ MATERIALES (cards clicables) */
.mats-wrap{margin-bottom:18px}
.lbl{
  display:block;font-size:12px;font-weight:800;
  color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;
  margin-bottom:10px;
}

.mat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  grid-auto-rows:1fr;
  gap:12px;
}

.mat-card{
  display:flex;flex-direction:column;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:all .2s ease;
  cursor:pointer;
  position:relative;
}
.mat-card:hover{
  border-color:var(--border-strong);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.5),0 0 18px var(--glow);
}
.mat-card.active{
  border-color:var(--lime);
  background:linear-gradient(180deg,rgba(196,255,0,.08),rgba(196,255,0,.02));
  box-shadow:0 0 0 2px var(--lime),0 10px 22px rgba(0,0,0,.55),0 0 26px var(--glow-strong);
  transform:translateY(-2px);
}
.mat-card.active::before{
  content:'✓';
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;
  background:var(--lime);color:var(--bg);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;
  box-shadow:0 0 14px var(--glow-strong);
  z-index:2;
}

.mc-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(196,255,0,.12) 0%,rgba(196,255,0,.03) 100%);
  border-bottom:1px solid var(--border);
  min-height:46px;
}
.mc-tag{
  font-family:'Courier New',monospace;
  font-size:10.5px;font-weight:900;color:var(--lime);
  letter-spacing:1.2px;text-transform:uppercase;
}
.mc-precio{
  font-size:17px;font-weight:900;color:var(--lime);
  text-shadow:0 0 10px var(--glow);
  white-space:nowrap;
}
.mc-precio small{
  font-size:11px;font-weight:600;opacity:.7;
  margin-left:1px;text-shadow:none;
}

.mc-body{
  flex:1;display:flex;flex-direction:column;gap:8px;
  padding:14px 16px;
}
.mc-body h4{
  font-size:18px;font-weight:800;color:#fff;
  letter-spacing:-.3px;line-height:1.15;
}
.mc-sub{
  font-size:12px;color:var(--lime);font-weight:700;
  letter-spacing:.3px;margin-top:-4px;
}
.mc-desc{
  font-size:13px;color:var(--text);line-height:1.45;
  min-height:38px;
}

.mc-specs{
  display:flex;flex-direction:column;gap:2px;
  margin-top:4px;
  background:rgba(196,255,0,.03);
  border:1px solid rgba(196,255,0,.08);
  border-radius:8px;
  padding:8px 10px;
}
.mc-specs .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:3px 0;
  font-size:11.5px;
  border-bottom:1px dashed rgba(196,255,0,.08);
}
.mc-specs .row:last-child{border-bottom:0}
.mc-specs .k{
  color:var(--text-dim);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;font-size:10px;
}
.mc-specs .v{color:var(--text);font-weight:600;text-align:right}

.mc-foot{
  padding:10px 14px;
  background:var(--bg3);
  border-top:1px solid var(--border);
  text-align:center;
}
.mc-select{
  font-size:12.5px;font-weight:800;color:var(--lime);
  letter-spacing:.5px;text-transform:uppercase;
}
.mat-card.active .mc-foot{
  background:var(--lime);
}
.mat-card.active .mc-select{color:var(--bg)}
.mat-card.active .mc-select::before{content:'SELECCIONADO — '}

/* ═══════════════════════════════════════════ FORM MEDIDAS */
.medidas-wrap{
  margin-top:24px;padding:18px 20px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:14px;
  animation:fadeIn .3s ease;
}
.medidas-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-bottom:12px;
}
.field{margin-bottom:12px}
.field label{
  display:block;font-size:13px;font-weight:800;
  color:var(--lime);margin-bottom:6px;
  letter-spacing:.2px;
}
.field small{
  display:block;margin-top:4px;font-size:12px;color:var(--text-dim);
}
.field input,.field textarea,.field select{
  width:100%;
  padding:14px 16px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:10px;
  color:#fff;
  font-size:17px;
  transition:all .15s;
  font-weight:600;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;
  border-color:var(--lime);
  box-shadow:0 0 0 3px var(--glow);
  background:rgba(196,255,0,.03);
}
.field textarea{resize:vertical;min-height:70px;font-weight:400;font-size:15px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim);font-weight:400}

.check{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--bg2);
  border:1.5px solid var(--border);
  border-radius:10px;
  font-size:14.5px;font-weight:600;
  cursor:pointer;margin-bottom:12px;
  transition:all .15s;
}
.check:hover{border-color:var(--border-strong)}
.check input{width:20px;height:20px;accent-color:var(--lime);cursor:pointer}

.mat-nota{
  font-size:12.5px;color:var(--text-dim);
  padding:10px 12px;
  background:rgba(196,255,0,.04);
  border-left:3px solid var(--lime);
  border-radius:0 8px 8px 0;
  margin-top:10px;line-height:1.45;
}

/* ═══════════════════════════════════════════ OPCIONES DE CORTE (rígidos) */
.corte-opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin-top:4px;
}
.corte-pill{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:12px 10px;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;transition:all .15s;
  color:var(--text);
}
.corte-pill:hover{border-color:var(--border-strong);background:rgba(196,255,0,.04)}
.corte-pill.active{
  background:var(--lime);color:var(--bg);
  border-color:var(--lime);
  box-shadow:0 0 16px var(--glow-strong);
}
.cp-nom{font-size:13.5px;font-weight:800;letter-spacing:.2px}
.cp-add{
  font-size:11.5px;font-weight:600;opacity:.85;
  font-family:'Courier New',monospace;
}
.corte-pill.active .cp-add{color:var(--bg);opacity:.75}

/* ═══════════════════════════════════════════ PRECIO EN VIVO */
.precio-card{
  margin-top:18px;padding:18px 20px;
  background:linear-gradient(180deg,rgba(196,255,0,.08),rgba(196,255,0,.02));
  border:1.5px solid var(--border-strong);
  border-radius:16px;
}
.precio-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;font-size:14.5px;color:var(--text-dim);
}
.precio-total{
  margin-top:6px;padding-top:12px;
  border-top:1px solid var(--border);
  font-size:18px;font-weight:800;color:#fff;
}
.precio-total span:last-child{
  color:var(--lime);
  text-shadow:0 0 14px var(--glow);
  font-size:26px;font-weight:900;
}

.btn-agregar{
  display:block;width:100%;
  margin-top:16px;padding:18px;
  background:var(--lime);color:var(--bg);
  font-size:17px;font-weight:900;
  border-radius:12px;
  box-shadow:0 8px 22px var(--glow);
  transition:all .18s;
  text-transform:uppercase;letter-spacing:.5px;
}
.btn-agregar:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 12px 28px var(--glow-strong);
}
.btn-agregar:active:not(:disabled){transform:translateY(0)}
.btn-agregar:disabled{
  background:#2a2a30;color:#555;
  box-shadow:none;cursor:not-allowed;
}

/* ═══════════════════════════════════════════ CARRITO */
.cotiz-empty{
  text-align:center;padding:34px 20px;
  background:var(--bg2);
  border:1.5px dashed var(--border);
  border-radius:14px;
  color:var(--text-dim);
}
.empty-ico{font-size:48px;margin-bottom:10px;opacity:.7}
.empty-sub{font-size:13px;opacity:.7;margin-top:4px}

.cotiz-list{display:flex;flex-direction:column;gap:10px}
.ci-card{
  padding:14px 16px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:12px;
  transition:all .15s;
}
.ci-card:hover{border-color:var(--border-strong)}
.ci-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  margin-bottom:6px;
}
.ci-head strong{font-size:15px;color:#fff;font-weight:700}
.ci-del{
  width:32px;height:32px;border-radius:8px;
  background:rgba(255,51,102,.1);color:var(--red);
  font-size:15px;font-weight:700;flex-shrink:0;
  transition:all .15s;
}
.ci-del:hover{background:rgba(255,51,102,.25)}
.ci-detalle{font-size:13px;color:var(--text-dim);margin-bottom:4px}
.ci-precio{
  font-size:17px;font-weight:800;color:var(--lime);
  text-shadow:0 0 8px var(--glow);
}
.ci-precio small{font-size:11px;font-weight:500;opacity:.6;text-shadow:none}

.cotiz-total{
  margin-top:14px;padding:18px 20px;
  background:linear-gradient(180deg,rgba(196,255,0,.1),rgba(196,255,0,.03));
  border:1.5px solid var(--border-strong);
  border-radius:14px;
}
.ct-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;font-size:14.5px;color:var(--text-dim);
}
.ct-gran{
  margin-top:8px;padding-top:12px;
  border-top:1px solid var(--border);
  font-size:18px;font-weight:900;color:#fff;
  text-transform:uppercase;
}
.ct-gran span:last-child{
  color:var(--lime);font-size:28px;
  text-shadow:0 0 16px var(--glow-strong);
}

/* ═══════════════════════════════════════════ BOTÓN ENVIAR */
.btn-enviar{
  display:block;width:100%;
  margin-top:14px;padding:18px;
  background:var(--lime);color:var(--bg);
  font-size:17px;font-weight:900;
  border-radius:14px;
  box-shadow:0 8px 22px var(--glow);
  transition:all .18s;
  text-align:center;
  text-transform:uppercase;letter-spacing:.5px;
}
.btn-enviar:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px var(--glow-strong);
  text-decoration:none;
}
.btn-enviar:active{transform:translateY(0)}
.btn-enviar:disabled{opacity:.6;cursor:wait}

/* ═══════════════════════════════════════════ ÉXITO */
.exito{
  text-align:center;padding:40px 20px;
  background:var(--bg2);
  border:1.5px solid var(--border-strong);
  border-radius:16px;
  margin:20px 0;
  animation:fadeIn .4s ease;
}
.exito-check{font-size:72px;margin-bottom:14px;filter:drop-shadow(0 0 24px var(--glow-strong))}
.exito h2{font-size:24px;color:#fff;margin-bottom:10px;font-weight:800}
.exito h2 span{color:var(--lime)}
.exito p{color:var(--text-dim);font-size:15px;margin-bottom:14px;line-height:1.5}
.exito-folio{
  display:inline-block;padding:12px 24px;margin:10px 0 18px;
  background:var(--lime);color:var(--bg);
  font-size:26px;font-weight:900;letter-spacing:1px;
  border-radius:12px;
  box-shadow:0 0 22px var(--glow-strong);
  font-family:'Courier New',monospace;
}
.exito-msg{font-size:14px;color:var(--text)}
.exito-msg strong{color:var(--lime)}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pulso{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

/* ═══════════════════════════════════════════ OVERLAY */
.overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(10,10,10,.85);
  align-items:center;justify-content:center;flex-direction:column;gap:16px;
  backdrop-filter:blur(8px);
}
.overlay p{color:var(--lime);font-weight:700;font-size:16px}
.spinner{
  width:54px;height:54px;border-radius:50%;
  border:4px solid rgba(196,255,0,.15);
  border-top-color:var(--lime);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════════ FOOTER */
.ftr{
  text-align:center;padding:24px 18px;
  border-top:1px solid var(--border);
  color:var(--text-dim);font-size:13px;
  margin-top:40px;
}
.ftr a{font-weight:600}

/* ═══════════════════════════════════════════ RESPONSIVE MÓVIL */
@media (max-width:640px){
  html,body{font-size:15px}
  .hdr{padding:12px 14px;gap:10px}
  .hdr-logo img{height:36px}
  .hdr-title h1{font-size:19px}
  .hdr-wa{padding:7px 10px;font-size:13px}
  .wrap{padding:0 14px 40px}

  .paso-titulo{font-size:18px}
  .paso-titulo .num{width:30px;height:30px;font-size:15px}
  .paso-lead{margin-left:40px;font-size:13.5px}

  /* Hero estimada */
  .hero-est{padding:22px 18px 24px;margin:6px 0 20px}
  .he-h1{font-size:34px;letter-spacing:-1.2px}
  .he-small{font-size:15px;margin-top:4px}
  .he-sub{font-size:13px;margin-top:12px}
  .he-crumb{font-size:10px;letter-spacing:1.8px}

  /* Categorías — 2 cols compactas con número digital */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cat-tile{min-height:172px;padding:14px 14px 46px}
  .ct-num{font-size:54px;letter-spacing:-3px}
  .ct-num-wrap{gap:10px;margin:4px 0 10px}
  .ct-nom{font-size:18px;letter-spacing:-.6px}
  .ct-sub{font-size:9.5px;letter-spacing:1px}
  .ct-tag{font-size:9px;padding:2.5px 8px;letter-spacing:1.2px}
  .ct-arrow{bottom:14px;right:14px;font-size:18px}

  /* Mini-hero */
  .cat-hero-mini{padding:20px 18px 18px}
  .chm-h1{font-size:42px;letter-spacing:-1.4px}
  .chm-desc{font-size:13.5px}
  .chm-meta{gap:10px;grid-template-columns:repeat(2,1fr)}
  .chm-m small{font-size:9.5px}
  .chm-m strong{font-size:12.5px}

  /* Corte pills: 2x2 en móvil */
  .corte-opts{grid-template-columns:repeat(2,1fr);gap:6px}
  .corte-pill{padding:10px 8px}
  .cp-nom{font-size:12.5px}
  .cp-add{font-size:10.5px}

  /* Mini-hero */
  .cat-hero-mini{padding:14px 16px}
  .chm-h3{font-size:22px}
  .chm-desc{font-size:13.5px}

  /* Materiales — 1 columna móvil */
  .mat-grid{grid-template-columns:1fr;gap:10px}
  .mc-body h4{font-size:16px}
  .mc-precio{font-size:15px}
  .mc-desc{font-size:12.5px;min-height:0}

  /* Medidas */
  .medidas-grid{grid-template-columns:1fr 1fr;gap:10px}
  .field input,.field textarea,.field select{padding:12px 14px;font-size:16px}

  .precio-total span:last-child{font-size:22px}
  .ct-gran span:last-child{font-size:24px}
  .btn-agregar,.btn-enviar{padding:16px;font-size:15.5px}
  .exito-folio{font-size:22px;padding:10px 18px}
}

/* Pantalla éxito - acciones múltiples */
.exito-acciones{display:flex;flex-direction:column;gap:10px;margin-top:18px;align-items:center}
.exito-acciones .btn-enviar{min-width:240px;text-align:center;text-decoration:none;display:inline-block}
.exito-acciones .btn-pdf{background:linear-gradient(135deg,#c4ff00,#a3e635);color:#0a0a0a;font-weight:800}
.exito-acciones .btn-wa-link{background:#25D366;color:#fff}
.exito-acciones .btn-volver{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-dim);font-weight:600}
.exito-acciones .btn-volver:hover{border-color:var(--lime);color:var(--lime)}

/* ═══════════════════════════════════════════════════════════
   EXTRAS Y TERMINADOS (nuevo)
   ═══════════════════════════════════════════════════════════ */
.extras-wrap{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(196,255,0,.15);
  border-radius:12px;
  background:rgba(196,255,0,.03);
}
.extras-wrap .lbl{
  color:var(--lime);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  display:block;
  margin-bottom:12px;
}
.extra-opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.extra-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  transition:all .15s;
  min-height:60px;
  text-align:center;
}
.extra-pill:hover{border-color:rgba(196,255,0,.4)}
.extra-pill.active{
  border-color:var(--lime);
  background:rgba(196,255,0,.1);
  box-shadow:0 0 0 1px var(--lime);
}
.extra-pill .ep-nom{font-size:13px;font-weight:700}
.extra-pill .ep-add{font-size:11px;color:var(--lime);font-weight:600}
.extra-pill.active .ep-add{color:var(--lime)}

.extras-toggle-row{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
@media(min-width:520px){
  .extras-toggle-row{grid-template-columns:1fr 1fr}
}
.extras-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.03);
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  user-select:none;
  transition:all .15s;
}
.extras-check:hover{border-color:rgba(196,255,0,.4)}
.extras-check input[type=checkbox]{
  width:20px;height:20px;accent-color:var(--lime);cursor:pointer;
}
.extras-check input[type=checkbox]:checked ~ span{color:var(--lime)}

/* Desglose extras en precio-card */
.precio-extras{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.08);
  margin-bottom:8px;
}
.pex-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--text-dim);
}
.pex-row.pex-add{color:var(--lime);font-weight:600}

/* Badges en las cards del carrito */
.ci-badges{
  display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;
}
.ci-badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:99px;
  background:rgba(196,255,0,.12);
  color:var(--lime);
  font-weight:600;
  border:1px solid rgba(196,255,0,.25);
}

/* Hint de forma de cobrarse en card de material */
.mc-cobro{
  display:inline-block;
  margin:8px 0;
  padding:6px 12px;
  background:rgba(196,255,0,.08);
  border:1px solid rgba(196,255,0,.2);
  border-radius:8px;
  color:var(--lime);
  font-size:12px;
  font-weight:600;
}

/* Banner de material elegido (arriba del form de medidas) */
.mat-elegido-banner{
  display:flex;flex-direction:column;gap:6px;
  padding:14px 18px;
  margin-bottom:18px;
  background:linear-gradient(135deg,rgba(196,255,0,.12),rgba(196,255,0,.02));
  border:1px solid rgba(196,255,0,.3);
  border-radius:12px;
}
.meb-top{display:flex;align-items:center;gap:10px;font-size:16px}
.meb-check{
  width:24px;height:24px;border-radius:50%;
  background:var(--lime);color:#0a0a0a;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;
}
.meb-cobro{color:var(--text-dim);font-size:14px}
.meb-cobro strong{color:var(--lime);font-size:17px}

/* Sub-label dentro de extras-wrap (para tipo de diseño/instalación) */
.lbl-sub{
  display:block;
  margin-top:14px;margin-bottom:8px;
  color:var(--text);font-size:13px;font-weight:700;
}

/* Desplegable de tipo de diseño / instalación */
.diseno-detalle{
  margin-top:14px;
  padding:14px;
  background:rgba(196,255,0,.04);
  border:1px dashed rgba(196,255,0,.25);
  border-radius:10px;
  animation:fadeInDown .2s ease;
}
@keyframes fadeInDown{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
.extra-pill .ep-hint{
  display:block;
  font-size:10.5px;
  color:var(--text-dim);
  font-weight:500;
  margin-top:2px;
  line-height:1.2;
}
.extra-pill.active .ep-hint{color:rgba(196,255,0,.75)}

/* ═══════════════════════════════════════════════════════════
   🆕 CHECKOUT REDESIGN — Sticky cart + método de pago tipo Clip/ML
   ═══════════════════════════════════════════════════════════ */

/* Barra flotante del carrito (abajo fija) */
.cart-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  background:linear-gradient(180deg,#0f0f14 0%,#000 100%);
  border-top:2px solid var(--lime);
  box-shadow:0 -8px 24px rgba(196,255,0,.15),0 -2px 12px rgba(0,0,0,.6);
  padding:12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
  display:none;
  animation:slideUpBar .25s ease;
}
.cart-bar.show{display:flex;align-items:center;gap:12px}
@keyframes slideUpBar{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
.cart-bar-info{flex:1;min-width:0}
.cart-bar-count{
  font-size:12px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;
}
.cart-bar-total{
  font-size:22px;font-weight:900;color:var(--lime);
  line-height:1.1;letter-spacing:-.5px;
  text-shadow:0 0 10px var(--glow);
}
.cart-bar-btn{
  background:var(--lime);color:#0a0a0a;
  padding:14px 22px;border-radius:12px;
  font-weight:900;font-size:15px;
  display:flex;align-items:center;gap:6px;
  box-shadow:0 0 20px var(--glow-strong);
  transition:transform .15s;
  white-space:nowrap;
}
.cart-bar-btn:active{transform:scale(.96)}
/* Padding-bottom para que la barra no tape el contenido */
body.has-cart-bar .wrap{padding-bottom:100px}

/* Cart mejorado — total gigante + CTA grande */
.cart-big-total{
  margin:20px 0 18px;padding:22px 18px;
  background:linear-gradient(135deg,rgba(196,255,0,.08) 0%,rgba(196,255,0,.02) 100%);
  border:2px solid var(--lime);
  border-radius:18px;
  text-align:center;
  box-shadow:0 0 30px var(--glow);
}
.cart-big-total-lbl{
  font-size:12px;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:1.5px;font-weight:700;
  margin-bottom:6px;
}
.cart-big-total-val{
  font-size:44px;font-weight:900;color:var(--lime);
  line-height:1;letter-spacing:-1px;
  text-shadow:0 0 18px var(--glow-strong);
}
.cart-big-total-sub{
  font-size:11px;color:var(--text-dim);margin-top:6px;
}

.cart-cta-pagar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:20px;margin-top:14px;
  background:var(--lime);color:#0a0a0a;
  border-radius:16px;border:none;
  font-size:18px;font-weight:900;
  letter-spacing:.3px;
  box-shadow:0 0 24px var(--glow-strong),0 4px 14px rgba(196,255,0,.2);
  cursor:pointer;
  transition:transform .15s;
}
.cart-cta-pagar:hover{transform:translateY(-1px)}
.cart-cta-pagar:active{transform:scale(.98)}
.cart-cta-pagar:disabled{opacity:.5;cursor:not-allowed}

/* Pantalla método de pago — 3 cards grandes */
.met-wrap{
  display:grid;gap:14px;
  margin-top:14px;
}
.met-card{
  display:flex;align-items:center;gap:14px;
  padding:18px 16px;
  background:linear-gradient(135deg,#121218 0%,#0a0a12 100%);
  border:2px solid rgba(196,255,0,.18);
  border-radius:16px;
  cursor:pointer;
  transition:all .2s;
  text-align:left;
  width:100%;
}
.met-card:hover{
  border-color:var(--lime);
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(196,255,0,.15);
}
.met-card-ico{
  font-size:36px;line-height:1;
  flex-shrink:0;
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(196,255,0,.08);
}
.met-card-txt{flex:1;min-width:0}
.met-card-tit{
  font-size:17px;font-weight:900;color:var(--text);
  line-height:1.2;margin-bottom:3px;
}
.met-card-sub{
  font-size:13px;color:var(--text-dim);line-height:1.3;
}
.met-card-tag{
  display:inline-block;
  margin-top:6px;padding:3px 9px;
  background:rgba(196,255,0,.15);color:var(--lime);
  border-radius:999px;
  font-size:11px;font-weight:700;
}
.met-card-flecha{
  font-size:24px;color:var(--lime);
  flex-shrink:0;
}
/* Variante MP (azul) */
.met-card.mp{
  border-color:rgba(0,158,227,.35);
  background:linear-gradient(135deg,rgba(0,158,227,.08) 0%,#0a0a12 100%);
}
.met-card.mp:hover{border-color:#009ee3;box-shadow:0 6px 22px rgba(0,158,227,.25)}
.met-card.mp .met-card-ico{background:rgba(0,158,227,.15)}
.met-card.mp .met-card-tag{background:rgba(0,158,227,.15);color:#38bdf8}
.met-card.mp .met-card-flecha{color:#38bdf8}

/* Header pantalla método */
.met-header{
  text-align:center;
  padding:20px 14px 10px;
}
.met-header-title{
  font-size:22px;font-weight:900;color:var(--text);
  margin-bottom:6px;
}
.met-header-total{
  font-size:36px;font-weight:900;color:var(--lime);
  line-height:1;letter-spacing:-.5px;
  text-shadow:0 0 15px var(--glow);
  margin:4px 0;
}
.met-header-sub{
  font-size:12px;color:var(--text-dim);
}

/* Botón volver */
.met-volver{
  display:block;width:100%;
  margin-top:16px;padding:12px;
  background:transparent;color:var(--text-dim);
  border:1px solid rgba(154,154,160,.25);
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
}
.met-volver:hover{color:var(--text);border-color:var(--text-dim)}