/* Talleres Juma — fx.css: ambiente de secciones, proceso, sello, marco, marquee extra */
.services,.split,.gallery,.testimonials,.cta-final,.mvv{
  background-image:
    radial-gradient(ellipse 45% 40% at 8% 18%,rgba(59,99,236,.12),transparent 70%),
    radial-gradient(ellipse 40% 35% at 94% 82%,rgba(209,18,31,.09),transparent 70%),
    radial-gradient(rgba(139,150,194,.13) 1px,transparent 1.3px);
  background-size:auto,auto,28px 28px}
.split.reverse,.gallery{background-image:
    radial-gradient(ellipse 45% 40% at 92% 18%,rgba(209,18,31,.1),transparent 70%),
    radial-gradient(ellipse 40% 35% at 6% 82%,rgba(59,99,236,.12),transparent 70%),
    radial-gradient(rgba(139,150,194,.13) 1px,transparent 1.3px)}

/* esquinas de visor en las fotos + sello giratorio */
.split-visual{position:relative}
.split-visual::before,.split-visual::after{content:"";position:absolute;width:34px;height:34px;z-index:3;pointer-events:none;border:2px solid var(--red-bright)}
.split-visual::before{top:14px;left:14px;border-right:0;border-bottom:0}
.split-visual::after{right:14px;bottom:14px;border-left:0;border-top:0}
.seal{position:absolute;top:1.1rem;right:1.1rem;z-index:2;width:112px;height:112px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;border-radius:50%;background:rgba(6,12,43,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border-hi)}
.seal svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--ice);font:600 8.6px var(--font-display);
  letter-spacing:.06em;animation:seal-spin 24s linear infinite}
.seal b{font:600 2rem/1 var(--font-display);color:var(--white)}
.seal small{font-size:.62rem;color:var(--steel)}
@keyframes seal-spin{to{transform:rotate(360deg)}}

/* proceso: es una secuencia real, por eso va numerado */
.process{margin-top:4.5rem}
.process-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.process-steps::before,.process-steps::after{content:"";position:absolute;left:0;top:19px;height:2px}
.process-steps::before{right:0;background:var(--border-soft)}
.process-steps::after{width:0;background:linear-gradient(90deg,var(--red-bright),var(--blue-bright));transition:width 2s linear}
.process-steps.run::after{width:100%}
.process-step{position:relative;padding-top:3.4rem}
.process-step .dot{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--navy-deep);border:2px solid var(--border-hi);font:600 1rem var(--font-display);color:var(--steel);
  transition:border-color .4s,color .4s,box-shadow .4s}
.process-step.on .dot{border-color:var(--red-bright);color:var(--white);box-shadow:var(--glow-red)}
.process-step h3{font-size:1.35rem;margin-bottom:.5rem}
.process-step p{color:var(--steel);font-size:.95rem;max-width:26ch}
@media(max-width:800px){.process-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
  .process-steps::before,.process-steps::after{display:none}}
@media(max-width:480px){.process-steps{grid-template-columns:1fr}.seal{width:92px;height:92px}.seal b{font-size:1.6rem}}

