/* ==========================================================================
   AJUSTES DE PORTADA (pedidos por Cristian)
   Va al final de la cascada, después de plus.css y neon.css.
   ========================================================================== */

/* ============================== 1. los números, ahora debajo de los perks = */
.heroStats{
  margin-top:18px; padding:30px 24px;
  display:grid; place-items:center;
}
.heroStats .stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; width:100%;
}
.heroStats .stat__v{ font-size:36px; }
.heroStats .stat__l{ font-size:10px; }
@media (max-width:1180px){
  .heroStats .stat__v{ font-size:32px; }
}
@media (max-width:860px){
  .heroStats{ margin-top:14px; padding:24px 18px; }
  .heroStats .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 8px; }
  .heroStats .stat__v{ font-size:30px; }
  .heroStats .stat__l{ font-size:9.5px; }
}

/* ==================== 2. la segunda fila de servicios queda centrada ===== */
/* Con grid, los 3 que sobran se pegan a la izquierda. En flex, `justify-content`
   centra la fila incompleta y cada tarjeta conserva el ancho de columna. */
@media (min-width:861px){
  .svcGrid{
    display:flex; flex-wrap:wrap; justify-content:center; gap:18px;
  }
  .svcGrid > li{
    flex:0 0 calc((100% - 54px) / 4);
    max-width:calc((100% - 54px) / 4);
  }
}

/* ========== 3. "por qué elegir": título a la izquierda, lo demás a la derecha */
.sec--why .whyHead__t{
  display:block; justify-content:flex-start; text-align:left;
  font-size:25px; line-height:1.18; margin:0;
}
.sec--why .whyHead__s{ text-align:left; margin:0 0 16px; font-size:13.5px; }
.sec--why .trust__list{ max-width:none; margin:0; }

@media (min-width:861px){
  .sec--why .trust__why{
    display:grid; grid-template-columns:minmax(0,36%) minmax(0,1fr);
    gap:38px; align-items:stretch;
  }
  /* el título queda a media altura de la tarjeta; la columna de la derecha
     manda el alto y ésta se centra contra ella */
  .sec--why .whyHead__t{ font-size:27px; padding-right:10px; align-self:center; }
  .sec--why .whyBody{
    padding-left:38px; border-left:1px solid var(--linea-2);
  }
  .sec--why .trust__list li{ font-size:14px; margin-bottom:13px; }
}
@media (max-width:860px){
  .sec--why .whyHead__t{ font-size:19px; margin-bottom:12px; }
  .sec--why .whyHead__s{ font-size:12.5px; }
}

/* ============================ 4. "¿cómo trabajamos?" con más presencia === */
@media (min-width:861px){
  .step__top{ height:84px; }
  .step__num{
    width:46px; height:46px; font-size:19px;
    margin-right:-7px; margin-bottom:12px;
  }
  .step__ico{ width:68px; height:68px; margin-left:-9px; }
  .step__ico .ico{ width:34px; height:34px; }
  .step:not(:last-child)::after{ top:56px; left:calc(50% + 54px); right:calc(-50% + 54px); }
  .step__h{ margin-top:14px; font-size:17px; letter-spacing:.03em; }
  .step__t{ font-size:17px; }
  .step__p{ margin-top:9px; font-size:15px; line-height:1.7; max-width:none; }
  .steps{ margin-top:30px; }
  .step{ padding:0 14px; }
}
@media (max-width:860px){
  .step__num{ width:38px; height:38px; font-size:16px; }
  .step__ico{ width:58px; height:58px; }
  .step__ico .ico{ width:29px; height:29px; }
  .step__h,.step__t{ font-size:15px; }
  .step__p{ font-size:14px; line-height:1.65; }
}

/* ======================= 5. el texto sobre las fotos del taller, más grande */
.trabCard__tag{
  font-size:14px; letter-spacing:.05em;
  left:16px; bottom:14px;
  text-shadow:0 2px 10px rgba(4,20,54,.65);
}
.trabCard__p{ font-size:13px; line-height:1.65; }
@media (max-width:860px){
  .trabCard__tag{ font-size:12.5px; }
  .trabCard__p{ font-size:12.5px; }
}

/* ========================= 6. el arte del hero, corrido a la derecha ===== */
@media (min-width:861px){
  .hero__art{ margin-left:0; margin-right:-6%; }
  .hero__art img{
    transform-origin:center center;
    animation:heroVaiven 6.5s ease-in-out infinite;
  }
}
@media (min-width:1400px){
  .hero__art{ margin-left:0; margin-right:-8%; }
}
/* un vaivén con más recorrido que el `floaty` original: sube, baja y se
   inclina apenas, siempre con transform (no mueve el diseño de la página) */
