:root{
  --bg-deep:#0b1220;
  --bg-panel:#101a2c;
  --bg-panel-2:#0e1728;
  --bg-card:#111d33;
  --border:#22314c;
  --border-soft:#1a2740;
  --text-primary:#eef1f7;
  --text-muted:#8fa0bd;
  --text-faint:#5c6c88;
  --amber:#f2a93b;
  --amber-dark:#8a5b12;
  --teal:#35d0a6;
  --teal-dark:#0f4f40;
  --red:#e7736a;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:10px;
  --radius-lg:16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text-primary);
  font-family:var(--font-sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
h1,h2,h3{font-family:var(--font-mono);font-weight:600;letter-spacing:-0.01em;margin:0 0 .5em;}
h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.15;}
h2{font-size:clamp(1.5rem,3vw,2rem);}
h3{font-size:1.05rem;}
p{color:var(--text-muted);margin:0 0 1em;}
code{
  font-family:var(--font-mono);
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-radius:5px;
  padding:.1em .4em;
  color:var(--amber);
  font-size:.9em;
}
::selection{background:var(--amber);color:#1a1200;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:8px;font-family:var(--font-mono);
  font-size:.9rem;font-weight:600;text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--amber);color:#1a1200;}
.btn-primary:hover{background:#f5bb5c;}
.btn-ghost{border-color:var(--border);color:var(--text-primary);background:transparent;}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);}
.btn-outline{border-color:var(--border);color:var(--text-muted);background:transparent;}
.btn-outline:hover{border-color:var(--teal);color:var(--teal);}
.btn-small{padding:.6em 1em;font-size:.8rem;}
.btn-block{width:100%;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(11,18,32,.9);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{font-family:var(--font-mono);font-weight:600;text-decoration:none;font-size:1rem;letter-spacing:-0.02em;}
.brand-mark{color:var(--amber);margin-right:.35em;}
.dim{color:var(--text-faint);}
.nav{display:flex;align-items:center;gap:28px;font-size:.9rem;}
.nav a{text-decoration:none;color:var(--text-muted);transition:color .12s ease;}
.nav a:hover{color:var(--text-primary);}
.nav-cta{
  border:1px solid var(--border);border-radius:7px;padding:.5em 1em;
  color:var(--text-primary) !important;font-family:var(--font-mono);font-size:.82rem;
}
.nav-cta:hover{border-color:var(--amber);color:var(--amber) !important;}

/* Hero */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--border-soft);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.eyebrow{
  font-family:var(--font-mono);color:var(--teal);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.12em;margin-bottom:.9em;margin-top:1rem !important;
}
.lead{font-size:1.05rem;max-width:52ch;}
.hero-actions{display:flex;gap:14px;margin:1.6em 0 2.2em;flex-wrap:wrap;}
.hero-stats{list-style:none;padding:0;margin:0;display:flex;gap:32px;}
.hero-stats li{display:flex;flex-direction:column;}
.hero-stats strong{font-family:var(--font-mono);font-size:1.4rem;color:var(--text-primary);}
.hero-stats span{font-size:.78rem;color:var(--text-faint);}

