
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@500;600;700;800&display=swap');

:root{
  --primary:#0F4C81;
  --secondary:#00A7C1;
  --accent:#FF6F61;
  --dark:#2A2A2A;
  --light:#F7F7F7;
  --surface:#FFFFFF;
  --line:#DDE5EC;
  --muted:#5F6B76;
  --shadow:0 18px 45px rgba(15,76,129,.12);
  --radius:20px;
  --container:1180px;
  --font-body:'Lato',sans-serif;
  --font-heading:'Montserrat',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--dark);
  background:
    radial-gradient(circle at top left, rgba(0,167,193,.08), transparent 28%),
    radial-gradient(circle at top right, rgba(255,111,97,.08), transparent 26%),
    var(--light);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
main,section{display:block}

.container{width:min(var(--container),calc(100% - 2rem));margin:0 auto}
.narrow{width:min(820px,calc(100% - 2rem));margin:0 auto}
.page-section{padding:4.5rem 0}
.surface{
  background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  backdrop-filter:blur(12px);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--secondary);
  margin-bottom:1rem;
}
.section-title{
  font-family:var(--font-heading);
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.1;
  color:var(--primary);
  letter-spacing:-.02em;
}
.section-copy{
  color:var(--muted);
  font-size:1.08rem;
  margin-top:1rem;
}

.header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(16px);
  background:rgba(247,247,247,.86);
  border-bottom:1px solid rgba(15,76,129,.08);
}
.header-inner{
  width:min(var(--container),calc(100% - 2rem));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 0;
}
.header-logo img{height:42px;width:auto}
.header-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.26rem;
  width:48px;
  height:48px;
  margin-left:auto;
  border:1px solid rgba(15,76,129,.12);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(15,76,129,.08);
  cursor:pointer;
}
.header-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background:var(--primary);
  transition:transform .22s ease, opacity .22s ease;
}
.header-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.header-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.header-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.header-nav{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.header-nav a{
  padding:.7rem 1rem;
  border-radius:999px;
  color:var(--dark);
  font-weight:700;
  font-size:.95rem;
  transition:all .22s ease;
}
.header-nav a:hover,
.header-nav a.active,
.header-nav a[aria-current="page"]{
  background:rgba(15,76,129,.10);
  color:var(--primary);
}

.hero{
  padding:5.5rem 0 4rem;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:stretch;
}
.hero-copy,.hero-panel{
  padding:2.2rem;
}
.hero-copy{
  background:linear-gradient(135deg, rgba(15,76,129,.98), rgba(0,167,193,.88));
  color:#fff;
  border-radius:28px;
  box-shadow:var(--shadow);
}
.hero-copy .eyebrow{color:rgba(255,255,255,.82)}
.hero h1{
  font-family:var(--font-heading);
  font-size:clamp(2.4rem,5vw,4.4rem);
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:1rem;
}
.hero p{
  font-size:1.15rem;
  color:rgba(255,255,255,.88);
  max-width:56ch;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:1.8rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:48px;
  padding:.8rem 1.2rem;
  border-radius:14px;
  border:1px solid transparent;
  font-weight:700;
  transition:all .2s ease;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(255,111,97,.25)}
.btn-secondary{
  background:#fff;
  color:var(--primary);
}
.btn-ghost{
  background:transparent;
  color:var(--primary);
  border-color:rgba(15,76,129,.15);
}
.hero-panel{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
}
.hero-badges{
  display:grid;
  gap:1rem;
}
.stat-card{
  padding:1.25rem 1.3rem;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,76,129,.08);
  border-radius:20px;
}
.stat-card strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.15rem;
  color:var(--primary);
  margin-bottom:.35rem;
}
.stat-card span{color:var(--muted)}

.kpi-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:1.6rem;
}
.kpi{
  padding:1rem 1.1rem;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
}
.kpi strong{
  display:block;
  font-family:var(--font-heading);
  font-size:1.15rem;
  margin-bottom:.25rem;
}
.kpi span{font-size:.95rem;color:rgba(255,255,255,.78)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}

