/* ==========================================================================
   Jumaro AI — visual layer v2
   --------------------------------------------------------------------------
   v1 was legibility and hygiene. This is the visual work: atmosphere in the
   dark sections, texture in the light ones, headings that carry a mark,
   numerals that become a design element, cards with real presence, and a
   reveal you can actually see.

   Constraints kept: the existing palette (near-black / white / #f5f5f7 with a
   single blue accent), Manrope + Plus Jakarta, and every existing section,
   heading and block exactly where it was. Nothing here changes structure,
   copy or behaviour.
   ========================================================================== */

:root{
  --jm-blue:#1d4ed8;
  --jm-blue-lift:#3b82f6;
  --jm-blue-soft:#93b4fd;
  --jm-ease:cubic-bezier(.16,1,.3,1);
  --jm-ease-soft:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   1. ATMOSPHERE IN THE DARK SECTIONS
   They were flat #000 slabs. The hero already establishes an aurora language;
   this extends it to the other dark sections so the page reads as one world.
   Painted as background-image over the existing background-color, so there is
   no pseudo-element and therefore no stacking-context risk with the content.
   ========================================================================== */
section.bg-black{
  background-image:
    radial-gradient(58% 42% at 14% -6%,  rgba(37,99,235,.20), transparent 68%),
    radial-gradient(48% 38% at 90% 6%,   rgba(79,70,229,.13), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, rgba(37,99,235,.10), transparent 72%);
  background-repeat:no-repeat;
}
/* The hero paints its own aurora; don't stack a second one on top of it. */
section.bg-black.min-h-screen{ background-image:none; }

/* A hairline of accent light along the top edge of each dark section. */
section.bg-black{ position:relative; }
section.bg-black::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent, rgba(59,130,246,.55) 22%, rgba(147,197,253,.35) 50%,
    rgba(59,130,246,.55) 78%, transparent);
}
section.bg-black.min-h-screen::before{ display:none; }

/* ==========================================================================
   2. TEXTURE IN THE LIGHT SECTIONS
   Flat white next to flat #f5f5f7 gave the page no depth at all. A single
   cool breath at the top of each light band ties them to the blue accent
   without reading as a gradient hero.
   ========================================================================== */
section.bg-white,
section.bg-\[\#f5f5f7\]{
  background-image:radial-gradient(78% 46% at 50% 0%, rgba(29,78,216,.055), transparent 68%);
  background-repeat:no-repeat;
}

/* ==========================================================================
   3. SECTION HEADINGS CARRY A MARK
   Every h2 was bare text on an empty field. A short accent rule under the
   heading gives each block an anchor, and it draws itself in on reveal
   rather than simply being there.
   ========================================================================== */
section h2{ position:relative; }
section h2::after{
  content:"";
  display:block;
  height:2px;
  width:56px;
  margin-top:1.15rem;
  border-radius:2px;
  background:linear-gradient(90deg,var(--jm-blue),var(--jm-blue-lift));
  transform-origin:left center;
}
section.bg-black h2::after{
  background:linear-gradient(90deg,var(--jm-blue-lift),var(--jm-blue-soft));
}
/* Draw it in when the heading reveals. */
html.jm-motion section h2.jm-reveal::after{
  transform:scaleX(0);
  transition:transform .85s var(--jm-ease) .18s;
}
html.jm-motion section h2.jm-reveal.jm-in::after{ transform:scaleX(1); }

/* ==========================================================================
   4. THE STEP NUMERALS BECOME A DESIGN ELEMENT
   They were 60px slate-200 — measured at 1.23:1, i.e. invisible, and doing no
   work. Larger, accent-tinted and set as an outline so they read as structure
   rather than as failed body text.
   ========================================================================== */
.text-slate-200.tabular-nums,
.text-slate-300.tabular-nums{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
}
section.bg-white .text-5xl.text-slate-200.tabular-nums,
section.bg-white .text-6xl.text-slate-200.tabular-nums,
.text-5xl.text-slate-200.tabular-nums{
  font-size:clamp(3.25rem,6.5vw,5rem);
  line-height:.9;
  /* Solid and legible, not a 10%-opacity ghost. Large decorative text still
     needs 3:1; this measures ~4.8:1 and reads as structure rather than as
     failed body copy. The accent arrives on hover instead of at rest. */
  color:#64748b;
  opacity:1;
  transition:color .45s var(--jm-ease), transform .45s var(--jm-ease);
}
/* On hover of the surrounding step, the numeral picks up the accent. */
.group:hover .text-5xl.text-slate-200.tabular-nums,
.rule-card:hover .text-5xl.text-slate-200.tabular-nums,
.rounded-xl.border:hover .text-5xl.text-slate-200.tabular-nums{
  color:var(--jm-blue);
  transform:translateY(-2px);
}

/* ==========================================================================
   5. CARDS WITH PRESENCE
   Flat white rectangles with a pale icon chip. Give the chip the accent, give
   the card a resting elevation, and light a hairline across the top on hover.
   ========================================================================== */
