/**** URBEMOTOS — HERO estilo CF-MOTO ****/

.subitem {
    text-transform: uppercase;
}

.subitem.active-item {
    color: var(--color-brand-2);
    border-bottom: 0 !important;
}

.banner-default a.cta-button {
    background-color: var(--color-brand-6) !important;
}

section.swiper-wrapper-default {
    padding: 0 !important;
}

.swiper-wrapper-default-container {
    max-width: 100% !important;
}

.section-container {
    padding: 0 !important;
}

.hero-swiper .mx-1.h-full {
    margin: 0 !important;
}

/* Contenedor principal tipo .hero.motorcycle-hero */
.hero-default {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}

/* Capa con la imagen de fondo (ya la traes en inline style) */
.hero-default-inner {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: 0 50% !important;
}

/* Overlay de degradado como .hero-background.overlay */
.hero-default-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(#0000 60%, #000000b3);
}

@media (min-width: 1920px) {
    .hero-default-inner::after {
        background-image: linear-gradient(#0000 75%, #000000b3);
        filter: brightness(0.7);
    }
}

/* Contenido encima del fondo */
.hero-default-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    place-items: start; /* alinea a la izquierda como en cf-moto */
}

/* Wrapper de textos (equivalente a .hero-content.motorcycle-hero.left/right) */
.hero-1 .hero-default-content-inner {
    height: 27%;
}

.hero-default-content-inner {
    height: 85%;
    max-width: 56vw; /* cf-moto usa 50vw para texto */
    color: #fff;
}

/* Subtítulo = .hero-subtitle.motorcycle */
.hero-default .title h4 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(18px, 2.6vw, 44px);
    line-height: clamp(20px, 2.8vw, 48px);
    opacity: .95;
    margin: 0 0 .6em 0;
}

/* Título = .hero-title.motorcycle */
.hero-default .title h1 {
    font-weight: 900;
    letter-spacing: .02em;
    color: #fff;
    font-size: clamp(36px, 8vw, 120px);
    line-height: clamp(38px, 8.2vw, 122px);
}

/* Texto descriptivo (si lo añades debajo del h1/h4) = .hero-text.motorcycle */
.hero-default .title p {
    max-width: 50vw;
    font-family: inherit;
    font-size: clamp(16px, 1.8vw, 28px);
    line-height: clamp(20px, 2vw, 32px);
    margin: 0 0 1.2em 0;
}

/* Variante disclaimer (por si la usas) */
.hero-default .title p.disclaimer {
    font-size: clamp(12px, 1.2vw, 18px);
    line-height: clamp(14px, 1.4vw, 20px);
    opacity: .85;
}

/* === Breakpoints igual que cf-moto === */
@media (max-width: 991px) {
    .hero-default-content-inner {
        max-width: calc(100vw - 40px);
        margin: 0 20px;
    }

    .hero-default .title h1 {
        text-align: left !important;
        font-size: 10vw;
        line-height: 10.2vw;
    }

    .hero-default .title h4 {
        font-size: 3vw;
        line-height: 3.2vw;
        text-align: right !important;
    }

    .hero-default .title p {
        font-size: 2vw;
        line-height: 2.2vw;
        max-width: none;
        text-align: right !important;
    }

    .hero-default-inner::after {
        background-image: linear-gradient(#0000 80%, #000000b3);
    }
}

@media (max-width: 767px) {
    .hero-default-content-inner {
        margin: 0 20px;
    }

    .hero-default .title h1 {
        font-size: 4rem;
        line-height: 4.2rem;
        text-align: left !important;
    }

    .hero-default .title h4 {
        font-size: 1.6rem;
        line-height: 1.6rem;
        text-align: right !important;
    }

    .hero-default .title p {
        font-size: 1.4rem;
        line-height: 1.6rem;
        text-align: right !important;
    }

    /* Overlay móvil de cf-moto */
    .hero-default-inner::after {
        background-image: linear-gradient(#000000b3, #0000 50%, #0006 95%, #0000);
        height: 100vh;
    }
}

/* ===========================
   URBEMOTOS — RACING SKIN
   =========================== */

/* ---- Base + Variables ---- */
:root {
    --um-black: #0a0b0d;
    --um-white: #f5f7fa;
    --um-accent: var(--color-brand-2, #14e1ff); /* neón cyan */
    --um-accent-2: var(--color-brand-1, #ff3b3b); /* rojo agresivo */
    --um-ink: #e2e8f0;
    --um-muted: #94a3b8;
    --um-card: #111318;
    --um-card-2: #161A21;
    --um-border: rgba(255, 255, 255, .08);
    --um-glow: 0 0 12px rgba(20, 225, 255, .45), 0 0 30px rgba(20, 225, 255, .18);
    --um-glow-red: 0 0 10px rgba(255, 59, 59, .4), 0 0 22px rgba(255, 59, 59, .15);
    --navbar-height: clamp(68px, 9dvh, 96px);
    --radius-2xl: 18px;
    --speed: .5s;
}

/* Fondeo general oscuro y tipografía performante */
body {
    background: radial-gradient(1200px 600px at 70% -10%, rgba(20, 225, 255, .08), transparent 60%), var(--um-black);
    color: var(--um-ink);
    font-feature-settings: "ss01" on, "liga" on;
    text-rendering: optimizeLegibility;
}

/* Micro-grano sutil para look “máquina” */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='.06'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: soft-light;
}

/* ---- Header / Navbar ---- */
.fixed-header .navbar {
    backdrop-filter: saturate(160%) blur(10px);
    background: linear-gradient(to bottom, white, rgba(255, 255, 255, .85)) !important;
    transition: background .25s ease, transform .25s ease;
}

.header-color-change-items > li > .relative a {
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 700;
}

.header-color-change-items > li > .relative:hover {
    text-shadow: 0 0 18px rgba(20, 225, 255, .35);
    color: var(--um-accent) !important;
}

/* “Píldora” CTA */
/* base */
.navbar .brand-button {
    --neon: #7fafff;
    border: 1px solid var(--color-brand-2);
    background-color: var(--color-brand-1) !important;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: .06em;
    position: relative;
    z-index: 0; /* nuevo contexto para que lo “brillante” quede detrás */
    isolation: isolate; /* evita que cubra el texto */
    overflow: hidden;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background-size .35s ease;

    /* “laser” inferior que se expande en hover (no cubre texto) */
    background-image: linear-gradient(var(--neon), var(--neon));
    background-repeat: no-repeat;
    background-size: 0 3px; /* empieza oculto */
    background-position: 0 100%; /* pegado abajo */
}

/* aura neon por detrás (no tapa el texto) */
.navbar .brand-button::after {
    content: "";
    position: absolute;
    inset: -2px; /* un pelín fuera para el glow */
    z-index: -1; /* SIEMPRE detrás */
    border-radius: inherit;
    background: radial-gradient(120px 60px at 50% 120%, rgba(20, 225, 255, .35), transparent 60%);
    opacity: 0;
    filter: blur(10px);
    transition: opacity .3s ease, transform .3s ease;
}

/* hover “guapo” */
.navbar .brand-button:hover {
    color: #fff !important;
    transform: translateY(-1px) scale(1);
    box-shadow: 0 0 10px rgba(20, 225, 255, .35), 0 0 22px rgba(20, 225, 255, .2);
    background-size: 100% 3px; /* el láser recorre todo el ancho */
}


/* ---- Mobile menu ---- */
#mobile-menu .mobile-menu-content {
    background: linear-gradient(180deg, #0f1115 0%, #0b0d10 100%);
    border-right: 1px solid var(--um-border);
}

#mobile-menu .main-item a {
    color: var(--um-ink) !important;
    font-weight: 800;
}

#mobile-menu .subitem a {
    color: var(--um-muted) !important;
}

#mobile-menu .subitem a:hover {
    color: var(--um-accent) !important;
}

