/* Apple-inspired theme pass — experimental. Overrides design tokens only,
   the underlying Astro-generated CSS is untouched. */

/* Calculator sliders: every bit of the actual visual styling was written
   as arbitrary-value Tailwind classes (bg-[linear-gradient(...)],
   [&::-webkit-slider-thumb]:size-4, [&::-moz-range-thumb]:..., etc.) —
   none of that compiles in this build, so every slider fell back to a
   bare, unstyled appearance-none track: no colored fill showing the
   current value, and a near-invisible native thumb. It still updated the
   numbers underneath, but with no visual feedback while dragging it reads
   as broken/unresponsive. Real CSS for the track fill + a proper,
   touch-sized thumb on both engines. */
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 0.375rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--calc-fill) var(--pct, 0%), var(--calc-rail) var(--pct, 0%));
  outline: none;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--calc-thumb);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.calc-slider::-webkit-slider-thumb:active {
  transform: scale(1.15);
}
.calc-slider::-moz-range-thumb {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--calc-thumb);
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.calc-slider::-moz-range-thumb:active {
  transform: scale(1.15);
}
.calc-slider::-moz-range-track {
  height: 0.375rem;
  border-radius: 999px;
  background: transparent;
}

/* "Cada cliente identificado desde el primer mensaje" (Leads widget,
   #soluciones): grid-cols-[auto_1fr_auto] / lg:grid-cols-[auto_1fr_auto_auto]
   are arbitrary-value Tailwind classes that never got compiled into this
   build's CSS, so the row had NO grid-template-columns at all — every row
   fell back to a single implicit column with each item auto-sized to its
   own content instead of the original 4-track layout (avatar spacer / bar
   spacer / status pill / price). Real explicit tracks restore that same
   layout at every breakpoint. The avatar circle and progress bar are kept
   as transparent spacers (no fill color) purely to reserve the same
   spacing as before — the status pill sits where it always did, roughly
   centered, price pinned to the right. */
[data-astro-cid-nbpjtyif].row {
  grid-template-columns: auto 1fr auto auto;
}
/* The widget's own container is `grid place-items-center`, which sizes
   its single child to the child's own content (shrink-to-fit) instead of
   stretching it — so the rows above only ever had as much width as their
   own content demanded. Force the actual card content to fill the space
   it's centered in. */
[data-astro-cid-nbpjtyif][data-animate] {
  width: 100%;
}

/* Cookie consent banner: near-full-width dark bar (brand ink + a hint of
   the same green gradient as the closing CTA card), floating with a small
   margin from the screen edges rather than touching them, and slides up
   with a fade instead of just popping into existence. */
