:root{ --primary:#1f9a57; --ink:#0f3423; --muted:#4b6256; --alt:#f4f7f5; --header-h:72px; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--alt);color:var(--ink);line-height:1.5}

.container{max-width:1080px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid #e6eee9}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:72px}

.nav ul{display:flex;list-style:none;margin:0;padding:0;gap:20px}
.nav a{text-decoration:none;color:var(--muted);font-weight:500}
.nav a:hover{color:var(--primary)}

/* Fix para que los títulos de sección no queden tapados por el header */
.section{scroll-margin-top:calc(var(--header-h) + 12px);}
.section h2{margin-top:8px;margin-bottom:20px;text-align:center;font-size:1.8rem}

/* Hero */
.hero{background:#fff;padding:0}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;padding:40px 0 28px}
.hero h1{font-size:2.2rem;margin:0 0 16px;color:var(--primary)}
.hero p{color:var(--muted)}
.hero img{width:100%;border-radius:16px}

/* Grids */
.grid2,.grid3{display:grid;gap:20px}
.grid2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Card */
.card{background:#fff;padding:16px;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.card h3{margin-top:0;font-size:1.2rem;color:var(--ink)}
.card p{margin-bottom:0;color:var(--muted)}

/* Imagen de tarjeta controlada */
.card-img{
  width:100%;
  height:clamp(160px,24vw,220px); /* altura flexible pero controlada */
  object-fit:cover;
  border-radius:12px;
  margin-bottom:12px;
}

/* Footer */
.site-footer{text-align:center;padding:20px;color:var(--muted)}
/* Ajustes de íconos de WhatsApp */

/* Logo de WhatsApp en la barra superior */
.wa-top svg {
  width: 16px;   /* achicá a gusto, antes era 20px */
  height: 16px;
}

/* Logo de WhatsApp en el botón flotante */
.wa-fab svg {
  width: 22px;   /* achicá a gusto, antes era 28px */
  height: 22px;
}
/* Texto del logo / encabezado */
.brand-text strong {
  font-size: 1.6rem;   /* antes era 1rem o 1.2rem */
  font-weight: 700;    /* negrita */
  color: #0f3423;      /* opcional: color verde oscuro */
}

.brand-text small {
  font-size: 1.1rem;   /* agranda el subtítulo */
  color: #4b6256;      /* color gris verdoso opcional */
}
.site-footer {
  text-align: center;
  padding: 20px;
  background: #f7f7f7;
  margin-top: 40px;
}

.site-footer p {
  margin-bottom: 12px;
  font-weight: bold;
  color: var(--ink);
}

.social-links a {
  display: inline-block;
  margin: 0 10px;
  color: #333;
  font-size: 32px; /* tamaño de los íconos */
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-links a:hover {
  transform: scale(1.2);
  color: var(--primary); /* usa tu color principal */
}


/* === Responsive Fixes (Quantum) === */
:root { --header-h: 72px; }
main { padding-top: calc(var(--header-h) + 8px); }
.section { scroll-margin-top: calc(var(--header-h) + 12px); }

img, video { max-width: 100%; height: auto; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 900px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid3, .grid2 { grid-template-columns: 1fr; } }

.card, .grid2 > *, .grid3 > * { min-width: 0; }
.section h2, .card h3 { overflow-wrap: anywhere; }

.card-img{ width:100%; height: clamp(160px, 26vw, 220px); object-fit: cover; border-radius:12px; margin-bottom:10px; }
@media (max-width: 480px){ .card-img { height: 180px; } }

.brand-text strong { font-size: clamp(16px, 2.2vw, 20px); font-weight:700; }
.brand-text small  { font-size: clamp(12px, 1.8vw, 14px); }

.wa-top svg { width: 18px; height: 18px; }
.wa-fab svg { width: 24px; height: 24px; }

.video-embed { position: relative; width: 100%; }
.video-embed::before { content: ""; display: block; padding-top: 56.25%; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }