:root{
  --green: #4CAF50;
  --green-dark: #2E7D32;
  --green-verylight: #E8F5E9;
  --white: #ffffff;
  --card-border: #e8efe9;
  --ink: #2a2a2a;
  --muted: #5a6a7a;
  --mk-bg: #eaf7ee;       /* resalto suave */
  --mk-fg: #245b2a;       /* texto del resalto */
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0; overflow-x:hidden;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6; color:var(--ink);
}

body{ padding-top: 76px; }

/* Línea verde arriba */
.top-accent{
  position: fixed; top:0; left:0; width:100%; height:4px;
  background: var(--green); z-index: 1100;
}

/* ======= Navegación ======= */
nav{
  position: fixed; top:4px; left:0; width:100%;
  background: var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.9rem 2rem; z-index:1000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
nav .logo img{ height:60px; }
nav ul{ list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; }

/* Subrayado SOLO al texto, no al icono */
nav ul li a{
  color: var(--green);
  font-weight:500; font-size:0.98rem;
  display:flex; align-items:center; gap:.45rem;
  text-decoration:none; transition: color .2s ease;
}
nav ul li a span{
  text-underline-offset: 6px; text-decoration-thickness: 2px;
}
nav ul li a:hover{ color: var(--green-dark); }
nav ul li a:hover span{ text-decoration: underline; }

/* Hamburguesa */
#nav-toggle{ display:none; }
.menu-toggle{ display:none; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; }
.menu-toggle::before{ content:"☰"; font-size:1.6rem; color: var(--green); }
#nav-toggle:checked + .menu-toggle::before{ content:"✕"; color: var(--green-dark); }

/* Que se vea el título tras el scroll */
section{ scroll-margin-top: 90px; }

/* ======= Hero rotatorio (no interactivo) ======= */
.hero.hero-slider{
  position: relative; height: 70vh; min-height: 420px; overflow: hidden; background:#000;
}
.hero-slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1s ease;
}
.hero-slide.active{ opacity: 1; }

.hero-vignette{
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
  pointer-events: none;
}
.hero-content{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff; padding:0 1rem; text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.hero-content h1{ font-size:clamp(2rem, 4vw, 3rem); margin:0 0 .5rem; font-weight:600; }
.hero-sub{ font-size:clamp(1rem, 1.8vw, 1.2rem); margin:0; }

/* ======= Empresa (1 columna, compacto, resaltados inline) ======= */
#empresa{ padding: 3rem 1.5rem; background:#fff; }
#empresa h2{ text-align:center; margin:0 0 1rem; }
.empresa-text{
  max-width: 860px; margin: 0 auto;
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 1.2rem 1.4rem; box-shadow: 0 6px 18px rgba(0,0,0,.05);
  color:#3a4756; line-height:1.75;
}
.empresa-text p{ margin:.6rem 0; }
.empresa-text .last{ margin-bottom:.2rem; }

/* resaltados */
.mk{
  background: var(--mk-bg); color: var(--mk-fg);
  padding:.05rem .35rem; border-radius:.4rem;
}
.mk-strong{ font-weight:600; }
.mk-key{
  background:#dff3e4; color:#1e6a22; border:1px solid #cde9d6;
  padding:.05rem .4rem;
}

/* ======= Servicios ======= */
#servicios{ padding: 3.5rem 2rem; background: var(--green-verylight); text-align:center; }
#servicios h2{ margin:0 0 1.2rem; }
.services-grid{ display:grid; gap:2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.service-card{
  background:#fff; padding:0 0 1.2rem; border-radius:14px;
  border:1px solid var(--card-border); box-shadow: 0 6px 18px rgba(0,0,0,0.07);
  text-align:left; overflow:hidden;
}
.service-img{ width:100%; height:160px; object-fit: cover; display:block; }
.service-card i{ font-size:1.35rem; color:var(--green); display:inline-block; margin: 1rem 1.2rem .2rem; }
.service-card h3{ color: var(--green-dark); margin:.2rem 1.2rem .4rem; font-size:1.05rem; }
.service-card p{ margin:0 1.2rem; color:#445568; }

/* ======= Contacto ======= */
#contacto{ padding: 3.5rem 2rem; background:#fff; }
#contacto h2{ text-align:center; margin-bottom:1.5rem; }
.contact-grid{
  display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.contact-card{
  background:#fff; border:1px solid var(--card-border);
  border-radius:14px; padding:1.2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.contact-card h3{ margin:.6rem 0 .3rem; color: var(--green-dark); font-size:1.1rem; }
.contact-card i{ font-size:1.4rem; color: var(--green); }
.contact-card a{ color: var(--green); text-decoration:none; font-weight:600; }
.contact-card a:hover{ color: var(--green-dark); text-decoration:underline; }

/* Mapas */
.maps-grid{ margin-top: 1.5rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.map-card{
  background:#fff; border:1px solid var(--card-border); border-radius:14px; padding:1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.map-card h3{ margin:.2rem 0 .5rem; color: var(--green-dark); font-size: 1.05rem; display:flex; align-items:center; gap:.5rem; }
.map-card .map-address{ margin:0 0 .8rem; color:#465466; font-size:.95rem; }
.map-frame{ position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; border-radius: 12px; }
.map-frame iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ======= Recogida ======= */
#recogida{ padding: 3.5rem 2rem; background:#fff; }
#recogida h2{ text-align:center; margin-bottom:1.2rem; }
.recogida-form{
  max-width: 1000px; margin: 0 auto; background:#fff; border:1px solid var(--card-border);
  border-radius:14px; padding:1.2rem 1.4rem; box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.form-grid{ display:grid; gap:1rem; grid-template-columns: repeat(2, 1fr); }
.field-span2{ grid-column: span 2; }
.form-field label{ display:block; font-weight:600; margin-bottom:.3rem; color:#2e3a48; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:.8rem 1rem; border:1px solid #d9d9d9; border-radius:10px; font:inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(76,175,80,0.12);
}
.form-check label{ display:flex; align-items:center; gap:.5rem; color:#3a4756; }
.form-actions{ margin-top: .6rem; display:flex; justify-content:flex-end; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; background: var(--green); color:#fff; border:1px solid var(--green);
  padding:.9rem 1.1rem; border-radius:10px; font-weight:600; cursor:pointer; transition: background .2s ease, border-color .2s ease, transform .05s ease;
}
.btn:hover{ background: var(--green-dark); border-color: var(--green-dark); }
.btn:active{ transform: translateY(1px); }

/* link estilo botón en texto */
.link-button{
  background:none; border:0; padding:0; margin:0 .1rem;
  color: var(--green); font-weight:600; cursor:pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ======= Modal ======= */
.modal[aria-hidden="true"]{ display:none; }
.modal{
  position: fixed; inset:0; z-index: 1200; display:block;
}
.modal__overlay{
  position:absolute; inset:0; background: rgba(0,0,0,.4);
}
.modal__dialog{
  position: relative; z-index:1; width:min(720px, 92%); margin: 6vh auto 0 auto;
  background:#fff; border-radius:14px; border:1px solid var(--card-border);
  box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow:hidden;
}
.modal__header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border-bottom:1px solid var(--card-border);
}
.modal__header h3{ margin:0; font-size:1.1rem; color:#21343a; }
.modal__body{ padding:1rem 1.2rem; color:#3a4756; }
.modal__body p{ margin:.6rem 0; }
.modal__footer{ padding: .9rem 1.2rem; display:flex; justify-content:flex-end; gap:.6rem; border-top:1px solid var(--card-border); }
.modal__close{
  background:transparent; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:#6b7785;
}
.btn-secondary{
  background:#eef3f0; color:#223; border:1px solid #e0e7e3; border-radius:10px; padding:.7rem 1rem; cursor:pointer;
}
.btn-secondary:hover{ background:#e6eee9; }

/* ======= WhatsApp ======= */
.whatsapp-button {
  position: fixed; bottom: 20px; right: 20px; background: #25d366; color: #fff;
  width: 60px; height: 60px; aspect-ratio: 1/1; border-radius: 50%;
  display:flex; align-items:center; justify-content:center; font-size:2rem; box-shadow:0 4px 10px rgba(0,0,0,0.3);
  text-decoration: none !important;
}
.whatsapp-button:hover{ background:#20b954; }

/* ======= Footer ======= */
footer{ background: var(--green); color:#fff; text-align:center; padding:1.2rem; margin-top:2rem; }

/* ======= Responsive ======= */
@media (max-width: 900px){
  .empresa-text{ padding:1rem 1.1rem; }
}

@media (max-width: 768px){
  .menu-toggle{ display:flex; }
  nav ul{ display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.08); }
  #nav-toggle:checked ~ ul{ display:flex; }
  nav ul li a{ padding:1rem; }

  .hero.hero-slider{ height: 60vh; min-height: 360px; }
  .form-grid{ grid-template-columns: 1fr; }
  .field-span2{ grid-column: span 1; }
}

@media (max-width: 480px){
  .hero.hero-slider{ height: 56vh; min-height: 320px; }
  .whatsapp-button { width: 50px; height: 50px; font-size: 1.6rem; }
}

/* ======= Social en navbar (siempre visibles) ======= */
.nav-social {
  display: flex;
  gap: 0.6rem;
  margin-left: 1rem;
}
.nav-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.nav-social a.linkedin { background: #0A66C2; }  /* LinkedIn */
.nav-social a.facebook { background: #1877F2; }  /* Facebook */
.nav-social a:hover { transform: scale(1.1); box-shadow: 0 5px 12px rgba(0,0,0,0.18); }
.nav-social a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(24,119,242,0.3); }

/* Responsive */
@media (max-width: 768px){
  .nav-social { margin-left: .5rem; gap: .5rem; }
  .nav-social a { width: 32px; height: 32px; font-size: .95rem; }
}
@media (max-width: 480px){
  .nav-social a { width: 30px; height: 30px; font-size: .9rem; }
}