/* =========================================================
   NUMERUS — Design tokens
   Palette: pine-ink, ledger paper, brass-gold, ink-blue
   Type: Fraunces (display) / IBM Plex Sans (body) / IBM Plex Mono (data)
   Signature: ledger-rule texture + account-code numbering
   ========================================================= */

:root{
  --ink:        #0F1B30;   /* deep navy-ink, primary text */
  --ink-soft:   #4C5872;   /* secondary text on paper */
  --paper:      #EEF0F4;   /* cool ledger paper background, navy-tinted */
  --paper-2:    #E1E5EE;   /* slightly deeper paper for cards */
  --white:      #FFFFFF;
  --navy:       #284A8E;   /* primary brand color — exact match to logo */
  --navy-dark:  #1B3564;   /* dark sections / hover */
  --navy-light: #E4E9F6;   /* tinted backgrounds */
  --ink-blue:   #0E1B33;   /* deepest navy, footer / contrast sections */
  --gold:       #BF9A55;   /* elegant brass-gold accent, used sparingly */
  --gold-soft:  #E3CFA0;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --container: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }

.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  margin:0 0 .5em;
  font-weight:600;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.4rem, 5.4vw, 4.1rem); font-weight:600; }
h1 em{ font-style:italic; color:var(--navy); font-weight:500; }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size:1.2rem; margin-bottom:.4em; }

p{ margin:0 0 1em; color:var(--ink-soft); }
.lead{ font-size:1.08rem; max-width:56ch; }

.kicker{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .8em;
  font-weight:500;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy);
  border:1px solid var(--navy);
  display:inline-block;
  padding:.35em .9em;
  border-radius:999px;
  margin-bottom:1.6em;
}

.link-arrow{
  font-family:var(--font-mono);
  font-size:.9rem;
  color:var(--navy);
  border-bottom:1px solid currentColor;
  padding-bottom:2px;
  transition:opacity .2s var(--ease);
}
.link-arrow:hover{ opacity:.65; }

/* Buttons */
.btn{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.95em 1.7em;
  border-radius:2px;
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary{
  background:var(--navy);
  color:var(--white);
}
.btn-primary:hover{ background:var(--navy-dark); transform:translateY(-1px); }
.btn-ghost{
  border-color:var(--ink);
  color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-1px); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(238,240,244,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(15,27,48,.1);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
}
.brand{ display:flex; align-items:center; }
.brand-logo{ height:38px; width:auto; display:block; }
.footer-inner .brand-logo{ height:34px; }

.main-nav{ display:flex; align-items:center; gap:2em; }
.main-nav a{
  font-size:.94rem; color:var(--ink-soft);
  position:relative; padding:.2em 0;
  transition:color .2s var(--ease);
}
.main-nav a:not(.nav-cta):after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--navy); transition:width .25s var(--ease);
}
.main-nav a:not(.nav-cta):hover{ color:var(--ink); }
.main-nav a:not(.nav-cta):hover:after{ width:100%; }
.nav-cta{
  font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.03em; background:var(--navy); color:var(--white) !important;
  padding:.6em 1.2em; border-radius:2px;
  transition:background .2s var(--ease);
}
.nav-cta:hover{ background:var(--navy-dark); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; transition:transform .25s var(--ease), opacity .25s var(--ease); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:6.5em 0 4em;
  overflow:hidden;
}
.hero-ledger{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom, transparent 0, transparent 47px, rgba(15,27,48,.07) 48px
  );
  mask-image:linear-gradient(to bottom, transparent, black 15%, black 75%, transparent);
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:3.5em; align-items:center; }
.hero-copy{ min-width:0; }
.hero h1{ max-width:16ch; }
.hero-sub{ max-width:56ch; font-size:1.1rem; }
.hero-actions{ display:flex; gap:1em; flex-wrap:wrap; margin:2em 0 3.5em; }

.hero-photo{
  border-radius:6px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:0 24px 48px -16px rgba(15,27,48,.35);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Hero photo slideshow (3 images, cross-fade, pure CSS) ---- */
.hero-photo-slideshow{ position:relative; }
.hero-photo-slideshow .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  animation: heroFade 12s infinite;
}
@keyframes heroFade{
  0%   { opacity:0; }
  4%   { opacity:1; }
  29%  { opacity:1; }
  37%  { opacity:0; }
  100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-photo-slideshow .slide{ animation:none; opacity:1; }
  .hero-photo-slideshow .slide:not(:first-child){ display:none; }
}

.team-banner{ position:relative; width:100%; height:min(70vh, 620px); overflow:hidden; }
.team-banner img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; display:block; }
.team-banner::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(14,27,51,.88) 0%, rgba(14,27,51,.15) 45%, transparent 70%);
}
.team-banner-caption{
  position:absolute; left:0; right:0; bottom:30em; z-index:1; color:var(--white);
}
.team-banner-caption h2{ color:var(--white); margin:0; max-width:20ch; }

