/* ==========================================================================
   aduanasHQ — "Nosotros / About" page design
   Ported from the P4 Software premium design system (NominaHQ standard) and
   scoped under .p4about so it never touches the Bootstrap header/footer.
   Brand: aduanasHQ blue #0A5FAD, amber #FBAD48.
   ========================================================================== */

.p4about {
  /* ---- Brand ---- */
  --p4-blue:      #0A5FAD;
  --p4-blue-700:  #094E8C;
  --p4-blue-900:  #052744;
  --p4-blue-50:   #EAF3FB;
  --p4-blue-100:  #D0E4F5;
  --p4-amber:     #FBAD48;
  --p4-amber-dark:#E89A2E;
  /* ---- Neutrals ---- */
  --p4-ink:    #0B1929;
  --p4-700:    #2D4A6F;
  --p4-600:    #475B73;
  --p4-500:    #64748B;
  --p4-300:    #CBD5E1;
  --p4-200:    #E2E8F0;
  --p4-100:    #F1F5F9;
  --p4-50:     #F8FAFC;
  /* ---- Type ---- */
  --p4-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --p4-body:    'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --p4-mono:    'IBM Plex Mono', 'Cascadia Code', monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:2rem; --text-4xl:2.5rem; --text-5xl:3rem;
  /* ---- Spacing ---- */
  --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s8:2rem;
  --s10:2.5rem; --s12:3rem; --s16:4rem; --s20:5rem;
  /* ---- Radius / shadow / motion ---- */
  --radius-md:6px; --radius-lg:8px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(11,25,41,.08),0 1px 2px rgba(11,25,41,.04);
  --shadow-md:0 4px 6px rgba(11,25,41,.06),0 2px 4px rgba(11,25,41,.04);
  --shadow-lg:0 10px 24px rgba(11,25,41,.08),0 4px 8px rgba(11,25,41,.04);
  --shadow-xl:0 20px 48px rgba(11,25,41,.10),0 8px 16px rgba(11,25,41,.04);
  --ease-out-expo:cubic-bezier(0.1,0.9,0.2,1);

  font-family: var(--p4-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--p4-600);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography (scoped) ---- */
.p4about h1, .p4about h2, .p4about h3, .p4about h4 {
  font-family: var(--p4-display); color: var(--p4-ink);
  font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin: 0;
}
.p4about h1 { font-weight: 700; font-size: var(--text-4xl); }
.p4about h2 { font-size: var(--text-3xl); }
.p4about h3 { font-size: var(--text-xl); }
.p4about p  { margin: 0; }
.p4about a  { color: var(--p4-blue); text-decoration: none; }
.p4about img, .p4about svg { display: block; max-width: 100%; }
@media (min-width:1024px){
  .p4about h1 { font-size: var(--text-5xl); }
  .p4about h2 { font-size: var(--text-4xl); }
}

/* ---- Layout ---- */
.p4about .p4-container { width:100%; max-width:1120px; margin:0 auto; padding-inline:var(--s6); }
.p4about .p4-section { padding-block: var(--s20); }
@media (min-width:1024px){ .p4about .p4-section { padding-block: 6rem; } }
.p4about .eyebrow {
  display:inline-block; font-family:var(--p4-mono); font-size:var(--text-xs); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--p4-blue); margin-bottom:var(--s4);
}
.p4about .eyebrow::before { content:"// "; opacity:.5; }
.p4about .section-head { max-width:760px; margin-bottom:var(--s12); }
.p4about .section-head h2 { margin-bottom:var(--s4); }
.p4about .section-head p { font-size:var(--text-lg); color:var(--p4-500); }
.p4about .lead { font-size:var(--text-lg); color:var(--p4-600); }

