/* 4Health — Portada (Inicio) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --blue:#2b7fff; --blue-deep:#1e63d0; --brand:#45b0e3;
  --ink:#12233b; --muted:#5a6b82; --bg:#f4f8fc; --card:#ffffff; --border:#e2e8f2;
  --shadow:0 18px 50px rgba(20,50,110,.14);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  min-height:100vh;display:flex;flex-direction:column;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.top{padding:34px 20px 10px;text-align:center}
.top .logo{height:96px;width:auto;margin:0 auto}
@media(max-width:560px){.top .logo{height:66px}}

main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:10px 20px 40px}

.hero{text-align:center;padding:24px 0 40px}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:.2em 0;letter-spacing:-.02em;font-weight:800}
.hero h1 span{color:var(--brand)}
.hero .sub{color:var(--muted);font-size:1.08rem;max-width:52ch;margin:0 auto 30px}

.seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,320px));gap:20px;justify-content:center}
.seg{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px;box-shadow:var(--shadow);
  text-align:left;display:flex;flex-direction:column;gap:8px;transition:transform .14s ease,box-shadow .14s ease;position:relative;overflow:hidden}
.seg::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--brand),var(--blue))}
.seg:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(20,50,110,.2)}
.seg-tag{align-self:flex-start;background:#e8f4fc;color:var(--blue-deep);font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;padding:5px 12px;border-radius:100px;margin-top:6px}
.seg-name{font-weight:800;font-size:1.15rem;margin-top:4px}
.seg-desc{color:var(--muted);font-size:.95rem}
.seg-go{margin-top:8px;color:var(--blue);font-weight:800}
.soon{color:var(--muted);margin-top:22px;font-size:.95rem}

.contacto{background:linear-gradient(160deg,var(--blue),var(--blue-deep));border-radius:24px;padding:40px 20px;margin-top:10px}
.contacto .card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);max-width:440px;margin:0 auto;padding:28px 30px}
.contacto h2{margin:0 0 18px;font-size:1.7rem;font-weight:800;letter-spacing:-.01em}
.contacto .line{display:flex;align-items:center;gap:14px;padding:6px 0}
.contacto .ic{width:40px;height:40px;flex:0 0 40px;border-radius:50%;border:1px solid var(--border);
  display:grid;place-items:center;font-size:1.05rem}
.contacto small{display:block;color:var(--muted);font-size:.9rem}
.contacto b{font-size:1.12rem}
.contacto .sep{height:1px;background:var(--border);margin:12px 0}

.foot{max-width:1040px;margin:0 auto;width:100%;padding:22px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;color:var(--muted);font-size:.86rem;flex-wrap:wrap}
.foot a{color:var(--blue);font-weight:700}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}