/* ============================================================
   ALIASES --archi-*  (puente al design system de tokens.css)

   Las reglas del funnel vienen del child theme que corre en produccion,
   escritas contra un juego de variables propio: --archi-pink, --archi-r-md,
   --archi-paper-50 y otras 26. Los valores son los mismos que los tokens de
   la casa (el child se alineo al handoff del rebrand), pero los NOMBRES no
   existian aca: las 88 reglas portadas en la sesion anterior referenciaban
   variables sin definir, asi que el color y el radio caian a nada.
   Se resuelven una sola vez aca en vez de reescribir cada regla portada.
   ============================================================ */
:root {
  --archi-black: var(--black);
  --archi-night: var(--night);
  --archi-night-2: var(--night-2);
  --archi-line: var(--line);
  --archi-line-2: var(--line-2);

  --archi-pink: var(--pink);
  --archi-orange: var(--orange);
  --archi-yellow: var(--amber);
  --archi-green: var(--green);
  --archi-red: var(--red);

  --archi-green-deep: var(--green-deep);
  --archi-amber-deep: var(--amber-deep);
  --archi-red-deep: var(--red-deep);

  --archi-cream: var(--cream);
  --archi-cream-soft: var(--cream-soft);
  --archi-muted: var(--muted);
  --archi-muted-2: var(--muted-2);
  --archi-muted-3: var(--muted-3);

  /* Alias legacy del child: los nombres "papel/tinta" del prototipo viejo. */
  --archi-ink-900: var(--black);
  --archi-ink-800: #101010;
  --archi-ink-700: var(--night);
  --archi-ink-600: #1f1f1f;
  --archi-ink-500: #2a2a2a;
  --archi-paper-50: var(--cream);
  --archi-paper-200: var(--cream-soft);
  --archi-paper-400: var(--muted);
  --archi-border: rgba(245, 241, 234, 0.08);
  --archi-border-strong: rgba(245, 241, 234, 0.14);
  --archi-card-bg: linear-gradient(180deg, var(--night), #1f1f1f);
  --archi-shadow: 0 1px 0 rgba(245, 241, 234, 0.04) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --archi-gradient: var(--gradient);
  --archi-gradient-soft: var(--gradient-soft);

  --archi-font-display: var(--font-display);
  --archi-font-body: var(--font-body);
  --archi-font-mono: var(--font-mono);

  --archi-r-sm: 10px;
  --archi-r-md: 14px;
  --archi-r-lg: 20px;
  --archi-r-pill: 999px;

  --archi-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --archi-t-fast: 0.18s;
  --archi-t-base: 0.25s;
  --archi-t-slow: 0.4s;
}

/* ============================================================
   CARRITO "Adquiridos" - diseno Vercel portado a WooCommerce.
   Va dentro de .wp-generic__content--woo (ya empujado bajo el nav),
   por eso el head no es full-bleed ni lleva padding-top grande.
   ============================================================ */

.ct-cartpage { max-width: 1120px; margin: 0 auto; }

.ct-crumbs { display: flex; gap: 8px; align-items: center; font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.ct-crumbs a { color: var(--cream-soft); }
.ct-crumbs a:hover { color: var(--pink); }
.ct-crumbs .sep { color: var(--line-2); }

.ct-step-label { display: block; font: 700 11px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); margin-bottom: 8px; }
.ct-title { font: 500 clamp(38px, 5vw, 60px) var(--font-display); color: var(--cream); letter-spacing: -.025em; line-height: 1; }
.ct-title em { font-style: italic; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-sub { font: italic 400 16px var(--font-display); color: var(--cream-soft); margin-top: 14px; max-width: 56ch; }

/* PROGRESS BAR */
.ct-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 44px); position: relative; }
.ct-progress::before { content: ''; position: absolute; top: 22px; left: 10%; right: 10%; height: 1px; background: var(--line); z-index: 0; }
.ct-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ct-step .dot { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--night); display: inline-flex; align-items: center; justify-content: center; font: italic 500 18px var(--font-display); color: var(--cream-soft); transition: all .25s; }
.ct-step.is-active .dot { background: var(--gradient); border-color: transparent; color: white; box-shadow: 0 8px 20px rgba(255,61,127,.35); }
.ct-step .label { font: 500 12px var(--font-body); color: var(--cream-soft); letter-spacing: .02em; }
.ct-step.is-active .label { color: var(--cream); font-weight: 600; }
@media (max-width: 720px) { .ct-step .dot { width: 36px; height: 36px; font-size: 14px; } .ct-step .label { font-size: 11px; } }

/* BODY GRID */
.ct-body__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: flex-start; margin: 0; }
@media (max-width: 980px) { .ct-body__grid { grid-template-columns: minmax(0, 1fr); } }

/* CART CARD + ITEMS */
.ct-card { background: var(--night); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ct-item { display: grid; grid-template-columns: 110px 1fr auto auto auto; gap: 20px; align-items: center; padding: 22px 26px; border-bottom: 1px solid var(--line); margin: 0; }
.ct-item:last-of-type { border-bottom: none; }
.ct-item__media { aspect-ratio: 1 / 1; width: 110px; border-radius: var(--r-sm); position: relative; overflow: hidden; background: radial-gradient(ellipse at top right, rgba(200,37,154,.35), transparent 60%), var(--night-2); display: flex; align-items: center; justify-content: center; font: italic 500 26px var(--font-display); color: var(--cream); }
.ct-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-item__cat { font: 700 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.ct-item__name { font: 500 19px var(--font-display); color: var(--cream); letter-spacing: -.018em; line-height: 1.15; }
.ct-item__name a { color: var(--cream); }
.ct-item__name a:hover { color: var(--pink); }
.ct-item__meta { font: italic 400 12px var(--font-display); color: var(--muted); }
.ct-item__price { font: 500 16px var(--font-display); color: var(--cream); white-space: nowrap; }
.ct-item__qty { display: inline-flex; align-items: center; background: var(--black); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.ct-item__qty .quantity { display: inline-flex; align-items: center; margin: 0; }
.ct-item__qty .quantity label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ct-qtybtn { width: 36px; height: 36px; color: var(--cream-soft); transition: color .2s; background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1; }
.ct-qtybtn:hover { color: var(--pink); }
.ct-item__qty input.qty { width: 44px; text-align: center; background: transparent; border: none; outline: none; box-shadow: none; font: 500 14px var(--font-display); color: var(--cream); -moz-appearance: textfield; padding: 0; height: 36px; }
.ct-item__qty input.qty::-webkit-outer-spin-button, .ct-item__qty input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-item__total { font: 600 18px var(--font-display); color: var(--cream); white-space: nowrap; min-width: 90px; text-align: right; }
.ct-item__remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--muted); transition: all .2s; display: inline-flex; align-items: center; justify-content: center; }
.ct-item__remove:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 720px) {
  .ct-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 18px 14px; }
  .ct-item__media { width: 64px; }
  .ct-item__info { grid-column: 2; overflow-wrap: anywhere; }
  .ct-item__price { grid-column: 2; justify-self: flex-start; }
  .ct-item__qty { grid-column: 2; justify-self: flex-start; }
  .ct-item__total { grid-column: 2 / 4; grid-row: 4; min-width: 0; font-size: 16px; }
  .ct-item__remove { grid-column: 3; grid-row: 1; }
}

.ct-actions { padding: 18px 26px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--night-2); }
.ct-actions a { font: 700 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-soft); display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.ct-actions a:hover { color: var(--pink); }
.ct-actions .update-btn { background: linear-gradient(95deg, rgba(255,61,127,.6), rgba(255,138,61,.6)); color: white; padding: 12px 22px; border-radius: 999px; font: 700 12px var(--font-body); letter-spacing: .04em; border: none; cursor: pointer; transition: background .2s, transform .2s; }
.ct-actions .update-btn:hover { background: var(--gradient); color: white; transform: translateY(-1px); }

/* SIDEBAR */
.ct-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 18px; margin: 0; }
@media (max-width: 980px) { .ct-side { position: static; } }
.ct-promo { display: flex; gap: 6px; background: var(--black); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 4px 4px 16px; }
.ct-promo input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font: 500 13px var(--font-body); color: var(--cream); }
.ct-promo input::placeholder { color: var(--muted); }
.ct-promo button { background: rgba(255,255,255,.1); color: var(--cream); padding: 9px 16px; border-radius: 999px; font: 700 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transition: background .2s; border: none; cursor: pointer; white-space: nowrap; }
.ct-promo button:hover { background: var(--gradient); }

.ct-totals { background: var(--night); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; position: relative; overflow: hidden; }
.ct-totals::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); }
.ct-totals h3 { font: 500 24px var(--font-display); color: var(--cream); letter-spacing: -.018em; margin-bottom: 18px; }
.ct-totals h3 em { font-style: italic; color: var(--cream-soft); }
.ct-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font: 500 14px var(--font-body); color: var(--cream-soft); border-bottom: 1px dashed rgba(255,255,255,.08); }
.ct-row:last-of-type { border-bottom: none; }
.ct-row b, .ct-row .amount { color: var(--cream); font-weight: 500; }
.ct-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; margin-top: 14px; border-top: 1.5px solid var(--line-2); font: 500 16px var(--font-body); color: var(--cream); }
.ct-total b, .ct-total b .amount { font: 600 32px var(--font-display); background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; }
.ct-checkout-btn { width: 100%; margin-top: 18px; background: var(--gradient); color: white; padding: 16px 24px; border-radius: 999px; font: 700 13px var(--font-body); letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .2s, box-shadow .25s; }
.ct-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,61,127,.45); color: white; }
/* Los links del carrito NO deben tomar el estilo generico de link (pink+underline)
   que el wrapper .wp-generic__content aplica a todo <a>. Mayor especificidad. */
