@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@1,600&display=swap");

:root {
  --verde-oscuro: #072216;
  --verde-principal: #173528;
  --verde-medio: #568044;
  --verde-claro: #c9eb85;
  --crema: #f5f3eb;
  --texto: #66736d;
  --blanco: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--verde-principal);
  background: var(--crema);
  font-family: "DM Sans", sans-serif;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.boton-menu,
.boton-principal {
  min-height: 48px;
  padding: 0 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--verde-principal);
  background: var(--verde-claro);
  font-weight: 600;
  transition: transform .25s ease, background .25s ease;
}
.boton-menu:hover,
.boton-principal:hover { transform: translateY(-2px); background: var(--blanco); }

.portada {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--blanco);
  background:
    linear-gradient(90deg, rgba(7,34,22,.76), rgba(7,34,22,.40) 52%, rgba(7,34,22,.14)),
    url("Images/portadanueva2.jpg?v=10") center / cover no-repeat;
}

.menu {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  padding: 0 7%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.2);
  background: rgba(7,34,22,.08);
  backdrop-filter: blur(8px);
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { width: auto; height: 76px; object-fit: contain; }
.enlaces { display: flex; gap: 35px; align-items: center; }
.enlaces a { color: white; font-size: 17px; transition: color .25s ease; }
.enlaces a:hover { color: var(--verde-claro); }
.hamburguesa { display: none; }

.hero-layout {
  min-height: 100svh;
  padding: 125px 7% 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: clamp(45px, 7vw, 110px);
  align-items: center;
}
.contenido-portada { max-width: 790px; animation: aparecer .9s ease both; }
.etiqueta {
  margin-bottom: 24px;
  color: var(--verde-claro);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
}
h1 {
  font-size: clamp(52px, 6.3vw, 92px);
  line-height: .98;
  letter-spacing: -4px;
}
h1 em { color: var(--verde-claro); font-family: "Playfair Display", serif; font-weight: 600; }
.descripcion {
  max-width: 600px;
  margin: 28px 0;
  color: rgba(255,255,255,.84);
  font-size: 18px;
  line-height: 1.7;
}
.botones { display: flex; gap: 28px; align-items: center; }
.boton-secundario { padding-bottom: 5px; border-bottom: 1px solid white; color: white; }

.experiencia {
  position: absolute;
  right: 7%;
  bottom: 34px;
  padding: 16px 21px;
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 17px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(15px);
}
.experiencia strong { color: var(--verde-claro); font-size: 34px; }
.experiencia span { font-size: 12px; line-height: 1.4; }

.formulario-portada {
  width: 100%;
  max-width: 390px;
  justify-self: end;
  padding: 24px 26px;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 24px;
  background: rgba(7,34,22,.76);
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.formulario-etiqueta {
  color: var(--verde-claro);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
}
.formulario-portada h2 {
  margin: 0 0 6px;
  color: white;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -1px;
}
.fila-formulario,
.fila-ubicacion { display: grid; gap: 8px; }
.fila-formulario { grid-template-columns: 1fr 1fr; }
.fila-ubicacion { grid-template-columns: 1.15fr .8fr .8fr; }
.formulario-portada input,
.formulario-portada select,
.formulario-portada textarea {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  outline: none;
  color: white;
  background: rgba(255,255,255,.1);
  font-size: 11px;
}
.formulario-portada textarea { height: 50px; padding-top: 9px; resize: vertical; }
.formulario-portada input::placeholder,
.formulario-portada textarea::placeholder { color: rgba(255,255,255,.7); }
.formulario-portada select option { color: var(--verde-principal); background: white; }
.formulario-portada input:focus,
.formulario-portada select:focus,
.formulario-portada textarea:focus {
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 2px rgba(201,235,133,.12);
}
.consentimiento {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: start;
  color: rgba(255,255,255,.8);
  font-size: 9px;
  line-height: 1.25;
}
.formulario-portada input[type="checkbox"] {
  width: 13px;
  height: 13px;
  min-height: 0;
  margin-top: 1px;
  padding: 0;
  accent-color: var(--verde-claro);
}
.formulario-portada button {
  width: 100%;
  min-height: 38px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: var(--verde-principal);
  background: var(--verde-claro);
  font-weight: 600;
  cursor: pointer;
}
.formulario-portada small { color: rgba(255,255,255,.6); font-size: 9px; text-align: center; }
.estado-formulario { color: var(--verde-claro); font-size: 11px; text-align: center; }
#estimate-form:target {
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 3px rgba(201,235,133,.25), 0 25px 70px rgba(0,0,0,.3);
}

.titulo-pequeno {
  color: var(--verde-medio);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}
