/* Neurosalud - work item "home-header-hero" (round 1)
   Scope: global header, home hero, single hero->content curve.
   Rebuilt natively from prototype/refHome.png; the reference PNG is
   never used as a page or section background. */

:root{
  --ns-primary-deep:#0B3D91;
  --ns-primary:#1764C0;
  --ns-deep:#0640CA;
  --ns-accent:#19A7D1;
  --ns-teal:#31C1D0;
  --ns-cta-blue:#005FC3;
  --ns-text:#173F66;
  --ns-muted:#667F96;
  --ns-surface:#F5F6F8;
  --ns-hero-top:#F4F6F9;
  --ns-hero-bottom:#E9EEF4;
  --ns-hero-glow:#D9E6F3;
  --ns-line:#D9E8F2;

  /* Curve fitted from refHome.png: the boundary is a true circle,
     r / viewportWidth = 1.2285, sagitta = 10.63% of width (153px @1440). */
  --ns-curve-r:122.85vw;
  --ns-curve-h:11.4vw;

  --ns-hero-h:786px;
  --ns-hero-bg:
    radial-gradient(70% 88% at 88% 34%, var(--ns-hero-glow) 0%, rgba(217,230,243,0) 68%),
    linear-gradient(178deg, var(--ns-hero-top) 0%, #F1F4F9 46%, var(--ns-hero-bottom) 100%);
  --ns-breath-size:388px;
  --ns-breath-text:1;
  --ns-breath-scale:1;
  --ns-sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ==================== 1. GLOBAL HEADER (Blocksy) ==================== */

/* logocolor.png is opaque artwork on white; multiply removes the white
   ground so the lockup sits directly on the hero gradient. */
.ns-logo .site-logo-container img{ mix-blend-mode:multiply; }

#header [data-row="middle"]{ --header-height:107px; }

/* The reference runs the hero gradient unbroken behind the header. */
#header [data-transparent-row="yes"]{
  background:var(--ns-hero-bg);
  background-size:100vw var(--ns-hero-h);
  background-position:0 0;
  background-repeat:no-repeat;
  box-shadow:none;
  border-bottom:0;
}

#header [data-row="middle"] > .ct-container{
  max-width:1376px;
  padding-inline:30px;
}

#header .header-menu-1 .ct-menu-link{
  font-family:var(--ns-sans);
  font-size:16px;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--ns-primary);
}
#header .header-menu-1 .ct-menu-link:hover,
#header .header-menu-1 .ct-menu-link:focus-visible{ color:var(--ns-deep); }
#header .header-menu-1 > ul > li{ margin-inline:15px; }

/* search trigger: soft white disc, matching the reference */
#header [data-id="search"] > .ct-header-search,
#header .ct-header-search{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  box-shadow:0 2px 10px rgba(23,63,102,.10);
  color:var(--ns-primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#header .ct-header-search svg{ width:16px; height:16px; }

/* Donar pill */
#header .ns-donar{
  font-family:var(--ns-sans);
  font-size:15px;
  font-weight:500;
  letter-spacing:.005em;
  color:#fff;
  border:0;
  border-radius:999px;
  padding:12px 26px;
  background:linear-gradient(100deg,var(--ns-cta-blue) 0%,#1487CE 62%,#1BA7C9 100%);
  box-shadow:0 6px 18px rgba(0,95,195,.26);
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:box-shadow .25s ease,transform .25s ease;
}
#header .ns-donar:hover,
#header .ns-donar:focus-visible{
  color:#fff;
  box-shadow:0 8px 22px rgba(0,95,195,.34);
  transform:translateY(-1px);
}
#header .ns-donar::before{
  content:"";
  width:17px;
  height:17px;
  flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:var(--ns-heart) center/contain no-repeat;
  mask:var(--ns-heart) center/contain no-repeat;
}
:root{
  --ns-heart:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>');
}

/* ==================== 2. HERO SHELL ==================== */
/* Elementor drives containers through custom properties and pins .e-con to
   position:relative, so layout is set via those props and selectors that
   outrank .e-con rather than by fighting it with !important. */

.ns-hero.ns-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  max-width:100%;
  --ns-header-h:107px;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  background-color:var(--ns-hero-bottom);
  background-image:var(--ns-hero-bg);
  background-size:100% var(--ns-hero-h);
  background-repeat:no-repeat;
}

