/* ═══════════════════════════════════════════════════════════════
   COCOFA – Estilos compartidos por todo el sitio
   Los carga includes/header.php (páginas internas) e index.php (home).
   Colores base (--primary, radios, sombras) vienen del <style> del header.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ FORMULARIO DE CONTACTO: resultado del envío ═══ */
.contacto-estado {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: 1rem; padding: .85rem 1rem; border-radius: 12px;
  font-size: .95rem; line-height: 1.5;
}
.contacto-estado[hidden] { display: none; }
.contacto-estado:focus { outline: none; }
.contacto-estado i { margin-top: .2rem; }
.contacto-estado--ok { background: #e6f5ec; color: #145a36; border: 1px solid #a7d8bb; }
.contacto-estado--error { background: #fdecec; color: #9b1c1c; border: 1px solid #f5c2c2; }
.contacto-contador { display: block; margin-top: .3rem; font-size: .8125rem; color: #52606d; }
#contactForm .form-control { min-height: 46px; }
#contactForm .btn-submit[aria-busy="true"] { cursor: progress; }

/* ═══ MENÚ PRINCIPAL ═══
   Nunca parte "Quiénes Somos", "Por qué Elegirnos" ni "Alta Cliente" en dos
   líneas (mismo arreglo que ya tenían el blog y noticias):
   · 1400 px o más: entra holgado en el contenedor.
   · 1200–1399 px: usa todo el ancho, con espacios más chicos.
   · 992–1199 px: no entra en una línea legible → hamburguesa, como en tablet. */
@media (min-width: 1200px) {
  .navbar-brand { flex-shrink: 0; }
  .navbar .nav-link { white-space: nowrap; padding: .5rem .6rem !important; font-size: .9rem; }
  .navbar .btn-nav-primary, .navbar .btn { white-space: nowrap; padding: .5rem 1rem !important; }
  .navbar .ms-lg-3 { margin-left: .4rem !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .navbar > .container { max-width: 100%; }
  .navbar-brand img { height: 38px; width: auto; }
  .navbar .nav-link { padding: .5rem .35rem !important; font-size: .85rem; }
  .navbar .btn-nav-primary, .navbar .btn { padding: .5rem .7rem !important; font-size: .85rem; }
  .navbar .ms-lg-3 { margin-left: .3rem !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar.navbar-expand-lg { flex-wrap: wrap; }
  .navbar-expand-lg .navbar-toggler { display: block; }
  .navbar-expand-lg .navbar-collapse { flex-basis: 100%; }
  .navbar-expand-lg .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }
  .navbar-expand-lg .navbar-collapse.show, .navbar-expand-lg .navbar-collapse.collapsing { display: block !important; }
  .navbar-expand-lg .navbar-nav { flex-direction: column; align-items: stretch !important; }
  .navbar-collapse { background: #fff; padding: 1rem; border-radius: var(--radius-lg, 16px); margin-top: .75rem; box-shadow: var(--shadow-lg); max-height: 80vh; overflow-y: auto; }
  .navbar-nav .nav-item { border-bottom: 1px solid var(--border-light, #f0f0f0); }
  .navbar-nav .nav-item:last-child { border-bottom: none; }
  .navbar-expand-lg .navbar-nav .nav-link { padding: .6rem .5rem !important; }
  .nav-link::after { display: none; }
  .btn-nav-primary, .btn-nav-ofertas { display: block; text-align: center; margin: .25rem 0 !important; padding: .5rem 1rem !important; }
}

/* ═══ FOCO VISIBLE (teclado) ═══ */
.navbar a:focus-visible, .navbar button:focus-visible,
.btn:focus-visible, .btn-autogestion:focus-visible, .btn-submit:focus-visible,
footer a:focus-visible {
  outline: 3px solid #0b5cad; outline-offset: 3px; box-shadow: none;
}
.float-btn:focus-visible { outline: 3px solid #fff; box-shadow: 0 0 0 6px #0b5cad; }
.float-btn[data-tooltip]:focus-visible::before { opacity: 1; visibility: visible; }

/* ═══ BOTONES FLOTANTES ═══
   En pantallas grandes se ven como siempre (el grupo no existe para el
   diseño). En el celular Autogestión, Revista y WhatsApp quedan detrás de un
   solo botón que se abre y muestra cada acción con su nombre. */
.float-grupo { display: contents; }
.float-toggle { display: none; background: linear-gradient(135deg, var(--secondary, #26c6da), var(--primary, #1e88e5)); }
@media (max-width: 767.98px) {
  .float-toggle { display: flex; }
  .float-toggle i { transition: transform 200ms ease; }
  .float-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .float-grupo:not(.float-grupo--fijo) { display: none; flex-direction: column; align-items: flex-end; gap: inherit; }
  .float-grupo.abierto { display: flex; }
  .float-grupo.abierto .float-btn { animation: float-entra 200ms ease both; }
  .float-grupo.abierto .float-btn:nth-child(2) { animation-delay: 40ms; }
  .float-grupo.abierto .float-btn:nth-child(3) { animation-delay: 80ms; }
  /* El nombre de cada acción, siempre visible mientras el grupo está abierto */
  .float-grupo.abierto .float-btn[data-tooltip]::before {
    display: block; opacity: 1; visibility: visible; right: calc(100% + 10px);
    padding: .35rem .75rem; font-size: .8125rem; font-weight: 600; box-shadow: 0 4px 12px rgba(16, 42, 67, .2);
  }
  /* Noticias: el grupo abierto no se esconde al bajar */
  .nt-flotantes-ocultos .float-grupo.abierto .float-btn { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}
@keyframes float-entra { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

/* ═══ TARJETA DE AUTOGESTIÓN: señales de confianza ═══ */
.autogestion-subtexto { opacity: .9; }
.autogestion-confianza {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .75rem;
}
.autogestion-confianza li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px; font-size: .875rem; font-weight: 600;
  background: rgba(6, 40, 72, .45); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.autogestion-confianza i { font-size: .85rem; }

/* ═══ MICROINTERACCIONES ═══ */
.btn-autogestion, .btn-submit, .btn-nav-primary, .btn-nav-ofertas {
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, filter 200ms ease;
}
.btn-autogestion:active, .btn-submit:active, .btn-nav-primary:active, .btn-nav-ofertas:active, .float-btn:active { transform: scale(.97); }

/* Quien pide menos movimiento en su sistema no ve animaciones ni desplazamientos suaves */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; animation-delay: 0ms !important;
  }
  .float-btn:hover, .float-btn:active { transform: none; }
}

/* Las imágenes con width/height (para reservar su lugar) mantienen la
   proporción; :where() no suma especificidad, así cada sección conserva
   el alto que ya le da su propio CSS. */
:where(img[width][height]) { height: auto; }