/* styles extraídos de quienes-somos.html */
.contact-block {
  transition: transform .25s ease, box-shadow .25s ease, width .2s ease, left .2s ease, top .2s ease;
}

/* Social circular buttons */
.social-circle {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.social-circle:hover { transform: translateY(-4px) scale(1.05); }
.social-circle.facebook { background:#1877F2; }
.social-circle.whatsapp { background:#25D366; }
.social-circle.instagram { background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af); }
.social-row { display:flex; gap:12px; justify-content:center; align-items:center; }

@media (max-width:640px) {
  .social-circle { width:40px; height:40px; font-size:15px; }
}

.contact-floating {
  position: fixed !important;
  left: 24px;
  width: 340px;
  max-width: calc(36vw);
  /* Debajo del header (Tailwind z-50 => 50). Usar menor para no taparlo. */
  z-index: 40;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(6,95,84,0.14);
  transition: top 0.3s ease-out;
}
@media (min-width: 1280px) {
  .contact-floating { width: 380px; }
}
@media (max-width: 1023px) {
  .contact-floating { display: none !important; }
}

/* Page layout: left contact column + center content */
.page-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1400px; margin: 0 auto; }
@media (max-width: 1023px) { .page-layout { grid-template-columns: 1fr; } .contact-col { display: none; } }

/* Contenedor de pila lateral (índice + contacto) */
.side-stack { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.side-stack > * { margin: 0 !important; }

/* Flotante del contenedor combinado */
.side-floating {
  position: fixed !important;
  left: 24px;
  z-index: 38; /* debajo del header (50), por encima del contenido normal */
  transition: top 0.25s ease-out;
}

/* Aumenté max-width del contenido central para hacerlo más ancho */
.main-column > section { max-width: 980px; margin: 0 auto; }
.main-column { padding-left: 8px; }
.hero-full { width: 100%; }

/* Índice de contenido flotante */
.content-index {
  transition: transform .25s ease, box-shadow .25s ease, width .2s ease, left .2s ease, top .2s ease;
}

.content-floating {
  position: fixed !important;
  left: 24px;
  width: 320px;
  max-width: calc(34vw);
  z-index: 35; /* por debajo de la contact-floating (40) y del header (50) */
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(6,95,84,0.14);
  margin-top: 0 !important;
  transition: top 0.25s ease-out;
}
@media (min-width: 1280px) {
  .content-floating { width: 360px; }
}
@media (max-width: 1023px) {
  .content-floating { display: none !important; }
}

/* Ajuste de anclaje para compensar header fijo */
#contactCard,
#contactCardQS,
#contactCardMobile {
  scroll-margin-top: 96px; /* se puede ajustar si el header cambia de alto */
}

/* Oculta cualquier ícono/social dentro del header (Facebook / Instagram / WhatsApp) */
header .social-link,
header .header-socials,
header .social-icons,
header .socials {
  display: none !important;
}

/* Reemplazo: .btn-primary para que sea exactamente igual al botón "Contactar Ahora" (from-teal-500 -> to-blue-500) */
.btn-primary,
.btn-primary:visited,
.btn-primary:focus,
.btn-primary:active {
  background-image: linear-gradient(90deg, #14b8a6 0%, #3b82f6 100%) !important; /* teal-500 -> blue-500 */
  color: #ffffff !important;
  border: none !important;
  transform: none !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  box-shadow: 0 8px 20px rgba(59,130,246,0.12) !important;
}

/* hover igual que hover de "Contactar Ahora" (from-teal-600 -> to-blue-600) */
.btn-primary:hover {
  background-image: linear-gradient(90deg, #0f766e 0%, #2563eb 100%) !important; /* teal-600 -> blue-600 */
  color: #ffffff !important;
}

/* Justificar texto en la sección "Quiénes Somos" */
#quienes-somos .prose,
.story-content .prose,
.story-text .prose {
  text-align: justify;
  text-justify: inter-word;
  -webkit-font-smoothing: antialiased;
  hyphens: auto; /* permite cortes silábicos cuando el navegador lo soporte */
}