/* Local additions on top of the site's own compiled CSS (assets/index-Bj_zmeE7.css). */

/* Reveal on scroll (replaces the original framer-motion fade-ins) */
.js [data-reveal] { transition: opacity .6s ease-out, transform .6s ease-out; }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: var(--reveal-from); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; transition: none; }
}

/* GradientMesh stays behind the original hero content and quote card. */
#hero-band .hero-bg { display: none; }
#hero-band { background: #0d0d11; isolation: isolate; }
#hero-band .hero-gradient { position: absolute; inset: 0; }
#hero-band .hero-gradient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(13 13 17 / .64), rgb(13 13 17 / .12)); }
/* Tablet / Claude preview: the stacked hero needs room below the fixed header. */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-band > .container { padding-top: 128px; padding-bottom: 64px; }
}
#hero-band h1 { color: #fff; text-shadow: 0 2px 24px rgb(2 3 8 / .7); }
#hero-band h1 + p, #hero-band h1 ~ div span { color: rgb(226 232 255 / .82); text-shadow: 0 1px 12px rgb(2 3 8 / .8); }
.mesh-toggle {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 20px; padding: 0 14px;
  border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; background: rgb(10 16 32 / .55);
  color: rgb(226 232 255 / .85); font-size: 12px; font-weight: 600; backdrop-filter: blur(6px);
}
.mesh-toggle:hover:not(:disabled) { color: #fff; border-color: rgb(255 255 255 / .4); }
.mesh-toggle:disabled { cursor: default; opacity: .75; }
.mesh-toggle[hidden] { display: none; }

/* Mobile menu (the original is rendered by React) */
.mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 20px; background: hsl(var(--background)); box-shadow: var(--shadow-card); }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: 12px 8px; font-size: 15px; font-weight: 600; color: hsl(var(--foreground)); }
.mobile-menu a.gradient-bg { margin-top: 8px; text-align: center; border-radius: 999px; color: hsl(var(--primary-foreground)); }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* ---------- Polish: mobile, accessibility, motion ---------- */

/* Slide-in reveals (translateX) pushed the map card past the viewport on phones */
#ubicacion { overflow-x: clip; }

/* Visible keyboard focus everywhere; the compiled CSS removes outlines on several controls */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid hsl(var(--accent));
  outline-offset: 3px;
}
:where(input, select, textarea):focus-visible { outline-offset: 1px; }

/* Comfortable 44px tap targets for small text links (contact details, footer, call link) */
#ubicacion a, #cotizar .jotform-quote-shell a, footer a {
  display: inline-flex; align-items: center; min-height: 44px;
}
footer a[aria-label] { justify-content: center; min-width: 44px; }
.mesh-toggle { min-height: 44px; }

/* Anchor jumps land below the fixed header */
html { scroll-padding-top: 88px; }

/* Keep the floating WhatsApp button from covering the last lines of the page */
footer { padding-bottom: calc(4rem + 72px); }
@media (min-width: 768px) { footer { padding-bottom: 4rem; } }

@media (prefers-reduced-motion: reduce) {
  .animate-pulse-soft { animation: none !important; }
  html { scroll-behavior: auto !important; }
  .group:hover img, .group:hover [class*="group-hover:scale"] { transform: none !important; }
}

/* The live Jotform stays isolated and scrollable, including on narrow phones. */
.jotform-quote-shell { overflow: hidden; min-width: 0; }
.jotform-quote-frame { display: block; width: 100%; height: 780px; border: 0; background: #fff; }
.jotform-quote-help { padding: 16px 24px 24px; text-align: center; }
.jotform-quote-help p { margin: 0 0 8px; font-size: 14px; color: hsl(var(--muted-foreground)); }
.jotform-quote-help a { justify-content: center; text-decoration: underline; text-underline-offset: 3px; }
#hero-quote-note { min-height: 3rem; }
@media (max-width: 767px) {
  .jotform-in-view > #root > a[aria-label="WhatsApp"] { visibility: hidden; pointer-events: none; }
}
@media (max-width: 480px) {
  .jotform-quote-frame { height: 700px; }
  .jotform-quote-help { padding: 12px 16px 20px; }
  #hero-quote-link { font-size: 16px; padding-inline: 12px; text-align: center; }
}

/* ---------- Ronda 3: ui-ux-pro-max (contraste, navegación, movimiento) ---------- */

/* Contrast 4.5:1 for small text: muted copy and pink eyebrows/badges on light backgrounds */
:root { --muted-foreground: 220 12% 38%; --accent-ink: 330 78% 42%; }
section:not(#hero-band) span.uppercase.tracking-widest.text-accent { color: hsl(var(--accent-ink)); }
span.bg-accent.text-accent-foreground { background-color: hsl(var(--accent-ink)); }

/* Skip link: first Tab stop, hidden until focused */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: hsl(var(--foreground)); color: #fff;
  font-size: 15px; font-weight: 700; box-shadow: var(--shadow-card);
  transform: translateY(-160%); transition: transform .2s ease-out;
}
.skip-link:focus-visible { transform: none; }

/* Cards lift slightly on real hover only; transform/shadow only, so it stays on the compositor */
@media (hover: hover) and (pointer: fine) {
  #proceso .grid > div, #confianza .grid > div, #servicios .grid > a {
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease-out;
  }
  #confianza .grid > div:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px hsl(var(--foreground) / .28); }
}

/* Staggered reveal: children of a revealed grid enter one after another */
.js [data-stagger] > * { transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-stagger]:not(.is-in) > * { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
  .js [data-stagger] > *, .js [data-stagger]:not(.is-in) > * { opacity: 1; transform: none; transition: none; }
}

/* Stats keep their width while counting up */
[data-count] { font-variant-numeric: tabular-nums; }

/* The long email in the footer pushed 320px phones 3px wide */
footer a[href^="mailto"] { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
footer a[href^="mailto"] * { min-width: 0; }