.ct-cartpage a { text-decoration: none; }
.ct-cartpage .ct-checkout-btn, .ct-cartpage .ct-checkout-btn:hover { color: #fff; text-decoration: none; }

.ct-trust { display: flex; flex-direction: column; gap: 8px; font: 500 11px var(--font-mono); color: var(--muted); letter-spacing: .04em; padding: 18px 22px; background: var(--night-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.ct-trust span { display: inline-flex; align-items: center; gap: 8px; }
.ct-trust span svg { color: var(--green); width: 14px; height: 14px; flex-shrink: 0; }

/* EMPTY */
.ct-empty { padding: 72px 24px; text-align: center; }
.ct-empty h3 { font: italic 500 32px var(--font-display); color: var(--cream); letter-spacing: -.02em; margin-bottom: 12px; }
.ct-empty h3 em { color: var(--cream-soft); }
.ct-empty p { font: italic 400 15px var(--font-display); color: var(--cream-soft); max-width: 40ch; margin: 0 auto 24px; }

/* Woo notices dentro del carrito Archi: cartelito cerrable, sin floats ni ::before
   (Woo por default flota el boton y mete un ::before que se superponen con el texto). */
.wp-generic__content--woo .woocommerce-message,
.wp-generic__content--woo .woocommerce-info,
.wp-generic__content--woo .woocommerce-error { position: relative; list-style: none; margin: 0 0 20px; padding: 15px 46px 15px 20px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--night); color: var(--cream); font: 500 13px var(--font-body); line-height: 1.5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; overflow: visible; }
.wp-generic__content--woo .woocommerce-message::before,
.wp-generic__content--woo .woocommerce-info::before,
.wp-generic__content--woo .woocommerce-error::before { content: none; display: none; }
.wp-generic__content--woo .woocommerce-message { border-color: rgba(46,204,113,.4); }
/* El boton no se puede reordenar con order: en el markup de Woo viene ANTES del
   texto, y ese texto es un nodo suelto, sin etiqueta. Los items anonimos de un
   flex se colocan en orden de documento y no aceptan order, asi que la regla
   vieja no hacia nada y el boton quedaba pegado a la izquierda, encimado con el
   mensaje. margin-left:auto si funciona, porque empuja desde el margen y no
   depende del orden. */
.wp-generic__content--woo .woocommerce-message .button,
.wp-generic__content--woo .woocommerce-info .button { order: 2; margin-left: auto; flex: 0 0 auto; float: none; padding: 9px 16px; border-radius: 999px; background: var(--gradient); color: #fff; text-decoration: none; font: 700 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.wp-generic__content--woo .woocommerce-message .button:hover,
.wp-generic__content--woo .woocommerce-info .button:hover { color: #fff; }

/* El pill salia subrayado: hay un a{text-decoration:underline} global que le
   gana a la regla de arriba cuando Woo no pone la clase .button. Se cubren los
   dos casos. */
.wp-generic__content--woo .woocommerce-message a.button,
.wp-generic__content--woo .woocommerce-info a.button,
.wp-generic__content--woo .woocommerce-message .button:link,
.wp-generic__content--woo .woocommerce-message .button:visited {
  text-decoration: none; white-space: normal; max-width: 100%; text-align: center;
}
/* X para cerrar el cartelito (la inyecta cart.php por JS). */
.archi-notice-x { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; flex-shrink: 0; }
.archi-notice-x:hover { color: var(--pink); border-color: var(--pink); }


/* La pasarela de transferencia inyecta el QR del pedido como un <img> pelado,
   sin width, sin height y sin estilo, colgado directo de #order_review. Con esa
   caja a 1152px de ancho, el navegador lo dibuja a su tamano nativo: medido el
   10/9/2026 en el checkout, 1080x1350 px, o sea la pantalla entera tapada justo
   en el paso de pagar.
   Se acota solo el hijo directo para no tocar las miniaturas de los productos
   que Woo lista adentro de la misma caja. */
#order_review > img,
.woocommerce-checkout-payment img {
  width: min(240px, 70vw); height: auto; display: block;
  margin: 16px auto 6px; background: #fff; padding: 10px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
}

/* El QR de transferencia en la pantalla de pagar. El medio de pago promete QR
   y hasta ahora solo salia el alias. */
.ct-qr { margin: 20px 0 4px; text-align: center; }
.ct-qr__img {
  width: min(220px, 60vw); height: auto; display: block; margin: 0 auto;
  background: #fff; padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.ct-qr__pie {
  font: italic 400 13px var(--font-display); color: var(--cream-soft);
  margin: 10px auto 0; max-width: 34ch;
}


/* ============================================================
   PANTALLA DE GRACIAS · portada del child theme que corre en produccion
   ------------------------------------------------------------
   Esto no es diseno nuevo: es el cierre del funnel que ya andaba en
   archibrazo.org y que el theme del rebrand nunca incorporo. Lo saque del
   style.css de astra-child-archibrazo el 10/9/2026, junto con su
   woocommerce/checkout/thankyou.php.
   Son 88 reglas: las tarjetas por estado (verde, amarillo, rojo), los chips,
   el mini resumen del pedido, la marginalia y el dingbat.
   ============================================================ */


/* ============================================================
   COMPONENTS COMUNES
   ============================================================ */
.archi-eyebrow {
    color: var(--archi-pink);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    font-family: 'Manrope', sans-serif;
}

.archi-eyebrow--yellow { color: var(--archi-yellow); }

.archi-eyebrow--green { color: var(--archi-green); }

.archi-eyebrow--red { color: var(--archi-red); }


.archi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Manrope', sans-serif;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), background 180ms ease;
}

.archi-btn--primary {
    background: var(--archi-gradient);
    color: white;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 16px 32px -16px rgba(255, 61, 127, 0.5);
}

.archi-btn--primary:hover { transform: translateY(-2px); color: white; }

.archi-btn--secondary {
    background: var(--archi-ink-600);
    color: var(--archi-paper-50);
    border: 1px solid var(--archi-border-strong);
}

.archi-btn--secondary:hover {
    background: var(--archi-ink-500);
    color: var(--archi-paper-50);
    transform: translateY(-1px);
}


/* ============================================================
   THANK-YOU TEMPLATE
   ============================================================ */
.archi-thankyou {
    max-width: 720px;
    margin: 0 auto;
}

.archi-thankyou__hero {
    text-align: center;
    margin-bottom: 40px;
}

.archi-thankyou__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.archi-thankyou__icon--success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--archi-green);
}

.archi-thankyou__icon--warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--archi-yellow);
}

.archi-thankyou__icon--waiting {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: var(--archi-yellow);
}

.archi-thankyou__icon--error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--archi-red);
}

.archi-thankyou__title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    margin: 0 0 12px;
}

.archi-thankyou__sub {
    color: var(--archi-paper-200);
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

.archi-thankyou__actions { margin-top: 20px; }

.archi-thankyou__card {
    background: var(--archi-card-bg);
    border: 1px solid var(--archi-border);
    border-radius: 20px;
    box-shadow: var(--archi-shadow);
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.archi-thankyou__card-icon {
    width: 48px; height: 48px;
    border-radius: 999px;
    background: rgba(255, 61, 127, 0.15);
    color: var(--archi-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.archi-thankyou__card-title {
    color: var(--archi-paper-50);
    font-weight: 600;
    margin: 0 0 4px;
}

.archi-thankyou__card-sub {
    color: var(--archi-paper-400);
    font-size: 14px;
    margin: 0;
}

.archi-thankyou__card-sub + .archi-thankyou__card-sub {
    margin-top: 6px;
}


.archi-thankyou__summary {
    background: var(--archi-card-bg);
    border: 1px solid var(--archi-border);
    border-radius: 20px;
    box-shadow: var(--archi-shadow);
    padding: 24px;
    margin-bottom: 16px;
}

.archi-thankyou__summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archi-thankyou__summary-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.archi-thankyou__summary-label { color: var(--archi-paper-400); }

.archi-thankyou__summary-value { color: var(--archi-paper-50); text-align: right; }

.archi-thankyou__summary-item--total {
    border-top: 1px solid var(--archi-border);
    margin-top: 8px;
    padding-top: 12px;
}

.archi-thankyou__total {
    font-family: 'AndralisND', serif;
    font-size: 20px;
    font-weight: 600;
}


/* Datos del pedido (Nº, fecha, email) - línea compacta debajo de "Detalles del pedido" */
.archi-thankyou__ordermeta {
    text-align: center;
    margin: 16px 0 2px;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 1.7;
    color: var(--archi-paper-400);
}

.archi-thankyou__ordermeta-label {
    color: var(--archi-paper-200);
    font-weight: 600;
}


.archi-thankyou__upload {
    background: var(--archi-card-bg);
    border: 1px solid var(--archi-border);
    border-radius: 20px;
    padding: 36px 32px;
    margin-bottom: 24px;
}

/* Más aire entre el h2 "Subí tu comprobante" y el botón "Enviar comprobante" */
.archi-thankyou__upload h2.upload_receipt,
.archi-thankyou__upload h2.woocommerce-order-details__title {
    margin-bottom: 20px;
}

.archi-thankyou__upload table.upload_receipt,
.archi-thankyou__upload table.woocommerce-table--upload-receipt {
    margin: 0 auto;
}

.archi-thankyou__upload form#uploadreceiptfileimage,
.archi-thankyou__upload .receipt-img-upload {
    padding: 8px 0;
}

.archi-thankyou__upload button.start-upload {
    margin-top: 16px !important;
}


.archi-thankyou__more {
    background: var(--archi-card-bg);
    border: 1px solid var(--archi-border);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
}

.archi-thankyou__more-title {
    color: var(--archi-paper-50);
    font-weight: 600;
    margin: 0 0 6px;
}

.archi-thankyou__more-sub {
    color: var(--archi-paper-400);
    font-size: 14px;
    margin: 0 0 16px;
}

.archi-thankyou__more-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.archi-thankyou__more-actions .archi-btn {
    flex: 1;
    min-width: 180px;
}


/* Cierre del paso "Listo": GIF del gatito + link a pedidos. Bloque transparente,
   separado por una línea, para que lea como remate y no compita con las cards de arriba. */
.archi-thankyou__closing {
    text-align: center;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--archi-border);
}

.archi-thankyou__gif {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: 16px;
}

.archi-thankyou__closing-text {
    color: var(--archi-paper-200);
    font-size: 15px;
    margin: 0 0 14px;
}

.archi-thankyou__closing-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--archi-pink);
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: color 160ms ease;
}

.archi-thankyou__closing-link:hover {
    color: var(--archi-orange);
}


/* ============================================================
   REBRAND 2026 · componentes nuevos del design handoff
   (design_handoff_funnel_tickets, lenguaje "fascículo")
   ============================================================ */

/* ---- Chips de variante (cart + thankyou) */
.archi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 2px;
}

