:root{
  --green:#173b2a;        /* verde del logo */
  --green-2:#214e38;      /* verde secundario */
  --cream:#f2efe6;        /* marfil */
  --accent:#89b585;       /* acento suave */
  --text:#0e1a14;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--cream)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92vw);margin-inline:auto}

/* Header / Nav */
header{position:sticky;top:0;z-index:50;background:rgba(23,59,42,.96);backdrop-filter:saturate(120%) blur(6px);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;gap:12px;align-items:center}
.brand-logo{width:44px;height:44px;border:2px solid #90c09a;border-radius:50%;display:grid;place-items:center;background:#0f2c1f}
.brand h1{font-size:18px;margin:0;line-height:1.1}
.tag{font-size:12px;opacity:.9}
.nav a.btn{background:#fff;color:var(--green);font-weight:800;padding:10px 16px;border-radius:999px;display:inline-block}
.nav a.btn:hover{transform:translateY(-1px)}
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:#fff;opacity:.95}
.hamb{display:none}

/* Hero */
.hero{background:
  radial-gradient(1200px 400px at 50% -50%, #99c2a0 0%, transparent 60%),
  linear-gradient(180deg, var(--green) 0%, var(--green-2) 100%);
  color:#fff}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:56px 0}
.badge{display:inline-flex;gap:8px;align-items:center;background:#0f2c1f;border:1px solid #2d6c4f;padding:6px 10px;border-radius:999px;font-size:12px}
.hero h2{font-size:clamp(26px,4.5vw,46px);line-height:1.05;margin:10px 0 6px}
.hero p{opacity:.95;margin:0 0 16px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:#fff;color:var(--green);font-weight:800;padding:12px 18px;border-radius:12px}
.btn-ghost{background:transparent;border:1.5px solid #cde2cf;color:#fff;font-weight:700;padding:12px 18px;border-radius:12px}
.hero-card{background:#113223;border:1px solid #2d6c4f;border-radius:16px;padding:16px}
.hero-card ul{margin:0;padding-left:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hero-img{border-radius:18px;border:2px solid #2a5d46;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero-img img{aspect-ratio:4/5;object-fit:cover}

/* Services */
section{padding:56px 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:18px}
.sec-head h3{margin:0;font-size:clamp(22px,3.5vw,34px);color:var(--green)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid #dfe7e0;border-radius:16px;overflow:hidden}
.card .img{position:relative;overflow:hidden}
.card .img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));pointer-events:none}
.card .img img{aspect-ratio:16/10;object-fit:cover}
.card .body{padding:14px 14px 16px}
.chip{display:inline-block;font-size:12px;background:var(--cream);border:1px solid #e3eadf;padding:6px 10px;border-radius:999px;margin-bottom:8px}
.card h4{margin:4px 0 8px}
.card p{margin:0 0 10px}
details.gallery{border-top:1px dashed #e0e7e2;padding-top:12px}
details.gallery summary{cursor:pointer;font-weight:700;color:var(--green)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.thumbs img{aspect-ratio:1/1;border-radius:10px;object-fit:cover;border:1px solid #e4ece4}

/* Contact */
.contact{background:linear-gradient(180deg,#f6f4ec 0%, #eef3ee 100%)}
.contact .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:24px}
form{background:#fff;border:1px solid #dfe7e0;border-radius:16px;padding:18px}
label{font-weight:600;font-size:14px;margin-bottom:6px;display:block}
input,textarea,select{width:100%;padding:12px 12px;border:1px solid #cfe0d2;border-radius:10px;background:#fbfdfb;font-family:inherit}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.opt{border:1.5px solid #cfe0d2;background:#f8fbf8;padding:8px 12px;border-radius:999px;cursor:pointer}
.opt.active{border-color:#5d9775;background:#e6f1ea}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn-send{background:var(--green);color:#fff;padding:12px 18px;border:none;border-radius:12px;font-weight:800;cursor:pointer}
.aside{background:#113223;border:1px solid #2d6c4f;color:#dff1e3;border-radius:16px;padding:18px}
.aside h4{margin:0 0 8px}
.aside p{margin:0 0 10px}
.aside a{display:inline-block;margin-top:6px;background:#fff;color:var(--green);padding:10px 12px;border-radius:10px;font-weight:800}

/* Footer */
footer{background:var(--green);color:#fff;padding:22px 0;border-top:1px solid #2b5f47}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
.foot small{opacity:.9}

/* Floating WhatsApp */
.float-wa{position:fixed;right:14px;bottom:16px;background:#25D366;color:#0b2a1c;font-weight:800;padding:12px 14px;border-radius:999px;border:2px solid #0a3d2a;z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.float-wa:hover{transform:translateY(-1px)}

/* Responsive */
@media (max-width: 980px){
  .hero .wrap,.contact .wrap{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .menu{display:none}
  .hamb{display:block;color:#fff}
  .grid.cols-3{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .nav a.btn{display:none}
}


/* Custom logo styling */
.brand-logo {
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  padding: 0;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
/* ===== FIX para modal SMS en iOS ===== */
#smsModal {
  display: none; /* oculto por defecto */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* evita scroll */
}

#smsModal > div {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  max-height: 90vh;        /* se ajusta a pantalla */
  overflow-y: auto;        /* scroll solo interno si el texto es largo */
  text-align: center;
  box-sizing: border-box;
}
#smsModal textarea {
  width: 100%;
  height: 120px;
  resize: none;
  box-sizing: border-box;
}
#smsModal button {
  flex: 1;
  min-width: 90px;
}
/* ===== Menú móvil ===== */
.menu {
  transition: transform 0.3s ease-in-out;
}

@media (max-width: 640px){
  .menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 240px;
    background: var(--green);
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 20px;
    gap: 20px;
    transform: translateX(100%); /* oculto */
    z-index: 99;
  }
  .menu.show {
    transform: translateX(0); /* visible */
  }
  .menu a {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
  }
  .hamb {
    font-size: 26px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
  }
}