/* ============================================================
   ALPACA RANTIYKUY — theme.css  v3.0 (Premium 2026)
   Diseño moderno, elegante y de alto impacto
   ============================================================ */

:root {
    /* ── Azul corporativo (sin cambios) ────────────────────── */
    --primary-50:  #EBF3FB;
    --primary-100: #D0E5F5;
    --primary-200: #A6CAE8;
    --primary-300: #5F9AC8;
    --primary-400: #3F83C5;
    --primary-500: #1F63A4;  /* color base inmutable */
    --primary-600: #174e83;
    --primary-700: #0f3560;
    --primary-800: #0a2444;
    --primary-900: #061627;

    /* ── Acento naranja premium ────────────────────────────── */
    --accent:        #FF7A00;
    --accent-light:  #FF9A3C;
    --accent-hover:  #e86e00;
    --accent-soft:   rgba(255,122,0,.10);
    --accent-glow:   0 8px 32px rgba(255,122,0,.35);

    /* ── Fondos sofisticados ───────────────────────────────── */
    --bg-page:    #F4F7FB;
    --bg-surface: #ffffff;
    --bg-subtle:  #EEF3F9;
    --bg-muted:   #E4EBF4;
    --bg-glass:   rgba(255,255,255,.72);
    --bg-dark:    #071929;

    /* ── Texto ─────────────────────────────────────────────── */
    --dark:           #071929;
    --text-primary:   #0d2137;
    --text-secondary: #2d4f6a;
    --muted:          #5a7898;
    --text-muted:     #5a7898;
    --white:          #ffffff;

    /* ── Compat aliases ────────────────────────────────────── */
    --earth:      #071929;
    --terracotta: #3F83C5;

    /* ── Estados ───────────────────────────────────────────── */
    --success:      #15803d;
    --success-soft: rgba(21,128,61,.10);
    --warning:      #92550a;
    --warning-soft: rgba(146,85,10,.10);
    --danger:       #b91c1c;
    --danger-soft:  rgba(185,28,28,.08);

    /* ── Bordes ────────────────────────────────────────────── */
    --border:        rgba(31,99,164,.12);
    --border-strong: rgba(31,99,164,.28);
    --border-hover:  rgba(31,99,164,.40);
    --line:          rgba(31,99,164,.10);

    /* ── Sistema de sombras (con tinte azul) ───────────────── */
    --shadow-xs:    0 1px 3px rgba(7,25,41,.06);
    --shadow-sm:    0 2px 8px rgba(7,25,41,.08);
    --shadow-soft:  0 4px 16px rgba(7,25,41,.10);
    --shadow-md:    0 8px 24px rgba(7,25,41,.12);
    --shadow-card:  0 12px 32px rgba(7,25,41,.14);
    --shadow-lg:    0 20px 48px rgba(7,25,41,.16);
    --shadow-xl:    0 32px 64px rgba(7,25,41,.20);
    --shadow-deep:  0 24px 56px rgba(7,25,41,.22);
    --shadow-blue:  0 8px 24px rgba(31,99,164,.20);
    --shadow-blue-lg: 0 20px 48px rgba(31,99,164,.26);
    --shadow-accent: 0 8px 28px rgba(255,122,0,.30);

    /* ── Cart ──────────────────────────────────────────────── */
    --cart-surface:      rgba(255,255,255,.97);
    --cart-border:       rgba(31,99,164,.10);
    --cart-border-strong: rgba(31,99,164,.28);
    --cart-shadow:       0 6px 20px rgba(7,25,41,.09);
    --cart-shadow-hover: 0 16px 40px rgba(7,25,41,.14);

    /* ── Radios ────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-2xl:  36px;
    --radius-full: 9999px;

    /* ── Contenedor ────────────────────────────────────────── */
    --container: 1280px;

    /* ── Fuentes ───────────────────────────────────────────── */
    --font-main:    "Montserrat", system-ui, sans-serif;
    --font-display: "Cormorant Garamond", Georgia, serif;

    /* ── Transiciones premium ──────────────────────────────── */
    --ease-out:    cubic-bezier(.16,1,.3,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --ease-smooth: cubic-bezier(.4,0,.2,1);
    --t-fast:  150ms cubic-bezier(.16,1,.3,1);
    --t-base:  280ms cubic-bezier(.16,1,.3,1);
    --t-slow:  450ms cubic-bezier(.16,1,.3,1);
    --transition: all 280ms cubic-bezier(.16,1,.3,1);
    --transition-fast: 150ms cubic-bezier(.16,1,.3,1);
    --transition-base: 280ms cubic-bezier(.16,1,.3,1);
    --transition-slow: 450ms cubic-bezier(.16,1,.3,1);

    /* ── Z-index ───────────────────────────────────────────── */
    --z-header: 200;
}

/* ============================================================
   HEADER STICKY
   ============================================================ */
.main-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
}

/* ============================================================
   RESET BASE PREMIUM
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-main);
    background: var(--bg-page);
    color: var(--dark);
    line-height: 1.65;
    min-height: 100vh;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    line-height: 1;
    font-weight: 700;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; }

a, button, [role="button"], label[for], summary {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2.5px solid var(--primary-400);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Contenedor ──────────────────────────────────────────── */
.container {
    width: min(var(--container), 92%);
    margin: 0 auto;
}

/* ============================================================
   HEADER PREMIUM — compartido en todas las páginas
   ============================================================ */
