/* ============================================================
   ASEGURAPORDIAS — main.css (Bootstrap 5.3)
   ============================================================ */

/* ── 0. FUENTES LOCALES ─────────────────────────────────── */
@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Murecho';
    src: url('../fonts/Murecho-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── 1. VARIABLES ────────────────────────────────────────── */
:root {
    --apd-primary:      #2563EB;
    --apd-primary-dark: #1D4ED8;
    --apd-primary-bg:   #F2F6FF;
    --apd-orange:       #F97216;
    --apd-orange-dark:  #EA6400;
    --apd-gray:         #CFD1D4;
    --apd-gray-mid:     #E5E7EB;
    --apd-gray-light:   #F8F9FA;
    --apd-fondo-gris:  #F8FAFC;
    --apd-text:         #3E4E69;
    --apd-text-claro:  #B2B2B2;
    --apd-heading:      #1A1A1A;
    --apd-white:        #FFFFFF;
    --apd-dark-navy:    #0F172A;
    --apd-green:        #16A34A;
    --apd-red:          #DC2626;

    --apd-font-heading: 'Murecho', sans-serif;
    --apd-font-body:    'Mulish', sans-serif;

    --apd-radius-sm:   6px;
    --apd-radius:      8px;
    --apd-radius-lg:   16px;
    --apd-radius-xl:   24px;
    --apd-radius-full: 9999px;

    --apd-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --apd-shadow-md:   0 4px 16px rgba(0,0,0,.08);
    --apd-shadow-lg:   0 10px 40px rgba(0,0,0,.10);
    --apd-shadow-xl:   0 20px 60px rgba(0,0,0,.12);
    --apd-shadow: 0 16px 34px  #0000001f;

    --apd-transition:  200ms ease;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
body {
    font-family: var(--apd-font-body);
    color: var(--apd-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--apd-font-heading);
    font-weight: 600;
    color: var(--apd-heading);
}
a { transition: color var(--apd-transition); }

.g-6, .gy-6 {
    --bs-gutter-y: 4rem;
}
.g-7, .gy-7 {
    --bs-gutter-y: 5.5rem;
}
.mb-ori{
    margin-bottom: 1.5rem;
}
.mb-ori2{
    margin-bottom: 2.5rem;
}
.txt-small{
    font-size: 0.95rem;
}
.apd-shadow{
    box-shadow: var(--apd-shadow);
}

/* ── 3. BOTONES ──────────────────────────────────────────── */
.apd-btn-primary {
    background-color: var(--apd-primary);
    color: var(--apd-white);
    border: none;
    border-radius: var(--apd-radius);
    font-family: var(--apd-font-body);
    font-weight: 700;
    font-size: .875rem;
    padding: .6rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    box-shadow: 0 4px 14px rgba(37,99,235,.25);
    transition: background-color var(--apd-transition), transform var(--apd-transition), box-shadow var(--apd-transition);
}
.apd-btn-primary:hover {
    background-color: var(--apd-primary-dark);
    color: var(--apd-white);
    box-shadow: 0 6px 20px rgba(37,99,235,.35);
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    background-color: var(--apd-orange-dark);
    color:white;
} 
.apd-btn-orange {
    background-color: var(--apd-orange);
    color: var(--apd-white);
    border: none;
    border-radius: var(--apd-radius);
    font-family: var(--apd-font-body);
    font-weight: 700;
    font-size: .875rem;
    padding: .6rem 1.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    box-shadow: 0 4px 14px rgba(249,114,22,.25);
    transition: background-color var(--apd-transition), transform var(--apd-transition), box-shadow var(--apd-transition);
}
.apd-btn-orange:hover {
    background-color: var(--apd-orange-dark);
    color: var(--apd-white);
    box-shadow: 0 6px 20px rgba(249,114,22,.35);
}
.apd-btn-outline {
    background-color: transparent;
    color: var(--apd-primary);
    border: 1.5px solid var(--apd-primary);
    border-radius: var(--apd-radius);
    font-family: var(--apd-font-body);
    font-weight: 700;
    font-size: .875rem;
    padding: .6rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background-color var(--apd-transition), color var(--apd-transition);
}
.apd-btn-outline:hover {
    background-color: var(--apd-primary);
    color: var(--apd-white);
}
.apd-btn-lg {
    padding: .9rem 2rem;
    font-size: 1rem;
}

/* ── 4. HEADER ───────────────────────────────────────────── */
.apd-header {
    box-shadow: none;
    transition: box-shadow var(--apd-transition);
    z-index: 1030;
}
.menu-box {
    width:100%;
}

ul#menu-menu-principal {
    gap: 15px;
}

.apd-header {
    padding: 8px 0;
}
.apd-header .navbar-brand img { height: 38px; width: auto; }
.apd-header .nav-link {
    font-weight: 600;
    font-size: .875rem;
    color: var(--apd-text);
    padding: .5rem 1rem;
    border-radius: var(--apd-radius-sm);
    transition: color var(--apd-transition), background-color var(--apd-transition);
}
.apd-header .nav-link:hover,
.apd-header .nav-link.active {
    color: var(--apd-primary);
}
.apd-header__phone {
    font-weight: 700;
    font-size: .875rem;
    color: var(--apd-heading);
}
.apd-header__phone:hover { color: var(--apd-primary); }
.apd-header__phone svg { color: var(--apd-primary); }

/* ── 5. HERO ─────────────────────────────────────────────── */
.apd-hero {
    padding-block: 5rem 6rem;
    background: radial-gradient(ellipse at 80% 0%, #ddeaff 0%, #f2f6ff 20%, #ffffff 70%);
    overflow: hidden;
}
.apd-hero__title {
    font-size: clamp(2rem, 4rem, 4.2rem);
    font-weight: 800;
    color: var(--apd-heading);
    line-height: 1.1;
    margin-bottom: 1.25rem;
}
.apd-hero__title em {
    font-style: normal;
    color: var(--apd-primary);
}
.apd-hero__desc {
    font-size: 1.125rem;
    color: var(--apd-text);
    font-weight: 600;
    margin-bottom: 1.5rem;
    max-width: 520px;
}
.apd-badge {
    background: var(--apd-primary-bg);
    color: var(--apd-primary);
    border: 1px solid rgba(37,99,235,.2);
    border-radius: var(--apd-radius-full);
    font-family: var(--apd-font-heading);
    font-weight: 700;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem 1rem;
}
.apd-checklist { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.apd-checklist li { font-size: 1rem; font-weight: 600; color: var(--apd-text); }
.apd-trust-logo { font-size: .7rem; font-weight: 700; color: var(--apd-gray); text-transform: uppercase; letter-spacing: .06em; }

/* Logos aseguradoras en hero */
.apd-hero__insurers { padding-top: 4.5rem; }
.apd-hero__insurers img{
    opacity: 0.6;
}
.apd-insurer-logo {
    font-size: .85rem;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
    text-align: center;
}
.apd-insurer-logo--axa { letter-spacing: .15em; }

/* ── 6. COTIZADOR ────────────────────────────────────────── */
.apd-cotizador {
    background: var(--apd-white);
    border-radius: var(--apd-radius-lg);
    box-shadow: var(--apd-shadow-xl);
    padding: 1.5rem 2rem 3rem;
    border-top: 3px solid var(--apd-primary);
    max-width: 550px;
}
.apd-cotizador__title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--apd-heading);
    line-height: 1.2;
    margin-bottom: 1rem;
}
h2.apd-section__title {
    margin-bottom: 1.5rem;
}

.apd-cotizador__title .text-primary { color: var(--apd-primary) !important; }

/* Tabs matrícula */
.apd-matricula-tabs {
    display: flex;
    gap: .375rem;
    background: var(--apd-gray-light);
    border-radius: var(--apd-radius);
    padding: .55rem;
}

.apd-matricula-flag img{
    width: 30px !important;
    height: auto;
}

.apd-mtab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--apd-text);
    font-family: var(--apd-font-body);
    font-weight: 600;
    font-size: .9rem;
    padding: .55rem .55rem;
    border-radius: calc(var(--apd-radius) - 2px);
    cursor: pointer;
    transition: all var(--apd-transition);
    line-height: 1;
    border:3px solid transparent;
}
.apd-mtab.active {
    background: var(--apd-primary-bg);
    color: var(--apd-primary);
    box-shadow: var(--apd-shadow-sm);
    border: 2px solid var(--apd-primary);
}
.apd-mtab:hover:not(.active) { background: var(--apd-gray-mid); }