.card{
  padding:1.55rem;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,76,129,.08);
  box-shadow:0 14px 34px rgba(15,76,129,.08);
}
.card h3{
  font-family:var(--font-heading);
  color:var(--primary);
  font-size:1.25rem;
  line-height:1.15;
  margin-bottom:.7rem;
  letter-spacing:-.02em;
}
.card p{color:var(--muted)}
.icon-badge{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;
  margin-bottom:1rem;
  background:rgba(0,167,193,.12);
  color:var(--secondary)
}
.icon-badge.accent{background:rgba(255,111,97,.14);color:var(--accent)}
.icon-badge.primary{background:rgba(15,76,129,.12);color:var(--primary)}

.check-list{display:grid;gap:.8rem;margin-top:1.3rem}
.check-list li{
  list-style:none;
  display:flex;
  gap:.8rem;
  color:var(--muted);
}
.check-list li::before{
  content:"✓";
  flex:none;
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:999px;
  background:rgba(0,167,193,.12);
  color:var(--secondary);
  font-weight:800;
}

.value-band{
  padding:2rem;
  background:linear-gradient(135deg, rgba(15,76,129,.06), rgba(0,167,193,.06));
  border-radius:26px;
  border:1px solid rgba(15,76,129,.08);
}
.value-band .grid-3{margin-top:1.4rem}

.principles-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.4rem}
.principle{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:1.15rem 1.2rem;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,76,129,.08);
}
.principle svg{
  width:24px;height:24px;flex:none;color:var(--secondary)
}
.principle p{color:var(--muted)}
.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.mission-card{
  padding:1.3rem;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(15,76,129,.08);
}
.mission-card h3{margin-bottom:.5rem}

.posts-toolbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  margin:1.6rem 0 1.2rem;
}
.toolbar-group{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.field label{
  font-size:.85rem;
  font-weight:700;
  color:var(--primary);
}
.input, select, textarea{
  width:100%;
  padding:.88rem 1rem;
  border-radius:14px;
  border:1px solid rgba(15,76,129,.16);
  background:#fff;
  color:var(--dark);
}
.input:focus, select:focus, textarea:focus{
  outline:2px solid rgba(0,167,193,.2);
  border-color:var(--secondary);
}
.posts-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.2rem;
}
.post-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(15,76,129,.08);
  box-shadow:0 14px 32px rgba(15,76,129,.08);
  min-height:100%;
}
.post-card img{
  aspect-ratio:16/10;
  object-fit:cover;
  width:100%;
  background:#edf3f6;
}
.post-content{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:1.15rem 1.15rem 1.2rem;
  flex:1;
}
.category-pill{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:.32rem .7rem;
  border-radius:999px;
  background:rgba(0,167,193,.10);
  color:var(--secondary);
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.post-meta{color:var(--muted);font-size:.9rem}
.post-card h3 a,
.post-card h3{
  font-family:var(--font-heading);
  font-size:1.22rem;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--primary);
}
.post-card p{color:var(--muted)}
.read-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:800;
  color:var(--accent);
}

