/* ECOMOD — estilos propios que complementan a Tailwind */
:root{
  --primary:#3c6841; --ink:#15201a; --steel:#727970; --cloud:#f4f6f3;
}
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; }

/* Rejilla tecnica de fondo */
.tech-grid{
  background-size:40px 40px;
  background-image:
    linear-gradient(to right, rgba(114,121,112,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(114,121,112,.10) 1px, transparent 1px);
}
.tech-grid-dense{
  background-size:20px 20px;
  background-image:
    linear-gradient(to right, rgba(114,121,112,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(114,121,112,.08) 1px, transparent 1px);
}

/* Etiqueta tecnica (codigo/kicker) */
.kicker{ font-family:'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }

/* Animacion de aparicion al hacer scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* Marco de imagen con placeholder integrado.
   Si la imagen falta (404), su onerror la oculta y se ve el patron + etiqueta debajo. */
.img-frame{ position:relative; overflow:hidden; background:#e9ede8;
  background-image:
    linear-gradient(135deg, rgba(60,104,65,.06) 25%, transparent 25%),
    linear-gradient(225deg, rgba(60,104,65,.06) 25%, transparent 25%),
    linear-gradient(45deg, rgba(60,104,65,.06) 25%, transparent 25%),
    linear-gradient(315deg, rgba(60,104,65,.06) 25%, transparent 25%);
  background-position:20px 0,20px 0,0 0,0 0; background-size:40px 40px;
}
.img-frame > img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; }
.img-frame .img-note{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; text-align:center; padding:16px; color:#5b6359; }
.img-frame .img-note .material-symbols-outlined{ font-size:34px; opacity:.7; }

/* Linea conectora en el proceso */
.step-num{ font-family:'JetBrains Mono',monospace; }

/* Material symbols base */
.material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align:middle; }
.icon-fill{ font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

/* Foco accesible visible */
a:focus-visible, button:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

/* Menu movil */
#mobileMenu{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
#mobileMenu.open{ max-height:520px; }