/* Tienda pública sobre la base Coccoa (Fase 3, lote "tienda"):
     - compra de producto      products/buy_product.html        (.cc-buy)
     - confirmación y pago     products/productConfirm.html     (.cc-confirm)
     - dirección de envío      products/send_shipping_direction.html (.cc-ship)
   Cabecera y pie: public/_tienda_head.html y public/_tienda_foot.html.

   Orden en el <head>: [Bootstrap 5.1.3 de landing/css/styles.css, solo en la compra
   de producto] -> tokens.css -> public.css -> ESTA HOJA -> [legacy/buy-product-legacy.css]
   -> public/_brand_styles.html (tema nuevo o CSS de marca anterior).

   Todas las reglas van detrás de :where(.cc-base). El <body> lleva .cc-base salvo en
   la compra de producto de una firma que todavía tiene su CSS de marca anterior
   (custom_css sin convertir): ahí estas reglas no aplican y la hoja de compatibilidad
   devuelve el aspecto de antes. :where() no suma especificidad, así que cada regla
   pesa lo mismo que el selector de siempre (p. ej. ":where(.cc-base) .btn-primary"
   = ".btn-primary"): le gana a Bootstrap por orden y el CSS avanzado de un tema
   ([data-brand-theme] ...) le gana a ella.

   Colores solo por tokens --c-*: sin tema se ve la base Coccoa (landing), con tema
   los --c-* del tema. Los checkouts de terceros (Mercado Pago, Bold, Wompi, PayU)
   dibujan lo suyo y no se tematizan. */

/* ── Contrato del CSS de marca (dashboard/ai_css.py y el event.css de siempre) ──
   Las variables --brand-* siguen existiendo para que el CSS anterior y el que genere
   la IA las pisen; por defecto ahora salen de la base Coccoa o del tema. */
:root {
  --brand-primary: var(--c-btn-bg);
  --brand-secondary: var(--c-muted);
  --brand-gradient: var(--c-btn-fill);
  --brand-icon-gradient: var(--c-hover);
  --brand-card-bg: var(--c-surface);
  --brand-card-radius: var(--c-radius-lg);
  --brand-card-shadow: var(--c-shadow-card);
  --brand-blur-brightness: 1;
  --brand-blur-amount: 56px;
  --brand-font-family: var(--c-font-heading);
  --brand-button-radius: var(--c-radius-control);
  --brand-input-radius: var(--c-radius-input);
  --brand-input-border: var(--c-input-border);
  --brand-input-bg: var(--c-input-bg);
  --brand-quantity-btn-bg: var(--c-qty-bg);
  --brand-quantity-btn-color: var(--c-qty-ink);
  --brand-quantity-btn-border: var(--c-border);
  --brand-mini-card-bg: var(--c-surface);
  --brand-muted-color: var(--c-muted);
  --brand-input-text: var(--c-ink);
  --brand-text: var(--c-ink);
}

/* ── Página ──────────────────────────────────────────────────────────────── */

/* public.css no trae reset de caja y la confirmación y la dirección de envío no cargan
   Bootstrap: sin esto, width:100% + padding de .cc-pubmain desborda a 390 px. */
:where(.cc-base),
:where(.cc-base) *,
:where(.cc-base) *::before,
:where(.cc-base) *::after { box-sizing: border-box; }

/* Bootstrap (styles.css) pone fuente, color y fondo en body y h1-h6 con especificidad
   de elemento: se repiten aquí con la misma especificidad para ganarle por orden. */
body:where(.cc-base) {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--c-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}

:where(.cc-base) h1,
:where(.cc-base) h2,
:where(.cc-base) h3,
:where(.cc-base) h4,
:where(.cc-base) h5,
:where(.cc-base) h6 {
  font-family: var(--c-font-heading);
  font-weight: 800;
  line-height: 1.15;
  color: var(--c-heading);
  letter-spacing: var(--c-heading-tracking);
  text-transform: var(--c-heading-transform);
  text-shadow: var(--c-heading-shadow);
}

:where(.cc-base) a { color: inherit; }

