/* Close Connect Landing System · components.css
   Botones (7 variantes · 3 tamaños), loader y footer obligatorio. */

/* ---------- Lista de acciones ---------- */
.cc-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@keyframes cc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.cc-actions > li { animation: cc-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.cc-actions > li:nth-child(1) { animation-delay: 0.05s; }
.cc-actions > li:nth-child(2) { animation-delay: 0.12s; }
.cc-actions > li:nth-child(3) { animation-delay: 0.19s; }
.cc-actions > li:nth-child(n + 4) { animation-delay: 0.26s; }

/* ---------- Botón base ---------- */
.cc-btn {
  --btn-h: 56px;
  --btn-fs: 1rem;
  --btn-px: 22px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 var(--btn-fs)/1.2 var(--cc-font);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cc-btn[data-size="sm"] { --btn-h: 44px; --btn-fs: 0.9375rem; --btn-px: 18px; }
.cc-btn[data-size="md"] { --btn-h: 50px; --btn-fs: 1rem; --btn-px: 20px; }
.cc-btn[data-size="lg"] { --btn-h: 56px; --btn-fs: 1.0625rem; --btn-px: 24px; }

.cc-btn__icon { display: inline-flex; flex: none; width: 22px; height: 22px; }
.cc-btn__icon svg { width: 100%; height: 100%; display: block; }
.cc-btn__label { min-width: 0; overflow-wrap: anywhere; }

.cc-btn:hover { transform: translateY(-2px); }
.cc-btn:active { transform: translateY(0) scale(0.985); }
.cc-btn:focus-visible {
  outline: 3px solid var(--cc-button);
  outline-offset: 3px;
}

/* ---------- Variantes ---------- */
.cc-btn[data-variant="solid"] {
  background: var(--cc-button);
  color: var(--cc-button-text);
  box-shadow: 0 10px 24px -10px var(--cc-button);
}
.cc-btn[data-variant="solid"]:hover { box-shadow: 0 14px 28px -10px var(--cc-button); }

.cc-btn[data-variant="outline"] {
  background: transparent;
  color: var(--cc-button);
  border-color: var(--cc-button);
}
.cc-btn[data-variant="outline"]:hover { background: var(--cc-surface); }

.cc-btn[data-variant="soft"] {
  background: var(--cc-surface);
  background: color-mix(in srgb, var(--cc-accent) 16%, #ffffff);
  color: var(--cc-button);
  border-color: color-mix(in srgb, var(--cc-accent) 26%, #ffffff);
}
.cc-btn[data-variant="soft"]:hover {
  background: color-mix(in srgb, var(--cc-accent) 24%, #ffffff);
  box-shadow: 0 10px 22px -14px var(--cc-button);
}

.cc-btn[data-variant="glass"] {
  background: var(--cc-surface);
  color: var(--cc-text);
  border-color: var(--cc-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.cc-btn[data-variant="minimal"] {
  background: transparent;
  color: var(--cc-text);
  border-color: transparent;
  border-bottom-color: var(--cc-border);
  border-radius: 8px;
}
.cc-btn[data-variant="minimal"]:hover { border-bottom-color: var(--cc-button); }

.cc-btn[data-variant="gradient"] {
  background: linear-gradient(135deg, var(--cc-accent), var(--cc-button));
  color: var(--cc-button-text);
  box-shadow: 0 10px 24px -12px var(--cc-button);
}

/* Neumorphic: el botón comparte el color de la página y se "extruye" con dos sombras.
   La sombra oscura se tiñe con el color del botón; el icono usa ese color de marca. */
.cc-btn[data-variant="neumorphic"] {
  --neu-dark: rgba(0, 0, 0, 0.16);
  --neu-dark: color-mix(in srgb, var(--cc-button) 26%, transparent);
  --neu-light: #ffffff;
  background: var(--cc-bg-color);
  color: var(--cc-text);
  border-color: transparent;
  box-shadow: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light);
}
.cc-btn[data-variant="neumorphic"] .cc-btn__icon { color: var(--cc-button); }
.cc-btn[data-variant="neumorphic"]:hover {
  transform: none;
  box-shadow: 9px 9px 20px var(--neu-dark), -9px -9px 20px var(--neu-light);
}
.cc-btn[data-variant="neumorphic"]:active {
  transform: none;
  box-shadow: inset 5px 5px 12px var(--neu-dark), inset -5px -5px 12px var(--neu-light);
}

/* ---------- Loader (breve, no bloqueante) ---------- */
.cc-loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--cc-bg-color, #fff);
  transition: opacity 0.35s ease, visibility 0.35s ease;
  /* Fallback sin JS: se oculta solo a los 2.2 s */
  animation: cc-loader-failsafe 0.01s linear 2.2s forwards;
}
html.cc-ready .cc-loader { opacity: 0; visibility: hidden; pointer-events: none; }
html.cc-no-loader .cc-loader { display: none; }

.cc-loader__mark { fill: var(--cc-button); animation: cc-pulse 1s ease-in-out infinite; }

@keyframes cc-pulse {
  0%, 100% { transform: scale(0.88); opacity: 0.7; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes cc-loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- Footer permanente de Close Connect ---------- */
.cc-footer {
  flex: none;
  display: flex;
  justify-content: center;
  padding: 18px 24px max(22px, env(safe-area-inset-bottom));
}
.cc-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--cc-muted);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.cc-footer__link:not([href]) { pointer-events: none; cursor: default; }
.cc-footer__link[href]:hover { opacity: 1; color: var(--cc-text); text-decoration: underline; text-underline-offset: 3px; }
.cc-footer__link:focus-visible { outline: 2px solid var(--cc-button); outline-offset: 2px; }
.cc-footer__mark { height: 16px; width: auto; display: block; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .cc-actions > li { animation: none; }
  .cc-loader { transition: none; }
  .cc-loader__mark { animation: none; }
  .cc-btn, .cc-footer__link { transition: none; }
  .cc-btn:hover, .cc-btn:active { transform: none; }
}