/* ══════════════════════════════════════════════════════════════════
   cyo_fixes.css  —  Correcciones v2.1
   Cargar DESPUÉS de cyo_styles.css en todas las páginas.
   ══════════════════════════════════════════════════════════════════

   FIX 1 · Nav más delgada en móvil
   FIX 2 · Hero-badge visible (no tapado por nav)
   FIX 3 · Sin fabs circulares en móvil (solo barra inferior)
   FIX 4 · Carrusel B&A con scroll táctil horizontal
   FIX 5 · Botón ℹ reemplazado por + circular en cirugías
   FIX 6 · Mismo FIX 5 heredado en manga gástrica
══════════════════════════════════════════════════════════════════ */


/* ── FIX 1: Nav más compacta en móvil ──────────────────────────── */
@media (max-width: 900px) {
  nav {
    padding: 7px 16px;          /* antes: 12px 32px */
  }
  .nav-logo img {
    height: 38px;               /* antes: 52px */
  }
  /* El mobile-menu arranca inmediatamente debajo de la nav */
  .nav-mobile-menu {
    top: 52px;                  /* alineado con la nueva altura */
  }
}


/* ── FIX 2: Hero-badge no tapado por nav en móvil ───────────────── */
/*
  .hero-content usa align-items: flex-end (texto pegado abajo).
  En móvil el badge quedaba a mitad de la franja porque
  el contenido centrado verticalmente choca con la nav fija.
  Solución: en móvil hacemos padding-top suficiente para que
  el contenido arranque BAJO la nav.
*/
@media (max-width: 900px) {
  .hero-content {
    align-items: flex-start;    /* contenido desde arriba */
    padding-top: 80px;          /* espacio bajo nav (≈ altura nav 52px + margen) */
    padding-bottom: 100px;
  }
  .hero-center {
    padding-top: 12px;
  }
}
@media (max-width: 580px) {
  .hero-content {
    padding-top: 68px;
    padding-bottom: 88px;
  }
}


/* ── FIX 3: Quitar fabs circulares en móvil ────────────────────── */
/*
  En móvil ya existe la barra inferior (llamar / whatsapp / consulta).
  Los círculos flotantes (WA verde + teléfono azul) son redundantes.
  Los ocultamos; la barra inferior cubre todo lo necesario.
*/
@media (max-width: 900px) {
  .fab-wa    { display: none !important; }
  .fab-phone { display: none !important; }
  /* El .floating-actions queda vacío en móvil → lo contraemos */
  .floating-actions {
    bottom: 88px;   /* sobre la barra inferior */
    right: 14px;
    gap: 8px;
  }
}


/* ── FIX 4: Carrusel B&A con scroll táctil ─────────────────────── */
/*
  Antes: .ba-track-outer { overflow: hidden }  →  clip + no táctil
  Ahora: scroll-snap horizontal con dedos, con fade lateral visual.
  Conservamos los botones de flechas como fallback para desktop.
*/
.ba-track-outer {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Escondemos scrollbar nativa pero mantenemos funcionalidad */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
  /* Fade visual en los bordes para indicar que hay más */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 5%,
    black 95%,
    transparent 100%
  );
}
.ba-track-outer::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

.ba-track {
  /* Dejamos translate JS para desktop; en móvil el scroll nativo manda */
  display: flex;
  gap: 20px;
  /* No cambiamos transition para no interferir con scroll táctil */
}

.ba-card {
  scroll-snap-align: start;
  flex-shrink: 0;                 /* que no se compriman */
}

/* Hint táctil: texto pequeño solo en móvil */
.ba-swipe-hint {
  text-align: center;
  font-size: 12px;
  color: var(--gray);
  margin-top: 10px;
  display: none;
}
@media (max-width: 900px) {
  .ba-swipe-hint { display: block; }
  /* Ocultar flechas en móvil: el scroll táctil es suficiente */
  .ba-controls   { display: none; }
}


/* ── FIX 5 & 6: Botón "info" → círculo + en cirugías ───────────── */
/*
  El .smr-info original mostraba un ℹ que parecía un error de render.
  Lo convertimos en un botón circular "+" estilo FAQ,
  con tooltip "Más info" al hover en desktop.
*/
.smr-info {
  /* Redefinición completa */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,36,71,.08);
  border: 2px solid rgba(10,36,71,.2);
  color: var(--navy);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: all .22s;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}
/* El ℹ original se oculta; mostramos + */
.smr-info .smr-info-label {
  display: none;
}
/* Pseudo para el + */
.smr-info::after {
  content: '+';
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}
.smr-info:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
  transform: scale(1.15);
}
/* Tooltip en desktop */
@media (min-width: 901px) {
  .smr-info::before {
    content: 'Más info';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
  }
  .smr-info:hover::before { opacity: 1; }
}

/* Ajuste: alinear el botón + al final de la fila de medios */
.surgery-media-row {
  align-items: center;
}
/* En las landings de cirugías (cyo_manga_gastrica.php etc.)
   el mismo botón puede aparecer como .smr-btn.smr-info
   → la regla anterior ya aplica por la clase .smr-info      */