*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --teal:        #0E9E9E;
  --teal-dk:     #0B8080;
  --teal-lt:     #12c2c2;
  --teal-bg:     #E0F7F7;
  --sky:         #0EA5E9;
  --sky-dk:      #0284C7;
  --sky-bg:      #F0F9FF;
  --coral:       #F4845F;
  --coral-lt:    #f79a7a;
  --coral-bg:    #FFF0EB;
  --dark:        #F8FAFB;
  --dark2:       #FFFFFF;
  --surface-alt: #F1F5F9;
  --glass-bg:    #FFFFFF;
  --glass-bd:    #E2E8F0;
  --text:        #1E293B;
  --text-2:      #475569;
  --muted:       #94A3B8;
  --border:      #E2E8F0;
  --border-strong: #CBD5E1;
  --radius:      20px;
  --radius-sm:   12px;
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --success:     #10B981;
  --info:        #3B82F6;
  --warning:     #F59E0B;
  --error:       #EF4444;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3,
.hero-title, .hero-sub,
.section-title,
.servicio-card h3, .razon h3,
.testimonio-nombre, .testimonio-rol,
.prof-titulo, .prof-sub,
.ts-card h3, .mini-card-label,
.stat-number, .prof-stat-num,
.nav-logo, .footer-logo {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

/* ── BACKGROUND ORBS ── */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: .07;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb-1 { width: 600px; height: 600px; background: var(--teal);   top: -150px; left: -100px; animation-duration: 20s; }
.orb-2 { width: 400px; height: 400px; background: var(--coral);  top: 40%;    right: -80px; animation-duration: 15s; animation-delay: -6s; }
.orb-3 { width: 500px; height: 500px; background: #bfdbfe;       bottom: -100px; left: 30%; animation-duration: 25s; animation-delay: -3s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(248,250,251,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
  transition: background .3s;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 900;
  text-decoration: none; color: var(--text); letter-spacing: -.3px;
}
.logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--teal), var(--teal-lt));
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: 0 4px 14px rgba(14,158,158,.35);
}
.logo-img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; }
.nav-links { display: flex; gap: 8px; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--text-2);
  font-weight: 600; font-size: 14px;
  padding: 8px 16px; border-radius: 50px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-alt); }
.nav-cta { background: var(--teal) !important; color: white !important; box-shadow: 0 4px 14px rgba(14,158,158,.35); }
.nav-cta:hover { background: var(--teal-dk) !important; transform: translateY(-1px); }

/* ── HERO ── */
.hero {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 120px 24px 80px;
}
.hero-inner { max-width: 820px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-bg);
  border: 1px solid rgba(14,158,158,.25);
  padding: 8px 20px; border-radius: 50px;
  font-size: 13px; font-weight: 700; color: var(--teal-dk);
  margin-bottom: 32px; letter-spacing: .5px;
  animation: fadeUp .8s ease both;
}
.badge-dot {
  width: 8px; height: 8px;
  background: var(--teal); border-radius: 50%;
  box-shadow: 0 0 8px var(--teal);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}
.hero h1 {
  font-size: clamp(40px, 8vw, 72px); font-weight: 900;
  line-height: 1.08; margin-bottom: 24px; letter-spacing: -2px;
  animation: fadeUp .8s .15s ease both;
}
.grad-text {
  background: linear-gradient(135deg, var(--teal-dk) 0%, var(--teal) 50%, var(--teal-lt) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p {
  font-size: clamp(17px, 2.5vw, 21px); color: var(--text-2);
  max-width: 560px; margin: 0 auto 48px; font-weight: 400;
  animation: fadeUp .8s .3s ease both;
}
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; animation: fadeUp .8s .45s ease both; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--teal); color: white;
  font-family: inherit; font-weight: 800; font-size: 16px;
  padding: 16px 32px; border-radius: 50px;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(14,158,158,.35);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn-primary:hover { background: var(--teal-dk); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(14,158,158,.45); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--glass-bg); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-weight: 700; font-size: 16px;
  padding: 16px 32px; border-radius: 50px; text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: background .2s, transform .2s, border-color .2s;
}
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--border-strong); transform: translateY(-3px); }

