/* =====================================================================
   NUVESCI PEPTIDE · Capa visual moderna (v2)
   Se carga DESPUÉS de estilos.css y sólo cambia apariencia.
   Para volver al diseño clásico: quitar este archivo y js/efectos.js
   de index.html (copia completa en versiones/v1-diseno-clasico/).
   ===================================================================== */
:root {
  --vidrio: rgba(5, 57, 47, .72);
  --vidrio-claro: rgba(255, 255, 255, .72);
  --brillo-oro: 0 0 0 1px rgba(217,183,100,.35), 0 18px 50px -12px rgba(217,183,100,.35);
  --sombra-suave: 0 1px 1px rgba(3,42,34,.04), 0 12px 32px -8px rgba(3,42,34,.14);
  --sombra-alta: 0 2px 4px rgba(3,42,34,.06), 0 28px 60px -16px rgba(3,42,34,.32);
  --radio: 20px;
  --curva: cubic-bezier(.2, .8, .2, 1);
}

body {
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(217,183,100,.10), transparent 60%),
    radial-gradient(900px 700px at 100% 30%, rgba(5,57,47,.07), transparent 60%),
    var(--crema-2);
  background-attachment: fixed;
}
::selection { background: var(--oro-500); color: var(--verde-900); }
html { scrollbar-color: var(--verde-700) var(--crema); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--crema); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--verde-700), var(--verde-900)); border-radius: 99px; border: 2px solid var(--crema); }

/* ---------- Barra de progreso de lectura ---------- */
#progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--oro-700), var(--oro-500), #f3dc9a);
  box-shadow: 0 0 12px rgba(217,183,100,.7);
}

/* ---------- Cabecera de vidrio ---------- */
.aviso-superior { font-size: .74rem; background: linear-gradient(90deg, var(--verde-900), #06463a, var(--verde-900)); }
.cabecera {
  background: var(--vidrio);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(217,183,100,.35);
  transition: box-shadow .3s, background .3s;
}
.cabecera .contenedor { transition: height .3s var(--curva); }
.cabecera.desplazado { background: rgba(3, 42, 34, .86); box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); }
.cabecera.desplazado .contenedor { height: 60px; }
/* Logotipo sin caja de fondo: sólo una sombra suave que lo despega del verde. */
.marca img, .pie img.logo-pie, .acceso-arte img {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)) drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.marca img { transition: height .3s var(--curva), filter .4s; }
.cabecera.desplazado .marca img { height: 36px; }
.marca:hover img {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)) drop-shadow(0 8px 18px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(217,183,100,.35));
}
.acceso-arte img { filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)) drop-shadow(0 20px 40px rgba(0,0,0,.45)); }