/* Fondo: la foto del producto, desenfocada y muy tenue sobre el color de la base.
   La foto llega en línea como --cc-bg-default; un tema con fondo propio emite
   --c-page-bg y gana (public.css). */
:where(.cc-base) .cc-bg__media {
  --cc-blur-default: var(--brand-blur-amount);
  --cc-media-opacity-default: 0.2;
}

:where(.cc-base) .cc-shop-main {
  display: block;
  min-height: calc(100vh - 160px);
}

/* Logo de Coccoa en la cabecera: rosado en la base; con un Estilo de marca, negro o
   blanco según el modo del tema (igual que el sitio de la firma). */
:where(.cc-base) .cc-shop-head__by {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex: none;
}

:where(.cc-base) .cc-shop-logo { display: none; height: 20px; width: auto; }
:where(.cc-base) .cc-shop-logo--brand { display: block; }
:where(html[data-brand-theme]) .cc-shop-logo--brand { display: none; }
:where(html[data-brand-theme][data-theme="light"]) .cc-shop-logo--light,
:where(html[data-brand-theme][data-theme="dark"]) .cc-shop-logo--dark { display: block; }

:where(.cc-base) .cc-pubhead__brand { text-decoration: none; }
:where(.cc-base) a.cc-pubhead__brand:hover .cc-pubhead__name { text-decoration: underline; text-underline-offset: 3px; }

/* Pie */
:where(.cc-base) .cc-shop-foot { margin-top: calc(48px * var(--c-space)); }

:where(.cc-base) .cc-shop-foot__links,
:where(.cc-base) .cc-shop-foot__social {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

:where(.cc-base) .cc-shop-foot__links a,
:where(.cc-base) .cc-shop-foot__social a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 8px;
  border-radius: var(--c-radius-control);
}

:where(.cc-base) .cc-shop-foot__social a { font-size: 17px; }
:where(.cc-base) .cc-shop-foot__links a:hover,
:where(.cc-base) .cc-shop-foot__social a:hover { background: var(--c-hover); }

/* ── Componentes de Bootstrap que usa la compra de producto ─────────────────
   (el modal de utils.js, el desplegable de países, el carrusel y los campos) */

:where(.cc-base) .form-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
}

:where(.cc-base) .form-control,
:where(.cc-base) .form-select {
  min-height: 48px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--brand-input-text);
  background-color: var(--brand-input-bg);
  border: 1px solid var(--brand-input-border);
  border-radius: var(--brand-input-radius);
  box-shadow: none;
}

/* Flecha del select dibujada con el token --c-muted (la de Bootstrap es un SVG con color
   fijo que no se lee en oscuro): se lee con la base, con un tema claro y con uno oscuro. */
:where(.cc-base) .form-select {
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-muted) 50%),
    linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 16px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

:where(.cc-base) .form-control::placeholder { color: var(--c-placeholder); opacity: 1; }

:where(.cc-base) .form-control:focus,
:where(.cc-base) .form-select:focus {
  color: var(--brand-input-text);
  background-color: var(--brand-input-bg);
  border-color: var(--c-border-hover);
  box-shadow: 0 0 0 4px var(--c-focus-ring);
  outline: 0;
}

:where(.cc-base) .form-control:disabled,
:where(.cc-base) .form-select:disabled {
  background-color: var(--c-hover);
  color: var(--c-muted);
  opacity: 1;
}

:where(.cc-base) .form-select option { background: var(--c-surface); color: var(--c-ink); }

