/* ============================================================
   HARDY — Carrito y checkout de bloques.

   WooCommerce Blocks renderiza el checkout con React y NO admite
   sobrescribir los templates PHP: todo el diseño se hace desde acá.
   Se carga solo en carrito y checkout (ver hardy_assets en functions.php).

   Se apoya en los tokens de hardy-base.css: --crema, --tinta, --tierra,
   --linea, --f-display, --f-ui, --r, --t.
   ============================================================ */

/* ============================================================
   1 · Contenedor

   page.php envuelve el contenido en .wrap.prosa, un ancho de lectura
   de 680px. Adentro de eso el checkout nunca puede armar dos columnas:
   Blocks decide el layout midiendo su propio contenedor. Acá lo
   liberamos solo en estas dos páginas.
   ============================================================ */
.woocommerce-checkout .wrap.prosa,
.woocommerce-cart .wrap.prosa {
  max-width: var(--ancho);
  width: 100%;
}

.woocommerce-checkout .pagina-cuerpo,
.woocommerce-cart .pagina-cuerpo {
  padding-bottom: 90px;
}

/* El encabezado de página es un hero editorial: padding-block 150px y un
   h1 de hasta 72px. Correcto para "Historia", ruidoso para una caja, donde
   lo único que importa es el formulario. Se comprime sin romper la marca
   (el h1 sigue en Fraunces, solo baja de escala). */
.woocommerce-checkout .pagina-cab,
.woocommerce-cart .pagina-cab {
  padding-block: 118px 18px;
}

.woocommerce-checkout .pagina-cab h1,
.woocommerce-cart .pagina-cab h1 {
  font-size: clamp(30px, 3.2vw, 40px);
}

/* ============================================================
   2 · Layout de dos columnas

   Blocks aplica is-large/is-medium/is-small por ancho de contenedor.
   Con el contenedor ya liberado esto entra solo, pero lo fijamos para
   que no dependa de que su ResizeObserver haya corrido.
   ============================================================ */
@media (min-width: 1000px) {
  .wc-block-checkout__main,
  .wc-block-cart__main {
    flex: 1 1 58%;
    max-width: 58%;
    padding-right: 56px;
  }

  .wc-block-checkout__sidebar,
  .wc-block-cart__sidebar {
    flex: 1 1 42%;
    max-width: 42%;
  }

  /* El resumen acompaña el scroll: el total siempre a la vista. */
  .wc-block-components-sidebar {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
}

/* ============================================================
   3 · Tipografía y color
   ============================================================ */
.wc-block-checkout,
.wc-block-cart {
  font-family: var(--f-ui);
  color: var(--tinta);
}

/* Títulos de cada paso: Contacto, Dirección, Envío, Pago. */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary .wc-block-components-panel__button {
  font-family: var(--f-display) !important;
  font-weight: 400 !important;
  font-size: 21px !important;
  letter-spacing: -0.005em;
  color: var(--tinta) !important;
}

.wc-block-components-checkout-step__description {
  font-family: var(--f-ui);
  font-size: 13px;
  color: rgba(28, 25, 22, 0.62);
}

/* Numeración de pasos: da sensación de avance sin paginar. */
.wc-block-components-checkout-step--with-step-number
  .wc-block-components-checkout-step__title::before {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--tierra);
}

/* ============================================================
   4 · Campos

   El checkout de bloques usa labels flotantes. Se respeta ese
   comportamiento y solo se cambia la piel.
   ============================================================ */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__select {
  font-family: var(--f-ui) !important;
  font-size: 15px !important;
  color: var(--tinta) !important;
  background: var(--blanco) !important;
  border: 1px solid var(--linea) !important;
  border-radius: var(--r) !important;
  padding: 22px 14px 8px !important;
  transition: border-color 0.3s var(--t), box-shadow 0.3s var(--t);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--tinta) !important;
  box-shadow: 0 0 0 1px var(--tinta) !important;
  outline: none !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
  font-family: var(--f-ui) !important;
  font-size: 14px;
  color: rgba(28, 25, 22, 0.55) !important;
}

.wc-block-components-text-input.is-active label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 25, 22, 0.5) !important;
}

/* ---------- Ritmo vertical ----------

   El formulario de direccion es un flex que envuelve con `row-gap: 0`, y
   WooCommerce compensa poniendole `margin-top: 12px` a algunos campos
   sueltos. Los que no lo llevan (pais, provincia) quedan pegados a la fila
   de arriba y el ritmo sale irregular. Se resuelve al reves: separacion
   uniforme en el contenedor y cero margen por campo. */
