/* =========================================================================
   NUTECH — Robótica (/robotica/)
   Se carga después de styles.css y servicios.css. Agrega lo que la portada no
   tiene: fondos con video, controles de reproducción, fichas de equipos y el
   detalle de la aspiradora. Las secciones, el velo, el índice y los puntos del
   carrusel son los de la portada.
   ========================================================================= */

/* ---------- 1. Fondos con video ---------- */
/* Los videos son verticales (celular): el mismo fotograma, difuminado, llena el ancho.
   Mismo peso que la regla de la portada (slow-zoom): gana por ir después. */
.media-section .bg > img.fill{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(26px) saturate(1.05);scale:1.15;animation:none;
}
.bg--video > .media{
  position:absolute;top:0;height:100%;width:auto;
  right:clamp(24px,8vw,180px);
  background:var(--surface-dark);box-shadow:var(--shadow-lg);
}
.media-section--right .bg--video > .media{right:auto;left:clamp(24px,8vw,180px)}

/* Video horizontal (16:9): cubre el fondo completo, sin marco lateral */
.bg--video > .media--wide{inset:0;width:100%;height:100%;right:auto;left:0;object-fit:cover;box-shadow:none}
.media-section--right .bg--video > .media--wide{left:0;right:0}

/* Video horizontal a media pantalla: estirado a sangre se pixela; a la mitad conserva su nitidez */
.bg--video > .media-half{
  top:50%;translate:0 -50%;left:clamp(24px,6vw,120px);right:auto;
  width:min(50vw,880px);height:auto;aspect-ratio:1088/594;object-fit:cover;
}
.media-section--centrada{align-items:center}

/* Carrusel de videos: comparten un marco vertical fijo y se desplazan de derecha a
   izquierda, como el carrusel de fotos del sitio. Solo el cuadro activo se reproduce. */
.bg--carousel .media-frame{
  position:absolute;top:0;height:100%;aspect-ratio:476/848;
  right:clamp(24px,8vw,180px);overflow:hidden;
  background:var(--surface-dark);box-shadow:var(--shadow-lg);
}
.media-section--right .bg--carousel .media-frame{right:auto;left:clamp(24px,8vw,180px)}
/* Mismo fundido cruzado que el carrusel del sitio (styles.css, .gal-item) */
.bg--carousel .media{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity var(--fundido) ease-in-out;
}
.bg--carousel .media.is-activa{opacity:1;z-index:2}
.bg--carousel .media.is-saliente{opacity:1;z-index:1;transition:none}
.bg--carousel .media.no-anim{transition:none}

/* ---------- 2. Controles de reproducción ---------- */
/* Los controles (.rec) son los del carrusel del sitio (styles.css). Con un solo
   video, solo velocidad y pausa; en las secciones con el texto a la derecha van
   a la izquierda (.rec--izq). */

/* Datos clave de cada equipo, en píldoras de vidrio (solo lectura) */
.media-facts{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.media-facts li{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--surface-dark) 40%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--on-media);
}

/* ---------- 3. Fichas de equipos ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0;padding:0;list-style:none}
.product{
  position:relative;aspect-ratio:4/3.4;border-radius:12px;overflow:hidden;background:var(--surface-dark);
  transition:translate var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.product::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3;
  transform-origin:top;scale:1 0;background:var(--brand-yellow);
  transition:scale var(--t-slow) var(--ease-out);
}
.product:nth-child(5n+2)::before{background:var(--brand-lime)}
.product:nth-child(5n+3)::before{background:var(--brand-lime-soft)}
.product:hover{translate:0 -5px;box-shadow:var(--shadow-md)}
.product:hover::before{scale:1 1}
.product a{display:block;position:absolute;inset:0;text-decoration:none;color:var(--on-media)}
.product a:focus-visible{outline-offset:-4px}
.product img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale var(--t-slow) var(--ease-out)}
.product:hover img{scale:1.06}
.product-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-dark) 6%,transparent) 34%,color-mix(in srgb,var(--surface-dark) 44%,transparent) 66%,color-mix(in srgb,var(--surface-dark) 86%,transparent) 100%);
}
.product-body{position:absolute;inset:auto 0 0;display:block;padding:20px 22px 18px}
.product-num{display:block;margin-bottom:6px;font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--brand-yellow)}
.product-body h3{margin:0 0 4px;font-size:20px;color:var(--on-media)}
.product-body p{margin:0 0 10px;max-width:none;font-size:14px;line-height:1.5;color:var(--on-media-soft)}
.product-more{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-media);opacity:.85;transition:opacity var(--t-fast) var(--ease-soft);
}
.product-more svg{width:15px;height:15px;transition:translate var(--t-fast) var(--ease-out)}
.product:hover .product-more{opacity:1}
.product:hover .product-more svg{translate:5px 0}

/* ---------- 4. Aspiradora robótica ---------- */
.aspiradora-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.aspiradora-photo{margin:0;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md)}
.aspiradora-photo img{width:100%;height:100%;object-fit:cover}
.feature-list{display:grid;gap:26px;margin:0;padding:0;list-style:none}
.feature-list li{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start}
.feature-icon{
  width:52px;height:52px;border-radius:50%;grid-row:span 2;
  display:inline-flex;align-items:center;justify-content:center;background:var(--brand-yellow);color:var(--on-brand);
}
.feature-icon svg{width:24px;height:24px}
.feature-list h3{margin:4px 0 0;font-size:16px}
.feature-list p{grid-column:2;margin:0;font-size:16px}

/* ---------- 5. Responsive ---------- */
@media (max-width:980px){
  .product-grid{grid-template-columns:1fr}
  .product{aspect-ratio:16/10}
  .aspiradora-layout{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* En pantallas angostas el video vertical cubre el fondo completo. Solo los hijos
     directos: los cuadros del carrusel conservan su translate, que es el desplazamiento. */
  .bg--video > .media,.media-section--right .bg--video > .media{
    left:50%;right:auto;translate:-50% 0;width:100%;height:100%;object-fit:cover;box-shadow:none;
  }
  .bg--video > .media--wide{left:0;translate:none}
  .bg--video > .media-half{left:50%;right:auto;top:14svh;translate:-50% 0;width:min(92vw,560px)}
  .media-section--centrada{align-items:flex-end}
  .bg--carousel .media-frame,.media-section--right .bg--carousel .media-frame{left:0;right:0;aspect-ratio:auto;width:100%;box-shadow:none}
  .media-section .bg > img.fill{display:none}
}
/* Teléfono apaisado: se ocultan los datos para no comerse la altura */
@media (max-height:560px){.media-facts{display:none}}

/* ---------- 6. Preferencias del usuario ----------
   Con «reducir movimiento» el carrusel de videos sigue avanzando (reduce, no desactiva):
   el desplazamiento lateral pasa a un fundido. Los videos se pueden pausar con su botón. */
@media (prefers-reduced-motion:reduce){
  .bg--carousel .media{transition:opacity var(--fundido) ease-in-out !important}
  .bg--carousel .media.is-saliente,.bg--carousel .media.no-anim{transition:none !important}
  .product:hover{translate:0 0}
  .product:hover img{scale:1}
}
@media print{.rec{display:none}}