/* ==========================================================================
   Cuantico — Soluciones Agrotech · FVH (paleta verde)
   ========================================================================== */
.page-fvh { --fv-d: #0b2e1d; --fv-m: #14532d; --fv-g: #1fa95b; --fv-l: #8be28b; --fv-p: #eef8f1; --fv-s: #d7efdd; }

/* Hero */
.fvh-hero { position: relative; overflow: hidden; color: #fff; padding: calc(var(--header-h) + 56px) 0 clamp(56px, 7vw, 96px); background: radial-gradient(60% 70% at 85% 10%, rgba(139, 226, 139, .28), transparent 70%), radial-gradient(50% 60% at 5% 90%, rgba(31, 169, 91, .32), transparent 70%), linear-gradient(160deg, #0b2e1d, #14532d 60%, #0e3b24); }
.fvh-hero::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(100deg, rgba(139, 226, 139, .07) 0 2px, transparent 2px 26px); mask-image: linear-gradient(180deg, transparent, #000 40%, transparent); pointer-events: none; }
.fvh-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.fvh-hero .crumbs, .fvh-hero .crumbs a { color: #a8d9b4; }
.fvh-hero .kick { color: var(--fv-l); }
.fvh-hero__t { margin: 16px 0 20px; font-size: clamp(2.2rem, 4.8vw, 4.6rem); line-height: .98; letter-spacing: -.05em; font-weight: 500; color: #fff; max-width: 14ch; }
.fvh-hero__t em { font-style: normal; color: var(--fv-l); }
.fvh-hero .lead { max-width: 48ch; color: #d3ecd9; }
.fvh-chips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fvh-chips li { padding: 8px 14px; border-radius: 999px; font-size: .84rem; color: #d9f3df; background: rgba(139, 226, 139, .12); box-shadow: inset 0 0 0 1px rgba(139, 226, 139, .3); }
.fvh-collage { position: relative; min-height: 460px; }
.fvh-collage figure { position: absolute; margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 40px 70px -30px rgba(0, 0, 0, .7); }
.fvh-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fvh-collage .c1 { left: 0; top: 4%; width: 46%; aspect-ratio: 3/4; transform: rotate(-3deg); }
.fvh-collage .c2 { right: 0; top: 0; width: 50%; aspect-ratio: 1; transform: rotate(2.5deg); animation: solFloat 8s ease-in-out infinite; }
.fvh-collage .c3 { right: 6%; bottom: 0; width: 56%; aspect-ratio: 3/2; transform: rotate(-1.5deg); }

/* Botones y acentos en verde */
.page-fvh .btn--primary { background: linear-gradient(135deg, #3fd17a, #14934b); color: #04200f; box-shadow: 0 16px 30px -14px rgba(31, 169, 91, .9); }
.page-fvh .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.page-fvh .kick { color: var(--fv-g); }
.page-fvh .tone { color: var(--fv-g); }
.page-fvh .rcirc::before { background: linear-gradient(90deg, #3fd17a, #14532d); }
.page-fvh .rcirc b { background: linear-gradient(135deg, #3fd17a, #14532d); box-shadow: 0 0 0 6px #fff, 0 16px 28px -12px rgba(20, 83, 45, .7); }
.page-fvh .rlist2 svg { color: var(--fv-g); }
.page-fvh .mlink, .page-fvh .mrel a { color: var(--fv-m); }
.page-fvh .mrel a:hover { background: var(--fv-g); color: #fff; }
.page-fvh .cta, .page-fvh .bg-blue { background: radial-gradient(60% 80% at 80% 0%, rgba(139, 226, 139, .25), transparent 70%), linear-gradient(160deg, #0b2e1d, #14532d); }
.page-fvh .cta .btn--light { color: #0b2e1d; }
.page-fvh .cta .grad-text { background: linear-gradient(90deg, #b9f5b9, #5fe08d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fvh-pale { background: linear-gradient(180deg, var(--fv-p), #fff); }
.fvh-deep { background: linear-gradient(160deg, #0b2e1d, #14532d); color: #fff; }
.fvh-deep .kick { color: var(--fv-l); } .fvh-deep .h2 { color: #fff; } .fvh-deep .h2 .tone { color: var(--fv-l); } .fvh-deep .lead { color: #cfe9d6; }

/* Fases con foto */
.fvh-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fvh-phases li { position: relative; overflow: hidden; border-radius: 22px; min-height: 300px; display: grid; align-content: end; padding: 20px; color: #fff; background: linear-gradient(160deg, #14532d, #0b2e1d); box-shadow: 0 0 0 1px rgba(20, 83, 45, .25); transition: transform .5s var(--ease-out); }
.fvh-phases li:hover { transform: translateY(-6px); }
.fvh-phases img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.fvh-phases li:hover img { transform: scale(1.06); }
.fvh-phases li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(5, 30, 17, .88)); }
.fvh-phases li > b, .fvh-phases li > strong, .fvh-phases li > span { position: relative; z-index: 1; }
.fvh-phases b { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--fv-l); }
.fvh-phases strong { display: block; margin: 4px 0; font-size: 1.3rem; font-weight: 500; letter-spacing: -.03em; }
.fvh-phases span { font-size: .9rem; color: #d6eedc; }
.fvh-phases .seed { position: absolute; inset: 0; display: grid; place-items: center; font-size: 5rem; opacity: .35; }

/* Galerías */
.fvh-gal { columns: 3 220px; column-gap: 14px; }
.fvh-gal figure, .fvh-gal .mg { break-inside: avoid; margin: 0 0 14px; background: transparent; }
.fvh-gal figcaption { padding: 8px 4px 0; }
.fvh-gal .mg__b { display: block; width: 100%; border-radius: 18px; overflow: hidden; cursor: zoom-in; position: relative; box-shadow: 0 0 0 1px rgba(20, 83, 45, .18); }
.fvh-gal img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease-out); }
.fvh-gal .mg__b:hover img { transform: scale(1.05); }
.fvh-gal figcaption { padding: 8px 4px 0; font-size: .85rem; color: #3b5a47; }
.fvh-deep .fvh-gal figcaption { color: #bfe0c8; }
.fvh-deep .fvh-gal .mg__b { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.fvh-note { margin: 24px 0 0; max-width: 70ch; font-size: .9rem; color: #cfe9d6; }

@media (max-width: 900px) {
  .fvh-hero__grid { grid-template-columns: 1fr; }
  .fvh-collage { min-height: 360px; }
  .fvh-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .fvh-phases { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fvh-collage .c2 { animation: none; } }