.archi-chip {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--archi-muted);
    background: var(--archi-night-2);
    border: 1px solid var(--archi-line-2);
    border-radius: var(--archi-r-pill);
    padding: 5px 12px;
}

.archi-chip--pink {
    color: var(--archi-pink);
    border-color: rgba(255, 61, 127, 0.4);
    background: rgba(255, 61, 127, 0.08);
}


/* ---- Marginalia (frase italic con dingbat, toque fascículo) */
.archi-marginalia {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-family: var(--archi-font-display);
    font-style: italic;
    font-size: 13px;
    color: var(--archi-muted-3);
    margin-top: 18px;
}

.archi-marginalia b {
    font-family: var(--archi-font-mono);
    font-style: normal;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--archi-orange);
    white-space: nowrap;
}

.archi-marginalia .archi-dingbat { color: var(--archi-pink); font-style: normal; }


/* ---- Eyebrows en mono (look fascículo en headers de sección) */
.archi-page-heading .archi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.archi-page-heading .archi-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    background: currentColor;
    transform: rotate(45deg);
}


/* ---- Mini-resumen "Tu pedido" dentro de la card del upload (paso 4) */
.archi-fminipedido {
    margin-top: 18px;
    border-top: 1px solid var(--archi-line);
    padding-top: 16px;
    text-align: left;
}

.archi-fminipedido h4 {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--archi-muted);
    margin: 0 0 9px;
}

.archi-fminipedido__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-size: 13px;
    color: var(--archi-cream-soft);
    padding: 3px 0;
}

.archi-fminipedido__row data {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 14px;
    color: var(--archi-cream);
    white-space: nowrap;
}

.archi-fminipedido__row--total {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--archi-line);
}


/* ---- Volver al QR (paso 4) */
.archi-thankyou__backqr {
    margin: 16px 0 0;
    text-align: center;
}

.archi-thankyou__backqr a {
    font-family: var(--archi-font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--archi-muted) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--archi-line-2);
}

.archi-thankyou__backqr a:hover {
    color: var(--archi-cream) !important;
    text-decoration-color: var(--archi-pink);
}


/* ---- Card resumen del pedido (paso 5, design handoff) */
.archi-thankyou__resumen {
    max-width: 640px;
    margin: 18px auto 0;
    background: var(--archi-night);
    border: 1px solid var(--archi-line);
    border-radius: var(--archi-r-lg);
    padding: clamp(18px, 3vw, 26px);
    box-shadow: 0 1px 0 rgba(245,241,234,0.04) inset, 0 8px 16px -8px rgba(0,0,0,0.6);
    text-align: left;
}

.archi-thankyou__resumen-item {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.archi-thankyou__resumen-poster,
.archi-thankyou__resumen-poster img {
    width: 70px !important;
    height: 94px !important;
    object-fit: cover;
    border-radius: var(--archi-r-md);
    display: block;
}

.archi-thankyou__resumen-poster {
    flex: none;
    overflow: hidden;
    border: 1px solid var(--archi-line-2);
}

.archi-thankyou__resumen-main h3 {
    font-family: var(--archi-font-display) !important;
    font-size: 19px !important;
    color: var(--archi-cream) !important;
    margin: 0 0 3px !important;
}

.archi-thankyou__resumen-main p {
    font-size: 12.5px;
    color: var(--archi-muted);
    margin: 0 0 8px;
}

.archi-thankyou__resumen-rows {
    margin-top: 16px;
    border-top: 1px solid var(--archi-line);
    padding-top: 12px;
}

.archi-thankyou__resumen-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 14px;
    color: var(--archi-cream-soft);
    padding: 5px 0;
}

.archi-thankyou__resumen-row data {
    font-family: var(--archi-font-mono);
    font-weight: 500;
    font-size: 14px;
    color: var(--archi-cream-soft);
    white-space: nowrap;
}

.archi-thankyou__resumen-row--total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--archi-line-2);
}

.archi-thankyou__resumen-row--total span {
    font-family: var(--archi-font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--archi-cream);
}

.archi-thankyou__resumen-row--total data {
    font-weight: 700;
    font-size: 20px;
    color: var(--archi-cream);
}


/* ---- Botones ghost (design handoff .fbtn--ghost) */
.archi-btn--ghost,
.archi-thankyou__more-actions .archi-btn {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid var(--archi-line-2) !important;
    color: var(--archi-cream) !important;
    box-shadow: none !important;
}

.archi-btn--ghost:hover,
.archi-thankyou__more-actions .archi-btn:hover {
    border-color: var(--archi-pink) !important;
}


/* ---- "Mientras tanto" como card (design handoff) */
.archi-thankyou__more {
    max-width: 640px;
    margin: 22px auto 0;
    background: var(--archi-night);
    border: 1px solid var(--archi-line);
    border-radius: var(--archi-r-lg);
    padding: clamp(18px, 3vw, 26px);
    text-align: left;
}

.archi-thankyou__more-title {
    font-family: var(--archi-font-mono) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--archi-muted) !important;
    margin: 0 0 8px !important;
}


/* ---- Ocultar la tabla "Detalles del pedido" de WC en order-received: la
   reemplaza la card resumen (paso 5) / el mini-pedido (paso 4). Solo se
   oculta cuando el JS ya movió el form de PeproDev a su placeholder
   (clase .archi-ready): si el JS no corre, la tabla queda como fallback. */
body.woocommerce-order-received .archi-thankyou .woocommerce-order-details.archi-ready {
    display: none !important;
}


/* ============================================================
   PASO 5 · TODOS LOS BLOQUES AL MISMO ANCHO (feedback Joaco 13/6)
   Verificación / "Te llega el ticket" / resumen / GIF / "Mientras
   tanto" tenían 720, 640 y 340px sueltos. Unificados a 640px
   centrados (mismo ancho que las cards del paso 3 y 4).
   ============================================================ */
body.woocommerce-order-received .archi-thankyou {
    max-width: 760px;
}

