/* =========================================================
   TICOJARRAS
   FICHA DE DISEÑO / ARTÍCULO
   ========================================================= */


/* =========================================================
   1. ESTRUCTURA PRINCIPAL
   ========================================================= */

.tj-producto {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    gap: 38px;
    align-items: start;

    margin: 18px 0 42px;

    font-family: inherit;
}

.tj-producto * {
    box-sizing: border-box;
}


/* =========================================================
   2. GALERÍA - IMAGEN PRINCIPAL
   ========================================================= */

.tj-galeria__principal {
    overflow: hidden;

    aspect-ratio: 1.18 / 1;

    background: #f4f4f4;
    border-radius: 8px;
}

.tj-galeria__ampliar {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;
    padding: 0;

    background: none;
    border: 0;

    cursor: zoom-in;
}

.tj-galeria__ampliar img,
.tj-galeria__sinimagen {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #f5f5f5;
}

.tj-galeria__ampliar > span {
    position: absolute;
    right: 14px;
    bottom: 14px;

    padding: 9px 14px;

    color: #ffffff;
    background: rgba(0, 0, 0, .68);
    border-radius: 22px;

    font-size: 13px;
}


/* =========================================================
   3. GALERÍA - MINIATURAS
   ========================================================= */

.tj-galeria__miniaturas {
    display: flex;
    gap: 10px;

    margin-top: 12px;
    padding: 2px 2px 8px;

    overflow-x: auto;

    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}

.tj-miniatura {
    position: relative;

    flex: 0 0 112px;

    height: 82px;
    padding: 0;

    overflow: hidden;

    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 7px;

    cursor: pointer;
    scroll-snap-align: start;
}

.tj-miniatura img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.tj-miniatura.is-active {
    border-color: #087dea;
}


/* =========================================================
   4. MINIATURA DE VIDEO
   ========================================================= */

.tj-miniatura--video {
    color: #ffffff;
    background: #111111;
}

.tj-miniatura--video::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .18);
}

.tj-miniatura__play {
    position: absolute;
    z-index: 2;
    top: 43%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 36px;
    height: 36px;
    padding-left: 2px;

    color: #d90000;
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;

    font-size: 17px;

    transform: translate(-50%, -50%);
}

.tj-miniatura--video b {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 5px;
    left: 0;

    color: #ffffff;

    font-size: 11px;
    text-shadow: 0 1px 3px #000000;
}


/* =========================================================
   5. INFORMACIÓN DEL PRODUCTO
   ========================================================= */

.tj-producto__titulo {
    margin: 0 0 8px;

    color: #0d3d70;

     font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.5px;
}

.tj-producto__codigo {
    margin: 9px 0 16px;

    color: #7a8495;

    font-size: 17px;
}

.tj-producto__descripcion {
    margin-bottom: 22px;

    color: #5e6878;

    font-size: 17px;
    line-height: 1.48;
    text-align: left;
}

.tj-producto__descripcion p:first-child {
    margin-top: 0;
}


/* =========================================================
   BENEFICIOS - BOTONES AZULES TICOJARRAS
   Azul profundo + celeste + acentos rojo/blanco Costa Rica
   ========================================================= */

.tj-beneficios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;

    margin: 18px 0 25px;
}

.tj-beneficios > div {
    min-width: 0;

    text-align: center;
}

.tj-beneficios span {
    position: relative;

    display: grid;
    place-items: center;

    width: 56px;
    height: 56px;
    margin: 0 auto 10px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 32% 20%,
            rgba(98, 220, 255, .95) 0%,
            rgba(22, 165, 255, .92) 16%,
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #159eff 0%,
            #0876df 30%,
            #0751b7 57%,
            #052e78 100%
        );

    border: 2px solid #0757c8;
    border-radius: 50%;

    box-shadow:
        0 6px 12px rgba(3, 43, 114, .25),
        0 2px 3px rgba(3, 43, 114, .18),
        inset 0 2px 2px rgba(255, 255, 255, .52),
        inset 0 -4px 6px rgba(0, 22, 78, .38);

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        filter .20s ease;
}

