/* ============================================================
   SM & Asociados — Landing
   Sistema marcario: Geologica (titulares) + Literata (cuerpo)
   Base: #293847 + grises · Acento WhatsApp + bandera italiana
   ============================================================ */

:root {
  /* Marca */
  --ink:        #293847;   /* color institucional principal */
  --ink-800:    #223040;
  --ink-700:    #34465a;
  --ink-600:    #45596e;

  /* Grises funcionales */
  --gray-50:    #f6f7f8;
  --gray-100:   #eceef1;
  --gray-200:   #dde1e6;
  --gray-400:   #9aa3ad;
  --gray-600:   #5f6b78;
  --white:      #ffffff;

  /* Acentos */
  --wa:         #25d366;   /* verde WhatsApp (CTA) */
  --wa-dark:    #1ebe5a;
  --it-green:   #009246;   /* bandera italiana */
  --it-red:     #ce2b37;

  /* Tipografía */
  --font-head:  'Geologica', system-ui, sans-serif;
  --font-body:  'Literata', Georgia, serif;

  --maxw:       1080px;
  --radius:     14px;
  --shadow:     0 6px 24px rgba(41, 56, 71, 0.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, .btn, .eyebrow, nav a {
  font-family: var(--font-head);
}

h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.5px; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--it-red)}

a { color: inherit; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: 14px;
}
.brand img {max-height: 65px; max-width: 90%;}

/* Franja bandera italiana (acento sutil) */
.flag-strip { height: 4px; width: 100%; display: flex; border-bottom: 1px solid var(--gray-200);}
.flag-strip span { flex: 1; }
.flag-strip .g { background: var(--it-green); }
.flag-strip .w { background: var(--white); }
.flag-strip .r { background: var(--it-red); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gray-200);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 120px;
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--ink); letter-spacing: -0.3px;     text-align: center;}
.brand small { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.25px; text-transform: uppercase; color: var(--gray-600); font-weight: 400}
.nav-links { display: none; gap: 26px; }
.nav-links a { text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-700); }
.nav-links a:hover { color: var(--wa-dark); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none;
  border: none; cursor: pointer; transition: transform .12s ease, background .2s ease;
}
.btn svg { width: 20px; height: 20px; }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,.35); }
.btn-wa:hover { background: var(--wa-dark); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--gray-200); }
.btn-ghost:hover { border-color: var(--ink); background-color: var(--ink-800)  }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }

/* ---------- Hero ---------- */
.hero {
  /* Overlay #293847 (arriba) + imagen de fondo (abajo) + color sólido de respaldo.
     Para activar la imagen: colocá "hero.jpg" (o .webp) en la misma carpeta.
     Si no hay imagen, queda el degradado sólido. Ajustá la opacidad del overlay
     en los valores rgba() si querés que la foto se vea más o menos. */
  background:
    linear-gradient(90deg, rgba(41, 56, 71, 0.90) 0%, rgba(41, 56, 71, 0.55) 45%, rgba(41, 56, 71, 0.20) 100%),
    var(--ink) url("hero.jpg") center / cover no-repeat;
  color: var(--white);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
}
.hero .eyebrow { color: #aeb9c6; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead {
  margin: 18px 0 30px; font-size: 1.12rem; color: #d5dbe2; max-width: 52ch;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { margin-top: 22px; font-size: 0.9rem; color: #9fabb8; }

/* ---------- Secciones ---------- */
section { padding: 60px 0; }
.section-head { max-width: 60ch; margin-bottom: 38px; }
.section-head p { color: var(--gray-600); margin-top: 10px; }

/* ---------- Servicios ---------- */
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius); padding: 28px 24px;
  box-shadow: var(--shadow);
}
.card .ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--gray-50); color: var(--ink);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.card .ico svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--gray-600); font-size: 0.98rem; }
.card ul { margin: 12px 0 0 18px; color: var(--gray-600); font-size: 0.95rem; }
.card ul li { margin-bottom: 4px; }

/* ---------- Bloque destacado ciudadanía ---------- */
.highlight {
  color: #fff; border-radius: 20px;
  padding: 46px 38px; text-align: center; box-shadow: var(--shadow); 
	background: linear-gradient(90deg, rgba(41, 56, 71, 0.90) 0%, rgba(41, 56, 71, 0.55) 45%, rgba(41, 56, 71, 0.20) 100%), var(--ink) url(bg-it.jpg) center / cover no-repeat;
}
.highlight h2 { color: #fff; max-width: 22ch; margin: 0 auto 12px; }
.highlight p { color: #cdd5dd; max-width: 50ch; margin: 0 auto 26px; }

/* ---------- Por qué elegirnos ---------- */
.bg-soft { background: var(--gray-50); }
.features { display: grid; gap: 16px; grid-template-columns: 1fr; }
.feature {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 18px 20px;
}
.feature .check {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--it-green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.feature b { font-family: var(--font-head); font-weight: 600; display: block; margin-bottom: 2px; }
.feature span.txt { color: var(--gray-600); font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq details {
  border-bottom: 1px solid var(--gray-200); padding: 18px 0;
}
.faq summary {
  font-family: var(--font-head); font-weight: 600; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--gray-400); }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--gray-600); margin-top: 12px; }

/* ---------- Contacto ---------- */
.contact { text-align: center; }
.contact .lead { color: var(--gray-600); max-width: 46ch; margin: 10px auto 26px; }
.contact-meta { margin-top: 20px; font-size: 0.9rem; color: var(--gray-600); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-800); color: #b9c3cd;
  padding: 40px 0 30px; font-size: 0.88rem;
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.site-footer .brand { color: #fff; }
.site-footer a { color: #d5dbe2; }
.site-footer .legal { max-width: 46ch; line-height: 1.5; }
.site-footer .copy { width: 100%; border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; margin-top: 8px; color: #8f9ba7; font-size: 0.8rem; }

/* ---------- Botón flotante WhatsApp ---------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
  text-decoration: none; transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }

/* ---------- Responsive ---------- */
@media (min-width: 720px) {
  .nav-links { display: flex; }
  .features { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  section { padding: 136px 0; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 88px 0 96px; }
}