/* ==========================================================================
   Accessibility Override — WCAG 2.1 AA
   Cargado después de main.css y ssic.css para garantizar prioridad.
   ========================================================================== */

/* ------------------------------------------------------------------
   2.4.1 Skip Link - Enlace para saltar al contenido principal
   ------------------------------------------------------------------ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 9999;
    background: #005fcc;
    color: #ffffff;
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Reset estilos nativos para botones iconograficos (hamburger, collapser)
   ------------------------------------------------------------------ */
button.hamburger,
button.offer-collapser {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ------------------------------------------------------------------
   Clases utilitarias de accesibilidad
   ------------------------------------------------------------------ */

/* Oculta visualmente pero conserva accesibilidad para lectores de pantalla */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Texto de ayuda/hint para campos de formulario */
.form-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #666666;
    line-height: 1.4;
}

/* ------------------------------------------------------------------
   2.4.7 Focus Visible
   Restaura el indicador de foco visible eliminado por el reset global.
   Se usa :focus-visible para no mostrar el outline al hacer clic con ratón.
   ------------------------------------------------------------------ */
:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Fallback para navegadores sin soporte de :focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* Asegurar que inputs y selects también muestren foco */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   4.1.2 Name, Role, Value
   Cursor pointer para controles no semánticos ya marcados con role=button.
   ------------------------------------------------------------------ */
[role="button"] {
    cursor: pointer;
}

/********************/
/**** GENERAL ****/
/********************/
.button-acc-orange {
    color: #000000 !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: #FF5E23;
}

.button-acc-orange:hover {
    color: #ffffff !important;
    background-color: #000000;
}

/* Selector de idioma en el header */
.header__lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
    padding: 0 8px;
}

.header__lang span[role="img"] {
    font-size: 20px;
    line-height: 1;
}

.button-acc-white {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #ffffff;
    color: #000000 !important;
    padding: 16px !important;
    font-size: 20px;
    font-weight: 500;
    height: auto !important;
    line-height: 1.2;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Botón Buscar: ocupa todo el ancho de su campo */
#search-submit {
    width: 100%;
}

.button-acc-white:hover {
    color: #ffffff !important;
    background-color: #000000;
}

/********************/
/**** MENU ****/
/********************/

/* Borde inferior verde del header (Figma) */
.header {
    border-bottom: 10px solid #3A844A;
}

.header__logo img {
    padding-left: 50px;
    width: 100%;
    max-width: 275px;
}

/* Nav items: responsive — 20px solo en pantallas anchas */
.header__nav li a {
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 20px);
    color: #1b1b1b !important;
    white-space: nowrap;
}

/* Selector de idioma ES: pill con borde (Figma) */
.header__lang-pill {
    display: flex;
    align-items: center;
    position: relative;
    border: 2px solid #444;
    border-radius: 50px;
    width: 93px;
        width: 24px;
    overflow: visible;
        font-size: 1.35rem;
}