/* Trust strip */
.hero-trust { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 64px; animation: fadeUp .8s .6s ease both; }
.trust-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.trust-icon {
  width: 34px; height: 34px; background: var(--teal-bg);
  border: 1px solid rgba(14,158,158,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.trust-icon svg { width: 15px; height: 15px; color: var(--teal-dk); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── FLOATING CARDS ── */
.hero-cards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 60px; animation: fadeUp .8s .75s ease both; }
.mini-card {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 20px;
  display: flex; align-items: center; gap: 12px; min-width: 160px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.mini-card-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--teal), var(--teal-lt));
  border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mini-card-icon svg { width: 20px; height: 20px; color: white; }
.mini-card-text strong { display: block; font-size: 14px; font-weight: 800; }
.mini-card-text span  { font-size: 12px; color: var(--muted); }

/* ── SECTION BASE ── */
section { position: relative; z-index: 1; padding: 100px 24px; }
.container { max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--teal-dk); margin-bottom: 16px; display: block;
}
.section-title { font-size: clamp(28px, 4.5vw, 48px); font-weight: 900; letter-spacing: -1px; margin-bottom: 16px; line-height: 1.1; }
.section-sub { font-size: 18px; color: var(--text-2); max-width: 500px; margin-bottom: 56px; }

/* ── SERVICIOS ── */
#servicios { background: var(--teal-bg); }
.servicios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.servicio-card {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 24px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .25s, border-color .25s, box-shadow .25s;
  cursor: default;
}
.servicio-card:hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 12px 32px rgba(14,158,158,.12); }
.servicio-icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(14,158,158,.12), rgba(14,158,158,.04));
  border: 1px solid rgba(14,158,158,.18);
}
.servicio-icon svg { width: 30px; height: 30px; color: var(--teal-dk); }
.servicio-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.servicio-card p  { font-size: 13px; color: var(--text-2); line-height: 1.6; }

/* ── CÓMO FUNCIONA ── */
#como { background: var(--sky-bg); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; padding-top: 44px; }
.timeline::before {
  content: ''; position: absolute; top: 26px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg, var(--teal), var(--sky), var(--teal));
  z-index: 0; opacity: .4;
}
.ts-step { padding: 0 10px; position: relative; z-index: 1; text-align: center; }
.ts-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--sky));
  color: white; font-size: 17px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 0 5px var(--sky-bg), 0 4px 16px rgba(14,165,233,.3);
  position: relative; z-index: 2; transition: transform .2s, box-shadow .2s;
}
.ts-step:hover .ts-num { transform: scale(1.1); box-shadow: 0 0 0 8px var(--sky-bg), 0 8px 24px rgba(14,165,233,.4); }
.ts-card {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 18px; text-align: left;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .25s, border-color .25s, box-shadow .25s;
  height: calc(100% - 68px);
}
.ts-step:hover .ts-card { transform: translateY(-4px); border-color: rgba(14,158,158,.35); box-shadow: 0 8px 24px rgba(14,158,158,.1); }
.ts-icon { display: flex; align-items: center; margin-bottom: 10px; }
.ts-icon svg { width: 28px; height: 28px; color: var(--sky-dk); }
.ts-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; color: var(--sky-dk);
  background: var(--sky-bg); border: 1px solid rgba(14,165,233,.25);
  border-radius: 50px; padding: 3px 10px; margin-bottom: 10px;
}
.ts-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.ts-card p  { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
.ts-bullets { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ts-bullets li { font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; gap: 6px; }
.ts-bullets li::before { content: '→'; color: var(--teal); font-weight: 900; flex-shrink: 0; }
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2,1fr); gap: 20px; padding-top: 0; } .timeline::before { display: none; } }
@media (max-width: 540px)  { .timeline { grid-template-columns: 1fr; } }

