/* Liquid Glass: "Recomendados para ti" (index.php) / "Te podría interesar" (details.php). Panel
   casi blanco y neutro -la luz verde de fondo lavaba el bloque-: el color de marca vive solo en
   los acentos (precios, botón "Ver más"). Grid uniforme en las dos variantes (--compacta en
   index.php, --mini en details.php): todas las tarjetas iguales, sin héroe ni asimetría. */
.sv-glass-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 26px;
  padding: 26px 20px;
  /* Al plegar "Ver menos", scrollIntoView no debe dejar el título bajo el navbar fijo; despeje
     medido en vivo (ver templates/navbar.php y style.css), no un px fijo. */
  scroll-margin-top: var(--sv-navbar-clear, var(--sv-navbar-clear-fallback));
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(243, 246, 244, .62));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 24px 60px -30px rgba(10, 61, 35, .28);
}
/* Menos relleno en celular: el panel se sentía innecesariamente pesado. */
@media (max-width: 759.98px) {
  .sv-glass-section { padding: 20px 16px; border-radius: 22px; }
}

.sv-glass-header { margin-bottom: 16px; }
.sv-glass-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  color: #0a3d23;
  margin: 0;
}
/* <900px: pila vertical -imagen izquierda, texto derecha- con TODAS las tarjetas visibles sin
   scroll lateral; antes era un carrusel scroll-snap donde solo se veía una y media. Guard
   explícito por max-width: --fila3 nunca resetea flex-direction, así que sin este límite las
   tarjetas quedarían en fila también en desktop. */
@media (max-width: 899.98px) {
  .sv-glass-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .sv-glass-grid > .sv-glass-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    max-width: none;
  }
  .sv-glass-grid > .sv-glass-card .sv-glass-card__media {
    flex: 0 0 34%;
    margin-bottom: 0;
  }
  .sv-glass-grid > .sv-glass-card .sv-glass-card__body {
    min-width: 0;
    border-top: 0;
    padding-top: 0;
  }
}

/* --mini (details.php): pila móvil más densa que --compacta, para que se note comprimida ya
   antes del breakpoint de escritorio. */
@media (max-width: 899.98px) {
  .sv-glass-section--mini .sv-glass-grid { gap: 8px; }
  .sv-glass-section--mini .sv-glass-card { padding: 8px; }
  .sv-glass-section--mini .sv-glass-grid > .sv-glass-card .sv-glass-card__media { flex: 0 0 28%; }
  .sv-glass-section--mini .sv-glass-card__name { font-size: 12px; min-height: 0; }
  .sv-glass-section--mini .sv-glass-card__price { font-size: 13px; }
}

/* ===== Cover táctil de --mini (details.php "Te podría interesar"), solo <900px =====
   El negocio quiere que en celular el primer contacto con "Te podría interesar" sea un gesto
   ("Haz clic para ver productos para ti" + video corto) en vez de mostrar el catálogo de una:
   más ganas de tocar que una fila de tarjetas más. Se inyecta/retira 100% vía JS
   (js/glass-recomendados-cover.js); si JS no corre, este bloque nunca se aplica y las tarjetas
   reales -que el PHP ya imprime normal, nunca ocultas por el servidor- se ven de una, sin cover
   (mismo patrón de mejora progresiva que .sv-glass-card--previo). Nunca se toca --compacta: el
   selector siempre va prefijado con --mini. */
@media (max-width: 899.98px) {
  .sv-glass-section--mini .sv-glass-mini-cover-host { position: relative; }

  .sv-glass-section--mini .sv-glass-mini-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 14px;
    background: #0a3d23;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Easing con overshoot (mismo lenguaje que el botón de referencia del negocio: "se mueven
       hacia adelante" al salir) para que el cover se sienta despedido, no solo desvanecido. */
    transition: transform .45s cubic-bezier(.6, -0.9, .39, 1.65), opacity .35s ease;
  }
  .sv-glass-section--mini .sv-glass-mini-cover:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
  }
  .sv-glass-section--mini .sv-glass-mini-cover__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Scrim para que el texto se lea sobre cualquier fotograma del video (el clip de la cuerda/nudo
     tiene tramos claros): z-index explícito y no orden de DOM -sin esto, ::before se genera antes
     que el <video> en el árbol y, siendo los dos position:absolute con z-index:auto, el video
     terminaba pintándose ENCIMA del scrim y lo anulaba; se vio en la captura de la verificación
     manual (texto blanco sobre video claro, ilegible). */
  .sv-glass-section--mini .sv-glass-mini-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%);
  }
  .sv-glass-section--mini .sv-glass-mini-cover__texto {
    position: relative;
    z-index: 2;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
  }
  /* Clase que agrega glass-recomendados-cover.js al hacer tap, antes de desmontar el cover. */
  .sv-glass-section--mini .sv-glass-mini-cover--saliendo {
    transform: translateY(-16%) scale(1.06);
    opacity: 0;
  }
}