/* tarjetas de servicio: inclinación 3D con el cursor */
.service-card.fx-tilt{transition:opacity .8s var(--ease),filter .8s var(--ease),transform .25s var(--ease-out),border-color .3s,box-shadow .3s}
.service-card.fx-tilt:hover{transform:perspective(900px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.service-icon-box svg{transition:transform .6s var(--ease-spring)}
.service-card:hover .service-icon-box{color:var(--red-bright)}
.service-card:hover .service-icon-box svg{transform:rotate(90deg)}

/* ===== cinta de servicios mejorada ===== */
.marquee{padding:1.3rem 0;border-image:linear-gradient(90deg,transparent,var(--border-hi),transparent) 1;
  background:linear-gradient(90deg,rgba(209,18,31,.1),rgba(6,12,43,.55) 30%,rgba(6,12,43,.55) 70%,rgba(59,99,236,.12))}
.marquee-track{align-items:center;font-family:var(--font-display);font-size:1.15rem;font-weight:500;letter-spacing:.16em;color:var(--ice)}
.marquee-track span{display:inline-flex;align-items:center;transition:color .3s}
.marquee-track span:hover{color:var(--red-bright)}
.marquee-track span::after{content:"";display:inline-block;width:16px;height:16px;margin-left:3rem;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM19.4 13a7.6 7.6 0 0 0 0-2l2-1.5-2-3.5-2.4 1a7.4 7.4 0 0 0-1.7-1L15 3.5h-4l-.3 2.5a7.4 7.4 0 0 0-1.7 1l-2.4-1-2 3.5L6.6 11a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.5 2.4-1c.5.4 1.1.8 1.7 1l.3 2.5h4l.3-2.5c.6-.2 1.2-.6 1.7-1l2.4 1 2-3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM19.4 13a7.6 7.6 0 0 0 0-2l2-1.5-2-3.5-2.4 1a7.4 7.4 0 0 0-1.7-1L15 3.5h-4l-.3 2.5a7.4 7.4 0 0 0-1.7 1l-2.4-1-2 3.5L6.6 11a7.6 7.6 0 0 0 0 2l-2 1.5 2 3.5 2.4-1c.5.4 1.1.8 1.7 1l.3 2.5h4l.3-2.5c.6-.2 1.2-.6 1.7-1l2.4 1 2-3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:gear-turn 9s linear infinite}
@keyframes gear-turn{to{transform:rotate(360deg)}}
.marquee:hover .marquee-track{animation-play-state:paused}
@media(max-width:600px){.marquee-track{font-size:.95rem}}

/* ===== números del hero ===== */
.stat-num{font-variant-numeric:tabular-nums}

/* ===== toque en celular: círculo y brillo mucho más sutiles ===== */
.ripple{width:16px;height:16px;margin:-8px 0 0 -8px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);
  animation:rip-soft 1.1s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rip-soft{to{transform:scale(3);opacity:0}}
@media(hover:none){
  .service-card::before,.testimonial-card::before{transition:opacity .7s var(--ease)}
  .service-card.lit::before,.testimonial-card.lit::before{opacity:.5}
  .service-card:active{transform:scale(.99)}
}

/* ===== botones ===== */
.btn{min-height:48px;padding:.9rem 1.8rem;border-radius:10px;font-size:.97rem;letter-spacing:.01em;gap:.6rem;
  transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),background-size .45s var(--ease)}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.12s}
.btn-primary{background:linear-gradient(135deg,var(--red-bright),var(--red) 60%,#a50d18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--glow-red)}
.btn-primary:hover{background:linear-gradient(135deg,#ff3a46,var(--red-bright) 60%,var(--red));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),var(--glow-red-lg)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:var(--border-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.btn-ghost:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4)}
.btn-outline{border-radius:10px;border-color:var(--red-bright);
  background:linear-gradient(var(--red),var(--red)) no-repeat left center/0% 100%}
.btn-outline:hover{background-size:100% 100%;box-shadow:var(--glow-red)}
.btn::after{content:"";order:-1;flex:none;width:0;height:18px;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;transition:width .3s var(--ease)}
.btn[href*="wa.me"]::after{width:18px;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.1 2a9.9 9.9 0 0 0-8.5 15L2 22l5.1-1.6A9.9 9.9 0 1 0 12.1 2zm5.4 13.9c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .2-3.3-.7a11.2 11.2 0 0 1-4.6-4c-.4-.5-1.1-1.5-1.1-2.8s.7-2 1-2.2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .5l-.4.6c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2 1.1 1 2 1.3 2.3 1.4.3.2.5.1.7-.1l.9-1c.2-.3.4-.2.6-.1l1.9.9c.3.1.5.2.5.4.1.1.1.6-.1 1.1z'/%3E%3C/svg%3E")}
.btn[href^="tel:"]::after{width:17px;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}

/* botón de WhatsApp del menú (antes sin estilos internos) */
.nav-cta{position:relative;border-radius:10px;padding:.5rem 1.05rem .5rem .85rem;gap:.65rem;
  background:linear-gradient(135deg,var(--red-bright),var(--red) 65%,#a50d18);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),var(--glow-red)}
.nav-cta .wa-icon{display:grid;place-items:center;width:24px;height:24px;flex:none}
.nav-cta .wa-icon svg{width:100%;height:100%;fill:currentColor}
.nav-cta .wa-text{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.nav-cta .wa-text strong{font-size:.88rem;font-weight:600}
.nav-cta .wa-text small{font-size:.64rem;opacity:.8;letter-spacing:.04em}
.nav-cta .wa-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:nav-pulse 3.6s ease-out infinite}
@keyframes nav-pulse{0%{box-shadow:0 0 0 0 rgba(239,36,48,.4)}70%,100%{box-shadow:0 0 0 12px rgba(239,36,48,0)}}

@media(max-width:560px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
}
@media(hover:none){.btn:hover{transform:none}.btn::before{display:none}}