/* ── RAZONES ── */
#por-que { background: var(--teal-bg); }
.razones-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.razon {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.razon:hover { transform: translateY(-4px); border-color: rgba(14,158,158,.4); box-shadow: 0 8px 24px rgba(14,158,158,.1); }
.razon-icon {
  width: 52px; height: 52px; background: var(--teal-bg);
  border: 1px solid rgba(14,158,158,.2); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.razon-icon svg { width: 24px; height: 24px; color: var(--teal-dk); }
.razon h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.razon p  { font-size: 14px; color: var(--text-2); line-height: 1.65; }

/* ── DESCARGA ── */
#descarga { background: transparent; }
.descarga-card {
  background: linear-gradient(135deg, var(--teal-bg), rgba(224,247,247,.5));
  border: 1px solid rgba(14,158,158,.18); border-radius: 32px;
  padding: 72px 48px; text-align: center; position: relative; overflow: hidden;
}
.descarga-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(14,158,158,.12), transparent 60%);
  pointer-events: none;
}
.descarga-card .section-sub { margin: 0 auto 48px; }
.store-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.store-btn {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--glass-bg); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  padding: 16px 28px; border-radius: 16px; min-width: 190px;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.store-btn:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 8px 24px rgba(14,158,158,.15); }
.store-btn.active { border-color: var(--teal); box-shadow: 0 0 24px rgba(14,158,158,.2); }
.store-icon { font-size: 30px; }
.store-text small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.store-text strong { font-size: 19px; font-weight: 800; }
.store-btn.coming { opacity: .5; cursor: default; }
.store-btn.coming:hover { transform: none; border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.07); }

/* ── DIVIDER ── */
.divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); position: relative; z-index: 1; }

/* ── FOOTER ── */
footer {
  position: relative; z-index: 1;
  background: var(--glass-bg); border-top: 1px solid var(--border);
  padding: 60px 24px 32px;
}
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; margin-bottom: 48px; }
.footer-brand h3 { font-size: 22px; font-weight: 900; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.footer-brand p { font-size: 14px; color: var(--text-2); max-width: 260px; }
.footer-col h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--teal-dk); margin-bottom: 18px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--text-2); text-decoration: none; font-size: 14px; transition: color .2s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  max-width: 1100px; margin: 0 auto;
  border-top: 1px solid var(--border); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}

/* ── HERO BANNER ── */
.hero-banner { width: 100%; max-width: 900px; border-radius: 24px; overflow: hidden; margin: 48px auto 0; box-shadow: 0 12px 40px rgba(0,0,0,.1); animation: fadeUp .8s .9s ease both; }
.hero-banner img { width: 100%; height: auto; display: block; }

/* ── TESTIMONIOS ── */
#testimonios { background: var(--sky-bg); }
.testimonios-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.testimonio {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.testimonio:hover { transform: translateY(-4px); border-color: rgba(14,158,158,.4); box-shadow: 0 8px 24px rgba(14,158,158,.1); }
.testimonio-estrellas { font-size: 18px; margin-bottom: 14px; }
.testimonio-texto { font-size: 15px; color: var(--text-2); line-height: 1.7; margin-bottom: 18px; font-style: italic; }
.testimonio-autor { display: flex; align-items: center; gap: 12px; }
.testimonio-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-lt)); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.testimonio-nombre { font-size: 14px; font-weight: 800; }
.testimonio-servicio { font-size: 12px; color: var(--sky-dk); font-weight: 600; }

/* ── FAQ ── */
#faq { background: var(--sky-bg); }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.faq-pregunta {
  width: 100%; background: none; border: none; color: var(--text);
  font-family: inherit; font-size: 16px; font-weight: 700;
  text-align: left; padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; gap: 12px; transition: background .2s;
}
.faq-pregunta:hover { background: var(--surface-alt); }
.faq-flecha { font-size: 20px; transition: transform .3s; flex-shrink: 0; }
.faq-item.abierto .faq-flecha { transform: rotate(180deg); }
.faq-respuesta { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; font-size: 14px; color: var(--text-2); line-height: 1.7; padding: 0 24px; }
.faq-item.abierto .faq-respuesta { max-height: 200px; padding: 0 24px 20px; }

/* ── WHATSAPP FLOTANTE ── */
.wa-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  display: flex; align-items: center; gap: 12px;
  background: #25D366; color: white; text-decoration: none;
  font-family: inherit; font-size: 15px; font-weight: 800;
  padding: 14px 22px; border-radius: 50px;
  box-shadow: 0 8px 28px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s; animation: fadeUp .8s 1s ease both;
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(37,211,102,.55); }
.wa-float svg { width: 24px; height: 24px; flex-shrink: 0; }
@media (max-width: 640px) { .wa-float span { display: none; } .wa-float { padding: 16px; border-radius: 50%; } }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(40px) scale(0.95); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .nav-links { display: none; }
  nav { padding: 14px 20px; }
  section { padding: 72px 20px; }
  .descarga-card { padding: 48px 24px; }
}

