/* assets/home/why_corp.css — SOLO TARJETAS FLOTANDO
   (SIN ESPACIO ABAJO + FIX SOMBRA + LATERALES PRO + NO CORTE LATERAL)
*/

#wfWhyCorp{
  --lift: 92px;   /* cuánto suben sobre el banner */
  --gap: 16px;
  --pad: 16px;    /* padding lateral alineado a tu layout */

  position:relative;
  z-index:30;

  /* ✅ no ocupa altura => no deja franja debajo */
  height:0;
  padding:0;
  margin:0;

  background:transparent;
  overflow:visible;
}

/* wrap */
#wfWhyCorp .wf-why-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
  overflow:visible;
}

/* ✅ rail flotante (FIX DEFINITIVO: recorta SOLO abajo, NO lados) */
#wfWhyCorp .wf-why-rail{
  transform:translateY(calc(var(--lift) * -1));
  will-change:transform;

  /* ✅ deja laterales libres (para que NO aparezca “sombrita/corte” en bordes) */
  overflow-x:visible;

  /* ✅ recorta SOLO abajo */
  overflow-y:hidden;
  padding-bottom:18px;

  /* ✅ recorte real SOLO inferior (no laterales) */
  clip-path: inset(0 0 18px 0);
}






/* Track — SWIPE PRO (sin jalar página) */
#wfWhyCorp .wf-why-track{
  display:flex;
  gap:var(--gap);

  overflow-x:auto;
  overflow-y:hidden;

  /* ✅ LATERALES CLAVADOS */
  padding:14px var(--pad) 14px;

  /* ✅ SWIPE PRO */
touch-action: pan-x pan-y;
  scroll-snap-type: x proximity;    /* suave (no se pega como mandatory) */
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;

  /* ✅ snap alineado al padding */
  scroll-padding-left:var(--pad);
  scroll-padding-right:var(--pad);

  scrollbar-width:none;
}
#wfWhyCorp .wf-why-track::-webkit-scrollbar{ height:0; }

/* Card: 3 visibles desktop */
#wfWhyCorp .wf-why-card{
  flex:0 0 calc((100% - (var(--gap) * 2)) / 3);
  max-width:420px;
  min-width:320px;

  scroll-snap-align:center;
scroll-snap-stop: normal;

  background:#fff;
  border:1px solid rgba(2,6,23,.12);
  border-radius:18px;
  padding:18px;

  /* ✅ sombra pro SIN sombra abajo */

  display:flex;
  flex-direction:column;
  gap:10px;

  position:relative;
}

/* línea superior pro */
#wfWhyCorp .wf-why-card::before{
  content:"";
  position:absolute;
  left:14px; right:14px; top:0;
  height:3px;
  border-radius:999px;
  background:#0f766e;
}










/* Icon PRO (badge) */
#wfWhyCorp .wf-why-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* PRO: verde sólido premium */
  background:linear-gradient(180deg, #0F766E, #0B5F59);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 20px rgba(2,6,23,.14);
}

/* Icono dentro (blanco, limpio) */
#wfWhyCorp .wf-why-icon svg{
  width:24px;
  height:24px;
  stroke:#fff;
  stroke-width:2.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}






/* Texto */
#wfWhyCorp .wf-why-h{
  margin:0;
  font-size:16px;
  font-weight:1100;
  color:#0b0f14;
}
#wfWhyCorp .wf-why-p{
  margin:0;
  font-size:13.5px;
  font-weight:750;
  line-height:1.5;
  color:#475467;
}

/* Tablet: 2 visibles */
@media (max-width:1024px){
  #wfWhyCorp{ --lift: 74px; }
  #wfWhyCorp .wf-why-card{
    flex:0 0 calc((100% - var(--gap)) / 2);
    min-width:300px;
  }
}

/* Mobile: 1 visible */
@media (max-width:640px){
  #wfWhyCorp{ --lift: 56px; }
  #wfWhyCorp{ --pad: 14px; }

  #wfWhyCorp .wf-why-card{
    flex:0 0 calc(100% - (var(--pad) * 2));
    min-width:0;
    max-width:none;
  }
}

/* Mobile: 1 visible + TIPOGRAFÍA MÁS BAJA (≈10 puntos menos) */
@media (max-width:640px){
  #wfWhyCorp{ --lift:56px; --pad:14px; }

  /* Card */
  #wfWhyCorp .wf-why-card{
    padding:15px;
    gap:7px;
    border-radius:16px;
  }

  /* Icono */
  #wfWhyCorp .wf-why-icon{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  #wfWhyCorp .wf-why-icon svg{
    width:21px;
    height:21px;
    stroke-width:2.4;
  }

  /* 🔽 TEXTO BAJADO ≈10 PUNTOS */
  #wfWhyCorp .wf-why-h{
    font-size: clamp(11.8px, 3.2vw, 13px);
    font-weight:900;
    line-height:1.12;
  }
  #wfWhyCorp .wf-why-p{
    font-size: clamp(10.9px, 3.0vw, 12px);
    font-weight:680;
    line-height:1.38;
  }
}

