/* Small additions for the static implementation; original layout is shared. */
:focus-visible { outline: 3px solid #f4a61a; outline-offset: 4px; }
.whatsapp-float { position: fixed; z-index: 100; right: 20px; bottom: 20px; width: 64px; height: 64px; border-radius: 50%; background: #00866a; color: white; display: grid; place-items: center; box-shadow: 0 2px 8px #0002; transition: transform .2s ease; }
.whatsapp-float svg { width: 42px; height: 42px; }
.whatsapp-float:hover { transform: scale(1.06); }
.form-status { margin-top: 16px; font-family: var(--font-secondary); font-size: 16px; line-height: 1.5; color: #06933c; }
.video iframe { position: absolute; inset: 0; height: 100%; width: 100%; border: 0; }
.block-header-item:focus-within > .block-header-item__label > .block-header-item__dropdown { visibility: visible; opacity: 1; }
.item-content__icon-container-wrapper { cursor: pointer; }
@media (max-width: 920px) { .whatsapp-float { width: 56px; height: 56px; right: 20px; bottom: 20px; } .whatsapp-float svg { width: 36px; height: 36px; } }
html:not(.js) .transition, html:not(.js) [data-animation-role] { opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .transition, .transition [data-animation-role] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .whatsapp-float, .grid-button { transition: none !important; }
}

/* Barra compacta al desplazarse; conserva el espacio original en la página. */
@media (min-width: 1025px) {
  .page .top-blocks {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: var(--desktop-header-height, 152px);
    pointer-events: none;
  }

  .page .block-header {
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    pointer-events: auto;
    transition: background-color .25s ease, box-shadow .25s ease;
  }

  .page .block-header--scrolled {
    width: min(1160px, calc(100% - 48px));
    margin-top: 12px;
    border-radius: 16px;
    background-color: rgba(8, 55, 35, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 6px 24px #0002;
    --link-spacing: clamp(20px, 3vw, 42px) !important;
  }

  .page .block-header--scrolled .block-header-layout-desktop {
    box-sizing: border-box;
    padding: 16px 24px;
  }

  .page .block-header--scrolled > .background {
    border-radius: inherit;
  }

  .page .block-header--scrolled > .background {
    background-color: transparent !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .page .block-header { transition: none; }
  }
}

@media (max-width: 1024px) {
  .page,
  .page * {
    box-sizing: border-box;
  }

  .page {
    width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .page .top-blocks {
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 88px;
    pointer-events: none;
  }

  .page .block-header {
    width: 100%;
    margin-inline: auto;
    pointer-events: auto;
    transition: background-color .25s ease, box-shadow .25s ease;
  }

  .page .block-header--scrolled {
    width: min(720px, calc(100% - 32px));
    margin-top: 8px;
    padding: 0;
    border-radius: 14px;
    background-color: rgba(8, 55, 35, .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 6px 24px #0002;
  }

  .page .block-header--scrolled > .background {
    background-color: transparent !important;
    border-radius: inherit;
  }

  .page .block-header--scrolled .block-header-layout-mobile {
    height: 72px;
    padding: 12px 20px !important;
  }

  .page .block-header--scrolled .block-header-layout-mobile__dropdown {
    top: calc(100% + 8px);
    border-radius: 14px;
    background-color: rgb(8, 55, 35);
    box-shadow: 0 6px 24px #0002;
  }

  @media (prefers-reduced-motion: reduce) {
    .page .block-header { transition: none; }
  }

  /* Navegación táctil para tablets y celulares. */
  .page .block-header-layout-desktop {
    display: none !important;
  }

  .page .block-header-layout-mobile {
    position: relative;
    z-index: 14;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo hamburger-menu";
    align-items: center;
    width: 100%;
    height: 88px;
    padding: 20px 24px !important;
  }

  .page .block-header-logo {
    width: 180px !important;
    max-width: 100%;
    height: auto !important;
  }

  .page .block-header-logo__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .page .burger {
    position: relative;
    width: 44px;
    height: 44px;
    margin-left: 16px !important;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  .page .burger__bun,
  .page .burger__meat {
    left: 10px;
    width: 24px;
    transform-origin: center;
  }

  .page .burger__bun:first-child { top: 13px; }
  .page .burger__meat { top: 21px; }
  .page .burger__bun:last-child { top: 29px; }

  .page .burger--open .burger__bun:first-child,
  .page .burger--open .burger__bun:last-child { top: 21px; }

  .page .block-header-layout-mobile__dropdown {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-height: 0;
    padding: 0 !important;
    visibility: hidden;
    overflow: hidden;
    background: var(--background-color, #06943c);
  }

  .page .block-header-layout-mobile__dropdown--open {
    max-height: calc(100dvh - 88px);
    padding: 16px 24px !important;
    visibility: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .page .block-header-layout-mobile .block-header__nav,
  .page .block-header-layout-mobile .block-header__nav-links { width: 100%; }

  .page .block-header-layout-mobile .block-header__nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: left;
  }

  .page .block-header-layout-mobile .item-content-wrapper {
    width: 100%;
    justify-content: flex-start;
  }

  .page .block-header-layout-mobile .item-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 1rem !important;
    line-height: 1.5;
    white-space: normal;
    text-align: left !important;
    touch-action: manipulation;
  }

  .page .block-header-layout-mobile .item-content__icon-container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .page .block-header-layout-mobile .block-header-item__dropdown-area {
    position: static !important;
    display: none !important;
    padding: 0 !important;
  }

  .page .block-header-layout-mobile .block-header-item__mobile-dropdown-trigger:checked ~ .block-header-item__dropdown-area {
    display: block !important;
  }

  .page .block-header-layout-mobile .block-header-item__dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-height: none;
    margin: 8px 0;
    padding: 0 16px;
    background: transparent;
    box-shadow: none;
  }

  /* Sustituye las coordenadas fijas por una columna de altura automática. */
  .page .block-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto;
    gap: 24px;
    width: 100%;
    max-width: 720px !important;
    min-height: 0 !important;
    margin-inline: auto;
    padding: 48px 24px !important;
  }

  .page .block--desktop-first-visible,
  .page .block--mobile-first-visible {
    padding-top: 88px !important;
    margin-top: -88px !important;
  }

  .page .block-layout:empty {
    min-height: clamp(220px, 35vw, 340px) !important;
    padding: 0 !important;
  }

  .page .layout-element {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: var(--responsive-order, var(--z-index, 0));
    align-self: start;
    justify-self: stretch;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }

  .page .layout-element__component {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;
  }

  .page .layout-element:has(> .grid-shape) { display: none !important; }

  /* Conserva el orden lógico de los bloques originales al apilarlos. */
  .page .layout-element:has(:is(#Xme3nFEXf, #UhPwLW1iU, #zxkj-J, #zhmDDB, #NqBsOFC46, #zhR_nS, #z5U4lH, #z54l_3, #SeYHggBDVV, #JqWmMOHg6, #zYU2LA, #zj6mgp, #zJesoS, #zJ3ekQ, #zYRT2s, #z5OOHB, #zadw9w)) { --responsive-order: 1; }
  .page .layout-element:has(:is(#zk8l0K, #sRerUHxW4, #zRWLgP, #zCLD7_, #U0ax6H6_BJ, #zSIhGP, #zEuMOE, #zAa45N, #zJjFis, #lEyCuWLDQ, #zFdKHH, #zfUV49, #z5d5kS, #z8742J, #zWXk3X, #zqNaUS, #zfcjrg)) { --responsive-order: 2; }
  .page .layout-element:has(:is(#gzk2JubNC, #I1dwBdpns, #z9b47X, #z9MlC5, #zrKiGV, #z0Uhua, #zqxAeV, #z7cbLj, #zxEyHV, #xaGk8qBb1, #zHe_-G, #ziXF3m, #ztnQ9O, #zmnxLa)) { --responsive-order: 3; }
  .page .layout-element:has(:is(#zZSgdk, #z2c8Rx, #z-ynux, #zmvv5B, #z4tt_p, #zMNTbv, #zVUrJ9, #tUS410VqJP, #z-0jU5, #zEUsA-, #zN_mK9, #zmvxxZ)) { --responsive-order: 4; }
  .page .layout-element:has(:is(#nx8iU0veE, #zPHlss, #zMhtg2, #z2C7eG, #zrXRL5, #z3OWmV, #GE6th_YsjF, #zTn7wm, #zcz0Ga, #zTZJfg, #zvQ7rx)) { --responsive-order: 5; }
  .page .layout-element:has(:is(#t93kHfQ3Q, #zwiUHj, #zWL-SA, #zJFlAE, #zzxA7e, #zQOpU2, #e8SCp0EX6, #z4kr-b, #zK8Qvo, #z3Prer, #z3cu1b)) { --responsive-order: 6; }
  .page .layout-element:has(:is(#_KThOOBAK, #zPa4Ej, #zQWb9j, #zPRTDf, #z4vEVo, #zZp77w, #KLvz3fAVk, #zBRVSU, #z1R_Ar)) { --responsive-order: 7; }
  .page .layout-element:has(:is(#nW7vA00J6, #zhIQTr, #zwMH3U, #znHEF3, #zl4TgH, #z8SX8_, #xoHa-5frx, #zAOLOe)) { --responsive-order: 8; }
  .page .layout-element:has(:is(#PxpDl7TQG, #zSaWas, #zMgz4r, #z42_us, #zH0ZwV, #zwJZ2F, #kR8xiwxz6, #zyOSF5)) { --responsive-order: 9; }
  .page .layout-element:has(:is(#ASySiabpJ, #zxmp4_, #zfg3ew, #zEEzsE, #z8P3Jz, #O7U7LESq9, #zo6bbl)) { --responsive-order: 10; }
  .page .layout-element:has(:is(#zwpsuX, #zeOybA, #L79KGtRHS, #zlmqSs)) { --responsive-order: 11; }
  .page .layout-element:has(:is(#zEWesT, #ztPlsr, #ZW8IdnDAu, #zgtNKO)) { --responsive-order: 12; }
  .page .layout-element:has(:is(#zOE9tP, #ziIMm0, #bmKkKLZiu)) { --responsive-order: 13; }
  .page .layout-element:has(:is(#zBzRK1, #z6IsiF, #-bjHzsL3y)) { --responsive-order: 14; }
  .page .layout-element:has(:is(#zW2NZh, #RCxfC4AGK)) { --responsive-order: 15; }
  .page .layout-element:has(:is(#zD7ZfZ, #K4woW1BxQ)) { --responsive-order: 16; }
  .page .layout-element:has(:is(#WVysm9qnh, #mmK2cqtO6)) { --responsive-order: 17; }

  /* Tipografía: respeta los textos pequeños y limita los títulos grandes. */
  .page .text-box {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Texto claro sobre el fondo oscuro de Propósito, Misión y Visión. */
  .page #zFXZ_6 .text-box,
  .page #zFXZ_6 .text-box * {
    color: #fff !important;
  }

  /* Diferencia el nombre de cada producto de sus características. */
  .page :is(#zJesoS, #z-0jU5, #zJ3ekQ, #zEUsA-, #zBRVSU, #zo6bbl, #zYRT2s) h6,
  .page :is(#zJesoS, #z-0jU5, #zJ3ekQ, #zEUsA-, #zBRVSU, #zo6bbl, #zYRT2s) h6 * {
    color: #006b35 !important;
  }

  /* Marca el inicio de la siguiente ficha al apilar los productos. */
  .page .layout-element:has(> :is(#z-0jU5, #zEUsA-, #zBRVSU, #zo6bbl)) {
    margin-top: 12px !important;
    border-top: 1px solid #bfdbc9;
    padding-top: 24px;
  }

  .page .text-box :is(h1, h2) {
    font-size: clamp(2rem, 4.5vw, 3rem) !important;
    line-height: 1.15 !important;
  }

  .page .text-box :is(h3, h4, h5, h6) {
    font-size: clamp(1.125rem, var(--fontSizeDesktop, 2rem), 2.25rem) !important;
    line-height: 1.25 !important;
  }

  .page .text-box :is(p, li) {
    font-size: clamp(1rem, var(--fontSizeDesktop, 1.125rem), 1.25rem) !important;
    line-height: 1.6 !important;
  }

  .page .text-box :is(h1, h2, h3, h4, h5, h6, p, li) :is(span, strong, em, a) {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .page .text-box :is(p, ul, ol) { margin-bottom: 16px; }
  .page .text-box :is(ul, ol) { padding-inline-start: 24px; }

  /* Imágenes de contenido; los fondos mantienen su recorte original. */
  .page .image-wrapper--desktop { display: none !important; }
  .page .image-wrapper--mobile { display: block !important; }

  .page .image-wrapper,
  .page .image-wrapper .image {
    width: 100% !important;
    max-width: 100%;
    max-height: none !important;
    height: auto !important;
  }

  .page .image__image {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
  }

  .page .video {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
  }

  .page .video iframe { width: 100%; height: 100%; }

  /* Botones y formulario cómodos para usar con el dedo. */
  .page .layout-element:has(> .grid-button) {
    justify-self: center;
    width: min(100%, 320px) !important;
  }

  .page .grid-button {
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    line-height: 1.4;
    text-align: center;
    white-space: normal !important;
    touch-action: manipulation;
  }

  .page .form {
    width: 100%;
    max-width: 100%;
    padding: 24px !important;
  }

  .page .form__control-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }

  .page .form :is(input, textarea) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 14px 16px;
    font-size: 16px !important;
    line-height: 1.5;
  }

  .page .form textarea { min-height: 144px; resize: vertical !important; }
  .page .form label { font-size: 1rem !important; line-height: 1.5; }
  .page .form__button { width: 100%; justify-self: stretch; }

  .page .social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: 100%;
  }

  .page .social-icons__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
    touch-action: manipulation;
  }

  .page .social-icons__link svg { width: 24px; height: 24px; }

  /* Mantiene visibles las estadísticas al retirar sus fondos superpuestos. */
  .page .layout-element:has(:is(#zrKiGV, #z2C7eG, #zmvv5B, #zJFlAE)) {
    background: #06933c;
    padding: 16px 24px;
  }

  .page .layout-element:has(:is(#zrKiGV, #z2C7eG)) {
    margin-bottom: -24px !important;
    border-radius: 12px 12px 0 0;
  }

  .page .layout-element:has(:is(#zmvv5B, #zJFlAE)) { border-radius: 0 0 12px 12px; }

  .page :is(#zrKiGV, #z2C7eG, #zmvv5B, #zJFlAE),
  .page :is(#zrKiGV, #z2C7eG, #zmvv5B, #zJFlAE) * {
    color: #fff !important;
    text-align: center !important;
  }

  .page :is(#zf1kqQ, #zs_lEV) .block-layout { gap: 16px; }
  .page :is(#zf1kqQ, #zs_lEV) .text-box { text-align: center !important; }
  .page :is(#zf1kqQ, #zs_lEV) .image { border-radius: 12px; overflow: hidden; }
  .page :is(#zf1kqQ, #zs_lEV) .layout-element:has(> .grid-button) { margin-bottom: 24px !important; }
  .page .block-layout:has(.social-icons) .text-box { text-align: center !important; }

  .page #aCqA2TkE7 .block-layout {
    align-content: center;
    min-height: max(480px, calc(100svh - 88px)) !important;
    padding-block: 56px !important;
  }

  .page #Xme3nFEXf h1 { font-size: clamp(1.75rem, 4vw, 2.25rem) !important; }
  .page #zk8l0K h1:first-of-type { font-size: clamp(2.25rem, 6vw, 3.5rem) !important; }
  .page #zk8l0K h1:last-of-type {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
  }

  .whatsapp-float {
    right: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    touch-action: manipulation;
  }

  .whatsapp-float svg { width: 36px; height: 36px; }
}

@media (max-width: 768px) {
  .page .block-header-layout-mobile {
    padding-inline: 16px !important;
  }
  .page .block-header-logo { width: 150px !important; justify-self: start; }
  .page .block-header-layout-mobile__dropdown--open { padding-inline: 16px !important; }
  .page .block-header--scrolled { width: calc(100% - 24px); }
  .page .block-header--scrolled .block-header-layout-mobile { padding-inline: 16px !important; }

  .page .block-layout {
    max-width: 100% !important;
    gap: 20px;
    padding: 32px 16px !important;
  }

  .page .block-layout:empty { min-height: clamp(200px, 55vw, 300px) !important; }
  .page .text-box :is(h1, h2) { font-size: clamp(1.75rem, 7vw, 2.25rem) !important; }
  .page .text-box :is(h3, h4, h5, h6) {
    font-size: clamp(1.125rem, var(--fontSizeDesktop, 1.5rem), 1.875rem) !important;
  }

  .page .text-box :is(p, li) { font-size: 1rem !important; line-height: 1.65 !important; }
  .page .text-box :is(ul, ol) { padding-inline-start: 20px; }
  .page .form { padding: 20px 16px !important; }
  .page .form__control { gap: 20px; }
  .page .grid-button { padding: 14px 20px !important; }
  .page .layout-element:has(:is(#zrKiGV, #z2C7eG)) { margin-bottom: -20px !important; }

  .page #aCqA2TkE7 .block-layout {
    min-height: max(440px, calc(100svh - 88px)) !important;
    padding-block: 40px !important;
  }

  .page #Xme3nFEXf h1 { font-size: clamp(1.5rem, 6vw, 1.875rem) !important; }
  .page #zk8l0K h1:first-of-type { font-size: clamp(2rem, 8vw, 2.5rem) !important; }
  .page #zk8l0K h1:last-of-type { font-size: 1.125rem !important; }

  .whatsapp-float {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}