:root {
      --lime: #a5ca10;
      --lime-dark: #6f9010;
      --ink: #20211f;
      --muted: #6c6d68;
      --line: #e8e9e1;
      --cream: #fbfbf8;
      --sage: #eff1e4;
    }

    * { box-sizing: border-box; }
    body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    button, input { font: inherit; }

    .notice {
      display: flex; justify-content: center; gap: 36px; align-items: center;
      min-height: 45px; padding: 10px 24px; background: var(--sage); font-size: 13px;
    }
    .notice__item { display: flex; gap: 9px; align-items: center; white-space: nowrap; }
    .notice__item:last-child { margin-left: auto; }
    .notice__item:nth-last-child(2) { margin-right: auto; }

    .header { background: #fff; border-bottom: 1px solid var(--line); }
    .header__main, .nav { max-width: 1420px; margin: auto; padding-left: 32px; padding-right: 32px; }
    .header__main { min-height: 86px; display: grid; grid-template-columns: 245px minmax(280px, 1fr) auto; gap: 36px; align-items: center; }
    .logo { color: var(--lime); font-size: 45px; line-height: 1; font-weight: 900; letter-spacing: -3px; text-decoration: none; }

    .search { position: relative; display: flex; align-items: center; max-width: 720px; width: 100%; justify-self: center; }
    .search input { width: 100%; height: 52px; border: 1px solid transparent; border-radius: 28px; outline: 0; background: #f7f7f3; padding: 0 58px 0 24px; color: var(--ink); font-size: 14px; transition: .2s; }
    .search input:focus { background: #fff; border-color: var(--lime); box-shadow: 0 0 0 4px rgb(165 202 16 / .15); }
    .search button { position: absolute; right: 8px; height: 38px; width: 42px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; border-radius: 20px; }
    .search button:hover { background: #eceee4; }

    .actions { display: flex; gap: 24px; align-items: center; }
    .action { display: flex; align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; padding: 7px 0; white-space: nowrap; cursor: pointer; font-size: 14px; }
    .action:hover { color: var(--lime-dark); }
    .cart-count { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lime); color: #fff; font-size: 11px; font-weight: 700; }

    .nav { min-height: 40px; display: flex; gap: 42px; align-items: flex-end; }
    .nav a { height: 40px; display: flex; align-items: center; border-bottom: 2px solid transparent; color: var(--ink); text-decoration: none; font-size: 14px; }
    .nav a:hover, .nav a[aria-current="page"] { color: var(--lime-dark); border-bottom-color: var(--lime); }
    .menu-button { display: none; }
    .icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 900px) {
      .notice { justify-content: flex-start; overflow-x: auto; gap: 22px; }
      .notice__item:last-child, .notice__item:nth-last-child(2) { margin: 0; }
      .header__main { grid-template-columns: auto 1fr auto; gap: 18px; min-height: 76px; padding-left: 20px; padding-right: 20px; }
      .logo { font-size: 35px; }
      .search { order: 3; grid-column: 1 / -1; padding-bottom: 16px; max-width: none; }
      .actions { gap: 12px; }
      .action__label { display: none; }
      .nav { padding: 0 20px; gap: 25px; overflow-x: auto; }
    }
    @media (max-width: 560px) {
      .notice { min-height: 38px; font-size: 11px; padding: 8px 16px; }
      .notice__item:nth-child(2), .notice__item:nth-child(3) { display: none; }
      .menu-button { display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); padding: 4px; }
      .header__main { grid-template-columns: auto 1fr auto; }
      .actions .action:first-child { display: none; }
      .nav { display: none; }
    }


/* =========================
   PIE DE PÁGINA FIJO
   ========================= */

.footer-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;

    background: #ffffff;
    border-top: 1px solid #e5e5e5;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 90px;

    z-index: 9999;

    font-family: Arial, Helvetica, sans-serif;

    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

/* Cada sección */
.footer-item {
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 210px;
}

/* Iconos */
.footer-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #78a66b;
    border-radius: 50%;

    color: #78a66b;
    font-size: 19px;
}

/* Título */
.footer-titulo {
    display: block;

    color: #666666;

    font-size: 11px;
    font-weight: 500;

    margin-bottom: 4px;
}

/* Texto */
.footer-item span:not(.footer-icon):not(.footer-titulo) {
    color: #444444;
    font-size: 13px;
}

/* Links */
.footer-item a {
    color: #444444;
    text-decoration: none;
    font-size: 13px;

    transition: color 0.2s ease;
}

.footer-item a:hover {
    color: #78a66b;
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 800px) {

    .footer-fijo {
        height: auto;
        min-height: 65px;

        gap: 20px;
        padding: 10px 15px;

        justify-content: space-around;
    }

    .footer-item {
        min-width: auto;
        gap: 8px;
    }

    .footer-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .footer-titulo {
        font-size: 9px;
    }

    .footer-item a,
    .footer-item span:not(.footer-icon):not(.footer-titulo) {
        font-size: 11px;
    }
}

@media (max-width: 550px) {

    .footer-fijo {
        gap: 8px;
        padding: 8px;
    }

    .footer-item {
        flex-direction: column;
        gap: 3px;
        text-align: center;
    }

    .footer-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .footer-titulo {
        margin-bottom: 1px;
    }
}