/* =========================================================
   Tema de prueba «Vino»: fondo líquido vino tinto + textos claros
   (se carga solo desde tema.js en el sitio de prueba)
   ========================================================= */
html.tema-vino {
  --bg: #2a0914;
  --bg-2: #3a0f1f;
  --card: rgba(255, 236, 241, .07);
  --line: rgba(255, 222, 230, .17);
  --text: #f6e9ec;
  --muted: #e2cbd1;
  --gold: #f3b9c6;
  --gold-2: #f6d4db;
  --violet: #d9a9b6;
  --title: #ffeef2;
  --strong: #ffffff;
  --on-accent: #4b1224;
  color-scheme: dark;
}
html.tema-vino body { background: #2a0914; color: var(--text); }

/* ---- Fondo líquido: manchas de vino que se mueven lentamente ---- */
html.tema-vino body::before,
html.tema-vino body::after {
  content: ""; position: fixed; inset: -30%; z-index: -2; pointer-events: none; will-change: transform;
}
html.tema-vino body::before {
  background:
    radial-gradient(32% 38% at 22% 28%, rgba(156, 34, 72, .95), transparent 70%),
    radial-gradient(30% 34% at 78% 22%, rgba(110, 20, 52, .95), transparent 70%),
    radial-gradient(36% 40% at 70% 78%, rgba(176, 62, 96, .8), transparent 70%),
    radial-gradient(30% 36% at 18% 82%, rgba(92, 14, 40, .95), transparent 70%),
    linear-gradient(150deg, #2b0714 0%, #4a0f26 45%, #24050f 100%);
  animation: vinoA 26s ease-in-out infinite alternate;
}
html.tema-vino body::after {
  z-index: -1; mix-blend-mode: screen; opacity: .55;
  background:
    radial-gradient(22% 26% at 60% 40%, rgba(214, 110, 140, .55), transparent 70%),
    radial-gradient(26% 30% at 30% 60%, rgba(140, 40, 90, .55), transparent 70%),
    radial-gradient(20% 24% at 85% 65%, rgba(232, 150, 170, .35), transparent 70%);
  animation: vinoB 19s ease-in-out infinite alternate;
}
@keyframes vinoA {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-3%, 4%, 0) rotate(-6deg) scale(1.04); }
}
@keyframes vinoB {
  0%   { transform: translate3d(-4%, 2%, 0) rotate(0deg) scale(1.05); }
  100% { transform: translate3d(5%, -4%, 0) rotate(14deg) scale(.95); }
}

/* ---- Zoom leve al centro: transición suave ---- */
html.tema-vino .section-head, html.tema-vino .product, html.tema-vino .tee-card, html.tema-vino .drawer, html.tema-vino .intl,
html.tema-vino .team-member, html.tema-vino .member, html.tema-vino .trust-item, html.tema-vino .event, html.tema-vino .faq-item, html.tema-vino .word-card,
html.tema-vino .video-frame, html.tema-vino .moment, html.tema-vino .closing-word, html.tema-vino .step, html.tema-vino .symbol, html.tema-vino .stat, html.tema-vino .promo-card {
  transition: scale .45s cubic-bezier(.2, .8, .3, 1), transform .35s, box-shadow .35s, border-color .35s, background .35s, opacity .6s;
}

