/* Agroindustrial JS — site.css (v2)
   Идея: «Devolvemos la vida al suelo» + имя марки на гуарани (yvy mbarete = tierra fuerte).
   Цвет: зелёный знака Yvy Mbarete на светлом нейтральном фоне; зелёные плоскости под «30 %» и контакт.
   Шрифты: Young Serif + Instrument Sans. Фото — ровной сеткой, одинаковые пропорции. Телефон первым.
   Движение — только transform/opacity (композитор), одна кривая. */
:root {
  --paper: #F3F5EE; --ink: #13241A; --ink2: #3E4C43;
  --verde: #0F5132; --verde-h: #0B3F27; --linea: #C9CFC3;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gut: clamp(20px, 5.2vw, 76px); --hdr: 60px; --gap: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); touch-action: manipulation; scrollbar-gutter: stable; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
figcaption, .pasos li > span:not(.ph) { display: block; font-size: 13px; line-height: 1.35; color: var(--ink2); margin-top: 8px; }
.k-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; left: var(--gut); top: 8px; padding: 12px 16px; background: var(--ink); color: var(--paper); transform: translateY(-300%); }
.skip:focus { transform: none; }
section[id], footer[id] { scroll-margin-top: calc(var(--hdr) + 20px); }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.2; }
.btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.btn--xl { min-height: 56px; padding: 0 26px; font-size: 17px; }
.btn--verde { background: var(--verde); color: #fff; }
.btn--claro { background: var(--paper); color: var(--ink); }
.btn--linea { box-shadow: inset 0 0 0 1.5px var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color .2s, color .2s; }
  .btn--verde:hover { background: var(--verde-h); }
  .btn--claro:hover { background: #fff; }
  .btn--linea:hover { background: var(--ink); color: var(--paper); }
  .top__nav a:hover, .fila__a:hover, .fin a:not(.btn):hover, .hero__dato a:hover { text-decoration-color: currentColor; }
}

/* ---------- шапка ---------- */
.top { position: sticky; top: 0; z-index: 50; height: var(--hdr); padding: 0 var(--gut); display: flex; align-items: center; gap: 10px; background: var(--paper); }
.top__marca { font: 400 19px/1 var(--serif); text-decoration: none; margin-right: auto; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.top__marca { gap: 10px; }
.pal { display: inline-block; white-space: nowrap; }
.top__wa, .top__menu { flex: none; }
.top__marca { min-width: 0; }
@media (max-width: 429px) { .top__wa { width: 44px; padding: 0; } .top__wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .top .top__marca span { font-size: 17px; } }
@media (max-width: 379px) { .top { gap: 8px; } .top .top__marca { gap: 8px; } .top .top__marca img { width: 32px; height: 32px; } .top .top__marca span { font-size: 15px; } .top .top__menu { padding-left: 2px; } }
@media (max-width: 339px) { .top .top__bars { display: none; } .top .top__marca span { font-size: 14px; } }
.top__marca img { width: 40px; height: 40px; border-radius: 7px; flex: none; }
.top__wa { min-height: 44px; padding: 0 14px; font-size: 15px; }
.top__menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 8px; font-weight: 600; font-size: 15px; }
.top__bars { display: grid; gap: 6px; width: 20px; }
/* подпись «Menú» ↔ «Cerrar»: ширина кнопки всегда по более длинному слову, чтобы соседний значок WhatsApp не сдвигался при открытии меню */
.top__menu-t { display: inline-grid; text-align: left; }
.top__menu-t::after { content: attr(data-cerrar); height: 0; overflow: hidden; visibility: hidden; }
.top__bars i { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .25s var(--ease); }
.top__menu[aria-expanded="true"] .top__bars i:first-child { transform: translateY(4px) rotate(45deg); }
.top__menu[aria-expanded="true"] .top__bars i:last-child { transform: translateY(-4px) rotate(-45deg); }
.top__nav { position: absolute; left: 0; right: 0; top: var(--hdr); background: var(--paper); padding: 4px var(--gut) 20px; display: grid; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.top__nav.abierto { visibility: visible; opacity: 1; transition: opacity .2s; }
.top__nav a { display: flex; align-items: center; min-height: 54px; text-decoration: none; font: 400 24px/1.1 var(--serif); border-top: 1px solid var(--linea); }
.velo { position: fixed; inset: var(--hdr) 0 0; z-index: 40; background: rgb(19 36 26 / .45); }
.velo[hidden] { display: none; }

/* ---------- первый экран ---------- */
.hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--hdr)); }
.hero__txt { padding: clamp(14px, 3.2svh, 34px) var(--gut) clamp(16px, 3svh, 28px); }
.hero__h1 { font-size: clamp(42px, 13.6vw, 64px); line-height: .98; letter-spacing: -.012em; }
.ln { display: block; overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.ln > span { display: block; }
.hero__p { margin-top: clamp(12px, 2.2svh, 20px); max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--ink2); }
.hero__act { margin-top: clamp(14px, 2.6svh, 24px); display: flex; flex-wrap: wrap; gap: 12px; }
.hero__act .btn { flex: 1 1 auto; }
.hero__cta2 { display: none; }
.hero__dato { margin-top: 12px; font-size: 14px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; }
.hero__dato a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 4px; }
.hero__foto { position: relative; flex: 1 1 0; min-height: 110px; overflow: hidden; }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }

/* ---------- движение ---------- */
.ph { display: block; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  /* вход первого экрана */
  .js .ln > span { animation: sube 1s var(--ease) both; }
  .js .ln:nth-child(2) > span { animation-delay: .08s; }
  .js .ln:nth-child(3) > span { animation-delay: .16s; }
  .js .hero__p, .js .hero__act, .js .hero__dato { animation: aparece .9s var(--ease) .35s both; }
  .js .hero__act { animation-delay: .45s; }
  .js .hero__dato { animation-delay: .55s; }
  .js .hero__foto img { animation: enfoca 1.6s var(--ease) both; }
  /* фото: кадр «подъезжает» внутри своей рамки */
  .js .ph img { transform: scale(1.16); opacity: 0; transition: transform 1.4s var(--ease), opacity .7s ease; transition-delay: var(--d, 0s); }
  .js .ph.in img { transform: none; opacity: 1; }
  /* заголовки поднимаются из-под маски, текст и кнопки — следом */
  .js .tt { overflow: hidden; padding: .08em 0 .2em; margin: -.08em 0 -.2em; }
  .js .tt > span { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
  .js .tt.in > span { transform: none; }
  .js .ap { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform 1s var(--ease); transition-delay: var(--d, 0s); }
  .js .ap.in { opacity: 1; transform: none; }
  .js .yvy__h2 .lt { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
  .js .yvy__h2.in .lt { transform: none; }
}
@keyframes sube { from { transform: translateY(108%); } to { transform: none; } }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes enfoca { from { transform: scale(1.14); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Yvy mbarete ---------- */
.yvy { padding: clamp(64px, 11vw, 150px) var(--gut) clamp(64px, 9vw, 130px); }
.yvy__cab { display: grid; gap: 26px; }
.yvy__h2 { font-size: clamp(64px, 19.5vw, 104px); line-height: .9; letter-spacing: -.02em; color: var(--verde); overflow: hidden; padding: .1em 0 .24em; margin: -.1em 0 -.24em; }
.yvy__p { font-size: 19px; line-height: 1.42; max-width: 30ch; }
.yvy__bolsa .ph { aspect-ratio: 4 / 3; }

.prod { margin-top: clamp(64px, 10vw, 140px); display: grid; gap: 30px; }
.prod__txt h3, .entrega h3 { font-size: clamp(30px, 8vw, 46px); line-height: 1.06; letter-spacing: -.01em; }
.prod__txt p { margin-top: 16px; max-width: 46ch; }
.prod__txt .btn { margin-top: 24px; }
.prod__li { margin-top: 18px; display: grid; gap: 10px; max-width: 44ch; }
.prod__li li { padding-left: 22px; position: relative; }
.prod__li li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--verde); }

/* сетки фото: одинаковые пропорции, одинаковые зазоры */
.pasos { counter-reset: paso; display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--gap); }
.pasos li { counter-increment: paso; }
.pasos li > span:not(.ph)::before { content: counter(paso) ". "; font-weight: 600; color: var(--ink); }
.pasos .ph, .cf .ph, .entrega .ph, .prod__foto .ph { aspect-ratio: 4 / 3; }

.entrega { margin-top: clamp(64px, 10vw, 140px); display: grid; grid-template-columns: 1fr 1fr; gap: 26px var(--gap); }
.entrega__txt { grid-column: 1 / -1; }
.entrega__txt p { margin-top: 14px; max-width: 40ch; }

/* ---------- 30 % (зелёная плоскость) ---------- */
.mezcla { background: var(--verde); color: #F3F5EE; display: grid; }
.mezcla__txt { padding: clamp(56px, 9vw, 120px) var(--gut) clamp(44px, 6vw, 72px); }
.mezcla h2 { display: grid; }
.mezcla__num { font-size: clamp(120px, 38vw, 190px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.mezcla__h { font-size: clamp(27px, 7.2vw, 40px); line-height: 1.1; max-width: 17ch; margin-top: 4px; }
.mezcla p { margin-top: 20px; max-width: 44ch; color: #DCE8DC; }
.mezcla .btn { margin-top: 26px; }
.mezcla__foto .ph { aspect-ratio: 4 / 3; }
.mezcla__foto figcaption { color: #B9D2BF; margin: 0; padding: 10px var(--gut) 18px; }

/* ---------- в поле ---------- */
.campo { padding: clamp(64px, 10vw, 140px) var(--gut); display: grid; gap: 40px; }
.campo h2, .venta h2 { font-size: clamp(34px, 9vw, 64px); line-height: 1.04; letter-spacing: -.012em; max-width: 13ch; }
.campo__txt p { margin-top: 18px; max-width: 48ch; }
.campo__txt .btn { margin-top: 26px; }
.campo__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px var(--gap); }

/* ---------- семена и инсумы ---------- */
.venta { padding: 0 var(--gut) clamp(72px, 10vw, 140px); display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.venta h2, .venta__filas { grid-column: 1 / -1; }
.fila { padding: 18px 0 14px; border-top: 1px solid var(--linea); display: grid; gap: 4px; }
.fila:last-child { border-bottom: 1px solid var(--linea); }
.fila h3 { font-size: 24px; line-height: 1.15; }
.fila p { color: var(--ink2); }
.fila__a { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.venta__f1 .ph, .venta__f2 .ph { aspect-ratio: 4 / 5; }

/* ---------- контакт ---------- */
.fin { background: var(--verde); color: #F3F5EE; padding: clamp(64px, 10vw, 130px) var(--gut) 28px; }
.fin h2 { font-size: clamp(52px, 15vw, 150px); line-height: .94; letter-spacing: -.02em; }
.fin__txt p { margin-top: clamp(26px, 3.4vw, 48px); max-width: 40ch; font-size: 18px; color: #DCE8DC; }
.fin__txt .btn { margin-top: 28px; width: 100%; }
.fin__datos { margin-top: 56px; display: grid; gap: 26px; }
.fin dt { font-size: 13px; color: #B9D2BF; margin-bottom: 4px; }
.fin dd { font-size: 18px; line-height: 1.4; }
.fin dd a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-color: rgb(243 245 238 / .45); text-underline-offset: 5px; }
.fin__logo { display: block; margin-top: 56px; width: 132px; height: auto; border-radius: 10px; }
.fin__pie { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgb(243 245 238 / .25); font-size: 13px; color: #B9D2BF; }

/* ========== только телефон (до 699): фото первого экрана целиком, заголовок на небе; блоки товаров: заголовок → фото → текст → кнопка ========== */
@media (max-width: 699px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(230px, 1fr) auto auto auto; height: calc(100svh - var(--hdr)); min-height: 0; }
  .hero__txt { display: contents; }
  .hero__foto { grid-area: 1 / 1; min-height: 0; flex: none; }
  .hero__foto img { object-position: 50% 0; }
  .hero__h1 { grid-area: 1 / 1; z-index: 1; align-self: start; padding: clamp(10px, 2.2svh, 20px) var(--gut) 0; color: #fff; font-size: clamp(36px, min(11.4vw, 7.4svh), 54px); line-height: 1; }
  .hero__p { grid-row: 2; margin: 0; padding: clamp(10px, 1.8svh, 16px) var(--gut) 0; font-size: 15.5px; line-height: 1.45; }
  .hero__act { grid-row: 3; margin: 0; padding: clamp(10px, 1.8svh, 14px) var(--gut) 0; }
  .hero__dato { grid-row: 4; margin: 0; padding: 2px var(--gut) 6px; }

  .prod { display: flex; flex-direction: column; gap: 0; margin-top: 88px; }
  .prod__txt { display: contents; }
  .prod__txt h3 { order: 0; }
  .prod--sil .prod__foto { order: 1; margin-top: 20px; }
  .prod__txt p, .prod__li { order: 2; }
  .prod--turba .pasos { order: 3; margin-top: 26px; }
  .prod__txt .btn { order: 4; align-self: flex-start; margin-top: 26px; }
  .entrega { margin-top: 88px; }
  .venta h2 { order: 0; } .venta__f1, .venta__f2 { order: 1; } .venta__filas { order: 2; }   /* семена: заголовок → фото → строки с «Consultar» */
}

/* ========== планшет ========== */
@media (min-width: 640px) {
  :root { --gap: 20px; }
  .hero__act .btn { flex: 0 0 auto; }
  .hero__cta2 { display: inline-flex; }
  .fin__txt .btn { width: auto; }
  .yvy__h2 { font-size: clamp(104px, 15vw, 150px); grid-column: 1 / -1; }
  .yvy__cab { grid-template-columns: 1fr 1fr; align-items: start; }
  .mezcla__foto .ph { aspect-ratio: 16 / 9; }
  .fin__datos { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 700px) and (max-width: 999px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; height: calc(100svh - var(--hdr)); min-height: 480px; }
  .hero__txt { align-self: end; padding: 0 24px 36px var(--gut); }
  .hero__h1 { font-size: clamp(44px, 6.6vw, 64px); }
  .hero__cta2 { display: none; }
  .hero__foto { min-height: 0; }
  .hero__foto img { object-position: 58% 40%; }
}

/* ========== компьютер ========== */
@media (min-width: 1000px) {
  :root { --hdr: 72px; --gap: 24px; }
  body { font-size: 18px; }
  figcaption, .pasos li > span:not(.ph) { font-size: 14px; margin-top: 10px; }
  .top__menu { display: none; }
  .top__marca { font-size: 22px; gap: 12px; }
  .top__marca img { width: 46px; height: 46px; }
  .top__nav { position: static; visibility: visible; opacity: 1; display: flex; gap: clamp(18px, 2.2vw, 34px); padding: 0; margin-right: clamp(8px, 1.4vw, 22px); background: none; transition: none; }
  .top__nav a { min-height: 44px; border: 0; font: 500 15.5px/1 var(--sans); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1.5px; transition: text-decoration-color .2s; }
  .top__wa { padding: 0 18px; }
  .velo { display: none; }

  .hero { display: grid; grid-template-columns: 7fr 5fr; height: calc(100svh - var(--hdr)); min-height: 540px; }
  .hero__txt { align-self: end; padding: 0 clamp(24px, 3vw, 56px) clamp(36px, 6.5svh, 72px) var(--gut); }
  .hero__h1 { font-size: clamp(72px, min(8.4vw, 15.5svh), 148px); line-height: .94; letter-spacing: -.02em; }
  .hero__p { font-size: clamp(17px, 1.35vw, 20px); margin-top: clamp(18px, 3svh, 30px); max-width: 44ch; }
  .hero__act { margin-top: clamp(20px, 3.4svh, 34px); }
  .hero__dato { margin-top: 16px; font-size: 15px; }
  .hero__foto { min-height: 0; }
  .hero__foto img { object-position: 50% 40%; }

  .yvy__cab { grid-template-columns: repeat(12, 1fr); gap: 40px var(--gap); }
  .yvy__h2 { font-size: clamp(120px, 13vw, 236px); white-space: nowrap; }
  .yvy__p { grid-column: 1 / 6; font-size: 26px; line-height: 1.32; max-width: 26ch; padding-top: 6px; }
  .yvy__bolsa { grid-column: 7 / 13; }

  .prod { grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
  .prod__txt h3, .entrega h3 { font-size: clamp(44px, 4vw, 60px); }
  .prod--turba .prod__txt { grid-column: 1 / 6; }
  .pasos { grid-column: 6 / 13; padding-left: var(--gap); gap: 30px var(--gap); }
  .prod--sil { align-items: center; }
  .prod--sil .prod__foto { grid-column: 1 / 7; }
  .prod--sil .prod__txt { grid-column: 8 / 13; }

  .entrega { grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
  .entrega__txt { grid-column: 1 / 6; align-self: center; }
  .entrega__f1 { grid-column: 7 / 10; }
  .entrega__f2 { grid-column: 10 / 13; }

  .mezcla { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mezcla__txt { padding: clamp(80px, 8vw, 130px) clamp(32px, 4vw, 72px) clamp(80px, 8vw, 130px) var(--gut); align-self: center; }
  .mezcla__num { font-size: clamp(190px, 19vw, 320px); }
  .mezcla__h { font-size: clamp(32px, 3vw, 48px); max-width: 18ch; }
  .mezcla p { margin-top: 28px; font-size: 20px; max-width: 44ch; }
  .mezcla__foto { position: relative; min-height: 640px; }
  .mezcla__foto .ph, .mezcla__foto > img { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; }
  .mezcla__foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 24px 18px; color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .55), transparent); }

  .campo { grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
  .campo__txt { grid-column: 1 / 6; position: sticky; top: calc(var(--hdr) + 40px); }
  .campo__fotos { grid-column: 7 / 13; gap: 30px var(--gap); }

  .venta { grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: end; }
  .venta h2 { grid-column: 1 / 6; align-self: start; }
  .venta__filas { grid-column: 1 / 7; grid-row: 2; }
  .fila { grid-template-columns: 200px 1fr auto; align-items: baseline; gap: 20px; padding: 22px 0 18px; }
  .fila h3 { font-size: 28px; }
  .venta__f1 { grid-column: 8 / 10; grid-row: 1 / 3; }
  .venta__f2 { grid-column: 10 / 12; grid-row: 1 / 3; }

  .fin { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .fin__txt { grid-column: 1 / 9; }
  .fin__txt p { font-size: 22px; }
  .fin__datos { grid-column: 9 / 13; grid-template-columns: 1fr; align-self: end; margin: 0; }
  .fin__logo { grid-column: 1 / -1; margin-top: 80px; width: 156px; }
  .fin__pie { grid-column: 1 / -1; margin-top: 32px; }
}