:root{--tinta:#16301C;--verde:#1E8E3E;--verde-osc:#14702F;--hoja:#E8F3EA;--papel:#fff;--gris:#4D5F46}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 24px}
header{padding:22px 0}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px 16px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:20px;letter-spacing:.06em;font-family:"Arial Black","Segoe UI Black",Impact,system-ui,sans-serif}
.marca svg{width:22px;height:28px;fill:var(--verde)}
nav{display:flex;flex-wrap:wrap;gap:4px 22px;justify-content:flex-end}nav a{font-weight:600;text-decoration:none;padding:8px 2px;border-bottom:3px solid transparent}
nav a:hover,nav a[aria-current]{border-color:var(--verde)}
main{flex:1}
.hero{padding:clamp(40px,9vw,110px) 0 clamp(40px,7vw,80px)}
.hero h1{margin:0;font:900 clamp(44px,13vw,128px)/.95 "Arial Black","Segoe UI Black",Impact,system-ui,sans-serif;letter-spacing:.02em;color:var(--tinta)}
.hero .lema{margin:22px 0 0;font-size:clamp(20px,3.2vw,28px);color:var(--verde-osc);font-weight:600;max-width:24em}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:8px;font-weight:700;font-size:18px;text-decoration:none;border:2px solid var(--verde);transition:background .15s,color .15s}
.btn.pri{background:var(--verde);color:#fff}
.btn.pri:hover{background:var(--verde-osc);border-color:var(--verde-osc)}
.btn.sec{color:var(--verde-osc)}
.btn.sec:hover{background:var(--hoja)}
.btn svg{width:22px;height:22px;fill:currentColor}
.franja{background:var(--tinta);color:#fff;padding:clamp(36px,6vw,64px) 0}
.franja p{margin:0;font-size:clamp(22px,3.6vw,34px);font-weight:700;max-width:26em;line-height:1.25}
.franja span{color:#7BD28F}
.contacto{padding:clamp(36px,7vw,80px) 0}
.contacto h1{margin:0 0 8px;font-size:clamp(32px,6vw,52px);line-height:1.1}
.contacto .sub{margin:0 0 32px;color:var(--gris)}
.datos{background:var(--hoja);border-left:6px solid var(--verde);border-radius:0 10px 10px 0;padding:26px 28px;margin:0 0 30px;max-width:30em}
.datos dt{font-size:15px;color:var(--gris);margin:0}
.datos dd{margin:0 0 14px;font-size:22px;font-weight:700}
.datos dd:last-child{margin-bottom:0}
footer{border-top:1px solid #D5E3D8;padding:22px 0;color:var(--gris);font-size:15px}
@media (max-width:520px){.btn{width:100%;justify-content:center}}

.hero{position:relative;background:var(--tinta);overflow:hidden;padding:0}
.hero img{display:block;width:100%;height:auto}
.hero .txt{padding:34px 24px 22px;color:#fff}
.hero h1{margin:0;font:900 clamp(40px,12vw,84px)/1 "Arial Black","Segoe UI Black",Impact,system-ui,sans-serif;letter-spacing:.02em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero .lema{margin:12px 0 0;font-size:clamp(18px,2.4vw,24px);font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero .acciones{margin-top:20px}
.btn.blanco{color:#fff;border-color:#fff}.btn.blanco:hover{background:rgba(255,255,255,.18)}
@media(min-width:760px){.hero .txt{position:absolute;left:0;right:0;top:0;padding-top:clamp(20px,4.5vw,64px)}}
.texto p{max-width:38em;margin:0 0 1.1em}
.texto h1{margin-bottom:24px}
.form{display:grid;gap:6px;max-width:30em}
.form label{font-weight:700;margin-top:12px}
.form select,.form input{font:inherit;padding:13px 14px;border:2px solid #B9CDBD;border-radius:8px;background:#fff;color:var(--tinta);width:100%}
.form select:focus,.form input:focus{border-color:var(--verde);outline:none}
.form .btn{margin-top:22px;justify-content:center;cursor:pointer;font-family:inherit}
.hp{position:absolute!important;left:-9999px;width:1px!important;height:1px;opacity:0}
#msg{margin:10px 0 0;font-weight:600;color:var(--verde-osc);min-height:1.5em}
.tabla{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:16px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #D5E3D8;white-space:nowrap}
th{background:var(--hoja)}