.header__lang-pill img {
    position: absolute;
    left: 3px;
    top: 4px;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.header__lang-pill__text {
    position: absolute;
    right: 10px;
    font-weight: 700;
    font-size: 18px;
    color: #d9501e;
    white-space: nowrap;
}

/* Selector de idioma CAT: sin borde, texto semitransparente (Figma) */
.header__lang-cat {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.header__lang-cat img {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.header__lang-cat__text {
    font-weight: 700;
    font-size: 18px;
    color: rgba(31, 31, 31, 0.6);
    white-space: nowrap;
}

/* Botón Iniciar sesión: sin altura fija para que se adapte al contenido */
.header__nav .button-acc-orange {
    padding: 12px 20px !important;
    border-radius: 50px !important;
    font-size: clamp(14px, 1.2vw, 20px) !important;
    height: auto !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Nav: reducir márgenes entre items en pantallas intermedias */
@media only screen and (min-width: 567px) and (max-width: 1400px) {
    .header__nav li {
        margin-left: 1.6rem !important;
    }
}

@media only screen and (min-width: 1401px) {
    .header__nav li {
        margin-left: 2.8rem !important;
    }

    .publish__form.publish__form--column {
        padding: 0 1.2rem 7rem !important;
    }
}

@media only screen and (min-width: 880px) {


    .publish__form.publish__form--column {
        padding: 0 1.2rem 7rem !important;
    }
}

/* Evitar scroll horizontal en toda la página */
html {
    overflow-x: hidden;
}

body {
    /*
     * NO añadir overflow-x: hidden aquí.
     * El body tiene transition: transform y cuando se abre el menú móvil
     * se aplica transform: translateX(-16rem). Con overflow en el body,
     * el panel del menú (position: fixed) queda recortado e invisible.
     * El overflow-x: hidden del html es suficiente para bloquear el scroll.
     */
    max-width: 100%;
    overscroll-behavior-x: none;
}



/* Contenedores principales nunca más anchos que el viewport */
.main,
.header,
.hero,
.latest-offers,
.register-banner,
.partners {
    max-width: 100%;
    overflow-x: hidden;
}

.latest-offers [class$=__pagination] ul {
    border: 1px solid #767676 !important;
    background-color: #f7f7f7;
    font-size: 1.3rem;
    overflow: hidden;
    padding: 5px;
}

/* Evitar que el slider Swiper cause scroll horizontal en el documento */
.swiper-container {
    touch-action: pan-y !important;
}

/* Flex containers del hero: 100% en móvil */
@media only screen and (max-width: 768.999999px) {

    [class*="__search-offer"][class*="--search-form"],
    [class*="__search-offer"][class*="--offer-link"] {
        min-width: 0 !important;
        width: 100% !important;
        flex: 0 1 100% !important;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 566.999999px) {

    /* Hamburger siempre a la derecha, logo a la izquierda */
    .header__nav {
        width: auto !important;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    /* -------------------------------------------------------
       MENÚ MÓVIL — WCAG AA
       El SCSS original desplaza el último li (Iniciar sesión)
       fuera del panel con order:-1 / margin-top:-2rem /
       width: calc(100% + 4rem). Lo reseteamos y rehacemos.
       ------------------------------------------------------- */

    /* Panel del menú: padding interior y espaciado */
    .header__nav ul {
        padding: 1.5rem 1.5rem 2rem !important;
        gap: 0 !important;
    }

    /* Todos los items: touch target mínimo 44px (WCAG 2.5.5) */
    .header__nav ul li {
        width: 100% !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        margin-left: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .header__nav ul li:last-child {
        border-bottom: none;
    }

    /* Links del menú: blanco sobre oscuro — ratio > 7:1 ✓ WCAG AA */
    .header__nav ul li a {
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 400;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        width: 100%;
        padding: 0 4px;
    }

    .header__nav ul li a:hover,
    .header__nav ul li a:focus-visible {
        color: #FF5E23 !important;
        outline-offset: 2px;
    }

    /* Idiomas: ocultar en móvil */
    .header__lang-item {
        display: none !important;
    }

    /* Resetear el posicionamiento erróneo del botón Iniciar sesión
       que el SCSS pone como order:-1 / margin-top:-2rem / width:calc(100%+4rem) */
    .header__nav--not-logged ul li:last-child {
        order: 0 !important;
        margin-top: 1rem !important;
        width: 100% !important;
        border-bottom: none;
        display: block !important;
    }

    /* Botón Iniciar sesión dentro del panel — naranja + texto negro AA */
    .header__nav--not-logged ul li:last-child a.button-acc-orange {
        border-radius: 50px !important;
        background-color: #FF5E23 !important;
        color: #000000 !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        min-height: 44px;
        height: auto !important;
        width: 100% !important;
        padding: 12px 20px !important;
        font-size: 18px !important;
        font-weight: 700;
        text-align: center;
    }

    .header__nav--not-logged ul li:last-child a.button-acc-orange:hover,
    .header__nav--not-logged ul li:last-child a.button-acc-orange:focus-visible {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
}

/********************/
/**** INDEX PAGE ****/
/********************/
.hero__search-offer--offer-link {
    background-color: #3A844A !important;
}

.hero__search-offer--offer-link h3 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 17px;
}

.hero__search-offer--offer-link a {
    color: #000000 !important;
}

.hero__search-offer--offer-link a:hover {
    color: #ffffff !important;
    background-color: #000000 !important;
}

.partners .title {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;

}

/********************/
/**** LOGIN PAGE ****/
/********************/
.login--container .login__highlighted {
    border-radius: 20px;
}

.login__highlighted,
.login__highlighted [type="text"],
.login__highlighted [type="text"]::placeholder,
.login__highlighted [type="password"],
.login__highlighted [type="password"]::placeholder {
    color: #000000;
    border-color: #000000;
}

.login__highlighted .form-link {
    color: #000000;
    text-decoration: underline;
}

/* Fix: form-hint sobre fondo naranja (#FF5E23) — #595959 = 2.30:1 ❌ → negro = 6.88:1 ✅ */
.login__highlighted .form-hint {
    color: #000000;
}

.login__highlighted .button-black {
    color: #000000;
    background-color: #ffffff;
}

.login .partners {
    border: 0;
}

/* ------------------------------------------------------------------
   MENSAJE PAGE - Botón con contraste AA
   ------------------------------------------------------------------ */
.message-page .register__description .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: 50px;
    border: 2px solid #FF5E23;
    background-color: #FF5E23;
    color: #000000 !important;
    font-weight: 700;
    text-decoration: none;
}

.message-page .register__description .button:hover,
.message-page .register__description .button:focus-visible {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff !important;
}

/********************/
/**** CONTACTO PAGE ****/
/********************/
.contact--container .contact__header {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   PUBLICAR PAGE - Contraste AA y legibilidad
   ------------------------------------------------------------------ */
.publish-page .publish__form--upload-message {
    color: #1b1b1b !important;
    border-color: #767676 !important;
}

.publish-page .publish__form--upload-button {
    color: #7a2508 !important;
    font-weight: 700;
}

.publish-page .publish__form--terms label,
.publish-page .publish__form--terms a {
    color: #1b1b1b !important;
}

.publish-page .publish__form--terms a {
    text-decoration: underline;
}

.publish-page .publish__form--submit .button {
    background-color: #FF5E23 !important;
    color: #000000 !important;
    font-weight: 700;
    border-radius: 50px;
}

.publish-page .publish__form--submit .button:hover,
.publish-page .publish__form--submit .button:focus-visible {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Opciones Publicar/Asesoramiento en línea */
.publish-page .publish__mode-toggle {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.publish-page .publish__mode-toggle .publish__mode-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.publish-page .publish__mode-toggle .publish__mode-toggle-option input[type="checkbox"] {
    margin: 0;
}

/********************/
/****** FORMS *******/
/********************/
.acc-orange {
    background-color: #FF5E23;
    border-radius: 20px;
}

.acc-orange label,
.acc-orange input,
.acc-orange select,
.acc-orange textarea,
.acc-orange input::placeholder {
    color: #000000;
    border-color: #000000;
}

.acc-orange select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../../dist/images/select-icon-arrow.png');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
}

/* Fix: .busc select — background debería ser #FF5E23 (fondo naranja + texto negro = 6.88:1 ✅)
   El reemplazo global en ssic.css lo puso como #C03D10 (texto negro = 3.92:1 ❌) */
.acc-orange select.busc,
select.busc {
    background-color: #FF5E23 !important;
    color: #000000 !important;
}

/* Producción usa jQuery niceSelect: el control visible es .nice-select, no el <select> */
.acc-orange .nice-select,
.acc-orange .nice-select.busc {
    background-color: #FF5E23 !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

.acc-orange .nice-select .current,
.acc-orange .nice-select .list,
.acc-orange .nice-select .option {
    color: #000000 !important;
}

.acc-orange .nice-select .list {
    background-color: #FF5E23 !important;
    border-color: #000000 !important;
}

.acc-orange span,
.acc-orange p,
.acc-orange h1,
.acc-orange h2,
.acc-orange h3,
.acc-orange h4,
.acc-orange h5,
.acc-orange h6 {
    color: #000000;
}

/* Refuerzo específico buscador destacado (prod): pisa reglas base [class*=__highlighted] */
.advanced-search__highlighted,
.advanced-search__highlighted * {
    color: #000000 !important;
}

.advanced-search__highlighted [type=email],
.advanced-search__highlighted [type=number],
.advanced-search__highlighted [type=password],
.advanced-search__highlighted [type=search],
.advanced-search__highlighted [type=tel],
.advanced-search__highlighted [type=text],
.advanced-search__highlighted [type=url],
.advanced-search__highlighted select,
.advanced-search__highlighted textarea {
    color: #000000 !important;
    border-color: #000000 !important;
}

.advanced-search__highlighted #keyword::placeholder,
.advanced-search__highlighted input[name="search-keyword"]::placeholder {
    color: #000000 !important;
    opacity: 1;
}

.advanced-search__highlighted #keyword::-webkit-input-placeholder,
.advanced-search__highlighted input[name="search-keyword"]::-webkit-input-placeholder {
    color: #000000 !important;
}

.advanced-search__highlighted #keyword:-ms-input-placeholder,
.advanced-search__highlighted input[name="search-keyword"]:-ms-input-placeholder {
    color: #000000 !important;
}

.advanced-search__highlighted select.busc,
.advanced-search__highlighted .nice-select,
.advanced-search__highlighted .nice-select.busc,
.advanced-search__highlighted .nice-select .list {
    background-color: #FF5E23 !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

/* Flechas de select en negro (nativo + niceSelect) */
.advanced-search__highlighted select,
.advanced-search__highlighted select.busc {
    background-image: url('../../dist/images/select-icon-arrow.png') !important;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
}

.advanced-search__highlighted .nice-select:after {
    border-bottom: 2px solid #000000 !important;
    border-right: 2px solid #000000 !important;
}

.advanced-search__highlighted .nice-select .current,
.advanced-search__highlighted .nice-select .option {
    color: #000000 !important;
}

.register--container form,
.contact--container form {
    border-radius: 20px;
    padding: 70px 102px;
    box-shadow: 0px 3px 30px 0px #00000040;
}

@media only screen and (max-width: 768.999999px) {

    .register--container form,
    .contact--container form {
        padding: 40px 30px;
    }

    form legend {
        font-size: 22px;
    }

    [class*=__form] form label {
        font-size: 16px;
    }

    form input::placeholder {
        font-size: 16px;
    }

    form .acceptance-text {
        font-size: 16px;
        line-height: 20px;
    }

    /* Botón naranja: ancho completo en móvil, texto centrado con flex */
    .button-acc-orange {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 14px 20px;
        font-size: 18px;
        height: 4.5rem !important;
    }
}

@media only screen and (max-width: 566.999999px) {

    .register--container form,
    .contact--container form {
        padding: 30px 20px;
        border-radius: 12px;
    }
}

form legend {
    font-size: 28px;
    font-weight: bold;
}

[class*=__form] form label {
    font-weight: bold;
    font-size: 18px;
}


form input::placeholder {
    color: #444444;
    font-size: 18px;
}

form .register__form--terms,
form .contact__form--terms {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

form .publish__form--terms {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
}

form .register__form--terms label,
form .contact__form--terms label {
    margin: 0;
    line-height: 1.3;
}

/* Registro: evitar solapes entre legales, errores y botón de envío */
.register-page form .register__form--terms {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 14px;
}

.register-page form .register__form--terms input[type="checkbox"] {
    order: 1;
    flex: 0 0 44px;
    margin-top: 2px;
}

.register-page form .register__form--terms .acceptance-text {
    order: 2;
    flex: 1 1 calc(100% - 54px);
    display: block;
}

.register-page form .register__form--terms label.error,
.register-page form .register__form--terms span.error {
    order: 3;
    flex: 0 0 100%;
    position: static !important;
    margin-top: 6px;
    margin-bottom: 14px;
    width: 100%;
}

.register-page .register__form--submit {
    clear: both;
    margin-top: 30px !important;
}

/* Cuando el checkbox legal tiene error, empujar más el botón para evitar solape visual */
.register-page form .register__form--terms:has(label.error),
.register-page form .register__form--terms:has(span.error) {
    margin-bottom: 34px;
}

.register-page form .register__form--terms:has(label.error)+.register__form--submit,
.register-page form .register__form--terms:has(span.error)+.register__form--submit {
    margin-top: 68px !important;
}

.register-page .register__form--forgot {
    margin-top: 10px;
}

/* Contacto: evitar que el error del checkbox se incruste entre checkbox y texto legal */
.contact-page form .contact__form--terms {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 14px;
}

.contact-page form .contact__form--terms input[type="checkbox"] {
    order: 1;
    flex: 0 0 44px;
    margin-top: 2px;
}

.contact-page form .contact__form--terms .acceptance-text {
    order: 2;
    flex: 1 1 calc(100% - 54px);
    display: block;
}

.contact-page form .contact__form--terms label.error,
.contact-page form .contact__form--terms span.error {
    order: 3;
    flex: 0 0 100%;
    position: static !important;
    margin-top: 6px;
    margin-bottom: 14px;
    width: 100%;
}

.contact-page form .contact__form--terms:has(label.error),
.contact-page form .contact__form--terms:has(span.error) {
    margin-bottom: 26px;
}

.contact-page form .contact__form--terms:has(label.error)+.contact__form--submit,
.contact-page form .contact__form--terms:has(span.error)+.contact__form--submit {
    margin-top: 44px !important;
}

form .publish__form--terms label {
    margin: 0;
    line-height: 1.3;
}

form input[type="checkbox"] {
    width: 44px;
    height: 44px;
    accent-color: #D9501E;
    cursor: pointer;
    border: 2px solid #1E1E1E;
    border-radius: 4px;
}

form input[type="checkbox"]:checked {
    border-color: #1E1E1E;
}

form .acceptance-text {
    font-size: 21px;
    line-height: 24px;
}

[class*=__centered][class*=__header] {
    border: none;
}

.border-bottom[class*=__centered][class*=__header] {
    border-bottom: 2px solid #1E1E1E;
}


form label.error,
form span.error {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    background-color: #CC0000;
    /* era #FF0000 → blanco/#FF0000 = 3.99:1 ❌ → blanco/#CC0000 = 5.89:1 ✅ */
    padding: 5px;
    font-size: 16px;
    margin-top: 5px;
}

form label.error::before,
form span.error::before {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    background-image: url('../../dist/images/error-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/********************/
/****** FOOTER *******/
/********************/

/* Fix: social icons con opacity:0.47 (main.css) → legibles */
.footer__column--social a {
    opacity: 1;
    color: #484848 !important;
    /* era #767676 con opacity .47 → ~1.84:1 → ahora 9.1:1 ✅ */
}

.footer__column--social a svg {
    color: #3A844A;
}

/* Fix: footer copyright era #767676 (4.54:1 borderline) → #484848 (9.1:1) */
.footer__copyright,
.footer__copyright span {
    color: #484848 !important;
}

.footer__copyright ul a,
.footer__copyright a {
    color: #484848 !important;
    border-bottom-color: #484848 !important;
}

/* Fix: links del footer (ecom.cat, transparenciaong, ayuda) */
.footer__column a:not([class*="button"]) {
    color: #1b1b1b !important;
}

/* Fix: links de formularios que heredan a{color:#ff5e23} (3.04:1 ❌) */
.register__form--toggle-password,
.register__form--toggle-password2,
.register__form--toggle-password-ssic,
.register__form--forgot a,
.register__form--terms .acceptance-text a,
.contact__form--terms .acceptance-text a,
.publish__form--terms p a {
    color: #1b1b1b !important;
    text-decoration: underline;
}

/* Fix: form input.error border (#FF0000 → #CC0000) */
form input.error {
    border-color: #CC0000 !important;
    background-color: #D8D8D873 !important;
}

/* Fix: form label.valid (#3da111 → 3.33:1 falla → #1d7a00 → 4.86:1 ✅) */
form label.valid,
form span.valid {
    color: #1d7a00 !important;
}

/* ============================================================
   CONTRASTE LINKS: Fix global a{color:#ff5e23} (3.04:1 en blanco)
   ============================================================ */

/* Links en lista de ofertas: títulos de oferta */
.latest-offers__item h3 a,
.latest-offers__item h3 a:visited {
    color: #1b1b1b !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.latest-offers__item h3 a:hover,
.latest-offers__item h3 a:focus-visible {
    color: #C03D10 !important;
}

/* Fix: button-outline (pages.scss usa color: $color-orange = #ff5e23, 3.04:1) */
.button-outline {
    color: #C03D10 !important;
    /* 5.36:1 ✅ */
    border-color: #C03D10 !important;
}

.button-outline:hover,
.button-outline:focus-visible {
    background-color: #C03D10 !important;
    color: #ffffff !important;
    border-color: #C03D10 !important;
}

/* Cierre de sesión destacado sin perder contraste AA */
.header__logout-link {
    font-weight: 700 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Modal accesible para solicitud de baja de cuenta */
.account-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.account-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.account-modal__dialog {
    position: relative;
    max-width: 680px;
    margin: 6vh auto;
        background: #1f1f1f;
        color: #ffffff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
    .account-modal__dialog h2,
    .account-modal__dialog p,
    .account-modal__dialog label {
        color: #ffffff;
    }
    .account-modal__dialog textarea {
        border: 2px solid #ffffff !important;
        border-radius: 8px;
        padding: 10px 12px;
        background: #2b2b2b;
        color: #ffffff;
    }
    .account-modal__dialog textarea::placeholder {
        color: #f1f1f1;
    }

.account-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
    flex-wrap: wrap;
}

.button-danger {
    border: 2px solid #9f1d17;
    color: #9f1d17 !important;
}

.button-danger:hover,
.button-danger:focus-visible {
    background: #9f1d17;
    color: #ffffff !important;
}

@media only screen and (max-width: 566.999999px) {
    .account-modal__dialog {
        margin: 2vh 12px;
        padding: 18px;
        max-height: 95vh;
        overflow: auto;
    }
}

/* ------------------------------------------------------------------
   Área personal — ajustes de layout y legibilidad (alineado a formularios)
   ------------------------------------------------------------------ */
.applications-page .register--container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 12px;
}

.applications-page .register__centered.register__form {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* Tarjeta "Datos de la cuenta" (div, sin fieldset para evitar legend flotante) */
.applications-page .ap-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 50px;
    box-shadow: 0px 3px 30px 0px #00000040;
    margin-bottom: 24px;
}

.applications-page .ap-card__title {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 20px 0;
    color: inherit;
}

.applications-page .ap-card__pass-row {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8e8;
}

/* Form de contraseña: sin card extra (está dentro del ap-card) */
.applications-page #user-form-pass {
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* Tarjeta "Datos de participante": reducir padding del global 70px 102px */
.applications-page .register--container form#user-form {
    padding: 40px 50px;
    margin-bottom: 24px;
}

/* Legend del fieldset de participante: alineada a la izquierda */
.applications-page #user-form legend {
    text-align: left;
    margin-bottom: 16px;
}

/* Fila de acciones (Editar / Darse de baja) */
.applications-page .ap-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* WCAG AA: en área personal, botones outline con contraste suficiente */
.applications-page .button-subscribe.button-minimal,
.applications-page .ap-actions .button-subscribe.button-minimal {
    color: #C03D10 !important;
    border-color: #C03D10 !important;
}

.applications-page .button-subscribe.button-minimal:hover,
.applications-page .button-subscribe.button-minimal:focus-visible,
.applications-page .ap-actions .button-subscribe.button-minimal:hover,
.applications-page .ap-actions .button-subscribe.button-minimal:focus-visible {
    background-color: #C03D10 !important;
    color: #ffffff !important;
    border-color: #C03D10 !important;
}

.applications-page .offer__requirements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px 20px;
    margin-bottom: 8px;
}

.applications-page .offer__requirements--item {
    min-width: 0;
}

.applications-page #button_edit_pass {
    display: inline-flex;
    align-items: center;
    white-space: normal;
    line-height: 1.3;
}

.applications-page #edit_password {
    margin-top: 10px;
    padding: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background: #fafafa;
    max-width: 760px;
    width: 100%;
    margin: auto;
}

.applications-page .register__form--toggle-password-ssic {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
}

.applications-page .applications--container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
}

.applications-page .applications__wrapper {
    margin-bottom: 14px;
}

.applications-page .applications__content>p {
    margin-top: 6px;
    margin-bottom: 8px;
}

.applications-page .ssic-table {
    width: 100%;
    table-layout: fixed;
}

.applications-page .ssic-table td,
.applications-page .ssic-table th {
    width: auto;
    word-break: break-word;
}

@media only screen and (max-width: 768.999999px) {

    .applications-page .ap-card,
    .applications-page .register--container form#user-form {
        padding: 24px 20px;
        border-radius: 14px;
    }

    .applications-page .offer__requirements {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .applications-page .ap-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .applications-page .applications__header {
        text-align: left !important;
    }
}

/* ======================================================================
   Paginador — Moderno, Accesible y Responsive
   ====================================================================== */
.latest-offers__pagination {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 24px 0;
}

.pagination-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.pagination-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    height: 40px;
    padding: 6px 10px;
    border: 1px solid #767676;
    border-radius: 4px;
    background: #ffffff;
    color: #1b1b1b;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pagination-link:hover:not(.pagination-disabled):not(.pagination-current) {
    border-color: #C03D10;
    color: #C03D10;
    background: #ffffff;
    font-weight: 600;
}

.pagination-link:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

.pagination-link.pagination-current {
    background: #C03D10;
    color: #ffffff;
    border-color: #C03D10;
    font-weight: 600;
    cursor: default;
}

.pagination-link.pagination-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: #d0d0d0;
    background: #ffffff;
    color: #999999;
}

.pagination-link.pagination-prev,
.pagination-link.pagination-next {
    font-weight: 500;
    padding: 6px 14px;
}

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: #666666;
    font-size: 14px;
    cursor: default;
    user-select: none;
}

.pagination-selector__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #1b1b1b;
    border: 1px solid #767676;
    border-radius: 3px;
    height: 46px;
    line-height: 46px;
    padding: 0 34px 0 12px;
    box-sizing: border-box;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.2 8 10l4.8-4.8' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

.pagination-selector__select:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

/* Responsive: ajustes en móvil */
@media only screen and (max-width: 768.999999px) {
    .latest-offers__pagination {
        margin-top: 24px;
        padding: 16px 8px;
    }

    .pagination-list {
        gap: 8px;
    }

    .pagination-link {
        min-width: 36px;
        height: 36px;
        padding: 4px 8px;
        font-size: 12px;
        border-radius: 3px;
    }

    .pagination-link.pagination-prev,
    .pagination-link.pagination-next {
        padding: 4px 10px;
        font-size: 11px;
    }

    .pagination-ellipsis {
        min-width: 36px;
        height: 36px;
        font-size: 12px;
    }
}


/* ======================================================================
   OFFER PAGE - Diseno alineado con Figma (seccion OFERTA)
   ====================================================================== */

.offer-page .offer {
    padding: 3rem 0;
}

.offer-page .offer--container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.offer__page-header {
    margin-bottom: 2rem;
}

.offer__page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}

.offer__main-section {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    overflow: hidden;
}

/* Titulo verde - Figma */
.offer__title-box {
    background-color: #3A844A !important;
    padding: 1.5rem 2rem;
    border: none !important;
}

.offer__title-box h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.3;
}

.offer__summary-wrapper {
    display: flex;
    gap: 2rem;
    padding: 2rem;
    align-items: flex-start;
}

.offer__summary-info {
    flex: 1;
    min-width: 0;
}

.offer__summary-date {
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1rem;
    font-size: 1.5rem;
}

.offer__summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 1.5rem;
}

/* Etiquetas naranjas - Figma (corregido: #D9501E = 4.10:1 ❌ → #C03D10 = 5.36:1 ✅) */
.offer-label {
    font-weight: 700;
    color: #C03D10;
}

.offer__summary-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 220px;
}

.offer__btn.button-acc-orange {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 1.5rem !important;
    text-align: center;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 50px !important;
    white-space: normal;
    height: auto !important;
    line-height: 1.3;
}

.offer__content-section {
    display: grid;
    grid-template-columns: 4fr 1fr;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.offer__requirements-column {
    padding: 2rem;
    border-right: 1px solid #e8e8e8;
}

.offer__requirements-column h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 1.25rem;
}

.offer__requirements-column h3+h3 {
    margin-top: 2rem;
}

.offer__requirements-list {
    margin: 0 0 2rem;
}

.offer__requirements-list p {
    margin: 0;
    padding: .6rem 0;
    font-size: 1.5rem;
    color: #333;
    line-height: 1.5;
    border-bottom: 1px solid #f0f0f0;
}

.offer__requirements-list p:last-child {
    border-bottom: none;
}

.offer__description {
    font-size: 1.5rem;
    line-height: 1.75;
    color: #444;
}

.offer__description em {
    color: #999;
}

/* Caja compartir fondo naranja - Figma */
.offer__share-column {
    padding: 2rem;
}

.offer__share-box {
    background-color: #FF5E23 !important;
    border-radius: 8px;
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.offer__share-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #000000;
    /* era #ffffff → 3.05:1 borderline → ahora negro 6.88:1 ✅ */
    margin: 0 0 1rem;
}

.offer__share-list {
    display: flex;
    flex-direction: column;
}

.offer__share-list .share-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: .9rem 0;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: transparent;
    color: #000000;
    text-decoration: none;
    font-size: 2rem;
    font-weight: 500;
    transition: opacity .15s ease;
}