.page-hero{
  padding:4.25rem 0 2.2rem;
}
.page-hero-card{
  padding:2.2rem;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(15,76,129,.96), rgba(0,167,193,.88));
  color:#fff;
  box-shadow:var(--shadow);
}
.page-hero-card h1{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
.page-hero-card p{
  color:rgba(255,255,255,.86);
  margin-top:.8rem;
  font-size:1.08rem;
  max-width:64ch;
}

.contact-grid{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:1.3rem;
}
.contact-card,.form-card{
  padding:1.6rem;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(15,76,129,.08);
  box-shadow:0 14px 32px rgba(15,76,129,.08);
}
.contact-list{display:grid;gap:.95rem;margin-top:1.2rem}
.contact-item{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
}
.contact-item svg{
  width:22px;height:22px;flex:none;color:var(--secondary);margin-top:.2rem
}
.contact-item strong{
  display:block;color:var(--primary);margin-bottom:.1rem
}
.mini-actions{
  display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.2rem
}
.notice{
  font-size:.92rem;
  color:var(--muted);
  margin-top:.8rem;
}
.form-grid{display:grid;gap:.95rem}
.form-grid .row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:.95rem}
textarea{min-height:150px;resize:vertical}
.form-success{
  display:none;
  padding:1rem 1.1rem;
  border-radius:14px;
  background:rgba(0,167,193,.08);
  border:1px solid rgba(0,167,193,.16);
  color:var(--primary);
  font-weight:700;
  margin-bottom:1rem;
}
.form-success.show{display:block}
.form-toast{
  position:fixed;
  left:50%;
  bottom:1.25rem;
  z-index:220;
  width:min(92vw, 640px);
  padding:1rem 1.15rem;
  border-radius:16px;
  background:rgba(15,76,129,.96);
  color:#fff;
  box-shadow:0 18px 42px rgba(15,76,129,.24);
  text-align:center;
  font-weight:700;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 18px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.form-toast.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.form-toast.is-error{
  background:rgba(255,111,97,.97);
}
.honeypot-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.consent-check{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:1rem 1rem;
  border-radius:16px;
  background:rgba(15,76,129,.04);
  border:1px solid rgba(15,76,129,.10);
  color:var(--muted);
}
.consent-check input{
  margin-top:.2rem;
  flex:0 0 auto;
}
.consent-check span{
  font-size:.94rem;
  line-height:1.55;
}
.consent-check a{
  font-weight:700;
}
button[disabled],
.btn[disabled]{
  opacity:.72;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}

.footer{
  margin-top:4rem;
  border-top:1px solid rgba(15,76,129,.08);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
}
.footer-inner{
  width:min(var(--container),calc(100% - 2rem));
  margin:0 auto;
  padding:1.4rem 0 2rem;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  align-items:flex-start;
  padding:1.3rem 0;
}
.footer-brand{
  max-width:440px;
}
.footer-brand img{height:38px;margin-bottom:.8rem}
.footer-brand p,.footer-meta{color:var(--muted)}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.footer-links a{
  padding:.65rem .9rem;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,76,129,.08);
  color:var(--primary);
  font-weight:700;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(15,76,129,.08);
}
.footer-bottom p{color:var(--muted);font-size:.94rem}

.article-shell{
  padding:2.2rem;
  background:#fff;
  border-radius:28px;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,76,129,.08);
}
.article-header{
  margin-bottom:1.2rem;
}
.article-header h1{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--primary);
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1rem;
  color:var(--muted);
  margin-top:.8rem;
  font-size:.95rem;
}
.article-meta .meta-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.article-content{
  font-size:1.03rem;
}
.article-content > * + *{margin-top:1rem}
.article-content h2,
.article-content h3,
.article-content h4{
  font-family:var(--font-heading);
  color:var(--primary);
  line-height:1.1;
  letter-spacing:-.02em;
}
.article-content h2{font-size:1.8rem;margin-top:2rem}
.article-content h3{font-size:1.35rem;margin-top:1.6rem}
.article-content p,.article-content li,.article-content td,.article-content th,.article-content blockquote{
  color:#34424e;
}
.article-content ul,.article-content ol{padding-left:1.25rem}
.article-content blockquote{
  padding:1rem 1.1rem;
  border-left:4px solid var(--secondary);
  background:rgba(0,167,193,.06);
  border-radius:0 14px 14px 0;
}
.article-content table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  overflow:auto;
  display:block;
}
.article-content th,
.article-content td{
  border:1px solid rgba(15,76,129,.12);
  padding:.7rem .8rem;
  text-align:left;
}
.article-content th{
  background:rgba(15,76,129,.06);
  color:var(--primary);
  font-family:var(--font-heading);
}
.media-container{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  margin:1.1rem 0 1.6rem;
}
.media-container figure{
  margin:0;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(15,76,129,.08);
  background:#edf3f6;
}
.media-container img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
}
.contact-cta{
  margin-top:2rem;
  padding:1.1rem 1.2rem;
  background:linear-gradient(135deg, rgba(15,76,129,.06), rgba(0,167,193,.06));
  border-radius:18px;
  border:1px solid rgba(15,76,129,.08);
}
.contact-cta p{margin:0;color:var(--primary);font-weight:700}
.post-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  margin-top:2rem;
}
.post-nav a{
  font-weight:800;
}

.empty-state{
  padding:1.4rem;
  border:1px dashed rgba(15,76,129,.18);
  border-radius:18px;
  color:var(--muted);
  background:rgba(255,255,255,.7);
}