.ns-hero > .ns-hero__inner{
  position:relative;
  z-index:5;
  /* three zones, middle track centred on the viewport - the reference puts
     the breathing circle on the 720px centre line of 1440. */
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  min-height:786px;
  --width:100%;
  --row-gap:0px;
  --column-gap:0px;
  --padding-block-start:113px;
  /* Curve-clearance safe zone (ISS-003).
     The arc's sagitta scales with viewport WIDTH (10.63vw) while the hero's
     height is fixed at 786px, so on wide desktops the curve climbs into the
     breathing guidance. Because this block is vertically centred, lifting it
     by X costs 2X of bottom padding:
         padding-bottom >= 2*(sagitta + gap) - 211px
     max() leaves every width up to ~1510px byte-identical to round 2. */
  --ns-curve-gap:30px;
  --padding-block-end:max(170px, calc(21.26vw + 2 * var(--ns-curve-gap) - 211px));
  --padding-inline-start:0px;
  --padding-inline-end:0px;
}

.ns-hero__inner > .ns-hero__col{
  --width:auto;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  min-width:0;
}

/* Equal-basis flanks hold the breathing circle on the viewport centre line
   (719px of 1440 in the reference). */
.ns-hero__inner > .ns-hero__col--intro{
  --row-gap:0px;
  --column-gap:0px;
  --padding-inline-start:160px;
  --padding-inline-end:24px;
  --align-items:flex-start;
  margin-top:30px;
}
.ns-hero__inner > .ns-hero__col--breath{
  --width:auto;
  justify-self:center;
  --align-items:center;
  --row-gap:22px;
  --column-gap:0px;
}
.ns-hero__inner > .ns-hero__col--art{
  align-self:stretch;
  position:static;
}

/* ==================== 3. INTRO COLUMN ==================== */

.ns-hero__eyebrow .elementor-heading-title,
.ns-hero__eyebrow{
  font-family:var(--ns-sans);
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ns-primary);
  margin:0;
}

.ns-hero__rule{ --divider-color:var(--ns-teal); }
.ns-hero__rule{ margin-top:14px; }
.ns-hero__rule .elementor-divider{ padding-block:0; }
.ns-hero__rule .elementor-divider-separator{
  border:0 !important;
  height:3px;
  width:26px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--ns-teal),var(--ns-primary));
}

.ns-hero__lead{ margin-top:30px; }
.ns-hero__lead p{
  font-family:var(--ns-sans);
  font-size:18px;
  line-height:1.64;
  font-weight:400;
  color:var(--ns-primary);
  margin:0;
  max-width:330px;
}

.ns-hero__col--intro > .ns-hero__ctas{
  --width:auto;
  --row-gap:18px;
  --column-gap:0px;
  --align-items:flex-start;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  margin-top:34px;
}