[data-cookie-banner] {
  transform: translateY(calc(100% + 1.5rem));
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease-out;
  pointer-events: none;
}
[data-cookie-banner].is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner-card {
  background-color: var(--blue-deep);
  background-image:
    radial-gradient(60rem 34rem at 12% 0%, rgba(52, 211, 153, 0.55), transparent 65%),
    radial-gradient(50rem 30rem at 100% 100%, rgba(16, 185, 129, 0.4), transparent 68%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.45);
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
@media (min-width: 640px) {
  .cookie-banner-card {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}
[data-cookie-reject] {
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.cookie-banner-accept {
  background-color: var(--sky);
  color: var(--blue-deep);
}
.cookie-banner-accept:hover {
  background-color: var(--sky-strong);
}
@media (prefers-reduced-motion: reduce) {
  [data-cookie-banner] {
    transition-duration: 0.01ms;
  }
}

/* Legal pages (privacidad / aviso-legal / política de cookies): plain
   prose layout. Most spacing/list utilities these need (pt-36, pb-24,
   list-disc, space-y-*, etc.) aren't compiled into this build's CSS since
   the original template never used them, so this is one self-contained
   block instead of relying on Tailwind classes that would silently no-op. */
.legal-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: 9.5rem 1.5rem 6rem;
}
.legal-page .legal-eyebrow {
  color: var(--blue-deep);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
.legal-page h1 {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.legal-page .legal-updated {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  margin-bottom: 3rem;
}
.legal-page h2 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
}
.legal-page p {
  color: var(--muted-foreground);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.legal-page ul {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--muted-foreground);
  line-height: 1.75;
  margin: 0 0 1.25rem;
}
.legal-page li {
  margin-bottom: 0.5rem;
}
.legal-page li p {
  display: inline;
  margin: 0;
}
.legal-page a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page strong {
  color: var(--ink);
  font-weight: 600;
}

/* Footer legal links: the browser's default underline thickness reads as
   too heavy/bold next to this small, light-colored text — thin it out. */
[data-site-footer] .text-taupe a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* "Así funciona, pieza a pieza" now reads as a subsection of "Cómo lo
   resolvemos" (same gray background, smaller heading) rather than its own
   section, so it sits right under that section's closing CTA with much
   less top padding than a normal section start. */
#producto {
  padding-top: 1.5rem !important;
}
@media (min-width: 640px) {
  #producto {
    padding-top: 2rem !important;
  }
}

/* Final CTA card: p-10/sm:p-14 aren't compiled into this build's CSS
   (only classes actually used in the original template survive the
   Tailwind purge), so the card had zero padding and the content sat
   flush against the top/bottom edges. Set it explicitly instead. */
.cta-final-card {
  padding: 2.5rem;
}
@media (min-width: 640px) {
  .cta-final-card {
    padding: 3.5rem;
  }
}

/* Less gap between the FAQ list right above and this closing CTA, so it
   doesn't read as a whole separate section. */
.cta-final-section {
  padding-top: 3rem !important;
}
@media (min-width: 640px) {
  .cta-final-section {
    padding-top: 4rem !important;
  }
}

/* Closing CTA card: standout block in the brand green (not black) with a
   faint grid, wider/more rectangular than tall — generous horizontal
   breathing room instead of a boxy, near-square card. */
.cta-final-card {
  position: relative;
  overflow: hidden;
  background-color: #000503 !important;
  background-image:
    radial-gradient(110% 100% at 50% 0%, var(--blue) 0%, transparent 85%),
    radial-gradient(90% 80% at 50% 8%, var(--blue-deep) 0%, transparent 82%),
    radial-gradient(160% 160% at 50% 50%, #04241b 30%, #000503 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 56rem;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .cta-final-card {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
.cta-final-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center;
  -webkit-mask-image: radial-gradient(80% 90% at 50% 40%, #000 40%, transparent 100%);
  mask-image: radial-gradient(80% 90% at 50% 40%, #000 40%, transparent 100%);
}
.cta-final-card > * {
  position: relative;
  z-index: 1;
}

/* On the green card, a same-hue button (dark green, or even the lighter
   brand green) barely separates from the background behind it — too low
   contrast to "pop". Solid white reads instantly against the green
   gradient, and a soft green glow around it ties it back to the card. */
.cta-final-card a[class*="bg-ink"][class*="shadow-pill"] {
  background-color: #ffffff !important;
  color: var(--blue-deep) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 40px 4px rgba(52, 211, 153, 0.55), 0 14px 30px -8px rgba(0, 0, 0, 0.55) !important;
  transform: scale(1.05);
}
.cta-final-card a[class*="bg-ink"][class*="shadow-pill"]:hover {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 52px 8px rgba(52, 211, 153, 0.7), 0 16px 34px -8px rgba(0, 0, 0, 0.6) !important;
  transform: scale(1.08);
}
/* Same reason: .accent-em is the same green as this card's background
   (global rule turns it var(--blue-deep)), so on this card only it would
   be invisible — make it stand out in white instead. */
.cta-final-card .accent-em {
  color: var(--cream) !important;
}

/* FAQ accordion "+" → "−" icon: two bars instead of one rotating glyph.
   The horizontal bar never moves; the vertical bar rotates 90deg on open
   and lands exactly on top of the horizontal one, so the plus visibly
   folds itself into a minus instead of just swapping icons or turning
   into an "X" (a plain 45deg rotation of a whole "+" glyph). */
.faq-icon-bar {
  left: 50%;
  top: 50%;
}
.faq-icon-bar-v {
  width: 1.5px;
  height: 100%;
  transform: translate(-50%, -50%);
}
.faq-icon-bar-h {
  width: 100%;
  height: 1.5px;
  transform: translate(-50%, -50%);
}
[data-faq-item] .faq-icon-bar-v {
  transform-origin: center;
}
.group\/faq[data-open] .faq-icon-bar-v {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Hero + the trust-logo strip together fill the full first screen (one
   wrapper, min-height 100vh): the next section only appears once you
   scroll. #inicio flex-grows to whatever space is left after the logo
   strip's own (natural-size) height, and its own two spacer divs share
   that leftover space between them — so the headline block just floats
   centered in however much room there actually is, at full natural size,
   instead of every piece being shrunk down to force a fit. */
.hero-viewport {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#inicio {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.hero-spacer-half {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 1.5rem;
}
/* More breathing room between the headline and the subhead paragraph —
   the headline itself stays put, the subhead and CTA move down. */
#inicio h1 + p {
  margin-top: 4rem !important;
}
#inicio h1 + p + .mt-8 {
  margin-top: 3.5rem !important;
}

/* Hero CTA: a touch smaller than the other big pill buttons on the page
   (this one only — scoped to #inicio so it doesn't shrink the "Cuéntanos
   tu caso" / "Diagnóstico gratuito" buttons elsewhere, which share the
   same base classes). */
#inicio a[class*="bg-ink"][class*="shadow-pill"] {
  height: 2.75rem !important;
  padding-left: 1.75rem !important;
  padding-right: 1.75rem !important;
  font-size: var(--text-sm) !important;
}

/* "Todo centralizado" widget: the hub icon reuses the site's white logo
   mark, but this hub sits on a cream circle — invisible white-on-cream.
   Force it back to dark here, this is the only place it needs to be dark. */
#soluciones [data-astro-cid-i6h6empj] img {
  filter: brightness(0);
}

/* Arbitrary text-[clamp(...)] values on the hero h1 never get compiled in
   this static build unless that exact string already existed in the
   original site, so they silently no-op and the size falls back to
   .display-xl's own (much larger) token. Set it explicitly instead. */
#inicio h1 {
  font-size: clamp(2rem, 1.1rem + 3vw, 3rem) !important;
}

