/* Nutraclinic.mx — modern one-page site. Author: Secuencia Gráfica + ChatGPT */
:root{
  --brand:#7cccd0;         /* aqua from logo */
  --brand-dark:#4bb0b5;
  --brand-brown:#6f4a3b;   /* earthy brown for accents */
  --ink:#2b2b2b;
  --paper:#faf7f2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Inter,Arial,sans-serif;color:var(--ink);background:var(--paper);}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
.container{width:min(1200px,92%);margin-inline:auto}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(12px);
  background:rgba(250,247,242,.78);
  border-bottom:1px solid #eee;
}
nav{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:40px;height:40px;object-fit:contain}
.brand h1{font-size:1.2rem;margin:0;letter-spacing:.5px}

.menu{display:flex;gap:14px;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:999px}
.menu a:hover{background:var(--brand);color:#033}

.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(120deg, var(--brand) 0%, #e9fffe 50%, var(--paper) 100%);
}
.hero-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;padding:56px 0}
.hero h2{font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.15;margin:0 0 12px}
.hero p{font-size:1.15rem;margin:0 0 18px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.button{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--brand-brown);color:white;padding:12px 18px;border-radius:12px;font-weight:600;
}
.button.alt{background:white;color:#033;border:2px solid var(--brand-brown)}
.hero-media{border-radius:20px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.12)}

.section{padding:56px 0}
.section h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin:0 0 16px}
.lead{font-size:1.05rem;color:#555;margin-bottom:24px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:white;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.card .pad{padding:16px}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{border-radius:12px}

.embed{background:white;border-radius:16px;padding:16px;box-shadow:0 6px 24px rgba(0,0,0,.06)}

.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}
form{display:grid;gap:12px}
input,textarea{padding:12px 14px;border:1px solid #ddd;border-radius:10px;font:inherit;background:#fff}
textarea{min-height:120px;resize:vertical}
form button{background:var(--brand-brown);color:#fff;padding:12px 16px;border:0;border-radius:10px;font-weight:700;cursor:pointer}
form small{opacity:.8}

.footer{background:#0f2530;color:#d6f7f8;padding:36px 0;margin-top:40px}
.footer a{color:#d6f7f8;text-decoration:underline}

.whatsapp{
  position:fixed;right:16px;bottom:16px;z-index:100;
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#043;padding:12px 16px;border-radius:999px;
  font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.2)
}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr;gap:18px}
  .contact{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .brand h1{display:none}
}