:root{
    --navy:#002e60;
    --navy-deep:#001b3d;
    --teal:#00F2C3;
    --teal-ink:#00171a;
    --white:#ffffff;
    --paper:#f2f6f9;
    --ink:#04101f;
    --ink-soft:#3a5170;
    --line:rgba(0,46,96,0.14);
    --line-light:rgba(255,255,255,0.16);
    --radius:10px;
    --sticky-h:72px;
    --urgent:#00f2c3;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Roboto',Arial,sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    padding-bottom:var(--sticky-h);
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit;cursor:pointer;border:none;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  :focus-visible{outline:3px solid var(--teal);outline-offset:2px;}

  /* ---------- Tipografía ---------- */
  h1,h2,h3{font-weight:900;letter-spacing:-0.01em;color:var(--navy);}
  h1{font-size:clamp(28px,4.6vw,46px);line-height:1.08;}
  h2{font-size:clamp(22px,3vw,32px);line-height:1.16;}
  h3{font-size:18px;}
  p{color:var(--ink-soft);}

  /* ---------- Barra superior de urgencia ---------- */
  .top-strip{
    background:var(--navy-deep);
    color:var(--white);
    font-size:13px;
    font-weight:700;
    text-align:center;
    padding:9px 14px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .top-strip .cd{
    color:#fff;
    background:transparent;
    border:1.5px solid var(--urgent);
    font-variant-numeric:tabular-nums;
    padding:1px 8px;
    border-radius:5px;
    font-weight:700;
  }

  /* ---------- Header ---------- */
  header.site{
    background:var(--navy);
    padding:16px 0;
  }
  .site-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .brand{display:flex;align-items:center;}
  .brand-logo{height:36px;width:auto;display:block;}
  .btn-mini{
    background:var(--teal);
    color:var(--navy-deep);
    font-weight:700;
    font-size:14px;
    padding:9px 16px;
    border-radius:var(--radius);
  }

  /* ---------- Hero ---------- */
  .hero{
    background:
      linear-gradient(180deg, rgba(0,46,96,0.97), rgba(0,27,61,0.99)),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 42px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 42px),
      var(--navy);
    color:var(--white);
    padding:52px 0 44px;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:40px;
    align-items:center;
  }
  .kicker-line{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--teal);
    font-weight:700;
    font-size:14px;
    border:1px solid var(--line-light);
    padding:6px 12px;
    border-radius:999px;
    margin-bottom:18px;
  }
  .hero h1{color:var(--white);}
  .hero p.lead{
    color:#c7d6e8;
    font-size:16px;
    max-width:52ch;
    margin-top:14px;
  }
  .hero-price-row{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-top:26px;
    flex-wrap:wrap;
  }
  .price-old{color:#8fa6c2;font-size:20px;text-decoration:line-through;}
  .price-new{color:var(--teal);font-size:44px;font-weight:900;}
  .price-unit{color:#c7d6e8;font-size:14px;}
  .save-chip{
    background:var(--teal);
    color:var(--teal-ink);
    font-weight:700;
    font-size:13px;
    padding:5px 10px;
    border-radius:6px;
  }
  .hero-cta-row{display:flex;gap:14px;align-items:center;margin-top:22px;flex-wrap:wrap;}
  .btn-primary{
    background:var(--teal);
    color:var(--teal-ink);
    font-weight:700;
    font-size:16px;
    padding:16px 28px;
    border-radius:var(--radius);
    display:inline-block;
  }
  .hero-note{color:#9fb4cd;font-size:13px;}

  .hero-countdown{
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line-light);
    border-radius:var(--radius);
    padding:14px 16px;
    margin-top:20px;
    max-width:380px;
  }
  .cd-label{font-size:13px;color:#c7d6e8;font-weight:500;margin-bottom:8px;}
  .cd-boxes{display:flex;gap:8px;}
  .cd-box{
    background:var(--navy-deep);
    border-top:3px solid var(--urgent);
    border-radius:8px;
    padding:6px 0;
    text-align:center;
    flex:1;
  }
  .cd-num{font-size:20px;font-weight:900;color:var(--teal);font-variant-numeric:tabular-nums;line-height:1.1;}
  .cd-unit{font-size:10px;color:#9fb4cd;margin-top:1px;}

  /* Panel lateral: plano técnico */
  .blueprint-panel{
    border:1px solid var(--line-light);
    border-radius:var(--radius);
    background:rgba(255,255,255,0.04);
    padding:22px;
  }
  .blueprint-panel h3{color:var(--white);font-size:15px;margin-bottom:14px;font-weight:700;}
  .bp-list{display:flex;flex-direction:column;gap:12px;}
  .bp-item{display:flex;align-items:center;gap:10px;font-size:14px;color:#e6edf5;}
  .bp-item svg{width:20px;height:20px;flex:none;color:var(--teal);}
  .bp-total{
    margin-top:16px;
    padding-top:14px;
    border-top:1px dashed var(--line-light);
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:700;
    color:var(--white);
  }
  .bp-total span:last-child{color:var(--teal);font-size:20px;}

  /* ---------- Secciones generales ---------- */
  section{padding:56px 0;}
  .section-head{max-width:60ch;margin-bottom:32px;}
  .section-head p{margin-top:10px;font-size:15px;}
  .section-alt{background:var(--paper);}

  /* ---------- Acordeón de áreas y cursos ---------- */
  .course-accordion details{
    border:1px solid var(--line);
    border-radius:var(--radius);
    margin-bottom:10px;
    background:var(--white);
    overflow:hidden;
  }
  .course-accordion summary{
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    list-style:none;
  }
  .course-accordion summary::-webkit-details-marker{display:none;}
  .course-accordion .area-icon{width:22px;height:22px;color:var(--navy);flex:none;}
  .course-accordion .area-name{flex:1;font-weight:700;font-size:15px;color:var(--navy);}
  .course-accordion .area-count{
    font-size:12.5px;
    font-weight:700;
    color:var(--navy);
    background:rgba(0,242,195,0.28);
    padding:3px 10px;
    border-radius:6px;
    white-space:nowrap;
  }
  .course-accordion summary::after{content:'+';font-size:20px;color:var(--navy);flex:none;margin-left:4px;}
  .course-accordion details[open] summary::after{content:'–';}
  .course-list{
    list-style:disc;
    padding:0 18px 18px 54px;
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .course-list li{font-size:14px;color:var(--ink-soft); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px;}
  .course-list li::marker{color:var(--teal);}

  /* ---------- Incluye / value stack ---------- */
  .value-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .value-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .value-item svg{width:22px;height:22px;flex:none;color:var(--navy);margin-top:2px;}
  .value-item strong{display:block;color:var(--ink);font-size:15px;}
  .value-item span{font-size:13.5px;color:var(--ink-soft);}

  /* ---------- Comparativo de planes (tarjetas independientes) ---------- */
  .plan-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    align-items:stretch;
  }
  .plan-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    display:flex;
    flex-direction:column;
  }
  .plan-name{font-weight:700;font-size:14px;color:var(--ink-soft);}
  .plan-duration{font-size:13.5px;color:var(--ink-soft);margin-top:2px;}
  .plan-price-row{display:flex;align-items:baseline;gap:8px;margin-top:12px;}
  .plan-price{font-size:36px;font-weight:900;color:var(--navy);}
  .plan-price-unit{font-size:13px;color:var(--ink-soft);}
  .plan-features{margin-top:16px;display:flex;flex-direction:column;gap:9px;flex:1;}
  .plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);list-style:none;}
  .plan-features svg{width:16px;height:16px;color:var(--navy);flex:none;margin-top:2px;}
  .plan-cta{
    margin-top:18px;
    display:block;
    text-align:center;
    padding:12px 0;
    border-radius:var(--radius);
    font-weight:700;
    font-size:14.5px;
    border:1.5px solid var(--line);
    color:var(--navy);
  }
  .plan-best{
    background:var(--navy);
    border-color:var(--teal);
    border-width:2px;
    position:relative;
  }
  .plan-best .plan-name,.plan-best .plan-duration,.plan-best .plan-price-unit{color:#c7d6e8;}
  .plan-best .plan-price{color:var(--teal);font-size:42px;}
  .plan-best .plan-price-old{color:#8fa6c2;font-size:18px;text-decoration:line-through;}
  .plan-best .plan-features li{color:#dbe6f2;}
  .plan-best .plan-features svg{color:var(--teal);}
  .plan-best .plan-cta{background:var(--teal);border-color:var(--teal);color:var(--teal-ink);}
  .best-badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--teal);
    color:var(--teal-ink);
    font-size:11.5px;
    font-weight:700;
    padding:4px 14px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* ---------- Modelo de certificado ---------- */
  .cert-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    max-width:760px;
    margin:0 auto;
  }
  .cert-card{display:flex;flex-direction:column;align-items:center;gap:10px;}
  .cert-frame{
    width:100%;
    aspect-ratio:1.414/1;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .cert-frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .cert-label{
    font-size:12.5px;
    font-weight:700;
    color:var(--navy);
    background:rgba(0,242,195,0.28);
    padding:3px 12px;
    border-radius:6px;
  }
  .cert-note{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    max-width:560px;
    margin:22px auto 0;
    padding:12px 18px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
  }
  .cert-note svg{width:20px;height:20px;color:var(--navy);flex:none;}
  .cert-note span{font-size:13.5px;color:var(--ink-soft);}
  .cert-note strong{color:var(--navy);}

  /* ---------- Pricing ---------- */
  .pricing-card{
    background:var(--navy);
    color:var(--white);
    border-radius:16px;
    padding:36px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:center;
  }
  .pricing-card h2{color:var(--white);}
  .pricing-left .price-new{font-size:56px;}
  .pricing-left .price-old{font-size:22px;}
  .pricing-features{display:flex;flex-direction:column;gap:11px;margin-top:6px;}
  .pf-item{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#dbe6f2;}
  .pf-item svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:3px;}
  .pricing-right{
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line-light);
    border-radius:12px;
    padding:22px;
    text-align:center;
  }
  .pricing-right .cd-label{text-align:left;}
  .pricing-right .cd-boxes{margin-bottom:14px;}
  .btn-block{
    display:block;
    width:100%;
    background:var(--teal);
    color:var(--teal-ink);
    font-weight:700;
    font-size:17px;
    padding:16px 0;
    border-radius:var(--radius);
    text-align:center;
  }
  .pricing-right .hero-note{display:block;margin-top:10px;}

  /* ---------- Testimonios ---------- */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .testi-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px;
  }
  .testi-quote{font-size:14.5px;color:var(--ink);margin-bottom:14px;}
  .testi-name{font-weight:700;font-size:13.5px;color:var(--navy);}
  .testi-role{font-size:12.5px;color:var(--ink-soft);}

  /* ---------- FAQ ---------- */
  .faq{max-width:760px;}
  details{
    border-bottom:1px solid var(--line);
    padding:16px 0;
  }
  summary{
    font-weight:700;
    font-size:15.5px;
    color:var(--navy);
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{
    content:'+';
    font-size:20px;
    color:var(--navy);
    flex:none;
    margin-left:12px;
  }
  details[open] summary::after{content:'–';}
  details p{margin-top:10px;font-size:14.5px;}

  /* ---------- CTA final ---------- */
  .final-cta{
    background:var(--navy-deep);
    color:var(--white);
    text-align:center;
    padding:52px 0;
  }
  .final-cta h2{color:var(--white);}
  .final-cta p{color:#c7d6e8;margin-top:10px;}
  .final-cta .cd-boxes{max-width:320px;margin:18px auto 18px;}
  .final-cta .btn-primary{font-size:18px;padding:18px 34px;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy);color:#9fb4cd;padding:26px 0;font-size:13px;text-align:center;}

  /* ---------- Barra fija inferior ---------- */
  .sticky-bar{
    position:fixed;
    left:0;right:0;bottom:0;
    height:var(--sticky-h);
    background:var(--navy-deep);
    border-top:1px solid var(--line-light);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 20px;
    transform:translateY(100%);
    transition:transform 0.25s ease;
    z-index:900;
  }
  .sticky-bar.show{transform:translateY(0);}
  .sticky-left{display:flex;flex-direction:column;justify-content:center;gap:3px;color:var(--white);line-height:1.2;}
  .sticky-price-row{font-size:15px;}
  .sticky-price{font-weight:900;color:var(--teal);font-size:19px;}
  .sticky-old{font-size:13px;color:#8fa6c2;text-decoration:line-through;}
  .sticky-cd{display:flex;align-items:baseline;gap:5px;font-size:12.5px;color:#c7d6e8;white-space:nowrap;}
  .sticky-cd-label{white-space:nowrap;}
  .sticky-cd .cd-num-mini{color:var(--urgent);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
  .sticky-bar .btn-primary{padding:11px 20px;font-size:14.5px;white-space:nowrap;}

  /* ---------- WhatsApp flotante ---------- */
  .wa-btn{
    position:fixed;
    right:20px;
    bottom:calc(var(--sticky-h) + 16px);
    width:56px;height:56px;
    background:var(--teal);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
    z-index:950;
  }
  .wa-btn svg{width:28px;height:28px;color:var(--teal-ink);}

  /* ---------- Popup: elegir cómo continuar ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,10,25,0.6);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1200;
  }
  .modal-overlay.show{display:flex;}
  .modal-card{
    background:var(--navy);
    border:1px solid var(--line-light);
    border-radius:14px;
    padding:28px;
    max-width:380px;
    width:100%;
    position:relative;
  }
  .modal-close{
    position:absolute;
    top:12px;right:12px;
    width:32px;height:32px;
    background:transparent;
    color:#c7d6e8;
    font-size:22px;
    line-height:1;
    border-radius:8px;
  }
  .modal-close:hover{background:rgba(255,255,255,0.08);}
  .modal-card h3{color:var(--white);font-size:18px;margin-bottom:18px;padding-right:20px;}
  .modal-options{display:flex;flex-direction:column;gap:12px;}
  .modal-option{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-align:center;
    padding:15px 16px;
    border-radius:var(--radius);
    font-weight:700;
    font-size:14.5px;
    border:1.5px solid var(--line-light);
    color:var(--white);
  }
  .modal-option svg{width:19px;height:19px;flex:none;color:#25d366;}
  .modal-option-primary svg{color:var(--teal-ink);}
  .modal-option-primary{background:var(--teal);color:var(--teal-ink);border-color:var(--teal);}

  /* ---------- Responsive ---------- */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;}
    .pricing-card{grid-template-columns:1fr;}
    .testi-grid{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .plan-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto;}
  }
  @media (max-width:640px){
    section{padding:40px 0;}
    .value-cols{grid-template-columns:1fr;}
    .price-new{font-size:34px;}
    .pricing-left .price-new{font-size:40px;}
    .sticky-left{gap:2px;}
    .sticky-cd-label{display:none;}
    .sticky-cd{font-size:11px;}
    .sticky-price{font-size:17px;}
    .wa-btn{right:14px;width:52px;height:52px;bottom:calc(var(--sticky-h) + 12px);}
    .btn-mini{display:none;}
    .top-strip{font-size:11.5px;padding:8px 10px;}
    .course-list{padding-left:38px;}
    .cert-grid{grid-template-columns:1fr;max-width:320px;}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .sticky-bar{transition:none;}
  }