/* Reflejo de cristal */

.tj-beneficios span::before {
    content: "";

    position: absolute;
    z-index: 1;
    top: 4px;
    left: 8px;

    width: 35px;
    height: 16px;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, .52),
        rgba(255, 255, 255, .04)
    );

    border-radius: 50%;

    transform: rotate(-8deg);

    pointer-events: none;
}

/* Profundidad inferior */

.tj-beneficios span::after {
    content: "";

    position: absolute;
    z-index: 1;
    right: -7px;
    bottom: -13px;

    width: 55px;
    height: 29px;

    background: rgba(0, 20, 75, .18);
    border-radius: 50%;

    pointer-events: none;
}

/* SVG */

.tj-beneficios span img {
    position: relative;
    z-index: 2;

    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;

    filter: drop-shadow(0 2px 2px rgba(0, 20, 65, .30));
}

/* Efecto suave en escritorio */

@media (hover: hover) {

    .tj-beneficios > div:hover span {
        transform: translateY(-3px) scale(1.04);

        filter: brightness(1.06);

        box-shadow:
            0 9px 17px rgba(3, 43, 114, .30),
            inset 0 2px 2px rgba(255, 255, 255, .55),
            inset 0 -4px 6px rgba(0, 22, 78, .38);
    }

}

/* Textos */

.tj-beneficios strong,
.tj-beneficios small {
    display: block;
}

.tj-beneficios strong {
    color: #0b3266;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.tj-beneficios small {
    margin-top: 4px;

    color: #8590a2;

    font-size: 11px;
    line-height: 1.3;
}


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

@media (max-width: 900px) {

    .tj-beneficios {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

}

@media (max-width: 520px) {

    .tj-beneficios {
        gap: 18px 8px;
    }

    .tj-beneficios span {
        width: 52px;
        height: 52px;
    }

    .tj-beneficios span img {
        width: 31px;
        height: 31px;
    }

    .tj-beneficios strong {
        font-size: 12px;
    }

    .tj-beneficios small {
        font-size: 10px;
    }

}



/* =========================================================
   7. BOTONES PRINCIPALES
   ========================================================= */

.tj-cta {
    position: relative;

    display: block;
    overflow: hidden;

    width: 100%;
    margin-top: 10px;
    padding: 17px 52px 17px 22px;

    color: #ffffff !important;
    border: 0;
    border-radius: 8px;

    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;

    box-shadow:
        0 8px 18px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 -2px 0 rgba(0, 0, 0, .16);

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .32);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


/* ---------------------------------------------------------
   Brillo / reflejo superior
   --------------------------------------------------------- */

.tj-cta::before {
    content: "";

    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    width: 100%;
    height: 48%;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, .22),
        rgba(255, 255, 255, .04)
    );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Curva oscura decorativa inferior
   --------------------------------------------------------- */

.tj-cta::after {
    content: "";

    position: absolute;
    z-index: 0;
    right: -10%;
    bottom: -70%;

    width: 85%;
    height: 120%;

    background: rgba(0, 0, 0, .10);
    border-radius: 50% 0 0 0;

    transform: rotate(-4deg);

    pointer-events: none;
}


/* Mantener el contenido encima de los efectos */