body.woocommerce-order-received .archi-verif,
body.woocommerce-order-received .archi-thankyou__card,
body.woocommerce-order-received .archi-thankyou__summary,
body.woocommerce-order-received .archi-thankyou__resumen,
body.woocommerce-order-received .archi-thankyou__more,
body.woocommerce-order-received .archi-thankyou__upload-wrap,
body.woocommerce-order-received .archi-thankyou__gif {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Card "Te llega el ticket" con GIF adentro (Joaco 13/6): el head
   (icono + texto) en fila arriba, el GIF más chico y centrado debajo. */
body.woocommerce-order-received .archi-thankyou__card--withgif {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}

body.woocommerce-order-received .archi-thankyou__card--withgif .archi-thankyou__card-head {
    display: flex;
    gap: 16px;
    align-items: center;
}

body.woocommerce-order-received .archi-thankyou__card--withgif .archi-thankyou__gif {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: var(--archi-r-md);
    display: block;
}
@media (max-width: 768px) {
    body .archi-funnel-stepper__list { gap: 4px; }
    body .archi-funnel-stepper__dot { width: 32px; height: 32px; font-size: 14px; }
    .archi-funnel-stepper__label { display: none; }
    .archi-funnel-stepper__mobile { display: block; }

    .archi-cart-item {
        grid-template-columns: 92px 1fr;
        grid-template-rows: auto auto;
        gap: 14px;
    }
    .archi-cart-item__remove { position: absolute; top: 12px; right: 12px; }
    .archi-cart-item { position: relative; padding-top: 36px; }
    .archi-cart-item__media { width: 92px; }
    .archi-cart-item__media--poster,
    .archi-cart-item__media--poster img { width: 92px !important; height: 122px !important; }
    .archi-cart-item__title { font-size: 19px; }
    .archi-cart-item__subtotal-value { font-size: 22px; }
    .archi-cart-coupon__form { flex-direction: column; }
    body .archi-funnel-continue { width: 100%; min-width: 0; padding-inline: 18px; }
    .archi-thankyou__more-actions { flex-direction: column; }
    .archi-thankyou__more-actions .archi-btn { min-width: 0; width: 100%; }
}
/* Aca vivia el bump de escritorio de produccion (zoom: 1.12 de 1100px para
   arriba). Alla compensaba que Astra arranca con una tipografia mas chica.
   Este theme ya trae su propia escala, asi que el 1.12 se sumaba encima: los
   cinco pasos y los titulos de la pantalla de gracias quedaban gigantes en
   cualquier monitor. El ancho de los atajos de entrar y de cupon no dependia
   de esto: lo fija su propia regla de max-width mas abajo. */


/* ============================================================
   EL FUNNEL DE CINCO PASOS

   Portado tal cual del child theme que corre en produccion
   (referencia/prod-child/style.css). El recorrido es:
     I Ticket (carrito) · II Datos · III Pagar · IV Comprobante · V Listo
   Los pasos II y III son la MISMA pagina de checkout: el JS de
   inc/funnel.php le cambia la clase al form y con eso se muestra el
   formulario de datos o la card del QR.
   ============================================================ */
/* --- Rotulo de pagina (volanta + titulo + bajada) --- */
.archi-page-heading {
    max-width: 920px;
    margin: 0 auto 32px;
    padding: 0 16px;
    text-align: left;
}
.archi-page-title {
    font-family: 'AndralisND', Georgia, serif !important;
    font-size: clamp(32px, 5vw, 48px) !important;
    font-weight: 500 !important;
    color: var(--archi-paper-50) !important;
    letter-spacing: -0.025em !important;
    margin: 0 0 8px !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere;
}
.archi-page-sub {
    color: var(--archi-paper-400) !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* Ocultar el H1 default de WP de las páginas WC para no duplicar */
body.woocommerce-cart .entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .page-title,
body.woocommerce-cart h1.entry-title,
body.woocommerce-checkout h1.entry-title {
    display: none !important;
}

/* --- La tira de cinco pliegos --- */
.archi-funnel-stepper {
    max-width: 920px;
    margin: 0 auto 40px;
    padding: 0 16px;
}
.archi-funnel-stepper__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.archi-funnel-stepper__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.archi-funnel-stepper__dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 14px;
    transition: all var(--archi-t-base) var(--archi-ease-out);
    flex-shrink: 0;
}
.archi-funnel-stepper__dot.pending {
    background: none;
    color: var(--archi-muted);
    border: 1px solid var(--archi-line-2);
}
.archi-funnel-stepper__dot.current {
    background: var(--archi-gradient);
    color: white;
    border: 1px solid transparent;
    box-shadow: 0 6px 18px rgba(255, 61, 127, 0.35);
}
.archi-funnel-stepper__dot.completed {
    background: var(--archi-green-deep);
    color: var(--archi-green);
    border: 1px solid var(--archi-green);
}
.archi-funnel-stepper__line {
    flex: 1;
    min-width: 12px;
    height: 1px;
    background: var(--archi-line-2);
    position: relative;
    overflow: hidden;
}
.archi-funnel-stepper__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--archi-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--archi-t-slow) var(--archi-ease-out);
}
.archi-funnel-stepper__line.completed::after { transform: scaleX(1); }
.archi-funnel-stepper__label {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--archi-muted-2);
    transition: color var(--archi-t-base);
}
.archi-funnel-stepper__item .completed ~ .archi-funnel-stepper__label,
.archi-funnel-stepper__item:has(.completed) .archi-funnel-stepper__label {
    color: var(--archi-muted);
}
.archi-funnel-stepper__item:has(.current) .archi-funnel-stepper__label {
    color: var(--archi-cream);
}
.archi-funnel-stepper__mobile {
    display: none;
    text-align: center;
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--archi-muted);
    margin-top: 12px;
}
/* Pasos completados clickeables (navegación hacia atrás por el funnel) */
.archi-funnel-stepper__item.is-clickable { cursor: pointer; }
.archi-funnel-stepper__item.is-clickable:hover .archi-funnel-stepper__label {
    color: var(--archi-green);
}
.archi-funnel-stepper__item.is-clickable:hover .archi-funnel-stepper__dot.completed {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.archi-funnel-stepper__item.is-clickable:focus-visible {
    outline: 2px solid var(--archi-pink);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Figmark del pliego actual (lenguaje fascículo) */
.archi-funnel-stepper__figmark {
    margin: 18px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-family: var(--archi-font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--archi-cream-soft);
}
.archi-funnel-stepper__figmark b {
    font-family: var(--archi-font-mono);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--archi-pink);
}


/* --- Pasos II <-> III: que se ve en cada uno --- */
form.checkout.archi-funnel-step-2 #order_review_heading,
form.checkout.archi-funnel-step-2 #order_review {
    display: none !important;
}
form.checkout .woocommerce-additional-fields:not(:has(input, select, textarea)),
form.checkout.archi-funnel-step-3 .woocommerce-billing-fields,
form.checkout.archi-funnel-step-3 .woocommerce-additional-fields,
form.checkout.archi-funnel-step-3 .archi-funnel-continue-wrap {
    display: none !important;
}
form.checkout.archi-funnel-step-2 .archi-funnel-back-wrap { display: none !important; }
form.checkout.archi-funnel-step-3 .archi-funnel-back-wrap { display: block !important; }

.archi-funnel-continue-wrap {
    margin: 32px 0;
    text-align: center;
}
.archi-funnel-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--archi-gradient);
    color: white;
    border: none;
    padding: 16px 36px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 16px 32px -16px rgba(255, 61, 127, 0.5);
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 280px;
}
.archi-funnel-continue:hover { transform: translateY(-2px); }

.archi-funnel-back-wrap {
    margin: 0 auto 16px;
    text-align: center;
    display: none;
}
.archi-funnel-back {
    background: none;
    border: none;
    color: var(--archi-paper-400);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: 'Manrope', sans-serif;
}
.archi-funnel-back:hover { color: var(--archi-paper-50); }

.archi-funnel-validation-error {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 12px;
    color: #fca5a5;
    font-size: 14px;
    display: none;
}
.archi-funnel-validation-error.visible { display: block; }

/* Banner crítico de comprobante */
.archi-funnel-receipt-warning {
    max-width: 720px;
    margin: 24px auto;
    padding: 16px 20px;
    background: linear-gradient(95deg, rgba(251, 191, 36, 0.12), rgba(255, 138, 61, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 14px;
    color: #fde68a;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.6;
}
.archi-funnel-receipt-warning strong { color: var(--archi-yellow); }

/* Advertencia "falta un paso" en el paso Pagar - amarilla, grande y en negrita. */
.archi-step3-warning {
    margin: 16px 0 0;
    padding: 16px 20px;
    background: linear-gradient(95deg, rgba(251, 191, 36, 0.14), rgba(255, 138, 61, 0.09));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    color: #fde68a;
}
.archi-step3-warning strong { color: var(--archi-yellow); font-weight: 800; }
.archi-step3-warning svg { flex-shrink: 0; margin-top: 2px; }
.archi-step3-warning p { margin: 0; }


/* --- Paso III: la card del QR --- */
.archi-fqr {
    max-width: 640px;
    margin: 0 auto 24px;
    background: var(--archi-night);
    border: 1px solid var(--archi-line);
    border-radius: var(--archi-r-lg);
    padding: clamp(20px, 3vw, 30px);
    box-shadow: 0 1px 0 rgba(245,241,234,0.04) inset, 0 8px 16px -8px rgba(0,0,0,0.6);
    text-align: center;
    color: var(--archi-cream-soft);
}
.archi-fqr__code {
    width: min(200px, 56vw);
    height: auto;
    background: white;
    border-radius: var(--archi-r-md);
    padding: 12px;
    box-sizing: content-box;
    display: inline-block;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.archi-fqr__or {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--archi-muted-2);
    margin: 18px 0 6px;
}
.archi-fqr__alias {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.archi-fqr__alias strong {
    font-family: var(--archi-font-display);
    font-weight: 700;
    font-size: clamp(28px, 5vw, 36px);
    letter-spacing: 0.04em;
    color: var(--archi-cream);
}
.archi-fqr__copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--archi-night-2);
    border: 1px solid var(--archi-line-2);
    border-radius: var(--archi-r-pill);
    padding: 9px 16px;
    cursor: pointer;
    font-family: var(--archi-font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--archi-cream);
    transition: border-color var(--archi-t-fast), color var(--archi-t-fast);
}
.archi-fqr__copy:hover { border-color: var(--archi-pink); }
.archi-fqr__copy.is-copied { border-color: var(--archi-green); color: var(--archi-green); }
.archi-fqr__copy--sm { padding: 4px 10px; font-size: 11px; margin-left: 6px; }
.archi-fqr__amount {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--archi-muted);
}
.archi-fqr__amount data {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 17px;
    color: var(--archi-cream);
}
.archi-fqr__bank {
    margin-top: 14px;
    text-align: center;
}
.archi-fqr__bank summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--archi-font-body);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--archi-orange);
}
.archi-fqr__bank summary::-webkit-details-marker { display: none; }
.archi-fqr__bank summary:hover { color: var(--archi-pink); }
.archi-fqr__bank-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    text-align: left;
}
.archi-fqr__bank-grid > div {
    background: rgba(245, 241, 234, 0.04);
    border: 1px solid var(--archi-line);
    border-radius: var(--archi-r-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.archi-fqr__bank-grid small {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--archi-muted-2);
}
.archi-fqr__bank-grid span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--archi-cream);
    word-break: break-all;
}
.archi-fqr__bank-grid span.archi-mono {
    font-family: var(--archi-font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.archi-fqr__how {
    margin-top: 18px;
    border-top: 1px solid var(--archi-line);
    padding-top: 16px;
    text-align: left;
}
.archi-fqr__how h4 {
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--archi-muted);
    margin: 0 0 12px;
}
.archi-fqr__how ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: archihow;
    display: grid;
    gap: 9px;
}
.archi-fqr__how li {
    counter-increment: archihow;
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--archi-cream-soft);
}
.archi-fqr__how li::before {
    content: counter(archihow) ".";
    font-family: var(--archi-font-mono);
    font-weight: 700;
    font-size: 12px;
    color: var(--archi-pink);
    flex: none;
}
.archi-fqr__how code {
    font-family: var(--archi-font-mono);
    font-size: 12px;
    color: var(--archi-orange);
}
@media (max-width: 640px) {
    .archi-fqr__bank-grid { grid-template-columns: 1fr; }
}