.terminal{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;
}
.terminal-bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:var(--bg-panel-2);border-bottom:1px solid var(--border-soft);
}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block;}
.dot-r{background:#e7736a;}
.dot-y{background:#f2c14e;}
.dot-g{background:#35d0a6;}
.terminal-title{margin-left:8px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);}
.terminal-body{padding:20px 22px 26px;overflow-x:auto;}
.terminal-body pre{
  margin:0;font-family:var(--font-mono);font-size:.86rem;line-height:1.9;
  color:var(--text-muted);white-space:pre;
}
.terminal-body .p{color:var(--teal);}
.terminal-body .path{color:var(--amber);}
.terminal-body .muted{color:var(--text-faint);}
.terminal-body .tag{display:inline-block;width:2.6em;color:var(--text-faint);}
.terminal-body .t-ess{color:#8fa0bd;}
.terminal-body .t-1{color:var(--amber);}
.terminal-body .t-2{color:var(--teal);}
.terminal-body .t-3{color:#c99bf0;}
.cursor{color:var(--amber);animation:blink 1.1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

/* Roadmap */
.roadmap{padding:72px 0;border-bottom:1px solid var(--border-soft);}
.section-lead{max-width:60ch;margin-bottom:2.4em;}
.road{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;}
.road-step{
  flex:1 1 200px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px 20px;min-width:200px;
}
.road-index{
  display:inline-block;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.3em .6em;border-radius:5px;
  margin-bottom:.9em;
}
.road-ess{background:var(--bg-panel);color:var(--text-muted);}
.road-1{background:var(--amber-dark);color:#ffd899;}
.road-2{background:var(--teal-dark);color:#a3f2d8;}
.road-3{background:#3a2456;color:#dcb9ff;}
.road-step h3{margin-bottom:.4em;font-size:1rem;}
.road-step p{font-size:.88rem;margin:0;}
.road-arrow{
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);font-size:1.3rem;padding:0 12px;
}

/* Cursos */
.cursos{padding:72px 0;border-bottom:1px solid var(--border-soft);}
.curso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.curso-card{
  position:relative;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;
}
.curso-card.is-destacado{border-color:var(--amber);}
.badge-top{
  position:absolute;top:-11px;left:20px;background:var(--amber);color:#1a1200;
  font-family:var(--font-mono);font-size:.68rem;font-weight:700;padding:.3em .7em;
  border-radius:5px;letter-spacing:.03em;
}
.curso-head{margin-bottom:14px;}
.curso-nivel{font-family:var(--font-mono);font-size:.72rem;color:var(--teal);text-transform:uppercase;letter-spacing:.06em;}
.curso-head h3{margin:.4em 0 .2em;font-size:1.15rem;}
.curso-examen{font-family:var(--font-mono);font-size:.78rem;color:var(--text-faint);margin:0;}
.curso-resumen{font-size:.9rem;flex-grow:0;}
.curso-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin:0 0 4px;padding:14px 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.curso-meta dt{font-size:.68rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .3em;}
.curso-meta dd{margin:0;font-family:var(--font-mono);font-size:.88rem;color:var(--text-primary);}
.curso-nota{font-size:.76rem;color:var(--text-faint);margin:10px 0 0;}
.curso-temario{margin:14px 0 0;font-size:.88rem;}
.curso-temario summary{cursor:pointer;color:var(--amber);font-family:var(--font-mono);font-size:.82rem;}
.curso-temario ul{margin:.8em 0 0;padding-left:1.1em;color:var(--text-muted);}
.curso-temario li{margin-bottom:.4em;}
.curso-actions{display:flex;gap:10px;margin-top:auto;padding-top:18px;flex-wrap:wrap;}

/* Por qué */
.por-que{padding:72px 0;border-bottom:1px solid var(--border-soft);}
.por-que-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;}
.ventajas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.ventajas h3{color:var(--teal);}
.ventajas p{font-size:.9rem;margin:0;}


/* LPI Training Partner Platinum */
.lpi-partner{
  padding:64px 0;
  border-bottom:1px solid var(--border-soft);
}
.lpi-partner-inner{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  gap:42px;
  align-items:center;
  padding:38px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  overflow:hidden;
}
.lpi-partner-content h2{
  margin-bottom:.55em;
  max-width:20ch;
}
.lpi-partner-content p{
  max-width:65ch;
}
.lpi-partner-badge{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
  padding:22px;
  border-radius:18px;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.lpi-partner-badge img{
  display:block;
  width:min(290px,100%);
  height:auto;
  border:0;
  box-shadow:none;
}
@media (max-width:860px){
  .lpi-partner-inner{
    grid-template-columns:1fr;
    gap:28px;
    padding:28px;
  }
  .lpi-partner-content h2{max-width:none;}
  .lpi-partner-badge{order:-1;min-height:180px;}
}
@media (max-width:560px){
  .lpi-partner{padding:52px 0;}
  .lpi-partner-inner{padding:22px 18px;gap:20px;}
  .lpi-partner-badge{min-height:145px;padding:14px;}
  .lpi-partner-badge img{width:min(245px,100%);}
}

/* FAQ */
.faq{padding:72px 0;border-bottom:1px solid var(--border-soft);}
.faq-list{max-width:760px;}
.faq-item{
  border-bottom:1px solid var(--border-soft);padding:18px 0;
}
.faq-item summary{
  cursor:pointer;font-family:var(--font-mono);font-size:.95rem;color:var(--text-primary);
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";color:var(--amber);font-size:1.2rem;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:.8em 0 0;font-size:.9rem;}

/* Contacto */
.contacto{padding:72px 0;}
.contacto-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;}
.contacto-list{list-style:none;padding:0;margin:1.4em 0 0;display:flex;flex-direction:column;gap:.6em;font-size:.9rem;color:var(--text-muted);}
.contacto-list li::before{content:"›";color:var(--teal);margin-right:.6em;}
.contacto-form{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;display:flex;flex-direction:column;gap:16px;
}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:.8rem;color:var(--text-muted);font-family:var(--font-mono);}
.form-row input,.form-row select,.form-row textarea{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:7px;
  color:var(--text-primary);padding:.7em .8em;font-family:var(--font-sans);font-size:.92rem;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--amber);
}
.form-legal{font-size:.74rem;color:var(--text-faint);margin:0;}
.form-status{
  font-family:var(--font-mono);font-size:.82rem;padding:.8em 1em;border-radius:7px;
  border:1px solid var(--border);
}
.form-status-ok{border-color:var(--teal);color:var(--teal);}
.form-status-error{border-color:var(--red);color:var(--red);}
input[name="honeypot"]{position:absolute;left:-9999px;opacity:0;}

/* Footer */
.site-footer{border-top:1px solid var(--border-soft);padding:32px 0;}
.footer-inner p{font-size:.78rem;color:var(--text-faint);margin:0 0 .5em;}
.footer-copy{margin:0 !important;}

/* Responsive */
@media (max-width:860px){
  .wrap{padding:0 20px;}
  .hero-grid,.por-que-grid,.contacto-grid{grid-template-columns:1fr;}
  .nav{gap:16px;font-size:.84rem;}
  .nav a:not(.nav-cta){display:none;}
  .road{flex-direction:column;}
  .road-arrow{transform:rotate(90deg);padding:6px 0;}
  .ventajas{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap;row-gap:16px;}

  /* Formulario responsive */
  .contacto{padding:56px 0;}
  .contacto-grid{gap:32px;}
  .contacto-copy h2{font-size:clamp(1.7rem,7vw,2rem);line-height:1.2;}
  .contacto-form{width:100%;max-width:100%;padding:24px 20px;gap:16px;}
  .form-row{width:100%;}
  .form-row input,.form-row select,.form-row textarea{
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;font-size:16px;
  }
  .form-row input,.form-row select{min-height:48px;}
  .form-row textarea{min-height:120px;resize:vertical;}
  .contacto-form .btn-block{width:100%;min-height:50px;}
  .form-legal{font-size:.72rem;line-height:1.5;}
}

@media (max-width:560px){
  .wrap{padding:0 16px;}
  .header-inner{height:58px;}
  .brand-mark img{max-width:105px;height:auto;}
  .hero{padding:48px 0 42px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-stats{gap:18px;}
  .hero-stats li{min-width:calc(50% - 9px);}
  .terminal-body{padding:16px;overflow-x:auto;}
  .terminal-body pre{font-size:.72rem;line-height:1.8;}
  .cursos,.roadmap,.por-que,.faq{padding:56px 0;}
  .curso-grid{grid-template-columns:1fr;}
  .curso-card{padding:20px;}
  .curso-meta{grid-template-columns:1fr 1fr;}
  .curso-meta > div:last-child{grid-column:1 / -1;}
  .curso-actions{flex-direction:column;}
  .curso-actions .btn{width:100%;}
  .contacto-form{padding:20px 16px;}
  .contacto-list{font-size:.85rem;}
}

/* LPIC-2 two-card presentation */
.curso-card[data-grupo="lpic2"]{border-color:var(--teal);}
.curso-card[data-grupo="lpic2"] .curso-nivel,
.curso-card[data-grupo="lpic2"] .curso-examen{color:var(--teal);}

/* LPIC-2: two independent exam cards */
.curso-card[data-grupo="lpic2-201"],
.curso-card[data-grupo="lpic2-202"]{
  border-color:var(--teal);
}
.curso-card[data-grupo="lpic2-201"] .curso-nivel,
.curso-card[data-grupo="lpic2-201"] .curso-examen,
.curso-card[data-grupo="lpic2-202"] .curso-nivel,
.curso-card[data-grupo="lpic2-202"] .curso-examen{
  color:var(--teal);
}

/* FIX: Training Partner - texto a la izquierda e imagen a la derecha */
.lpi-partner .lpi-partner-inner{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:48px !important;
}
.lpi-partner .lpi-partner-content{
  flex:1 1 auto !important;
  min-width:0 !important;
  text-align:left !important;
}
.lpi-partner .lpi-partner-badge{
  flex:0 0 320px !important;
  width:320px !important;
  max-width:320px !important;
  order:2 !important;
}
.lpi-partner .lpi-partner-badge img{
  display:block !important;
  width:100% !important;
  max-width:290px !important;
  height:auto !important;
  margin:0 auto !important;
}

.eyebrow{
  margin-top:1rem !important;
}

@media (max-width:860px){
  .lpi-partner .lpi-partner-inner{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .lpi-partner .lpi-partner-badge{
    order:-1 !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:none !important;
  }
}


/* =========================================================
   GUÍA GRATUITA LPI
   ========================================================= */

   .guia-lpi {
    padding: 80px 0;
  }
  
  
  /* =========================================================
     CABECERA
     ========================================================= */
  
  .guia-lpi-header {
    max-width: 800px;
    margin-bottom: 40px;
  }
  
  .guia-lpi-header .eyebrow {
    margin-top: 1rem;
    margin-bottom: 15px;
  }
  
  .guia-lpi-header h2 {
    margin-bottom: 18px;
  }
  
  
  /* =========================================================
     PASOS 01 / 02 / 03
     ========================================================= */
  
  .guia-lpi-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  
    gap: 18px;
  
    width: 100%;
  
    margin-bottom: 35px;
  }
  
  
  .guia-lpi-step {
    display: flex;
  
    align-items: flex-start;
  
    gap: 20px;
  
    min-height: 145px;
  
    padding: 25px;
  
    box-sizing: border-box;
  
    /*
     * Forzamos el borde para evitar que alguna
     * variable del CSS general lo haga invisible.
     */
  
    border: 1px solid #334155;
  
    border-radius: 4px;
  
    background: #111827;
  
    transition:
      border-color .2s ease,
      transform .2s ease;
  }
  
  
  .guia-lpi-step:hover {
    border-color: #64748b;
  
    transform: translateY(-2px);
  }
  
  
  .guia-lpi-step-number {
    flex: 0 0 auto;
  
    font-family: "JetBrains Mono", monospace;
  
    font-size: .9rem;
  
    font-weight: 700;
  
    line-height: 1;
  
    color: #f59e0b;
  }
  
  
  .guia-lpi-step-content {
    min-width: 0;
  }
  
  
  .guia-lpi-step-content h3 {
    margin: 0 0 12px;
  
    font-size: 1rem;
  
    line-height: 1.3;
  }
  
  
  .guia-lpi-step-content p {
    margin: 0;
  
    color: #94a3b8;
  
    font-size: .8rem;
  
    line-height: 1.6;
  }
  
  
  /* =========================================================
     FORMULARIO + INFOGRAFÍA
     ========================================================= */
  
  .guia-lpi-bottom {
    display: grid;
  
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  
    gap: 35px;
  
    align-items: start;
  }
  
  
  /*
   * El formulario utiliza contacto-form.
   *
   * Aquí NO redefinimos el aspecto general del formulario.
   * Solo añadimos lo específico de la guía.
   */
  
  .guia-lpi-form {
    box-sizing: border-box;
  }
  
  
  /* CABECERA DEL FORMULARIO */
  
  .guia-form-heading {
    display: flex;
  
    align-items: flex-start;
  
    gap: 18px;
  
    margin-bottom: 28px;
  
    padding-bottom: 22px;
  
    border-bottom: 1px solid #334155;
  }
  
  
  .guia-form-heading h3 {
    margin: 0 0 8px;
  
    font-size: 1.15rem;
  
    text-transform: uppercase;
  }
  
  
  .guia-form-heading p {
    margin: 0;
  
    color: #94a3b8;
  
    font-size: .8rem;
  
    line-height: 1.6;
  }
  
  
  /* =========================================================
     CHECKBOX
     ========================================================= */
  
  /*
   * MUY IMPORTANTE:
   *
   * contacto-form puede tener reglas del tipo:
   *
   * .contacto-form input { ... }
   *
   * Por eso hacemos que el checkbox tenga reglas
   * más específicas.
   */
  
  .guia-lpi-form .guia-privacy {
    display: flex;
  
    align-items: flex-start;
  
    gap: 10px;
  
    width: 100%;
  
    margin: 20px 0 25px;
  
    padding: 0;
  
    box-sizing: border-box;
  
    color: #94a3b8;
  
    font-size: .72rem;
  
    line-height: 1.5;
  }
  
  
  .guia-lpi-form .guia-privacy input[type="checkbox"] {
    display: block;
  
    flex: 0 0 16px;
  
    width: 16px !important;
    min-width: 16px !important;
  
    height: 16px !important;
    min-height: 16px !important;
  
    margin: 2px 0 0 !important;
  
    padding: 0 !important;
  
    border: 0 !important;
  
    border-radius: 0 !important;
  
    background: transparent !important;
  
    box-shadow: none !important;
  
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
  
    accent-color: #f59e0b;
  
    cursor: pointer;
  }
  
  
  .guia-lpi-form .guia-privacy label {
    display: block;
  
    margin: 0;
  
    padding: 0;
  
    color: #94a3b8;
  
    font-size: .72rem;
  
    line-height: 1.5;
  
    cursor: pointer;
  }
  
  
  .guia-lpi-form .guia-privacy a {
    color: #f59e0b;
  
    text-decoration: underline;
  }
  
  
  /* =========================================================
     TEXTO INFERIOR
     ========================================================= */
  
  .guia-form-note {
    margin: 12px 0 0;
  
    color: #64748b;
  
    font-family: "JetBrains Mono", monospace;
  
    font-size: .65rem;
  
    text-align: center;
  }
  
  
  /* =========================================================
     HONEYPOT
     ========================================================= */
  
  .guia-honeypot {
    position: absolute;
  
    left: -10000px;
  
    width: 1px;
  
    height: 1px;
  
    overflow: hidden;
  }
  
  
  /* =========================================================
     INFOGRAFÍA
     ========================================================= */
  
  .guia-lpi-preview {
    width: 100%;
  
    padding: 8px;
  
    box-sizing: border-box;
  
    border: 1px solid #334155;
  
    border-radius: 4px;
  
    background: #ffffff;
  }
  
  
  .guia-lpi-preview img {
    display: block;
  
    width: 100%;
  
    height: auto;
  
    border-radius: 2px;
  }
  
  
  /* =========================================================
     TABLET
     ========================================================= */
  
  @media (max-width: 900px) {
  
    .guia-lpi-steps {
      grid-template-columns: 1fr;
    }
  
    .guia-lpi-bottom {
      grid-template-columns: 1fr;
    }
  
    .guia-lpi-preview {
      max-width: 500px;
  
      margin: 0 auto;
    }
  
  }
  
  
  /* =========================================================
     MOBILE
     ========================================================= */
  
  @media (max-width: 600px) {
  
    .guia-lpi {
      padding: 60px 0;
    }
  
    .guia-lpi-header {
      margin-bottom: 30px;
    }
  
    .guia-lpi-header h2 {
      font-size: 1.8rem;
  
      line-height: 1.2;
    }
  
  
    .guia-lpi-step {
      min-height: 0;
  
      padding: 20px;
  
      gap: 15px;
    }
  
  
    .guia-lpi-step-content h3 {
      font-size: .95rem;
    }
  
  
    .guia-lpi-step-content p {
      font-size: .75rem;
    }
  
  
    .guia-lpi-bottom {
      gap: 25px;
    }
  
  
    /*
     * En móvil dejamos que contacto-form
     * siga siendo exactamente el formulario
     * que ya tienes funcionando.
     */
  
    .guia-lpi-form {
      width: 100%;
    }
  
  
    .guia-form-heading {
      gap: 13px;
  
      margin-bottom: 25px;
    }
  
  
    .guia-form-heading h3 {
      font-size: 1rem;
    }
  
  
    .guia-form-heading p {
      font-size: .75rem;
    }
  
  
    .guia-lpi-preview {
      width: 100%;
    }
  
  }

  /* =========================================================
   GUÍA LPI - PASOS
   ========================================================= */

.guia-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;

  width: 100%;
  margin: 35px 0 40px;
}


.guia-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;

  min-height: 140px;
  padding: 24px;

  box-sizing: border-box;

  background: #111827;
  border: 1px solid #334155;
  border-radius: 4px;
}


.guia-step-number {
  flex-shrink: 0;

  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 700;

  color: #f59e0b;
}


.guia-step-content {
  min-width: 0;
}


.guia-step-content h3 {
  margin: 0 0 10px;

  color: #ffffff;

  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}


.guia-step-content p {
  margin: 0;

  color: #94a3b8;

  font-size: 14px;
  line-height: 1.6;
}


/* Hover */

.guia-step:hover {
  border-color: #64748b;
}


/* =========================================================
 TABLET
 ========================================================= */

@media (max-width: 900px) {

  .guia-steps {
      grid-template-columns: 1fr;
  }

}


/* =========================================================
 MÓVIL
 ========================================================= */

@media (max-width: 600px) {

  .guia-steps {
      grid-template-columns: 1fr;
      gap: 14px;
      margin: 25px 0 30px;
  }

  .guia-step {
      min-height: auto;
      padding: 20px;
  }

}