@font-face {
  font-family: 'Clash Grotesk';
  src: url('https://cdn.fontshare.com/wf/O462VY6O6FTQCS72XVMTQHXAM4NN5CY3/TWF57ITZORMJ3MEWLQQIVO6BMXIB6FUR/MJQFMMOTEGNXDVM7HBBDTQHTVB2M7Y6G.woff2') format('woff2');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('https://cdn.fontshare.com/wf/2SAK53YLUN7RMYJU4MYLSBV6SSSJEJZB/RXS4DPGJRKOUFZMF5X5BVUGNNKJT65XZ/DJS4RYGIUYUXJQOHY5VCZPKSTXUSHTSP.woff2') format('woff2');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('https://cdn.fontshare.com/wf/MKEEQN57GWBZOSYWCRODNJOOZNPLMAKN/5SPTSZGHEACWWLF34DQ4WAA4OGU6PQIF/KN7DX4F6PXB74R6L2K2Y4NH3CB7FC53Q.woff2') format('woff2');
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Clash Grotesk';
  src: url('https://cdn.fontshare.com/wf/P6VJ47S3OYMUC7HYSJLTK7PEIK5O2NPQ/TK62VLUWA76PMTK2XWBNDZB7QVXJGYE3/I5W5NEJGYVFUC5I4XOXVET63OE5PSVHJ.woff2') format('woff2');
  font-weight: 700; font-display: swap; font-style: normal;
}
:root {
    --bc-ultramarine: #160B86;
    --bc-sky:         #192CFF;
    --bc-purple:      #A099FF;
    --bc-light-blue:  #22B5DF;
    --bc-white:       #E1E1E1;
    --bc-bg:          #F4F1EC;
    --bc-ink:         #0A0840;
  }

  html { scroll-behavior: smooth; }
  body {
    font-family: 'Work Sans', system-ui, sans-serif;
    background: var(--bc-bg);
    color: var(--bc-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .font-display {
    font-family: 'Clash Grotesk', system-ui, sans-serif;
    letter-spacing: 0;
    line-height: 1.05;
  }
  .tabular-nums { font-variant-numeric: tabular-nums; }

  /* ---------- Links ---------- */
  a { color: var(--bc-sky); }
  a:hover { color: var(--bc-ultramarine); }

  /* ---------- Prose highlights ---------- */
  .prose p { margin-bottom: 1.15em; }
  .prose strong { color: var(--bc-sky); font-weight: 600; }
  .prose.on-dark strong { color: var(--bc-purple); }

  /* ---------- Ribbons / loops decorations ---------- */
  .ribbon-float {
    animation: ribbonFloat 11s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
  }
  .ribbon-float-slow {
    animation: ribbonFloat 14s ease-in-out infinite alternate;
    animation-delay: -3s;
  }
  .ribbon-float-fast {
    animation: ribbonFloat 9s ease-in-out infinite alternate;
    animation-delay: -1.5s;
  }
  @keyframes ribbonFloat {
    0%   { transform: translate3d(0,0,0) rotate(0deg); }
    50%  { transform: translate3d(0,-8px,0) rotate(1.4deg); }
    100% { transform: translate3d(0,8px,0) rotate(-1.6deg); }
  }

  /* ---------- Reveal on scroll (visible by default; only hidden once JS arms it) ---------- */
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .js-reveal .reveal.is-in { opacity: 1; transform: translateY(0); }

  /* ---------- Card hover lift ---------- */
  .lift {
    transition: transform .22s ease-out, box-shadow .22s ease-out, background-position .35s ease, background-color .25s ease, border-color .25s ease;
    will-change: transform;
  }
  .lift:hover { transform: translateY(-4px); }

  /* ---------- Primary gradient button ---------- */
  .btn-grad {
    background-image: linear-gradient(110deg, var(--bc-ultramarine) 0%, var(--bc-sky) 50%, var(--bc-ultramarine) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    color: #fff;
    transition: background-position .5s ease, transform .2s ease, box-shadow .25s ease;
  }
  .btn-grad:hover { background-position: 100% 50%; color: #fff; }
  .btn-grad:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(25,44,255,0.35), 0 0 0 6px rgba(255,255,255,0.95); }

  /* ---------- Scroll progress bar ---------- */
  .scroll-progress {
    position: fixed; inset: 0 auto auto 0;
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--bc-ultramarine), var(--bc-sky), var(--bc-purple));
    z-index: 100;
    transition: width .12s linear;
  }

  /* ---------- WhatsApp ping ---------- */
  .wa-ping::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: 9999px;
    box-shadow: 0 0 0 0 rgba(34,181,223, 0.55);
    animation: waPing 6s ease-out infinite;
  }
  @keyframes waPing {
    0%   { box-shadow: 0 0 0 0 rgba(34,181,223, 0.55); }
    20%  { box-shadow: 0 0 0 18px rgba(34,181,223, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34,181,223, 0); }
  }

  /* ---------- Pills ---------- */
  .pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    background: rgba(160,153,255,0.18);
    color: var(--bc-ultramarine);
    border: 1px solid rgba(160,153,255,0.45);
  }
  .pill.on-dark {
    background: rgba(160,153,255,0.16);
    color: var(--bc-purple);
    border-color: rgba(160,153,255,0.4);
  }

  /* ---------- Eyebrow ---------- */
  .eyebrow {
    font-family: 'Work Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bc-sky);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .eyebrow::before {
    content: ''; width: 24px; height: 1px; background: currentColor; display: inline-block;
  }
  .eyebrow.on-dark { color: var(--bc-purple); }

  /* ---------- Focus visible ---------- */
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bc-sky), 0 0 0 4px var(--bc-bg);
    border-radius: 4px;
  }

  /* ---------- Nav glass ---------- */
  .nav-glass {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(244,241,236,0.75);
    border: 1px solid rgba(22,11,134,0.08);
    box-shadow: 0 8px 24px -12px rgba(22,11,134,0.18);
  }

  /* ---------- Waves + parallax ---------- */
  .wave-edge{position:absolute;left:0;right:0;bottom:-1px;height:56px;overflow:hidden;pointer-events:none;z-index:1}
  .wave-edge svg{width:200%;height:100%;display:block;animation:waveSlide 18s linear infinite}
  @keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .parallax{transform:translate3d(0,var(--py,0px),0);will-change:transform}
  .parallax.pointer-events-none:not(.inset-0){-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)}
  section > .relative{z-index:2}
  .contact-photo{aspect-ratio:4/3}
  @media (min-width:1024px){.contact-grid{align-items:stretch}.contact-grid > div:last-child{display:flex}.contact-photo{aspect-ratio:auto;width:100%;min-height:100%}}
  /* ---------- Hero balance ---------- */
  .hero-wrap{max-width:1280px}
  .nav-wrap{max-width:1216px}
  .hero-h1{font-size:clamp(40px,9vw,64px)}
  .nav-logo{height:36px;width:auto;display:block}
  .footer-logo{height:44px;width:auto;display:block}
  .hero-photo{aspect-ratio:1/1;max-width:480px;margin-inline:auto}
  .hero-photo img{object-position:53% 50%}
  @media (min-width:1024px){
    .hero-text{grid-column:span 7}
    .hero-media{grid-column:span 5}
    .hero-h1{font-size:clamp(56px,6vw,82px)}
    .hero-photo{max-width:none;margin:0;aspect-ratio:1/1}
  }
  /* ---------- Image treatment ---------- */
  .img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
  .duotone {
    position: absolute; inset: 0;
    background: linear-gradient(150deg, rgba(22,11,134,0.55), rgba(25,44,255,0.25) 55%, rgba(160,153,255,0.15));
    mix-blend-mode: multiply;
  }

  /* ---------- Mobile menu ---------- */
  .mobile-menu { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .mobile-menu.is-open { max-height: 420px; }

  /* ---------- Form ---------- */
  .field {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(22,11,134,0.14);
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 16px;
    color: var(--bc-ink);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .field::placeholder { color: rgba(10,8,64,0.6); }
  .field:focus { outline: none; border-color: var(--bc-sky); box-shadow: 0 0 0 3px rgba(25,44,255,0.12); }
  .check-card {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(22,11,134,0.14);
    border-radius: 16px; padding: 14px 16px; cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
    font-size: 15px;
  }
  .check-card:hover { border-color: var(--bc-purple); }
  .check-card input { width: 20px; height: 20px; accent-color: var(--bc-sky); flex-shrink: 0; }
  .check-card:has(input:checked) { border-color: var(--bc-sky); background: rgba(25,44,255,0.05); }

  /* ---------- Reduced motion ---------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
  }

/* ---------- Títulos en minúsculas (html.lc) ---------- */
html.lc h1.uppercase,html.lc h2.uppercase,html.lc h3.uppercase,html.lc p.font-display.uppercase,html.lc .stage .age{text-transform:none}
html.lc h1.font-display,html.lc h2.font-display{font-weight:600;letter-spacing:-0.02em;line-height:0.96}
html.lc h3.font-display{line-height:0.98}
html.lc p.font-display.uppercase{line-height:1.12}
html.lc h3.font-display,html.lc p.font-display.uppercase{font-weight:500;letter-spacing:-0.01em}

/* ---------- Contact map ---------- */
.contact-map{min-height:360px;background:#e9e6f5}
.contact-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.85) hue-rotate(-8deg)}
.map-chip{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;color:var(--bc-ultramarine);font-weight:600;font-size:14px;box-shadow:0 8px 24px -8px rgba(22,11,134,.35);transition:background-color .2s,color .2s}
.map-chip:hover{background:var(--bc-ultramarine);color:#fff}