.admin-locked{
  min-height:55vh;
  display:grid;
  place-items:center;
}
.admin-locked .card{
  max-width:620px;
  text-align:center;
}

@media (max-width:1080px){
  .hero-grid,.contact-grid,.grid-3,.grid-2,.posts-grid,.mission-grid{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr}
  .hero-panel{padding:0}
}
@media (max-width:760px){
  .header-inner{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }
  .footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}
  .header-toggle{display:inline-flex}
  .header-nav{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
    padding-top:.8rem;
    justify-content:flex-start;
  }
  .header-nav.is-open{display:flex}
  .header-nav a{
    width:100%;
    padding:.85rem 1rem;
    border-radius:16px;
  }
  .hero,.page-section{padding:3.3rem 0}
  .kpi-row,.principles-list,.mission-grid,.posts-grid,.grid-3,.grid-2,.contact-grid,.media-container,.form-grid .row-2{grid-template-columns:1fr}
  .hero-copy,.hero-panel,.page-hero-card,.article-shell,.contact-card,.form-card,.value-band,.card{padding:1.3rem}
  .section-title{font-size:2rem}
}


.article-page{
  padding:0 0 2rem;
}
.article-hero{
  padding:2.4rem 0 0;
}
.article-wireframe-note{
  margin-bottom:1rem;
  padding:1rem 1.1rem;
  border:2px dashed rgba(15,76,129,.16);
  border-radius:24px;
  background:#fcfdff;
}
.article-wireframe-note strong{
  display:block;
  margin-bottom:.35rem;
  color:var(--secondary);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.72rem;
}
.article-wireframe-note span{
  color:var(--muted);
  font-size:.95rem;
}
.article-hero-shell{
  overflow:hidden;
  border:1px solid rgba(15,76,129,.08);
  border-radius:30px;
  background:#fff;
  box-shadow:var(--shadow);
}
.article-hero-top{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:2rem;
  padding:2.2rem;
  border-bottom:1px solid rgba(15,76,129,.08);
}
.article-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:1rem;
}
.article-chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:.75rem 1rem;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.article-chip-product{background:#eaf7fa;color:var(--secondary)}
.article-chip-date{background:#fff0ee;color:var(--accent)}
.article-overline{
  color:var(--secondary);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.75rem;
  font-weight:800;
  margin-bottom:.55rem;
}
.article-hero-copy h1{
  max-width:16ch;
  font-size:clamp(2.2rem,4vw,4.1rem);
  line-height:.98;
  letter-spacing:-.04em;
  color:var(--primary);
  margin:0;
}
.article-summary{
  max-width:62ch;
  margin-top:1rem;
  color:#59636d;
  font-size:1.08rem;
}
.article-sidebox{
  border:1px solid rgba(15,76,129,.08);
  background:#fbfdfe;
  border-radius:26px;
  padding:1.3rem;
  align-self:start;
}
.article-sidebox-title{
  font-weight:800;
  color:var(--primary);
  margin-bottom:.8rem;
}
.article-sidebox .side-row{
  border:1px dashed rgba(15,76,129,.12);
  border-radius:18px;
  padding:.9rem 1rem;
  background:#fff;
}
.article-sidebox .side-row + .side-row{margin-top:.75rem}
.article-sidebox .label{
  display:block;
  color:#60707a;
  font-size:.82rem;
  margin-bottom:.2rem;
}
.article-sidebox strong,.article-sidebox a{color:var(--primary)}
.article-main-wrap{
  padding:2rem 2.2rem 2.2rem;
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(0,2.15fr);
  gap:2rem;
  align-items:start;
}
.article-index{
  position:sticky;
  top:96px;
}
.article-index-card{
  border:1px solid rgba(15,76,129,.08);
  background:var(--light);
  border-radius:26px;
  padding:1.25rem;
}
.article-index-card h2{
  margin:0 0 .9rem;
  color:var(--primary);
  font-size:1rem;
}
.article-index-card nav{
  display:grid;
  gap:.7rem;
}
.article-index-card a{
  display:block;
  padding:.78rem .9rem;
  border:1px dashed rgba(15,76,129,.12);
  border-radius:16px;
  color:#5d6871;
  font-weight:700;
  background:#fff;
}
.article-index-card a:hover{color:var(--primary);border-color:rgba(0,167,193,.35)}
.article-content-shell{min-width:0}
.article-media-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1.2rem;
}
.article-media-card{
  margin:0;
  border:2px dashed rgba(0,167,193,.28);
  border-radius:28px;
  overflow:hidden;
  background:#f3fbfd;
}
.article-media-card img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.article-media-card figcaption{
  padding:.85rem 1rem 1rem;
  color:#60707a;
  font-size:.92rem;
}
.article-insight-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:1.25rem;
}
.article-insight-card{
  border:1px solid rgba(15,76,129,.08);
  border-radius:24px;
  padding:1.1rem 1.15rem;
  background:#fff;
}
.article-insight-card h3{
  margin:0 0 .45rem;
  color:var(--primary);
  font-size:1rem;
}
.article-insight-card p{
  margin:0;
  color:#62707b;
}
.article-insight-card.accent{background:#fbfcfe}
.article-content{
  font-size:1.04rem;
}
.article-content > * + *{margin-top:1rem}
.article-content p:first-of-type{
  font-size:1.08rem;
  color:#394754;
}
.article-content h2,
.article-content h3,
.article-content h4{
  scroll-margin-top:110px;
}
.article-content h2{font-size:1.9rem;margin-top:2.1rem}
.article-content h3{font-size:1.35rem}
.article-content .callout,
.article-content .data-box,
.article-content .key-insight{
  border:1px solid rgba(15,76,129,.08);
  background:linear-gradient(135deg, rgba(0,167,193,.06), rgba(15,76,129,.03));
  border-radius:20px;
  padding:1rem 1.1rem;
}
.article-anchor{display:block;position:relative;top:-100px;visibility:hidden}
.article-post-nav{
  margin-top:2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
}
.article-post-nav a{font-weight:800}
.article-related{
  border-top:1px solid rgba(15,76,129,.08);
  background:#fbfcfe;
  padding:2.2rem;
}
.article-related-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:end;
  margin-bottom:1.2rem;
}
.article-related-head p{margin:.35rem 0 0;color:#60707a}
.article-contact-band{
  border-top:1px solid rgba(15,76,129,.08);
  padding:2.2rem;
}
.article-contact-box{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
  gap:1.2rem;
  background:var(--primary);
  border-radius:30px;
  padding:2rem;
}
.article-contact-box h2{
  margin:0;
  color:#fff;
  font-size:clamp(1.9rem,3vw,2.8rem);
  line-height:1.02;
}
.article-contact-box p{color:rgba(255,255,255,.82)}
.article-contact-fields{
  display:grid;
  gap:.7rem;
}
.article-contact-fields .field-pill{
  border:2px dashed rgba(255,255,255,.24);
  color:rgba(255,255,255,.82);
  border-radius:18px;
  padding:.9rem 1rem;
}
.article-contact-fields .btn{justify-self:start}

@media (max-width:1080px){
  .article-hero-top,.article-layout,.article-contact-box{grid-template-columns:1fr}
  .article-index{position:static}
}
@media (max-width:760px){
  .article-hero-top,.article-main-wrap,.article-related,.article-contact-band{padding:1.35rem}
  .article-media-grid,.article-insight-grid{grid-template-columns:1fr}
  .article-hero-copy h1{max-width:none}
  .article-related-head{flex-direction:column;align-items:flex-start}
}


/* === Premium mobile refinement v9 === */
@keyframes eclosionMenuDrop {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.menu-open{overflow:hidden}

@media (max-width: 900px){
  .header-inner{
    position:relative;
    padding:.82rem 0;
  }
  .header-logo img{height:38px}
  .header-toggle{
    display:inline-flex;
    width:46px;
    height:46px;
    border-radius:16px;
  }
  .header-nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + .55rem);
    z-index:120;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.45rem;
    padding:.8rem;
    border-radius:24px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(15,76,129,.10);
    box-shadow:0 30px 55px rgba(15,76,129,.16);
    backdrop-filter:blur(18px);
  }
  .header-nav.is-open{
    display:flex;
    animation:eclosionMenuDrop .22s ease;
  }
  .header-nav a{
    width:100%;
    padding:.95rem 1rem;
    border-radius:16px;
    background:rgba(247,247,247,.86);
  }
  .footer-top{
    align-items:flex-start;
  }
}

