/* CREA Studio · ajustes 18-oct-2026 (aditivo, no toca títulos ni hero). */

/* 0) Fondo negro detrás de la página (barra y rebote del celular, como en la home). */
html { background-color: #030303; }

/* 1) Intro: se puede saltar con un toque o clic. */
.ct-intro { pointer-events: auto !important; cursor: pointer; }

/* 2) WhatsApp flotante igual en todas las páginas: el botón global (.cg-wabar),
      que ya salía en celular, ahora también se muestra en PC. Se ocultan los viejos. */
body.crea-public a.float[href*="wa.me"],
body.crea-public a.float-chat[href*="wa.me"] { display: none !important; }
@media (min-width: 768px) {
  .cg-wabar {
    display: grid; place-items: center; position: fixed; right: 22px; bottom: 22px; z-index: 4000;
    width: 60px; height: 60px; border-radius: 50%; background: #25d366; text-decoration: none;
    box-shadow: 0 10px 26px rgba(0,0,0,.32); transition: transform .2s ease;
  }
  .cg-wabar:hover { transform: translateY(-2px) scale(1.06); }
  .cg-wabar:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}
.cg-wabar { animation: cg-wa-pulse 2.6s ease-out 3.2s infinite; }
@keyframes cg-wa-pulse {
  0%   { box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce) { .cg-wabar { animation: none; } }

/* 3) Redes sociales: botones redondeados como en el resto del sitio. */
body.crea-public .btn-black { border-radius: 999px !important; }

/* 4) Fotografía: dos botones en el hero (rojo principal + borde). */
.cg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cg-hero-actions .btn-red, .cg-hero-actions .btn-outline { border-radius: 999px !important; padding: 16px 24px; font-size: 13px; }
.cg-hero-actions .btn-red:hover { background: #fff; color: #111; border-color: #fff; }
@media (max-width: 767px) {
  .cg-hero-actions { flex-direction: column; align-items: stretch; }
  .cg-hero-actions .btn-red, .cg-hero-actions .btn-outline { width: 100%; justify-content: center; }
}