h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.05; letter-spacing: -2px; }
.sobre-nosotros {
  position: relative;
  padding: 120px 7%;
  display: grid;
  grid-template-columns: minmax(350px,.9fr) minmax(500px,1.1fr);
  gap: 70px;
  align-items: center;
  background: radial-gradient(circle at 5% 95%, rgba(201,235,133,.3), transparent 25%), #f4f3ec;
}
.imagen-nosotros { position: relative; min-height: 650px; }
.imagen-nosotros img { height: 650px; object-fit: cover; border-radius: 32px; box-shadow: 0 35px 80px rgba(14,49,34,.22); }
.sello-experiencia {
  position: absolute;
  right: -25px;
  bottom: 38px;
  padding: 22px 26px;
  display: flex;
  gap: 15px;
  align-items: center;
  border: 1px solid rgba(201,235,133,.45);
  border-radius: 20px;
  color: white;
  background: rgba(15,55,38,.95);
}
.sello-experiencia strong { color: var(--verde-claro); font-size: 44px; }
.sello-experiencia span { color: rgba(255,255,255,.84); font-size: 12px; line-height: 1.4; }
.contenido-nosotros {
  padding: 52px;
  border: 1px solid rgba(23,53,40,.08);
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 80px rgba(14,49,34,.12);
}
.contenido-nosotros h2 { margin: 14px 0 27px; }
.texto-nosotros { margin-bottom: 16px; color: var(--texto); font-size: 15px; line-height: 1.75; }
.beneficios-nosotros { margin: 32px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.beneficios-nosotros div {
  min-height: 105px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 17px;
  background: #edf2e5;
}
.beneficios-nosotros strong { margin-bottom: 7px; color: #315c45; font-size: 26px; }
.beneficios-nosotros span { color: var(--texto); font-size: 12px; }
.acciones-nosotros,
.acciones-contacto { display: flex; gap: 26px; align-items: center; }
.enlace-telefono { padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 600; }
.contacto { padding: 100px 7%; text-align: center; }
.contacto h2 { max-width: 800px; margin: 14px auto 35px; }
.acciones-contacto { justify-content: center; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1001px) and (max-height: 900px) {
  .hero-layout { padding-top: 105px; padding-bottom: 42px; grid-template-columns: minmax(0,1fr) 350px; }
  h1 { font-size: clamp(48px, 5.5vw, 76px); }
  .descripcion { margin: 20px 0; font-size: 16px; }
  .formulario-portada { max-width: 350px; padding: 16px 18px; gap: 5px; }
  .formulario-portada h2 { font-size: 23px; }
  .formulario-portada input,
  .formulario-portada select { height: 31px; padding: 0 9px; }
  .formulario-portada textarea { height: 40px; padding-top: 7px; }
  .formulario-portada button { min-height: 34px; }
  .consentimiento { font-size: 8px; }
  .experiencia { display: none; }
}

@media (max-width: 1000px) {
  .menu { height: 82px; padding: 0 5%; }
  .logo img { height: 58px; }
  .enlaces { display: none; }
  .hamburguesa {
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 10px;
    display: block;
    border: 0;
    border-radius: 10px;
    background: rgba(7,34,22,.78);
  }
  .hamburguesa span { width: 100%; height: 2px; display: block; margin: 5px 0; background: white; }
  .menu.menu-abierto .enlaces {
    position: absolute;
    top: 100%;
    right: 18px;
    left: 18px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 0 0 18px 18px;
    background: rgba(7,34,22,.98);
  }
  .menu.menu-abierto .enlaces a { width: 100%; padding: 15px; text-align: center; }
  .boton-menu { display: none; }
  .hero-layout { min-height: auto; padding: 125px 6% 75px; grid-template-columns: 1fr; gap: 48px; }
  .formulario-portada { max-width: 680px; justify-self: center; }
  .experiencia { display: none; }
  .sobre-nosotros { padding: 90px 6%; grid-template-columns: 1fr; gap: 45px; }
  .imagen-nosotros,
  .imagen-nosotros img { min-height: 500px; height: 500px; }
  .sello-experiencia { right: 22px; }
}

@media (max-width: 650px) {
  .menu { height: 78px; padding: 0 20px; background: rgba(7,34,22,.72); }
  .logo img { height: 52px; }
  .portada {
    background: linear-gradient(rgba(7,34,22,.72), rgba(7,34,22,.8)), url("Images/portadanueva2.jpg?v=10") center / cover no-repeat;
  }
  .hero-layout { padding: 125px 20px 60px; gap: 42px; }
  .etiqueta { margin-bottom: 17px; font-size: 10px; letter-spacing: 2px; }
  h1 { font-size: clamp(43px,12vw,56px); line-height: .98; letter-spacing: -2px; }
  .descripcion { margin: 24px 0; font-size: 16px; line-height: 1.6; }
  .botones { align-items: flex-start; flex-direction: column; gap: 20px; }
  .formulario-portada { max-width: 100%; padding: 25px 18px; gap: 9px; background: rgba(7,34,22,.92); }
  .fila-formulario,
  .fila-ubicacion { grid-template-columns: 1fr; }
  .formulario-portada input,
  .formulario-portada select { height: 49px; padding: 0 14px; font-size: 16px; }
  .formulario-portada textarea { height: 96px; padding: 13px 14px; font-size: 16px; }
  .consentimiento { font-size: 11px; line-height: 1.35; }
  .formulario-portada button { min-height: 50px; font-size: 14px; }
  .sobre-nosotros { padding: 70px 20px; }
  .imagen-nosotros,
  .imagen-nosotros img { min-height: 330px; height: 330px; }
  .sello-experiencia { right: 12px; bottom: 16px; padding: 16px 18px; }
  .contenido-nosotros { padding: 35px 20px; }
  .contenido-nosotros h2 { font-size: 38px; }
  .beneficios-nosotros { grid-template-columns: 1fr; }
  .acciones-nosotros,
  .acciones-contacto { align-items: stretch; flex-direction: column; }
  .contacto { padding: 75px 20px; }
}.campo-trampa {
  display: none !important;
}