.elementor-124 .elementor-element.elementor-element-c7b559c{width:100%;max-width:100%;}.elementor-124 .elementor-element.elementor-element-2a0dcd0{--spacer-size:31px;}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-124 .elementor-element.elementor-element-ea24130{width:100%;max-width:100%;}.elementor-124 .elementor-element.elementor-element-ea24130 .cart button, .elementor-124 .elementor-element.elementor-element-ea24130 .cart .button{transition:all 0.2s;}.elementor-124 .elementor-element.elementor-element-ea24130 .quantity .qty{transition:all 0.2s;}/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-ea24130 *//* =========================
   TYPOGRAPHY — Rawline everywhere
   Never Roboto/Encode Sans (TramiteSimple) or Open Sans (STF).
   ========================= */
.woocommerce div.product form.cart,
.woocommerce div.product form.cart .wapf-field-label,
.woocommerce div.product form.cart .wapf-field-label label,
.woocommerce div.product form.cart .wapf-field-input input,
.woocommerce div.product form.cart .wapf-field-input select,
.woocommerce div.product form.cart .wapf-field-input select option,
.woocommerce div.product form.cart .wapf-field-input textarea,
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
  font-family: Rawline, Helvetica, Arial, sans-serif !important;
}


/* =========================
   FORM CARD
   Size from TramiteSimple. Border/radius/shadow from br-web's card language.
   Fill #F5F5F5 is the user's explicit value (and STF's own container fill).
   ========================= */