.offer__share-list .share-link:last-child {
    border-bottom: none;
}

.offer__share-list .share-link:hover {
    opacity: .8;
    text-decoration: underline;
}

.offer__share-list .share-link:focus-visible {
    outline: 3px solid #000000;
    outline-offset: 2px;
    border-radius: 3px;
}

.offer__share-list .share-link .fa,
.offer__share-list .share-link .fab,
.offer__share-list .share-link .fas {
    width: 20px;
    text-align: center;
    font-size: 2rem;
    color: #000000;
}

.offer__footer-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background: #ffffff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.offer__stats {
    display: flex;
    gap: 1.5rem;
    flex: 1;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    padding: 1rem 1.5rem;
    background: #f5f5f5;
    border-radius: 8px;
    min-width: 110px;
}

.stat-item h4 {
    font-size: .75rem;
    font-weight: 700;
    color: #595959;
    /* era #888 → 3.27:1 sobre #f5f5f5 ❌ → ahora 6.44:1 ✅ */
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 .4rem;
}

.stat-item .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2E7A42;
    /* era #3A844A → 4.21:1 sobre #f5f5f5 ❌ → ahora 4.84:1 ✅ */
    margin: 0;
}

.offer__final-cta {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.offer__status-message {
    font-size: .9rem;
    font-weight: 700;
    color: #1e6b2e;
    background: #d4edda;
    border: 1px solid #b8ddc4;
    border-radius: 6px;
    padding: .75rem 1rem;
    margin: 0;
    text-align: center;
}

.offer__status-date {
    display: block;
    font-size: .8rem;
    color: #666;
    text-align: center;
    margin-top: .2rem;
}

@media only screen and (max-width: 900px) {
    .offer__content-section {
        grid-template-columns: 1fr;
    }

    .offer__requirements-column {
        border-right: none;
        border-bottom: 1px solid #e8e8e8;
    }

    .offer__share-box {
        position: static;
    }
}

@media only screen and (max-width: 768.999999px) {
    .offer__page-header h1 {
        font-size: 1.75rem;
    }

    .offer__title-box {
        padding: 1.25rem 1.5rem !important;
    }

    .offer__title-box h2 {
        font-size: 1.1rem;
    }

    .offer__summary-wrapper {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .offer__summary-grid {
        grid-template-columns: 1fr;
    }

    .offer__summary-actions {
        min-width: 0;
        width: 100%;
    }

    .offer__requirements-column,
    .offer__share-column {
        padding: 1.5rem;
    }

    .offer__footer-section {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .offer__stats {
        width: 100%;
        justify-content: space-around;
    }

    .offer__final-cta {
        width: 100%;
        min-width: 0;
    }
}

@media only screen and (max-width: 480px) {
    .offer__stats {
        flex-direction: column;
        align-items: stretch;
    }

    .stat-item {
        min-width: 0;
    }
}

/* ======================================================================
   RESULTADOS - Items como tarjetas grises (Figma node 6-469)
   ====================================================================== */

/* Lista: gap entre tarjetas en vez de border-bottom */
.latest-offers [class$=__list],
.latest-offers__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cada item: tarjeta gris con padding interno */
.latest-offers [class$=__item],
.latest-offers__item {
    background: #f5f5f5;
    border-radius: 8px;
    border-bottom: none !important;
    padding: 2rem !important;
    margin-bottom: 0 !important;
}

/* Botón "Ver oferta": outline gris con borde oscuro (Figma) */
.latest-offers [class$=__item] .button-subscribe,
.latest-offers__item .button-subscribe {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #666666 !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-size: 1.3rem !important;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.slider-nav button:hover {
    background-color: #FF5E23;
    color: #000000 !important;
}

.latest-offers [class$=__item] .button-subscribe:hover,
.latest-offers__item .button-subscribe:hover,
.latest-offers [class$=__item] .button-subscribe:focus-visible,
.latest-offers__item .button-subscribe:focus-visible {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

@media only screen and (max-width: 566.999999px) {
    .latest-offers__item {
        padding: 1.5rem !important;
    }
}