/* Veterinaria D'Taisa — Promociones */
.dtp {
    --dtp-bg: #7b86e0;
    --dtp-per: 3;
    --dtp-thumb: 200px;
    --dtp-ratio: 1;
    --dtp-gap: 24px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--dtp-bg);
    border-radius: 20px;
    padding: 28px 24px;
    box-sizing: border-box;
    overflow: hidden;
}
.dtp *, .dtp *::before, .dtp *::after { box-sizing: border-box; }

.dtp-main {
    flex: 0 0 28%;
    align-self: flex-end;
    margin: -28px 0 -28px -8px;
    display: flex;
    align-items: flex-end;
}
.dtp-main-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    object-position: bottom left;
}

.dtp-carousel {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 44px 28px;
}
/* El JS fija el ancho exacto para que solo se vean miniaturas completas */
.dtp-viewport {
    overflow: hidden;
    margin: 0 auto;
    max-width: 100%;
    width: calc(var(--dtp-per) * var(--dtp-thumb) + (var(--dtp-per) - 1) * var(--dtp-gap));
}
.dtp-track {
    display: flex;
    gap: var(--dtp-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .45s ease;
    will-change: transform;
}
.dtp-slide {
    flex: 0 0 min(var(--dtp-thumb), 100%);
    margin: 0;
    padding: 0;
}
/* Todas las miniaturas con el mismo tamaño y forma */
.dtp-open {
    display: block;
    width: 100%;
    aspect-ratio: var(--dtp-ratio, 1);
    padding: 0;
    margin: 0;
    border: 0;
    background: #fff;
    cursor: zoom-in;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.dtp-open:hover, .dtp-open:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.dtp-open:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dtp-open img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: contain;
}
.dtp--cover .dtp-open img { object-fit: cover; }

.dtp-arrow {
    position: absolute;
    top: calc(50% - 14px);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 26px;
    line-height: 36px;
    cursor: pointer;
    transition: background .2s;
}
.dtp-arrow:hover, .dtp-arrow:focus-visible { background: rgba(255, 255, 255, .18); }
.dtp-prev { left: max(2px, calc(50% - var(--dtp-vw, 100%) / 2 - 42px)); }
.dtp-next { right: max(2px, calc(50% - var(--dtp-vw, 100%) / 2 - 42px)); }
.dtp.is-static .dtp-arrow, .dtp.is-static .dtp-dots { display: none; }

.dtp-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.dtp-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}
.dtp-dot.is-active { background: #1d2340; transform: scale(1.15); }

@media (max-width: 1024px) {
    .dtp { --dtp-gap: 16px; }
    .dtp-main { flex-basis: 26%; }
}
@media (max-width: 680px) {
    .dtp { flex-direction: column; padding: 20px 12px 16px; }
    .dtp-main { flex: none; width: 50%; margin: -20px auto 0; align-self: center; justify-content: center; }
    .dtp-main-img { max-height: 200px; object-position: bottom center; }
    .dtp-carousel { width: 100%; padding: 0 36px 26px; }
}

/* ---------- Lightbox ---------- */
.dtp-lb[hidden] { display: none !important; }
.dtp-lb {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.dtp-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 30, .82);
    animation: dtp-fade .2s ease;
}
.dtp-lb-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    max-height: 100%;
    animation: dtp-pop .22s ease;
}
.dtp-lb-fig {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.dtp-lb-img {
    display: block;
    max-width: min(90vw, 760px);
    max-height: calc(100vh - 170px);
    width: auto;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
    background: #fff;
}
.dtp-lb-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(90vw, 760px); }
.dtp-lb-text { margin: 0; color: #fff; font-size: 15px; line-height: 1.45; text-align: center; white-space: pre-line; }
.dtp-lb-hint { margin: 0; color: rgba(255, 255, 255, .8); font-size: 13px; text-align: center; }
.dtp-lb-hint[hidden] { display: none; }
.dtp-toast {
    position: fixed;
    left: 50%;
    top: 24px;
    z-index: 1000000;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 12px 18px;
    border-radius: 10px;
    background: #1d2340;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    animation: dtp-fade .2s ease;
}
.dtp-lb-btn.is-busy { opacity: .75; pointer-events: none; }
.dtp-lb-text:empty, .dtp-lb-btn[hidden] { display: none; }
.dtp-lb-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: #f58220;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: transform .15s ease, filter .15s ease;
}
.dtp-lb-btn:hover, .dtp-lb-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.dtp-lb-btn.is-whatsapp { background: #25d366; }
.dtp-wa-ico { width: 22px; height: 22px; display: none; }
.dtp-lb-btn.is-whatsapp .dtp-wa-ico { display: block; }

.dtp-lb-close {
    position: absolute;
    top: -6px;
    right: 46px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 28px;
    line-height: 40px;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    transform: translate(50%, -50%);
}
.dtp-lb-nav {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 22px;
    padding: 0;
    cursor: pointer;
}
.dtp-lb-nav:hover { background: rgba(255, 255, 255, .3); }
.dtp-lb-nav[hidden] { visibility: hidden; display: block; }

@media (max-width: 680px) {
    .dtp-lb-box { flex-direction: column; }
    .dtp-lb-nav { display: none !important; }
    .dtp-lb-close { right: 0; top: 0; transform: translate(25%, -50%); }
    .dtp-lb-img { max-width: 92vw; max-height: calc(100vh - 130px); }
}
body.dtp-lb-open { overflow: hidden; }

@keyframes dtp-fade { from { opacity: 0; } }
@keyframes dtp-pop { from { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
    .dtp-track, .dtp-lb-backdrop, .dtp-lb-box { transition: none; animation: none; }
}