/* ---- Warning del paso 3 alineado al ancho de la card de pago */
.archi-step3-warning.archi-bank-cta--step-3 {
    max-width: 640px;
    margin: 0 auto 18px;
}


/* --- Paso IV: la zona de arrastre del comprobante --- */
.archi-fdrop {
    border: 1.5px dashed var(--archi-line-2);
    border-radius: var(--archi-r-md);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--archi-t-fast), background var(--archi-t-fast);
}
.archi-fdrop:hover {
    border-color: var(--archi-pink);
    background: rgba(255, 61, 127, 0.04);
}
.archi-fdrop.is-dragging {
    border-color: var(--archi-pink);
    background: rgba(255, 61, 127, 0.07);
}
.archi-fdrop__icon { color: var(--archi-muted); margin-bottom: 12px; }
.archi-fdrop p {
    margin: 0 0 4px;
    font-size: 14.5px;
    color: var(--archi-cream);
    font-weight: 600;
}
.archi-fdrop small { font-size: 12px; color: var(--archi-muted-2); }

.archi-ffile {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--archi-green-deep);
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: var(--archi-r-md);
    padding: 14px 18px;
    color: var(--archi-green);
    text-align: left;
}
/* hidden gana siempre: dropzone y card de archivo nunca conviven */
.archi-fdrop[hidden],
.archi-ffile[hidden] {
    display: none !important;
}
.archi-ffile svg { flex: none; }
.archi-ffile__name { flex: 1; min-width: 0; }
.archi-ffile__name b {
    display: block;
    font-size: 13.5px;
    color: var(--archi-cream);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archi-ffile__name small {
    font-size: 11px;
    color: var(--archi-muted);
    font-family: var(--archi-font-mono);
}
.archi-ffile button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--archi-font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--archi-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.archi-ffile button:hover { color: var(--archi-cream); }


/* --- La pastilla ARCHICOOP dentro del metodo de pago --- */
    html body .archi-alias-pill {
        display: inline-block !important;
        padding: 3px 12px !important;
        margin: 0 2px !important;
        background: linear-gradient(135deg, rgba(244, 114, 182, 0.28), rgba(251, 146, 60, 0.28)) !important;
        border: 1px solid rgba(244, 114, 182, 0.5) !important;
        border-radius: 999px !important;
        font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
        font-weight: 700 !important;
        font-size: inherit !important;
        letter-spacing: 0.04em !important;
        color: #fff !important;
        cursor: pointer !important;
        line-height: 1.4 !important;
        transition: background 180ms ease, border-color 180ms ease, transform 100ms ease !important;
    }
    html body .archi-alias-pill:hover {
        background: linear-gradient(135deg, rgba(244, 114, 182, 0.45), rgba(251, 146, 60, 0.45)) !important;
        border-color: rgba(244, 114, 182, 0.8) !important;
    }
    html body .archi-alias-pill:active {
        transform: scale(0.96) !important;
    }
    html body .archi-alias-pill.archi-alias-pill--ok {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.5)) !important;
        border-color: rgba(34, 197, 94, 0.8) !important;
        color: #fff !important;
    }

/* --- Paso IV: el form de subida (plugin del comprobante) --- */
    html body.woocommerce-order-received .archi-file-control {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 !important;
    }
    /* El atributo hidden tiene que ganar SIEMPRE (el display de .archi-ffile
       lo pisaba y se veían los dos estados a la vez). */
    html body.woocommerce-order-received .archi-fdrop[hidden],
    html body.woocommerce-order-received .archi-ffile[hidden] {
        display: none !important;
    }
    html body.woocommerce-order-received .archi-file-control__btn {
        display: inline-block !important;
        padding: 12px 26px !important;
        background: var(--archi-gradient) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        cursor: pointer !important;
        transition: transform 100ms ease, box-shadow 180ms ease !important;
        box-shadow: 0 4px 18px rgba(255, 61, 127, 0.35) !important;
        line-height: 1 !important;
    }
    html body.woocommerce-order-received .archi-file-control__btn:hover {
        box-shadow: 0 6px 22px rgba(255, 61, 127, 0.5) !important;
        transform: translateY(-1px) !important;
    }
    html body.woocommerce-order-received .archi-file-control__btn:active {
        transform: translateY(0) scale(0.98) !important;
    }
    html body.woocommerce-order-received .archi-file-control__name {
        font-family: 'Manrope', sans-serif !important;
        font-size: 14px !important;
        color: rgba(245, 241, 234, 0.55) !important;
    }
    html body.woocommerce-order-received .archi-file-control__name--selected {
        color: rgba(245, 241, 234, 0.95) !important;
        font-weight: 600 !important;
    }

    /* FORM DE UPLOAD: una sola card. El wrapper interno .peprodev_woocommerce_receipt_uploader
       tenía su propio background + border, generando un efecto "card dentro de card" feo
       (sobre todo en mobile). Lo hacemos transparente: la única card es .archi-thankyou__upload. */
    html body.woocommerce-order-received .archi-thankyou__upload .peprodev_woocommerce_receipt_uploader {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    /* Centrar todo el contenido del form de upload (título, botones, label) */
    html body.woocommerce-order-received .archi-thankyou__upload {
        text-align: center !important;
    }
    html body.woocommerce-order-received .archi-thankyou__upload .receipt-img-upload,
    html body.woocommerce-order-received .archi-thankyou__upload form#uploadreceiptfileimage,
    html body.woocommerce-order-received .archi-thankyou__upload form#uploadreceiptfileimage > div {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }
    /* Form de subir comprobante: un solo botón a la vez (feedback de Joaco, 2026-05-20).
       Sin archivo: se ve "Elegir archivo", oculto "Enviar comprobante".
       Con archivo (.archi-upload-has-file, lo togglea el JS): aparece "Enviar
       comprobante" y "Elegir archivo" pasa a un link chico "Cambiar archivo". */
    html body.woocommerce-order-received .archi-thankyou__upload button.start-upload {
        display: none !important;
        margin: 6px auto 0 !important;
        float: none !important;
    }
    html body.woocommerce-order-received .archi-thankyou__upload.archi-upload-has-file button.start-upload {
        display: block !important;
    }
    /* El h2 "Subí tu comprobante" se veía como un botón (pill con gradiente).
       Lo dejamos como título plano de sección. */
    html body.woocommerce-order-received .archi-thankyou__upload h2.upload_receipt,
    html body.woocommerce-order-received .archi-thankyou__upload h2.woocommerce-order-details__title.upload_receipt {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 20px !important;
        color: #f5f1ea !important;
        font-family: 'AndralisND', serif !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    /* Con archivo elegido, "Elegir archivo" deja de ser botón y pasa a link discreto. */
    html body.woocommerce-order-received .archi-thankyou__upload.archi-upload-has-file .archi-file-control__btn {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        padding: 2px 6px !important;
        font-size: 13px !important;
        color: rgba(245, 241, 234, 0.6) !important;
        text-decoration: underline !important;
    }
    /* Ocultar el input nativo sin display:none (eso puede romper el click programático
       en algunos browsers). Usamos clip-path para sacarlo del flow visual. */
    html body.woocommerce-order-received input.archi-file-control__input-hidden,
    html body.woocommerce-order-received input[type="file"]#receipt-file.archi-file-control__input-hidden {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
    }
    /* Label .archi-file-control__btn: aparte del style heredado, asegurar cursor pointer */
    html body.woocommerce-order-received label.archi-file-control__btn {
        cursor: pointer !important;
        user-select: none !important;
    }

    /* Fallback (cuando el JS no se ejecuta): igual estilamos el input nativo como botón */
    html body.woocommerce-order-received input[type="file"]#receipt-file,
    html body.woocommerce-order-received .archi-thankyou__upload input[type="file"] {
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: rgba(245, 241, 234, 0.7) !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 14px !important;
        cursor: pointer !important;
    }
    html body.woocommerce-order-received input[type="file"]#receipt-file::file-selector-button,
    html body.woocommerce-order-received .archi-thankyou__upload input[type="file"]::file-selector-button {
        display: inline-block !important;
        padding: 12px 24px !important;
        margin-right: 14px !important;
        background: var(--archi-gradient) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        cursor: pointer !important;
        transition: transform 100ms ease, box-shadow 180ms ease !important;
        box-shadow: 0 4px 18px rgba(255, 61, 127, 0.35) !important;
    }
    html body.woocommerce-order-received input[type="file"]#receipt-file::file-selector-button:hover,
    html body.woocommerce-order-received .archi-thankyou__upload input[type="file"]::file-selector-button:hover {
        box-shadow: 0 6px 22px rgba(255, 61, 127, 0.5) !important;
        transform: translateY(-1px) !important;
    }
    /* Mismo style para WebKit (Safari viejo) */
    html body.woocommerce-order-received input[type="file"]#receipt-file::-webkit-file-upload-button,
    html body.woocommerce-order-received .archi-thankyou__upload input[type="file"]::-webkit-file-upload-button {
        display: inline-block !important;
        padding: 12px 24px !important;
        margin-right: 14px !important;
        background: var(--archi-gradient) !important;
        color: #ffffff !important;
        border: 0 !important;
        border-radius: 999px !important;
        font-family: 'Manrope', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
    }

/* --- Checkout: el formulario en una sola columna, ancho 920 --- */
.archi-checkout-wrap {
    max-width: 720px;
    margin: 0 auto;
}
body.woocommerce-checkout form.checkout {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px;
}
/* En mobile más angosto */
@media (max-width: 768px) {
    body.woocommerce-checkout form.checkout {
        max-width: 100%;
        padding: 0 12px;
    }
}

/* En desktop el form de datos se ve más ancho */
@media (min-width: 768px) {
    body.woocommerce-checkout form.checkout .woocommerce-billing-fields,
    body.woocommerce-checkout form.checkout .woocommerce-additional-fields {
        max-width: 920px !important;
        margin: 0 auto !important;
    }
    body.woocommerce-checkout form.checkout #order_review,
    body.woocommerce-checkout form.checkout #order_review_heading {
        max-width: 920px !important;
        margin: 0 auto !important;
    }
    body.woocommerce-checkout form.checkout #order_review_heading {
        text-align: center;
    }
}
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout .col2-set,
body.woocommerce-checkout form.checkout .col2-set > .col-1,
body.woocommerce-checkout form.checkout .col2-set > .col-2,
body.woocommerce-checkout form.checkout #customer_details > .col-1,
body.woocommerce-checkout form.checkout #customer_details > .col-2,
body.woocommerce-checkout form.checkout .woocommerce-billing-fields,
body.woocommerce-checkout form.checkout .woocommerce-additional-fields,
body.woocommerce-checkout form.checkout #order_review,
body.woocommerce-checkout form.checkout #order_review_heading {
    width: 100%;
    max-width: 100%;
    float: none;
    clear: both;
}

