/* Polaris brand layer. Loaded after the Webflow stylesheet on every page.
   One place for the tokens the site already uses, plus the overrides that make the site consistent with itself.
   The live site is the source of truth for the brand; see CLAUDE.md (Brand). */

:root {
  --pm-blue: var(--_primitives---colors--original-polaris-blue);
  --pm-purple: var(--_primitives---colors--original-deep-purple);
  --pm-green: var(--_primitives---colors--original-aurora-green);
  --pm-light: var(--_primitives---colors--original-light-gray);
  --pm-dark: var(--_primitives---colors--original-dark-grey);
  --pm-grey-100: var(--_primitives---colors--dark-grey-lightest);
  --pm-grey-200: var(--_primitives---colors--dark-grey-lighter);
  --pm-purple-dark: var(--_primitives---colors--deep-purple-dark);
  --pm-error: #b42318;   /* form errors (red is not a brand colour: only for errors) */

  /* Surfaces and buttons: the primary gradient. Text and accents: 45deg, no mid stop. */
  --pm-gradient-primary: linear-gradient(195deg, var(--pm-blue), var(--pm-purple) 80%);
  --pm-gradient-text: linear-gradient(45deg, var(--pm-blue), var(--pm-purple));
  --pm-gradient-accent: linear-gradient(45deg, var(--pm-blue), var(--pm-green));

  --pm-radius-s: 6px;    /* buttons, tags, table rows */
  --pm-radius-m: 16px;   /* cards and panels */
  --pm-radius-pill: 30px; /* navigation */

  --pm-shadow: 0 2px 20px -10px var(--pm-dark);
  --pm-glow-size: 0 5px 12px -5px;    /* + a colour: cards */
  --pm-glow-strong-size: 0 2px 20px 2px; /* + a colour: the highlighted plan */
  --pm-hover-shadow: 0 6px 10px -5px var(--pm-purple);
  --pm-lift-shadow: 0 12px 20px -15px var(--pm-dark);
}

/* ---------- Typography ---------- */

/* Only Regular, Medium and Semibold are loaded: 700 rendered as a faked bold. */
b, strong, h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* One weight for every heading style (h3, h5 and h6 were 500 next to 600 siblings). */
.heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4,
.heading-style-h5, .heading-style-h6 { font-weight: 600; }

/* /servicios H1 was the only page title at 80px; every other page uses the h1 scale. */
.heading-style-h1.is-servicios { font-size: 4rem; }
@media screen and (max-width: 991px) { .heading-style-h1.is-servicios { font-size: 3.25rem; } }
@media screen and (max-width: 767px) { .heading-style-h1.is-servicios { font-size: 2.5rem; } }
@media screen and (max-width: 479px) { .heading-style-h1.is-servicios { font-size: 2.4rem; } }

/* Plan names (Compass, Polaris, Zenith) at a fixed 64px overflowed their cards between ~992px and ~1200px. */
@media screen and (min-width: 992px) {
  .home_features-list_plan .heading-style-h1, .pricing-features-list .heading-style-h1 { font-size: min(4rem, 4.8vw); }
}

/* Legal pages: a document scale instead of the marketing scale. */
.section_privacy-policy_legal-page-body .heading-style-h1 { font-size: 3rem; }
.section_privacy-policy_legal-page-body .text-rich-text h2 { font-size: 1.75rem; line-height: 1.25; letter-spacing: -.02rem; }
.section_privacy-policy_legal-page-body .text-rich-text h3 { font-size: 1.3rem; line-height: 1.35; letter-spacing: 0; }
.section_privacy-policy_legal-page-body .text-rich-text h4 { font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; }
.section_privacy-policy_legal-page-body .text-rich-text :is(h2, h3, h4) { font-weight: 600; margin-top: 2rem; margin-bottom: .75rem; }
@media screen and (max-width: 767px) {
  .section_privacy-policy_legal-page-body .heading-style-h1 { font-size: 2rem; }
  .section_privacy-policy_legal-page-body .text-rich-text h2 { font-size: 1.4rem; }
  .section_privacy-policy_legal-page-body .text-rich-text h3 { font-size: 1.2rem; }
  .section_privacy-policy_legal-page-body .text-rich-text h4 { font-size: 1.125rem; }
}