.woocommerce div.product form.cart {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 32px !important;
  background-color: #F5F5F5 !important;
  border: 1px solid #E2E6EC !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}


/* =========================
   HIDE QUANTITY AND TOTALS
   ========================= */
.woocommerce div.product form.cart .quantity,
.woocommerce div.product form.cart .wapf-product-totals {
  display: none !important;
}


/* =========================
   COLLAPSE HIDDEN CONDITIONAL FIELDS
   WAPF keeps conditional fields in the DOM and toggles .wapf-hide. Without this
   they leave empty vertical gaps where a field would have been.
   ========================= */
.woocommerce div.product form.cart .wapf-field-container.wapf-hide,
.woocommerce div.product form.cart .wapf-field-row.wapf-hide,
.woocommerce div.product form.cart .wapf-field-row:has(> .wapf-field-container.wapf-hide) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================
   FIELD ROW SPACING
   ========================= */
.woocommerce div.product form.cart .wapf-field-row {
  min-height: 0 !important;
  margin-bottom: 24px !important;
}

.woocommerce div.product form.cart .wapf-field-row:last-of-type {
  margin-bottom: 20px !important;
}


/* =========================
   LABELS
   Colour #212529 from STF (already a br-web token). Size/spacing from TramiteSimple.
   ========================= */
.woocommerce div.product form.cart .wapf-field-label,
.woocommerce div.product form.cart .wapf-field-label label {
  display: block !important;
  margin-bottom: 8px !important;
  color: #212529 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* Required marker: the dotted underline WooCommerce puts on abbr[title] is stripped.
   The colour deliberately stays the label's own — the project palette has no red and
   none was specified, so none is invented. See the paste doc's open items. */
.woocommerce div.product form.cart .wapf-field-label abbr,
.woocommerce div.product form.cart .wapf-field-label .required {
  color: #212529 !important;
  text-decoration: none !important;
  border: 0 !important;
}


/* =========================
   TEXT INPUTS AND TEXTAREA
   Appearance from STF, size from TramiteSimple, font-size unified at 16px
   (TramiteSimple is inconsistent: 18px inputs vs 15px selects).
   ========================= */
.woocommerce div.product form.cart .wapf-field-input input[type="text"],
.woocommerce div.product form.cart .wapf-field-input input[type="email"],
.woocommerce div.product form.cart .wapf-field-input input[type="number"],
.woocommerce div.product form.cart .wapf-field-input input[type="tel"],
.woocommerce div.product form.cart .wapf-field-input input[type="url"],
.woocommerce div.product form.cart .wapf-field-input input[type="date"],
.woocommerce div.product form.cart .wapf-field-input textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #CED4DA !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #212529 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  transition: border-color 0.2s ease !important;
}

/* Textarea is the one control that must grow, so the fixed height is released. */
.woocommerce div.product form.cart .wapf-field-input textarea {
  height: auto !important;
  min-height: 120px !important;
  padding: 12px 16px !important;
  resize: vertical !important;
}


/* =========================
   PLACEHOLDER
   #6B7480 measured at 4.74:1 against the #FFFFFF field fill (min 4.5:1).
   An earlier #909AA5 candidate was measured at 2.86:1 and rejected.
   ========================= */
.woocommerce div.product form.cart .wapf-field-input input::placeholder,
.woocommerce div.product form.cart .wapf-field-input textarea::placeholder {
  color: #6B7480 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}


/* =========================
   SELECT (closed state)
   Same box as the text inputs. Chevron is STF's exact background-image SVG —
   NOT a pseudo-element, so it needs appearance:none and right padding to clear it.
   ========================= */
.woocommerce div.product form.cart .wapf-field-input select {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 52px 0 16px !important;
  background-color: #FFFFFF !important;
  border: 1px solid #CED4DA !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #212529 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  letter-spacing: normal !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 16px) 50% !important;
  background-size: 16px 12px !important;
  transition: border-color 0.2s ease !important;
}

/* Kills IE/Edge's own arrow so it can't double up with the SVG above. */
.woocommerce div.product form.cart .wapf-field-input select::-ms-expand {
  display: none !important;
}

/* Greys the select only while it still holds its empty placeholder option, so an
   unfilled required field reads as "not chosen yet" rather than as a real value.
   Note this is a br-web addition: STF does NOT grey its own "Escolha..." (measured
   at #212529, same as every other option). Same #6B7480 as the input placeholder. */
.woocommerce div.product form.cart .wapf-field-input select:required:invalid {
  color: #6B7480 !important;
}


/* =========================
   OPEN DROPDOWN LIST ("caja de respuesta")
   A native <select> panel is rendered by the operating system. Only the option
   rows' colours are reliably stylable — its border, radius, shadow, padding and
   row height are NOT controllable from CSS on any browser. STF's own dropdown is
   the plain OS default for the same reason. See the paste doc.
   ========================= */
.woocommerce div.product form.cart .wapf-field-input select option {
  background-color: #FFFFFF !important;
  color: #212529 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

.woocommerce div.product form.cart .wapf-field-input select option:checked {
  background-color: #FFFFFF !important;
  color: #212529 !important;
  font-weight: 400 !important;
}

/* The empty placeholder row reads muted in the open list too. */
.woocommerce div.product form.cart .wapf-field-input select option[value=""] {
  color: #6B7480 !important;
}


/* =========================
   HOVER — round 2 (2026-08-05): removed entirely, per instruction. Fields no longer
   change on mouse-over; the only visual change now happens on focus/click, below.
   ========================= */


/* =========================
   FOCUS — round 2 (2026-08-05): the outline (3px + 2px offset) that used to sit here
   read as a "heavy" double ring around the field (own border + a separate offset
   rectangle) — confirmed by rendering and screenshotting the actual focus state, not
   guessed. Removed the outline; the border-color-to-#245897 change (previously only on
   :hover, now moved here) is the sole indicator, on click/focus only, same on mobile
   (no separate mobile override existed for these rules).
   NOTE — accessibility tradeoff, flagged, not silently applied: a 1px border-colour
   change is a lighter focus indicator than the outline it replaces. TramiteSimple and
   STF both remove focus entirely (a WCAG 2.4.7 failure); this still differs from that
   by remaining visible, but is weaker than what was here before. Explicit user
   instruction, applied as asked. */
.woocommerce div.product form.cart .wapf-field-input input:focus-visible,
.woocommerce div.product form.cart .wapf-field-input textarea:focus-visible,
.woocommerce div.product form.cart .wapf-field-input select:focus-visible {
  border-color: #245897 !important;
  outline: none !important;
  box-shadow: none !important;
}


/* =========================
   SUBMIT BUTTON
   Appearance copied attribute by attribute from .wo-brweb-faq__help-btn.
   Sizes from TramiteSimple. Left-aligned, not floated.
   ========================= */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  clear: both !important;
  width: auto !important;
  min-width: 182px !important;
  height: 40px !important;
  padding: 0 28px !important;
  margin: 8px 0 0 0 !important;
  background-color: #245897 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

/* WooCommerce appends a spinner/checkmark via ::after on the add-to-cart button. */
.woocommerce div.product form.cart button.single_add_to_cart_button::after,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt::after {
  content: none !important;
  display: none !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover {
  background-color: #1C4576 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:focus-visible {
  outline: 3px solid #245897 !important;
  outline-offset: 3px !important;
}


/* =========================
   REDUCED MOTION
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product form.cart .wapf-field-input input,
  .woocommerce div.product form.cart .wapf-field-input textarea,
  .woocommerce div.product form.cart .wapf-field-input select,
  .woocommerce div.product form.cart button.single_add_to_cart_button,
  .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
    transition: none !important;
  }
}


/* =========================
   MOBILE
   ========================= */
@media screen and (max-width: 767px) {
  .woocommerce div.product form.cart {
    max-width: 92% !important;
    padding: 20px !important;
  }

  .woocommerce div.product form.cart .wapf-field-row {
    margin-bottom: 20px !important;
  }

  .woocommerce div.product form.cart .wapf-field-label,
  .woocommerce div.product form.cart .wapf-field-label label {
    margin-bottom: 7px !important;
    font-size: 15px !important;
  }

  .woocommerce div.product form.cart .wapf-field-input input[type="text"],
  .woocommerce div.product form.cart .wapf-field-input input[type="email"],
  .woocommerce div.product form.cart .wapf-field-input input[type="number"],
  .woocommerce div.product form.cart .wapf-field-input input[type="tel"],
  .woocommerce div.product form.cart .wapf-field-input input[type="url"],
  .woocommerce div.product form.cart .wapf-field-input input[type="date"],
  .woocommerce div.product form.cart .wapf-field-input textarea {
    padding: 0 14px !important;
  }

  .woocommerce div.product form.cart .wapf-field-input textarea {
    padding: 12px 14px !important;
  }

  .woocommerce div.product form.cart .wapf-field-input select {
    padding: 0 46px 0 14px !important;
    background-position: calc(100% - 14px) 50% !important;
  }

  /* Full width on mobile, per instruction (TramiteSimple does the same). */
  .woocommerce div.product form.cart button.single_add_to_cart_button,
  .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }
}/* End custom CSS */