.ns-btn .elementor-button{
  font-family:var(--ns-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.005em;
  border-radius:999px;
  padding:13px 18px;
  width:220px;
  min-height:44px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.ns-btn .elementor-button-icon svg{ width:17px; height:17px; fill:currentColor; }
.ns-btn .elementor-button-icon svg path{ fill:currentColor; }
.ns-btn .elementor-button:hover,
.ns-btn .elementor-button:focus-visible{ transform:translateY(-1px); }

.ns-btn--primary .elementor-button{
  color:#fff;
  border:0;
  background:linear-gradient(94deg,var(--ns-cta-blue) 0%,#1487CE 58%,#3AC3D2 100%);
  box-shadow:0 8px 20px rgba(0,95,195,.24);
}
.ns-btn--primary .elementor-button:hover,
.ns-btn--primary .elementor-button:focus-visible{
  color:#fff;
  box-shadow:0 10px 26px rgba(0,95,195,.32);
}

.ns-btn--ghost .elementor-button{
  color:var(--ns-primary);
  background:rgba(255,255,255,.72);
  border:1.5px solid #9EC3E8;
  box-shadow:0 3px 12px rgba(23,63,102,.07);
}
.ns-btn--ghost .elementor-button:hover,
.ns-btn--ghost .elementor-button:focus-visible{
  color:var(--ns-deep);
  border-color:var(--ns-primary);
  background:#fff;
}

/* ==================== 4. BREATHING CIRCLE ==================== */

.ns-hero__breathwrap{ width:100%; display:flex; justify-content:center; }

.ns-breath{
  position:relative;
  width:var(--ns-breath-size);
  max-width:100%;
  /* non-negotiable: a mathematically true circle at every viewport */
  aspect-ratio:1 / 1;
  display:grid;
  place-items:center;
  cursor:pointer;
  border-radius:50%;
  transform:scale(var(--ns-breath-scale));
  transition:transform .6s cubic-bezier(.37,0,.63,1);
  -webkit-tap-highlight-color:transparent;
}
.ns-breath:focus-visible{
  outline:3px solid var(--ns-accent);
  outline-offset:6px;
}

.ns-breath__halo,
.ns-breath__ring,
.ns-breath__disc,
.ns-breath__svg{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}

/* faint outermost breath of air */
.ns-breath__halo{
  inset:-4.5%;
  border:1px solid rgba(110,158,206,.22);
}
/* ring geometry read off the reference: outer d=390, inner d=330 of 390 */
.ns-breath__ring--outer{ inset:1.5%;  border:1px solid rgba(104,152,202,.42); }
.ns-breath__ring--inner{ inset:8.2%;  border:1px solid rgba(104,152,202,.34); }

.ns-breath__disc{
  inset:10.5%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.6) 52%, rgba(240,246,251,.24) 100%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.8),
    0 12px 40px rgba(23,63,102,.05);
}

.ns-breath__svg{ overflow:visible; }
.ns-breath__track{
  fill:none;
  stroke:rgba(116,162,208,.26);
  stroke-width:2.2;
}
.ns-breath__arc{
  fill:none;
  stroke:url(#nsBreathArc);
  stroke-width:3.4;
  stroke-linecap:round;
}
.ns-breath__dot{
  fill:var(--ns-accent);
  filter:drop-shadow(0 0 6px rgba(25,167,209,.5));
}

.ns-breath__label{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(11px * var(--ns-breath-text));
  text-align:center;
  padding-inline:12%;
}
.ns-breath__phase{
  font-family:var(--ns-sans);
  font-size:calc(34px * var(--ns-breath-text));
  font-weight:600;
  letter-spacing:.10em;
  line-height:1;
  color:var(--ns-deep);
}
.ns-breath__cue{
  font-family:var(--ns-sans);
  font-size:calc(19px * var(--ns-breath-text));
  font-weight:400;
  line-height:1.3;
  color:var(--ns-primary);
}
.ns-breath__chevron{
  width:calc(26px * var(--ns-breath-text));
  height:calc(15px * var(--ns-breath-text));
  margin-top:calc(4px * var(--ns-breath-text));
  color:var(--ns-primary);
  transition:transform .5s ease;
}
.ns-breath__chevron[data-dir="up"]{ transform:rotate(180deg); }

.ns-breath__sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.ns-hero__hint p{
  font-family:var(--ns-sans);
  font-size:16px;
  line-height:1.62;
  color:var(--ns-primary);
  text-align:center;
  margin:0;
  padding-inline-start:44px;
  position:relative;
  display:inline-block;
}
.ns-hero__hint{ text-align:center; }
.ns-hero__sep{ color:var(--ns-accent); padding-inline:6px; }

/* lungs glyph from the reference, drawn as a mask so no raster is invented */
.ns-hero__hint p::before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:32px;
  height:30px;
  background-color:var(--ns-primary);
  -webkit-mask:var(--ns-lungs) center/contain no-repeat;
  mask:var(--ns-lungs) center/contain no-repeat;
}
:root{
  --ns-lungs:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 2v12"/><path d="M16 9c0-2.2 1.6-3.6 3.4-3.6 1.7 0 2.6 1.1 2.9 2.6l2.4 11c.5 2.3-.6 4.3-2.7 5-2.2.7-4.3-.4-4.9-2.6a6 6 0 0 1-.2-1.6z"/><path d="M16 9c0-2.2-1.6-3.6-3.4-3.6-1.7 0-2.6 1.1-2.9 2.6l-2.4 11c-.5 2.3.6 4.3 2.7 5 2.2.7 4.3-.4 4.9-2.6.1-.5.2-1 .2-1.6z"/></svg>');
}

/* ==================== 5. WOMAN ARTWORK ==================== */

.ns-hero__art .ns-hero__woman{
  position:absolute;
  right:1vw;
  bottom:0;
  width:min(473px,33vw);
  margin:0;
  padding:0;
  pointer-events:none;
}
.ns-hero__woman img{
  display:block;
  width:100%;
  height:auto;
}

/* ==================== 6. DECORATIVE LEAVES / AIR LINES ==================== */

/* Supplied art is white-ground JPEG in a green-teal hue (median 174-180);
   the approved reference renders it blue (hue 210). multiply drops the
   white ground, hue-rotate closes the 32deg gap. The asset itself is
   reused unmodified - no substitute is generated. */
.ns-hero > .ns-hero__decor{
  position:absolute;
  --width:auto;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  padding:0;
  pointer-events:none;
  mix-blend-mode:multiply;
  z-index:2;
}

.ns-hero > .ns-hero__decor--left,
.ns-hero > .ns-hero__decor--right{
  filter:saturate(1.5) hue-rotate(42deg) brightness(1.04);
  opacity:.74;
  z-index:2;
}

.ns-hero > .ns-hero__decor--left{
  left:-170px;
  bottom:-26px;
  width:min(600px,42vw);
  aspect-ratio:1171 / 912;
  background-position:left bottom !important;
}
.ns-hero > .ns-hero__decor--right{
  right:-80px;
  bottom:-14px;
  width:min(500px,35vw);
  aspect-ratio:1116 / 944;
  background-position:right top !important;
}
.ns-hero > .ns-hero__decor--wind{
  left:46%;
  top:46%;
  transform:translateX(-50%);
  width:min(1060px,76vw);
  aspect-ratio:1451 / 720;
  opacity:.26;
  filter:saturate(1.3) hue-rotate(12deg);
  z-index:1;
}

/* ---- maskable figure art: below the curve, above the botanicals ---- */
.ns-hero > .ns-hero__art{
  position:absolute;
  inset:0;
  z-index:3;
  --width:auto;
  --padding-block-start:0px;
  --padding-block-end:0px;
  --padding-inline-start:0px;
  --padding-inline-end:0px;
  padding:0;
  margin:0;
  pointer-events:none;
}

/* ==================== 7. THE ONE HERO -> CONTENT CURVE ==================== */
/* Exactly one broad circular arc. No stacked waves, no parallel boundary. */

.ns-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--ns-curve-h);
  z-index:4;
  pointer-events:none;
  background:radial-gradient(
    var(--ns-curve-r) var(--ns-curve-r) at 50% var(--ns-curve-r),
    var(--ns-surface) 99.82%,
    rgba(245,246,248,0) 100%
  );
}