/* Input matrícula con bandera */
/* ============================================================
   INPUT MATRÍCULA (Integrado con Floating Label)
   ============================================================ */

/* 1. Ajustes del contenedor principal */
.apd-matricula-field {
    position: relative;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* 2. La Banderita Azul */
.apd-matricula-flag {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; /* Ocupa toda la altura del input */
    width: 44px;
    background: #283492;
    border-radius: var(--apd-radius-lg) 0 0 var(--apd-radius-lg); /* Bordes redondeados solo a la izquierda */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    z-index: 2; /* Para que quede por encima del input */
    pointer-events: none; /* Que los clics pasen a través de ella al input */
}

.apd-matricula-cc {
    font-size: .75rem;
    font-weight: 800;
    color: var(--apd-white);
    letter-spacing: .02em;
}

/* 3. Ajuste específico para el input y label de la matrícula */
/* Necesitamos dejar espacio a la izquierda para que el texto no pise la bandera */
.apd-matricula-field .apd-form-field__input {
    padding-left: 54px !important; /* 44px de la bandera + 10px de margen */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Ajustamos el placeholder para que no esté en mayúsculas ni espaciado */
.apd-matricula-field .apd-form-field__input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

/* Movemos el Floating Label un poco más a la derecha para que no pise la bandera */
.apd-matricula-field .apd-form-field__label {
    left: 55px; 
    z-index: 5;
}

/* Error message below matricula field */
.apd-matricula-field .seguros-error-message {
    flex-basis: 100%;
    width: 100%;
    order: 10;
}

/* Floating label fields */
.apd-form-field {
    position: relative;
    margin-top: 10px;
}

/* ============================================================
   CHECKBOX MATRÍCULA
   ============================================================ */
.apd-check-matricula {
    padding-left: 1.75rem; /* Separación de la casilla */
}

.apd-check-matricula .form-check-label {
    font-size: 0.85rem;
    color: var(--apd-text);
    cursor: pointer;
    font-weight: 500;
}

/* Color azul corporativo cuando está marcado */
.apd-check-matricula .form-check-input:checked {
    background-color: var(--apd-primary);
    border-color: var(--apd-primary);
}

.apd-check-matricula .form-check-input {
    cursor: pointer;
    margin-top: 0.35rem; /* Alineación perfecta con el texto */
}

/* 1. ESTILO GENERAL PARA TODOS LOS INPUTS (Limpios, sin flecha) */
.apd-form-field__input {
    width: 100%;
    padding: .9rem 1rem .65rem 1rem;
    border: 1.5px solid var(--apd-gray-mid);
    border-radius: var(--apd-radius-lg);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--apd-heading);
    background-color: var(--apd-white);
    transition: border-color var(--apd-transition), box-shadow var(--apd-transition);
    appearance: none;
    -webkit-appearance: none;
    cursor: text; /* Cursor normal para escribir */
}

.apd-form-field__input:focus {
    outline: none;
    border-color: var(--apd-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.apd-form-field__label {
    position: absolute;
    top: -.3rem;
    left: 1rem;
    padding: 0 .3rem;
    background: var(--apd-white);
    font-size: .72rem;
    font-weight: 600;
    color: var(--apd-text);
    pointer-events: none;
    line-height: 1;
    transition: color var(--apd-transition);
    z-index: 5;
}

.apd-form-field__input:focus + .apd-form-field__label { 
    color: var(--apd-primary); 
}

/* 2. ESTILO ESPECÍFICO SÓLO PARA LOS SELECT (Añade la flecha) */
select.apd-form-field__input {
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%233E4E69' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* 3. QUITAR LAS FLECHAS NATIVAS DE LOS INPUT NUMBER (Para C.P., Teléfono, etc.) */
input[type="number"].apd-form-field__input::-webkit-outer-spin-button,
input[type="number"].apd-form-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].apd-form-field__input {
    -moz-appearance: textfield; /* Firefox */
}

/* 4. ICONO DE CALENDARIO PARA DATEPICKER */
.apd-form-field__input.apd-datepicker {
    cursor: pointer;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
}

/* Para que el placeholder se vea un poco más claro */
.apd-form-field__input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* Para que el placeholder se vea un poco más claro que el texto normal */
.apd-form-field__input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

/* ── 7. SECCIONES ────────────────────────────────────────── */
.apd-section { padding-block: 5rem; }
.apd-section-extra {
    padding-block: 7.5rem;
    margin-block: 5rem 4rem;
}
.apd-section--bg-blue  { background-color: var(--apd-primary-bg); }
.apd-section--bg-gris-claro  { background-color: var(--apd-fondo-gris); }
.apd-section--bg-dark  { background-color: var(--apd-dark-navy); }
.apd-section__label {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    color: var(--apd-primary);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .75rem;
}
.apd-section__label--light { color: rgba(255,255,255,.6); }
.apd-section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; color: var(--apd-heading); }
.apd-text-blue {
    color: var(--apd-primary);
    font-style: normal;
}
#vehicles-heading {
    padding-top: 1rem;
}
.section_pargh{max-width: 900px; margin: 0 auto 0;}
.apd-requisito-item__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--apd-heading);
    margin-bottom: 0;
}
.apd-requisito-item__desc {
    font-size: .95rem;
    color: var(--apd-text);
    line-height: 1.6;
}

