/* tuCVProfesional — landing (basada en el design system generado) */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root{
  --navy-900:#0B2440; --navy-800:#0F2C4D; --navy-700:#16406E; --navy-600:#1E5490;
  --navy-100:#E5EFF9; --navy-50:#F2F7FC;
  --orange-700:#D14E15; --orange-600:#EE5A18; --orange-500:#FF6A2B; --orange-100:#FFE8DC; --orange-50:#FFF4EE;
  --neutral-700:#3A4757; --neutral-600:#51606F; --neutral-500:#6B7888; --neutral-300:#B6BFC9; --neutral-200:#D6DCE3; --neutral-100:#E9EDF1; --neutral-50:#F5F7F9;
  --white:#fff; --text:#0B2440; --muted:#51606F;
  --success-600:#157F54; --success-100:#DCF3E9;
  --font-display:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(11,36,64,.08),0 1px 2px rgba(11,36,64,.04);
  --shadow-md:0 4px 12px rgba(11,36,64,.08),0 2px 4px rgba(11,36,64,.05);
  --shadow-lg:0 12px 28px rgba(11,36,64,.12),0 4px 8px rgba(11,36,64,.06);
  --shadow-xl:0 24px 56px rgba(11,36,64,.16),0 8px 16px rgba(11,36,64,.08);
  --shadow-accent:0 8px 20px rgba(255,106,43,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);color:var(--text);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.025em;line-height:1.06}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;
  font-family:var(--font-sans);font-weight:700;font-size:15px;padding:13px 24px;border-radius:var(--radius-md);
  transition:all .2s var(--ease);white-space:nowrap}
.btn svg{width:19px;height:19px}
.btn-primary{background:var(--orange-500);color:#fff}
.btn-primary:hover{background:var(--orange-600);box-shadow:var(--shadow-accent);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--navy-800);border:1.5px solid var(--neutral-300)}
.btn-outline:hover{border-color:var(--navy-600);background:var(--navy-50)}
.btn-lg{font-size:17px;padding:16px 30px;border-radius:var(--radius-lg)}
.btn-white{background:#fff;color:var(--navy-800)}
.btn-white:hover{background:var(--navy-50);transform:translateY(-1px)}

/* Header */
header{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--neutral-100);position:sticky;top:0;z-index:100}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav .logo{height:34px}