/* Botón principal (Comprar, Ver perfil, Sí, son correctos) = botón negro de la landing */
:where(.cc-base) .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 calc(22px * var(--c-space));
  border: 1px solid var(--c-btn-outline);
  border-radius: var(--brand-button-radius);
  background: var(--brand-gradient);
  color: var(--c-btn-fill-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-transform: var(--c-btn-transform);
  text-decoration: none;
  box-shadow: none;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

:where(.cc-base) .btn-primary:hover,
:where(.cc-base) .btn-primary:focus,
:where(.cc-base) .btn-primary:active {
  background: var(--brand-gradient);
  color: var(--c-btn-fill-ink);
  border-color: var(--c-btn-outline);
}

:where(.cc-base) .btn-primary:hover { opacity: 0.88; }
:where(.cc-base) .btn-primary:focus-visible { box-shadow: 0 0 0 4px var(--c-focus-ring); }
:where(.cc-base) .btn-primary:disabled { background: var(--brand-gradient); color: var(--c-btn-fill-ink); opacity: 0.55; }

/* Botón deshabilitado de compra (agotado / esperando liberación) */
:where(.cc-base) .btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: transparent;
  color: var(--c-muted);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--brand-button-radius);
  font-family: inherit;
  font-weight: 700;
}

:where(.cc-base) .btn-outline-dark:disabled { color: var(--c-muted); background: var(--c-hover); opacity: 1; }

/* Desplegable de países */
:where(.cc-base) .dropdown-menu {
  padding: 6px;
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  box-shadow: var(--c-shadow-pop);
}

:where(.cc-base) .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--c-ink);
}

:where(.cc-base) .dropdown-item:hover,
:where(.cc-base) .dropdown-item:focus,
:where(.cc-base) .dropdown-item:active {
  color: var(--c-ink);
  background-color: var(--c-hover);
}

/* Modal "¿Tus datos están correctos?" (initPurchaseConfirm, utils.js) */
:where(.cc-base) .purchase-confirm-modal .modal-content {
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-dialog);
  box-shadow: var(--c-shadow-dialog);
}

:where(.cc-base) .purchase-confirm-modal .modal-header,
:where(.cc-base) .purchase-confirm-modal .modal-footer { border-color: var(--c-border); padding: 16px 20px; }
:where(.cc-base) .purchase-confirm-modal .modal-body { padding: 18px 20px; }
:where(.cc-base) .purchase-confirm-modal .modal-title { font-size: calc(20px * var(--c-heading-scale)); }
:where(.cc-base) .purchase-confirm-modal .modal-body p { color: var(--c-muted); }
:where(.cc-base) .purchase-confirm-modal .modal-body dt { color: var(--c-muted) !important; }
:where(.cc-base) .purchase-confirm-modal .modal-body dd { color: var(--c-ink); }

:where(.cc-base) .purchase-confirm-modal .btn-outline-secondary {
  min-height: 48px;
  padding: 0 18px;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--brand-button-radius);
  font-weight: 700;
}

:where(.cc-base) .purchase-confirm-modal .btn-outline-secondary:hover {
  color: var(--c-ink);
  background: var(--c-hover);
  border-color: var(--c-border-hover);
}

:where(html[data-theme="dark"]) .cc-base .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ── Compra de producto (.cc-buy) ───────────────────────────────────────── */

:where(.cc-base) .cc-buy__hero { padding: calc(28px * var(--c-space)) 0 calc(8px * var(--c-space)); }

:where(.cc-base) .cc-buy__wrap {
  max-width: 1070px;
  padding-left: var(--c-gutter);
  padding-right: var(--c-gutter);
}

:where(.cc-base) .cc-buy__grid {
  --bs-gutter-x: 24px;
  --bs-gutter-y: 20px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  :where(.cc-base) .cc-buy__grid { --bs-gutter-x: 40px; }
  :where(.cc-base) .cc-buy__media { position: sticky; top: 84px; }
}

:where(.cc-base) .cc-buy__gallery {
  overflow: hidden;
  background: var(--c-surface);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--brand-card-radius);
  box-shadow: var(--c-shadow-card);
}

:where(.cc-base) .cc-buy__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--c-surface);
}

:where(.cc-base) .cc-buy__gallery .carousel-control-prev,
:where(.cc-base) .cc-buy__gallery .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 44px;
  height: 44px;
  margin: 0 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  /* Sobre la foto: velo oscuro fijo para que la flecha blanca se lea en cualquier imagen */
  background: rgba(21, 21, 21, 0.45);
  opacity: 1;
}

:where(.cc-base) .cc-buy__gallery .carousel-control-prev:hover,
:where(.cc-base) .cc-buy__gallery .carousel-control-next:hover { background: rgba(21, 21, 21, 0.65); }

