/*
  Punto de partida MÍNIMO para botones — growmedical-boilerplate (Grow Medical)
  Esto NO trae una forma de botón — a propósito. La forma (radio de esquina, y cualquier
  otra cosa que no esté aquí) sale de la identidad de ESTE cliente, decidida en fresco cada
  proyecto. Revisa technical-patterns.md → "Versatilidad" → "Botones" antes de definir
  --btn-radius, y busca inspiración actual en CodePen/Dribbble/Awwwards/Behance para este
  proyecto en particular.

  Lo único genuinamente "resuelto" aquí es mecánica/accesibilidad: la transición de hover,
  el estado :focus-visible, el objetivo táctil del wa-float.
  NO define paleta del proyecto — solo el verde de WhatsApp va fijo (regla de marca externa,
  ver SKILL.md sección 3: "Botones de contacto"). Todo lo demás sale de las variables
  que cada proyecto ya define en su propio :root.

  Variables que el proyecto debe tener definidas ANTES de cargar este archivo:
    --acento             color de acento de ESTE proyecto (botón de llamada)
    --acento-oscuro      variante oscura del acento, para :hover (opcional, cae a --acento)
    --acento-contraste   color de texto sobre el acento (opcional, cae a #fff)
    --ink                color de texto principal (opcional, para el botón outline)
    --btn-radius         GEOMETRÍA del botón — a propósito SIN fallback a píldora (era
                          `var(--radius-lg, 999px)`, y ese default de píldora "se veía bien"
                          sin que nadie lo decidiera, el mismo problema que ya se corrigió en
                          los esqueletos de sections.md). Si el proyecto no lo define, el
                          botón se ve cuadrado sin estilizar — eso es intencional, para que
                          sea visible que falta una decisión en vez de verse "terminado" por
                          accidente. Define esto a propósito para ESTE cliente (ver
                          technical-patterns.md → "Versatilidad" → "Botones").

  Requiere Open Props cargado antes para sombras/easings reales — ver technical-patterns.md
  → "Tokens de diseño (Open Props)". Si no está cargado, cae a valores de respaldo razonables.
*/

:root{
  --btn-pad-y: 0.85em;
  --btn-pad-x: 1.4em;
  --btn-gap: 0.55em;
  --btn-font-size: 1rem;
  --btn-ease: var(--ease-elastic-3, cubic-bezier(.2,.8,.2,1));
  --btn-shadow: var(--shadow-2, 0 4px 14px rgba(0,0,0,.12));
  --btn-shadow-hover: var(--shadow-3, 0 10px 24px rgba(0,0,0,.16));

  /* Fijos — colores de marca/convención externa, NO cambian entre proyectos */
  --whatsapp-green: #25D366;
  --whatsapp-green-dark: #1DA851;
  --star-yellow: #FBBC04; /* amarillo real de Google para calificación por estrellas */
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  font-size:var(--btn-font-size);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .25s var(--btn-ease), box-shadow .25s var(--btn-ease), background-color .2s ease;
}
.btn:hover{ transform:translateY(-2px) scale(1.015); box-shadow:var(--btn-shadow-hover); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn svg, .btn img{ width:1.2em; height:1.2em; flex:none; }
.btn:focus-visible{ outline:2.5px solid var(--acento, currentColor); outline-offset:2px; }

/* Llamar — SIEMPRE el color de acento de este proyecto, nunca un color fijo */
.btn-call, .phone-link{
  background:var(--acento);
  color:var(--acento-contraste, #fff);
  box-shadow:var(--btn-shadow);
}
.btn-call:hover, .phone-link:hover{ background:var(--acento-oscuro, var(--acento)); }

/* WhatsApp — SIEMPRE verde, sin importar la paleta del proyecto */
.btn-whatsapp{
  background:var(--whatsapp-green);
  color:#fff;
  box-shadow:var(--btn-shadow);
}
.btn-whatsapp:hover{ background:var(--whatsapp-green-dark); }

/* Secundario/outline — para el botón que solo muestra el número como texto plano junto a uno primario */
.btn-outline{
  background:transparent;
  border:1.5px solid currentColor;
  color:var(--ink, inherit);
  box-shadow:none;
}
.btn-outline:hover{ background:rgba(0,0,0,.04); box-shadow:none; transform:none; }

/* WhatsApp flotante global (todas las páginas) — ver sections.md */
.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:60px;
  height:60px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--whatsapp-green);
  box-shadow:var(--shadow-4, 0 14px 30px rgba(0,0,0,.22));
  z-index:80;
  transition:transform .2s var(--btn-ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float:focus-visible{ outline:2.5px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active, .wa-float, .wa-float:hover{ transition:none; transform:none; }
}
.wa-float svg, .wa-float img{ width:32px; height:32px; }
@media (max-width:600px){
  .wa-float{ width:52px; height:52px; right:16px; bottom:16px; }
  .wa-float svg, .wa-float img{ width:28px; height:28px; }
}