body.woocommerce-checkout h3.woocommerce-billing-fields__title,
body.woocommerce-checkout h3.woocommerce-additional-fields__title,
body.woocommerce-checkout h3#order_review_heading {
    font-size: 24px;
    margin: 24px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--archi-border);
}

body.woocommerce-checkout .form-row {
    margin-bottom: 16px;
}
body.woocommerce-checkout .form-row label {
    color: var(--archi-paper-200);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}
body.woocommerce-checkout .form-row input,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row textarea {
    background: var(--archi-ink-700);
    border: 1px solid var(--archi-border-strong);
    border-radius: 12px;
    padding: 14px 16px;
    width: 100%;
    color: var(--archi-paper-50);
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
}
body.woocommerce-checkout .form-row input:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .form-row textarea:focus {
    outline: none;
    border-color: var(--archi-pink);
    box-shadow: 0 0 0 4px rgba(255, 61, 127, 0.12);
}

/* Order review (paso 3) - card oscura limpia */
body.woocommerce-checkout #order_review {
    background: var(--archi-card-bg);
    border: 1px solid var(--archi-border);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--archi-shadow);
    max-width: 100%;
}

/* Header "Tu pedido" del step 3 - INTEGRADO con la card de abajo (sin wrapper blanco extra) */
body.woocommerce-checkout form.checkout.archi-funnel-step-3 #order_review_heading {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
    font-size: 24px !important;
    color: var(--archi-paper-50) !important;
    font-family: 'AndralisND', serif !important;
    font-weight: 500 !important;
}
body.woocommerce-checkout form.checkout.archi-funnel-step-3 #order_review {
    border-radius: 20px !important;
}

/* Form en desktop: layout cómodo, no apretado, sin doble wrapper */
@media (min-width: 768px) {
    body.woocommerce-checkout form.checkout {
        max-width: 920px !important;
    }
    body.woocommerce-checkout form.checkout.archi-funnel-step-3 #order_review_heading,
    body.woocommerce-checkout form.checkout.archi-funnel-step-3 #order_review {
        max-width: 920px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }
    /* Datos personales en desktop: 2 columnas (nombre/apellido en fila, los demás full width) */
    body.woocommerce-checkout form.checkout.archi-funnel-step-2 .woocommerce-billing-fields__field-wrapper {
        max-width: 920px !important;
        margin: 0 auto !important;
    }
}

/* CHECKBOX de términos - fix layout (estaba roto, separado del texto) */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout .form-row.terms,
body.woocommerce-checkout p.form-row.validate-required {
    display: block !important;
    width: 100% !important;
    max-width: 920px !important;
    margin: 16px auto !important;
}
body.woocommerce-checkout .wc-terms-and-conditions,
body.woocommerce-checkout label.woocommerce-form__label.checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    color: var(--archi-paper-200) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: 'Manrope', sans-serif !important;
}
body.woocommerce-checkout input#terms,
body.woocommerce-checkout .woocommerce-form__input-checkbox {
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 0 !important;
    flex-shrink: 0 !important;
    accent-color: var(--archi-pink) !important;
    cursor: pointer !important;
}
body.woocommerce-checkout label.woocommerce-form__label.checkbox span {
    flex: 1 !important;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--archi-pink) !important;
    text-decoration: underline !important;
}
body.woocommerce-checkout #order_review_table {
    border: none;
    background: transparent;
}
body.woocommerce-checkout #order_review_table th,
body.woocommerce-checkout #order_review_table td {
    background: transparent;
    border: none;
    padding: 12px 0;
    color: var(--archi-paper-200);
}
body.woocommerce-checkout #order_review_table tfoot .order-total td,
body.woocommerce-checkout #order_review_table tfoot .order-total th {
    border-top: 1px solid var(--archi-border);
    padding-top: 16px;
    font-family: 'AndralisND', serif;
    font-size: 18px;
    color: var(--archi-paper-50);
}

/* Botones del checkout */
body.woocommerce-checkout #place_order {
    background: var(--archi-gradient);
    color: white;
    border: none;
    padding: 16px 40px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 16px 32px -16px rgba(255, 61, 127, 0.5);
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 100%;
    margin-top: 16px;
}
body.woocommerce-checkout #place_order:hover { transform: translateY(-2px); }

/* Multi-step show/hide */

/* --- Paso III: lo que se saca de la vista para que el CTA quede pegado al QR --- */

    /* El bloque del método de pago (label "QR o Pago con Transferencia" + la
       descripción con el QR viejo y los banners amarillos) es redundante: la
       tarjeta de arriba ya tiene alias, CBU y el QR. Lo ocultamos. El radio del
       método sigue en el DOM y marcado, así que la orden se procesa igual. */
    html body.woocommerce-checkout ul.wc_payment_methods,
    html body.woocommerce-checkout .archi-payment-layout {
        display: none !important;
    }
    @media (max-width: 640px) {
        html body .archi-bank-cta { padding: 18px !important; }
        html body .archi-bank-cta__alias-value { font-size: 18px !important; }
        html body .archi-bank-cta__details { grid-template-columns: 1fr !important; }
        html body .archi-bank-cta__main { flex-direction: column !important; }
        html body .archi-bank-cta__qr { flex: none !important; }
    }

    /* "Tu pedido" en step 3 - OCULTAR completo (no solo desnudar bordes).
       Pedido del usuario: "podemos sacar esto?" */
    html body.woocommerce-checkout form.checkout.archi-funnel-step-3 #order_review_heading,
    html body.woocommerce-checkout form.checkout.archi-funnel-step-3 h3#order_review_heading {
        display: none !important;
    }

    /* Paso 3: el boton "Ya pagué" + términos van JUSTO debajo de la card del
       QR (feedback Joaco 13/6). Ocultamos la tabla de review y el cupón: la
       card del QR ya muestra el monto, y dejar el CTA al fondo tras una tabla
       larga obligaba a scrollear. El radio del método sigue en el DOM marcado,
       la orden se procesa igual. Gated por la clase body archi-step3-active
       (la togglea el JS) para no afectar el step 2. */
    html body.archi-step3-active .woocommerce-checkout-review-order-table,
    html body.archi-step3-active form.checkout .woocommerce-checkout-review-order-table,
    html body.archi-step3-active .woocommerce-form-coupon-toggle,
    html body.archi-step3-active .checkout_coupon,
    html body.archi-step3-active form.checkout .cart-subtotal {
        display: none !important;
    }
    /* La fila del CTA (términos + "Ya pagué") con buen aire respecto del QR */
    html body.archi-step3-active #order_review .place-order,
    html body.archi-step3-active #order_review .form-row.place-order {
        margin-top: 8px !important;
    }

/* --- Paso IV: el bloque del plugin del comprobante ---
   El plugin dibuja su formulario adentro de una <table> propia, con fondo
   gris claro y etiquetas en ingles. Sin estas reglas queda un recuadro
   blanco en el medio de una pantalla negra. Verificado en staging el
   10/9/2026: la tabla venia en #f5f5f5. */
.archi-thankyou__upload h2.upload_receipt,
.archi-thankyou__upload h2.woocommerce-order-details__title {
    margin-bottom: 20px;
}
.archi-thankyou__upload table.upload_receipt,
.archi-thankyou__upload table.woocommerce-table--upload-receipt {
    margin: 0 auto;
}
.archi-thankyou__upload form#uploadreceiptfileimage,
.archi-thankyou__upload .receipt-img-upload {
    padding: 8px 0;
}
.archi-thankyou__upload button.start-upload {
    margin-top: 16px !important;
}