:where(.cc-base) .cc-buy__gallery .carousel-control-prev-icon,
:where(.cc-base) .cc-buy__gallery .carousel-control-next-icon { width: 18px; height: 18px; }

:where(.cc-base) .cc-buy__nophoto {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  color: var(--c-muted);
  background: var(--c-hover);
  font-size: 44px;
}

:where(.cc-base) .cc-buy__card {
  color: var(--c-ink);
  background: var(--brand-card-bg);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--brand-card-radius);
  box-shadow: var(--brand-card-shadow);
  padding: calc(28px * var(--c-space));
}

/* Tarjetas de vidrio solo con data-brand-glass en <html>, como .cc-surface en public.css:
   backdrop-filter con cualquier valor (también blur(0)) vuelve a la tarjeta contenedor
   de lo position:fixed que tenga dentro (p. ej. lo que inyecta una pasarela). */
:where(html[data-brand-glass] .cc-base) .cc-buy__card,
:where(html[data-brand-glass] .cc-base) .cc-confirm__card {
  -webkit-backdrop-filter: blur(var(--c-surface-blur));
  backdrop-filter: blur(var(--c-surface-blur));
}

:where(.cc-base) .cc-buy__heading {
  margin: 8px 0 12px;
  font-size: calc(30px * var(--c-heading-scale));
  line-height: 1.12;
  overflow-wrap: anywhere;
}

:where(.cc-base) .cc-buy__desc {
  color: var(--c-muted);
  font-size: 15.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

:where(.cc-base) .cc-buy__desc p { margin: 0 0 10px; }
:where(.cc-base) .cc-buy__desc > :last-child { margin-bottom: 0; }
:where(.cc-base) .cc-buy__desc img { max-width: 100%; height: auto; }
:where(.cc-base) .cc-buy__desc a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }

:where(.cc-base) .cc-buy__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 18px;
}

:where(.cc-base) .cc-buy__cash { display: none; }

:where(.cc-base) .cc-buy__amount {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

:where(.cc-base) .cc-buy__ship { font-size: 15px; font-weight: 600; color: var(--c-muted); }

:where(.cc-base) .cc-buy__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--c-muted);
}

/* El marcado conserva .text-secondary .small (Bootstrap, con !important) para el CSS de
   marca anterior; en la base se repintan con tokens. */
:where(.cc-base) .cc-buy__note .small { font-size: inherit; }
:where(.cc-base) .cc-buy__note .text-secondary { color: var(--c-muted) !important; }
:where(.cc-base) .cc-buy__note .bi { color: var(--c-brand-ink) !important; }

:where(.cc-base) .cc-buy__form {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--c-space));
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-border);
}

:where(.cc-base) .cc-buy__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

:where(.cc-base) .cc-buy__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(16px * var(--c-space));
}

@media (min-width: 576px) {
  :where(.cc-base) .cc-buy__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

:where(.cc-base) .cc-buy__pair > :only-child { grid-column: 1 / -1; }

/* Teléfono: bandera (desplegable de Bootstrap) + campo con máscara */
:where(.cc-base) .cc-buy__phone .input-group { flex-wrap: nowrap; }

:where(.cc-base) .cc-buy__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
  color: var(--brand-input-text);
  background: var(--brand-input-bg);
  border: 1px solid var(--brand-input-border);
  border-radius: var(--brand-input-radius);
}

:where(.cc-base) .cc-buy__flag:hover,
:where(.cc-base) .cc-buy__flag:focus { color: var(--brand-input-text); background: var(--c-hover); }
:where(.cc-base) .cc-buy__flag:focus { box-shadow: 0 0 0 4px var(--c-focus-ring); }

:where(.cc-base) .responsive-input {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 16px;
  color: var(--brand-input-text);
  background: var(--brand-input-bg);
  border: 1px solid var(--brand-input-border);
  border-radius: var(--brand-input-radius);
}

:where(.cc-base) .cc-buy__submit {
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  font-size: 17px;
}

