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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #11101a, #1c1830);
    min-height: 100vh;
    padding: 30px 20px;
    color: #fff;
}

.container { max-width: 1500px; margin: 0 auto; }

.header { text-align:center; margin-bottom: 2.5rem; }
.header h1 {
    font-size: 2.4rem; font-weight: 900; letter-spacing: -1px;
    background: linear-gradient(135deg, #c9974c, #fff, #1565c0);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    margin-bottom: .5rem;
}
.header p { color: #b9b6c9; font-size: 1.05rem; }

.content {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 2.5rem;
    align-items: start;
}

/* ===== FORM ===== */
.form-section {
    background: #ffffff; color: #20202b;
    padding: 2.2rem; border-radius: 22px;
    box-shadow: 0 25px 60px rgba(0,0,0,.45);
}
.form-section h2 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.4rem; color: #1a2d5a; }

.info-box {
    background: #f0f4fb; border-left: 4px solid #1a2d5a;
    padding: 1.1rem 1.3rem; border-radius: 10px;
    margin-bottom: 1.8rem; font-size: .92rem; color: #2d3a60; line-height: 1.5;
}

.section-label { display:block; font-weight:700; margin-bottom: .9rem; font-size: 1rem; color:#1a2d5a; }

/* cert selector */
.cert-options { display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; margin-bottom: 1.8rem; }
/* design selector */
.model-options { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.7rem; margin-bottom: 1.8rem; }

.choice-option input { display:none; }
.choice-card {
    display:flex; flex-direction:column; align-items:center; gap:.4rem;
    border: 2px solid #e7e3ee; border-radius: 14px; padding: .9rem .5rem;
    cursor:pointer; transition: all .25s; text-align:center; background:#fafafa;
}
.choice-card svg { width: 28px; height: 28px; }
.choice-card .ct { font-weight:700; font-size:.82rem; color:#1a2d5a; }
.choice-card .cs { font-size:.68rem; color:#8a8499; }

/* CX selected */
.cx-opt input:checked + .choice-card {
    border-color: #c9974c;
    background: linear-gradient(135deg, #fdf8ee, #fff);
    box-shadow: 0 6px 18px rgba(201,151,76,.2);
    transform: translateY(-2px);
}
/* EX selected */
.ex-opt input:checked + .choice-card {
    border-color: #1565c0;
    background: linear-gradient(135deg, #eef4fd, #fff);
    box-shadow: 0 6px 18px rgba(21,101,192,.2);
    transform: translateY(-2px);
}
/* design selected */
.model-option input:checked + .choice-card {
    border-color: #1a2d5a;
    background: linear-gradient(135deg, #f0f4fb, #fff);
    box-shadow: 0 6px 18px rgba(26,45,90,.18);
    transform: translateY(-2px);
}

/* design thumb colors via background on choice-card */
.d1-cx .choice-card { background: linear-gradient(135deg,#0d1b38,#1a2d5a); }
.d1-cx .choice-card .ct { color:#c9974c; }
.d2-cx .choice-card { background: linear-gradient(135deg,#c9974c,#1a2d5a); }
.d2-cx .choice-card .ct { color:#fff; }
.d3-cx .choice-card { background: linear-gradient(150deg,#c9974c 0%,#243c7a 55%); }
.d3-cx .choice-card .ct { color:#fff; }
.d1-ex .choice-card { background: linear-gradient(135deg,#0d3b7a,#1565c0); }
.d1-ex .choice-card .ct { color:#90caf9; }
.d2-ex .choice-card { background: linear-gradient(135deg,#0d47a1,#1e88e5); }
.d2-ex .choice-card .ct { color:#fff; }
.d3-ex .choice-card { background: linear-gradient(135deg,#060d1f,#0d3b7a); }
.d3-ex .choice-card .ct { color:#64b5f6; }
.d1-cx input:checked + .choice-card, .d2-cx input:checked + .choice-card, .d3-cx input:checked + .choice-card,
.d1-ex input:checked + .choice-card, .d2-ex input:checked + .choice-card, .d3-ex input:checked + .choice-card {
    box-shadow: 0 0 0 3px #fff, 0 6px 20px rgba(0,0,0,.3);
}

.form-group { margin-bottom: 1.5rem; }
.form-group label { display:block; margin-bottom:.6rem; font-weight:700; font-size:.92rem; color:#1a2d5a; }
.form-group input[type="text"] {
    width:100%; padding:.85rem 1rem; border:2px solid #e7e3ee; border-radius:10px;
    font-family:inherit; font-size:.97rem; transition: all .25s;
}
.form-group input[type="text"]:focus { outline:none; border-color:#1565c0; box-shadow:0 0 0 3px rgba(21,101,192,.12); }

/* CORRECCIÓN 1 APLICADA: Funciona en celulares sin ocultar de más */
.file-input-wrapper { position:relative; overflow:hidden; display:block; width:100%; }
.file-input-wrapper input[type="file"] { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.file-input-label {
    display:flex; align-items:center; justify-content:center; gap:.6rem;
    padding: 1.3rem; border-radius:14px; cursor:pointer; font-weight:700; font-size:1rem;
    background: linear-gradient(135deg, #1a2d5a, #c9974c); color:#fff;
    transition: all .25s;
}
.file-input-label:hover { transform: translateY(-2px); box-shadow:0 12px 25px rgba(26,45,90,.35); }
.file-input-label.ex-mode { background: linear-gradient(135deg, #0d3b7a, #1e88e5); }
.file-name { margin-top:.5rem; font-size:.85rem; color:#777; word-break:break-all; }

.btn-group { display:flex; gap:1rem; margin-top: 1.8rem; }
.btn {
    flex:1; padding:1rem; border:none; border-radius:10px; font-weight:700; cursor:pointer;
    font-size:.92rem; text-transform:uppercase; letter-spacing:.5px; transition: all .25s;
}
.btn-secondary { background:#f0f0f0; color:#1a2d5a; border:2px solid #1a2d5a; width:100%; }
.btn-secondary:hover { background:#1a2d5a; color:#fff; }

/* ===== PREVIEW ===== */
.preview-section { display:flex; flex-direction:column; gap:1.5rem; }
.preview-label { font-weight:700; font-size:1.1rem; }

.cert-card {
    width:100%; aspect-ratio:1; position:relative; overflow:hidden;
    border-radius: 26px; display:none;
    box-shadow: 0 35px 70px rgba(0,0,0,.55);
}
.cert-card.active { display:block; }

.card-bg { position:absolute; inset:0; z-index:1; }
.card-pattern { position:absolute; inset:0; z-index:2; }
.card-content {
    position:relative; z-index:5; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 2rem 1.8rem; text-align:center; gap: .65rem;
}

.card-photo-wrap {
    width: 38%; aspect-ratio:1; position:relative; flex-shrink:0;
    overflow: hidden; border-radius: 16%;
}
.card-photo-frame { position:absolute; inset:-8%; border-radius:22%; z-index:-1; }
.card-photo {
    width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
    box-shadow: 0 16px 36px rgba(0,0,0,.45);
}
.card-no-photo {
    width:100%; height:100%; border-radius:16%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.12); border:2px dashed rgba(255,255,255,.4);
}
.card-no-photo svg { width:44%; height:44%; opacity:.65; }

.card-badge {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem 1rem; border-radius:50px; font-size:.62rem; font-weight:800;
    letter-spacing:1.8px; text-transform:uppercase;
}
.card-badge svg { width:12px; height:12px; }
.card-statement { font-weight:900; line-height:1.2; max-width:92%; letter-spacing:.3px; }
.card-tagline { font-size:.72rem; line-height:1.45; max-width:88%; font-weight:500; font-style:italic; opacity:.88; }
.card-name { font-size:1.3rem; font-weight:900; line-height:1.1; letter-spacing:-.2px; }
.card-company { font-size:.78rem; font-weight:700; padding:.42rem 1rem; border-radius:11px; max-width:88%; word-break:break-word; }
.card-footer { padding-top:.3rem; display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.card-footer-brand { font-weight:900; font-size:.95rem; letter-spacing:1.5px; }
.card-footer-social {
    font-size:.6rem; font-weight:700; display:flex; align-items:center;
    justify-content:center; gap:.4rem; opacity:.9;
}
.card-footer-social svg { width:12px; height:12px; flex-shrink:0; }

/* ===== CX CARD 1 — navy/gold ejecutivo ===== */
#cx1 .card-bg { background: linear-gradient(150deg,#0d1a35,#1a2d5a 35%,#243c7a 70%,#1a2d5a); }
#cx1 .card-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 40% at 78% 14%,rgba(201,151,76,.2),transparent 55%); }
#cx1 .card-photo-frame { background:linear-gradient(135deg,#c9974c,#e8b860); }
#cx1 .card-no-photo { border-color:rgba(201,151,76,.4); } #cx1 .card-no-photo svg { color:#c9974c; }
#cx1 .card-badge { background:linear-gradient(135deg,#c9974c,#e8b860); color:#1a1200; }
#cx1 .card-statement { color:#f0c97a; font-size:1.2rem; text-shadow:0 4px 18px rgba(0,0,0,.5); }
#cx1 .card-tagline { color:#b8c4d8; } #cx1 .card-name { color:#fff; }
#cx1 .card-company { background:rgba(201,151,76,.14); border:1px solid rgba(201,151,76,.35); color:#f0c97a; }
#cx1 .card-footer-brand { color:#c9974c; } #cx1 .card-footer-social { color:#c8d0de; }

/* ===== CX CARD 2 — blanco corporativo ===== */
#cx2 .card-bg { background:#fff; }
#cx2 .card-pattern::before { content:''; position:absolute; top:0; left:0; right:0; height:7px; background:linear-gradient(90deg,#1a2d5a,#c9974c); }
#cx2 .card-pattern::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:7px; background:linear-gradient(90deg,#c9974c,#1a2d5a); }
#cx2 .card-photo-frame { background:linear-gradient(135deg,#1a2d5a,#c9974c); }
#cx2 .card-no-photo { background:rgba(26,45,90,.08); border-color:rgba(26,45,90,.25); } #cx2 .card-no-photo svg { color:#1a2d5a; }
#cx2 .card-badge { background:#1a2d5a; color:#c9974c; }
#cx2 .card-statement { color:#1a2d5a; font-size:1.1rem; }
#cx2 .card-tagline { color:#5a6a8a; } #cx2 .card-name { color:#1a2d5a; }
#cx2 .card-company { background:#f0f2f8; border:1px solid #d8dde8; color:#1a2d5a; }
#cx2 .card-footer-brand { color:#1a2d5a; } #cx2 .card-footer-social { color:#5a6a8a; }

/* ===== CX CARD 3 — diagonal impacto ===== */
#cx3 .card-bg { background:#1a2d5a; }
#cx3 .card-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(201,151,76,.92) 0%,rgba(201,151,76,.55) 36%,transparent 54%); }
#cx3 .card-pattern svg { width:100%; height:100%; }
#cx3 .card-photo-frame { background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.2)); }
#cx3 .card-badge { background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.4); color:#fff; }
#cx3 .card-statement { color:#fff; font-size:1.2rem; text-shadow:0 3px 14px rgba(0,0,0,.4); }
#cx3 .card-tagline { color:rgba(255,255,255,.86); } #cx3 .card-name { color:#fff; }
#cx3 .card-company { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); color:#fff; }
#cx3 .card-footer-brand { color:#f0c97a; } #cx3 .card-footer-social { color:rgba(255,255,255,.82); }

/* ===== EX CARD 1 — royal blue ===== */
#ex1 .card-bg { background:linear-gradient(150deg,#0d3b7a,#1565c0 45%,#1e88e5); }
#ex1 .card-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 40% at 18% 88%,rgba(13,59,122,.6),transparent 55%); }
#ex1 .card-photo-frame { background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.2)); }
#ex1 .card-badge { background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.45); color:#fff; }
#ex1 .card-statement { color:#fff; font-size:1.2rem; text-shadow:0 3px 14px rgba(0,0,0,.35); }
#ex1 .card-tagline { color:#c8dfff; } #ex1 .card-name { color:#fff; }
#ex1 .card-company { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; }
#ex1 .card-footer-brand { color:#90caf9; } #ex1 .card-footer-social { color:#c8dfff; }

/* ===== EX CARD 2 — azul humano ===== */
#ex2 .card-bg { background:linear-gradient(160deg,#0a2a5e,#0d47a1 40%,#1565c0); }
#ex2 .card-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 75% 10%,rgba(30,136,229,.4),transparent 60%); }
#ex2 .card-photo-frame { background:linear-gradient(135deg,#42a5f5,#90caf9); }
#ex2 .card-no-photo { background:rgba(66,165,245,.15); border-color:rgba(66,165,245,.4); } #ex2 .card-no-photo svg { color:#90caf9; }
#ex2 .card-badge { background:linear-gradient(135deg,#42a5f5,#1e88e5); color:#fff; }
#ex2 .card-statement { color:#fff; font-size:1.2rem; text-shadow:0 3px 14px rgba(0,0,0,.4); }
#ex2 .card-tagline { color:#bbdefb; } #ex2 .card-name { color:#fff; }
#ex2 .card-company { background:rgba(66,165,245,.18); border:1px solid rgba(66,165,245,.38); color:#e3f2fd; }
#ex2 .card-footer-brand { color:#90caf9; } #ex2 .card-footer-social { color:#bbdefb; }

/* ===== EX CARD 3 — dark navy visión ===== */
#ex3 .card-bg { background:linear-gradient(150deg,#060d1f,#0d1f42 40%,#0d3b7a); }
#ex3 .card-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 50% 40% at 82% 8%,rgba(21,101,192,.5),transparent 55%),radial-gradient(ellipse 38% 34% at 10% 84%,rgba(30,136,229,.22),transparent 55%); }
#ex3 .card-photo-frame { background:linear-gradient(135deg,#1e88e5,#0d3b7a); }
#ex3 .card-no-photo { background:rgba(21,101,192,.18); border-color:rgba(30,136,229,.45); } #ex3 .card-no-photo svg { color:#64b5f6; }
#ex3 .card-badge { background:rgba(30,136,229,.22); border:1.5px solid rgba(30,136,229,.48); color:#90caf9; }
#ex3 .card-statement { color:#e3f2fd; font-size:1.1rem; text-shadow:0 3px 14px rgba(0,0,0,.5); }
#ex3 .card-tagline { color:#7bafd8; } #ex3 .card-name { color:#fff; }
#ex3 .card-company { background:rgba(21,101,192,.18); border:1px solid rgba(21,101,192,.38); color:#bbdefb; }
#ex3 .card-footer-brand { color:#64b5f6; } #ex3 .card-footer-social { color:#7bafd8; }

/* ===== ACTIONS ===== */
.action-buttons { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.action-btn {
    padding:1.05rem; border:none; border-radius:12px; cursor:pointer; font-weight:700;
    font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:.55rem;
    text-transform:uppercase; letter-spacing:.5px; transition: all .25s;
}
.action-btn.download { background:linear-gradient(135deg,#1a2d5a,#c9974c); color:#fff; }
.action-btn.download.ex-mode { background:linear-gradient(135deg,#0d3b7a,#1e88e5); }
.action-btn.download:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.3); }
.action-btn.share { background:rgba(255,255,255,.08); color:#fff; border:2px solid rgba(255,255,255,.25); }
.action-btn.share:hover { background:rgba(255,255,255,.15); }
.action-btn:disabled { opacity:.4; cursor:not-allowed; transform:none!important; }

.success-message {
    display:none; position:fixed; bottom:2rem; right:2rem; background:#25D366; color:#fff;
    padding:1rem 1.6rem; border-radius:12px; box-shadow:0 8px 25px rgba(0,0,0,.35); font-weight:700; z-index:999;
}
.success-message.show { display:block; animation:slideUp .3s ease-out; }
@keyframes slideUp { from{transform:translateY(80px);opacity:0;} to{transform:translateY(0);opacity:1;} }

.error-message { display:none; background:#fdecea; border-left:4px solid #e53935; color:#b71c1c; padding:.8rem 1rem; border-radius:8px; font-size:.85rem; margin-top:.8rem; }
.error-message.show { display:block; }

@media(max-width:1024px){ .content { grid-template-columns:1fr; } }
@media(max-width:768px){
    .header h1{ font-size:1.9rem; } .form-section{ padding:1.5rem; }
    .action-buttons{ grid-template-columns:1fr; }
    .cert-options{ grid-template-columns:1fr 1fr; }
    .model-options{ grid-template-columns:1fr 1fr 1fr; gap:.5rem; }
    .choice-card{ padding:.6rem .3rem; } .choice-card svg{ width:22px; height:22px; }
    .choice-card .ct{ font-size:.7rem; } .choice-card .cs{ display:none; }
    .card-statement{ font-size:.95rem!important; }
    .card-tagline{ font-size:.62rem; } .card-name{ font-size:1.05rem; }
    .card-footer-brand{ font-size:.82rem; } .card-footer-social{ font-size:.5rem; }
    .card-content{ gap:.4rem; padding:1.2rem 1.1rem; }
}