/* Neurosalud - "Nosotros" (About) page.
   Reuses the global .nsx-hero / .nsx-crumbs / .nsx-motif / .nsx-cta rules
   already shipped in professionals.css (loaded site-wide). This file adds
   only the sections unique to this page: mission, the two link-out panels
   to Profesionales/Recursos, and the values row. */

.nsx-about,
.nsx-panels,
.nsx-values{
  --nsa-ink:var(--ns-text,#173F66);
  --nsa-deep:var(--ns-primary-deep,#0B3D91);
  --nsa-blue:var(--ns-primary,#1764C0);
  --nsa-teal:var(--ns-accent,#19A7D1);
  --nsa-tealDeep:#0E7C93;
  --nsa-muted:var(--ns-muted,#667F96);
  --nsa-line:var(--ns-line,#D9E8F2);
  --nsa-sans:var(--ns-sans,"Poppins",system-ui,sans-serif);
  --nsa-serif:"Lora",Georgia,serif;
}

/* ==================== 1. MISSION ==================== */

.nsx-about{
  background:#fff;
  --padding-block-start:64px;
  --padding-block-end:64px;
  --padding-inline-start:max(24px, calc((100% - 1240px) / 2));
  --padding-inline-end:max(24px, calc((100% - 1240px) / 2));
}
.nsx-about > .nsx-about__grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:52px;
  --width:100%;
  --row-gap:0px; --column-gap:0px;
}
.nsx-about__text{ --width:auto; }
.nsx-about__eyebrow{
  font-family:var(--nsa-sans); font-size:13.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--nsa-teal);
  margin:0 0 12px;
}
.nsx-about__title .elementor-heading-title,
.nsx-about__title{
  font-family:var(--nsa-serif); font-size:clamp(26px,2.6vw,34px);
  line-height:1.2; font-weight:500; color:var(--nsa-deep);
  margin:0 0 16px; max-width:16ch;
}
.nsx-about__body p{
  font-family:var(--nsa-sans); font-size:16px; line-height:1.68;
  color:var(--nsa-ink); margin:0 0 16px; max-width:52ch;
}
.nsx-about__body p:last-child{ margin-bottom:0; }
.nsx-about__quote{
  font-family:var(--nsa-serif); font-style:italic; font-weight:500;
  font-size:19px; line-height:1.5; color:var(--nsa-deep);
  margin:22px 0 0; max-width:44ch;
}

.nsx-about__portrait{ position:relative; --width:auto; justify-self:center; }
.nsx-about__portraitFrame{
  position:relative; width:min(420px,100%); aspect-ratio:4/5;
  border-radius:28px; overflow:hidden;
  border:1px solid var(--nsa-line);
  box-shadow:0 20px 46px rgba(23,63,102,.10);
}
.nsx-about__portraitFrame img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.nsx-about__ring{
  position:absolute; inset:-16px; z-index:-1;
  border:1px solid rgba(104,152,202,.30); border-radius:34px;
  pointer-events:none;
}

/* ==================== 2. MISIÓN Y VISIÓN ==================== */

.nsx-mv{
  background:var(--ns-surface,#F5F6F8);
  --padding-block-start:64px;
  --padding-block-end:64px;
  --padding-inline-start:max(24px, calc((100% - 1240px) / 2));
  --padding-inline-end:max(24px, calc((100% - 1240px) / 2));
}
.nsx-mv > .nsx-mv__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  --width:100%; --row-gap:0px; --column-gap:0px;
}
.nsx-mv-card{
  --width:auto;
  background:#fff; border:1px solid var(--nsa-line); border-radius:20px;
  box-shadow:0 12px 30px rgba(23,63,102,.06);
  --padding-block-start:32px; --padding-block-end:32px;
  --padding-inline-start:32px; --padding-inline-end:32px;
  --row-gap:0px; --column-gap:0px;
}
.nsx-mv-card__icon{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 0 18px;
}
.nsx-mv-card__icon svg{ width:22px; height:22px; }
.nsx-mv-card--mision .nsx-mv-card__icon{ background:rgba(23,100,192,.1); }
.nsx-mv-card--vision .nsx-mv-card__icon{ background:rgba(25,167,209,.12); }
.nsx-mv-card__title .elementor-heading-title,
.nsx-mv-card__title{
  font-family:var(--nsa-serif); font-size:20px; font-weight:500;
  color:var(--nsa-deep); margin:0 0 12px;
}
.nsx-mv-card__text p{
  font-family:var(--nsa-sans); font-size:14.5px; line-height:1.65;
  color:var(--nsa-ink); margin:0 0 12px;
}
.nsx-mv-card__text p:last-child{ margin-bottom:0; }

.nsx-panels{
  background:var(--ns-surface,#F5F6F8);
  --padding-block-start:8px;
  --padding-block-end:64px;
  --padding-inline-start:max(24px, calc((100% - 1240px) / 2));
  --padding-inline-end:max(24px, calc((100% - 1240px) / 2));
}
.nsx-panels > .nsx-panels__head{
  --width:100%; text-align:center; margin:0 0 34px;
}
.nsx-panels__title .elementor-heading-title,
.nsx-panels__title{
  font-family:var(--nsa-serif); font-size:clamp(24px,2.2vw,30px);
  color:var(--nsa-deep); font-weight:500; margin:0 auto; max-width:24ch;
}
.nsx-panels > .nsx-panels__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  --width:100%; --row-gap:0px; --column-gap:0px;
}
.nsx-panel{
  --width:auto;
  background:#fff; border:1px solid var(--nsa-line); border-radius:20px;
  box-shadow:0 12px 30px rgba(23,63,102,.06);
  --padding-block-start:30px; --padding-block-end:30px;
  --padding-inline-start:30px; --padding-inline-end:30px;
  --row-gap:0px; --column-gap:0px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.nsx-panel:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(23,63,102,.10);
}
/* Same circular badge treatment as the values row below: 68px circle,
   clipped, with the icon zoomed past its own baked-in light disc so only
   the ink shows (profesionales/recursos share that same source-art issue
   as buscar/salud-mental: a small centred glyph inside a ~65%-fill light
   grey disc). */
.nsx-panel__icon{
  width:68px; height:68px; border-radius:50%; overflow:hidden;
  border:1px solid var(--nsa-line);
  display:flex; align-items:center; justify-content:center;
  margin:0 0 18px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.nsx-panel:hover .nsx-panel__icon{
  transform:scale(1.05);
  box-shadow:0 10px 22px rgba(23,63,102,.12);
}
.nsx-panel__icon img{
  width:38px; height:38px; object-fit:contain;
  mix-blend-mode:multiply;
}
.nsx-panel--profesionales .nsx-panel__icon img{
  transform:scale(2.0) translate(0.2%,3.2%);
}
.nsx-panel--recursos .nsx-panel__icon img{
  transform:scale(2.14) translate(0%,1.2%);
}
.nsx-panel--profesionales .nsx-panel__icon{ background:rgba(23,100,192,.10); }
.nsx-panel--recursos .nsx-panel__icon{ background:rgba(25,167,209,.12); }
.nsx-panel__title .elementor-heading-title,
.nsx-panel__title{
  font-family:var(--nsa-serif); font-size:21px; font-weight:500;
  color:var(--nsa-deep); margin:0 0 10px;
}
.nsx-panel__text p{
  font-family:var(--nsa-sans); font-size:14.5px; line-height:1.6;
  color:var(--nsa-ink); margin:0 0 20px; max-width:40ch;
}
.nsx-panel__link .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 20px; border:0; border-radius:999px;
  font-family:var(--nsa-sans); font-size:14px; font-weight:500; color:#fff;
  transition:transform .25s ease, box-shadow .25s ease;
}
.nsx-panel--profesionales .nsx-panel__link .elementor-button{
  background:linear-gradient(94deg,var(--ns-cta-blue,#005FC3) 0%,#1487CE 100%);
  box-shadow:0 8px 20px rgba(0,95,195,.20);
}
.nsx-panel--recursos .nsx-panel__link .elementor-button{
  background:linear-gradient(94deg,#0E93AC 0%,var(--nsa-teal) 100%);
  box-shadow:0 8px 20px rgba(25,167,209,.22);
}
.nsx-panel__link .elementor-button:hover,
.nsx-panel__link .elementor-button:focus-visible{
  transform:translateY(-1px); color:#fff;
}
.nsx-panel__link .elementor-button-content-wrapper{
  display:flex; align-items:center; justify-content:center; gap:9px;
}

/* ==================== 3. VALUES ==================== */

.nsx-values{
  background:#fff;
  --padding-block-start:12px;
  --padding-block-end:70px;
  --padding-inline-start:max(24px, calc((100% - 1240px) / 2));
  --padding-inline-end:max(24px, calc((100% - 1240px) / 2));
}
.nsx-values > .nsx-values__head{ --width:100%; text-align:center; margin:0 0 36px; }
.nsx-values__title .elementor-heading-title,
.nsx-values__title{
  font-family:var(--nsa-serif); font-size:clamp(24px,2.2vw,30px);
  color:var(--nsa-deep); font-weight:500; margin:0;
}
.nsx-values > .nsx-values__row{
  display:grid; grid-template-columns:repeat(3,1fr);
  row-gap:40px; column-gap:32px;
  --width:100%; --row-gap:0px; --column-gap:0px;
}
.nsx-value{
  --width:auto;
  --padding-inline-start:0px; --padding-inline-end:0px;
  --padding-block-start:0px; --padding-block-end:0px;
  transition:transform .3s ease;
}
.nsx-value:hover{ transform:translateY(-3px); }

/* Icon sits in a tinted, bordered badge (matches the weight of .nsx-panel__icon
   and .nsx-cta__icon elsewhere on this page) instead of a bare flat glyph.
   These six use inline SVG (not the site's baked-circle icon jpgs) so no
   per-icon zoom calibration is needed. */
.nsx-value__icon{
  width:68px; height:68px; margin:0 0 22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid var(--nsa-line);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.nsx-value:hover .nsx-value__icon{
  transform:scale(1.05);
  box-shadow:0 10px 22px rgba(23,63,102,.12);
}
.nsx-value__icon svg{ width:26px; height:26px; }

/* Alternating tints pulled from the page's own accent set, so the grid has
   quiet rhythm without six identical boxes. */
.nsx-value:nth-child(3n+1) .nsx-value__icon{ background:rgba(23,100,192,.09); color:var(--nsa-blue); }
.nsx-value:nth-child(3n+2) .nsx-value__icon{ background:rgba(11,61,145,.08); color:var(--nsa-deep); }
.nsx-value:nth-child(3n+3) .nsx-value__icon{ background:rgba(25,167,209,.11); color:var(--nsa-tealDeep); }

.nsx-value__title .elementor-heading-title,
.nsx-value__title{
  font-family:var(--nsa-sans); font-size:17px; font-weight:600;
  color:var(--nsa-deep); margin:0 0 9px; letter-spacing:-.01em;
}
.nsx-value__text p{
  font-family:var(--nsa-sans); font-size:14.5px; line-height:1.65;
  color:var(--nsa-muted); margin:0; max-width:30ch;
}

/* ==================== 4. FOCUS VISIBILITY ==================== */

.nsx-panel__link .elementor-button:focus-visible{
  outline:3px solid var(--nsa-deep); outline-offset:3px; border-radius:999px;
}

/* ==================== 5. RESPONSIVE ==================== */

@media (max-width:1024px){
  .nsx-about > .nsx-about__grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .nsx-about__body p{ margin-inline:auto; }
  .nsx-about__quote{ margin-inline:auto; }
  .nsx-about__portrait{ order:-1; }
  .nsx-mv > .nsx-mv__grid{ grid-template-columns:1fr; gap:18px; }
  .nsx-panels > .nsx-panels__grid{ grid-template-columns:1fr; gap:20px; }
  .nsx-values > .nsx-values__row{ grid-template-columns:1fr 1fr; row-gap:32px; column-gap:24px; }
}

@media (max-width:767px){
  .nsx-about{ --padding-inline-start:20px; --padding-inline-end:20px; }
  .nsx-mv{ --padding-inline-start:20px; --padding-inline-end:20px; }
  .nsx-panels{ --padding-inline-start:20px; --padding-inline-end:20px; }
  .nsx-values{ --padding-inline-start:20px; --padding-inline-end:20px; }
  .nsx-values > .nsx-values__row{ grid-template-columns:1fr; row-gap:28px; }
  .nsx-panel{ --padding-inline-start:22px; --padding-inline-end:22px; --padding-block-start:24px; --padding-block-end:24px; }
}

@media (prefers-reduced-motion:reduce){
  .nsx-panel__link .elementor-button{ transition:none; }
  .nsx-panel__link .elementor-button:hover{ transform:none; }
  .nsx-panel,
  .nsx-panel__icon,
  .nsx-value,
  .nsx-value__icon{ transition:none; }
  .nsx-panel:hover,
  .nsx-value:hover{ transform:none; }
  .nsx-panel:hover .nsx-panel__icon,
  .nsx-value:hover .nsx-value__icon{ transform:none; box-shadow:none; }
}