:root {
      --terracotta: #9C3D18;
      --terracotta-dark: #7A2E10;
      --chocolate: #472814;
      --sun: #F39200;
      --sun-light: #FEF3C7;
      --teal: #3B7A7A;
      --teal-light: #EBF5F5;
      --intl-blue: #0284C7;
      --hotmart: #F04E23;
      --paypal: #0070BA;
      --rose-light: #FDF2F4;
      --rose-border: #E2B6BF;
      --cream-box: #F7F2E7;
      --live-red: #E11D48;
      --green: #16A34A;
      --purple: #7C3AED;
      --bg: #FFFBF5;
      --card: #FFFFFF;
      --text: #2D1A0E;
      --muted: #785A46;
      --border: #EFE2CE;
      --radius: 18px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Nunito', sans-serif; }
    body { background: var(--bg); color: var(--text); padding-bottom: 100px; }
    button, a, input, select, textarea { pointer-events: auto; }

    /* BARRA DE ADMINISTRADORA */
    .admin-bar {
      background: var(--chocolate);
      color: #fff;
      padding: 10px 16px;
      font-size: 0.82rem;
      border-bottom: 3px solid var(--sun);
      position: relative;
      z-index: 50;
    }
    .admin-bar-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .wa-quick-box {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255,255,255,0.12);
      padding: 5px 10px;
      border-radius: 10px;
      flex-wrap: wrap;
    }
    .wa-quick-box input {
      padding: 6px 10px;
      border-radius: 7px;
      border: 1.5px solid var(--sun);
      font-weight: 900;
      font-size: 0.85rem;
      width: 145px;
      color: var(--chocolate);
    }
    .admin-quick-btn {
      background: #fff;
      color: var(--chocolate);
      border: none;
      padding: 7px 12px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 0.78rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
    .admin-quick-btn:hover { opacity: 0.92; }
    .admin-quick-btn.sun-btn { background: var(--sun); color: #fff; }
    .admin-quick-btn.green-btn { background: #22c55e; color: #fff; }

    /* HEADER PRINCIPAL */
    header {
      background: linear-gradient(135deg, #FFFDF9 0%, #FFF5E4 100%);
      color: var(--chocolate);
      padding: 14px 16px;
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 2px solid var(--border);
      box-shadow: 0 4px 15px rgba(71, 40, 20, 0.06);
    }
    .header-top {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .brand-wrap { display: flex; align-items: center; gap: 12px; }
    .brand-logo {
      width: 68px;
      height: 68px;
      object-fit: contain;
      border-radius: 14px;
      background: #fff;
      padding: 4px;
      border: 2px solid var(--border);
      cursor: pointer;
    }
    .brand-title { font-size: 1.4rem; font-weight: 900; color: var(--terracotta); line-height: 1.1; }
    .brand-sub { font-size: 0.79rem; color: var(--chocolate); font-weight: 700; margin-top: 2px; }
    .wa-header-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #dcfce7;
      color: #166534;
      font-weight: 800;
      font-size: 0.76rem;
      padding: 3px 10px;
      border-radius: 999px;
      margin-top: 4px;
      border: 1px solid #86efac;
    }

    .cart-btn {
      background: var(--terracotta);
      color: #fff;
      border: none;
      padding: 11px 18px;
      border-radius: 999px;
      font-weight: 900;
      font-size: 0.92rem;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(156, 61, 24, 0.28);
    }
    .cart-count {
      background: var(--sun);
      color: #fff;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 0.8rem;
    }

    /* PESTAÑAS CATALOGO VS LIVE */
    .mode-tabs {
      max-width: 1080px;
      margin: 12px auto 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: #F3E5D8;
      padding: 5px;
      border-radius: 14px;
      gap: 6px;
    }
    .mode-tab {
      border: none;
      background: transparent;
      color: var(--chocolate);
      padding: 9px;
      border-radius: 10px;
      font-weight: 900;
      font-size: 0.9rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .mode-tab.active {
      background: var(--terracotta);
      color: #fff;
      box-shadow: 0 2px 8px rgba(156, 61, 24, 0.25);
    }
    .live-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #ff2a55;
      display: inline-block;
      animation: pulse 1.2s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,42,85,0.7); }
      70% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255,42,85,0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255,42,85,0); }
    }

    main { max-width: 1080px; margin: 0 auto; padding: 16px; position: relative; z-index: 10; }

    /* BARRA DE BUSQUEDA CON LUPA + FILTROS */
    .search-and-filters {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 18px;
    }
    .search-box-wrap { position: relative; width: 100%; }
    .search-box-wrap .search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.1rem;
      color: var(--muted);
      pointer-events: none;
    }
    .search-input {
      width: 100%;
      padding: 13px 42px 13px 46px;
      border-radius: 999px;
      border: 2px solid var(--border);
      background: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--chocolate);
      box-shadow: 0 3px 10px rgba(71, 40, 20, 0.05);
    }
    .search-input:focus {
      outline: none;
      border-color: var(--terracotta);
    }
    .clear-search-btn {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: #F3E5D8;
      border: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      font-weight: 900;
      color: var(--chocolate);
      cursor: pointer;
      display: none;
    }

    .filter-bar {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 4px;
    }
    .cat-pill {
      border: 2px solid var(--border);
      background: #fff;
      color: var(--chocolate);
      padding: 8px 16px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 0.85rem;
      white-space: nowrap;
      cursor: pointer;
    }
    .cat-pill.active {
      background: var(--chocolate);
      color: #fff;
      border-color: var(--chocolate);
    }
    .cat-pill.intl-pill.active {
      background: var(--intl-blue);
      border-color: var(--intl-blue);
      color: #fff;
    }

    /* BANNERS */
    .intl-hero {
      background: linear-gradient(135deg, #0369A1 0%, #0284C7 100%);
      color: #fff;
      padding: 16px;
      border-radius: var(--radius);
      margin-bottom: 16px;
      display: none;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      border: 2px solid #7DD3FC;
    }
    .intl-hero h2 { font-size: 1.05rem; font-weight: 900; }
    .intl-hero p { font-size: 0.84rem; margin-top: 4px; }
    .intl-badge-box {
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.35);
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 0.79rem;
      font-weight: 800;
      color: #E0F2FE;
    }

    .live-hero {
      background: linear-gradient(135deg, var(--chocolate) 0%, var(--terracotta) 100%);
      color: #fff;
      padding: 16px;
      border-radius: var(--radius);
      margin-bottom: 16px;
      display: none;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      border: 2px solid var(--sun);
    }
    .live-hero h2 { font-size: 1.05rem; font-weight: 900; display: flex; align-items: center; gap: 8px; }
    .live-hero p { font-size: 0.83rem; margin-top: 4px; }
    .timer-rule-badge {
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.35);
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 0.79rem;
      font-weight: 800;
      color: #FDE68A;
    }

    /* GRILLA DE PRODUCTOS */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }
    @media (min-width: 640px) {
      .grid { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 20px; }
    }
    .card {
      background: var(--card);
      border-radius: var(--radius);
      overflow: hidden;
      border: 2px solid var(--border);
      display: flex;
      flex-direction: column;
      box-shadow: 0 6px 16px rgba(71, 40, 20, 0.06);
      position: relative;
    }
    .card-img-wrap {
      position: relative;
      width: 100%;
      padding-top: 90%;
      background: #FDF6EC;
      overflow: hidden;
    }
    .card-img-wrap img {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }
    .badge-cat {
      position: absolute;
      top: 8px;
      left: 8px;
      background: rgba(71, 40, 20, 0.86);
      color: #fff;
      font-size: 0.69rem;
      font-weight: 800;
      padding: 4px 9px;
      border-radius: 999px;
      pointer-events: none;
    }
    .badge-cat.intl-cat { background: var(--intl-blue); }
    .badge-pages {
      position: absolute;
      bottom: 8px;
      left: 8px;
      background: rgba(255,255,255,0.94);
      color: var(--chocolate);
      font-size: 0.7rem;
      font-weight: 900;
      padding: 4px 9px;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      cursor: pointer;
      z-index: 4;
    }
    .badge-stock {
      position: absolute;
      bottom: 8px;
      right: 8px;
      font-size: 0.7rem;
      font-weight: 800;
      padding: 4px 9px;
      border-radius: 999px;
      pointer-events: none;
    }
    .stock-ok { background: #dcfce7; color: #166534; }
    .stock-reserved { background: #fef3c7; color: #92400e; }
    .stock-out { background: #fee2e2; color: #991b1b; }
    .stock-instant { background: #E0F2FE; color: #0369A1; }

    .replace-photo-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: var(--sun);
      color: #fff;
      border: 2px solid #fff;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 0.7rem;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 3px 8px rgba(0,0,0,0.25);
      z-index: 5;
    }

    .card-body {
      padding: 13px;
      display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: space-between;
      gap: 10px;
    }
    .card-title {
      font-size: 0.98rem;
      font-weight: 900;
      line-height: 1.25;
      color: var(--chocolate);
      cursor: pointer;
    }
    .card-mini-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 6px;
    }
    .mini-spec-pill {
      font-size: 0.7rem;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 6px;
      background: #F6EFE6;
      color: var(--muted);
    }
    .card-price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .card-price { font-size: 1.18rem; font-weight: 900; color: var(--terracotta); }
    .card-price-usd { font-size: 1.15rem; font-weight: 900; color: var(--intl-blue); }
    .card-price-sub { font-size: 0.72rem; color: var(--muted); font-weight: 800; display: block; }
    .btn-ver-libro {
      background: var(--teal-light);
      color: var(--teal);
      border: 1px solid #B7DCDC;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 900;
      cursor: pointer;
    }

    .btn-action {
      width: 100%;
      border: none;
      padding: 10px 12px;
      border-radius: 11px;
      font-weight: 900;
      font-size: 0.84rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
    }
    .btn-add { background: var(--teal); color: #fff; }
    .btn-hotmart {
      background: linear-gradient(135deg, #F04E23 0%, #D83B11 100%);
      color: #fff;
    }
    .btn-paypal {
      background: linear-gradient(135deg, #0070BA 0%, #005EA6 100%);
      color: #fff;
      margin-top: 5px;
    }
    .btn-live-buy {
      background: linear-gradient(135deg, #E11D48 0%, #BE123C 100%);
      color: #fff;
    }
    .btn-reserved { background: #FEF3C7; color: #92400E; border: 1px dashed #F59E0B; }
    .btn-sold { background: #E2E8F0; color: #64748B; cursor: not-allowed; }

    .inline-qty-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: var(--teal-light);
      border: 2px solid var(--teal);
      border-radius: 11px;
      padding: 5px 8px;
    }
    .inline-qty-box button {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: none;
      background: var(--teal);
      color: #fff;
      font-weight: 900;
      font-size: 1rem;
      cursor: pointer;
    }
    .inline-qty-box span {
      font-weight: 900;
      font-size: 0.88rem;
      color: var(--teal);
    }

    .card-admin-tools {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 4px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed var(--border);
    }
    .card-admin-tools button {
      background: #FDF6EC;
      border: 1px solid var(--border);
      color: var(--chocolate);
      padding: 5px 3px;
      border-radius: 8px;
      font-size: 0.69rem;
      font-weight: 800;
      cursor: pointer;
    }

    .add-product-card {
      background: #FFFBEB;
      border: 3px dashed var(--sun);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 28px 16px;
      cursor: pointer;
      min-height: 320px;
      color: var(--chocolate);
    }
    .add-product-card .plus-circle {
      width: 60px; height: 60px; border-radius: 50%;
      background: var(--sun); color: #fff; font-size: 1.9rem; font-weight: 900;
      display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
    }

    /* MODALES */
    .overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(45, 26, 14, 0.62);
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }
    .overlay.open { display: flex; }

    .product-sheet {
      background: #FAFDFD;
      width: 100%;
      max-width: 560px;
      max-height: 92vh;
      border-radius: 24px;
      overflow-y: auto;
      position: relative;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 50px rgba(0,0,0,0.3);
      border: 1px solid #E2ECEC;
    }
    .sheet-close-floating {
      position: sticky;
      top: 12px;
      align-self: flex-end;
      margin: 12px 14px -42px 0;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #E5E7EB;
      font-size: 1.1rem;
      color: #374151;
      cursor: pointer;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }
    .sheet-body { padding: 20px 20px 96px; }

    .book-viewer-area { text-align: center; margin-bottom: 18px; }
    .book-main-stage {
      position: relative;
      max-width: 380px;
      margin: 0 auto;
      background: #fff;
      border-radius: 16px;
      padding: 8px;
      box-shadow: 0 10px 25px rgba(71, 40, 20, 0.12), 0 4px 0 #E6D5B8;
      border: 1px solid #EFE2CE;
    }
    .book-main-stage img {
      width: 100%;
      max-height: 310px;
      object-fit: cover;
      border-radius: 11px;
      display: block;
    }
    .page-nav-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid #E5E7EB;
      box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      font-weight: 900;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--chocolate);
    }
    .page-nav-arrow.prev { left: -12px; }
    .page-nav-arrow.next { right: -12px; }

    .page-counter-text { font-size: 0.8rem; font-weight: 800; color: var(--muted); margin: 10px 0; }
    .viewer-mode-pills { display: inline-flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
    .viewer-pill-btn {
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 800;
      cursor: pointer;
      border: 1.5px solid #D1DFDF;
      background: #fff;
      color: #4B5563;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .viewer-pill-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }

    .all-pages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 10px;
      margin-top: 12px;
      max-height: 290px;
      overflow-y: auto;
      padding: 6px;
    }
    .page-thumb-item {
      border: 2px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      background: #fff;
    }
    .page-thumb-item.active { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
    .page-thumb-item img { width: 100%; height: 90px; object-fit: cover; display: block; }
    .page-thumb-num { font-size: 0.68rem; font-weight: 800; padding: 3px; background: #FAF5EE; color: var(--chocolate); }

    .sheet-product-title { font-size: 1.35rem; font-weight: 900; color: #1F2937; margin: 14px 0 12px; }
    .specs-3-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 18px;
    }
    .spec-box {
      padding: 10px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1.5px solid transparent;
    }
    .spec-box.age-box { background: var(--teal-light); border-color: #84BDBD; }
    .spec-box.pages-box { background: var(--rose-light); border-color: var(--rose-border); }
    .spec-box.mat-box { background: var(--cream-box); border-color: #E5DEC9; }
    .spec-icon { font-size: 1.35rem; line-height: 1; }
    .spec-label { font-size: 0.63rem; font-weight: 800; color: #6B7280; text-transform: uppercase; }
    .spec-val { font-size: 0.85rem; font-weight: 900; color: #1F2937; margin-top: 1px; }

    .dashed-divider {
      height: 10px;
      background-image: repeating-linear-gradient(to right, #CBE0E0 0, #CBE0E0 8px, transparent 8px, transparent 16px);
      margin: 16px 0;
    }

    .cursive-subtitle {
      font-family: 'Caveat', cursive;
      font-size: 1.65rem;
      color: var(--terracotta);
      margin-bottom: 6px;
      font-weight: 700;
    }
    .sheet-desc-text {
      font-size: 0.92rem;
      color: #4B5563;
      line-height: 1.55;
      white-space: pre-line;
      margin-bottom: 18px;
    }

    .intl-checkout-box {
      background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
      border: 2px solid #7DD3FC;
      border-radius: 16px;
      padding: 14px;
      margin-bottom: 18px;
    }

    .product-video-Showcase {
      background: linear-gradient(135deg, #EBF5F5 0%, #F9F5F0 100%);
      border-radius: 18px;
      padding: 18px;
      text-align: center;
      border: 1.5px solid #D8E8E8;
    }

    .sheet-sticky-footer {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff;
      border-top: 1.5px solid #E5E7EB;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      z-index: 25;
      flex-wrap: wrap;
    }
    .sheet-footer-price { font-size: 1.3rem; font-weight: 900; color: var(--terracotta); }
    .sheet-footer-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .btn-wa-outline {
      background: #fff;
      color: #1F2937;
      border: 1.5px solid #D1D5DB;
      padding: 10px 14px;
      border-radius: 12px;
      font-weight: 800;
      font-size: 0.85rem;
      cursor: pointer;
    }
    .btn-sheet-add {
      background: var(--teal);
      color: #fff;
      border: none;
      padding: 11px 18px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 0.9rem;
      cursor: pointer;
    }

    /* CARRITO EN 4 PASOS */
    .drawer {
      background: #fff;
      width: 100%;
      max-width: 480px;
      max-height: 92vh;
      border-radius: 22px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      position: relative;
      border: 1px solid var(--border);
      box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    }
    .drawer-top-gradient {
      background: linear-gradient(135deg, #E8F4F4 0%, #FDF2F4 100%);
      padding: 18px 20px 14px;
      border-bottom: 1px solid #E5E7EB;
    }
    .drawer-header { display: flex; align-items: center; justify-content: space-between; }
    .drawer-header h3 { font-size: 1.3rem; font-weight: 900; color: #1F2937; }
    .close-btn {
      background: #fff;
      border: 1px solid #E5E7EB;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-weight: 900;
      cursor: pointer;
      color: #374151;
    }
    .steps-bar-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin: 12px 0 6px;
    }
    .step-segment { height: 4px; border-radius: 999px; background: #D1D5DB; }
    .step-segment.active { background: var(--teal); }
    .step-label-text {
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.06em;
      color: var(--teal);
      text-transform: uppercase;
    }

    .drawer-content-body { padding: 16px 20px; flex: 1; overflow-y: auto; }
    .cart-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px dashed #E5E7EB;
    }
    .cart-item img { width: 58px; height: 58px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); }
    .cart-item-info { flex: 1; }
    .cart-item-title { font-weight: 800; font-size: 0.92rem; color: #1F2937; margin-bottom: 6px; }
    .qty-controls { display: inline-flex; align-items: center; gap: 8px; }
    .qty-btn {
      width: 28px; height: 28px; border-radius: 8px;
      border: 1px solid #E5E7EB;
      background: #F9FAFB;
      font-weight: 900;
      cursor: pointer;
    }

    .drawer-summary-footer {
      background: #F9F6F0;
      padding: 16px 20px;
      border-top: 1px solid #EBE3D5;
    }
    .sum-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.88rem;
      color: #6B7280;
      margin-bottom: 6px;
      font-weight: 700;
    }
    .sum-row.total-row { font-size: 1.08rem; font-weight: 900; color: #111827; margin: 8px 0; }
    .anticipo-highlight-box {
      background: #FDF2F4;
      border: 1px solid #F5D0D8;
      padding: 10px 14px;
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 900;
      color: #9D2B42;
      font-size: 0.92rem;
      margin: 8px 0;
    }
    .btn-continue-teal {
      width: 100%;
      background: var(--teal);
      color: #fff;
      border: none;
      padding: 14px;
      border-radius: 14px;
      font-size: 0.96rem;
      font-weight: 900;
      cursor: pointer;
      margin-top: 8px;
    }

    .pay-choice-card {
      border: 2px solid var(--border);
      border-radius: 14px;
      padding: 13px;
      margin-bottom: 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
    }
    .pay-choice-card.selected { border-color: var(--teal); background: var(--teal-light); }

    .form-group { margin-bottom: 12px; }
    .form-group label { display: block; font-size: 0.8rem; font-weight: 800; margin-bottom: 4px; color: var(--chocolate); }
    .form-control {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--chocolate);
    }
    textarea.form-control { resize: vertical; min-height: 80px; }

    .upload-btn-big {
      width: 100%;
      background: #FFFBEB;
      border: 2px dashed var(--terracotta);
      color: var(--terracotta);
      padding: 11px;
      border-radius: 12px;
      font-weight: 900;
      font-size: 0.84rem;
      cursor: pointer;
      text-align: center;
      display: block;
    }

    .countdown-banner {
      background: #FFFBEB;
      border: 2px solid var(--sun);
      color: #92400E;
      padding: 10px;
      border-radius: 12px;
      margin-bottom: 12px;
      text-align: center;
      font-size: 0.82rem;
      font-weight: 800;
    }
    .countdown-time { font-size: 1.3rem; font-weight: 900; color: #DC2626; display: block; }

    #cartToast {
      position: fixed;
      bottom: 22px;
      right: 22px;
      background: var(--chocolate);
      color: #fff;
      padding: 12px 18px;
      border-radius: 14px;
      font-weight: 800;
      font-size: 0.86rem;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
      z-index: 200;
      display: none;
      align-items: center;
      gap: 10px;
      border: 2px solid var(--sun);
    }

    footer {
      text-align: center;
      padding: 26px 16px;
      color: var(--muted);
      font-size: 0.84rem;
      border-top: 2px solid var(--border);
      margin-top: 30px;
      background: #FFFDF9;
    }
  
/* Firebase & improvements */
.admin-access-btn{border:1px solid var(--border); background:#fff; color:var(--terracotta); border-radius:999px;padding:9px 11px; cursor:pointer;font-size:.76rem;font-weight:900}
.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.help-note{font-size:.78rem;color:var(--muted);line-height:1.5;margin:5px 0 12px}
.check-row{display:flex;gap:14px;flex-wrap:wrap;background:#f7f2e7;padding:10px;border-radius:10px;margin-bottom:12px;font-size:.8rem;font-weight:800}
.check-row input{accent-color:var(--terracotta)}
.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.four-col{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.orders-list{padding:10px 0;display:grid;gap:12px}
.order-item{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff}
.order-item h4{color:var(--terracotta);font-size:1rem;margin-bottom:8px}
.order-item p{font-size:.83rem;line-height:1.5;color:var(--chocolate)}
.order-item button{cursor:pointer;margin:5px 4px 0 0;border:1px solid var(--border);background:var(--teal-light);padding:7px;border-radius:9px;font-weight:800;color:var(--teal)}
.admin-bar-inner{gap:8px}
.admin-bar{position:relative!important}
.warn-box{background:#fffbeb;border:1px solid #fbbf24;padding:12px;border-radius:12px;line-height:1.5;color:#92400e;font-size:.84rem}
.empty-catalog{grid-column:1/-1;text-align:center;padding:50px 20px;border-radius:20px;background:#fff;border:2px dashed var(--border);color:var(--chocolate);font-weight:800}
input,button,textarea,select{max-width:100%}
#adminAccessBtn{white-space:nowrap}
@media(max-width:600px){.header-top{gap:7px}.brand-logo{width:49px;height:49px}.brand-title{font-size:1.15rem}.header-actions{width:100%;justify-content:space-between}.cart-btn{padding:10px 14px}.three-col{grid-template-columns:repeat(2,minmax(0,1fr))}.four-col{grid-template-columns:repeat(2,minmax(0,1fr))}.specs-3-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.spec-box{flex-direction:column;text-align:center;gap:4px;padding:7px 3px}.sheet-body{padding:18px 14px 80px}.admin-quick-btn{font-size:.73rem}}


/* Versión 3: portada editable similar a la ilustración original del catálogo */
.home-hero{max-width:1160px;margin:0 auto;padding:54px 24px 42px;min-height:505px;display:grid;grid-template-columns:1.06fr .94fr;align-items:center;gap:35px;background:#faf8f3;color:#392d25}
.home-hero-copy{min-width:0}.home-eyebrow{display:block;font-weight:900;color:#b85f39;font-size:11px;letter-spacing:.17em;margin:0 0 21px}
.home-hero h1{font-weight:900;font-size:clamp(38px,5vw,64px);line-height:1.12;letter-spacing:-.055em;margin:0 0 25px;color:#392d25}
.home-hero h1 em{display:block;font-style:normal;color:#d3834b;overflow-wrap:anywhere}
.home-hero p{font-size:15px;line-height:1.86;color:#73695d;max-width:535px;margin:0}
.home-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
.home-btn{border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:13px;font-weight:900;font-size:13px}
.home-btn-primary{background:#b95b35;color:#fff}.home-btn-secondary{background:#fff8ec;color:#805034;border-color:#ead6c4}
.home-hero-facts{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;color:#8b7b6d;font-size:11px;font-weight:800}
.home-hero-art{height:390px;border-radius:44% 47% 41% 48%;background:radial-gradient(circle at 65% 20%,#ffefcb,#f6dcae 65%,#f2ceb0);overflow:hidden;position:relative}
.home-uploaded-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:2}
.home-default-art{height:100%;width:100%;position:absolute;inset:0}
.home-sheet{position:absolute;background:#fff;box-shadow:0 20px 35px #8f533532;border-radius:17px;border:7px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.home-sheet.one{height:260px;width:190px;top:56px;left:24%;transform:rotate(-12deg);background:#e7f5ed}.home-sheet.one b{font-size:45px;color:#579e88;font-weight:900}.home-sheet.one span{font-size:29px}.home-sheet.one small{font-size:22px;font-weight:900;color:#cb7b4a}
.home-sheet.two{height:230px;width:185px;top:105px;left:54%;transform:rotate(13deg);background:#fff4e5}.home-sheet.two span{font-size:42px;font-weight:900;color:#d98b43}.home-sheet.two b{font-size:25px}
.home-floating-heart,.home-floating-star{position:absolute;font-size:35px}.home-floating-heart{top:36px;left:16%}.home-floating-star{bottom:37px;left:12%;color:#bc7454}
.home-sticker{position:absolute;bottom:22px;right:15px;background:#fff;color:#654c3b;transform:rotate(-5deg);border-radius:20px;padding:13px 18px;font-size:13px;text-align:center;box-shadow:0 10px 23px #8f53352a;font-weight:800;max-width:180px}.home-sticker strong{font-size:17px}
.home-edit-inline{margin-top:18px;background:#fff;border:1px dashed #ba6838;padding:9px 12px;border-radius:10px;font-size:13px;color:#9C3D18;font-weight:900;cursor:pointer}
.products-anchor{scroll-margin-top:155px}.how-to-buy{padding:28px 22px;margin-top:40px;border:1px solid var(--border);border-radius:20px;background:#fff9ed}.how-to-buy h2{font-size:22px;margin-bottom:8px}.how-to-buy p{font-size:14px;line-height:1.7;color:var(--muted)}
.live-price-edit{border-radius:13px;background:#fff0f3;border:1px solid #f3b6c1;padding:12px;margin:12px 0}.live-label{display:block;font-size:13px;font-weight:900;color:#9d2540;margin:0 0 9px}.live-global-control{border:2px dashed #e11d48;padding:12px;border-radius:13px;margin:14px 0;background:#fff1f2}
.old-price{font-size:12px;color:#8d7c7c;text-decoration:line-through;font-weight:800}.live-discount{font-size:11px;color:#be123c;font-weight:900;padding:3px 6px;border-radius:7px;background:#ffe4e6;margin-left:5px}
.live-closed{background:#fff6ea;border:2px dashed #edc38d;border-radius:18px;color:#67462b;padding:26px;text-align:center;margin:18px 0 24px;font-size:15px;font-weight:900;line-height:1.8}.live-closed a{color:#a34d30}
@media(max-width:760px){.home-hero{grid-template-columns:1fr;min-height:0;padding:32px 17px 28px;gap:24px}.home-hero h1{font-size:clamp(34px,9vw,49px)}.home-hero-art{height:290px;max-width:490px;width:100%;margin:auto}.home-sheet.one{transform:scale(.75) rotate(-12deg);transform-origin:top left;left:24%;top:39px}.home-sheet.two{transform:scale(.75) rotate(13deg);transform-origin:top left;left:55%;top:69px}.home-sticker{bottom:10px;right:7px;padding:8px 10px}.home-hero-facts{gap:8px}}