:where(.cc-base) .cc-buy__wait { margin: 2px 0 0; text-align: center; font-size: 14px; }

/* Igual que en el event.css de siempre: el gris apagado de la tarjeta sale del contrato. */
:where(.cc-base) .event-card .text-muted,
:where(.cc-base) .more-events-section .text-muted,
:where(.cc-base) .cta-section .text-muted {
  color: var(--brand-muted-color) !important;
}

/* Más eventos de la firma */
:where(.cc-base) .more-events-section { padding: calc(40px * var(--c-space)) 0 0; }

/* Firmas 539/804 y "Mitho Marathon" esconden todo el contenido: sin caja vacía. */
:where(.cc-base) .more-events-section:not(:has(.mini-event-card-inner, .firm-name-title)) { display: none; }

:where(.cc-base) .more-events-title {
  margin: 0 0 18px;
  font-family: var(--brand-font-family);
  font-size: calc(22px * var(--c-heading-scale));
}

:where(.cc-base) .cc-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: calc(18px * var(--c-space));
  margin: 0;
}

:where(.cc-base) .cc-mini {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

:where(.cc-base) .mini-event-card-inner {
  height: 100%;
  overflow: hidden;
  color: var(--c-ink);
  background: var(--brand-mini-card-bg);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--brand-card-radius);
  box-shadow: var(--c-shadow-card);
}

:where(.cc-base) .cc-mini__layout { display: flex; flex-direction: column; height: 100%; }

:where(.cc-base) .cc-mini__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-hover);
}

:where(.cc-base) .cc-mini__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

:where(.cc-base) .cc-mini__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: calc(16px * var(--c-space));
}

:where(.cc-base) .mini-event-title {
  margin: 0 0 10px;
  font-family: var(--brand-font-family);
  font-size: 17px;
  overflow-wrap: anywhere;
}

:where(.cc-base) .cc-mini__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
  font-size: 14px;
}

:where(.cc-base) .mini-event-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-icon-gradient);
  color: var(--c-muted);
  font-size: 13px;
}

:where(.cc-base) .more-events-section .badge {
  padding: 3px 9px;
  border-radius: var(--c-radius-pill);
  font-size: 12px;
  font-weight: 700;
}

/* Bootstrap marca estas utilidades con !important */
:where(.cc-base) .more-events-section .badge.bg-success {
  background-color: var(--c-btn-bg) !important;
  color: var(--c-btn-ink);
}

:where(.cc-base) .more-events-section .badge.bg-danger {
  background-color: transparent !important;
  color: var(--c-muted);
  border: 1px solid var(--c-border-strong);
}

:where(.cc-base) .mini-event-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--c-btn-fill-ink);
  background: var(--brand-gradient);
  border: 1px solid var(--c-btn-outline);
  border-radius: var(--brand-button-radius);
  font-weight: 700;
  text-transform: var(--c-btn-transform);
}

:where(.cc-base) .mini-event-link:hover { color: var(--c-btn-fill-ink); opacity: 0.88; }

/* Bloque de la firma */
:where(.cc-base) .cc-buy__firm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: calc(22px * var(--c-space));
  padding: calc(20px * var(--c-space));
  background: var(--brand-card-bg);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--brand-card-radius);
  box-shadow: var(--c-shadow-card);
}

:where(.cc-base) .cc-buy__firm-logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: cover;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}

:where(.cc-base) .cc-buy__firm-copy { flex: 1; min-width: min(100%, 220px); }
:where(.cc-base) .firm-name-title { margin: 0 0 4px; font-family: var(--brand-font-family); font-size: calc(20px * var(--c-heading-scale)); }
:where(.cc-base) .cc-buy__firm-copy .text-muted { margin: 0 0 12px; font-size: 15px; }
:where(.cc-base) .cc-buy__profile-btn .small,
:where(.cc-base) .cta-btn .small { font-size: inherit; }

