
:root{
  --primary-600:#35b7a5; /* teal from logo */
  --primary-700:#2aa392;
  --accent-500:#7cc075;
  --soft:#f3f8f6;
  --text:#1a2b2b;
}
*{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
html{scroll-behavior:smooth;}
.fw-extrabold{font-weight:800;}
.section-pad{padding:4rem 0;}
.brand-text{color:var(--primary-700)}
.topbar{background:linear-gradient(90deg,var(--primary-700),var(--accent-500));padding:.35rem 0}
.bg-soft{background:var(--soft)}
.divider{height:2px;background:linear-gradient(90deg,transparent,#e9ecef,transparent)}

/* Hero */
.hero{min-height:75vh;background:url('../img/banner-1.jpg') center/cover no-repeat;position:relative}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(120deg, rgba(42,163,146,.85), rgba(124,192,117,.5))}
.hero-cards{display:grid;gap:.75rem}
.hcard{background:rgba(255,255,255,.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);padding:.75rem 1rem;border-radius:.75rem;display:flex;align-items:center;gap:.5rem}
.hcard i{font-size:1.25rem}

/* Media */
.media-img{height:360px;background-size:cover;background-position:center;border:1px solid #e8f0ed}

/* Values */
.value{background:#fff;border:1px solid #e6f0ed;border-radius:.75rem;padding:.75rem;display:flex;flex-direction:column}
.value span{font-size:.85rem;opacity:.8}
.value.v1{background:#e6fff3;border-color:#c8ffe3}
.value.v2{background:#e6f7ff;border-color:#cfe8ff}
.value.v3{background:#fff7e6;border-color:#ffe4bf}
.value.v4{background:#f1f3ff;border-color:#dfe3ff}
.value.v5{background:#ffe6f3;border-color:#ffd6ea}

/* Panels */
.panel{background:#fff;border:1px solid #e6f0ed;border-radius:1rem;padding:1rem}

/* Strip */
.strip{background:linear-gradient(90deg,var(--primary-700),var(--primary-600));}
.strip .col-auto{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);padding:.5rem .75rem;border-radius:999px}

/* Services */
.tile{background:#fff;border:1px solid #e6f0ed;border-radius:1rem;padding:1.25rem}
.tile.highlight{border-color:var(--primary-600)}
.tile .icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto .5rem;background:linear-gradient(135deg,var(--primary-600),var(--accent-500));color:#fff}

/* Contact */
.contact-card{background:linear-gradient(180deg,#ffffff, #f7fbfa);border:1px solid #e6f0ed;border-radius:1rem;padding:1.25rem}
#contacto .form-control{background:#fcfdfd;border:1px solid #cfe3dc;color:#1e2e2e}
#contacto .form-control:focus{background:#fff;border-color:var(--primary-600);box-shadow:0 0 0 .25rem rgba(53,183,165,.25)}

/* Buttons */
.btn-primary{background:var(--primary-600);border-color:var(--primary-600)}
.btn-primary:hover{background:var(--primary-700);border-color:var(--primary-700)}
.btn-outline-light{border-color:#fff;color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--primary-700)}


/* Callout, feature cards and chips for Quienes */
.callout{background:#fff;border:1px solid #e6f0ed;border-left:6px solid var(--primary-600);border-radius:.75rem;padding:1rem;display:flex;gap:.75rem;align-items:flex-start}
.callout i{color:var(--primary-600);font-size:1.25rem;margin-top:.1rem}
.feat-card{background:#fff;border:1px solid #e6f0ed;border-radius:.75rem;padding:1rem}
.values-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chip{padding:.4rem .75rem;border-radius:999px;border:1px solid var(--primary-600);background:var(--primary-600);color:#fff;font-size:.9rem}
/* Circular services layout */
.circle-grid{display:grid;grid-template-columns:repeat( auto-fit, minmax(220px,1fr) );gap:1.25rem}
.circle-card{background:#fff;border:1px solid #e6f0ed;border-radius:1rem;padding:1rem;text-align:center}
.circle{width:110px;height:110px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  background:radial-gradient( circle at 30% 30%, var(--accent-500), var(--primary-600) ); color:#fff; font-size:2rem}

/* Footer link */
.footer-link{color:#9fd8c8;text-decoration:none}
.footer-link:hover{color:#fff;text-decoration:underline}

.strip-img{background:url('../img/banner-3.jpg') center/cover no-repeat; position:relative}
.strip-img .strip-overlay{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35)}
.strip-img>*{position:relative;z-index:1}

.pill-soft{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:.4rem .9rem;border-radius:999px;display:inline-flex;align-items:center}