/* ---- Top banner ---- */
.top-banner {
    background: linear-gradient(90deg, var(--um-accent) 0%, var(--um-accent-2) 100%) !important;
    color: #001015 !important;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---- HERO ---- */
.hero-default-inner {
    position: relative;
    isolation: isolate;
}

.hero-default-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 40% at 50% 60%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .65));
    z-index: 0;
}

.hero-default-content {
    position: relative;
    z-index: 1;
}

.hero-default .title {
    row-gap: 0.5rem;
}

.hero-default .title h1, .hero-default .title h1 strong {
    font-size: 42px;
}

@media (min-width: 768px) {
    .hero-default .title {
        row-gap: 1.5rem;
    }

    .hero-default .title h1, .hero-default .title h1 strong {
        font-size: 72px;
    }
}

.hero-default .title h1 {
    line-height: .95;
    text-transform: uppercase;
}

.hero-default .title h4 {
    color: #e6faff;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Arranque con “slide up” */
@keyframes um-rise {
    from {
        transform: translateY(14px);
        opacity: .001
    }
    to {
        transform: none;
        opacity: 1
    }
}

.hero-default .title {
    animation: um-rise .7s cubic-bezier(.16, .84, .44, 1) both .05s;
}

/* ---- Secciones flexibles ---- */
.section-container {
    padding-block: clamp(24px, 5dvh, 64px);
}

/* ---- Offer boxes (light style racing) ---- */
.offers-box-with-icon .offer-box {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Hover: más lift + glow sutil de marca */
.offers-box-with-icon .offer-box:hover {
    transform: translateY(-6px);
    border-color: var(--color-brand-2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 0 16px rgba(20, 225, 255, .12);
}

/* Interior */
.offers-box-with-icon .offer-box-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

/* Icono dentro de burbuja circular */
.offers-box-with-icon .offer-box-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--color-brand-5) 0%, rgba(20, 225, 255, .12) 100%);
    box-shadow: inset 0 0 4px rgba(255, 255, 255, .6);
}

.offers-box-with-icon .offer-box .icon {
    width: 32px;
    height: 32px;
    filter: none;
}

/* Título */
.offers-box-with-icon .offer-box-text h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-brand-1);
    margin-bottom: .25rem;
    transition: color .25s ease;
}

.offers-box-with-icon .offer-box:hover .offer-box-text h4 {
    color: var(--color-brand-2);
}

/* Texto */
.offers-box-with-icon .offer-box-text p {
    font-size: .95rem;
    line-height: 1.45rem;
    margin: 0;
}


/* ---- Rich text snippets (envíos, garantías…) ---- */
.rich-text-default .rich-text-inner {
    background: linear-gradient(180deg, rgba(20, 225, 255, .06), rgba(255, 59, 59, .06));
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 18px 20px;
}