/* ---- Independent copy used only on the Auditoría Interna page ---- */
.team-banner-audit{ position:relative; width:100%; height:min(70vh, 620px); overflow:hidden; }
.team-banner-audit img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.team-banner-audit::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(14,27,51,.88) 0%, rgba(14,27,51,.15) 30%, transparent 70%);
}
.team-banner-audit-caption{
  position:absolute; left:0; right:0; bottom:2.4em; z-index:1; color:var(--white);
}
.team-banner-audit-caption h2{ color:var(--white); margin:0; max-width:20ch; }

.ledger-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid rgba(15,27,48,.18);
  border-bottom:3px double rgba(15,27,48,.35);
  padding:1.4em 0;
}
.ledger-stats > div{
  padding:0 1.4em; border-left:1px solid rgba(15,27,48,.12);
}
.ledger-stats > div:first-child{ border-left:none; padding-left:0; }
.ledger-stats dt{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--gold); margin-bottom:.4em;
}
.ledger-stats dd{ margin:0; font-size:.95rem; font-weight:500; color:var(--ink); }

/* =========================================================
   TRUST STRIP
   ========================================================= */
.trust-strip{ background:var(--navy-dark); color:var(--paper); padding:3.2em 0; }
.trust-inner h2{ color:var(--white); margin-bottom:.3em; }
.trust-inner p{ color:rgba(238,240,244,.75); max-width:60ch; margin:0; }

/* =========================================================
   SECTIONS (generic)
   ========================================================= */
.section{ padding:5.5em 0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:4em; align-items:start; }

.check-list li{
  display:flex; align-items:flex-start; gap:.8em;
  padding:.9em 0; border-top:1px solid rgba(15,27,48,.12);
  font-size:1rem; color:var(--ink);
}
.check-list li:last-child{ border-bottom:1px solid rgba(15,27,48,.12); }
.ico-check{
  flex:0 0 20px; width:20px; height:20px; margin-top:2px;
  border-radius:50%; background:var(--navy-light);
  position:relative;
}
.ico-check::after{
  content:""; position:absolute; left:5px; top:5px; width:9px; height:5px;
  border-left:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(-45deg);
}

/* Problem section */
.problem{ background:var(--white); }

/* =========================================================
   SERVICIOS
   ========================================================= */
.services{ background:var(--paper); }
.service-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(15,27,48,.15);
  margin-top:2.5em;
  border:1px solid rgba(15,27,48,.15);
}
.service-card{
  background:var(--paper); padding:2em 1.8em;
  transition:background .25s var(--ease);
}
.service-card:hover{ background:var(--white); }
.service-code{
  display:block; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.08em; color:var(--gold); margin-bottom:1.2em;
}
.service-icon{ display:block; width:40px; height:40px; color:var(--navy); margin-bottom:1em; }
.service-icon svg{ width:100%; height:100%; }
.service-card h3{ font-size:1.08rem; }
.service-card p{ font-size:.92rem; }
.service-points{ margin-top:1em; }
.service-points li{
  font-size:.84rem; color:var(--ink-soft); position:relative;
  padding-left:1em; margin-bottom:.5em;
}
.service-points li::before{
  content:"—"; position:absolute; left:0; color:var(--gold);
}

/* =========================================================
   SECTORES
   ========================================================= */
.sectors{ background:var(--navy-light); }
.sector-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5em; margin-top:2em; }
.sector-card{
  background:var(--white); padding:2em; border-radius:var(--radius);
  border-top:3px solid var(--gold);
}
.sector-card h3{ margin-bottom:.3em; }
.sector-card p{ font-size:.92rem; margin:0; }

/* =========================================================
   NOSOTROS / MVV
   ========================================================= */
.about{ background:var(--white); }
.mvv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5em; margin-top:2.5em; }
.mvv-card{
  background:var(--paper); padding:2em; border-radius:var(--radius);
}
.mvv-tag{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--navy); display:inline-block; margin-bottom:1em;
  padding-bottom:.5em; border-bottom:2px solid var(--gold);
}
.mvv-card p{ font-size:.92rem; margin:0; }
.mvv-card ul li{ font-size:.88rem; color:var(--ink-soft); margin-bottom:.7em; }
.mvv-card ul li strong{ color:var(--ink); }

/* Why */
.why{
  position:relative;
  background:
    linear-gradient(160deg, rgba(14,27,51,.94), rgba(14,27,51,.88)),
    url("img/team/why-bg.jpg") center 20% / cover no-repeat;
  color:var(--paper);
}
.why .kicker{ color:var(--gold-soft); }
.why h2{ color:var(--white); }
.why .check-list li{ color:var(--white); border-color:rgba(238,240,244,.2); }
.why .check-list li:last-child{ border-color:rgba(238,240,244,.2); }
.why .ico-check{ background:rgba(238,240,244,.12); }
.why .ico-check::after{ border-color:var(--gold-soft); }

