/*
   ===============================================================================
        BUTTONS.CSS - Botones Reutilizables (.btn) y Especiales (.cta-button)
   ===============================================================================
*/

   /* ── Boton Especial CTA (Agendar llamada) ── */

.cta-button {
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  /* Antes: 3 variables que no existían en ningún CSS del proyecto
     (--color-brand-highlight-strong/-soft, --color-pure-white), por lo
     que el botón llevaba tiempo sin gradiente en producción. Ahora usa
     los tokens de theme.css (acento de marca nº3, invariante entre temas). */
  background: linear-gradient(135deg, var(--cta-gradient-start), var(--cta-gradient-end));
  color: var(--cta-text-color);
  padding: var(--r-lg) var(--r-xxl); 
  border-radius: var(--r-xl); 
  font-weight: 700;
  font-size: var(--font-size-cta-button); 
  letter-spacing: 0.01em; 
  box-shadow: 0 12px 30px var(--color-cta-shadow);
  /*cursor: pointer; */
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.cta-button:hover { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transform: translateY(-1px); 
  box-shadow: 0 14px 36px var(--color-cta-shadow-hover); 
}

.cta-button:active { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;

  transform: translateY(0); 
  opacity: 0.92; 
}

@media (max-width: 820px) {
  .cta-button { padding: var(--r-md) var(--r-lg); box-shadow: 0 10px 24px var(--cta-shadow-hover-2); }
}

@media (max-width: 640px) {
  .cta-button { padding: var(--r-sm) var(--r-lg); font-size: var(--font-size-cta-button); }
}

@media (max-width: 420px) {

  .cta-button { 
    font-size: var(--font-size-cta-button-mobile); 
    padding: var(--r-sm) var(--r-lg); 
  }
}

@media (max-width: 400px) {
  .cta-button { font-size: 14px; padding: 8px 16px; }
}


/* Sistema genérico de botones (.btn) */

/*
.btn { 
  display: inline-flex; 
  align-items: center; 
  gap: .5rem; 
  padding: .75rem 1.5rem; 
  border-radius: var(--r-xl); 
  font-weight: 500; 
  font-size: .95rem; 
  transition: all var(--t-fast) var(--ease-out); 
  position: relative; 
  overflow: hidden; 
  white-space: nowrap; 
}
*/

.btn { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  align-items: center;  
  padding: .75rem 1.5rem; 
  border-radius: var(--r-xl); 
  font-size: .95rem;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}

.btn::after { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  content: ''; 
  inset: 0; 
  background: var(--shadow-black); 
  opacity: 0; 
  transition: opacity var(--t-fast); 
}

.btn:hover::after { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 1; 
}

.btn:focus-visible { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  outline: 2px solid var(--color-purple-medium); 
  outline-offset: 3px; 
}





.btn-primary { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /*background: linear-gradient(135deg, var(--color-purple-medium), var(--color-purple-dark)); */
  background: linear-gradient(135deg, var(--cta-gradient-start), var(--cta-gradient-end));
  color: var(--cta-text-color); 
  box-shadow: var(--shadow-glow-sm), 0 4px 16px rgba(0,0,0,.3); 
  letter-spacing: 0.01em;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 16px 36px;
  border-radius: var(--r-xl); 
  border: none;
  transition: all 0.3s ease;
}

.btn-primary:hover { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;

  transform: translateY(-2px); 
  box-shadow: var(--shadow-glow), 0 8px 24px rgba(0,0,0,.4); 
}

.btn-primary:active { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: translateY(0); 
}



.btn-secondary {
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: linear-gradient(135deg, var(--cta-gradient-start), var(--cta-gradient-end));
  font-family: var(--font-body);
  color: var(--color-white);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  background: linear-gradient(135deg, var(--cta-gradient-hover-start), var(--cta-gradient-hover-end));
  border-color: var(--color-purple-muted);
  color: var(--color-black);
}

.btn-arrow::after { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  content: ' →'; 
}


.btn-sm { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  padding: .5rem 1.1rem; 
  font-size: .85rem; 
}

/* Botón Comunidad */
.btn-full { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  width: 100%; 
  justify-content: center; 
}

/* Botón Landing */
.btn-arrow { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  transition: transform var(--t-fast); 
}

.btn:hover .btn-arrow { 
  display: inline-flex; /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  transform: translateX(4px); 
}

  /* ── LINKS ── */


.text-link-primary {
  /*display: inline-flex;*/ /* Cambiamos block por inline-flex para que solo ocupen su espacio */
  display: inline-block;
  align-items: center;
  justify-content: center;
  /*cursor: pointer;*/
  text-decoration: none;
  background: linear-gradient(135deg, var(--cta-gradient-start), var(--cta-gradient-end));
  color: var(--cta-text-color); 
  box-shadow: var(--shadow-glow-sm), 0 4px 16px rgba(0,0,0,.3); 
  letter-spacing: 0.01em;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  padding: 16px 36px;
  border-radius: var(--r-xl); 
  border: none;
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
  backface-visibility: hidden;
}

.text-link-primary:hover { 
  transition: all 0.3s ease;
  /*transform: translateY(-2px); */
  box-shadow: var(--shadow-glow), 0 8px 24px rgba(0,0,0,.4); 
  display: inline-block;
}

.text-link-primary:active { 
  transform: translateY(0); 
}


/* ── Toggle de tema claro/oscuro ──────────────────────────────────────── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-border);
  background: var(--color-beige-base);
  cursor: pointer;
  font-size: 1.1rem;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--color-white);
  transform: scale(1.05);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--color-purple-medium);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .theme-toggle-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}


.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1px solid var(--color-border);
  background: var(--color-beige-base);
  cursor: pointer;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--color-white);
  transform: scale(1.05);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--color-purple-medium);
  outline-offset: 2px;
}

/* Fondo invertido en tema oscuro */
[data-theme="dark"] .theme-toggle-btn {
  background: var(--color-purple-deep);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .theme-toggle-btn:hover {
  background: var(--color-black);
}

/* Solo un icono visible a la vez, según el tema activo */
.theme-icon { display: none; }
.theme-toggle-btn .theme-icon-moon { display: inline-flex; }
[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { display: inline-flex; }

@media (max-width: 640px) {
  .theme-toggle-btn { width: 36px; height: 36px; }
}