@keyframes heroVaiven{
  0%   { transform:translate3d(0, 0, 0) rotate(0deg) scale(1); }
  22%  { transform:translate3d(10px, -16px, 0) rotate(.8deg) scale(1.012); }
  48%  { transform:translate3d(0, -24px, 0) rotate(0deg) scale(1.02); }
  74%  { transform:translate3d(-10px, -12px, 0) rotate(-.8deg) scale(1.012); }
  100% { transform:translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero__art img{ animation:none !important; }
}

/* ====================== 7. el botón de volver arriba, encima del carrito ==
   Estaba en `bottom:86px` con z-index 119 y el botón del carrito (bottom:96px,
   z-index 130, 56px de alto) le caía justo encima: se veía apenas el borde.
   Ahora va arriba del carrito y alineado con su centro.
   ========================================================================== */
.toTop{
  bottom:166px;      /* carrito: 96px de base + 56px de alto + 14px de aire */
  right:29px;        /* mismo centro que el carrito (22 + 56/2 - 42/2) */
  z-index:131;
}
@media (max-width:640px){
  .toTop{
    bottom:146px;    /* carrito móvil: 84 + 50 + 12 */
    right:20px;      /* centro del carrito móvil (14 + 50/2 - 38/2) */
  }
}

/* ==========================================================================
   SC_HERO2 · el hero deja de amontonarse
   Dos cosas lo apretaban: los botones se pasaban por 6px del ancho de la
   columna (se iban a dos filas) y la píldora de ventajas subía -46px, justo
   encima de esa segunda fila.
   ========================================================================== */
@media (min-width:861px){
  .hero__btns{ gap:16px; }
  .hero__btns .btn--lg{ padding-left:24px; padding-right:24px; }
}
/* entre 861 y 1279 la columna del texto se angosta: los botones necesitan
   un poco menos de aire lateral para seguir en una sola fila */
@media (min-width:861px) and (max-width:1279px){
  .hero__btns{ gap:12px; }
  .hero__btns .btn--lg{ padding-left:18px; padding-right:18px; }
}
@media (min-width:861px) and (max-width:1180px){
  .hero__btns .btn--lg{ padding-left:14px; padding-right:14px; font-size:13px; }
}

.perks{
  margin-top:20px;
  gap:34px;
  padding:15px 32px;
}
.perk__ico{ width:34px; height:34px; border-radius:9px; }
.perk__ico .ico{ width:19px; height:19px; }
.perk__txt{ font-size:11.5px; letter-spacing:.045em; line-height:1.45; }
.heroStats{ margin-top:16px; }

@media (max-width:1024px){
  .perks{ margin-top:16px; gap:16px 22px; padding:16px 20px; }
}
@media (max-width:860px){
  .perk__ico{ width:32px; height:32px; }
  .perk__txt{ font-size:11px; }
}
@media (max-width:640px){
  .perks{ gap:14px; }
}

/* ==========================================================================
   SC_LINEA · la línea del proceso, ahora se ve
   ========================================================================== */
.step:not(:last-child)::after{
  height:4px; border-radius:99px;
  background-image:linear-gradient(90deg, rgba(6,99,245,.95) 0 18px, rgba(6,99,245,.18) 18px 30px);
  background-size:30px 4px;
  box-shadow:0 2px 10px rgba(6,99,245,.26);
  animation:mtrFlujo 1.7s linear infinite;
}
@keyframes mtrFlujo{ from{ background-position:0 0; } to{ background-position:30px 0; } }

@media (min-width:861px){
  .step:not(:last-child)::after{ top:55px; }
}

/* en el celular los pasos van uno debajo del otro: la línea se pone vertical
   y une los círculos */
@media (max-width:640px){
  .steps{ gap:26px; }
  .step:not(:last-child)::after{
    display:block;
    top:auto; bottom:-26px; right:auto;
    left:13px; width:4px; height:26px;   /* el centro del círculo cae en 15px */
    background-image:linear-gradient(180deg, rgba(6,99,245,.95) 0 12px, rgba(6,99,245,.18) 12px 20px);
    background-size:4px 20px;
    animation:mtrFlujoV 1.7s linear infinite;
  }
  @keyframes mtrFlujoV{ from{ background-position:0 0; } to{ background-position:0 20px; } }
}

@media (prefers-reduced-motion: reduce){
  .step:not(:last-child)::after{ animation:none !important; }
}

/* ==========================================================================
   SC_MARQUEE · el carrusel de marcas, sin la caja blanca
   ========================================================================== */
.sec--marcas .fxMarquee{
  background:transparent; border:0; box-shadow:none;
  margin-top:4px; padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.sec--marcas .brands{
  background:transparent; border:0; box-shadow:none; padding:0; margin-top:0;
}
.sec--marcas .brands.fx-track{ gap:74px; }
.sec--marcas .brands svg{ height:28px; }
@media (max-width:860px){
  .sec--marcas .brands.fx-track{ gap:52px; }
  .sec--marcas .brands svg{ height:24px; }
}
/* sin caja, el halo del hover dibujaba un recuadro alrededor del logo */
@media (hover:hover) and (pointer:fine){
  .sec--marcas .brands:hover,
  .sec--marcas .brands li:hover{ box-shadow:none; border-color:transparent; }
}