/* ============ Base ============ */
body{
  margin:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:#f5f5f5;
  color:#222;
}

/* ============ NAV (escritorio + móvil) ============ */
/* Barra base en grid para dominar alineación */
.main-nav{
  --header-h:56px;
  position: sticky; top: 0; z-index: 1000;
  display: grid; align-items: center;
  grid-template-columns: 44px 1fr 44px;   /* [hamb][logo centrado][derecha] */
  background: #2e7d32;
  padding: .5em .5em;
  min-height: var(--header-h);
}

/* Logo centrado por defecto */
.brand{ display:flex; align-items:center; gap:.5rem; justify-self:center; }
.logo-img{ height:56px; width:auto; display:block; }
.nav-right{ justify-self:end; }

/* links en escritorio (afinados en @media desktop) */
.nav-links{ position: static; }
.main-links{ list-style: none; display:flex; gap:2em; margin:0; padding:0; }
.main-links li a{
  color:#fff; text-decoration:none;
  padding:.5em 1em; border-radius:7px; font-weight:500;
  transition: background .2s, color .2s;
}

/* ===== Hamburguesa nítida + animación a X ===== */
.nav-toggle{
  grid-column: 1; justify-self: start;
  position: relative; display: inline-block;
  width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent; cursor: pointer; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span{
  position: absolute; left: 11px; right: 11px; height: 3px;
  background: #fff; border-radius: 2px; transform-origin: center;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle span:nth-child(1){ top: 13px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 29px; }
body.drawer-open .nav-toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
body.drawer-open .nav-toggle span:nth-child(2){ opacity: 0; }
body.drawer-open .nav-toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }

/* ——— MÓVIL (≤800px) ——— */
@media (max-width:800px){
  .nav-toggle{ display:inline-block; }
  .brand{ grid-column: 2; justify-self: center; }
  .logo-img{ height:56px; } /* 38–42px a gusto */

  /* Panel bajo la barra (drawer) */
  .main-links{ display:block; }
  .nav-links{
    position: fixed; left:0; right:0;
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    background:#fff; color:#222;
    transform: translateY(-110%);
    transition: transform .35s ease;
    z-index: 1200; overflow-y: auto;
    padding-bottom: 16px;
  }
  body.drawer-open .nav-links{ transform: translateY(0); }
  body.drawer-open{ overflow: hidden; }

  /* Lista vertical estilo app */
  .main-links{ margin:8px 0 0 0; padding:0; }
  .main-links li{ list-style:none; }
  .main-links li a{
    display:flex; align-items:center; justify-content:space-between;
    color:#222; background:#fff;
    padding:14px 16px; border-bottom:1px solid #eee;
    font-size:16px; text-decoration:none;
  }
  .main-links li a::after{ content:"›"; font-size:18px; opacity:.55; }
  .main-links li a:hover{ background:#f6f6f6; }
  /* En móvil: focus sin pintar verde */
  .main-links li a:focus{
    background:#fff; color:#222;
    outline:2px solid #2e7d32; outline-offset:2px;
  }
}

/* Escritorio (≥801px): hover/focus verde, drawer desactivado */
@media (min-width:801px){
  .main-nav{ grid-template-columns: auto 1fr auto; padding: .7em 1em; }
  .brand{ justify-self:start; }
  .nav-toggle{ display:none !important; }
  .nav-links{
    position:static !important; height:auto; transform:none !important;
    background:transparent !important; padding:0; grid-column:3;
  }
  .main-links{ display:flex !important; gap:2em; padding:0; }
  .main-links li a:hover,
  .main-links li a:focus{ background:#388e3c; color:#fff; }
}

/* ============ Layout general ============ */
.container{
  max-width:1100px; margin:2em auto; background:#fff;
  border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.07);
  padding:2em 1.2em;
}

/* ============ Footer ============ */
footer{
  background:#2e7d32; color:#fff; text-align:center;
  padding:2.5em 0 1.3em 0; font-family:'Segoe UI', Arial, sans-serif;
}
.footer-row{ margin-bottom:1.1em; }
.footer-horario{ font-size:1.1em; font-weight:500; display:block; margin-bottom:.5em; }
.footer-connect-title{ display:block; font-size:1.25em; font-weight:600; margin-bottom:.8em; letter-spacing:.4px; }
.footer-social-icons{ display:flex; justify-content:center; gap:1.2em; margin-bottom:.4em; }
.footer-social-icon{
  width:38px; height:38px; border-radius:50%;
  box-shadow:0 1px 8px rgba(0,0,0,0.08);
  transition:transform .19s, box-shadow .22s;
  background:#fff; padding:7px; object-fit:contain;
}
.footer-social-icon:hover{ transform:scale(1.16); box-shadow:0 4px 16px #20b45a33; background:#e9ffe5; }
footer strong{ font-weight:700; }
.footer-copyright{ font-size:1.08em; margin-top:1em; display:block; }
.footer-phone{ display:block; margin:.8em 0 1em 0; text-align:center; font-size:1.13em; }
.footer-phone-link{ color:#fff; text-decoration:none; font-weight:600; transition:color .19s; }
.footer-phone-link:hover .footer-phone-number{ text-decoration:underline; color:#25d366; }
.footer-phone-number{ font-size:1.22em; font-weight:700; color:#fff; letter-spacing:.4px; margin-left:4px; }

/* ============ Slider ============ */
.slider{
  position: relative; max-width: 100%; height: 340px;
  margin: 0 auto 2em auto; overflow: hidden;
  border-radius: 18px; box-shadow: 0 3px 16px rgba(0,0,0,0.15);
}
.slides{ position: relative; height: 100%; }
.slide{ display:none; position:absolute; width:100%; height:100%; transition:opacity .7s; }
.slide.active{ display:block; position:relative; animation:fade .7s; }
@keyframes fade { from{opacity: .3} to{opacity:1} }
.slide img { width:100%; height:340px; object-fit:cover; border-radius:18px; }
.slide-caption{
  position:absolute; left:5%; bottom:18%; color:#fff;
  background: rgba(46,125,50,0.83); padding:1.1em 2em;
  border-radius:15px; box-shadow:0 2px 10px rgba(0,0,0,0.13); max-width:410px;
}
.prev,.next{
  cursor:pointer; position:absolute; top:50%; width:38px; height:38px; margin-top:-19px;
  color:#fff; font-weight:bold; font-size:2em; background:rgba(46,125,50,0.8);
  border-radius:50%; user-select:none; text-align:center; line-height:38px;
  transition:background .2s; z-index:2;
}
.prev:hover,.next:hover{ background:#25d366; }
.prev{ left:12px; } .next{ right:12px; }
.slider-dots{ position:absolute; width:100%; text-align:center; bottom:18px; z-index:2; }
.slider-dot{
  cursor:pointer; height:12px; width:12px; margin:0 4px; background:#eee; border-radius:50%;
  display:inline-block; transition:background .25s;
}
.slider-dot.active,.slider-dot:hover{ background:#25d366; }
@media(max-width:650px){
  .slider,.slide img{ height:200px; }
  .slide-caption{ font-size:.96em; max-width:77vw; padding:0.6em 1em; }
}

/* Móvil: ocultar flechas del slider */
@media (max-width:800px){
  .prev, .next{
    display: none !important;
  }
}

/* ============ Welcome / Services ============ */
.welcome-box.improved{
  background: rgba(255,255,255,0.93);
  border-radius: 14px; box-shadow: 0 4px 18px rgba(46,125,50,0.07);
  padding: 2.4em 2em 2em; max-width: 950px;
  margin: 34px auto 2.5em; text-align: center;
}
.welcome-box.improved h2{ color:#2e7d32; font-size:2em; font-weight:700; margin-bottom:.7em; letter-spacing:.2px; }
.welcome-box.improved p{ color:#222; font-size:1.18em; font-weight:400; margin-bottom:1.2em; line-height:1.55em; }
.welcome-slogan{ font-size:1.3em; color:#24922a; font-style:italic; font-weight:600; margin-top:.8em; margin-bottom:.2em; }

.services-section{
  background:#f7faf7; border-radius:14px; box-shadow:0 4px 18px rgba(46,125,50,0.07);
  padding: 2.4em 2em 2em; max-width:950px; margin:34px auto 2.5em; text-align:center;
}
.services-title{ text-align:center; color:#2e7d32; font-size:2em; margin-bottom:1.3em; font-weight:700; letter-spacing:.3px; }
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:2em; max-width:1100px; margin:0 auto; padding:0 1em;
}
.service-card{
  background:#fff; border-radius:12px; padding:2em 1.1em 1.6em;
  text-align:center; color:#3a5a40; box-shadow:0 2px 10px rgba(0,0,0,0.07);
  transition: box-shadow .18s, transform .17s;
}
.service-card:hover{ box-shadow:0 4px 22px rgba(46,125,50,0.13); transform:translateY(-5px) scale(1.025); }
.service-icon{ height:54px; width:54px; margin-bottom:18px; color:#25d366;
  filter: invert(38%) sepia(77%) saturate(444%) hue-rotate(70deg) brightness(90%) contrast(85%); }
.service-card h3{ color:#2e7d32; font-size:1.18em; margin:0 0 .7em; text-align:center; }
.service-card p{ font-size:1em; color:#3a5a40; line-height:1.5em; text-align:center; }

header h1{ color:#2e7d32; margin-top:0; }
ul{ padding-left:1.2em; }

@media(max-width:700px){
  .service-card{ padding:1.5em; text-align:center; }
  .service-card h3{ font-size:1.2em; }
}

/* ============ Galería ============ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);  /* desktop por defecto */
  gap:1rem; max-width:1200px; margin:2em auto;
}
.gallery-item{
  overflow:hidden; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,0.1);
  transition: transform .3s ease-in-out;
  aspect-ratio:1/1; /* thumbs cuadrados */
}
.gallery-image{
  width:100%; height:100%; object-fit:cover;
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-item:hover .gallery-image{ transform:scale(1.06); box-shadow:0 8px 16px rgba(0,0,0,0.2); }
/* Tablet/phone grande: 3 columnas */
@media(max-width:800px){
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); gap:12px; }
}
/* Phone medio: 2 columnas */
@media(max-width:560px){
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}
/* Teléfonos muy pequeños: 1 columna */
@media(max-width:360px){
  .gallery-grid{ grid-template-columns:1fr; gap:10px; }
}

/* Modal para ampliar imagen */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); justify-content:center; align-items:center; }
.modal img{ max-width:90%; max-height:90%; }

/* ============ Contacto ============ */
.contact-page{ display:flex; flex-direction:column; align-items:center; padding:2em 0; background:#f4f4f4; }
.contact-header{ width:100%; margin-bottom:12px; text-align:center; }

/* Banner "Get Your Free Estimate" (no botón) */
.free-estimate{
  display:block; background:#2e7d32; color:#fff; font-weight:700; font-size:1.15em;
  text-align:center; padding:.9em 1em; border-radius:8px; letter-spacing:.5px;
  box-shadow:0 2px 8px rgba(46,125,50,.08); cursor:default; user-select:text;
  max-width:700px; margin:0 auto 12px auto;
}

.contact-form{
  background:#fff; border-radius:12px; padding:2em 2em 1em;
  max-width:700px; width:95%; box-shadow:0 2px 20px rgba(0,0,0,0.10);
  margin:0 auto;
}
.form-row{ display:flex; gap:1.2em; margin-bottom:1.3em; }
.contact-form ::placeholder{ color:#777; opacity:1; }
.contact-form input, .contact-form select, .contact-form textarea{
  font-size:1em; padding:1em; border-radius:5px; border:1px solid #ccc;
  outline:none; width:100%; background:#fff; margin-bottom:1.1em; box-sizing:border-box;
  transition: border .18s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border:1.5px solid #2e7d32; }
.contact-form textarea{ resize:vertical; }

/* Select igual que inputs y sin desbordes */
.contact-form select{
  width:100%; min-width:0;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#fff; color:#222; border:1px solid #ccc; border-radius:5px;
  height:48px; line-height:48px; padding:0 40px 0 12px; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.contact-form select:focus{ border:1.5px solid #2e7d32; outline:none; }
.contact-form select option{ white-space:normal; word-break:break-word; }

.contact-form .btn-submit, .contact-form button[type="submit"], .contact-form input[type="submit"]{
  display:block; margin:1.6em auto 0; min-width:220px; height:54px;
  font-size:1.15em; font-weight:700; border-radius:6px; background:#2e7d32; color:#fff; border:none;
  letter-spacing:1.2px; box-shadow:0 2px 8px rgba(46,125,50,0.08);
  transition: background .18s, box-shadow .18s;
}
.contact-form .btn-submit:hover, .contact-form button[type="submit"]:hover, .contact-form input[type="submit"]:hover{
  background:#24922a; box-shadow:0 4px 16px rgba(46,125,50,0.13);
}

@media(max-width:900px){
  .contact-header{ padding:0 12px; }
  .free-estimate{ margin:0 0 12px 0; }
  .contact-form{ margin:0 12px; padding:1.2em .9em 1em; }
  .form-row{ flex-direction:column; gap:0; }
}

/* ============ Compromiso ============ */
.commitment-box{
  margin:3em auto; padding:2em; max-width:800px; text-align:center;
  background:#f7faf7; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,0.1);
}
.commitment-box blockquote{
  font-size:1.2em; color:#2e7d32; font-weight:400; line-height:1.8em;
  margin:0; padding:1.5em; font-style:italic; background:#fff;
  border-left:4px solid #388e3c; box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.commitment-box blockquote p{ margin:0; padding:0; }