section.bg-white .rounded-xl.border,
section.bg-\[\#f5f5f7\] .rounded-xl.border{
  position:relative;
  background-color:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 28px -22px rgba(15,23,42,.30);
  transition:box-shadow .4s var(--jm-ease),
             transform .4s var(--jm-ease),
             border-color .4s ease;
}
section.bg-white .rounded-xl.border::after,
section.bg-\[\#f5f5f7\] .rounded-xl.border::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,var(--jm-blue),var(--jm-blue-lift));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--jm-ease);
}
section.bg-white .rounded-xl.border:hover,
section.bg-\[\#f5f5f7\] .rounded-xl.border:hover{
  transform:translateY(-3px);
  border-color:rgba(29,78,216,.30);
  box-shadow:0 2px 4px rgba(15,23,42,.05), 0 22px 44px -24px rgba(29,78,216,.45);
}
section.bg-white .rounded-xl.border:hover::after,
section.bg-\[\#f5f5f7\] .rounded-xl.border:hover::after{ transform:scaleX(1); }

/* Icon chips: from pale grey-blue to a real accent tile. */
.rounded-xl.border .rounded-lg,
.rounded-xl.border .rounded-md{
  transition:background-color .4s var(--jm-ease), transform .4s var(--jm-ease);
}
.rounded-xl.border:hover .rounded-lg,
.rounded-xl.border:hover .rounded-md{
  background-color:rgba(29,78,216,.12);
  transform:translateY(-1px) scale(1.04);
}

/* Dark-section cards. */
section.bg-black .rounded-xl.border,
section.bg-black .rounded-2xl.border{
  transition:border-color .4s ease, background-color .4s ease,
             transform .4s var(--jm-ease), box-shadow .4s var(--jm-ease);
}
section.bg-black .rounded-xl.border:hover,
section.bg-black .rounded-2xl.border:hover{
  border-color:rgba(96,165,250,.50);
  background-color:rgba(255,255,255,.035);
  transform:translateY(-3px);
  box-shadow:0 24px 48px -28px rgba(37,99,235,.65);
}

/* ==========================================================================
   6. QUOTES
   Testimonials were bare text. Give them an oversized quotation mark set in
   the accent at low opacity — a single typographic gesture, no card.
   ========================================================================== */
section blockquote,
section .text-xl.leading-relaxed:has(+ .mt-6),
section p.text-xl:first-letter{ }
section blockquote{ position:relative; }
section blockquote::before{
  content:"\201C";
  position:absolute; left:-.62em; top:-.28em;
  font-family:"Plus Jakarta Sans",Manrope,sans-serif;
  font-size:4.5rem; line-height:1; font-weight:800;
  color:var(--jm-blue); opacity:.14; pointer-events:none;
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */
.btn-glow-breathe{
  transition:transform .3s var(--jm-ease), box-shadow .3s var(--jm-ease),
             background-color .3s ease;
}
.btn-glow-breathe:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -14px rgba(29,78,216,.65);
}
.btn-glow-breathe:active{ transform:translateY(0) scale(.985); transition-duration:.09s; }

/* Trailing arrows drift on hover — a small kinetic tell that it is an action. */
a:hover > svg:last-child,
button:hover > svg:last-child{
  transform:translateX(3px);
  transition:transform .35s var(--jm-ease);
}
a > svg:last-child,
button > svg:last-child{ transition:transform .35s var(--jm-ease); }

/* ==========================================================================
   8. REVEAL — with enough travel to actually register
   v1 used an 18px fade that read as nothing. This moves further, adds a
   short blur resolve on headings, and staggers within groups.
   ========================================================================== */
html.jm-motion .jm-reveal{
  opacity:0;
  transform:translate3d(0,30px,0);
  transition:opacity .8s var(--jm-ease-soft),
             transform .9s var(--jm-ease),
             filter .8s var(--jm-ease-soft);
  transition-delay:var(--jm-delay,0ms);
  will-change:opacity,transform;
}
html.jm-motion h1.jm-reveal,
html.jm-motion h2.jm-reveal{
  transform:translate3d(0,42px,0);
  filter:blur(7px);
}
html.jm-motion .jm-reveal.jm-in{
  opacity:1;
  transform:none;
  filter:none;
  will-change:auto;
}

/* ==========================================================================
   9. HEADER
   ========================================================================== */
html.jm-motion header{
  transition:background-color .45s var(--jm-ease),
             border-color .45s ease, backdrop-filter .45s ease;
}
html.jm-motion body.jm-scrolled header{
  background-color:rgba(3,7,18,.88);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:rgba(96,165,250,.22);
}

/* ==========================================================================
   10. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html.jm-motion .jm-reveal,
  html.jm-motion .jm-reveal.jm-in{
    opacity:1 !important; transform:none !important;
    filter:none !important; transition:none !important;
  }
  html.jm-motion section h2.jm-reveal::after,
  html.jm-motion section h2.jm-reveal.jm-in::after{
    transform:scaleX(1) !important; transition:none !important;
  }
  section.bg-white .rounded-xl.border:hover,
  section.bg-\[\#f5f5f7\] .rounded-xl.border:hover,
  section.bg-black .rounded-xl.border:hover,
  .btn-glow-breathe:hover{ transform:none; }
  a:hover > svg:last-child, button:hover > svg:last-child{ transform:none; }
}

/* ==========================================================================
   11. NAV "PROYECTOS" DROPDOWN
   ========================================================================== */
.nav-dropdown-caret{ transition:transform .2s ease; opacity:.7; }
.nav-dropdown:hover .nav-dropdown-caret{ transform:rotate(180deg); opacity:1; }

.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%, 6px);
  min-width:170px;
  padding:6px;
  margin-top:4px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  box-shadow:0 12px 32px -8px rgba(15,23,42,.18), 0 2px 8px rgba(15,23,42,.06);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, 0);
}
.nav-dropdown-item{
  display:block;
  padding:9px 14px;
  border-radius:9px;
  font-size:.875rem;
  font-weight:500;
  color:#475569;
  white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
.nav-dropdown-item:hover,
.nav-dropdown-item:focus-visible{
  background-color:#f1f5f9;
  color:#0f172a;
}