/* Accesos editoriales del listado de categoría: «¿Es tu primer…?» y «Los mejores…».
   2026-09-16 boceto docs/banner_miprimer.png · 2026-09-17 rediseño con la maqueta docs/mi_primer.jpg:
   fondo rosa, foto grande con destellos, título en pregunta y el CTA como círculo con flecha.
   2026-09-17 «Mi primer…» sube a rosa #fcd1e8 y las dos tarjetas se quedan sin borde (el de base ya es transparente).
   Móvil primero: tarjeta horizontal y baja. Desde 1200 px, dos columnas si hay dos. Toda la tarjeta es un enlace. */
/* 2026-09-18 · dueño: el bloque se pega a lo que tenga encima (4px → 0) y deja 12 px por debajo en vez de 16. */
.vv-accesos{display:grid;grid-template-columns:1fr;gap:10px;margin:0px 0 12px}
.vv-acceso{display:flex;align-items:center;gap:14px;min-height:84px;padding:8px 14px 8px 10px;border-radius:14px;text-decoration:none !important;color:#16163f !important;border:1px solid transparent;transition:box-shadow .15s,border-color .15s}
.vv-acceso-primer{background:#fcd1e8;border-color:transparent}
.vv-acceso-mejores{background:#f1ebfd;border-color:transparent}
/* 2026-09-27 · «¿Sabes tu talla?» → la landing de tallas. Lila claro con el morado/fucsia de esa
   página (style_condones_talla.css), para que se reconozca al llegar. */
.vv-acceso-talla{background:#efe7fb;border-color:transparent}
.vv-acceso:hover{box-shadow:0 3px 12px rgba(31,34,48,.10)}
.vv-acceso:focus-visible{outline:3px solid #16163f;outline-offset:2px}
.vv-acceso-vis{position:relative;flex:0 0 76px;width:76px;height:76px;display:flex;align-items:center;justify-content:center}
.vv-acceso-vis img{position:relative;width:68px;height:68px;object-fit:contain;display:block}
/* Destellos: decorativos, detrás de la foto */
.vv-acceso-chispas{position:absolute;top:0;left:0;width:100%;height:100%;color:#f0569a}
.vv-acceso-mejores .vv-acceso-chispas{color:#9b74e6}
.vv-acceso-talla .vv-acceso-chispas{color:#ec0868}
.vv-acceso-icono{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff}
.vv-acceso-primer .vv-acceso-icono{color:#e0115f}
.vv-acceso-talla .vv-acceso-icono{color:#3a0ca3}
.vv-acceso-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vv-acceso-tit{font-weight:700;font-size:17px;line-height:1.2;color:#16163f;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vv-acceso-sub{font-size:14px;line-height:1.3;color:#4e4d5b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* El CTA: círculo con flecha (sigue pareciendo botón sin depender del texto) */
.vv-acceso-cta{flex:0 0 44px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;box-shadow:0 2px 6px rgba(224,17,95,.25)}
.vv-acceso-cta svg{width:20px;height:20px}
.vv-acceso-primer .vv-acceso-cta{background:#e0115f}
.vv-acceso-mejores .vv-acceso-cta{background:#6d3fd1;box-shadow:0 2px 6px rgba(109,63,209,.25)}
.vv-acceso-talla .vv-acceso-cta{background:#ec0868;box-shadow:0 2px 6px rgba(236,8,104,.25)}
.vv-acceso:hover .vv-acceso-cta{filter:brightness(1.08)}
.vv-acceso:hover .vv-acceso-tit{text-decoration:underline}
/* El texto del CTA sólo para lectores de pantalla */
.vv-acceso-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Móvil: algo más compacto para que «¿Es tu primer vibrador?» quepa en una línea a 390 px */
@media (max-width:575px){
	.vv-acceso{gap:10px;padding:8px 12px 8px 6px}
	.vv-acceso-vis{flex-basis:66px;width:66px;height:66px}
	.vv-acceso-vis img{width:60px;height:60px}
	.vv-acceso-cta{flex-basis:40px;width:40px;height:40px}
	.vv-acceso-tit{font-size:16px}
	.vv-acceso-sub{font-size:13.5px}
}
/* Móvil muy estrecho: foto y círculo algo menores, el texto conserva el sitio */
@media (max-width:374px){
	.vv-acceso{gap:10px;padding:8px 10px 8px 6px;margin-top:5px}
	.vv-acceso-vis{flex-basis:60px;width:60px;height:60px}
	.vv-acceso-vis img{width:54px;height:54px}
	.vv-acceso-cta{flex-basis:38px;width:38px;height:38px}
	.vv-acceso-tit{font-size:15px}
	.vv-acceso-sub{font-size:13px}
}
/* Zona «pie» (2026-09-17): «Los mejores…» va suelta encima de la descripción de la categoría, a lo ancho del
   contenedor. Se le pone tope y se centra para que no salga una tira de 1400 px con el círculo en la otra punta. */
.vv-accesos-pie{max-width:900px;margin:22px auto 18px}
/* Dos columnas sólo con sitio: la columna de productos es 8/12 en tablet (≈ 480 px) y 9/12 en escritorio */
@media (min-width:1200px){
	.vv-accesos-2{grid-template-columns:1fr 1fr}
	.vv-acceso{min-height:92px}
}