.tj-cta strong,
.tj-cta small,
.tj-cta > span {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   Flecha derecha
   --------------------------------------------------------- */

.tj-cta > span {
    position: absolute;
    top: 50%;
    right: 20px;

    font-size: 30px;
    font-weight: 700;

    transform: translateY(-50%);

    text-shadow:
        0 2px 3px rgba(0, 0, 0, .30);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.tj-cta--whatsapp {
    background: linear-gradient(
        135deg,
        #27d34d 0%,
        #08b83f 35%,
        #009b36 70%,
        #007c2c 100%
    );

    border: 1px solid rgba(0, 112, 39, .55);

    box-shadow:
        0 8px 20px rgba(0, 150, 55, .24),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 0 rgba(0, 80, 30, .30);
}


/* =========================================================
   ENTREGA RÁPIDA
   ========================================================= */

.tj-cta--rapida {
    background: linear-gradient(
        135deg,
        #ff252f 0%,
        #ef0712 35%,
        #d5000b 70%,
        #ad0008 100%
    );

    border: 1px solid rgba(165, 0, 8, .55);

    box-shadow:
        0 8px 20px rgba(220, 0, 15, .24),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -2px 0 rgba(120, 0, 5, .30);
}

.tj-cta--rapida strong,
.tj-cta--rapida small {
    display: block;
}

.tj-cta--rapida small {
    margin-top: 3px;

    font-size: 12px;
    font-weight: 400;

    opacity: .96;
}


/* =========================================================
   EFECTO AL PASAR EL MOUSE
   ========================================================= */

.tj-cta:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 -2px 0 rgba(0, 0, 0, .18);
}


/* =========================================================
   EFECTO AL PRESIONAR
   ========================================================= */

.tj-cta:active {
    transform: translateY(1px);

    box-shadow:
        0 4px 10px rgba(0, 0, 0, .18),
        inset 0 2px 4px rgba(0, 0, 0, .16);
}


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

@media (max-width: 520px) {

    .tj-cta {
        padding: 15px 40px 15px 14px;

        font-size: 17px;
        border-radius: 7px;
    }

    .tj-cta > span {
        right: 14px;

        font-size: 25px;
    }

    .tj-cta--rapida small {
        font-size: 11px;
    }

}

/* =========================================================
   8. COMPARTIR
   ========================================================= */

.tj-compartir {
    margin-top: 12px;
    padding: 16px;

    background: linear-gradient(
        180deg,
        #f8f9fb 0%,
        #f1f3f6 100%
    );

    border: 1px solid #e6e9ee;
    border-radius: 9px;

    box-shadow:
        0 5px 15px rgba(10, 45, 85, .06);
}

.tj-compartir > strong {
    display: block;

    margin-bottom: 12px;

    color: #0d3d70;

    font-size: 16px;
    font-weight: 600;
}


/* ---------------------------------------------------------
   Contenedor de botones
   --------------------------------------------------------- */

.tj-compartir__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* ---------------------------------------------------------
   Base de todos los botones
   --------------------------------------------------------- */

.tj-compartir__botones a,
.tj-compartir__botones button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 45px;
    padding: 10px 17px;

    overflow: hidden;

    border-radius: 7px;

    font: inherit;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 4px 9px rgba(0, 0, 0, .11),
        inset 0 1px 0 rgba(255, 255, 255, .25);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


/* ---------------------------------------------------------
   Brillo superior
   --------------------------------------------------------- */

.tj-compartir__botones a::before,
.tj-compartir__botones button::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 45%;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.20),
        rgba(255,255,255,0)
    );

    pointer-events: none;
}


/* =========================================================
   FACEBOOK
   ========================================================= */

.tj-compartir__botones a:first-child {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #2d91ff 0%,
        #1877f2 48%,
        #0d55b8 100%
    );

    border: 1px solid #1264ce;

    text-shadow:
        0 1px 2px rgba(0,0,0,.22);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.tj-compartir__botones .wa {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #2bd75b 0%,
        #10b943 48%,
        #07832f 100%
    );

    border: 1px solid #079538;

    text-shadow:
        0 1px 2px rgba(0,0,0,.22);
}


/* =========================================================
   COPIAR ENLACE
   ========================================================= */

.tj-compartir__botones button {
    color: #0d3d70;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f1f4f8 55%,
        #e3e8ef 100%
    );

    border: 1px solid #cdd5df;
}


/* =========================================================
   ICONOS
   ========================================================= */

