@font-face {
    font-family: 'Aldo';
    src: url('../font/aldo/Aldo-SemiBold.woff2') format('woff2'),
         url('../font/aldo/Aldo-SemiBold.woff') format('woff'),
         url('../font/aldo/Aldo-SemiBold.ttf') format('truetype'),
         url('../font/aldo/Aldo-SemiBold.svg#AldoSemiBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'myriad-Light';
    src: url('../font/myriad/MyriadPro-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'myriad-regular';
    src: url('../font/myriad/MyriadPro-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*{
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;      
}
.header_main{

}
.sociales li a img{
    width: 40px;
}
.section_anuncios{
    background-color: #064453;
    padding: 10px 0px;
}
.section_anuncios p{
    color: #ffffff;
    margin: 0px;
    font-size: 13px;
}
.section_anuncios p span{
    color: #ffffff;
    font-size: 15px;
}
.nav_header .logo{
    width: 120px;
}
.navbar-nav li a{
    text-transform: uppercase;
    color: #064453;
    font-size: 16px;
}
.navbar-nav li{
    padding: 0px 15px;
}
.navbar-nav li a.active{
    color: #0e5365 !important;
    border-bottom: 3px solid;
}

/* HEADER - acciones (según diseño) */
.nav_header{
    background: #ffffff;
}
.nav_principal .nav-link{
    padding-top: 10px;
    padding-bottom: 10px;
}
.btn_contactanos{
    background: #0e5365;
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 18px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
    border: 2px solid rgba(6,68,83,.10);
}
.hoja_1{
    position: absolute;
    width: 67px;
    bottom: 88px;
    left: -60px;
}
.hoja_1 img{
    width: 100%;
}
.hoja_2{
    position: absolute;
    width: 67px;
    top: 15px;
    right: 50px;
}
.hoja_2 img{
    width: 100%;
}
.btn_contactanos.is-active{
    outline: 2px solid rgba(6,68,83,.35);
    outline-offset: 2px;
}
.nav_buscar{
    display: flex;
    align-items: center;
    border: 2px solid rgba(6,68,83,.25);
    border-radius: 999px;
    overflow: hidden;
    background: #ffffff;
    min-width: 280px;
}
.nav_buscar input{
    border: 0;
    outline: 0;
    padding: 10px 14px;
    width: 100%;
    font-family: 'myriad-Light';
    font-size: 14px;
}
.nav_buscar button{
    border: 0;
    background: #064453;
    color: #ffffff;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.nav_buscar button img{
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}
.nav_icons{
    display: flex;
    gap: 10px;
}
.nav_icon_btn{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 2px solid rgba(6,68,83,.25);
    background: #ffffff;
    display: grid;
    place-items: center;
    text-decoration: none;
}
.nav_icon_btn:hover{
    border-color: rgba(6,68,83,.4);
}
.nav_icon_btn img{
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}
.nav_user_toggle::after{
    display: none;
}
.nav_user_menu .nav_icon_btn{
    cursor: pointer;
}
.nav_user_dropdown{
    border-radius: 14px;
    border: 1px solid rgba(6,68,83,.18);
    box-shadow: 0 14px 28px rgba(0,0,0,.12);
    min-width: 190px;
    padding: 8px;
    margin-top: 8px !important;
}
.nav_user_dropdown .dropdown-item{
    border-radius: 10px;
    color: #064453;
    font-size: 14px;
    padding: 9px 12px;
}
.nav_user_dropdown .dropdown-item.active,
.nav_user_dropdown .dropdown-item:active{
    background: rgba(6,68,83,.09);
    color: #064453;
}
.nav_user_dropdown .dropdown-item:hover{
    background: rgba(6,68,83,.06);
}
.nav_user_dropdown .dropdown-divider{
    margin: 6px 2px;
}
.cliente_nombre{
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #064453;
    border: 2px solid rgba(6,68,83,.18);
    border-radius: 999px;
    padding: 8px 12px;
}

/* Módulo Mi cuenta (perfil + compras + logout) */
.nav_cuenta_modulo{
    position: relative;
}
.nav_cuenta_btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(260px, 52vw);
    padding: 6px 12px 6px 8px;
    border-radius: 999px;
    border: 2px solid rgba(6,68,83,.22);
    background: #ffffff;
    color: #064453;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nav_cuenta_btn:hover{
    border-color: rgba(6,68,83,.4);
    background: #fbfffe;
}
.nav_cuenta_btn.is-active{
    border-color: rgba(124,179,66,.55);
    box-shadow: 0 0 0 3px rgba(165,222,106,.25);
}
.nav_cuenta_btn__iconwrap{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(6,68,83,.06);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.nav_cuenta_btn__text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
}
.nav_cuenta_btn__caret{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(6,68,83,.55);
    flex-shrink: 0;
    margin-left: 2px;
}
.nav_cuenta_dropdown{
    min-width: 220px;
}
.nav_cuenta_logout{
    color: #b42318 !important;
}
.nav_cuenta_logout:hover{
    background: rgba(180,35,24,.08) !important;
}

.perfil-form__label{
    color: #064453;
    font-size: 14px;
    font-weight: 600;
}
.perfil-form__control{
    border-radius: 12px;
    border: 2px solid rgba(6,68,83,.16);
    padding: 10px 14px;
}
.perfil-form__control:focus{
    border-color: rgba(6,68,83,.35);
    box-shadow: 0 0 0 3px rgba(165,222,106,.2);
}
.perfil-form__divider{
    border-top: 1px solid rgba(6,68,83,.1);
}
.perfil-form__section-title{
    font-size: 1.05rem;
    color: #064453;
    margin-bottom: 0.25rem;
}
.nav_cart_btn{
    position: relative;
}
.cart_badge{
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #0e5365;
    color: #ffffff;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(6,68,83,.35);
}

/* Carrito flotante (FAB) + aviso al agregar */
.cart-fab{
    position: fixed;
    z-index: 1040;
    right: max(18px, env(safe-area-inset-right, 0px));
    bottom: max(22px, env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid rgba(6, 68, 83, 0.22);
    box-shadow:
        0 12px 28px rgba(6, 24, 30, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px) scale(0.92);
    transition:
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.cart-fab.cart-fab--active{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.cart-fab:hover{
    border-color: rgba(6, 68, 83, 0.42);
    box-shadow:
        0 16px 34px rgba(6, 24, 30, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}
.cart-fab:focus-visible{
    outline: 3px solid rgba(165, 222, 106, 0.55);
    outline-offset: 3px;
}
.cart-fab__inner{
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}
.cart-fab__inner img{
    display: block;
    opacity: 0.92;
}
.cart-fab__badge{
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    font-weight: 700;
    font-size: 11px;
}
.cart-fab__pulse{
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(165, 222, 106, 0.55);
    opacity: 0;
    pointer-events: none;
}
.cart-fab--bump .cart-fab__pulse{
    animation: cartFabRing 0.65s ease-out;
}
.cart-fab--bump{
    animation: cartFabBump 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cartFabBump{
    0%{ transform: translateY(0) scale(1); }
    35%{ transform: translateY(-4px) scale(1.06); }
    100%{ transform: translateY(0) scale(1); }
}
@keyframes cartFabRing{
    0%{ transform: scale(0.85); opacity: 0.65; }
    100%{ transform: scale(1.35); opacity: 0; }
}
body.page-carrito .cart-fab{
    display: none !important;
}

.cart-snackbar{
    position: fixed;
    z-index: 1041;
    left: 50%;
    bottom: calc(max(22px, env(safe-area-inset-bottom, 0px)) + 58px + 14px);
    width: min(420px, calc(100vw - 32px));
    transform: translateX(-50%) translateY(140%);
    opacity: 0;
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
    pointer-events: none;
}
.cart-snackbar.is-visible{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.cart-snackbar__inner{
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 12px 12px 14px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(6, 68, 83, 0.14);
    box-shadow:
        0 18px 40px rgba(6, 24, 30, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}
.cart-snackbar__check{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(165, 222, 106, 0.35);
    color: #064453;
    flex-shrink: 0;
}
.cart-snackbar__msg{
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: rgba(6, 68, 83, 0.88);
}
.cart-snackbar__cta{
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: #064453;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid rgba(6, 68, 83, 0.12);
}
.cart-snackbar__cta:hover{
    color: #ffffff;
    filter: brightness(1.04);
}
.cart-snackbar__close{
    grid-column: 4;
    border: none;
    background: transparent;
    color: rgba(6, 68, 83, 0.45);
    font-size: 1.35rem;
    line-height: 1;
    padding: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}
.cart-snackbar__close:hover{
    color: #064453;
    background: rgba(6, 68, 83, 0.06);
}
body.page-carrito .cart-snackbar{
    display: none !important;
}
@media (max-width: 480px){
    .cart-snackbar__inner{
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .cart-snackbar__cta{
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }
    .cart-snackbar__close{
        grid-column: auto;
        position: absolute;
        top: 8px;
        right: 8px;
    }
    .cart-snackbar__inner{
        position: relative;
        padding-right: 36px;
    }
}
@media (prefers-reduced-motion: reduce){
    .cart-fab,
    .cart-snackbar{
        transition: none;
    }
    .cart-fab--bump,
    .cart-fab--bump .cart-fab__pulse{
        animation: none;
    }
    .cart-fab.cart-fab--active{
        transform: translateY(0) scale(1);
    }
}

/* Modal login / registro (tienda) */
.modal-auth .modal-content{
    overflow: hidden;
}
.modal-auth__dialog{
    max-width: 460px;
}
.modal-auth__panel{
    border: none;
    border-radius: 22px;
    box-shadow:
        0 28px 60px rgba(6, 24, 30, 0.22),
        0 0 0 1px rgba(6, 68, 83, 0.06);
}
.modal-auth__accent{
    height: 5px;
    width: 100%;
    background: linear-gradient(90deg, #064453 0%, #0a6b7a 40%, #a5de6a 100%);
}
.modal-auth__head{
    border: 0;
    padding: 1.35rem 1.35rem 0.5rem 1.5rem;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0.75rem;
}
.modal-auth__title{
    font-size: 1.35rem;
    font-weight: 600;
    color: #064453;
    letter-spacing: -0.02em;
    margin: 0;
}
.modal-auth__lead{
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgba(6, 68, 83, 0.72);
    max-width: 32ch;
}
.modal-auth__close{
    margin: -0.25rem -0.35rem 0 0;
    opacity: 0.55;
    padding: 0.6rem;
    border-radius: 10px;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.modal-auth__close:hover{
    opacity: 1;
    background: rgba(6, 68, 83, 0.06);
}
.modal-auth__body{
    padding: 0 1.5rem 1.35rem;
}
.modal-auth__tabs{
    display: flex;
    width: 100%;
    gap: 6px;
    padding: 5px;
    margin: 0 0 1.15rem;
    background: rgba(6, 68, 83, 0.07);
    border-radius: 14px;
    border: 1px solid rgba(6, 68, 83, 0.08);
}
.modal-auth__tabs .nav-item{
    flex: 1;
}
.modal-auth__tabs .nav-link{
    width: 100%;
    border: none;
    border-radius: 11px;
    padding: 0.55rem 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    color: rgba(6, 68, 83, 0.65);
    background: transparent;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}
.modal-auth__tabs .nav-link:hover{
    color: #064453;
    background: rgba(255, 255, 255, 0.45);
}
.modal-auth__tabs .nav-link.active{
    color: #064453;
    background: #fff;
    box-shadow: 0 4px 14px rgba(6, 68, 83, 0.12);
}
.modal-auth__panes{
    min-height: 0;
}
.modal-auth__form{
    margin: 0;
}
.modal-auth__field .form-control{
    border-radius: 12px;
    border: 1.5px solid rgba(6, 68, 83, 0.16);
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.modal-auth__field .form-control:focus{
    border-color: rgba(6, 68, 83, 0.45);
    box-shadow: 0 0 0 4px rgba(165, 222, 106, 0.28);
}
.modal-auth__field .form-floating > label{
    color: rgba(6, 68, 83, 0.55);
    padding-left: 1rem;
}
.modal-auth__field .form-floating > .form-control:focus ~ label,
.modal-auth__field .form-floating > .form-control:not(:placeholder-shown) ~ label{
    color: rgba(6, 68, 83, 0.75);
}
.modal-auth__optional{
    font-weight: 400;
    font-size: 0.82em;
    opacity: 0.85;
}
.modal-auth__submit{
    border: none;
    border-radius: 999px;
    padding: 0.72rem 1.25rem;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 0.25rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.modal-auth__submit:active{
    transform: scale(0.98);
}
.modal-auth__submit--primary{
    background: linear-gradient(165deg, #064453 0%, #043440 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(6, 68, 83, 0.28);
}
.modal-auth__submit--primary:hover{
    color: #fff;
    filter: brightness(1.06);
    box-shadow: 0 10px 26px rgba(6, 68, 83, 0.32);
}
.modal-auth__submit--accent{
    background: linear-gradient(165deg, #b3eb71 0%, #9fd85f 100%);
    color: #064453;
    box-shadow: 0 8px 22px rgba(130, 190, 70, 0.35);
}
.modal-auth__submit--accent:hover{
    color: #043440;
    filter: brightness(1.04);
    box-shadow: 0 10px 26px rgba(130, 190, 70, 0.4);
}
.modal-auth__legal{
    margin: 1rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(6, 68, 83, 0.55);
    text-align: center;
}
.modal-auth__legal a{
    color: #064453;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.modal-auth__legal a:hover{
    color: #043440;
}
.modal-auth.modal.show .modal-auth__panel{
    animation: modalAuthIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes modalAuthIn{
    from{
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@media (max-width: 576px){
    .modal-auth__dialog{
        margin: 0.65rem;
    }
    .modal-auth__head{
        padding: 1.1rem 1.1rem 0.35rem 1.15rem;
    }
    .modal-auth__body{
        padding: 0 1.15rem 1.15rem;
    }
    .modal-auth__lead{
        max-width: none;
    }
}

@media (max-width: 992px){
    .nav_buscar{ min-width: 100%; }
    .nav_acciones{ width: 100%; justify-content: center; flex-wrap: wrap; }
    .cliente_nombre{ max-width: 100%; }
}
    .hero {
      position: relative;
      min-height: 88vh;
      display: flex;
      align-items: center;
      justify-content: center;
      /* overflow: hidden; */
    }
.hero-slider{
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-slide{
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .9s ease;
}
.hero-slide::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,46,48,.45) 0%, rgba(10,46,48,.15) 60%, transparent 100%);
}
.hero-slide.is-active{
    opacity: 1;
}
    .hero_efecto_s{
        position: absolute;
        width: 100%;
        bottom: -91px;
        z-index: 9999;
    }
    .hero_efecto_s img{
        width: 100%;
    }
        .hero-wave {
      position: absolute; bottom: -2px; left: 0; width: 100%;
    }
    .hero-wave path { }
    .hero-content { text-align: center; color: var(--white); padding: 0 16px; margin-top: 130px; }
    .hero-content h1 {
     
      font-size: clamp(2rem, 5vw, 3.7rem);
      font-weight: 500;
      line-height: 1.2;
      text-shadow: 0 2px 24px rgba(0,0,0,.4);
      color: #ffffff;
    }
    .hero-content h1 em {
      font-style: italic;
      color: var(--lime);
    }

.nosotros{
    padding: 150px 0px 100px;
}
.nosotros h2{
    color: #064453;
    font-size: 40px;
    margin-bottom: 50px;
}
.nosotros p{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    font-size: 18px;
    line-height: 1.6;
}

/**/
.row_productos{
    padding: 50px 50px;
    background-color: #f2f2f2;
    border-radius: 40px;
    background: url(../img/fondo_productos.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.owl-products{}
.card_producto{
    background-color: #ffffff;
    padding: 57px 20px 20px 20px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    text-align: center;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card_producto .img_pro{
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card_producto .img_pro img{
    max-height: 200px;
    max-width: 100%;
    object-fit: contain;
}
.card_producto .contenido_pro{
    background-color: #064453;
    color: #ffffff;
    padding: 30px 12px 22px 12px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 200px;
}
.card_producto .contenido_pro h4{
    font-size: 15px;
    text-transform: capitalize;
    line-height: 1.35;
    min-height: calc(1.35em * 2);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card_producto .contenido_pro p{
    font-size: 26px;
    line-height: 1.1;
    min-height: calc(1.1em * 1);
    margin-bottom: 14px;
}
.card_producto .contenido_pro a,
.card_producto .contenido_pro button.js-add-cart{
    background-color: #ffffff;
    display: block;
    border-radius: 20px;
    padding: 9px 25px;
    width: fit-content;
    margin: auto;
    text-decoration: none;
    color: #064453;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    margin-top: auto;
}
/**/
.slider_home{
    padding: 100px 0px;
    background: url(../img/fondo_home.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 90px 0px 0px 0px;
}
.slider_home h2{
    color: #ffffff;
}
.slider_home .owl-imgs .owl-items-imgs img{
    border-radius: 50px;
}
/**/
.section_datos .row_borders{
    border: 3px solid #064453;
    border-radius: 100px;
    padding: 20px 28px;
    margin: 100px 0px;
}
/* Evita que títulos largos invadan la columna vecina (min-width en flex) */
.section_datos .row_borders > .row > [class*="col-"]{
    min-width: 0;
}
.section_datos .row_borders .flex_datos{
    display: flex;
    align-items: center;
    gap: 12px 14px;
    min-width: 0;
}
.section_datos .row_borders .flex_datos .medio_datos{
    text-align: center;
}
.section_datos .row_borders .flex_datos .medio_datos:first-child{
    flex: 0 0 auto;
    width: auto;
    max-width: 38%;
}
.section_datos .row_borders .flex_datos .medio_datos:first-child img{
    display: block;
    margin: 0 auto;
    max-width: min(120px, 100%);
    height: auto;
    object-fit: contain;
}
.section_datos .row_borders .flex_datos .medio_datos:last-child{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}
.section_datos .row_borders .flex_datos .medio_datos p{
    font-size: clamp(1.35rem, 3.8vw, 60px);
    color: #154a59;
    margin: 0;
    line-height: 1.12;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.owl-products{
    margin: 30px 0px 0px 0px;
}
.owl-products .owl-stage{
    padding: 10px 0px;
}
.section_datos .row_borders .flex_datos .medio_datos span{
    font-family: 'myriad-Light';
    font-weight: 600;
    font-size: clamp(0.95rem, 2.1vw, 25px);
    line-height: 1.25;
    display: block;
    margin-top: 6px;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/**/
.section_metodo_pago .alto_imagen_footer{
    height: 520px;
    background-color: #f2f2f2;
}
.section_metodo_pago .alto_imagen_footer img{
    width: 100%;
    height: 100%;
}

/*FOOTER*/
.footer_componente{
    padding: 70px 0px;
    background-color: #064453;;
}
.footer_componente .img_footer img{
    width: 150px;
}
.footer_componente .frase_footer p{
    color: #ffffff;
    font-size: 18px;
    font-family: 'myriad-regular';
    font-weight: 600;
    letter-spacing: 1px;
}
.footer_componente h5{
    color: #ffffff;
    font-size: 18px;
    font-family: 'myriad-regular';
    font-weight: 600;
    letter-spacing: 2px;
}
.footer_componente p{
    margin: 0px;
}
.footer_componente ul{
    padding: 0px;
    margin: 30px 0px 0px 0px;
    list-style: none;
}
.footer_componente ul li{
    margin-bottom: 10px;
}
.footer_componente ul li a{
    font-family: 'myriad-Light';
    color: #d6d6d6;
    text-decoration: none;
}
.footer_componente ul li p{
    font-family: 'myriad-Light';
    color: #d6d6d6;
}
.footer_componente ul li p b{
    color: #fefefe;
    font-family: 'myriad-regular';
    font-weight: 500;
}

/* ===== PÁGINA: NOSOTROS ===== */
.page-hero{
    position: relative;
    padding: 90px 0px 115px 0px;
 
    overflow: hidden;
    background: url(../img/banner_nosotros.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-hero h1{
    color: #ffffff;
    font-size: 56px;
    margin: 0px;
}
.page-hero-wave{
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 80px;
}
.page-hero-wave path{
    fill: #ffffff;
}

.section-origen{
    padding: 90px 0px 80px 0px;
}
.section-origen h2{
    color: #064453;
    font-size: 38px;
    margin-bottom: 14px;
}
.section-origen h2 img{
    width: 80px;
}
.section-origen .origen-text p{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 14px;
    text-align: justify;
}
.leaf{
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    transform: translateY(2px);
    background: #a5de6a;
    -webkit-mask: radial-gradient(circle at 30% 30%, transparent 10px, #000 11px) no-repeat;
    mask: radial-gradient(circle at 30% 30%, transparent 10px, #000 11px) no-repeat;
    border-radius: 8px;
}
.card-origen{
    background: #f5f5f5;
    border-radius: 24px;
    padding: 26px 26px 22px 26px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    border: 1px solid rgba(6,68,83,.10);
    text-align: center;
}
.card-origen__icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgb(6 68 83);
    color: #064453;
    display: grid;
    place-items: center;
    margin: 0 auto 14px auto;
}
.icon-svg{
    width: 60px;
    height: 50px;
    object-fit: contain;
    display: block;
}
.icon-svg--lg{
    width: 120px;
    height: 120px;
}
.card-origen h3{
    color: #064453;
    font-size: 24px;
    margin-bottom: 10px;
}
.card-origen p{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    font-size: 16px;
    line-height: 1.6;
    margin: 0px;
}

.section-valores{
    padding: 170px 0px 90px 0px;
    background: linear-gradient(180deg, #0b4f5f 0%, #083e49 100%);
    background: url(../img/fondo_nosotros.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-valores h2{
    color: #ffffff;
    font-size: 38px;
}
.valores-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
    justify-content: center;
}
.valor{
    text-align: center;
    color: #ffffff;
}
.valor__title{
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.valor__icon{
    color: #a5de6a;
    display: inline-flex;
}
.valores-collage{
    border-radius: 28px;
    padding: 18px;
    border: 2px solid rgba(255,255,255,.35);
    background: rgba(0,0,0,.08);
}
.collage-grid{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-auto-rows: 180px;
    gap: 14px;
}
.collage{
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
}
.collage img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.collage--tall{
    grid-row: span 2;
}
.collage--wide{
    grid-column: span 2;
}
.mapa-wrap{
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.18);
}
.mapa-wrap iframe{
    width: 100%;
    height: 220px;
    border: 0;
    display: block;
}

@media (max-width: 992px){
    .page-hero h1{ font-size: 44px; }
    .valores-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px){
    .page-hero{ padding: 78px 0px 64px 0px; }
    .page-hero h1{ font-size: 38px; }
    .collage-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; }
    .collage--wide{ grid-column: span 2; }
}

/* ===== PÁGINA: CONTÁCTANOS ===== */
.page-hero--contactanos{
    position: relative;
    padding: 90px 0px 115px 0px;
 
    overflow: hidden;
    background: url(../img/banner_nosotros.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-hero--contactanos h1{ font-size: 56px; }
.section-contacto{
    padding: 90px 0px 110px 0px;
    background: #ffffff;
}
.contacto-info h2{
    color: #064453;
    font-size: 44px;
    line-height: 1.05;
    margin-bottom: 14px;
}
.contacto-frase{
    font-family: 'myriad-Light';
    color: #022027;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
    font-weight: 500;
}
.contacto-datos p{
    font-family: 'myriad-Light';
    color: #0a3f4b;
    margin-bottom: 8px;
}
.card-contacto{
    padding: 10px;
    border-radius: 26px;
    background: rgba(165,222,106,.12);
}
.contacto-form .form-control{
    border-radius: 14px;
    border: 2px solid rgba(6,68,83,.55);
    font-family: 'myriad-Light';
}
.btn-enviar-contacto{
    background: #064453;
    color: #ffffff;
    padding: 14px 44px;
    border-radius: 999px;
    border: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 18px;
    display: inline-block;
}

/* Libro de reclamaciones (formulario tienda) */
.claims-section{
    background: linear-gradient(180deg, #f6faf9 0%, #ffffff 28%);
}
.claims-intro__img{
    border-radius: 22px;
    border: 2px solid rgba(6, 68, 83, 0.14);
    box-shadow: 0 16px 40px rgba(6, 24, 30, 0.08);
    margin-bottom: 1.25rem;
}
.claims-intro__text{
    font-size: 1.05rem;
    line-height: 1.55;
}
.claims-form-card{
    background: #ffffff;
    border-radius: 22px;
    border: 2px solid rgba(6, 68, 83, 0.12);
    box-shadow: 0 18px 48px rgba(6, 24, 30, 0.07);
    padding: 1.75rem 1.75rem 1.5rem;
}
.claims-form-card__title{
    color: #064453;
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}
.claims-form-card__sub{
    margin-bottom: 1.25rem;
}
.claims-form__hp{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.claims-form .form-label{
    color: rgba(6, 68, 83, 0.88);
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.35rem;
}
.claims-form__control{
    border-radius: 12px;
    border: 1.5px solid rgba(6, 68, 83, 0.18);
    padding: 0.55rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.claims-form__control:focus{
    border-color: rgba(6, 68, 83, 0.45);
    box-shadow: 0 0 0 4px rgba(165, 222, 106, 0.28);
}
.claims-form__textarea{
    min-height: 140px;
    resize: vertical;
}
.claims-form__actions{
    margin-top: 1.35rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(6, 68, 83, 0.08);
}
.claims-form__submit{
    background: linear-gradient(165deg, #064453 0%, #043440 100%);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.72rem 2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.88rem;
    box-shadow: 0 8px 22px rgba(6, 68, 83, 0.22);
    transition: filter 0.15s ease, transform 0.12s ease;
}
.claims-form__submit:hover{
    color: #fff;
    filter: brightness(1.06);
}
.claims-form__submit:active{
    transform: scale(0.98);
}
.claims-form__submit.is-loading{
    opacity: 0.72;
    pointer-events: none;
}
@media (max-width: 991px){
    .claims-form-card{
        padding: 1.35rem 1.2rem;
    }
}

/* ===== PÁGINA: NUESTRO CAFÉ ===== */
.page-hero--nuestro-cafe{
    position: relative;
    padding: 90px 0px 115px 0px;
 
    overflow: hidden;
    background: url(../img/banner_nosotros.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-hero--nuestro-cafe h1{ font-size: 56px; }
.icon-inline img{
    width: 70px;
    height: 72px;
    object-fit: contain;
    display: inline-block;
    transform: translateY(-2px);
}
.section-que-ofrecemos{
    padding: 90px 0px 70px 0px;
}
.section-que-ofrecemos h2{
    color: #064453;
    font-size: 40px;
}
.texto-sec{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    font-size: 18px;
    line-height: 1.7;
    margin-top: 14px;
}
.variedades-grid{
    --variedad-gap: 1.5rem;
}
.variedad{
    height: 100%;
    padding: 1.6rem 1.15rem 1.5rem;
    border-radius: 22px;
    background: linear-gradient(165deg, #fbfffe 0%, #f2f8f5 55%, #eef6f1 100%);
    border: 1px solid rgba(6,68,83,.1);
    box-shadow: 0 12px 32px rgba(6,68,83,.07);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.variedad:hover{
    transform: translateY(-5px);
    box-shadow: 0 20px 46px rgba(6,68,83,.12);
    border-color: rgba(124,179,66,.35);
}
.variedad__visual{
    min-height: 188px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
}
.variedad__img{
    width: 100%;
    max-width: 150px;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 10px 18px rgba(6,68,83,.12));
}
.variedad__name{
    display: inline-block;
    margin: 0.5rem 0 0;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid rgba(6,68,83,.22);
    background: rgba(165,222,106,.22);
    color: #064453;
    font-size: 1.05rem;
    font-family: 'myriad-regular', 'Cal Sans', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
}
.variedad__hint{
    margin: 0.85rem 0 0;
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #5a6f73;
    max-width: 260px;
    margin-left: auto;
}
.section-frase-cafe{
    position: relative;
    padding: 150px 0px 120px;
    background: url(../img/fondo_nosotros.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    overflow: hidden;
}
.procesos-grid{
    margin-top: 1.5rem;
}
.card-proceso{
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(6,68,83,.18);
    box-shadow: 0 14px 35px rgba(6,68,83,.1);
    transition: transform .25s ease, box-shadow .25s ease;
}
.card-proceso:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(6,68,83,.16);
}
.card-proceso__icon img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}
.card-proceso__body{
    padding: 18px 18px 20px;
    text-align: left;
}
.card-proceso__body h3{
    color: #064453;
    margin-bottom: 8px;
}
.card-proceso__body p{
    color: #4e666b;
    line-height: 1.55;
    margin: 0;
}
.socios .row{
    row-gap: 1rem;
}
.card-socio{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.35);
    box-shadow: 0 16px 34px rgba(0,0,0,.2);
}
.card-socio__icon img{
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}
.card-socio__txt{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 31, 39, .85) 100%);
}
.card-socio__txt h3{
    margin: 0;
    color: #ffffff;
}
.card-socio__overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px;
    color: #ffffff;
    background: rgba(4, 55, 66, .88);
    opacity: 0;
    transition: opacity .28s ease;
}
.card-socio:hover .card-socio__overlay{
    opacity: 1;
}
.card-socio__overlay p{
    margin: 0;
    font-family: 'myriad-Light';
    font-size: 17px;
    line-height: 1.5;
}
/*.section-frase-cafe::before{*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: -2%;*/
/*    right: -2%;*/
/*    top: -36px;*/
/*    height: 130px;*/
/*    background:*/
/*      radial-gradient(120% 95px at 8% 100%, rgba(255,255,255,.24) 0 56%, transparent 57%),*/
/*      radial-gradient(120% 95px at 28% 100%, rgba(255,255,255,.13) 0 56%, transparent 57%),*/
/*      radial-gradient(120% 95px at 50% 100%, rgba(255,255,255,.2) 0 56%, transparent 57%),*/
/*      radial-gradient(120% 95px at 72% 100%, rgba(255,255,255,.12) 0 56%, transparent 57%),*/
/*      radial-gradient(120% 95px at 92% 100%, rgba(255,255,255,.22) 0 56%, transparent 57%);*/
/*    pointer-events: none;*/
/*    z-index: 0;*/
/*}*/
.section-frase-cafe .container{
    position: relative;
    z-index: 1;
}
.frase-cafe{
    font-size: clamp(27px, 3.2vw, 44px);
    line-height: 1.22;
    margin: 0 auto 34px;
    max-width: 900px;
    font-family: 'myriad-regular';
    font-weight: 700;
    text-shadow: 0 8px 25px rgba(0,0,0,.2);
}
.stats-cafe{
    border-radius: 34px;
    border: 2px solid rgba(255,255,255,.65);
    padding: 28px 32px 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    background: rgba(0, 35, 44, 0.22);
    box-shadow: 0 16px 42px rgba(0,0,0,.2);
}
.stat{
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    text-align: left;
}
.stat__icon{
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.22));
}
.stat__txt{
    font-family: 'myriad-Light';
    font-size: 22px;
    line-height: 1.18;
}
.stat__txt span{
    font-family: 'myriad-Light';
    font-size: 18px;
    line-height: 1.18;
    font-weight: 200;
}
.stat__txt b{
    background-color: #ffffff;
    border-radius: 6px;
    color: #043440;
    padding: 1px 15px;
    letter-spacing: 1px;
    margin-bottom: -20px;
    display: block;
}
.stat__year{
    font-family: 'myriad-regular';
    font-weight: bolder !important;
    font-size: 30px !important;
    letter-spacing: .01em;
}

/* ===== PÁGINA: LISTADO PRODUCTOS ===== */
.banner-tienda{
    padding: 0px 0px 60px 0px;
    background: #ffffff;
}
.banner-left, .banner-right{
    border-radius: 26px;
    overflow: hidden;
    border: 2px solid rgba(6,68,83,.25);
    background: #f7f7f7;
    min-height: 150px;
}
.banner-left{
    position: relative;
    padding: 18px;
}
.banner-left__badge{
    position: absolute;
    top: 16px;
    left: 16px;
    transform: rotate(-10deg);
    color: #064453;
    font-size: 22px;
}
.banner-left__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}
.banner-right{
    background: linear-gradient(135deg, #064453 0%, #083e49 100%);
    color: #ffffff;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px 18px;
}
.banner-right__big{
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
}
.banner-right__big span{
    font-size: 22px;
    font-weight: 600;
}
.banner-right__sub{
    font-family: 'myriad-Light';
    margin-top: 8px;
}
.banner-right__btn{
    margin-top: 12px;
    display: inline-block;
    background: #b3eb71;
    color: #064453;
    text-decoration: none;
    border-radius: 999px;
    padding: 10px 22px;
    text-transform: uppercase;
}
.section-listado{
    padding: 40px 0px 110px 0px;
    background: #f3f3f3;
    background: url(../img/fondo_tapiz.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.fondo_container{
    background-color: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
    border-radius: 20px;
}
.titulo-listado{
    color: #064453;
    font-size: 34px;
}
.titulo-listado img{
    width: 80px;
    height: 80px;
}

/* Filtros listado por categoría */
.listado-filters{
    margin: 0 auto 1rem;
    max-width: 920px;
}
.listado-filters__hint{
    font-size: 0.95rem;
    color: rgba(6, 68, 83, 0.72);
    margin-top: 0.35rem;
}
.listado-filters__hint strong{
    color: #064453;
    font-weight: 600;
}
.listado-filters__inner{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    padding: 1.1rem 1.25rem;
    background: rgba(6, 68, 83, 0.05);
    border: 1px solid rgba(6, 68, 83, 0.12);
    border-radius: 16px;
}
.listado-filters__group{
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.listado-filters__group--grow{
    flex: 1 1 180px;
}
.listado-filters__label{
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(6, 68, 83, 0.65);
}
.listado-filters__row{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.listado-filters__input{
    width: 6.5rem;
    max-width: 100%;
    border-radius: 12px;
    border: 1.5px solid rgba(6, 68, 83, 0.18);
    font-size: 0.92rem;
    padding: 0.45rem 0.65rem;
}
.listado-filters__input:focus{
    border-color: rgba(6, 68, 83, 0.45);
    box-shadow: 0 0 0 3px rgba(165, 222, 106, 0.28);
}
.listado-filters__sep{
    color: rgba(6, 68, 83, 0.45);
    font-weight: 600;
    flex-shrink: 0;
}
.listado-filters__select{
    border-radius: 12px;
    border: 1.5px solid rgba(6, 68, 83, 0.18);
    font-size: 0.92rem;
    padding: 0.45rem 0.75rem;
}
.listado-filters__select:focus{
    border-color: rgba(6, 68, 83, 0.45);
    box-shadow: 0 0 0 3px rgba(165, 222, 106, 0.28);
}
.listado-filters__actions{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}
.listado-filters__btn{
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 1.15rem;
}
.listado-filters__btn--primary{
    background: linear-gradient(165deg, #064453 0%, #043440 100%);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px rgba(6, 68, 83, 0.22);
}
.listado-filters__btn--primary:hover{
    color: #fff;
    filter: brightness(1.06);
}
.listado-filters__btn--ghost{
    background: #fff;
    color: #064453;
    border: 2px solid rgba(6, 68, 83, 0.22);
}
.listado-filters__btn--ghost:hover{
    border-color: rgba(6, 68, 83, 0.4);
    color: #043440;
    background: rgba(6, 68, 83, 0.04);
}
.listado-filters__count{
    text-align: center;
    font-size: 0.88rem;
    color: rgba(6, 68, 83, 0.55);
    margin: 0 0 1.25rem;
}
.listado-grid--loading{
    opacity: 0.52;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
@media (max-width: 768px){
    .listado-filters__actions{
        width: 100%;
        margin-left: 0;
        justify-content: stretch;
    }
    .listado-filters__btn{
        flex: 1;
    }
}

.card-listado{
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid rgba(6,68,83,.22);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.35s ease;
    will-change: transform;
}
.card-listado:hover{
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(6, 68, 83, 0.11), 0 8px 20px rgba(6, 68, 83, 0.06);
    border-color: rgba(6, 68, 83, 0.38);
}
.card-listado:focus-within{
    border-color: rgba(6, 68, 83, 0.45);
    box-shadow: 0 0 0 3px rgba(6, 68, 83, 0.12);
}
.card-listado__link{
    text-decoration: none;
    color: inherit;
    display: block;
}
.card-listado__link:focus-visible{
    outline: none;
}
.card-listado__img{
    position: relative;
    height: 228px;
    padding: 0;
    text-align: center;
    overflow: hidden;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(6, 68, 83, 0.05);
}
.card-listado__img-inner{
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 20px;
}
.card-listado__img img,
.card-listado__photo{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.06));
}
.card-listado:hover .card-listado__img .card-listado__photo{
    transform: scale(1.06);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.08));
}
.card-listado__body{
    padding: 14px 16px 16px 16px;
    text-align: center;
}
.card-listado__title{
    color: #064453;
    font-size: 16px;
}
.card-listado__type{
    color: #064453;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
    text-transform: uppercase;
}
.card-listado__price{
    color: #064453;
    font-size: 18px;
    margin: 8px 0px;
}
.card-listado__meta{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
.mini-icon{
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: inline-block;
}
.flex_imagenes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.flex_imagenes .border_verde img{
    width: 100%;
    height: auto;
    display: block;
}
.flex_imagenes > img{
    width: min(320px, 100%);
    max-width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 30px;
    position: relative;
    border: 1px solid #ffffff;
}
/* Efecto solo en las 3 fotos (hijos 2–4; el 1 es el marco border_verde) */
.flex_imagenes > img:nth-child(2),
.flex_imagenes > img:nth-child(3),
.flex_imagenes > img:nth-child(4){
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.flex_imagenes > img:nth-child(2),
.flex_imagenes > img:nth-child(4){
    transform: scale(0.96);
    height: 220px;
}
.flex_imagenes > img:nth-child(3){
    transform: scale(1.04);
    z-index: 1;
    box-shadow: 0 12px 28px rgba(6, 68, 83, 0.15);
}
.flex_imagenes:hover > img:nth-child(3){
    transform: scale(1.06);
}
.flex_imagenes:hover > img:nth-child(2),
.flex_imagenes:hover > img:nth-child(4){
    transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce){
    .flex_imagenes > img:nth-child(2),
    .flex_imagenes > img:nth-child(3),
    .flex_imagenes > img:nth-child(4){
        transition: none;
        transform: none;
        box-shadow: none;
    }
    .flex_imagenes:hover > img:nth-child(2),
    .flex_imagenes:hover > img:nth-child(3),
    .flex_imagenes:hover > img:nth-child(4){
        transform: none;
    }
}
.card-listado__btn{
    display: inline-block;
    background: rgb(14 83 101);
    border: 2px solid rgba(6,68,83,.25);
    color: #ffffff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    text-transform: uppercase;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.card-listado:hover .card-listado__btn{
    background: rgb(14 83 101);
    border-color: rgba(6, 68, 83, 0.32);
}
@media (prefers-reduced-motion: reduce){
    .card-listado,
    .card-listado__img img,
    .card-listado__btn{
        transition: none;
    }
    .card-listado:hover{
        transform: none;
    }
    .card-listado:hover .card-listado__img .card-listado__photo{
        transform: none;
    }
}

/* ===== INTERACTION ENHANCEMENTS ===== */
.card-listado__img::before{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 15%, rgba(179,235,113,.22), transparent 58%);
    opacity: 0;
    transition: opacity .35s ease;
}
.card-listado:hover .card-listado__img::before{
    opacity: 1;
}
.card-listado__title,
.card_producto .contenido_pro h4{
    transition: color .25s ease, letter-spacing .25s ease;
}
.card-listado:hover .card-listado__title,
.card_producto:hover .contenido_pro h4{
    /* color: #0e5a6c; */
    letter-spacing: .01em;
}
.card-listado__price,
.card_producto .contenido_pro p{
    position: relative;
    display: inline-block;
}
.card-listado__price::after,
.card_producto .contenido_pro p::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: rgba(6,68,83,.35);
    transition: width .32s var(--ui-ease);
}
.card-listado:hover .card-listado__price::after,
.card_producto:hover .contenido_pro p::after{
    width: 100%;
}
.js-add-cart.is-adding{
    opacity: .75;
    pointer-events: none;
}
.js-add-cart.added-pulse{
    animation: cartPulse .65s ease;
}
@keyframes cartPulse{
    0%{ transform: scale(1); }
    45%{ transform: scale(1.04); }
    100%{ transform: scale(1); }
}

/* ===== PÁGINA: DETALLE PRODUCTO ===== */
.hero-producto{
    background: linear-gradient(180deg, rgba(6,68,83,.88) 0%, rgba(6,68,83,.80) 100%),
        url('assets/img/hero_producto.png') center/cover no-repeat;
    padding: 70px 0px;
    color: #ffffff;
}
.hero-producto h1{
    margin: 0px;
    font-size: 48px;
}
.section-detalle{
    padding: 60px 0px 110px 0px;
    background: #f3f3f3;
}
.detalle-card{
    background: #ffffff;
    border-radius: 26px;
    border: 2px solid rgba(6,68,83,.18);
    padding: 26px;
}
.detalle-img{
    border-radius: 18px;
    border: 2px solid rgba(6,68,83,.25);
    background: #ffffff;
    padding: 18px;
    display: grid;
    place-items: center;
    min-height: 260px;
}
.detalle-img img{
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
}
.detalle-thumbs{
    display: flex;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}
.thumb{
    width: 74px;
    height: 58px;
    border-radius: 12px;
    border: 2px solid rgba(6,68,83,.25);
    background: #ffffff;
    padding: 6px;
}
.thumb.active{
    border-color: rgba(165,222,106,.95);
}
.thumb img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.detalle-info h2{
    color: #064453;
    font-size: 22px;
    margin-bottom: 10px;
}
.detalle-tag{
    display: inline-block;
    background: rgba(179,235,113,.55);
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 14px;
}
.detalle-vendido{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    margin-bottom: 10px;
}
.detalle-chip{
    display: inline-block;
    background: rgba(179,235,113,.55);
    color: #064453;
    border-radius: 10px;
    padding: 2px 10px;
}
.detalle-precio-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    max-width: 240px;
    margin-bottom: 14px;
}
.detalle-precio{
    font-size: 18px;
    color: #064453;
    font-weight: 700;
}
.detalle-box{
    border-radius: 18px;
    border: 2px solid rgba(6,68,83,.25);
    padding: 14px;
    margin-bottom: 14px;
}
.detalle-box__title{
    color: #064453;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.detalle-list{
    margin: 0px;
    padding-left: 0px;
    list-style: none;
    font-family: 'myriad-Light';
    color: #7c7c7c;
}
.detalle-list li{
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.detalle-entrega__title{
    color: #064453;
    font-size: 14px;
    margin-bottom: 10px;
}
.detalle-entrega__grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.entrega{
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 14px;
    border: 2px solid rgba(6,68,83,.18);
    padding: 10px;
}
.btn-agregar{
    display: inline-block;
    background: #064453;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 18px;
    border-radius: 999px;
    width: 100%;
    text-align: center;
}
.detalle-descripcion{
    margin-top: 30px;
    background: transparent;
}
.detalle-descripcion h3{
    color: #064453;
    font-size: 22px;
    margin-bottom: 12px;
}
.detalle-descripcion p{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    margin-bottom: 10px;
}

/* Detalle producto: tabs Descripción / Características */
.detalle-tabs__nav .nav-link{
    color: #064453;
    font-weight: 600;
}
.detalle-tabs__nav .nav-link.active{
    color: #064453;
}
.detalle-tabs__content{
    border: 1px solid #dee2e6;
    border-top: 0;
    padding: 1.25rem 1rem;
    background: #fff;
    border-radius: 0 0 0.375rem 0.375rem;
}
.car-table-wrap{
    max-width: 100%;
    overflow-x: auto;
}
.car-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.car-table__head{
    background: #7d9474;
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 12px 16px;
    border: 1px solid #6d8a66;
    letter-spacing: 0.02em;
}
.car-table tbody tr{
    border: 1px solid #c5c5c5;
}
.car-table tbody td,
.car-table tbody th{
    border: 1px solid #c5c5c5;
    padding: 10px 12px;
    vertical-align: middle;
}
.car-table__icon{
    width: 48px;
    text-align: center;
    background: #faf8f5;
}
.car-table__dot{
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #8b6914;
    opacity: 0.9;
}
.car-table__label{
    color: #5c3d2e;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.car-table__value{
    color: #222;
    font-family: 'myriad-Light', sans-serif;
}
.car-table tfoot .car-table__foot{
    background: #7d9474;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-align: right;
    padding: 12px 16px;
    border: 1px solid #6d8a66;
}
.car-table__icon--foot{
    background: #7d9474;
    border-color: #6d8a66;
}

.detalle-caracteristicas-img{
    text-align: center;
    padding: 0.5rem 0;
}
.detalle-caracteristicas-img img{
    max-width: min(100%, 520px);
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

@media (max-width: 992px){
    .section-frase-cafe{
        padding: 120px 0 95px;
    }
    .section-frase-cafe::before{
        top: -24px;
        height: 92px;
    }
    .stats-cafe{
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 18px;
        border-radius: 24px;
    }
    .frase-cafe{
        font-size: clamp(22px, 6.5vw, 32px);
        margin-bottom: 24px;
    }
    .stat__icon{
        width: 74px;
        height: 74px;
    }
    .stat__txt{
        font-size: 18px;
    }
    .stat__year{
        font-size: 24px;
    }
    .hero-producto h1{ font-size: 38px; }
    .page-hero--contactanos h1,
    .page-hero--nuestro-cafe h1{ font-size: 44px; }
    .variedad{ padding: 1.25rem 1rem 1.35rem; }
    .variedad__visual{ min-height: 168px; }
    .variedad__name{ font-size: 1rem; padding: 7px 16px; }
    .nav_cuenta_btn{ max-width: min(220px, 70vw); font-size: 12px; }
}

/* ===== PÁGINA: CARRITO ===== */
.page-hero--carrito{
    position: relative;
    padding: 90px 0px 115px 0px;
 
    overflow: hidden;
    background: url(../img/banner_nosotros.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-hero--carrito h1{ font-size: 56px; }
.section-carrito{
    padding: 70px 0px 110px 0px;
    background: #f3f3f3;
}
.carrito-card{
    background: #ffffff;
    border-radius: 26px;
    border: 2px solid rgba(6,68,83,.18);
    overflow: hidden;
}
.carrito-head{
    display: grid;
    grid-template-columns: 1.6fr .7fr .7fr;
    gap: 10px;
    padding: 16px 18px;
    background: rgba(6,68,83,.04);
    color: #064453;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.carrito-item{
    display: grid;
    grid-template-columns: 1.6fr .7fr .7fr;
    gap: 10px;
    padding: 18px;
    border-top: 1px solid rgba(6,68,83,.12);
    align-items: center;
}
.carrito-prod{
    display: flex;
    gap: 14px;
    align-items: center;
}
.carrito-img{
    width: 76px;
    height: 76px;
    border-radius: 16px;
    border: 2px solid rgba(6,68,83,.18);
    background: #fff;
    object-fit: contain;
    padding: 8px;
}
.carrito-nombre{
    color: #064453;
    font-size: 16px;
}
.carrito-meta{
    font-family: 'myriad-Light';
    color: #7c7c7c;
    font-size: 14px;
}
.carrito-remove{
    font-family: 'myriad-Light';
    color: #064453;
    font-size: 13px;
    text-decoration: underline;
}
.carrito-cant{
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}
.cant-btn{
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid rgba(6,68,83,.18);
    background: #ffffff;
    color: #064453;
}
.cant-input{
    width: 58px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid rgba(6,68,83,.18);
    text-align: center;
    color: #064453;
}
.carrito-subtotal{
    text-align: right;
    color: #064453;
    font-size: 16px;
    font-weight: 700;
}
.resumen-card{
    background: #ffffff;
    border-radius: 26px;
    border: 2px solid rgba(6,68,83,.18);
    padding: 18px;
}
.resumen-card h2{
    color: #064453;
    font-size: 22px;
    margin-bottom: 14px;
}
.resumen-row{
    display: flex;
    justify-content: space-between;
    font-family: 'myriad-Light';
    color: #7c7c7c;
    padding: 10px 0px;
    border-bottom: 1px solid rgba(6,68,83,.10);
}
.resumen-total{
    display: flex;
    justify-content: space-between;
    padding: 14px 0px 18px 0px;
    color: #064453;
    font-size: 18px;
}
.btn-resumen{
    display: block;
    text-align: center;
    background: #064453;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 999px;
    width: 100%;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.btn-resumen:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}
@media (max-width: 992px){
    .page-hero--carrito h1{ font-size: 44px; }
    .carrito-head{
        display: none;
    }
    .carrito-item{ grid-template-columns: 1fr; }
    .carrito-subtotal{ text-align: left; }
    .carrito-cant{ justify-content: flex-start; }
    .img_efecto_home{
        display: none !important;
    }
}

/* ===== PÁGINA: PAGAR (checkout) ===== */
.pago-hero-lead{
    max-width: 560px;
    margin: 12px auto 0;
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
}
.pago-layout .pago-panel{
    background: #ffffff;
    border-radius: 26px;
    border: 2px solid rgba(6,68,83,.18);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.pago-panel__head{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(6,68,83,.05);
    border-bottom: 1px solid rgba(6,68,83,.1);
}
.pago-panel__head--yape{
    background: linear-gradient(120deg, rgba(116,39,132,.14) 0%, rgba(6,68,83,.05) 55%);
    border-bottom-color: rgba(116,39,132,.15);
}
.pago-panel__icon{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid rgba(6,68,83,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #064453;
}
.pago-panel__icon--yape{
    border-color: rgba(116,39,132,.35);
    color: #742784;
    background: rgba(255,255,255,.95);
}
.pago-panel__title{
    color: #064453;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    line-height: 1.25;
}
.pago-panel__sub{
    margin: 0;
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 14px;
    color: #6b6b6b;
    line-height: 1.4;
}
.pago-panel__body{
    padding: 22px 20px 26px;
}
.pago-brick-shell{
    border-radius: 18px;
    background: #f6f7f8;
    border: 1px solid rgba(6,68,83,.1);
    padding: 18px 16px;
    min-height: 100px;
}
.pago-hint{
    margin: 1rem 0 0;
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 13px;
    color: #6b6b6b;
    line-height: 1.5;
}
.pago-hint a{
    color: #064453;
    font-weight: 600;
}
.pago-yape-note{
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 13px;
    color: #5a5a5a;
    line-height: 1.55;
    margin-bottom: 1.1rem;
}
.pago-yape-note a{
    color: #742784;
    font-weight: 600;
}
.pago-input.form-control{
    border-radius: 12px;
    border: 2px solid rgba(6,68,83,.16);
    padding: 10px 14px;
    color: #064453;
}
.pago-input.form-control:focus{
    border-color: #064453;
    box-shadow: 0 0 0 0.2rem rgba(6,68,83,.12);
}
.pago-input.form-control::placeholder{
    color: #9a9a9a;
}
.pago-form-label{
    color: #064453;
    font-weight: 600;
    font-size: 14px;
}
.btn-yape{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 999px;
    padding: 14px 22px;
    background: linear-gradient(135deg, #6a1b7e 0%, #9b4dca 50%, #742784 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: filter .15s ease, transform .1s ease;
}
.btn-yape:hover:not(:disabled){
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff !important;
}
.btn-yape:disabled{
    opacity: .65;
    cursor: not-allowed;
}
.pago-sidebar{
    position: sticky;
    top: 1rem;
}
.pago-sidebar__title{
    color: #064453;
    font-weight: 700;
}
.pago-sidebar__label{
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #7c7c7c;
    margin-bottom: 6px;
}
.pago-sidebar__total{
    font-size: 2rem;
    font-weight: 700;
    color: #064453;
    line-height: 1.15;
    margin-bottom: 8px;
}
.pago-sidebar__meta{
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 14px;
    color: #6b6b6b;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(6,68,83,.1);
}
.pago-sidebar__secure{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 13px;
    color: #5a5a5a;
    line-height: 1.45;
}
.pago-sidebar__secure svg{
    flex-shrink: 0;
    margin-top: 2px;
    color: #064453;
    opacity: .85;
}
.pago-back{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #064453;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.pago-back:hover{
    color: #042f3a;
    text-decoration: underline;
}
@media (max-width: 991px){
    .pago-sidebar{
        position: relative;
        top: auto;
    }
    .pago-hero-lead{
        font-size: 15px;
    }
}

/* ===== CUENTA: mis compras, detalle, gracias ===== */
.page-hero--cuenta h1,
.page-hero--exito-ok h1,
.page-hero--exito-soft h1,
.page-hero--exito-fail h1{
    font-size: clamp(32px, 5vw, 48px);
}
.cuenta-hero-lead{
    max-width: 520px;
    margin: 14px auto 0;
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(255,255,255,.93);
}
.page-hero--exito-ok{
    background: linear-gradient(145deg, rgba(22,115,90,.92) 0%, rgba(6,68,83,.88) 55%, rgba(6,68,83,.82) 100%),
        url('assets/img/hero_carrito.png') center/cover no-repeat;
    padding: 72px 0 64px;
}
.page-hero--exito-soft{
    background: linear-gradient(180deg, rgba(120,95,40,.9) 0%, rgba(6,68,83,.85) 100%),
        url('assets/img/hero_carrito.png') center/cover no-repeat;
    padding: 72px 0 64px;
}
.page-hero--exito-fail{
    background: linear-gradient(180deg, rgba(120,50,45,.88) 0%, rgba(6,68,83,.85) 100%),
        url('assets/img/hero_carrito.png') center/cover no-repeat;
    padding: 72px 0 64px;
}
.section-cuenta{
    background: #f3f3f3;
    padding-bottom: 100px !important;
}
.cuenta-card{
    background: #fff;
    border-radius: 26px;
    border: 2px solid rgba(6,68,83,.18);
}
.cuenta-card--narrow{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.cuenta-link{
    color: #064453;
    font-weight: 600;
    text-decoration: none;
}
.cuenta-link:hover{
    color: #042f3a;
    text-decoration: underline;
}
.cuenta-exito-icon{
    color: rgba(255,255,255,.95);
    display: flex;
    justify-content: center;
}
.cuenta-exito-icon--warn{ color: #ffe8a3; }
.cuenta-exito-icon--fail{ color: #ffc9c4; }
.cuenta-exito-title{
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.cuenta-exito-items{
    border-top: 1px solid rgba(6,68,83,.1);
    padding-top: 12px;
}
.cuenta-exito-item{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(6,68,83,.06);
    font-size: 15px;
    color: #064453;
}
.cuenta-exito-item:last-child{ border-bottom: 0; }
.cuenta-exito-item-name{ font-family: 'myriad-Light', system-ui, sans-serif; }
.cuenta-exito-item-price{
    font-weight: 700;
    white-space: nowrap;
}
.cuenta-total-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid rgba(6,68,83,.12);
    font-size: 1.15rem;
    color: #064453;
}
.cuenta-total-bar strong{ font-size: 1.35rem; }
.cuenta-meta-card .cuenta-meta-text{
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 14px;
    color: #5a5a5a;
    line-height: 1.5;
}
.cuenta-table-head{
    grid-template-columns: 1fr 1.4fr 1.2fr 1fr 1fr;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(6,68,83,.06);
    color: #064453;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    display: grid;
}
.cuenta-table-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(6,68,83,.1);
    align-items: center;
}
@media (min-width: 768px){
    .cuenta-table-row{
        grid-template-columns: 1fr 1.4fr 1.2fr 1fr 1fr;
        gap: 12px;
    }
    .cuenta-mob-label{ display: none !important; }
}
.cuenta-cell--strong{ font-weight: 700; color: #064453; }
.cuenta-cell--total{ font-weight: 700; color: #064453; }
.cuenta-badge{
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.cuenta-badge--ok{ background: rgba(22,115,90,.15); color: #0d5c3f; }
.cuenta-badge--warn{ background: rgba(180,130,30,.18); color: #6b4e08; }
.cuenta-badge--info{ background: rgba(6,68,83,.12); color: #064453; }
.cuenta-badge--bad{ background: rgba(160,45,45,.14); color: #8f2222; }
.cuenta-badge--muted{ background: rgba(0,0,0,.06); color: #555; }
.cuenta-items .cuenta-item-row{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(6,68,83,.08);
}
.cuenta-items .cuenta-item-row:last-child{ border-bottom: 0; }
.cuenta-item-nombre{ color: #064453; font-weight: 600; }
.cuenta-item-meta{
    font-family: 'myriad-Light', system-ui, sans-serif;
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 4px;
}
.cuenta-item-sub{
    font-weight: 700;
    color: #064453;
    white-space: nowrap;
}
.cuenta-dl dt{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7c7c7c;
    margin-top: 12px;
}
.cuenta-dl dt:first-child{ margin-top: 0; }
.cuenta-dl dd{
    margin: 4px 0 0 0;
    color: #064453;
    font-size: 14px;
}
@media (max-width: 767px){
    .cuenta-hero-lead{ font-size: 15px; }
}

/* ===== MODERN REFRESH (global tienda) ===== */
:root{
    --ui-primary: #064453;
    --ui-primary-700: #053641;
    --ui-accent: #b3eb71;
    --ui-bg-soft: #f6f8f7;
    --ui-border: rgba(6,68,83,.14);
    --ui-shadow-sm: 0 8px 18px rgba(0,0,0,.06);
    --ui-shadow-md: 0 16px 36px rgba(6,68,83,.10);
    --ui-ease: cubic-bezier(.22,1,.36,1);
}
html{
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body{
    background: #ffffff;
    color: #0d3f49;
    overflow-x: clip;
}
img, video{
    max-width: 100%;
    height: auto;
}
.nav_header{
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(145%) blur(8px);
    box-shadow: 0 2px 10px rgba(6,68,83,.04);
}
.navbar-nav li a{
    transition: color .25s ease;
}
.navbar-nav li a:hover{
    color: #0f5668;
}
.btn_contactanos{
    box-shadow: 0 7px 16px rgba(179,235,113,.35);
    transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.btn_contactanos:hover{
    transform: translateY(-1px);
    box-shadow: 0 11px 20px rgba(179,235,113,.38);
    filter: saturate(1.06);
}
.section_anuncios{
    background: linear-gradient(90deg, #064453 0%, #0f5668 100%);
}
.hero,
.page-hero{
    position: relative;
}
.hero::after,
.page-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 90% 55% at 50% 100%, rgba(255,255,255,.10), transparent 70%);
    pointer-events: none;
}
.hero-content h1,
.page-hero h1{
    letter-spacing: .01em;
    text-shadow: 0 4px 20px rgba(0,0,0,.22);
    font-style: italic;
}
.hero-content{
    position: relative;
    z-index: 2;
}
.border_verde{
    position: absolute;
    width: 54%;
}
.position_button{
    margin: 90px 0px 0px 0px;
    text-align: center;
}
.position_button a{
    background-color: #0e5365;
    border: 0px;
    padding: 10px 20px;
    border-radius: 30px;
    color: #ffffff;
}
.position_button a:hover{
    background-color: #195757;
}
.border_verde img{
    width: 100%;
}
.hero-content h1 img{
    width: 250px;
}
.section-listado,
.section-carrito,
.section-cuenta,
.section-detalle{
    background-color: var(--ui-bg-soft);
}
.fondo_container,
.detalle-card,
.carrito-card,
.resumen-card,
.cuenta-card,
.pago-layout .pago-panel{
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
}
.card_producto,
.card-listado{
    box-shadow: 0 10px 22px rgba(6,68,83,.06);
}
.card_producto{
    transition: transform .35s var(--ui-ease), box-shadow .35s ease, border-color .35s ease;
    border-color: rgba(6,68,83,.20);
}
.card_producto:hover{
    transform: translateY(-6px);
    box-shadow: var(--ui-shadow-md);
    border-color: rgba(6,68,83,.30);
}
.card_producto .img_pro{
    /* background: #fff; */
}
.card_producto .img_pro img{
    transition: transform .45s var(--ui-ease), filter .3s ease;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.10));
}
.card_producto:hover .img_pro img{
    transform: scale(1.04);
}
.card_producto .contenido_pro button.js-add-cart,
.card-listado__btn,
.btn-resumen,
.btn-agregar{
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.card_producto .contenido_pro button.js-add-cart:hover,
.card-listado__btn:hover,
.btn-resumen:hover,
.btn-agregar:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(6,68,83,.16);
}
.card-listado__title,
.carrito-nombre,
.detalle-info h2,
.resumen-card h2,
.pago-panel__title,
.cuenta-item-nombre{
    letter-spacing: .01em;
}
.detalle-img{
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(6,68,83,.06), 0 12px 24px rgba(6,68,83,.09);
}
.detalle-thumbs .thumb{
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.detalle-thumbs .thumb:hover{
    transform: translateY(-2px);
    border-color: rgba(6,68,83,.40);
    box-shadow: 0 10px 16px rgba(6,68,83,.10);
}
.cant-input,
.pago-input.form-control,
.form-control{
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cant-input:focus,
.pago-input.form-control:focus,
.form-control:focus{
    border-color: rgba(6,68,83,.55);
    box-shadow: 0 0 0 .22rem rgba(6,68,83,.13);
}
.footer_componente{
    background: linear-gradient(145deg, #063844 0%, #064453 55%, #0a5868 100%);
}
.footer_componente .img_footer img{
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.20));
}
.footer_componente ul li a{
    transition: opacity .2s ease, color .2s ease;
}
.footer_componente ul li a:hover{
    color: #ffffff;
    font-weight: 400;
}
@media (max-width: 992px){
    .section-listado,
    .section-carrito,
    .section-cuenta,
    .section-detalle{
        padding-top: 34px;
        padding-bottom: 72px;
    }
}
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ========== Vista móvil optimizada (≤767px) ========== */
@media (max-width: 767.98px){
    .listado-filters__group--grow{
        flex: auto;
    }
    .hoja_2{
        top: -25px;
        right: 1px;  
    }
    .card-listado__body{
        padding: 0px 0px;
    }
    .card-listado__img-inner{
        padding: 0px;
    }
    .card-listado__title{
        font-size: 14px;
    }
    .card-listado__img{
        height: 170px;
    }
    .card-listado__price{
        font-size: 15px;
    }
    .section_anuncios{
        padding: 8px 10px;
    }
    .section_anuncios p{
        font-size: 11px;
        line-height: 1.35;
        padding: 0 6px;
        word-wrap: break-word;
    }
    .nav_header .logo{
        width: 100px;
    }
    #navMenu.navbar-collapse{
        max-height: min(72vh, calc(100dvh - 118px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 1rem;
    }
    .navbar-nav li{
        padding: 0 6px;
    }
    .nav_principal .nav-link{
        padding: 12px 10px;
        font-size: 15px;
    }
    .dropdown-menu{
        width: 100%;
        max-width: 100%;
    }
    .btn_contactanos{
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .nav_acciones{
        flex-direction: column;
        width: 100%;
    }
    .nav_icons{
        justify-content: center;
        flex-wrap: wrap;
    }
    .nav_icon_btn{
        min-width: 44px;
        min-height: 44px;
    }
    .nav_cuenta_btn{
        max-width: 100%;
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
    .hero{
        min-height: 68dvh;
    }
    .hero-content{
        margin-top: 56px;
        padding: 0 12px;
    }
    .hero-content h1{
        font-size: clamp(1.55rem, 7vw, 2.35rem);
    }
    .nosotros{
        padding: 48px 0 40px;
    }
    .nosotros h2{
        font-size: clamp(1.55rem, 5.5vw, 2rem);
        margin-bottom: 22px;
    }
    .nosotros p{
        font-size: 16px;
    }
    .row_productos{
        padding: 20px 12px;
        border-radius: 22px;
    }
    .card_producto{
        padding: 28px 14px 16px;
        border-top-left-radius: 36px;
        border-top-right-radius: 36px;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }
    .card_producto .contenido_pro{
        min-height: 220px;
        padding: 22px 10px 16px;
    }
    .card_producto .contenido_pro h4{
        min-height: calc(1.35em * 2);
        margin-bottom: 8px;
    }
    .card_producto .contenido_pro p{
        font-size: 22px;
        margin-bottom: 12px;
    }
    .slider_home{
        margin-top: 36px;
        padding: 44px 0;
    }
    .section_datos .row_borders{
        border-radius: 28px;
        padding: 14px 12px;
        margin: 36px 0;
    }
    .section_datos .row_borders .flex_datos .medio_datos p{
        font-size: clamp(2rem, 11vw, 2.75rem);
    }
    .section_datos .row_borders .flex_datos .medio_datos span{
        font-size: clamp(0.88rem, 3.5vw, 1.05rem);
    }
    .section_metodo_pago .alto_imagen_footer{
        height: auto;
        min-height: 200px;
        max-height: 340px;
    }
    .section_metodo_pago .alto_imagen_footer img{
        object-fit: cover;
        max-height: 340px;
    }
    .flex_imagenes{
        flex-direction: column;
        gap: 14px;
    }
    .flex_imagenes .border_verde{
        width: 100%;
        max-width: 340px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }
    .flex_imagenes > img{
        width: 100%;
        max-width: 340px;
        transform: none !important;
        box-shadow: none;
    }
    .flex_imagenes > img:nth-child(2),
    .flex_imagenes > img:nth-child(3),
    .flex_imagenes > img:nth-child(4){
        transform: none !important;
    }
    .position_button{
        margin-top: 32px;
    }
    .page-hero--contactanos,
    .page-hero--nuestro-cafe,
    .page-hero--carrito{
        padding: 52px 0 56px;
    }
    .page-hero--contactanos h1,
    .page-hero--nuestro-cafe h1,
    .page-hero--carrito h1{
        font-size: clamp(1.65rem, 7vw, 2.2rem);
    }
    .page-hero h1{
        font-size: clamp(1.65rem, 7vw, 2.2rem);
    }
    .contacto-info h2{
        font-size: clamp(1.55rem, 6vw, 1.95rem);
    }
    .section-contacto{
        padding: 44px 0 56px;
    }
    .btn-enviar-contacto{
        width: 100%;
        padding: 14px 20px;
    }
    .section-que-ofrecemos{
        padding: 48px 0 44px;
    }
    .section-que-ofrecemos h2{
        font-size: clamp(1.45rem, 5vw, 1.95rem);
    }
    .hero-producto{
        padding: 40px 0;
    }
    .hero-producto h1{
        font-size: clamp(1.25rem, 6vw, 1.75rem);
    }
    .section-detalle{
        padding: 32px 0 56px;
    }
    .detalle-card{
        padding: 14px 12px;
        border-radius: 18px;
    }
    .detalle-entrega__grid{
        grid-template-columns: 1fr;
    }
    .detalle-thumbs{
        flex-wrap: wrap;
        justify-content: center;
    }
    .section-carrito{
        padding: 36px 0 64px;
    }
    .carrito-item{
        padding: 14px 12px;
    }
    .carrito-prod{
        align-items: flex-start;
    }
    .carrito-img{
        width: 64px;
        height: 64px;
    }
    .cant-btn{
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
    .cant-input{
        width: 56px;
        height: 44px;
        min-height: 44px;
        font-size: 16px;
    }
    .btn-resumen{
        min-height: 48px;
        padding: 14px 18px;
    }
    .footer_componente{
        padding: 40px 0 48px;
        padding-bottom: max(48px, env(safe-area-inset-bottom, 0px));
    }
    .footer_componente .img_footer img{
        width: 120px;
    }
    .icon-inline img{
        width: 44px;
        height: auto;
    }
    .titulo-listado{
        font-size: clamp(1.35rem, 5vw, 1.8rem);
    }
    .titulo-listado img{
        max-width: 40px;
        height: auto;
        vertical-align: middle;
    }
    .listado-filters__inner{
        flex-direction: column;
        align-items: stretch;
    }
    .listado-filters__row{
        flex-wrap: wrap;
    }
    .pago-sidebar__total{
        font-size: 1.55rem;
    }
    .modal-auth__dialog{
        margin: max(0.5rem, env(safe-area-inset-top, 0px)) 0.65rem max(0.65rem, env(safe-area-inset-bottom, 0px));
    }
}