/* ============================================================
   RAMFER — Botones glass + HoverGlow + Ripple
   Incluir en todas las páginas: <link rel="stylesheet" href="css/btn-effects.css">
   ============================================================ */

/* ── Estilo glass en subpáginas ── */

.btn-primary, .btn-secondary, .btn-bi, .btn-dark,
.btn-blue, .btn-outline-dark, .cf-submit, .pf-cta,
.nav-cta, .mob-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Glow que sigue el cursor */
.btn-primary::before, .btn-secondary::before, .btn-bi::before,
.btn-dark::before, .btn-blue::before, .btn-outline-dark::before,
.cf-submit::before, .pf-cta::before, .nav-cta::before, .mob-cta::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 68%);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 380ms cubic-bezier(0.25,1,0.5,1), opacity 380ms ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  left: var(--glow-x, 50%);
  top:  var(--glow-y, 50%);
}
.btn-primary:hover::before, .btn-bi:hover::before,
.btn-dark:hover::before, .btn-blue:hover::before,
.cf-submit:hover::before, .pf-cta:hover::before,
.nav-cta:hover::before, .mob-cta:hover::before {
  transform: translate(-50%,-50%) scale(1.4);
  opacity: 1;
}
.btn-secondary:hover::before {
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 68%);
  transform: translate(-50%,-50%) scale(1.4);
  opacity: 1;
}
.btn-outline-dark:hover::before {
  background: radial-gradient(circle, rgba(13,31,50,0.09) 0%, transparent 68%);
  transform: translate(-50%,-50%) scale(1.4);
  opacity: 1;
}

/* Asegura que el contenido quede sobre el glow */
.btn-primary > *, .btn-secondary > *, .btn-bi > *,
.btn-dark > *, .btn-blue > *, .btn-outline-dark > *,
.cf-submit > *, .pf-cta > *, .nav-cta > *, .mob-cta > * {
  position: relative;
  z-index: 1;
}