/* Grupo "Ver más" (renderizar_seccion_recomendados), oculto hasta desplegarse. [hidden] tiene que
   ganarle al display:flex de abajo -mismo patrón que .vn-cart-bar[hidden] en venta-carrito.css-,
   si no el grupo se pinta igual con el atributo puesto. */
.sv-glass-mas[hidden] { display: none; }
.sv-glass-mas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

/* Desktop: 3 columnas por defecto (index.php); --mini (details.php) sube a 4, ver bloques
   --compacta/--mini abajo. Gap propio del grid: antes dependía del gap vertical de .sv-glass-mas
   (14px) y quedaba en 0 entre columnas de una misma fila. */
@media (min-width: 900px) {
  .sv-glass-grid--fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: visible; }
  .sv-glass-grid--fila3 > .sv-glass-card { max-width: none; }
}

/* Panel de vidrio propio dentro del panel de la sección, con los valores exactos del sistema
   Liquid Glass del sitio. */
.sv-glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 10px 30px -12px rgba(10, 61, 35, .25), inset 0 1px 0 rgba(255, 255, 255, .7);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1), background-color .3s ease;
}
.sv-glass-card:hover,
.sv-glass-card:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 22px 42px -16px rgba(10, 61, 35, .32), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.sv-glass-card:active { transform: translateY(-2px); }

/* Entrada escalonada de las tarjetas reveladas por "Ver más recomendados" (glass-recomendados.js). */
@keyframes svGlassCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sv-glass-card--enter {
  animation: svGlassCardIn .5s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--sv-glass-delay, 0ms);
}

/* Variante con blur para el reveal del cover táctil de --mini (ver bloque "Cover táctil" más
   abajo): mismos valores de transform que svGlassCardIn -no se inventa un segundo movimiento-,
   sumando el desenfoque que se resuelve a nitidez, la referencia visual que pidió el negocio para
   que las tarjetas "se revelen" tras el tap en vez de solo aparecer. Keyframe nueva y no una
   modificación de svGlassCardIn porque esa la comparten "Ver más" (ambas variantes) y el
   scroll-stagger de --compacta. */
@keyframes svGlassCardInBlur {
  from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.sv-glass-card--enter-blur {
  animation: svGlassCardInBlur .5s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--sv-glass-delay, 0ms);
}

.sv-glass-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 34, 26, .05);
  margin-bottom: 10px;
}
/* --sv-auto-zoom (js/glass-recomendados-autozoom.js): factor 1 = sin cambio si el JS no corre.
   Custom property y no transform inline por JS a propósito -un inline le gana a cualquier regla
   de hoja de estilos, incluida :hover de abajo, y lo hubiera dejado congelado sin el scale(1.06)-;
   así :hover sigue componiendo sobre el factor calculado en vez de pisarlo. Reemplaza a mano
   parches por producto como el [data-product-id="537"]/[data-product-id="74"] de style.css: ahí
   se sigue necesitando porque .card-img-top usa object-fit:cover (recorte, no espacio en blanco),
   caso distinto que el JS nuevo no cubre. */
.sv-glass-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(var(--sv-auto-zoom, 1));
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.sv-glass-card:hover .sv-glass-card__media img { transform: scale(calc(var(--sv-auto-zoom, 1) * 1.06)); }

.sv-glass-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid rgba(17, 34, 26, .07);
}

/* Degradado recortado al texto, para que la letra se lea como parte del vidrio; el color plano
   es el fallback sin soporte de background-clip:text. */
