/* ══════════════════════════════════════════════════════════════════
LA PLAYA INTELLIGENCE DESIGN SYSTEM — Design tokens (Sprint C1)
Centralized tokens: color, radius, space, dur, easing, z-index, breakpoints.
Legacy vars (--gold, --white, --serif, --sans) mantenidas para compat.
══════════════════════════════════════════════════════════════════ */
:root {
/* — Legacy compat (no romper CSS existente) — */
--bg:#0a2540; --gold:#d4b869; --gold-soft:#c9a84c; --white:#f4ede0;
--gray:#8a99a8; --gray-2:#6e7d8c;
--sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Plus Jakarta Sans','Inter',system-ui,'Segoe UI',Roboto,sans-serif;
--serif:'Cormorant Garamond',Georgia,serif;
--mono:ui-monospace,'SF Mono',Menlo,Monaco,'Cascadia Mono',monospace;
/* — Colores base carbón (superficies diferenciadas) — */
--surface-0:#04090f; /* fondo más profundo */
--surface-1:#0a2540; /* fondo principal */
--surface-2:#0e2c4a; /* cards/panels */
--surface-3:#153458; /* elevated */
--surface-inv:#f4ede0; /* invertido (texto) */
/* — Texto — */
--text-primary:rgba(255,255,255,.92);
--text-secondary:rgba(255,255,255,.68);
--text-tertiary:rgba(255,255,255,.45);
--text-inverse:#0a2540;
/* — Marca (dorado como acento) — */
--brand-gold:#d4b869;
--brand-gold-2:#e6cd80;
--brand-gold-soft:rgba(212,184,105,.18);
--brand-gold-border:rgba(212,184,105,.28);
/* — Estados — */
--success:#4ade80;
--warning:#fbbf24;
--danger:#f87171;
--info:#60a5fa;
/* — Bordes — */
--border-subtle:rgba(212,184,105,.12);
--border-default:rgba(212,184,105,.22);
--border-strong:rgba(212,184,105,.42);
/* — Radios — */
--radius-xs:.28rem;
--radius-sm:.5rem;
--radius-md:.75rem;
--radius-lg:1rem;
--radius-xl:1.4rem;
--radius-full:999px;
/* — Espaciado (base 4px scale) — */
--space-1:.25rem; /* 4 */
--space-2:.5rem; /* 8 */
--space-3:.75rem; /* 12 */
--space-4:1rem; /* 16 */
--space-5:1.5rem; /* 24 */
--space-6:2rem; /* 32 */
--space-7:3rem; /* 48 */
/* — Tipografía escala — */
--font-xs:.65rem;
--font-sm:.75rem;
--font-base:.9rem;
--font-md:1rem;
--font-lg:1.15rem;
--font-xl:1.35rem;
--font-2xl:1.75rem;
--font-3xl:2.25rem;
/* — Sombras — */
--shadow-sm:0 2px 6px rgba(0,0,0,.28);
--shadow-md:0 6px 18px rgba(0,0,0,.35);
--shadow-lg:0 16px 44px rgba(0,0,0,.5);
--shadow-xl:0 22px 60px rgba(0,0,0,.55);
--shadow-gold:0 4px 14px rgba(212,184,105,.22);
/* — Blur (materiales translúcidos SELECTIVOS) — */
--blur-sm:8px;
--blur-md:14px;
--blur-lg:20px;
--blur-xl:24px;
/* — Duraciones — */
--dur-fast:.15s;
--dur-base:.28s;
--dur-slow:.5s;
/* — Easing — */
--ease-out-expo:cubic-bezier(.22,1,.36,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--ease-spring:cubic-bezier(.16,1,.3,1);
/* — Z-index scale — */
--z-base:1;
--z-sticky:10;
--z-tabbar:100;
--z-fab:900;
--z-overlay:9985;
--z-modal:9995;
--z-toast:9999;
/* — Breakpoints (JS-accessible via getComputedStyle) — */
--bp-sm:480px;
--bp-md:700px;
--bp-lg:1024px;
--bp-xl:1240px;
color-scheme:dark;
}
@media(prefers-contrast:more){
:root{
--text-primary:#fff;
--text-secondary:rgba(255,255,255,.85);
--border-subtle:rgba(212,184,105,.3);
--border-default:rgba(212,184,105,.5);
}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* ── Sprint C5 — WCAG 2.2 AA: focus visible global, skip-link, forced-colors, reduced-motion ── */
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px;border-radius:.35rem;transition:outline-color var(--dur-fast) ease}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
/* Skip to content link — invisible salvo focus keyboard */
.skip-link{position:absolute;top:-40px;left:.5rem;background:var(--brand-gold);color:#0a2540;padding:.6rem 1rem;border-radius:.4rem;font-family:var(--sans);font-weight:600;font-size:.85rem;text-decoration:none;z-index:10010;transition:top .2s ease}
.skip-link:focus{top:.5rem}
@media(forced-colors:active){
.ds-card,.ds-card-catalog,.qp-chip,.tabbar-item,.more-item,.event-chip{border:1px solid CanvasText!important}
:focus-visible{outline:2px solid Highlight!important}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
html,body{height:100%;max-width:100%}
html{overscroll-behavior-y:contain;overscroll-behavior-x:none;overflow-x:hidden}
/* iOS-polish 2026-07-27 · Safe-area tokens + tap feedback premium.
Los tokens permiten reutilizar env(safe-area-inset-*) en cualquier bloque sin repetir la función.
`overscroll-behavior-y:none` en body previene el bounce blanco de iOS al scrollear al fondo.
`:active { scale }` da micro-feedback táctil Apple-like (guardado por prefers-reduced-motion arriba). */
:root{
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
--safe-left:env(safe-area-inset-left,0px);
--safe-right:env(safe-area-inset-right,0px);
}
body{overscroll-behavior-y:none}
@media(hover:none) and (pointer:coarse){
button:active,[role="button"]:active,a.app-link:active,.tabbar-item:active,.more-item:active{
transform:scale(.97);transition:transform .1s ease;
}
}
/* PWA standalone: header con más air-top para no chocar contra Dynamic Island;
ocultar cualquier banner A2HS residual — ya está instalada, no re-ofrecer. */
.pwa-standalone .app-header{padding-top:max(1.1rem,var(--safe-top))}
.pwa-standalone #pwa-install-bar,
.pwa-standalone #ios-install-bar{display:none !important}
/* Safety net tablet 768-1023: overflow-x:clip previene scroll horizontal por elementos internos que exceden ancho (audit 2026-07-26 P0-1) */
@media(min-width:768px) and (max-width:1023px){
html,body{overflow-x:clip}
*{max-width:100vw}
}
body {
font-family:var(--sans);
background:
radial-gradient(ellipse 120% 100% at 60% 0%, rgba(30,70,130,.55) 0%, rgba(10,37,64,1) 55%),
radial-gradient(ellipse 80% 60% at 10% 80%, rgba(60,20,10,.4) 0%, transparent 60%),
#060e1a;
color:var(--white); min-height:100vh; min-height:100svh; overflow-x:hidden;
display:flex; flex-direction:column;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
touch-action:pan-y;
background-attachment:fixed;
}
/* Desktop XL: gradient premium adicional para editorial feeling (Aesop-inspired) */
@media(min-width:1440px){
body::before{
content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
background:
radial-gradient(circle at 92% 12%, rgba(212,184,105,.09) 0%, transparent 32%),
radial-gradient(circle at 8% 88%, rgba(30,70,130,.14) 0%, transparent 42%);
}
}
/* ══════════════════════════════════════════════════════════════════
APP HEADER — Rediseño premium con tokens (post Sprint C)
Material translúcido (glass) apropiado para nav superior fijo.
Layout: logo+tagline | lang toggle | store CTA pill.
Mobile compact: logo | ES/EN | icon store.
══════════════════════════════════════════════════════════════════ */
.app-header {
display:flex; align-items:center; justify-content:space-between;
padding:.7rem 1.4rem; max-width:1520px; margin:0 auto; width:100%;
background:linear-gradient(180deg,rgba(10,37,64,.72),rgba(4,9,15,.85));
backdrop-filter:blur(var(--blur-lg)) saturate(1.5);
-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(1.5);
position:sticky; top:0; z-index:var(--z-sticky); flex-shrink:0;
border-bottom:1px solid transparent;
}
/* Gold gradient bottom border (fade a los lados, focus en el centro) */
.app-header::after{
content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(212,184,105,.35) 30%,rgba(212,184,105,.5) 50%,rgba(212,184,105,.35) 70%,transparent 100%);
pointer-events:none;
}
/* Logo lockup: imagen + tagline debajo */
.app-logo {
display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
flex-shrink:0;
text-decoration:none; /* Sin underline default de */
color:inherit; /* Sin color link default (era rgb(158,158,255)) */
-webkit-tap-highlight-color:transparent;
}
.app-logo:hover,.app-logo:focus,.app-logo:visited{text-decoration:none;color:inherit}
/* Logo lockup — La Playa Academy: caja azul cobalto con texto CSS puro (sin imagen).
Ventaja: no recorta, siempre visible completo, escalable a cualquier viewport,
una sola pieza continua "LA PLAYA · ACADEMY". */
.app-logo-lockup{
display:inline-flex;align-items:stretch;
background:#005cb9; /* Azul cobalto original de La Playa */
border-radius:5px;
box-shadow:0 2px 8px rgba(0,92,185,.4),0 0 0 1px rgba(255,255,255,.08) inset;
height:32px;
padding:0 2px; /* Micro breathing dentro de la caja */
}
.app-logo-brand{
display:inline-flex;align-items:center;
padding:0 10px 0 12px;
color:#fff;
font-family:var(--sans);
font-weight:900; /* Condensed bold match al logo original */
font-size:.9rem;
letter-spacing:.06em;
line-height:1;
text-shadow:0 1px 0 rgba(0,0,0,.18);
white-space:nowrap;
}
.app-logo-divider{
display:inline-block;width:1px;height:18px;align-self:center;
background:rgba(255,255,255,.55);
margin:0 8px 0 6px;
}
.app-logo-academy{
display:inline-flex;align-items:center;padding-right:12px;
color:#fff;
font-family:var(--sans);
font-size:.85rem;font-weight:600;
letter-spacing:.005em;
line-height:1;
text-shadow:0 1px 0 rgba(0,0,0,.15);
white-space:nowrap;
}
/* Legacy .app-logo-img usado por otros (breakpoints) — mantén compat */
.app-logo-img{height:32px;width:auto;max-width:158px;display:block;object-fit:contain;object-position:left center;background:transparent;padding:0;border-radius:0;box-shadow:none}
/* Desktop XL: logo con más presencia + tagline expandida */
@media(min-width:1440px){
.app-header{padding:1rem 2rem}
.app-logo-img{height:36px;max-width:192px}
.app-logo-tag-lead{font-size:.72rem}
.app-logo-tag-sub{font-size:.72rem;letter-spacing:.14em}
}
/* Legacy tagline (no aplicar al lockup nuevo ni sus hijos) — se ajustó a :not() para evitar romper inline-flex del logo lockup */
.app-logo > span:not(.app-logo-lockup):not(.app-logo-tag) {
display:block; font-family:var(--sans); font-size:.55rem; font-weight:500;
color:rgba(212,184,105,.7); letter-spacing:.24em;
text-transform:uppercase; margin-top:.05rem;
white-space:nowrap;
}
/* Tagline v2 — dos líneas jerarquía Apple (marca fuerte + sub descriptivo) */
.app-logo-tag{
display:flex;flex-direction:column;gap:.05rem;margin-top:.15rem;
line-height:1;
}
.app-logo-tag-lead{
font-family:var(--sans);font-size:.62rem;font-weight:500;
color:rgba(255,255,255,.72);letter-spacing:.02em;
text-transform:none;white-space:nowrap;
}
.app-logo-tag-lead b{
font-weight:700;color:var(--brand-gold);letter-spacing:.005em;
}
.app-logo-tag-sub{
font-family:var(--sans);font-size:.72rem;font-weight:500;
color:rgba(255,255,255,.62);letter-spacing:.14em;
text-transform:uppercase;white-space:nowrap;
}
/* Header actions cluster — reserva min-height+min-width para evitar CLS al aparecer botones JS-added.
Medido con PerformanceObserver: crecía 308→496px width y 50→98px height (CLS +0.09). */
.app-header-actions{display:flex;align-items:center;gap:.55rem;flex-shrink:0;min-height:50px;justify-content:flex-end}
@media(min-width:768px){ .app-header-actions{min-height:98px;min-width:496px} }
/* Header icon buttons — search & cava (desktop-first) */
.hdr-icon-btn{
position:relative;display:inline-flex;align-items:center;gap:.4rem;
padding:.42rem .55rem;min-width:36px;min-height:36px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:.6rem;
color:rgba(255,255,255,.85);cursor:pointer;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) ease,color var(--dur-fast) ease;
font-family:var(--sans);
-webkit-tap-highlight-color:transparent;
}
.hdr-icon-btn:hover{background:rgba(212,184,105,.08);border-color:var(--brand-gold-border);color:#fff}
.hdr-icon-btn:active{transform:scale(.96)}
.hdr-kbd{
font-family:var(--mono);font-size:.55rem;font-weight:600;
padding:.14rem .32rem;border-radius:.28rem;
background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.1);letter-spacing:.02em;
}
.hdr-cava-badge{
position:absolute;top:-4px;right:-4px;
min-width:16px;height:16px;padding:0 4px;border-radius:999px;
background:linear-gradient(135deg,#f87171,#e94b4b);
color:#fff;font-family:var(--sans);font-size:.55rem;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;
border:2px solid var(--surface-1,#0a2540);
line-height:1;
}
.hdr-cava-badge[hidden]{display:none}
/* v-cleanup: bloque .hdr-more-* (63 líneas CSS) removido junto al dropdown HTML.
Los items del menú viven ahora únicamente en moreSheet (tabbar "Más") + entradas
contextuales de header desktop. Elimina duplicación DOM + reduce superficie CSS. */
/* Mobile: ocultar solo el kbd hint y el badge label, mantén los botones */
@media(max-width:700px){
.hdr-kbd{display:none}
.hdr-icon-btn{padding:.42rem .5rem}
}
/* Mobile ≤640px — header slim: solo Logo (Cava vive en tabbar).
Search/Wrapped/Lang/Tienda/Cava en mobile son accesibles via tabbar (Cava, Más → moreSheet). */
@media(max-width:640px){
.hdr-search-btn,
.hdr-wrapped-btn,
.hdr-cava-btn,
.app-header-actions > .app-link{display:none!important}
.app-header-actions{gap:.35rem}
/* Bilingual toggle compact mobile: pill dorado con ambos idiomas visibles */
.app-header-actions > .lang-toggle{display:inline-flex!important;padding:2px;gap:0;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.22)}
.app-header-actions .lang-btn{min-height:32px!important;padding:.28rem .5rem!important;font-size:.6rem!important;font-weight:700;letter-spacing:.04em;border-radius:999px;line-height:1;display:inline-flex!important;align-items:center;justify-content:center;min-width:26px}
.app-header-actions .lang-btn:not(.active){color:rgba(255,255,255,.55);background:transparent;border:none}
.app-header-actions .lang-btn.active{background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border:none;box-shadow:0 2px 6px rgba(212,184,105,.35)}
/* iOS-fix 2026-07-27 · P0-2 Apple HIG tap-targets ≥44×44pt.
Bump "☰ Menú" a 44px min-height/min-width sin romper el shrink de font-size:0. */
.lp-delta-explore-btn{padding:.6rem .9rem !important;font-size:0 !important;gap:0 !important;min-width:44px !important;min-height:44px !important;align-items:center !important;justify-content:center !important}
.lp-delta-explore-btn *{display:none !important}
.lp-delta-explore-btn::before{content:'☰ Menú';font-size:.75rem;font-weight:700;letter-spacing:.02em;color:#0a1a2e;display:inline-block !important}
/* Navbar items del Delta bar: 44px alto mínimo tap-friendly */
html.ui-delta .lp-delta-navbar-item{min-height:44px;padding:.55rem .7rem !important;align-items:center}
/* App logo wrapper: garantiza área de tap 44px sin cambiar apariencia visual del lockup */
.app-logo{min-height:44px;display:inline-flex;align-items:center}
/* Skip link (visible al focus keyboard) también ≥44px */
.skip-link{min-height:44px;padding:.6rem 1rem;display:inline-flex;align-items:center;line-height:1.2}
}
@media(max-width:400px){
/* <400px: solo icono ☰ para máximo ahorro */
.lp-delta-explore-btn{padding:.42rem .55rem !important}
.lp-delta-explore-btn::before{content:'☰';font-size:1.05rem;letter-spacing:0}
}
/* Chat composer mobile: textarea perfectamente ajustado a 1 línea del placeholder
(research UXPin 2026: composer necesita input cómodo, sin recortes visuales).
min-height calculado: font 16px * line-height 1.5 = 24px + padding vertical .55rem*2 = 17.6px
= ~42px de contenido de 1 línea. Bumpeado a 46 para respiro visual. */
@media(max-width:700px){
.ai-chat-input{
min-height:46px !important;
padding:.55rem .95rem !important;
line-height:1.4 !important;
border-radius:14px !important;
}
/* Composer cuadrado — border-radius consistente, padding balanceado */
body[data-tab="home"] .ai-chat-bar{
padding:.5rem .55rem !important;
border-radius:1.1rem !important;
gap:.4rem;
}
/* Scroll FAB reposicionado por encima del qp-strip para no obstruir vista */
#chatScrollFab.chat-scroll-fab{
bottom:calc(64px + env(safe-area-inset-bottom) + 6px + 68px + 46px + 14px);
right:.5rem;
}
}
/* Language toggle — pill segmentado */
.lang-toggle{
display:inline-flex;align-items:center;gap:0;
background:rgba(255,255,255,.04);
border:1px solid var(--border-subtle);
border-radius:var(--radius-full);
padding:.2rem;
transition:border-color var(--dur-base) ease;
}
.lang-toggle:hover{border-color:var(--border-default)}
.lang-btn{
background:transparent;border:none;
color:var(--text-tertiary);
font-size:.62rem;font-weight:600;letter-spacing:.08em;
padding:.38rem .7rem;min-width:36px;min-height:26px;
border-radius:var(--radius-full);cursor:pointer;
transition:color var(--dur-fast) ease,background var(--dur-fast) ease;
font-family:var(--sans);touch-action:manipulation;
}
.lang-btn:hover{color:var(--brand-gold)}
.lang-btn.active{
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:var(--text-inverse);
box-shadow:0 2px 8px rgba(212,184,105,.35);
}
/* Store CTA — link con estilo pill dorado outline */
.app-link {
display:inline-flex;align-items:center;gap:.4rem;
padding:.42rem .85rem;
font-family:var(--sans);font-size:.68rem;font-weight:600;
color:var(--brand-gold);
letter-spacing:.08em;text-transform:uppercase;
text-decoration:none;
background:rgba(212,184,105,.06);
border:1px solid var(--border-default);
border-radius:var(--radius-full);
transition:background var(--dur-base) ease,border-color var(--dur-base) ease,transform var(--dur-fast) ease;
white-space:nowrap;
}
.app-link:hover{background:rgba(212,184,105,.14);border-color:var(--border-strong);color:var(--brand-gold-2)}
.app-link:active{transform:scale(.97)}
.app-link-ico{font-size:.85rem;line-height:1}
.app-link-arrow{opacity:.7;transition:transform var(--dur-fast) ease}
.app-link:hover .app-link-arrow{transform:translateX(2px);opacity:1}
@media(prefers-reduced-motion:reduce){
.app-link,.lang-btn,.lang-toggle,.app-link-arrow{transition:none!important;transform:none!important}
}
/* Mobile compact: adaptive logo lockup (research: Designhill 2026 mobile-first logo,
Kirnani adaptive tiers). Sin imagen → sin recortes. "LA PLAYA · ACADEMY" visible
en todos los viewports mobile. Solo el font-size se ajusta. */
@media(max-width:700px){
.app-header{padding:.48rem .8rem;min-height:44px}
/* Legacy: solo oculta el span de tagline v1, NO el lockup ni el tag v2 */
.app-logo > span:not(.app-logo-lockup):not(.app-logo-tag){display:none}
.app-logo-lockup{height:28px;padding:0 1px}
.app-logo-brand{font-size:.78rem;padding:0 8px 0 10px;letter-spacing:.05em}
.app-logo-divider{margin:0 6px 0 5px;height:14px}
.app-logo-academy{font-size:.72rem;padding-right:10px}
/* Tag v2 completo oculto en mobile — el lockup ya comunica la marca */
.app-logo-tag{display:none}
.app-header-actions{gap:.5rem}
.lang-btn{font-size:.6rem;padding:.42rem .55rem;min-height:36px}
.app-link{padding:.5rem .55rem;font-size:0;gap:0;min-width:36px;min-height:36px;justify-content:center}
.app-link-lbl{display:none}
.app-link-ico{font-size:1rem}
.app-link-arrow{display:none}
}
/* Breakpoint intermedio 440px: LA PLAYA + Academy visibles, app-link oculto */
@media(max-width:440px){
.app-header{padding:.55rem .7rem;gap:.4rem}
.app-link{display:none}
.app-logo-brand{font-size:.72rem;padding:0 6px 0 8px}
.app-logo-academy{font-size:.68rem;padding-right:8px}
.app-logo-divider{margin:0 5px 0 4px}
}
/* iPhone SE (375) y similares: reducir un poco más pero sin ocultar Academy */
@media(max-width:380px){
.app-header{padding:.5rem .6rem;gap:.35rem}
.app-logo-brand{font-size:.68rem;padding:0 5px 0 7px;letter-spacing:.04em}
.app-logo-academy{font-size:.64rem;padding-right:7px}
.app-logo-divider{margin:0 4px 0 3px}
}
/* Sprint C5 — WCAG touch targets */
@media(max-width:700px){
.lang-btn,.app-link{min-height:36px}
}
/* ── Main content ── */
.app-main {
flex:1; display:flex; align-items:flex-start; justify-content:center;
padding:1.8rem 1rem 2rem; gap:1.4rem; max-width:1440px; margin:0 auto; width:100%;
}
/* Desktop XL: más aire y mejor densidad en pantallas grandes.
Padding lateral 1.5rem + gap 1.5rem = mejor uso del viewport (sin overflow simétrico). */
@media(min-width:1440px){
.app-main{padding:2.4rem 1.5rem 2.8rem; gap:1.5rem; max-width:1520px}
}
/* Desktop XXL: full spacious para pantallas 1600+ */
@media(min-width:1600px){
.app-main{padding:2.4rem 2rem 2.8rem; gap:1.8rem}
}
/* Sticky columns en desktop — best practice Linear/Superhuman 2026.
Aside + dock derecho se pegan al scroll SIN max-height (contenido completo visible).
La sticky libera naturalmente cuando el contenido alcanza el fin. */
@media(min-width:1240px){
.app-aside,.dock-side-b{
position:sticky;top:calc(64px + .8rem);align-self:flex-start;
}
}
/* ══════════════════════════════════════════════════════════════════
LA PLAYA ACADEMY — Left panel (desktop only)
Inspirado en Apple HIG 2026 · Liquid Glass · SF Pro · 8pt grid.
Principios: Clarity, Deference (contenido primero), Depth (layers translúcidos),
Consistency. Sin emojis decorativos, sin caja de la copa — jerarquía tipográfica
como protagonista, dorado como acento discreto, podcast card estilo Apple Podcasts.
Se oculta <1240px para dar espacio a los dos docks de chips.
══════════════════════════════════════════════════════════════════ */
.app-aside {
width:264px; flex-shrink:0; padding-top:.4rem;
display:flex; flex-direction:column; gap:1.75rem;
}
@media(max-width:1240px){ .app-aside{display:none} }
/* Desktop XL: más aire entre bloques del aside. Aside 272 (era 288) para caber en 1440-1599. */
@media(min-width:1440px){
.app-aside{width:272px; gap:2.05rem; padding-top:.8rem}
.lpa-title{font-size:2.35rem}
.lpa-sub{font-size:.88rem}
}
/* Desktop XXL 1600+: full spacious con aside 288 */
@media(min-width:1600px){
.app-aside{width:288px; gap:2.15rem}
}
/* ══════════════════════════════════════════════════════════════════
LPA HERO IMAGE — Editorial header con imagen Runway + scrim + Ken Burns.
Fallback gradient si la imagen no está aún o falla la carga.
Techniques 2026: full-bleed image · scrim overlay para readability ·
typography lockup asimétrico · Ken Burns micro-motion sutil.
Referencias: Aesop.com hero · Apple.com editorial cards.
══════════════════════════════════════════════════════════════════ */
.lpa-hero-image{
position:relative;overflow:hidden;
aspect-ratio:1/1; /* Aside vertical → cuadrado. Desktop XL será 4/5. */
border-radius:1.2rem;
border:1px solid rgba(212,184,105,.18);
box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
margin-bottom:.4rem;
}
.lpa-hero-image-inner{
position:absolute;inset:0;
/* Foto de fachada real de La Playa Wine & Liquors Store — caja azul cobalto original.
Fallback gradient si la imagen no carga. */
background-image:
image-set(url('/academy-hero.avif') type('image/avif'), url('/academy-hero.jpg') type('image/jpeg')),
radial-gradient(ellipse 90% 60% at 25% 30%, rgba(212,184,105,.28) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 80% 75%, rgba(30,70,130,.32) 0%, transparent 60%),
linear-gradient(155deg, #1a1004 0%, #06101d 55%, #04090f 100%);
background-size:cover, 100% 100%, 100% 100%, 100% 100%;
background-position:center 30%, center, center, center; /* offset 30% para enfocar en la caja "LA PLAYA" */
background-repeat:no-repeat;
/* Ken Burns micro-motion — 24s slow zoom-in respetando reduced-motion */
animation:lpaHeroKen 24s ease-in-out infinite alternate;
will-change:transform;
}
@keyframes lpaHeroKen{
from{transform:scale(1.02) translate(0, 0)}
to {transform:scale(1.08) translate(-1%, -1%)}
}
/* Scrim overlay — gradient dark del bottom-left para readability del text lockup */
.lpa-hero-image-scrim{
position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(200deg, transparent 40%, rgba(4,9,15,.55) 78%, rgba(4,9,15,.85) 100%),
linear-gradient(180deg, rgba(4,9,15,.15) 0%, transparent 30%);
}
/* Typography lockup — asimétrico bottom-left, mix serif display + sans mono */
.lpa-hero-image-brand{
position:absolute;bottom:1rem;left:1.1rem;right:1.1rem;
display:flex;flex-direction:column;gap:.15rem;
pointer-events:none;
}
.lpa-hero-brand-eyebrow{
font-family:var(--sans);font-size:.75rem;font-weight:600;
color:var(--brand-gold);letter-spacing:.18em;text-transform:uppercase;
text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.lpa-hero-brand-mark{
font-family:var(--serif);font-size:2.2rem;font-weight:500;font-style:italic;
color:#fff;line-height:.95;letter-spacing:-.02em;margin-top:.15rem;
text-shadow:0 3px 12px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.5);
}
.lpa-hero-brand-sub{
font-family:var(--sans);font-size:1.1rem;font-weight:200;
color:rgba(255,255,255,.9);letter-spacing:.34em;text-transform:uppercase;
padding-left:.15rem;
text-shadow:0 2px 8px rgba(0,0,0,.7);
border-bottom:1px solid rgba(212,184,105,.35);
padding-bottom:.5rem;width:fit-content;margin-top:.15rem;
}
/* Desktop XL: hero más grande y con aspect ratio distinto */
@media(min-width:1440px){
.lpa-hero-image{aspect-ratio:4/5;border-radius:1.4rem}
.lpa-hero-brand-mark{font-size:2.6rem}
.lpa-hero-brand-sub{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
.lpa-hero-image-inner{animation:none!important}
}
/* Mientras el hero image ya comunica La Playa Academy, el eyebrow del brand block
inferior se vuelve redundante — lo dejamos más discreto */
.lpa-brand .lpa-eyebrow{opacity:.55;font-size:.6rem}
/* ── Brand block ── */
.lpa-brand{display:flex;flex-direction:column;gap:.6rem;position:relative}
/* Rotator hero — Apple-style crossfade entre 5 mensajes */
.lpa-hero-rotator{position:relative;min-height:210px}
.lpa-hero-slide{
position:absolute;top:0;left:0;right:0;
display:flex;flex-direction:column;gap:.75rem;
/* Cross-fade rápido para evitar artefactos de overlap visible durante transición */
opacity:0;transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.22,1,.36,1);
transform:translateY(6px);pointer-events:none;
}
.lpa-hero-slide.active{opacity:1;transform:translateY(0);pointer-events:auto;z-index:2}
.lpa-hero-dots{
display:flex;gap:.35rem;justify-content:flex-start;margin-top:.4rem;
}
.lpa-dot{
width:16px;height:4px;border-radius:999px;
background:rgba(255,255,255,.14);border:none;cursor:pointer;padding:0;
transition:background var(--dur-fast) ease,width var(--dur-base) var(--ease-out-expo);
}
.lpa-dot:hover{background:rgba(255,255,255,.28)}
.lpa-dot.active{background:var(--brand-gold);width:24px}
@media(prefers-reduced-motion:reduce){
.lpa-hero-slide{transition:none}
.lpa-hero-slide:not(.active){display:none}
}
.lpa-eyebrow{
display:inline-flex;align-items:center;gap:.35rem;
font-family:var(--sans);
font-size:.68rem;font-weight:600;
color:rgba(255,255,255,.55);
letter-spacing:.14em;text-transform:uppercase;
}
.lpa-eyebrow-mark{
color:var(--brand-gold);
padding:.14rem .5rem;
border:1px solid var(--brand-gold-border);
border-radius:999px;
background:var(--brand-gold-soft);
font-weight:600;letter-spacing:.14em;
}
.lpa-title{
font-family:var(--sans);
font-size:clamp(1.75rem,2.6vw,2.15rem);
font-weight:700;
line-height:1.06;
letter-spacing:-.028em;
color:#fff;
margin:0;
text-wrap:balance;
}
.lpa-title em{
font-style:normal;font-weight:700;
background:linear-gradient(135deg,#e6cd80 0%,#d4b869 60%,#b8974a 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-.03em;
}
.lpa-sub{
font-family:var(--sans);
font-size:.82rem;font-weight:400;
line-height:1.55;letter-spacing:-.005em;
color:rgba(255,255,255,.62);
text-wrap:pretty;
}
/* ── Stats ── */
.lpa-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
padding:.9rem 0;
border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
}
.lpa-stat{
display:flex;flex-direction:column;gap:.15rem;
padding:.1rem .1rem;
}
.lpa-stat-num{
font-family:var(--sans);
font-size:1.35rem;font-weight:700;
color:#fff;letter-spacing:-.03em;line-height:1;
font-variant-numeric:tabular-nums;
}
.lpa-stat-num small{font-size:.72em;font-weight:600;color:var(--brand-gold);margin-left:.05rem}
.lpa-stat-lbl{
font-family:var(--sans);
font-size:.75rem;font-weight:500;
color:rgba(255,255,255,.68);
line-height:1.4;letter-spacing:.005em;
}
/* ══ Podcast card — Apple Podcasts inspired · Liquid Glass ══ */
.lpa-podcast{
--lpa-glow:rgba(212,184,105,.22);
display:flex;flex-direction:column;gap:.7rem;
padding:1rem 1rem 1.05rem;
border-radius:1.15rem;
background:
linear-gradient(155deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.02) 100%),
linear-gradient(160deg,rgba(30,70,130,.35),rgba(4,9,15,.55));
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
box-shadow:
0 1px 0 rgba(255,255,255,.06) inset,
0 12px 32px rgba(0,0,0,.42),
0 0 0 1px rgba(212,184,105,.04);
text-decoration:none;color:inherit;cursor:pointer;
position:relative;overflow:hidden;isolation:isolate;
transition:transform var(--dur-base) var(--ease-out-expo),
box-shadow var(--dur-base) ease,
border-color var(--dur-base) ease;
}
.lpa-podcast::before{
content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(120% 80% at 50% -10%,var(--lpa-glow),transparent 60%);
opacity:.55;pointer-events:none;z-index:-1;
transition:opacity var(--dur-base) ease;
}
.lpa-podcast:hover{
transform:translateY(-2px);
border-color:var(--brand-gold-border);
box-shadow:
0 1px 0 rgba(255,255,255,.08) inset,
0 18px 44px rgba(0,0,0,.55),
0 0 0 1px rgba(212,184,105,.15);
}
.lpa-podcast:hover::before{opacity:.85}
.lpa-podcast:active{transform:translateY(0)}
.lpa-pod-head{display:flex;align-items:center;gap:.65rem}
.lpa-pod-cover{
width:48px;height:48px;flex-shrink:0;border-radius:.7rem;
background:image-set(url('/podcast-cover.avif') type('image/avif'), url('/podcast-cover.jpg') type('image/jpeg')) center/cover no-repeat, linear-gradient(145deg,#1e4682,#0a2540 55%,#04090f);
border:1px solid rgba(212,184,105,.22);
display:flex;align-items:center;justify-content:center;
position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.35) inset;
box-shadow:0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
}
.lpa-pod-cover-mark{
font-family:var(--serif);font-size:1.2rem;font-weight:600;
color:var(--brand-gold);letter-spacing:-.02em;
position:relative;z-index:1;
}
.lpa-pod-cover-wave{
position:absolute;inset:0;
background:
radial-gradient(circle at 30% 20%,rgba(212,184,105,.35),transparent 55%),
radial-gradient(circle at 70% 80%,rgba(60,120,200,.3),transparent 50%);
opacity:.9;
}
.lpa-pod-meta{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.lpa-pod-badge{
display:inline-flex;align-items:center;gap:.32rem;
font-family:var(--sans);font-size:.58rem;font-weight:600;
color:var(--brand-gold-2);
letter-spacing:.12em;text-transform:uppercase;
}
.lpa-pod-dot{
width:6px;height:6px;border-radius:50%;
background:var(--brand-gold);
box-shadow:0 0 0 3px rgba(212,184,105,.18);
animation:lpaPulse 2.2s ease-in-out infinite;
}
@keyframes lpaPulse{
0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(212,184,105,.18)}
50%{opacity:.55;box-shadow:0 0 0 5px rgba(212,184,105,.05)}
}
.lpa-pod-series{
font-family:var(--sans);font-size:.62rem;font-weight:500;
color:rgba(255,255,255,.4);letter-spacing:.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lpa-pod-title{
font-family:var(--sans);font-size:1rem;font-weight:600;
line-height:1.2;letter-spacing:-.022em;
color:#fff;margin:0;
}
.lpa-pod-desc{
font-family:var(--sans);font-size:.72rem;font-weight:400;
line-height:1.5;letter-spacing:-.002em;
color:rgba(255,255,255,.6);
margin:0;text-wrap:pretty;
}
.lpa-pod-cta{
display:flex;align-items:center;gap:.5rem;
margin-top:.15rem;padding-top:.7rem;
border-top:1px solid rgba(255,255,255,.08);
font-family:var(--sans);font-size:.72rem;font-weight:600;
color:#fff;letter-spacing:-.005em;
}
.lpa-pod-play{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;border-radius:50%;
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;flex-shrink:0;
box-shadow:0 3px 10px rgba(212,184,105,.35);
transition:transform var(--dur-fast) ease;
}
.lpa-podcast:hover .lpa-pod-play{transform:scale(1.08)}
.lpa-pod-cta-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lpa-pod-cta-arrow{
color:var(--brand-gold);font-weight:400;
transition:transform var(--dur-base) var(--ease-out-expo);
}
.lpa-podcast:hover .lpa-pod-cta-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
.lpa-pod-dot{animation:none!important}
.lpa-podcast,.lpa-podcast:hover,.lpa-pod-play,.lpa-pod-cta-arrow{transform:none!important;transition:none!important}
}
/* ── Hero mobile · La Playa Academy · foto fachada + text lockup editorial Aesop-style.
Solo visible en mobile (donde el aside desktop se oculta). Aspect ratio 21:9
cinematográfico para no ocupar mucho scroll pero comunicar la marca fuerte. ── */
.lpa-hero-mobile{
display:none;position:relative;overflow:hidden;
width:100%;align-self:stretch; /* full width dentro del app-main flex column */
aspect-ratio:21/9;
margin:.55rem 0 .55rem;
border-radius:1.05rem;
border:1px solid rgba(212,184,105,.18);
box-shadow:0 10px 26px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
isolation:isolate; /* garantiza el stacking context para el scrim + content */
}
@media(max-width:1240px){ .lpa-hero-mobile{display:block} }
.lpa-hero-mobile-img{
position:absolute;inset:0;z-index:0;
background-image:
image-set(url('/academy-hero.avif') type('image/avif'), url('/academy-hero.jpg') type('image/jpeg')),
linear-gradient(155deg, #1a1004 0%, #06101d 55%, #04090f 100%);
background-size:cover;
background-position:center 35%; /* enfoca la caja "LA PLAYA" en la fachada */
background-repeat:no-repeat;
/* Ken Burns micro-motion — 20s slow zoom-in */
animation:lpaMobHeroKen 20s ease-in-out infinite alternate;
will-change:transform;
}
@keyframes lpaMobHeroKen{
0% { transform:scale(1) translate(0,0); }
100% { transform:scale(1.06) translate(-1%, -1%); }
}
.lpa-hero-mobile-scrim{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg, rgba(4,9,15,.05) 0%, rgba(4,9,15,.35) 45%, rgba(4,9,15,.82) 100%),
linear-gradient(90deg, rgba(4,9,15,.55) 0%, rgba(4,9,15,0) 55%);
}
.lpa-hero-mobile-content{
position:absolute;left:1rem;right:1rem;bottom:.75rem;z-index:2;
display:flex;flex-direction:column;gap:.05rem;
text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.lpa-hero-mobile-eyebrow{
font-family:var(--sans);font-size:.5rem;font-weight:600;
color:var(--brand-gold,#d4b869);letter-spacing:.24em;text-transform:uppercase;
line-height:1;margin-bottom:.32rem;
}
.lpa-hero-mobile-brand{
font-family:var(--serif);font-size:1.65rem;font-weight:400;font-style:italic;
color:#fff;line-height:1;letter-spacing:-.005em;
}
.lpa-hero-mobile-sub{
font-family:var(--sans);font-size:.72rem;font-weight:500;
color:rgba(255,255,255,.9);letter-spacing:.32em;text-transform:uppercase;
line-height:1;margin-top:.28rem;
}
@media(max-width:400px){
.lpa-hero-mobile{aspect-ratio:16/7}
.lpa-hero-mobile-brand{font-size:1.5rem}
.lpa-hero-mobile-sub{font-size:.66rem;letter-spacing:.28em}
}
@media(prefers-reduced-motion:reduce){
.lpa-hero-mobile-img{animation:none}
}
/* ── Podcast mobile · strip compacto (visible cuando aside desktop está hidden) ── */
.lpa-podcast-mobile{
display:none;
align-items:center;gap:.75rem;
margin:.4rem .1rem 0;padding:.65rem .8rem .7rem;
border-radius:1rem;
background:
linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.02)),
linear-gradient(160deg,rgba(30,70,130,.32),rgba(4,9,15,.55));
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px) saturate(1.35);
-webkit-backdrop-filter:blur(18px) saturate(1.35);
color:inherit;text-decoration:none;
box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
transition:transform var(--dur-base) var(--ease-out-expo),border-color var(--dur-base) ease;
}
.lpa-podcast-mobile:active{transform:scale(.99)}
@media(max-width:1240px){ .lpa-podcast-mobile{display:flex} }
.lpa-pm-cover{
width:44px;height:44px;flex-shrink:0;border-radius:.6rem;
background:
radial-gradient(circle at 30% 20%,rgba(212,184,105,.35),transparent 55%),
linear-gradient(145deg,#1e4682,#0a2540 55%,#04090f);
border:1px solid rgba(212,184,105,.22);
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
}
.lpa-pm-cover b{
font-family:var(--serif);font-weight:600;font-size:1.05rem;
color:var(--brand-gold);letter-spacing:-.02em;
}
.lpa-pm-body{
display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1;
}
.lpa-pm-badge{
font-family:var(--sans);font-size:.55rem;font-weight:600;
color:var(--brand-gold-2);letter-spacing:.12em;text-transform:uppercase;
}
.lpa-pm-title{
font-family:var(--sans);font-size:.9rem;font-weight:600;
color:#fff;letter-spacing:-.018em;line-height:1.15;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lpa-pm-desc{
font-family:var(--sans);font-size:.68rem;font-weight:400;
color:rgba(255,255,255,.55);line-height:1.35;letter-spacing:-.002em;
overflow:hidden;text-overflow:ellipsis;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.lpa-pm-play{
width:36px;height:36px;flex-shrink:0;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;
box-shadow:0 3px 10px rgba(212,184,105,.4);
}
/* ══ Help FAB persistente — botón floating "?" — mobile-first 2026.
Draggable (pointer events) + dismissable (X badge). ══ */
.lp-help-fab{
position:fixed;z-index:9980;
/* Posición default (se sobreescribe si hay lp_help_fab_pos persistido) */
bottom:calc(120px + env(safe-area-inset-bottom));
right:14px;
width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,rgba(212,184,105,.95),rgba(230,205,128,.9));
color:#0a2540;border:1px solid rgba(212,184,105,.6);
display:inline-flex;align-items:center;justify-content:center;
cursor:grab;
box-shadow:0 8px 22px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset,0 4px 14px rgba(212,184,105,.35);
backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
transition:transform var(--dur-base) var(--ease-out-expo),box-shadow var(--dur-base) ease,opacity var(--dur-base) ease;
-webkit-tap-highlight-color:transparent;
animation:lpHelpIn .5s var(--ease-out-expo) both;
touch-action:none; /* previene scroll durante drag */
user-select:none;-webkit-user-select:none;
}
@keyframes lpHelpIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.lp-help-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 28px rgba(0,0,0,.42),0 6px 18px rgba(212,184,105,.5)}
.lp-help-fab:active{transform:scale(.94)}
.lp-help-fab.dragging{
cursor:grabbing;
transform:scale(1.08);
transition:transform .1s ease,box-shadow .1s ease;
box-shadow:0 18px 44px rgba(0,0,0,.55),0 8px 22px rgba(212,184,105,.6),0 0 0 2px rgba(230,205,128,.5) inset;
}
.lp-help-fab.dragging .lp-help-fab-dismiss{opacity:0;pointer-events:none}
/* Cuando el user ha movido el FAB, right/bottom se sobreescriben con left/top inline */
.lp-help-fab[data-user-positioned="true"]{right:auto;bottom:auto}
.lp-help-fab[hidden]{display:none}
/* P0-2 fix 2026-07-26: garantiza que el hijo dismiss NUNCA se renderice si el padre está oculto,
overrideado por opacidad/scale de overlay, o dismisseado por localStorage. */
.lp-help-fab[hidden] .lp-help-fab-dismiss,
.lp-help-fab[style*="display: none"] .lp-help-fab-dismiss,
.lp-help-fab[style*="display:none"] .lp-help-fab-dismiss{display:none!important}
/* Desktop: FAB oculto por regla más abajo → asegurar que el X hijo también */
@media(min-width:701px){
.lp-help-fab-dismiss{display:none!important}
}
/* X dismiss badge en la esquina del FAB */
.lp-help-fab-dismiss{
position:absolute;top:-6px;right:-6px;
width:20px;height:20px;border-radius:50%;
background:rgba(4,9,15,.85);color:rgba(255,255,255,.9);
border:1px solid rgba(255,255,255,.14);
display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;
box-shadow:0 3px 8px rgba(0,0,0,.5);
transition:background var(--dur-fast) ease,transform var(--dur-fast) ease;
}
.lp-help-fab-dismiss:hover{background:rgba(248,113,113,.9);color:#fff;transform:scale(1.1)}
/* Desktop: FAB oculto — el tour se accede desde el footer (link "Ver tour") o
se puede abrir con teclado ?/H. Menos ruido visual, más Apple-like. */
@media(min-width:701px){
.lp-help-fab{display:none !important}
}
/* Mobile: FAB visible (v115 — QA iPhone 2026-07-26 pidió burbuja de ayuda accesible). */
/* Ocultarlo cuando cualquier overlay grande está activo (search/recetario/ficha/tour) */
body:has(#lpTour.active) .lp-help-fab,
body:has(#lpRecipeBook.active) .lp-help-fab,
body:has(#lpRecipeSheet.active) .lp-help-fab,
body:has(#lpSheet.active) .lp-help-fab,
body:has(#searchOverlay.active) .lp-help-fab,
body:has(#featOverlay.active) .lp-help-fab,
body:has(#admOverlay.active) .lp-help-fab,
body:has(#cavaOverlay.active) .lp-help-fab,
body:has(#moreSheet.active) .lp-help-fab,
body:has(#ageGateOverlay) .lp-help-fab{
opacity:0;pointer-events:none;transform:scale(.7);
}
@media(prefers-reduced-motion:reduce){
.lp-help-fab,.lp-help-fab-dismiss{animation:none!important;transition:none!important}
}
/* ══ Onboarding tour — coach marks Apple-style con spotlight ══ */
.lp-tour{position:fixed;inset:0;z-index:99999;display:none;pointer-events:none}
.lp-tour.active{display:block}
.lp-tour-backdrop{position:absolute;inset:0;background:rgba(4,9,15,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto;animation:lpTourFade .35s ease both}
@keyframes lpTourFade{from{opacity:0}to{opacity:1}}
.lp-tour-spotlight{
position:absolute;border-radius:14px;pointer-events:none;
box-shadow:0 0 0 9999px rgba(4,9,15,.72),0 0 0 3px rgba(212,184,105,.6),0 0 30px 6px rgba(212,184,105,.35);
transition:all .38s var(--ease-out-expo);
}
.lp-tour-popover{
position:absolute;pointer-events:auto;
max-width:320px;
background:linear-gradient(160deg,rgba(14,44,74,.98),rgba(6,18,44,.99));
border:1px solid rgba(212,184,105,.28);
border-radius:1rem;
padding:1rem 1.1rem;
box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;
color:#fff;font-family:var(--sans);
transition:top .38s var(--ease-out-expo),left .38s var(--ease-out-expo),opacity .38s ease;
animation:lpTourPopIn .42s var(--ease-out-expo) both;
}
@keyframes lpTourPopIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.lp-tour-eyebrow{font-size:.55rem;font-weight:600;color:var(--brand-gold);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.35rem}
.lp-tour-title{font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.2;margin-bottom:.35rem}
.lp-tour-body{font-size:.78rem;color:rgba(255,255,255,.75);line-height:1.5;letter-spacing:-.003em;margin-bottom:.75rem}
.lp-tour-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.lp-tour-dots{display:flex;gap:.28rem}
.lp-tour-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:background var(--dur-fast) ease,width var(--dur-base) ease}
.lp-tour-dot.active{background:var(--brand-gold);width:18px;border-radius:999px}
.lp-tour-actions{display:flex;gap:.4rem}
.lp-tour-skip{background:transparent;border:none;color:rgba(255,255,255,.5);font-family:var(--sans);font-size:.7rem;padding:.4rem .55rem;cursor:pointer;border-radius:.4rem;transition:color var(--dur-fast) ease}
.lp-tour-skip:hover{color:rgba(255,255,255,.85)}
.lp-tour-next{
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;border:none;
font-family:var(--sans);font-size:.75rem;font-weight:700;letter-spacing:-.005em;
padding:.5rem .95rem;border-radius:.5rem;cursor:pointer;
box-shadow:0 3px 10px rgba(212,184,105,.32);
transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.lp-tour-next:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(212,184,105,.42)}
body.lp-tour-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
.lp-tour-backdrop,.lp-tour-popover,.lp-tour-spotlight{animation:none!important;transition:none!important}
}
/* ── "Para ti" widget — cards horizontales premium sobre el chat ── */
.lp-foryou{
margin:0 0 .8rem;padding:.9rem 1rem;
background:linear-gradient(160deg,rgba(212,184,105,.06),rgba(212,184,105,.02));
border:1px solid rgba(212,184,105,.14);
border-radius:1rem;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
animation:lpFyIn .38s var(--ease-out-expo);
}
@keyframes lpFyIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.lp-fy-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:.7rem;gap:.5rem}
.lp-fy-eyebrow{
font-family:var(--sans);font-size:.55rem;font-weight:600;
color:var(--brand-gold-2);letter-spacing:.16em;text-transform:uppercase;
display:block;margin-bottom:.15rem;
}
.lp-fy-title{
font-family:var(--sans);font-size:.95rem;font-weight:700;
color:#fff;letter-spacing:-.02em;margin:0;line-height:1.15;
}
.lp-fy-refresh{
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.6);width:28px;height:28px;border-radius:50%;
cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:background var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) ease;
}
.lp-fy-refresh:hover{background:rgba(212,184,105,.14);color:var(--brand-gold);transform:rotate(90deg)}
.lp-fy-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;
}
@media(max-width:520px){.lp-fy-grid{grid-template-columns:repeat(2,1fr)}.lp-fy-grid>a:nth-child(3){display:none}}
.lp-fy-card{
display:flex;flex-direction:column;gap:.35rem;
padding:.55rem;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:.7rem;
text-decoration:none;color:inherit;
transition:border-color var(--dur-fast) ease,transform var(--dur-fast) ease,background var(--dur-fast) ease;
}
.lp-fy-card:hover{border-color:var(--brand-gold-border);background:rgba(212,184,105,.06);transform:translateY(-2px)}
.lp-fy-img{
width:100%;height:70px;object-fit:contain;
background:#fff;border-radius:.4rem;
box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.lp-fy-body{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.lp-fy-name{
font-family:var(--sans);font-size:.65rem;font-weight:600;
color:#fff;line-height:1.25;letter-spacing:-.008em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:2em;
}
.lp-fy-note{
font-family:var(--sans);font-size:.56rem;font-weight:500;
color:rgba(255,255,255,.55);letter-spacing:.005em;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-fy-price{
font-family:var(--sans);font-size:.7rem;font-weight:700;
color:var(--brand-gold);letter-spacing:-.005em;
margin-top:auto;padding-top:.2rem;font-variant-numeric:tabular-nums;
}
/* ── Chat widget ── */
.chat-wrap {
flex:1 1 460px; max-width:520px; display:flex; flex-direction:column;
min-height:min(680px, calc(100vh - 130px));
min-height:min(680px, calc(100svh - 130px));
min-height:min(680px, calc(var(--vh, 1svh) * 100 - 130px));
}
/* Desktop: chat escala para pantallas grandes (evita "flotar" en 4K) */
@media(min-width:1440px){ .chat-wrap{max-width:600px} }
@media(min-width:1720px){ .chat-wrap{max-width:660px} }
/* Desktop: product cards en chat más grandes y editoriales */
@media(min-width:1024px){
.ai-chat-prod-card{border-radius:18px;margin:.75rem 0}
.ai-chat-prod-badge{padding:.45rem .95rem;font-size:.64rem;letter-spacing:.12em}
.ai-chat-prod-body,.lp-prod-link{padding:.95rem}
.ai-chat-prod-img{width:76px;height:76px;border-radius:12px}
.ai-chat-prod-name{font-size:1rem;font-weight:600;letter-spacing:-.02em}
.ai-chat-prod-meta{font-size:.7rem;margin-top:.2rem}
.ai-chat-prod-price{font-size:1.05rem;margin-top:.28rem}
.ai-chat-prod-cta{padding:.72rem 1rem;font-size:.78rem}
}
/* Embedded sommelier chat */
.ai-chat-embed {
flex:1; background:linear-gradient(160deg,rgba(10,5,1,.97),rgba(6,18,44,.97));
border:1px solid rgba(212,184,105,.18); border-radius:20px;
display:flex; flex-direction:column; overflow:hidden; min-height:520px;
position:relative; box-shadow:0 24px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(212,184,105,.06);
}
.ai-chat-header {
display:flex; align-items:center; gap:.65rem; padding:.75rem 1rem;
border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); flex-shrink:0;
}
.ai-chat-avatar {
width:36px; height:36px; border-radius:50%;
background:linear-gradient(135deg,rgba(212,184,105,.25),rgba(212,184,105,.08));
display:flex; align-items:center; justify-content:center; font-size:1.05rem;
flex-shrink:0; position:relative;
}
.ai-chat-avatar::before {
content:''; position:absolute; inset:-2px; border-radius:50%;
background:conic-gradient(from 0deg,rgba(212,184,105,.7),rgba(212,184,105,.05),rgba(212,184,105,.7));
animation:avatarSpin 4s linear infinite; opacity:.5;
}
.ai-chat-avatar::after {
content:''; position:absolute; inset:-1px; border-radius:50%;
background:linear-gradient(160deg,rgba(10,5,1,.97),rgba(6,18,44,.97)); z-index:0;
}
.ai-chat-avatar span{position:relative;z-index:1}
.ai-chat-name{font-size:.77rem;font-weight:700;color:rgba(255,255,255,.9)}
.ai-chat-clear-btn{background:none;border:none;color:rgba(255,255,255,.18);font-size:.85rem;cursor:pointer;padding:.2rem .3rem;border-radius:6px;transition:.18s;line-height:1;flex-shrink:0}
.ai-chat-clear-btn:hover{color:rgba(255,80,80,.6);background:rgba(255,80,80,.08)}
.ai-chat-status{font-size:.57rem;color:rgba(255,255,255,.38);display:flex;align-items:center;gap:.3rem;margin-top:.08rem}
.ai-chat-dot{width:5px;height:5px;border-radius:50%;background:#4ade80;display:inline-block;box-shadow:0 0 5px #4ade80}
.ai-chat-msgs {
flex:1; overflow-y:auto; padding:.8rem; display:flex;
flex-direction:column; gap:.45rem;
-webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.ai-chat-msgs::-webkit-scrollbar{width:3px}
.ai-chat-msgs::-webkit-scrollbar-thumb{background:rgba(212,184,105,.12);border-radius:3px}
/* Empty state Apple-style — mobile + desktop */
.ai-chat-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:2.5rem 1.75rem;gap:.55rem;
min-height:240px;flex:1;
}
.ai-chat-empty-ico{font-size:3rem;margin-bottom:.5rem;opacity:.9;filter:drop-shadow(0 4px 14px rgba(212,184,105,.3))}
.ai-chat-empty-title{font-family:var(--serif);font-size:1.5rem;color:var(--brand-gold,#d4b869);letter-spacing:-.005em;line-height:1.15;font-weight:500}
.ai-chat-empty-sub{font-family:var(--sans);font-size:.92rem;color:rgba(255,255,255,.68);line-height:1.55;max-width:320px;letter-spacing:.005em}
.ai-chat-empty-hint{font-family:var(--sans);font-size:.7rem;color:rgba(255,255,255,.35);letter-spacing:.05em;text-transform:uppercase;margin-top:1.2rem;animation:emptyHintFloat 2.4s ease-in-out infinite}
@keyframes emptyHintFloat{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(3px);opacity:.9}}
.ai-chat-msgs.has-msgs .ai-chat-empty{display:none}
/* Mobile tighter */
@media(max-width:700px){
.ai-chat-empty{padding:2rem 1.2rem;min-height:200px}
.ai-chat-empty-ico{font-size:2.5rem}
.ai-chat-empty-title{font-size:1.3rem}
.ai-chat-empty-sub{font-size:.85rem}
}
.ai-chat-bubble {
max-width:88%; padding:.85rem 1.05rem; border-radius:18px;
font-size:.88rem; line-height:1.65; letter-spacing:.005em;
animation:botIn .35s var(--ease-out-expo);
}
.ai-chat-bubble.bot {
background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(212,184,105,.03));
border:1px solid rgba(255,255,255,.08);
color:var(--text-primary); align-self:flex-start; border-bottom-left-radius:6px;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ai-chat-bubble.user {
background:linear-gradient(135deg,rgba(212,184,105,.22),rgba(212,184,105,.11));
border:1px solid rgba(212,184,105,.28); color:rgba(212,184,105,.95);
align-self:flex-end; border-bottom-right-radius:6px;
}
/* Product match card — se inserta en msgs cuando user menciona marca del catálogo */
.ai-chat-prod-card{
display:block;
margin:.5rem 0;
background:linear-gradient(155deg,rgba(212,184,105,.1),rgba(10,37,64,.55));
border:1px solid rgba(212,184,105,.35);
border-radius:16px;
text-decoration:none;color:inherit;
overflow:hidden;
animation:botIn .4s var(--ease-out-expo);
box-shadow:0 6px 20px rgba(0,0,0,.35);
transition:transform var(--dur-fast) ease,border-color var(--dur-base) ease,box-shadow var(--dur-base) ease;
}
.ai-chat-prod-card:hover{transform:translateY(-2px);border-color:rgba(212,184,105,.6);box-shadow:0 10px 28px rgba(212,184,105,.2)}
.ai-chat-prod-card:active{transform:scale(.98)}
.ai-chat-prod-badge{
padding:.35rem .75rem;
background:linear-gradient(90deg,rgba(212,184,105,.22),rgba(212,184,105,.08));
border-bottom:1px solid rgba(212,184,105,.18);
color:var(--brand-gold);
font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.ai-chat-prod-body{display:flex;align-items:stretch;gap:.75rem;padding:.75rem}
.ai-chat-prod-img{width:60px;height:60px;object-fit:cover;border-radius:10px;background:#fff;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.ai-chat-prod-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.15rem}
.ai-chat-prod-name{font-family:var(--serif);font-size:.9rem;font-weight:500;color:#fff;line-height:1.2;letter-spacing:-.005em}
.ai-chat-prod-meta{font-family:var(--sans);font-size:.62rem;color:rgba(255,255,255,.58);text-transform:capitalize;line-height:1.2}
.ai-chat-prod-price{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--brand-gold);margin-top:.1rem;letter-spacing:.005em}
.ai-chat-prod-out{display:inline-block;margin-left:.4rem;color:#f87171;font-weight:600;font-size:.55rem;text-transform:uppercase;letter-spacing:.08em}
.ai-chat-prod-cta{align-self:center;padding:.55rem .8rem;background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));color:var(--text-inverse);border-radius:999px;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;box-shadow:0 3px 10px rgba(212,184,105,.3)}
@media(max-width:400px){.ai-chat-prod-img{width:52px;height:52px}.ai-chat-prod-cta{padding:.45rem .6rem;font-size:.62rem}}
/* ══ Product card v2 — Service chips + expandable panel (Apple HIG 2026) ══ */
.lp-prod-card-v2 .lp-prod-link{
text-decoration:none;color:inherit;display:flex;
transition:background var(--dur-fast) ease;
}
.lp-prod-card-v2 .lp-prod-link:hover{background:rgba(255,255,255,.02)}
.lp-service-chips{
display:flex;flex-wrap:wrap;gap:.35rem;
padding:.1rem .75rem .65rem;
border-top:1px solid rgba(255,255,255,.05);
margin-top:0;
}
.lp-chip{
display:inline-flex;align-items:center;gap:.3rem;
padding:.32rem .6rem;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
font-family:var(--sans);font-size:.66rem;font-weight:500;
color:rgba(255,255,255,.85);letter-spacing:-.005em;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) ease;
cursor:default;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
white-space:nowrap;
}
.lp-chip svg{opacity:.8}
.lp-chip-temp{color:#fbbf7c;border-color:rgba(251,191,124,.22);background:rgba(251,191,124,.08)}
.lp-chip-glass{color:#c5d8ff;border-color:rgba(197,216,255,.22);background:rgba(197,216,255,.06)}
.lp-chip-decant{color:#e6cd80;border-color:rgba(230,205,128,.24);background:rgba(230,205,128,.08)}
.lp-chip-more{
cursor:pointer;
color:var(--brand-gold);
border-color:var(--brand-gold-border);
background:var(--brand-gold-soft);
font-weight:600;
margin-left:auto;
}
.lp-chip-more:hover{background:rgba(212,184,105,.14);border-color:var(--brand-gold);transform:translateY(-1px)}
.lp-chip-more:active{transform:translateY(0) scale(.97)}
.lp-chip-caret{transition:transform var(--dur-base) var(--ease-out-expo)}
.lp-chip-more.open .lp-chip-caret{transform:rotate(180deg)}
/* Chips clickables — variantes botón (temp/copa/decantar) del chat card */
.lp-chip-clickable{
cursor:pointer;font-family:inherit;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) ease;
-webkit-tap-highlight-color:transparent;
}
.lp-chip-clickable:hover{filter:brightness(1.15);transform:translateY(-1px)}
.lp-chip-clickable:active{transform:scale(.96)}
/* ── Service panel expandible ── */
.lp-service-panel{
padding:.25rem .85rem 1rem;
border-top:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
display:flex;flex-direction:column;gap:.75rem;
animation:lpPanelIn .28s var(--ease-out-expo);
}
@keyframes lpPanelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.lp-service-panel[hidden]{display:none}
.lp-sec{display:flex;flex-direction:column;gap:.3rem}
.lp-sec-lbl{
font-family:var(--sans);font-size:.56rem;font-weight:600;
color:var(--brand-gold-2);letter-spacing:.16em;text-transform:uppercase;
}
.lp-sec-body{
font-family:var(--sans);font-size:.75rem;font-weight:400;line-height:1.5;letter-spacing:-.005em;
color:rgba(255,255,255,.78);text-wrap:pretty;
}
/* Grape sub-cards dentro del panel */
.lp-grape{
padding:.55rem .7rem;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
border-radius:.75rem;
margin-bottom:.35rem;
}
.lp-grape:last-child{margin-bottom:0}
.lp-grape-head{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-bottom:.25rem}
.lp-grape-name{
font-family:var(--sans);font-size:.78rem;font-weight:600;
color:#fff;letter-spacing:-.015em;
text-transform:capitalize;
}
.lp-grape-tag{
font-family:var(--sans);font-size:.58rem;font-weight:500;
padding:.14rem .42rem;border-radius:999px;
background:rgba(212,184,105,.1);color:var(--brand-gold-2);
border:1px solid rgba(212,184,105,.16);
letter-spacing:.01em;
}
.lp-grape-style{
font-family:var(--sans);font-size:.7rem;font-style:italic;
color:rgba(255,255,255,.68);line-height:1.4;margin-top:.15rem;
}
.lp-grape-notes{
font-family:var(--sans);font-size:.66rem;
color:rgba(255,255,255,.55);line-height:1.4;letter-spacing:.01em;
margin-top:.25rem;
}
/* Tag row (flavor notes, pairing) */
.lp-tag-row{display:flex;flex-wrap:wrap;gap:.3rem}
.lp-tag{
font-family:var(--sans);font-size:.62rem;font-weight:500;
padding:.22rem .5rem;border-radius:999px;
background:rgba(255,255,255,.04);color:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.08);letter-spacing:.005em;
}
@media(prefers-reduced-motion:reduce){
.lp-service-panel{animation:none!important}
.lp-chip-more,.lp-chip-caret{transition:none!important;transform:none!important}
}
.ai-chat-bubble strong{color:#fff;font-weight:600}
/* Bubble de respuesta local — indica al usuario que no gastó IA */
.lp-bubble-local{
border-left:2px solid var(--brand-gold-border);
background:linear-gradient(160deg,rgba(212,184,105,.06),rgba(212,184,105,.02));
}
.lp-local-tag{
margin-top:.55rem;padding-top:.45rem;
border-top:1px solid rgba(255,255,255,.06);
font-family:var(--sans);font-size:.58rem;font-weight:600;
color:rgba(212,184,105,.7);letter-spacing:.14em;text-transform:uppercase;
}
.ai-chat-bubble em{color:rgba(212,184,105,.8);font-style:italic}
.ai-chat-bubble ul{padding-left:1rem;margin:.2rem 0;list-style:disc}
.ai-chat-bubble li{margin:.1rem 0}
.ai-chat-bubble li.li-num{list-style:decimal}
/* Thinking waveform */
.ai-chat-thinking{display:flex;align-items:center;gap:.45rem;padding:.5rem .75rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start;animation:botIn .25s ease}
.ai-chat-thinking-label{font-size:.58rem;color:rgba(212,184,105,.55);font-style:italic}
.ai-chat-wave{display:flex;gap:2.5px;align-items:center;height:12px}
.ai-chat-wave span{width:2px;border-radius:2px;background:rgba(212,184,105,.45);display:block;animation:ttsWave .9s ease-in-out infinite}
.ai-chat-wave span:nth-child(1){height:4px;animation-delay:0s}
.ai-chat-wave span:nth-child(2){height:9px;animation-delay:.1s}
.ai-chat-wave span:nth-child(3){height:5px;animation-delay:.2s}
.ai-chat-wave span:nth-child(4){height:11px;animation-delay:.05s}
.ai-chat-wave span:nth-child(5){height:4px;animation-delay:.15s}
/* Options bar */
.ai-chat-opts {
display:flex; gap:.3rem; padding:.4rem .7rem; flex-wrap:nowrap;
overflow-x:auto; flex-shrink:0; scrollbar-width:none;
border-top:1px solid rgba(255,255,255,.04);
}
.ai-chat-opts::-webkit-scrollbar{display:none}
.ai-chat-opt {
background:rgba(255,255,255,.03); border:1px solid rgba(212,184,105,.18);
color:rgba(212,184,105,.75); font-size:.61rem; padding:.27rem .62rem;
border-radius:30px; cursor:pointer; transition:.2s; font-family:var(--sans);
white-space:nowrap; flex-shrink:0; touch-action:manipulation;
animation:chipIn .22s cubic-bezier(.16,1,.3,1) both;
}
.ai-chat-opt:hover{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.4);color:var(--gold)}
.ai-chat-opt:active{transform:scale(.92)}
@keyframes chipIn{from{opacity:0;transform:scale(.84) translateY(4px)}to{opacity:1;transform:none}}
/* ══════════════════════════════════════════════════════════════════
CHATBOX COMPOSER v2 — Rediseño 2026 (Apple/Claude/iMessage tier)
Densidad reducida: input + send primarios, botón "+" agrupa foto/galería/scan,
mic al lado. Input más generoso, mejor jerarquía visual.
══════════════════════════════════════════════════════════════════ */
.ai-chat-bar {
display:flex; align-items:flex-end; gap:.5rem;
padding:.65rem .8rem .8rem;
border-top:1px solid rgba(212,184,105,.1);
background:linear-gradient(180deg,transparent,rgba(4,9,15,.35));
flex-shrink:0;
position:relative;
}
.ai-chat-input {
flex:1; background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.09);
border-radius:22px; padding:.7rem 1rem .7rem 1.05rem;
color:var(--text-primary); font-size:.85rem;
font-family:var(--sans); outline:none;
transition:border-color var(--dur-base) ease,background var(--dur-base) ease;
min-width:0; resize:none; overflow-y:auto; line-height:1.5;
min-height:44px; max-height:140px;
scrollbar-width:thin;scrollbar-color:rgba(212,184,105,.35) transparent;
}
.ai-chat-input:focus{border-color:rgba(212,184,105,.4);background:rgba(212,184,105,.05)}
.ai-chat-input::placeholder{color:rgba(255,255,255,.32);font-style:italic}
.ai-chat-send {
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
border:none; color:var(--text-inverse);
width:44px; height:44px; border-radius:50%; cursor:pointer;
flex-shrink:0; font-size:1.05rem; font-weight:700;
transition:transform var(--dur-fast) ease,box-shadow var(--dur-base) ease,opacity var(--dur-base) ease;
display:flex; align-items:center; justify-content:center;
touch-action:manipulation; -webkit-user-select:none; user-select:none;
box-shadow:0 4px 14px rgba(212,184,105,.35);
opacity:.35;pointer-events:none;
}
.ai-chat-send.has-text{opacity:1;pointer-events:auto}
.ai-chat-send.has-text:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(212,184,105,.5)}
.ai-chat-send.has-text:active{transform:scale(.94)}
.ai-chat-stop{background:linear-gradient(135deg,#ef4444,#f87171);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:.85rem;transition:transform var(--dur-fast) ease;display:flex;align-items:center;justify-content:center;touch-action:manipulation;box-shadow:0 4px 14px rgba(239,68,68,.4)}
.ai-chat-stop:hover{transform:scale(1.05)}
.ai-chat-stop:active{transform:scale(.94)}
/* Botones secundarios (mic, cam) — más discretos, mismo tamaño */
.ai-chat-mic{background:transparent;border:1px solid rgba(212,184,105,.22);color:rgba(212,184,105,.7);width:40px;height:40px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:.95rem;transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,background var(--dur-fast) ease;display:flex;align-items:center;justify-content:center;line-height:1;touch-action:manipulation;align-self:center}
.ai-chat-mic:hover{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.42);color:var(--brand-gold)}
.ai-chat-mic.listening{background:rgba(255,80,80,.18);border-color:rgba(255,80,80,.55);color:#ff6060;animation:mic-pulse 1s ease infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,80,80,.4)}50%{box-shadow:0 0 0 8px rgba(255,80,80,0)}}
.ai-chat-cam {
background:transparent; border:1px solid rgba(212,184,105,.22); color:rgba(212,184,105,.7);
width:40px; height:40px; border-radius:50%; cursor:pointer; flex-shrink:0;
font-size:1rem; transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,background var(--dur-fast) ease;
display:flex; align-items:center; justify-content:center;
touch-action:manipulation; align-self:center;
}
.ai-chat-cam:hover{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.42);color:var(--brand-gold)}
/* Ocultar galería y scan del composer directo — se acceden vía "+" (menú expandible) */
.ai-chat-gal,.ai-chat-scan{display:none!important}
/* Botón "+" attach menu — expande foto/galería/scan en popup */
.ai-chat-attach{background:transparent;border:1px solid rgba(212,184,105,.22);color:rgba(212,184,105,.7);width:40px;height:40px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:1.35rem;line-height:1;transition:border-color var(--dur-fast) ease,color var(--dur-fast) ease,background var(--dur-fast) ease,transform var(--dur-fast) ease;display:flex;align-items:center;justify-content:center;touch-action:manipulation;align-self:center;padding-bottom:2px}
.ai-chat-attach:hover{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.42);color:var(--brand-gold)}
.ai-chat-attach.open{transform:rotate(45deg);background:rgba(212,184,105,.15);border-color:rgba(212,184,105,.5);color:var(--brand-gold)}
/* Popup menu attach */
.ai-chat-attach-menu{
position:absolute;bottom:calc(100% + 8px);left:.8rem;z-index:20;
display:none;flex-direction:column;gap:.4rem;
background:linear-gradient(180deg,rgba(15,45,80,.98),rgba(4,9,15,.98));
border:1px solid rgba(212,184,105,.2);border-radius:.85rem;
padding:.55rem;min-width:180px;
backdrop-filter:blur(var(--blur-lg)) saturate(1.4);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(1.4);
box-shadow:var(--shadow-lg);
animation:attachMenuIn .22s var(--ease-out-expo);
}
.ai-chat-attach-menu.open{display:flex}
@keyframes attachMenuIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.ai-chat-attach-item{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;background:transparent;border:none;border-radius:.55rem;color:#fff;font-family:var(--sans);font-size:.82rem;cursor:pointer;text-align:left;transition:background var(--dur-fast) ease}
.ai-chat-attach-item:hover{background:rgba(212,184,105,.1)}
.ai-chat-attach-item-ico{font-size:1.1rem;width:24px;text-align:center}
/* Auto-hide onboarding cuando user tiene mensajes o input activo */
body.chat-has-input .ai-chat-opts,
body.chat-has-messages .ai-chat-opts{opacity:.35;transition:opacity .3s ease;pointer-events:none;max-height:0;overflow:hidden;padding:0;margin:0}
@media(prefers-reduced-motion:reduce){
.ai-chat-send,.ai-chat-stop,.ai-chat-mic,.ai-chat-cam,.ai-chat-attach,.ai-chat-attach-menu{transition:none!important;animation:none!important;transform:none!important}
}
/* Annotation bar */
.ai-chat-annot-bar {
display:none; align-items:center; gap:.38rem;
padding:.45rem .65rem .55rem; border-top:1px solid rgba(255,255,255,.06);
flex-shrink:0; background:rgba(212,184,105,.03);
}
.ai-chat-annot-bar.visible{display:flex}
.ai-chat-annot-thumb{width:2.2rem;height:2.2rem;object-fit:cover;border-radius:.35rem;flex-shrink:0;border:1px solid rgba(212,184,105,.3)}
.ai-chat-annot-input {
flex:1; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
border-radius:8px; padding:.35rem .55rem; color:var(--white); font-size:.72rem;
font-family:var(--sans); outline:none; min-width:0; transition:.2s;
}
.ai-chat-annot-input:focus{border-color:rgba(212,184,105,.35);background:rgba(212,184,105,.04)}
.ai-chat-annot-input::placeholder{color:rgba(255,255,255,.26);font-size:.68rem}
.ai-chat-annot-send {
background:var(--gold); border:none; border-radius:50%; width:28px; height:28px;
cursor:pointer; color:var(--bg); font-size:.88rem; flex-shrink:0;
display:flex; align-items:center; justify-content:center; transition:.2s;
touch-action:manipulation;
}
.ai-chat-annot-send:hover{opacity:.85}
.ai-chat-annot-cancel {
background:none; border:1px solid rgba(255,255,255,.15); border-radius:50%;
width:22px; height:22px; cursor:pointer; color:rgba(255,255,255,.45);
font-size:.62rem; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:.2s;
touch-action:manipulation;
}
.ai-chat-annot-cancel:hover{border-color:rgba(255,255,255,.35);color:var(--white)}
/* Photo preview & vision */
.ai-chat-img-preview {
max-width:150px; max-height:110px; object-fit:cover; border-radius:10px;
border:1px solid rgba(212,184,105,.2); display:block; margin-top:.2rem;
}
.ai-chat-vision-label{font-size:.6rem;color:rgba(212,184,105,.6);margin-top:.3rem;display:flex;align-items:center;gap:.3rem}
.ai-chat-vision-annotation{font-size:.68rem;color:var(--gold);font-style:italic;margin-top:.25rem;padding:.1rem .35rem;border-left:2px solid rgba(212,184,105,.5);opacity:.85}
/* Occasion grid — v72 simplificado: 4 tiles primaries en 2x2, más grandes y respirables */
.ai-chat-occ-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;padding:.35rem 0 .1rem}
.ai-chat-occ{background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(212,184,105,.03));border:1px solid rgba(212,184,105,.16);border-radius:14px;padding:.85rem .5rem .75rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;transition:transform var(--dur-base) var(--ease-out-expo),border-color var(--dur-base) ease,background var(--dur-base) ease;font-family:var(--sans);color:inherit;-webkit-tap-highlight-color:transparent}
.ai-chat-occ:hover{background:linear-gradient(155deg,rgba(212,184,105,.1),rgba(212,184,105,.05));border-color:rgba(212,184,105,.42);transform:translateY(-2px)}
.ai-chat-occ:active{transform:scale(.96)}
.ai-chat-occ-ico{font-size:1.6rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(212,184,105,.2))}
.ai-chat-occ-lbl{font-size:.72rem;color:rgba(255,255,255,.78);text-align:center;line-height:1.3;letter-spacing:.005em;font-weight:500}
.ai-chat-occ-cam{border-color:rgba(212,184,105,.25);background:rgba(212,184,105,.05)}
.ai-chat-occ-budget{border-color:rgba(212,184,105,.18);background:rgba(212,184,105,.04)}
/* Budget expand */
.ai-chat-budget-expand{display:flex;flex-direction:column;gap:.26rem;width:100%;animation:aiCardIn .22s ease both}
.ai-chat-budget-back{background:none;border:none;color:rgba(255,255,255,.28);font-size:.57rem;cursor:pointer;text-align:left;padding:.05rem 0;font-family:var(--sans);margin-bottom:.06rem;transition:.15s;letter-spacing:.02em}
.ai-chat-budget-back:hover{color:rgba(255,255,255,.58)}
.ai-chat-budget-opt{display:flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.1);border-radius:10px;padding:.42rem .65rem;cursor:pointer;transition:.2s;font-family:var(--sans);width:100%}
.ai-chat-budget-opt:hover{border-color:rgba(212,184,105,.32);background:rgba(212,184,105,.07)}
.ai-chat-budget-opt-ico{font-size:.95rem;flex-shrink:0;width:1.2rem;text-align:center}
.ai-chat-budget-opt-txt{font-size:.69rem;color:var(--white);font-weight:500}
.ai-chat-budget-opt-sub{font-size:.58rem;color:rgba(255,255,255,.38);margin-left:auto;white-space:nowrap}
/* Product cards */
.ai-chat-prod-row{display:flex;gap:.35rem;overflow-x:auto;padding:.2rem 0 .35rem;scrollbar-width:none;width:100%;margin-top:.1rem}
.ai-chat-prod-row::-webkit-scrollbar{display:none}
.ai-chat-prod-card{background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.14);border-radius:12px;padding:.5rem .5rem .45rem;flex-shrink:0;width:112px;cursor:pointer;transition:.22s;display:flex;flex-direction:column;gap:.14rem;animation:aiCardIn .28s ease both}
.ai-chat-prod-card:hover{border-color:rgba(212,184,105,.38);background:rgba(212,184,105,.07);transform:translateY(-2px)}
.ai-chat-prod-card:active{transform:scale(.96)}
.ai-chat-prod-img{width:100%;height:60px;object-fit:contain;border-radius:6px}
.ai-chat-prod-name{font-size:.58rem;color:rgba(255,255,255,.86);font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.08rem}
.ai-chat-prod-price{font-size:.64rem;color:var(--gold);font-weight:700;margin-top:auto;padding-top:.15rem}
.ai-chat-prod-add{width:100%;margin-top:.2rem;background:rgba(212,184,105,.12);border:1px solid rgba(212,184,105,.22);color:var(--gold);border-radius:6px;font-size:.6rem;padding:.22rem;cursor:pointer;transition:.18s;font-family:var(--sans);font-weight:600}
.ai-chat-prod-add:hover{background:rgba(212,184,105,.28)}
/* Reaction + share */
.ai-chat-react{background:none;border:none;color:rgba(212,184,105,.2);font-size:.65rem;cursor:pointer;padding:.12rem .28rem;transition:.2s;margin-top:.15rem;align-self:flex-start;border-radius:20px;letter-spacing:.04em;font-family:var(--sans)}
.ai-chat-react:hover{color:rgba(212,184,105,.6);background:rgba(212,184,105,.08)}
.ai-chat-react.liked{color:var(--gold);background:rgba(212,184,105,.12)}
.ai-chat-share{background:none;border:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.27);border-radius:20px;padding:.17rem .44rem;font-size:.57rem;cursor:pointer;margin-left:.22rem;transition:.18s;font-family:var(--sans);vertical-align:middle}
.ai-chat-share:hover{border-color:rgba(212,184,105,.28);color:rgba(212,184,105,.72)}
.ai-chat-share.copied{border-color:rgba(212,184,105,.45);color:var(--gold)}
.ai-chat-wa{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.32);color:#25d366;border-radius:20px;padding:.17rem .44rem;font-size:.57rem;cursor:pointer;margin-left:.22rem;transition:.18s;font-family:var(--sans);vertical-align:middle}
.ai-chat-wa:hover{background:rgba(37,211,102,.25);border-color:rgba(37,211,102,.55)}
/* Inline option chips (from AI [OPCIONES: ...] blocks) */
.ai-chat-inline-opts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.45rem}
.ai-chat-inline-opt{background:rgba(212,184,105,.08);border:1px solid rgba(212,184,105,.28);color:rgba(212,184,105,.85);font-size:.62rem;padding:.3rem .65rem;border-radius:18px;cursor:pointer;transition:.18s;font-family:var(--sans)}
.ai-chat-inline-opt:hover{background:rgba(212,184,105,.18);border-color:var(--gold);color:var(--gold)}
.ai-chat-inline-opt-write{background:none;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.38);font-size:.62rem;padding:.3rem .65rem;border-radius:18px;cursor:pointer;transition:.18s;font-family:var(--sans)}
.ai-chat-inline-opt-write:hover{border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.7)}
/* Mixologist confirmation bubble */
.ai-chat-mixo-prompt{margin-top:.5rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.ai-chat-mixo-yes{background:rgba(212,184,105,.12);border:1px solid rgba(212,184,105,.4);color:var(--gold);font-size:.65rem;padding:.35rem .8rem;border-radius:20px;cursor:pointer;transition:.18s;font-family:var(--sans)}
.ai-chat-mixo-yes:hover{background:rgba(212,184,105,.25);border-color:var(--gold)}
.ai-chat-mixo-no{background:none;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-size:.65rem;padding:.35rem .8rem;border-radius:20px;cursor:pointer;transition:.18s;font-family:var(--sans)}
.ai-chat-mixo-no:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.75)}
/* Stream cursor */
@keyframes botCursor{0%,100%{opacity:1}50%{opacity:0}}
.bot-stream-cur{animation:botCursor .65s step-end infinite;color:var(--gold);margin-left:1px}
/* Onboarding quiz */
.ai-onboard-opts{display:flex;flex-wrap:wrap;gap:.3rem;padding:.25rem 0 .5rem;align-self:flex-start;max-width:100%}
.ai-onboard-opt{background:rgba(212,184,105,.07);border:1px solid rgba(212,184,105,.2);color:rgba(255,255,255,.7);border-radius:16px;padding:.28rem .62rem;font-size:.64rem;cursor:pointer;transition:.18s;font-family:var(--sans);touch-action:manipulation}
.ai-onboard-opt:hover{background:rgba(212,184,105,.18);border-color:rgba(212,184,105,.42);color:var(--gold)}
/* Animations */
@keyframes avatarSpin{to{transform:rotate(360deg)}}
@keyframes botIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes botDot{0%,60%,100%{opacity:.25;transform:scale(.75) translateY(0)}30%{opacity:1;transform:scale(1) translateY(-4px)}}
@keyframes ttsWave{0%,100%{transform:scaleY(1);opacity:.6}50%{transform:scaleY(1.7);opacity:1}}
@keyframes aiCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* Accessibility: respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.bot-stream-cur{animation:none;opacity:1}
.ai-chat-mic.listening{animation:none}
}
/* Toast */
.toast {
position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%) translateY(30px);
background:rgba(15,25,45,.96); border:1px solid rgba(212,184,105,.25);
color:var(--white); border-radius:12px; padding:.55rem 1.1rem;
font-size:.73rem; font-family:var(--sans); opacity:0; transition:opacity .3s, transform .3s;
pointer-events:none; z-index:999; white-space:nowrap;
backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
box-shadow:0 8px 32px rgba(0,0,0,.5);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* Footer */
/* Footer editorial v2 — grid multi-columna desktop, stack mobile */
.app-footer-v2{
padding:2rem 1.4rem 1.4rem;
background:linear-gradient(180deg,transparent,rgba(4,9,15,.4));
border-top:1px solid rgba(255,255,255,.06);
font-family:var(--sans);
color:rgba(255,255,255,.55);font-size:.72rem;line-height:1.5;
}
.af-inner{
max-width:1440px;margin:0 auto;
display:grid;grid-template-columns:1fr;gap:1.4rem;padding-bottom:1.4rem;
border-bottom:1px solid rgba(255,255,255,.05);
}
@media(min-width:700px){.af-inner{grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}}
@media(min-width:1440px){.af-inner{gap:2.4rem;padding-bottom:2rem}}
.af-col{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.af-col-brand{gap:.5rem}
.af-brand-title{font-family:var(--sans);font-size:1rem;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.af-brand-tag{font-size:.62rem;color:var(--brand-gold-2);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.af-brand-desc{font-size:.72rem;color:rgba(255,255,255,.55);line-height:1.5;margin:.3rem 0 0;max-width:38ch}
.af-col-hdr{font-size:.58rem;font-weight:700;color:rgba(212,184,105,.85);letter-spacing:.18em;text-transform:uppercase;margin-bottom:.3rem}
.af-link,.af-link-static,.af-hours,.af-btn-link{
font-family:var(--sans);font-size:.72rem;color:rgba(255,255,255,.7);text-decoration:none;line-height:1.55;
display:block;text-align:left;background:none;border:none;padding:.08rem 0;cursor:pointer;
transition:color var(--dur-fast) ease;
letter-spacing:-.003em;
}
.af-link:hover,.af-btn-link:hover{color:var(--brand-gold-2)}
.af-link b{color:#fff;font-weight:600}
.af-link-static,.af-hours{cursor:default;color:rgba(255,255,255,.55)}
.af-copy{
max-width:1440px;margin:1rem auto 0;padding-top:1rem;
text-align:center;font-size:.62rem;color:rgba(255,255,255,.4);letter-spacing:.01em;line-height:1.55;
}
.af-copy-emph{color:var(--brand-gold);font-weight:600}
/* Admin login link — discreto pero descubrible, integrado al copy legal */
.af-admin-link{
background:transparent;border:1px solid rgba(212,184,105,.28);
color:var(--brand-gold);
font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.05em;
padding:.24rem .55rem;border-radius:999px;cursor:pointer;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
-webkit-tap-highlight-color:transparent;
margin-left:.2rem;
vertical-align:middle;
}
.af-admin-link:hover{background:rgba(212,184,105,.08);border-color:var(--brand-gold);color:var(--brand-gold-2)}
@media(max-width:400px){.app-footer-v2{padding:1.4rem 1rem 1rem}}
.app-footer {
text-align:center; padding:.9rem 1rem .7rem;
border-top:1px solid rgba(212,184,105,.06);
font-size:.72rem; color:rgba(255,255,255,.5); letter-spacing:.03em; line-height:1.5;
flex-shrink:0;
}
.app-footer a{color:rgba(212,184,105,.35);text-decoration:none;transition:color .2s}
.app-footer a:hover{color:var(--gold)}
/* Leyenda sanitaria — Reglamento LGS en Materia de Publicidad (MX): visible permanentemente */
.legal-strip{
text-align:center; padding:.55rem 1rem;
background:rgba(0,0,0,.55);
border-top:1px solid rgba(212,184,105,.12);
color:rgba(255,255,255,.78);
font-size:.62rem; letter-spacing:.04em; line-height:1.45;
font-weight:500;
}
.legal-strip strong{color:var(--gold);font-weight:600}
/* Dedupe: la compliance MX ahora vive en app-footer-v2 → ocultar legal-strip
siempre que exista el footer nuevo (evita duplicación en desktop). */
body:has(.app-footer-v2) .legal-strip{display:none !important}
/* Responsive */
@media(max-width:700px){
.app-aside{display:none}
.app-main{padding:1rem .7rem 1.5rem}
.chat-wrap{max-width:100%;min-height:calc(100vh - 220px);min-height:calc(100svh - 220px)}
.ai-chat-embed{min-height:calc(100vh - 260px);min-height:calc(100svh - 260px)}
.app-header{padding:.75rem 1rem}
/* Android — prevenir zoom en inputs (16px mínimo evita autozoom) */
.ai-chat-input,.ai-chat-annot-input{font-size:16px !important;line-height:1.45 !important}
/* Touch targets ≥44px (WCAG 2.1 AA) para toque preciso */
.ai-chat-send,.ai-chat-stop,.ai-chat-mic,.ai-chat-cam{min-width:44px;min-height:44px;width:44px;height:44px}
.ag-sel{min-height:44px;padding:.7rem .5rem}
.ag-gbtn{min-height:44px;padding:.65rem .5rem}
.ag-cta{min-height:52px}
.lang-btn{padding:.4rem .55rem;min-height:36px}
}
@media(min-width:701px){
.chat-wrap{min-height:min(700px,calc(100vh - 120px));min-height:min(700px,calc(100svh - 120px))}
}
/* Android PWA safe areas (notch/edge-to-edge) */
@supports(padding:env(safe-area-inset-bottom)){
.ai-chat-bar{padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
.app-footer{padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}
.app-header{padding-top:calc(.75rem + env(safe-area-inset-top))}
}
/* ── PWA Install Hint — iOS & Android (flujo del documento) ───── */
.install-hint-bar{
max-height:0; overflow:hidden; opacity:0;
background:rgba(6,12,26,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
border-bottom:1px solid rgba(212,184,105,.13);
transition:max-height .42s cubic-bezier(.16,1,.3,1), opacity .35s ease;
will-change:max-height,opacity;
}
.install-hint-bar.visible{max-height:56px;opacity:1}
.install-hint-inner{display:flex;align-items:center;gap:.55rem;padding:.44rem 1rem;height:48px}
.install-hint-app-icon{width:28px;height:28px;border-radius:7px;flex-shrink:0;border:1px solid rgba(212,184,105,.2)}
.install-hint-copy{flex:1;min-width:0;overflow:hidden}
.install-hint-name{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-hint-sub{font-size:.57rem;color:rgba(255,255,255,.38);margin-top:.04rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.25rem}
.install-hint-sub em{color:rgba(212,184,105,.78);font-style:normal;font-weight:600}
.install-hint-cta{background:rgba(212,184,105,.14);border:1px solid rgba(212,184,105,.32);color:var(--gold);font-size:.62rem;font-weight:700;padding:.26rem .72rem;border-radius:20px;cursor:pointer;white-space:nowrap;font-family:var(--sans);touch-action:manipulation;transition:background .18s,transform .12s;flex-shrink:0}
.install-hint-cta:hover{background:rgba(212,184,105,.26)}
.install-hint-cta:active{transform:scale(.92)}
.install-hint-close{background:none;border:none;color:rgba(255,255,255,.2);cursor:pointer;font-size:.9rem;padding:.4rem .55rem;line-height:1;flex-shrink:0;touch-action:manipulation;transition:color .18s;min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:.35rem}
.install-hint-close:hover{color:rgba(255,255,255,.5)}
.install-hint-share{display:inline-flex;align-items:center;flex-shrink:0;width:11px;height:11px;color:rgba(212,184,105,.88)}
/* ── Visual premium refinements ─────────────────────────────── */
/* Header shimmer accent line */
.app-header{position:relative}
.app-header::after{
content:''; position:absolute; bottom:-1px; left:15%; right:15%; height:1px;
background:linear-gradient(90deg,transparent,rgba(212,184,105,.2),transparent);
pointer-events:none;
}
/* Bot bubble gold left accent + GPU compositing */
.ai-chat-bubble.bot{border-left:2px solid rgba(212,184,105,.2);position:relative}
.ai-chat-bubble{will-change:transform,opacity}
/* Input focus glow */
.ai-chat-input:focus{
border-color:rgba(212,184,105,.38);background:rgba(212,184,105,.04);
box-shadow:0 0 0 3px rgba(212,184,105,.06);
}
/* Send button states — empty vs has-text */
.ai-chat-send{transition:.22s}
.ai-chat-send.has-text{
background:rgba(212,184,105,.26);border-color:rgba(212,184,105,.55);
box-shadow:0 0 0 3px rgba(212,184,105,.07);
}
/* Send button press feedback */
.ai-chat-send:active:not(:disabled){transform:scale(.88);background:var(--gold);color:var(--bg)}
/* Reaction/share bar micro-polish */
.ai-chat-react{border:1px solid transparent;transition:color .18s,background .18s,border-color .18s;min-height:44px;align-items:center;display:inline-flex}
.ai-chat-react:hover{border-color:rgba(212,184,105,.15)}
/* v192.5 — thumbs down (negative rating). Reutiliza .ai-chat-react + variant .disliked. */
.ai-chat-react.ai-chat-react-neg:hover{color:rgba(244,124,124,.75);background:rgba(244,124,124,.06);border-color:rgba(244,124,124,.18)}
.ai-chat-react.ai-chat-react-neg.disliked{color:#f47c7c;background:rgba(244,124,124,.10);border-color:rgba(244,124,124,.35)}
.ai-chat-react.ai-chat-react-neg.disliked:hover{background:rgba(244,124,124,.14)}
.ai-chat-reason-wrap{display:block;margin:.3rem 0 .5rem;padding:.5rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.14);border-radius:.55rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:min(94%,420px);animation:reasonIn .22s cubic-bezier(.4,.14,.3,1)}
@keyframes reasonIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.ai-chat-reason-ta{width:100%;box-sizing:border-box;background:transparent;border:none;color:rgba(255,255,255,.82);font-family:var(--sans);font-size:.78rem;line-height:1.4;resize:none;outline:none;padding:.35rem .4rem;min-height:44px;max-height:88px}
.ai-chat-reason-ta::placeholder{color:rgba(255,255,255,.32)}
.ai-chat-reason-actions{display:flex;justify-content:flex-end;gap:.35rem;margin-top:.3rem}
.ai-chat-reason-btn{background:rgba(212,184,105,.14);border:1px solid rgba(212,184,105,.28);color:var(--gold);border-radius:.4rem;padding:.32rem .7rem;font-size:.68rem;font-family:var(--sans);cursor:pointer;letter-spacing:.02em;transition:.18s;min-height:32px;touch-action:manipulation}
.ai-chat-reason-btn:hover{background:rgba(212,184,105,.22)}
.ai-chat-reason-btn.secondary{background:transparent;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.ai-chat-reason-btn.secondary:hover{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.28)}
.ai-chat-reason-counter{font-size:.58rem;color:rgba(255,255,255,.25);align-self:center;margin-right:auto;letter-spacing:.03em}
.ai-chat-share,.ai-chat-wa{transition:background .18s,border-color .18s,color .18s,transform .12s}
.ai-chat-share:active,.ai-chat-wa:active{transform:scale(.93)}
/* ── Status dot dinámico ── */
.ai-chat-dot{transition:background .35s,box-shadow .35s}
.ai-chat-dot.thinking{background:#fbbf24;box-shadow:0 0 6px #fbbf24;animation:dotPulse 1.2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.7)}}
#aiStatusText{transition:opacity .2s}
/* ── Buy Tracker (Domino's-style narrative) ── */
.lp-buy-tracker{
display:flex;flex-direction:column;gap:.5rem;
background:linear-gradient(135deg,rgba(37,211,102,.06),rgba(212,184,105,.04));
border:1px solid rgba(212,184,105,.22);
border-radius:.75rem;padding:.85rem 1rem;margin:.4rem 0;
animation:lpBuyFade .3s ease;
}
@keyframes lpBuyFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.lp-buy-step{
display:flex;align-items:center;gap:.55rem;
font-size:.82rem;line-height:1.35;
color:rgba(255,255,255,.35);
opacity:0;transform:translateY(4px);
transition:opacity .35s ease,color .35s ease,transform .35s ease;
}
.lp-buy-step.is-visible{opacity:1;transform:translateY(0)}
.lp-buy-step.is-active{color:rgba(255,255,255,.9)}
.lp-buy-step.is-done{color:rgba(180,230,196,.92)}
.lp-buy-step-icon{
flex:0 0 1.2rem;display:inline-flex;align-items:center;justify-content:center;
font-size:.95rem;
}
.lp-buy-step.is-active .lp-buy-step-icon{animation:dotPulse 1.1s ease-in-out infinite}
.lp-buy-step-txt{flex:1 1 auto}
.lp-buy-cta{
margin-top:.55rem;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;border:none;border-radius:.55rem;
padding:.6rem .85rem;font:600 .8rem/1 inherit;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
align-self:flex-start;
opacity:0;transform:translateY(6px);
transition:opacity .3s ease,transform .3s ease,filter .18s;
touch-action:manipulation;
}
.lp-buy-cta.is-visible{opacity:1;transform:translateY(0)}
.lp-buy-cta:hover{filter:brightness(1.08)}
.lp-buy-cta:active{filter:brightness(.94);transform:scale(.97) translateY(0)}
@media(prefers-reduced-motion:reduce){
.lp-buy-tracker,.lp-buy-step,.lp-buy-cta{animation:none!important;transition:opacity .01s!important}
.lp-buy-step.is-active .lp-buy-step-icon{animation:none}
}
/* ── Copy button en burbujas bot ── */
.ai-chat-copy{
position:absolute;top:.3rem;right:.3rem;
background:rgba(6,14,26,.85);border:1px solid rgba(255,255,255,.1);
border-radius:6px;width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;opacity:0;transition:.18s;
color:rgba(255,255,255,.35);font-size:.62rem;line-height:1;
}
.ai-chat-bubble.bot:hover .ai-chat-copy{opacity:1}
.ai-chat-copy:hover{color:var(--gold);border-color:rgba(212,184,105,.3);background:rgba(12,25,44,.9)}
.ai-chat-copy.copied{color:#4ade80;border-color:rgba(74,222,128,.3);opacity:1}
@media(pointer:coarse){.ai-chat-copy{opacity:.7;background:rgba(4,9,15,.85);border-color:rgba(212,184,105,.28)}}
/* TTS button — hermano del copy, offset a la izquierda */
.ai-chat-tts{position:absolute;top:.42rem;right:2.15rem;width:1.55rem;height:1.55rem;display:flex;align-items:center;justify-content:center;background:rgba(4,9,15,.7);border:1px solid rgba(212,184,105,.15);border-radius:.32rem;color:rgba(212,184,105,.65);cursor:pointer;opacity:0;transition:all .2s ease;-webkit-tap-highlight-color:transparent}
.ai-chat-bubble.bot:hover .ai-chat-tts{opacity:1}
.ai-chat-tts:hover{color:var(--gold);border-color:rgba(212,184,105,.3);background:rgba(12,25,44,.9)}
.ai-chat-tts.playing{color:var(--gold);border-color:rgba(212,184,105,.55);background:rgba(212,184,105,.12);opacity:1;animation:ttsPulse 1.4s ease-in-out infinite}
@keyframes ttsPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,184,105,.35)}50%{box-shadow:0 0 0 4px rgba(212,184,105,0)}}
@media(pointer:coarse){.ai-chat-tts{opacity:.7;background:rgba(4,9,15,.85);border-color:rgba(212,184,105,.28)}}
@media(prefers-reduced-motion:reduce){.ai-chat-tts.playing{animation:none}}
/* ── Timestamp de mensaje ── */
.ai-chat-stamp{
font-size:.52rem;color:rgba(255,255,255,.18);
align-self:flex-start;padding-left:.4rem;
margin-top:-.15rem;letter-spacing:.03em;
font-variant-numeric:tabular-nums;
}
/* ── Character counter ── */
.ai-chat-char-count{
font-size:.6rem;color:rgba(255,255,255,.2);
flex-shrink:0;min-width:2.2rem;text-align:right;
transition:color .2s;line-height:1;align-self:center;
display:none;
}
.ai-chat-char-count.show{display:block}
.ai-chat-char-count.warn{color:var(--yellow)}
.ai-chat-char-count.limit{color:#f87171;font-weight:600}
/* ── Scroll-to-bottom FAB ── */
.chat-scroll-fab{
position:absolute;bottom:4.4rem;right:.75rem;z-index:6;
width:30px;height:30px;border-radius:50%;
background:rgba(8,18,36,.88);
border:1px solid rgba(212,184,105,.38);
color:var(--gold);cursor:pointer;
display:flex;align-items:center;justify-content:center;
opacity:0;pointer-events:none;
transition:opacity .22s,transform .22s;
transform:translateY(6px);
box-shadow:0 4px 18px rgba(0,0,0,.55);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.chat-scroll-fab.visible{opacity:1;pointer-events:auto;transform:none}
.chat-scroll-fab:hover{background:rgba(212,184,105,.18)}
.chat-scroll-fab:active{transform:scale(.88)!important}
.chat-scroll-fab svg{width:13px;height:13px;stroke-width:2.2}
/* ── Streaming cursor — slim bar premium ── */
.bot-stream-cur{
display:inline-block;width:2px;height:.85em;
background:var(--gold);border-radius:1px;
vertical-align:text-bottom;margin-left:2px;
animation:botCursor .7s step-end infinite;
}
/* ── Thinking wave — más gruesa y expresiva ── */
.ai-chat-wave span{width:3px;border-radius:3px}
@keyframes ttsWave{0%,100%{transform:scaleY(.35);opacity:.45}50%{transform:scaleY(1.7);opacity:1}}
/* ══════════════════════════════════════
VIDEO INTRO OVERLAY
══════════════════════════════════════ */
.vi-overlay {
position:fixed; inset:0; z-index:1000;
background:#04090f;
display:none; flex-direction:column;
align-items:center; justify-content:center;
transition:opacity .8s cubic-bezier(.4,0,.2,1);
}
/* Intro video se muestra solo si opt-in explícito (lp_show_intro=1).
Reduce fricción inicial — el user va directo age gate → chat. */
body.show-intro .vi-overlay{display:flex}
.vi-overlay.fade-out { opacity:0; pointer-events:none; }
/* Partículas de fondo decorativas */
.vi-bg-deco {
position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.vi-orb {
position:absolute; border-radius:50%;
background:radial-gradient(circle, rgba(212,184,105,.07) 0%, transparent 70%);
animation:vi-pulse 6s ease-in-out infinite;
}
.vi-orb:nth-child(1){width:600px;height:600px;top:-200px;right:-150px;animation-delay:0s}
.vi-orb:nth-child(2){width:400px;height:400px;bottom:-100px;left:-100px;animation-delay:3s}
@keyframes vi-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.08);opacity:1}}
/* Logo superior */
.vi-logo {
position:absolute; top:2rem; left:50%; transform:translateX(-50%);
text-align:center; z-index:2;
animation:vi-fadein 1s ease both;
}
.vi-logo-name {
font-family:var(--serif); font-size:1.4rem; font-weight:600;
color:var(--gold); letter-spacing:.08em;
}
.vi-logo-tag {
font-size:.5rem; color:rgba(212,184,105,.38); letter-spacing:.3em;
text-transform:uppercase; font-weight:500; margin-top:.2rem; display:block;
}
/* Marco del video */
.vi-frame {
position:relative; z-index:2;
width:min(420px, 88vw);
animation:vi-fadein .8s ease both;
}
.vi-frame::before {
content:''; position:absolute; inset:-1px; border-radius:20px; z-index:-1;
background:conic-gradient(from 0deg, rgba(212,184,105,.5), rgba(212,184,105,.05), rgba(212,184,105,.5), rgba(212,184,105,.05), rgba(212,184,105,.5));
animation:avatarSpin 6s linear infinite; opacity:.6;
}
.vi-frame::after {
content:''; position:absolute; inset:0; border-radius:19px; z-index:0;
background:#04090f;
}
.vi-video {
width:100%; border-radius:18px; display:block;
position:relative; z-index:1;
box-shadow:0 40px 120px rgba(0,0,0,.8), 0 0 0 1px rgba(212,184,105,.12);
background:#000;
}
/* Líneas decorativas laterales (desktop) */
.vi-line {
position:absolute; top:50%; transform:translateY(-50%);
width:1px; height:200px;
background:linear-gradient(to bottom, transparent, rgba(212,184,105,.3), transparent);
}
.vi-line.left { left:calc(50% - min(260px,46vw) - 40px); }
.vi-line.right { right:calc(50% - min(260px,46vw) - 40px); }
.vi-line::before {
content:''; position:absolute; top:50%; left:50%;
transform:translate(-50%,-50%);
width:5px; height:5px; border-radius:50%;
background:var(--gold); opacity:.5;
}
/* ── CTA glass pill — toda la pantalla es el botón ── */
.vi-overlay { cursor:pointer; }
/* Vignette inferior: garantiza contraste del CTA */
.vi-overlay::before {
content:''; position:absolute; bottom:0; left:0; right:0;
height:45%; z-index:2; pointer-events:none;
background:linear-gradient(to top, rgba(4,9,15,.92) 0%, rgba(4,9,15,.5) 50%, transparent 100%);
}
.vi-cta {
position:absolute; bottom:2.6rem;
left:0; right:0;
display:flex; flex-direction:column; align-items:center; gap:.7rem;
z-index:4; pointer-events:none;
animation:vi-fadein 2s cubic-bezier(.16,1,.3,1) both;
}
/* Pill de vidrio esmerilado */
.vi-cta-pill {
display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
padding:.72rem 2.2rem;
background:rgba(10,5,1,.55);
backdrop-filter:blur(24px) saturate(160%);
-webkit-backdrop-filter:blur(24px) saturate(160%);
border:1px solid rgba(212,184,105,.32);
border-radius:100px;
box-shadow:0 0 0 1px rgba(212,184,105,.07) inset,
0 12px 40px rgba(0,0,0,.5),
0 0 0 4px rgba(212,184,105,.04);
animation:vi-glow-pulse 3s ease-in-out infinite 2.5s;
}
.vi-cta-dot {
width:7px; height:7px; border-radius:50%;
background:var(--gold);
box-shadow:0 0 8px rgba(212,184,105,.7);
animation:vi-dot-pulse 1.8s ease-in-out infinite;
flex-shrink:0;
}
.vi-cta-text {
font-family:var(--serif); font-size:1.18rem;
font-weight:500; color:rgba(212,184,105,.97);
letter-spacing:.07em; line-height:1; white-space:nowrap;
}
.vi-cta-hint {
font-size:.47rem; color:rgba(255,255,255,.28);
letter-spacing:.2em; text-transform:uppercase;
font-family:var(--sans); font-weight:400;
}
@keyframes vi-glow-pulse {
0%,100%{ border-color:rgba(212,184,105,.28); box-shadow:0 0 0 1px rgba(212,184,105,.07) inset,0 12px 40px rgba(0,0,0,.5),0 0 20px rgba(212,184,105,.05); }
50% { border-color:rgba(212,184,105,.48); box-shadow:0 0 0 1px rgba(212,184,105,.12) inset,0 12px 40px rgba(0,0,0,.5),0 0 45px rgba(212,184,105,.15); }
}
@keyframes vi-dot-pulse {
0%,100%{ transform:scale(1); box-shadow:0 0 6px rgba(212,184,105,.6); }
50% { transform:scale(1.35);box-shadow:0 0 12px rgba(212,184,105,.9); }
}
/* Botón skip — pill vidrio, alto contraste (WCAG 2.2.2) */
.vi-skip {
position:absolute; top:1.1rem; right:1.2rem; z-index:10;
background:rgba(4,9,15,.82);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.55);
border-radius:100px;
color:rgba(255,255,255,.97); font-size:.73rem; font-family:var(--sans);
padding:.48rem 1.1rem .48rem .92rem;
cursor:pointer; letter-spacing:.09em; text-transform:uppercase;
display:inline-flex; align-items:center; gap:.38rem;
transition:.22s; opacity:0; pointer-events:none;
box-shadow:0 4px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1) inset;
text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.vi-skip::after { content:'›'; font-size:1.1rem; opacity:.9; line-height:1; margin-top:-1px; }
.vi-skip.show { opacity:1; pointer-events:auto; }
.vi-skip:hover {
background:rgba(212,184,105,.22);
border-color:rgba(212,184,105,.75);
color:rgba(212,184,105,.97);
box-shadow:0 4px 28px rgba(0,0,0,.7), 0 0 0 1px rgba(212,184,105,.15) inset, 0 0 20px rgba(212,184,105,.12);
}
.vi-skip:focus-visible { outline:2px solid rgba(212,184,105,.7); outline-offset:3px; }
/* Barra de progreso del video */
.vi-progress {
position:absolute; bottom:0; left:0; right:0; height:2px;
background:rgba(255,255,255,.05); overflow:hidden;
z-index:3;
}
.vi-progress-bar {
height:100%; width:0%;
background:linear-gradient(90deg, rgba(212,184,105,.4), rgba(212,184,105,.9));
transition:width .3s linear;
}
/* Botón de audio — pill vidrio interactivo */
.vi-audio-badge {
position:absolute; top:1.1rem; left:1.2rem; z-index:10;
display:inline-flex; align-items:center; gap:.42rem;
font-size:.69rem; color:rgba(255,255,255,.97);
font-family:var(--sans); letter-spacing:.05em;
background:rgba(4,9,15,.82);
backdrop-filter:blur(20px) saturate(160%);
-webkit-backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.5);
border-radius:100px;
padding:.48rem .92rem;
box-shadow:0 4px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08) inset;
opacity:0; transition:.3s;
cursor:pointer; appearance:none; -webkit-appearance:none;
user-select:none; text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.vi-audio-badge.show { opacity:1; pointer-events:auto; }
.vi-audio-badge:hover {
background:rgba(212,184,105,.22);
border-color:rgba(212,184,105,.75);
color:rgba(212,184,105,.97);
box-shadow:0 4px 28px rgba(0,0,0,.7), 0 0 0 1px rgba(212,184,105,.15) inset, 0 0 20px rgba(212,184,105,.12);
}
.vi-audio-badge:hover svg { stroke:rgba(212,184,105,.97); }
.vi-audio-badge:focus-visible { outline:2px solid rgba(212,184,105,.7); outline-offset:3px; }
.vi-audio-badge:active { transform:scale(.95); }
.vi-audio-badge svg { width:17px; height:17px; opacity:1; stroke:rgba(212,184,105,.97); flex-shrink:0; transition:stroke .2s; filter:drop-shadow(0 0 3px rgba(212,184,105,.4)); }
.vi-audio-badge.muted { border-color:rgba(255,100,80,.55); background:rgba(30,8,4,.82); }
.vi-audio-badge.muted svg { stroke:rgba(255,140,120,.95); filter:drop-shadow(0 0 3px rgba(255,100,80,.4)); }
.vi-audio-badge.muted .vi-audio-label { color:rgba(255,200,190,.95); }
@keyframes vi-fadein{from{opacity:0;transform:translateY(12px) translateX(var(--tx,0))}to{opacity:1;transform:translateY(0) translateX(var(--tx,0))}}
/* ══ AGE GATE ══ */
#ageGate{position:fixed;inset:0;z-index:10000;background:#060e1a;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;overflow-y:auto;animation:agIn .7s ease}
/* v192.5 · Close btn + backdrop */
#agCloseBtn{position:fixed;top:14px;right:14px;z-index:10002;background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.18);color:rgba(212,184,105,.55);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.18s;padding:0;touch-action:manipulation;font-family:inherit}
#agCloseBtn:hover{background:rgba(244,124,124,.08);border-color:rgba(244,124,124,.38);color:rgba(255,180,170,.85)}
#agCloseBtn:focus-visible{outline:2px solid rgba(212,184,105,.55);outline-offset:2px}
#agBackdrop{position:fixed;inset:0;z-index:9999;background:transparent;cursor:pointer}
/* El backdrop está detrás del .ag-wrap para no bloquear inputs del form */
#ageGate .ag-wrap{position:relative;z-index:10001}
/* Toast dismissible post-close (compliance MX) */
#agLeaveToast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:10003;background:rgba(20,10,10,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(244,124,124,.35);color:#ffd2c8;padding:.85rem 1.1rem;border-radius:.65rem;font-size:.78rem;max-width:min(92vw,420px);display:flex;gap:.8rem;align-items:center;box-shadow:0 12px 36px rgba(0,0,0,.55);animation:agToastIn .35s cubic-bezier(.4,.14,.3,1)}
#agLeaveToast .ag-toast-close{background:none;border:none;color:rgba(255,210,200,.6);cursor:pointer;font-size:1.1rem;line-height:1;padding:.15rem .4rem;border-radius:.3rem;touch-action:manipulation}
#agLeaveToast .ag-toast-close:hover{color:#ffd2c8;background:rgba(255,255,255,.06)}
@keyframes agToastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
/* Features como gancho pre-age-gate: ocultar ageGate mientras features está abierto */
body.pre-age-features #ageGate{display:none!important}
body.pre-age-features #featOverlay{z-index:10001}
#ageGate.ag-done{display:none}
@keyframes agIn{from{opacity:0}to{opacity:1}}
.ag-wrap{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px}
.ag-logo-area{text-align:center;margin-bottom:.5rem}
.ag-logo-name{font-family:var(--serif);font-size:2.2rem;color:var(--gold);letter-spacing:.1em;line-height:1}
.ag-logo-tag{display:block;font-size:.48rem;color:rgba(212,184,105,.38);letter-spacing:.28em;text-transform:uppercase;margin-top:.4rem}
.ag-rule{width:48px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,184,105,.4),transparent);margin:1.6rem auto}
.ag-title{font-family:var(--serif);font-size:1.45rem;color:rgba(255,255,255,.82);font-weight:400;letter-spacing:.04em;text-align:center;margin-bottom:.35rem}
.ag-sub{font-size:.7rem;color:rgba(255,255,255,.28);text-align:center;letter-spacing:.03em;line-height:1.65;max-width:320px;margin-bottom:1.8rem}
.ag-form{width:100%}
.ag-lbl{display:block;font-size:.58rem;color:rgba(212,184,105,.5);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem}
.ag-dob{display:grid;grid-template-columns:1fr 1.7fr 1.2fr;gap:.4rem;margin-bottom:1.2rem}
.ag-sel{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.18);border-radius:.5rem;padding:.62rem .45rem;color:rgba(255,255,255,.65);font-size:.8rem;font-family:var(--sans);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(212,184,105,.35)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .45rem center}
.ag-sel:focus{border-color:rgba(212,184,105,.45)}
.ag-sel.ag-sel-err{border-color:rgba(244,124,124,.55);box-shadow:0 0 0 2px rgba(244,124,124,.12);animation:agShake .35s cubic-bezier(.36,.07,.19,.97)}
@keyframes agShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}
.ag-sel option{background:#0d1f36;color:rgba(255,255,255,.8)}
.ag-gender-btns{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.5rem}
.ag-gbtn{flex:1;min-width:88px;background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.18);border-radius:2rem;padding:.52rem .6rem;color:rgba(255,255,255,.42);font-size:.74rem;cursor:pointer;transition:.18s;font-family:var(--sans);letter-spacing:.03em;white-space:nowrap;touch-action:manipulation;text-align:center}
@media(max-width:400px){
.ag-gbtn{white-space:normal;line-height:1.15;font-size:.68rem;min-width:0;padding:.5rem .4rem}
.ag-gender-btns{gap:.3rem}
}
.ag-gbtn:hover{border-color:rgba(212,184,105,.38);color:rgba(255,255,255,.7)}
.ag-gbtn.ag-sel-g{background:rgba(212,184,105,.14);border-color:rgba(212,184,105,.55);color:var(--gold)}
.ag-cta{width:100%;padding:.85rem;background:linear-gradient(135deg,#d4b869,#c9a84c);color:#06111f;font-weight:700;font-size:.88rem;border:none;border-radius:.6rem;cursor:pointer;letter-spacing:.05em;transition:opacity .2s,transform .12s;font-family:var(--sans);touch-action:manipulation}
.ag-cta:hover{opacity:.88;transform:translateY(-1px)}
.ag-cta:active{transform:translateY(0)}
.ag-cta:disabled{opacity:.45;cursor:default;transform:none}
.ag-err{color:#f47c7c;font-size:.72rem;text-align:center;margin-top:.55rem;min-height:1.1em}
.ag-legal{max-width:360px;font-size:.54rem;color:rgba(255,255,255,.17);text-align:center;line-height:1.7;margin-top:1.4rem;letter-spacing:.02em}
.ag-blocked-msg{text-align:center;padding:1rem 0}
.ag-blocked-title{font-family:var(--serif);font-size:1.4rem;color:rgba(255,255,255,.5);margin-bottom:.8rem}
.ag-blocked-txt{font-size:.78rem;color:rgba(255,255,255,.28);line-height:1.7;max-width:300px;margin:0 auto}
/* ══ ADMIN PANEL v3 ══ */
#admOverlay{display:none;position:fixed;inset:0;z-index:9999;background:rgba(4,9,18,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);align-items:flex-start;justify-content:center;padding:1.5rem 1rem;overflow-y:auto}
#admOverlay.active{display:flex}
.adm-modal{background:linear-gradient(160deg,#0d1f36 0%,#091525 100%);border:1px solid rgba(212,184,105,.2);border-radius:1.2rem;width:100%;max-width:960px;padding:1.75rem;flex-shrink:0;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.adm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;border-bottom:1px solid rgba(212,184,105,.09);padding-bottom:1.1rem}
.adm-header-left{display:flex;align-items:center;gap:.75rem}
.adm-title{font-family:var(--serif);font-size:1.2rem;color:var(--gold);letter-spacing:.03em}
.adm-live{display:inline-flex;align-items:center;gap:.28rem;background:rgba(76,175,147,.1);border:1px solid rgba(76,175,147,.25);padding:.13rem .38rem;border-radius:.25rem;font-size:.5rem;color:#4caf93;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.adm-live-dot{width:5px;height:5px;border-radius:50%;background:#4caf93;flex-shrink:0;animation:adm-pulse 1.8s infinite}
@keyframes adm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes adm-spin{to{transform:rotate(360deg)}}
.adm-header-right{display:flex;align-items:center;gap:.55rem}
.adm-refresh-timer{font-size:.56rem;color:rgba(255,255,255,.22);letter-spacing:.03em}
.adm-close{background:none;border:none;color:rgba(255,255,255,.32);cursor:pointer;font-size:1rem;padding:.3rem .5rem;border-radius:.4rem;transition:color .2s,background .2s;line-height:1;touch-action:manipulation}
.adm-close:hover{color:var(--white);background:rgba(255,255,255,.06)}
/* Login */
#admLogin{background:linear-gradient(rgba(10,5,7,.55),rgba(58,13,24,.35)),url('/covers/admin-hero.jpg') center/cover no-repeat;border-radius:1rem;position:relative;overflow:hidden}
#admLogin::before{content:'';position:absolute;inset:0;backdrop-filter:blur(2px) saturate(140%);-webkit-backdrop-filter:blur(2px) saturate(140%);pointer-events:none}
.adm-login-wrap{display:flex;flex-direction:column;align-items:center;padding:2.5rem 1rem 2rem;position:relative;z-index:1}
.adm-login-icon{font-size:2.4rem;margin-bottom:.9rem;filter:grayscale(.3)}
.adm-login-sub{font-size:.72rem;color:rgba(255,255,255,.3);margin-bottom:1.6rem;text-align:center;letter-spacing:.02em}
.adm-login-form{max-width:300px;width:100%}
.adm-field{margin-bottom:.9rem}
.adm-field label{display:block;font-size:.63rem;color:rgba(255,255,255,.35);margin-bottom:.32rem;letter-spacing:.08em;text-transform:uppercase}
.adm-field input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:.6rem;padding:.65rem .85rem;color:var(--white);font-size:.88rem;outline:none;transition:border-color .2s,box-shadow .2s;font-family:var(--sans);box-sizing:border-box}
.adm-field input:focus{border-color:rgba(212,184,105,.48);box-shadow:0 0 0 3px rgba(212,184,105,.07)}
.adm-login-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#d4b869,#b8962e);color:#0a2540;font-weight:700;font-size:.9rem;border:none;border-radius:.6rem;cursor:pointer;transition:opacity .2s,transform .1s;font-family:var(--sans);touch-action:manipulation;letter-spacing:.02em}
.adm-login-btn:hover{opacity:.9}
.adm-login-btn:active{transform:scale(.98)}
.adm-login-btn:disabled{opacity:.45;cursor:default}
.adm-err{color:#f47c7c;font-size:.75rem;margin-top:.65rem;min-height:1.2em;text-align:center}
/* Tab navigation Apple-style — segmented control */
.adm-tabs{display:flex;gap:.25rem;padding:.28rem;background:rgba(0,0,0,.32);border-radius:.75rem;margin-bottom:1.35rem;border:1px solid rgba(255,255,255,.05);position:sticky;top:0;z-index:5;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.adm-tab-btn{flex:1;padding:.58rem .85rem;background:transparent;border:0;color:rgba(255,255,255,.5);font-size:.79rem;font-weight:600;letter-spacing:-.005em;border-radius:.55rem;cursor:pointer;transition:color .16s,background .16s,box-shadow .16s;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;font-family:var(--sans);touch-action:manipulation;line-height:1.15;min-height:34px}
.adm-tab-btn:hover{color:rgba(255,255,255,.85)}
.adm-tab-btn.active{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.06));color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.09) inset}
.adm-tab-count{font-size:.55rem;font-weight:700;padding:.05rem .28rem;background:rgba(212,184,105,.14);color:var(--gold);border-radius:2rem;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.adm-tab-panel[hidden]{display:none}
.adm-tab-panel{animation:admFadeIn .28s cubic-bezier(.4,0,.2,1)}
@keyframes admFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.adm-tab-hdr{display:flex;flex-direction:column;gap:.18rem;margin-bottom:1rem}
.adm-tab-hdr-title{font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:-.015em;font-family:var(--sans);line-height:1.2}
.adm-tab-hdr-sub{font-size:.68rem;color:rgba(255,255,255,.4);letter-spacing:.01em;font-family:var(--sans)}
.adm-hero-metric{background:linear-gradient(155deg,rgba(212,184,105,.09),rgba(212,184,105,.02));border:1px solid rgba(212,184,105,.18);border-radius:1rem;padding:1.35rem 1.2rem;margin-bottom:1.15rem;display:flex;align-items:center;gap:1.15rem;flex-wrap:wrap}
.adm-hero-num{font-size:2.65rem;font-weight:800;color:var(--gold);line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.adm-hero-body{flex:1;min-width:180px;display:flex;flex-direction:column;gap:.2rem}
.adm-hero-lbl{font-size:.78rem;font-weight:600;color:#fff;letter-spacing:-.005em;font-family:var(--sans)}
.adm-hero-sub{font-size:.68rem;color:rgba(255,255,255,.5);line-height:1.45;letter-spacing:.005em;font-family:var(--sans)}
@media(max-width:520px){.adm-tab-btn{padding:.5rem .55rem;font-size:.7rem;gap:.28rem;flex:0 0 auto;white-space:nowrap;min-width:auto}.adm-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity}.adm-tabs::-webkit-scrollbar{display:none}.adm-tab-btn{scroll-snap-align:start}.adm-hero-num{font-size:2.1rem}}
/* KPIs */
.adm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:.55rem;margin-bottom:1.4rem}
/* Sección "Ahorro real de tokens" en el admin */
.adm-savings{margin:1rem 0 1.4rem;padding:1.2rem;border-radius:1rem;background:linear-gradient(160deg,rgba(74,222,128,.06),rgba(74,222,128,.02));border:1px solid rgba(74,222,128,.18)}
.adm-savings-head{display:flex;align-items:baseline;gap:.55rem;margin-bottom:.85rem}
.adm-savings-title{font-family:var(--sans);font-size:.85rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.adm-savings-sub{font-family:var(--sans);font-size:.62rem;color:rgba(255,255,255,.5);letter-spacing:.02em}
.adm-path-bars{display:flex;flex-direction:column;gap:.4rem;margin-top:.8rem}
.adm-path-row{display:grid;grid-template-columns:120px 1fr 60px;align-items:center;gap:.6rem;font-family:var(--sans)}
.adm-path-lbl{font-size:.7rem;color:rgba(255,255,255,.7);text-transform:capitalize}
.adm-path-bar{height:8px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden}
.adm-path-bar>span{display:block;height:100%;border-radius:999px;transition:width .35s ease}
.adm-path-n{font-size:.7rem;font-weight:600;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.adm-kpi{background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.065);border-radius:.9rem;padding:.95rem .75rem;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;transition:border-color .2s}
.adm-kpi::before{content:'';position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,rgba(212,184,105,.45),transparent);opacity:0;transition:opacity .25s}
.adm-kpi:hover{border-color:rgba(212,184,105,.2)}
.adm-kpi:hover::before{opacity:1}
.adm-kpi-val{font-size:1.65rem;font-weight:700;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.adm-kpi-lbl{font-size:.57rem;color:rgba(255,255,255,.32);margin-top:.3rem;text-transform:uppercase;letter-spacing:.07em}
.adm-kpi-sub{font-size:.54rem;color:rgba(255,255,255,.2);margin-top:.16rem}
.adm-trend-up{color:#4caf93;font-size:.57rem;margin-top:.22rem;display:block;font-weight:600}
.adm-trend-dn{color:#f47c7c;font-size:.57rem;margin-top:.22rem;display:block;font-weight:600}
.adm-trend-eq{color:rgba(255,255,255,.25);font-size:.57rem;margin-top:.22rem;display:block}
.adm-kpi-score{font-size:1.1rem;font-weight:700;color:#4caf93;line-height:1}
/* Sections */
.adm-section{margin-bottom:1.5rem}
.adm-section-title{font-size:.59rem;color:rgba(212,184,105,.42);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7rem;display:flex;align-items:center;gap:.5rem}
.adm-section-title::after{content:'';flex:1;height:1px;background:rgba(212,184,105,.07)}
.adm-loading{text-align:center;padding:3rem;color:rgba(255,255,255,.3);font-size:.85rem}
.adm-loading-spinner{width:22px;height:22px;border:2px solid rgba(212,184,105,.15);border-top-color:rgba(212,184,105,.65);border-radius:50%;animation:adm-spin .75s linear infinite;margin:0 auto 1rem}
/* Grids */
.adm-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}
.adm-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-bottom:1.5rem}
@media(max-width:620px){.adm-2col,.adm-3col{grid-template-columns:1fr}}
/* Mode/stat bars */
.adm-modes{display:flex;flex-direction:column;gap:.5rem}
.adm-mode-bar{display:flex;align-items:center;gap:.65rem;font-size:.72rem;color:rgba(255,255,255,.45)}
.adm-mode-bar>span:first-child{width:90px;flex-shrink:0;font-size:.7rem}
.adm-mode-track{flex:1;height:5px;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.adm-mode-fill{height:100%;border-radius:3px;transition:width .65s cubic-bezier(.25,.46,.45,.94)}
.adm-fill-gold{background:linear-gradient(90deg,#d4b869,#b8962e)}
.adm-fill-blue{background:linear-gradient(90deg,#7ab0f5,#4a80d0)}
.adm-fill-purple{background:linear-gradient(90deg,#c07ef5,#8040d0)}
.adm-fill-green{background:linear-gradient(90deg,#4caf93,#2a8060)}
.adm-fill-pink{background:linear-gradient(90deg,#f5a0c0,#d06080)}
.adm-fill-muted{background:rgba(255,255,255,.25)}
.adm-mode-bar>span:last-child{width:46px;text-align:right;flex-shrink:0;font-size:.66rem;color:rgba(255,255,255,.28)}
/* Bar charts */
.adm-chart-wrap{background:rgba(255,255,255,.016);border:1px solid rgba(255,255,255,.05);border-radius:.7rem;padding:.7rem .45rem .35rem;overflow:hidden}
.adm-chart{display:flex;align-items:flex-end;gap:2px;height:84px;overflow-x:auto}
.adm-bar{display:flex;flex-direction:column;align-items:center;flex:1;min-width:9px;height:100%;justify-content:flex-end;position:relative;cursor:default}
.adm-bar:hover .adm-bar-fill{filter:brightness(1.35)}
.adm-bar:hover .adm-bar-tip{opacity:1}
.adm-bar-fill{width:100%;max-width:22px;background:rgba(212,184,105,.4);border-radius:2px 2px 0 0;transition:height .5s cubic-bezier(.25,.46,.45,.94)}
.adm-bar-peak{background:rgba(212,184,105,.88)!important;box-shadow:0 0 8px rgba(212,184,105,.35)}
.adm-bar-today{background:rgba(76,175,147,.75)!important;box-shadow:0 0 6px rgba(76,175,147,.3)}
.adm-bar-lbl{font-size:.34rem;color:rgba(255,255,255,.18);margin-top:.2rem;white-space:nowrap;max-width:20px;overflow:hidden;text-align:center}
.adm-bar-tip{opacity:0;position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);background:#1a3350;border:1px solid rgba(212,184,105,.28);border-radius:.28rem;padding:.1rem .26rem;font-size:.48rem;color:var(--gold);white-space:nowrap;z-index:10;pointer-events:none;transition:opacity .15s}
/* Topics */
.adm-topic-bar{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:rgba(255,255,255,.45);margin-bottom:.38rem}
.adm-topic-bar>span:first-child{width:88px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.69rem}
.adm-topic-fill{background:linear-gradient(90deg,rgba(212,184,105,.6),rgba(212,184,105,.08));border-radius:3px;height:4px;transition:width .65s cubic-bezier(.25,.46,.45,.94)}
.adm-topic-bar>span:last-child{width:18px;text-align:right;flex-shrink:0;color:rgba(255,255,255,.25);font-size:.6rem}
/* Insights */
.adm-insights{display:flex;flex-direction:column;gap:.38rem}
.adm-insight{background:rgba(212,184,105,.035);border-left:2px solid rgba(212,184,105,.28);border-radius:0 .45rem .45rem 0;padding:.48rem .7rem;font-size:.71rem;color:rgba(255,255,255,.52);line-height:1.5}
.adm-insight strong{color:rgba(212,184,105,.82)}
/* Funnel */
.adm-funnel{display:flex;flex-direction:column;gap:.45rem}
.adm-funnel-step{display:flex;align-items:center;gap:.65rem;font-size:.71rem}
.adm-funnel-track{flex:1;height:12px;background:rgba(255,255,255,.04);border-radius:.2rem;overflow:hidden}
.adm-funnel-fill{height:100%;border-radius:.2rem;transition:width .7s cubic-bezier(.25,.46,.45,.94)}
.adm-funnel-label{width:72px;flex-shrink:0;color:rgba(255,255,255,.38);font-size:.68rem}
.adm-funnel-val{width:28px;text-align:right;flex-shrink:0;font-size:.66rem;font-weight:600}
/* Filter chips */
.adm-filter-chips{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.65rem}
.adm-chip{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.38);padding:.22rem .55rem;border-radius:2rem;font-size:.62rem;cursor:pointer;transition:all .18s;font-family:var(--sans);letter-spacing:.03em}
.adm-chip:hover{border-color:rgba(212,184,105,.28);color:rgba(212,184,105,.65)}
.adm-chip.active{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.38);color:var(--gold)}
/* Conversations */
.adm-convs{max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:.38rem;padding-right:.2rem}
.adm-convs::-webkit-scrollbar{width:3px}
.adm-convs::-webkit-scrollbar-track{background:transparent}
.adm-convs::-webkit-scrollbar-thumb{background:rgba(212,184,105,.15);border-radius:2px}
.adm-conv{background:rgba(255,255,255,.018);border:1px solid rgba(255,255,255,.05);border-left:2px solid transparent;border-radius:.65rem;padding:.72rem .8rem;transition:background .18s,border-color .18s}
.adm-conv:hover{background:rgba(255,255,255,.032)}
.adm-conv.mode-chat{border-left-color:rgba(122,176,245,.55)}
.adm-conv.mode-vision{border-left-color:rgba(192,126,245,.55)}
.adm-conv.mode-mixo{border-left-color:rgba(212,184,105,.55)}
.adm-conv.mode-entry{border-left-color:rgba(76,175,147,.55)}
.adm-conv-meta{font-size:.55rem;color:rgba(255,255,255,.26);margin-bottom:.28rem;display:flex;align-items:center;gap:.32rem;flex-wrap:wrap}
.adm-conv-user{font-size:.74rem;color:rgba(255,255,255,.7);margin-bottom:.2rem;line-height:1.45}
.adm-conv-bot{font-size:.69rem;color:rgba(255,255,255,.38);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.adm-conv-tags{display:flex;flex-wrap:wrap;gap:.18rem;margin-top:.28rem}
.adm-tag{background:rgba(212,184,105,.07);border:1px solid rgba(212,184,105,.14);color:rgba(212,184,105,.58);font-size:.47rem;padding:.07rem .28rem;border-radius:.16rem;letter-spacing:.04em}
.adm-empty{text-align:center;padding:2rem;color:rgba(255,255,255,.22);font-size:.8rem}
/* Search */
.adm-search-row{display:flex;gap:.38rem;margin-bottom:.6rem}
.adm-search-input{flex:1;background:rgba(255,255,255,.032);border:1px solid rgba(255,255,255,.08);border-radius:.5rem;padding:.46rem .72rem;color:var(--white);font-size:.76rem;outline:none;font-family:var(--sans);box-sizing:border-box;transition:border-color .2s}
.adm-search-input:focus{border-color:rgba(212,184,105,.28)}
.adm-search-input::placeholder{color:rgba(255,255,255,.17)}
/* Footer */
.adm-footer{display:flex;gap:.5rem;justify-content:space-between;align-items:center;margin-top:1.2rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.05)}
.adm-footer-left{font-size:.56rem;color:rgba(255,255,255,.2);letter-spacing:.02em}
.adm-footer-right{display:flex;gap:.4rem}
.adm-export{background:rgba(76,175,147,.07);border:1px solid rgba(76,175,147,.2);color:#4caf93;padding:.36rem .7rem;border-radius:.4rem;cursor:pointer;font-size:.68rem;transition:opacity .2s;font-family:var(--sans)}
.adm-export:hover{opacity:.75}
.adm-logout{background:rgba(244,124,124,.07);border:1px solid rgba(244,124,124,.2);color:#f47c7c;padding:.36rem .7rem;border-radius:.4rem;cursor:pointer;font-size:.68rem;transition:opacity .2s;font-family:var(--sans)}
.adm-logout:hover{opacity:.75}
.adm-refresh{background:rgba(212,184,105,.07);border:1px solid rgba(212,184,105,.2);color:var(--gold);padding:.36rem .7rem;border-radius:.4rem;cursor:pointer;font-size:.68rem;transition:opacity .2s;font-family:var(--sans)}
.adm-refresh:hover{opacity:.75}
.adm-warn{background:rgba(255,150,50,.07);border:1px solid rgba(255,150,50,.22);color:#ffaa55;padding:.72rem 1rem;border-radius:.6rem;font-size:.72rem;margin-bottom:1.1rem;line-height:1.5}
.adm-hidden{display:none!important}
/* Badges */
.adm-badge{display:inline-block;font-size:.44rem;padding:.07rem .22rem;border-radius:.14rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;margin-right:.14rem}
.adm-badge-chat{background:rgba(100,160,255,.13);color:#7ab0f5}
.adm-badge-mixo{background:rgba(212,184,105,.13);color:var(--gold)}
.adm-badge-vision{background:rgba(180,100,255,.13);color:#c07ef5}
.adm-badge-entry{background:rgba(76,175,147,.13);color:#4caf93}
.adm-gender-h{color:#7ab0f5}
.adm-gender-m{color:#f5a0c0}
.adm-gender-x{color:rgba(255,255,255,.3)}
/* ── Términos y Condiciones ── */
/* Resumen por temas (Sprint B3) — vista breve arriba del documento completo */
.tc-summary{background:linear-gradient(155deg,rgba(212,184,105,.06),rgba(4,9,15,.4));border:1px solid rgba(212,184,105,.18);border-radius:1rem;padding:1.2rem 1.1rem;margin-bottom:1.6rem}
.tc-summary-title{font-family:var(--serif);font-size:1.1rem;color:var(--gold);margin:0 0 .3rem;font-weight:500;letter-spacing:-.01em}
.tc-summary-sub{font-family:var(--sans);font-size:.72rem;color:rgba(255,255,255,.55);margin:0 0 1rem;line-height:1.4}
.tc-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.6rem;margin-bottom:1rem}
.tc-summary-card{background:linear-gradient(155deg,rgba(10,37,64,.4),rgba(4,9,15,.55));border:1px solid rgba(212,184,105,.12);border-radius:.7rem;padding:.85rem .9rem}
.tc-summary-ico{font-size:1.35rem;margin-bottom:.3rem;line-height:1}
.tc-summary-lbl{font-family:var(--serif);font-size:.85rem;color:#fff;font-weight:500;margin-bottom:.35rem;letter-spacing:-.005em}
.tc-summary-txt{font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.68);line-height:1.5}
.tc-summary-cta{width:100%;padding:.65rem .9rem;background:transparent;border:1px solid rgba(212,184,105,.28);border-radius:.6rem;color:var(--gold);font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .22s ease,border-color .22s ease}
.tc-summary-cta:hover{background:rgba(212,184,105,.08);border-color:rgba(212,184,105,.5)}
@media(max-width:480px){.tc-summary-grid{grid-template-columns:1fr}}
#tcOverlay{display:none;position:fixed;inset:0;z-index:9998;background:rgba(6,14,26,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);align-items:flex-start;justify-content:center;padding:1.5rem 1rem;overflow-y:auto}
#tcOverlay.active{display:flex}
.tc-modal{background:#0b1c31;border:1px solid rgba(212,184,105,.18);border-radius:1rem;width:100%;max-width:740px;padding:2rem;flex-shrink:0}
.tc-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid rgba(212,184,105,.12)}
.tc-brand-name{font-family:var(--serif);font-size:1.35rem;color:var(--gold);letter-spacing:.05em;line-height:1.1}
.tc-brand-sub{font-size:.52rem;color:rgba(212,184,105,.38);letter-spacing:.18em;text-transform:uppercase;margin-top:.22rem}
.tc-close{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;font-size:1.15rem;padding:.3rem .5rem;border-radius:.4rem;transition:color .2s;line-height:1;flex-shrink:0}
.tc-close:hover{color:var(--white)}
.tc-body{max-height:72vh;overflow-y:auto;padding-right:.6rem;scrollbar-width:thin;scrollbar-color:rgba(212,184,105,.2) transparent}
.tc-body::-webkit-scrollbar{width:4px}
.tc-body::-webkit-scrollbar-thumb{background:rgba(212,184,105,.2);border-radius:2px}
.tc-meta{font-size:.64rem;color:rgba(255,255,255,.3);margin-bottom:1.6rem;line-height:1.85;padding:.7rem .9rem;background:rgba(212,184,105,.04);border:1px solid rgba(212,184,105,.1);border-radius:.55rem}
.tc-meta strong{color:rgba(212,184,105,.55)}
.tc-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.05)}
.tc-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.tc-section-num{font-size:.5rem;color:rgba(212,184,105,.4);letter-spacing:.2em;text-transform:uppercase;margin-bottom:.22rem;font-family:var(--sans)}
.tc-section-title{font-family:var(--serif);font-size:1.05rem;color:var(--gold);margin-bottom:.7rem;font-weight:500;letter-spacing:.02em}
.tc-body-text{font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.9;font-family:var(--sans)}
.tc-body-text p{margin-bottom:.7rem}
.tc-body-text p:last-child{margin-bottom:0}
.tc-body-text ul{padding-left:1.1rem;margin:.4rem 0}
.tc-body-text li{margin-bottom:.32rem}
.tc-body-text strong{color:rgba(255,255,255,.8)}
.tc-body-text em{color:rgba(212,184,105,.85);font-style:normal}
.tc-badge{display:inline-block;background:rgba(212,184,105,.07);border:1px solid rgba(212,184,105,.18);color:rgba(212,184,105,.6);font-size:.48rem;padding:.1rem .38rem;border-radius:.22rem;letter-spacing:.05em;margin:.08rem .1rem .08rem 0;font-family:var(--sans);vertical-align:middle}
.tc-warn-box{background:rgba(244,124,124,.05);border:1px solid rgba(244,124,124,.18);border-radius:.5rem;padding:.6rem .9rem;margin:.65rem 0;font-size:.73rem;color:rgba(244,124,124,.75);line-height:1.65}
.tc-highlight-box{background:rgba(212,184,105,.05);border-left:2px solid rgba(212,184,105,.38);padding:.55rem .88rem;margin:.65rem 0;border-radius:0 .45rem .45rem 0}
.tc-table{width:100%;border-collapse:collapse;margin:.65rem 0}
.tc-table th{text-align:left;color:rgba(212,184,105,.5);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;padding:.38rem .55rem;border-bottom:1px solid rgba(212,184,105,.1);font-weight:600;font-family:var(--sans)}
.tc-table td{padding:.42rem .55rem;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.5);font-size:.73rem;vertical-align:top;line-height:1.65}
.tc-table td:first-child{color:rgba(255,255,255,.75);font-family:'Courier New',monospace;font-size:.65rem;white-space:nowrap}
.tc-footer-bar{margin-top:1.6rem;padding-top:1rem;border-top:1px solid rgba(212,184,105,.1);display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.tc-btn-close{background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.24);color:var(--gold);padding:.48rem 1.3rem;border-radius:.45rem;cursor:pointer;font-size:.78rem;font-family:var(--sans);transition:opacity .2s}
.tc-btn-close:hover{opacity:.8}
.tc-footer-date{font-size:.56rem;color:rgba(255,255,255,.18);letter-spacing:.04em}
/* ══ Bottle Scanner cards ══ */
.ai-chat-scan{color:var(--gold)!important}
.scan-loading{display:flex;align-items:center;gap:.55rem;background:rgba(212,184,105,.06);border:1px solid rgba(212,184,105,.18)}
.scan-result{background:linear-gradient(180deg,rgba(10,37,64,.7),rgba(4,9,15,.55));border:1px solid rgba(212,184,105,.28);padding:1rem;border-radius:.9rem;max-width:100%}
.scan-summary{font-size:.78rem;color:var(--gold);margin-bottom:.7rem;letter-spacing:.02em;font-family:var(--sans);font-weight:500}
.scan-card{display:flex;gap:.85rem;padding:.7rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.22);border-radius:.65rem;text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.scan-card:hover{transform:translateY(-1px);border-color:rgba(212,184,105,.55);background:rgba(212,184,105,.06)}
.scan-card-img{width:76px;height:76px;object-fit:contain;background:rgba(255,255,255,.94);border-radius:.4rem;flex-shrink:0}
.scan-card-img-fallback{opacity:.5;padding:.5rem;background:rgba(255,255,255,.05)}
.scan-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem;justify-content:space-between}
.scan-card-name{font-family:var(--serif);font-size:.86rem;line-height:1.15;color:#fff;font-weight:500}
.scan-card-price{font-size:.76rem;color:var(--gold);font-weight:600;letter-spacing:.02em}
.scan-card-cta{font-size:.68rem;color:rgba(212,184,105,.9);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem}
.scan-card:hover .scan-card-cta{color:var(--gold)}
.scan-card-wrap{display:flex;flex-direction:column;gap:.4rem}
.scan-card-actions{display:flex;gap:.4rem}
.scan-card-share,.scan-card-ask,.scan-card-cava,.scan-card-stock{flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem .5rem;background:rgba(212,184,105,.08);border:1px solid rgba(212,184,105,.22);border-radius:.55rem;color:rgba(212,184,105,.85);font-family:var(--sans);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;min-height:44px}
.scan-card-share:hover,.scan-card-ask:hover,.scan-card-cava:hover,.scan-card-stock:hover{background:rgba(212,184,105,.14);border-color:rgba(212,184,105,.4);color:var(--gold)}
.scan-card-share:active,.scan-card-ask:active,.scan-card-cava:active,.scan-card-stock:active{transform:scale(.98)}
.scan-card-share span,.scan-card-ask span,.scan-card-cava span,.scan-card-stock span{font-size:.9rem}
.scan-card-ask{background:linear-gradient(155deg,rgba(212,184,105,.14),rgba(212,184,105,.05));border-color:rgba(212,184,105,.4);color:var(--gold)}
.scan-card-ask:hover{background:linear-gradient(155deg,rgba(212,184,105,.22),rgba(212,184,105,.08))}
.scan-card-cava.saved{background:linear-gradient(155deg,rgba(255,95,128,.18),rgba(255,95,128,.06));border-color:rgba(255,95,128,.5);color:#ff8faa}
.scan-card-cava.saved:hover{background:linear-gradient(155deg,rgba(255,95,128,.26),rgba(255,95,128,.1));color:#ff9fb8}
.scan-alt-title{margin-top:1rem;font-size:.7rem;color:rgba(255,255,255,.6);letter-spacing:.05em;text-transform:uppercase;font-family:var(--sans);margin-bottom:.45rem}
.scan-alt-grid{display:flex;flex-direction:column;gap:.5rem}
.scan-card-alt{padding:.5rem;background:rgba(255,255,255,.02)}
.scan-card-alt .scan-card-img{width:56px;height:56px}
.scan-card-alt .scan-card-name{font-size:.76rem}
.scan-card-alt .scan-card-price{font-size:.7rem}
.scan-notes{margin-top:.75rem;font-size:.68rem;color:rgba(255,255,255,.45);font-style:italic;line-height:1.35;border-top:1px solid rgba(212,184,105,.1);padding-top:.55rem}
@media(max-width:480px){.scan-card-img{width:64px;height:64px}.scan-card-name{font-size:.8rem}}
/* ══════════════════════════════════════════════════════════════════
FEATURES / POTENCIAL — Modal onboarding post age-gate
Neuromarketing: navy background (+31% CTR vs white en premium),
gold accent en CTAs (150ms perception), consistent theming
(87% add-to-cart vs 54% inconsistent).
══════════════════════════════════════════════════════════════════ */
#featOverlay{position:fixed;inset:0;background:rgba(4,9,15,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:9990;display:none;align-items:flex-start;justify-content:center;padding:1.5rem 1rem;overflow-y:auto;opacity:0;transition:opacity .35s ease}
#featOverlay.active{display:flex;opacity:1}
.feat-modal{position:relative;width:100%;max-width:920px;background:linear-gradient(155deg,rgba(10,37,64,.85) 0%,rgba(4,9,15,.95) 65%,rgba(10,37,64,.75) 100%);border:1px solid rgba(212,184,105,.32);border-radius:1.1rem;padding:2.2rem 2rem 1.6rem;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(212,184,105,.06) inset;transform:translateY(20px) scale(.97);transition:transform .5s cubic-bezier(.22,1,.36,1)}
#featOverlay.active .feat-modal{transform:translateY(0) scale(1)}
.feat-close{position:absolute;top:.7rem;right:.9rem;background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.28);color:var(--gold);width:2.15rem;height:2.15rem;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:2}
.feat-close:hover{background:rgba(212,184,105,.2);transform:rotate(90deg)}
/* ── HERO editorial · foto fachada + logo LA PLAYA · Academy superpuesto ── */
.feat-hero{
position:relative;overflow:hidden;
aspect-ratio:21/9;
border-radius:.95rem;
border:1px solid rgba(212,184,105,.24);
box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08);
isolation:isolate;
margin-bottom:1.6rem;
}
.feat-hero-img{
position:absolute;inset:0;z-index:0;
background:
image-set(url('/academy-hero.avif') type('image/avif'), url('/academy-hero.jpg') type('image/jpeg')) center 35% / cover no-repeat,
linear-gradient(155deg, #1a1004 0%, #06101d 55%, #04090f 100%);
animation:featHeroKen 24s ease-in-out infinite alternate;
}
@keyframes featHeroKen{
0% { transform:scale(1) translate(0,0); }
100% { transform:scale(1.06) translate(-1%, -1%); }
}
.feat-hero-scrim{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg, rgba(4,9,15,.08) 0%, rgba(4,9,15,.42) 50%, rgba(4,9,15,.88) 100%),
linear-gradient(90deg, rgba(4,9,15,.55) 0%, rgba(4,9,15,0) 60%);
}
.feat-hero-lockup{
position:absolute;left:1.1rem;bottom:2.5rem;z-index:2;
display:inline-flex;align-items:stretch;
background:#005cb9;border-radius:5px;height:34px;padding:0 2px;
box-shadow:0 4px 14px rgba(0,92,185,.45),0 0 0 1px rgba(255,255,255,.08) inset;
}
.feat-hero-brand{
display:inline-flex;align-items:center;padding:0 11px 0 13px;
color:#fff;font-family:var(--sans);font-weight:900;font-size:.95rem;
letter-spacing:.06em;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.18);white-space:nowrap;
}
.feat-hero-divider{width:1px;height:19px;align-self:center;background:rgba(255,255,255,.55);margin:0 9px 0 7px}
.feat-hero-academy{
display:inline-flex;align-items:center;padding-right:13px;
color:#fff;font-family:var(--sans);font-size:.9rem;font-weight:600;
letter-spacing:.005em;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.15);white-space:nowrap;
}
.feat-hero-tag{
position:absolute;left:1.15rem;right:1.15rem;bottom:.85rem;z-index:2;
font-family:var(--sans);font-size:.62rem;font-weight:500;
color:rgba(255,255,255,.76);letter-spacing:.18em;text-transform:uppercase;
text-shadow:0 1px 3px rgba(0,0,0,.6);
}
/* ── PITCH · Intro + manifiesto + pilares ── */
.feat-intro{margin-bottom:1.6rem;text-align:left}
.feat-eyebrow{
display:inline-flex;align-items:center;gap:.4rem;
padding:.3rem .75rem;
background:linear-gradient(135deg,rgba(212,184,105,.16),rgba(212,184,105,.05));
border:1px solid rgba(212,184,105,.32);
border-radius:2rem;
font-family:var(--sans);font-size:.55rem;font-weight:700;
color:var(--brand-gold,#d4b869);letter-spacing:.2em;text-transform:uppercase;
line-height:1;margin-bottom:.85rem;
}
.feat-title{font-family:var(--serif);font-size:2rem;font-weight:500;color:#fff;margin:0 0 .7rem;line-height:1.1;letter-spacing:-.015em}
.feat-title b{color:var(--brand-gold,#d4b869);font-weight:500;font-style:italic}
.feat-subtitle{font-family:var(--sans);font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.55;max-width:640px;margin:0;font-weight:400}
.feat-subtitle b{color:rgba(255,255,255,.95);font-weight:600}
/* ── 3 pilares del manifiesto ── */
.feat-pillars{
display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
margin-top:1.35rem;padding:1rem;
background:linear-gradient(160deg,rgba(10,37,64,.42),rgba(4,9,15,.5));
border:1px solid rgba(212,184,105,.15);
border-radius:.85rem;
}
.feat-pillar{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:.2rem}
.feat-pillar-ico{font-size:1.4rem;line-height:1;filter:drop-shadow(0 3px 8px rgba(212,184,105,.28))}
.feat-pillar-txt{font-family:var(--sans);font-size:.7rem;font-weight:400;color:rgba(255,255,255,.62);line-height:1.5}
.feat-pillar-txt b{display:block;color:#fff;font-weight:700;font-size:.75rem;margin-bottom:.15rem;letter-spacing:-.005em}
@media(max-width:640px){.feat-pillars{grid-template-columns:1fr;gap:.85rem}}
/* Section header entre intro y features */
.feat-section-hdr{
font-family:var(--sans);font-size:.6rem;font-weight:700;
color:rgba(212,184,105,.65);letter-spacing:.22em;text-transform:uppercase;
margin:.4rem 0 .85rem;
display:flex;align-items:center;gap:.65rem;
}
.feat-section-hdr::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(212,184,105,.14),transparent)}
/* Podcast card destacado + values card */
.feat-card-podcast{background:linear-gradient(155deg,rgba(96,165,250,.08),rgba(10,37,64,.4));border-color:rgba(96,165,250,.28)}
.feat-card-values{background:linear-gradient(155deg,rgba(76,175,147,.06),rgba(10,37,64,.4));border-color:rgba(76,175,147,.24)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin-bottom:1.6rem}
.feat-card{background:rgba(255,255,255,.025);border:1px solid rgba(212,184,105,.14);border-radius:.7rem;padding:1.1rem .95rem;transition:all .28s cubic-bezier(.22,1,.36,1);position:relative;opacity:0;transform:translateY(12px);animation:featCardIn .5s cubic-bezier(.22,1,.36,1) forwards}
@media(prefers-reduced-motion:reduce){
#featOverlay,.feat-modal,.feat-card,.feat-start{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}
.feat-close:hover{transform:none}
}
.feat-card:hover{background:rgba(212,184,105,.05);border-color:rgba(212,184,105,.42);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(212,184,105,.08) inset}
.feat-card:nth-child(1){animation-delay:.05s}
.feat-card:nth-child(2){animation-delay:.11s}
.feat-card:nth-child(3){animation-delay:.17s}
.feat-card:nth-child(4){animation-delay:.23s}
.feat-card:nth-child(5){animation-delay:.29s}
.feat-card:nth-child(6){animation-delay:.35s}
.feat-card:nth-child(7){animation-delay:.41s}
.feat-card:nth-child(8){animation-delay:.47s}
@keyframes featCardIn{to{opacity:1;transform:translateY(0)}}
.feat-ico{font-size:1.6rem;line-height:1;margin-bottom:.55rem;filter:drop-shadow(0 2px 8px rgba(212,184,105,.35))}
.feat-ico-cta{background:linear-gradient(135deg,#d4b869,#e6cd80);-webkit-background-clip:text;background-clip:text}
.feat-card-title{font-family:var(--serif);font-size:.95rem;color:#fff;font-weight:500;margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;line-height:1.2}
.feat-card-desc{font-family:var(--sans);font-size:.71rem;color:rgba(255,255,255,.6);line-height:1.5;font-weight:300}
.feat-card-new{border-color:rgba(212,184,105,.32);background:linear-gradient(155deg,rgba(212,184,105,.06),rgba(255,255,255,.025))}
.feat-badge-new{font-family:var(--sans);font-size:.5rem;color:#0a2540;background:linear-gradient(90deg,#d4b869,#e6cd80);padding:.14rem .38rem;border-radius:.25rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase}
.feat-card-cta{background:linear-gradient(155deg,rgba(212,184,105,.08),rgba(10,37,64,.35));border-color:rgba(212,184,105,.28)}
/* ── Hero card feature (Mapa Jalisco NUEVO · onboarding first-time) ── */
.feat-card-hero{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:center;padding:1.1rem 1.2rem;margin:0 0 1.4rem;background:linear-gradient(135deg,rgba(212,184,105,.09),rgba(10,37,64,.55) 60%,rgba(212,184,105,.05));border:1px solid rgba(212,184,105,.42);border-radius:.85rem;box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 0 1px rgba(212,184,105,.08) inset;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:featHeroIn .55s cubic-bezier(.22,1,.36,1) both}
@keyframes featHeroIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.feat-hero-visual{width:96px;height:60px;flex:0 0 auto;border-radius:.5rem;background:rgba(4,9,15,.55);display:flex;align-items:center;justify-content:center;border:1px solid rgba(212,184,105,.18)}
.feat-hero-visual svg{display:block;color:#d4b869}
.feat-hero-body{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.feat-hero-body .feat-badge-new{align-self:flex-start;animation:badgePulse 2.4s ease-in-out infinite}
.feat-hero-heading{font-family:var(--serif);font-size:1.1rem;color:#fff;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin:0}
.feat-hero-desc{font-family:var(--sans);font-size:.75rem;color:rgba(255,255,255,.7);line-height:1.5;margin:0}
.feat-hero-cta{align-self:flex-start;margin-top:.3rem;background:linear-gradient(135deg,#e6cd80,#d4b869 55%,#c9a84c);color:#0a2540;border:none;padding:.55rem 1.05rem;border-radius:.45rem;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s ease;box-shadow:0 6px 18px rgba(212,184,105,.32)}
.feat-hero-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(212,184,105,.5)}
.feat-hero-cta:active{transform:translateY(0)}
@media(max-width:520px){.feat-card-hero{grid-template-columns:1fr;gap:.6rem;padding:.9rem}.feat-hero-visual{width:100%;height:64px}}
/* ── Badge NUEVO reutilizable (menu delta, chat chip, tour, hero) ── */
.item-badge-new{font-family:var(--sans);font-size:.5rem;color:#0a2540;background:linear-gradient(90deg,#d4b869,#e6cd80);padding:.14rem .42rem;border-radius:.28rem;letter-spacing:.12em;font-weight:700;text-transform:uppercase;line-height:1;box-shadow:0 4px 12px rgba(212,184,105,.35);animation:badgePulse 2.4s ease-in-out infinite}
.lp-delta-mega-item-badge{animation:badgePulse 2.4s ease-in-out infinite}
@keyframes badgePulse{0%,100%{opacity:1;box-shadow:0 4px 12px rgba(212,184,105,.35)}50%{opacity:.72;box-shadow:0 2px 8px rgba(212,184,105,.22)}}
@media(prefers-reduced-motion:reduce){.feat-card-hero,.item-badge-new,.lp-delta-mega-item-badge,.feat-hero-body .feat-badge-new,.ai-chat-empty-chip{animation:none!important}}
/* ── Chat empty state chip (Mapa cerca) ── */
.ai-chat-empty-chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.85rem}
.ai-chat-empty-chip{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(135deg,rgba(212,184,105,.11),rgba(212,184,105,.04));border:1px solid rgba(212,184,105,.4);color:#fff;padding:.5rem .85rem;border-radius:999px;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.01em;cursor:pointer;transition:transform .18s cubic-bezier(.22,1,.36,1),background .18s ease,border-color .18s ease;-webkit-tap-highlight-color:transparent;min-height:36px}
.ai-chat-empty-chip:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(212,184,105,.2),rgba(212,184,105,.08));border-color:rgba(212,184,105,.7)}
.ai-chat-empty-chip:active{transform:translateY(0) scale(.97)}
.ai-chat-empty-chip-badge{font-size:.48rem;color:#0a2540;background:linear-gradient(90deg,#d4b869,#e6cd80);padding:.14rem .38rem;border-radius:.25rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase;line-height:1;animation:badgePulse 2.4s ease-in-out infinite}
.feat-footer{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding-top:1.1rem;border-top:1px solid rgba(212,184,105,.1)}
.feat-start{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:linear-gradient(135deg,#e6cd80 0%,#d4b869 45%,#c9a84c 100%);color:#0a2540;border:none;padding:.95rem 2.4rem;border-radius:.6rem;font-family:var(--sans);font-size:.9rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:all .28s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 24px rgba(212,184,105,.32),0 0 0 1px rgba(212,184,105,.4) inset}
.feat-start:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(212,184,105,.48),0 0 0 1px rgba(212,184,105,.5) inset}
.feat-start:active{transform:translateY(0)}
.feat-start-arrow{transition:transform .2s cubic-bezier(.22,1,.36,1);font-size:1.05rem;line-height:1}
.feat-start:hover .feat-start-arrow{transform:translateX(4px)}
.feat-dontshow{display:flex;align-items:center;gap:.4rem;font-size:.66rem;color:rgba(255,255,255,.35);cursor:pointer;font-family:var(--sans);letter-spacing:.02em;user-select:none}
.feat-dontshow input{accent-color:var(--gold);cursor:pointer}
.feat-dontshow:hover{color:rgba(255,255,255,.6)}
.feat-install{background:rgba(212,184,105,.08);border:1px solid rgba(212,184,105,.32);color:var(--gold);padding:.7rem 1.6rem;border-radius:.5rem;font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.04em;cursor:pointer;transition:all .22s ease;margin-top:.35rem;min-height:44px}
.feat-install:hover{background:rgba(212,184,105,.16);border-color:rgba(212,184,105,.55)}
.feat-install:active{transform:scale(.98)}
.feat-ios-hint{margin-top:.4rem;padding:.65rem .85rem;background:rgba(212,184,105,.05);border:1px solid rgba(212,184,105,.18);border-radius:.5rem;font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.7);line-height:1.5;max-width:340px;text-align:center}
.feat-ios-hint strong{color:var(--gold);font-weight:500;display:block;margin-bottom:.2rem}
.feat-ios-hint em{color:rgba(255,255,255,.9);font-style:normal;font-weight:500}
.feat-ios-share{display:inline-block;padding:0 .3rem;background:rgba(255,255,255,.08);border-radius:.2rem;font-size:.85rem;line-height:1.4}
@media(max-width:720px){
.feat-modal{padding:1.4rem 1rem 1.2rem}
.feat-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
.feat-title{font-size:1.55rem}
.feat-subtitle{font-size:.82rem}
.feat-hero{aspect-ratio:16/9;margin-bottom:1.2rem}
.feat-hero-lockup{left:.85rem;bottom:2.1rem;height:28px}
.feat-hero-brand{font-size:.82rem;padding:0 9px 0 11px}
.feat-hero-academy{font-size:.78rem;padding-right:10px}
.feat-hero-tag{font-size:.55rem;left:.9rem;right:.9rem;bottom:.65rem}
.feat-pillars{grid-template-columns:1fr;gap:.7rem;padding:.85rem}
.feat-intro{margin-bottom:1.3rem}
}
@media(max-width:440px){
.feat-grid{grid-template-columns:1fr;gap:.55rem}
.feat-card{padding:.9rem .85rem}
.feat-title{font-size:1.35rem}
.feat-subtitle{font-size:.78rem}
.feat-start{width:100%;padding:1rem 1rem}
.feat-hero-lockup{height:26px}
.feat-hero-brand{font-size:.76rem;padding:0 8px 0 10px}
.feat-hero-academy{font-size:.72rem;padding-right:9px}
}
/* ══ SEARCH OVERLAY — búsqueda directa del catálogo ══ */
.search-ai-toggle{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .6rem;background:rgba(10,37,64,.55);border:1px solid rgba(212,184,105,.28);border-radius:999px;color:rgba(255,255,255,.82);font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:background .22s ease,border-color .22s ease,color .22s ease;-webkit-tap-highlight-color:transparent;margin-right:.35rem}
.search-ai-toggle .sat-lbl{color:rgba(212,184,105,.9)}
.search-ai-toggle:hover{border-color:rgba(212,184,105,.55);background:rgba(212,184,105,.12)}
.search-ai-toggle.active{background:linear-gradient(135deg,#d4b869,#e6cd80);border-color:transparent;color:#0a2540;box-shadow:0 4px 14px rgba(212,184,105,.35)}
.search-ai-toggle.active .sat-lbl{color:#0a2540}
.sr-score-badge{position:absolute;top:.4rem;right:.4rem;background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;font-family:var(--sans);font-size:.55rem;font-weight:700;letter-spacing:.06em;padding:.15rem .38rem;border-radius:.3rem;box-shadow:0 2px 8px rgba(212,184,105,.32);z-index:2}
.sr-item.sr-semantic{border-color:rgba(212,184,105,.3)}
.search-ai-loading{display:flex;align-items:center;gap:.6rem;padding:1.2rem;color:rgba(212,184,105,.85);font-family:var(--sans);font-size:.8rem;justify-content:center}
.search-ai-loading::before{content:'';width:14px;height:14px;border:2px solid rgba(212,184,105,.25);border-top-color:var(--gold);border-radius:50%;animation:sasSpin 1s linear infinite}
@keyframes sasSpin{to{transform:rotate(360deg)}}
#searchOverlay{position:fixed;inset:0;background:rgba(4,9,15,.72);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);z-index:9985;display:none;align-items:flex-start;justify-content:center;padding:1.2rem .8rem;overflow-y:auto;opacity:0;transition:opacity .3s ease}
#searchOverlay.active{display:flex;opacity:1}
.search-modal{width:100%;max-width:640px;background:linear-gradient(160deg,rgba(10,37,64,.85) 0%,rgba(4,9,15,.96) 65%);border:1px solid rgba(212,184,105,.24);border-radius:1.15rem;padding:1rem;transform:translateY(20px);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset}
#searchOverlay.active .search-modal{transform:translateY(0)}
/* Desktop: Spotlight-style — centrado con offset superior 12vh */
@media(min-width:1024px){
#searchOverlay{align-items:flex-start;padding:12vh 1rem 2rem}
.search-modal{max-width:640px}
}
.search-header{display:flex;align-items:center;gap:.6rem;padding:.35rem .6rem;background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.22);border-radius:.6rem}
.search-ico{font-size:1rem;flex-shrink:0}
.search-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--sans);font-size:16px;color:#fff;padding:.6rem 0;letter-spacing:.01em;min-width:0}
.search-input::placeholder{color:rgba(255,255,255,.35)}
.search-close{background:rgba(212,184,105,.08);border:1px solid rgba(212,184,105,.2);color:var(--gold);width:2rem;height:2rem;min-width:2rem;border-radius:50%;cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .18s ease;flex-shrink:0}
.search-close:hover{background:rgba(212,184,105,.18);transform:rotate(90deg)}
.search-cats{display:flex;gap:.3rem;padding:.7rem .1rem .4rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.search-cats::-webkit-scrollbar{display:none}
.sc-chip{flex:0 0 auto;padding:.32rem .7rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.14);border-radius:.4rem;color:rgba(255,255,255,.7);font-family:var(--sans);font-size:.66rem;text-transform:capitalize;letter-spacing:.02em;cursor:pointer;transition:all .18s ease;scroll-snap-align:start;-webkit-tap-highlight-color:transparent;white-space:nowrap;min-height:32px}
.sc-chip:hover{background:rgba(212,184,105,.08);color:#fff;border-color:rgba(212,184,105,.32)}
.sc-chip.sc-active{background:linear-gradient(155deg,rgba(212,184,105,.18),rgba(212,184,105,.05));border-color:rgba(212,184,105,.5);color:var(--gold)}
.search-stats{font-size:.6rem;color:rgba(255,255,255,.35);letter-spacing:.05em;text-transform:uppercase;padding:.1rem .2rem .5rem;font-family:var(--sans)}
.search-results{display:flex;flex-direction:column;gap:.5rem;max-height:60vh;overflow-y:auto;padding:0 .1rem .3rem;scrollbar-width:thin}
.search-empty{padding:1.5rem 1rem;text-align:center;font-family:var(--sans);font-size:.75rem;color:rgba(255,255,255,.4);line-height:1.5}
/* Búsquedas recientes — chips arriba del pool cuando input vacío */
.lp-recent-searches{margin:0 0 .8rem;padding:.65rem .1rem 0}
.lp-recent-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45rem;padding:0 .2rem}
.lp-recent-title{font-family:var(--sans);font-size:.6rem;font-weight:600;color:var(--brand-gold-2);letter-spacing:.16em;text-transform:uppercase}
.lp-recent-clear{background:transparent;border:none;color:rgba(255,255,255,.4);font-family:var(--sans);font-size:.62rem;cursor:pointer;padding:.15rem .3rem;transition:color var(--dur-fast) ease}
.lp-recent-clear:hover{color:rgba(255,255,255,.75)}
.lp-recent-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.lp-recent-chip{
display:inline-flex;align-items:center;gap:.28rem;
padding:.32rem .65rem;border-radius:999px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.85);
font-family:var(--sans);font-size:.7rem;font-weight:500;letter-spacing:-.005em;
cursor:pointer;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) ease;
-webkit-tap-highlight-color:transparent;
}
.lp-recent-chip svg{opacity:.5}
.lp-recent-chip:hover{background:rgba(212,184,105,.08);border-color:var(--brand-gold-border);color:#fff}
.lp-recent-chip:active{transform:scale(.96)}
/* Skeleton loaders — shimmer para transiciones de carga */
.lp-skel{
position:relative;overflow:hidden;
background:rgba(255,255,255,.03);
border-radius:.7rem;
}
.lp-skel::before{
content:'';position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
animation:lpSkelShimmer 1.4s infinite;
}
@keyframes lpSkelShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.lp-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem;padding:.7rem 0}
.lp-skel-card{height:150px;border:1px solid rgba(255,255,255,.06);border-radius:1rem}
.lp-skel-row{height:64px;margin:.35rem 0}
@media(prefers-reduced-motion:reduce){.lp-skel::before{animation:none!important}}
.search-empty strong{color:var(--gold);display:block;margin-bottom:.35rem;font-weight:500;font-size:.9rem}
.sr-item{display:flex;gap:.75rem;padding:.6rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.14);border-radius:.55rem;text-decoration:none;color:inherit;transition:all .18s ease;-webkit-tap-highlight-color:transparent}
.sr-item:hover{background:rgba(212,184,105,.06);border-color:rgba(212,184,105,.4);transform:translateY(-1px)}
/* ══ Search result card v2 — dos acciones (Ver ficha + Comprar) + chips ══ */
.sr-wrap{
position:relative;
display:flex;flex-direction:column;
padding:.7rem .75rem .65rem;
background:linear-gradient(155deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
border:1px solid rgba(212,184,105,.14);
border-radius:.85rem;
transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,transform var(--dur-fast) ease;
}
.sr-wrap:hover{border-color:rgba(212,184,105,.32);background:rgba(212,184,105,.04);transform:translateY(-1px)}
.sr-wrap-semantic{border-color:rgba(212,184,105,.28)}
.sr-wrap.sr-out .sr-name{opacity:.55}
.sr-wrap.sr-out .sr-price::after{content:' · agotado';color:rgba(255,120,120,.7);font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;font-weight:400;margin-left:.25rem}
.sr-item-v2{display:flex;gap:.7rem;align-items:flex-start;position:relative}
.sr-wrap .sr-img{width:56px;height:56px;object-fit:contain;background:#fff;border-radius:.5rem;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sr-wrap .sr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.sr-wrap .sr-name{font-family:var(--sans);font-size:.85rem;font-weight:600;color:#fff;line-height:1.2;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:80px}
/* Cuando NO hay badge social, el nombre puede usar el ancho completo */
.sr-item-v2:not(:has(.sr-badge-social)) .sr-name{padding-right:0}
.sr-wrap .sr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:.1rem}
.sr-wrap .sr-price{font-family:var(--sans);font-size:.78rem;color:var(--brand-gold);font-weight:700;letter-spacing:.005em;font-variant-numeric:tabular-nums}
.sr-wrap .sr-cat{font-family:var(--sans);font-size:.55rem;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:.12em}
/* Chips servicio (temp/copa/uvas) */
.sr-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.sr-desc{margin-top:.45rem;font-family:var(--serif);font-size:.7rem;line-height:1.42;color:rgba(255,255,255,.72);letter-spacing:.002em}
.sr-desc>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.28rem;font-family:var(--sans);font-size:.6rem;font-weight:500;color:rgba(197,216,255,.72);text-transform:uppercase;letter-spacing:.06em;padding:.18rem 0;user-select:none;transition:color .18s}
.sr-desc>summary::-webkit-details-marker{display:none}
.sr-desc>summary::after{content:'▾';font-size:.55rem;transition:transform .22s cubic-bezier(.4,0,.2,1);opacity:.7}
.sr-desc[open]>summary::after{transform:rotate(180deg)}
.sr-desc>summary:hover{color:rgba(197,216,255,.95)}
.sr-desc>p{margin:.32rem 0 0;padding:.5rem .65rem;background:rgba(255,255,255,.025);border-left:2px solid rgba(197,216,255,.22);border-radius:0 .35rem .35rem 0;font-style:italic;white-space:normal;max-height:none}
.sr-chip{
display:inline-flex;align-items:center;gap:.28rem;
padding:.24rem .5rem;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
font-family:var(--sans);font-size:.6rem;font-weight:500;
color:rgba(255,255,255,.82);letter-spacing:-.002em;
white-space:nowrap;
}
.sr-chip svg{opacity:.85}
.sr-chip-temp{color:#fbbf7c;border-color:rgba(251,191,124,.24);background:rgba(251,191,124,.07)}
.sr-chip-glass{color:#c5d8ff;border-color:rgba(197,216,255,.24);background:rgba(197,216,255,.05)}
.sr-chip-grape{color:#e6cd80;border-color:rgba(230,205,128,.24);background:rgba(230,205,128,.06)}
.sr-chip-vol{color:#c5d8ff;border-color:rgba(197,216,255,.22);background:rgba(197,216,255,.05)}
/* ══ Drinking Window badges — solo vinos con drink_from/peak/until enriquecidos ══
Compliance MX: mensajes educativos de guarda, sin imperativos de consumo.
Coexiste con Wrapped: DW = forward-looking per-item; Wrapped = anual retrospectivo. */
.dw-badge{
display:inline-flex;align-items:center;gap:.28rem;
padding:.24rem .55rem;border-radius:999px;
font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.02em;
white-space:nowrap;line-height:1;user-select:none;
border:1px solid transparent;background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);
transition:background var(--dur-fast,.18s) ease,border-color var(--dur-fast,.18s) ease;
}
.dw-badge .dw-ico{font-size:.72rem;line-height:1}
.dw-guardar{color:#d4b869;background:rgba(212,184,105,.08);border-color:rgba(212,184,105,.22)}
.dw-listo{color:#8ce4ac;background:rgba(140,228,172,.09);border-color:rgba(140,228,172,.26)}
.dw-pico{color:#0a2540;background:linear-gradient(135deg,#e6cd80,#d4b869);border-color:rgba(212,184,105,.85);font-weight:700;box-shadow:0 2px 8px rgba(212,184,105,.28)}
.dw-atencion{color:#f2a99a;background:rgba(232,120,105,.08);border-color:rgba(232,120,105,.28)}
.dw-sin-limite{color:rgba(255,255,255,.62);background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
/* En cava-item: pega el badge después del nombre, tono más discreto */
.cava-body .dw-badge{font-size:.58rem;padding:.2rem .5rem;margin-top:.15rem;align-self:flex-start}
.cava-list.grid-mode .cava-body .dw-badge{align-self:center}
/* En sr-meta: alinea con precio/categoría */
.sr-wrap .sr-meta .dw-badge{font-size:.55rem;padding:.2rem .5rem}
@media (prefers-reduced-motion:reduce){.dw-badge{transition:none}}
/* v-fix4: mobile grid-mode 2×2 no da ancho para "En su mejor momento · 2025-2027"
→ badge se truncaba a "En su mejor momento · 20". Permitimos wrap 2 líneas con
line-height compacto + font más chico. Tooltip title conserva label completo. */
@media(max-width:480px){
.cava-list.grid-mode .cava-body .dw-badge{
font-size:.54rem;
padding:.22rem .45rem;
white-space:normal;
line-height:1.15;
text-align:center;
max-width:100%;
}
.cava-list.grid-mode .cava-body .dw-badge .dw-ico{font-size:.64rem}
}
/* Filtros avanzados: país + drink_kind (poblados dinámicamente desde catálogo) */
.search-extra-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:.35rem 0 .55rem}
.search-sel-wrap{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .55rem;background:rgba(212,184,105,.05);border:1px solid rgba(212,184,105,.18);border-radius:.45rem;font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.75);min-height:36px;transition:background var(--dur-fast,.18s) ease,border-color var(--dur-fast,.18s) ease}
.search-sel-wrap:hover{background:rgba(212,184,105,.09);border-color:rgba(212,184,105,.32)}
.search-sel-wrap:has(.search-sel.on){background:rgba(212,184,105,.14);border-color:rgba(212,184,105,.42)}
.search-sel-label{font-weight:600;color:rgba(212,184,105,.85);letter-spacing:.02em;flex-shrink:0}
.search-sel{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:inherit;font-family:inherit;font-size:.68rem;padding:.15rem .85rem .15rem .2rem;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23d4b869' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;min-width:100px}
.search-sel:focus-visible{outline:2px solid rgba(212,184,105,.5);outline-offset:2px;border-radius:2px}
.search-sel option{background:#1a0f0a;color:#e0e6ea;padding:.5rem}
.search-sel.on{color:var(--brand-gold);font-weight:600}
/* Filtro "listos para beber" en search overlay */
.search-dw-filter{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;background:rgba(140,228,172,.05);border:1px solid rgba(140,228,172,.18);border-radius:.5rem;margin:0 0 .55rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--dur-fast,.18s) ease,border-color var(--dur-fast,.18s) ease;min-height:38px}
.search-dw-filter:hover{background:rgba(140,228,172,.09);border-color:rgba(140,228,172,.32)}
.search-dw-filter input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid rgba(140,228,172,.5);border-radius:4px;background:transparent;cursor:pointer;position:relative;flex-shrink:0;margin:0}
.search-dw-filter input:checked{background:#8ce4ac;border-color:#8ce4ac}
.search-dw-filter input:checked::after{content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #0a2540;border-width:0 2px 2px 0;transform:rotate(45deg)}
.search-dw-filter-label{font-family:var(--sans);font-size:.72rem;color:#e0e6ea;font-weight:500;letter-spacing:.01em;flex:1}
.search-dw-filter-hint{font-size:.6rem;color:rgba(255,255,255,.4);letter-spacing:.02em}
/* Action buttons row */
.sr-actions{
display:flex;gap:.4rem;margin-top:.65rem;
padding-top:.55rem;
border-top:1px solid rgba(255,255,255,.05);
}
.sr-btn{
flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
padding:.5rem .7rem;border-radius:.55rem;
font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:-.005em;
cursor:pointer;text-decoration:none;
transition:transform var(--dur-fast) ease,background var(--dur-fast) ease,border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
border:1px solid transparent;
min-height:36px;
-webkit-tap-highlight-color:transparent;
}
.sr-btn:active{transform:scale(.97)}
.sr-btn-info{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.1);
color:#fff;
}
.sr-btn-info:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.sr-btn-buy{
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;
box-shadow:0 3px 10px rgba(212,184,105,.28);
}
.sr-btn-buy:hover{filter:brightness(1.05);box-shadow:0 5px 14px rgba(212,184,105,.4)}
@media(max-width:400px){
.sr-wrap .sr-name{font-size:.78rem}
.sr-btn{font-size:.65rem;padding:.5rem .55rem}
}
/* ══════════════════════════════════════════════════════════════════
LP-SHEET — Ficha del producto Apple-style (Liquid Glass modal)
Se abre desde "Ver ficha" en resultados de búsqueda.
══════════════════════════════════════════════════════════════════ */
.lp-sheet-overlay{
position:fixed;inset:0;z-index:var(--z-modal,9995);
background:rgba(4,9,15,.55);
backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
display:flex;align-items:flex-end;justify-content:center;
opacity:0;pointer-events:none;
transition:opacity var(--dur-base) var(--ease-out-expo);
}
.lp-sheet-overlay.active{opacity:1;pointer-events:auto}
.lp-sheet-panel{
position:relative;
width:100%;max-width:520px;max-height:92vh;
background:linear-gradient(160deg,rgba(14,44,74,.94),rgba(6,18,44,.98));
border:1px solid rgba(212,184,105,.16);
border-bottom:none;
border-radius:1.5rem 1.5rem 0 0;
backdrop-filter:blur(24px) saturate(1.4);
-webkit-backdrop-filter:blur(24px) saturate(1.4);
box-shadow:0 -20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
display:flex;flex-direction:column;overflow:hidden;
transform:translateY(100%);
transition:transform .4s var(--ease-out-expo);
padding-bottom:env(safe-area-inset-bottom);
}
.lp-sheet-overlay.active .lp-sheet-panel{transform:translateY(0)}
@media(min-width:700px){
.lp-sheet-overlay{align-items:center;padding:2rem}
.lp-sheet-panel{
max-height:88vh;border-radius:1.5rem;border-bottom:1px solid rgba(212,184,105,.16);
transform:translateY(20px) scale(.96);opacity:0;
}
.lp-sheet-overlay.active .lp-sheet-panel{transform:translateY(0) scale(1);opacity:1}
}
@media(min-width:1024px){
/* Desktop: ficha más amplia para reducir scroll y mostrar más info a la vez */
.lp-sheet-panel{max-width:640px}
.lp-sheet-hero{padding:1.6rem 1.4rem 1.2rem}
.lp-sheet-img{width:100px;height:100px}
.lp-sheet-title{font-size:1.3rem}
.lp-sheet-scroll{padding:1.2rem 1.4rem 1.4rem;gap:1.3rem}
}
.lp-sheet-close{
position:absolute;top:.85rem;right:.85rem;z-index:2;
width:32px;height:32px;border-radius:50%;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
transition:background var(--dur-fast) ease,transform var(--dur-fast) ease;
}
.lp-sheet-close:hover{background:rgba(255,255,255,.14)}
.lp-sheet-close:active{transform:scale(.94)}
.lp-sheet-hero{
display:flex;gap:1rem;align-items:center;
padding:1.4rem 1.2rem 1rem;
border-bottom:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,rgba(212,184,105,.05),transparent);
}
.lp-sheet-img{
width:88px;height:88px;object-fit:contain;
background:#fff;border-radius:.85rem;flex-shrink:0;
box-shadow:0 6px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15);
}
.lp-sheet-hero-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem}
.lp-sheet-eyebrow{
font-family:var(--sans);font-size:.6rem;font-weight:600;
color:rgba(212,184,105,.75);letter-spacing:.16em;text-transform:uppercase;
}
.lp-sheet-title{
font-family:var(--sans);font-size:1.15rem;font-weight:700;
color:#fff;line-height:1.2;letter-spacing:-.025em;
margin:0;text-wrap:balance;
}
.lp-sheet-price{
font-family:var(--sans);font-size:.95rem;font-weight:700;
color:var(--brand-gold);letter-spacing:-.01em;
font-variant-numeric:tabular-nums;margin-top:.15rem;
}
.lp-sheet-out{
display:inline-block;margin-left:.4rem;
padding:.14rem .45rem;border-radius:999px;
background:rgba(248,113,113,.15);color:#fca5a5;
font-size:.55rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.lp-sheet-tts{
margin-top:.6rem;display:inline-flex;align-items:center;gap:.45rem;
padding:.42rem .85rem;border-radius:999px;
background:rgba(212,184,105,.08);border:1px solid rgba(212,184,105,.28);
color:var(--brand-gold);cursor:pointer;
font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.02em;
transition:all .18s ease;min-height:36px;
}
.lp-sheet-tts:hover{background:rgba(212,184,105,.16);border-color:rgba(212,184,105,.5);transform:translateY(-1px)}
.lp-sheet-tts:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
.lp-sheet-tts-active{background:rgba(212,184,105,.24);animation:lpTtsPulse 1.4s ease-in-out infinite}
.lp-sheet-tts-active .lp-sheet-tts-txt::after{content:' — sonando';opacity:.7}
@keyframes lpTtsPulse{0%,100%{box-shadow:0 0 0 0 rgba(212,184,105,.35)}50%{box-shadow:0 0 0 6px rgba(212,184,105,0)}}
@media(prefers-reduced-motion:reduce){.lp-sheet-tts-active{animation:none}}
/* Sheet actions row (TTS + Compare) */
.lp-sheet-actions-row{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.lp-sheet-compare{
display:inline-flex;align-items:center;gap:.4rem;
padding:.42rem .85rem;border-radius:999px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
color:#e5e7eb;cursor:pointer;font-family:var(--sans);font-size:.72rem;font-weight:600;
transition:all .18s ease;min-height:36px;
}
.lp-sheet-compare:hover{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.3);color:var(--brand-gold)}
.lp-sheet-compare:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
/* Compare bar flotante bottom */
.lp-cmp-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);z-index:9998;pointer-events:none;animation:lpCmpIn .3s ease}
.lp-cmp-bar[hidden]{display:none}
.lp-cmp-bar-inner{
pointer-events:auto;
display:flex;align-items:center;gap:.7rem;
padding:.55rem .8rem;border-radius:999px;
background:rgba(15,20,35,.95);backdrop-filter:blur(12px);
border:1px solid rgba(212,184,105,.35);box-shadow:0 8px 32px rgba(0,0,0,.5);
font-family:var(--sans);font-size:.75rem;color:#f3f4f6;
}
.lp-cmp-bar-thumbs{display:flex;gap:.25rem}
.lp-cmp-thumb{width:28px;height:28px;border-radius:6px;overflow:hidden;background:#1a1004;border:1px solid rgba(255,255,255,.1)}
.lp-cmp-thumb img{width:100%;height:100%;object-fit:cover}
.lp-cmp-bar-txt{font-variant-numeric:tabular-nums;color:#d1d5db;white-space:nowrap}
.lp-cmp-bar-open{padding:.35rem .8rem;border-radius:999px;background:var(--brand-gold);color:#111;border:none;cursor:pointer;font-weight:700;font-size:.72rem;letter-spacing:.02em}
.lp-cmp-bar-open:hover{filter:brightness(1.1)}
.lp-cmp-bar-open[hidden]{display:none}
.lp-cmp-bar-clear{width:24px;height:24px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.2);color:#9ca3af;cursor:pointer;font-size:.7rem}
.lp-cmp-bar-clear:hover{color:#f3f4f6;border-color:#f3f4f6}
@keyframes lpCmpIn{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Compare sheet split view */
.lp-cmp-sheet{position:fixed;inset:0;z-index:10001;background:rgba(4,9,15,.96);backdrop-filter:blur(8px);display:flex;flex-direction:column;animation:lpCmpFadeIn .28s ease}
.lp-cmp-sheet[hidden]{display:none}
.lp-cmp-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid rgba(212,184,105,.2)}
.lp-cmp-sheet-title{margin:0;font-family:var(--serif,var(--sans));font-size:1.05rem;color:var(--brand-gold);font-weight:600}
.lp-cmp-sheet-close{background:transparent;border:none;color:#9ca3af;font-size:1.4rem;cursor:pointer;padding:.2rem .5rem}
.lp-cmp-sheet-close:hover{color:#f3f4f6}
.lp-cmp-sheet-body{flex:1;overflow-y:auto;display:grid;grid-template-columns:1fr 1px 1fr;gap:0}
@media(max-width:768px){.lp-cmp-sheet-body{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr}}
.lp-cmp-col{padding:1.2rem;overflow-y:auto}
.lp-cmp-divider{background:linear-gradient(180deg,transparent,rgba(212,184,105,.4),transparent)}
@media(max-width:768px){.lp-cmp-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(212,184,105,.4),transparent)}}
.lp-cmp-img{width:100%;max-width:180px;aspect-ratio:1;object-fit:contain;display:block;margin:0 auto 1rem;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.lp-cmp-name{margin:0 0 .35rem;font-family:var(--serif,var(--sans));font-size:1rem;color:#f3f4f6;line-height:1.25}
.lp-cmp-eyebrow{font-size:.7rem;color:#9ca3af;letter-spacing:.02em;margin-bottom:.6rem}
.lp-cmp-price{font-family:var(--sans);font-weight:700;color:var(--brand-gold);font-size:1.05rem;margin-bottom:1rem;font-variant-numeric:tabular-nums}
.lp-cmp-dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;margin:0 0 1rem;font-size:.78rem}
.lp-cmp-dl dt{color:#9ca3af}
.lp-cmp-dl dd{color:#f3f4f6;margin:0}
.lp-cmp-block{margin-bottom:1rem}
.lp-cmp-block-h{font-size:.7rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.35rem}
.lp-cmp-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.lp-cmp-tag{padding:.22rem .55rem;border-radius:999px;background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.25);color:#e5e7eb;font-size:.7rem}
.lp-cmp-empty{color:#6b7280;font-size:.72rem;font-style:italic}
@keyframes lpCmpFadeIn{from{opacity:0}to{opacity:1}}
/* Terroir enrichment block (Wikipedia + Open-Meteo) */
.lp-sheet-terroir{animation:lpTerroirIn .35s ease}
.lp-terroir-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin:.5rem 0 .8rem}
.lp-terroir-card{padding:.6rem .75rem;border-radius:.7rem;background:rgba(212,184,105,.06);border:1px solid rgba(212,184,105,.2)}
.lp-terroir-lbl{font-size:.65rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.15rem}
.lp-terroir-val{font-family:var(--sans);font-weight:600;color:var(--brand-gold);font-size:.9rem}
.lp-terroir-sub{font-size:.68rem;color:#9ca3af;margin-top:.15rem}
.lp-terroir-extract{font-size:.78rem;color:#d1d5db;line-height:1.55;margin:.35rem 0 0}
.lp-terroir-link{color:var(--brand-gold);text-decoration:none;font-weight:600}
.lp-terroir-link:hover{text-decoration:underline}
.lp-terroir-flag{font-size:1.15em;line-height:1;margin-right:.2rem}
@keyframes lpTerroirIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* Quiz de gustos overlay */
.lp-quiz-overlay{position:fixed;inset:0;z-index:10002;background:rgba(4,9,15,.96);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:lpQuizFade .3s ease}
.lp-quiz-overlay[hidden]{display:none}
.lp-quiz-card{position:relative;background:linear-gradient(180deg,#12121a,#0a0a12);border:1px solid rgba(212,184,105,.35);border-radius:1rem;padding:1.5rem 1.25rem 1.25rem;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.lp-quiz-close{position:absolute;top:.7rem;right:.9rem;background:transparent;border:none;color:#9ca3af;font-size:1.3rem;cursor:pointer;line-height:1}
.lp-quiz-close:hover{color:#f3f4f6}
.lp-quiz-progress{height:3px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-bottom:1.2rem}
.lp-quiz-progress-bar{height:100%;background:linear-gradient(90deg,#d4b869,#f4d980);border-radius:3px;transition:width .4s cubic-bezier(.22,1,.36,1);width:0}
.lp-quiz-step{font-size:.68rem;color:rgba(212,184,105,.85);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:.5rem}
.lp-quiz-q{font-family:var(--serif,var(--sans));font-size:1.2rem;color:#f3f4f6;font-weight:600;margin:0 0 1rem;line-height:1.25}
.lp-quiz-opts{display:flex;flex-direction:column;gap:.5rem}
.lp-quiz-opt{text-align:left;padding:.85rem 1rem;border-radius:.7rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#e5e7eb;cursor:pointer;font-size:.9rem;font-family:var(--sans);transition:all .18s ease}
.lp-quiz-opt:hover{background:rgba(212,184,105,.1);border-color:rgba(212,184,105,.4);color:var(--brand-gold);transform:translateX(4px)}
.lp-quiz-opt:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
.lp-quiz-loading{text-align:center;padding:2rem 1rem;color:#9ca3af;font-size:.85rem;font-style:italic}
.lp-quiz-recs{display:flex;flex-direction:column;gap:.55rem;margin:1rem 0}
.lp-quiz-rec{display:flex;align-items:center;gap:.75rem;padding:.65rem;border-radius:.7rem;background:rgba(212,184,105,.06);border:1px solid rgba(212,184,105,.22);cursor:pointer;text-align:left;transition:all .18s ease}
.lp-quiz-rec:hover{background:rgba(212,184,105,.14);border-color:rgba(212,184,105,.5)}
.lp-quiz-rec img{width:54px;height:54px;object-fit:contain;flex-shrink:0}
.lp-quiz-rec-body{flex:1;min-width:0}
.lp-quiz-rec-rank{font-size:.7rem;color:rgba(212,184,105,.85);margin-bottom:.15rem}
.lp-quiz-rec-name{font-size:.82rem;color:#f3f4f6;font-weight:600;line-height:1.25;margin-bottom:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-quiz-rec-price{font-size:.75rem;color:var(--brand-gold);font-weight:700;font-variant-numeric:tabular-nums}
.lp-quiz-restart{width:100%;padding:.7rem 1rem;margin-top:.75rem;border-radius:.7rem;background:transparent;border:1px solid rgba(212,184,105,.3);color:var(--brand-gold);cursor:pointer;font-size:.8rem;font-weight:600}
.lp-quiz-restart:hover{background:rgba(212,184,105,.08)}
@keyframes lpQuizFade{from{opacity:0}to{opacity:1}}
/* View Transitions API — smooth cross-fade nativo entre estados (Chrome 111+, Safari 18+) */
@supports(view-transition-name: none){
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation-name:lpVTFadeOut}
::view-transition-new(root){animation-name:lpVTFadeIn}
}
@keyframes lpVTFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes lpVTFadeOut{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){
::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
.lp-sheet-scroll{
flex:1;overflow-y:auto;
padding:1rem 1.2rem 1.2rem;
display:flex;flex-direction:column;gap:1.1rem;
overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:rgba(212,184,105,.3) transparent;
}
.lp-sheet-scroll::-webkit-scrollbar{width:6px}
.lp-sheet-scroll::-webkit-scrollbar-thumb{background:rgba(212,184,105,.28);border-radius:3px}
.lp-sheet-sec{display:flex;flex-direction:column;gap:.5rem}
.lp-sheet-sec-inline{gap:.25rem;padding-left:.2rem;border-left:2px solid rgba(212,184,105,.2)}
.lp-sheet-h3{
font-family:var(--sans);font-size:.62rem;font-weight:700;
color:var(--brand-gold-2);letter-spacing:.16em;text-transform:uppercase;
margin:0;
}
.lp-sheet-h4{
font-family:var(--sans);font-size:.58rem;font-weight:700;
color:rgba(212,184,105,.75);letter-spacing:.14em;text-transform:uppercase;
margin:0 0 0 .35rem;
}
.lp-sheet-review{
font-family:var(--sans);font-size:.85rem;font-weight:400;
color:rgba(255,255,255,.85);line-height:1.55;letter-spacing:-.005em;
margin:0;text-wrap:pretty;
}
.lp-sheet-note{
font-family:var(--sans);font-size:.75rem;font-weight:400;
color:rgba(255,255,255,.7);line-height:1.5;letter-spacing:-.003em;
margin:0 0 0 .35rem;text-wrap:pretty;
}
.lp-sheet-rows{
display:flex;flex-direction:column;gap:.3rem;
padding:.65rem .8rem;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
border-radius:.75rem;
}
.lp-sheet-row{
display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
padding:.28rem 0;
border-bottom:1px solid rgba(255,255,255,.04);
}
.lp-sheet-row:last-child{border-bottom:none}
.lp-sheet-row-lbl{
font-family:var(--sans);font-size:.68rem;font-weight:500;
color:rgba(255,255,255,.55);letter-spacing:-.002em;
}
.lp-sheet-row-val{
font-family:var(--sans);font-size:.78rem;font-weight:600;
color:#fff;letter-spacing:-.01em;text-align:right;
}
.lp-sheet-row-val small{font-weight:400;color:rgba(255,255,255,.55);margin-left:.15rem}
.lp-sheet-grapes{display:flex;flex-direction:column;gap:.5rem}
.lp-sheet-grape{
padding:.7rem .85rem;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
border-radius:.75rem;
}
.lp-sheet-grape-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.3rem}
.lp-sheet-grape-name{
font-family:var(--sans);font-size:.82rem;font-weight:700;
color:#fff;letter-spacing:-.015em;text-transform:capitalize;
}
.lp-sheet-tag{
font-family:var(--sans);font-size:.58rem;font-weight:500;
padding:.14rem .48rem;border-radius:999px;
background:rgba(212,184,105,.1);color:var(--brand-gold-2);
border:1px solid rgba(212,184,105,.16);letter-spacing:.005em;
}
.lp-sheet-tag-lg{font-size:.66rem;padding:.24rem .6rem}
.lp-sheet-tagrow{display:flex;flex-wrap:wrap;gap:.35rem}
.lp-sheet-grape-style{
font-family:var(--sans);font-size:.72rem;font-style:italic;
color:rgba(255,255,255,.7);line-height:1.45;
}
.lp-sheet-grape-notes{
font-family:var(--sans);font-size:.66rem;
color:rgba(255,255,255,.55);line-height:1.4;letter-spacing:.005em;
margin-top:.28rem;
}
.lp-sheet-cta{
padding:.85rem 1.2rem 1rem;
border-top:1px solid rgba(255,255,255,.06);
background:rgba(4,9,15,.6);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.lp-sheet-buy{
display:flex;align-items:center;justify-content:center;gap:.5rem;
padding:.9rem 1rem;
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;
font-family:var(--sans);font-size:.88rem;font-weight:700;letter-spacing:-.01em;
border-radius:.85rem;text-decoration:none;
min-height:48px;
box-shadow:0 6px 18px rgba(212,184,105,.35);
transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease,filter var(--dur-fast) ease;
}
.lp-sheet-buy:hover{filter:brightness(1.05);box-shadow:0 8px 22px rgba(212,184,105,.45)}
.lp-sheet-buy:active{transform:scale(.98)}
/* Split CTA: botón Mi Cava + Comprar en el sheet */
.lp-sheet-cta-split{display:flex;gap:.55rem;align-items:stretch}
.lp-sheet-cta-split .lp-sheet-buy{flex:1}
.lp-sheet-cava{
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:auto;min-height:48px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.7);
border-radius:.85rem;
cursor:pointer;
transition:transform var(--dur-fast) ease,background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
}
.lp-sheet-cava:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.lp-sheet-cava:active{transform:scale(.94)}
.lp-sheet-cava.saved{
background:linear-gradient(135deg,rgba(248,113,113,.22),rgba(248,113,113,.1));
border-color:rgba(248,113,113,.42);
color:#fca5a5;
}
/* Share button — mismo tamaño que cava */
.lp-sheet-share{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:auto;min-height:48px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.7);
border-radius:.85rem;
cursor:pointer;flex-shrink:0;
transition:transform var(--dur-fast) ease,background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
-webkit-tap-highlight-color:transparent;
}
.lp-sheet-share:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.lp-sheet-share:active{transform:scale(.94)}
/* ══════════════════════════════════════════════════════════════════
PRINT STYLESHEET — Modo impresión limpio para recetas del recetario.
Oculta toda la UI de la app y muestra sólo la receta abierta.
══════════════════════════════════════════════════════════════════ */
@media print {
body.lp-printing{background:#fff !important;color:#0a2540 !important}
/* Ocultar todo excepto el recipe sheet */
body.lp-printing > *:not(#lpRecipeSheet){display:none !important}
body.lp-printing #lpRecipeSheet{
display:block !important;
position:static !important;
background:#fff !important;
padding:0 !important;
}
body.lp-printing .lp-sheet-panel{
max-width:100% !important;max-height:none !important;
background:#fff !important;color:#0a2540 !important;
border:none !important;box-shadow:none !important;
transform:none !important;opacity:1 !important;
padding:0 !important;
}
body.lp-printing .lp-sheet-scroll{
overflow:visible !important;max-height:none !important;padding:0 !important;
}
body.lp-printing .lp-sheet-close,
body.lp-printing .lp-sheet-cta,
body.lp-printing .lp-sheet-cta-split{display:none !important}
body.lp-printing .lp-rs-emoji{font-size:2rem !important;filter:none !important}
body.lp-printing .lp-sheet-hero{border-bottom:2px solid #0a2540 !important;background:none !important;padding:0 0 .6rem !important}
body.lp-printing .lp-sheet-eyebrow,
body.lp-printing .lp-sheet-h3,
body.lp-printing .lp-sheet-h4{color:#8b6c1a !important;letter-spacing:.14em !important}
body.lp-printing .lp-sheet-title{color:#0a2540 !important;font-size:1.6rem !important}
body.lp-printing .lp-sheet-review,
body.lp-printing .lp-sheet-note,
body.lp-printing .lp-rs-list,
body.lp-printing .lp-rs-steps,
body.lp-printing .lp-sheet-row-val{color:#0a2540 !important;font-size:11pt !important}
body.lp-printing .lp-sheet-row-lbl{color:#556 !important}
body.lp-printing .lp-rs-list,
body.lp-printing .lp-rs-steps{line-height:1.55 !important}
body.lp-printing .lp-rs-meta-item{background:none !important;border:1px solid #999 !important;color:#0a2540 !important}
body.lp-printing .lp-sheet-rows{background:#f6f2e7 !important;border:1px solid #d4b869 !important}
body.lp-printing .lp-sheet-row{border-bottom:1px dotted #ccc !important}
body.lp-printing::after{
content:'La Playa Academy · laplayaacademy.com';
display:block;text-align:center;font-size:9pt;color:#556;
margin-top:1.5rem;padding-top:.8rem;border-top:1px solid #ccc;
}
/* Page settings */
@page{margin:1.5cm 1.2cm}
}
/* Social proof badges — ribbon en cards */
.sr-badge-social{
position:absolute;top:.55rem;right:.55rem;
padding:.2rem .55rem;border-radius:999px;
font-family:var(--sans);font-size:.55rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;
z-index:2;pointer-events:none;
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.sr-badge-social.nuevo{background:rgba(74,222,128,.22);color:#4ade80;border:1px solid rgba(74,222,128,.4)}
.sr-badge-social.artesanal{background:rgba(230,205,128,.22);color:#e6cd80;border:1px solid rgba(230,205,128,.4)}
.sr-badge-social.exclusivo{background:rgba(197,216,255,.22);color:#c5d8ff;border:1px solid rgba(197,216,255,.4)}
.sr-badge-social.premium{background:linear-gradient(135deg,rgba(212,184,105,.32),rgba(230,205,128,.22));color:#0a2540;border:1px solid var(--brand-gold);font-weight:800}
@media(prefers-reduced-motion:reduce){
.lp-sheet-overlay,.lp-sheet-panel,.lp-sheet-buy,.sr-btn{transition:none!important;transform:none!important}
}
/* ══════════════════════════════════════════════════════════════════
RECETARIO DEL MIXÓLOGO — Overlay Apple-style Liquid Glass 2026
Full-screen grid con filtros, búsqueda y detalle.
══════════════════════════════════════════════════════════════════ */
.lp-rb-overlay{
position:fixed;inset:0;z-index:9990;
background:linear-gradient(180deg,rgba(4,9,15,.95),rgba(6,18,44,.98));
backdrop-filter:blur(20px) saturate(1.35);
-webkit-backdrop-filter:blur(20px) saturate(1.35);
display:none;opacity:0;
transition:opacity var(--dur-base) var(--ease-out-expo);
}
.lp-rb-overlay.active{display:flex;opacity:1;flex-direction:column;overflow:hidden}
.lp-rb-panel{
flex:1;display:flex;flex-direction:column;
max-width:1200px;width:100%;margin:0 auto;
padding-bottom:env(safe-area-inset-bottom);
overflow:hidden;
}
.lp-rb-header{
display:flex;align-items:center;gap:1rem;
padding:1.1rem 1.4rem .9rem;
border-bottom:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,rgba(10,37,64,.4),transparent);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
padding-top:calc(1.1rem + env(safe-area-inset-top));
}
.lp-rb-back{
display:inline-flex;align-items:center;gap:.35rem;
padding:.5rem .75rem .5rem .55rem;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:600;
letter-spacing:-.005em;cursor:pointer;
transition:background var(--dur-fast) ease,transform var(--dur-fast) ease;
}
.lp-rb-back:hover{background:rgba(255,255,255,.1)}
.lp-rb-back:active{transform:scale(.96)}
.lp-rb-title-wrap{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.lp-rb-eyebrow{
font-family:var(--sans);font-size:.55rem;font-weight:600;
color:var(--brand-gold);letter-spacing:.2em;text-transform:uppercase;
}
.lp-rb-title{
font-family:var(--sans);font-size:1.15rem;font-weight:700;
color:#fff;letter-spacing:-.028em;margin:0;line-height:1.1;
}
.lp-rb-count{
font-family:var(--sans);font-size:.68rem;font-weight:500;
color:rgba(255,255,255,.55);letter-spacing:.02em;
font-variant-numeric:tabular-nums;flex-shrink:0;
}
.lp-rb-toolbar{
display:flex;flex-direction:column;gap:.7rem;
padding:.9rem 1.4rem .35rem;
}
.lp-rb-search{
display:flex;align-items:center;gap:.55rem;
padding:.65rem 1rem;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:.85rem;
color:rgba(255,255,255,.55);
transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease;
}
.lp-rb-search:focus-within{border-color:var(--brand-gold-border);background:rgba(255,255,255,.07)}
.lp-rb-search input{
flex:1;background:transparent;border:none;outline:none;
font-family:var(--sans);font-size:.9rem;font-weight:400;
color:#fff;letter-spacing:-.005em;min-width:0;
}
.lp-rb-search input::placeholder{color:rgba(255,255,255,.4)}
.lp-rb-filters{
display:flex;gap:.4rem;overflow-x:auto;
padding-bottom:.4rem;
scrollbar-width:none;
}
.lp-rb-filters::-webkit-scrollbar{display:none}
.lp-rb-pill{
flex-shrink:0;
padding:.42rem .85rem;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
color:rgba(255,255,255,.72);
font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:-.005em;
cursor:pointer;white-space:nowrap;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}
.lp-rb-pill:hover{background:rgba(255,255,255,.08);color:#fff}
.lp-rb-pill.active{
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
border-color:transparent;
color:#0a2540;
box-shadow:0 3px 10px rgba(212,184,105,.32);
}
.lp-rb-grid{
flex:1;overflow-y:auto;
display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem;
padding:.7rem 1.4rem 1.4rem;
overscroll-behavior:contain;
}
/* Desktop: cap columnas grid recetario para lectura editorial (max 6 cols en 1920px+) */
@media(min-width:1200px){ .lp-rb-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:1400px;margin:0 auto} }
@media(min-width:1600px){ .lp-rb-grid{grid-template-columns:repeat(6,1fr)} }
.lp-rb-grid::-webkit-scrollbar{width:6px}
.lp-rb-grid::-webkit-scrollbar-thumb{background:rgba(212,184,105,.28);border-radius:3px}
.lp-rb-card{
--sp-c1:rgba(255,255,255,.05);--sp-c2:rgba(255,255,255,.02);
--sp-glow:rgba(212,184,105,.14);
display:flex;flex-direction:column;gap:.45rem;
padding:1rem;
background:linear-gradient(160deg,var(--sp-c1),var(--sp-c2));
border:1px solid rgba(255,255,255,.08);
border-radius:1rem;
cursor:pointer;text-align:left;
backdrop-filter:blur(14px) saturate(1.3);
-webkit-backdrop-filter:blur(14px) saturate(1.3);
transition:transform var(--dur-fast) ease,border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease,background var(--dur-fast) ease;
min-height:150px;
-webkit-tap-highlight-color:transparent;
color:inherit;font-family:inherit;
position:relative;overflow:hidden;isolation:isolate;
}
.lp-rb-card::before{
content:'';position:absolute;top:-30%;right:-25%;width:80%;height:80%;
border-radius:50%;background:radial-gradient(circle,var(--sp-glow),transparent 70%);
opacity:.6;pointer-events:none;z-index:-1;transition:opacity var(--dur-base) ease;
}
.lp-rb-card:hover::before{opacity:1}
/* Colores por espirituoso (Liquid Glass tinted) */
.lp-rb-spirit-tequila { --sp-c1:rgba(120,180,90,.1); --sp-c2:rgba(60,90,45,.04); --sp-glow:rgba(163,204,120,.22) }
.lp-rb-spirit-mezcal { --sp-c1:rgba(140,110,80,.1); --sp-c2:rgba(80,60,45,.04); --sp-glow:rgba(190,150,110,.22) }
.lp-rb-spirit-ron { --sp-c1:rgba(210,140,60,.1); --sp-c2:rgba(120,80,35,.04); --sp-glow:rgba(230,170,90,.22) }
.lp-rb-spirit-whisky { --sp-c1:rgba(212,184,105,.1); --sp-c2:rgba(140,120,70,.04);--sp-glow:rgba(230,205,128,.24) }
.lp-rb-spirit-gin { --sp-c1:rgba(120,170,220,.08);--sp-c2:rgba(60,90,120,.04); --sp-glow:rgba(140,190,240,.2) }
.lp-rb-spirit-vodka { --sp-c1:rgba(200,220,240,.08);--sp-c2:rgba(120,150,180,.04);--sp-glow:rgba(220,235,250,.18) }
.lp-rb-spirit-cognac { --sp-c1:rgba(200,100,60,.1); --sp-c2:rgba(120,60,35,.04); --sp-glow:rgba(220,130,80,.22) }
.lp-rb-spirit-aperol { --sp-c1:rgba(240,140,60,.1); --sp-c2:rgba(160,90,35,.04); --sp-glow:rgba(255,160,80,.24) }
.lp-rb-spirit-champagne { --sp-c1:rgba(240,220,160,.1); --sp-c2:rgba(160,140,90,.04);--sp-glow:rgba(255,235,180,.22) }
.lp-rb-spirit-prosecco { --sp-c1:rgba(240,220,160,.1); --sp-c2:rgba(160,140,90,.04);--sp-glow:rgba(255,235,180,.22) }
.lp-rb-spirit-cerveza { --sp-c1:rgba(230,190,90,.1); --sp-c2:rgba(150,120,55,.04);--sp-glow:rgba(245,210,110,.22) }
.lp-rb-spirit-pisco { --sp-c1:rgba(230,180,140,.1); --sp-c2:rgba(150,110,80,.04);--sp-glow:rgba(245,200,160,.22) }
.lp-rb-spirit-sin_alcohol{ --sp-c1:rgba(120,200,160,.1); --sp-c2:rgba(60,130,100,.04);--sp-glow:rgba(140,220,180,.22) }
.lp-rb-card:hover{
transform:translateY(-2px);
border-color:var(--brand-gold-border);
background:linear-gradient(160deg,rgba(212,184,105,.08),rgba(255,255,255,.02));
box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 0 1px rgba(212,184,105,.15);
}
.lp-rb-card:active{transform:scale(.98)}
.lp-rb-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem}
.lp-rb-emoji{font-size:1.6rem;line-height:1;filter:drop-shadow(0 4px 12px rgba(212,184,105,.25))}
.lp-rb-diff{
font-family:var(--mono,var(--sans));font-size:.55rem;
color:var(--brand-gold);letter-spacing:.2em;
padding:.15rem .38rem;border-radius:999px;
background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.18);
}
.lp-rb-card-name{
font-family:var(--sans);font-size:.9rem;font-weight:700;
color:#fff;letter-spacing:-.02em;line-height:1.2;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lp-rb-card-base{
font-family:var(--sans);font-size:.66rem;font-weight:500;
color:rgba(255,255,255,.6);line-height:1.35;letter-spacing:.005em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
flex:1;
}
.lp-rb-card-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:.5rem;border-top:1px solid rgba(255,255,255,.05);
font-family:var(--sans);
}
.lp-rb-time{font-size:.6rem;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.02em}
.lp-rb-arrow{font-size:.85rem;color:var(--brand-gold);transition:transform var(--dur-fast) ease}
.lp-rb-card:hover .lp-rb-arrow{transform:translateX(3px)}
.lp-rb-spirit-badge{
font-family:var(--sans);font-size:.55rem;font-weight:700;
padding:.16rem .45rem;border-radius:999px;
background:rgba(212,184,105,.14);color:var(--brand-gold-2);
border:1px solid rgba(212,184,105,.24);
letter-spacing:.06em;text-transform:capitalize;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;
}
/* Section headers dentro del grid (Destacados / Todos) */
.lp-rb-section-hdr{
grid-column:1/-1;
display:flex;align-items:baseline;gap:.65rem;
padding:.6rem .2rem .3rem;
margin-top:.2rem;
}
.lp-rb-section-hdr:first-child{padding-top:.2rem;margin-top:0}
.lp-rb-section-title{
font-family:var(--sans);font-size:.8rem;font-weight:700;
color:#fff;letter-spacing:-.02em;
}
.lp-rb-section-sub{
font-family:var(--sans);font-size:.6rem;font-weight:500;
color:rgba(255,255,255,.45);letter-spacing:.02em;
}
.lp-rb-empty{
padding:3rem 1rem;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:.5rem;
color:rgba(255,255,255,.5);
}
.lp-rb-empty[hidden]{display:none} /* override display:flex del block anterior */
.lp-rb-empty-ico{font-size:2.4rem;opacity:.55}
.lp-rb-empty-title{font-family:var(--sans);font-size:.95rem;font-weight:600;color:#fff}
.lp-rb-empty-sub{font-family:var(--sans);font-size:.75rem;color:rgba(255,255,255,.55)}
/* Recipe sheet — reutiliza lp-sheet-panel con extras específicos de receta */
.lp-rs-panel{max-width:560px}
.lp-rs-hero{
display:flex;gap:1rem;align-items:center;
padding:1.4rem 1.2rem 1rem;
border-bottom:1px solid rgba(255,255,255,.06);
background:linear-gradient(180deg,rgba(212,184,105,.06),transparent);
}
.lp-rs-emoji{
font-size:3.2rem;line-height:1;
filter:drop-shadow(0 8px 20px rgba(212,184,105,.35));
flex-shrink:0;
}
.lp-rs-hero-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.lp-rs-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem}
.lp-rs-meta-item{
font-family:var(--sans);font-size:.62rem;font-weight:600;
padding:.24rem .55rem;border-radius:999px;
background:rgba(255,255,255,.05);color:rgba(255,255,255,.82);
border:1px solid rgba(255,255,255,.08);letter-spacing:.01em;
}
.lp-rs-list{
padding:0 0 0 1.1rem;margin:0;
font-family:var(--sans);font-size:.78rem;line-height:1.6;
color:rgba(255,255,255,.85);letter-spacing:-.003em;
}
.lp-rs-list li{padding:.1rem 0}
.lp-rs-steps{
padding:0 0 0 1.3rem;margin:0;
font-family:var(--sans);font-size:.78rem;line-height:1.55;
color:rgba(255,255,255,.85);letter-spacing:-.003em;
}
.lp-rs-steps li{padding:.28rem 0;margin-left:.15rem}
.lp-rs-steps li::marker{color:var(--brand-gold);font-weight:700}
/* Botón inline dentro del qd-hint (para abrir recetario desde modo mixo) */
.qd-hint-btn{
display:inline-flex;align-items:center;gap:.3rem;
margin-left:.4rem;padding:.28rem .7rem;
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;
border:none;border-radius:999px;
font-family:var(--sans);font-size:.65rem;font-weight:700;letter-spacing:-.005em;
cursor:pointer;
box-shadow:0 3px 10px rgba(212,184,105,.35);
transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}
.qd-hint-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(212,184,105,.45)}
.qd-hint-btn:active{transform:scale(.96)}
/* Badge "40 recetas" en el ds-card de Mixólogo */
.ds-badge-book{
display:inline-flex;align-items:center;gap:.2rem;
padding:.16rem .48rem;border-radius:999px;
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;
font-family:var(--sans);font-size:.55rem;font-weight:700;letter-spacing:.02em;
box-shadow:0 2px 6px rgba(212,184,105,.4);
white-space:nowrap;
}
/* CTA split: acción principal + botón dedicado al recetario */
.ds-cta-split{display:flex;flex-direction:column;gap:.4rem;margin-top:.55rem}
.ds-cta-split .ds-cta{margin-top:0}
.ds-cta-book{
display:inline-flex;align-items:center;justify-content:center;gap:.28rem;
padding:.42rem .7rem;
background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));
color:#0a2540;
border:1px solid rgba(212,184,105,.5);
border-radius:.65rem;
font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:-.005em;
cursor:pointer;text-decoration:none;
box-shadow:0 3px 10px rgba(212,184,105,.32);
transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
-webkit-tap-highlight-color:transparent;
}
.ds-cta-book:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(212,184,105,.42);filter:brightness(1.05)}
.ds-cta-book:active{transform:scale(.97)}
@media(max-width:600px){
.lp-rb-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.55rem;padding:.55rem .9rem 1.2rem}
.lp-rb-header{padding:.9rem 1rem .75rem}
.lp-rb-title{font-size:1rem}
.lp-rb-toolbar{padding:.7rem 1rem .3rem}
}
@media(prefers-reduced-motion:reduce){
.lp-rb-overlay,.lp-rb-card,.lp-rb-arrow,.lp-rb-back,.lp-rb-pill,.qd-hint-btn{transition:none!important;transform:none!important}
}
.sr-img{width:56px;height:56px;object-fit:contain;background:rgba(255,255,255,.94);border-radius:.35rem;flex-shrink:0}
.sr-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.sr-name{font-family:var(--serif);font-size:.78rem;color:#fff;font-weight:500;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-meta{display:flex;align-items:center;gap:.5rem}
.sr-price{font-size:.72rem;color:var(--gold);font-weight:600;letter-spacing:.02em}
.sr-cat{font-size:.55rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.08em}
.sr-item.sr-out .sr-name{opacity:.5}
.sr-item.sr-out .sr-price::after{content:' · agotado';color:rgba(255,120,120,.6);font-size:.55rem;text-transform:uppercase;letter-spacing:.08em;font-weight:400}
@media(prefers-reduced-motion:reduce){
#searchOverlay,.search-modal,.sr-item,.search-close{transition:none!important;transform:none!important;animation:none!important}
}
@media(max-width:480px){
.search-modal{padding:.75rem;border-radius:.8rem}
.search-results{max-height:65vh}
.sr-img{width:52px;height:52px}
.sr-name{font-size:.74rem}
}
/* ══ MI CAVA — favoritos + wishlist ══ */
#cavaOverlay{position:fixed;inset:0;background:rgba(4,9,15,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:9987;display:none;align-items:flex-start;justify-content:center;padding:1.2rem .8rem;overflow-y:auto;opacity:0;transition:opacity .3s ease}
#cavaOverlay.active{display:flex;opacity:1}
.cava-modal{position:relative;width:100%;max-width:680px;background:linear-gradient(160deg,rgba(10,37,64,.85) 0%,rgba(4,9,15,.95) 65%);border:1px solid rgba(212,184,105,.3);border-radius:1rem;padding:1.6rem 1.2rem 1.2rem;transform:translateY(20px);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:0 40px 100px rgba(0,0,0,.6)}
#cavaOverlay.active .cava-modal{transform:translateY(0)}
.cava-close{position:absolute;top:.7rem;right:.9rem;background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.28);color:var(--gold);width:2.15rem;height:2.15rem;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:2;min-height:44px;min-width:44px}
.cava-close:hover{background:rgba(212,184,105,.2);transform:rotate(90deg)}
.cava-hero{text-align:center;margin-bottom:1.1rem}
.cava-ico{font-size:2rem;line-height:1;margin-bottom:.4rem;filter:drop-shadow(0 3px 12px rgba(212,184,105,.35))}
.cava-title{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:#fff;margin:0 0 .35rem;letter-spacing:-.01em}
.cava-title:after{content:'';display:block;width:36px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.6rem auto 0}
.cava-subtitle{font-family:var(--sans);font-size:.72rem;color:rgba(255,255,255,.55);line-height:1.5;margin:.3rem 0 0}
.cava-list{display:flex;flex-direction:column;gap:.55rem;max-height:55vh;overflow-y:auto;padding:.3rem 0;scrollbar-width:thin}
.cava-empty{padding:2.5rem 1rem 1.5rem;text-align:center;font-family:var(--sans);color:rgba(255,255,255,.55);line-height:1.65}
.cava-empty-ico{font-size:3rem;margin-bottom:1rem;line-height:1;filter:drop-shadow(0 4px 14px rgba(212,184,105,.25));opacity:.9}
.cava-empty-title{font-size:1.15rem;color:var(--brand-gold);font-weight:500;margin-bottom:.5rem;font-family:var(--serif);letter-spacing:-.005em}
.cava-empty-hint{font-size:.78rem;color:rgba(255,255,255,.5);max-width:280px;margin:0 auto 1.4rem}
.cava-empty-actions{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap}
.cava-empty-cta{padding:.7rem 1.15rem;background:linear-gradient(135deg,var(--brand-gold),var(--brand-gold-2));color:var(--text-inverse);border:none;border-radius:var(--radius-full);font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 14px rgba(212,184,105,.28);transition:transform var(--dur-fast) ease,box-shadow var(--dur-base) ease}
.cava-empty-cta:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,184,105,.4)}
.cava-empty-cta:active{transform:scale(.96)}
.cava-empty-cta-secondary{background:transparent;color:var(--brand-gold);border:1px solid var(--border-default);box-shadow:none}
.cava-empty-cta-secondary:hover{background:rgba(212,184,105,.08);border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 4px 12px rgba(212,184,105,.18)}
.cava-item{display:flex;gap:.7rem;padding:.6rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.14);border-radius:.55rem;transition:all .18s ease}
.cava-item:hover{background:rgba(212,184,105,.05);border-color:rgba(212,184,105,.35)}
/* v172 — Cava visual grid rack (InVintory-inspired) — se activa con ≥4 items */
.cava-list.grid-mode{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.85rem;max-height:60vh;padding:.5rem .25rem}
.cava-list.grid-mode .cava-item{flex-direction:column;padding:.7rem .55rem;text-align:center;gap:.45rem;position:relative;background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-radius:.75rem;border-color:rgba(212,184,105,.18)}
.cava-list.grid-mode .cava-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.35);border-color:rgba(212,184,105,.45)}
.cava-list.grid-mode .cava-img{width:100%;height:110px;object-fit:contain;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(240,240,240,.94));border-radius:.5rem;padding:.4rem;box-shadow:inset 0 -8px 12px -6px rgba(0,0,0,.12)}
.cava-list.grid-mode .cava-body{flex:0 0 auto;width:100%;text-align:center;gap:.15rem}
.cava-list.grid-mode .cava-name{font-size:.72rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;word-break:break-word}
.cava-list.grid-mode .cava-price{font-size:.68rem}
.cava-list.grid-mode .cava-remove{position:absolute;top:.35rem;right:.35rem;background:rgba(0,0,0,.55);color:rgba(255,255,255,.9);border:0;border-radius:50%;width:22px;height:22px;font-size:.9rem;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.cava-list.grid-mode .cava-remove:hover{background:rgba(248,113,113,.85);color:#fff}
.cava-img{width:56px;height:56px;object-fit:contain;background:rgba(255,255,255,.94);border-radius:.35rem;flex-shrink:0}
.cava-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.2rem}
.cava-name{font-family:var(--serif);font-size:.78rem;color:#fff;font-weight:500;line-height:1.2}
.cava-name a{color:inherit;text-decoration:none}
.cava-name a:hover{color:var(--gold)}
.cava-price{font-size:.72rem;color:var(--gold);font-weight:600}
.cava-remove{width:32px;height:32px;background:transparent;border:1px solid rgba(255,120,120,.28);border-radius:50%;color:rgba(255,120,120,.7);cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:all .18s ease;flex-shrink:0;-webkit-tap-highlight-color:transparent;line-height:1}
.cava-remove:hover{background:rgba(255,120,120,.15);color:#ff8080;border-color:rgba(255,120,120,.5)}
.cava-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(212,184,105,.15);display:flex;flex-direction:column;gap:.6rem}
.cava-total{font-family:var(--sans);font-size:.85rem;color:rgba(255,255,255,.7);text-align:center;letter-spacing:.02em}
.cava-total strong{color:var(--gold);font-size:1.05rem;font-weight:600;letter-spacing:.02em}
.cava-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cava-btn-ask,.cava-btn-clear,.cava-btn-pdf{flex:1;padding:.72rem 1rem;border-radius:.5rem;font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:all .22s ease;min-height:44px;border:1px solid;-webkit-tap-highlight-color:transparent}
.cava-btn-ask{background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border-color:transparent;box-shadow:0 6px 18px rgba(212,184,105,.28)}
.cava-btn-ask:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(212,184,105,.4)}
.cava-btn-pdf{background:transparent;color:#e6cd80;border-color:rgba(212,184,105,.55)}
.cava-btn-pdf:hover{background:rgba(212,184,105,.10);border-color:rgba(212,184,105,.85);transform:translateY(-1px)}
.cava-btn-pdf[disabled]{opacity:.55;cursor:progress;transform:none;background:transparent}
.cava-btn-pdf .cava-pdf-spin{display:inline-block;width:.7em;height:.7em;margin-right:.3em;border:2px solid rgba(212,184,105,.35);border-top-color:#e6cd80;border-radius:50%;animation:cavaPdfSpin .9s linear infinite;vertical-align:-.05em}
@keyframes cavaPdfSpin{to{transform:rotate(360deg)}}
.cava-btn-clear{background:transparent;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.18)}
.cava-btn-clear:hover{color:rgba(255,120,120,.85);border-color:rgba(255,120,120,.4)}
/* Heart button injected into product cards (scan-card, sr-item, cava-item source) */
.heart-btn{position:absolute;top:.42rem;right:.42rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background:rgba(4,9,15,.7);border:1px solid rgba(212,184,105,.2);border-radius:50%;color:rgba(255,255,255,.55);cursor:pointer;font-size:.95rem;transition:all .2s ease;z-index:2;-webkit-tap-highlight-color:transparent;line-height:1}
.heart-btn:hover{background:rgba(255,80,110,.15);color:#ff8faa;border-color:rgba(255,140,160,.45)}
.heart-btn.hearted{color:#ff5f80;border-color:rgba(255,95,128,.55);background:rgba(255,95,128,.12)}
.heart-btn.hearted:hover{color:#ff8faa}
@media(prefers-reduced-motion:reduce){
#cavaOverlay,.cava-modal,.cava-close,.cava-btn-ask,.heart-btn{transition:none!important;transform:none!important}
}
@media(max-width:480px){
.cava-modal{padding:1.2rem .9rem 1rem;border-radius:.85rem}
.cava-title{font-size:1.28rem}
.cava-actions{flex-direction:column}
}
/* ══════════════════════════════════════════════════════════════════
MI BARRICA — tracker educativo añejamiento casero 4L
Compliance MX: verbos observarás/aprenderás/embotellarás, cero consumo.
Aesthetic: dark-gold + serif fase title + timeline horizontal Apple-style.
══════════════════════════════════════════════════════════════════ */
#barricaOverlay{position:fixed;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(122,78,28,.22),transparent 55%),radial-gradient(ellipse at 85% 95%,rgba(212,184,105,.14),transparent 55%),rgba(4,9,15,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:9987;display:none;align-items:flex-start;justify-content:center;padding:1.2rem .8rem;overflow-y:auto;opacity:0;transition:opacity .35s ease}
#barricaOverlay.active{display:flex;opacity:1}
.barrica-modal{position:relative;width:100%;max-width:720px;background:linear-gradient(160deg,rgba(20,14,8,.92) 0%,rgba(4,9,15,.97) 65%);border:1px solid rgba(212,184,105,.28);border-radius:1rem;padding:1.6rem 1.2rem 1.2rem;transform:translateY(24px);transition:transform .45s cubic-bezier(.22,1,.36,1);box-shadow:0 44px 110px rgba(0,0,0,.7)}
#barricaOverlay.active .barrica-modal{transform:translateY(0)}
.barrica-close{position:absolute;top:.7rem;right:.9rem;background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.28);color:var(--gold);width:2.15rem;height:2.15rem;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:2;min-height:44px;min-width:44px}
.barrica-close:hover{background:rgba(212,184,105,.2);transform:rotate(90deg)}
.barrica-hero{text-align:center;margin-bottom:1.2rem}
.barrica-ico{font-size:2.4rem;line-height:1;margin-bottom:.5rem;filter:drop-shadow(0 4px 14px rgba(212,184,105,.4))}
.barrica-title{font-family:var(--serif);font-size:1.65rem;font-weight:500;color:#fff;margin:0 0 .35rem;letter-spacing:-.01em}
.barrica-title:after{content:'';display:block;width:38px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.7rem auto 0}
.barrica-subtitle{font-family:var(--sans);font-size:.75rem;color:rgba(255,255,255,.6);line-height:1.55;margin:.3rem auto 0;max-width:38rem}
/* --- Onboarding state (sin barrica registrada) --- */
.barrica-onboard{padding:.4rem .2rem;display:flex;flex-direction:column;gap:1.1rem}
.barrica-onboard-copy{font-family:var(--sans);color:rgba(255,255,255,.72);font-size:.85rem;line-height:1.65;text-align:center;max-width:36rem;margin:0 auto}
.barrica-onboard-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.barrica-btn-wa{padding:.85rem 1.3rem;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;border:none;border-radius:var(--radius-full);font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 20px rgba(37,211,102,.28);transition:transform var(--dur-fast) ease,box-shadow var(--dur-base) ease;min-height:44px;-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:.5rem}
.barrica-btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.4)}
.barrica-btn-secondary{padding:.85rem 1.3rem;background:transparent;color:var(--brand-gold);border:1px solid var(--border-default);border-radius:var(--radius-full);font-family:var(--sans);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s ease;min-height:44px}
.barrica-btn-secondary:hover{background:rgba(212,184,105,.08);border-color:var(--border-strong);transform:translateY(-2px)}
/* --- Form registro --- */
.barrica-form{display:none;flex-direction:column;gap:.85rem;padding:1rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.14);border-radius:.75rem;margin-top:.6rem}
.barrica-form.active{display:flex}
.barrica-form-row{display:flex;flex-direction:column;gap:.35rem}
.barrica-form-lbl{font-family:var(--sans);font-size:.7rem;color:rgba(255,255,255,.65);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.barrica-form-input,.barrica-form-select,.barrica-form-textarea{background:rgba(4,9,15,.7);border:1px solid rgba(212,184,105,.22);color:#fff;font-family:var(--sans);font-size:.85rem;padding:.65rem .75rem;border-radius:.5rem;transition:border-color .18s ease;min-height:44px}
.barrica-form-input:focus,.barrica-form-select:focus,.barrica-form-textarea:focus{outline:none;border-color:rgba(212,184,105,.55);box-shadow:0 0 0 3px rgba(212,184,105,.15)}
.barrica-form-textarea{min-height:70px;resize:vertical}
.barrica-form-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.barrica-btn-primary{padding:.75rem 1.15rem;background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border:none;border-radius:var(--radius-full);font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 14px rgba(212,184,105,.28);transition:transform var(--dur-fast) ease,box-shadow var(--dur-base) ease;min-height:44px;-webkit-tap-highlight-color:transparent}
.barrica-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(212,184,105,.4)}
.barrica-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.barrica-btn-ghost{padding:.75rem 1.15rem;background:transparent;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-full);font-family:var(--sans);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .18s ease;min-height:44px}
.barrica-btn-ghost:hover{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.32)}
/* --- Active state (barrica en curso) --- */
.barrica-active{display:none;flex-direction:column;gap:1.1rem}
.barrica-active.on{display:flex}
.barrica-stats{display:flex;align-items:center;justify-content:space-between;padding:.7rem 1rem;background:linear-gradient(155deg,rgba(212,184,105,.09),rgba(212,184,105,.02));border:1px solid rgba(212,184,105,.22);border-radius:.75rem;font-family:var(--sans)}
.barrica-stats-day{font-family:var(--serif);font-size:1.4rem;color:var(--gold);font-weight:500;letter-spacing:-.01em;line-height:1}
.barrica-stats-day small{display:block;font-family:var(--sans);font-size:.65rem;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase;margin-top:.25rem;font-weight:400}
.barrica-stats-base{font-size:.72rem;color:rgba(255,255,255,.7);text-align:right;max-width:60%;line-height:1.4}
.barrica-stats-base b{display:block;color:#fff;font-weight:500;font-size:.82rem;margin-bottom:.15rem;font-family:var(--serif)}
/* Fase card protagonista */
.barrica-phase-card{position:relative;padding:1.3rem 1.2rem 1.2rem;background:linear-gradient(155deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 100%);border:1px solid rgba(212,184,105,.28);border-radius:.85rem;overflow:hidden}
.barrica-phase-card:before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.7}
.barrica-phase-hd{display:flex;flex-direction:column;gap:.85rem;align-items:center;text-align:center;margin-bottom:.95rem}
.barrica-swatch{width:132px;height:132px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 -10px 22px rgba(0,0,0,.32),0 10px 32px rgba(0,0,0,.55),0 0 0 3px rgba(212,184,105,.28),0 0 40px rgba(212,184,105,.18);position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.barrica-swatch:hover{transform:scale(1.04)}
.barrica-swatch:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.42),transparent 58%);animation:barricaSheen 6s ease-in-out infinite}
@keyframes barricaSheen{0%,100%{opacity:.4}50%{opacity:.75}}
.barrica-phase-title-wrap{flex:1;min-width:0;text-align:center}
.barrica-phase-eyebrow{font-family:var(--sans);font-size:.62rem;color:rgba(212,184,105,.8);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.3rem;font-weight:600}
.barrica-phase-name{font-family:var(--serif);font-size:1.55rem;color:#fff;font-weight:500;letter-spacing:-.01em;line-height:1.15}
.barrica-metrics{display:flex;justify-content:center;gap:1.15rem;flex-wrap:wrap;margin:.55rem auto 0;font-family:var(--sans);font-size:.66rem;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.barrica-metrics span b{color:var(--gold);font-family:var(--serif);font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;display:block;margin-top:.15rem}
.barrica-weekly-note{margin-top:.7rem;padding:.65rem .85rem;background:linear-gradient(155deg,rgba(212,184,105,.09),rgba(212,184,105,.02));border-left:2px solid rgba(212,184,105,.55);border-radius:.4rem;font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.82);line-height:1.6;text-align:left}
.barrica-weekly-note b{color:var(--gold);font-weight:600;display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.barrica-phase-narrative{font-family:var(--sans);font-size:.85rem;color:rgba(255,255,255,.78);line-height:1.65;margin:.4rem 0 .95rem}
.barrica-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.barrica-chip{padding:.32rem .7rem;background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.26);border-radius:var(--radius-full);font-family:var(--sans);font-size:.7rem;color:var(--gold);font-weight:500;letter-spacing:.02em}
.barrica-expand{border-top:1px solid rgba(212,184,105,.14);padding-top:.75rem;margin-top:.4rem}
.barrica-expand+.barrica-expand{margin-top:.25rem}
.barrica-expand-summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:.4rem 0;font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.72);font-weight:500;user-select:none;list-style:none;-webkit-tap-highlight-color:transparent}
.barrica-expand-summary::-webkit-details-marker{display:none}
.barrica-expand-summary:after{content:'▾';color:var(--gold);transition:transform .22s ease;font-size:.7rem}
.barrica-expand[open] .barrica-expand-summary:after{transform:rotate(180deg)}
.barrica-expand-body{padding:.5rem 0 .4rem;font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.72);line-height:1.7}
.barrica-expand-body ul{margin:.2rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}
/* Timeline horizontal */
.barrica-timeline-wrap{padding:.4rem 0 .1rem}
.barrica-timeline-lbl{font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.55);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.55rem;font-weight:600}
.barrica-timeline{display:flex;gap:0;overflow-x:auto;padding:.4rem .1rem 1rem;scrollbar-width:none;position:relative;scroll-snap-type:x proximity}
.barrica-timeline::-webkit-scrollbar{display:none}
.barrica-timeline-item{flex-shrink:0;min-width:96px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .4rem;position:relative;scroll-snap-align:start;opacity:.55;transition:opacity .3s ease}
.barrica-timeline-item.done{opacity:.85}
.barrica-timeline-item.active{opacity:1}
.barrica-timeline-item:not(:last-child):after{content:'';position:absolute;top:.9rem;left:calc(50% + 12px);right:calc(-50% + 12px);height:1.5px;background:linear-gradient(90deg,rgba(212,184,105,.28),rgba(212,184,105,.12));z-index:0}
.barrica-timeline-item.done:not(:last-child):after{background:linear-gradient(90deg,rgba(212,184,105,.7),rgba(212,184,105,.4))}
.barrica-timeline-dot{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(212,184,105,.3);position:relative;z-index:1;transition:all .3s ease}
.barrica-timeline-item.done .barrica-timeline-dot{background:rgba(212,184,105,.35);border-color:var(--gold)}
.barrica-timeline-item.active .barrica-timeline-dot{background:var(--gold);border-color:#fff;box-shadow:0 0 0 4px rgba(212,184,105,.22),0 0 16px rgba(212,184,105,.55);animation:barricaPulse 2.2s ease-in-out infinite}
@keyframes barricaPulse{0%,100%{box-shadow:0 0 0 4px rgba(212,184,105,.22),0 0 12px rgba(212,184,105,.4)}50%{box-shadow:0 0 0 6px rgba(212,184,105,.32),0 0 20px rgba(212,184,105,.7)}}
.barrica-timeline-name{font-family:var(--sans);font-size:.66rem;color:rgba(255,255,255,.72);margin-top:.5rem;line-height:1.25;font-weight:500;max-width:88px}
.barrica-timeline-item.active .barrica-timeline-name{color:var(--gold);font-weight:600}
.barrica-timeline-days{font-family:var(--sans);font-size:.6rem;color:rgba(255,255,255,.42);margin-top:.15rem;letter-spacing:.04em}
/* Próximo hito */
.barrica-next{padding:.85rem 1rem;background:rgba(212,184,105,.05);border:1px dashed rgba(212,184,105,.28);border-radius:.6rem;font-family:var(--sans);font-size:.78rem;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:.6rem;line-height:1.5}
.barrica-next-ico{font-size:1.1rem;color:var(--gold);flex-shrink:0}
.barrica-next b{color:var(--gold);font-weight:600}
/* Diario */
.barrica-journal{margin-top:.4rem}
.barrica-journal-title{font-family:var(--sans);font-size:.7rem;color:rgba(255,255,255,.55);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.55rem;font-weight:600}
.barrica-journal-add{display:flex;gap:.5rem;margin-bottom:.7rem}
.barrica-journal-input{flex:1;background:rgba(4,9,15,.7);border:1px solid rgba(212,184,105,.22);color:#fff;font-family:var(--sans);font-size:.8rem;padding:.6rem .75rem;border-radius:.5rem;min-height:44px}
.barrica-journal-input:focus{outline:none;border-color:rgba(212,184,105,.55)}
.barrica-journal-btn{padding:0 1rem;background:rgba(212,184,105,.14);color:var(--gold);border:1px solid rgba(212,184,105,.35);border-radius:.5rem;font-family:var(--sans);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .18s ease;min-height:44px;-webkit-tap-highlight-color:transparent}
.barrica-journal-btn:hover{background:rgba(212,184,105,.25)}
.barrica-journal-list{display:flex;flex-direction:column;gap:.4rem;max-height:180px;overflow-y:auto}
.barrica-journal-item{padding:.55rem .7rem;background:rgba(255,255,255,.03);border-left:2px solid rgba(212,184,105,.5);border-radius:.35rem;font-family:var(--sans);font-size:.76rem;color:rgba(255,255,255,.78);line-height:1.5}
.barrica-journal-item time{display:block;font-size:.62rem;color:rgba(212,184,105,.7);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.25rem;font-weight:600}
.barrica-journal-empty{padding:.7rem;font-family:var(--sans);font-size:.72rem;color:rgba(255,255,255,.42);text-align:center;font-style:italic}
.barrica-footer-actions{display:flex;justify-content:center;padding-top:.75rem;border-top:1px solid rgba(212,184,105,.12);margin-top:.5rem}
.barrica-btn-reset{background:transparent;color:rgba(255,120,120,.65);border:1px solid rgba(255,120,120,.24);border-radius:var(--radius-full);padding:.55rem 1rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.04em;cursor:pointer;transition:all .18s ease;min-height:36px;-webkit-tap-highlight-color:transparent}
.barrica-btn-reset:hover{background:rgba(255,120,120,.1);color:#ff8080;border-color:rgba(255,120,120,.45)}
.barrica-legal{margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(212,184,105,.12);font-family:var(--sans);font-size:.6rem;color:rgba(255,255,255,.4);text-align:center;line-height:1.6;letter-spacing:.02em}
/* --- v2: Ciencia · Herencia UNESCO · ¿Por qué 4L? --- */
.barrica-refs-hdr{font-family:var(--sans);font-size:.65rem;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin:0 0 .55rem}
.barrica-refs-list{display:flex;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none}
.barrica-refs-list li{padding:.5rem .7rem;background:rgba(212,184,105,.05);border:1px solid rgba(212,184,105,.14);border-radius:.4rem;transition:border-color .2s ease,background .2s ease}
.barrica-refs-list li:hover{border-color:rgba(212,184,105,.4);background:rgba(212,184,105,.09)}
.barrica-refs-list a{font-family:var(--sans);font-size:.75rem;color:var(--gold);text-decoration:none;line-height:1.5;display:flex;align-items:center;gap:.5rem}
.barrica-refs-list a:before{content:'↗';font-size:.7rem;opacity:.6;flex-shrink:0}
.barrica-refs-list a:hover{color:#f0d98a;text-decoration:underline}
.barrica-heritage{font-family:var(--sans);color:rgba(255,255,255,.78);font-size:.78rem;line-height:1.7;padding:.2rem 0}
.barrica-heritage p{margin:0 0 .55rem}
.barrica-heritage p:last-child{margin-bottom:0}
.barrica-heritage b{color:var(--gold);font-weight:600}
.barrica-heritage-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .5rem;background:rgba(212,184,105,.12);border:1px solid rgba(212,184,105,.32);border-radius:var(--radius-full);font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.barrica-why4l{padding:.2rem 0;font-family:var(--sans);color:rgba(255,255,255,.78);font-size:.78rem;line-height:1.7}
.barrica-why4l b{color:var(--gold);font-weight:600}
.barrica-why4l-stat{display:flex;gap:1rem;margin:.7rem 0 .5rem;padding:.6rem .7rem;background:rgba(255,255,255,.03);border-radius:.4rem;border:1px solid rgba(212,184,105,.12)}
.barrica-why4l-stat > div{flex:1;text-align:center}
.barrica-why4l-stat b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--gold);font-weight:500;margin-bottom:.15rem}
.barrica-why4l-stat small{display:block;font-size:.6rem;color:rgba(255,255,255,.55);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
@media(prefers-reduced-motion:reduce){
#barricaOverlay,.barrica-modal,.barrica-close,.barrica-btn-primary,.barrica-btn-wa,.barrica-swatch:after,.barrica-timeline-item.active .barrica-timeline-dot{transition:none!important;transform:none!important;animation:none!important}
}
@media(max-width:480px){
.barrica-modal{padding:1.25rem .9rem 1rem;border-radius:.85rem}
.barrica-title{font-size:1.35rem}
.barrica-phase-hd{gap:.7rem}
.barrica-swatch{width:110px;height:110px;box-shadow:inset 0 -8px 18px rgba(0,0,0,.32),0 8px 24px rgba(0,0,0,.5),0 0 0 3px rgba(212,184,105,.28),0 0 32px rgba(212,184,105,.16)}
.barrica-phase-name{font-size:1.3rem}
.barrica-metrics{gap:.85rem;font-size:.6rem}
.barrica-metrics span b{font-size:.85rem}
.barrica-stats{flex-direction:column;gap:.55rem;text-align:center}
.barrica-stats-base{text-align:center;max-width:100%}
.barrica-onboard-actions{flex-direction:column}
.barrica-btn-wa,.barrica-btn-secondary{width:100%;justify-content:center}
.barrica-why4l-stat{flex-direction:column;gap:.5rem}
}
/* ══════════════════════════════════════════════════════════════════
MI CAVA WRAPPED 2026 — full-screen story-like overlay
Compliance MX: sólo métricas de exploración/curación, no consumo.
══════════════════════════════════════════════════════════════════ */
.hdr-wrapped-btn{position:relative;background:linear-gradient(135deg,rgba(212,184,105,.14),rgba(212,184,105,.04));border:1px solid rgba(212,184,105,.35);color:var(--gold,#d4b869)} /* v-cleanup: display:none removido (Wrapped ya no vive en ⋯ menu, restaurado en desktop; mobile oculto vía @media 640 → moreSheet) */
.hdr-wrapped-btn:hover{background:linear-gradient(135deg,rgba(212,184,105,.28),rgba(212,184,105,.1));box-shadow:0 0 0 2px rgba(212,184,105,.18)}
.hdr-wrapped-btn .hdr-wrapped-year{position:absolute;bottom:-2px;right:-2px;background:var(--gold,#d4b869);color:#0a2540;font-size:.55rem;font-weight:700;padding:1px 4px;border-radius:6px;font-family:var(--sans);line-height:1.1;letter-spacing:.02em;border:1px solid #0a2540}
#wrappedOverlay{position:fixed;inset:0;background:radial-gradient(circle at 30% 20%,rgba(120,50,140,.5),transparent 60%),radial-gradient(circle at 70% 80%,rgba(212,184,105,.35),transparent 55%),#04070d;z-index:9990;display:none;align-items:center;justify-content:center;padding:0;overflow:hidden;opacity:0;transition:opacity .35s ease}
#wrappedOverlay.active{display:flex;opacity:1}
.wrapped-modal{position:relative;width:100%;max-width:440px;height:100vh;height:100svh;height:100dvh;max-height:100svh;max-height:100dvh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.wrapped-close{position:absolute;top:.9rem;right:.9rem;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);color:#fff;width:2.3rem;height:2.3rem;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;z-index:10;min-height:44px;min-width:44px;transition:all .18s ease}
.wrapped-close:hover{background:rgba(0,0,0,.65);transform:rotate(90deg)}
.wrapped-progress{position:absolute;top:.65rem;left:.9rem;right:3.6rem;display:flex;gap:.3rem;z-index:9}
.wrapped-progress-seg{flex:1;height:2.5px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden;position:relative}
.wrapped-progress-seg.done:before{content:'';position:absolute;inset:0;background:#fff;border-radius:2px}
.wrapped-progress-seg.active:before{content:'';position:absolute;inset:0;width:0;background:#fff;border-radius:2px;animation:wrappedProgress 6s linear forwards}
.wrapped-modal[data-paused="1"] .wrapped-progress-seg.active:before{animation-play-state:paused}
@keyframes wrappedProgress{from{width:0}to{width:100%}}
.wrapped-slides{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:3.5rem 1.4rem 1.4rem;overflow:hidden;width:100%}
.wrapped-slide{position:absolute;inset:3.5rem 1.4rem 1.4rem;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.wrapped-slide.active{display:flex;opacity:1;transform:translateY(0)}
.wrapped-eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#d4b869);opacity:.85}
.wrapped-headline{font-family:var(--serif);font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.1;font-weight:500;color:#fff;letter-spacing:-.015em;margin:0;max-width:26ch}
.wrapped-big-num{font-family:var(--serif);font-size:clamp(4rem,20vw,7rem);line-height:1;font-weight:600;color:var(--gold,#d4b869);letter-spacing:-.03em;text-shadow:0 4px 32px rgba(212,184,105,.4);margin:.4rem 0}
.wrapped-caption{font-family:var(--sans);font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.85);max-width:32ch;margin:0}
.wrapped-caption-hint{font-family:var(--sans);font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.55);margin-top:.4rem;max-width:34ch}
.wrapped-emoji{font-size:clamp(3rem,12vw,4.5rem);line-height:1;filter:drop-shadow(0 6px 24px rgba(212,184,105,.35));margin-bottom:.4rem}
.wrapped-product-card{background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(212,184,105,.28);border-radius:.9rem;padding:1rem;display:flex;gap:.8rem;align-items:center;max-width:320px;width:100%;margin:.5rem auto}
.wrapped-product-img{width:60px;height:60px;object-fit:contain;background:#fff;border-radius:.4rem;padding:.2rem;flex-shrink:0}
.wrapped-product-body{flex:1;min-width:0;text-align:left}
.wrapped-product-name{font-family:var(--serif);font-size:.85rem;color:#fff;line-height:1.25;font-weight:500;margin:0 0 .2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wrapped-product-meta{font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.04em}
.wrapped-nav{position:absolute;inset:3.5rem 0 1.4rem;display:flex;z-index:5}
.wrapped-nav-left,.wrapped-nav-right{flex:1;cursor:pointer;background:transparent;border:0;padding:0;-webkit-tap-highlight-color:transparent}
.wrapped-nav-left{max-width:33%}
.wrapped-nav-right{flex:1}
.wrapped-footer{padding:.9rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;align-items:center;position:relative;z-index:6}
.wrapped-share-btn{width:100%;max-width:320px;padding:.9rem 1.2rem;background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border:none;border-radius:.7rem;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px rgba(212,184,105,.35);display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;transition:transform .18s ease,box-shadow .22s ease}
.wrapped-share-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(212,184,105,.5)}
.wrapped-share-btn:active{transform:scale(.97)}
.wrapped-share-btn[disabled]{opacity:.6;cursor:wait}
.wrapped-secondary-btn{background:transparent;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.2);padding:.6rem 1rem;border-radius:.55rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;cursor:pointer;text-transform:uppercase;min-height:40px;transition:all .18s ease}
.wrapped-secondary-btn:hover{border-color:rgba(212,184,105,.5);color:var(--gold,#d4b869)}
.wrapped-watermark{font-family:var(--sans);font-size:.62rem;color:rgba(255,255,255,.4);letter-spacing:.15em;text-transform:uppercase;text-align:center}
/* Empty state (usuario nuevo sin data suficiente) */
.wrapped-empty{padding:2rem 1.5rem;text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center;max-width:340px;margin:auto}
.wrapped-empty-emoji{font-size:3.5rem;opacity:.85}
.wrapped-empty-title{font-family:var(--serif);font-size:1.4rem;color:#fff;margin:0;line-height:1.2}
.wrapped-empty-caption{font-family:var(--sans);font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.55;margin:0}
.wrapped-empty-progress{display:flex;flex-direction:column;gap:.4rem;background:rgba(255,255,255,.05);border:1px solid rgba(212,184,105,.18);border-radius:.6rem;padding:.8rem 1rem;width:100%}
.wrapped-empty-progress-num{font-family:var(--serif);font-size:1.8rem;color:var(--gold,#d4b869);font-weight:600;line-height:1}
.wrapped-empty-progress-label{font-family:var(--sans);font-size:.68rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.1em}
.wrapped-empty-cta{padding:.8rem 1.4rem;background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border:none;border-radius:.55rem;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;min-height:44px}
@media(prefers-reduced-motion:reduce){
.wrapped-progress-seg.active:before{animation-duration:.001s}
.wrapped-slide{transition:none!important;transform:none!important}
#wrappedOverlay{transition:none!important}
}
@media(max-width:380px){
.wrapped-headline{font-size:1.5rem}
.wrapped-big-num{font-size:4.2rem}
.wrapped-caption{font-size:.85rem}
}
/* ══ EVENT PLANNER — modal guiado para armar pack de evento ══ */
/* Sprint C4 — Wizard evento 3 pasos */
.event-wizard .event-step{display:none}
.event-wizard .event-step-active{display:block;animation:evStepIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes evStepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.event-progress{display:flex;gap:.5rem;justify-content:center;margin-bottom:.5rem}
.event-progress-dot{width:8px;height:8px;border-radius:50%;background:rgba(212,184,105,.22);transition:.28s cubic-bezier(.22,1,.36,1)}
.event-progress-active{background:linear-gradient(135deg,#d4b869,#e6cd80);width:26px;border-radius:4px;box-shadow:0 2px 8px rgba(212,184,105,.3)}
.event-progress-lbl{text-align:center;font-size:.65rem;color:rgba(212,184,105,.8);margin-bottom:1.1rem;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.event-progress-lbl #eventStepTitle{color:rgba(255,255,255,.7)}
.event-nav{display:flex;gap:.55rem;margin-top:1rem}
.event-btn-back,.event-btn-next{flex:1;padding:.85rem;background:transparent;border:1px solid rgba(212,184,105,.28);color:var(--brand-gold);border-radius:.65rem;font-family:var(--sans);font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color .22s ease,background .22s ease,transform .12s ease;letter-spacing:.02em}
.event-btn-back:hover,.event-btn-next:hover{border-color:rgba(212,184,105,.55);background:rgba(212,184,105,.08)}
.event-btn-back:active,.event-btn-next:active{transform:scale(.97)}
.event-btn-next{background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border-color:transparent}
.event-btn-next:hover{filter:brightness(1.05)}
@media(prefers-reduced-motion:reduce){.event-step-active{animation:none!important}.event-progress-dot{transition:none!important}}
#eventOverlay{position:fixed;inset:0;background:rgba(4,9,15,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);z-index:9986;display:none;align-items:flex-start;justify-content:center;padding:1.2rem .8rem;overflow-y:auto;opacity:0;transition:opacity .3s ease}
#eventOverlay.active{display:flex;opacity:1}
.event-modal{position:relative;width:100%;max-width:640px;background:linear-gradient(160deg,rgba(10,37,64,.85) 0%,rgba(4,9,15,.95) 65%);border:1px solid rgba(212,184,105,.32);border-radius:1rem;padding:1.8rem 1.4rem 1.4rem;transform:translateY(20px);transition:transform .4s cubic-bezier(.22,1,.36,1);box-shadow:0 40px 100px rgba(0,0,0,.6)}
#eventOverlay.active .event-modal{transform:translateY(0)}
.event-close{position:absolute;top:.7rem;right:.9rem;background:rgba(212,184,105,.1);border:1px solid rgba(212,184,105,.28);color:var(--gold);width:2.15rem;height:2.15rem;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:2;min-height:44px;min-width:44px}
.event-close:hover{background:rgba(212,184,105,.2);transform:rotate(90deg)}
.event-hero{text-align:center;margin-bottom:1.4rem}
.event-ico{font-size:2.2rem;line-height:1;margin-bottom:.55rem;filter:drop-shadow(0 3px 12px rgba(212,184,105,.3))}
.event-title{font-family:var(--serif);font-size:1.55rem;font-weight:500;color:#fff;margin:0 0 .45rem;letter-spacing:-.01em}
.event-title:after{content:'';display:block;width:40px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:.7rem auto 0}
.event-subtitle{font-family:var(--sans);font-size:.75rem;color:rgba(255,255,255,.62);line-height:1.5;max-width:440px;margin:.35rem auto 0;font-weight:300}
.event-form{display:flex;flex-direction:column;gap:1.05rem}
.event-field{display:flex;flex-direction:column;gap:.42rem}
.event-lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;color:rgba(212,184,105,.7);text-transform:uppercase;font-weight:500}
.event-input{background:rgba(255,255,255,.04);border:1px solid rgba(212,184,105,.2);border-radius:.5rem;padding:.7rem .85rem;font-family:var(--sans);font-size:16px;color:#fff;outline:none;min-height:44px;transition:border-color .2s ease}
.event-input:focus{border-color:rgba(212,184,105,.55);background:rgba(255,255,255,.06)}
.event-input::placeholder{color:rgba(255,255,255,.3)}
.event-row{display:flex;gap:.7rem}
.event-half{flex:1;min-width:0}
.event-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.event-chip{padding:.5rem .78rem;background:rgba(255,255,255,.03);border:1px solid rgba(212,184,105,.18);border-radius:.42rem;color:rgba(255,255,255,.72);font-family:var(--sans);font-size:.7rem;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;min-height:36px;letter-spacing:.02em}
.event-chip:hover{background:rgba(212,184,105,.08);border-color:rgba(212,184,105,.38);color:#fff}
.event-chip.ev-sel{background:linear-gradient(155deg,rgba(212,184,105,.18),rgba(212,184,105,.05));border-color:rgba(212,184,105,.55);color:var(--gold)}
/* Step 3 mejorado — grupos de preferencia con # personas por bebida (cálculo local sin tokens) */
.event-lbl-hint{display:block;font-weight:400;font-size:.65rem;color:rgba(255,255,255,.4);margin-top:.28rem;line-height:1.45;letter-spacing:.005em}
.event-prefs-grid{display:flex;flex-direction:column;gap:.42rem;margin-top:.55rem}
.event-pref-row{display:grid;grid-template-columns:26px 1fr 68px;gap:.6rem;align-items:center;padding:.62rem .75rem;background:rgba(255,255,255,.025);border:1px solid rgba(212,184,105,.12);border-radius:.6rem;transition:all .2s ease}
.event-pref-row:has(.event-pref-count:not([value="0"])):has(.event-pref-count:not(:placeholder-shown)){background:linear-gradient(155deg,rgba(212,184,105,.08),rgba(212,184,105,.02));border-color:rgba(212,184,105,.35)}
.event-pref-emoji{font-size:1.15rem;line-height:1;text-align:center;filter:drop-shadow(0 2px 6px rgba(212,184,105,.22))}
.event-pref-lbl{font-family:var(--sans);font-size:.78rem;font-weight:600;color:rgba(255,255,255,.88);line-height:1.2;letter-spacing:-.005em}
.event-pref-lbl small{display:block;font-size:.6rem;font-weight:400;color:rgba(255,255,255,.4);margin-top:.15rem;letter-spacing:0}
.event-pref-count{width:100%;padding:.5rem .4rem;background:rgba(4,9,15,.55);border:1px solid rgba(212,184,105,.28);border-radius:.42rem;color:#fff;font-family:var(--sans);font-size:.9rem;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield;transition:border-color .18s ease}
.event-pref-count::-webkit-outer-spin-button,.event-pref-count::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.event-pref-count:focus{outline:none;border-color:rgba(212,184,105,.6);background:rgba(212,184,105,.06)}
.event-prefs-summary{margin-top:.7rem;padding:.7rem .85rem;background:linear-gradient(160deg,rgba(76,175,147,.06),rgba(212,184,105,.03));border:1px solid rgba(212,184,105,.18);border-radius:.55rem;font-family:var(--sans)}
.event-prefs-calc{font-size:.72rem;color:rgba(255,255,255,.68);line-height:1.55;letter-spacing:.005em}
.event-prefs-calc b{color:var(--gold);font-weight:700}
.event-prefs-calc.event-prefs-calc-ok{color:rgba(255,255,255,.85)}
.event-prefs-calc.event-prefs-calc-empty{color:rgba(255,255,255,.35);font-style:italic}
/* Alertas presupuesto inline */
.event-alert{margin:.15rem 0 .7rem;padding:.55rem .75rem;border-radius:.45rem;font-size:.72rem;line-height:1.5;letter-spacing:.005em}
.event-alert-warn{background:rgba(244,124,124,.08);border:1px solid rgba(244,124,124,.32);color:rgba(244,180,180,.95)}
.event-alert-warn b{color:#f47c7c}
.event-alert-info{background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.28);color:rgba(190,215,255,.95)}
.event-alert-info b{color:#60a5fa}
.event-alert-ok{background:rgba(74,222,128,.05);border:1px solid rgba(74,222,128,.22);color:rgba(180,240,200,.92)}
/* Botón copy */
.event-copy-btn{display:block;width:100%;margin-top:.7rem;padding:.55rem .8rem;background:rgba(76,175,147,.08);border:1px solid rgba(76,175,147,.32);border-radius:.45rem;color:#4caf93;font-family:var(--sans);font-size:.72rem;font-weight:600;cursor:pointer;transition:all .18s ease;letter-spacing:.02em}
.event-copy-btn:hover{background:rgba(76,175,147,.14);border-color:rgba(76,175,147,.5)}
.event-copy-btn:active{transform:scale(.98)}
.event-submit{margin-top:.6rem;background:linear-gradient(135deg,#d4b869,#e6cd80);color:#0a2540;border:none;padding:.9rem 1.6rem;border-radius:.55rem;font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:all .28s cubic-bezier(.22,1,.36,1);box-shadow:0 8px 24px rgba(212,184,105,.3);min-height:48px}
.event-submit:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(212,184,105,.42)}
.event-submit:active{transform:translateY(0)}
.event-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}
@media(prefers-reduced-motion:reduce){
#eventOverlay,.event-modal,.event-close,.event-chip,.event-submit{transition:none!important;transform:none!important}
}
@media(max-width:480px){
.event-modal{padding:1.4rem 1rem 1.1rem;border-radius:.85rem}
.event-title{font-size:1.3rem}
.event-row{flex-direction:column;gap:.7rem}
.event-half{width:100%}
}
/* ══ A11y: focus-visible consistente para keyboard nav (no aparece con mouse) ══
Solo elementos interactivos, con outline gold sutil que respeta la paleta. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
outline: 2px solid rgba(212,184,105,.75);
outline-offset: 2px;
border-radius: inherit;
}
/* Inputs de texto: outline reemplaza cualquier border cambio nativo */
.ai-chat-input:focus-visible,
.ai-chat-annot-input:focus-visible,
.search-input:focus-visible{
outline: 1px solid rgba(212,184,105,.55);
outline-offset: 0;
}
/* ══════════════════════════════════════════════════════════════════
DOCK LATERAL — 5 capacidades siempre visibles (columna intermedia).
Desktop: columna vertical entre aside y chat, cards apiladas.
Mobile: strip horizontal scrollable encima del chat (aside está hidden).
Neuromarketing: gold ring en activo, glow pulsante en NUEVO (Escanear).
Touch targets ≥44px en mobile (WCAG 2.1 AA).
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
DOCK-SIDE v2 — Cards premium 2026 (Liquid Glass + tilt 3D + shine sweep)
Diseño inspirado en Apple Liquid Glass WWDC 2025-2026 + Airbnb 3D icons.
Interacciones cursor-tracked via CSS custom properties + JS pointermove.
Desktop: 264px column, cards grandes con perspective 3D + shine reflection.
Mobile: 220px width tap-friendly con snap-scroll.
══════════════════════════════════════════════════════════════════ */
.dock-side{display:flex;flex-direction:column;gap:.65rem;padding-top:.5rem;width:230px;flex-shrink:0;perspective:1200px}
.dock-side-a{order:1}
.dock-side-b{order:3}
.chat-wrap{order:2}
.app-aside{order:0}
.dock-side-title{font-family:var(--sans);font-size:.58rem;letter-spacing:.28em;color:rgba(212,184,105,.65);text-transform:uppercase;margin:0 0 .6rem .15rem;font-weight:500}
/* ── Base card ── */
.ds-card{
--mx:50%;--my:50%;--tx:0deg;--ty:0deg;--lift:0px;
position:relative;display:flex;flex-direction:column;align-items:stretch;
flex-shrink:0; /* Nunca comprimir el card dentro de dock flex — CTA siempre visible */
padding:1.15rem 1.15rem 1.2rem;
background:linear-gradient(155deg,rgba(10,37,64,.62),rgba(4,9,15,.82));
border:1px solid rgba(212,184,105,.2);
border-radius:1.1rem;
color:rgba(255,255,255,.92);
font-family:var(--sans);cursor:pointer;text-align:left;
transform-style:preserve-3d;
transform:translateY(var(--lift)) rotateX(var(--tx)) rotateY(var(--ty));
transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .35s ease,background .35s ease;
-webkit-tap-highlight-color:transparent;overflow:hidden;
backdrop-filter:blur(18px) saturate(1.35);
-webkit-backdrop-filter:blur(18px) saturate(1.35);
box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
contain:paint;
will-change:transform;
}
/* Variante — misma apariencia que