.wc-block-components-address-form,
.wc-block-components-address-form.wc-block-components-address-form {
  row-gap: 14px;
  column-gap: 14px;
}

.wc-block-components-address-form > * {
  margin-top: 0 !important;
}

/* Los desplegables (pais, provincia) llevan el mismo margen de 12px pero
   un nivel mas adentro, asi que la regla de arriba no los alcanza: el
   select cae 12px respecto del campo de al lado y la fila queda torcida. */
.wc-block-components-address-form .wc-blocks-components-select,
.wc-block-components-address-form .wc-blocks-components-select__container {
  margin-top: 0 !important;
}

/* Aire entre pasos: contacto, direccion, envio, pago. Editorial, no apretado. */
.wc-block-components-checkout-step {
  padding-bottom: 38px;
}

.wc-block-components-checkout-step__heading {
  margin-bottom: 18px;
}

/* La nota de "compra como invitado" no es un campo: no merece el mismo aire. */
.wc-block-checkout__guest-checkout-notice {
  margin-top: 6px !important;
  font-size: 13px;
  color: rgba(28, 25, 22, 0.6);
}

/* Casillas: cuadradas, como el resto del sistema. */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border-radius: 2px;
  border: 1px solid var(--linea);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--tinta);
  border-color: var(--tinta);
}
.wc-block-components-checkbox__label {
  font-size: 14px;
  color: rgba(28, 25, 22, 0.8);
}

/* ============================================================
   5 · Botones
   ============================================================ */
.wc-block-components-button:not(.is-link) {
  background: var(--tinta) !important;
  color: var(--crema) !important;
  border: 1px solid var(--tinta) !important;
  border-radius: var(--r) !important;
  font-family: var(--f-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  min-height: 52px !important;
  padding: 16px 28px !important;
  transition: background 0.35s var(--t), border-color 0.35s var(--t),
    transform 0.35s var(--t);
}

/* El boton de finalizar es la accion principal de toda la pantalla:
   ancho completo y algo mas alto que el resto. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  width: 100% !important;
  min-height: 60px !important;
  font-size: 13px !important;
}

.wc-block-components-button:not(.is-link):hover {
  background: var(--tierra) !important;
  border-color: var(--tierra) !important;
  color: var(--blanco) !important;
  transform: translateY(-1px);
}

.wc-block-components-button:not(.is-link):disabled {
  opacity: 0.45;
  transform: none;
}

/* Enlaces de acción secundaria (editar, volver, quitar). */
.wc-block-components-button.is-link {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--tierra);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   6 · Resumen del pedido
   ============================================================ */
/* Blocks pinta el formulario de blanco puro (#fff) y la barra lateral de
   un gris propio, y despues nuestra tarjeta encima: quedan tres fondos
   distintos peleandose. Se deja uno solo. El formulario respira sobre la
   crema de la marca y el resumen es la unica tarjeta de la pantalla. */
/* El bloque imprime sus colores como <style> inline con el selector
   `body.woocommerce-checkout .wc-block-checkout__main` (0,2,1). Para
   ganarle sin `!important` alcanza con encadenar una clase mas. */
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__main,
body.woocommerce-cart .wc-block-cart .wc-block-cart__main {
  background: transparent;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar,
body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar {
  background: transparent;
  padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 6px 22px 10px;
}

.wc-block-components-order-summary__content {
  padding: 0;
}

/* En mobile el resumen es un acordeon y su titulo trae borde propio: dentro
   de nuestra tarjeta queda un marco adentro de otro. Se usa una linea
   divisoria simple en su lugar. */
.wc-block-checkout .wc-block-components-checkout-order-summary__title,
.wc-block-cart .wc-block-components-checkout-order-summary__title {
  border-top: 0;
  border-bottom: 1px solid var(--linea);
  padding: 6px 0 14px;
}

/* Miniatura del producto: un anteojo se reconoce por la foto, no por
   el nombre. Vale la pena que se vea. */
.wc-block-components-order-summary-item__image img {
  border-radius: var(--r);
  border: 1px solid var(--linea);
  background: var(--crema);
}

.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--tinta);
}

.wc-block-components-product-metadata {
  font-family: var(--f-ui);
  font-size: 12px;
  color: rgba(28, 25, 22, 0.6);
}

