@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root{
  --bg:#f4f7f5;
  --surface:#ffffff;
  --surface-2:#eef5f1;
  --text:#20312d;
  --muted:#60756e;
  --brand:#2e8b72;
  --brand-dark:#236a57;
  --border:#dbe7e1;
  --shadow:0 12px 34px rgba(20,50,42,.08);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--bg);
  color:var(--text); line-height:1.65;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,247,245,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0;
}
.brand-wrap{display:flex; flex-direction:column}
.brand{font-size:34px; font-weight:800; color:var(--brand); letter-spacing:.5px}
.brand-subtitle{font-size:14px; color:var(--muted); margin-top:2px}
.nav{display:flex; gap:16px; flex-wrap:wrap; justify-content:flex-end}
.nav a{font-size:14px; font-weight:700}
.hero{
  padding:88px 0 60px;
  background:linear-gradient(180deg, #eef6f2 0%, #f4f7f5 100%);
  border-bottom:1px solid var(--border);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center}
.badge{
  display:inline-block; padding:8px 12px; border-radius:999px; background:#dff2ea;
  color:var(--brand-dark); font-weight:700; font-size:13px;
}
.hero h1{
  font-size:58px; line-height:1.08; margin:18px 0 18px;
}
.lead{font-size:22px; max-width:790px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:12px; border:2px solid transparent;
  font-weight:700;
}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark); text-decoration:none}
.btn-secondary{border-color:var(--brand); color:var(--brand); background:transparent}
.btn-secondary:hover{background:#e9f4f0; text-decoration:none}
.card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
}
.quote-card h3,.topic-card h3,.article-card h3,.process-card h3,.aside-card h3{margin-top:0; color:var(--brand)}
#rotatingQuote{font-size:21px; transition:opacity .25s ease}
.section{padding:76px 0}
.section h2{font-size:40px; margin:0 0 12px; text-align:center}
.section-intro{
  text-align:center; color:var(--muted); font-size:20px; max-width:920px; margin:0 auto 28px;
}
.grid{display:grid; gap:22px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic-card p,.article-card p,.process-card p{margin:0}
.article-meta{
  font-size:12px; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); font-weight:700;
}
.article-card{display:flex; flex-direction:column; gap:14px}
.article-link{margin-top:auto; font-weight:700}
.highlight{background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.explore-wrap{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:24px; align-items:start;
}
.explore-list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.explore-item{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  font-weight:700;
}
.process-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.process-card{
  background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px;
}
.step-number{
  width:34px; height:34px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:10px;
}
.contact-box{
  max-width:920px; margin:0 auto; background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px;
}
.contact-box textarea{
  width:100%; min-height:160px; resize:vertical; padding:14px; font-size:16px;
  border:1px solid #c9d6d1; border-radius:12px; margin-bottom:16px;
}
.form-message{margin-top:12px; color:var(--brand-dark); font-weight:700}
.legal{max-width:920px; margin:18px auto 0; font-size:14px; color:var(--muted); text-align:center}
.site-footer{
  border-top:1px solid var(--border); padding:26px 0 48px; color:var(--muted); font-size:14px;
}
.footer-grid{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.article-page .article-header{
  padding:56px 0 26px; background:linear-gradient(180deg,#eef6f2 0%, #f4f7f5 100%);
  border-bottom:1px solid var(--border);
}
.article-page h1{font-size:48px; margin:0 0 10px}
.article-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; padding:40px 0 78px}
.article-main{
  background:var(--surface); padding:30px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.article-main h2{font-size:28px; margin-top:28px}
.article-main p{font-size:18px}
.article-main ul{padding-left:22px}
.article-aside{display:flex; flex-direction:column; gap:18px}
.aside-card{
  background:var(--surface); padding:22px; border-radius:var(--radius); box-shadow:var(--shadow);
}
.reference-list{padding-left:18px}
.notice{border-left:4px solid var(--brand); padding-left:14px; color:var(--muted)}
.back-link{font-weight:700}
@media (max-width: 980px){
  .hero-grid,.explore-wrap,.article-layout{grid-template-columns:1fr}
  .grid.three,.process-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:42px}
}
@media (max-width: 680px){
  .header-inner{flex-direction:column; align-items:flex-start}
  .nav{justify-content:flex-start}
  .grid.two,.grid.three,.process-grid,.explore-list{grid-template-columns:1fr}
  .hero h1{font-size:34px}
  .section h2{font-size:30px}
  .lead,.section-intro{font-size:18px}
  .article-page h1{font-size:34px}
}


.article-main p {
  text-align: justify;
  line-height: 1.85;
  margin-bottom: 18px;
}

.article-main h2 {
  margin-top: 30px;
  margin-bottom: 12px;
  font-size: 26px;
  line-height: 1.25;
}

.article-main h3 {
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.3;
}

.article-main ul {
  margin-bottom: 18px;
  padding-left: 22px;
}

.article-main li {
  margin-bottom: 8px;
  text-align: justify;
  line-height: 1.75;
}


body, .site-header, .nav, .article-page {
  font-family: "Poppins", Arial, Helvetica, sans-serif;
}

.banner-renacer {
  text-align: center;
  padding: 72px 20px 56px;
  background: linear-gradient(135deg, rgba(31,122,101,.10), rgba(44,95,138,.10), rgba(255,122,0,.08));
  border-bottom: 1px solid var(--border);
}

.banner-renacer .container {
  max-width: 980px;
}

.banner-renacer h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 22px 0;
}

.banner-renacer p {
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 14px 0;
  text-align: center;
}

.banner-impacto {
  font-size: 18px;
  font-weight: 600;
  color: #2e7d32;
  margin-top: 10px;
}

.banner-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(90deg, var(--green), var(--blue));
  color: #fff;
}

.btn-secondary {
  border: 2px solid var(--orange);
  color: var(--orange);
  background: #fff;
}

@media (max-width: 768px) {
  .banner-renacer {
    padding: 56px 18px 42px;
  }
  .banner-renacer h1 {
    font-size: 32px;
  }
  .banner-renacer p {
    font-size: 18px;
  }
}


.btn-secondary {
  border: 2px solid var(--orange);
  color: #2e7d32 !important;
  background: #ffffff !important;
  font-weight: 700;
}


.btn-static {
  cursor: default;
  pointer-events: none;
}

.btn-primary.btn-static {
  background: linear-gradient(90deg, var(--green), var(--blue));
  color: #ffffff !important;
  border: none;
}

.btn-primary,
.btn-secondary {
  min-height: 56px;
}

.btn-primary {
  color: #1f7a65 !important;
  background: #ffffff !important;
  border: 2px solid rgba(31,122,101,.18);
}

.banner-actions .btn-primary {
  color: #1f7a65 !important;
}

.banner-actions .btn-secondary {
  color: #1f7a65 !important;
  background: #ffffff !important;
  border: 2px solid rgba(31,122,101,.18);
}

.logo-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  height: 54px;
  width: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo-img {
    height: 42px;
  }
  .logo-container {
    gap: 10px;
  }
}