.sv-glass-card__name {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #11221a;
  line-height: 1.32;
  min-height: 2.64em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sv-glass-card__name {
    background: linear-gradient(155deg, #0a3d23 0%, #16382a 55%, rgba(10, 61, 35, .62) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.sv-glass-card__price { font-size: 15px; font-weight: 800; color: var(--vn-esmeralda, #00713a); font-variant-numeric: tabular-nums; }
.sv-glass-card__price-old { font-size: 11.5px; font-weight: 500; color: rgba(17, 34, 26, .5); text-decoration: line-through; margin-right: 6px; }
.sv-glass-card__price--consultar { font-size: 12px; font-weight: 600; color: rgba(17, 34, 26, .55); }

/* Mini-descripción (reemplaza a "Precio a consultar" si no hay precio): tinta secundaria, el
   nombre sigue mandando en la jerarquía. */
.sv-glass-card__desc {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(17, 34, 26, .6);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Badge de cantidad en carrito (venta-carrito.js ya lo inyecta vía [data-product-id]). */
.sv-glass-card .svc-cart-qty-badge--corner {
  top: 8px;
  right: 8px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8), 0 4px 10px -3px rgba(10, 61, 35, .5);
}

/* Botón "Ver más recomendados" (glass-recomendados.js): misma familia visual que .sv-glass-card,
   con fondo más opaco para leerse como control y no como otra tarjeta. */
.sv-glass-vermas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 26px -14px rgba(10, 61, 35, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
  color: #0a3d23;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background-color .2s ease, box-shadow .2s ease;
}
.sv-glass-vermas:hover,
.sv-glass-vermas:focus-visible {
  background: rgba(255, 255, 255, .82);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(10, 61, 35, .4), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.sv-glass-vermas:active { transform: translateY(0) scale(.98); }
.sv-glass-vermas i { transition: transform .2s ease; }
.sv-glass-vermas:hover i { transform: translateY(2px); }
.sv-glass-vermas[hidden] { display: none; }

/* "Ver menos": mismo control, ocupa la posición visual que tenía "Ver más"
   (glass-recomendados.js oculta el disparador). */
.sv-glass-mas > .sv-glass-vermas { margin-top: 2px; }
.sv-glass-vermas--cerrar:hover i { transform: translateY(-2px); }

@media (min-width: 560px) {
  .sv-glass-vermas { width: auto; margin-left: auto; margin-right: auto; padding: 12px 28px; }
}

/* --compacta (index.php, dentro de .home-recs-wrap): mismas filas de 3 con tarjetas miniatura,
   para que las 3 columnas respiren. */
@media (min-width: 900px) {
  .sv-glass-section--compacta .sv-glass-grid--fila3 { gap: 10px; }
  .sv-glass-section--compacta .sv-glass-card { padding: 9px; border-radius: 16px; }
  .sv-glass-section--compacta .sv-glass-card__name { font-size: 11.5px; }
  .sv-glass-section--compacta .sv-glass-card__price { font-size: 13px; }
  .sv-glass-section--compacta .sv-glass-card__price-old { font-size: 10.5px; }
  .sv-glass-section--compacta .sv-glass-card__desc { font-size: 10.5px; }
}

/* --mini (details.php): 4 columnas con tarjetas más chicas y gap más generoso, para que se lean
   separadas pese a la densidad. Queda más compacta que index.php aunque .detail-recs-wrap
   (css/details.css) sea más ancho que .home-recs-wrap. */
@media (min-width: 900px) {
  .sv-glass-section--mini .sv-glass-grid--fila3 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .sv-glass-section--mini .sv-glass-card { padding: 8px; border-radius: 14px; }
  .sv-glass-section--mini .sv-glass-card__media { border-radius: 11px; margin-bottom: 8px; }
  .sv-glass-section--mini .sv-glass-card__name { font-size: 11px; min-height: 2.2em; }
  .sv-glass-section--mini .sv-glass-card__price { font-size: 12.5px; }
  .sv-glass-section--mini .sv-glass-card__price-old { font-size: 10px; }
  .sv-glass-section--mini .sv-glass-card__desc { font-size: 10px; }
}

/* ===== Hover "glide to reveal" (--mini, PC ≥900px con mouse real) =====
   Referencia del negocio: un widget de dígitos donde el hover en uno hace que los vecinos
   reaccionen en cadena según su distancia (custom property --active seteada vía combinador de
   hermano adyacente + :has(), sin JS). Acá se toma esa MISMA técnica pero con valores propios:
   la pieza original deja todo en scale(.5)/blur(1rem) por defecto y solo el hover deja nítido, lo
   cual en un catálogo real sería ilegible en reposo (primera impresión rota, y un usuario que
   jamás pasa el mouse por ahí vería las tarjetas siempre borrosas). Acá el reposo es siempre
   scale/blur normal; la ola de foco solo aparece cuando el mouse ya está sobre alguna tarjeta de
   la fila, y con magnitudes chicas (no blur(1rem) ni scale(.5)) para que el vecino inmediato se
   siga leyendo como "un producto", no como ruido. Solo --mini: --compacta ya tiene su propio swap
   de imagen en hover (ver bloque de microinteracciones abajo) y esta ola competiría con ese
   crossfade. (hover:hover)+(pointer:fine): pensado para mouse, no para el cover táctil de celular
   (ese es <900px, este bloque es ≥900px, nunca se solapan). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card {
    filter: blur(var(--sv-glide-blur, 0px));
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1),
                background-color .3s ease, filter .3s cubic-bezier(.2, .7, .3, 1);
  }
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible) {
    transform: translateY(-5px) scale(1.045);
  }

  /* 1 tarjeta de distancia (izquierda y derecha del hover). */
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:has(+ .sv-glass-card:is(:hover, :focus-visible)),
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible) + .sv-glass-card {
    transform: scale(.97);
    --sv-glide-blur: 1px;
  }
  /* 2 tarjetas de distancia. */
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:has(+ .sv-glass-card + .sv-glass-card:is(:hover, :focus-visible)),
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible) + .sv-glass-card + .sv-glass-card {
    transform: scale(.94);
    --sv-glide-blur: 2px;
  }
  /* 3 tarjetas de distancia (todo el ancho de una fila en el grid de 4 columnas). */
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:has(+ .sv-glass-card + .sv-glass-card + .sv-glass-card:is(:hover, :focus-visible)),
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible) + .sv-glass-card + .sv-glass-card + .sv-glass-card {
    transform: scale(.92);
    --sv-glide-blur: 2.5px;
  }

  /* Cruce entre filas: "principales" y "resto" (Ver más) son 2 <div class="sv-glass-grid--fila3">
     distintos (lib/recomendaciones.php, renderizar_seccion_recomendados()), así que los combinadores
     +/:has(+...) de arriba -pensados para vecindad dentro de UNA fila- nunca llegan de una fila a la
     otra: la fila sin el mouse se quedaba siempre nítida. Mismo tratamiento que "3 tarjetas de
     distancia" (la fila entera se trata como "lejos" del hover), sin tocar el degradado fino de la
     fila activa (selectores disjuntos: estos solo tocan la fila QUE NO tiene el :hover). */
  .sv-glass-section--mini:has(> .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible))
    .sv-glass-mas .sv-glass-grid--fila3 > .sv-glass-card {
    transform: scale(.92);
    --sv-glide-blur: 2.5px;
  }
  .sv-glass-section--mini:has(.sv-glass-mas .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible))
    > .sv-glass-grid--fila3 > .sv-glass-card {
    transform: scale(.92);
    --sv-glide-blur: 2.5px;
  }
}