.nav a { position: relative; border-radius: 10px; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px;
  background: var(--oro-500); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--curva);
}
.nav a:not(.btn):hover::after, .nav a.activo::after { transform: scaleX(1); }
.nav a.activo { background: transparent; }
.solicitud-contador { box-shadow: 0 0 0 3px rgba(217,183,100,.25); }
.solicitud-contador.rebote { animation: rebote .6s var(--curva); }
@keyframes rebote { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@media (max-width: 960px) {
  .nav { background: rgba(3,42,34,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .cabecera.desplazado .nav { top: 62px; }
  .nav a:not(.btn)::after { display: none; }
}

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--curva), box-shadow .25s, background .2s, color .2s, border-color .2s; }
.btn::before { /* destello que cruza el botón */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--curva);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-oro { background: linear-gradient(135deg, #f0d790, var(--oro-500) 45%, var(--oro-600)); box-shadow: 0 8px 24px -8px rgba(217,183,100,.8); }
.btn-oro:hover { box-shadow: 0 14px 32px -8px rgba(217,183,100,.9); background: linear-gradient(135deg, #f5df9f, var(--oro-500) 45%, var(--oro-600)); }
.btn-verde { background: linear-gradient(135deg, var(--verde-600), var(--verde-800)); box-shadow: 0 8px 22px -10px rgba(3,42,34,.8); }
.btn-verde:hover { box-shadow: 0 14px 30px -10px rgba(3,42,34,.9); }
.btn-borde-claro { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(255,255,255,.04); }
.btn[disabled]:hover { transform: none; }
.btn[disabled]::before { display: none; }

/* ---------- Héroe ---------- */
.heroe {
  min-height: min(88vh, 860px); display: flex; align-items: center;
  background:
    radial-gradient(700px 420px at 80% 20%, rgba(217,183,100,.22), transparent 65%),
    radial-gradient(600px 500px at 10% 90%, rgba(21,92,76,.55), transparent 70%),
    linear-gradient(160deg, #06443a, var(--verde-900) 70%);
}
.heroe::after { display: none; }
.heroe-red { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .9; pointer-events: none; }
.heroe .contenedor { z-index: 2; }
.heroe.con-fondo .heroe-red { opacity: .45; }

/* Carrusel: el texto entra en cascada cada vez que cambia la diapositiva. */
.diapo > * { transition: opacity .6s var(--curva), transform .7s var(--curva), filter .6s; }
.diapo:not(.activa) > * { opacity: 0; transform: translateY(18px); filter: blur(4px); }
.diapo.activa > *:nth-child(2) { transition-delay: .08s; }
.diapo.activa > *:nth-child(3) { transition-delay: .16s; }
.diapo.activa > *:nth-child(4) { transition-delay: .24s; }
.visual { transition: opacity .8s ease, transform 1s var(--curva), visibility 0s .8s; }
.visual:not(.activa) { transform: translateX(30px) scale(.96); }
.visual.activa { transform: none; transition: opacity .8s ease, transform 1s var(--curva), visibility 0s; }
.anuncio-imagen { filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); animation: flotar 7s ease-in-out infinite; }
.heroe-fondo { transform: scale(1.06); transition: opacity 1.1s ease, transform 8s linear; }
.heroe-fondo.activa { transform: scale(1); }
.heroe .titulo-heroe { letter-spacing: -.005em; font-size: clamp(2.3rem, 5.4vw, 4.2rem); }
.heroe .titulo-heroe em {
  background: linear-gradient(100deg, #b8913c, #f5e3a6 30%, var(--oro-500) 50%, #f5e3a6 70%, #b8913c);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo-texto 6s linear infinite;
}
.carrusel-flecha { transition: background .2s, transform .25s var(--curva), border-color .2s; }
.carrusel-flecha:hover { transform: scale(1.1); border-color: var(--oro-500); }
.carrusel-punto i::after { box-shadow: 0 0 10px rgba(217,183,100,.8); }
/* Las animaciones de entrada del héroe aplican sólo a la primera carga, no a cada diapositiva. */
.heroe .diapo:not(:first-child) h2, .heroe .diapo:not(:first-child) .lead, .heroe .diapo:not(:first-child) .acciones, .heroe .diapo:not(:first-child) .sobretitulo { animation: none; }
.heroe::before { /* viñeta inferior */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 0; pointer-events: none;
  background: linear-gradient(transparent, rgba(3,42,34,.65));
}
.heroe .contenedor { width: min(var(--ancho), 100% - 32px); }
.heroe h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); letter-spacing: -.005em; }
.heroe h1 em {
  background: linear-gradient(100deg, #b8913c, #f5e3a6 30%, var(--oro-500) 50%, #f5e3a6 70%, #b8913c);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo-texto 6s linear infinite;
}
@keyframes brillo-texto { to { background-position: -250% 0; } }
.heroe-logo {
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.4));
  animation: aparecer 1s var(--curva) both;
  transition: filter .5s;
}
.heroe-logo:hover {
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(217,183,100,.4));
}
.sobretitulo { animation: aparecer .8s .1s var(--curva) both; }
.heroe h1 { animation: aparecer .9s .2s var(--curva) both; }
.heroe p.lead { animation: aparecer .9s .35s var(--curva) both; }
.heroe .acciones { animation: aparecer .9s .5s var(--curva) both; }
.heroe-datos { animation: aparecer .9s .65s var(--curva) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.heroe-etiqueta {
  transform: none; position: relative; border-radius: 22px; padding: 16px;
  background: linear-gradient(145deg, #fbf8ee, var(--crema));
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(217,183,100,.5), 0 0 80px -10px rgba(217,183,100,.35);
  transform-style: preserve-3d; will-change: transform;
  transition: transform .5s var(--curva);
  animation: aparecer-etiqueta 1.1s .3s var(--curva) both;
}
.heroe-etiqueta.inclinando { transition: transform .08s linear; }
.heroe-etiqueta::after { /* reflejo que sigue al cursor */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(400px circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.55), transparent 45%);
  mix-blend-mode: soft-light;
}
.heroe-etiqueta-envoltura { perspective: 1000px; animation: flotar 7s ease-in-out infinite; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes aparecer-etiqueta { from { opacity: 0; transform: rotateY(-25deg) rotateX(10deg) translateY(40px) scale(.92); } to { opacity: 1; } }
.heroe-datos { gap: 14px; border-top: 0; padding-top: 0; }
.heroe-datos div {
  flex: 1 1 150px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(217,183,100,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s, transform .3s var(--curva);
}
.heroe-datos div:hover { border-color: rgba(217,183,100,.6); transform: translateY(-3px); }
.indicador-scroll {
  position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid rgba(217,183,100,.6); border-radius: 14px;
}
.indicador-scroll::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: var(--oro-500); animation: rueda 1.8s ease-in-out infinite;
}
@keyframes rueda { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@media (max-width: 860px) { .heroe { min-height: auto; } .indicador-scroll { display: none; } }

/* ---------- Cinta en movimiento ---------- */
.cinta {
  overflow: hidden; background: var(--verde-900); border-block: 1px solid rgba(217,183,100,.35);
  padding: 14px 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cinta-pista { display: flex; width: max-content; animation: desfile 38s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta span {
  display: inline-flex; align-items: center; gap: 18px; padding-right: 18px; white-space: nowrap;
  font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-100);
}
.cinta span::after { content: "✦"; color: var(--oro-500); font-size: .8rem; }
@keyframes desfile { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.seccion-crema { background: linear-gradient(180deg, var(--crema), #f5f3ea); }
.seccion-verde {
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(217,183,100,.14), transparent 60%),
    linear-gradient(160deg, var(--verde-800), var(--verde-900));
}
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
.filete { width: 0; height: 2px; background: linear-gradient(90deg, var(--oro-500), transparent); transition: width 1s .2s var(--curva); }
.encabezado-seccion.visible .filete, .filete.visible, .sin-efectos .filete { width: 72px; }

/* ---------- Tarjetas con foco de luz ---------- */
.tarjeta, .producto, .kpi, .tabla-envoltura, .barra-filtros {
  border-radius: var(--radio); border-color: rgba(220,216,200,.8); box-shadow: var(--sombra-suave);
}
.tarjeta-categoria, .producto { --mx: 50%; --my: 50%; }
.tarjeta-categoria {
  overflow: hidden; background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .45s var(--curva), box-shadow .45s, border-color .3s;
}
.tarjeta-categoria::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(217,183,100,.22), transparent 60%);
}
.tarjeta-categoria:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: rgba(217,183,100,.7); }
.tarjeta-categoria:hover::before { opacity: 1; }
.tarjeta-categoria .icono { transition: transform .5s var(--curva), color .3s, opacity .3s; }
.tarjeta-categoria:hover .icono { transform: rotate(-12deg) scale(1.2); color: var(--oro-600); opacity: 1; }
.tarjeta-categoria .num {
  font-size: 2.6rem; background: linear-gradient(180deg, var(--oro-500), var(--oro-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.producto {
  position: relative; border-radius: 22px; transition: transform .45s var(--curva), box-shadow .45s, border-color .3s;
}
.producto::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(217,183,100,.18), transparent 60%);
}
.producto:hover { transform: translateY(-8px); box-shadow: var(--sombra-alta), var(--brillo-oro); border-color: rgba(217,183,100,.6); }
.producto:hover::after { opacity: 1; }
.producto-cabeza {
  overflow: hidden; min-height: 140px; border-bottom: 0;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(217,183,100,.28), transparent 70%),
    linear-gradient(150deg, var(--verde-700), var(--verde-900));
}
.producto-cabeza::before { /* red molecular sutil */
  content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, var(--oro-500) 2px, transparent 2.5px),
    radial-gradient(circle at 70% 60%, var(--oro-500) 2px, transparent 2.5px),
    radial-gradient(circle at 45% 85%, var(--oro-500) 1.5px, transparent 2px);
  background-size: 90px 70px;
  transition: transform 1.2s var(--curva);
}
.producto:hover .producto-cabeza::before { transform: translate(-12px, 8px) scale(1.08); }
.producto-cabeza::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro-500), transparent);
}
.producto-cabeza > * { position: relative; }
.producto-cabeza .presentacion { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background: rgba(255,255,255,.06); border-radius: 999px; padding: 4px 12px; }
.precio { font-size: 2rem; }
.producto-pie .btn-verde::after { content: "+"; font-size: 1.1rem; line-height: 0; transition: transform .3s var(--curva); }
.producto-pie .btn-verde:hover::after { transform: rotate(90deg); }

/* ---------- Proceso ---------- */
.paso::before {
  background: radial-gradient(circle at 30% 30%, var(--verde-600), var(--verde-900));
  box-shadow: 0 0 0 6px rgba(217,183,100,.08), 0 0 24px rgba(217,183,100,.25);
  transition: transform .5s var(--curva), box-shadow .5s;
}
.paso:hover::before { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(217,183,100,.14), 0 0 34px rgba(217,183,100,.5); }
.paso::after { background: linear-gradient(90deg, var(--oro-500), rgba(217,183,100,.15)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--curva); }
.paso.visible::after, .sin-efectos .paso::after { transform: scaleX(1); }
@media (max-width: 700px) { .paso::after { transform-origin: 50% 0; transform: scaleY(0); } .paso.visible::after { transform: scaleY(1); } }

/* ---------- Preguntas ---------- */
.faq details {
  border: 1px solid var(--linea); border-radius: 16px; padding: 2px 20px; margin-bottom: 10px;
  background: rgba(255,255,255,.7); transition: border-color .3s, box-shadow .3s, background .3s;
}
.faq details:hover { border-color: rgba(217,183,100,.6); }
.faq details[open] { background: #fff; box-shadow: var(--sombra-suave); border-color: var(--oro-500); }
.faq details[open] p { animation: aparecer .45s var(--curva); }
.faq summary::after { top: 10px; right: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--oro-100); line-height: 1; }

/* ---------- Encabezado de página ---------- */
.encabezado-pagina {
  position: relative; overflow: hidden; padding: 64px 0 52px;
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(217,183,100,.2), transparent 65%),
    linear-gradient(160deg, var(--verde-700), var(--verde-900));
  border-bottom: 1px solid rgba(217,183,100,.4);
}
.encabezado-pagina::before {
  content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none;
  background-image: radial-gradient(var(--oro-500) 1.2px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000); mask-image: linear-gradient(90deg, transparent 40%, #000);
}
.encabezado-pagina .contenedor { position: relative; animation: aparecer .7s var(--curva) both; }

/* ---------- Formularios ---------- */
input, select, textarea { border-radius: 12px; transition: border-color .2s, box-shadow .2s, background .2s; }
.barra-filtros { background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: sticky; top: 80px; z-index: 10; }
@media (max-width: 900px) { .barra-filtros { position: static; } }
.roles-demo label { border-radius: 14px; transition: border-color .2s, background .2s, transform .2s var(--curva); }
.roles-demo label:hover { transform: translateY(-2px); }

/* ---------- Ficha ---------- */
.ficha-visual {
  position: relative; overflow: hidden; border-radius: 26px; border: 1px solid rgba(217,183,100,.6);
  background:
    radial-gradient(400px 260px at 100% 0%, rgba(217,183,100,.25), transparent 65%),
    linear-gradient(150deg, var(--verde-700), var(--verde-900));
  box-shadow: var(--sombra-alta);
}

/* ---------- Panel administrativo ---------- */
.panel-menu { background: linear-gradient(180deg, var(--verde-900), #021f19); }
.panel-menu a { border-radius: 12px; transition: background .2s, color .2s, padding-left .25s var(--curva); }
.panel-menu a:hover { padding-left: 18px; }
.panel-menu a.activo { background: linear-gradient(90deg, rgba(217,183,100,.22), rgba(217,183,100,.04)); box-shadow: inset 3px 0 0 var(--oro-500); }
.kpi { position: relative; overflow: hidden; transition: transform .3s var(--curva), box-shadow .3s; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--verde-600), var(--oro-500)); }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tabla tr td { transition: background .15s; }
.tabla tbody tr:hover td { background: #faf6e9; }
.calculo div { border-radius: 14px; }
.calculo .destacado { background: linear-gradient(135deg, var(--verde-700), var(--verde-900)); box-shadow: 0 10px 24px -12px rgba(3,42,34,.8); }

/* ---------- Pie ---------- */
.pie {
  background:
    radial-gradient(700px 300px at 10% 0%, rgba(217,183,100,.1), transparent 60%),
    linear-gradient(180deg, var(--verde-900), #021d17);
  border-top: 1px solid rgba(217,183,100,.4);
}
.pie a { transition: color .2s, transform .2s var(--curva); }
.pie a:hover { transform: translateX(4px); }

/* ---------- WhatsApp y aviso ---------- */
.whatsapp { background: linear-gradient(135deg, #2bb36b, #1a7f4b); }
.whatsapp::before, .whatsapp::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2bb36b;
  animation: pulso 2.6s ease-out infinite; pointer-events: none;
}
.whatsapp::after { animation-delay: 1.3s; }
@keyframes pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.toast { background: rgba(3,42,34,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 40px -10px rgba(0,0,0,.5); }

/* ---------- Carrito que invita a comprar ---------- */
.carrito {
  background: rgba(255,255,255,.04);
  transition: border-color .3s, color .3s, background .3s, transform .25s var(--curva);
}
.carrito:hover { transform: translateY(-2px); background: rgba(217,183,100,.1); }
.carrito-icono::before { /* anillo que late */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--oro-500); opacity: 0;
}
/* Vacío: un pequeño balanceo cada pocos segundos para llamar la atención. */
.carrito:not(.con-items) .carrito-icono svg { animation: balanceo 5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes balanceo {
  0%, 82%, 100% { transform: rotate(0); }
  85% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 91% { transform: rotate(-8deg); } 94% { transform: rotate(4deg); }
}
/* Con productos: el contador parpadea en dorado y el ícono emite ondas. */
.carrito.con-items { border-color: var(--oro-500); color: var(--oro-100); }
.carrito.con-items .carrito-icono { background: linear-gradient(135deg, #f0d790, var(--oro-600)); color: var(--verde-900); }
.carrito.con-items .carrito-icono::before { animation: onda-carrito 1.8s ease-out infinite; }
.carrito.con-items .carrito-contador { animation: parpadeo 1.2s ease-in-out infinite; background: #fff4cf; }
@keyframes onda-carrito { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes parpadeo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,236,170,.0); filter: brightness(1); }
  50% { box-shadow: 0 0 14px 4px rgba(255,220,130,.85); filter: brightness(1.25); }
}
.carrito-contador.rebote { animation: rebote .6s var(--curva), parpadeo 1.2s .6s ease-in-out infinite; }

/* Punto que vuela al carrito al agregar */
.vuelo-carrito {
  position: fixed; z-index: 200; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff4cf, var(--oro-500) 60%, var(--oro-700));
  box-shadow: 0 0 16px 4px rgba(217,183,100,.75);
}

/* Selector de cantidad */
.cantidad { border-color: var(--oro-500); background: linear-gradient(180deg, #fffaf0, var(--oro-100)); box-shadow: 0 6px 18px -10px rgba(156,124,47,.8); animation: aparecer .35s var(--curva); }
.cantidad button { background: linear-gradient(135deg, var(--verde-600), var(--verde-800)); transition: background .2s, color .2s; }
.cantidad span { animation: cifra .3s var(--curva); }
@keyframes cifra { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* QR: aparece con un leve brillo */
.etiqueta-qr.listo svg { animation: aparecer .9s .4s var(--curva) both; }

/* ---------- Revelado al desplazarse ---------- */
.efectos .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--curva), transform .8s var(--curva); transition-delay: calc(var(--i, 0) * 70ms); }
.efectos .revelar.visible { opacity: 1; transform: none; }
.efectos #app.entrada { animation: entrada-vista .5s var(--curva); }
@keyframes entrada-vista { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .heroe-etiqueta-envoltura, .cinta-pista, .heroe h1 em, .whatsapp::before, .whatsapp::after,
  .carrito .carrito-icono svg, .carrito .carrito-icono::before, .carrito .carrito-contador { animation: none !important; }
  .efectos .revelar { opacity: 1; transform: none; }
}

@media (min-width: 961px) and (max-width: 1360px) {
  .cabecera.nav-larga .nav { background: rgba(3,42,34,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .cabecera.nav-larga.desplazado .nav { top: 62px; }
  .cabecera.nav-larga .nav a:not(.btn)::after { display: none; }
}