@media (max-width: 760px){
  body{
    line-height:1.58;
    background:
      radial-gradient(circle at top left, rgba(0,167,193,.11), transparent 30%),
      radial-gradient(circle at top right, rgba(255,111,97,.10), transparent 28%),
      var(--light);
  }
  .container,
  .footer-inner,
  .header-inner,
  .narrow{
    width:min(var(--container),calc(100% - 1rem));
  }

  .hero,
  .page-hero,
  .article-hero{padding-top:1rem}
  .hero{padding-bottom:2.2rem}
  .page-section{padding:2.6rem 0}
  .hero-grid,
  .contact-grid,
  .grid-3,
  .grid-2,
  .posts-grid,
  .mission-grid,
  .principles-list,
  .kpi-row,
  .media-container,
  .article-media-grid,
  .article-insight-grid,
  .form-grid .row-2,
  .article-contact-box,
  .article-hero-top,
  .article-layout{grid-template-columns:1fr}

  .surface,
  .card,
  .page-hero-card,
  .article-shell,
  .contact-card,
  .form-card,
  .value-band,
  .hero-copy,
  .article-hero-shell,
  .article-sidebox,
  .article-index-card,
  .article-insight-card,
  .article-contact-box,
  .post-card{border-radius:24px}

  .hero-copy,
  .hero-panel,
  .page-hero-card,
  .article-shell,
  .contact-card,
  .form-card,
  .value-band,
  .card,
  .article-sidebox,
  .article-index-card,
  .article-insight-card{padding:1.22rem}

  .hero-copy,
  .page-hero-card,
  .article-contact-box{
    position:relative;
    overflow:hidden;
  }
  .hero-copy::after,
  .page-hero-card::after,
  .article-contact-box::after{
    content:"";
    position:absolute;
    right:-38px;
    bottom:-38px;
    width:160px;
    height:160px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.18), transparent 66%);
    pointer-events:none;
  }

  .section-title{font-size:clamp(1.8rem,8vw,2.35rem)}
  .section-copy,
  .hero p,
  .page-hero-card p,
  .article-summary{font-size:1rem}
  .hero h1{font-size:clamp(2.15rem,10vw,3.1rem)}
  .page-hero-card h1{font-size:clamp(1.95rem,8.5vw,2.6rem)}

  .hero-grid,
  .article-layout,
  .contact-grid{gap:1rem}
  .hero-panel{padding:0;gap:1rem}
  .hero-panel .surface{padding:1rem !important}
  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:.75rem;
    margin-top:1.3rem;
  }
  .hero-actions .btn,
  .mini-actions .btn,
  .article-contact-fields .btn{
    width:100%;
  }
  .kpi-row{margin-top:1.15rem;gap:.75rem}
  .kpi{
    padding:1rem;
    border-radius:18px;
    backdrop-filter:blur(8px);
  }
  .stat-card,
  .mission-card,
  .principle{border-radius:18px}
  .posts-grid{gap:1rem}
  .post-card{
    overflow:hidden;
    box-shadow:0 16px 32px rgba(15,76,129,.10);
  }
  .post-card img{aspect-ratio:16/11}
  .post-content{padding:1rem}

  .posts-toolbar,
  .toolbar-group,
  .mini-actions,
  .footer-top,
  .footer-bottom,
  .article-related-head{flex-direction:column;align-items:stretch}
  .toolbar-group > *{width:100%}

  .contact-card,
  .form-card,
  .article-main-wrap,
  .article-related,
  .article-contact-band{padding:1.2rem}
  .article-main-wrap{padding-top:1rem}
  .article-badges{gap:.5rem;margin-bottom:.9rem}
  .article-chip{
    padding:.62rem .9rem;
    letter-spacing:.1em;
    font-size:.67rem;
  }
  .article-overline{
    letter-spacing:.14em;
    font-size:.68rem;
  }
  .article-hero-copy h1{max-width:none;font-size:clamp(2rem,9.4vw,2.85rem)}
  .article-sidebox .side-row,
  .article-contact-fields .field-pill,
  .article-index-card a{border-radius:16px}
  .article-index{order:-1;position:static}
  .article-index-card nav{
    display:flex;
    gap:.65rem;
    overflow-x:auto;
    padding-bottom:.25rem;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .article-index-card nav::-webkit-scrollbar{display:none}
  .article-index-card a{
    white-space:nowrap;
    min-width:max-content;
    scroll-snap-align:start;
  }
  .article-media-card{border-radius:22px}
  .article-media-card img{aspect-ratio:4/3}
  .article-content{font-size:1rem}
  .article-content p:first-of-type{font-size:1.03rem}
  .article-content h2{font-size:1.58rem}
  .article-content h3{font-size:1.18rem}
  .article-content table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    border-radius:16px;
  }
  .article-post-nav{
    flex-direction:column;
    align-items:flex-start;
  }
  .article-contact-box{padding:1.4rem;gap:1rem}
  .article-contact-box h2{font-size:clamp(1.8rem,8vw,2.4rem)}
  .footer{margin-top:2.4rem}
  .footer-links{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.65rem;
  }
  .footer-links a{text-align:center;justify-content:center}
}