/* ===== URBEMOTOS · mega-rich-text (estilo agresivo) ===== */
.mega-rich-text {
    --accent: var(--color-brand-2, #14e1ff);
    --accent2: var(--color-brand-1, #ff3b3b);
    --ink: #eaf7ff;
    --muted: #b7c5d3;
    --bg1: #0b0d10;
    --bg2: var(--color-brand-1, #0b0d10);
}

/* Card principal (sustituye tu dashed) */
.mega-rich-text .rich-text-inner {
    position: relative;
    width: 100%;
    margin-inline: auto;
    color: var(--ink);
    background: linear-gradient(180deg, #0c0c0c 0%, #16191d 100%);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: clamp(16px, 2.8vw, 28px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Franja superior “racing” */
.mega-rich-text .rich-text-inner::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: 0;
    height: 14px;
    background: linear-gradient(90deg, var(--color-brand-2), var(--color-brand-1));
    transform: skewX(-14deg);
    filter: drop-shadow(0 0 16px rgba(20, 225, 255, .35));
}

/* Lista en 2 columnas (como ficha técnica) */
.mega-rich-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 26px);
}

@media (max-width: 800px) {
    .mega-rich-text ul {
        grid-template-columns: 1fr;
    }
}

/* Ítems tipo “chip” con filo y sub-glow */
.mega-rich-text li {
    display: flex;
    align-items: center;
    font-size: 18px;
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;
    padding: clamp(12px, 1.6vw, 16px) clamp(10px, 1vw, 14px) clamp(12px, 1.6vw, 16px) clamp(44px, 5.2vw, 54px);
    color: var(--ink);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05);
}

/* “Cuchilla” de color (antes del texto) */
.mega-rich-text li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: clamp(18px, 2.2vw, 24px);
    height: clamp(12px, 1.6vw, 14px);
    transform: translateY(-50%) skewX(-18deg);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    clip-path: polygon(0 50%, 65% 0, 100% 0, 70% 50%, 100% 100%, 65% 100%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(20, 225, 255, .4);
}

/* Sub-subrayado de energía al hover */
.mega-rich-text li::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), transparent 60%);
    transform: scaleX(0);
    transform-origin: left;
    opacity: .7;
    transition: transform .35s ease;
}

.mega-rich-text li:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 225, 255, .35);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .35), 0 0 24px rgba(20, 225, 255, .15);
}

.mega-rich-text li:hover::after {
    transform: scaleX(1);
}

/* Tipografía dentro del bloque */
.mega-rich-text li,
.mega-rich-text p {
    font-weight: 600;
    color: var(--ink);
}

.mega-rich-text em {
    color: var(--muted);
    font-style: normal;
}

.mega-rich-text strong {
    color: #fff;
    text-shadow: 0 0 12px rgba(20, 225, 255, .15);
}

/* Etiqueta mini (por si añades spans) */
.mega-rich-text .tag {
    display: inline-block;
    margin-left: .5ch;
    padding: .18rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(20, 225, 255, .25), rgba(20, 225, 255, .08));
    border: 1px solid rgba(20, 225, 255, .35);
    color: #fff;
}

/* Respeta usuarios con reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .mega-rich-text * {
        transition: none !important;
    }
}


/* ===== Urbemotos · Productos destacados (light, limpio y con energía) ===== */

/* 0) Scope cómodo: usa id o clase */
#productos-section,
.productos-section {
    --card-bd: rgba(0, 0, 0, .06);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

/* 1) Cards */
#productos-section .flexible-component-item-inner,
.productos-section .flexible-component-item-inner {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
}

#productos-section .flexible-component-item-inner:hover,
.productos-section .flexible-component-item-inner:hover {
    transform: translateY(-6px);
}

/* 2) Imagen producto: fondo suave + contain + micro-zoom al hover */
#productos-section .rich-text-component.text > img,
.productos-section .rich-text-component.text > img {
    object-fit: contain !important;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 12px;
    padding: 10px;
    transition: transform .35s ease;
}

#productos-section .flexible-component-item-inner:hover .rich-text-component.text > img,
.productos-section .flexible-component-item-inner:hover .rich-text-component.text > img {
    transform: scale(1.03);
}

/* 3) Título: clamp a 2 líneas, centrado */
#productos-section h3,
.productos-section h3 {
    margin: 12px 8px 0;
    font-weight: 800;
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.25;
    text-align: center;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4) Pricing: badge neutral; “Consultar precio” que no grite */
#productos-section .pricing,
.productos-section .pricing {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

#productos-section .price-discount,
.productos-section .price-discount {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    color: #0e1a1f;
    background: #e9f9fc;
    border: 1px solid rgba(20, 225, 255, .35);
}

/* 5) CTA invisible que muestra un “→” en hover (minimal) */
#productos-section .cta-producto,
.productos-section .cta-producto {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

#productos-section .cta-producto::after,
.productos-section .cta-producto::after {
    content: "→";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--color-brand-2);
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(20, 225, 255, .25);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}

#productos-section .flexible-component-item-inner:hover .cta-producto::after,
.productos-section .flexible-component-item-inner:hover .cta-producto::after {
    opacity: 1;
    transform: translateY(0);
}

/* 6) Swiper: bullets y visibilidad */

#productos-section .swiper-pagination-bullet {
    background: #cfeff6;
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: transform .2s ease, background-color .2s ease;
}

#productos-section .swiper-pagination-bullet-active {
    background: var(--color-brand-2);
    transform: scale(1.3);
}

/* 7) Pequeños ajustes responsivos */
@media (max-width: 768px) {
    #productos-section .flexible-component-item-inner {
        padding: 14px;
        border-radius: 14px;
    }

    #productos-section .rich-text-component.text > img {
        border-radius: 10px;
        padding: 8px;
    }
}

/* ---- Productos destacados (Swiper) ---- */
#productos-section .swiper {
    padding-block: 8px;
}

#productos-section .swiper-slide .flexible-component-item {
    perspective: 1100px;
}

#productos-section h3 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#productos-section .pricing .price-discount {
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #cfefff;
    padding: 10px 15px;
    border: 1px solid rgba(20, 225, 255, .35);
    border-radius: 12px;
    display: inline-block;
    box-shadow: inset 0 0 22px rgba(20, 225, 255, .12), var(--um-glow);
}

/* Bullets Swiper “chip” racing */
#productos-section .swiper-pagination-bullet {
    width: 32px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    opacity: 1;
    margin: 0 6px !important;
}

#productos-section .swiper-pagination-bullet-active {
    background: linear-gradient(90deg, var(--um-accent), var(--um-accent-2));
    box-shadow: var(--um-glow);
}

/* ---- CTA invisible sobre card producto ---- */
#productos-section .cta-producto {
    display: block;
    margin-top: 10px;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--um-border);
    position: absolute;
    background: linear-gradient(180deg, rgba(255, 59, 59, .16), rgba(255, 59, 59, .06));
    text-indent: -9999px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s;
}