.tj-compartir__botones img {
    position: relative;
    z-index: 2;

    width: 19px;
    height: 19px;

    object-fit: contain;
}

.tj-compartir__botones a span,
.tj-compartir__botones button span {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HOVER
   ========================================================= */

.tj-compartir__botones a:hover,
.tj-compartir__botones button:hover {
    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
        0 7px 14px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.30);
}


/* =========================================================
   CLICK
   ========================================================= */

.tj-compartir__botones a:active,
.tj-compartir__botones button:active {
    transform: translateY(1px);

    box-shadow:
        0 2px 5px rgba(0,0,0,.13);
}


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

@media (max-width: 520px) {

    .tj-compartir__botones {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tj-compartir__botones a,
    .tj-compartir__botones button {
        width: 100%;
        padding: 10px 8px;
    }

}


/* =========================================================
   9. VISITAS
   ========================================================= */

.tj-producto__visitas {
    margin-top: 12px;

    color: #8b929d;

    font-size: 12px;
}


/* =========================================================
   10. MODALES
   ========================================================= */

.tj-modal {
    position: fixed;
    z-index: 99999;
    inset: 0;

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

    padding: 24px;

    background: rgba(0, 0, 0, .88);
}

.tj-modal.is-open {
    display: flex;
}

.tj-modal__cerrar {
    position: fixed;
    z-index: 2;
    top: 18px;
    right: 24px;

    padding: 0;

    color: #ffffff;
    background: transparent;
    border: 0;

    font-size: 44px;
    line-height: 1;

    cursor: pointer;
}

.tj-modal__contenido {
    width: min(1100px, 94vw);
    max-height: 90vh;
}


/* Modal de imagen */

.tj-modal__contenido--imagen {
    text-align: center;
}

.tj-modal__contenido--imagen img {
    max-width: 100%;
    max-height: 88vh;

    object-fit: contain;
}


/* Modal de video */

.tj-modal__contenido--video {
    aspect-ratio: 16 / 9;

    background: #000000;
}

.tj-modal__contenido--video iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


/* Evita scroll del documento al abrir modal */

.tj-modal-open {
    overflow: hidden;
}


/* =========================================================
   11. RESPONSIVE - TABLET / PANTALLAS MEDIANAS
   ========================================================= */

@media (max-width: 900px) {

    .tj-producto {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .tj-producto__info {
        padding: 0 2px;
    }

    .tj-beneficios {
        grid-template-columns: repeat(2, 1fr);
    }

    .tj-producto__titulo {
        font-size: 34px;
    }

    .tj-galeria__principal {
        aspect-ratio: 1 / 1;
    }

    .tj-miniatura {
        flex-basis: 96px;

        height: 72px;
    }

}


/* =========================================================
   12. RESPONSIVE - TELÉFONOS
   ========================================================= */

@media (max-width: 520px) {

    .tj-producto {
        gap: 18px;

        margin-top: 12px;
    }

    .tj-producto__titulo {
        font-size: 26px;
        line-height: 1.15;
        letter-spacing: -0.2px;
    }

    .tj-producto__codigo {
        font-size: 14px;
    }

    .tj-producto__descripcion {
        font-size: 15px;
    }

    .tj-beneficios {
        gap: 16px 8px;
    }

    .tj-beneficios span {
        width: 43px;
        height: 43px;
    }

    .tj-cta {
        padding: 14px 38px 14px 14px;

        font-size: 17px;
    }

    .tj-galeria__ampliar > span {
        padding: 7px 10px;

        font-size: 11px;
    }

    .tj-miniatura {
        flex-basis: 84px;

        height: 64px;
    }

    .tj-compartir__botones {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tj-compartir__botones a,
    .tj-compartir__botones button {
        padding: 10px 8px;

        text-align: center;
    }

    .tj-modal {
        padding: 10px;
    }

    .tj-modal__cerrar {
        top: 12px;
        right: 14px;
    }

}