/* ── 8. VEHÍCULOS ────────────────────────────────────────── */
.apd-vehicle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 110px;
    padding: 1.25rem;
    background: var(--apd-white);
    border: 1.5px solid var(--apd-gray-mid);
    border-radius: var(--apd-radius-lg);
    cursor: pointer;
    transition: all var(--apd-transition);
}
.apd-vehicle-item:hover {
    border-color: var(--apd-primary);
    box-shadow: 0 4px 16px rgba(37,99,235,.12);
    transform: translateY(-3px);
}
.apd-vehicle-item__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.apd-vehicle-item__label { font-size: .7rem; font-weight: 700; color: var(--apd-heading); text-align: center; }

/* ── 9. BANNER CTA ───────────────────────────────────────── */
.apd-banner-cta {
    background: linear-gradient(-90deg, #0022FF 0%, #001499 100%);
    padding: 3rem 2.5rem;
    border-radius: var(--apd-radius-lg);
}
.apd-banner-cta__label {
    font-size: .75rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.apd-banner-cta__message { font-size: 1.125rem; font-weight: 700; color: var(--apd-white); }
section.apd-banner-cta-box {
    padding-bottom: 5rem;
}

/* ── 10. VENTAJAS ────────────────────────────────────────── */
.apd-ventaja-card {
    padding: 2rem;
    background: var(--apd-white);
    border: 1.5px solid var(--apd-gray-mid);
    border-radius: var(--apd-radius-lg);
    transition: box-shadow var(--apd-transition), transform var(--apd-transition);
}
.apd-ventaja-card:hover { box-shadow: var(--apd-shadow-md); transform: translateY(-4px); }
.apd-ventaja-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--apd-primary-bg);
    border-radius: var(--apd-radius-lg);
}
.apd-ventaja-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--apd-heading);
    margin-bottom: .75rem;
}
/* ── 11. PASOS ───────────────────────────────────────────── */
.apd-step-card { padding: 2rem 1.25rem; }
.apd-step-card__number {
    width: 60px;
    height: 60px;
    background: var(--apd-primary);
    color: var(--apd-white);
    border-radius: var(--apd-radius-full);
    font-size: 1.35rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apd-step-card__icon {
    width: 64px;
    height: 64px;
    background: var(--apd-white);
    border-radius: var(--apd-radius-lg);
    box-shadow: var(--apd-shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.apd-step-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--apd-heading);
    margin-bottom: .75rem;
}
.apd-step-card__desc {
    font-size: .95rem;
    color: var(--apd-text);
    line-height: 1.6;
}

/* ── 12. CHECKLIST ───────────────────────────────────────── */
.apd-check-list { display: flex; flex-direction: column; gap: 1rem; }
.apd-check-list li {
    font-weight: 600;
    font-size: 0.95rem;
}
.apd-check-list--light li { color: rgba(255,255,255,.9); }

/* ── 13. INNER BANNER ────────────────────────────────────── */
.apd-inner-banner {
    background: var(--apd-primary);
}
.apd-inner-banner__icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: rgba(255,255,255,.15);
    border-radius: var(--apd-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.apd-inner-banner__title {
    color: var(--apd-white);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1;
}
.apd-inner-banner__desc {
    color: rgba(255,255,255,.8);
    font-size: 1.1rem;
}
/* ── 14. CUANDO ICON ─────────────────────────────────────── */
.apd-cuando-icon {
    width: 56px;
    height: 56px;
    min-width: 46px;
    background: var(--apd-primary);
    border-radius: var(--apd-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.apd-cuando-img {
    max-height: 540px;
    object-fit: cover;
}

/* ── 15. MATRÍCULAS ──────────────────────────────────────── */
.apd-matricula-card {
    border-radius: var(--apd-radius-lg);
    overflow: hidden;
    background: var(--apd-white);
    box-shadow: var(--apd-shadow-md);
    border: 1.5px solid var(--apd-gray-mid);
    transition: transform var(--apd-transition), box-shadow var(--apd-transition);
}
.apd-matricula-card:hover { transform: translateY(-4px); box-shadow: var(--apd-shadow-xl); }
.apd-matricula-card--featured {
    border-color: var(--apd-primary);
    transform: translateY(-8px);
    box-shadow: var(--apd-shadow-xl);
}
.apd-matricula-card__header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem;
}
.apd-matricula-card__header--blue  { background: var(--apd-primary); }
.apd-matricula-card__header--green { background: var(--apd-green); }
.apd-matricula-card__header--red   { background: var(--apd-red); }
.apd-matricula-card__body { padding: 1.5rem; }
.apd-card-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.apd-card-list li { font-size: .75rem; font-weight: 600; color: var(--apd-heading); padding-left: 1.25rem; position: relative; }
.apd-card-list li::before { content: '✓'; position: absolute; left: 0; color: var(--apd-primary); font-weight: 700; }

/* ── 16. ESTADÍSTICAS ────────────────────────────────────── */
.apd-stat-item {
    padding: 1.25rem;
    background: var(--apd-primary-bg);
    border-radius: var(--apd-radius-lg);
    border: 1px solid rgba(37,99,235,.1);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.apd-stat-item__number { font-family: var(--apd-font-heading); font-size: 1.75rem; font-weight: 800; color: var(--apd-primary); line-height: 1; }
.apd-stat-item__label  { font-size: .75rem; font-weight: 600; color: var(--apd-text); }
/* ── Trust bloques ── */
.apd-trust-bloque {
    padding-block: 2rem;
    border-bottom: 1px solid var(--apd-gray-mid);
}
.apd-trust-bloque:last-child { border-bottom: none; }
.apd-trust-bloque__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--apd-heading);
    margin-bottom: .5rem;
}
.apd-trust-bloque__desc {
    font-size: .9rem;
    color: var(--apd-text);
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 520px;
}
.apd-trust-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--apd-primary-bg);
    color: var(--apd-primary);
    border-radius: var(--apd-radius-full);
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .9rem;
}