/* ---- Buttons ---- */
.p4about .p4-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--p4-body); font-weight:600; font-size:var(--text-base);
  padding:14px 32px; border-radius:var(--radius-md); border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background 150ms,color 150ms,border-color 150ms,transform 100ms,box-shadow 200ms;
}
.p4about .p4-btn-cta { background:var(--p4-amber); color:var(--p4-ink); }
.p4about .p4-btn-cta:hover { background:var(--p4-amber-dark); }
.p4about .p4-btn-cta:active { transform:scale(.98); }
.p4about .p4-btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.p4about .p4-btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.p4about .link-reveal {
  color:var(--p4-blue); font-weight:600; text-decoration:none;
  background-image:linear-gradient(var(--p4-blue),var(--p4-blue));
  background-size:0% 2px; background-position:left bottom; background-repeat:no-repeat;
  transition:background-size 300ms ease; padding-bottom:2px;
}
.p4about .link-reveal:hover { background-size:100% 2px; }

/* ---- Dark bands ---- */
.p4about .p4-dark {
  background:linear-gradient(160deg,var(--p4-blue-900),var(--p4-blue-700)); color:#fff;
  position:relative; overflow:hidden;
}
.p4about .p4-dark::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 26px);
  pointer-events:none;
}
.p4about .p4-dark .p4-container { position:relative; z-index:1; }
.p4about .p4-dark h1, .p4about .p4-dark h2 { color:#fff; }
.p4about .p4-dark .eyebrow { color:var(--p4-amber); }
.p4about .p4-dark p { color:rgba(255,255,255,.82); }
.p4about .bg-blue-soft { background:var(--p4-blue-50); }

/* ---- Hero ---- */
.p4about .p4-hero {
  background:linear-gradient(160deg,var(--p4-blue-900),var(--p4-blue-700)); color:#fff;
  padding-block:var(--s20) var(--s12); text-align:center; position:relative; overflow:hidden;
}
.p4about .p4-hero::before {
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 2px,transparent 2px 26px);
}
.p4about .p4-hero .p4-container { position:relative; z-index:1; }
.p4about .p4-hero h1 { color:#fff; max-width:22ch; margin:var(--s4) auto var(--s3); }
.p4about .p4-hero .lead { color:rgba(255,255,255,.85); max-width:64ch; margin:0 auto; }

/* ---- Stat band ---- */
.p4about .p4-statband { background:var(--p4-blue-900); border-top:1px solid rgba(255,255,255,.12); }
.p4about .p4-statband .p4-container {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6);
  padding-block:var(--s10); text-align:center;
}
.p4about .p4-statband .v { font-family:var(--p4-display); font-weight:700; font-size:var(--text-4xl); color:#fff; line-height:1; letter-spacing:-.02em; }
.p4about .p4-statband .l { font-family:var(--p4-mono); font-size:var(--text-xs); color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; margin-top:var(--s2); }
.p4about .p4-statband .backed { grid-column:1/-1; font-family:var(--p4-mono); font-size:var(--text-xs); color:var(--p4-amber); letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s2); }
@media (max-width:720px){ .p4about .p4-statband .p4-container { grid-template-columns:1fr 1fr; gap:var(--s8); } }

