/* ---------- Sticky header ---------- */
.framer-1bobvvz-container[data-framer-name="Navber"] {
  position: sticky;
  top: 0;
  z-index: 500;
}

/* Anchor nav targets (#feature, #works, #results, #faq, #contact): the sticky
   header is a constant 73px tall at every breakpoint, so without this the
   header covers the top of whichever section a nav link scrolls to. */
#feature,
#works,
#results,
#faq,
#contact {
  scroll-margin-top: 89px;
}

.framer-1bobvvz-container[data-framer-name="Navber"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #008fb1, #24d3ef);
  opacity: 0;
  transform: scaleX(0.85);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.framer-1bobvvz-container[data-framer-name="Navber"].automind-nav-scrolled::after {
  opacity: 1;
  transform: scaleX(1);
}

.framer-1bobvvz-container[data-framer-name="Navber"] nav[name="Navber"] {
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  background-color: #0a0a0a !important;
  --border-color: rgba(255, 255, 255, 0.1) !important;
}

.framer-1bobvvz-container[data-framer-name="Navber"].automind-nav-scrolled nav[name="Navber"] {
  box-shadow: 0 12px 32px -14px rgba(0, 143, 177, 0.55);
  background-color: rgba(10, 10, 10, 0.86) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Header text/button contrast against the new black bar. */
[data-framer-name="Navber"] [data-framer-name="Nav Link Group"] p {
  color: rgb(214, 214, 214) !important;
}

[data-framer-name="Navber"] #automind-cta {
  background-color: #ffffff !important;
}

[data-framer-name="Navber"] #automind-cta p {
  color: #0a0a0a !important;
}

/* ---------- Closing CTA: Cal.com inline calendar ---------- */
/* Replaces the old "Empezar / Ver servicios" buttons in the final
   "¿Listo para que tu negocio..." section — the wrapper keeps the original
   data-framer-name="Buttons" element but drops the framer-mgzzui class (its
   flex-row/min-content sizing was built for two small buttons, not a full
   calendar), so this fully controls its own layout instead. */
/* This column used to stack a headline above two small buttons, next to a
   separate decorative filler image column (removed above — a calendar and
   a stock photo side by side made no sense). Turn it into the two-column
   layout instead: headline on the left, calendar on the right, each given
   their own flex-basis so they share the row evenly. */
/* The row's grandparent (data-framer-name="Text wrap") still carries
   Framer's old max-width:768px/place-content:flex-start, sized for the
   narrower headline-only column that used to sit beside the (now removed)
   filler image. That capped this wider text+calendar row and stuck it to
   the left edge, leaving a dead gap on the right — lift the cap and center
   the row in the full section width instead. */
.framer-17z5g5a {
  place-content: center !important;
}

.framer-gfp89s {
  max-width: none !important;
}

/* Cal.com's inline embed needs real width before it switches from a
   stacked (details on top of the date grid) layout to its wide,
   short layout (details | dates | time slots side by side) — testing
   showed ~680px still stacks. Stop trying to squeeze it next to the
   headline at that width and instead give it the row almost entirely:
   headline on top, full-width calendar below. */
.framer-160c3k8 {
  flex-direction: column !important;
  align-items: center !important;
  max-width: 1120px !important;
  width: 100% !important;
  gap: 40px !important;
  padding: 72px 24px !important;
  margin: 0 auto !important;
}

.framer-13egh6p-container {
  flex: none !important;
  width: 100% !important;
  max-width: 720px !important;
}

.framer-13egh6p-container p,
.framer-13egh6p-container h2 {
  text-align: center !important;
}

.automind-cta-calendar {
  flex: none;
  width: 100%;
  max-width: 1120px;
  margin-top: 0;
}

@media (max-width: 1023px) {
  .framer-13egh6p-container,
  .automind-cta-calendar {
    max-width: 100% !important;
  }
}

.automind-cal-inline {
  width: 100%;
  min-height: 480px;
  border-radius: 12px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.35);
}

/* Below ~1024px the embed itself isn't wide enough to switch to its
   side-by-side layout (see note above), so it stacks internally and
   needs the taller box again. */
@media (max-width: 1023px) {
  .automind-cal-inline {
    min-height: 640px;
  }
}

/* Closing CTA on mobile: the inline calendar is swapped for two buttons --
   "Empezar" opens the Cal.com booking popup (data-cal-link, bound by
   cal-embed.js), "Escríbenos" goes to WhatsApp. Desktop/tablet keep the
   inline calendar and never show these. */
.automind-cta-buttons {
  display: none;
}