/* ---- Footer ---- */
footer {
    background: linear-gradient(180deg, #0b0d10, #060708) !important;
    border-top: 1px solid var(--um-border);
}

footer .column-header {
    color: var(--um-accent) !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

footer .column-item {
    color: var(--um-ink) !important;
}

footer .social-icon {
    transition: transform .25s ease, filter .25s ease;
}

footer a:hover .social-icon {
    transform: translateY(-3px) scale(1.06);
    filter: drop-shadow(0 0 12px rgba(20, 225, 255, .4));
}

/* ---- Imagenes (nitidez y punch) ---- */
img {
    image-rendering: -webkit-optimize-contrast;
}

.rich-text-component img {
    transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}

/* ---- Hover links ---- */
a {
    transition: color .2s ease, text-shadow .2s ease, opacity .2s ease;
}

a:hover {
    color: var(--um-accent) !important;
    text-shadow: 0 0 12px rgba(20, 225, 255, .25);
}

/* ---- Accesibilidad / motion ---- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ---- Pequeños refinamientos responsivos ---- */
@media (max-width: 1024px) {
    .hero-default-inner {
        min-height: calc(100dvh - var(--navbar-height));
    }

    #productos-section .flexible-component-item-inner {
        padding: 12px;
    }
}

@media (max-width: 640px) {
    .hero-default .title h1 {
        font-size: clamp(28px, 10vw, 46px);
    }

    .top-banner p {
        font-size: 12px;
        letter-spacing: .12em;
    }
}

/* ---- “Stripe” racing decor en títulos grandes ---- */
.rich-text-component.title h2 {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rich-text-component.title h2::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 70%;
    background: linear-gradient(180deg, var(--um-accent), var(--um-accent-2));
    box-shadow: var(--um-glow);
    border-radius: 3px;
}


/* ===== URBEMOTOS · CATEGORIES-LOOK para tu sección ===== */

/* 1) El wrapper se hace full-bleed como en CF-Moto */
.vertical-text.flexible-component-default .flexible-component-default-container {
    max-width: 100vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2) La rejilla pasa a ser fila flexible (como .categories-columns) */
.vertical-text.flexible-component-default .content {
    display: flex !important;
    gap: 0 !important;
    width: 100vw;
    overflow: hidden;
}

/* 3) Cada card: tamaño, posición y cursor */
.vertical-text.flexible-component-default .content .flexible-component-item {
    position: relative;
    cursor: pointer;
    transition: transform .3s cubic-bezier(.77, 0, .175, 1), filter .3s cubic-bezier(.77, 0, .175, 1);
    height: 40vw; /* misma ratio del ejemplo */
    flex: 1 0 50vw; /* por defecto: 2 columnas 50/50 */
}

/* (Opcional) Si añades una tercera card, pon esta clase en el contenedor .content:
   <div class="content ... has-3">
   y activamos el 50/25/25 del ejemplo */
.vertical-text.flexible-component-default .content.has-3 .flexible-component-item:nth-child(1) {
    flex-basis: 50vw;
}

.vertical-text.flexible-component-default .content.has-3 .flexible-component-item:nth-child(n+2) {
    flex-basis: 25vw;
}

/* 4) Card interior: creamos el “lienzo” y sacamos la imagen a fondo absoluto */
.vertical-text.flexible-component-default .content .flexible-component-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.vertical-text.flexible-component-default .content .flexible-component-item-inner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 50%;
    z-index: -1; /* como .categories-background-image */
    filter: brightness(.82);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

/* Hover con zoom suave (igual espíritu que el original) */
.vertical-text.flexible-component-default .content .flexible-component-item:hover img {
    transform: scale(1.05);
}

/* 5) Banda degradada derecha para el título girado (simula .category-title-wrapper) */
.vertical-text.flexible-component-default .content .flexible-component-item-inner::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: clamp(5rem, 6vw, 8rem);
    background-image: linear-gradient(270deg, #0000, #00000080 75%);
    z-index: 1;
}

/* 6) Título girado -90º como .category-title */
.vertical-text.flexible-component-default .content .rich-text-component.text > h3 {
    position: absolute !important;
    top: 15px;
    right: 45px;
    margin: 0;
    transform-origin: top right;
    transform: rotate(-90deg);
    color: #fff;
    font-weight: 800;
    font-size: clamp(22px, 3.2vw, 40px);
    letter-spacing: .02em;
    z-index: 4; /* por encima del overlay */
    pointer-events: none; /* para no bloquear clicks en la card */
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

.vertical-text.flexible-component-default .content .rich-text-component.text h3 strong {
    font-size: 28px;
    font-weight: inherit;
}

/* 7) Franja inferior para texto/CTA (si existe contenido adicional) */
.vertical-text.flexible-component-default .content .flexible-component-item-inner .rich-text-component.text {
    position: absolute;
    inset: auto 0 0 0;
    padding: 25px clamp(6rem, 8vw, 10rem) 25px 25px; /* deja sitio al título rotado */
    color: #fff;
    background-image: linear-gradient(#0000, #00000080 50%);
    transition: opacity .3s cubic-bezier(.77, 0, .175, 1);
    z-index: 1;
}

/* 9) Ajustes responsivos iguales que CF-Moto */
@media (max-width: 991px) {
    .vertical-text.flexible-component-default .content {
        flex-wrap: wrap;
    }

    .vertical-text.flexible-component-default .content .flexible-component-item {
        flex-basis: 100vw;
        height: 80vw; /* cada card ocupa toda la fila */
    }

    .vertical-text.flexible-component-default .content .rich-text-component.text h3 {
        transform: none;
        position: absolute;
        left: 20px;
        bottom: auto;
        top: 20px;
        padding: 0;
        font-size: 3rem;
        line-height: 3.2rem;
    }

    .vertical-text.flexible-component-default .content .flexible-component-item-inner::after {
        display: none; /* quitamos la banda lateral en móvil */
    }

    .vertical-text.flexible-component-default .content .flexible-component-item-inner .rich-text-component.text {
        padding: 20px;
        background-image: linear-gradient(#0000, #00000080 60%);
    }
}

@media (max-width: 479px) {
    .vertical-text.flexible-component-default .content .flexible-component-item {
        height: 90vw;
    }

    .vertical-text.flexible-component-default .content .rich-text-component.text h3 {
        font-size: 2.2rem;
        line-height: 2.4rem;
    }
}

/* CONFIG HOSPITAL DE VARICES */

/* SupremeLL Font Faces */
@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-ThinItalic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-RegularItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-Book.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-BookItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SupremeLL';
    src: url('https://assets.cf-moto.es/fonts/SupremeLL-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


section {

    z-index: 0;

}


.hero-default-image img {

    min-width: 100vw;

}


main ol {

    list-style: auto;

}


main li:not(nav li):not(.mega-rich-text li) {

    margin-left: 35px;

}


.top-banner a {

    text-decoration: underline;

}


.text-with-image-default .text a {

    text-decoration: none !important;

}


header img {

    max-height: 80px !important;

}


header .brand-button {

    min-width: 145px;

    padding-left: 50px;

    border-radius: 16px;

    z-index: 0;

    border: 1px solid var(--color-brand-3) !important;

    color: var(--color-brand-neutral) !important;

}


header .brand-button:hover {

    background-color: var(--color-brand-1) !important;

    color: var(--color-brand-neutral) !important;

}


header .brand-button-desktop a {

    border: 0;

    margin-right: -20px;

    display: block;

    background-color: var(--color-brand-1) !important;

    --tw-ring-color: transparent !important;

}


header .brand-button-desktop a::before {

    visibility: visible;

}


header .brand-button-desktop a:hover {

    border: 0;

    --tw-ring-color: transparent !important;

}


header .brand-button::before {

    content: "";

    position: absolute;

    top: -2px;

    left: 18px;

    width: 100%;

    height: 2.7rem;

    display: inline-block;

    background: url(https://hospitaldevarices.cdn.prismic.io/hospitaldevarices/aAleUPIqRLdaBi9r_Zfx1rc68zyqdRpVD_icono-telefono-1-.svg) no-repeat left;

    z-index: -1;

}


header .brand-button:hover::before {

    background: url(https://hospitaldevarices.cdn.prismic.io/hospitaldevarices/aAleUPIqRLdaBi9r_Zfx1rc68zyqdRpVD_icono-telefono-1-.svg) no-repeat left;

}


.mobile-navbar-real .brand-button {

    min-width: 145px;

    padding-left: 50px;

    border-radius: 12px;

}


.mobile-navbar-real .brand-button::before {

    content: "";

    position: absolute;

    top: -2px;

    left: 18px;

    width: 100%;

    height: 2.7rem;

    display: inline-block;

    background: url(https://hospitaldevarices.cdn.prismic.io/hospitaldevarices/aAleUPIqRLdaBi9r_Zfx1rc68zyqdRpVD_icono-telefono-1-.svg) no-repeat left center;

    z-index: -1;

}


footer * {

    color: var(--color-brand-3);

}


footer .container {

    position: relative;

}


footer .column-header {

    font-weight: 400;

    opacity: 0.6;

}


footer .column-item {

    font-weight: 500;

}


footer .social-icon {

    fill: white !important;

}


.subfooter {

    border-top-width: 0;

}

.subfooter .social-icons {
    position: absolute;
    top: 0;
    right: 0;
}


.section-container {
    align-items: flex-start;
}


.hero-default .title {
    align-items: flex-start;
    max-width: 100%;
}

.title {
    max-width: 100%;
}


.productos-section.flexible-component-default,
.productos-section.flexible-component-default .flexible-component-default-container {

    background-color: var(--color-brand-1);

}


.productos-section.flexible-component-default .flexible-component-default-container {

    background-color: var(--color-brand-1);

    align-items: flex-start;

}


.productos-section.flexible-component-default .title * {

    color: var(--color-brand-neutral);

}


.productos-section.flexible-component-item .block-img {

    margin-top: 10px;

}


.productos-section .flexible-component-item {

    position: relative;

}


.productos-section .flexible-component-item .text a {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    opacity: 0;

}


.productos-section .flexible-component-item .text p:has(a) {

    margin-top: 0;

}


.flexible-component-default .bottom-text, .blog-posts-default .bottom-text {

    position: relative;

    max-width: 100%;

}


.flexible-component-default .bottom-text a::before, .blog-posts-default .bottom-text a::before {

    content: "";

    position: absolute;

    top: 0px;

    right: -34px;

    height: 25px;

    width: 25px;

    display: inline-block;

    background: url(https://coolfy.cdn.prismic.io/coolfy/Zgp3Ict2UUcvBTqX_flecha-naranja-circulo.svg) no-repeat left center;

}


.productos-section.flexible-component-default .bottom-text p {

    color: var(--color-brand-neutral);

    text-align: center;

    font-weight: 500;

    font-size: 22px;

}


.productos-section.flexible-component-default .flexible-component-item {

    background-color: var(--color-brand-neutral);

    padding: 20px;

    border-radius: 16px;

}


.flexible-component-default .flexible-component-item .text {

    align-items: flex-start;

}


.productos-section.flexible-component-default .flexible-component-item .text > p:last-child {

    /* margin-top: -20px!important;*/

}


.productos-section.flexible-component-default .flexible-component-item .text h4 {

    margin-top: -6px;

}


.productos-section.flexible-component-default .flexible-component-item .text > p:first-child {

    color: var(--color-brand-6);

    border: 1px solid var(--color-brand-6);

    border-radius: 5px;

    padding: 2px 10px;

}


.productos-section.flexible-component-default .flexible-component-item .text h3 {

    font-size: 22px;

    font-weight: 700;

    margin-top: 10px;

}


.productos-section.flexible-component-default .flexible-component-item .text h4 {

    font-size: 16px;

    font-weight: 600;

}


.productos-section.flexible-component-default .flexible-component-item .text {

    row-gap: 0.2rem;

}


.pricing {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 30px 0 15px 0;

    flex-wrap: wrap;

}


.price-discount {

    color: var(--color-brand-neutral) !important;
    background-color: var(--color-brand-1) !important;

    font-family: var(--primary-font);

    margin-bottom: -5px;

}


.price {

    font-family: var(--primary-font);

    font-size: 22px;

    text-decoration: line-through;

    margin-top: 20px;

}


.offers-dark {

    background-color: var(--color-brand-1) !important;

}


.offers-dark-container {

    background-color: var(--color-brand-1) !important;

}


.offers-dark .offers-box-with-icon-container {

    background-color: var(--color-brand-1) !important;

}


.offers-dark .title * {

    color: var(--color-brand-neutral) !important;

}


.offers-dark .bottom-text {

    max-width: 80rem;

}


.offers-dark .brand-button {

    cursor: pointer;

    border: 0;

    margin-top: 30px;

    margin-bottom: 20px;

    color: var(--color-brand-neutral);

    background-color: var(--color-brand-2);

    padding: 12px 48px;

    border-radius: 12px;

    max-width: 425px;

    text-align: center;

    text-wrap: nowrap;

}


.offers-dark .brand-button:hover {

    color: var(--color-brand-neutral);

    background-color: var(--color-brand-1);

}


.offers-dark .bottom-text .brand-button {

    font-size: 16px;

}


.offers-dark .bottom-text .brand-button:hover {

    color: var(--color-brand-1);

    background-color: var(--color-brand-neutral);

}


.offer-box {

    box-shadow: none;

}


.offer-box-inner {

    position: relative;

}


.offer-box-inner h3 {

    position: absolute;

    top: 44px;

    left: 100px;

}


.offer-box-inner h4 {

    font-weight: 600;

}


.tratamiento-varices-section .offer-box-image {

    width: 72px;

    height: 72px;

    margin-bottom: 10px;

}


.tratamiento-varices-section .offer-box-inner {

    background-color: white !important;

}


.tratamiento-varices-section .offer-box-image .icon {

    width: 72px;

    height: 72px;

}


.text-with-image-default:not(.hero-secondary) .bottom-text, .text-with-image-default .title {

    color: var(--color-brand-1) !important;

}


.hero-secondary.text-with-image-default .title * {

    color: var(--color-brand-neutral) !important;

}


.text-with-image-default .image {

    max-width: 570px;

    border-radius: 25px;

}


.text-with-image-default .text p {

    font-size: 16px;

}


.faqs-with-image-item:has(.active) {

    background-color: var(--color-brand-neutral);

    border-radius: 16px;

}


.faqs-with-image-list .answer {

    padding-left: 5px;

    padding-right: 20px;

}


.faqs-with-image-text .rich-text-component {

    text-align: left;

}


form .hs-richtext a[href^="tel"]::before {

    content: "";

    position: absolute;

    top: 5px;

    left: 15%;

    width: 100%;

    height: 2.7rem;

    display: inline-block;

    background: url(https://hospitaldevarices.cdn.prismic.io/hospitaldevarices/aAleUPIqRLdaBi9r_Zfx1rc68zyqdRpVD_icono-telefono-1-.svg) no-repeat left;

    z-index: -1;

}


#form-ciudadela {

    max-width: 500px;

    justify-self: center;

}


form .hs-fieldtype-intl-phone {

    display: flex;

    align-items: center;

    justify-content: center;

}


.hs-fieldtype-intl-phone.hs-input .hs-input {

    color: var(--color-brand-1) !important;

}


form .input input {

    color: var(--color-brand-1) !important;

}


form select {

    color: var(--color-brand-1) !important;

}


form textarea {

    color: var(--color-brand-1) !important;

}


form select {

    padding-top: 12px;

    padding-bottom: 12px;

    margin-top: 0;

    margin-left: 0;

    border-radius: 35px;

    border: 1px solid var(--color-brand-4);

}


.somos-ux-desktop {

    display: none;

}


@media (min-width: 640px) {

    .somos-ux-mobile {

        display: none;

    }

    .somos-ux-desktop {

        display: flex;

    }

}


.green-check {

    background-image: url('https://coolfy.cdn.prismic.io/coolfy/Zgw4cMt2UUcvBVue_check-verde.svg');

    background-repeat: no-repeat;

    background-position: center;

}


.red-cross {

    background-image: url('https://coolfy.cdn.prismic.io/coolfy/Zgw4cct2UUcvBVuf_cross-rojo.svg');

    background-repeat: no-repeat;

    background-position: center;

}


.orange-line {

    background-image: url('https://coolfy.cdn.prismic.io/coolfy/Zg0B2Mt2UUcvBWT7_orange-horizontal-line.svg');

    background-repeat: no-repeat;

    background-position: center;

}


.table-scroll {

    display: block;

    overflow-x: auto;

}


.th-fixed {

    position: sticky;

    left: 0;

    z-index: 2;

}


.faqs-default img {

    border-radius: 16px;

}


.preguntas-frecuentes {

    background-color: var(--color-brand-neutral);

}


.preguntas-frecuentes .faqs-default {

    background-color: var(--color-brand-neutral) !important;

}


.preguntas-frecuentes .faqs-default-container {

    background-color: var(--color-brand-neutral) !important;

}


.preguntas-frecuentes .tab {

    border-width: 0;

    border-radius: 0;

    color: var(--color-brand-1);

    padding-top: 0;

    padding-bottom: 0;

}


.preguntas-frecuentes .tab:not(:last-child) {

    border-right: 1px solid var(--color-brand-1);

}


@media (max-width: 600px) {

    .frame-root {

        flex-direction: column;

    }


    .checks {

        flex-direction: column;

    }

}


.rich-text-default .rich-text-component.bottom-text {

    max-width: 80rem;

}


.rich-text-default .brand-button {

    cursor: pointer;

    border: 0;

    margin-top: 30px;

    margin-bottom: 20px;

    color: var(--color-brand-neutral);

    background-color: var(--color-brand-2);

    padding: 12px 48px;

    border-radius: 12px;

    max-width: 425px;

    text-align: center;

}


.rich-text-default .bottom-text {

    padding-top: 0;

}


.rich-text-default .bottom-text .brand-button {

    font-size: 16px;

}


.rich-text-default .brand-button:hover {

    color: var(--color-brand-neutral);

    background-color: var(--color-brand-1);

}


.tabla-comparativa .rich-text-default-container .rich-text-inner {

    padding-left: 0 !important;

    padding-right: 0 !important;

    padding-bottom: 0 !important;

}


.tabla-comparativa .rich-text-component {

    max-width: 80rem;

}

@media (min-width: 640px) {

    .hero-default-content-inner .brand-button {

        font-size: 18px;

    }

    .tabla-comparativa th, .tabla-comparativa td {

        display: table-cell;

    }

}


.blog-post-tag {

    padding: 0px 5px !important;

    border-radius: 5px !important;

}


.blog-post-page .main-image {

    background-image: none !important;

    display: none !important;

    padding-top: 0;

    max-height: 492px;

}


.blog-post-page .blog-post-content p:has(a) {

    margin-top: 0;

}


.blog-post-page .title-image {

    display: flex;

    max-height: 370px !important;

    object-position: center;

    object-fit: cover;

    border-radius: 16px;

}


.tienes-dudas.banner-default {

    background-color: var(--color-brand-3);

}


.tienes-dudas .banner {

    padding-top: 80px;

    padding-bottom: 80px;

}


.tienes-dudas .banner-default-container {

    background-image: linear-gradient(93.58deg, #1A5365 27.02%, rgba(26, 83, 101, 0.61) 113.92%), url("https://images.prismic.io/urbemotos/ZfM2JbTwE6aM1KDu_urbemotos-2.jpeg?auto=format,compress");

    background-size: cover, cover;

    background-repeat: no-repeat, no-repeat;

    background-position: center, right;

    margin-left: 20px;

    margin-right: 20px;

}


.tienes-dudas.banner-default * {

    color: var(--color-brand-neutral);

}


.tienes-dudas.banner-default button {

    border-radius: 36px;

    padding: 14px 42px;

    background-color: var(--color-brand-2);

}


.tienes-dudas .rich-text-component {

    row-gap: 3rem;

}


.banner-ofertas-especiales {

    background-color: var(--color-brand-3);

}


.banner-ofertas-especiales .flexible-component-default-container {

    background-color: var(--color-brand-1);

    padding-top: 40px;

    padding-bottom: 40px;

    border-radius: 16px;

}


.banner-ofertas-especiales .flexible-component-default-container .content {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-wrap: wrap;

}


.banner-ofertas-especiales * {

    color: var(--color-brand-neutral) !important;

}


.banner-ofertas-especiales p {

    font-size: 22px;

    max-width: 290px;

    margin-bottom: 20px;

    text-align: left;

}


.banner-ofertas-especiales .cta-button {

    border-radius: 36px;

    padding: 14px 42px;

    background-color: var(--color-brand-2);

    text-wrap: nowrap;

    margin-top: 20px !important;

}


@media (min-width: 768px) {

    .banner-ofertas-especiales .flexible-component-default-container .content {

        justify-content: space-around;

    }


    .banner-ofertas-especiales p {

        margin-bottom: 0;

    }

}


.faqs-with-image-item {

    border-bottom-width: 0 !important;

}


.mobile-filter {

    position: fixed;

    bottom: 10px;

    left: 50%;

    transform: translate(-50%, 0);

}


.mobile-filter button {

    background-color: var(--color-brand-1);

    color: var(--color-brand-neutral);

    padding: 14px 40px;

    border-radius: 36px;

}


.mobile-filter button * {

    font-size: 18px;

    font-weight: 500;

}


.mobile-filter button:hover {

    color: var(--color-brand-6);

}


.main-text-with-image.text-with-image-default {

    background-color: var(--color-brand-3);

}


.main-text-with-image .text-with-image-default-container {

    background-color: var(--color-brand-3);

}


.main-text-with-image.text-with-image-default .image {

    /*display: none;*/

}


.main-text-with-image.text-with-image-default .text {

    color: var(--color-brand-1);

}


.main-text-with-image.text-with-image-default .text:hover {

    color: var(--color-brand-1);

}

.hero-default .text-center h1 {
    text-align: left !important;
}

.hero-default .text-center h4 {
    text-align: right !important;
}

.main-text-with-image.text-with-image-default .text a {

    color: var(--color-brand-neutral);

    background-color: var(--color-brand-2);

    padding: 12px 48px;

    border-radius: 12px;

    max-width: 425px;

    display: block;

    text-align: center;

}


.main-text-with-image.text-with-image-default .text a:hover {

    background-color: var(--color-brand-1);

}


.main-text-with-image.text-with-image-default .text .block-img {

    width: 155px;

    margin-left: -16px;

    margin-top: -22px;

}


.main-text-with-image.text-with-image-default .text p:has(a) {

    margin-top: 20px;

}


.productos-section .flexible-component-item .text > p:last-child {

    /*position: relative;

    width: 100%;

    text-align: right;

    padding-top: 10px;*/

}


.page-root:has(.filter-dropdown-multiselect) .productos-section {

    margin-top: calc(-100vh + var(--navbar-height));

    padding-top: 60px;

}


@media (min-width: 1024px) {

    .productos-section {

        overflow-y: auto;

        justify-content: flex-start;

        min-height: calc(100vh - var(--navbar-height));

    }

}


@media (min-width: 1280px) {

    .tienes-dudas .banner-default-container {

        border-radius: 16px;

    }

}


@media (min-width: 640px) {


    .main-text-with-image.text-with-image-default .image {

        display: flex;

        height: 438px;

        border-radius: 16px;

    }

}


@media (min-width: 768px) {

    .hero-default-content {

        align-items: flex-start;

        justify-content: center;

        padding-top: 110px;

        padding-left: 40px;

    }


    .hero-default-inner {

        min-height: calc(100vh - var(--navbar-height)) !important;

        margin-top: 0;

        background-size: auto !important;

        background-position: left top !important;

        background-repeat: no-repeat;

    }


    .hero-default-content-inner {

        margin-top: 0;

    }


    header .brand-button-desktop a {

        visibility: visible;

        min-width: 145px;

        margin-right: 0;

    }


    .productos-section .flexible-component-default .title {

        text-align: center;

    }


    .offer-box-inner h3 {

        position: relative;

        top: 0;

        left: 0;

    }


    .faqs-with-image {

        padding-left: 20px;

        padding-right: 20px;

    }


    .faqs-with-image-container {

        border: 1px solid var(--color-brand-6);

        border-radius: 16px;

        margin: 20px;

    }


    .faqs-with-image-text .rich-text-component {

        text-align: center;

    }

}

.blog-post-page header * {
    color: var(--color-brand-1);
}

.blog-posts-default .text {
    background-color: var(--color-brand-1) !important;
    padding-top: 15px;
}

.blog-posts-default article {
    border: 1px solid var(--color-brand-6) !important;
    border-radius: 17px;
}

.blog-posts-default .text * {
    color: var(--color-brand-neutral) !important;
}