/* ---- Feature cards ---- */
.p4about .p4-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
.p4about .p4-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
@media (max-width:980px){ .p4about .p4-grid4 { grid-template-columns:1fr 1fr; } .p4about .p4-grid3 { grid-template-columns:1fr; } }
@media (max-width:680px){ .p4about .p4-grid4 { grid-template-columns:1fr; } }
.p4about .p4-feat { background:#fff; border:1px solid var(--p4-200); border-radius:var(--radius-lg); padding:var(--s6); box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s; }
.p4about .p4-feat:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.p4about .p4-ico { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--s4); box-shadow:var(--shadow-sm); }
.p4about .p4-ico svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.9; }
.p4about .p4-ico.blue { background:var(--p4-blue); } .p4about .p4-ico.amber { background:var(--p4-amber); } .p4about .p4-ico.navy { background:var(--p4-blue-900); } .p4about .p4-ico.teal { background:#0E7C86; }
.p4about .p4-feat h3 { font-size:var(--text-lg); margin-bottom:var(--s2); }
.p4about .p4-feat p { font-size:var(--text-sm); color:var(--p4-600); }

/* ---- Comparison ---- */
.p4about .p4-cmp { border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-lg); overflow:hidden; max-width:900px; margin:var(--s8) auto 0; background:rgba(255,255,255,.03); }
.p4about .p4-cmp__head, .p4about .p4-cmp__row { display:grid; grid-template-columns:.7fr 1.05fr 1.25fr; gap:var(--s5); padding:var(--s5) var(--s6); align-items:center; }
.p4about .p4-cmp__head { background:rgba(255,255,255,.06); font-family:var(--p4-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; }
.p4about .p4-cmp__head .them { color:rgba(255,255,255,.5); } .p4about .p4-cmp__head .us { color:var(--p4-amber); }
.p4about .p4-cmp__row { border-top:1px solid rgba(255,255,255,.1); }
.p4about .p4-cmp .topic { font-family:var(--p4-mono); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.5); }
.p4about .p4-cmp .them { color:rgba(255,255,255,.58); font-size:var(--text-sm); }
.p4about .p4-cmp__row .us { color:#fff; font-size:var(--text-sm); font-weight:500; border-left:2px solid var(--p4-amber); padding-left:var(--s4); }
@media (max-width:720px){ .p4about .p4-cmp__head { display:none; } .p4about .p4-cmp__row { grid-template-columns:1fr; gap:4px; padding:var(--s5); } .p4about .p4-cmp__row .topic { color:var(--p4-amber); } .p4about .p4-cmp__row .us { border-left:none; padding-left:0; } }

/* ---- Team ---- */
.p4about .p4-team { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); }
@media (max-width:880px){ .p4about .p4-team { grid-template-columns:1fr; max-width:440px; margin-inline:auto; } }
.p4about .p4-person { position:relative; background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid var(--p4-100); border-radius:20px; padding:var(--s8) var(--s6) var(--s6); box-shadow:var(--shadow-md); transition:transform .25s var(--ease-out-expo),box-shadow .25s; }
.p4about .p4-person:hover { transform:translateY(-6px); box-shadow:var(--shadow-xl); }
.p4about .p4-avatar { width:104px; height:104px; border-radius:50%; object-fit:cover; background:var(--p4-100); box-shadow:0 0 0 4px #fff,0 0 0 6px var(--p4-blue-100),var(--shadow-md); margin-bottom:var(--s5); }
.p4about .p4-person h3 { font-size:var(--text-xl); letter-spacing:-.01em; margin-bottom:4px; }
.p4about .p4-person .role { font-family:var(--p4-mono); font-size:var(--text-xs); color:var(--p4-blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--s4); }
.p4about .p4-person p { font-size:var(--text-sm); color:var(--p4-600); line-height:1.6; }
.p4about .p4-social { position:absolute; top:var(--s6); right:var(--s6); width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--p4-blue-50); color:var(--p4-blue); transition:.15s; }
.p4about .p4-social:hover { background:var(--p4-blue); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.p4about .p4-social svg { width:20px; height:20px; }

/* ---- Suite ---- */
.p4about .p4-suite { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
@media (max-width:880px){ .p4about .p4-suite { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .p4about .p4-suite { grid-template-columns:1fr; } }
.p4about .p4-prod { display:block; text-decoration:none; background:#fff; border:1px solid var(--p4-200); border-top:3px solid var(--accent,var(--p4-blue)); border-radius:var(--radius-md); padding:var(--s5); transition:.15s; }
.p4about .p4-prod:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.p4about .p4-prod b { color:var(--p4-ink); font-size:var(--text-base); }
.p4about .p4-prod .tag { display:inline-block; font-family:var(--p4-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent,var(--p4-blue)); margin-left:6px; }
.p4about .p4-prod span.d { display:block; font-size:var(--text-sm); color:var(--p4-500); margin-top:4px; }
.p4about .p4-prod.feat { background:linear-gradient(160deg,var(--p4-blue-900),var(--p4-blue-700)); border:1px solid transparent; border-top:3px solid var(--p4-amber); }
.p4about .p4-prod.feat b { color:#fff; } .p4about .p4-prod.feat span.d { color:rgba(255,255,255,.7); } .p4about .p4-prod.feat .tag { color:var(--p4-amber); }

/* ---- Values ---- */
.p4about .p4-val { background:#fff; border:1px solid var(--p4-200); border-left:4px solid var(--accent,var(--p4-blue)); border-radius:var(--radius-md); padding:var(--s5); }
.p4about .p4-val h3 { font-size:var(--text-lg); margin-bottom:var(--s2); }
.p4about .p4-val p { font-size:var(--text-sm); color:var(--p4-600); }

/* ---- Story / timeline ---- */
.p4about .timeline { position:relative; max-width:680px; margin-inline:auto; }
.p4about .tl-item { position:relative; padding:0 0 var(--s8) var(--s8); }
.p4about .tl-item:last-child { padding-bottom:0; }
.p4about .tl-item::before { content:''; position:absolute; left:0; top:5px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--p4-blue); z-index:1; }
.p4about .tl-item::after { content:''; position:absolute; left:6px; top:7px; bottom:-7px; width:2px; background:var(--p4-200); }
.p4about .tl-item:last-child::after { display:none; }
.p4about .tl-item.tl-accent::before { border-color:var(--p4-amber); }
.p4about .tl-year { font-family:var(--p4-mono); font-size:var(--text-sm); font-weight:600; color:var(--p4-blue); letter-spacing:.04em; }
.p4about .tl-accent .tl-year { color:var(--p4-amber-dark); }
.p4about .tl-title { font-family:var(--p4-display); font-size:var(--text-xl); font-weight:600; color:var(--p4-ink); margin:2px 0 6px; line-height:1.25; }
.p4about .tl-item p { color:var(--p4-600); margin:0; }
.p4about .p4-pull { background:linear-gradient(160deg,var(--p4-blue-900),var(--p4-blue-700)); color:#fff; border-radius:var(--radius-lg); padding:var(--s8); box-shadow:var(--shadow-lg); }
.p4about .p4-pull .big { font-family:var(--p4-display); font-weight:700; font-size:var(--text-2xl); line-height:1.25; color:#fff; }
.p4about .p4-pull .src { font-family:var(--p4-mono); font-size:var(--text-xs); color:var(--p4-amber); text-transform:uppercase; letter-spacing:.08em; margin-top:var(--s4); display:block; }
.p4about .p4-mv { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); margin-top:var(--s10); }
@media (max-width:680px){ .p4about .p4-mv { grid-template-columns:1fr; } }
.p4about .p4-mv .blk { border-left:3px solid var(--p4-amber); padding-left:var(--s5); }
.p4about .p4-mv h3 { font-size:var(--text-xl); margin-bottom:var(--s2); }
.p4about .p4-mv p { color:var(--p4-600); }

/* ---- CTA ---- */
.p4about .p4-cta { text-align:center; }
.p4about .p4-cta h2 { font-size:var(--text-4xl); }
.p4about .p4-actions { display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:center; margin-top:var(--s6); }

/* ---- Scroll reveal (robust: visible without JS, on reduced-motion, and in print) ---- */
.p4about .reveal { opacity:0; transform:translateY(24px); transition:opacity 600ms var(--ease-out-expo),transform 600ms var(--ease-out-expo); }
.p4about .reveal.visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .p4about .reveal { opacity:1 !important; transform:none !important; transition:none !important; } }
@media print { .p4about .reveal { opacity:1 !important; transform:none !important; } }