/* ── STATS STRIP ── */
.stats-section { padding: 0 24px 80px; background: var(--sky-bg); }
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.stat-item { background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 20px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.stat-num-big { display: block; font-size: clamp(26px, 4vw, 38px); font-weight: 900; color: var(--teal); letter-spacing: -1px; margin-bottom: 6px; }
.stats-strip .stat-item:nth-child(2) .stat-num-big,
.stats-strip .stat-item:nth-child(4) .stat-num-big { color: var(--sky); }
.stat-label-sm { font-size: 13px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } }

/* ── PROFESIONALES ── */
#profesionales { background: transparent; }
.profesionales-card {
  background: linear-gradient(135deg, var(--coral-bg), rgba(255,240,235,.5));
  border: 1px solid rgba(244,132,95,.2); border-radius: 32px;
  padding: 64px 48px; display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: center; position: relative; overflow: hidden;
}
.profesionales-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(244,132,95,.08), transparent 60%);
  pointer-events: none;
}
.prof-content .section-label { color: var(--coral); }
.prof-content .section-sub { margin-bottom: 32px; }
.prof-beneficios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 36px; }
.prof-beneficio {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.prof-beneficio span { font-size: 20px; }
.btn-coral {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--coral); color: white;
  font-family: inherit; font-weight: 800; font-size: 16px;
  padding: 16px 32px; border-radius: 50px;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(244,132,95,.3);
  transition: transform .2s, box-shadow .2s;
}
.btn-coral:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(244,132,95,.45); }
.prof-stats { display: flex; flex-direction: column; gap: 20px; min-width: 180px; }
.prof-stat { background: var(--glass-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.prof-num { display: block; font-size: 32px; font-weight: 900; color: var(--coral); letter-spacing: -1px; margin-bottom: 4px; }
.prof-label { font-size: 12px; color: var(--muted); font-weight: 600; }
@media (max-width: 900px) { .profesionales-card { grid-template-columns: 1fr; padding: 48px 32px; } .prof-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; } .prof-stat { flex: 1; min-width: 130px; } }
@media (max-width: 640px) { .profesionales-card { padding: 40px 24px; } .prof-beneficios { grid-template-columns: 1fr; } }

/* ── ANDROID NOTIFY ── */
.android-notify { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.android-notify p { font-size: 14px; color: var(--text-2); }
.notify-form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.notify-input {
  background: var(--glass-bg); border: 1px solid var(--border);
  border-radius: 50px; padding: 12px 20px; color: var(--text);
  font-family: inherit; font-size: 14px; outline: none; width: 240px;
  transition: border-color .2s, box-shadow .2s;
}
.notify-input::placeholder { color: var(--muted); }
.notify-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-bg); }
.btn-notify {
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text); font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 12px 24px; border-radius: 50px; cursor: pointer;
  transition: background .2s, transform .2s, border-color .2s;
}
.btn-notify:hover { background: var(--border); border-color: var(--border-strong); transform: translateY(-1px); }

/* ── FOOTER SOCIAL ── */
.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.social-link {
  width: 34px; height: 34px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--text-2);
  transition: background .2s, transform .2s, border-color .2s, color .2s;
}
.social-link:hover { background: var(--teal-bg); border-color: rgba(14,158,158,.25); transform: translateY(-2px); color: var(--teal-dk); }

/* ── SPECULAR OVERLAY ── */
.spec-overlay { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 10; opacity: 0; transition: opacity .2s ease; }

/* ── TILT BASE ── */
.servicio-card, .razon, .testimonio, .ts-card, .stat-item, .prof-stat { will-change: transform; }
.mini-card { will-change: transform; }

/* ── FLOAT HERO CARDS ── */
@keyframes float-card { from { transform: translateY(0px); } to { transform: translateY(-10px); } }

/* ── GRADIENT BORDER EN HERO-BADGE ── */
.hero-badge {
  background: linear-gradient(var(--dark), var(--dark)) padding-box,
              linear-gradient(135deg, var(--teal), var(--teal-lt), var(--coral)) border-box;
  border: 1px solid transparent;
  animation: borderPulse 4s ease infinite;
}
@keyframes borderPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.06); } }