/* ── 17. FORMULARIO CARD ─────────────────────────────────── */
.apd-form-card {
    max-width: 680px;
    background: var(--apd-white);
    border-radius: var(--apd-radius-xl);
    box-shadow: var(--apd-shadow-lg);
    padding: 2rem;
}

/* ── 18. COBERTURAS ──────────────────────────────────────── */
.apd-cobertura-item {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: white;
    border-radius: var(--apd-radius-lg);
    transition: border-color var(--apd-transition), box-shadow var(--apd-transition);
}
.apd-cobertura-item:hover { border-color: var(--apd-primary); box-shadow: var(--apd-shadow-md); }
.apd-cobertura-item__icon {
    width: 48px; height: 48px;
    background: var(--apd-primary-bg);
    border-radius: var(--apd-radius);
    display: flex; align-items: center; justify-content: center;
}
.apd-cobertura-item__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--apd-heading);
    margin-bottom: 0.75rem;
}

img.icon_cob_home {
    margin: 0 0 15px;
}

/* ── 19. REVIEWS ─────────────────────────────────────────── */
.stats-box{
    max-width: 1100px;
    margin:0 auto;
}
.apd-review-stat {
    background: var(--apd-white);
    border-radius: var(--apd-radius-lg);
    box-shadow: var(--apd-shadow-md);
    padding: 2rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.apd-review-stat__num {
    font-family: var(--apd-font-heading);
    font-size: 3rem;
    font-weight: 600;
    color: var(--apd-primary);
    line-height: 1;
    white-space: nowrap;
}
.apd-review-card {
    background: var(--apd-white);
    border-radius: var(--apd-radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.apd-review-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: var(--apd-radius-full);
    background: var(--apd-primary-bg);
    color: var(--apd-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.apd-review-card__quote {
    display: block;
    width: 50px;
    height: 35px;
    background-image: url('/wp-content/uploads/2026/02/comillas.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    font-size: 0;
    flex-shrink: 0;
}
.apd-review-card__text {
    font-size: .95rem;
    color: var(--apd-text);
    line-height: 1.6;
    margin-bottom: 0;
}
.apd-review-card__date {
    font-size: .75rem;
    color: var(--apd-gray);
}

/* Indicadores carousel personalizados */
.apd-carousel-indicators {
    bottom: auto;
    justify-content: center;
    gap: .4rem;
}
.apd-carousel-indicators button {
    width: 28px !important;
    height: 6px !important;
    border-radius: 3px !important;
    background-color: var(--apd-gray-mid) !important;
    border: none !important;
    opacity: 1 !important;
    transition: background-color var(--apd-transition), width var(--apd-transition);
}
.apd-carousel-indicators button.active {
    background-color: var(--apd-primary) !important;
    width: 40px !important;
}

/* ── 20. FAQ ACCORDION ───────────────────────────────────── */
h3.accordion-header button{
    font-size:1.05rem;
}
.apd-faq-item {
    background: var(--apd-white);
    border: 1.5px solid var(--apd-gray-mid) !important;
    border-radius: var(--apd-radius-lg) !important;
    overflow: hidden;
    margin-bottom: .75rem;
    transition: border-color var(--apd-transition);
}
.apd-faq-item:not(.collapsed) { border-color: var(--apd-primary) !important; }
.apd-faq-btn {
    font-family: var(--apd-font-body);
    font-weight: 700;
    font-size: .875rem;
    color: var(--apd-heading);
    background: var(--apd-white) !important;
    padding: 1.25rem 1.5rem;
    box-shadow: none !important;
}
.apd-cobertura-badge {
    display: inline-flex;
    max-width: 75%;
    align-items: center;
    gap: .35rem;
    background: var(--apd-primary-bg);
    color: var(--apd-primary);
    border-radius: var(--apd-radius);
    font-size: .85rem;
    font-weight: 700;
    padding: .3rem .75rem;
    margin-bottom: 1rem;
    box-shadow: var(--apd-shadow-sm);
}
.apd-faq-btn:not(.collapsed) { color: var(--apd-primary); }
.apd-faq-btn::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%232563EB' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 20px;
}
.apd-faq-body { font-size: .95rem; color: var(--apd-text); line-height: 1.6; padding: 0 1.5rem 1.25rem; }

/* ── 21. BANNER FINAL ────────────────────────────────────── */
.apd-banner-final { background: linear-gradient(135deg, #1D4ED8 0%, var(--apd-primary) 100%); padding-block: 5rem; }
.apd-banner-final__title { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 800; color: var(--apd-white); }
.apd-banner-final__subtitle { font-size: 1.125rem; color: rgba(255,255,255,.8); }

/* ── 22. FOOTER ──────────────────────────────────────────── */
.apd-footer { background-color: var(--apd-white); }
.apd-footer__top { background-color: var(--apd-white); }
.apd-footer__tagline { font-size: .875rem; color: var(--apd-text); line-height: 1.6; max-width: 280px; }
.apd-footer__col-title {
    /* font-size: .95rem; */
    /* font-weight: 800; */
    color: var(--apd-heading);
    /* text-transform: uppercase; */
    /* letter-spacing: .06em; */
    margin-bottom: 1rem;
}
.apd-footer__links { display: flex; flex-direction: column; gap: .5rem; }
.apd-footer__links li a { font-size: .875rem; color: var(--apd-text); text-decoration: none; transition: color var(--apd-transition); }
.apd-footer__links li a:hover { color: var(--apd-primary); }
.apd-footer__links--contact { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.apd-footer__links--contact a { font-size: .875rem; color: var(--apd-text); text-decoration: none; }
.apd-footer__links--contact span { font-size: .875rem; color: var(--apd-text); }
.apd-footer__links--contact a:hover { color: var(--apd-primary); }
.apd-social-link {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--apd-radius-full);
    background: var(--apd-primary-bg);
    color: var(--apd-primary);
    text-decoration: none;
    transition: background var(--apd-transition), color var(--apd-transition);
}
.apd-social-link:hover { background: var(--apd-primary); color: var(--apd-white); }
.apd-footer__bottom { 
    border-radius: var(--apd-radius-lg);
    background-color: var(--apd-primary-bg);
}
.apd-footer__bottom p{
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* ── 23. BLOG ────────────────────────────────────────────── */
.apd-post-card {
    background: var(--apd-white);
    border-radius: var(--apd-radius-lg);
    overflow: hidden;
    /* box-shadow: var(--apd-shadow-sm); */
    border: 1.5px solid var(--apd-gray-mid);
    transition: box-shadow var(--apd-transition), transform var(--apd-transition);
    padding: 0 0 2rem;
}
.apd-post-card:hover { box-shadow: var(--apd-shadow-md); transform: translateY(-3px); }
.widget { background: var(--apd-white); border: 1px solid var(--apd-gray-mid); border-radius: var(--apd-radius-lg); padding: 1.5rem; margin-bottom: 1.25rem; }
.widget__title { font-size: 1rem; font-weight: 800; color: var(--apd-heading); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--apd-primary-bg); }

/* 404 */
.error-404 { padding-block: 6rem; text-align: center; }
.error-404__code { font-size: 8rem; font-weight: 800; color: var(--apd-primary); line-height: 1; }

/* ── 24. ANIMACIONES ─────────────────────────────────────── */
.apd-animate { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.apd-animate.is-visible { opacity: 1; transform: none; }

/* ── 25. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 991.98px) {
    .apd-hero { padding-block: 3rem 4rem; }
    .apd-cotizador { margin-top: 0; }
    .apd-matricula-card--featured { transform: none; }
}

@media (max-width: 767.98px) {
    .apd-section { padding-block: 3rem; }
    .apd-hero { padding-block: 2.5rem 3rem; }
    .apd-hero__title { font-size: 2rem; }
    .apd-banner-cta .container > div { flex-direction: column; text-align: center; }
    .apd-banner-final { padding-block: 3rem; }
    .apd-vehicle-item { width: calc(25% - .75rem); min-width: 75px; padding: .75rem .5rem; }
    .apd-vehicle-item__label { font-size: .6rem; }
    .apd-matricula-tabs { flex-direction: column; }
}
@media (max-width: 479.98px) {
    .apd-vehicle-item { width: calc(33.333% - .5rem); }
    .apd-cotizador { padding: 1.25rem; }
}


/***
Otros
***/
.title-block-asgpd{
    max-width:700px;
    margin:0 auto;
}

/** Selector vehiculos home***/
.selector-vehiculos-box {
    max-width: 900px;
    margin: 0 auto;
}
.box-select-veh-spg {
    background-color: var(--apd-gray-light);
    padding: 20px;
    border-radius: var(--apd-radius);
    transition:all 0.4s;
    cursor:pointer;
    width: calc(17% - 20px); /* 20% son 5 por fila. Restamos 20px para compensar el margen */
    margin: 10px;            /* Espacio de separación entre las cajas */
    box-sizing: border-box;
}
.box-select-veh-spg:hover {
    box-shadow: 0 0 13px 3px #2563eb36;
}
/* Responsive: Para tablets (pantallas menores de 992px), mostramos 3 por fila */
@media (max-width: 991px) {
    .box-select-veh-spg {
        width: calc(33.333% - 20px); 
    }
}

/* Responsive: Para móviles (pantallas menores de 576px), mostramos 2 por fila */
@media (max-width: 575px) {
    .box-select-veh-spg {
        width: calc(50% - 20px); 
    }
}
.icon-vh {
    background-color: white;
    width: 45px;
    height: 45px;
    border-radius: var(--apd-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.icon-vh img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
span.title-veh-spg {
    display: block;
    font-weight: 700;
    margin: 15px 0 0;
}
div#selector_vh_home {
    margin: 1rem 0 0;
}



/***** matriculas verdes rojas y extranjeras*****/
/* ── Matrícula ejemplo ── */
.matricula-exmp {
    display: flex;
    align-items: center;
    background: #F3F4F6;
    border-radius: 10px;
    overflow: hidden;
    font-family: var(--apd-font-heading);
    font-weight: 700;
    padding: 8px;
    gap: 12px;
}
.matricula-exmp.matricula-exmp--green {
    background: #E8FFF2;
}
.matricula-exmp.matricula-exmp--red {
    background: #FFE8E8;
}
.matricula-exmp__letra {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.matricula-exmp__texto {
    font-size: 1rem;
    font-weight: 600;
    color: #1A1A1A;
    letter-spacing: .04em;
}

/* Variantes */
.matricula-exmp--blue  .matricula-exmp__letra { background: #2563EB; }
.matricula-exmp--green .matricula-exmp__letra { background: #16A34A; }
.matricula-exmp--red   .matricula-exmp__letra { background: #DC2626; }

/* Ajuste del Menú Móvil (Offcanvas) */
@media (max-width: 991.98px) {
    .offcanvas.offcanvas-start {
        width: 90% !important; /* Ocupa el 90% del ancho */
        border-right: none;
        box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    }

    .offcanvas-body .navbar-nav {
        margin-left: 0 !important; /* Alinea los items a la izquierda */
        gap: 1rem;
    }

    .offcanvas-body .nav-link {
        font-size: 1.1rem; /* Un poco más grande para facilitar el toque */
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--apd-gray-mid);
    }
}

.foto-carta-verde-home{
    height: 700px;
    width: auto !important;
    margin-left: 5%;
}

/* ============================================================
   TOM SELECT CUSTOMIZATION
   ============================================================ */


/* 0. FIX DOBLE BORDE: Quitamos los estilos heredados del contenedor principal de Tom Select */
.apd-form-field .ts-wrapper.apd-form-field__input {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
}

/* 1. Contenedor principal */
.apd-form-field .ts-wrapper {
    width: 100%;
    margin-top: 0;
}

/* 2. El "input" visual (Caja interior de Tom Select) */
.apd-form-field .ts-control {
    padding: .9rem 2.5rem .65rem 1rem !important; /* Espacio para el texto y la flecha */
    border: 1.5px solid var(--apd-gray-mid) !important;
    border-radius: var(--apd-radius-lg) !important;
    background-color: var(--apd-white) !important;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--apd-heading) !important;
    box-shadow: none !important;
    transition: border-color var(--apd-transition), box-shadow var(--apd-transition);
    cursor: pointer;
    
    /* Centrado vertical perfecto */
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    
    /* Tu flecha SVG personalizada */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%233E4E69' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
}

/* Ocultar la flecha por defecto de la librería */
.apd-form-field .ts-wrapper.single .ts-control::after {
    display: none !important;
}

/* Efecto Focus (RECUPERADO: Borde azul y sombra cuando haces clic) */
.apd-form-field .ts-wrapper.focus .ts-control,
.apd-form-field .ts-wrapper.input-active .ts-control {
    border: 1.5px solid var(--apd-primary) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1) !important;
}

/* 3. El texto seleccionado y el input de búsqueda */
.apd-form-field .ts-control > div,
.apd-form-field .ts-control input,
.apd-form-field .ts-control .ts-item-text {
    font-family: var(--apd-font-body) !important;
    font-size: .9375rem !important;
    font-weight: 500 !important;
    color: var(--apd-heading) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    border: none !important;
    background: transparent !important;
}

/* Estilo específico para el texto seleccionado en span */
.apd-form-field .ts-control .ts-item-text {
    display: inline-block;
}

/* Forzar que el placeholder de Tom Select herede tu gris */
.apd-form-field .ts-control input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

.apd-form-field .ts-wrapper:not(.has-items):not(.focus) .ts-control input {
    caret-color: transparent !important; 
}

.apd-form-field .ts-wrapper.select2_input:not(.has-items) .ts-control::before {
    content: "Selecciona una opción";
    color: #9ca3af;
    font-weight: 400;
}

/* 4. El desplegable (Lista de opciones) */
.apd-form-field .ts-dropdown {
    z-index: 1050;
    font-family: var(--apd-font-body);
    border: 1.5px solid var(--apd-gray-mid) !important;
    border-radius: var(--apd-radius-lg) !important;
    box-shadow: var(--apd-shadow-lg) !important;
    margin-top: 4px;
}

/* Cada opción de la lista */
.apd-form-field .ts-dropdown .option {
    padding: 0.6rem 1.2rem !important;
    font-size: .9375rem;
    color: var(--apd-text);
}

/* Opción al pasar el ratón por encima */
.apd-form-field .ts-dropdown .option.active,
.apd-form-field .ts-dropdown .option:hover {
    background-color: var(--apd-primary-bg) !important;
    color: var(--apd-primary) !important;
}

/* Ocultar la opción vacía "Seleccionar" dentro del desplegable abierto */
.apd-form-field .ts-dropdown .option[data-value=""] {
    display: none !important;
}

/* 5. Colorear el Label de azul cuando está activo */
.apd-form-field.is-focused .apd-form-field__label {
    color: var(--apd-primary);
}



/****
** CSS LOADER
*****/

/* =========================================
   1. CAPA SUPERPUESTA (Fondo semitransparente)
   ========================================= */
.loader-overlay {
  display: none;         
  position: fixed;        
  top: 0;
  left: 0;
  width: 100vw;           
  height: 100vh;          
  background-color: rgba(255, 255, 255, 0.85); 
  z-index: 999999;        
  
  /* Flexbox para centrar (se activará cuando lo mostremos) */
flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =========================================
   2. TU ELEMENTO GIRATORIO (Loader)
   ========================================= */
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}

.lds-roller {
  display: block;
  position: relative;
  width: 80px;
  height: 80px;
  color: #007bff; /* <-- AÑADIDO: Color de los puntos giratorios. Cámbialo a tu gusto */
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor; /* Coge el color definido en .lds-roller */
  margin: -3.6px 0 0 -3.6px;
}

.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1):after { top: 62.62742px; left: 62.62742px; }

.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2):after { top: 67.71281px; left: 56px; }

.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3):after { top: 70.90963px; left: 48.28221px; }

.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4):after { top: 72px; left: 40px; }

.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.lds-roller div:nth-child(5):after { top: 70.90963px; left: 31.71779px; }

.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6):after { top: 67.71281px; left: 24px; }

.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7):after { top: 62.62742px; left: 17.37258px; }

.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8):after { top: 56px; left: 12.28719px; }

@keyframes lds-roller {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-text {
    margin-top: 1.25rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--apd-heading);
    text-align: center;
}
.loader-text em {
    font-style: normal;
    color: var(--apd-primary);
}
.loader-ellipsis span {
    animation: ellipsisDot 1.2s ease-in-out infinite;
    opacity: 0;
}
.loader-ellipsis span:nth-child(2) { animation-delay: .2s; }
.loader-ellipsis span:nth-child(3) { animation-delay: .4s; }

@keyframes ellipsisDot {
    0%, 60%, 100% { opacity: 0; }
    30%           { opacity: 1; }
}


/**** DATEPICKER ****/
.air-datepicker-global-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    pointer-events: none !important;   /* ← no bloquea clicks cuando está vacío */
}

.air-datepicker-global-container:has(.air-datepicker.-active-) {
    background: rgba(15, 23, 42, .5) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    pointer-events: all !important;    /* ← reactiva clicks cuando hay datepicker abierto */
}

.air-datepicker-global-container .air-datepicker {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.2) !important;
    border: none !important;
    width: calc(100vw - 2rem);
    max-width: 340px;
}