/* ---- Superficies tipo vidrio ---- */
html.tema-vino .product, html.tema-vino .tee-card, html.tema-vino .drawer, html.tema-vino .promo-card, html.tema-vino .trust-item:hover,
html.tema-vino .listen-options button, html.tema-vino .pay-data, html.tema-vino .field input, html.tema-vino .field select,
html.tema-vino .field textarea, html.tema-vino .occasions li, html.tema-vino .intl-countries li, html.tema-vino .intl-stats div,
html.tema-vino .tees-filters button, html.tema-vino .album-tabs button, html.tema-vino .tee-sizes button, html.tema-vino .tee-guide,
html.tema-vino .qty button, html.tema-vino .cf-nav, html.tema-vino .tee-nav, html.tema-vino .tee-close {
  background: rgba(255, 236, 241, .08); border-color: var(--line); color: var(--text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html.tema-vino .cf-nav:hover { background: rgba(255, 236, 241, .2); }
html.tema-vino .field input::placeholder, html.tema-vino .field textarea::placeholder { color: rgba(246, 233, 236, .5); }
html.tema-vino .field select option { background: #3a0f1f; color: #fff; }
html.tema-vino .intl, html.tema-vino .drawer[aria-selected="true"], html.tema-vino .promo-box, html.tema-vino .word-card {
  background: linear-gradient(135deg, rgba(255, 236, 241, .12), rgba(255, 236, 241, .04)); border-color: rgba(255, 222, 230, .28);
}
html.tema-vino .drawer[aria-selected="true"] { border-color: var(--gold); }
html.tema-vino .drawer[aria-selected="true"]::after { background: #5a1830; border-color: var(--gold); }
html.tema-vino .product-img { background: rgba(255, 236, 241, .06); }
html.tema-vino .marquee, html.tema-vino .agenda, html.tema-vino .discography, html.tema-vino .venues, html.tema-vino .footer { background: rgba(20, 3, 9, .25); }
html.tema-vino .tee-guide tr.on td { background: rgba(243, 185, 198, .22); color: #fff; }
html.tema-vino .tee-made { background: rgba(243, 185, 198, .18); color: var(--gold-2); }
html.tema-vino .tees-filters button[aria-pressed="true"], html.tema-vino .album-tabs button[aria-selected="true"],
html.tema-vino .tee-sizes button[aria-checked="true"] { background: #f3c2cd; border-color: #f3c2cd; color: #4b1224; }
html.tema-vino .tee-badge { background: #f3c2cd; color: #4b1224; }

/* ---- Botones ---- */
html.tema-vino .btn-gold { background: linear-gradient(135deg, #fde3e9, #eaa6b6); color: #4b1224; box-shadow: 0 10px 30px rgba(10, 0, 4, .35); }
html.tema-vino .btn-gold:hover { box-shadow: 0 14px 40px rgba(234, 166, 182, .35); }
html.tema-vino .btn-ghost { border-color: rgba(255, 222, 230, .4); color: var(--text); background: rgba(255, 236, 241, .06); }

/* ---- Menú, reproductor y paneles ---- */
html.tema-vino .nav.scrolled { background: rgba(42, 9, 20, .78); border-bottom: 1px solid var(--line); }
html.tema-vino .player { background: rgba(58, 15, 31, .88); color: var(--text); }
html.tema-vino .tee-view, html.tema-vino .cart-panel, html.tema-vino .listen, html.tema-vino .promo-box { background-color: #34101f; color: var(--text); }
@media (max-width: 900px) {
  html.tema-vino .nav .nav-links { background: rgba(52, 14, 30, .97); border-color: var(--line); }
}

/* ---- Textos sobre fotos y títulos con brillo ---- */
html.tema-vino .title-lg, html.tema-vino .intl-title, html.tema-vino h2, html.tema-vino h3 { color: var(--title); }
html.tema-vino .title-lg { text-shadow: 0 2px 24px rgba(255, 190, 205, .18); }
html.tema-vino .eyebrow { color: var(--gold); }
html.tema-vino .floral-divider { color: var(--gold); }
html.tema-vino a:not(.btn) { color: inherit; }

/* ---- Logo de portada: brillo suave en vez de sombra oscura ---- */
html.tema-vino .logo-anim { filter: drop-shadow(0 0 22px rgba(255, 196, 212, .28)) drop-shadow(0 2px 8px rgba(18, 0, 7, .45)); }
html.tema-vino .brand-logo, html.tema-vino .footer-logo { filter: drop-shadow(0 1px 6px rgba(18, 0, 7, .35)); }

/* ---- Fondo tipo video (canvas): reemplaza las manchas fijas ---- */
#fondoVino { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; filter: blur(8px) saturate(1.1); transform: scale(1.05); }
html.tema-vino.con-video body::before, html.tema-vino.con-video body::after { display: none; }
html.tema-vino.con-video body { background: #2a0914; }
/* Al pasar el mouse la tarjeta además brilla un poco */
html.tema-vino .product:hover, html.tema-vino .tee-card:hover, html.tema-vino .drawer:hover, html.tema-vino .member:hover,
html.tema-vino .event:hover, html.tema-vino .moment:hover { box-shadow: 0 26px 60px rgba(10, 0, 4, .45), 0 0 0 1px rgba(255, 210, 222, .35); }

/* ---- Cajas en 3D: sombra en capas (relieve) y, al pasar el mouse, se levantan y giran ---- */
html.tema-vino .product, html.tema-vino .tee-card, html.tema-vino .drawer, html.tema-vino .event, html.tema-vino .trust-item, html.tema-vino .moment, html.tema-vino .promo-card, html.tema-vino .why-card, html.tema-vino .kit-item, html.tema-vino .faq, html.tema-vino .countdown-card, html.tema-vino .steps li, html.tema-vino .symbols li, html.tema-vino .intl-stats div, html.tema-vino .intl-countries li, html.tema-vino .intl, html.tema-vino .word-card, html.tema-vino .video-frame {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 232, 238, .14), inset 0 -1px 0 rgba(0, 0, 0, .28),
              0 4px 10px rgba(8, 0, 3, .35), 0 18px 40px rgba(8, 0, 3, .42);
  transition: scale .45s cubic-bezier(.2, .8, .3, 1), transform .25s ease-out, box-shadow .35s, border-color .35s, background .35s;
}
html.tema-vino .en-3d {
  z-index: 4;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255, 232, 238, .22), 0 14px 26px rgba(8, 0, 3, .45), 0 38px 80px rgba(8, 0, 3, .58),
              0 0 0 1px rgba(255, 210, 222, .38), 0 0 46px rgba(214, 80, 100, .22) !important;
  border-color: rgba(255, 210, 222, .45) !important;
}
/* Brillo que sigue al cursor sobre la caja */
html.tema-vino .en-3d:not(.drawer)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 228, 236, .16), transparent 60%);
}

/* ---- Calidad: menús opacos, integrantes limpias, logo nítido, cajones sin desbordes ---- */
html.tema-vino .nav-sub { background: rgba(26, 7, 15, .97) !important; border: 1px solid var(--line); box-shadow: 0 20px 44px rgba(0, 0, 0, .5); }
html.tema-vino .nav-sub a:hover { background: rgba(255, 220, 230, .12); }
@media (max-width: 900px) {
  html.tema-vino .nav .nav-links { background: rgba(24, 6, 13, .985) !important; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 100vmax rgba(8, 0, 4, .55) !important; }
}
html.tema-vino .member, html.tema-vino .team-member { background: none !important; border: 0 !important; box-shadow: none !important; }
html.tema-vino .member img { box-shadow: 0 18px 40px rgba(6, 0, 3, .45); transition: transform .4s cubic-bezier(.2, .8, .3, 1), box-shadow .4s; }
html.tema-vino .member:hover img { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(6, 0, 3, .55); }
html.tema-vino .brand-logo { filter: none !important; height: 50px; }
html.tema-vino .drawer { overflow: hidden; }
html.tema-vino .drawer-img { width: 112px; height: 112px; }
html.tema-vino .drawer-img img { width: 68px; height: 84px; top: 50%; }
html.tema-vino .drawer-img img:first-child { left: 6px; top: 8px; transform: rotate(-4deg); }
html.tema-vino .drawer-img img:last-child { right: 6px; bottom: 8px; top: auto; transform: rotate(4deg); }
html.tema-vino .drawer:hover .drawer-img img:first-child { transform: rotate(-6deg); }
html.tema-vino .drawer:hover .drawer-img img:last-child { transform: rotate(6deg); }
html.tema-vino .drawer.en-3d { transform: translateY(-4px) !important; }
@media (max-width: 760px) {
  html.tema-vino .drawer-img { width: 96px; height: 90px; }
  html.tema-vino .drawer-img img { width: 56px; height: 70px; }
  html.tema-vino .brand-logo { height: 42px; }
}

html.tema-vino .tl-card, html.tema-vino .med-main, html.tema-vino .verse-card {
  background: linear-gradient(135deg, rgba(255, 236, 241, .10), rgba(255, 236, 241, .04)); border-color: rgba(255, 222, 230, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 232, 238, .14), 0 4px 10px rgba(8, 0, 3, .35), 0 18px 40px rgba(8, 0, 3, .42);
}
html.tema-vino .med-main blockquote, html.tema-vino .med-old blockquote { background: rgba(255, 236, 241, .06); }
html.tema-vino .timeline li::before { box-shadow: 0 0 0 5px rgba(243, 185, 198, .15), 0 0 14px rgba(243, 185, 198, .5); }

/* ---- Márgenes internos: toda caja con texto respira por dentro ---- */
html.tema-vino .symbols li, html.tema-vino .steps li, html.tema-vino .why-card, html.tema-vino .kit-item,
html.tema-vino .intl-stats div, html.tema-vino .trust-item, html.tema-vino .event {
  padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255, 222, 230, .2);
  background: linear-gradient(135deg, rgba(255, 236, 241, .09), rgba(255, 236, 241, .03));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.tema-vino .symbols li h3 { margin-top: 0; }
html.tema-vino .symbols li p:last-child, html.tema-vino .steps li p:last-child { margin-bottom: 0; }
html.tema-vino .symbols { display: grid; gap: 16px; }
html.tema-vino .faq { border-radius: 16px; overflow: hidden; }
html.tema-vino .en-3d { transition: scale .35s cubic-bezier(.2, .8, .3, 1), transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .35s; }

/* ---- Contraste: íconos de redes y textos secundarios ---- */
html.tema-vino .socials a, html.tema-vino .nav-social a { background: rgba(255, 236, 241, .14) !important; color: #fff !important; border: 1px solid rgba(255, 222, 230, .35); box-shadow: 0 6px 16px rgba(6, 0, 3, .35); }
html.tema-vino .socials a:hover, html.tema-vino .nav-social a:hover { background: #f3c2cd !important; color: #4b1224 !important; }
html.tema-vino .socials svg circle[fill="currentColor"] + path, html.tema-vino .nav-social svg circle[fill="currentColor"] + path { stroke: #4b1224; }
html.tema-vino .tl-year { color: #f6cdd6; }

html.tema-vino .ship-box { background: rgba(255, 236, 241, .05); border-color: var(--line); }
html.tema-vino .ship-links a { background: rgba(255, 236, 241, .08); color: var(--text); }

/* ---- Menú siempre legible: fondo vino oscuro también arriba de la portada ---- */
html.tema-vino .nav { background: rgba(24, 6, 13, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 222, 230, .12); }
html.tema-vino .nav .nav-links a { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
@media (max-width: 900px) { html.tema-vino .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(24, 6, 13, .94); } }

/* ---- Portada 3D: integrantes despegadas del fondo ---- */
html.tema-vino .hero-photo.hero-3d { background: none; overflow: visible; }
html.tema-vino .hero-photo.hero-3d::before { display: none; }
html.tema-vino .hero-photo.hero-3d img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,.6) 84%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,.6) 84%, transparent 98%);
  filter: drop-shadow(0 26px 34px rgba(6, 0, 3, .55)) drop-shadow(0 4px 10px rgba(6, 0, 3, .4)) drop-shadow(0 0 1px rgba(255, 228, 236, .35));
  transform-origin: 50% 80%; will-change: transform;
}
/* Luz suave detrás de ellas (como foco de escenario) */
html.tema-vino .hero-glow {
  position: absolute; left: 50%; top: 4%; width: min(980px, 92vw); height: 92%; margin-left: max(-490px, -46vw); z-index: 0; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 46%, rgba(246, 196, 208, .30), rgba(200, 110, 140, .14) 45%, transparent 72%);
  filter: blur(8px); will-change: transform;
}
html.tema-vino .hero-photo.hero-3d figcaption span { text-shadow: 0 2px 10px rgba(6, 0, 3, .9), 0 0 2px rgba(6, 0, 3, .9); }
html.tema-vino .promo-badge { color: #4b1224; }
html.tema-vino .promo-soon { color: #fff; }

html.tema-vino .tee-fav { background: rgba(30, 8, 16, .65); color: #fff; border-color: rgba(255, 222, 230, .35); }
html.tema-vino .tee-fav[aria-pressed="true"], html.tema-vino .tee-fav-btn[aria-pressed="true"] { background: #f3c2cd; color: #4b1224; border-color: #f3c2cd; }
html.tema-vino .tee-fav-btn { background: rgba(255, 236, 241, .08); color: var(--text); border-color: var(--line); }
html.tema-vino .fav-bar { background: rgba(20, 5, 11, .92); border: 1px solid rgba(255, 222, 230, .2); }

html.tema-vino .tee-flow { background: rgba(243, 185, 198, .16); color: var(--gold-2); }

/* ---- Nitidez: el aviso del concierto sin zoom ni vidrio (el texto escalado se ve borroso) ---- */
html.tema-vino .promo-box, html.tema-vino .promo-card, html.tema-vino .promo-box * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; scale: none !important; }
html.tema-vino .promo-card { transform: none !important; background: #3a1222 !important; }
html.tema-vino .promo-box { background: #2c0c19 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html.tema-vino .promo-count span { background: #4a1a2e; color: #f3d6dc; }
html.tema-vino .promo-count b { color: #fff; }
html.tema-vino .promo-body, html.tema-vino .promo-body :not(.btn):not(.btn *) { color: #fbeef1; }
html.tema-vino .promo-kicker { color: #f3b9c6 !important; }

/* ---- Contraste garantizado: botones rosados siempre con texto vino oscuro ---- */
html.tema-vino .btn-gold, html.tema-vino .btn-gold *, html.tema-vino .fav-see, html.tema-vino .fav-cart { color: #4b1224 !important; }
html.tema-vino .promo-note, html.tema-vino .promo-body small { color: #f0dbe0 !important; }html.tema-vino .wa-tip { background: #fbe9ee !important; color: #4b1224 !important; }
html.tema-vino .album-tabs button[aria-selected="true"] small { color: rgba(75, 18, 36, .75) !important; }

/* ---- Nombres de la portada: más abajo, sobre la parte oscura, con sombra ---- */
html.tema-vino .hero .hero-photo.hero-3d figcaption { bottom: 9%; }
html.tema-vino .hero .hero-photo.hero-3d figcaption span {
  font-size: clamp(17px, 1.7vw, 22px); color: #fff4f6;
  text-shadow: 0 2px 4px rgba(10, 0, 4, .95), 0 4px 14px rgba(10, 0, 4, .85), 0 0 26px rgba(10, 0, 4, .7);
}
@media (max-width: 760px) { html.tema-vino .hero .hero-photo.hero-3d figcaption { bottom: 7%; } html.tema-vino .hero .hero-photo.hero-3d figcaption span { font-size: 14px; } }
html.tema-vino .hero-photo.hero-3d { -webkit-mask-image: none !important; mask-image: none !important; }

/* ---- Portada sin cortes: la foto se funde abajo y a los lados ---- */
html.tema-vino .hero-photo.hero-3d img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.42) 74%, rgba(0,0,0,.16) 86%, transparent 96%),
                      linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 5%, #000 13%, #000 87%, rgba(0,0,0,.6) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,.75) 62%, rgba(0,0,0,.42) 74%, rgba(0,0,0,.16) 86%, transparent 96%),
              linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 5%, #000 13%, #000 87%, rgba(0,0,0,.6) 95%, transparent 100%);
  mask-composite: intersect;
  filter: drop-shadow(0 0 1px rgba(255, 228, 236, .3));
}
html.tema-vino .hero .hero-photo.hero-3d figcaption { bottom: 15%; }

/* ---- Integrantes recortadas: fondo palo rosa con luz, que combina con el vino ---- */
html.tema-vino .member img.recortada {
  background: radial-gradient(80% 70% at 50% 30%, #efe4de 0%, #dcc6bd 40%, #bc9b93 74%, #8f6b69 100%);
  object-fit: cover; object-position: center 20%;
}

/* ---- Integrantes: nombre y voz centrados bajo cada foto ---- */
html.tema-vino .member { text-align: center; }
html.tema-vino .member h3 { margin-top: 14px; }
html.tema-vino .member p { margin-top: 2px; letter-spacing: .04em; }

html.tema-vino .voz { background: linear-gradient(135deg, rgba(255, 236, 241, .12), rgba(255, 236, 241, .04)); border-color: rgba(255, 222, 230, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 10px rgba(8, 0, 3, .35), 0 16px 34px rgba(8, 0, 3, .4); }
html.tema-vino .voz-inicio, html.tema-vino .voz-hoy { border-color: #f3b9c6; }
html.tema-vino .voz::before { background: #f3b9c6; box-shadow: 0 0 0 4px rgba(243, 185, 198, .18), 0 0 12px rgba(243, 185, 198, .6); }
html.tema-vino .voces-ring::before { border-color: rgba(243, 185, 198, .5); }
html.tema-vino .voz-year { color: #f6cdd6; }