/* ── Checklist + formulario — compartido todas las páginas ── */
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cf-group { margin-bottom:12px; }
.cf-group label { display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#64748b; margin-bottom:6px; }
.cf-group input, .cf-group textarea, .cf-group select { width:100%; padding:11px 13px; background:#fff; border:1.5px solid #e2e8f0; font-size:14px; color:#0d1f32; outline:none; border-radius:8px; font-family:'IBM Plex Sans',sans-serif; transition:border-color 160ms, box-shadow 160ms; }
.cf-group input:focus, .cf-group textarea:focus, .cf-group select:focus { border-color:#007df1; box-shadow:0 0 0 3px rgba(0,125,241,.10); }
.cf-group input::placeholder, .cf-group textarea::placeholder { color:#c0cad6; }
.cf-group textarea { height:88px; resize:vertical; }
.cf-phone-row { display:grid; grid-template-columns:108px 1fr; gap:8px; }
.cf-phone-row select, .cf-phone-row input { width:100% !important; }
.cf-err { font-size:11px; color:#dc2626; margin-top:3px; display:block; min-height:14px; }
.cf-group input.invalid, .cf-group textarea.invalid { border-color:#dc2626 !important; background:#fff8f8 !important; }
.cf-checks-wrap.invalid .cf-checks-list { outline:2px solid #dc2626; border-radius:12px; }
.cf-submit { width:100%; padding:14px; background:#e75927; color:#fff; font-size:13px; font-weight:600; letter-spacing:.03em; border:none; border-radius:8px; cursor:pointer; margin-top:4px; box-shadow:0 2px 10px rgba(231,89,39,.22); font-family:'IBM Plex Sans',sans-serif; }
.cf-sep { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#64748b; margin-bottom:16px; display:block; padding-bottom:10px; border-bottom:1px solid #e2e8f0; }
/* Checklist premium */
.cf-checks-list { position:relative; display:flex; flex-direction:column; gap:2px; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:12px; padding:6px; overflow:hidden; user-select:none; }
.cf-checks-list .ck-hover-bg { position:absolute; left:0; right:0; background:#e8f0fe; border-radius:8px; pointer-events:none; z-index:0; opacity:0; transition:top 120ms cubic-bezier(.25,1,.5,1), height 120ms cubic-bezier(.25,1,.5,1), opacity 100ms ease; }
.cf-check-item { position:relative; z-index:1; display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; cursor:pointer; transition:background 80ms ease; }
.cf-check-item.is-checked { background:rgba(0,125,241,.08); }
.cf-check-box { flex-shrink:0; width:18px; height:18px; border:1.5px solid #cbd5e1; border-radius:5px; background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color 150ms, background 150ms; }
.cf-check-item.is-checked .cf-check-box { border-color:#e75927; background:#e75927; }
.cf-check-tick { stroke-dasharray:14; stroke-dashoffset:14; transition:stroke-dashoffset 180ms cubic-bezier(.25,1,.5,1); }
.cf-check-item.is-checked .cf-check-tick { stroke-dashoffset:0; }
.cf-check-label { font-size:13px; color:#475569; font-weight:400; transition:color 120ms; text-transform:none; letter-spacing:0; }
.cf-check-item.is-checked .cf-check-label { color:#0d1f32; font-weight:600; }
@media (max-width:640px) { .cf-row { grid-template-columns:1fr; } .cf-phone-row { grid-template-columns:90px 1fr; } }

/* Ripple al hacer clic */
@keyframes ramfer-btn-ripple {
  to { transform: scale(4); opacity: 0; }
}
.ramfer-ripple-dot {
  position: absolute;
  border-radius: 50%;
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.30);
  transform: scale(0);
  opacity: 1;
  animation: ramfer-btn-ripple 520ms ease-out forwards;
  pointer-events: none;
  z-index: 2;
  margin-left: -32px;
  margin-top: -32px;
}
.btn-outline-dark .ramfer-ripple-dot { background: rgba(13,31,50,0.10); }

/* Hover mejorado — btn-primary (naranja) */
.btn-primary {
  transition: background 220ms ease, box-shadow 300ms ease, transform 200ms ease;
}
.btn-primary:hover {
  box-shadow: 0 8px 28px rgba(231,89,39,0.46), 0 2px 8px rgba(231,89,39,0.20);
  transform: translateY(-2px) scale(1.015);
}
.btn-primary:active { transform: translateY(0) scale(0.985); transition: all 80ms ease; }

/* Hover mejorado — btn-bi (azul BI) */
.btn-bi {
  transition: background 220ms ease, border-color 220ms ease, box-shadow 300ms ease, transform 200ms ease;
}
.btn-bi:hover {
  box-shadow: 0 6px 20px rgba(0,125,241,0.28);
  transform: translateY(-2px) scale(1.015);
}
.btn-bi:active { transform: translateY(0) scale(0.985); transition: all 80ms ease; }

/* Hover mejorado — btn-secondary (outline blanco) */
.btn-secondary {
  transition: border-color 200ms, background 200ms, transform 200ms, box-shadow 300ms;
}
.btn-secondary:hover {
  box-shadow: 0 4px 20px rgba(255,255,255,0.10);
  transform: translateY(-2px);
}
.btn-secondary:active { transform: translateY(0); transition: all 80ms ease; }

/* Hover mejorado — btn-dark */
.btn-dark {
  transition: background 200ms ease, transform 200ms ease, box-shadow 300ms ease;
}
.btn-dark:hover {
  box-shadow: 0 6px 20px rgba(13,31,50,0.28);
  transform: translateY(-2px) scale(1.015);
}
.btn-dark:active { transform: translateY(0) scale(0.985); transition: all 80ms ease; }

/* Hover mejorado — btn-blue */
.btn-blue {
  transition: background 200ms ease, box-shadow 300ms ease, transform 200ms ease;
}
.btn-blue:hover {
  box-shadow: 0 8px 24px rgba(0,125,241,0.38);
  transform: translateY(-2px) scale(1.015);
}
.btn-blue:active { transform: translateY(0) scale(0.985); transition: all 80ms ease; }

/* Hover mejorado — btn-outline-dark */
.btn-outline-dark {
  transition: border-color 200ms, background 200ms, transform 200ms;
}
.btn-outline-dark:hover { transform: translateY(-1px); }
.btn-outline-dark:active { transform: translateY(0); transition: all 80ms ease; }

/* Hover mejorado — cf-submit */
.cf-submit {
  transition: background 220ms ease, box-shadow 300ms ease, transform 200ms ease;
}
.cf-submit:hover {
  box-shadow: 0 8px 24px rgba(231,89,39,0.38);
  transform: translateY(-1px);
}
.cf-submit:active { transform: translateY(0) scale(0.985); transition: all 80ms ease; }

/* Hover mejorado — pf-cta / nav-cta */
.pf-cta, .nav-cta, .mob-cta {
  transition: box-shadow 300ms ease, transform 200ms ease, background 200ms ease;
}
.pf-cta:hover, .nav-cta:hover, .mob-cta:hover {
  box-shadow: 0 8px 28px rgba(231,89,39,0.42);
  transform: translateY(-2px) scale(1.015);
}
.pf-cta:active, .nav-cta:active, .mob-cta:active {
  transform: translateY(0) scale(0.985);
  transition: all 80ms ease;
}

/* Flecha interna — micro-anim */
.btn-primary .arr, .btn-dark .arr, .btn-blue .arr {
  transition: transform 200ms ease;
}
.btn-primary:hover .arr, .btn-dark:hover .arr, .btn-blue:hover .arr {
  transform: translateX(4px);
}