@media (max-width: 809px) {
  .automind-cta-calendar {
    display: none;
  }

  .automind-cta-buttons {
    flex: none;
    display: flex;
    width: 100%;
    gap: 10px;
  }

  .automind-cta-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  .automind-cta-btn p {
    margin: 0;
    color: inherit;
    font: inherit;
  }

  .automind-cta-btn--primary {
    background-color: var(--token-1ddb4bb9-0587-4a22-ae5e-8270ca6cbf35, rgb(26, 26, 26));
    color: #ffffff;
  }

  .automind-cta-btn--secondary {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.15);
    color: rgb(26, 26, 26);
  }

  .automind-cta-btn--secondary:hover {
    border-color: #008fb1;
  }
}

/* ---------- Hero "Ver servicios" button ---------- */
/* Drop the play icon and give the button a solid black border + label
   instead of the template's light-gray ones. The label color also has to
   beat rolling-button.js, which copies the original (gray) computed color
   inline onto its .automind-roll-line spans. */
.framer-1lirvy4 .framer-13n76yv .framer-duyxcd {
  display: none !important;
}

.framer-1lirvy4 .framer-13n76yv {
  --border-color: rgb(26, 26, 26) !important;
}

.framer-1lirvy4 .framer-13n76yv p,
.framer-1lirvy4 .framer-13n76yv .automind-roll-line {
  color: rgb(26, 26, 26) !important;
  --framer-text-color: rgb(26, 26, 26) !important;
}

/* ---------- Brand accents ---------- */
.framer-c60hpo,
.framer-4uv8s8 {
  background-color: #008fb1 !important;
}

/* ---------- Header nav link hover ---------- */
/* Each nav link ships with a "Line decoration" bar meant to grow from 0 to
   100% width on hover — but that only ever happens through a `.hover` class
   Framer's own runtime JS used to toggle on mouseenter, which this static
   export doesn't have, so the animation never fired. Drive it with a real
   :hover/:focus-visible rule instead, and turn it into a glowing brand-
   gradient underline plus a matching text color shift so the header menu
   gets a proper, on-brand hover effect. */
