/* HAACI · Módulo Ofertas (página /ofertas/ y ficha de cada oferta)
   Basado en el prototipo «HAACI - OFERTAS» v2 (tema Eduma: Montserrat, verde
   HAACI, radio 5px) con los ajustes pedidos: banner más claro y animado,
   laterales del banner ocupados, textos revisados. */
.haaci-of{
  --v:#98B737; --v-osc:#7F9C28; --v-txt:#5F8B21; --tinta:#333; --texto:#666; --suave:#8A8A8A;
  --linea:#E6E6E6; --papel:#fff; --papel-2:#F7F8F5; --alerta:#C0392B;
  --r:5px; --gutter:clamp(16px,4vw,30px);
  --onda:clamp(46px,6vw,86px); --onda-hero:clamp(58px,7.5vw,118px);
  font-family:'Montserrat','Helvetica Neue',Arial,sans-serif; color:var(--texto); font-size:15px; line-height:1.75;
  background:var(--papel-2);
}
.haaci-of *{box-sizing:border-box}
.haaci-of h1,.haaci-of h2,.haaci-of h3{font-family:inherit; color:var(--tinta); margin:0; line-height:1.25; text-wrap:balance}
.haaci-of p{margin:0}
.haaci-of-wrap{max-width:1200px; margin:0 auto; padding-inline:var(--gutter)}
.haaci-of-sec{padding-block:clamp(38px,5.5vw,64px); background:var(--papel-2)}
.haaci-of-sec.blanco{background:#fff}
.haaci-of-sec.difusa{background:linear-gradient(to bottom,var(--papel-2) 0%,#fff 17%,#fff 83%,var(--papel-2) 100%)}
.haaci-of-sec h2{font-size:clamp(21px,2.8vw,30px); font-weight:800; text-transform:uppercase}
.haaci-of .haaci-of-intro{margin-top:12px; max-width:66ch}
.haaci-of .haaci-of-miga{font-size:12.5px; color:var(--suave); margin-bottom:22px}
.haaci-of-miga a{color:var(--suave); text-decoration:none}
.haaci-of-miga b{font-weight:500; color:var(--texto)}

/* ---------- botones (píldora, como haaci.edu.pa) ---------- */
.haaci-of-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-family:inherit; font-size:15px; font-weight:500; letter-spacing:.4px;
  padding:12px 25px 13px; border-radius:100px; border:2px solid transparent; cursor:pointer; text-decoration:none!important; transition:.18s; line-height:1.35}
.haaci-of-btn.p{background:var(--v); border-color:var(--v); color:#fff!important}
.haaci-of-btn.p:hover{background:var(--v-osc); border-color:var(--v-osc)}
.haaci-of-btn.o{background:transparent; border-color:var(--v); color:var(--v-txt)!important}
.haaci-of-btn.o:hover{background:var(--v); color:#fff!important}
.haaci-of-btn.w{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.6); color:#fff!important; backdrop-filter:blur(3px)}
.haaci-of-btn.w:hover{background:rgba(255,255,255,.16)}
.haaci-of-btn.wa{background:transparent; border-color:#128C4A; color:#128C4A!important}
.haaci-of-btn.wa:hover{background:#128C4A; color:#fff!important}
.haaci-of-btn.blanco{background:#fff; border-color:#fff; color:var(--v-txt)!important}
.haaci-of-btn.blanco:hover{background:#F2F5EA; border-color:#F2F5EA}
.haaci-of-btn.borde{background:transparent; border-color:#fff; color:#fff!important}
.haaci-of-btn.borde:hover{background:rgba(255,255,255,.18)}
.haaci-of-btn:disabled{opacity:.6; cursor:default}
.haaci-of-botones{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; align-items:center}

/* ============ BANNER ============ */
.haaci-of-hero{position:relative; isolation:isolate; overflow:hidden; background:#23331F; color:#fff; text-align:center;
  padding:clamp(50px,6.5vw,88px) 0 calc(clamp(34px,4vw,56px) + var(--onda-hero))}
/* foto a todo el ancho (sin franjas negras a los lados), con un leve acercamiento */
.haaci-of-hero-foto{position:absolute; inset:0; z-index:-2; background:var(--hero) center 40%/cover no-repeat; transform-origin:70% 40%; animation:haaci-of-zoom 16s ease-out both}
/* velo más claro y con tono de marca (antes era casi negro) */
.haaci-of-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(46% 62% at 50% 46%, rgba(16,28,17,.74) 0%, rgba(16,28,17,.52) 55%, rgba(16,28,17,.18) 100%),
    linear-gradient(90deg, rgba(95,139,33,.22) 0%, rgba(16,28,17,0) 22%, rgba(16,28,17,0) 78%, rgba(95,139,33,.22) 100%),
    linear-gradient(180deg, rgba(16,28,17,.12) 0%, rgba(16,28,17,.34) 100%)}
.haaci-of-hero-in{position:relative; z-index:2}
.haaci-of-pin{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; background:var(--v); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; padding:7px 15px; border-radius:99px; margin-bottom:24px;
  box-shadow:0 8px 24px -10px rgba(152,183,55,.9); animation:haaci-of-baja .7s .15s both}
.haaci-of-pin svg{width:15px; height:15px}
.haaci-of-pin::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-20deg); animation:haaci-of-brillo 4.2s 1.6s ease-in-out infinite}
.haaci-of-hero h1{color:#fff; font-size:clamp(29px,4.4vw,50px); font-weight:800; text-transform:uppercase; line-height:1.06; max-width:22ch; margin-inline:auto; letter-spacing:.01em; text-shadow:0 2px 18px rgba(6,12,7,.5)}
.haaci-of-hero h1 .l1,.haaci-of-hero h1 em{display:block}
.haaci-of-hero h1 .l1{animation:haaci-of-sube .8s .3s cubic-bezier(.2,.8,.2,1) both}
.haaci-of-hero h1 em{font-style:normal; animation:haaci-of-sube .8s .5s cubic-bezier(.2,.8,.2,1) both}
.haaci-of-hero h1 .l2{background:linear-gradient(100deg,#A8C84A 0%,#A8C84A 38%,#E4F5B0 50%,#A8C84A 62%,#A8C84A 100%); background-size:250% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 2px 10px rgba(6,12,7,.45)); animation:haaci-of-luz 3.8s 1.5s ease-in-out infinite}
.haaci-of .haaci-of-sub{color:rgba(255,255,255,.92); margin:18px auto 0; max-width:60ch; font-size:clamp(15px,1.5vw,17px); text-shadow:0 1px 12px rgba(6,12,7,.55); animation:haaci-of-aparece .9s .8s both}
.haaci-of-cta{display:flex; flex-wrap:wrap; gap:11px; justify-content:center; margin-top:30px; animation:haaci-of-aparece .9s 1s both}
.haaci-of-cta .haaci-of-btn{padding:14px 26px; font-size:14px}
.haaci-of-btn.pulso{animation:haaci-of-pulso 2.6s 2.2s ease-out infinite}
.haaci-of-benef{list-style:none; margin:44px auto 0; max-width:1040px; padding:32px 0 0; border-top:1px solid rgba(255,255,255,.2);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:24px 22px}
.haaci-of-benef li{display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; color:rgba(255,255,255,.92); font-size:13.5px; line-height:1.45; margin:0; animation:haaci-of-aparece .7s both}
.haaci-of-benef li:nth-child(1){animation-delay:1.15s} .haaci-of-benef li:nth-child(2){animation-delay:1.27s}
.haaci-of-benef li:nth-child(3){animation-delay:1.39s} .haaci-of-benef li:nth-child(4){animation-delay:1.51s}
.haaci-of-benef svg{color:var(--v); width:22px; height:22px}
.haaci-of-benef b{display:block; font-weight:700; color:#fff; font-size:13.5px}
.haaci-of-benef span{color:rgba(255,255,255,.75); font-size:12.5px}
.haaci-of-onda-hero{position:absolute; left:0; bottom:-1px; width:100%; height:var(--onda-hero); color:var(--papel-2); z-index:1; pointer-events:none}

/* laterales del banner: sello giratorio (izquierda) y datos flotantes (derecha) */
.haaci-of-sello-hero,.haaci-of-flota{display:none}
@media (min-width:1240px){
  .haaci-of-sello-hero{display:grid; place-items:center; position:absolute; z-index:2; top:24%; left:max(26px, calc(50% - 650px)); width:176px; height:176px; border-radius:50%;
    background:rgba(152,183,55,.92); color:#fff; box-shadow:0 18px 40px -16px rgba(0,0,0,.55); animation:haaci-of-entra-izq .9s 1.3s both, haaci-of-flotar 6s 2.4s ease-in-out infinite}
  .haaci-of-sello-hero svg{position:absolute; inset:0; width:100%; height:100%; animation:haaci-of-gira 22s linear infinite}
  .haaci-of-sello-hero text{font:700 11.5px 'Montserrat',Arial,sans-serif; letter-spacing:.2em; fill:#fff}
  .haaci-of-sello-hero .p{position:relative; display:flex; flex-direction:column; align-items:center; line-height:1.05; text-transform:uppercase}
  .haaci-of-sello-hero .p small{font-size:8.5px; font-weight:700; letter-spacing:.14em; opacity:.9}
  .haaci-of-sello-hero .p b{font-size:23px; font-weight:800; margin:2px 0; letter-spacing:-.01em}
  .haaci-of-flota{display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; position:absolute; z-index:2; top:28%; right:max(26px, calc(50% - 650px))}
  .haaci-of-flota li{display:flex; align-items:center; gap:10px; margin:0; padding:11px 16px 11px 12px; border-radius:12px; text-align:left; font-size:12.5px; line-height:1.3; color:#fff;
    background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 12px 30px -18px rgba(0,0,0,.6);
    animation:haaci-of-entra-der .8s both, haaci-of-flotar 5.5s ease-in-out infinite}
  .haaci-of-flota li:nth-child(1){animation-delay:1.4s,2.3s} .haaci-of-flota li:nth-child(2){animation-delay:1.55s,2.9s; margin-left:26px} .haaci-of-flota li:nth-child(3){animation-delay:1.7s,3.5s}
  .haaci-of-flota svg{flex:0 0 30px; width:30px; height:30px; padding:6px; border-radius:50%; background:var(--v); color:#fff}
  .haaci-of-flota b{display:block; font-size:13.5px}
}

@keyframes haaci-of-zoom{from{transform:scale(1.12)} to{transform:scale(1)}}
@keyframes haaci-of-sube{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
@keyframes haaci-of-baja{from{opacity:0; transform:translateY(-18px) scale(.94)} to{opacity:1; transform:none}}
@keyframes haaci-of-aparece{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes haaci-of-brillo{0%{left:-60%} 45%,100%{left:130%}}
@keyframes haaci-of-luz{0%,20%{background-position:100% 0} 60%,100%{background-position:0 0}}
@keyframes haaci-of-pulso{0%{box-shadow:0 0 0 0 rgba(152,183,55,.7)} 70%{box-shadow:0 0 0 16px rgba(152,183,55,0)} 100%{box-shadow:0 0 0 0 rgba(152,183,55,0)}}
@keyframes haaci-of-gira{to{transform:rotate(360deg)}}
@keyframes haaci-of-flotar{0%,100%{translate:0 0} 50%{translate:0 -9px}}
@keyframes haaci-of-entra-izq{from{opacity:0; transform:translateX(-40px) rotate(-12deg)} to{opacity:1; transform:none}}
@keyframes haaci-of-entra-der{from{opacity:0; transform:translateX(40px)} to{opacity:1; transform:none}}

/* aparición al hacer scroll (la clase la pone el script solo si hay movimiento) */
.haaci-of .rv-oculto{opacity:0; transform:translateY(22px)}
.haaci-of .rv-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.haaci-of-pasos li.rv-in:nth-of-type(2){transition-delay:.12s} .haaci-of-pasos li.rv-in:nth-of-type(3){transition-delay:.24s} .haaci-of-pasos li.rv-in:nth-of-type(4){transition-delay:.36s}

/* ============ CATÁLOGO ============ */
.haaci-of-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:24px}
.haaci-of .chip{font-family:inherit; font-size:11.5px; font-weight:600; padding:8px 14px; border-radius:3px; border:1px solid var(--linea); background:#fff; color:var(--texto); cursor:pointer; transition:.14s; display:inline-flex; gap:7px; align-items:center; line-height:1.3}
.haaci-of .chip .n{font-size:10.5px; opacity:.7; font-variant-numeric:tabular-nums}
.haaci-of .chip:hover{border-color:var(--v); color:var(--v-txt)}
.haaci-of .chip[aria-pressed="true"]{background:var(--v); border-color:var(--v); color:#fff}
.haaci-of-conteo-fila{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px}
.haaci-of-conteo{font-size:13px; color:var(--suave); font-variant-numeric:tabular-nums}
.haaci-of-buscar{margin-left:auto; flex:0 1 260px}
.haaci-of-buscar input{width:100%; font-family:inherit; font-size:13px; padding:7px 12px; border:1px solid var(--linea); border-radius:3px; background:#fff; color:var(--tinta); height:auto; margin:0; box-shadow:none}
.haaci-of-buscar input:focus{outline:none; border-color:var(--v)}
.haaci-of-vista{display:flex; border:1px solid var(--linea); border-radius:3px; overflow:hidden; background:#fff}
.haaci-of-vista button{font-family:inherit; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border:0; background:transparent; color:var(--texto); cursor:pointer; display:inline-flex; align-items:center; gap:6px; border-radius:0}
.haaci-of-vista button + button{border-left:1px solid var(--linea)}
.haaci-of-vista button[aria-pressed="true"]{background:var(--v); color:#fff}
.haaci-of-temas{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:16px}
.haaci-of-temas li{margin:0}
.haaci-of-temas li[hidden]{display:none}
.haaci-of-tema{display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; text-decoration:none!important; color:inherit; transition:.16s}
.haaci-of-tema:hover{box-shadow:0 6px 22px -12px rgba(0,0,0,.3); transform:translateY(-2px)}
.haaci-of-tema .img{position:relative; display:block; aspect-ratio:4/3; background:var(--papel-2); border-bottom:1px solid var(--linea); overflow:hidden}
.haaci-of-tema .img img,.haaci-of-tema .img svg{display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s}
.haaci-of-tema:hover .img img,.haaci-of-tema:hover .img svg{transform:scale(1.04)}
.haaci-of-tema .sello{position:absolute; top:10px; left:10px; background:var(--v); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:99px}
.haaci-of-tema .cuerpo{display:flex; flex-direction:column; gap:7px; padding:14px 15px 9px; flex:1; min-width:0}
.haaci-of-tema .cat{font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--suave)}
.haaci-of-tema .tt{font-size:13.5px; font-weight:700; text-transform:uppercase; color:var(--tinta); line-height:1.35}
.haaci-of-tema .tpie{margin:0 15px; padding:10px 0 13px; border-top:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; font-variant-numeric:tabular-nums}
.haaci-of-tema .tpie b{color:var(--v-txt); font-weight:700}
.haaci-of-tema .tpie small{font-weight:500; color:var(--suave)}
.haaci-of-tema .tpie .ver{font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--suave)}
/* listado */
.haaci-of-temas.lista{display:block; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; background:#fff}
.haaci-of-temas.lista li + li{border-top:1px solid var(--linea)}
.haaci-of-temas.lista .haaci-of-tema{flex-direction:row; align-items:center; gap:12px; padding:10px 13px; border:0; border-radius:0; height:auto}
.haaci-of-temas.lista .haaci-of-tema:hover{transform:none; box-shadow:none; background:var(--papel-2)}
.haaci-of-temas.lista .img{width:50px; height:38px; flex:0 0 50px; aspect-ratio:auto; border:1px solid var(--linea); border-radius:3px}
.haaci-of-temas.lista .sello,.haaci-of-temas.lista .cat{display:none}
.haaci-of-temas.lista .cuerpo{padding:0; gap:1px}
.haaci-of-temas.lista .tt{font-size:12.5px; line-height:1.3}
.haaci-of-temas.lista .tpie{margin:0; padding:0; border-top:0; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:1px; text-align:right; font-size:11px}
.haaci-of-vacio{margin-top:18px}
.haaci-of-vacio button{background:none; border:0; color:var(--v-txt); text-decoration:underline; cursor:pointer; font:inherit}

/* ============ ¿CÓMO SE COORDINA? (ruta curva) ============ */
.haaci-of-pasos{list-style:none; margin:36px 0 0; padding:0; position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.haaci-of-pasos .ruta{position:absolute; top:0; left:0; width:100%; height:120px; z-index:0; color:#D5DCC6; display:none}
.haaci-of-pasos li{position:relative; z-index:1; text-align:center; margin:0}
.haaci-of-pasos .ico{width:62px; height:62px; border-radius:50%; display:grid; place-items:center; margin:0 auto 15px; background:#fff; border:2px solid var(--v); color:var(--v);
  transition:transform .22s cubic-bezier(.34,1.4,.64,1), background .22s, color .22s, box-shadow .22s}
.haaci-of-pasos .ico svg{width:26px; height:26px}
.haaci-of-pasos li:hover .ico,.haaci-of-pasos li:first-of-type .ico{background:var(--v); color:#fff; transform:scale(1.09); box-shadow:0 9px 22px -10px rgba(152,183,55,.95)}
.haaci-of-pasos .n{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--v-txt)}
.haaci-of-pasos h3{font-size:14.5px; font-weight:700; margin-top:7px; text-transform:uppercase}
.haaci-of-pasos p{font-size:13.5px; margin:9px auto 0; max-width:32ch}
@media (min-width:821px){
  .haaci-of-pasos .ruta{display:block}
  .haaci-of-pasos{align-items:start; padding-bottom:46px}
  .haaci-of-pasos li:nth-of-type(even){transform:translateY(46px)}
  .haaci-of-pasos li:nth-of-type(even).rv-oculto{transform:translateY(68px)}
}
@media (max-width:820px){
  .haaci-of-pasos{grid-template-columns:1fr; gap:0}
  .haaci-of-pasos::before{content:""; position:absolute; top:10px; bottom:36px; left:31px; width:2px; background:var(--linea)}
  .haaci-of-pasos li{display:grid; grid-template-columns:62px 1fr; gap:0 18px; text-align:left; padding-bottom:24px; align-items:start}
  .haaci-of-pasos .ico{margin:0; grid-row:span 3}
  .haaci-of-pasos p{max-width:none; margin-inline:0}
}

/* ============ FORMULARIO ============ */
.haaci-of-coord{margin-top:24px; border:1px solid var(--v); border-radius:var(--r); overflow:hidden; background:#fff}
.haaci-of-coord-cab{background:var(--v); color:#fff; padding:15px 20px}
.haaci-of-coord-cab h3{color:#fff; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.03em}
.haaci-of .haaci-of-coord-cab p{font-size:13px; color:#2C4A0E; margin-top:4px}
.haaci-of-form{padding:20px}
.haaci-of-campos{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.haaci-of .campo{display:flex; flex-direction:column; gap:5px; min-width:0}
.haaci-of .campo.ancho{grid-column:1/-1}
.haaci-of .campo label{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); margin:0}
.haaci-of .campo .req{color:var(--alerta)}
.haaci-of .campo input,.haaci-of .campo select,.haaci-of .campo textarea{font-family:inherit; font-size:14px; padding:10px 12px; border-radius:3px; border:1px solid var(--linea); background:var(--papel-2); color:var(--tinta); width:100%; height:auto; margin:0; box-shadow:none; line-height:1.4}
.haaci-of .campo input:focus,.haaci-of .campo select:focus,.haaci-of .campo textarea:focus{outline:none; border-color:var(--v); background:#fff}
.haaci-of .campo textarea{min-height:78px; resize:vertical}
.haaci-of .campo .pista{font-size:11.5px; color:var(--suave)}
.haaci-of .campo .err{font-size:12px; color:var(--alerta); font-weight:600}
.haaci-of .campo.malo input,.haaci-of .campo.malo select{border-color:var(--alerta)}
.haaci-of-tel{display:grid; grid-template-columns:118px 1fr; gap:7px}
.haaci-of-tema-fijo{display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; background:var(--papel-2); border:1px solid var(--linea); border-radius:3px; padding:10px 12px; color:var(--tinta)}
.haaci-of-tema-fijo b{font-size:13.5px}
.haaci-of-tema-fijo[hidden]{display:none}
.haaci-of-cambiar{background:none; border:0; color:var(--v-txt); text-decoration:underline; cursor:pointer; font:inherit; font-size:11.5px; padding:0; white-space:nowrap}
.haaci-of-nota{grid-column:1/-1; display:flex; gap:11px; align-items:flex-start; background:var(--papel-2); border:1px solid var(--linea); border-left:3px solid var(--v); border-radius:0 3px 3px 0; padding:13px 15px; font-size:13px; line-height:1.6}
.haaci-of-nota svg{flex:0 0 17px; width:17px; height:17px; color:var(--v-txt); margin-top:3px}
.haaci-of-nota b{color:var(--tinta)}
.haaci-of-hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.haaci-of-error{margin-top:18px; background:#FDECEA; color:#8A1F14; border-radius:3px; padding:12px 16px; font-weight:600}
.haaci-of-gracias{margin-top:24px; background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:clamp(24px,4vw,40px); text-align:center}
.haaci-of-gracias .ico{display:grid; place-items:center; width:56px; height:56px; margin:0 auto 14px; border-radius:50%; background:var(--v); color:#fff}
.haaci-of-gracias h2{font-size:clamp(21px,3vw,28px); font-weight:800; text-transform:uppercase}
.haaci-of .haaci-of-gracias p{margin:10px auto 0; max-width:56ch}
.haaci-of-gracias dl{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; max-width:500px; margin:22px auto 0; text-align:left}
.haaci-of-gracias dt{font-size:12.5px; color:var(--suave)}
.haaci-of-gracias dd{margin:0; font-size:13.5px; font-weight:700; color:var(--tinta); text-align:right}
.haaci-of-gracias .haaci-of-botones{justify-content:center}

/* ============ BANDA VERDE CON ONDA ============ */
.haaci-of-banda{position:relative; overflow:hidden; background:var(--v); color:#fff; padding:calc(clamp(28px,4vw,44px) + var(--onda) * .72) 0 clamp(28px,4vw,44px)}
.haaci-of-onda-arriba{position:absolute; left:0; top:-1px; width:100%; height:var(--onda); color:var(--papel-2); transform:scaleY(-1); pointer-events:none}
.haaci-of-banda-in{position:relative; z-index:2; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.haaci-of-banda h2{color:#fff; font-size:clamp(19px,2.5vw,27px); font-weight:800; text-transform:uppercase; max-width:20ch}
.haaci-of .haaci-of-banda p{color:#2C4A0E; margin-top:8px; max-width:52ch; font-size:14.5px}
.haaci-of-banda .haaci-of-botones{margin:0}

/* ============ PREGUNTAS FRECUENTES ============ */
.haaci-of-faq{max-width:840px; margin-top:24px}
.haaci-of-faq details{background:transparent; border:0; border-bottom:1px solid var(--v); padding:19px 2px; margin:0}
.haaci-of-faq details:first-of-type{border-top:1px solid var(--v)}
.haaci-of-faq summary{font-size:15px; font-weight:600; color:var(--tinta); cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center}
.haaci-of-faq summary::-webkit-details-marker{display:none}
.haaci-of-faq summary::after{content:""; flex:0 0 9px; width:9px; height:9px; margin-right:4px; border-right:2px solid var(--v-txt); border-bottom:2px solid var(--v-txt); transform:translateY(-3px) rotate(45deg); transition:transform .2s}
.haaci-of-faq details[open] summary::after{transform:translateY(2px) rotate(225deg)}
.haaci-of .haaci-of-faq p{margin-top:13px; font-size:14px; max-width:70ch}

/* ============ CLIENTES (carrusel) ============ */
.haaci-of-clientes{background:#fff; padding-block:44px}
.haaci-of-clientes .t{text-align:center; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--suave)}
/* marquesina continua: la lista va dos veces y se desplaza la mitad */
.haaci-of-marq{position:relative; overflow:hidden; margin-top:22px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.haaci-of-marq-t{display:flex; width:max-content; animation:haaci-of-marq calc(var(--n,20) * 2.6s) linear infinite}
.haaci-of-marq:hover .haaci-of-marq-t{animation-play-state:paused}
.haaci-of-marq .cliente{flex:0 0 auto; width:180px; height:90px; margin:0 14px; display:grid; place-items:center}
.haaci-of-marq .cliente img{width:100%; height:100%; object-fit:contain; display:block; filter:grayscale(.15); transition:filter .2s, transform .2s}
.haaci-of-marq .cliente:hover img{filter:none; transform:scale(1.05)}
@keyframes haaci-of-marq{to{transform:translateX(-50%)}}

/* ============ FICHA DE LA OFERTA (dentro de la plantilla del curso) ============ */
.haaci-of-sello-ficha,.haaci-of-aviso-ficha{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px; font-weight:600; color:#5F8B21; margin:0 0 14px!important}
.haaci-of-sello-ficha span,.haaci-of-aviso-ficha span{background:#98B737; color:#fff; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px}
.haaci-of-aviso-ficha{display:block!important; line-height:1.9; font-weight:500; color:#555; background:#F4F8EA; border:1px solid #DDE8C4; border-left:3px solid #98B737; border-radius:0 5px 5px 0; padding:10px 14px}
.haaci-of-aviso-ficha span{display:inline-block; margin-right:8px; vertical-align:1px}
.haaci-of-aviso-ficha b{color:#5F8B21}
.haaci-of-aviso-ficha a{color:#5F8B21; font-weight:700; text-decoration:underline}
/* el aviso/sello va dentro de la fila flex de Eduma (.course-description): ocupa su propia línea */
.single-lp_course #learn-press-course-description:has(> .haaci-of-sello-ficha, > .haaci-of-aviso-ficha),
.haaci-oferta #learn-press-course-description{flex-wrap:wrap; width:100%}
.single-lp_course .course-description > .haaci-of-sello-ficha,
.single-lp_course .course-description > .haaci-of-aviso-ficha{flex:0 0 100%; width:100%; max-width:100%}
.haaci-of.haaci-of-ficha{margin-top:30px; background:transparent}
.haaci-of-ficha .haaci-of-coord,.haaci-of-ficha .haaci-of-gracias{margin-top:0}
.haaci-of-relac{margin-top:36px}
.haaci-of-relac h3{font-size:18px; font-weight:800; text-transform:uppercase; margin-bottom:6px}
.haaci-of-temas.mini{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.haaci-of-relac > p{margin-top:18px}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .haaci-of-marq .cliente{width:130px; height:66px; margin:0 8px}
}
@media (max-width:820px){
  .haaci-of-hero-foto{background-image:var(--hero-m); background-position:center}
  .haaci-of-hero{padding-block:clamp(38px,7vw,56px) calc(26px + var(--onda-hero))}
  .haaci-of-cta .haaci-of-btn{width:100%}
  .haaci-of-hero::before{background:linear-gradient(180deg, rgba(14,26,15,.55) 0%, rgba(14,26,15,.45) 55%, rgba(14,26,15,.62) 100%), linear-gradient(90deg, rgba(95,139,33,.25), rgba(95,139,33,.25))}
}
@media (max-width:760px){
  .haaci-of-pin{font-size:9.5px; letter-spacing:.07em; padding:6px 12px}
  .haaci-of-benef{grid-template-columns:1fr 1fr}
  .haaci-of-campos{grid-template-columns:1fr}
  .haaci-of-botones .haaci-of-btn{width:100%}
  .haaci-of-chips{flex-wrap:nowrap; overflow-x:auto; padding-bottom:7px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
  .haaci-of .chip{flex:0 0 auto; scroll-snap-align:start}
  .haaci-of-buscar{flex:1 1 100%; order:3; margin-left:0}
  .haaci-of-vista{margin-left:auto}
}
@media (max-width:560px){
  .haaci-of-temas.lista .tpie .ver{display:none}
}
@media (prefers-reduced-motion: reduce){
  .haaci-of *,.haaci-of *::before,.haaci-of *::after{animation:none!important; transition:none!important}
  .haaci-of .rv-oculto{opacity:1; transform:none}
}

/* Horario tentativo: desde / hasta (2-oct) */
.haaci-of-horas{display:grid; grid-template-columns:1fr auto 1fr; gap:7px; align-items:center}
.haaci-of-horas span{font-size:13px; color:#777}
.haaci-captcha{transform-origin:0 0}
@media (max-width:380px){ .haaci-captcha{transform:scale(.9)} }

/* (3-oct) lista completa de países: más ancho para «🇵🇦 +507 · Panamá» */
.haaci-of-tel{grid-template-columns:minmax(140px,190px) 1fr}