/* =========================================================
   INGEM — Home "fresca" (solo index.html)
   Se carga después de styles.css y sobrescribe lo necesario
   ========================================================= */

.home {
  --bosque: #14532d;
  --bosque-oscuro: #0d3522;
  --hoja: #5fb84a;
  --lima: #94c727;
  --menta: #ecf8ef;
  --agua: #1d5ca8;
  --cielo: #e6f2fc;
  --sol: #ffcf4d;
  --arena: #fff5df;
  --tierra: #f8ede2;
  --turquesa: #e0f5f0;
  --tinta: #183328;
  --gris-texto: #4f6259;
  --manuscrita: 'Caveat', cursive;
  color: var(--tinta);
  overflow-x: hidden;
}

.home h1, .home h2, .home h3, .home h4 { color: var(--tinta); }
.home p { color: var(--gris-texto); }

/* Botones redondeados y amigables */
.home .btn { border-radius: 999px; padding: 14px 26px; }
.home .btn-primario { background: var(--lima); color: var(--bosque-oscuro); box-shadow: 0 10px 24px -10px rgba(120, 169, 31, .8); }
.home .btn-primario:hover { background: #86b91f; }
.home .btn-verde { background: var(--bosque); color: #fff; }
.home .btn-verde:hover { background: var(--bosque-oscuro); transform: translateY(-1px); }
.home .btn-suave { background: #fff; color: var(--bosque); border-color: #d6ead9; }
.home .btn-suave:hover { border-color: var(--hoja); }
.home .btn-blanco { background: #fff; color: var(--bosque); }
.home .btn-blanco:hover { transform: translateY(-2px); }
.home .btn-borde-blanco { border-color: rgba(255,255,255,.7); color: #fff; }
.home .btn-borde-blanco:hover { background: rgba(255,255,255,.12); }
.btn svg { width: 18px; height: 18px; }

.manuscrita { font-family: var(--manuscrita); font-weight: 700; color: var(--hoja); }

/* Barra superior y header */
.home .barra-superior { background: var(--bosque-oscuro); color: #cfe8d6; }
.home .barra-superior a { color: #cfe8d6; }
.home .barra-superior .redes a:hover { color: var(--lima); }
.home header.principal { border-bottom: none; box-shadow: 0 6px 24px -18px rgba(20, 83, 45, .5); }
.home .nav-links a:hover { color: var(--bosque); border-color: var(--lima); }
.home .nav-cta .btn-sm { padding: 10px 20px; }
/* En celular la barra de contacto ocupaba media cabecera fija: se oculta */
@media (max-width: 600px) {
  .home .barra-superior { display: none; }
  .home .nav { padding: 10px 0; }
  .home .nav .logo img { height: 36px; }
}

/* Etiqueta tipo "pill" */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #d6ead9; color: var(--bosque);
  font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px -12px rgba(20, 83, 45, .6);
}
.pill svg { width: 16px; height: 16px; stroke: var(--hoja); }

.titulo-seccion { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.titulo-seccion h2 { font-size: 38px; }
.titulo-seccion .manuscrita { font-size: 30px; display: block; margin-top: -6px; }
.home .eyebrow { color: var(--hoja); }
@media (max-width: 768px) { .titulo-seccion h2 { font-size: 28px; } }

/* =================== HERO =================== */
.hero-fresca {
  position: relative;
  padding: 64px 0 64px;
  background: linear-gradient(180deg, #f1faf2 0%, #f7fcf8 60%, #ffffff 100%);
  overflow: hidden;
}
.hero-fresca::before, .hero-fresca::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0;
}
.hero-fresca::before { width: 420px; height: 420px; background: rgba(148, 199, 39, .22); top: -120px; left: -140px; }
.hero-fresca::after { width: 360px; height: 360px; background: rgba(29, 92, 168, .12); top: 22%; right: -180px; }

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
}
.hero-grid > * { min-width: 0; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

.hero-fresca h1 { font-size: 56px; line-height: 1.1; margin: 22px 0 20px; letter-spacing: -0.02em; }
@media (max-width: 768px) { .hero-fresca h1 { font-size: 38px; } }
@media (max-width: 420px) {
  /* escala con el ancho para que "El planeta también." quepa en una línea (320px) */
  .hero-fresca h1 { font-size: clamp(25px, 8vw, 31px); }
  .hero-fresca .lead { font-size: 16px; }
  .hc-3 { display: none; }
}

.subrayado { position: relative; color: var(--bosque); white-space: nowrap; display: inline-block; }
.subrayado svg {
  position: absolute; left: -4px; right: -4px; bottom: -12px;
  width: calc(100% + 8px); height: 18px; overflow: visible;
}
.subrayado svg path {
  stroke: var(--lima); stroke-width: 7; fill: none; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: trazar 1.4s .5s ease forwards;
}
@keyframes trazar { to { stroke-dashoffset: 0; } }

.hero-fresca .lead { font-size: 18px; max-width: 540px; }
.hero-acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

.hero-confianza {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 36px; font-size: 14px; color: var(--gris-texto);
}
.hero-confianza div { display: flex; align-items: center; gap: 8px; }
.hero-confianza svg { width: 20px; height: 20px; stroke: var(--hoja); flex: none; }
.hero-confianza strong { color: var(--tinta); }

/* Visual del hero */
.hero-visual { position: relative; max-width: 560px; width: 100%; margin: 0 auto; }
.blob-marco {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(20, 83, 45, .55);
  animation: respirar 16s ease-in-out infinite;
  background: #cfe9f7;
}
/* Safari iOS < 15 no soporta aspect-ratio: sin esto la ilustración colapsa */
@supports not (aspect-ratio: 1 / 1) {
  .blob-marco { height: 0; padding-bottom: 100%; }
  .blob-marco svg { position: absolute; inset: 0; top: 0; left: 0; }
  .foto-equipo .marco { position: relative; height: 0; padding-bottom: 111%; }
  .foto-equipo .marco img { position: absolute; top: 0; left: 0; }
}
.blob-marco svg { width: 100%; height: 100%; display: block; }
@keyframes respirar {
  0%, 100% { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; }
  33% { border-radius: 55% 45% 40% 60% / 55% 55% 45% 45%; }
  66% { border-radius: 48% 52% 60% 40% / 42% 60% 40% 58%; }
}

.nube { animation: deriva 38s linear infinite; }
.nube-2 { animation-duration: 52s; animation-delay: -20s; }
@keyframes deriva { from { transform: translateX(-160px); } to { transform: translateX(680px); } }
.sol-halo { transform-origin: 455px 140px; animation: pulso 5s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.12); opacity: .15; } }
.brillo-rio { stroke-dasharray: 18 26; animation: fluir 6s linear infinite; }
@keyframes fluir { to { stroke-dashoffset: -220; } }

.tarjeta-flotante {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 18px 40px -18px rgba(20, 83, 45, .45);
  animation: flotar 6s ease-in-out infinite;
}
.tarjeta-flotante .ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.tarjeta-flotante .ic svg { width: 22px; height: 22px; }
.tarjeta-flotante strong { display: block; font-size: 18px; line-height: 1.1; color: var(--tinta); }
.tarjeta-flotante span { font-size: 12.5px; color: var(--gris-texto); }
.tf-1 { top: 6%; left: -8%; }
.tf-1 .ic { background: var(--menta); } .tf-1 .ic svg { stroke: var(--hoja); }
.tf-2 { bottom: 14%; right: -8%; animation-delay: -2s; }
.tf-2 .ic { background: var(--cielo); } .tf-2 .ic svg { stroke: var(--agua); }
.tf-3 { bottom: -3%; left: 10%; animation-delay: -4s; padding: 10px 16px; }
.tf-3 .ic { background: var(--arena); width: 34px; height: 34px; } .tf-3 .ic svg { stroke: #d99a00; width: 18px; height: 18px; }
.tf-3 strong { font-size: 14px; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 600px) {
  .tf-1 { left: -2%; } .tf-2 { right: -2%; }
  .tarjeta-flotante { padding: 9px 12px; }
  .tarjeta-flotante .ic { width: 34px; height: 34px; }
  .tarjeta-flotante strong { font-size: 15px; }
}

.hoja-cae { position: absolute; z-index: 0; width: 26px; opacity: .7; animation: mecer 7s ease-in-out infinite; }
.hoja-cae path { fill: var(--lima); }
.hc-1 { top: 6%; left: 49%; }
@media (max-width: 960px) { .hc-1 { display: none; } }
.hc-2 { top: 72%; left: 3%; width: 20px; animation-delay: -3s; }
.hc-3 { top: 10%; right: 4%; width: 18px; animation-delay: -5s; }
.hc-3 path { fill: var(--hoja); }
@keyframes mecer { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(14px) rotate(14deg); } }

/* Olas separadoras */
.ola { display: block; width: 100%; height: 70px; margin-bottom: -1px; }
@media (max-width: 768px) { .ola { height: 40px; } }

/* =================== SERVICIOS (BENTO) =================== */
.servicios-fresca { background: var(--menta); padding-top: 70px; }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 960px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } }

.tile {
  position: relative; overflow: hidden;
  border-radius: 28px; padding: 32px 30px 28px;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(20, 83, 45, .55); }
.tile-grande { grid-column: span 2; }
@media (max-width: 640px) { .tile-grande { grid-column: span 1; } }

.tile .ic {
  width: 58px; height: 58px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.tile .ic svg { width: 28px; height: 28px; }
.tile h3 { font-size: 21px; margin-bottom: 10px; }
.tile p { font-size: 15px; margin-bottom: 18px; }
.tile .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tile .chips a {
  font-size: 12.5px; font-weight: 500;
  background: rgba(255,255,255,.75); color: var(--tinta);
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(24, 51, 40, .08);
  transition: all .2s ease;
}
.tile .chips a:hover { background: #fff; border-color: currentColor; }
.tile .explorar { margin-top: auto; font-weight: 600; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.tile .explorar svg { width: 18px; height: 18px; transition: transform .2s ease; }
.tile:hover .explorar svg { transform: translateX(4px); }
.tile .deco { position: absolute; right: -30px; bottom: -30px; width: 170px; opacity: .5; pointer-events: none; }

.t-hoja { background: #dff3d4; } .t-hoja .ic { background: #fff; } .t-hoja .ic svg { stroke: #3d9a2b; } .t-hoja .explorar { color: #2f7d20; }
.t-agua { background: #dcecfb; } .t-agua .ic { background: #fff; } .t-agua .ic svg { stroke: var(--agua); } .t-agua .explorar { color: var(--agua); }
.t-sol { background: #ffefc7; } .t-sol .ic { background: #fff; } .t-sol .ic svg { stroke: #c98a00; } .t-sol .explorar { color: #a06d00; }
.t-turquesa { background: #d3f1ea; } .t-turquesa .ic { background: #fff; } .t-turquesa .ic svg { stroke: #16876f; } .t-turquesa .explorar { color: #11705c; }
.t-tierra { background: #f5e4d3; } .t-tierra .ic { background: #fff; } .t-tierra .ic svg { stroke: #a8622a; } .t-tierra .explorar { color: #8c4f1e; }

/* =================== RUTA DE TRABAJO =================== */
.ruta-seccion { background: #fff; }
.ruta { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.ruta-linea { position: absolute; top: 20px; left: 10%; width: 80%; height: 60px; z-index: 0; }
.ruta-linea path { fill: none; stroke: #b9dea8; stroke-width: 3; stroke-dasharray: 8 10; }
.paso-ruta { position: relative; z-index: 1; text-align: center; padding: 0 6px; }
.paso-ruta .circulo {
  width: 96px; height: 96px; margin: 0 auto 20px;
  border-radius: 50%; background: #fff;
  border: 3px solid var(--menta);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 16px 34px -20px rgba(20, 83, 45, .55);
  transition: transform .3s ease;
}
.paso-ruta:hover .circulo { transform: scale(1.06) rotate(-4deg); }
.paso-ruta .circulo svg { width: 36px; height: 36px; stroke: var(--bosque); }
.paso-ruta .num {
  position: absolute; top: -4px; right: -4px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--lima); color: var(--bosque-oscuro);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.paso-ruta h3 { font-size: 18px; margin-bottom: 8px; }
.paso-ruta p { font-size: 14.5px; }
@media (max-width: 860px) {
  .ruta { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ruta-linea { display: none; }
}
@media (max-width: 480px) { .ruta { grid-template-columns: 1fr; } }

/* =================== IMPACTO (CIFRAS) =================== */
.impacto {
  position: relative;
  background: var(--bosque);
  color: #fff;
  padding: 56px 0 150px;
  overflow: hidden;
}
.impacto .titulo-seccion h2 { color: #fff; }
.impacto .titulo-seccion .manuscrita { color: var(--lima); }
.impacto .eyebrow { color: #b8e07a; }
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; }
@media (max-width: 860px) { .cifras { grid-template-columns: 1fr 1fr; } }
.cifra-fresca {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px; padding: 28px 24px; text-align: center;
  backdrop-filter: blur(4px);
}
.cifra-fresca .n { font-size: 50px; font-weight: 700; line-height: 1; color: #fff; }
.cifra-fresca .n small { font-size: 30px; color: var(--lima); }
.cifra-fresca .t { margin-top: 10px; font-size: 14.5px; color: #cfe8d6; }
.montanas { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 150px; z-index: 0; }

/* =================== POR QUÉ INGEM =================== */
.porque { background: #fff; }
.porque-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .porque-grid { grid-template-columns: 1fr; gap: 40px; } }
.foto-equipo { position: relative; max-width: 480px; margin: 0 auto; isolation: isolate; }
.foto-equipo .marco {
  border-radius: 58% 42% 48% 52% / 44% 56% 44% 56%;
  overflow: hidden; aspect-ratio: 9 / 10;
  box-shadow: 0 30px 60px -34px rgba(20, 83, 45, .6);
}
.foto-equipo .marco img { width: 100%; height: 100%; object-fit: cover; }
.foto-equipo .circulo-deco {
  position: absolute; width: 130px; height: 130px; border-radius: 50%;
  background: var(--sol); opacity: .85; top: -18px; right: 6%; z-index: -1;
}
.nota-mano {
  position: absolute; bottom: 6%; left: -4%;
  font-family: var(--manuscrita); font-size: 24px; color: var(--bosque);
  background: #fff; padding: 8px 16px; border-radius: 16px;
  transform: rotate(-5deg);
  box-shadow: 0 14px 30px -18px rgba(20, 83, 45, .6);
}
.cita {
  position: relative;
  font-size: 20px; line-height: 1.55; color: var(--tinta); font-weight: 500;
  padding: 22px 26px 22px 30px; margin: 26px 0;
  background: var(--menta); border-radius: 22px;
}
.cita::before {
  content: '“'; position: absolute; top: -26px; left: 14px;
  font-size: 90px; line-height: 1; color: var(--lima); font-family: Georgia, serif;
}
.valores-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.valores-chips span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: transform .2s ease;
}
.valores-chips span:hover { transform: translateY(-3px) rotate(-2deg); }
.valores-chips span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; }
.vc-1 { background: #dff3d4; color: #2f7d20; }
.vc-2 { background: #dcecfb; color: #1d5ca8; }
.vc-3 { background: #ffefc7; color: #9a6800; }
.vc-4 { background: #d3f1ea; color: #11705c; }
.vc-5 { background: #f5e4d3; color: #8c4f1e; }

/* =================== CLIENTES (MARQUEE) =================== */
.clientes-fresca { background: var(--menta); padding: 70px 0; }
.clientes-fresca h2 { font-size: 26px; text-align: center; margin-bottom: 36px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-pista { display: flex; gap: 22px; width: max-content; animation: desplazar 36s linear infinite; }
.marquee:hover .marquee-pista { animation-play-state: paused; }
.logo-cliente {
  background: #fff; border-radius: 18px; padding: 16px 26px;
  display: flex; align-items: center; justify-content: center;
  height: 78px; min-width: 170px;
}
.logo-cliente img { max-height: 42px; width: auto; filter: grayscale(100%); opacity: .7; transition: all .25s ease; }
.logo-cliente:hover img { filter: none; opacity: 1; }
@keyframes desplazar { to { transform: translateX(calc(-50% - 11px)); } }

/* =================== RESPALDO =================== */
.respaldo { background: #fff; padding: 80px 0; }
.insignias { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.insignia {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid #d6ead9; border-radius: 999px;
  padding: 10px 18px 10px 12px; background: #fff;
  font-size: 14px; color: var(--tinta);
  transition: all .2s ease;
}
.insignia:hover { border-color: var(--hoja); background: var(--menta); }
.insignia .check {
  width: 26px; height: 26px; border-radius: 50%; background: var(--menta);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.insignia .check svg { width: 15px; height: 15px; stroke: var(--hoja); }
.insignia small { color: var(--gris-texto); font-size: 12.5px; }

/* =================== CTA FINAL =================== */
.cta-fresca { padding: 30px 0 100px; background: #fff; }
.cta-tarjeta {
  position: relative; overflow: hidden;
  border-radius: 36px;
  padding: 64px 56px;
  background: linear-gradient(120deg, #1f7a45 0%, #1b6a6a 55%, #1d5ca8 100%);
  color: #fff;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center;
}
@media (max-width: 860px) { .cta-tarjeta { grid-template-columns: minmax(0, 1fr); padding: 48px 28px; } }
@media (max-width: 480px) {
  .cta-tarjeta { padding: 40px 22px; border-radius: 28px; }
  .cta-tarjeta h2 { font-size: 28px; }
  .cta-tarjeta p { font-size: 16px; }
  .cta-acciones { align-items: stretch; }
  .cta-acciones .btn { justify-content: center; text-align: center; padding: 14px 18px; }
}
.cta-tarjeta h2 { color: #fff; font-size: 36px; margin-bottom: 12px; }
.cta-tarjeta p { color: #d9efe2; font-size: 17px; margin: 0; }
.cta-tarjeta .manuscrita { color: var(--lima); font-size: 28px; display: block; margin-bottom: 4px; }
.cta-acciones { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; position: relative; z-index: 1; }
@media (min-width: 861px) { .cta-acciones { align-items: flex-end; } }
.cta-tarjeta .hoja-grande { position: absolute; width: 260px; right: -60px; top: -70px; opacity: .12; transform: rotate(25deg); }
.cta-tarjeta .hoja-grande-2 { position: absolute; width: 180px; left: -50px; bottom: -70px; opacity: .1; transform: rotate(-30deg); }
.cta-tarjeta > div { position: relative; z-index: 1; }

/* =================== FOOTER =================== */
.home footer { background: var(--bosque-oscuro); color: #b6d4c1; }
.home footer h4 { color: #fff; }
.home footer p { color: #b6d4c1; }
.home footer a:hover { color: var(--lima); }
.home .footer-badges span { border-color: rgba(255,255,255,.16); color: #a9c9b5; border-radius: 999px; }
.home .footer-bar { color: #86a896; }
.ola-footer { display: block; width: 100%; height: 60px; background: #fff; margin-bottom: -1px; }

/* WhatsApp con pulso */
.home .wa-flotante::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: onda 2.4s ease-out infinite;
}
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* =================== APARICIÓN AL HACER SCROLL =================== */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js .revelar.visible { opacity: 1; transform: none; }
.js .revelar.d1 { transition-delay: .1s; }
.js .revelar.d2 { transition-delay: .2s; }
.js .revelar.d3 { transition-delay: .3s; }
.js .revelar.d4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .subrayado svg path { stroke-dashoffset: 0; }
}