/* Hero: dark, atmospheric background instead of plain white — the header
   above it is already a black glass bar, so this reads as one continuous
   dark opening instead of a white section under a black nav. Kept the
   exact same centered, simple layout; just gives it depth/weight. */
#inicio {
  position: relative;
  background-color: #000;
  overflow: hidden;
}
#inicio::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(56rem 38rem at 18% 8%, rgba(16, 185, 129, 0.24), transparent 60%),
    radial-gradient(46rem 34rem at 88% 28%, rgba(5, 150, 105, 0.18), transparent 62%),
    radial-gradient(50rem 38rem at 50% 105%, rgba(16, 185, 129, 0.14), transparent 65%);
  pointer-events: none;
}
/* Alternate hero treatment being A/B'd against the plain gradient above —
   toggle by adding/removing "hero-photo" on the #inicio section. */
#inicio.hero-photo::before {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.9)),
    radial-gradient(50rem 34rem at 50% 15%, rgba(16, 185, 129, 0.12), transparent 65%),
    url("/hero-bg.webp");
  background-size: cover;
  background-position: center 32%;
}
#inicio > * {
  position: relative;
  z-index: 1;
}
#inicio h1 .block {
  color: var(--cream) !important;
}
#inicio h1 .accent-em {
  color: var(--sky) !important;
}
#inicio p.text-muted-foreground {
  color: rgba(251, 251, 253, 0.72) !important;
}
#inicio svg.text-clay {
  color: rgba(251, 251, 253, 0.45) !important;
}

