/* ─── RESET & BASE ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: 'Montserrat', sans-serif; color: #393737; background: #FAFAF9; overflow-x: hidden; }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }
    button { border: none; background: none; cursor: pointer; font-family: inherit; }
    input, select, textarea { font-family: inherit; }

    /* ─── CSS VARIABLES ─── */
    :root {
      --gold-dark: #c9a227;
      --gold-mid:  #d4aa2e;
      --gold-light: #e8d48b;
      --gold-gradient: linear-gradient(135deg, #c9a227, #e8d48b, #c9a227);
      --charcoal: #393737;
      --silver: #C4CBCA;
      --pink-soft: #FADFE9;
      --cream: #F0E9E9;
      --white: #FFFFFF;
      --bg: #FAFAF9;
      --error: #c0392b;
      --success: #27ae60;
    }

    /* ─── UTILITIES ─── */
    .gold-divider { height: 1px; background: linear-gradient(90deg, transparent, #c9a227, #e8d48b, #c9a227, transparent); border: none; margin: 0; }

    /* ─── ANNOUNCEMENT BAR ─── */
    .announcement-bar {
      background: var(--charcoal); color: rgba(255,255,255,0.9);
      padding: 0; font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.08em; z-index: 1000;
      border-bottom: 1px solid rgba(201,162,39,0.4);
      height: 40px; display: flex; align-items: center;
    }
    .announcement-track { display: flex; align-items: center; height: 100%; width: 100%; }
    .announcement-slide { display: none; width: 100%; text-align: center; padding: 0 20px; animation: fadeSlide 0.5s ease; }
    .announcement-slide.active { display: flex; align-items: center; justify-content: center; gap: 8px; }
    @keyframes fadeSlide { from { opacity: 0; } to { opacity: 1; } }
    .announcement-slide a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
    .ann-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-dark); flex-shrink: 0; }

    /* ─── NAVBAR ─── */
    /* WooCommerce: en checkout usar header simplificado (sin menú de navegación) — distraction-free checkout */
    .navbar {
      position: sticky; top: 0; z-index: 999;
      background: rgba(255,255,255,0.97); backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(201,162,39,0.18);
      box-shadow: 0 1px 12px rgba(57,55,55,0.07);
    }
    .nav-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 40px;
      height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
    }
    .nav-logo img { height: 40px; width: auto; }
    .nav-secure {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: #888;
    }
    .nav-secure svg { width: 16px; height: 16px; stroke: var(--success); fill: none; stroke-width: 2; }
    .nav-back-link {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.72rem; font-weight: 600; color: #888;
      letter-spacing: 0.06em; text-transform: uppercase;
      transition: color 0.2s;
    }
    .nav-back-link:hover { color: var(--charcoal); }
    .nav-back-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
    .nav-hamburger { display: none; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; }
    .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--charcoal); }

    /* ─── PROGRESS BAR ─── */
    /* WooCommerce: hook woocommerce_checkout_before_customer_details */
    .checkout-progress {
      background: white; border-bottom: 1px solid #eee;
      padding: 16px 40px;
    }
    .progress-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; gap: 0;
    }
    .progress-step {
      display: flex; align-items: center; gap: 10px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: #bbb;
      flex: 1;
    }
    .progress-step.done { color: var(--charcoal); }
    .progress-step.active { color: var(--gold-dark); }
    .step-num {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem; font-weight: 700;
      border: 1.5px solid #ccc; color: #bbb;
    }
    .progress-step.done .step-num {
      background: var(--charcoal); border-color: var(--charcoal);
      color: white;
    }
    .progress-step.active .step-num {
      background: var(--gold-gradient); border-color: var(--gold-dark);
      color: var(--charcoal);
    }
    .step-line {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, var(--charcoal) 0%, #ddd 100%);
      margin: 0 12px;
    }
    .step-line.inactive { background: #ddd; }
    @media (max-width: 600px) {
      .checkout-progress { padding: 14px 20px; }
      .progress-step span { display: none; }
      .step-num { font-size: 0.6rem; }
    }

    /* ─── MAIN LAYOUT ─── */
    .checkout-main {
      max-width: 1200px; margin: 0 auto;
      padding: 48px 40px 80px;
      display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start;
    }
    @media (max-width: 960px) {
      .checkout-main { grid-template-columns: 1fr; padding: 32px 24px 60px; gap: 32px; }
    }
    @media (max-width: 480px) {
      .checkout-main { padding: 20px 16px 48px; }
    }

    /* ─── FORM COLUMN ─── */
    .checkout-form-col { display: flex; flex-direction: column; gap: 28px; }

    /* ─── SECTION CARD ─── */
    .form-section {
      background: white;
      border: 1px solid #eee;
      padding: 28px 32px;
      position: relative;
    }
    .form-section-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.05rem; font-weight: 700; color: var(--charcoal);
      margin-bottom: 22px; padding-bottom: 14px;
      border-bottom: 1px solid #f0f0f0;
      display: flex; align-items: center; gap: 10px;
    }
    .form-section-title svg {
      width: 17px; height: 17px; stroke: var(--gold-dark);
      fill: none; stroke-width: 1.8; flex-shrink: 0;
    }
    .form-section-num {
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--gold-gradient); color: var(--charcoal);
      font-family: 'Montserrat', sans-serif;
      font-size: 0.62rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    @media (max-width: 480px) {
      .form-section { padding: 20px 16px; }
    }

    /* ─── FORM FIELDS ─── */
    /* WooCommerce: campos billing_* estándar de WooCommerce */
    .form-row { display: grid; gap: 16px; }
    .form-row.cols-2 { grid-template-columns: 1fr 1fr; }
    .form-row.cols-3 { grid-template-columns: 2fr 1fr 1fr; }
    @media (max-width: 600px) {
      .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
    }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-label {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--charcoal);
    }
    .form-label .required { color: var(--gold-dark); margin-left: 2px; }
    .form-label .optional {
      font-weight: 400; text-transform: none; letter-spacing: 0;
      font-size: 0.72rem; color: #aaa; margin-left: 4px;
    }
    .form-input {
      width: 100%; padding: 12px 14px;
      border: 1.5px solid #ddd;
      font-size: 0.88rem; color: var(--charcoal);
      background: white; outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      -webkit-appearance: none; appearance: none;
    }
    .form-input:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(201,162,39,0.1); }
    .form-input::placeholder { color: #bbb; }
    .form-input.error { border-color: var(--error); }
    .form-select {
      width: 100%; padding: 12px 36px 12px 14px;
      border: 1.5px solid #ddd;
      font-size: 0.88rem; color: var(--charcoal);
      background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
      outline: none; cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
      -webkit-appearance: none; appearance: none;
    }
    .form-select:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(201,162,39,0.1); }
    .form-textarea {
      width: 100%; padding: 12px 14px;
      border: 1.5px solid #ddd;
      font-size: 0.85rem; color: var(--charcoal);
      background: white; outline: none; resize: vertical; min-height: 90px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-textarea:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(201,162,39,0.1); }
    .form-helper { font-size: 0.72rem; color: #aaa; margin-top: 2px; }
    .form-error { font-size: 0.72rem; color: var(--error); display: none; }
    .form-error.visible { display: block; }

    /* ─── LOGIN NOTICE ─── */
    /* WooCommerce: woocommerce_before_checkout_form hook con is_user_logged_in() */
    .login-notice {
      background: var(--cream); padding: 16px 20px;
      border-left: 3px solid var(--gold-dark);
      display: flex; align-items: center; gap: 12px;
      font-size: 0.82rem; color: #555;
    }
    .login-notice svg { width: 18px; height: 18px; stroke: var(--gold-dark); fill: none; stroke-width: 1.8; flex-shrink: 0; }
    .login-notice a { color: var(--charcoal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

    /* ─── CHECKBOXES & RADIO ─── */
    .form-check {
      display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
      font-size: 0.82rem; color: #555; line-height: 1.5;
    }
    .form-check input[type="checkbox"] {
      width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
      accent-color: var(--gold-dark);
    }
    .form-check a { color: var(--charcoal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

    /* ─── STRIPE PAYMENT SECTION ─── */
    /* WooCommerce: WooCommerce Stripe plugin — gateway 'stripe' en payment_methods */
    .payment-method-tab {
      border: 1.5px solid var(--gold-dark); padding: 18px 20px;
      background: rgba(201,162,39,0.04); margin-bottom: 16px;
    }
    .payment-method-tab-header {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 16px;
    }
    .payment-radio {
      width: 18px; height: 18px; flex-shrink: 0;
      accent-color: var(--gold-dark);
    }
    .payment-label {
      font-size: 0.82rem; font-weight: 700; color: var(--charcoal);
      flex: 1;
    }
    .payment-cards {
      display: flex; align-items: center; gap: 6px; margin-left: auto;
    }
    .card-logo {
      height: 22px; width: auto;
      background: #f7f7f7; border: 1px solid #eee;
      padding: 2px 6px; border-radius: 3px;
      font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em;
      display: flex; align-items: center; color: #333;
    }
    .card-logo.visa { color: #1a1f71; }
    .card-logo.mc { color: #EB001B; }
    .card-logo.amex { color: #007BC1; }

    /* Stripe Elements placeholder — WooCommerce Stripe plugin monta los iframes aquí */
    .stripe-element-group { display: flex; flex-direction: column; gap: 12px; }
    .stripe-element-label {
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--charcoal); margin-bottom: 6px;
    }
    .stripe-element-field {
      /* WooCommerce Stripe: reemplazar este div con id="stripe-card-number-element" etc. */
      border: 1.5px solid #ddd; padding: 12px 14px;
      background: white; transition: border-color 0.2s;
      display: flex; align-items: center; gap: 10px; color: #888;
      font-size: 0.88rem;
    }
    .stripe-element-field svg { width: 18px; height: 18px; stroke: #bbb; fill: none; stroke-width: 1.5; flex-shrink: 0; }
    .stripe-element-field.focused { border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(201,162,39,0.1); }
    .stripe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .stripe-secure-note {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.7rem; color: #aaa; margin-top: 10px;
    }
    .stripe-secure-note svg { width: 14px; height: 14px; stroke: #aaa; fill: none; stroke-width: 2; }
    .stripe-logo { margin-left: auto; display: flex; align-items: center; gap: 4px; }
    .stripe-badge {
      font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em;
      color: #635BFF; background: rgba(99,91,255,0.08);
      padding: 2px 6px; border-radius: 3px;
    }

    /* ─── COUPON ─── */
    /* WooCommerce: apply_coupon action */
    .coupon-toggle {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--gold-dark);
      cursor: pointer; width: fit-content; margin-bottom: 0;
      background: none; border: none; padding: 0;
    }
    .coupon-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s; }
    .coupon-toggle.open svg { transform: rotate(45deg); }
    .coupon-form {
      display: none; margin-top: 12px;
      flex-direction: row; gap: 10px; align-items: flex-end;
    }
    .coupon-form.open { display: flex; }
    .coupon-form .form-input { flex: 1; }
    .coupon-apply {
      padding: 12px 22px; background: var(--charcoal); color: white;
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; white-space: nowrap;
      transition: background 0.2s;
    }
    .coupon-apply:hover { background: var(--gold-dark); }

    /* ─── ORDER SUMMARY COLUMN ─── */
    .checkout-summary-col { position: sticky; top: 88px; }
    .summary-card {
      background: white; border: 1px solid #eee;
      overflow: hidden;
    }
    .summary-header {
      background: var(--charcoal); padding: 18px 24px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .summary-header h3 {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em;
      text-transform: uppercase; color: white;
    }
    .summary-edit-link {
      font-size: 0.68rem; color: var(--gold-light);
      text-decoration: underline; text-underline-offset: 3px;
    }
    .summary-items { padding: 20px 24px; border-bottom: 1px solid #f0f0f0; }
    .summary-item {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 10px 0; border-bottom: 1px solid #f7f7f7;
    }
    .summary-item:last-child { border-bottom: none; }
    .summary-item-img {
      width: 60px; height: 72px; flex-shrink: 0; overflow: hidden;
      position: relative; background: var(--cream);
    }
    .summary-item-img img { width: 100%; height: 100%; object-fit: cover; }
    .summary-item-qty {
      position: absolute; top: -6px; right: -6px;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--charcoal); color: white;
      font-size: 0.58rem; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .summary-item-info { flex: 1; }
    .summary-item-name {
      font-size: 0.82rem; font-weight: 600; color: var(--charcoal);
      line-height: 1.35; margin-bottom: 4px;
    }
    .summary-item-meta {
      font-size: 0.7rem; color: #aaa; line-height: 1.5;
    }
    .summary-item-price {
      font-size: 0.88rem; font-weight: 700; color: var(--charcoal);
      white-space: nowrap; margin-left: auto; padding-left: 8px;
    }

    /* ─── TOTALS ─── */
    .summary-totals { padding: 20px 24px; }
    .totals-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 0; border-bottom: 1px solid #f7f7f7;
      font-size: 0.82rem; color: #555;
    }
    .totals-row:last-child { border-bottom: none; }
    .totals-row.shipping { color: var(--success); font-weight: 600; }
    .totals-row.discount { color: var(--success); }
    .totals-row.total {
      font-size: 1.05rem; font-weight: 700; color: var(--charcoal);
      padding-top: 14px; margin-top: 4px; border-top: 2px solid var(--charcoal);
      border-bottom: none;
    }
    .totals-row.total .total-note {
      font-size: 0.65rem; font-weight: 400; color: #aaa;
      display: block; margin-top: 2px;
    }
    .totals-label { font-size: inherit; }
    .totals-value { font-size: inherit; font-weight: 700; }
    .shipping-calc-link {
      font-size: 0.7rem; color: var(--gold-dark);
      text-decoration: underline; text-underline-offset: 3px;
      cursor: pointer;
    }

    /* ─── COUPON TAG ─── */
    .coupon-tag {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(39,174,96,0.08); border: 1px solid rgba(39,174,96,0.3);
      padding: 3px 10px; font-size: 0.68rem; font-weight: 700;
      color: var(--success); text-transform: uppercase; letter-spacing: 0.08em;
    }
    .coupon-remove { cursor: pointer; font-size: 1rem; color: #aaa; }
    .coupon-remove:hover { color: var(--error); }

    /* ─── SUBMIT BUTTON ─── */
    .summary-submit { padding: 0 24px 24px; }
    .btn-confirm {
      width: 100%; padding: 18px 24px;
      background: var(--gold-gradient); color: var(--charcoal);
      font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em;
      text-transform: uppercase; display: flex; align-items: center;
      justify-content: center; gap: 10px; border: none; cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
      box-shadow: 0 6px 24px rgba(201,162,39,0.3);
    }
    .btn-confirm:hover { opacity: 0.92; transform: translateY(-1px); }
    .btn-confirm:active { transform: translateY(0); }
    .btn-confirm svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }

    /* ─── SECURITY BADGES ─── */
    .security-badges {
      padding: 16px 24px 20px;
      border-top: 1px solid #f0f0f0;
    }
    .badges-row { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
    .badge-item {
      display: flex; align-items: center; gap: 5px;
      font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: #999;
    }
    .badge-item svg { width: 13px; height: 13px; stroke: var(--success); fill: none; stroke-width: 2; flex-shrink: 0; }

    /* ─── MOBILE: summary toggle ─── */
    .mobile-summary-toggle {
      display: none; background: var(--charcoal); color: white;
      padding: 14px 24px; align-items: center; justify-content: space-between;
      font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; cursor: pointer;
      border: none; width: 100%;
    }
    .mobile-summary-toggle svg { width: 16px; height: 16px; stroke: var(--gold-light); fill: none; stroke-width: 2; transition: transform 0.2s; }
    .mobile-summary-toggle.open svg { transform: rotate(180deg); }
    .mobile-summary-total { color: var(--gold-light); }
    @media (max-width: 960px) {
      .mobile-summary-toggle { display: flex; }
      .checkout-summary-col { position: static; }
      .summary-card { display: none; }
      .summary-card.mobile-open { display: block; }
      .checkout-main { display: flex; flex-direction: column; padding: 0 0 60px; }
      .checkout-summary-col { order: -1; }
      .checkout-form-col { padding: 24px 20px 0; }
    }

    /* ─── TRUST STRIP ─── */
    .trust-strip {
      background: var(--charcoal); color: rgba(255,255,255,0.7);
      padding: 12px 40px;
    }
    .trust-inner {
      max-width: 1200px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap;
    }
    .trust-item {
      display: flex; align-items: center; gap: 7px;
      font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .trust-item svg { width: 14px; height: 14px; stroke: var(--gold-light); fill: none; stroke-width: 2; }
    @media (max-width: 600px) {
      .trust-strip { padding: 12px 20px; }
      .trust-inner { gap: 16px; }
      .trust-item span { display: none; }
    }