/* =========================================================
   OFICINAS
   ========================================================= */
.offices{ background:var(--paper); }
.office-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2em; margin-top:2.5em; }
.office-card{ background:var(--white); border-radius:var(--radius); overflow:hidden; border-top:3px solid var(--gold); }
.office-map{ aspect-ratio:16/9; background:var(--paper-2); }
.office-map iframe{ width:100%; height:100%; border:0; }
.office-card h3, .office-card p{ padding-left:1.8em; padding-right:1.8em; }
.office-card h3{ margin-top:1.4em; }
.office-card p{ font-size:.92rem; margin-bottom:.6em; }
.office-card p:last-child{ margin-bottom:1.8em; }

/* =========================================================
   FAQ / ACCORDION
   ========================================================= */
.faq{ background:var(--white); }
.accordion{ margin-top:2em; border-top:1px solid rgba(15,27,48,.15); max-width:76ch; }
.accordion-item{ border-bottom:1px solid rgba(15,27,48,.15); }
.accordion-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; text-align:left;
  font-family:var(--font-display); font-size:1.08rem; color:var(--ink);
  padding:1.3em 0;
}
.accordion-icon{
  flex:0 0 22px; height:22px; position:relative;
}
.accordion-icon::before, .accordion-icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--gold);
  transform:translate(-50%,-50%);
}
.accordion-icon::before{ width:14px; height:2px; }
.accordion-icon::after{ width:2px; height:14px; transition:transform .25s var(--ease); }
.accordion-trigger[aria-expanded="true"] .accordion-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.accordion-panel{
  max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
}
.accordion-panel p{ padding-bottom:1.4em; margin:0; max-width:64ch; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{ background:var(--navy-light); }
.contact-form{ display:flex; flex-direction:column; gap:1em; background:var(--white); padding:2.2em; border-radius:var(--radius); }
.contact-form label{ font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:-.6em; }
.contact-form input, .contact-form textarea{
  font-family:var(--font-body); font-size:1rem; padding:.8em .9em;
  border:1px solid rgba(15,27,48,.25); border-radius:2px; background:var(--paper);
  color:var(--ink); resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:2px solid var(--navy); outline-offset:1px; background:var(--white);
}
.contact-form .btn{ align-self:flex-start; border:none; }
.form-note{ font-size:.85rem; color:var(--navy); margin:0; min-height:1.2em; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--ink); color:rgba(238,240,244,.7); padding:3.5em 0 2em; }
.footer-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:.8em; }
.footer-links{ display:flex; gap:1.5em; margin:1em 0; }
.footer-links a{ font-size:.9rem; transition:color .2s var(--ease); }
.footer-links a:hover{ color:var(--white); }
.footer-fine{ font-family:var(--font-mono); font-size:.78rem; margin:0; }

/* WhatsApp FAB */
.whatsapp-fab{
  position:fixed; right:22px; bottom:22px; width:56px; height:56px; z-index:60;
  border-radius:50%; box-shadow:0 6px 20px rgba(15,27,48,.3);
  transition:transform .2s var(--ease);
}
.whatsapp-fab:hover{ transform:scale(1.06); }
.whatsapp-fab svg{ width:100%; height:100%; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .grid-2{ grid-template-columns:1fr; gap:2.5em; }
  .hero-inner{ grid-template-columns:1fr; gap:2.5em; }
  .hero-photo{ aspect-ratio:4/5; order:-1; }
  .hero-photo img{ object-position:center var(--mobile-pos, 20%); }
  .hero-photo-slideshow .slide{ object-position:center var(--mobile-pos, 20%); }
  .team-banner{ height:340px; }
  .team-banner-audit{ height:340px; }
  .team-banner img{ object-position:center 25%; }
  .team-banner-caption{ bottom:1.4em; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .mvv-grid{ grid-template-columns:1fr; }
  .sector-row{ grid-template-columns:1fr; }
  .office-grid{ grid-template-columns:1fr; }
  .ledger-stats{ grid-template-columns:repeat(2,1fr); row-gap:1.4em; }
  .ledger-stats > div:nth-child(3){ border-left:none; padding-left:0; }
}

@media (max-width: 760px){
  .main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:1em 28px; transform:translateX(100%);
    transition:transform .3s var(--ease); overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav a{ width:100%; padding:1em 0; border-bottom:1px solid rgba(15,27,48,.1); }
  .nav-cta{ margin-top:1em; text-align:center; }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .service-grid{ grid-template-columns:1fr; }
  .section{ padding:3.5em 0; }
  .hero{ padding:4.5em 0 2.5em; }
}