/* ===== Capa de microinteracciones de --compacta (index.php "Recomendados para ti") =====
   Solo se renderiza con renderizar_tarjeta_recomendada($interactiva=true) (lib/recomendaciones.php);
   --mini no imprime este HTML. Detalle de las 4 interacciones:
   docs/plans/2026-07-25-recomendados-interacciones-design.md. Solo transform/opacity/
   grid-template-rows por frame, nunca width/height/top/left; las controla
   js/glass-recomendados-interacciones.js. */

/* 1) Swap de imagen en hover/focus (PC): segunda foto superpuesta, crossfade 300ms.
   Selector reforzado a 2 clases a propósito: ".sv-glass-card__media img" es más específico y le
   ganaba el shorthand transition completo, dejándolo sin opacity -el cambio saltaba de 0 a 1 y
   se veían ambas fotos montadas-. Fondo blanco propio en vez de mix-blend-mode:multiply: con
   multiply en las dos capas, a medio fade las fotos se mezclaban entre sí y no solo contra el
   fondo de la tarjeta. */
.sv-glass-card__media .sv-glass-card__media-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: normal; /* anula el multiply de .sv-glass-card__media img */
  background: #fff;
  opacity: 0;
  transition: opacity .3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sv-glass-card:hover .sv-glass-card__media .sv-glass-card__media-hover,
  .sv-glass-card:focus-within .sv-glass-card__media .sv-glass-card__media-hover { opacity: 1; }
}