/* Anuncio de Coccoa */
:where(.cc-base) .cta-section {
  width: calc(100% - 2 * var(--c-gutter));
  max-width: calc(1070px - 2 * var(--c-gutter));
  margin: calc(40px * var(--c-space)) auto 0;
  padding: calc(32px * var(--c-space)) calc(24px * var(--c-space));
  text-align: center;
  color: var(--c-ink);
  background: var(--brand-card-bg);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--brand-card-radius);
  box-shadow: var(--c-shadow-card);
}

:where(.cc-base) .cta-section .container { max-width: 560px; padding: 0; }
:where(.cc-base) .cta-title { margin: 0 0 10px; font-family: var(--brand-font-family); font-size: calc(24px * var(--c-heading-scale)); }
:where(.cc-base) .cta-section p { margin: 0 auto 18px; line-height: 1.55; }

:where(.cc-base) .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--brand-button-radius);
  font-weight: 700;
}

:where(.cc-base) .cta-btn:hover { color: var(--c-ink); background: var(--c-hover); border-color: var(--c-border-hover); }

@media (max-width: 575.98px) {
  :where(.cc-base) .cc-buy__card { padding: calc(20px * var(--c-space)); }
  :where(.cc-base) .cc-buy__heading { font-size: calc(26px * var(--c-heading-scale)); }
  :where(.cc-base) .cc-buy__amount { font-size: 26px; }
}

/* ── Confirmación y pago (.cc-confirm) ──────────────────────────────────── */

:where(.cc-base) .cc-confirm__intro { margin-bottom: calc(20px * var(--c-space)); }

:where(.cc-base) .cc-confirm__title {
  margin: 6px 0 0;
  font-size: calc(30px * var(--c-heading-scale));
  line-height: 1.12;
}

:where(.cc-base) .cc-confirm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(20px * var(--c-space));
  align-items: start;
}

:where(.cc-base) .cc-confirm__media { display: none; }

:where(.cc-base) .cc-confirm__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--c-surface);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-card);
}

@media (min-width: 900px) {
  :where(.cc-base) .cc-confirm__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; }
  :where(.cc-base) .cc-confirm__media { display: block; position: sticky; top: 84px; }
  :where(.cc-base) .cc-confirm__thumb { display: none; }
}

:where(.cc-base) .cc-confirm__card {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--c-space));
  padding: calc(24px * var(--c-space));
  color: var(--c-ink);
  background: var(--c-surface);
  border: var(--c-border-width) var(--c-border-style) var(--c-border);
  border-radius: var(--c-radius-lg);
  box-shadow: var(--c-shadow-card);
}

:where(.cc-base) .cc-confirm__product { display: flex; align-items: center; gap: 14px; min-width: 0; }

:where(.cc-base) .cc-confirm__thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
  background: var(--c-hover);
}

:where(.cc-base) .cc-confirm__product-name { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
:where(.cc-base) .cc-confirm__product-meta { margin: 2px 0 0; color: var(--c-muted); font-size: 14px; }

:where(.cc-base) .cc-confirm__timer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--c-ink);
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-border);
  border-radius: var(--c-radius-card);
}

:where(.cc-base) .cc-confirm__timer .bi { flex: none; margin-top: 1px; font-size: 18px; color: var(--c-brand-ink); }

:where(.cc-base) .cc-confirm__section { padding-top: 14px; border-top: 1px solid var(--c-border); }

:where(.cc-base) .cc-confirm__section-title {
  margin: 0 0 8px;
  font-family: var(--c-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: none;
  color: var(--c-muted);
}

:where(.cc-base) .cc-confirm__dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 14px;
  margin: 0;
  font-size: 15px;
}

:where(.cc-base) .cc-confirm__dl dt { font-size: 13px; font-weight: 600; color: var(--c-muted); }
:where(.cc-base) .cc-confirm__dl dd { margin: 0 0 8px; font-weight: 600; color: var(--c-ink); overflow-wrap: anywhere; }

@media (min-width: 576px) {
  :where(.cc-base) .cc-confirm__dl { grid-template-columns: 9em minmax(0, 1fr); gap: 6px 14px; }
  :where(.cc-base) .cc-confirm__dl dt { font-size: 15px; }
  :where(.cc-base) .cc-confirm__dl dd { margin: 0; }
}