/* ── SHINE EN BTN-PRIMARY ── */
.btn-primary, .btn-coral { overflow: hidden; }
.btn-primary::after, .btn-coral::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::after, .btn-coral:hover::after { left: 150%; }

/* ── HERO BANNER PARALLAX ── */
.hero-banner { transition: transform .08s linear; }

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--teal-lt), var(--coral));
  z-index: 9999; transition: width .06s linear;
  box-shadow: 0 0 10px rgba(14,158,158,.5);
  border-radius: 0 2px 2px 0;
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
  border-radius: 8px; transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover { background: var(--surface-alt); }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 640px) { .nav-hamburger { display: flex; } }

/* ── MOBILE NAV DRAWER ── */
.mobile-nav {
  position: fixed; top: 0; right: -100%;
  width: min(320px, 85vw); height: 100dvh;
  background: rgba(248,250,251,.98);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  z-index: 200; transition: right .38s cubic-bezier(.4,0,.2,1);
  padding: 80px 32px 48px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0;
  box-shadow: -8px 0 32px rgba(0,0,0,.08);
}
.mobile-nav.open { right: 0; }
.mobile-nav ul { list-style: none; display: flex; flex-direction: column; }
.mobile-nav ul li a {
  display: block; color: var(--text); text-decoration: none;
  font-size: 22px; font-weight: 700; padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: color .2s, padding-left .25s;
}
.mobile-nav ul li a:hover { color: var(--teal-dk); padding-left: 10px; }
.mobile-nav-close {
  position: absolute; top: 20px; right: 20px;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text); font-size: 16px; font-weight: 700;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.mobile-nav-close:hover { background: var(--border); transform: rotate(90deg); }
.mobile-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(30,41,59,.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 199; opacity: 0; pointer-events: none; transition: opacity .38s;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: all; }
.mobile-nav-cta { margin-top: auto; padding-top: 32px; }
.mobile-nav-cta a {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--teal); color: white; text-decoration: none;
  font-weight: 800; font-size: 16px; padding: 16px 24px; border-radius: 50px;
  box-shadow: 0 8px 24px rgba(14,158,158,.35);
  transition: background .2s, transform .2s;
}
.mobile-nav-cta a:hover { background: var(--teal-dk); transform: translateY(-2px); }