/* Hero */
.hero{background:linear-gradient(180deg,var(--navy-50) 0%,#fff 100%);padding:clamp(40px,7vw,84px) 0 clamp(48px,7vw,92px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--orange-100);color:var(--orange-700);
  font-size:14px;font-weight:700;padding:7px 14px;border-radius:var(--radius-pill);margin-bottom:22px}
.badge svg{width:16px;height:16px}
.hero h1{font-size:clamp(34px,6vw,60px);font-weight:800;color:var(--navy-900);margin-bottom:18px}
.hero h1 .o{color:var(--orange-500)}
.hero .sub{font-size:clamp(16px,1.6vw,20px);color:var(--muted);margin-bottom:30px;max-width:520px}
.hero .sub b{color:var(--navy-800)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.proof{display:flex;align-items:center;gap:14px}
.proof .av{display:flex}
.proof .av span{width:38px;height:38px;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:13px;font-family:var(--font-display)}
.proof .av span:not(:first-child){margin-left:-12px}
.proof .stars{display:flex;gap:2px;color:var(--orange-500)}
.proof .stars svg{width:15px;height:15px}
.proof .pt{font-size:14px;color:var(--muted);font-weight:600;margin-top:2px}

/* Abanico de CVs */
.cv-fan{position:relative;height:clamp(320px,38vw,460px);display:flex;align-items:center;justify-content:center}
.cv-fan img{position:absolute;width:clamp(180px,22vw,250px);border-radius:10px;box-shadow:var(--shadow-xl);background:#fff}
.cv-fan .c1{transform:rotate(-8deg) translateX(-58px);z-index:1}
.cv-fan .c2{transform:rotate(7deg) translateX(64px);z-index:2}
.cv-fan .c3{position:relative;z-index:3;width:clamp(190px,23vw,262px)}

/* Secciones */
section.block{padding:clamp(54px,7vw,88px) 0}
.tag{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;padding:6px 13px;border-radius:var(--radius-pill)}
.tag-navy{background:var(--navy-100);color:var(--navy-700)}
.tag-orange{background:var(--orange-100);color:var(--orange-700)}
.center{text-align:center}
h2.tit{font-size:clamp(28px,3.6vw,40px);font-weight:800;color:var(--navy-900);margin:16px 0}
.lead{font-size:17px;color:var(--muted);max-width:600px;margin:0 auto 44px}

/* Pasos */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{background:#fff;border:1px solid var(--neutral-100);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);text-align:left}
.step-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.step-ic{width:52px;height:52px;border-radius:14px;background:var(--navy-800);color:#fff;display:flex;align-items:center;justify-content:center}
.step-ic svg{width:24px;height:24px}
.step-n{font-family:var(--font-display);font-size:40px;font-weight:800;color:var(--navy-100);line-height:1}
.step h3{font-size:20px;font-weight:700;color:var(--navy-800);margin-bottom:8px}
.step p{font-size:15px;color:var(--muted)}

/* Ejemplos */
.examples{background:var(--navy-50)}
.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.ex-grid p{font-size:17px;color:var(--muted);margin:14px 0 22px;max-width:460px}
.tabs{display:inline-flex;gap:6px;background:#fff;border:1px solid var(--neutral-200);border-radius:var(--radius-pill);padding:5px}
.tabs button{border:none;background:transparent;cursor:pointer;font-family:var(--font-sans);font-weight:600;font-size:14px;
  color:var(--neutral-600);padding:8px 18px;border-radius:var(--radius-pill);transition:all .15s}
.tabs button.on{background:var(--navy-800);color:#fff}
.ex-img{display:flex;justify-content:center}
.ex-img img{width:clamp(240px,26vw,310px);border-radius:10px;box-shadow:var(--shadow-lg);background:#fff}

/* CTA navy */
.cta{background:var(--navy-800);text-align:center;color:#fff}
.cta h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;color:#fff;margin-bottom:14px}
.cta p{font-size:18px;color:#C6DBF0;margin-bottom:26px}
.cta .micro{margin-top:18px;font-size:14px;color:#94BBE0}

footer{padding:30px 0;text-align:center;color:var(--neutral-500);font-size:13px;border-top:1px solid var(--neutral-100)}
footer img{height:26px;opacity:.85;margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}

.err{background:var(--orange-50);color:var(--orange-700);border:1px solid var(--orange-200,#FFD2BB);border-radius:var(--radius-md);
  padding:12px 16px;margin:0 auto 18px;max-width:560px;font-weight:600;text-align:center}

/* Overlay de carga */
.overlay{position:fixed;inset:0;background:rgba(11,36,64,.94);color:#fff;display:none;flex-direction:column;
  align-items:center;justify-content:center;z-index:1000;text-align:center;padding:24px}
.overlay.on{display:flex}
.spin{width:56px;height:56px;border:5px solid rgba(255,255,255,.22);border-top-color:var(--orange-500);
  border-radius:50%;animation:sp 1s linear infinite;margin-bottom:22px}
@keyframes sp{to{transform:rotate(360deg)}}
.overlay h3{font-family:var(--font-display);font-size:24px;margin-bottom:6px}
.overlay p{color:#C6DBF0}

/* Reseñas */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:left;margin-top:8px}
.rev{background:#fff;border:1px solid var(--neutral-100);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.rev-stars{color:var(--orange-500);font-size:17px;letter-spacing:2px}
.rev blockquote{font-size:15.5px;color:var(--neutral-700);line-height:1.6;flex:1}
.rev figcaption{display:flex;align-items:center;gap:12px}
.rev-av{width:42px;height:42px;border-radius:50%;color:#fff;font-weight:700;font-size:14px;font-family:var(--font-display);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rev figcaption>span{display:flex;flex-direction:column;font-size:14px;font-weight:700;color:var(--navy-800)}
.rev figcaption small{color:var(--neutral-500);font-weight:500;font-size:13px}

/* Contacto */
.contact{background:var(--navy-50)}
.contact .btn svg{width:22px;height:22px}

/* WhatsApp flotante */
.wa-fab{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;
  color:#fff;display:flex;align-items:center;justify-content:center;z-index:200;
  box-shadow:0 6px 18px rgba(37,211,102,.45);transition:transform .2s var(--ease)}
.wa-fab svg{width:32px;height:32px}
.wa-fab:hover{transform:scale(1.08)}

@media(max-width:880px){
  .hero-grid,.ex-grid{grid-template-columns:1fr;gap:30px}
  .cv-fan{order:-1;height:clamp(260px,66vw,340px)}
  .cv-fan .c1{transform:rotate(-8deg) translateX(-34px)}
  .cv-fan .c2{transform:rotate(7deg) translateX(38px)}
  .steps,.rev-grid{grid-template-columns:1fr}
  .hero,.examples{text-align:center}
  .hero .sub,.ex-grid p{margin-left:auto;margin-right:auto}
  .hero-cta,.proof{justify-content:center}
}
@media(max-width:520px){
  .nav .btn{display:none}   /* en celular alcanza con los botones del hero */
  .proof{flex-direction:column;gap:8px}
}