:where(.cc-base) .cc-confirm__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}

:where(.cc-base) .cc-confirm__total span { font-weight: 700; color: var(--c-muted); }
:where(.cc-base) .cc-confirm__total strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--c-ink); }

/* Evento recomendado (upsell) */
:where(.cc-base) .cc-confirm__upsell {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: var(--c-brand-soft);
  border: 1px solid var(--c-brand-border);
  border-radius: var(--c-radius-card);
}

:where(.cc-base) .cc-confirm__upsell-lead { grid-column: 1 / -1; margin: 0; font-weight: 700; }
:where(.cc-base) .cc-confirm__upsell img { width: 88px; height: 110px; object-fit: cover; border-radius: var(--c-radius-card); }
:where(.cc-base) .cc-confirm__upsell p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.45; }
:where(.cc-base) .cc-confirm__upsell strong { color: var(--c-ink); }

/* Bloque de pasarelas: su marcado queda igual que antes (botones .btn .btn-outline-dark
   .p-4 .mt-2 con estilo en línea, formularios de PayU y Wompi, contenedores de Mercado
   Pago y Bold). Aquí solo se pinta el botón propio "Ir a pagar" como el botón negro de
   la base; los botones e iframes de cada pasarela los dibuja la pasarela. */
:where(.cc-base) .cc-confirm__pay { position: relative; display: flex; flex-direction: column; gap: 4px; }
:where(.cc-base) .cc-confirm__pay form { margin: 0; }

:where(.cc-base) .cc-confirm__pay .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font-family: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: var(--c-btn-transform);
  cursor: pointer;
  border-style: solid;
  border-color: var(--c-btn-outline);
  border-radius: var(--c-radius-control);
  color: var(--c-btn-fill-ink);
  background: var(--c-btn-fill);
  transition: opacity 0.15s ease;
}

:where(.cc-base) .cc-confirm__pay .btn:hover { opacity: 0.88; }
:where(.cc-base) .cc-confirm__pay .btn:focus-visible { outline: 2px solid var(--c-pink); outline-offset: 2px; }
:where(.cc-base) .cc-confirm__pay .p-4 { padding: 14px 20px; }
:where(.cc-base) .cc-confirm__pay .mt-2 { margin-top: 8px; }

/* Rótulos "Tarjeta local / internacional" (en línea, color fijo de antes): legibles
   también con un tema oscuro. */
:where(.cc-base) .cc-confirm__pay span[style*="#2f4858"] { color: var(--c-ink) !important; }

/* ── Dirección de envío (.cc-ship) ─────────────────────────────────────── */

:where(.cc-base) .cc-ship__wrap { max-width: 640px; }

:where(.cc-base) .cc-ship__card {
  padding: calc(28px * var(--c-space));
  border-radius: var(--c-radius-lg);
}

:where(.cc-base) .cc-ship__title { margin: 6px 0 6px; font-size: calc(28px * var(--c-heading-scale)); line-height: 1.12; }
:where(.cc-base) .cc-ship__lead { margin: 0; color: var(--c-muted); line-height: 1.55; }

:where(.cc-base) .cc-ship__order {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 12px;
  font-size: 14.5px;
  background: var(--c-hover);
  border-radius: var(--c-radius-card);
}

:where(.cc-base) .cc-ship__form { display: flex; flex-direction: column; gap: calc(16px * var(--c-space)); margin-top: 22px; }
:where(.cc-base) .cc-ship__field { display: flex; flex-direction: column; gap: 7px; }
:where(.cc-base) .cc-ship__label { font-size: 14px; font-weight: 700; }
:where(.cc-base) .cc-ship__hint { font-weight: 500; color: var(--c-muted); }

:where(.cc-base) #map {
  width: 100%;
  height: 320px;
  overflow: hidden;
  background: var(--c-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius-card);
}

@media (max-width: 575.98px) {
  :where(.cc-base) .cc-ship__card,
  :where(.cc-base) .cc-confirm__card { padding: calc(20px * var(--c-space)); }
  :where(.cc-base) #map { height: 260px; }
}