.site-header,
.catalog-header-main {
    position: sticky;
    top: 0;
    z-index: 200;
    background: linear-gradient(160deg, var(--primary-700) 0%, var(--primary-500) 60%, var(--primary-400) 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 4px 24px rgba(7,25,41,.28), 0 1px 0 rgba(255,255,255,.06) inset;
    backdrop-filter: blur(12px);
}

.header-inner {
    width: min(1280px, 92%);
    margin: 0 auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ============================================================
   LOGO PREMIUM
   ============================================================ */
.logo,
.brand-logo,
.register-logo,
.login-logo,
.customer-panel-brand {
    font-family: var(--font-display);
    font-size: 1.95rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: .02em;
    line-height: 1;
    transition: opacity var(--t-fast);
}

.logo span,
.brand-logo span,
.register-logo span,
.login-logo span,
.customer-panel-brand span {
    color: var(--accent);
    text-shadow: 0 0 24px rgba(255,122,0,.40);
}

.logo:hover,
.brand-logo:hover { opacity: .88; }

/* ============================================================
   NAV PILLS
   ============================================================ */
.top-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.top-nav a {
    color: rgba(255,255,255,.78);
    font-weight: 600;
    font-size: .85rem;
    padding: 7px 16px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    letter-spacing: .02em;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.top-nav a:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.10);
}

/* ============================================================
   BOTÓN PRIMARY PREMIUM (naranja)
   ============================================================ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 28px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent) 0%, #FF9020 100%);
    color: #fff;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--shadow-accent);
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%);
    pointer-events: none;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(255,122,0,.38);
    filter: brightness(1.05);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-accent);
}

.btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Variante azul ───────────────────────────────────────── */
.btn-primary-blue {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 100%);
    box-shadow: var(--shadow-blue);
}
.btn-primary-blue:hover:not(:disabled) {
    box-shadow: var(--shadow-blue-lg);
}

/* ============================================================
   ANIMACIONES PREMIUM
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,122,0,.3); }
    50%       { box-shadow: 0 0 0 8px rgba(255,122,0,.0); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ── Reveal on scroll ────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Utilitarios ─────────────────────────────────────────── */
.is-hidden, .hidden { display: none !important; }

.glass {
    background: rgba(255,255,255,.70);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255,255,255,.40);
}

.badge-new {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-400));
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.badge-sale {
    background: linear-gradient(135deg, var(--accent), #FF9020);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   LANGUAGE SWITCHER — applies to all pages via theme.css
   ============================================================ */

/* Floating dropdown container */
.language-switcher {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1200;
}

/* Inline (header nav) container */
.language-switcher.is-inline {
    position: relative;
    z-index: 300;
    margin-left: 8px;
}

/* Toggle button — only shown in floating mode */
.language-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 13px;
    min-height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(31, 99, 164, .18);
    background: rgba(255, 255, 255, .96);
    color: var(--dark, #102A43);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 16px rgba(7, 25, 41, .13);
    backdrop-filter: blur(12px);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.language-switcher-toggle:hover {
    border-color: rgba(31, 99, 164, .38);
    box-shadow: 0 6px 20px rgba(7, 25, 41, .18);
}

/* Caret icon inside toggle */
.language-switcher-caret {
    width: 10px;
    height: 6px;
    flex-shrink: 0;
    transition: transform 200ms ease;
}

.language-switcher.is-open .language-switcher-caret {
    transform: rotate(180deg);
}

/* Dropdown panel — floats above the toggle */
.language-switcher-options {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 100%;
    background: rgba(255, 255, 255, .99);
    border: 1px solid rgba(31, 99, 164, .14);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(7, 25, 41, .15);
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.language-switcher.is-open .language-switcher-options {
    display: flex;
    animation: lsDropIn 180ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes lsDropIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Inline mode: dropdown opens downward */
.language-switcher.is-inline .language-switcher-options {
    top: calc(100% + 8px);
    bottom: auto;
    left: auto;
    right: 0;
}

/* Links inside floating dropdown */
.language-switcher-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--dark, #102A43);
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 150ms ease, color 150ms ease;
}

.language-switcher-link:hover {
    background: var(--primary-100, #D0E5F5);
    color: var(--primary-700, #0f3560);
}

.language-switcher-link.is-active {
    background: var(--primary-50, #EBF3FB);
    color: var(--primary-600, #174e83);
    pointer-events: none;
}

/* Toggle in inline mode matches header style */
.language-switcher.is-inline .language-switcher-toggle {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .92);
    box-shadow: none;
    backdrop-filter: none;
    min-height: 32px;
    padding: 0 11px;
    font-size: 0.76rem;
}

.language-switcher.is-inline .language-switcher-toggle:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    box-shadow: none;
}

/* Overrides for catalog topbar / top-nav (light bg context) */
.catalog-topbar-links .language-switcher.is-inline .language-switcher-toggle,
.top-nav .language-switcher.is-inline .language-switcher-toggle {
    background: rgba(31, 99, 164, .08);
    border-color: rgba(31, 99, 164, .18);
    color: var(--dark, #102A43);
}

.catalog-topbar-links .language-switcher.is-inline .language-switcher-toggle:hover,
.top-nav .language-switcher.is-inline .language-switcher-toggle:hover {
    background: rgba(31, 99, 164, .15);
    border-color: rgba(31, 99, 164, .3);
    box-shadow: none;
}

@media (max-width: 640px) {
    .language-switcher        { left: 12px; bottom: 12px; }
    .language-switcher.is-inline { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .language-switcher-toggle,
    .language-switcher-link   { transition: none; }
    .language-switcher-caret  { transition: none; }
    .language-switcher.is-open .language-switcher-options { animation: none; }
}