/* Estilo compartido para páginas con accesos y enlaces de servicios. */
.fines-page,
.sri-page,
.crtv-page {
    --service-primary: #078cac;
    --service-primary-dark: #056b86;
    --service-primary-soft: #e8f7fb;
    --service-border: #cfe1e8;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    color: #233e50;
}

.fines-heading,
.sri-heading,
.crtv-heading {
    position: relative;
    overflow: hidden;
    padding: clamp(16px, 2vh, 24px);
    margin-bottom: clamp(14px, 2vh, 24px);
    border: 1px solid #c8e5ee;
    border-left: 5px solid var(--service-primary);
    border-radius: 12px;
    background: linear-gradient(120deg, #e9f8fc 0%, #dff2f7 100%);
}

.fines-heading::after,
.sri-heading::after,
.crtv-heading::after {
    position: absolute;
    right: -40px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(7, 140, 172, .08);
    content: "";
}

.fines-eyebrow,
.sri-eyebrow,
.crtv-eyebrow {
    position: relative;
    z-index: 1;
    color: var(--service-primary-dark);
    font-weight: 800;
    letter-spacing: .1em;
}

.fines-heading h2,
.sri-heading h2,
.crtv-heading h2,
.fines-heading p,
.sri-heading p,
.crtv-heading p {
    position: relative;
    z-index: 1;
}

.fines-heading h2,
.sri-heading h2,
.crtv-heading h2 {
    margin: 6px 0 8px;
    color: #124b60;
    font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.fines-grid,
.sri-grid {
    gap: clamp(16px, 2vw, 24px);
}

.fines-card,
.sri-card,
.crtv-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--service-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(25, 69, 87, .08);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.fines-card::before,
.sri-card::before,
.crtv-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--service-primary-dark), #12a8c8);
    content: "";
}

.fines-card:hover,
.fines-card:focus,
.sri-card:hover,
.sri-card:focus,
.crtv-card:hover,
.crtv-card:focus {
    border-color: #8acbda;
    background: #fbfeff;
    color: #164e63;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(25, 69, 87, .13);
    transform: translateY(-2px);
}

.fines-card:focus-visible,
.sri-card:focus-visible,
.crtv-card:focus-visible,
.rotac-card:focus-visible,
.requirements-page .list-group-item:focus-visible,
.contact-button:focus-visible,
.contact-map-actions a:focus-visible,
.location-actions .btn:focus-visible {
    outline: 3px solid #67c6db;
    outline-offset: 3px;
}

.fines-action,
.sri-action,
.crtv-action,
.rotac-action {
    display: inline-flex;
    min-width: 190px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 9px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #079bbb, #078cac);
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(7, 140, 172, .2);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.fines-card:hover .fines-action,
.fines-card:focus .fines-action,
.sri-card:hover .sri-action,
.sri-card:focus .sri-action,
.crtv-card:hover .crtv-action,
.crtv-card:focus .crtv-action,
.rotac-card:hover .rotac-action,
.rotac-card:focus .rotac-action {
    background: #056b86;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(5, 107, 134, .25);
}

.requirements-page .list-group-item {
    margin-bottom: 5px;
    padding-right: 46px;
    border: 1px solid #d9e8ed !important;
    border-radius: 8px !important;
    background: #fbfdfe;
}

.requirements-page .list-group-item::after {
    display: inline-flex;
    width: 27px;
    height: 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b9dfe8;
    border-radius: 8px;
    background: #e8f6f9;
    color: #176e82;
    content: "\f35d";
    font-family: "Font Awesome 6 Free";
    font-size: .7rem;
    font-weight: 900;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.requirements-page .list-group-item:hover,
.requirements-page .list-group-item:focus {
    border-color: #8acbda !important;
    background: #eef9fc;
    color: #056b86;
    text-decoration: none;
}

.requirements-page .list-group-item:hover::after,
.requirements-page .list-group-item:focus::after {
    border-color: #176e82;
    background: #176e82;
    color: #fff;
    transform: translateY(-50%) translateX(2px);
}

.contact-button,
.contact-map-actions a,
.location-actions .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: box-shadow .18s ease, transform .18s ease;
}

.contact-button-primary,
.contact-map-actions a:first-child {
    border-color: #078cac !important;
    background: linear-gradient(135deg, #079bbb, #078cac) !important;
    color: #fff !important;
}

.contact-button:hover,
.contact-map-actions a:hover,
.location-actions .btn:hover {
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(5, 107, 134, .2);
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    .fines-action,
    .sri-action,
    .crtv-action,
    .rotac-action {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fines-card,
    .sri-card,
    .crtv-card,
    .rotac-card,
    .contact-button,
    .contact-map-actions a,
    .location-actions .btn {
        transition: none;
    }
}