/* Layer model, bottom -> top:
     1  background decor (air lines)
     2  maskable botanical art      -- cut by the curve
     3  maskable figure art (woman) -- cut by the curve
     4  the single hero->content curve
     5  content: copy, CTAs, breathing control
   The reference shows one integrated foreground boundary: the woman and the
   lower botanicals pass behind the arc and stop at it. Nothing decorative is
   painted on top of the content surface. */

/* ==================== 8. RESPONSIVE ==================== */

/* --- wide desktop: keep the whole control clear of the header band ---
   The transparent header row repaints an opaque gradient slice (it is the
   backdrop the logo's mix-blend-mode needs), so it paints OVER anything the
   hero puts beneath it. As the curve's width-scaled reserve grows, the
   breathing block rides up until its outermost halo -- which sits 4.5%
   OUTSIDE .ns-breath -- passes under that band and is cut flat at 12 o'clock.
   Fix: reduce the whole component moderately (rings, halo, arc and label all
   derive from --ns-breath-size / --ns-breath-text, so they scale together)
   and re-seat it from the halo's TRUE outer bound:
       padding-top >= headerRowBottom + 12px + (0.045 * size)
   Nothing here is clipped or hidden, and the component never moves up. */
@media (min-width:1500px){
  :root{
    --ns-breath-size:320px;
    --ns-breath-text:.825;
  }
  .ns-hero > .ns-hero__inner{
    --padding-block-start:150px;
  }
}
/* No tablet/mobile reference exists; derived from design.md. Content reflows -
   it is never a shrunken desktop, and decorative art yields to readability. */

@media (max-width:1300px){
  :root{ --ns-breath-size:340px; }
  .ns-hero__inner > .ns-hero__col--intro{ --padding-inline-start:8vw; }
}

