/* Campaña del Día del Odontólogo. Estilos aislados de los controles de la tienda. */
.dentist-day-strip {
    color: #fff;
    background: linear-gradient(105deg, #6129c4, #a822ac 60%, #c02678);
    border-bottom: 3px solid #ffda58;
}
.dentist-day-strip p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 11px 16px;
    font-size: 12px;
    line-height: 1.5;
}
.dentist-day-strip__date { color: #ffe782; font-weight: 800; }
.dentist-day-strip__divider { width: 1px; height: 14px; background: #ffffff66; }
.dentist-day-strip__spark { color: #ffdf69; font-size: 20px; }
.dentist-day-hero {
    background: radial-gradient(ellipse at 95% 5%, #f6b5e877, transparent 60%),
                linear-gradient(115deg, #fcf8ffef, #f3e9fff2);
}
.dentist-day-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #efc143;
    border-radius: 999px;
    background: #ffdc61;
    color: #482077;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 3px 4px 0 #6429bd16;
}
.dentist-day-eyebrow > span { color: #7b25b6; font-size: 18px; }
.dentist-day-visual { padding: 0 0 150px; }
.dentist-day-visual picture { display: block; transform: rotate(2deg); }
.dentist-day-visual picture img {
    border: 6px solid #fff;
    border-radius: 110px 28px 110px 28px;
    box-shadow: 12px 12px 0 #d6baff;
}
.dentist-day-date {
    position: absolute;
    right: 4px;
    top: -24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 118px;
    background: #ffda58;
    color: #4b227b;
    clip-path: polygon(50% 0%,61% 8%,75% 7%,81% 20%,94% 25%,92% 40%,100% 50%,92% 61%,94% 75%,80% 81%,75% 94%,60% 92%,50% 100%,39% 92%,25% 94%,19% 80%,6% 75%,8% 60%,0% 50%,8% 39%,6% 25%,20% 19%,25% 6%,40% 8%);
    transform: rotate(10deg);
    pointer-events: none;
}
.dentist-day-date > span:first-child { font-size: 42px; font-weight: 900; line-height: 1; }
.dentist-day-date > span:nth-child(2) { margin-top: 4px; font-size: 10px; letter-spacing: .12em; font-weight: 900; }
.dentist-day-date > span:last-child { margin-top: 2px; font-size: 12px; }
.dentist-day-greeting {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 30px 32px 38px;
    border-radius: 54px 18px 70px 18px;
    background: linear-gradient(125deg, #5524b2 5%, #8129bb 65%, #ba267f);
    box-shadow: 0 14px 32px #6729af26, -7px 7px 0 #ffda58;
    color: #fff;
}
.dentist-day-tooth { flex: 0 0 44px; width: 44px; height: 54px; color: #ffdf69; }
.dentist-day-greeting__label { margin: 0 0 10px; color: #ffe782; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
.dentist-day-greeting h2 { margin: 0; color: #fff; font-size: clamp(24px, 2.25vw, 32px); font-weight: 900; line-height: 1.18; letter-spacing: -.04em; }
.dentist-day-greeting h2 em { color: #ffe477; font-style: normal; }
.dentist-day-greeting h2 + p { margin: 12px 0 0; color: #fbf2ff; font-size: 12px; line-height: 1.7; }
.dentist-day-greeting__spark { position: absolute; right: 17px; top: 12px; font-size: 25px; color: #ffe477; pointer-events: none; }
.dentist-day-open {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    margin-top: 17px;
    border: 1px solid #ffffff70;
    border-radius: 999px;
    padding: 9px 16px;
    background: #ffffff14;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.dentist-day-open[hidden] { display: none; }
.dentist-day-open:hover { background: #ffffff2e; }
.dentist-day-open:focus-visible { outline: 3px solid #ffdf69; outline-offset: 4px; }

/* El diálogo nativo mantiene el resto de la página fuera del foco mientras está abierto. */
html.dentist-day-modal-open { overflow: hidden; }
.dentist-day-modal {
    position: fixed;
    inset: 0;
    width: min(520px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 72px 24px 72px 24px;
    background: #6025b5;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 24px 100px #14072680;
}
.dentist-day-modal:not([open]) { display: none; }
.dentist-day-modal::backdrop { background: #100c24b8; backdrop-filter: blur(5px); }
.dentist-day-modal__card {
    position: relative;
    isolation: isolate;
    padding: 28px 40px 34px;
    text-align: center;
    background: radial-gradient(ellipse at 100% 0%, #d347ad, transparent 58%), linear-gradient(150deg, #7733cf, #4b1e98);
    overflow: hidden;
}
.dentist-day-modal__card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 340px;
    height: 200px;
    border: 2px solid #ffffff1f;
    border-radius: 50%;
    bottom: -140px;
    right: -60px;
    transform: rotate(-25deg);
    box-shadow: 0 0 0 18px #ffffff08, 0 0 0 36px #ffffff06;
    pointer-events: none;
}
.dentist-day-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    background: #33136165;
    color: #fff;
    font: inherit;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
.dentist-day-modal__close:hover { background: #331361; }
.dentist-day-modal__date { display: inline-block; padding: 6px 13px; border: 1px solid #ffffff55; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.dentist-day-animation { position: relative; width: 240px; height: 200px; margin: 6px auto 0; }
.dentist-day-animation__orbit { position: absolute; inset: 20px 26px 6px; background: #ffda58; border-radius: 46% 54% 60% 40% / 54% 39% 61% 46%; transform: rotate(-12deg); box-shadow: 0 0 0 10px #ffda5818; }
.dentist-day-character { position: relative; width: 240px; height: 210px; }
.dentist-day-character__float { transform-origin: 120px 110px; }
.dentist-day-character__wave { transform-origin: 175px 108px; }
.dentist-day-confetti { position: absolute; z-index: 1; color: #ffe782; font-size: 29px; line-height: 1; }
.dentist-day-confetti--one { top: 24px; left: 5px; transform: rotate(-12deg); }
.dentist-day-confetti--two { bottom: 16px; right: 8px; font-size: 22px; }
.dentist-day-confetti--three { top: 10px; right: 24px; width: 8px; height: 16px; border-radius: 2px; background: #ffb9e7; transform: rotate(25deg); }
.dentist-day-confetti--four { bottom: 37px; left: 11px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; }
.dentist-day-modal__eyebrow { margin: 8px 0 9px; color: #ffe782; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.dentist-day-modal h2 { margin: 0; color: #fff; font-size: clamp(34px, 5vw, 48px); font-weight: 900; line-height: 1.07; letter-spacing: -.055em; }
.dentist-day-modal h2 span { color: #ffdf69; }
#dentist-day-modal-description { max-width: 340px; margin: 17px auto 0; color: #f7ecff; font-size: 14px; line-height: 1.65; }
.dentist-day-modal__signature { margin: 15px 0 22px; color: #f7ecff; font-size: 12px; }
.dentist-day-modal__signature span { color: #ffbdde; }
.dentist-day-modal__continue { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 46px; padding: 12px 24px; border: 0; border-radius: 999px; background: #ffdf69; color: #3e1b6b; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 5px 0 #35145b33; }
.dentist-day-modal__continue:hover { background: #ffe994; }
.dentist-day-modal button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
/* Animaciones breves; se detienen solas y respetan movimiento reducido. */
@media (prefers-reduced-motion: no-preference) {
    .dentist-day-modal[open] .dentist-day-character__float { animation: dentist-day-float 2.2s ease-in-out 2; }
    .dentist-day-modal[open] .dentist-day-character__wave { animation: dentist-day-wave 1.1s ease-in-out 4; }
    .dentist-day-modal[open] .dentist-day-confetti { animation: dentist-day-spark 1.5s ease-in-out 3; }
}
@keyframes dentist-day-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes dentist-day-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes dentist-day-spark { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .5; scale: .8; } }
@media (max-width: 1023px) {
    .dentist-day-visual { margin-top: 10px; }
}
@media (max-width: 639px) {
    .dentist-day-strip p { gap: 8px; padding: 8px 12px; font-size: 10px; }
    .dentist-day-strip__message, .dentist-day-strip__spark:last-child { display: none; }
    .dentist-day-eyebrow { font-size: 9px; letter-spacing: .04em; }
    .dentist-day-visual { padding-bottom: 0; }
    .dentist-day-visual picture img { height: 290px; border-radius: 70px 22px 80px 22px; }
    .dentist-day-date { right: 0; width: 98px; height: 98px; }
    .dentist-day-date > span:first-child { font-size: 34px; }
    .dentist-day-greeting { position: relative; left: auto; right: auto; margin: -42px 4px 0 8px; padding: 27px 20px; gap: 12px; border-radius: 34px 14px 48px 14px; }
    .dentist-day-tooth { flex-basis: 30px; width: 30px; height: 40px; }
    .dentist-day-greeting h2 { font-size: 25px; }
    .dentist-day-greeting__label { font-size: 9px; }
    .dentist-day-desktop-break { display: none; }
    .dentist-day-modal { border-radius: 48px 20px 48px 20px; }
    .dentist-day-modal__card { padding: 25px 22px 28px; }
    .dentist-day-modal__close { top: 10px; right: 10px; }
    .dentist-day-modal__date { font-size: 9px; }
    .dentist-day-modal__continue { gap: 12px; padding-inline: 19px; }
}
@media (max-width: 359px) {
    header .shop-header-main { gap: 4px; }
    .shop-header-main > a:first-child img[alt] { height: 40px; max-width: 86px; }
    .shop-main-nav .mobile-catalog-link { padding-inline: 5px; }
    .dentist-day-greeting { gap: 9px; padding-inline: 16px; }
    .dentist-day-greeting h2 { font-size: 22px; }
    .dentist-day-modal__card { padding-inline: 16px; }
    .dentist-day-modal h2 { font-size: 33px; }
}
@media (max-height: 700px) {
    .dentist-day-animation { height: 156px; width: 190px; }
    .dentist-day-character { width: 190px; height: 166px; }
    .dentist-day-animation__orbit { inset: 15px 20px 3px; }
    .dentist-day-modal__card { padding-top: 20px; padding-bottom: 24px; }
    .dentist-day-modal__signature { margin-block: 12px 16px; }
}