/* ========================================
   KEEPY · CSS de bloques custom (módulos Code de Divi)
   Aquí irá el CSS validado de los bloques que NO se
   reconstruyen con módulos nativos: calculadora de espacio,
   carruseles mobile, sticky-bar, fab WhatsApp…
   Se irá poblando bloque a bloque durante el traslado.
   ======================================== */

/* --- Botón flotante WhatsApp (compartido en todas las páginas) --- */
.fab-wa {
  position: fixed;
  right: 16px;
  bottom: 84px; /* deja hueco a la sticky-bar en mobile */
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: transform .15s;
}
.fab-wa:hover { transform: scale(1.06); }
.fab-wa svg { width: 30px; height: 30px; fill: #fff; }
@media (min-width: 981px) {
  .fab-wa { bottom: 24px; }
}

/* --- Sticky bar de CTAs (solo mobile) --- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 89;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
}
.sticky-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.sticky-bar .sb-tel { background: var(--dark); color: #fff; }
.sticky-bar .sb-cta { background: var(--brand); color: var(--dark); }
@media (min-width: 981px) {
  .sticky-bar { display: none; }
}

/* ========================================
   FIX APILADO RESPONSIVE · filas Divi 5
   ----------------------------------------
   En Divi 5 las filas son flex. Si la fila esta
   en flex-wrap:nowrap, las columnas NO pueden
   bajar de linea aunque su ancho de movil sea
   100%: se comprimen o se salen de pantalla.
   Estas filas ya tienen bien el ancho por
   breakpoint, solo les faltaba el wrap.
   Ademas .kv3-porque define anchos de escritorio
   sin @media, hay que reponerlos aqui.
   Anadido 2026-07-27 (idestudio).
   ======================================== */
@media (max-width: 980px) {
  .kv3-porque .et_pb_row,
  .kv3-donde .et_pb_row,
  .kv3-sobre .et_pb_row,
  .kv3-centro .et_pb_row,
  .kv-footer .et_pb_row { flex-wrap: wrap !important; }

  html body .kv3-porque .kv3-head .et_pb_column,
  html body .kv3-porque .kv3-head .et_pb_column:last-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* Las 8 razones: rejilla 2x4 (equal height garantizado) */
  html body .kv3-porque .kv3-r1,
  html body .kv3-porque .kv3-r2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  html body .kv3-porque .kv3-r1 .et_pb_column,
  html body .kv3-porque .kv3-r2 .et_pb_column {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Ficha del centro: 1 columna en movil
   (a 2 columnas se cortaban telefono, email y direccion) */
@media (max-width: 767px) {
  html body .kv3-centro .et_pb_column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ========================================
   CARRUSELES MOVIL (para-quien / otros centros /
   opiniones / galeria)
   ----------------------------------------
   1) Sangrado a los bordes: la pista ocupa el ancho
      completo pero con la primera card alineada con
      los titulares (gutter de seccion = 5%). Asi la
      siguiente card asoma limpia en vez de quedar
      cortada por el borde del contenedor.
      Los porcentajes son exactos: la caja contenedora
      mide 90% del viewport, asi que 5.5556% de ella
      equivale al 5% del viewport.
   2) scroll-padding-left para que el scroll-snap
      (ya existente) pare las cards en el gutter.
   3) Barra de progreso verde de 6px, sin las flechas
      del scrollbar nativo, igual en los cuatro.
      OJO: en Chrome, declarar scrollbar-width o
      scrollbar-color ANULA los ::-webkit-scrollbar,
      por eso se resetean a auto y las propiedades
      estandar solo se aplican via @supports (Firefox).
   Anadido 2026-07-27 (idestudio).
   ======================================== */
@media (max-width: 980px) {
  html body .kv3-paraquien .kv3pq-cards.et_pb_row {
    padding: 0 5% 14px !important;
    max-width: none !important;
    scroll-padding-left: 5% !important;
  }
  html body .kv3-otros .kv3o-cards.et_pb_row {
    margin: 0 -5.5556% !important;
    width: calc(100% + 11.1112%) !important;
    max-width: none !important;
    padding: 0 5.5556% 14px !important;
    scroll-padding-left: 5% !important;
  }
  html body .kv3-opiniones .kv3-op-track,
  html body .kv3-galeria .kv3-gal-track {
    margin-left: -5.5556% !important;
    margin-right: -5.5556% !important;
    padding-left: 5.5556% !important;
    padding-right: 5.5556% !important;
    width: auto !important;
    max-width: none !important;
    scroll-padding-left: 5% !important;
  }
}

html body .kv3-paraquien .kv3pq-cards.et_pb_row,
html body .kv3-otros .kv3o-cards.et_pb_row,
html body .kv3-opiniones .kv3-op-track,
html body .kv3-galeria .kv3-gal-track {
  scrollbar-width: auto !important;
  scrollbar-color: auto !important;
  -webkit-overflow-scrolling: touch;
}
html body .kv3-paraquien .kv3pq-cards.et_pb_row::-webkit-scrollbar,
html body .kv3-otros .kv3o-cards.et_pb_row::-webkit-scrollbar,
html body .kv3-opiniones .kv3-op-track::-webkit-scrollbar,
html body .kv3-galeria .kv3-gal-track::-webkit-scrollbar { height: 6px !important; }
html body .kv3-paraquien .kv3pq-cards.et_pb_row::-webkit-scrollbar-track,
html body .kv3-otros .kv3o-cards.et_pb_row::-webkit-scrollbar-track,
html body .kv3-opiniones .kv3-op-track::-webkit-scrollbar-track,
html body .kv3-galeria .kv3-gal-track::-webkit-scrollbar-track { background: #E9EBE0 !important; border-radius: 8px !important; }
html body .kv3-paraquien .kv3pq-cards.et_pb_row::-webkit-scrollbar-thumb,
html body .kv3-otros .kv3o-cards.et_pb_row::-webkit-scrollbar-thumb,
html body .kv3-opiniones .kv3-op-track::-webkit-scrollbar-thumb,
html body .kv3-galeria .kv3-gal-track::-webkit-scrollbar-thumb { background: #C2D500 !important; border-radius: 8px !important; }
html body .kv3-paraquien .kv3pq-cards.et_pb_row::-webkit-scrollbar-button,
html body .kv3-otros .kv3o-cards.et_pb_row::-webkit-scrollbar-button,
html body .kv3-opiniones .kv3-op-track::-webkit-scrollbar-button,
html body .kv3-galeria .kv3-gal-track::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }

@supports not selector(::-webkit-scrollbar) {
html body .kv3-paraquien .kv3pq-cards.et_pb_row,
html body .kv3-otros .kv3o-cards.et_pb_row,
html body .kv3-opiniones .kv3-op-track,
html body .kv3-galeria .kv3-gal-track { scrollbar-width: thin !important; scrollbar-color: #C2D500 #E9EBE0 !important; }
}

/* Cabecera del carrusel "Para quien es": la seccion
   no tiene padding horizontal (su decoration quedo
   como hermano de module y Divi lo ignora), asi que
   el eyebrow, el H2 y el "Desliza" se pegaban al
   borde. Se les da el mismo gutter que a las cards.
   Anadido 2026-07-28 (idestudio). */
@media (max-width: 980px) {
  html body .kv3-paraquien .kv3pq-head.et_pb_row {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}