/* HAACI · Página Membresías [haaci_membresias]
   Se apoya en assets/inicio/inicio.css (variables, banner, planes con Premium dorado, banda). */

.haaci-memb{overflow-x:clip}
.hm-hero{padding:clamp(60px,7.5vw,104px) 0 calc(clamp(40px,4.6vw,64px) + var(--onda-hero))}
.hm-hero .hi-hero-foto{background-position:left 40%}
/* el profesional con las tarjetas queda a la izquierda; el texto va a la derecha */
@media (min-width:821px){
  .hm-hero{text-align:left}
  .hm-hero::before{background:linear-gradient(90deg,rgba(16,28,17,0) 0%,rgba(16,28,17,.06) 36%,rgba(16,28,17,.55) 52%,rgba(16,28,17,.68) 100%)}
  /* el texto ocupa la mitad derecha del contenedor (1200px), no del ancho de la pantalla */
  .haaci-memb .hm-hero .hi-hero-in > *{margin-left:50%!important; margin-right:0!important; width:50%; max-width:560px}
  .hm-hero h1{font-size:clamp(28px,3.4vw,48px)}
  .hm-hero .hm-cta{justify-content:flex-start}
}
.hm-hero h1{max-width:none}
.hm-hero .hi-sub{max-width:58ch}
.hm-cta{justify-content:center; margin-top:28px; animation:hi-aparece .9s 1.1s both}
html{scroll-behavior:smooth}
#hm-planes{scroll-margin-top:90px}

/* intro con las tarjetas de membresía */
.hm-intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); align-items:center}
.hm-tarjetas{justify-self:center; width:min(100%,430px); position:relative}
.hm-tarjetas::before{content:""; position:absolute; inset:14% 8% 6%; border-radius:50%; background:radial-gradient(closest-side,rgba(217,178,90,.35),rgba(152,183,55,.12) 60%,transparent); filter:blur(10px); z-index:0}
.hm-tarjetas img{position:relative; z-index:1; width:100%; height:auto; display:block; filter:drop-shadow(0 26px 30px rgba(0,0,0,.28)); animation:hm-flota 7s ease-in-out infinite}
@keyframes hm-flota{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(-1.2deg)}}

/* planes centrados y con aire */
.hm-planes{max-width:880px; margin-inline:auto; margin-top:40px}

/* cómo funciona */
.hm-pasos{list-style:none; margin:30px 0 0!important; padding:0!important; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,36px); counter-reset:p; position:relative}
.hm-pasos::before{content:""; position:absolute; left:28px; right:28px; top:27px; height:2px; background:linear-gradient(90deg,var(--v),rgba(152,183,55,.15)); z-index:0}
.hm-pasos li{position:relative; z-index:1; margin:0}
.hm-pasos .n{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:#fff; border:2px solid var(--v); color:var(--v-txt); font-size:20px; font-weight:800; box-shadow:0 10px 24px -16px rgba(95,139,33,.9); margin-bottom:16px}
.hm-pasos li:first-child .n{background:var(--v); color:#fff}
.hm-pasos h3{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.03em}
.haaci-memb .hm-pasos p{font-size:14px; margin-top:6px}
.hm-pasos .rv-in:nth-child(2){transition-delay:.12s} .hm-pasos .rv-in:nth-child(3){transition-delay:.24s}

/* consideraciones */
.hm-cond{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); margin-top:30px}
.hm-cond .col{background:#fff; border:1px solid var(--linea); border-radius:12px; padding:24px 26px; box-shadow:0 16px 36px -30px rgba(0,0,0,.45)}
.hm-cond .col.si{border-top:4px solid var(--v)}
.hm-cond .col.ojo{border-top:4px solid var(--oro-2)}
.hm-cond h3{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px!important}
.hm-cond h3 svg{width:22px; height:22px; flex:0 0 22px}
.hm-cond .si h3 svg{color:var(--v)} .hm-cond .ojo h3 svg{color:var(--oro)}
.hm-cond ul{list-style:none}
.hm-cond li{display:flex; gap:10px; align-items:flex-start; margin:0; padding:9px 0; border-bottom:1px dashed var(--linea); font-size:14px; line-height:1.55}
.hm-cond li:last-child{border-bottom:0}
.hm-cond li svg{flex:0 0 16px; width:16px; height:16px; margin-top:3px; stroke-width:2.1}
.hm-cond .si li svg{color:var(--v)} .hm-cond .ojo li svg{color:var(--oro)}

/* cronograma anual dentro de la página: los 12 meses en una sola línea */
@media (min-width:768px){
  .haaci-memb .hm-crono-in .haaci-crono-tabs{flex-wrap:nowrap}
  .haaci-memb .hm-crono-in .haaci-crono-tab{flex:1 1 0; min-width:0; padding:13px 2px; font-size:clamp(10.5px,.95vw,13px); text-align:center}
}
.hm-crono-in{margin-top:26px}
.haaci-memb .hm-crono-in ul{margin:revert; padding:revert}
.haaci-memb .hm-crono-in h3{text-wrap:wrap}

/* preguntas frecuentes (mismo estilo que Ofertas) */
.hm-faq{margin-top:22px; max-width:900px}
.hm-faq details{border-bottom:1px solid var(--v); padding:18px 2px}
.hm-faq details:first-child{border-top:1px solid var(--v)}
.hm-faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:center; font-size:15px; font-weight:700; color:var(--tinta)}
.hm-faq summary::-webkit-details-marker{display:none}
.hm-faq summary::after{content:"+"; flex:0 0 28px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--v-suave); color:var(--v-txt); font-size:18px; font-weight:600; transition:transform .25s}
.hm-faq details[open] summary::after{content:"−"; background:var(--v); color:#fff}
.haaci-memb .hm-faq p{margin-top:10px; font-size:14.5px; max-width:80ch}

@media (max-width:860px){
  .hm-intro{grid-template-columns:1fr}
  .hm-tarjetas{width:min(100%,320px)}
  .hm-pasos{grid-template-columns:1fr; gap:22px}
  .hm-pasos::before{left:27px; right:auto; top:28px; bottom:28px; width:2px; height:auto; background:linear-gradient(180deg,var(--v),rgba(152,183,55,.15))}
  .hm-pasos li{display:flex; gap:16px; align-items:flex-start}
  .hm-pasos .n{flex:0 0 56px; margin:0}
  .hm-cond{grid-template-columns:1fr}
}
@media (max-width:540px){ .hm-cond .col{padding:20px 18px} }

@media (prefers-reduced-motion: reduce){ .hm-tarjetas img{animation:none} }

/* mismo pulso del botón «Solicitar fecha para mi empresa» del banner de Ofertas */
.hi-btn.pulso{animation:hm-pulso 2.6s 2.2s ease-out infinite}
@keyframes hm-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)}}
@media (prefers-reduced-motion: reduce){ .hi-btn.pulso{animation:none} }