/* ==================================================
   "¿POR QUÉ ELEGIR BIOSYN?" (portada)
   Prefijo bwy- para no chocar con otras secciones.
   Variables de marca: las mismas que header.css (:root).
   Cuatro tarjetas de cristal con icono y número, unidas por una línea con un destello que las recorre
   (el mismo lenguaje de la red de luces de la foto). Cada tarjeta lleva su color en --c.
   ================================================== */

.bwy, .bwy *, .bwy *::before, .bwy *::after { box-sizing: border-box; }

/* ---------- Sección ---------- */
.bwy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 96px 20px 104px;
  background:
    radial-gradient(520px 360px at 8% 0%, rgba(196, 217, 184, 0.16), transparent 70%),
    radial-gradient(560px 420px at 94% 100%, rgba(40, 110, 140, 0.3), transparent 70%),
    linear-gradient(180deg, var(--bs-dark, #033a3f) 0%, #022b2e 100%);
  font-family: 'Montserrat', sans-serif;
  color: var(--bs-cream, #f2f1d5);
}
/* Rejilla de puntos muy suave que se desvanece hacia los bordes */
.bwy-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(242, 241, 213, 0.12) 1px, transparent 1.3px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 85% at 50% 38%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 85% at 50% 38%, #000 0%, transparent 78%);
  pointer-events: none;
}
.bwy-wrap { max-width: 1160px; margin: 0 auto; }

/* ---------- Cabecera ---------- */
.bwy .bwy-head { max-width: 760px; margin: 0 auto 60px; padding: 0; text-align: center; }
.bwy .bwy-eyebrow {
  margin: 0 0 16px;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bs-mint, #c4d9b8);
}
.bwy .bwy-title {
  margin: 0 0 18px;
  padding: 0;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bs-cream, #f2f1d5);
  text-wrap: balance;
}
.bwy .bwy-lead {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 600;
  line-height: 1.55;
  color: rgba(242, 241, 213, 0.82);
}

/* ---------- Tarjetas ---------- */
.bwy .bwy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bwy .bwy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 262px;
  margin: 0;
  padding: 30px 26px 28px;
  border: 1px solid rgba(242, 241, 213, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(210px 170px at 100% 0%, rgba(242, 241, 213, 0.1), transparent 70%),
    linear-gradient(165deg, rgba(242, 241, 213, 0.1) 0%, rgba(242, 241, 213, 0.03) 100%);
  background:
    radial-gradient(210px 170px at 100% 0%, color-mix(in srgb, var(--c) 17%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(242, 241, 213, 0.1) 0%, rgba(242, 241, 213, 0.03) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Filete de color arriba */
.bwy .bwy-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0.85;
}
.bwy .bwy-card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 241, 213, 0.34);
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.34), 0 0 34px rgba(242, 241, 213, 0.06);
}

.bwy .bwy-num {
  position: absolute;
  top: 20px;
  right: 22px;
  font-family: 'Michroma', sans-serif;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: 1px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 241, 213, 0.22);
  transition: -webkit-text-stroke-color 0.35s ease;
}
.bwy .bwy-card:hover .bwy-num { -webkit-text-stroke-color: var(--c); }

.bwy .bwy-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(242, 241, 213, 0.3);
  border-color: color-mix(in srgb, var(--c) 48%, transparent);
  border-radius: 20px;
  background: radial-gradient(circle at 30% 25%, rgba(242, 241, 213, 0.18), rgba(2, 43, 46, 0.65));
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 32%, transparent), rgba(2, 43, 46, 0.65));
  box-shadow: 0 0 26px rgba(242, 241, 213, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--c);
  transition: transform 0.35s ease;
}
.bwy .bwy-card:hover .bwy-ico { transform: scale(1.08) rotate(-4deg); }
.bwy .bwy-ico svg {
  display: block;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bwy .bwy-text {
  margin: auto 0 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--bs-cream, #f2f1d5);
}

/* ---------- Línea de luz que une las tarjetas (en el hueco entre una y otra) ---------- */
.bwy .bwy-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 60px;
  right: -23px;
  width: 23px;
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(127, 240, 224, 0.95) 50%, transparent 70% 100%) 150% 0 / 300% 100% no-repeat,
    rgba(242, 241, 213, 0.22);
  animation: bwy-run 6.4s linear infinite;
  animation-delay: calc(var(--i, 1) * 0.9s);
  pointer-events: none;
}
@keyframes bwy-run {
  0% { background-position: 150% 0, 0 0; }
  14%, 100% { background-position: -50% 0, 0 0; }
}

/* ---------- Aparición al entrar en pantalla (solo si el JS está activo) ---------- */
.bwy.bwy-js .bwy-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.bwy.bwy-js.is-in .bwy-reveal { opacity: 1; transform: none; }
/* Con la aparición hecha, el movimiento al pasar el ratón responde al instante */
.bwy.bwy-js.is-in .bwy-card.bwy-reveal { transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.8s ease; transition-delay: 0s; }
.bwy.bwy-js.is-in .bwy-card.bwy-reveal:hover { transform: translateY(-6px); }

/* ---------- Tablet: 2 x 2 ---------- */
@media (max-width: 1100px) {
  .bwy .bwy-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .bwy .bwy-card:not(:last-child)::after { display: none; }
  .bwy .bwy-card { min-height: 230px; }
}

/* ---------- Móvil: una columna, tarjetas en horizontal y la línea baja entre ellas ---------- */
@media (max-width: 640px) {
  .bwy { padding: 68px 16px 76px; }
  .bwy .bwy-head { margin-bottom: 38px; }
  .bwy .bwy-grid { grid-template-columns: 1fr; gap: 16px; }
  .bwy .bwy-card {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-height: 0;
    padding: 18px 18px 18px 16px;
    border-radius: 22px;
  }
  .bwy .bwy-ico { flex: none; width: 54px; height: 54px; border-radius: 17px; }
  .bwy .bwy-ico svg { width: 26px; height: 26px; }
  .bwy .bwy-text { margin: 0; font-size: 1rem; }
  .bwy .bwy-num { display: none; }
  .bwy .bwy-card:not(:last-child)::after {
    display: block;
    top: auto;
    right: auto;
    bottom: -17px;
    left: 42px;
    width: 2px;
    height: 17px;
    background:
      linear-gradient(180deg, transparent 0 30%, rgba(127, 240, 224, 0.95) 50%, transparent 70% 100%) 0 150% / 100% 300% no-repeat,
      rgba(242, 241, 213, 0.22);
    animation-name: bwy-run-v;
  }
  @keyframes bwy-run-v {
    0% { background-position: 0 150%, 0 0; }
    14%, 100% { background-position: 0 -50%, 0 0; }
  }
}

/* Quien desactiva animaciones en su sistema */
@media (prefers-reduced-motion: reduce) {
  .bwy .bwy-card::after, .bwy .bwy-reveal { animation: none !important; }
  .bwy.bwy-js .bwy-reveal { opacity: 1; transform: none; transition: none; }
  .bwy .bwy-card, .bwy .bwy-ico, .bwy .bwy-num { transition: none; }
  .bwy .bwy-card:hover, .bwy .bwy-card:hover .bwy-ico, .bwy.bwy-js.is-in .bwy-card.bwy-reveal:hover { transform: none; }
}