/* Variables */
:root{
  --brand-1:#1E8F4A;
  --brand-2:#0f6a34;
  --accent:#0f2b2a;
  --muted:#617075;
  --max-width:1200px;
  --radius:12px;
  --gap:18px;
  --text:#072;
}

/* Reset/utility */
body{ font-family:Inter, Arial, Helvetica, sans-serif;color:#072;background:#f7f9f8;line-height:1.45; }
main{ max-width:var(--max-width); margin:28px auto;padding:0 16px; }

/* HERO (fondo integrado con SVG de /images/ng-main.svg) */
.hero{

  position:relative;
  padding:48px 0;
  border-radius:16px;
  overflow:hidden;
  /* degradado más transparente para dejar ver mejor la ilustración */
  background-image:
    linear-gradient(180deg, rgba(242,252,246,0.56), rgba(230,249,238,0.56)),
    url('/images/ng-main.svg');
  background-repeat: no-repeat, no-repeat;
  background-position: center left, right center;
  background-size: cover, 48% auto;
  background-blend-mode: normal;

  /* borde negro de 1px alrededor del contenedor */
  border: 1px solid #000;
}

/* decorative shape — más sutil para no tapar la imagen */
.hero::before{
  content:"";
  position:absolute;
  right:6%;
  top:-6%;
  width:55%;
  height:130%;
  background: radial-gradient(circle at 30% 30%, rgba(30,143,74,0.05), transparent 35%),
              radial-gradient(circle at 70% 70%, rgba(15,106,52,0.04), transparent 25%);
  transform: rotate(8deg);
  pointer-events:none;
  z-index:0;
  filter: blur(8px);
  opacity:0.65;
}

/* layout inside hero */
.hero-inner{
  position:relative; /* above decorative pseudo-elements */
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px;
  z-index:1;
}

/* ensure text sits on top */
.hero-copy{ max-width:64ch; }
.hero-copy h1{ font-size:32px; margin:0 0 12px; color:var(--brand-2); }
.hero-copy p{ margin:0 0 18px; color:var(--muted); font-size:18px; }

/* Button: .btn-outline styling and hover */
.btn-outline{
  display:inline-block;
  padding:10px 18px;
  border-radius:10px;
  border:2px solid var(--brand-2);
  color:var(--brand-2);
  background:transparent;
  text-decoration:none;
  font-weight:700;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.btn-outline:hover,
.btn-outline:focus{
  background: var(--brand-2);
  color: #fff;
  transform: translateY(-3px);
  outline: none;
  box-shadow: 0 8px 20px rgba(15,106,52,0.12);
}

/* specific style for the button inside the hero section */
.hero .btn-outline{
	background: #ffffff;
	color: var(--brand-2);
	border-color: var(--brand-2);
}

/* Estilos para el botón "Enviar Mensaje" (.btn-primary) */
.btn-primary{
	display:inline-block;
	padding:12px 20px;
	border-radius:12px;
	background: linear-gradient(180deg, var(--brand-2), var(--brand-1));
	color:#fff;
	font-weight:800;
	text-decoration:none;
	border:0;
	cursor:pointer;
	box-shadow: 0 8px 24px rgba(15,106,52,0.12);
	transition: transform .14s ease, box-shadow .14s ease, opacity .12s ease;
}

/* Hover / focus */
.btn-primary:hover,
.btn-primary:focus{
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(15,106,52,0.18);
	outline: none;
}

/* Active (presionar) */
.btn-primary:active{
	transform: translateY(-1px) scale(.997);
	box-shadow: 0 8px 20px rgba(15,106,52,0.12);
}

/* Disabled */
.btn-primary[disabled],
.btn-primary:disabled{
	opacity:0.6;
	cursor:not-allowed;
	box-shadow:none;
}

/* En el formulario, que ocupe todo el ancho en móviles para mejor usabilidad */
@media (max-width:720px){
	.contact-form .form-actions .btn-primary,
	.btn-primary{
		display:block;
		width:100%;
		padding:12px 16px;
		border-radius:20px;
	}
}

/* hide any leftover .hero-media image */
.hero-media{ display:none; }

/* Services */
.section{ padding:40px 0; }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.service{ background:#fff;border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(12,30,23,0.06); text-align:center; }
.service-icon{ font-size:28px;color:var(--brand-2); margin-bottom:10px; }

/* News */
.news-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.news-card{ background:#fff;padding:14px;border-radius:10px; box-shadow:0 6px 18px rgba(12,30,23,0.05); }
.news-card h3{ margin:6px 0;color:var(--accent); }
.news-card p{ color:var(--muted); font-size:14px; }
.read-more{ color:var(--brand-2); text-decoration:none; font-weight:700; }

/* Map */
.map-section .map-frame{ background:#e9f7ef;border-radius:10px;overflow:hidden;padding:6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }

/* Contact form */
.contact-form{ background:#fff;border-radius:12px;padding:18px; box-shadow:0 6px 20px rgba(12,30,23,0.06); margin-bottom:40px; }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
label{ display:block; font-size:13px; color:var(--muted); }
input[type="text"], input[type="email"], textarea{ width:100%; padding:10px;border:1px solid #e4ece6;border-radius:8px; font-size:14px; }
label.full{ grid-column:1/-1; }
.form-actions{ margin-top:12px; display:flex; gap:12px; align-items:center; }

/* Footer styles kept minimal */
.site-footer{ margin-top:28px; }

/* Responsive */
@media (max-width:1024px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .news-list{ grid-template-columns:repeat(2,1fr); }
  .hero-copy h1{ font-size:28px; }
}
@media (max-width:720px){
	/* hero: imagen más amplia, overlay más opaco y desplazada un poco hacia arriba */
	.hero{
		/* degradado más opaco para oscurecer la ilustración en móvil */
		background-image:
			linear-gradient(180deg, rgba(242,252,246,0.86), rgba(230,249,238,0.86)),
			url('/images/ng-main.svg');
		/* mover la imagen un poco más arriba para mostrar la parte relevante */
		background-position: center top, center 30%;
		/* ampliar la imagen en móvil */
		background-size: cover, 160% auto;
		padding:16px 12px;
		border-radius:20px;
        border: 1px solid #000;
	}

	/* ocultar decoraciones que puedan tapar la imagen */
	.hero::before{ display:none; }
	.hero::after{ display:none; }

	/* ajustes tipográficos para mantener legibilidad */
	.hero-copy h1{ font-size:18px; line-height:1.12; }
	.hero-copy p{ font-size:14px; }

	/* CTA y espaciado */
	.hero-cta{ margin-top:12px; }
	.btn-outline{ padding:10px 14px; }

	/* Presentar servicios y noticias en una sola columna en móvil */
	.services-grid{ grid-template-columns: 1fr; gap:16px; }
	.news-list{ grid-template-columns: 1fr; gap:14px; }

	/* footer/mobile rules mantenidas */
	.sf-inner{ display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; }
	.sf-left { display:none !important; }
	.sf-center { display:none !important; }
	.sf-right{ width:100%; order:1; justify-self:center; text-align:center; }
	.site-footer{ padding:20px 12px; }
	.sf-contact p{ justify-content:center; }
	.sf-social{ display:flex !important; justify-content:center; gap:10px; margin-top:12px; }
}

/* small enhancements */
.muted{ color:var(--muted); font-size:14px; }

/* Modal de envío */
.send-modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:9999;
	pointer-events:none;
	opacity:0;
	transition: opacity .22s ease;
}
.send-modal[aria-hidden="false"]{ opacity:1; pointer-events:auto; }
.send-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.36); backdrop-filter: blur(2px); }

/* box */
.send-modal-box{
	position:relative;
	background:#fff;
	color:#0b2b27;
	padding:18px 20px;
	border-radius:12px;
	min-width:260px;
	max-width:92%;
	text-align:center;
	transform: translateY(-10px) scale(.98);
	opacity:0;
	transition: transform .32s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
	box-shadow: 0 18px 50px rgba(0,0,0,0.18);
}
.send-modal[aria-hidden="false"] .send-modal-box{
	transform: translateY(0) scale(1);
	opacity:1;
}

/* visual container */
.send-modal-visual{ height:78px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }

/* CHECK animation (success) */
.checkmark{ width:72px; height:72px; display:none; }
.checkmark-circle{
	stroke:#0f6a34;
	stroke-width:2.5;
	stroke-dasharray:160;
	stroke-dashoffset:160;
	fill:none;
}
.checkmark-check{
	stroke:#0f6a34;
	stroke-width:4;
	stroke-dasharray:60;
	stroke-dashoffset:60;
	stroke-linecap:round;
	stroke-linejoin:round;
	fill:none;
}

/* X animation (error) */
.xmark{ width:72px; height:72px; display:none; }
.xmark-circle{
	stroke:#a30000;
	stroke-width:2.5;
	stroke-dasharray:160;
	stroke-dashoffset:160;
	fill:none;
}
.xmark-line{
	stroke:#a30000;
	stroke-width:4;
	stroke-dasharray:48;
	stroke-dashoffset:48;
	stroke-linecap:round;
}

/* draw keyframes */
@keyframes draw {
	to{ stroke-dashoffset:0; }
}
@keyframes pop {
	0%{ transform: scale(.8); opacity:0; }
	60%{ transform: scale(1.06); opacity:1; }
	100%{ transform: scale(1); opacity:1; }
}

/* state classes: success / error */
.send-modal.success .checkmark{ display:block; animation: pop .36s cubic-bezier(.2,.9,.2,1) both; }
.send-modal.success .checkmark-circle{ animation: draw .44s ease forwards; }
.send-modal.success .checkmark-check{ animation: draw .36s .42s ease forwards; }

.send-modal.error .xmark{ display:block; animation: pop .36s cubic-bezier(.2,.9,.2,1) both; }
.send-modal.error .xmark-circle{ animation: draw .44s ease forwards; }
.send-modal.error .xmark-line{ animation: draw .36s .22s ease forwards; }

/* title / text */
.send-modal-box h3{ margin:6px 0 6px; font-size:18px; }
.send-modal-box p{ margin:0; color:var(--muted); font-size:14px; }

/* small: make modal full width with padding */
@media (max-width:420px){
	.send-modal-box{ margin:0 12px; width:auto; }
}

/* ---------------- end modal styles ---------------- */