/* Wrapper general del plugin */
body.woocommerce-order-received .peprodev_woocommerce_receipt_uploader,
body.woocommerce-order-received div.shortcode_wrapper {
    background: var(--archi-card-bg);
    border: 1px solid var(--archi-border);
    border-radius: 20px;
    box-shadow: var(--archi-shadow);
    padding: 0;
    overflow: hidden;
    margin: 24px 0;
}

/* Header del plugin (h2 "Upload receipt") */
body.woocommerce-order-received h2.upload_receipt,
body.woocommerce-order-received h2.woocommerce-order-details__title.upload_receipt {
    background: var(--archi-gradient);
    color: white !important;
    padding: 18px 24px;
    margin: 0 !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 20px 20px 0 0;
}

/* Tabla del receipt upload */
body.woocommerce-order-received table.upload_receipt,
body.woocommerce-order-received table.woocommerce-table--upload-receipt {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.woocommerce-order-received table.upload_receipt thead,
body.woocommerce-order-received table.woocommerce-table--upload-receipt thead {
    display: none !important;
}
body.woocommerce-order-received table.upload_receipt tbody td,
body.woocommerce-order-received table.upload_receipt tbody th,
body.woocommerce-order-received table.woocommerce-table--upload-receipt tbody td,
body.woocommerce-order-received table.woocommerce-table--upload-receipt tbody th {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--archi-border) !important;
    color: var(--archi-paper-200) !important;
    padding: 16px 24px !important;
    font-family: 'Manrope', sans-serif !important;
    vertical-align: middle !important;
}
body.woocommerce-order-received table.upload_receipt tbody tr:last-child td,
body.woocommerce-order-received table.upload_receipt tbody tr:last-child th {
    border-bottom: none !important;
}

/* Preview del comprobante */
body.woocommerce-order-received img.receipt-preview {
    border-radius: 12px !important;
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6) !important;
    max-width: 120px !important;
    height: auto !important;
}

/* Status del comprobante */
body.woocommerce-order-received p.receipt-status {
    color: var(--archi-paper-400) !important;
    font-size: 14px !important;
    margin: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

/* Form de upload */
body.woocommerce-order-received form#uploadreceiptfileimage {
    margin: 0 !important;
    padding: 0 !important;
}

/* Input file estilizado */
body.woocommerce-order-received input#receipt-file,
body.woocommerce-order-received input[type="file"][name="upload"] {
    background: var(--archi-ink-700) !important;
    border: 1px dashed var(--archi-border-strong) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    color: var(--archi-paper-200) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    width: 100% !important;
    max-width: 380px !important;
    margin-right: 12px !important;
    cursor: pointer !important;
}

/* Botón "Upload Receipt" (se traduce a "Enviar comprobante" con gettext) */
body.woocommerce-order-received button.start-upload,
body.woocommerce-order-received button.start-upload.button {
    background: var(--archi-gradient) !important;
    color: white !important;
    border: none !important;
    padding: 14px 28px !important;
    border-radius: 999px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 16px 32px -16px rgba(255, 61, 127, 0.5) !important;
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
body.woocommerce-order-received button.start-upload:hover {
    transform: translateY(-2px) !important;
}

/* Date uploaded - oculto en estado inicial */
body.woocommerce-order-received tr.date-uploaded.hide {
    display: none !important;
}

/* Bank details (ARCHICOOP) - también restilar */
body.woocommerce-order-received .woocommerce-bacs-bank-details {
    background: var(--archi-card-bg) !important;
    border: 1px solid var(--archi-border) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    margin: 24px 0 !important;
    list-style: none !important;
    box-shadow: var(--archi-shadow) !important;
}
body.woocommerce-order-received .woocommerce-bacs-bank-details h2,
body.woocommerce-order-received .wc-bacs-bank-details-account-name {
    color: var(--archi-paper-50) !important;
    font-family: 'AndralisND', serif !important;
    font-size: 20px !important;
}
body.woocommerce-order-received .woocommerce-bacs-bank-details strong {
    color: var(--archi-paper-50) !important;
}

/* "Transfiere al alias: ARCHICOOP y subí tu comprobante" en thank-you - destacado como CTA */
body.woocommerce-order-received h2.woocommerce-order-details__title.upload_receipt {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(251, 146, 60, 0.18)) !important;
    border: 1px solid rgba(244, 114, 182, 0.35) !important;
    border-radius: 16px !important;
    padding: 18px 24px !important;
    margin: 24px 0 16px !important;
    color: var(--archi-paper-50) !important;
    font-size: 18px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;
}

/* Tabla "Detalles del pedido" (paso 5 / Mi cuenta): las celdas de WC solo traen
   border-top y border-right, así que el borde izquierdo y el superior quedan sin
   línea. Un borde en la tabla cierra el recuadro completo y parejo (border-collapse
   lo fusiona con los bordes de celda, sin doble línea). */
table.woocommerce-table--order-details {
    border: 1px solid #ddd !important;
}


    /* PEPRODEV: ocultar la fila "Comprobante cargado: Esperando archivo".
       Antes de subir nada, esa fila es ruido visual (preview vacío + placeholder).
       Solo necesitamos la fila "Cargá tu comprobante" con el input + botón. */
    html body table.woocommerce-table--upload-receipt.upload_receipt {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
    html body table.upload_receipt tbody tr:first-child,
    html body table.woocommerce-table--upload-receipt tbody tr:has(td.receipt-img-preview),
    html body td.receipt-img-preview,
    html body td.receipt-img-preview img.receipt-preview.upload,
    html body p.receipt-status.upload {
        display: none !important;
    }
    /* Fila del input upload: full width, sin la th sticky "Cargá tu comprobante" (ya tenemos el title del wrapper) */
    html body table.upload_receipt tbody tr:last-child th,
    html body table.woocommerce-table--upload-receipt tbody tr:last-child th {
        display: none !important;
    }
    html body table.upload_receipt tbody tr:last-child td,
    html body table.woocommerce-table--upload-receipt tbody tr:last-child td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

/* ============================================================
   PASO II · ENTRAR CON LA CUENTA, COMO ATAJO

   El formulario se ve siempre: quien nunca compro lo llena y listo. Entrar
   es un atajo para que Woo te complete los datos solo, no un peaje.
   (Produccion hace lo contrario, esconde el formulario hasta que entres.
   Por eso su CSS no sirve tal cual: alla el login es el protagonista y la
   tarjeta esta siempre abierta.)

   Los componentes de adentro (el boton de Google segun las guias de marca,
   los campos, el submit) si son los de produccion, mas abajo.
   ============================================================ */

/* Los dos atajos de arriba (entrar y cupon) se dibujan FUERA de form.checkout,
   asi que quedaban a lo ancho del contenedor: 1152px contra los 920 del
   formulario. 230px mas anchos que todo lo demas, que es lo que los hacia ver
   desproporcionados. Van al mismo ancho y al mismo eje. */
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.woocommerce-form-login,
body.woocommerce-checkout form.checkout_coupon {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* La barra del atajo: mas baja y mas callada que un aviso. No compite con el
   titulo de la pantalla, que es a donde tiene que ir el ojo primero. */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    margin: 0 0 12px;
    padding: 12px 18px;
    border-radius: var(--archi-r-sm);
    border: 1px solid var(--archi-line);
    background: transparent;
    font: 400 13.5px var(--archi-font-body);
    color: var(--archi-muted);
    gap: 8px;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: var(--archi-orange);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
    color: var(--archi-pink);
}

/* La tarjeta, ya desplegada. Sin display forzado: la abre y la cierra el JS de
   Woo con el link de arriba. */
body.woocommerce-checkout form.woocommerce-form-login {
    background: var(--archi-night);
    border: 1px solid var(--archi-line);
    border-radius: var(--archi-r-md);
    padding: 22px 22px 20px;
    margin: 0 auto 20px;
    max-width: 920px;
}
body.woocommerce-checkout form.woocommerce-form-login > p:first-of-type {
    font: 400 13.5px var(--archi-font-body);
    color: var(--archi-muted);
    line-height: 1.55;
    margin: 0 0 18px;
}

/* Usuario y contrasena en dos columnas: la tarjeta es un atajo, no una pagina,
   y apilados la empujaban muy abajo del formulario de verdad. */
@media (min-width: 720px) {
    body.woocommerce-checkout form.woocommerce-form-login .form-row-first,
    body.woocommerce-checkout form.woocommerce-form-login .form-row-last {
        float: none !important;
        width: calc(50% - 8px) !important;
        display: inline-block !important;
        vertical-align: top;
    }
    body.woocommerce-checkout form.woocommerce-form-login .form-row-first { margin-right: 16px !important; }
}

/* El boton de Google del plugin social entra DOS veces con el mismo id: uno
   adentro de la tarjeta y otro suelto en el medio de "Tus datos", donde no
   viene a cuento. El JS de inc/funnel.php se queda con el de la tarjeta y saca
   el otro; esto es el respaldo por si el JS no corre. */
body.woocommerce-checkout .woocommerce-billing-fields > #xs-social-login-container {
    display: none !important;
}