/* --- tablet (Elementor breakpoint <=1024) --- */
@media (max-width:1024px){
  :root{
    --ns-breath-size:320px;
    --ns-hero-h:1040px;
  }

  .ns-hero > .ns-hero__inner{
    grid-template-columns:1fr;
    justify-items:center;
    min-height:0;
    --row-gap:44px;
    --column-gap:0px;
    --padding-block-start:calc(var(--ns-header-h) + 40px);
    --padding-block-end:190px;
    text-align:center;
  }
  .ns-hero__inner > .ns-hero__col--intro{
    --width:100%;
    max-width:560px;
    margin:0 auto;
    --padding-inline-start:32px;
    --padding-inline-end:32px;
    --align-items:center;
    text-align:center;
  }
  .ns-hero__lead{ margin-top:22px; }
  .ns-hero__lead p{ max-width:42ch; margin-inline:auto; }
  .ns-hero__rule .elementor-divider{ justify-content:center; display:flex; }
  .ns-hero__rule .elementor-divider-separator{ margin-inline:auto; }
  .ns-hero__col--intro > .ns-hero__ctas{ --align-items:center; margin-top:28px; }
  .ns-hero__inner > .ns-hero__col--breath{ --width:100%; justify-self:center; }
  .ns-hero__inner > .ns-hero__col--art{ --width:100%; height:0; align-self:auto; }

  /* the artwork stays a quiet right-edge accent, never over the copy, and
     still passes behind the single curve */
  .ns-hero__art .ns-hero__woman{
    right:-8vw;
    bottom:0;
    width:min(300px,36vw);
    opacity:.45;
  }
  .ns-hero > .ns-hero__decor--left{ width:52vw; left:-14vw; bottom:-3vw; opacity:.55; }
  .ns-hero > .ns-hero__decor--right{ width:56vw; right:-14vw; bottom:-2vw; opacity:.5; }
  .ns-hero > .ns-hero__decor--wind{ opacity:.2; }
}

/* --- mobile (Elementor breakpoint <=767) --- */
@media (max-width:767px){
  :root{
    --ns-breath-size:min(72vw,280px);
    --ns-curve-h:13vw;
    --ns-hero-h:900px;
  }

  #header [data-row="middle"]{ --header-height:76px; }
  #header [data-row="middle"] > .ct-container{ padding-inline:20px; }

  .ns-hero > .ns-hero__inner{
    --row-gap:34px;
    --column-gap:0px;
    --padding-block-start:calc(var(--ns-header-h) + 28px);
    --padding-block-end:120px;
  }
  .ns-hero__inner > .ns-hero__col--intro{
    --padding-inline-start:20px;
    --padding-inline-end:20px;
    --row-gap:0px;
  }

  .ns-hero__eyebrow .elementor-heading-title,
  .ns-hero__eyebrow{ font-size:12px; letter-spacing:.22em; }
  .ns-hero__lead{ margin-top:18px; }
  .ns-hero__lead p{ font-size:17px; line-height:1.58; max-width:32ch; }

  /* primary actions stay reachable above the module */
  .ns-hero__col--intro > .ns-hero__ctas{
    --width:100%;
    --row-gap:12px;
    --column-gap:0px;
    --align-items:stretch;
    margin-top:24px;
  }
  .ns-btn{ width:100%; }
  .ns-btn .elementor-button{
    width:100%;
    justify-content:center;
    gap:14px;
    padding:14px 22px;
  }

  .ns-breath__phase{ font-size:27px; }
  .ns-breath__cue{ font-size:15px; }
  .ns-breath__chevron{ width:22px; height:13px; }
  .ns-hero__inner > .ns-hero__col--breath{ --row-gap:20px; --column-gap:0px; }
  .ns-hero__hint p{ font-size:14px; padding-inline-start:34px; }
  .ns-hero__hint p::before{ width:24px; height:22px; }

  /* decorative art yields entirely to readability */
  .ns-hero__art .ns-hero__woman{ display:none; }
  .ns-hero > .ns-hero__decor--left{ width:74vw; left:-24vw; bottom:-3vw; opacity:.3; }
  .ns-hero > .ns-hero__decor--right{ width:70vw; right:-24vw; bottom:-2vw; opacity:.26; }
  .ns-hero > .ns-hero__decor--wind{ opacity:.15; }
}

/* ==================== 9. REDUCED MOTION ==================== */

@media (prefers-reduced-motion:reduce){
  .ns-breath{
    transform:none !important;
    transition:none;
  }
  .ns-breath__chevron,
  .ns-btn .elementor-button,
  #header .ns-donar{ transition:none; }
  .ns-breath__arc{ transition:none; }
}

/* ==================== 10. OVERFLOW GUARD ==================== */

body.home{ overflow-x:hidden; }