/* ==========================================================================
   Capa de marca Aucma
   Se carga en _Layout después de theme.min.css (Front / Bootstrap 5.1.3) y
   sustituye el azul del tema por la identidad de Aucma:
   rojo #E81414, negro, grises claros, Nunito Sans para títulos y
   Merriweather Sans para texto. Winia sigue presente como marca heredada.
   ========================================================================== */

:root {
    --ac-red: #E81414;
    --ac-red-deep: #C20E0E;
    --ac-red-soft: rgba(232, 20, 20, 0.10);
    --ac-black: #000000;
    --ac-text: #3C3C3C;
    --ac-muted: #767676;
    --ac-surface: #F6F6F6;
    --ac-line: #EBEBEB;
    --ac-font-head: "Nunito Sans", "Segoe UI", Arial, sans-serif;
    --ac-font-body: "Merriweather Sans", "Segoe UI", Arial, sans-serif;

    --bs-primary: var(--ac-red);
    --bs-primary-rgb: 232, 20, 20;
    --bs-dark: var(--ac-black);
    --bs-body-font-family: var(--ac-font-body);
    --bs-body-color: var(--ac-text);
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */
body {
    font-family: var(--ac-font-body);
    font-weight: 300;
    color: var(--ac-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--ac-font-head);
    font-weight: 800;
    color: var(--ac-black);
    letter-spacing: -0.01em;
}

strong, b { font-weight: 700; }

.btn, .nav-link, .navbar-brand, .page-link, .form-label, .badge,
.list-group-item, .dropdown-item, .accordion-button {
    font-family: var(--ac-font-head);
}

/* --------------------------------------------------------------------------
   Color primario: enlaces y utilidades
   -------------------------------------------------------------------------- */
a { color: var(--ac-red); }
a:hover, a:focus { color: var(--ac-red-deep); }

.text-primary { color: var(--ac-red) !important; }
.bg-primary { background-color: var(--ac-red) !important; }
.bg-soft-primary { background-color: var(--ac-red-soft) !important; }
.border-primary { border-color: var(--ac-red) !important; }
.link-primary { color: var(--ac-red) !important; }
.link-primary:hover { color: var(--ac-red-deep) !important; }

/* --------------------------------------------------------------------------
   Botones: píldora, relleno rojo, hover invertido (blanco con texto rojo)
   -------------------------------------------------------------------------- */
.btn { font-weight: 700; }

.btn-primary {
    color: #fff;
    background-color: var(--ac-red);
    border: 1px solid var(--ac-red);
    border-radius: 100px;
}
.btn-primary:hover,
.btn-primary:focus {
    color: var(--ac-red);
    background-color: #fff;
    border-color: var(--ac-red);
    box-shadow: none;
}
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    color: #fff;
    background-color: var(--ac-red-deep);
    border-color: var(--ac-red-deep);
}
.btn-primary:focus-visible {
    outline: 2px solid var(--ac-red);
    outline-offset: 2px;
}
.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: var(--ac-red);
    border-color: var(--ac-red);
    opacity: 0.5;
}

.btn-outline-primary {
    color: var(--ac-red);
    border: 1px solid var(--ac-red);
    border-radius: 100px;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--ac-red);
    border-color: var(--ac-red);
}

.btn-soft-primary {
    color: var(--ac-red);
    background-color: var(--ac-red-soft);
    border-color: transparent;
    border-radius: 100px;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus {
    color: #fff;
    background-color: var(--ac-red);
    border-color: transparent;
}

.btn-ghost-primary { color: var(--ac-red); }
.btn-ghost-primary:hover,
.btn-ghost-primary:focus {
    color: var(--ac-red);
    background-color: var(--ac-red-soft);
}

.btn-link { color: var(--ac-red); }
.btn-link:hover { color: var(--ac-red-deep); }

/* --------------------------------------------------------------------------
   Navegación y pestañas
   -------------------------------------------------------------------------- */
.navbar .nav-link h4 { transition: color 0.15s ease; }
.navbar .nav-link.active h4,
.navbar .nav-link:hover h4,
.navbar .nav-link:focus h4 { color: var(--ac-red); }

.nav-link.active,
.nav-link:hover,
.nav-link:focus { color: var(--ac-red); }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--ac-red);
}

.nav-segment .nav-link.active { color: var(--ac-red); }

.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--ac-red);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: rgba(232, 20, 20, 0.5);
    box-shadow: 0 0 0 0.2rem var(--ac-red-soft);
}
.form-check-input:checked {
    background-color: var(--ac-red);
    border-color: var(--ac-red);
}
.form-check-input:focus {
    border-color: rgba(232, 20, 20, 0.5);
    box-shadow: 0 0 0 0.2rem var(--ac-red-soft);
}

/* --------------------------------------------------------------------------
   Paginación, acordeones, listas, swiper
   -------------------------------------------------------------------------- */
