/* Tarjeta de productos destacados de la portada.
   Va en su propio archivo y no dentro de rex.css a proposito: asi el
   navegador no puede servir una version vieja cacheada de estos estilos. */

/* Las laminas se apilan en la misma celda del grid: se ve una sola y el alto
   lo manda la mas alta, de modo que la tarjeta no salta al cambiar. */
.feature-rota{position:relative;display:grid}
.feature-rota .destacado-lamina{
  grid-area:1/1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease,visibility .5s ease;
}
.feature-rota .destacado-lamina.on{opacity:1;visibility:visible;pointer-events:auto}

/* La columna de la foto lleva alto propio. Sin esto, una foto de 2000 px se
   dibuja a tamano natural y estira la tarjeta a lo largo de media pagina. */
.feature-rota .feature-vis{
  min-height:0;
  height:clamp(300px,32vw,420px);
  padding:26px;
}
.feature-rota .destacado-foto{
  width:100%;height:100%;
  object-fit:contain;display:block;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.45));
}
/* Con foto: va sobre blanco, con sombra suave */
.feature-rota .feature-vis.vis-blanca{background:#fff}
.feature-rota .vis-blanca .destacado-foto{filter:drop-shadow(0 14px 24px rgba(0,0,0,.14))}
.feature-rota .destacado-sinfoto{opacity:.26;color:#fff;transform:scale(2.6)}

/* El texto se aprieta un poco respecto del bloque institucional: son cuatro
   datos del producto y no un parrafo de marca. */
.feature-rota .feature-txt{padding:46px 48px}
.feature-rota .feature-txt h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.feature-rota .feature-txt p{margin:.8rem 0 1.3rem;font-size:1rem}
.feature-rota .feature-list{gap:.6rem;margin-bottom:1.5rem}
.feature-rota .feature-list li{font-size:.95rem}

.feature-rota .hero-flecha{z-index:2}
.feature-rota:hover .hero-flecha{opacity:1}
.feature-rota .destacado-puntos{z-index:2;bottom:16px}
.feature-rota .hero-punto{background:rgba(255,255,255,.4)}
.feature-rota .hero-punto.on{background:#fff}

@media (prefers-reduced-motion:reduce){
  .feature-rota .destacado-lamina{transition:none}
}

@media (max-width:900px){
  .feature-rota .hero-flecha{opacity:1;width:34px;height:34px}
  .feature-rota .feature-vis{height:clamp(240px,52vw,320px)}
  .feature-rota .feature-txt{padding:34px 26px}
}