/* ---------- Gradients ---------- */

.background-gradient-primary { background-image: var(--pm-gradient-text); }
.background-gradient-secondary,
.heading-style-h2.is-industries.background-gradient-secondary,
.heading-style-h2.is-callout { background-image: var(--pm-gradient-accent); }
.pricing-features-list.is-polaris { background-image: var(--pm-gradient-primary); }

/* Off-palette purple (#5c35aa) in the "¿Te suena alguno de estos?" glow: use the site's dark purple tint. */
.section-home-problems { background-image: radial-gradient(circle closest-corner at 0%, var(--pm-purple-dark), #000); }
@media screen and (max-width: 767px) {
  .section-home-problems { background-image: radial-gradient(circle closest-corner at 0 28%, var(--pm-purple-dark), #000); }
}

/* ---------- Buttons ----------
   Four variants: primary (gradient), secondary (grey), inverse (light, on coloured cards), link.
   One size. Hover: buttons grow slightly with a purple glow; buttons that close a card (the /servicios plans)
   lift instead, as they did on the Webflow site; the /contacto booking button lifts and grows. */

.button, .button-2, .button-7, .button-8, .button-12, .button-navbar {
  border-radius: var(--pm-radius-s);
  transition: box-shadow .4s, transform .4s, background-color .3s;
}

/* Primary. The nav CTA and the home "Contáctanos" were blue to green with black text. */
.button-navbar, .button-navbar.is-alternate, .button.is-alternate, .button-7, .button-8 {
  background-image: var(--pm-gradient-primary);
  color: var(--pm-light);
}
.button:hover, .button-navbar:hover, .button-navbar.is-alternate:hover, .button.is-alternate:hover,
.button-7:hover, .button-8:hover {
  background-image: var(--pm-gradient-primary);
  box-shadow: var(--pm-hover-shadow);
  transform: scale(1.03);
}

/* One size: "is-large" was 61px tall next to 52px primaries on the same pages. */
.button.is-large { padding: .75rem 1.5rem; font-size: 1.15rem; }

/* Secondary: was 5% black with pure black text on home, solid grey on /servicios. */
.button-2.is-secondary, .button.is-secondary {
  background-color: var(--pm-grey-100);
  background-image: none;
  color: var(--pm-dark);
  font-weight: 600;
}
.button-2.is-secondary:hover, .button.is-secondary:hover {
  background-color: var(--pm-grey-200);
  box-shadow: none;
  transform: none;
}

/* /servicios plan CTAs ("Pedir Presupuesto") had three looks: grey, outline, and a 4-stop gradient
   with off-brand blues. Compass and Zenith get the primary button; Polaris sits on the gradient card,
   so it gets the inverse button. */
.button.is-secondary.is-plans, .button.is-secondary.is-zenith-plan {
  background-color: transparent;
  background-image: var(--pm-gradient-primary);
  color: var(--pm-light);
}
.button.is-secondary.is-plans:hover, .button.is-secondary.is-zenith-plan:hover {
  background-image: var(--pm-gradient-primary);
  box-shadow: var(--pm-lift-shadow);
  transform: translateY(-.4rem);
}
.button.is-tertiary {
  border: 0;
  background-color: var(--pm-light);
  background-image: none;
  color: var(--pm-dark);
  box-shadow: none;
}
.button.is-tertiary:hover {
  background-color: #fff;
  box-shadow: var(--pm-lift-shadow);
  transform: translateY(-.4rem);
}

/* /contacto "Reserva una Llamada": the page's one big action keeps its own lift-and-grow (Webflow timing, .5s). */
.button.is-large.is-contact-us:hover {
  background-image: var(--pm-gradient-primary);
  box-shadow: 0 2px 15px -1px var(--pm-purple);
  transform: translateY(-5px) scale(1.05);
}

/* /contacto LinkedIn and WhatsApp keep their colours but use the standard size, and grow on hover like
   every other button (they shrank to 90%). */
.button-12.is-link.is-icon.is-linkedin, .button-12.is-link.is-icon.is-whatsapp {
  padding: .75rem 1.5rem;
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
}
.button-12.is-link.is-icon.is-linkedin:hover, .button-12.is-link.is-icon.is-whatsapp:hover {
  background-image: none;
  text-decoration: none;
  transform: scale(1.03);
}

/* The closing "Contáctanos" on /servicios and /resultados stretched to the full column width, and so did the
   "Ver Precios" under it on /resultados. On desktop both sit at their own width, centred; at ≤991px Webflow hides
   the first one (the sticky bottom button replaces it) and the second stays full width like every mobile CTA. */
.is-our-work-final-button-cta { display: flex; justify-content: center; }
@media screen and (min-width: 992px) {
  .is-our-work-final-button-cta + .margin-bottom { display: flex; justify-content: center; }
}

/* ---------- Corners ---------- */

.tag, .pricing_comparison_row.is-shaded { border-radius: var(--pm-radius-s); }
/* Plain tags (/resultados) took pure black from a deleted Relume variable, and bold 700. */
.tag { color: var(--pm-dark); }
.tag * { font-weight: 600; }
.servicios-disclaimer { border-radius: var(--pm-radius-m); }

/* ---------- Shadows: one neutral elevation, one glow, one strong glow ---------- */

.home_feature-2_image-wrapper, .pricing-features-list { box-shadow: var(--pm-shadow); }
.home_feature-1_card-large { box-shadow: var(--pm-glow-size) var(--_primitives---colors--polaris-blue-light); }
.home_feature-1_card-small.is-educacion { box-shadow: var(--pm-glow-size) var(--pm-purple); }
.home_feature-1_card-small.is-servicios-industriales { box-shadow: var(--pm-glow-size) var(--pm-green); }
.home_features-list_plan.is-polaris, .pricing-features-list.is-polaris { box-shadow: var(--pm-glow-strong-size) var(--pm-purple); }

/* ---------- Accessibility helpers ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Footer legal links were 21px tall: at least a 24px tap target. */
.footer7_legal-link { display: inline-flex; align-items: center; min-height: 1.75rem; }

/* Legal pages: the subtitle line under the title (was an h2/h4) and section spacing (was 130 empty headings). */
.section_privacy-policy_legal-page-body .legal-domain { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; }
.section_privacy-policy_legal-page-body .text-rich-text h2 { margin-top: 3rem; }

/* ---------- Focus ---------- */

/* Relume's default focus colour (#4d65ff) is not a brand colour. */
*[tabindex]:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: .125rem solid var(--pm-blue);
  outline-offset: .125rem;
}

/* 404: now sits between the shared nav and footer; a wider column so the heading does not wrap onto three lines. */
.utility_form-block { max-width: 32rem; }
.utility_component { height: auto; min-height: 70vh; padding-top: 4rem; padding-bottom: 4rem; }

/* ---------- Images ---------- */

/* width/height attributes reserve space before an image loads (no layout jump); zero specificity, so any
   class that sizes an image still wins. */
:where(img[width][height]) { height: auto; }

/* /resultados avatars had no rule (home avatars do), so their size depended on the file: same as home now. */
.our-work_testimonial_customer-image { width: 100%; height: 100%; object-fit: cover; }

/* Case-study logos had no size of their own and rendered at whatever their file implied (56 to 82px tall):
   one height for all three. */
.logo-container-our-work img { height: 5rem; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- Behaviour styles for js/polaris.js (replaces Webflow's runtime) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }   /* "Saber más." on /servicios jumps to the FAQ */
}

/* Mobile menu: the panel slides in from the right; the burger turns into an X (Webflow: 400ms inOutQuint). */
@media screen and (max-width: 991px) {
  .navbar2_menu { transition: height .5s, transform .4s ease; }
}
.menu-icon2_line-top, .menu-icon2_line-middle, .menu-icon2_line-bottom {
  transition: transform .4s cubic-bezier(.86, 0, .07, 1), opacity .4s cubic-bezier(.86, 0, .07, 1);
}
.navbar2_menu-button.w--open .menu-icon2_line-top { transform: translateY(8px) rotate(45deg); }
.navbar2_menu-button.w--open .menu-icon2_line-middle { opacity: 0; }
.navbar2_menu-button.w--open .menu-icon2_line-bottom { transform: translateY(-8px) rotate(-45deg); }
.navbar2_menu-button { cursor: pointer; }
/* The open panel covered the burger, so its X animation was never seen: keep the button above the panel. */
.navbar2_button-wrapper { position: relative; z-index: 2; }

/* Tabs and FAQ questions are clickable. */
.w-tab-link, .pricing_faq_question { cursor: pointer; }

/* Testimonial slider: slides move as a strip; dots are real buttons. */
.w-slider { touch-action: pan-y; }
.w-slide { transition: transform .5s ease; }
/* Dots stay 8px but each is a 24px tap target (PageSpeed: touch targets): a transparent border around the dot. */
.w-slider-nav > button.w-slider-dot {
  box-sizing: content-box; padding: 0; margin: 0;
  border: 8px solid transparent; background-clip: padding-box; border-radius: 100%;
}
.w-slider-nav[hidden] { display: none; }

/* ---------- Home hero phone mock-up: text contrast (PageSpeed) ----------
   The notification time was 50% grey on a see-through card, and the iOS badge white on #ff3b30 (3.5:1).
   Same look, readable: a darker grey and Apple's accessible red. Beats the embed's own <style> by specificity. */
.pm-notif-stack .pm-notif-time { color: rgba(28, 28, 30, .72); }
.pm-notif-stack .pm-notif-badge { background-color: #d70015; }

/* ---------- Navigation pill: appears and expands once the header has scrolled away (desktop) ----------
   At the top the pill sits in the header and scrolls away with it. Once the header is gone (html.pm-scrolled,
   from polaris.js) it comes back pinned to the top, opening from the centre to full width. */
@keyframes pm-pill-expand {
  from { clip-path: inset(0 45% round var(--pm-radius-pill)); opacity: 0; transform: translateY(-.5rem); }
  60% { opacity: 1; }
  to { clip-path: inset(0 0 round var(--pm-radius-pill)); opacity: 1; transform: none; }
}
@media screen and (min-width: 992px) {
  .navbar2_menu.is-page-height-tablet { position: absolute; }
  html.pm-scrolled .navbar2_menu.is-page-height-tablet {
    position: fixed; top: .9rem;
    animation: pm-pill-expand .5s cubic-bezier(.22, 1, .36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.pm-scrolled .navbar2_menu.is-page-height-tablet { animation: none; }
}

/* ---------- /servicios comparison table: plan names stay in view ----------
   Scrolling the 11 rows (stacked on phones) lost which column was Compass, Polaris or Zenith. The header row is
   sticky: below the floating nav pill on desktop, at the top on tablets and phones (smaller icons there). */
.pricing_comparison_top-row {
  position: sticky; top: 4.5rem; z-index: 3;
  background-color: var(--pm-light);
  box-shadow: 0 8px 12px -12px var(--pm-dark);
}
/* Desktop: fill the gap above it (behind the nav pill) so rows do not show through. */
.pricing_comparison_top-row::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 4.5rem;
  background-color: var(--pm-light);
}
@media screen and (max-width: 991px) {
  .pricing_comparison_top-row { top: 0; }
  .pricing_comparison_top-row::before { display: none; }
}
@media screen and (max-width: 767px) {
  .pricing_comparison_top-row-content { padding: .6rem .5rem; }
  .pricing_comparison_top-row-icon img { width: 2rem; height: 2rem; }
}

/* ---------- /contacto form (replaces the Cal.eu routing form) ---------- */
.pm-form {
  max-width: 40rem; margin: 2rem auto 0; text-align: left;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.pm-form_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.pm-form_field { display: flex; flex-direction: column; gap: .4rem; }
.pm-form_field.is-wide { grid-column: 1 / -1; }
.pm-form label, .pm-form legend { font-weight: 600; color: var(--pm-dark); }
.pm-form input[type="text"], .pm-form input[type="email"], .pm-form input[type="tel"], .pm-form textarea {
  font: inherit; font-size: 1rem; color: var(--pm-dark);
  background-color: #fff; border: 1px solid var(--pm-grey-200); border-radius: var(--pm-radius-s);
  padding: .75rem 1rem; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.pm-form input[type="text"]:focus, .pm-form input[type="email"]:focus, .pm-form input[type="tel"]:focus, .pm-form textarea:focus {
  outline: none; border-color: var(--pm-blue); box-shadow: 0 0 0 3px rgba(20, 99, 243, .15);
}
.pm-form [aria-invalid="true"] input, .pm-form input[aria-invalid="true"] { border-color: var(--pm-error); }
.pm-form_choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.pm-form_choices legend { padding: 0; margin-bottom: .6rem; }
.pm-form_options { display: flex; flex-wrap: wrap; gap: .5rem; }
.pm-choice { position: relative; display: inline-flex; cursor: pointer; font-weight: 500 !important; }
.pm-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-choice span {
  display: inline-block; padding: .6rem 1rem; border: 1px solid var(--pm-grey-200); border-radius: var(--pm-radius-s);
  background-color: #fff; color: var(--pm-dark); transition: border-color .2s, background-color .2s, color .2s;
}
.pm-choice:hover span { border-color: var(--pm-blue); }
.pm-choice input:checked + span {
  border-color: var(--pm-blue); background-color: var(--_primitives---colors--polaris-blue-lightest); color: var(--pm-blue);
}
.pm-choice input:focus-visible + span { outline: .125rem solid var(--pm-blue); outline-offset: .125rem; }
.pm-form_choices[aria-invalid="true"] .pm-choice span { border-color: var(--pm-error); }
.pm-form_field-error, .pm-form_error { color: var(--pm-error); font-size: .9rem; margin: 0; }
.pm-form_error { font-weight: 600; }
.pm-form textarea { resize: vertical; min-height: 6.5rem; }
/* Phone: country code selector + number on one line. */
.pm-phone { display: flex; gap: .5rem; }
.pm-phone input { flex: 1 1 auto; min-width: 0; }
.pm-phone select {
  flex: 0 0 auto; font: inherit; font-size: 1rem; color: var(--pm-dark); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191919' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .75rem center;
  border: 1px solid var(--pm-grey-200); border-radius: var(--pm-radius-s);
  padding: .75rem 2.1rem .75rem .75rem; appearance: none; -webkit-appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.pm-phone select:focus { outline: none; border-color: var(--pm-blue); box-shadow: 0 0 0 3px rgba(20, 99, 243, .15); }
.pm-form .button { align-self: center; border: 0; cursor: pointer; font-family: inherit; }
.pm-form .button[disabled] { opacity: .7; cursor: wait; transform: none; box-shadow: none; }
.pm-form_note { font-size: .875rem; color: var(--_primitives---colors--dark-grey-light); text-align: center; margin: 0; }
.pm-form_note a { color: inherit; text-decoration: underline; }
/* Focus on an invalid field scrolls it clear of the floating nav pill. */
.pm-form input, .pm-form_choices { scroll-margin-top: 6rem; }
/* Progressive steps: hidden until the earlier answers are in (the button's own display:flex would show it). */
.pm-form [hidden] { display: none !important; }
.pm-form_hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media screen and (max-width: 767px) {
  /* Webflow set 0 top padding here (the section was a short, vertically centred block); with the form it is taller
     than the screen, so the heading touched the nav. 4rem = the mobile section padding every other page uses. */
  .padding-section-large.is-contact-us { padding-top: 4rem; }
  .pm-form_grid { grid-template-columns: 1fr; }
  .pm-form .button { align-self: stretch; }
}