.page-link { color: var(--ac-black); }
.page-link:hover,
.page-link:focus {
    color: var(--ac-red);
    background-color: var(--ac-red-soft);
    box-shadow: none;
}
.page-item.active .page-link {
    color: #fff;
    background-color: var(--ac-red);
    border-color: var(--ac-red);
}

/* Acordeón (FAQ): pregunta en negro, abierta en rojo, iconos + y - a juego */
.accordion-item { border-color: var(--ac-line); }
.accordion-button {
    color: var(--ac-black);
    font-weight: 700;
}
.accordion-button:hover { color: var(--ac-red); }
.accordion-button:not(.collapsed) {
    color: var(--ac-red);
    background-color: var(--ac-surface);
    box-shadow: inset 0 -1px 0 var(--ac-line);
}
.accordion-button:focus {
    border-color: transparent;
    box-shadow: 0 0 0 0.2rem var(--ac-red-soft);
}
.accordion-btn-icon-start .accordion-button::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3e%3cpath d='M19,11.5v1a.5.5,0,0,1-.5.5H13v5.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V13H5.5a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H11V5.5a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5V11h5.5A.5.5,0,0,1,19,11.5Z'/%3e%3c/svg%3e");
}
.accordion-btn-icon-start .accordion-button:not(.collapsed)::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E81414'%3e%3cpath d='M5.5,13a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h13a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5Z'/%3e%3c/svg%3e");
}
.accordion-body { color: var(--ac-text); }

.list-group-item.active {
    color: #fff;
    background-color: var(--ac-red);
    border-color: var(--ac-red);
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover { border-color: var(--ac-red); }
.swiper-pagination-bullet-active::before,
.swiper-pagination-bullet-active:hover::before { background-color: var(--ac-red); }

/* --------------------------------------------------------------------------
   Íconos en círculo rojo (footer y accesos de Home)
   -------------------------------------------------------------------------- */
.ac-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background-color: var(--ac-red);
    color: #fff;
    font-size: 1.375rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}
.ac-icon-circle-lg {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 2.5rem;
}
a:hover .ac-icon-circle,
a:focus-visible .ac-icon-circle { background-color: var(--ac-red-deep); }

.ac-feature-link {
    display: inline-block;
    color: var(--ac-black);
    text-decoration: none;
}
.ac-feature-link h4 { margin: 0; }
.ac-feature-link:hover h4,
.ac-feature-link:focus-visible h4 { color: var(--ac-red); }
.ac-feature-link:focus-visible { outline: 2px solid var(--ac-red); outline-offset: 6px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Tarjetas de acceso de Home (manuales, software, accesorios, comercial)
   Sustituyen a las imágenes PNG; la proporción 3:2 es la de las anteriores.
   -------------------------------------------------------------------------- */
.ac-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 3 / 2;
    padding: 1.5rem;
    background-color: var(--ac-surface);
    border: 1px solid var(--ac-line);
    border-radius: 0.5rem;
    color: var(--ac-black);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ac-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-color: var(--ac-red);
    transform: scaleX(0.18);
    transform-origin: left center;
    transition: transform 0.25s ease;
}
.ac-tile:hover,
.ac-tile:focus-visible {
    color: var(--ac-black);
    border-color: var(--ac-red);
    transform: translateY(-2px);
    outline: none;
}
.ac-tile:hover::after,
.ac-tile:focus-visible::after { transform: scaleX(1); }

.ac-tile__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.ac-tile__icon {
    font-size: 2.5rem;
    line-height: 1;
    color: var(--ac-red);
}
.ac-tile__external {
    font-size: 1rem;
    color: var(--ac-muted);
}
.ac-tile__title {
    font-family: var(--ac-font-head);
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.15;
    margin: 0 0 0.25rem;
    color: var(--ac-black);
}
.ac-tile__text {
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
    color: var(--ac-muted);
}

/* --------------------------------------------------------------------------
   Portada de Centros de Servicio (sustituye a la foto del swiper)
   Dos planos de rojo partidos en diagonal, titular grande y pin de mapa.
   -------------------------------------------------------------------------- */
.ac-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 20rem;
    color: #fff;
    background-color: var(--ac-red);
    background-image: linear-gradient(112deg, var(--ac-red) 0 60%, var(--ac-red-deep) 60% 100%);
    overflow: hidden;
}
.ac-hero__content {
    position: relative;
    z-index: 1;
}
.ac-hero__title {
    font-family: var(--ac-font-head);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 15ch;
    margin: 0 0 1rem;
}
.ac-hero__text {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 46ch;
    margin: 0;
}
.ac-hero__icon {
    position: absolute;
    right: 7%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(7rem, 16vw, 14rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
    pointer-events: none;
}
@media (max-width: 767.98px) {
    .ac-hero__icon { display: none; }
    .ac-hero { min-height: 16rem; }
}

/* --------------------------------------------------------------------------
   Accesibilidad: sin movimiento para quien lo pide
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ac-tile, .ac-tile::after, .ac-icon-circle, .card-transition, .navbar .nav-link h4 {
        transition: none;
    }
    .ac-tile:hover, .ac-tile:focus-visible { transform: none; }
}