/* --- Los componentes de adentro, tal cual produccion --- */
    /* === Botón Google según Google Identity Branding Guidelines ===
       Spec: blanco con borde #dadce0, logo G multicolor SVG inline, Roboto-like
       font, label "Continuar con Google", border-radius 4px (no pill). */
    body.woocommerce-checkout #xs-social-login-container {
        display: flex !important;
        justify-content: center !important;
        margin: 18px 0 22px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    body.woocommerce-checkout #xs-social-login-container .xs-login {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        max-width: 320px !important;
    }
    /* Esconder cualquier elemento vacío sin texto/contenido dentro del form
       de login que esté heredando mi gradient (caso del botón naranja vacío). */
    body.woocommerce-checkout .woocommerce-form-login p.form-row:empty,
    body.woocommerce-checkout .woocommerce-form-login button:empty:not([name="login"]),
    body.woocommerce-checkout .woocommerce-form-login input[type="submit"][value=""] {
        display: none !important;
    }
    body.woocommerce-checkout #xs-social-login-container .xs-login__item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        background: #ffffff !important;
        color: #1f1f1f !important;
        border: 1px solid #dadce0 !important;
        border-radius: 4px !important;
        padding: 10px 16px !important;
        height: 44px !important;
        font-family: 'Roboto', 'Manrope', Arial, sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        letter-spacing: 0.25px !important;
        text-decoration: none !important;
        box-shadow: none !important;
        transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
        cursor: pointer !important;
    }
    body.woocommerce-checkout #xs-social-login-container .xs-login__item:hover {
        background: #f8f9fa !important;
        border-color: #d2e3fc !important;
        box-shadow: 0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15) !important;
        color: #1f1f1f !important;
        transform: none !important;
    }
    body.woocommerce-checkout #xs-social-login-container .xs-login__item:focus,
    body.woocommerce-checkout #xs-social-login-container .xs-login__item:active {
        background: #f1f3f4 !important;
    }
    /* Esconder el icono propio del plugin y reemplazar por G oficial via SVG */
    body.woocommerce-checkout #xs-social-login-container .xs-login__item--icon i,
    body.woocommerce-checkout #xs-social-login-container .xs-login__item--icon svg {
        display: none !important;
    }
    body.woocommerce-checkout #xs-social-login-container .xs-login__item--icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/><path fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/><path fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/><path fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 18px 18px !important;
    }
    body.woocommerce-checkout #xs-social-login-container .xs-login__item--label {
        font-family: 'Roboto', 'Manrope', Arial, sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        letter-spacing: 0.25px !important;
        color: #1f1f1f !important;
    }
    body.woocommerce-checkout #xs-social-login-container .wslu-color-scheme--google {
        background: #ffffff !important;
        color: #1f1f1f !important;
    }
    body.woocommerce-checkout .woocommerce-form-login .form-row {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
    }
    body.woocommerce-checkout .woocommerce-form-login .form-row-first,
    body.woocommerce-checkout .woocommerce-form-login .form-row-last {
        width: 100% !important;
        float: none !important;
    }
    body.woocommerce-checkout .woocommerce-form-login label {
        display: block !important;
        font-family: 'Manrope', Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #d6cfc1 !important;
        margin: 0 0 6px !important;
        letter-spacing: 0.02em !important;
    }
    body.woocommerce-checkout .woocommerce-form-login input[type="text"],
    body.woocommerce-checkout .woocommerce-form-login input[type="password"] {
        width: 100% !important;
        padding: 12px 16px !important;
        background: #0a0a0a !important;
        border: 1px solid #242424 !important;
        border-radius: 10px !important;
        color: #f5f1ea !important;
        font-family: 'Manrope', Arial, sans-serif !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }
    body.woocommerce-checkout .woocommerce-form-login input[type="text"]:focus,
    body.woocommerce-checkout .woocommerce-form-login input[type="password"]:focus {
        outline: none !important;
        border-color: #ff3d7f !important;
        box-shadow: 0 0 0 3px rgba(255,61,127,0.18) !important;
    }
    /* Row con remember + submit */
    body.woocommerce-checkout .woocommerce-form-login p.form-row:has(button[name="login"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 14px !important;
        justify-content: flex-start !important;
        margin: 18px 0 0 !important;
    }
    body.woocommerce-checkout .woocommerce-form-login p.form-row:has(button[name="login"]) > * {
        margin: 0 !important;
    }
    body.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-family: 'Manrope', Arial, sans-serif !important;
        font-size: 13px !important;
        color: #d6cfc1 !important;
        order: 2 !important;
    }
    body.woocommerce-checkout .woocommerce-form-login .woocommerce-form-login__rememberme input[type="checkbox"] {
        accent-color: #ff3d7f !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
    }
    /* Gradient SOLO al submit que tiene la clase oficial.
       Si hay otro button[name="login"] sin clase, NO le aplicamos el style y
       lo escondemos abajo. */
    body.woocommerce-checkout .woocommerce-form-login button.woocommerce-form-login__submit {
        background: linear-gradient(95deg, #ff3d7f 0%, #ff8a3d 100%) !important;
        background-color: #ff3d7f !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 999px !important;
        padding: 12px 32px !important;
        font-family: 'Manrope', Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        letter-spacing: 0.02em !important;
        cursor: pointer !important;
        box-shadow: 0 6px 18px rgba(255,61,127,0.28) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        order: 1 !important;
        min-width: 140px !important;
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        line-height: 1.4 !important;
        height: auto !important;
        display: inline-block !important;
    }
    body.woocommerce-checkout .woocommerce-form-login button.woocommerce-form-login__submit:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 10px 28px rgba(255,61,127,0.36) !important;
    }
    /* Esconder cualquier button[name="login"] que NO sea el oficial.
       Plugins de social login a veces inyectan buttons vacios huérfanos. */
    body.woocommerce-checkout .woocommerce-form-login button[name="login"]:not(.woocommerce-form-login__submit),
    body.woocommerce-checkout .woocommerce-form-login input[type="submit"][name="login"]:not(.woocommerce-form-login__submit) {
        display: none !important;
    }
    body.woocommerce-checkout .woocommerce-form-login .lost_password {
        font-family: 'Manrope', Arial, sans-serif !important;
        font-size: 13px !important;
        margin: 14px 0 0 !important;
        text-align: left !important;
    }
    body.woocommerce-checkout .woocommerce-form-login .lost_password a {
        color: #ff8a3d !important;
        text-decoration: underline !important;
    }


/* --- Ajustes propios, DESPUES de los componentes de produccion ---
   Van al final a proposito: produccion apila los campos y estira la tarjeta,
   que alla esta bien porque es la pantalla entera. Aca es un atajo arriba del
   formulario de verdad, asi que tiene que ocupar lo menos posible. */

/* Usuario y contrasena en dos columnas. Le gana por especificidad al
   display:block !important de produccion (0-3-2 contra 0-3-1). */
@media (min-width: 720px) {
    body.woocommerce-checkout form.woocommerce-form-login .form-row-first,
    body.woocommerce-checkout form.woocommerce-form-login .form-row-last {
        display: inline-block !important;
        width: calc(50% - 9px) !important;
        vertical-align: top !important;
        float: none !important;
        margin-bottom: 4px !important;
    }
    body.woocommerce-checkout form.woocommerce-form-login .form-row-first {
        margin-right: 14px !important;
    }
}

/* Menos aire: la tarjeta empujaba "Tus datos" fuera de la pantalla. */
body.woocommerce-checkout form.woocommerce-form-login {
    /* 888 y no 920: la barra de arriba mide 920 con 16px de padding, o sea 888
       de contenido. Con 920 la tarjeta sobresalia 35px de cada lado. */
    max-width: 888px !important;
    padding: 20px 20px 16px !important;
}
body.woocommerce-checkout form.woocommerce-form-login > p:first-of-type {
    margin: 0 0 14px !important;
}
body.woocommerce-checkout form.woocommerce-form-login .form-row {
    margin-bottom: 10px !important;
}
body.woocommerce-checkout form.woocommerce-form-login #xs-social-login-container {
    margin: 4px 0 12px !important;
}
body.woocommerce-checkout form.woocommerce-form-login .lost_password {
    margin: 8px 0 0 !important;
}

/* En celular el formulario va con 12px de sangria (regla de produccion mas
   arriba). Sin esto la barra quedaba a 16, la tarjeta a 0 y los campos a 12:
   tres bordes distintos, uno abajo del otro. */
@media (max-width: 768px) {
    body.woocommerce-checkout .woocommerce-form-login-toggle,
    body.woocommerce-checkout .woocommerce-form-coupon-toggle {
        padding-left: 12px;
        padding-right: 12px;
    }
    body.woocommerce-checkout form.woocommerce-form-login,
    body.woocommerce-checkout form.checkout_coupon {
        max-width: none !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
        padding: 18px 16px 14px !important;
    }
}

/* --- El cartelito de "se agrego al carrito" ---
   Medido en staging el 10/9: le llegaban tres cosas de afuera a la vez.
   flex-direction: row-reverse daba vuelta el orden y dejaba el boton antes
   del texto; un outline rosa de 2px se sumaba al borde verde, o sea dos
   marcos; y el padding-left de 50px, que es el hueco del tilde de Woo,
   quedaba del lado equivocado con el orden invertido. Se fijan los tres.
   El color del boton no se arregla aca: se lo comia la regla de links de
   .wp-generic__content, que con sus tres :not() suma mas especificidad que
   esta. Ahi se le agrego :not(.button). */
.wp-generic__content--woo .woocommerce-notices-wrapper .woocommerce-message,
.wp-generic__content--woo .woocommerce-notices-wrapper .woocommerce-info,
.wp-generic__content--woo .woocommerce-message,
.wp-generic__content--woo .woocommerce-info {
    flex-direction: row;
    outline: 0;
}