@media (max-width: 520px){
  .container,
  .footer-inner,
  .header-inner,
  .narrow{width:min(var(--container),calc(100% - .8rem))}
  .header{background:rgba(247,247,247,.92)}
  .header-logo img{height:34px}
  .header-toggle{
    width:44px;
    height:44px;
    border-radius:14px;
  }
  .header-nav{padding:.72rem;border-radius:22px}
  .hero{padding-bottom:2rem}
  .section-title{font-size:clamp(1.65rem,8.7vw,2.15rem)}
  .hero h1{letter-spacing:-.05em}
  .hero-copy,
  .page-hero-card,
  .value-band,
  .article-contact-box{padding:1.1rem}
  .article-badges{display:grid}
  .article-chip{justify-content:center;width:100%}
  .article-related,
  .article-contact-band,
  .article-main-wrap{padding:1rem}
  .footer-links{grid-template-columns:1fr}
  .input,
  select,
  textarea{padding:.82rem .92rem}
}


/* ===== Mobile optimization patch | Eclosión V8 responsive ===== */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

.hero h1,
.page-hero-card h1,
.section-title,
.article-hero-copy h1,
.article-content h2,
.article-content h3,
.article-content h4,
.post-card h3,
.card h3,
.mission-card h3,
.stat-card strong,
.kpi strong{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}