.air-datepicker-global-container .air-datepicker.-active- {
    animation: apdModalIn .2s ease;
}

@keyframes apdModalIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1);   }
}

/* Números en vista de años */
.air-datepicker-global-container .air-datepicker-cell.-year- , .air-datepicker-cell.-month-{
    font-size: 1rem;
    font-weight: 600;
}

/* Nombres en vista de meses */
.air-datepicker-global-container .air-datepicker-cell.-month- {
    font-size: .9rem;
    font-weight: 600;
}

/* Números en vista de días */
.air-datepicker-global-container .air-datepicker-cell.-day- {
    font-size: .9rem;
    font-weight: 600;
}

.air-datepicker-nav--title{
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.air-datepicker.-is-mobile-{
    max-width:360px;
}

.air-datepicker-body--day-name {
    color: var(--apd-primary) !important;
}

.air-datepicker-cell.-selected- {
    color: #fff;
    border: none;
    background: var(--apd-primary);
}

div#block-7 {
    padding: 0;
    border: none;
    margin-top: 4rem;
}




/**** ARCHIVE BLOG ****/
/* ── Blog cards ───────────────────────────────────────────── */
.apd-blog-card {
    background: var(--apd-white);
    border-radius: var(--apd-radius-lg);
    border: 1px solid var(--apd-gray-mid);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
    position: relative;
}