/* The 4 reused widgets lean on --alert (red) for their "problem" accents —
   off-brand for black/white/green. Swap it to the brand green here only. */
.retos-card {
  --alert: var(--success);
  --alert-deep: var(--success-deep);
  --alert-lift: var(--success-lift);
}
#problemas .retos-card.retos-card {
  background-color: color-mix(in oklab, var(--clay) 58%, var(--cream)) !important;
}
#problemas .retos-card.retos-card h3 {
  color: var(--success) !important;
}

/* Countdown-ring figures: a clean Apple-style sans (the site's own display
   font, not the editorial italic serif used for accent-em) — bold tabular
   numerals like a stat callout, not a text accent. */
.retos-card [data-astro-cid-ie6riktl] .anim.tick {
  font-family: "Rethink Sans Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Countdown ring: "30s", "2min", "4min" in green, then "5min", "8min"
   counting further once it turns red, landing on "+10min" with the ring
   fully closed. That final value grows noticeably larger the whole time
   it holds (scale 1 → 1.4), then the 7.5s loop resets to empty.
   Each value fades out exactly as far as it fades in — the outgoing
   number reaches 0 opacity at the SAME instant the incoming one starts
   from 0, never overlapping (two different numbers half-visible on top
   of each other read as a smudge) and never leaving a dead gap either
   (that earlier version is what looked like a glitch). The ring's own
   color blend window is centered on that same handoff. */
#problemas .tick[data-astro-cid-ie6riktl] {
  animation-duration: 7.5s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  opacity: 0;
  transform-origin: center;
}
#problemas .tick[data-astro-cid-ie6riktl]:nth-child(1) {
  animation-name: tick-touch-1 !important;
}
#problemas .tick[data-astro-cid-ie6riktl]:nth-child(2) {
  animation-name: tick-touch-2 !important;
}
#problemas .tick[data-astro-cid-ie6riktl]:nth-child(3) {
  animation-name: tick-touch-3 !important;
}
#problemas .tick[data-astro-cid-ie6riktl]:nth-child(4) {
  animation-name: tick-touch-4 !important;
}
#problemas .tick[data-astro-cid-ie6riktl]:nth-child(5) {
  animation-name: tick-touch-5 !important;
}
#problemas .tick[data-astro-cid-ie6riktl]:nth-child(6) {
  animation-name: tick-touch-6 !important;
}
/* Fading out at the loop's end (tick-touch-6 / ring-fill-*) but popping
   back to full opacity instantly at 0% read as a blink — a fade needs a
   matching fade-in on the other side, not a hard snap-on. Mirror the
   same 150ms ramp here. */
@keyframes tick-touch-1 {
  0% { opacity: 0; }
  2% { opacity: 1; }
  10.9333% { opacity: 1; }
  13.3333% { opacity: 0; }
  to { opacity: 0; }
}
@keyframes tick-touch-2 {
  0%, 13.3333% { opacity: 0; }
  15.7333% { opacity: 1; }
  24.2667% { opacity: 1; }
  26.6667% { opacity: 0; }
  to { opacity: 0; }
}
@keyframes tick-touch-3 {
  0%, 26.6667% { opacity: 0; }
  29.0667% { opacity: 1; }
  37.6% { opacity: 1; }
  40% { opacity: 0; }
  to { opacity: 0; }
}
@keyframes tick-touch-4 {
  0%, 40% { opacity: 0; }
  42.4% { opacity: 1; }
  50.9333% { opacity: 1; }
  53.3333% { opacity: 0; }
  to { opacity: 0; }
}
@keyframes tick-touch-5 {
  0%, 53.3333% { opacity: 0; }
  55.7333% { opacity: 1; }
  64.2667% { opacity: 1; }
  66.6667% { opacity: 0; }
  to { opacity: 0; }
}
/* The loop's hard cut (7.5s -> 0s, everything jumps back at once) reads
   as the ring lagging a beat behind the number — the "+10min" is still
   visibly growing right up to the reset while the ring has already been
   sitting still for 2.5s, so the eye locks onto the number's motion and
   perceives the ring's identical-instant reset as trailing it. Fading
   both out together in the last 150ms, instead of holding at full
   opacity until the instant cut, turns that jump into an intentional
   beat instead of a stray-feeling desync. */