/* 4) Pastilla typewriter (PC): JS escribe el texto y agrega .is-visible en hover/focus. */
.sv-glass-card__typewriter {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 1;
  max-width: calc(100% - 16px);
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--vn-esmeralda, #00713a);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px -6px rgba(10, 61, 35, .4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.sv-glass-card__typewriter.is-visible { opacity: 1; transform: translateY(0); }

/* 2) Botón expandir + panel de tags adicionales (click/tap, no solo PC). Truco grid-template-rows
   0fr->1fr: anima a la altura real del contenido sin medirla en JS (sin layout thrashing). */
.sv-glass-card__expand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 6px;
  border-radius: 999px;
  border: 1px solid rgba(17, 34, 26, .12);
  background: rgba(255, 255, 255, .7);
  color: var(--vn-esmeralda, #00713a);
  font-size: 11px;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.sv-glass-card__expand:hover,
.sv-glass-card__expand:focus-visible { background: #fff; }
.sv-glass-card__expand.is-expanded { transform: rotate(45deg); }

.sv-glass-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s ease;
}
.sv-glass-card__reveal.is-expanded { grid-template-rows: 1fr; }
.sv-glass-card__reveal-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}
.sv-glass-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 113, 58, .08);
  color: var(--vn-esmeralda, #00713a);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

/* 3) Entrada por scroll: reutiliza --enter/svGlassCardIn (ya definida arriba para "Ver más").
   JS agrega --previo al iniciar y lo cambia por --enter cuando IntersectionObserver dispara. */
.sv-glass-card--previo {
  opacity: 0;
  transform: translateY(16px);
}

@media (min-width: 900px) {
  /* align-items:start: al expandir una tarjeta (#2), la fila crece para esa tarjeta sin
     estirar verticalmente a sus vecinas del mismo renglón (solo empuja la fila de abajo). */
  .sv-glass-section--compacta .sv-glass-grid--fila3 { align-items: start; }
}

/* Sin soporte de backdrop-filter: vidrio más opaco, para no perder contraste sobre el fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sv-glass-card, .sv-glass-vermas { background: rgba(255, 255, 255, .92); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-glass-card { transition-duration: .01ms !important; }
  .sv-glass-card--enter { animation-duration: .01ms !important; }
  .sv-glass-vermas { transition-duration: .01ms !important; }
  .sv-glass-card__media img { transition: none !important; }
  .sv-glass-card:hover .sv-glass-card__media img { transform: scale(var(--sv-auto-zoom, 1)); }
  /* Ola "glide to reveal" del hover de PC (--mini): mismo criterio que el zoom de arriba -se anula
     el efecto entero, no solo su transición-, para que un vecino no salte a blur/escala reducida
     de golpe. Queda solo el lift plano que ya existía antes de esta capa. */
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card { filter: none !important; }
  .sv-glass-section--mini .sv-glass-grid--fila3 > .sv-glass-card:is(:hover, :focus-visible) {
    transform: translateY(-5px) !important;
  }
  .sv-glass-card__media-hover,
  .sv-glass-card__typewriter,
  .sv-glass-card__expand,
  .sv-glass-card__reveal { transition-duration: .01ms !important; }
  /* El cover en sí: glass-recomendados-cover.js ya elige --enter (sin blur) en vez de
     --enter-blur cuando detecta reduced-motion, así que solo falta apagar la transición de
     salida del propio cover -si no, el overshoot cubic-bezier igual se sentiría, aunque el
     reveal de las tarjetas ya no traiga blur-. */
  .sv-glass-mini-cover { transition-duration: .01ms !important; }
}

/* index.php: sección independiente del widget de destacados (sin wrapper compartido); solo
   controla su propio ancho/centrado. */
.home-recs-wrap {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 16px;
}
@media (max-width: 759.98px) {
  .home-recs-wrap { margin: 24px auto 0; }
}