[data-framer-name="Navber"] .framer-8g6fkf {
  height: 2px !important;
  border-radius: 2px;
  background: linear-gradient(90deg, #008fb1, #24d3ef) !important;
  box-shadow: 0 0 10px rgba(36, 211, 239, 0.7);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-framer-name="Navber"] [data-framer-name="Nav Link"] p {
  transition: color 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

[data-framer-name="Navber"] [data-framer-name="Nav Link"]:hover p,
[data-framer-name="Navber"] [data-framer-name="Nav Link"]:focus-visible p {
  color: #24d3ef !important;
  transform: translateY(-1px);
}

[data-framer-name="Navber"] [data-framer-name="Nav Link"]:hover .framer-8g6fkf,
[data-framer-name="Navber"] [data-framer-name="Nav Link"]:focus-visible .framer-8g6fkf {
  width: 100% !important;
}

/* ---------- Use cases heading: balance into two even lines ---------- */
.framer-1982u8h-container p {
  text-wrap: balance;
}

/* ---------- Infinite ticker ---------- */
.automind-ticker-track.automind-ticker-animate {
  animation: automind-ticker-scroll 22s linear infinite;
}

.automind-ticker-track.automind-ticker-animate:hover {
  animation-play-state: paused;
}

@keyframes automind-ticker-scroll {
  from {
    translate: 0 0;
  }
  to {
    translate: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .automind-ticker-track.automind-ticker-animate {
    animation: none;
  }
}

/* ---------- Responsive fixes ---------- */
@media (max-width: 809px) {
  /* "Un solo sistema" (Servicios/Integraciones/... tabs) side-by-side with
     its image stack: Framer normally swaps this to a stacked layout via a
     JS-driven variant class at narrow widths, which this static export
     can't do — it froze in the desktop row variant. Force the stack. */
  .framer-ZmtpW.framer-187vptf {
    flex-direction: column !important;
    width: 100% !important;
    gap: 40px !important;
  }

  .framer-ZmtpW.framer-187vptf > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* The "Text" block (heading + intro paragraph) and "Cards" sit in a
     column with a base gap of 70px, sized for the roomy desktop layout --
     on mobile that alone pushed the card list almost a full screen below
     the intro paragraph. */
  .framer-riffr9 {
    gap: 20px !important;
  }

  /* Center the section heading + intro paragraph (not the card content --
     the cards themselves stay left-aligned list items). */
  .framer-1b3l8tz {
    align-items: center !important;
  }

  .framer-1b3l8tz p,
  .framer-1b3l8tz h2 {
    text-align: center !important;
  }

  /* "Un solo sistema" tab cards (Sitios a medida / Integraciones /
     Automatización / Visibilidad en tiempo real): frozen in Framer's
     desktop 2x2 grid (see the flex/column variant rules above this file's
     class-hash system never activates on this static export), which
     squeezed each card into a ~140px-wide cell and wrapped every
     description into an unreadable ladder of single words. Turn it into a
     single-column accordion instead -- full-width rows, description
     hidden unless the row is the active one (tab-images.js already toggles
     data-framer-name="Active"/"Non Active" per card on click/autoplay, so
     this only needs to key off that same attribute). */
  [data-framer-name="Cards"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* tab-images.js's equalizeCardHeights() pins every card's inline
     min-height to the tallest one, so all 4 read as the same size in the
     desktop grid regardless of description length -- on this mobile
     single-column layout that tallest card is always the expanded active
     one, so every collapsed card was left with dead blank space below its
     title to match. !important here beats that inline style (the one
     inline-vs-stylesheet case where !important always wins), letting each
     collapsed card size to just its own title. */
  [data-framer-name="Cards"] .framer-cZR4n {
    width: 100% !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    gap: 6px !important;
  }

  [data-framer-name="Cards"] .framer-1n19wfh {
    max-width: 100% !important;
  }

  /* Expand/collapse the description with an animated reveal instead of a
     flat display:none/block cut -- height (via grid-template-rows, the
     standard trick for animating to/from an intrinsic "auto" height) plus
     a fade and a slight upward settle so switching cards feels like a
     deliberate reveal, not a jump cut. The row wrapper drives the height
     animation; the inner element (grid's 1fr child, needs min-height:0 to
     actually shrink to 0 instead of clamping to its content) drives the
     fade/slide so text doesn't get squashed while collapsing. */
  [data-framer-name="Cards"] .framer-1n19wfh {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-framer-name="Cards"] .framer-cZR4n[data-framer-name="Active"] .framer-1n19wfh {
    grid-template-rows: 1fr;
  }

  [data-framer-name="Cards"] .framer-1n19wfh > p {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-framer-name="Cards"] .framer-cZR4n[data-framer-name="Active"] .framer-1n19wfh > p {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease 0.15s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }

  /* FAQ questions are uppercase at 18px, sized for the desktop-width card —
     on a narrow phone card that's wide enough to force ugly mid-word line
     breaks. Shrink it so it wraps on word boundaries instead. */
  .framer-kKgxV .framer-styles-preset-10zronu {
    font-size: 15px !important;
  }

  /* Same frozen-desktop-row issue as the sections above: the FAQ intro
     column and the question list were stuck side by side, squeezing both
     into unusably narrow slivers. */
  .framer-shwzx1 {
    flex-direction: column !important;
    width: 100% !important;
    gap: 32px !important;
  }

  .framer-shwzx1 > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Results counters ("40+ / 12 / 98% / 3x"): Framer's own mobile variant
     stacks the four stat cards in a single column with large gaps, pushing
     the section across several screens of scroll. Force a 2x2 grid instead. */
  [data-framer-name="Card Content"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    height: auto !important;
    row-gap: 8px !important;
  }

  /* .framer-kMeGG.framer-1ez813n (each stat card) carries a desktop-only
     fixed size (width: 308px; padding: 52px 60px) with no responsive
     override of its own -- the single-column flex layout happened to
     stretch it back to 100% via cross-axis stretch, but a grid item with an
     explicit (non-auto) width isn't stretched the same way, so under the
     2x2 grid above each card kept trying to lay out at ~308px inside a
     ~165px column. That mismatch was also what made the label text below
     each number measure inconsistently and break mid-word. Give the card an
     explicit mobile-appropriate size instead of relying on stretch. */
  [data-framer-name="Card Content"] .framer-kMeGG.framer-1ez813n {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
  }

  /* Section titles ("Un solo sistema...", "Automatiza cada...", "Resultados
     que se notan", "Preguntas frecuentes", the closing CTA heading): unlike
     the hero <h1>, which uses Framer's responsive text-preset class and
     correctly scales down (56px -> 30px here), these five are built as a
     plain <p style="font-size:56px..."> with no responsive variant at all
     -- scroll-fill-headings.js targets that exact inline-style signature to
     wrap them for its letter-color animation, which is how this selector
     stays scoped to just these titles. Match the hero's mobile size. */
  :is(p, h2)[style*="font-family:Space Grotesk"] {
    font-size: 30px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  /* Hero buttons ("Empezar" / "Ver servicios"): stack of an auto-width pill
     next to a near-full-width bar looked lopsided. Put them side by side,
     evenly split. flex-grow alone doesn't split these two evenly -- they
     sit in different points of the ssr-variant/display:contents chain, so
     explicit calc() widths are used instead of relying on flex-basis math. */
  .framer-1lirvy4 {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .framer-1lirvy4 .framer-5bbrmb-container {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    min-width: 0 !important;
  }

  .framer-1lirvy4 .framer-5bbrmb-container a {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .framer-1lirvy4 > button.framer-13n76yv {
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .framer-1lirvy4 p {
    font-size: 16px !important;
  }
}


/* ---------- Header logo ---------- */
/* The logo image is 2142x625, but Framer's box used a 5.1:1 ratio, so with
   object-fit:contain the logo only filled part of its box and looked small. */
nav[name='Navber'] .framer-1xvzq2z {
  padding-top: 12px;
  padding-bottom: 12px;
}

nav[name='Navber'] .framer-f63uq9 {
  aspect-ratio: 2142 / 625;
  width: 190px;
}

/* Tablet/laptop (810-1439px): the page content sits 28px from the screen
   edges here (it only centers at 1224px wide from 1440px up), but the nav
   kept its desktop 0 108px padding, so its side lines didn't line up with
   the content's. Match the content inset. */
@media (min-width: 810px) and (max-width: 1439.98px) {
  nav[name='Navber'].framer-ikz2fj {
    padding: 0 28px !important;
  }
}

/* Laptops (1024-1439px, e.g. MacBooks at ~1280-1470px wide) fall into
   Framer's "tablet" breakpoint (810-1439px), whose frozen variant rules
   are sized for an 810px canvas. Undo the two that break the layout on a
   laptop screen, restoring their desktop (>=1440px) values: */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  /* "Automatiza cada parte de tu negocio": tablet pins the second card row
     to height: 368px, which cut off the card descriptions. */
  .framer-0f049 .framer-22eg6u {
    height: min-content !important;
  }

  .framer-0f049 .framer-1xvxyoq-container,
  .framer-0f049 .framer-wsah3r-container,
  .framer-0f049 .framer-u43mty-container {
    height: auto !important;
  }

  /* "Resultados que se notan": tablet turns the four stat cards into a
     2x2 grid; desktop keeps them in a single row. */
  .framer-0f049 .framer-1tb2cvz {
    display: flex !important;
    flex-direction: row !important;
  }

  .framer-0f049 .framer-xm6ywf-container,
  .framer-0f049 .framer-qrj6ni-container,
  .framer-0f049 .framer-woz3ti-container,
  .framer-0f049 .framer-iplq5x-container {
    flex: 1 0 0 !important;
    width: 1px !important;
    height: auto !important;
    place-self: auto !important;
  }
}

/* "Un solo sistema, procesos infinitos" on tablets (810-1199px): side by
   side, the text column is only ~half the width, so the 56px title broke
   into four lines and the 2x2 tab cards split words mid-way. Stack it like
   mobile does instead: heading + cards full width, image centered below. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-ZmtpW.framer-187vptf {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 48px !important;
  }

  .framer-ZmtpW.framer-187vptf > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  .framer-ZmtpW.framer-187vptf [data-framer-name="Images"] {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
}

/* Mobile: the nav kept its desktop 0 108px padding, which on small phones
   left the logo no room and pushed it off-center. The logo is the only
   item in the bar here (links live in the bottom icon bar), so center it
   and let it scale with the screen. */
@media (max-width: 809.98px) {
  /* Same 20px side inset as the page content, so the header container's
     side border lines continue the content's vertical frame lines. */
  nav[name='Navber'].framer-ikz2fj {
    padding: 0 20px !important;
  }

  nav[name='Navber'] .framer-1xvzq2z {
    justify-content: center !important;
    max-width: none;
    padding: 12px 16px;
  }

  nav[name='Navber'] .framer-1py07w0 {
    width: 100%;
    justify-content: center;
  }

  nav[name='Navber'] .framer-f63uq9 {
    width: clamp(140px, 46vw, 200px);
    max-width: 100%;
  }
}

/* ---------- "Automatiza cada parte de tu negocio" cards ---------- */
/* On mobile every card stacks full width, but Card 1 and Card 2 variants
   use different image-box ratios (1.89 vs 1.21) and paddings, so the
   images rendered at different sizes. Give them all the same box. */
@media (max-width: 809.98px) {
  .framer-Yv9B2 .framer-w4kekp,
  .framer-Yv9B2.framer-v-1hbj4lw .framer-w4kekp {
    aspect-ratio: 1.45 !important;
  }

  .framer-Yv9B2.framer-uttal7,
  .framer-Yv9B2.framer-v-1hbj4lw.framer-uttal7 {
    padding: 25px 30px !important;
  }
}

/* ---------- Results: star rating ---------- */
/* Two layers of the same five stars: grey underneath, gold on top clipped
   to --rating (98% = 4.9 de 5). */
.am-stars {
  position: relative;
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 3px;
  color: rgb(224, 224, 224);
  margin: 4px auto 6px;
}
.am-stars::before {
  content: "★★★★★";
}
.am-stars::after {
  content: "★★★★★";
  position: absolute;
  inset: 0;
  width: var(--rating, 100%);
  overflow: hidden;
  white-space: nowrap;
  color: #f5b301;
}