.wc-block-components-totals-item {
  font-family: var(--f-ui);
  font-size: 14px;
  padding: 10px 20px;
}

.wc-block-components-totals-item__label {
  color: rgba(28, 25, 22, 0.72);
}

/* ---------- Una sola divisoria por seccion ----------

   WooCommerce pone `border-top` en tres niveles anidados a la vez —el bloque
   de totales, su envoltorio y la fila del total—, asi que donde deberia
   haber una linea aparecen dos o tres casi pegadas. Se apagan todas y se
   vuelve a dibujar una sola donde corresponde. */
.wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-checkout-order-summary-totals-block,
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  border-top: 0;
}

/* Separacion entre el resumen de items y los totales. */
.wp-block-woocommerce-cart-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
  border-bottom: 1px solid var(--linea);
}

/* El total, con jerarquía real y su unica linea. */
.wc-block-checkout .wc-block-components-totals-footer-item,
.wc-block-cart .wc-block-components-totals-footer-item {
  border-top: 1px solid var(--linea);
  padding: 18px 20px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--tinta);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--tinta);
}

/* Envío gratis: que se lea como beneficio, no como una fila más. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
  color: var(--verde);
  font-weight: 600;
}

/* ============================================================
   7 · Opciones de envío y de pago
   ============================================================ */
.wc-block-components-radio-control__option {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  margin-bottom: 10px;
  padding: 16px 16px 16px 48px;
  background: var(--blanco);
  transition: border-color 0.3s var(--t), background 0.3s var(--t);
}

.wc-block-components-radio-control__option:hover {
  border-color: rgba(28, 25, 22, 0.3);
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border-color: var(--tinta);
  background: var(--crema);
}

.wc-block-components-radio-control__label {
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--tinta);
}

.wc-block-components-radio-control__secondary-label {
  font-family: var(--f-ui);
  font-weight: 600;
  color: var(--verde);
}

.wc-block-components-radio-control__input:checked {
  border-color: var(--tinta);
  background: var(--tinta);
  box-shadow: inset 0 0 0 3px var(--blanco);
}

/* ============================================================
   8 · Avisos
   ============================================================ */
.wc-block-components-notice-banner {
  border-radius: var(--r);
  font-family: var(--f-ui);
  font-size: 14px;
}
.wc-block-components-notice-banner.is-error {
  border-color: var(--bordo);
  background: rgba(94, 43, 43, 0.06);
}
.wc-block-components-notice-banner.is-success {
  border-color: var(--verde);
  background: rgba(49, 64, 47, 0.06);
}

/* ============================================================
   9 · Carrito
   ============================================================ */
.wc-block-cart-items__header {
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 25, 22, 0.55);
  /* Sin borde propio: WooCommerce ya le pone borde superior a las celdas de
     la primera fila, un pixel mas abajo y con otra opacidad. Las dos juntas
     se ven como una linea gruesa y bicolor. Se deja solo la de la fila. */
  border-bottom: 0;
}

/* Divisorias entre productos, todas en el mismo tono del sistema. */
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__image,
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__product,
.wc-block-cart .wc-block-cart-items .wc-block-cart-item__total {
  border-top-color: var(--linea);
}

.wc-block-cart-item__image img {
  border-radius: var(--r);
  border: 1px solid var(--linea);
  background: var(--crema);
}

.wc-block-components-product-name {
  font-family: var(--f-display);
  font-size: 18px;
  color: var(--tinta);
  text-decoration: none;
}

.wc-block-cart__submit-button {
  width: 100%;
}

/* Titulo de la columna de totales, al mismo nivel que los demas. */
.wc-block-cart__totals-title {
  font-family: var(--f-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(28, 25, 22, 0.55) !important;
  padding-bottom: 4px;
}

/* ---------- Selector de cantidad ----------

   Venia en 21px de alto: imposible de acertar con el dedo. La guia de
   accesibilidad de WCAG pide 24px como minimo absoluto y en la practica
   un objetivo tactil comodo son 44. Se lleva a 40 con los signos separados. */
.wc-block-components-quantity-selector {
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--blanco);
  min-height: 40px;
  max-width: 116px;
}

.wc-block-components-quantity-selector::after {
  display: none; /* el borde redondeado propio de Blocks, que ya reemplazamos */
}

