/* HAACI · Página de inicio [haaci_inicio]
   Prototipo «HAACI - REDISEÑO» (Inicio v2) con los cambios pedidos:
   banner claro (sin negro), textos animados, etiquetas sin «Empresarial» y con
   «Farmacéutica», textos de cursos prácticos, membresía destacada en dorado. */
.haaci-ini{
  --v:#98B737; --v-osc:#7F9C28; --v-txt:#5F8B21; --v-suave:#F1F7E7;
  --tinta:#333; --texto:#666; --suave:#8f8f8f; --linea:#E6E6E6; --papel:#fff; --papel-2:#F7F8F5;
  --oro:#B8892E; --oro-2:#D9B25A; --oro-3:#F3DC96;
  --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-ini *{box-sizing:border-box}
.haaci-ini h1,.haaci-ini h2,.haaci-ini h3{font-family:inherit; color:var(--tinta); margin:0; line-height:1.22; text-wrap:balance}
.haaci-ini p{margin:0}
.haaci-ini ul{margin:0; padding:0}
.hi-wrap{max-width:1200px; margin:0 auto; padding-inline:var(--gutter)}
.hi-sec{padding-block:clamp(40px,6vw,72px); background:var(--papel-2)}
.hi-sec.blanca{background:linear-gradient(to bottom,var(--papel-2) 0%,#fff 16%,#fff 84%,var(--papel-2) 100%)}
.haaci-ini .hi-eyebrow{font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--v-txt); margin-bottom:8px}
.hi-cab h2{font-size:clamp(21px,2.8vw,30px); font-weight:800; text-transform:uppercase}
.haaci-ini .hi-cab p:not(.hi-eyebrow){margin-top:11px; max-width:66ch}
.hi-cab.centrada{text-align:center; max-width:74ch; margin-inline:auto}
.haaci-ini .hi-cab.centrada p{margin-inline:auto}
.hi-cab.fila{display:flex; justify-content:space-between; gap:18px; align-items:flex-end; flex-wrap:wrap}

/* botones */
.hi-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center; font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:12px 20px; border-radius:3px; border:2px solid transparent; cursor:pointer; text-decoration:none!important; transition:.18s; line-height:1.3}
.hi-btn.p{background:var(--v); border-color:var(--v); color:#fff!important}
.hi-btn.p:hover{background:var(--v-osc); border-color:var(--v-osc)}
.hi-btn.o{background:transparent; border-color:var(--v); color:var(--v-txt)!important}
.hi-btn.o:hover{background:var(--v); color:#fff!important}
.hi-btn.g{background:transparent; border-color:var(--linea); color:var(--tinta)!important}
.hi-btn.g:hover{border-color:var(--v); color:var(--v-txt)!important}
.hi-btn.pildora{border-radius:100px; text-transform:none; letter-spacing:.4px; font-size:15px; font-weight:500; padding:12px 25px 13px}
.hi-btn.blanco{background:#fff; border-color:#fff; color:var(--v-txt)!important}
.hi-btn.blanco:hover{background:#F2F5EA; border-color:#F2F5EA}
.hi-btn.borde{background:transparent; border-color:#fff; color:#fff!important}
.hi-btn.borde:hover{background:rgba(255,255,255,.18)}
.hi-btn.oro{background:linear-gradient(135deg,var(--oro) 0%,var(--oro-2) 55%,var(--oro) 100%); background-size:200% 100%; border:0; padding:14px 22px; color:#fff!important; box-shadow:0 10px 24px -12px rgba(184,137,46,.9)}
.hi-btn.oro:hover{background-position:100% 0}
.hi-botones{display:flex; gap:10px; flex-wrap:wrap}

/* ============ BANNER (claro, sin franjas negras) ============ */
.hi-hero{position:relative; isolation:isolate; overflow:hidden; text-align:center; color:#fff; background:#2a3a27;
  padding:clamp(52px,6.8vw,92px) 0 calc(clamp(34px,4vw,56px) + var(--onda-hero))}
.hi-hero-foto{position:absolute; inset:0; z-index:-2; background:var(--hero) center 40%/cover no-repeat; transform-origin:50% 40%; animation:hi-zoom 16s ease-out both}
.hi-hero::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(46% 64% at 50% 46%, rgba(16,28,17,.72) 0%, rgba(16,28,17,.48) 56%, rgba(16,28,17,.14) 100%),
    linear-gradient(90deg, rgba(95,139,33,.22) 0%, rgba(16,28,17,0) 24%, rgba(16,28,17,0) 76%, rgba(95,139,33,.22) 100%),
    linear-gradient(180deg, rgba(16,28,17,.10) 0%, rgba(16,28,17,.30) 100%)}
.hi-hero-in{position:relative; z-index:2}
.hi-hero .hi-eyebrow{color:#C9E27E; animation:hi-baja .7s .15s both}
.hi-hero h1{color:#fff; font-size:clamp(29px,4.6vw,54px); font-weight:800; text-transform:uppercase; line-height:1.05; max-width:20ch; margin-inline:auto; text-shadow:0 2px 18px rgba(6,12,7,.5)}
.hi-hero h1 .l1,.hi-hero h1 .l2{display:block}
.hi-hero h1 .l1{animation:hi-sube .8s .3s cubic-bezier(.2,.8,.2,1) both}
.hi-hero h1 .l2{animation:hi-sube .8s .5s cubic-bezier(.2,.8,.2,1) both}
.hi-hero h1 em{font-style:normal; 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:hi-luz 3.8s 1.5s ease-in-out infinite}
.haaci-ini .hi-sub{color:rgba(255,255,255,.93); margin:18px auto 0; max-width:62ch; font-size:clamp(15px,1.5vw,17px); text-shadow:0 1px 12px rgba(6,12,7,.6); animation:hi-aparece .9s .8s both}
.hi-sub b{color:#fff; font-weight:700}
.hi-buscador{margin:30px auto 0; max-width:660px; text-align:left; animation:hi-aparece .9s 1s both}
.hi-buscador-c{display:flex; align-items:center; gap:4px; background:#fff; border-radius:99px; padding:5px 5px 5px 18px; box-shadow:0 16px 40px -18px rgba(0,0,0,.6); border:2px solid rgba(152,183,55,.9)}
.hi-buscador-c svg{flex:0 0 20px; width:20px; height:20px; color:var(--v-txt)}
.hi-buscador-c input[type=search]{flex:1; min-width:0; font-family:inherit; font-size:15px; padding:11px 10px; border:0!important; background:transparent!important; color:var(--tinta); box-shadow:none!important; margin:0; height:auto; outline:none}
.hi-buscador-c .hi-btn{border-radius:99px; padding:12px 26px}
.hi-sug{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.hi-sug .sug{font-family:inherit; font-size:12px; font-weight:600; text-transform:none; letter-spacing:.01em; padding:6px 13px; border-radius:99px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); cursor:pointer; backdrop-filter:blur(4px); transition:.15s; line-height:1.4}
.hi-sug .sug:hover,.hi-sug .sug[aria-pressed="true"]{background:var(--v); border-color:var(--v); color:#fff}
.hi-res{list-style:none; margin-top:12px!important; background:#fff; border-radius:var(--r); overflow:hidden; max-height:320px; overflow-y:auto; box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.hi-res li{border-bottom:1px solid var(--linea); margin:0}
.hi-res li:last-child{border-bottom:0}
.hi-res a{display:flex; gap:12px; align-items:center; padding:11px 15px; text-decoration:none!important; color:inherit}
.hi-res a:hover{background:var(--papel-2)}
.hi-res .t{display:block; font-size:12.5px; font-weight:700; text-transform:uppercase; color:var(--tinta); line-height:1.3}
.hi-res .m{display:block; font-size:11.5px; color:var(--suave); margin-top:1px}
.hi-res .c{margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--v-txt); white-space:nowrap}
.hi-res li.vacio,.hi-res li.mas a{padding:13px 15px; font-size:13px; color:var(--texto)}
.hi-res li.vacio a,.hi-res li.mas a{color:var(--v-txt); font-weight:600}
.haaci-ini .hi-pie{margin-top:24px; font-size:13px; color:rgba(255,255,255,.85); display:flex; gap:6px 14px; align-items:center; justify-content:center; flex-wrap:wrap; text-shadow:0 1px 12px rgba(6,12,7,.7); animation:hi-aparece .9s 1.2s both}
.hi-pie b{color:#C9E27E; font-weight:800}
.hi-enlace{color:#fff!important; font-weight:600; text-decoration:underline!important; text-underline-offset:3px}
.hi-enlace:hover{color:#C9E27E!important}
.hi-onda-hero{position:absolute; left:0; bottom:-1px; width:100%; height:var(--onda-hero); color:var(--papel-2); z-index:1; pointer-events:none}

@keyframes hi-zoom{from{transform:scale(1.1)} to{transform:scale(1)}}
@keyframes hi-sube{from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none}}
@keyframes hi-baja{from{opacity:0; transform:translateY(-14px)} to{opacity:1; transform:none}}
@keyframes hi-aparece{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes hi-luz{0%,20%{background-position:100% 0} 60%,100%{background-position:0 0}}
@keyframes hi-marq{to{transform:translateX(-50%)}}
@keyframes hi-brillo{0%{background-position:-150% 0} 60%,100%{background-position:250% 0}}

/* aparición al hacer scroll */
.haaci-ini .rv-oculto{opacity:0; transform:translateY(24px)}
.haaci-ini .rv-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.hi-formas .forma.rv-in:nth-child(2),.hi-razones .razon.rv-in:nth-child(2),.hi-planes .plan.rv-in:nth-child(2){transition-delay:.12s}
.hi-formas .forma.rv-in:nth-child(3),.hi-razones .razon.rv-in:nth-child(3){transition-delay:.24s}
.hi-razones .razon.rv-in:nth-child(4){transition-delay:.36s} .hi-razones .razon.rv-in:nth-child(5){transition-delay:.48s}

/* ============ TRES FORMAS ============ */
.hi-formas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:40px; position:relative; isolation:isolate}
.forma{position:relative; display:flex; flex-direction:column; padding:30px clamp(16px,2.2vw,32px)}
.forma + .forma::before{content:""; position:absolute; left:0; top:10%; bottom:10%; width:1px; background:linear-gradient(to bottom,transparent,var(--linea) 20%,var(--linea) 80%,transparent)}
.forma.b::after{content:""; position:absolute; inset:-5% -3%; z-index:-1; border-radius:48%/32%; background:radial-gradient(60% 54% at 50% 42%,rgba(152,183,55,.17),transparent 72%)}
.fico{width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:var(--v-suave); color:var(--v-txt); margin-bottom:18px; transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.fico svg{width:26px; height:26px}
.forma:hover .fico{transform:translateY(-4px) scale(1.06)}
.forma.b .fico{background:var(--v); color:#fff; box-shadow:0 12px 28px -13px rgba(152,183,55,1)}
.haaci-ini .forma .q{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--suave); margin-bottom:7px}
.forma h3{font-size:clamp(18px,1.9vw,21px); font-weight:800}
.forma.b h3{color:var(--v-txt)}
.haaci-ini .forma p.d{margin-top:12px; font-size:14.5px}
.forma ul{list-style:none; margin-top:20px!important; display:flex; flex-direction:column; gap:10px}
.forma li,.plan li{display:flex; gap:9px; font-size:13.5px; align-items:flex-start; margin:0; line-height:1.55}
.forma li svg,.plan li svg{flex:0 0 15px; width:15px; height:15px; color:var(--v); margin-top:4px; stroke-width:2.2}
.forma .acc{margin-top:auto; padding-top:24px; display:flex; gap:9px; flex-wrap:wrap}

/* ============ PRÓXIMOS CURSOS ============ */
.hi-cursos{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:24px!important; list-style:none}
.hi-cursos li{margin:0}
.hi-curso{background:#fff; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; height:100%; text-decoration:none!important; color:inherit; transition:.18s}
.hi-curso:hover{box-shadow:0 10px 26px -14px rgba(0,0,0,.35); transform:translateY(-3px)}
.hi-curso .th{display:block; aspect-ratio:270/206; background:#F4F8FB; border-bottom:1px solid var(--linea); overflow:hidden}
.hi-curso .th img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s}
.hi-curso:hover .th img{transform:scale(1.04)}
.hi-curso .cu{padding:13px 15px 9px; flex:1; display:flex; flex-direction:column; gap:7px}
.hi-curso .cat{font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--v-txt)}
.hi-curso .tt{font-size:13px; font-weight:700; text-transform:uppercase; color:var(--tinta); line-height:1.35}
.hi-curso .meta{margin:0 15px; padding:9px 0 12px; border-top:1px solid var(--linea); display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--suave); line-height:1.45}
.hi-curso .meta b{color:var(--tinta); font-weight:600}
.hi-vacio{margin-top:20px}

/* ============ ÁREAS ============ */
.hi-areas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); justify-items:center; gap:clamp(24px,3.4vw,46px) clamp(12px,2.4vw,30px); margin:36px auto 0; max-width:940px}
.area{width:100%; max-width:162px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; text-decoration:none!important; color:inherit}
.area .ai{width:clamp(74px,8.4vw,94px); height:clamp(74px,8.4vw,94px); border-radius:50%; display:grid; place-items:center; background:var(--v-suave); color:var(--v-txt); box-shadow:inset 0 0 0 1px rgba(152,183,55,.3);
  transition:transform .22s cubic-bezier(.34,1.35,.64,1), background .2s, color .2s, box-shadow .2s}
.area .ai svg{width:32px; height:32px}
.area:hover .ai{background:var(--v); color:#fff; transform:translateY(-5px) scale(1.06); box-shadow:0 16px 30px -14px rgba(152,183,55,1)}
.area .an{font-size:13px; font-weight:700; line-height:1.3; color:var(--tinta); min-height:2.7em; display:flex; align-items:center; justify-content:center}
.area .ac{font-size:11px; color:var(--suave)}
.area:hover .an{color:var(--v-txt)}

/* ============ POR QUÉ HAACI ============ */
.hi-razones{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 28px; margin-top:30px}
@media (max-width:1100px){ .hi-razones{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .hi-razones{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .hi-razones{grid-template-columns:1fr} }
.razon{display:flex; gap:13px; align-items:flex-start}
.razon > svg{flex:0 0 26px; width:26px; height:26px; color:var(--v); margin-top:2px}
.razon h3{font-size:14px; font-weight:700; text-transform:uppercase}
.haaci-ini .razon p{font-size:13.5px; margin-top:6px}

/* ============ MEMBRESÍAS (la destacada, en dorado) ============ */
.hi-planes{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:clamp(26px,4.5vw,60px); margin-top:34px; position:relative; isolation:isolate; align-items:start}
.plan{position:relative; padding:6px 2px; display:flex; flex-direction:column}
.plan + .plan::before{content:""; position:absolute; left:calc(clamp(26px,4.5vw,60px) / -2); top:6%; bottom:6%; width:1px; background:linear-gradient(to bottom,transparent,var(--linea) 18%,var(--linea) 82%,transparent)}
.plan.mejor{padding:26px 28px 28px; border-radius:14px; background:linear-gradient(160deg,#FFFBF0 0%,#FFF4D6 100%); border:1px solid rgba(217,178,90,.55); box-shadow:0 22px 50px -30px rgba(184,137,46,.75)}
.plan.mejor::after{content:""; position:absolute; inset:-10% -8%; z-index:-1; border-radius:46%/30%; background:radial-gradient(58% 52% at 50% 40%,rgba(217,178,90,.28),transparent 72%)}
.plan .cinta{align-self:flex-start; position:relative; overflow:hidden; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:99px; margin-bottom:12px; color:#fff;
  background:linear-gradient(135deg,var(--oro) 0%,var(--oro-2) 50%,var(--oro) 100%); box-shadow:0 8px 20px -10px rgba(184,137,46,.9)}
.plan .cinta::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%); background-size:200% 100%; animation:hi-brillo 3.6s 1s ease-in-out infinite}
.haaci-ini .plan .et{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--suave)}
.plan h3{font-size:clamp(18px,1.9vw,21px); font-weight:800; margin-top:5px}
.haaci-ini .plan .precio{margin-top:16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.plan .precio b{font-size:clamp(40px,5.2vw,60px); font-weight:800; color:var(--tinta); line-height:1}
.plan.mejor .precio b{background:linear-gradient(135deg,#9A6F1E 0%,#D9B25A 45%,#B8892E 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.plan .precio span{font-size:12.5px; color:var(--texto)}
.haaci-ini .plan .unit{font-size:12.5px; font-weight:600; color:var(--v-txt); margin-top:7px}
.haaci-ini .plan.mejor .unit{color:var(--oro)}
.plan ul{list-style:none; margin:22px 0 26px!important; display:flex; flex-direction:column; gap:9px}
.plan.mejor li svg{color:var(--oro)}
.plan .hi-btn{align-self:flex-start}

/* ============ CLIENTES ============ */
.hi-marq{position:relative; overflow:hidden; margin-top:24px; -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%)}
.hi-marq-t{display:flex; width:max-content; animation:hi-marq calc(var(--n,20) * 2.6s) linear infinite}
.hi-marq:hover .hi-marq-t{animation-play-state:paused}
.hi-marq .cliente{flex:0 0 auto; width:180px; height:90px; margin:0 14px; display:grid; place-items:center}
.hi-marq .cliente img{width:100%; height:100%; object-fit:contain; display:block; transition:transform .2s}
.hi-marq .cliente:hover img{transform:scale(1.05)}

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

/* ============ RESPONSIVE ============ */
@media (max-width:920px){
  .hi-formas{grid-template-columns:1fr}
  .forma{padding:28px 0}
  .forma + .forma::before{left:6%; right:6%; top:0; bottom:auto; width:auto; height:1px; background:linear-gradient(to right,transparent,var(--linea) 20%,var(--linea) 80%,transparent)}
  .forma.b::after{inset:-3% 0}
  .hi-marq .cliente{width:130px; height:66px; margin:0 8px}
}
@media (max-width:820px){
  .hi-hero-foto{background-image:var(--hero-m); background-position:center}
  .hi-hero{padding-block:clamp(38px,7vw,56px) calc(26px + var(--onda-hero))}
  .hi-hero::before{background:linear-gradient(180deg,rgba(16,28,17,.58) 0%,rgba(16,28,17,.48) 55%,rgba(16,28,17,.64) 100%),linear-gradient(90deg,rgba(95,139,33,.2),rgba(95,139,33,.2))}
  .hi-areas{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .plan + .plan::before{display:none}
  .hi-buscador-c .hi-btn{padding:12px 16px}
}
@media (max-width:540px){ .hi-areas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion: reduce){
  .haaci-ini *,.haaci-ini *::before,.haaci-ini *::after{animation:none!important; transition:none!important}
  .haaci-ini .rv-oculto{opacity:1; transform:none}
}

/* Plan plata (Platinum), como el dorado (Premium) pero en plata */
.haaci-ini{--plata:#8E96A0; --plata-2:#C9CFD6; --plata-3:#EEF1F4}
.hi-btn.plata{background:linear-gradient(135deg,#7D858F 0%,#B8C0C9 50%,#7D858F 100%); background-size:200% 100%; border:0; padding:14px 22px; color:#fff!important; box-shadow:0 10px 24px -12px rgba(110,120,132,.9)}
.hi-btn.plata:hover{background-position:100% 0}
.plan.plata{padding:26px 28px 28px; border-radius:14px; background:linear-gradient(160deg,#FBFCFD 0%,#ECEFF3 100%); border:1px solid rgba(160,170,182,.6); box-shadow:0 22px 50px -30px rgba(100,110,122,.7)}
.plan.plata::after{content:""; position:absolute; inset:-10% -8%; z-index:-1; border-radius:46%/30%; background:radial-gradient(58% 52% at 50% 40%,rgba(170,180,192,.28),transparent 72%)}
.plan.plata .precio b{background:linear-gradient(135deg,#5F6770 0%,#AEB6BF 45%,#7D858F 100%); -webkit-background-clip:text; background-clip:text; color:transparent}
.haaci-ini .plan.plata .unit{color:#6E7781}
.plan.plata li svg{color:#7D858F}
.plan + .plan.mejor::before,.plan.plata + .plan::before{display:none}
.plan li small.restr{display:block; font-size:11.5px; color:#8f8f8f; font-style:italic; margin-top:1px}