@keyframes tick-touch-6 {
  0%, 66.6667% { opacity: 0; transform: scale(1); }
  69.0667% { opacity: 1; transform: scale(1); }
  98% { opacity: 1; transform: scale(1.4); }
  to { opacity: 0; transform: scale(1.4); }
}
/* Two static-colored arcs instead of one arc whose color animates — the
   green segment fills up to the "4min" mark and then just sits there
   unchanged; the red segment (pre-rotated 216deg — the fraction already
   filled at that moment, at the SAME constant fill rate as before) picks
   up exactly where green stops and keeps going at that identical rate.
   Nothing ever interpolates between green and red, so there's no blend
   frame to read as a flash — it's just two shapes, one static-colored arc
   revealing after the other, both filling at the one linear speed. */
/* Longhand only — the `animation:` shorthand implicitly resets
   animation-play-state to its default (running), which silently
   overrides the site's own pause/resume system
   ([data-animate][data-inview] .anim { animation-play-state: running },
   paused otherwise). With the shorthand here, these two rings kept
   running even while scrolled off-screen, while the .tick numbers next
   to them correctly paused — so scrolling away and back showed the ring
   and the number at two different points in the 7.5s cycle. */
#problemas .ring-green[data-astro-cid-ie6riktl] {
  animation-name: ring-fill-green !important;
  animation-duration: 7.5s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
#problemas .ring-red[data-astro-cid-ie6riktl] {
  animation-name: ring-fill-red !important;
  animation-duration: 7.5s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
/* The real cause of the green "blink": stroke-dasharray="1 1" with
   stroke-linecap="round" on an SVG circle. Right when the loop resets,
   stroke-dashoffset snaps to 1 — a dash of length exactly 0 — and a
   round linecap draws a ZERO-length dash as a filled dot (two
   overlapping round caps), not as nothing. So for one instant there's a
   solid dot sitting at the 12-o'clock start point before it stretches
   into an arc, which reads as a flash/blink. The red arc's own zero-
   length instant (when ITS fill starts, at 40%) lands exactly on top of
   where green's arc already ends, so the same dot is invisible there —
   green is the only one popping into empty space. Butt caps never draw
   anything for a zero-length dash, which removes the dot outright; at
   this stroke-width (7px on an 84px-wide ring) the flat vs. rounded end
   is not a noticeable style change. */
#problemas .ring-green[data-astro-cid-ie6riktl],
#problemas .ring-red[data-astro-cid-ie6riktl] {
  stroke-linecap: butt;
}
/* The red arc's pre-rotation used an inline transform-origin in raw px
   (SVG user-space units), which some mobile browsers resolve differently
   than desktop Chrome once the SVG is scaled down to fit its box — the
   rotation pivot landed off-center there, so the red segment visibly
   didn't line up with where the green one stopped. transform-box: fill-box
   with a percentage origin is the well-supported, scale-independent way
   to rotate around an SVG shape's own center on every browser. */
.ring-red-rotate {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: rotate(216deg);
}
/* Fades out in step with tick-touch-6 above, over the same last 150ms,
   so the ring and the final number disappear together instead of the
   ring holding at full opacity until the same instant hard-cut. */