.wc-block-components-quantity-selector__input {
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--tinta);
  background: transparent;
  min-height: 38px;
}

.wc-block-components-quantity-selector__button {
  font-family: var(--f-ui);
  font-size: 18px;
  color: var(--tinta);
  opacity: 0.65;
  min-width: 34px;
  transition: opacity 0.25s var(--t), color 0.25s var(--t);
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
  opacity: 1;
  color: var(--tierra);
}

/* Quitar del carrito: presente pero discreto. Es una salida, no una accion
   que queramos destacar. */
.wc-block-cart-item__remove-link {
  font-family: var(--f-ui) !important;
  font-size: 12px !important;
  color: rgba(28, 25, 22, 0.5) !important;
  text-underline-offset: 3px;
  transition: color 0.25s var(--t);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--bordo) !important;
}

/* Fila del producto: mas aire, y la miniatura con presencia. */
.wc-block-cart-items__row {
  padding: 22px 0;
}

.wc-block-cart-item__image img {
  width: 92px;
  height: auto;
}

.wc-block-cart-item__total .wc-block-components-product-price {
  font-family: var(--f-display);
  font-size: 18px;
}

/* ============================================================
   10 · Carrito vacío

   WooCommerce lo resuelve con una carita llorando enorme. Para una marca
   editorial de Buenos Aires es lo contrario de lo que queremos: el carrito
   vacío no es una desgracia, es el principio. Se saca el icono y se deja
   respirar el texto y la grilla de productos, que es lo unico util acá.
   ============================================================ */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before,
.wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before {
  display: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block > h2:first-child {
  font-family: var(--f-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  padding-top: 40px;
  margin-bottom: 8px;
}

/* El separador punteado no pertenece al sistema: una linea fina alcanza. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  border: 0;
  border-top: 1px solid var(--linea);
  max-width: 120px;
  margin: 26px auto 46px;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
  content: none;
}

.wp-block-woocommerce-empty-cart-block > h2:nth-of-type(2) {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 26px;
}

/* ---------- Grilla de productos del carrito vacío ----------

   Es el bloque "Nuevos en la tienda" de WooCommerce, que trae su propio
   diseño: botones tipo pildora (radio 9999px) en un gris pizarra que no
   pertenece a la paleta, e imagenes sin tope de ancho que se desbordan de
   su celda —por eso la cuarta tarjeta quedaba fuera de cuadro. */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  gap: 26px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  margin: 0;
  padding: 0;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--tinta);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-family: var(--f-ui);
  font-size: 14px;
  color: rgba(28, 25, 22, 0.7);
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .add_to_cart_button {
  background: var(--tinta);
  color: var(--crema);
  border: 1px solid var(--tinta);
  border-radius: var(--r);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px;
  transition: background 0.35s var(--t), border-color 0.35s var(--t);
}

.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .add_to_cart_button:hover {
  background: var(--tierra);
  border-color: var(--tierra);
  color: var(--blanco);
}

/* ============================================================
   11 · Mobile

   En el teléfono el total y el botón se van de pantalla apenas
   empezás a completar. Se fijan abajo: el precio siempre visible
   y la acción siempre a un pulgar de distancia.
   ============================================================ */
@media (max-width: 999px) {
  .woocommerce-checkout .wc-block-checkout__sidebar,
  .woocommerce-cart .wc-block-cart__sidebar {
    margin-bottom: 24px;
  }

  .wc-block-components-sidebar {
    position: static;
  }

  /* Nada de barra fija acá.

     `.wc-block-checkout__actions` NO es solo el boton: en mobile WooCommerce
     le inyecta adentro una copia completa del resumen del pedido. Fijarlo
     convierte una tarjeta de ~500px en un panel flotante que tapa media
     pantalla. Su disposicion nativa ya es la correcta —resumen y total
     inmediatamente arriba del boton, que es donde conviene tenerlos— asi que
     solo se le da aire y jerarquia. */
  .wc-block-checkout__actions {
    margin-top: 8px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* La copia del resumen que va adentro de las acciones no necesita su
     propio marco: ya esta dentro de la tarjeta. */
  .checkout-order-summary-block-fill-wrapper {
    border: 0;
    background: transparent;
    padding: 0;
  }

  /* El boton flotante de WhatsApp se monta sobre el total y compite con la
     barra fija. En una pantalla de 375px no hay lugar para las dos, y en el
     paso de pago la accion principal no deberia tener competencia: se
     esconde solo acá. En desktop se queda, donde no estorba y da acceso a
     soporte, que sí ayuda a cerrar la compra. */
  .woocommerce-checkout .wsp,
  .woocommerce-cart .wsp {
    display: none;
  }

  /* El encabezado editorial se come media pantalla en un telefono. */
  .woocommerce-checkout .pagina-cab,
  .woocommerce-cart .pagina-cab {
    padding-block: 96px 10px;
  }

  .woocommerce-checkout .pagina-cab h1,
  .woocommerce-cart .pagina-cab h1 {
    font-size: 27px;
  }
}

/* ============================================================
   12 · Pedido recibido

   Es la pantalla que más se recuerda de toda la compra. La versión de
   WooCommerce es un acuse de recibo; acá se la trata como lo que es: el
   final de una experiencia por la que alguien pagó bastante.
   ============================================================ */
.gracias {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: 90px;
}

.gracias__cab {
  text-align: center;
  padding: 18px 0 46px;
}

.gracias__kicker {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: 20px;
}

.gracias__cab h1 {
  font-family: var(--f-display);
  font-size: clamp(36px, 5.6vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 26px;
}

/* La fecha de entrega es el dato que la persona vino a buscar.
   Va en el lugar donde otras tiendas ponen el número de pedido. */
.gracias__fecha {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: clamp(15px, 1.7vw, 17px);
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: 11px 24px;
  margin-bottom: 22px;
}
.gracias__fecha strong { font-weight: 650; }

.gracias__bajada {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 46ch;
  margin: 0 auto;
}

.gracias__acciones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Pago fallido: sin celebración. */
.gracias__cab--falla h1 { font-size: clamp(28px, 4vw, 40px); }

/* ---------- Qué pasa ahora ---------- */
.gracias__pasos {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  padding: 34px 34px 30px;
}
.gracias__pasos h2 {
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 24px;
}
.gracias__pasos ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.gracias__pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}
.gracias__pasos li::before {
  content: counter(paso);
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--tierra);
  border: 1px solid var(--linea);
  border-radius: 99px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* La línea que une los pasos: se lee como recorrido, no como lista. */
.gracias__pasos li:not(:last-child)::after {
  content: "";
  grid-column: 1;
  grid-row: 2;
  width: 1px;
  height: 22px;
  background: var(--linea);
  margin: 4px auto -22px;
}
/* Ambos van SIEMPRE en la segunda columna.
   Sin esto, el último paso —que no lleva conector vertical— dejaba libre
   la celda de 30px de la fila 2 y la descripción caía ahí por
   auto-colocación: una palabra por renglón. */
.gracias__pasos strong,
.gracias__pasos span {
  grid-column: 2;
}
.gracias__pasos strong {
  display: block;
  grid-row: 1;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  color: var(--tinta);
  padding-top: 4px;
}
.gracias__pasos span {
  display: block;
  grid-row: 2;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
  margin-top: 3px;
}

/* ---------- Dos tarjetas de cierre ---------- */
.gracias__extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 26px;
}
.gracias__extra > div {
  background: var(--blanco);
  padding: 26px;
}
.gracias__extra h3 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 8px;
}
.gracias__extra p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta-2);
  margin-bottom: 12px;
}
.gracias__extra a {
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tierra);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- El comprobante, plegado ---------- */
.gracias__detalle {
  margin-top: 34px;
  border-top: 1px solid var(--linea);
  padding-top: 22px;
}
.gracias__detalle summary {
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s var(--t);
}
.gracias__detalle summary::-webkit-details-marker { display: none; }
.gracias__detalle summary::after {
  content: "+";
  font-size: 16px;
  color: var(--tierra);
}
.gracias__detalle[open] summary::after { content: "−"; }
.gracias__detalle summary:hover { color: var(--tinta); }
.gracias__detalle > div { padding-top: 22px; }
.gracias__detalle .woocommerce-order-details__title,
.gracias__detalle .woocommerce-column__title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  margin: 18px 0 12px;
}
.gracias__detalle table { font-size: 14px; }

@media (max-width: 640px) {
  .gracias__pasos { padding: 26px 22px 24px; }
  .gracias__cab { padding-bottom: 34px; }
}

/* Sin el encabezado de página, hace falta separar del header fijo. */
.gracias__aire { height: 118px; }
@media (max-width: 700px) { .gracias__aire { height: 96px; } }