/* ==========================================================================
   Micro-animaciones de Greentic — pequeñas, ligeras y con sentido por tema.
   Se activan con micro.js (html.mx). Respetan prefers-reduced-motion.
   Acento: #F2C230
   ========================================================================== */
@keyframes mx-draw   { to { stroke-dashoffset: 0; } }
@keyframes mx-grow   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mx-fade   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mx-wa     { 0%, 70%, 100% { box-shadow: 0 8px 24px -12px rgba(0,0,0,.6), 0 0 0 0 rgba(37,211,102,0); } 78% { box-shadow: 0 8px 24px -12px rgba(0,0,0,.6), 0 0 0 0 rgba(184,242,207,.55); } 100% { box-shadow: 0 8px 24px -12px rgba(0,0,0,.6), 0 0 0 16px rgba(184,242,207,0); } }
@keyframes mx-wiggle { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-12deg); } 93% { transform: rotate(10deg); } 96% { transform: rotate(-6deg); } }
@keyframes mx-glow   { 0%, 100% { box-shadow: 0 0 0 1px rgba(242,194,48,.35), 0 24px 50px -26px rgba(242,194,48,.45); } 50% { box-shadow: 0 0 0 1px rgba(242,194,48,.55), 0 24px 56px -22px rgba(242,194,48,.7); } }
@keyframes mx-beat   { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.18); } 76% { transform: scale(1); } 84% { transform: scale(1.12); } }
@keyframes mx-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Títulos pequeños: la línea se dibuja */
.kicker::before { transform-origin: left; animation: mx-grow .9s .15s cubic-bezier(.2,.8,.2,1) both; }

/* Hero: los puntos de resumen entran uno a uno */
.hero__meta span { animation: mx-fade .6s both; }
.hero__meta span:nth-child(1) { animation-delay: .5s; }
.hero__meta span:nth-child(2) { animation-delay: .65s; }
.hero__meta span:nth-child(3) { animation-delay: .8s; }
.hero__meta span:nth-child(4) { animation-delay: .95s; }
.hero__meta span:nth-child(5) { animation-delay: 1.1s; }

/* Botón de WhatsApp del dock: un aviso suave cada pocos segundos */
.dock__btn--wa { animation: mx-wa 6s ease-in-out infinite 2s; }
/* Botones "Arma tu tienda / tu página": un guiño de atención, a su ritmo */
.dock__btn[href*="crear-tienda"] svg { animation: mx-wiggle 9s ease-in-out infinite 4s; transform-origin: 50% 70%; }
.dock__btn[href*="plan-emprendedor"] svg { animation: mx-wiggle 9s ease-in-out infinite 8s; transform-origin: 50% 70%; }

/* Plan destacado: respira */
.plan--featured { animation: mx-glow 3.6s ease-in-out infinite; }

/* ---- Efectos que dependen de JS (html.mx) ---- */
/* Línea separadora: se traza al llegar */
html.mx .section-rule { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
html.mx .section-rule.mx-in { transform: none; }

/* Listas "todo incluido": cada fila entra y su check se dibuja */
html.mx .inc-list .inc-row { opacity: 0; transform: translateX(-16px); }
html.mx .inc-list.mx-in .inc-row { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.3,1); transition-delay: calc(var(--i, 0) * 75ms); }
html.mx .inc-ck svg path { stroke-dasharray: 24; stroke-dashoffset: 24; }
html.mx .inc-list.mx-in .inc-ck svg path { animation: mx-draw .5s ease forwards; animation-delay: calc(var(--i, 0) * 75ms + .25s); }

/* Iconos de servicio: se dibujan al llegar */
html.mx .svc__icon :is(path, circle, rect, line, polyline, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.mx .svc.mx-in .svc__icon :is(path, circle, rect, line, polyline, ellipse) { animation: mx-draw 1.2s ease forwards; animation-delay: .15s; }
html.mx .fc-ic svg :is(path, circle, rect, line, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.mx .fcard.mx-in .fc-ic svg :is(path, circle, rect, line, polyline) { animation: mx-draw 1.1s ease forwards; animation-delay: .2s; }

/* Proceso: una luz amarilla recorre las fases */
.proc__step { transition: background-color .4s ease; }
.proc__step .proc__num { transition: color .4s ease, text-shadow .4s ease, transform .4s ease; }
.proc__step.is-lit .proc__num { color: #F2C230; text-shadow: 0 0 18px rgba(242,194,48,.55); transform: scale(1.08); transform-origin: left center; }
.proc__step.is-lit { background-color: rgba(242,194,48,.05); }

/* Por tema (JS pone html.mx-p-<página>) */
html.mx-p-medicos .proc__step.is-lit .proc__num,
html.mx-p-medicos-gif .proc__step.is-lit .proc__num { animation: mx-beat 1.6s ease-in-out 2; }
html.mx-p-marketing-digital .svc__icon,
html.mx-p-vende-por-whatsapp .svc__icon,
html.mx-p-soporte .svc__icon { animation: mx-float 5s ease-in-out infinite; }
html.mx-p-marketing-digital .svc:nth-child(2) .svc__icon,
html.mx-p-vende-por-whatsapp .svc:nth-child(2) .svc__icon,
html.mx-p-soporte .svc:nth-child(2) .svc__icon { animation-delay: .8s; }
html.mx-p-marketing-digital .svc:nth-child(3) .svc__icon,
html.mx-p-vende-por-whatsapp .svc:nth-child(3) .svc__icon,
html.mx-p-soporte .svc:nth-child(3) .svc__icon { animation-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  .kicker::before, .hero__meta span, .dock__btn--wa, .dock__btn svg, .plan--featured,
  .svc__icon, .proc__step.is-lit .proc__num { animation: none !important; }
  html.mx .section-rule, html.mx .inc-list .inc-row { opacity: 1; transform: none; transition: none; }
  html.mx .inc-ck svg path, html.mx .svc__icon :is(path, circle, rect, line, polyline, ellipse), html.mx .fc-ic svg :is(path, circle, rect, line, polyline) { stroke-dashoffset: 0; animation: none !important; }
}

/* ---- Móvil: áreas táctiles y textos mínimos legibles ---- */
@media (max-width: 760px) {
  .link-tech, .lf-note a, .scribble a, .foot a { display: inline-block; padding-block: 9px; min-height: 40px; }
  .plan__badge { font-size: .7rem; }
  .bp-panel__tag, .tag, .foot h5, footer h5 { font-size: 11.5px; }
  .dock__btn { min-width: 44px; min-height: 44px; }
}