/* Scroll scenes use isolated decorative space, never cover controls. */
.pest-scene-host {
    position: relative;
    padding-bottom: 100px;
}
.hero.pest-scene-host {
    padding-bottom: 60px;
}
.scroll-pest-scene {
    position: absolute;
    bottom: 8px;
    width: 220px;
    height: 72px;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.scene-side-0 {
    left: max(20px,calc((100% - 1180px)/2));
}
.scene-side-1 {
    right: max(20px,calc((100% - 1180px)/2));
}
.scroll-pest {
    position: absolute;
    top: 25px;
    left: 0;
    font-size: 1.8rem;
    opacity: 0;
}
.scroll-stamp {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 76px;
    height: 60px;
    display: grid;
    place-items: center;
    padding: 7px;
    border: 4px solid #f57f20;
    border-radius: 15px;
    background: #fff;
    transform: translateY(-90px) rotate(-15deg);
    opacity: 0;
}
.scroll-stamp img {
    width: 100%;
    height: auto;
}
.scroll-pest-scene.is-playing .scroll-pest {
    animation: crawlAndDisappear 3.5s linear forwards;
}
.scroll-pest-scene.is-playing .scroll-stamp {
    animation: stampAndLift 1.6s ease-out 2.9s forwards;
}
@keyframes crawlAndDisappear {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    12% {
        opacity: 1;
    }
    84% {
        opacity: 1;
        transform: translateX(150px) rotate(-6deg);
    }
    92% {
        opacity: 1;
        transform: translateX(151px) scaleY(.2);
    }
    100% {
        opacity: 0;
        transform: translateX(151px) scale(.05);
    }
}
@keyframes stampAndLift {
    0% {
        opacity: 0;
        transform: translateY(-90px) rotate(-15deg);
    }
    22% {
        opacity: 1;
        transform: translateY(0) rotate(4deg);
    }
    38%,75% {
        opacity: 1;
        transform: translateY(0) rotate(-3deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) rotate(-3deg);
    }
}
/* More visible menu interaction: animated filled pill with an orange accent. */
.menu {
    gap: 5px;
}
.menu a {
    padding: 11px 12px;
    border-radius: 14px;
    isolation: isolate;
    transition: color .25s, transform .25s, box-shadow .25s;
}
.menu a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background: linear-gradient(120deg,#073f22,#238b40);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s, transform .3s;
}
.menu a::after {
    left: 14px;
    bottom: 5px;
    height: 3px;
    width: 20px;
    background: #ffab64;
}
.menu a:hover, .menu a:focus-visible, .menu a[aria-current="location"] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 7px 15px #073f2220;
}
.menu a:hover::before, .menu a:focus-visible::before, .menu a[aria-current="location"]::before {
    opacity: 1;
    transform: scale(1);
}
.menu a:focus-visible::after {
    transform: scaleX(1);
}
/* Color feedback across interactive and informational surfaces. */
.service-card, .special-card, .credentials-item, .trust-item, .faq-disclosure, .franchise-stat {
    transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.section {
    transition: background-color .4s ease;
}
@media (hover:hover) {
    #servicios:hover, #services:hover {
        background-color: #f3f9f4;
    }
    .credentials:hover, .section-sectors:hover {
        background-color: #e1eee4;
    }
    .franchise-section:not(.franchise-profile):not(.franchise-contact):hover {
        background-color: #fff1dd;
    }
    .faq-section:hover {
        background-color: #eaf2ec;
    }
    .service-card:hover, .special-card:hover, .credentials-item:hover {
        background: #0b5d32;
        color: white;
    }
    .service-card:hover h3, .special-card:hover h3, .credentials-item:hover h3 {
        color: white;
    }
    .service-card:hover p, .special-card:hover p, .credentials-item:hover p {
        color: #e3f0e7;
    }
    .service-card:hover .text-link {
        color: #ffcc9d;
    }
    .trust-item:hover {
        background: #dfefdf;
    }
    .faq-disclosure:hover {
        background: #edf6ee;
        border-color: #238b40;
    }
    .franchise-stat:hover {
        background: #e5f1e7;
        border-color: #238b40;
    }
    .sector-choice:hover {
        background: #d5ebdb;
    }
    .sector-choice[aria-pressed="true"]:hover {
        background: #0b5d32;
    }
}
.service-card:focus-within {
    background: #edf6ee;
}
.service-card:hover:focus-within {
    background: #0b5d32;
}
.faq-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}
.faq-pagination button {
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #b9d1c0;
    border-radius: 12px;
    background: white;
    color: #073f22;
    font-weight: 700;
    cursor: pointer;
}
.faq-pagination button:hover:not(:disabled) {
    background: #073f22;
    color: white;
}
.faq-pagination button:disabled {
    opacity: .4;
    cursor: default;
}
.faq-page {
    color: #45604e;
    font-size: .875rem;
    text-align: center;
}
.faq-section {
    padding-block: 70px;
}
.faq-tools {
    margin-bottom: 16px;
    padding: 18px;
}
.faq-disclosure summary {
    padding: 17px 20px;
}
.faq-disclosure {
    margin-bottom: 9px;
}
@media (max-width: 1100px) {
    .menu a {
        padding-inline: 9px;
    }
}
@media (max-width: 980px) {
    .menu a {
        padding: 14px;
    }
}
@media (max-width: 640px) {
    .faq-pagination button {
        padding: 9px 12px;
    }
    .pest-scene-host {
        padding-bottom: 95px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-pest-scene {
        display: none;
    }
    .menu a:hover, .menu a[aria-current="location"] {
        transform: none;
    }
}