/* ── COLOR-CODED SERVICE CARDS ── */
.servicios-grid .servicio-card:nth-child(1):hover { border-color: var(--teal);  box-shadow: 0 8px 32px rgba(14,158,158,.12); }
.servicios-grid .servicio-card:nth-child(2):hover { border-color: #22c55e;      box-shadow: 0 8px 32px rgba(34,197,94,.12); }
.servicios-grid .servicio-card:nth-child(3):hover { border-color: #f97316;      box-shadow: 0 8px 32px rgba(249,115,22,.12); }
.servicios-grid .servicio-card:nth-child(4):hover { border-color: #a855f7;      box-shadow: 0 8px 32px rgba(168,85,247,.12); }
.servicios-grid .servicio-card:nth-child(5):hover { border-color: var(--coral); box-shadow: 0 8px 32px rgba(244,132,95,.12); }

/* ── FIX BUTTON SHINE ── */
.btn-primary, .btn-coral { position: relative; }

/* ── SOCIAL LINK SVG ── */
.social-link { font-size: 0; }
.social-link svg { display: block; }

/* ── SERVICE CARD COLOR-CODED SVG ICONS ── */
.servicios-grid .servicio-card:nth-child(2) .servicio-icon { background: linear-gradient(135deg,rgba(74,222,128,.12),rgba(74,222,128,.04)); border-color: rgba(74,222,128,.18); }
.servicios-grid .servicio-card:nth-child(2) .servicio-icon svg { color: #16a34a; }
.servicios-grid .servicio-card:nth-child(3) .servicio-icon { background: linear-gradient(135deg,rgba(251,146,60,.12),rgba(251,146,60,.04)); border-color: rgba(251,146,60,.18); }
.servicios-grid .servicio-card:nth-child(3) .servicio-icon svg { color: #ea580c; }
.servicios-grid .servicio-card:nth-child(4) .servicio-icon { background: linear-gradient(135deg,rgba(192,132,252,.12),rgba(192,132,252,.04)); border-color: rgba(192,132,252,.18); }
.servicios-grid .servicio-card:nth-child(4) .servicio-icon svg { color: #9333ea; }
.servicios-grid .servicio-card:nth-child(5) .servicio-icon { background: linear-gradient(135deg,rgba(244,132,95,.12),rgba(244,132,95,.04)); border-color: rgba(244,132,95,.18); }
.servicios-grid .servicio-card:nth-child(5) .servicio-icon svg { color: var(--coral); }

/* ── PROF BENEFICIOS SVG ── */
.prof-beneficio svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--teal-dk); }

/* ── TOUCH RIPPLE ── */
@keyframes ripple-anim { from { transform: scale(0); opacity: 1; } to { transform: scale(4); opacity: 0; } }

/* ── MOBILE TOUCH ACTIVE STATES ── */
@media (hover: none) {
  .servicio-card:active, .razon:active, .testimonio:active, .ts-card:active, .stat-item:active {
    transform: scale(0.97); border-color: rgba(14,158,158,.5);
    transition: transform .12s ease, border-color .12s ease !important;
  }
  .mini-card:active { transform: scale(0.93); transition: transform .12s ease !important; }
  .btn-primary:active { transform: scale(0.94) !important; box-shadow: 0 4px 16px rgba(14,158,158,.4) !important; transition: transform .1s ease, box-shadow .1s ease !important; }
  .btn-ghost:active { transform: scale(0.94) !important; background: var(--surface-alt) !important; transition: transform .1s ease !important; }
  .btn-coral:active { transform: scale(0.94) !important; transition: transform .1s ease !important; }
  .store-btn:active { transform: scale(0.96) !important; border-color: var(--teal) !important; transition: transform .1s ease !important; }
  .servicio-card, .razon, .testimonio, .mini-card { position: relative; overflow: hidden; }
}

/* ── ACCESIBILIDAD: solo para lectores de pantalla ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── ACCESIBILIDAD: skip-link ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--teal);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ── ACCESIBILIDAD: foco visible por teclado (no afecta clic con ratón) ── */
:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── ACCESIBILIDAD: respetar prefers-reduced-motion (WCAG 2.3.3) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .orb, .mini-card, .bg-orbs, .hero-banner { animation: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ── NUESTRO EQUIPO ────────────────────────────────────────────── */
#equipo { background: var(--teal-bg); }
.equipo-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; margin-top: 40px; }
.equipo-foto img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 16px 40px rgba(0,0,0,.12); display: block; }
.equipo-puntos { display: flex; flex-direction: column; gap: 22px; }
.equipo-punto { display: flex; gap: 14px; align-items: flex-start; }
.equipo-check { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-top: 2px; }
.equipo-punto strong { display: block; color: var(--text-1, #1E293B); font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.equipo-punto span { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.equipo-puntos .btn-primary { margin-top: 10px; align-self: flex-start; }
@media (max-width: 800px) { .equipo-wrap { grid-template-columns: 1fr; gap: 28px; } }

/* ── Iconos reales de las tiendas (botones de descarga) ── */
.store-icon-img { width: 38px; height: 38px; object-fit: contain; border-radius: 9px; flex: 0 0 auto; }
.store-btn.coming .store-icon-img { opacity: .6; }

.btn-store-icon { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; flex: 0 0 auto; }

/* ── Botón flotante: Solicitar servicio (apilado sobre WhatsApp) ── */
.solicitar-float {
  position: fixed; bottom: 92px; right: 28px; z-index: 999;
  display: flex; align-items: center; gap: 12px;
  background: var(--teal); color: #fff; text-decoration: none;
  font-family: inherit; font-size: 15px; font-weight: 800;
  padding: 14px 22px; border-radius: 50px;
  box-shadow: 0 8px 28px rgba(14,158,158,.45);
  transition: transform .2s, box-shadow .2s; animation: fadeUp .8s 1.1s ease both;
}
.solicitar-float:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(14,158,158,.55); background: var(--teal-dk); }
.solicitar-float svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 640px) {
  .solicitar-float span { display: none; }
  .solicitar-float { padding: 16px; border-radius: 50%; bottom: 92px; }
}

/* nota de verificación Q25 en sección profesionales */
.prof-nota { margin-top: 14px; font-size: 13px; color: var(--text-2); line-height: 1.5; max-width: 440px; }
.prof-nota strong { color: var(--text-1, #1E293B); font-weight: 700; }