time {
    font-size: 0.75rem;
}
.apd-blog-card:hover {
    box-shadow: var(--apd-shadow);
    transform: translateY(-3px);
}
.apd-blog-card__img-wrap { display: block; overflow: hidden; }
.apd-blog-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .3s;
}
.apd-blog-card:hover .apd-blog-card__img { transform: scale(1.03); }

.apd-blog-card__body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.apd-blog-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--apd-heading);
    line-height: 1.4;
    margin-bottom: .6rem;
}
.apd-blog-card__title a { color: inherit; }
.apd-blog-card__excerpt {
    font-size: .875rem;
    color: var(--apd-text);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 1rem;
}
.apd-blog-card__meta {
    font-size: .75rem;
    color: var(--apd-text);
    display: flex;
    gap: .4rem;
    align-items: center;
    opacity: .7;
}

/* ── Paginación ───────────────────────────────────────────── */
.apd-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.apd-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 .75rem;
    border-radius: var(--apd-radius-full);
    border: 1.5px solid var(--apd-gray-mid);
    font-size: .875rem;
    font-weight: 600;
    color: var(--apd-text);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.apd-pagination .page-numbers:hover,
.apd-pagination .page-numbers.current {
    background: var(--apd-primary);
    border-color: var(--apd-primary);
    color: var(--apd-white);
}