:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#555555;
  /* dynamic header height (set via JS if desired) */
  --header-height: 68px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif
}

/* Smooth scroll for anchor links */
html{ scroll-behavior:smooth; }

/* Default scroll offset so anchors aren't hidden by the fixed header */
#servicios, #contacto{ scroll-margin-top: calc(var(--header-height) + 8px); }

.container{max-width:1200px;margin:0 auto;padding:16px}
img{display:block;width:100%;height:auto}

/* =========================
   Header (fixed)
   ========================= */
.site-header{
  position:fixed;
  top:0; left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:1000;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{font-weight:700;font-size:20px}
.menu a{margin-left:20px;color:var(--text);text-decoration:none;font-weight:500}
.menu a:hover{opacity:.8}
.logo-header {
  height: 52px;      /* change this value as needed */
  width: auto;       /* keeps proportions */
  display: block;
}
/* TBD ver como se ve en mobile y ajustar
@media (max-width: 600px) {
  .logo-header { height: 34px; }
}

/* Compensate fixed header (apply padding to the first section via body) */
body{ padding-top: var(--header-height); }

/* =========================
   Hero
   ========================= */
.hero-media{position:relative}
.hero-img{width:100%;border-radius:0;object-fit:cover;max-height:90vh}

/* Overlay: single canonical definition */
.overlay{
  position:absolute;
  top:10%;              /* moved lower per request */
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.85rem;
}
.overlay h1{
  margin:0;
  font-size:clamp(24px,4vw,36px);
  font-weight:600;
}
/* TBD ver como se ve en mobile y modificar*/
@media (max-width: 768px) {
  .overlay { top: 25%; }   /* adjust as needed */
}

/* =========================
   Intro
   ========================= */
.intro{
  max-width:920px;
  margin:0 auto;
  padding:32px 20px 12px;
  text-align:center;
  color:#1f2937;
  line-height:1.5;
  font-size:clamp(16px,1.6vw,20px);
}

/* Symmetric gaps around intro */
.hero + .intro{ margin-top:clamp(32px,6vh,72px); }
.intro + .grid4{ margin-top:clamp(32px,6vh,72px); }

/* =========================
   Grid
   ========================= */
.grid4{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  padding:0 16px 40px;   /* removed top padding to avoid double spacing */
}
.card img{border-radius:10px;margin-bottom:12px}
.card .text h3{margin:0 0 8px;font-size:20px}
.card .text p{margin:0;color:#444;line-height:1.4}
.card {
  display: flex;
  flex-direction: column; /* texto arriba, imagen abajo */
  gap: 1rem;              /* espacio entre texto e imagen */
  align-items: center;    /* centra el contenido si querés */
  text-align: center;     /* opcional: centra el texto */
  text-decoration: none; /* quita subrayado */
  color: inherit;        /* usa el color de texto del sitio */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media(max-width:768px){
  .grid4{grid-template-columns:1fr}
}

/* =========================
   Footer
   ========================= */
.site-footer {
  background:#000;
  color:#fff;
  border-top:none;
  padding:24px 0;
}
.footer-inner p {
  margin:4px 0;
  text-align:center;
  color:#fff;
}

/* =========================
   CTA (Contact)
   ========================= */
.cta{ text-align:center; padding:4rem 1rem; background:#f5f5f5; }
.cta h2{ margin:0 0 0.75rem; color:var(--text); font-size:clamp(1.4rem,2vw,2rem); }
.cta p{ margin:0 0 1.5rem; color:var(--muted); }
.cta-buttons{ display:flex; justify-content:center; gap:0.75rem; flex-wrap:wrap; }
.btn{ display:inline-block; padding:0.8rem 1.4rem; border-radius:8px; font-weight:600; text-decoration:none; color:#fff; background:#25D366; transition:transform .08s ease, opacity .2s ease; }
.btn:hover{ opacity:.92; transform:translateY(-1px); }
.btn.whatsapp{ background:#25D366; }

.section-content {
  max-width: 1150px;   /* limita el ancho del texto */
  margin: 0 auto;     /* centra horizontalmente */
  padding: 0 1.5rem;  /* agrega margen interno a los costados */
  line-height: 1.6;   /* mejora la lectura */
}