/* Variables */
:root{
  --ink-900:#0b1531;
  --blue-700:#0c2c65;
  --blue-600:#1d5fbd;
  --blue-500:#2E86FF;
  --accent:#df7b1e;
  --accent-dark:#c86f1d;
  --bg:#ffffff; --bg-soft:#f6f8fb; --border:#e6e9f0;
  --shadow:0 6px 18px rgba(12,44,101,.08);
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:#111;line-height:1.6}
img{max-width:100%;display:block}

/* BANNER (ruta unificada .jpg) */
.banner{
  position:relative;width:100%;height:652px;
  background:url(/imagen/banner/curso-analisis-de-datos-incitap.jpg) no-repeat center/cover;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  color:#fff;padding-left:250px;padding-bottom:70px;overflow:hidden; line-height: 1.2;
}
.banner::before{content:"";position:absolute;inset:0;pointer-events:none}
.banner>.banner{background:none!important;height:auto;position:relative;z-index:1}
.banner h1{font-size:60px;text-shadow:2px 2px 8px rgba(0,0,0,.7)}

/* Hero form */
.h2-formulario{margin-bottom:12px;text-align:center;font-size:26px}
.hero-right{
  position:absolute;top:50%;right:200px;transform:translateY(-50%);width:480px;padding:28px;border-radius:14px;color:#fff;
  background:rgba(145,97,41,.26);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.28);
}
.hero-right form{display:flex;flex-direction:column;gap:12px}
.hero-right select,.hero-right input{padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;font-size:15px}
select:invalid{color:#707070}
select option{color:#000}
.hero-right p{margin:4px 0;font-size:18px;text-align:center}
.hero-right button{ width: 100%;
    padding: 5px 0;
    font-size: 16px;
    text-align: center;
    background: var(--blue-dark);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background .3s;}
.hero-right button:hover {
    background: #6B9BCC;
}

/* Texto / estructura */
.breadcrumb{display:flex;align-items:center;gap:8px;margin:16px 0;color:#555;font-size:15px}
.breadcrumb a{color:#575757;text-decoration:none;font-weight:700;transition:color .2s}
.breadcrumb a:hover{color:var(--blue-700)}
.breadcrumb span{color:#999}
.breadcrumb .active{color:var(--blue-700);font-weight:700}
.container{max-width:1000px;margin:40px auto 28px;padding:0 40px}
.container>.titulo{font-size:28px;font-weight:700;color:#000;letter-spacing:.2px;margin:10px 0 14px}
.h2-cuerpo{position:relative;margin:28px 0 14px;color:var(--blue-700);font-weight:700;font-size:22px;line-height:1.2}
.h2-cuerpo::after{content:"";display:block;width:64px;height:3px;margin-top:8px;border-radius:3px;background:linear-gradient(90deg,var(--blue-500),var(--blue-600))}
.container>p{margin:10px 0 16px;color:#222}

/* Listas / tarjetas */
.curso-listado{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.curso-listado li{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);transition:transform .12s,box-shadow .12s,border-color .12s}
.curso-listado li:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#ffdbb1; background-color:#c8d9ff ;}
.curso-listado i{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--accent),var(--accent-dark));color:#fff!important;font-size:12px;box-shadow:0 4px 10px rgba(223,123,30,.24)}
.curso-listado li,.curso-listado li p,.curso-listado li span{font-size:15px;color:#1a1a1a}

/* ¿A quién...? */
.h2-cuerpo+p+.curso-listado{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow);grid-template-columns:repeat(4,1fr);gap:14px}
.h2-cuerpo+p+.curso-listado li{flex-direction:column;align-items:center;text-align:center;padding:18px 14px;background:#fbfdff}
.h2-cuerpo+p+.curso-listado li i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,var(--accent) 0%,var(--accent-dark) 100%);color:#fff!important;font-size:0;box-shadow:0 10px 24px rgba(223,123,30,.25)}
.h2-cuerpo+p+.curso-listado li i::before{font-family:"Font Awesome 6 Free";font-weight:900;font-size:26px;content:"\f00c"}
.h2-cuerpo+p+.curso-listado li:nth-child(1) i::before{content:"\f0b1"}
.h2-cuerpo+p+.curso-listado li:nth-child(2) i::before{content:"\f135"}
.h2-cuerpo+p+.curso-listado li:nth-child(3) i::before{content:"\f19d"}
.h2-cuerpo+p+.curso-listado li:nth-child(4) i::before{content:"\f1ad"}

/* Carrusel */
.hero-wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:50px 30px;min-height:380px;background:#f1efe9}
.carrusel-wrapper{position:relative;max-width:1000px;margin:10px auto}
.carrusel-container{overflow:hidden}
.carrusel{display:flex;gap:30px;align-items:flex-start;transition:transform .5s ease-in-out;padding-bottom:10px}
.curso{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,.06);min-width:30%;margin:0 10px;text-align:center;overflow:hidden;padding:12px}
.curso img{border-radius:10px}
.curso h3{font-size:16px;margin:10px 0}
.curso h3 a{color:var(--blue-700);text-decoration:none;font-weight:700}
.curso h3 a:hover{color:var(--blue-500);text-decoration:underline}
.carrusel-btn{position:absolute;top:45%;transform:translateY(-50%);z-index:30;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--blue-700);color:#fff;border:0;cursor:pointer;box-shadow:0 6px 14px rgba(12,44,101,.12);transition:transform .12s,background .12s}
.carrusel-btn.prev{left:-50px}
.carrusel-btn.next{right:-63px}
.carrusel-btn:hover{background:var(--blue-600);transform:translateY(-50%) scale(1.02)}
.curso.proximamente-card{display:flex;align-items:center;justify-content:center;text-align:center;min-height:240px;padding:20px;border-radius:14px;border:1px solid var(--border);background:#f7f9fd;color:var(--blue-700);font-weight:800;font-size:20px}
.carrusel-dots{display:flex;gap:10px;justify-content:center;margin-top:16px}
.carrusel-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#d6dbe6;cursor:pointer;transition:.15s}
.carrusel-dots button.active{background:var(--blue-700);width:12px;height:12px}

/* FAQ (celeste) */
.faq{max-width:990px;margin:48px auto}
.faq h2{text-align:center;margin-bottom:22px;font-weight:700;color:#0c2c65;letter-spacing:.2px}
.faq-item{background:#F8FBFF;border:1px solid #E1ECFF;border-radius:14px;margin-bottom:14px;box-shadow:0 4px 16px rgba(12,44,101,.05);overflow:hidden;transition:box-shadow .25s ease,border-color .25s ease,background .25s ease;position:relative}
.faq-item:hover{background:#deebff;border-color:#D1E2FF}
.faq-item.active{background:#E8F1FF;border-color:#B8D4FF;box-shadow:0 8px 28px rgba(12,44,101,.08)}
.faq-question{width:100%;padding:14px 18px;background:transparent;border:0;outline:0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#0c2c65;font-weight:700;font-size:14px;letter-spacing:.15px;transition:background .2s ease,color .2s ease}
.faq-question:hover{background:linear-gradient(180deg,rgba(33,121,255,.06),rgba(33,121,255,.03))}
.faq-question:focus-visible{box-shadow:inset 0 0 0 2px rgba(46,134,255,.35);border-radius:8px}
.arrow{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;background:#E1ECFF;color:#1b3d82;font-size:22px;font-weight:700;transition:transform .25s ease,background .2s ease,color .2s ease}
.faq-question:hover .arrow{background:#D2E4FF}
.faq-item.active .arrow{transform:rotate(45deg);background:#BDD7FF;color:#0c2c65}
.faq-answer{max-height:0;opacity:0;transform:translateY(-6px);overflow:hidden;transition:max-height .35s ease,opacity .25s ease,transform .25s ease,padding .25s ease;background:#fff;padding:0 18px;border-top:1px dashed rgba(12,44,101,.15)}
.faq-answer p{margin:0;padding:14px 0;color:#374151;line-height:1.6}
.faq-item.active .faq-answer{max-height:520px;opacity:1;transform:translateY(0)}

/* Responsive */
@media (max-width:900px){
  .carrusel-wrapper{max-width:100%}
  .curso-listado{grid-template-columns:1fr}
  .h2-cuerpo+p+.curso-listado{grid-template-columns:1fr}
}
@media (max-width:768px){
  /* --- Banner (centrado en móvil) --- */
  .banner{
    height:auto;
    min-height:480px;
    padding:56px 18px 16px;           /* sin padding-left de desktop */
    align-items:center;               /* ← antes: flex-start */
    text-align:center;                /* ← antes: left */
  }
 
  .banner h1{
    font-size:clamp(28px, 10vw, 44px);
    line-height:1.05;
    margin:0 auto 14px;               /* centrado */
    max-width:18ch;                    /* ancho cómodo de líneas */
    text-wrap:balance;
  }

  /* --- Formulario dentro del banner --- */
  .hero-right{
    position:relative; top:auto; right:auto; transform:none;
    width:min(460px, 94%);             /* un pelín más angosto para “encajar” */
    margin:5px auto 8px;              /* centrado horizontal */
    padding:20px;
    border-radius:12px;
    background:rgba(145,97,41,.22);
    transform: translateX(-10px);
  }
  .hero-right h2{font-size:18px;}

  /* --- Resto tal como lo tenías --- */
  .hero-wrap{flex-direction:column;align-items:center;padding:22px;text-align:center;min-height:220px}
  .carrusel-wrapper{max-width:100%;margin:10px auto;padding:0 20px}
  .carrusel{gap:15px;padding-bottom:5px}
  .curso{min-width:80%;margin:0 auto;padding:12px}
  .carrusel-btn{width:36px;height:36px;font-size:18px}
  .carrusel-btn.prev{left:-5px}
  .carrusel-btn.next{right:-5px}
  .carrusel-dots{gap:8px}
  .carrusel-dots button{width:8px;height:8px}
  .carrusel-dots button.active{width:10px;height:10px}

  .container{padding:0 18px}
  .container>.titulo{font-size:24px}
  .h2-cuerpo{font-size:20px}

  .faq{margin:30px 15px}
  .faq h2{font-size:20px;margin-bottom:20px}
  .faq-item{border-radius:10px}
  .faq-question{padding:10px 15px;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
  .faq-question h3{font-size:15px;margin:0;flex:1;text-align:left;line-height:1.4}
  .arrow{width:28px;height:28px;min-width:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:20px;background:#E1ECFF;color:#0c2c65;flex-shrink:0}
  .faq-answer{padding:0 15px}
  .faq-answer p{font-size:14px;padding:12px 0;line-height:1.4}
}