/* sensación de drag PRO */
#wfWhyCorp .wf-why-track.is-dragging{
  scroll-behavior:auto; /* evita pelea con smooth mientras arrastras */
  cursor:grabbing;
}















/* =========================================================
   WHY — CARD CAP SVG (SIN TOCAR ICONOS / SIN MOVER CARRUSEL)
   Requiere: assets/home/svg/why-card-cap.svg
   Pegar AL FINAL del why_corp.css
========================================================= */

/* Variables de color por tarjeta (usa tus clases bg-*) */
#wfWhyCorp .wf-why-card{ --a:#0F766E; --b:#0B5F59; }
#wfWhyCorp .wf-why-card.bg-speed   { --a:#0F766E; --b:#0B5F59; }
#wfWhyCorp .wf-why-card.bg-coverage{ --a:#0B7A6F; --b:#075E57; }
#wfWhyCorp .wf-why-card.bg-fiber   { --a:#0F766E; --b:#064E4A; }
#wfWhyCorp .wf-why-card.bg-support { --a:#0A6B62; --b:#074C46; }

/* Card: agrega espacio arriba para el cap, sin tocar flex/width */
#wfWhyCorp .wf-why-card{
  overflow:hidden;                 /* recorta el cap */
  padding-top:86px;                /* deja espacio para el header */
}

/* Banda gradiente arriba */
#wfWhyCorp .wf-why-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:86px;
  border-radius:0;
  background:linear-gradient(180deg, var(--a), var(--b));
  pointer-events:none;
  z-index:0;
}

/* Corte blanco con tu SVG (ruta correcta: assets/home/svg/...) */
#wfWhyCorp .wf-why-card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:86px;
  background-image:url("svg/why-card-cap.svg");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% 100%;
  pointer-events:none;
  z-index:1;
}

/* Contenido encima del cap */
#wfWhyCorp .wf-why-card > *{
  position:relative;
  z-index:2;
}

/* ✅ NO TOCAMOS .wf-why-icon NI .wf-why-icon svg
   (así se quedan tus iconos premium: gradiente + blanco) */

/* Mobile: ajusta alturas del cap sin tocar iconos */
@media (max-width:640px){
  #wfWhyCorp .wf-why-card{ padding-top:78px; }
  #wfWhyCorp .wf-why-card::before,
  #wfWhyCorp .wf-why-card::after{ height:78px; }
}







/* =========================================================
   WHY — ICONO SOBRE CAP (PRO) ✅
   Pegar AL FINAL y BORRAR tu bloque "ICONOS PREMIUM" anterior
========================================================= */

/* La card necesita ser el contenedor del icono */
#wfWhyCorp .wf-why-card{ position:relative; }

/* Icono: flota sobre el cap */
#wfWhyCorp .wf-why-card .wf-why-icon{
  position:absolute;
  left:18px;          /* esquina izquierda */
  top:58px;           /* ✅ AJUSTE FINO: súbelo/bájalo aquí */
  margin:0 !important;

  width:44px;
  height:44px;
  border-radius:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(180deg,#0F766E,#0B5F59) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 12px 20px rgba(2,6,23,.14) !important;

  z-index:3;          /* encima del cap */
}

/* SVG del icono */
#wfWhyCorp .wf-why-card .wf-why-icon svg{
  width:24px;
  height:24px;
  stroke:#fff !important;
  stroke-width:2.6;
  fill:none;
}

/* Ajusta el texto para que no choque con el icono flotante */
#wfWhyCorp .wf-why-card .wf-why-h,
#wfWhyCorp .wf-why-card .wf-why-p{
  margin-left:0; /* opcional */
}

/* Móvil */
@media (max-width:640px){
  #wfWhyCorp .wf-why-card .wf-why-icon{
    left:15px;
    top:52px;        /* ✅ ajuste móvil */
    width:38px;
    height:38px;
    border-radius:10px;
  }
  #wfWhyCorp .wf-why-card .wf-why-icon svg{
    width:21px;
    height:21px;
    stroke-width:2.4;
  }
}




/* =========================================================
   WHY — FIX TEXTO (no tapar con icono flotante) ✅
   Pegar AL FINAL
========================================================= */

/* 1) Card: padding normal + espacio extra SOLO arriba del contenido */
#wfWhyCorp .wf-why-card{
  padding:18px;                 /* base */
  padding-top:92px;             /* ✅ espacio para cap + icono */
}

/* 2) Icono: un poquito más arriba (opcional) */
#wfWhyCorp .wf-why-card .wf-why-icon{
  top:46px;                     /* ✅ bájalo/subelo aquí */
}

/* 3) Asegura que el título empiece abajo del icono */
#wfWhyCorp .wf-why-h{
  margin-top:6px;
}

/* ===== Mobile ===== */
@media (max-width:640px){
  #wfWhyCorp .wf-why-card{
    padding:15px;
    padding-top:86px;           /* ✅ espacio móvil */
  }
  #wfWhyCorp .wf-why-card .wf-why-icon{
    top:40px;                   /* ajuste móvil */
  }
}