@keyframes ring-fill-green {
  0% { stroke-dashoffset: 1; opacity: 1; }
  40% { stroke-dashoffset: 0.4; }
  98% { stroke-dashoffset: 0.4; opacity: 1; }
  to { stroke-dashoffset: 0.4; opacity: 0; }
}
@keyframes ring-fill-red {
  0%, 40% { stroke-dashoffset: 1; opacity: 1; }
  66.6667% { stroke-dashoffset: 0.6; }
  98% { stroke-dashoffset: 0.6; opacity: 1; }
  to { stroke-dashoffset: 0.6; opacity: 0; }
}
.retos-card [data-astro-cid-oacjicrg] .text-taupe-soft span {
  font-family: var(--font-sans);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* "La solución" — the 3 widget boxes only had a min-height, so each grew to
   fit its own content (kanban list / phone mockup / notification feed),
   leaving headings misaligned across the row. Pin them to one fixed height. */
.min-h-\[260px\] {
  height: 320px !important;
  min-height: 0 !important;
}
/* The grid itself uses align-items:start, so cards keep their own content
   height instead of matching the row — the left card's longer paragraph
   made it stick out below the other two. Stretch them to match instead. */
#soluciones ul.items-start {
  align-items: stretch !important;
}

/* "Los retos" — 4 cards: horizontal scroll-snap on mobile, a clean 2x2
   grid from tablet up. Written as plain CSS instead of chained Tailwind
   responsive classes, since several combinations we'd need (md:grid-cols-2,
   md:w-auto...) aren't in this static build's compiled CSS. */
.retos-grid {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: 1.5rem;
  padding-bottom: 1.25rem;
  margin-inline: -1.5rem;
}
.retos-card {
  width: 85vw;
  flex-shrink: 0;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .retos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    padding-inline: 0;
    padding-bottom: 0;
    margin-inline: 0;
  }
  .retos-card {
    width: auto;
  }
}

/* "La solución" widgets. */

/* Card 3 — "Todo centralizado, venga por donde venga": a small dot travels
   inward along each orbiting arm toward the hub, on top of the existing
   rotation — reads as data flowing in from each channel to one place.
   The dot reuses the site's own `.counter` class — the exact same rule
   (margin-left: var(--r); translateY(-50%)) that positions the real icon
   — so it starts exactly on the bubble by construction. The real bug that
   kept throwing it off: the dot is a normal-flow SIBLING placed before the
   icon inside the same wrapper, so without taking it out of flow it was
   physically pushing the icon down by its own box height, corrupting
   every measurement. Pulling it out with position:absolute fixes that;
   margin-left/-top then just needs to offset by half the icon-vs-dot
   size difference (37.4px vs 7px → 15.2px each axis) so their centers,
   not their edges, coincide. */
#soluciones [data-astro-cid-i6h6empj] .hub-dot.counter {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin-left: calc(var(--r) + 15.2px);
  margin-top: -18.7px;
  border: none;
  box-shadow: 0 0 6px var(--blue-lift);
  background: var(--blue-lift);
  opacity: 0;
  animation-name: hub-flow-dot !important;
  animation-duration: 1.8s !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}
#soluciones [data-astro-cid-i6h6empj] .arm[style*="--start:0deg"] .hub-dot {
  animation-delay: 0s !important;
}
#soluciones [data-astro-cid-i6h6empj] .arm[style*="--start:90deg"] .hub-dot {
  animation-delay: 0.45s !important;
}
#soluciones [data-astro-cid-i6h6empj] .arm[style*="--start:180deg"] .hub-dot {
  animation-delay: 0.9s !important;
}
#soluciones [data-astro-cid-i6h6empj] .arm[style*="--start:270deg"] .hub-dot {
  animation-delay: 1.35s !important;
}
@keyframes hub-flow-dot {
  0% { transform: translateY(-50%) translateX(0); opacity: 1; }
  70% { transform: translateY(-50%) translateX(-64px); opacity: 1; }
  100% { transform: translateY(-50%) translateX(-72px); opacity: 0; }
}

