/* HAACI · Experiencia de uso (30-sep-2026)
   1) Botones: un solo estilo en todo el sitio (píldora redondeada, texto en MAYÚSCULAS).
   2) Móvil: menos scroll en ficha, temario, Próximos cursos y catálogo.
   ======================================================================== */

/* ---------- 1. BOTONES ---------- */
:root{--hb-v:#98B737; --hb-v-osc:#7F9C28; --hb-v-txt:#5F8B21}

/* Rediseño (Inicio, HAACI, Membresías, Contactos, Certificaciones) */
.hi-btn,
.hi-btn.pildora{border-radius:99px!important; text-transform:uppercase!important; letter-spacing:.07em!important; font-weight:700!important;
  font-size:12.5px!important; line-height:1.3!important; padding:13px 24px!important}
.hi-btn.oro{padding:14px 24px!important}
/* Ofertas */
.haaci-of-btn{border-radius:99px!important; text-transform:uppercase!important; letter-spacing:.07em!important; font-weight:700!important;
  font-size:12.5px!important; line-height:1.3!important; padding:13px 24px!important}
/* Ficha del curso (ya eran píldora): solo se asegura el texto */
.lp-course-buttons .lp-button{text-transform:uppercase!important; letter-spacing:.07em!important}
/* Formularios: inscripción, CF7 (contacto, asesor, pie «Enviar»), filtros del catálogo */
#registration-form button[type="submit"],
.wpcf7 input[type="submit"].wpcf7-submit,
.wpcf7 .wpcf7-submit,
.lp-form-course-filter button,
.lp-form-course-filter .course-filter-submit,
.filter-courses-effect.filter-mobile-btn,
.thim-course-grid .course-thumbnail .course-readmore,
a.elementor-button, .elementor-button-link,
.thim-button, a.widget-button, .thim-course-landing-button a{
  border-radius:99px!important; text-transform:uppercase!important; letter-spacing:.07em!important; font-weight:700!important}
#registration-form button[type="submit"],
.wpcf7 .wpcf7-submit{padding:12px 28px!important; font-size:13px!important; height:auto!important; line-height:1.3!important;
  background:var(--hb-v)!important; border:2px solid var(--hb-v)!important; color:#fff!important; cursor:pointer; transition:background .18s,border-color .18s}
#registration-form button[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover{background:var(--hb-v-osc)!important; border-color:var(--hb-v-osc)!important}
.lp-form-course-filter button{padding:9px 22px!important; height:auto!important}
.filter-courses-effect.filter-mobile-btn{padding:9px 22px!important}

/* ---------- 2. MÓVIL ---------- */
@media (max-width:767px){

  /* 2.1 Ficha: etiquetas de categoría sin desbordes */
  .haaci-ctx-curso .course-meta-single .course-categories .value{gap:6px!important; max-width:100%}
  .haaci-ctx-curso .course-meta-single .course-categories .value a{
    display:inline-block!important; max-width:100%; white-space:normal!important; text-transform:none!important;
    font-size:11px!important; line-height:1.35!important; padding:4px 11px!important; margin:0!important; word-break:normal; box-sizing:border-box}
  .haaci-ctx-curso .course-meta-single{margin-bottom:6px!important}
  .haaci-ctx-curso .lp-course-buttons{display:flex!important; flex-wrap:wrap; gap:8px!important; margin-top:12px!important}
  .haaci-ctx-curso .lp-course-buttons .lp-button{flex:1 1 140px; margin:0!important; padding:12px 10px!important; font-size:11px!important; letter-spacing:.04em!important; white-space:nowrap}

  /* 2.2 Temario: el botón «Expandir/Contraer todas» queda visible y cómodo */
  .haaci-ctx-curso .course-curriculum-info__right{margin-top:6px}

  /* 2.3 «Nuevos cursos» (barra lateral): solo 3 en móvil */
  .widget_courses .thim-course-list-sidebar > .lpr_course:nth-child(n+4){display:none!important}

  /* 2.4 Catálogo y áreas: cuadrícula original del tema (10 por página en móvil, ver ux.php) */

  /* 2.5 Inicio · Próximos cursos: carrusel deslizable */
  .haaci-ini .hi-cursos{display:flex!important; grid-template-columns:none!important; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:-16px!important; margin-right:-16px!important; padding:4px 16px 8px!important; scroll-padding-left:16px}
  .haaci-ini .hi-cursos::-webkit-scrollbar{display:none}
  .haaci-ini .hi-cursos > li{flex:0 0 78%; max-width:300px; scroll-snap-align:start; opacity:1!important; transform:none!important}
  .haaci-ini .hi-cursos .hi-curso .th{aspect-ratio:16/10}
  .ha-car-nav{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px}
  .ha-car-nav button{width:36px; height:36px; border-radius:50%; border:1.5px solid var(--hb-v); background:#fff; color:var(--hb-v-txt); display:grid; place-items:center; padding:0; cursor:pointer}
  .ha-car-nav button[disabled]{opacity:.35}
  .ha-car-nav button svg{width:16px; height:16px}
  .ha-car-dots{display:flex; gap:6px}
  .ha-car-dots i{width:7px; height:7px; border-radius:99px; background:#d6dcc8; transition:width .2s, background .2s}
  .ha-car-dots i.on{width:18px; background:var(--hb-v)}

  /* 2.6 Páginas del rediseño (Inicio, HAACI, Membresías, Certificaciones…): títulos, textos, iconos y botones centrados */
  .haaci-ini .hi-cab,.haaci-ini .hi-cab.fila,.haaci-ini .hi-cab.centrada{text-align:center!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important}
  .haaci-ini .hi-cab p{margin-left:auto!important; margin-right:auto!important}
  .haaci-ini .hi-cab .hi-btn{align-self:center!important; margin-top:6px}
  /* Tres formas de capacitarse */
  .haaci-ini .forma{text-align:center!important; align-items:center!important}
  .haaci-ini .forma .fico{margin-left:auto!important; margin-right:auto!important}
  .haaci-ini .forma ul,.haaci-ini .plan ul{display:inline-flex!important; flex-direction:column; align-self:center; text-align:left; margin-left:auto!important; margin-right:auto!important}
  .haaci-ini .forma .acc,.haaci-ini .hi-botones,.haaci-ini .acc{justify-content:center!important; align-items:center}
  /* ¿Por qué HAACI? */
  .haaci-ini .razon{flex-direction:column!important; align-items:center!important; text-align:center!important}
  .haaci-ini .razon > svg{margin:0 auto 4px!important}
  /* Membresías (tarjetas) */
  .haaci-ini .plan{text-align:center!important; align-items:center!important}
  .haaci-ini .plan .precio{justify-content:center!important}
  .haaci-ini .plan .cinta,.haaci-ini .plan .hi-btn{align-self:center!important}
  /* Banda final («¿No encuentra el curso…?», «Formemos a su equipo») */
  .haaci-ini .hi-banda-in{flex-direction:column!important; align-items:center!important; text-align:center!important}
  .haaci-ini .hi-banda-in p{margin-left:auto; margin-right:auto}
  /* Áreas de capacitación: fila deslizable */
  .haaci-ini .hi-areas{display:flex!important; grid-template-columns:none!important; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-left:-16px!important; margin-right:-16px!important; padding:4px 16px 8px!important; scroll-padding-left:16px}
  .haaci-ini .hi-areas::-webkit-scrollbar{display:none}
  .haaci-ini .hi-areas > .area{flex:0 0 40%; max-width:170px; scroll-snap-align:start; opacity:1!important; transform:none!important}
  /* HAACI (nosotros) */
  .haaci-ini .hn-acerca,.haaci-ini .hn-enfoque .hi-cab{text-align:center!important}
  .haaci-ini .hn-albumes{flex-wrap:nowrap!important; overflow-x:auto; justify-content:flex-start!important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:-16px!important; margin-right:-16px!important; padding:2px 16px 6px!important}
  .haaci-ini .hn-albumes::-webkit-scrollbar{display:none}
  .haaci-ini .hn-albumes .hn-album{flex:0 0 auto!important; width:auto!important; white-space:nowrap}

  /* 2.7 Ofertas */
  .haaci-of-pin{font-size:10px!important; padding:4px 10px!important; gap:5px!important; letter-spacing:.04em!important; box-shadow:none!important; background:rgba(255,255,255,.14)!important; border-color:rgba(255,255,255,.35)!important}
  .haaci-of-pin svg{width:12px!important; height:12px!important}
  .haaci-of-benef{display:flex!important; flex-wrap:nowrap!important; grid-template-columns:none!important; gap:10px!important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-left:-16px!important; margin-right:-16px!important; padding:22px 16px 6px!important; scroll-padding-left:16px}
  .haaci-of-benef::-webkit-scrollbar{display:none}
  .haaci-of-benef > li{flex:0 0 70%!important; scroll-snap-align:start; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:12px!important}
  .haaci-of-sec h2,.haaci-of-sec .haaci-of-miga,.haaci-of-conteo-fila,.haaci-of-coord-cab{text-align:center!important}
  .haaci-of-conteo-fila{justify-content:center!important}
  .haaci-of-chips{flex-wrap:nowrap!important; overflow-x:auto; justify-content:flex-start!important; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .haaci-of-chips::-webkit-scrollbar{display:none}
  .haaci-of-chips .chip{flex:0 0 auto!important; white-space:nowrap}
  .haaci-of-banda-in{flex-direction:column!important; align-items:center!important; text-align:center!important}
  .haaci-of-banda-in .haaci-of-botones,.haaci-of-botones{justify-content:center!important}
  /* listado de temas: cuadrícula deslizable (la lista se pagina de 10 en 10 con JS) */
  .haaci-of-temas:not(.lista){display:flex!important; grid-template-columns:none!important; flex-wrap:nowrap!important; gap:12px!important; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:-16px!important; margin-right:-16px!important; padding:4px 16px 8px!important; scroll-padding-left:16px}
  .haaci-of-temas:not(.lista)::-webkit-scrollbar{display:none}
  .haaci-of-temas:not(.lista) > li{flex:0 0 72%!important; max-width:280px; scroll-snap-align:start}
  .haaci-of-temas:not(.lista) > li[hidden]{display:none!important}
  .haaci-of-pag{display:flex; align-items:center; justify-content:center; gap:10px; margin:14px 0 0; font-size:12.5px; color:#666}
  .haaci-of-pag button{min-width:40px; height:38px; padding:0 14px; border-radius:99px; border:1.5px solid var(--hb-v); background:#fff; color:var(--hb-v-txt); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer}
  .haaci-of-pag button[disabled]{opacity:.35; cursor:default}
  .ha-car-cont{font-size:12px; font-weight:700; color:var(--hb-v-txt); min-width:52px; text-align:center}

  /* 2.8 Banners: la foto arriba sin texto encima (caras visibles); el texto empieza debajo, sobre verde oscuro.
     --fy = encuadre vertical de la foto móvil de cada página. */
  .hi-hero:not(.ha-hero),.haaci-of-hero{--fb:64vw; padding-top:calc(var(--fb) - 8px)!important; background:#1F2D1C!important}
  .hi-hero:not(.ha-hero) .hi-hero-foto,.haaci-of-hero .haaci-of-hero-foto{inset:0 0 auto 0!important; height:var(--fb)!important; background-position:center var(--fy,20%)!important; transform-origin:50% 30%!important}
  .hi-hero:not(.ha-hero)::before,.haaci-of-hero::before{background:linear-gradient(180deg,rgba(31,45,28,0) 0%,rgba(31,45,28,0) calc(var(--fb) - 110px),rgba(31,45,28,.85) calc(var(--fb) - 30px),#1F2D1C var(--fb),#1F2D1C 100%)!important}
  .hi-hero:not(.ha-hero) .ha-luz{display:none!important}
  .hi-hero.hce-hero{--fy:6%}
  .hi-hero.hm-hero{--fy:10%}
  .hi-hero.hn-hero{--fy:42%}
  .hi-hero.hc-hero{--fy:24%}
  .haaci-of-hero{--fy:32%}
  .haaci-of-hero .haaci-of-sello-hero{top:calc(var(--fb) - 96px)!important; right:10px!important; left:auto!important; bottom:auto!important; transform:scale(.62)!important; transform-origin:top right!important}
  /* Bandas verdes de cierre: título centrado */
  .hi-banda-in > *,.haaci-of-banda-in > *{width:100%}
  .hi-banda h2,.haaci-of-banda h2{margin-left:auto!important; margin-right:auto!important; text-align:center!important}
  .hi-banda p,.haaci-of-banda p{margin-left:auto!important; margin-right:auto!important; text-align:center!important}
}
@media (min-width:768px){ .ha-car-nav,.haaci-of-pag{display:none!important} }
.haaci-of-temas.lista + .ha-car-nav{display:none!important}

/* Tarjetas de programas (Certificaciones): botones en una línea */
.hce-prog .acc .hi-btn{padding:11px 12px!important; font-size:11px!important; letter-spacing:.05em!important; white-space:nowrap}