.hero-copy,
.page-hero-card,
.card,
.surface,
.post-card,
.article-sidebox,
.article-index-card,
.article-insight-card,
.contact-card,
.form-card,
.value-band,
.article-contact-box,
.article-hero-shell,
.article-shell{
  min-width:0;
}

.hero-actions .btn,
.mini-actions .btn,
.article-contact-fields .btn,
.header-toggle{
  touch-action:manipulation;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
}

.article-content,
.article-summary,
.section-copy,
.hero p,
.post-card p,
.card p,
.mission-card p,
.stat-card span,
.kpi span{
  overflow-wrap:break-word;
}

@media (max-width: 900px){
  .header{
    background:rgba(247,247,247,.94);
    backdrop-filter:blur(18px);
  }

  .header-inner{
    position:relative;
    width:min(var(--container), calc(100% - 1rem));
    padding:.8rem 0;
    min-height:72px;
  }

  .header-logo{
    position:relative;
    z-index:130;
    display:inline-flex;
    align-items:center;
    max-width:calc(100% - 70px);
  }

  .header-logo img{
    height:38px;
    width:auto;
    max-width:min(210px, 56vw);
    object-fit:contain;
  }

  .header-toggle{
    display:inline-flex;
    position:relative;
    z-index:130;
    flex:0 0 auto;
    width:46px;
    height:46px;
    margin-left:auto;
    border-radius:16px;
  }

  .header-nav{
    position:fixed;
    top:72px;
    left:.8rem;
    right:.8rem;
    z-index:120;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:.5rem;
    max-height:calc(100vh - 88px);
    padding:.85rem;
    overflow:auto;
    overscroll-behavior:contain;
    border-radius:24px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(15,76,129,.10);
    box-shadow:0 26px 60px rgba(15,76,129,.18);
    backdrop-filter:blur(18px);
  }

  .header-nav.is-open{
    display:flex;
    animation:eclosionMenuDrop .22s ease;
  }

  .header-nav a{
    width:100%;
    padding:.95rem 1rem;
    border-radius:16px;
    background:rgba(247,247,247,.92);
    font-size:1rem;
    line-height:1.25;
  }

  body.menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:110;
    background:rgba(15,76,129,.18);
    backdrop-filter:blur(4px);
  }

  .hero,
  .page-section,
  .page-hero,
  .article-hero{
    scroll-margin-top:88px;
  }
}