/* Client-logo strip: every logo at the SAME rendered height (not fit into
   a fixed box), so they read as visually equal size regardless of each
   logo's own aspect ratio or internal padding. */
.brand-chip {
  height: 6rem !important;
}
.brand-chip-logo {
  height: 2.75rem;
  width: auto;
  display: block;
  /* Strip section is pure black (bg-indigo-deep), so logos are rendered
     white here instead of black to stay visible against it while still
     being one flat, brand-agnostic color instead of each logo's own colors. */
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
@media (min-width: 640px) {
  .brand-chip {
    height: 7rem !important;
  }
  .brand-chip-logo {
    height: 3.75rem !important;
  }
}

:root {
  /* Neutrals: navy/cream → Apple white / near-black grays */
  --cream: #fbfbfd;
  --cream-rgb: 251 251 253;
  --sand: #e5e5ea;
  --clay: #c7c7cc;
  --taupe-soft: #a1a1a6;
  --taupe: #6e6e73;
  --taupe-deep: #424245;

  /* Ink / deep surfaces → Apple near-black + pure black */
  --ink: #1d1d1f;
  --ink-rgb: 29 29 31;
  --indigo: #000000;
  --indigo-deep: #000000;
  --indigo-rgb: 0 0 0;

  /* Accent → emerald green (black-white-green brand tone) */
  --sky: #34d399;
  --sky-strong: #10b981;
  --sky-rgb: 52 211 153;
  --blue: #059669;
  --blue-deep: #046c53;
  --blue-lift: #10b981;
  --blue-rgb: 5 150 105;

  /* Status colors, Apple-tuned */
  --alert: #ff3b30;
  --alert-deep: #d70015;
  --alert-lift: #ff6961;
  /* Same exact green as the brand accent (--blue) — one green, everywhere */
  --success: var(--blue);
  --success-deep: var(--blue-deep);
  --success-lift: var(--blue-lift);

  /* Typography: drop the serif italic accent for an Apple-simple all-sans look */
  --font-editorial: "Rethink Sans Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Slightly more generous card radius */
  --radius-card: 1.75rem;
  --radius-3xl: 1.75rem;
}

/* Nav bar → dark glass, for much more black presence at the one spot
   that's visible on every single scroll position */
[data-navbar] > div {
  background-color: rgba(10, 10, 10, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
[data-navbar] nav a {
  color: var(--taupe-soft) !important;
}
[data-navbar] nav a:hover {
  color: var(--cream) !important;
}
[data-navbar] [aria-label="Progresión IA"] {
  color: var(--cream) !important;
}

/* Primary CTA pills → green instead of black, everywhere they appear */
a[class*="bg-ink"][class*="shadow-pill"] {
  background-color: var(--blue) !important;
  color: var(--cream) !important;
}
a[class*="bg-ink"][class*="shadow-pill"]:hover {
  background-color: var(--blue-deep) !important;
}

/* Section eyebrow labels ("Los retos", "La solución"...) → green, not gray */
.eyebrow {
  color: var(--blue-deep) !important;
}

/* Italic emphasis words in headlines → green instead of plain ink */
.accent-em {
  color: var(--blue-deep) !important;
}

/* Soft color washes behind the page so glass panels have something to
   catch and blur, like Apple's visionOS / WWDC pages */
body {
  background-image:
    radial-gradient(48rem 28rem at 12% 0%, rgba(16, 185, 129, 0.10), transparent 60%),
    radial-gradient(40rem 26rem at 92% 18%, rgba(5, 150, 105, 0.08), transparent 60%),
    radial-gradient(46rem 30rem at 50% 100%, rgba(16, 185, 129, 0.07), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Header: explicit sizing. Many Tailwind utility names (h-16, h-28, h-12,
   pt-36, max-w-6xl...) don't exist in this static build's compiled CSS
   unless the original site already used them, so they silently do nothing.
   Real values here instead of guessing class names. */
[data-navbar] > div > div {
  height: 6.5rem !important;
  max-width: 76rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
@media (min-width: 640px) {
  [data-navbar] > div > div {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}
[data-navbar] a[aria-label="Progresión IA"] img {
  height: 3.15rem !important;
  width: auto !important;
}
[data-navbar] nav a {
  font-size: 1rem !important;
}
[data-navbar] a[aria-label="Progresión IA"] ~ a {
  font-size: 1rem !important;
}

#inicio {
  /* Trimmed down (from 9.5rem) so the hero + logo strip below it both fit
     in the first screen without scrolling — still clears the fixed
     header (~6.5rem tall) with a safe margin. */
  padding-top: clamp(7rem, 9vh, 7.75rem) !important;
}
section[id] {
  scroll-margin-top: 7.5rem !important;
}

/* Calculator: make the black section fill the full viewport height while
   on it, instead of just wrapping its content tightly. */
#calculadora {
  min-height: 91vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Glass cards & dashboards (Apple-style frosted glass) --- */

/* Light-section cards */
[class*="rounded-card"][class*="bg-cream"],
[class*="rounded-card"][class*="bg-sand"] {
  background-color: color-mix(in oklab, var(--cream) 55%, transparent) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ...except cards with their own accent border (e.g. the "Después" card) —
   keep their green accent instead of flattening it to plain glass */
[class*="rounded-card"][class*="border-blue"] {
  border-color: color-mix(in oklab, var(--blue-deep) 40%, transparent) !important;
}

/* Dark-section cards get a dark frosted-glass treatment instead
   (excluding the logo strip, which should stay unboxed) */
.surface-dark [class*="rounded-card"]:not(.brand-chip) {
  background-color: rgba(255, 255, 255, 0.08) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.brand-chip {
  background-color: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-astro-cid-umns3odb].gap-5 {
  gap: 4.75rem !important;
}

/* Safari/macOS can visibly judder the strip when the hover pause toggles
   animation-play-state mid-frame, since the transform layer isn't promoted
   to its own compositor layer beforehand. Hinting it up-front keeps the
   pause/resume snap-free. */
.marquee-track {
  will-change: transform;
}

/* "Despachos y asesorías que ya trabajan con nosotros" label → brand green */
h2.text-clay {
  color: var(--blue-lift) !important;
}

/* Calendar / grid cells inside the "retos" dashboard */
[class*="rounded-inset"] {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* The 4 logos added for the empresas page are tight-cropped to their ink (no
   transparent margin) like the original ones, so the visible gap between any
   two logos is the same everywhere. Heights are set per logo to keep each one
   at its previous visual size now that the margin is gone. */
.brand-chip-logo[src*="propx-group"] { height: 1.06rem; }
.brand-chip-logo[src*="alpha-clinic"] { height: 2.08rem; }
.brand-chip-logo[src*="gonzalo-zuazo"] { height: 2.52rem; }
.brand-chip-logo[src*="x-golf"] { height: 2.6rem; }
@media (min-width: 640px) {
  .brand-chip-logo[src*="propx-group"] { height: 1.44rem !important; }
  .brand-chip-logo[src*="alpha-clinic"] { height: 2.84rem !important; }
  .brand-chip-logo[src*="gonzalo-zuazo"] { height: 3.44rem !important; }
  .brand-chip-logo[src*="x-golf"] { height: 3.54rem !important; }
}

/* The gap between logos is overridden to 4.75rem above, but each of the two
   marquee lists kept the original 1.25rem right padding, so the spot where
   one list ends and its copy begins (every loop) had a visibly tighter gap
   than everywhere else. Make that padding match the gap. */
.marquee-track > ul[data-astro-cid-umns3odb] {
  padding-right: 4.75rem !important;
}