/* ====== Estilos básicos, diseño angosto (máx ~500px), KompoZer-friendly ====== */
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; color:#143c2e; background:#ffffff; }
img { max-width:100%; height:auto; border:0; display:block; }

/* Contenedor angosto */
.container { width: 500px; max-width: 96%; margin: 0 auto; }

/* Cabecera y navegación */
.header { background:#f4f7f5; border-bottom:1px solid #dfe7e3; }
.topbar { padding:14px 0; }
.logo { height:48px; }

.nav { padding:8px 0 16px; }
.nav a { color:#1f5c46; text-decoration:none; margin-right:12px; margin-bottom:6px; font-weight:bold; font-size:14px; display:inline-block; }
.nav a:hover { text-decoration:underline; }

/* Hero */
.hero { background:#e8f3ee; }
.hero-img { width:100%; }
.hero-text { padding:16px 0; color:#1b4637; }
.hero-text h1 { margin:0 0 8px; font-size:26px; line-height:1.25; }
.hero-text p { margin:0 0 12px; font-size:16px; }

/* Botones */
.btn { background:#1f5c46; color:#fff; padding:10px 14px; text-decoration:none; display:inline-block; border-radius:3px; }
.btn.alt { background:#ffffff; color:#1f5c46; border:2px solid #1f5c46; }
.btn.block { display:block; text-align:center; width:100%; margin-top:8px; }

/* Secciones */
.section { padding:28px 0; }
.section h2 { margin:0 0 10px; font-size:22px; }
.section h3 { margin:10px 0 8px; font-size:18px; }
.lead { color:#3a6b58; margin:0 0 8px; font-size:15px; line-height:1.5; }

/* Cards (single-column) */
.card { border:1px solid #dfe7e3; background:#fff; padding:12px; margin-bottom:14px; }
.card .thumb { text-align:center; }
.card .thumb img { max-height:420px; margin:0 auto; display:block; }

/* Check list */
.checklist { list-style:none; padding-left:0; margin:8px 0; }
.checklist li { margin:6px 0; padding-left:20px; background:url(data:image/svg+xml;utf8,<svg\ xmlns=\"http://www.w3.org/2000/svg\"\ width=\"16\"\ height=\"16\"><path\ fill=\"%231f5c46\"\ d=\"M6.6\ 12.3L2.3\ 8l1.4-1.4\ 2.9\ 2.9\ 5.7-5.7L13.7\ 5z\"/></svg>) no-repeat 0 2px; }

/* Footer */
.footer { background:#0e2a20; color:#cfe0d8; padding:18px 0; font-size:13px; }
.footer a { color:#cfe0d8; text-decoration:underline; }

/* (Opcional) Mejoras en pantallas grandes */
@media (min-width: 1200px) {
  body { font-size: 18px; }
  .section { padding: 36px 0; }
}