/* The only stylesheet in this mirror that production has no counterpart for.
 *
 * It styles two things and nothing else:
 *   1. the call-to-action that replaces the Jotform embed on /contrata/
 *   2. the inline note the inert contact form shows when you submit it
 *
 * It deliberately borrows the site's own tokens (--e-global-color-* from Elementor
 * kit 74, DM Sans / Poppins) so the block reads as part of the page rather than as
 * something bolted on.
 */

.elementor-element-beta01 > .elementor-widget-container {
  padding: 40px 0 0 0;
}

.elementor-element-beta01 .elementor-heading-title {
  font-family: "Poppins", Sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 35px;
  color: var(--e-global-color-8cd1398);
  text-align: center;
}

.elementor-element-beta02 > .elementor-widget-container,
.elementor-element-beta04 > .elementor-widget-container {
  padding: 12px 0 0 0;
  font-family: "DM Sans", Sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: var(--e-global-color-text);
  text-align: center;
}

.elementor-element-beta04 > .elementor-widget-container {
  padding-bottom: 40px;
  font-size: 15px;
}

.elementor-element-beta03 > .elementor-widget-container {
  padding: 24px 20px 8px 20px;
}

.elementor-element-beta03 .elementor-button {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-cd2d769);
  font-family: "DM Sans", Sans-serif;
  font-size: 24px;
  font-weight: 500;
  border-radius: 23px;
  padding: 10px 24px;
}

/* The container the Jotform used to fill is a flex row; the CTA is a column. */
.elementor-1229 .elementor-element.elementor-element-ef7e74b > .e-con-inner {
  flex-direction: column;
  align-items: center;
}

@media (max-width: 767px) {
  .elementor-element-beta01 .elementor-heading-title { font-size: 24px; line-height: 30px; }
  .elementor-element-beta02 > .elementor-widget-container { font-size: 16px; }
  .elementor-element-beta03 .elementor-button { font-size: 19px; }
}

.mirror-note {
  margin: 12px 0 0 0;
  font-family: "DM Sans", Sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: var(--e-global-color-primary);
}

/* THE SKIP LINK. First focusable element on the page, off-screen until it is tabbed to.
 *
 * `clip`/`clip-path` rather than `display:none` or `visibility:hidden`: both of those take the
 * element OUT OF THE FOCUS ORDER, which would make a skip link unreachable by the one input
 * method it exists for. Positioned `fixed` so it lands in the same place whatever the header is
 * doing - the mirrored Elementor header is sticky and hides on scroll (.she-header-hide-on-scroll-yes).
 *
 * The <main> it points at carries tabindex="-1" so following the link moves FOCUS and not merely
 * the scroll position. Without it, browsers scroll and leave focus on <body>, so the next Tab
 * returns to the top of the menu and the link has achieved nothing.
 */
.ql-skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  background: #fff;
  color: #000;
  font-family: "DM Sans", Sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: underline;
  border-radius: 0 0 6px 0;
}

.ql-skip:focus {
  width: auto;
  height: auto;
  margin: 8px;
  padding: 12px 20px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

/* <main> is a plain block and deliberately carries no box of its own: the mirrored Elementor
   containers inside it size themselves against the viewport, and giving the landmark padding,
   width or display would reflow every page. This rule only suppresses the focus ring that
   tabindex="-1" would otherwise draw when the skip link moves focus here. */
main#contenido:focus {
  outline: none;
}