@media (max-width: 760px){
  .container,
  .narrow,
  .footer-inner,
  .header-inner{
    width:min(var(--container), calc(100% - .9rem));
  }

  .hero,
  .page-hero,
  .article-hero{
    padding-top:1rem;
  }

  .hero{
    padding-bottom:2rem;
  }

  .page-section{
    padding:2.35rem 0;
  }

  .hero-grid,
  .grid-2,
  .grid-3,
  .posts-grid,
  .contact-grid,
  .mission-grid,
  .principles-list,
  .kpi-row,
  .media-container,
  .form-grid .row-2,
  .article-layout,
  .article-hero-top,
  .article-media-grid,
  .article-insight-grid,
  .article-contact-box{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .hero-copy,
  .hero-panel,
  .page-hero-card,
  .value-band,
  .card,
  .contact-card,
  .form-card,
  .article-shell,
  .article-sidebox,
  .article-index-card,
  .article-insight-card,
  .article-contact-box{
    padding:1.18rem;
  }

  .hero-actions,
  .mini-actions,
  .article-contact-fields{
    display:grid;
    grid-template-columns:1fr;
    gap:.75rem;
  }

  .hero-actions .btn,
  .mini-actions .btn,
  .article-contact-fields .btn{
    width:100%;
    min-height:48px;
  }

  .hero-panel .surface{
    padding:1rem !important;
  }

  .kpi,
  .stat-card,
  .mission-card,
  .principle,
  .article-chip,
  .field-pill{
    border-radius:18px;
  }

  .post-card img,
  .article-media-card img,
  .media-card img{
    width:100%;
    height:auto;
    object-fit:cover;
  }

  .posts-toolbar,
  .toolbar-group,
  .footer-top,
  .footer-bottom,
  .article-related-head{
    flex-direction:column;
    align-items:stretch;
    gap:.8rem;
  }

  .toolbar-group > *{
    width:100%;
  }

  .article-index{
    order:-1;
    position:static;
  }

  .article-index-card nav{
    display:flex;
    gap:.6rem;
    overflow-x:auto;
    padding-bottom:.2rem;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .article-index-card nav::-webkit-scrollbar{
    display:none;
  }

  .article-index-card a{
    min-width:max-content;
    white-space:nowrap;
  }

  .article-content table{
    display:block;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
}

@media (max-width: 520px){
  .header-inner,
  .container,
  .narrow,
  .footer-inner{
    width:min(var(--container), calc(100% - .75rem));
  }

  .header{
    border-bottom-color:rgba(15,76,129,.10);
  }

  .header-logo img{
    height:34px;
    max-width:58vw;
  }

  .header-toggle{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .header-nav{
    left:.4rem;
    right:.4rem;
    top:68px;
    max-height:calc(100vh - 80px);
    padding:.72rem;
    border-radius:22px;
  }

  .hero-copy,
  .page-hero-card,
  .value-band,
  .card,
  .contact-card,
  .form-card,
  .article-shell,
  .article-sidebox,
  .article-index-card,
  .article-insight-card,
  .article-contact-box{
    padding:1.05rem;
  }

  .hero h1{
    font-size:clamp(2rem, 10.4vw, 2.8rem);
  }

  .page-hero-card h1,
  .article-hero-copy h1{
    font-size:clamp(1.85rem, 9vw, 2.45rem);
  }

  .section-title,
  .article-content h2{
    font-size:clamp(1.55rem, 7.6vw, 2rem);
  }

  .article-content h3{
    font-size:1.14rem;
  }

  .footer-links{
    display:grid;
    grid-template-columns:1fr;
    gap:.65rem;
  }
}
