/*
  Reusable UI components
  -----------------------
  Buttons, chips, cards, badges, form fields and other pieces that
  appear in more than one section. Section-specific layout (grids,
  section-only positioning) lives in layout.css instead.
*/

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;border-radius:100px;font-weight:700;font-size:15.5px;
  border:1px solid transparent;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
  min-height:54px;white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn-glow{background:linear-gradient(135deg,var(--accent-light),var(--accent));color:#ffffff;box-shadow:0 8px 24px -6px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.08) inset;}
.btn-glow:hover{transform:translateY(-2px);box-shadow:0 14px 34px -8px rgba(124,58,237,.75);}
.btn-glass{background:rgba(24,18,40,.045);border-color:var(--border);color:var(--text);backdrop-filter:blur(10px);}
.btn-glass:hover{background:rgba(24,18,40,.08);border-color:var(--border-strong);transform:translateY(-2px);}
.btn-sm{padding:11px 20px;min-height:40px;font-size:13.5px;}
.btn-block{width:100%;}

/* Chip / eyebrow-style pill */
.chip{
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.3);
  color:var(--accent-deep);font-weight:700;font-size:14px;
  padding:9px 18px;border-radius:100px;margin-bottom:28px;
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative;flex-shrink:0;}
.pulse-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);animation:pulseRing 1.6s infinite;}

/* Glass card base — used by service/feature/testimonial/form cards */
.glass{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.glass:hover{transform:translateY(-6px);border-color:var(--border-strong);background:var(--surface-hover);box-shadow:0 30px 60px -30px rgba(20,16,40,.18);}

/* Icon badge (tinted circle/square holding an SVG icon) */
.icon-badge{
  width:54px;height:54px;border-radius:16px;
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(124,58,237,.06));
  border:1px solid rgba(124,58,237,.25);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
}
.icon-badge svg{width:26px;height:26px;color:var(--accent-deep);}

/* Text link with animated arrow (also used as a <button> to open the service modal) */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--accent-deep);
  background:none;border:none;padding:0;font-family:inherit;cursor:pointer;
}
.link-arrow svg{width:15px;height:15px;transition:transform .2s;}
.service-card:hover .link-arrow svg{transform:translateX(4px);}

/* Stat pill (used in the "quiénes somos" section) */
.stat-chip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px 20px;min-width:130px;}
.stat-chip strong{display:block;font-family:'Sora',sans-serif;font-size:26px;font-weight:700;}
.stat-chip span{font-size:12.5px;color:var(--muted);}

/* Contact CTA card (photo background + direct WhatsApp/call actions) */
.cta-card{
  position:sticky;top:110px;min-height:560px;border-radius:var(--radius-md);
  overflow:hidden;display:flex;align-items:flex-end;
  border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(20,16,40,.25);
}
.cta-card img{filter:saturate(1.05);}
.cta-overlay{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(22,15,40,.15) 0%,rgba(18,12,32,.55) 55%,rgba(14,9,26,.92) 100%);
}
.cta-content{position:relative;z-index:4;padding:36px;color:#fff;width:100%;}
.cta-chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;margin-bottom:18px;}
.cta-content h3{font-size:26px;font-weight:700;margin-bottom:10px;}
.cta-content p{color:rgba(255,255,255,.82);font-size:15px;margin-bottom:26px;max-width:400px;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;}
.btn-glass-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(10px);}
.btn-glass-light:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
.cta-stats{display:flex;gap:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);}
.cta-stats strong{display:block;font-family:'Sora',sans-serif;font-size:19px;font-weight:700;}
.cta-stats span{font-size:12px;color:rgba(255,255,255,.7);}

/* Testimonial card */
.t-card{padding:30px;display:flex;flex-direction:column;}
.t-rating{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.t-stars{position:relative;display:inline-block;font-size:15px;letter-spacing:2px;color:var(--border-strong);}
.t-stars::after{content:'★★★★★';position:absolute;left:0;top:0;width:var(--score);overflow:hidden;white-space:nowrap;color:var(--accent-deep);}
.t-score{font-size:13px;font-weight:700;color:var(--muted);}
.t-card p{color:#403c48;font-size:15.5px;margin-bottom:24px;flex-grow:1;}
.t-author{display:flex;align-items:center;gap:12px;}
.t-avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;overflow:hidden;border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(124,58,237,.1));
}
.t-name{font-weight:700;font-size:14.5px;}
.t-sub{color:var(--muted);font-size:12.5px;}

/* Social icon buttons (footer) */
.social{display:flex;gap:10px;margin-top:22px;}
.social a{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;}
.social a:hover{background:var(--surface-hover);border-color:var(--border-strong);}
.social svg{width:17px;height:17px;}

/* WhatsApp floating action button */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:200;
  width:62px;height:62px;border-radius:50%;
  background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -8px rgba(37,211,102,.6);
}
.wa-float::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--whatsapp);animation:waPing 2.2s ease-out infinite;}
.wa-float svg{width:30px;height:30px;color:#fff;position:relative;z-index:1;}
.wa-tooltip{
  position:absolute;right:74px;top:50%;transform:translateY(-50%);
  background:var(--bg-soft-2);border:1px solid var(--border-strong);padding:10px 16px;border-radius:10px;
  font-size:13px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;
}
.wa-float:hover .wa-tooltip{opacity:1;}

/* Back-to-top floating button */
.back-top{
  position:fixed;bottom:100px;right:26px;z-index:200;
  width:48px;height:48px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(20,16,40,.25);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s step-end, background .2s ease, border-color .2s ease;
}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .25s ease, transform .25s ease, background .2s ease, border-color .2s ease;}
.back-top:hover{background:var(--surface-hover);border-color:var(--accent);transform:translateY(-3px);}
.back-top svg{width:19px;height:19px;color:var(--accent-deep);}

/* Service detail modal (opened by "Conocer más", stays inside the page) */
body.modal-open{overflow:hidden;}
.service-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:24px;}
.service-modal.open{display:flex;}
.service-modal-backdrop{
  position:absolute;inset:0;background:rgba(18,12,32,.6);backdrop-filter:blur(4px);
  animation:modalFade .2s ease;
}
.service-modal-panel{
  position:relative;width:100%;max-width:640px;max-height:88vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--border);
  box-shadow:0 40px 80px -20px rgba(15,10,30,.45);
  animation:modalPop .25s cubic-bezier(.2,.8,.2,1);
}
.service-modal-close{
  position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.85);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);backdrop-filter:blur(6px);
}
.service-modal-close:hover{background:#fff;border-color:var(--border-strong);}
.service-modal-close svg{width:16px;height:16px;}
.service-modal-media{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;max-height:260px;overflow:hidden;}
.service-modal-media img{width:100%;height:260px;object-fit:cover;display:block;}
.service-modal-body{padding:32px;}
.service-modal-body h3{font-size:22px;font-weight:700;margin:6px 0 12px;}
.service-modal-body p{color:var(--muted);font-size:15px;margin-bottom:20px;}
.service-modal-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.service-modal-list li{
  position:relative;padding-left:22px;font-size:14.5px;color:var(--text);
}
.service-modal-list li::before{
  content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-light),var(--accent));
}
.service-modal-actions{display:flex;gap:12px;flex-wrap:wrap;}

@keyframes modalFade{from{opacity:0;}to{opacity:1;}}
@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}