/*
  Toldofácil 2026 · tema hijo de Hummingbird (starter veohummingbird)
  Todo el CSS de la tienda va aquí, por secciones. Colores, fuentes, zonas, anchos, cajón de carrito
  y buscador los gobierna el módulo Hummingbird Customizer (veohummingbirdcustomizer): emite los
  tokens --veo-* en el <head> y su propia hoja de mapeo. Aquí no se redefinen tokens; se usan.
  La paleta de esta tienda está en config/veo-theme.json y se importa desde el módulo.
*/

/*global*/
/* Fuentes de la tienda en local (assets/fonts). En config/veo-theme.json el origen es "theme":
   el módulo emite la familia y estas reglas la cargan. Un @font-face por peso. */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/figtree-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/figtree-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/figtree-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/figtree-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-700.woff2') format('woff2');
}

body {
    background-color: var(--veo-bg-subtle);
    font-size: 1.0625rem;
    line-height: 1.55;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--veo-font-title-family);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.veo-ico {
    flex: none;
}

.btn-primary {
    --bs-btn-color: var(--veo-primary);
    --bs-btn-bg: var(--veo-brand);
    --bs-btn-border-color: var(--veo-brand);
    --bs-btn-hover-color: var(--veo-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--veo-brand) 88%, var(--veo-alt-brand));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--veo-brand) 88%, var(--veo-alt-brand));
    --bs-btn-active-color: var(--veo-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--veo-brand) 80%, var(--veo-alt-brand));
    --bs-btn-disabled-color: var(--veo-primary);
    --bs-btn-disabled-bg: var(--veo-brand);
    --bs-btn-disabled-border-color: var(--veo-brand);
    font-weight: 600;
}

:focus-visible {
    outline: 3px solid var(--veo-alt-brand);
    outline-offset: 3px;
}

#wrapper a:not(.btn) {
    color: var(--veo-extra);
}

#wrapper a:not(.btn):hover {
    color: var(--veo-alt-brand);
}

/* Ventana de los enlaces data-featherlight / data-fancybox-type (custom.js) */
.veo-ventana {
    width: min(50rem, calc(100vw - 2rem));
    height: min(40rem, calc(100dvh - 2rem));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: var(--veo-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.veo-ventana::backdrop {
    background: rgba(21, 25, 27, 0.6);
}

.veo-ventana__marco {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.veo-ventana__cerrar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--veo-secondary);
    color: var(--veo-header);
    cursor: pointer;
}

/*header*/
/* veohummingbirdcustomizer pone backdrop-filter en #header aunque el desenfoque sea 0, y eso encierra el menú móvil (offcanvas fijo) en la altura de la cabecera */
#header.header {
    backdrop-filter: none;
}

#cabecera-barra {
    font-size: 0.875rem;
}

#cabecera-barra .cabecera-barra__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 38px;
}

#cabecera-barra p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

#cabecera-barra .cabecera-barra__extra {
    gap: 1.375rem;
}

#cabecera-barra a {
    color: inherit;
    text-decoration: none;
}

#cabecera-barra a:hover {
    color: var(--veo-header-top-hover);
}

#cabecera-barra strong {
    font-weight: 600;
}

.header-bottom {
    border-bottom: 1px solid var(--veo-border);
}

.header-bottom__row {
    min-height: 80px;
}

.header-bottom .logo {
    width: auto;
    height: 40px;
}

.cabecera-ayuda {
    order: 3;
}

.cabecera-ayuda__boton {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 48px;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--veo-header-color);
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
}

.cabecera-ayuda__boton:hover,
.cabecera-ayuda__boton[aria-expanded="true"] {
    background: var(--veo-secondary);
    color: var(--veo-header-color);
}

.cabecera-ayuda .dropdown-menu {
    padding: 0.5rem;
    border-color: var(--veo-border);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgb(19 35 39 / 10%);
}

.cabecera-ayuda .dropdown-item {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.cabecera-acciones {
    order: 3;
    gap: 0.375rem;
}

.cabecera-acciones .header-block__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cabecera-acciones .header-block__action-btn,
#_mobile_ps_customersignin .header-block__action-btn,
#_mobile_ps_shoppingcart .header-block__action-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
    color: var(--veo-header-color);
}

.cabecera-acciones .header-block__action-btn:hover {
    background: var(--veo-secondary);
}

.cabecera-acciones .header-block__icon {
    font-size: 24px;
}

.header-block__badge {
    position: absolute;
    top: 6px;
    right: 5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--veo-alt-brand);
    color: var(--veo-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

@media (width <= 767px) {
    #cabecera-barra .cabecera-barra__fila {
        justify-content: center;
        min-height: 34px;
        font-size: 0.8125rem;
    }

    .header-bottom__row {
        min-height: 64px;
    }

    .header-bottom .logo {
        height: 34px;
    }

    /* hamburguesa y logo a la izquierda; lupa, cuenta y carrito juntos a la derecha */
    .header-bottom__row > .veo-buscador {
        order: 0;
        margin-left: 0;
    }

    .header-bottom__row > :is(.veo-buscador, #_mobile_ps_customersignin, #_mobile_ps_shoppingcart) {
        padding-inline: 0;
    }

    .header-bottom__row :is(.veo-buscador, #_mobile_ps_customersignin, #_mobile_ps_shoppingcart) .header-block__action-btn {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
        color: var(--veo-header-color);
    }

    .header-bottom__row > .ps-mainmenu--desktop {
        margin-left: -0.625rem;
    }
}

/*menu*/
.ps-mainmenu__tree {
    gap: 1.625rem;
}

.ps-mainmenu__tree-link {
    padding-inline: 0.25rem;
    color: var(--veo-header-color);
    font-size: 1rem;
    font-weight: 500;
}

.ps-mainmenu__tree-link:hover {
    color: var(--veo-header-hover);
}

/* el menú ocupa la fila entera y se centra en vertical con el logo y los iconos */
.ps-mainmenu__desktop .ps-mainmenu__tree {
    height: 100%;
    align-items: center;
}

.ps-mainmenu--desktop .ps-mainmenu__tree > li .ps-mainmenu__tree-link {
    padding-block: 0.375rem;
}

/* subrayado naranja del diseño: crece desde el centro al pasar el ratón y se queda en la sección actual */
.ps-mainmenu--desktop .ps-mainmenu__tree-link {
    position: relative;
}

.ps-mainmenu--desktop .ps-mainmenu__tree-link::after {
    position: absolute;
    right: 0.25rem;
    bottom: -0.125rem;
    left: 0.25rem;
    height: 2px;
    border-radius: 2px;
    background: var(--veo-brand);
    content: "";
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ps-mainmenu--desktop .ps-mainmenu__tree-link:hover::after,
.ps-mainmenu--desktop .ps-mainmenu__tree-link:focus-visible::after,
.ps-mainmenu--desktop .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link::after {
    transform: scaleX(1);
}

.ps-mainmenu--desktop .ps-mainmenu__tree-item.current .ps-mainmenu__tree-link {
    color: var(--veo-header);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ps-mainmenu--desktop .ps-mainmenu__tree-link::after {
        transition: none;
    }
}

.menu-toggle .menu-toggle__icono {
    display: block;
    color: var(--veo-header-color);
}

/* Hummingbird marca el foco también al hacer clic con el ratón: solo con teclado */
.ps-mainmenu.ps-mainmenu--desktop .ps-mainmenu__tree > li :is(.ps-mainmenu__tree-link, .ps-mainmenu__tree-dropdown-toggle):focus:not(:focus-visible) {
    outline: 0;
    color: var(--veo-header-color);
}

/* menú móvil (offcanvas): cabecera oscura con el logo blanco, categorías con icono, «Ayuda» y correo */
#mobileMenu {
    --bs-offcanvas-width: min(360px, 88vw);
    background: var(--veo-primary);
}

#mobileMenu .offcanvas-header {
    gap: 1rem;
    min-height: 64px;
    padding: 0.75rem 1rem 0.75rem var(--veo-gutter);
}

#mobileMenu .ps-mainmenu__logo {
    margin-right: auto;
}

#mobileMenu .ps-mainmenu__logo img {
    display: block;
    width: auto;
    height: 32px;
}

#mobileMenu .btn-close {
    width: 44px;
    height: 44px;
    opacity: 1;
    filter: invert(1) grayscale(1) brightness(2);
}

#mobileMenu .ps-mainmenu__mobile {
    flex: 0 0 auto;
    height: auto;
    padding: 0.75rem var(--veo-gutter) 0;
}

#mobileMenu .menu--mobile,
#mobileMenu .menu__list {
    margin: 0;
    padding: 0;
}

#mobileMenu {
    overflow-y: auto;
}

/* el menú está dentro de la cabecera fija: con él abierto, la barra del configurador y la de la portada pasan por debajo */
body:has(#mobileMenu.show, #mobileMenu.showing) :is(#show-result-container.fixedBottom, .portada-barra-movil) {
    z-index: 1000;
}

/* y la propia cabecera queda por encima del fondo oscuro: se oscurece igual, por debajo del panel */
#header:has(#mobileMenu.show, #mobileMenu.showing)::after {
    position: absolute;
    inset: 0;
    z-index: 1040;
    background: rgb(0 0 0 / 50%);
    content: "";
    pointer-events: none;
}

#mobileMenu .menu__list > li {
    border-bottom: 1px solid var(--veo-border);
}

#mobileMenu .menu__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 56px;
    padding: 0.5rem 0;
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
}

#mobileMenu .menu__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 40px;
    border-radius: 10px;
    background: var(--veo-secondary);
}

#mobileMenu .menu__icono img {
    width: auto;
    max-width: 34px;
    height: auto;
    max-height: 28px;
}

#mobileMenu .ps-mainmenu__ayuda {
    padding: 1.5rem var(--veo-gutter) 0;
}

#mobileMenu .ps-mainmenu__ayuda-titulo {
    margin: 0 0 0.375rem;
    color: var(--veo-alt-brand);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#mobileMenu .ps-mainmenu__ayuda ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mobileMenu .ps-mainmenu__ayuda li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--veo-text);
    font-size: 1rem;
    text-decoration: none;
}

#mobileMenu .ps-mainmenu__correo {
    margin: 1rem 0 0;
    font-size: 0.9375rem;
}

#mobileMenu .ps-mainmenu__correo a {
    color: var(--veo-header);
    font-weight: 600;
}

/* moneda, idioma y contacto: la tienda no los usa y el bloque queda vacío */
#mobileMenu .ps-mainmenu__additionnals {
    display: none !important;
}

/*buscador*/
.veo-buscador {
    order: 2;
    margin-left: auto;
}

.veo-buscador .header-block__action-btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: var(--veo-header-color);
}

.veo-buscador .header-block__action-btn:hover {
    background: var(--veo-secondary);
}

/*carrito*/

/*home*/
body#index #content {
    display: flex;
    flex-direction: column;
}

/* sin migas, el contenido quedaba pegado a la cabecera; portada, categoría y páginas con diseño propio lo anulan */
#wrapper {
    padding-top: 2rem;
}

@media (width <= 767px) {
    #wrapper {
        padding-top: 1.25rem;
    }
}

body#index #wrapper {
    padding-top: 0;
}

.portada-seccion,
.portada-franja {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--veo-container-max-width);
    margin-inline: auto;
    padding-inline: var(--veo-gutter);
}

.portada-seccion {
    padding-block: 5.5rem;
}

.portada-franja {
    padding-block: 5.5rem;
    box-shadow: 0 0 0 100vmax var(--franja-fondo);
    clip-path: inset(0 -100vmax);
    background: var(--franja-fondo);
}

.portada-franja--crema {
    --franja-fondo: var(--veo-secondary);
    padding-block: 3rem 4rem;
}

.portada-franja--arena {
    --franja-fondo: color-mix(in srgb, var(--veo-secondary) 70%, var(--veo-border));
}

.portada-franja--blanca {
    --franja-fondo: var(--veo-primary);
    border-block: 1px solid var(--veo-border);
}

.antetitulo {
    display: block;
    margin-bottom: 0.625rem;
    color: var(--veo-alt-brand);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.antetitulo--claro {
    color: color-mix(in srgb, var(--veo-brand) 70%, var(--veo-primary));
}

.enlace-flecha {
    color: var(--veo-extra);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.enlace-flecha:hover {
    color: var(--veo-alt-brand);
}

.botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
}

.portada-seccion .btn-lg,
.portada-franja .btn-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 54px;
    padding-inline: 1.625rem;
    border-radius: 12px;
    font-size: 1.0625rem;
}

.btn-outline-secondary {
    --bs-btn-color: var(--veo-extra);
    --bs-btn-bg: var(--veo-primary);
    --bs-btn-border-color: color-mix(in srgb, var(--veo-extra) 22%, var(--veo-primary));
    --bs-btn-hover-color: var(--veo-header);
    --bs-btn-hover-bg: color-mix(in srgb, var(--veo-extra) 6%, var(--veo-primary));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--veo-extra) 35%, var(--veo-primary));
    font-weight: 600;
}

.seccion-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.75rem;
}

.seccion-cabecera > div {
    max-width: 640px;
}

#portada-opiniones .seccion-cabecera > div {
    max-width: none;
}

.seccion-cabecera h2,
#portada-por-que h2,
#portada-preguntas h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(2rem, 2.6vw, 2.625rem);
    font-weight: 700;
    line-height: 1.1;
}

.seccion-cabecera p {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 1.125rem;
}

.estrellas {
    display: inline-flex;
    gap: 2px;
    color: #d9901f;
}

#donde-va-tu-toldo .donde__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#donde-va-tu-toldo .donde__h1 {
    max-width: 20ch;
    margin-bottom: 0.75rem;
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
}

#donde-va-tu-toldo .donde__entradilla {
    max-width: 52ch;
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 1.1875rem;
}

#donde-va-tu-toldo .donde__confianza {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
}

#donde-va-tu-toldo .donde__opiniones {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 0.9375rem;
    text-decoration: none;
}

#donde-va-tu-toldo .donde__opiniones strong {
    color: var(--veo-header);
}

#donde-va-tu-toldo .donde__subtitulo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

#donde-va-tu-toldo .donde__subtitulo h2 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

#donde-va-tu-toldo .donde__subtitulo span {
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
}

.donde__pestanas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.pestana-espacio {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding: 1.375rem 1rem 1.25rem;
    border: 1.5px solid var(--veo-border);
    border-radius: 20px;
    background: var(--veo-primary);
    color: var(--veo-header);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pestana-espacio:hover {
    border-color: color-mix(in srgb, var(--veo-border) 70%, var(--veo-extra));
    transform: translateY(-2px);
}

.pestana-espacio.is-activa {
    border-color: var(--veo-brand);
    box-shadow: 0 10px 26px rgba(var(--veo-brand-rgb), 0.16);
}

.pestana-espacio.is-activa::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 18px;
    height: 18px;
    border-right: 1.5px solid var(--veo-brand);
    border-bottom: 1.5px solid var(--veo-brand);
    background: var(--veo-primary);
    transform: translateX(-50%) rotate(45deg);
}

.pestana-espacio__icono {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 72px;
}

.pestana-espacio__icono img {
    width: auto;
}

.pestana-espacio__nombre {
    font-family: var(--veo-font-title-family);
    font-size: 1.3125rem;
    font-weight: 700;
}

.pestana-espacio__precio {
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

.pestana-espacio__precio strong {
    color: var(--veo-alt-brand);
    font-size: 1rem;
}

.donde__panel:not([hidden]) {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
}

.panel-espacio {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--veo-extra);
}

.panel-espacio picture,
.tarjeta-modelo picture {
    display: contents;
}

picture > source {
    display: none;
}

.panel-espacio__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panel-espacio::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgb(21 25 27 / 82%) 0%, rgb(21 25 27 / 35%) 42%, rgb(21 25 27 / 0%) 70%);
}

.panel-espacio__texto {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--veo-primary);
}

.panel-espacio__texto h3 {
    margin: 0;
    color: var(--veo-primary);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.1;
}

.panel-espacio__texto p {
    max-width: 48ch;
    margin: 0 0 0.375rem;
    color: color-mix(in srgb, var(--veo-primary) 88%, var(--veo-extra));
}

.panel-espacio__texto .btn {
    align-self: flex-start;
}

.panel-modelos {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tarjeta-modelo {
    display: grid;
    flex: 1;
    grid-template-columns: 42% 1fr;
    min-height: 200px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
    border-radius: 20px;
    background: var(--veo-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-modelo:hover {
    box-shadow: 0 14px 34px rgb(19 35 39 / 10%);
    transform: translateY(-3px);
}

.tarjeta-modelo__foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarjeta-modelo__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 1.375rem;
}

.tarjeta-modelo__nombre {
    margin: 0;
    font-size: 1.3125rem;
    font-weight: 600;
    line-height: 1.2;
}

.tarjeta-modelo__nombre a {
    color: inherit;
    text-decoration: none;
}

.tarjeta-modelo__nota,
.tarjeta-modelo__desde {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

.tarjeta-modelo__desde {
    margin-top: auto;
    padding-top: 0.5rem;
}

.tarjeta-modelo__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

.tarjeta-modelo__precio {
    color: var(--veo-alt-brand);
    font-family: var(--veo-font-title-family);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.tarjeta-modelo__pie .btn {
    min-height: 44px;
    border-radius: 10px;
}

.portada-barra-movil {
    display: none;
}

#portada-por-que {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 3.5rem;
}

#portada-por-que .por-que__foto {
    position: relative;
}

#portada-por-que .por-que__foto img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    object-fit: cover;
}

#portada-por-que .por-que__etiqueta {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 999px;
    background: var(--veo-extra);
    color: var(--veo-primary);
    font-size: 0.875rem;
    font-weight: 600;
}

#portada-por-que h2 {
    font-size: clamp(2.125rem, 3vw, 2.75rem);
}

#portada-por-que p {
    max-width: 44ch;
    margin-bottom: 1.375rem;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 1.125rem;
}

.pasos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.paso {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.875rem;
    border-radius: 20px;
    border: 1px solid var(--veo-border);
    background: var(--veo-primary);
}

.paso__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.paso__icono,
.ayuda__icono {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--veo-extra);
    color: var(--veo-secondary);
}

.paso__numero {
    color: color-mix(in srgb, var(--veo-border) 70%, var(--veo-extra));
    font-family: var(--veo-font-title-family);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
}

.paso h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.paso p {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

.paso .enlace-flecha {
    margin-top: auto;
}

#portada-muestras {
    padding-bottom: 5.5rem;
    padding-top: 1.5rem;
}

.muestras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border-radius: 28px;
    background: var(--veo-extra);
}

.muestras__texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 3.5rem;
}

.muestras__texto h2 {
    margin: 0;
    color: var(--veo-primary);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.muestras__texto p {
    max-width: 42ch;
    margin: 0;
    color: var(--veo-footer-color);
    font-size: 1.125rem;
}

.muestras__telas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: center;
    gap: 0.75rem;
    padding: 2.75rem;
    background: var(--veo-footer-bg);
}

.muestras__tela {
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), 0 6px 14px rgb(0 0 0 / 18%);
}

.muestras__tela--rayas {
    background: repeating-linear-gradient(90deg, #efe7d6 0 10px, #8e9896 10px 20px);
}

#portada-marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem 2.5rem;
    padding-block: 3.5rem;
}

#portada-marcas .marcas__titulo {
    flex: 1 1 300px;
    max-width: 720px;
}

#portada-marcas .marcas__lista {
    flex: 2.6 1 640px;
}

#portada-marcas h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
}

.marcas__lista {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarjeta-marca {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.375rem;
    border-radius: 16px;
    background: var(--veo-secondary);
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

.tarjeta-marca__logo {
    display: flex;
    align-items: center;
    height: 64px;
}

.tarjeta-marca__logo img {
    width: auto;
    max-width: 100%;
    max-height: 56px;
}

.tarjeta-marca__logo--texto {
    color: var(--veo-extra);
    font-family: var(--veo-font-title-family);
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.opiniones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.375rem;
}

.opinion {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    margin: 0;
    padding: 1.875rem;
    border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
    border-radius: 20px;
    background: var(--veo-primary);
}

.opinion blockquote {
    margin: 0;
    color: var(--veo-text);
    font-size: 1.125rem;
    line-height: 1.55;
}

.opinion figcaption {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.opinion__inicial {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(var(--veo-brand-rgb), 0.14);
    color: var(--veo-extra);
    font-weight: 700;
}

.opinion__autor {
    display: flex;
    flex-direction: column;
}

.opinion__autor > span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.8125rem;
}

#portada-preguntas {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 3.5rem;
}

#portada-preguntas .preguntas__intro p {
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

#portada-preguntas .preguntas__correo {
    padding-top: 0.5rem;
    font-size: 0.9375rem;
}

.preguntas__lista {
    border-top: 1px solid var(--veo-border);
}

.pregunta {
    border-bottom: 1px solid var(--veo-border);
}

.pregunta summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 44px;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
}

.pregunta summary::-webkit-details-marker {
    display: none;
}

.pregunta summary h3 {
    margin: 0;
    font-family: var(--veo-font-family);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
}

.pregunta summary::after {
    content: "+";
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--veo-secondary) 70%, var(--veo-border));
    color: var(--veo-extra);
    font-size: 1.25rem;
    line-height: 1;
}

.pregunta[open] summary::after {
    content: "−";
    background: var(--veo-brand);
    color: var(--veo-primary);
}

.pregunta__respuesta {
    max-width: 68ch;
    padding: 0 3.375rem 1.375rem 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

.pregunta__respuesta p {
    margin: 0;
}

.pregunta__respuesta a {
    color: var(--veo-extra);
    font-weight: 600;
}

.pregunta__respuesta a:hover {
    color: var(--veo-alt-brand);
}

#portada-ayuda {
    padding-top: 5.5rem;
}

.ayuda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 3rem 3.5rem;
    border-radius: 28px;
    background: color-mix(in srgb, var(--veo-secondary) 70%, var(--veo-border));
}

.ayuda__texto {
    display: flex;
    flex: 1 1 460px;
    align-items: center;
    gap: 1.375rem;
}

.ayuda__icono {
    flex: none;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.ayuda h2 {
    margin: 0 0 0.375rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

.ayuda p {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

@media (width <= 1199px) {
    .donde__panel:not([hidden]),
    #portada-por-que,
    #portada-preguntas {
        grid-template-columns: 1fr;
    }

    .panel-modelos {
        flex-direction: row;
    }

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

@media (width <= 991px) {
    .donde__pestanas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pasos,
    .opiniones {
        grid-template-columns: 1fr;
    }

    .marcas__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .panel-modelos {
        flex-direction: column;
    }
}

@media (width <= 767px) {
    .portada-seccion,
    .portada-franja {
        padding-block: 3rem;
    }

    .portada-franja--crema {
        padding-block: 1.5rem 2.5rem;
    }

    .donde__pestanas {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pestana-espacio {
        flex: none;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.5rem 0.875rem 0.5rem 0.625rem;
        border-radius: 12px;
    }

    .pestana-espacio.is-activa::after,
    .pestana-espacio__precio {
        display: none;
    }

    .pestana-espacio__icono {
        height: auto;
    }

    .pestana-espacio__icono img {
        height: 24px;
    }

    .pestana-espacio__nombre {
        font-size: 0.9375rem;
    }

    .panel-espacio {
        min-height: 360px;
    }

    .panel-espacio__texto {
        padding: 1.375rem;
    }

    .panel-espacio__texto h3 {
        font-size: 1.625rem;
    }

    .portada-barra-movil {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1020;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.75rem var(--veo-gutter) calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--veo-primary);
        box-shadow: 0 -8px 24px rgb(19 35 39 / 10%);
    }

    .portada-barra-movil__precio {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
    }

    .portada-barra-movil__precio small {
        color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
        font-size: 0.75rem;
    }

    .portada-barra-movil__precio strong {
        color: var(--veo-alt-brand);
        font-family: var(--veo-font-title-family);
        font-size: 1.25rem;
    }

    .portada-barra-movil .btn {
        flex: 1;
        max-width: 16rem;
        min-height: 48px;
        border-radius: 12px;
    }

    body#index #footer {
        padding-bottom: 5rem;
    }

    /* fila compacta: foto pequeña, nombre, precio y flecha; toda la tarjeta enlaza */
    .tarjeta-modelo {
        position: relative;
        grid-template-columns: 88px 1fr;
        align-items: center;
        gap: 0.875rem;
        min-height: 0;
        padding: 0.625rem 2.5rem 0.625rem 0.625rem;
        border-radius: 18px;
    }

    .tarjeta-modelo::after {
        position: absolute;
        top: 50%;
        right: 1rem;
        width: 0.5rem;
        height: 0.5rem;
        border-top: 2px solid var(--veo-header);
        border-right: 2px solid var(--veo-header);
        content: "";
        transform: translateY(-50%) rotate(45deg);
    }

    .tarjeta-modelo__foto {
        width: 88px;
        height: 88px;
        border-radius: 12px;
    }

    .tarjeta-modelo__cuerpo {
        gap: 0.125rem;
        padding: 0;
    }

    .tarjeta-modelo__nombre {
        font-size: 1.0625rem;
    }

    .tarjeta-modelo__nombre a::after {
        position: absolute;
        inset: 0;
        content: "";
    }

    .tarjeta-modelo__nota {
        font-size: 0.8125rem;
    }

    .tarjeta-modelo__desde {
        padding-top: 0.25rem;
        font-size: 0.75rem;
    }

    .tarjeta-modelo__precio {
        font-size: 1.25rem;
    }

    .tarjeta-modelo__pie .btn {
        display: none;
    }

    .muestras__texto,
    .muestras__telas {
        padding: 1.75rem;
    }

    .muestras__texto h2 {
        font-size: 1.875rem;
    }

    .marcas__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .tarjeta-marca__logo--texto {
        font-size: 1.5rem;
    }

    .ayuda {
        padding: 1.75rem;
    }

    .ayuda h2 {
        font-size: 1.5rem;
    }

    .pregunta__respuesta {
        padding-right: 0;
    }
}

/*categoria*/
body#category #wrapper {
    padding-top: 0;
}

#categoria-cabecera {
    margin-bottom: 3rem;
    padding-block: 1.5rem 2.5rem;
    box-shadow: 0 0 0 100vmax var(--veo-secondary);
    clip-path: inset(0 -100vmax);
    background: var(--veo-secondary);
}

.categoria-cabecera__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.75rem;
}

.categoria-cabecera__titulo {
    display: flex;
    flex: 1 1 560px;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.categoria-cabecera__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 24px;
    background: var(--veo-primary);
}

.categoria-cabecera__icono img {
    width: 76px;
    height: auto;
}

.categoria-cabecera__h1 {
    margin: 0 0 0.5rem;
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.02;
}

.categoria-cabecera__descripcion {
    max-width: 52ch;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 1.125rem;
}

.categoria-cabecera__descripcion p {
    margin: 0;
}

.categoria-productos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
    margin-bottom: 4.5rem;
}

.tarjeta-producto {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
    border-radius: 24px;
    background: var(--veo-primary);
}

.tarjeta-producto__imagen {
    position: relative;
    display: block;
}

.tarjeta-producto__imagen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.tarjeta-producto__etiquetas {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
}

.etiqueta {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.etiqueta--marca {
    background: var(--veo-brand);
    color: var(--veo-text);
}

.etiqueta--oscura {
    background: var(--veo-extra);
    color: var(--veo-primary);
}

.etiqueta--clara {
    background: var(--veo-primary);
    color: var(--veo-header);
}

.tarjeta-producto__cuerpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
}

.tarjeta-producto__nombre {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
}

.tarjeta-producto__nombre a {
    color: inherit;
    text-decoration: none;
}

.tarjeta-producto__texto {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

.tarjeta-producto__puntos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    list-style: none;
}

.tarjeta-producto__puntos li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.tarjeta-producto__puntos svg {
    margin-top: 2px;
    color: #2f7a4f;
}

.tarjeta-producto__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.tarjeta-producto__precio {
    display: flex;
    flex-direction: column;
}

.tarjeta-producto__precio span {
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

.tarjeta-producto__precio strong {
    color: var(--veo-alt-brand);
    font-family: var(--veo-font-title-family);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.tarjeta-producto .btn-lg {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 54px;
    padding-inline: 1.625rem;
    border-radius: 12px;
}

.comparativa {
    margin-bottom: 4.5rem;
    padding-block: 4.5rem;
    box-shadow: 0 0 0 100vmax var(--veo-primary);
    clip-path: inset(0 -100vmax);
    background: var(--veo-primary);
}

.comparativa h2 {
    max-width: 24ch;
    margin-bottom: 0.75rem;
    font-size: clamp(1.875rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
}

.comparativa > p {
    max-width: 60ch;
    margin-bottom: 2rem;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

.comparativa__tabla {
    overflow-x: auto;
}

.comparativa table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
}

.comparativa table,
.comparativa th,
.comparativa td {
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.comparativa th,
.comparativa td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--veo-border);
    text-align: left;
    vertical-align: top;
}

.comparativa thead th {
    border-bottom: 2px solid var(--veo-extra);
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    font-size: 1.25rem;
}

.comparativa tbody th {
    width: 28%;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-weight: 600;
}

.comparativa thead th:first-child {
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-family: var(--veo-font-family);
    font-size: 0.8125rem;
    font-weight: 600;
}

.comparativa__importe {
    color: var(--veo-alt-brand);
    font-weight: 700;
}

.comparativa__si::before,
.comparativa__no::before {
    display: inline-block;
    width: 1.25rem;
    font-weight: 700;
}

.comparativa__si::before {
    color: var(--bs-success);
    content: "✓";
}

.comparativa__no::before {
    color: color-mix(in srgb, var(--veo-text) 50%, var(--veo-primary));
    content: "—";
}

.preguntas__subtitulo {
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
}

.comparativa tfoot td {
    border-bottom: 0;
}

.comparativa tfoot .btn {
    text-decoration: none;
    white-space: nowrap;
}

.preguntas-bloque {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 3.5rem;
    margin-bottom: 4rem;
}

.preguntas-bloque h2 {
    font-size: clamp(1.75rem, 2.4vw, 2.375rem);
    font-weight: 700;
    line-height: 1.1;
}

.guias {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 4.5rem;
}

.guia {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 18px;
    background: var(--veo-secondary);
    color: var(--veo-text);
    text-decoration: none;
}

.guia:hover {
    color: var(--veo-header);
    box-shadow: 0 10px 26px rgb(19 35 39 / 8%);
}

.guia__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--veo-extra);
    color: var(--veo-secondary);
}

.guia > span:last-child {
    display: flex;
    flex-direction: column;
}

.guia > span:last-child span {
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

@media (width <= 991px) {
    .categoria-productos,
    .preguntas-bloque,
    .guias {
        grid-template-columns: 1fr;
    }
}

@media (width <= 767px) {
    #categoria-cabecera {
        padding-block: 1.25rem 1.375rem;
    }

    .categoria-cabecera__titulo {
        gap: 1rem;
    }

    .categoria-cabecera__icono {
        width: 68px;
        height: 68px;
        border-radius: 18px;
    }

    .categoria-cabecera__icono img {
        width: 50px;
    }

    .tarjeta-producto__cuerpo {
        padding: 1.125rem;
    }

    .tarjeta-producto__nombre {
        font-size: 1.4375rem;
    }

    .tarjeta-producto__precio strong {
        font-size: 1.75rem;
    }

    .comparativa {
        padding-block: 2.5rem;
    }

    .comparativa th,
    .comparativa td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

    .comparativa thead th {
        font-size: 1rem;
    }

    .comparativa tfoot .btn {
        width: 100%;
        padding-inline: 0.5rem;
        white-space: normal;
    }
}

/*miniaturas*/

/*producto*/
body#product .product__container {
    gap: 3rem;
}

body#product .product__images {
    position: relative;
}

body#product .product__left {
    position: relative;
    align-self: flex-start;
}

body#product .product__name {
    margin-bottom: 0.625rem;
    font-size: clamp(1.875rem, 2.6vw, 2.625rem);
    font-weight: 700;
    line-height: 1.05;
}

body#product .product__images .carousel-item img,
body#product .product__thumbnail-image {
    border-radius: 20px;
}

/* las fotos de los toldos son 4:3 y la imagen grande del núcleo es cuadrada con franjas: se recorta a 4:3 */
body#product:has(.producto-garantias) .product__carousel .carousel-item img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* en móvil, las miniaturas en una sola fila que se desliza */
@media (width <= 767px) {
    body#product .product__thumbnails-list {
        grid-template-columns: none;
        grid-auto-columns: calc((100% - 3 * 0.5rem) / 4.4);
        grid-auto-flow: column;
        gap: 0.5rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    body#product .product__thumbnails-item {
        scroll-snap-align: start;
    }
}

.producto-etiqueta {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 3;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--veo-extra);
    color: var(--veo-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.producto-desde {
    margin: 0 0 1.25rem;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.9375rem;
}

.producto-desde strong {
    color: var(--veo-alt-brand);
    font-family: var(--veo-font-title-family);
    font-size: 1.5rem;
    font-weight: 700;
}

.producto-categoria {
    display: none;
}

.producto-entradilla p {
    margin: 0 0 0.875rem;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 1.0625rem;
}

.producto-confianza {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1.25rem 0 0.5rem;
    padding: 0;
    color: var(--veo-text);
    font-size: 0.875rem;
    list-style: none;
}

.producto-confianza li::before {
    margin-right: 0.375rem;
    color: var(--bs-success);
    font-weight: 700;
    content: "✓";
}

.producto-dudas {
    margin: 0.75rem 0 0;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

.producto-dudas a {
    color: var(--veo-header);
    font-weight: 600;
}

.veo-megaproduct .mp-nota {
    margin: 0.75rem 0 0;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.8125rem;
}

.producto-ficha {
    width: 100%;
    margin-top: 0.5rem;
    border-collapse: collapse;
}

.producto-ficha th,
.producto-ficha td {
    padding: 0.6875rem 0.75rem;
    border-bottom: 1px solid var(--veo-border);
    text-align: left;
    vertical-align: top;
}

.producto-ficha th {
    width: 40%;
    color: var(--veo-header);
    font-weight: 600;
}

@media (width <= 767px) {
    .producto-categoria {
        display: inline-block;
        margin-bottom: 0.25rem;
        color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
        font-size: 0.8125rem;
        text-decoration: none;
    }
}

.producto-garantias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.producto-garantias li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 14px;
    background: var(--veo-secondary);
}

.producto-garantias svg {
    flex: none;
    color: var(--veo-alt-brand);
}

.producto-garantias span {
    display: flex;
    flex-direction: column;
    color: color-mix(in srgb, var(--veo-text) 80%, var(--veo-primary));
}

.producto-garantias strong {
    color: var(--veo-header);
}

/* Descripción y manuales: pestañas en escritorio, desplegables en móvil (mismo <details name>) */
.producto-info {
    margin-top: 1.5rem;
    padding: 0 1.625rem;
    border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
    border-radius: 20px;
    background: var(--veo-primary);
}

.producto-info__panel > summary {
    display: flex;
    align-items: center;
    min-height: 3.375rem;
    color: var(--veo-header);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.producto-info__panel > summary::-webkit-details-marker {
    display: none;
}

.producto-info__cuerpo {
    padding-bottom: 1.625rem;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 0.9375rem;
}

.producto-info__cuerpo h2,
.producto-info__cuerpo h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

/* la descripción trae los títulos en mayúsculas */
.producto-info__cuerpo :is(h2, h3, h4, p > strong:only-child) {
    display: block;
    text-transform: lowercase;
}

.producto-info__cuerpo :is(h2, h3, h4, p > strong:only-child)::first-letter {
    text-transform: uppercase;
}

.producto-info__cuerpo p {
    margin-bottom: 0.75rem;
}

.producto-manuales {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.producto-manuales a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
    border-radius: 12px;
    text-decoration: none;
}

.producto-manuales a > svg:first-child {
    color: var(--veo-alt-brand);
}

.producto-manuales span {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.8125rem;
}

.producto-manuales strong {
    color: var(--veo-header);
    font-size: 0.9375rem;
}

@media (width >= 768px) {
    body#product .product__container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    }

    .producto-info {
        display: grid;
        grid-template-columns: repeat(2, max-content) 1fr;
        column-gap: 0.25rem;
        padding-top: 0.5rem;
    }

    .producto-info::before {
        content: "";
        grid-row: 1;
        grid-column: 1 / -1;
        border-bottom: 1px solid color-mix(in srgb, var(--veo-border) 70%, var(--veo-primary));
    }

    .producto-info__panel {
        display: contents;
    }

    .producto-info__panel > summary {
        grid-row: 1;
        z-index: 1;
        min-height: 3rem;
        padding: 0 1.125rem;
        color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    }

    .producto-info__panel:nth-child(2) > summary {
        grid-column: 2;
    }

    .producto-info__panel:first-child > summary {
        grid-column: 1;
    }

    .producto-info__panel[open] > summary {
        color: var(--veo-header);
        box-shadow: inset 0 -3px 0 var(--veo-brand);
    }

    .producto-info__panel::details-content {
        grid-row: 2;
        grid-column: 1 / -1;
    }

    /* el contenido oculto del panel cerrado cae en la misma celda y se queda los clics */
    .producto-info__panel:not([open])::details-content {
        display: none;
    }

    .producto-info__cuerpo {
        padding-top: 1.25rem;
    }
}

@media (width <= 767px) {
    .producto-info {
        padding: 0;
        border: 0;
        background: none;
    }

    .producto-info__panel {
        margin-bottom: 0.625rem;
        padding: 0 1.125rem;
        border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
        border-radius: 16px;
        background: var(--veo-primary);
    }

    .producto-info__panel > summary::after {
        content: "+";
        margin-left: auto;
        color: color-mix(in srgb, var(--veo-text) 60%, var(--veo-primary));
        font-size: 1.375rem;
        font-weight: 400;
    }

    .producto-info__panel[open] > summary::after {
        content: "−";
    }

    .producto-info__cuerpo {
        font-size: 0.875rem;
    }
}

/* Configurador de megaproduct: cada grupo, una tarjeta-paso como en el diseño */
.veo-megaproduct #mpimages {
    counter-reset: paso;
}

.veo-megaproduct #megagroups .mpstep {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
    border-radius: 20px;
    background: var(--veo-primary);
}

.veo-megaproduct #megagroups .mpstep[id^="megagroup"] {
    counter-increment: paso;
}

/* megaproduct.css flota lo de dentro y fija display: block con #megagroups .mpstep:not():not() */
.veo-megaproduct #megagroups .mpstep:not(.mpmovecontainer):not(.mpresize) {
    display: flow-root;
}

.veo-megaproduct .mega-attrlabel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-height: 32px;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    background: none;
}

.veo-megaproduct .mpstep[id^="megagroup"] > .mega-attrlabel::before {
    content: counter(paso);
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--veo-extra);
    color: var(--veo-primary);
    font-family: var(--veo-font-title-family);
    font-size: 0.9375rem;
    font-weight: 700;
}

.veo-megaproduct .mpstep:has(.selectAttr) > .mega-attrlabel::before,
.veo-megaproduct .mpstep.es-ok > .mega-attrlabel::before {
    content: "✓";
    background: var(--bs-success);
}

/* el número venía escrito en la descripción corta de algunos grupos */
.veo-megaproduct .numero-paso,
.veo-megaproduct .megadescriptionshort:has(> .numero-paso:only-child) {
    display: none;
}

.veo-megaproduct .mega_title {
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    font-size: 1.3125rem;
    font-weight: 700;
}

.veo-megaproduct .megaattr_name {
    margin-left: auto;
    color: var(--veo-alt-brand);
    font-size: 0.875rem;
    font-weight: 600;
}

.veo-megaproduct .megaattr_name:empty {
    display: none;
}

.veo-megaproduct .divmegahelp {
    float: none;
}

.veo-megaproduct .divmegahelp .megahelp {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: color-mix(in srgb, var(--veo-text) 60%, var(--veo-primary));
}

.veo-megaproduct .megaattr_name:empty + .divmegazoom + .divmegahelp,
.veo-megaproduct .megaattr_name:empty + .divmegahelp {
    margin-left: auto;
}

/* megaproduct.css pone help.png de fondo: sobra donde ya va el icono */
.veo-megaproduct .divmegahelp .megahelp:has(.material-icons) {
    background: none;
}

/* Cómo medir y combinaciones: tarjeta con icono, título y texto corto */
.veo-megaproduct #medidas-header {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.veo-megaproduct #medidas-header > div {
    width: auto;
    max-width: none;
    padding: 0;
}

.veo-megaproduct #medidas-header a {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    align-content: center;
    column-gap: 0.875rem;
    height: 100%;
    padding: 0.875rem;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: var(--veo-secondary);
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.8125rem;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.veo-megaproduct #medidas-header a:hover {
    border-color: color-mix(in srgb, var(--veo-border) 60%, var(--veo-extra));
}

.veo-megaproduct #medidas-header a::before {
    content: "";
    grid-row: 1 / 3;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    background: var(--veo-primary) var(--icono) center / 1.75rem no-repeat;
}

.veo-megaproduct #medidas-header > div:first-child a {
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E3437' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='8' width='20' height='8' rx='1.5'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E");
}

.veo-megaproduct #medidas-header > div:last-child a {
    --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E3437' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4zM4 10h16M10 4v16'/%3E%3C/svg%3E");
}

.veo-megaproduct #medidas-header a i {
    display: none;
}

.veo-megaproduct #medidas-header a strong {
    align-self: end;
    color: var(--veo-header);
    font-size: 0.9375rem;
}

.veo-megaproduct #medidas-header a span {
    align-self: start;
}

/* Medidas: la descripción con los enlaces va debajo de los campos, como en el diseño */
.veo-megaproduct .mpgroupmeasures {
    display: flex !important;
    flex-direction: column;
}

.veo-megaproduct .mpgroupmeasures > .megadescriptionshort {
    order: 3;
}

.veo-megaproduct .mpgroupmeasures > .megadescriptionlong {
    order: 4;
}

.veo-megaproduct .mp-step-measures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.875rem;
}

.veo-megaproduct .mp-step-measures > div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: auto;
    float: none;
}

.veo-megaproduct .mp-step-measures label {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 0.875rem;
    font-weight: 600;
}

.veo-megaproduct .mp-step-measures .typemeasure {
    position: absolute;
    top: calc(0.875rem * 1.5 + 0.375rem);
    right: 0.875rem;
    display: flex;
    align-items: center;
    height: 54px;
    color: color-mix(in srgb, var(--veo-text) 70%, var(--veo-primary));
    font-size: 0.9375rem;
    pointer-events: none;
}

.veo-megaproduct .mp-measure,
.veo-megaproduct #id_step_quantity {
    width: 100%;
    min-height: 54px;
    padding: 0 2.75rem 0 1rem;
    border: 1.5px solid var(--veo-border);
    border-radius: 12px;
    background: var(--veo-bg-subtle);
    color: var(--veo-header);
    font-size: 1.375rem;
    font-weight: 600;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.veo-megaproduct .mp-measure:focus,
.veo-megaproduct #id_step_quantity:focus {
    border-color: var(--veo-extra);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--veo-extra) 12%, transparent);
}

.veo-megaproduct .mp-step-measures > div.es-error .mp-measure {
    border-color: var(--bs-danger);
}

/* ayuda de rango (custom.js) */
.veo-megaproduct .mp-ayuda {
    color: color-mix(in srgb, var(--veo-text) 70%, var(--veo-primary));
    font-size: 0.8125rem;
    line-height: 1.4;
}

.veo-megaproduct .mp-ayuda strong {
    color: var(--veo-header);
}

.veo-megaproduct .es-error .mp-ayuda {
    color: var(--bs-danger);
    font-weight: 600;
}

/* la ayuda de custom.js ya dice qué falla en cada campo */
.veo-megaproduct .mpgroupmeasures:has(.mp-ayuda) .rangoerror {
    display: none !important;
}

.veo-megaproduct .rangoerror {
    margin: 0.875rem 0 0;
    border-radius: 12px;
    font-size: 0.875rem;
}

.veo-megaproduct #id_step_quantity {
    width: 90px;
    padding-right: 1rem;
    font-size: 1.125rem;
}

.veo-megaproduct #mp-step-quantity > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.veo-megaproduct #mp-step-quantity label {
    margin: 0;
    color: var(--veo-header);
    font-weight: 600;
}

/* Opciones con dibujo (instalación, accionamiento, lado, faldón…): tarjetas como en el diseño */
.veo-megaproduct #megagroups .megacolor_list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    width: auto;
    height: auto;
    margin: 0;
    padding: 1.125rem 0.875rem 1rem;
    float: none;
    border: 1.5px solid var(--veo-border);
    border-radius: 16px;
    background: var(--veo-bg-subtle);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li:hover {
    border-color: var(--veo-extra);
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li:has(> a.selectAttr) {
    border-color: var(--veo-brand);
    background: color-mix(in srgb, var(--veo-brand) 6%, var(--veo-primary));
    box-shadow: inset 0 0 0 1px var(--veo-brand);
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li:has(> a.selectAttr)::before {
    content: "✓";
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--veo-brand);
    color: var(--veo-text);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* toda la tarjeta es el enlace de megaproduct; la plantilla le pone width y height en línea */
.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li > a {
    position: static;
    display: block;
    width: auto !important;
    height: auto !important;
    border: 0;
    background: none !important;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li img {
    display: block;
    width: 6rem !important;
    height: 4rem !important;
    object-fit: contain;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .mplabeldiv {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: auto !important;
    padding: 0;
    color: var(--veo-header);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .mplabeldiv small {
    color: color-mix(in srgb, var(--veo-text) 70%, var(--veo-primary));
    font-size: 0.8125rem;
    font-weight: 400;
}

.veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .mplabeldiv small::first-letter {
    text-transform: uppercase;
}

/* megaproduct.css marca la opción elegida con outline rojo !important */
.veo-megaproduct #megagroups a.selectAttr {
    outline: 0 !important;
}

/* Lonas: lisos y rayas por separado, muestras cuadradas y huecos cortos */
/* el texto suelto del grupo (aviso de color) lo sustituye .lonas-aviso */
.veo-megaproduct #megagroups .grupo-lonas > .megadescriptionshort {
    display: none;
}

.veo-megaproduct .lonas-barra {
    clear: both;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.veo-megaproduct .lonas-tipos {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--veo-secondary) 70%, var(--veo-border));
}

.veo-megaproduct .lonas-tipos button {
    min-height: 38px;
    padding: 0 1rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.veo-megaproduct .lonas-tipos button[aria-selected="true"] {
    background: var(--veo-primary);
    color: var(--veo-header);
    box-shadow: 0 1px 3px rgb(19 35 39 / 12%);
}

.veo-megaproduct .lonas-muestra {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 10px;
    font-size: 0.9375rem;
}

.veo-megaproduct .lonas-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.8125rem;
}

.veo-megaproduct .megadescriptionlong p {
    margin: 0.75rem 0 0;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.8125rem;
}

.veo-megaproduct .lonas-aviso svg {
    flex: none;
    margin-top: 1px;
    color: var(--veo-alt-brand);
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list {
    grid-template-columns: repeat(auto-fill, minmax(3.75rem, 1fr));
    gap: 0.5rem;
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    float: none;
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li[hidden] {
    display: none;
}

.veo-megaproduct #megagroups .grupo-lonas .mplabeldiv {
    display: none;
}

/* la plantilla de megaproduct les pone width y height en línea */
.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li > a {
    display: block;
    overflow: hidden;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    border: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgb(19 35 39 / 14%);
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li > a.selectAttr {
    outline: 3px solid var(--veo-brand) !important;
    outline-offset: 2px;
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* rayas (custom.js las marca): la franja de color ocupa 1/3 de la miniatura; estirada en vertical no se deforma */
.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li.es-raya img {
    transform: scaleY(3.2);
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li .megazoomsingle {
    position: absolute;
    right: 0.25rem;
    bottom: 0.25rem;
    display: none;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 90%);
    color: var(--veo-header);
    cursor: pointer;
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li:hover .megazoomsingle {
    display: grid;
}

.veo-megaproduct #megagroups .grupo-lonas .megacolor_list li .megazoomsingle .material-icons {
    font-size: 1.125rem;
}

/* en pantallas táctiles no hay hover: la lupa siempre a la vista */
@media (hover: none) {
    .veo-megaproduct #megagroups .grupo-lonas .megacolor_list li .megazoomsingle {
        display: grid;
    }
}

/* Ventana de ayuda de megaproduct (mpDialog), igual que .veo-ventana */
.mp-dialog {
    width: min(40rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1.75rem 4rem 1.75rem 1.75rem;
    border: 0;
    border-radius: 16px;
    background: var(--veo-primary);
    color: var(--veo-text);
    box-shadow: 0 20px 60px rgb(0 0 0 / 25%);
}

.mp-dialog::backdrop {
    background: rgb(21 25 27 / 60%);
}

.mp-dialog-title {
    margin-bottom: 0.75rem;
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    font-size: 1.375rem;
    font-weight: 700;
}

.mp-dialog-body {
    font-size: 0.9375rem;
}

.mp-dialog-body p {
    margin-bottom: 0.625rem;
}

/* la ventana cuelga del body, fuera de #wrapper: los enlaces, como en el resto del tema */
.mp-dialog a:not(.btn) {
    color: var(--veo-extra);
    font-weight: 600;
}

.mp-dialog a:not(.btn):hover {
    color: var(--veo-alt-brand);
}

/* el texto de ayuda repite el título en mayúsculas */
.mp-dialog-body > p:first-child:has(> strong:only-child) {
    display: none;
}

.mp-dialog-help .mp-dialog-actions [data-mp-close] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--veo-secondary);
    color: transparent;
    font-size: 0;
}

.mp-dialog-help .mp-dialog-actions [data-mp-close]::before {
    content: "close";
    color: var(--veo-header);
    font-family: "Material Icons";
    font-size: 1.5rem;
    line-height: 1;
}

.mp-dialog .mp-dialog-actions {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem;
}

/* Barra fija: foto, nombre, lo elegido, total y botón (custom.js monta .barra-resumen) */
/* megaproduct.css usa #megagroups #show-result-container: hacen falta los dos ids para ganarle */
.veo-megaproduct #megagroups #show-result-container.fixedBottom {
    z-index: 1030;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.25rem;
    height: auto;
    margin: 0;
    padding: 0.75rem max(var(--veo-gutter), calc((100vw - var(--veo-container-max-width)) / 2 + var(--veo-gutter)));
    border-top: 1px solid var(--veo-border);
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 -8px 22px rgb(19 35 39 / 10%);
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom > .idTabs,
.veo-megaproduct #megagroups #show-result-container.fixedBottom #mp-step-result,
.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-product-title,
.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-name > br {
    display: none;
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-name {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1rem;
    float: none;
    width: auto;
    min-width: 0;
    text-align: left;
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-name:has(.barra-resumen) .mp-product-name {
    display: none;
}

.barra-resumen__img {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
}

.barra-resumen__texto {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.barra-resumen__nombre {
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
}

.barra-resumen__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.barra-resumen__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--veo-secondary);
    color: color-mix(in srgb, var(--veo-text) 85%, var(--veo-primary));
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.barra-resumen__color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-price {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    float: none;
    width: auto;
    line-height: 1.1;
    text-align: right;
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-price::before {
    content: "Total IVA incluido";
    color: color-mix(in srgb, var(--veo-text) 70%, var(--veo-primary));
    font-size: 0.75rem;
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp_total_price {
    color: var(--veo-alt-brand);
    font-family: var(--veo-font-title-family);
    font-size: 1.625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-button {
    flex: none;
    float: none;
    width: auto;
    margin: 0;
}

.veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-error {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    float: none;
    width: 100%;
}

#btnAddProduct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 12px;
    background: var(--veo-brand);
    color: var(--veo-primary);
    font-size: 1.1875rem;
    font-weight: 700;
}

/* blanco sobre el naranja solo cumple AA con texto grande: 19 px en negrita */
#btnAddProduct:hover {
    background: color-mix(in srgb, var(--veo-brand) 88%, var(--veo-alt-brand));
    color: var(--veo-primary);
}

body#product:has(#show-result-container.fixedBottom) #footer {
    padding-bottom: 90px;
}

/* Opiniones de Trustivity (custom.js pinta su widget con este marcado) */
.producto-opiniones {
    margin: 4rem calc(50% - 50vw) 0;
    padding: 3.5rem max(var(--veo-gutter), calc((100vw - var(--veo-container-max-width)) / 2 + var(--veo-gutter)));
    background: var(--veo-secondary);
}

.producto-opiniones .seccion-cabecera {
    margin-bottom: 2rem;
}

.producto-opiniones h2 {
    font-size: clamp(1.625rem, 2.2vw, 1.875rem);
}

.trust {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) 2fr minmax(16rem, 1fr);
    gap: 1.125rem;
}

.trust__nota,
.trust__detalle,
.trust .opinion {
    padding: 1.5rem;
    border: 0;
    border-radius: 18px;
    background: var(--veo-primary);
}

.trust__nota {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.trust__puntos {
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.trust__puntos small {
    color: color-mix(in srgb, var(--veo-text) 60%, var(--veo-primary));
    font-size: 1.125rem;
}

.trust__estrellas {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    color: color-mix(in srgb, var(--veo-border) 80%, var(--veo-primary));
}

.trust__estrellas span {
    position: absolute;
    inset: 0 auto 0 0;
    display: inline-flex;
    overflow: hidden;
    color: #d9901f;
}

.trust__nota p {
    margin: 0;
    color: color-mix(in srgb, var(--veo-text) 72%, var(--veo-primary));
    font-size: 0.875rem;
}

.trust__opiniones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.125rem;
}

.trust .opinion {
    gap: 0.75rem;
}

.trust .opinion blockquote {
    font-size: 1rem;
}

.trust__detalle h3 {
    margin-bottom: 0.875rem;
    font-size: 1rem;
    font-weight: 700;
}

.trust__barra {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
}

.trust__barra meter {
    grid-column: 1 / -1;
    width: 100%;
    height: 6px;
}

.trust__barra meter::-webkit-meter-bar {
    border: 0;
    border-radius: 3px;
    background: var(--veo-secondary);
}

.trust__barra meter::-webkit-meter-optimum-value {
    border-radius: 3px;
    background: var(--bs-success);
}

@media (width <= 1199px) {
    .trust {
        grid-template-columns: 1fr 1fr;
    }

    .trust__opiniones {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (width <= 991px) {
    .producto-garantias {
        grid-template-columns: 1fr;
    }
}

@media (width <= 767px) {
    /* el orden del diseño: foto, configurador, información, garantías */
    body#product .product__container {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    body#product .product__left {
        display: contents;
    }

    body#product .product__images {
        position: relative;
        order: 1;
    }

    .producto-etiqueta {
        top: 0.75rem;
        left: 0.75rem;
    }

    body#product .product__right {
        order: 2;
    }

    .producto-info {
        order: 3;
        margin: 0;
    }

    .producto-garantias {
        order: 4;
        margin: 0;
    }

    .veo-megaproduct #megagroups .mpstep {
        padding: 1.125rem;
    }

    .veo-megaproduct .mega_title {
        font-size: 1.125rem;
    }

    .veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list {
        grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
        gap: 0.625rem;
    }

    .veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li {
        padding: 0.875rem 0.5rem 0.75rem;
    }

    .veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .megacolor_list li img {
        width: 4.75rem !important;
        height: 3.125rem !important;
    }

    .veo-megaproduct #megagroups .mpstep:not(.grupo-lonas) .mplabeldiv {
        font-size: 0.9375rem;
    }

    /* en móvil, dos botones en fila sin el texto de apoyo */
    .veo-megaproduct #medidas-header {
        gap: 0.5rem;
    }

    .veo-megaproduct #medidas-header a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.5rem 0.75rem;
        border-color: color-mix(in srgb, var(--veo-extra) 22%, var(--veo-primary));
        background: var(--veo-primary);
        text-align: center;
    }

    .veo-megaproduct #medidas-header a::before,
    .veo-megaproduct #medidas-header a span {
        display: none;
    }

    .veo-megaproduct #medidas-header a strong {
        font-size: 0.875rem;
    }

    .veo-megaproduct .lonas-tipos {
        display: flex;
        width: 100%;
    }

    .veo-megaproduct .lonas-tipos button {
        flex: 1;
    }

    .veo-megaproduct .lonas-muestra {
        justify-content: center;
        width: 100%;
    }

    .veo-megaproduct #megagroups .grupo-lonas .megacolor_list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* barra: lo elegido en texto, el total a la derecha y el botón debajo */
    .veo-megaproduct #megagroups #show-result-container.fixedBottom {
        flex-wrap: wrap;
        gap: 0.625rem 0.75rem;
        padding: 0.75rem 1.25rem 0.875rem;
    }

    .veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-name {
        flex: 1 1 0;
    }

    .barra-resumen__img,
    .barra-resumen__nombre {
        display: none;
    }

    .barra-resumen__chips {
        display: block;
        color: color-mix(in srgb, var(--veo-text) 70%, var(--veo-primary));
        font-size: 0.75rem;
        line-height: 1.45;
    }

    .barra-resumen__chips li {
        display: inline;
        padding: 0;
        background: none;
        font-size: inherit;
        font-weight: 400;
        white-space: normal;
    }

    .barra-resumen__chips li + li::before {
        content: " · ";
    }

    .barra-resumen__color {
        display: none;
    }

    .veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-price::before {
        content: "IVA incl.";
        font-size: 0.6875rem;
    }

    .veo-megaproduct #megagroups #show-result-container.fixedBottom .mp_total_price {
        font-size: 1.375rem;
    }

    .veo-megaproduct #megagroups #show-result-container.fixedBottom .mp-result-button {
        flex: 1 0 100%;
    }

    #btnAddProduct {
        width: 100%;
        min-height: 48px;
    }

    body#product:has(#show-result-container.fixedBottom) #footer {
        padding-bottom: 150px;
    }

    .producto-opiniones {
        margin-top: 2.5rem;
        padding-block: 2.5rem;
    }

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

    .trust__opiniones {
        grid-row: auto;
    }
}

/*checkout*/
.veo-megaproduct-detalle {
    display: block;
    color: color-mix(in srgb, var(--veo-text) 75%, var(--veo-primary));
    font-size: 0.875rem;
    line-height: 1.4;
}

.veo-megaproduct-detalle,
.veo-megaproduct-detalle * {
    float: none;
    margin-inline: 0;
    text-align: left;
}

.veo-megaproduct-medidas {
    color: var(--veo-header);
    font-weight: 600;
}

/*cuenta*/

/*cms*/
/* Páginas con el diseño de 2026 (Cómo medir, Cómo instalar, Cómo comprar, ¿Qué toldo necesito?): su contenido del back office
   va en .cms-diseno y ocupa todo el ancho; cada sección centra lo suyo con .wrap */
body#cms #wrapper {
    overflow-x: clip;
}

body#cms .page-content--cms:has(.cms-diseno) {
    margin: 0;
    padding: 0;
}

.cms-diseno {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    color: var(--veo-text);
    font-size: 1.0625rem;
    line-height: 1.6;
}

body#cms #wrapper:has(.cms-diseno) {
    padding-top: 0;
}

.cms-diseno :is(h1, h2, h3, h4) {
    margin: 0;
    color: var(--veo-header);
    font-family: var(--veo-font-title-family);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cms-diseno p {
    margin: 0;
}

.cms-diseno .wrap {
    box-sizing: border-box;
    max-width: var(--veo-container-max-width);
    margin-inline: auto;
    padding-inline: var(--veo-gutter);
}

.cms-diseno .ico {
    flex: none;
    width: 24px;
    height: 24px;
}

.cms-diseno img.esquema {
    display: block;
    width: 100%;
    height: auto;
}

#wrapper .cms-diseno a:not(.btn) {
    color: var(--veo-extra);
}

#wrapper .cms-diseno a:not(.btn):hover {
    color: var(--veo-alt-brand);
}

#wrapper .cms-diseno a.gcard,
#wrapper .cms-diseno a.gcard:hover {
    color: var(--veo-text);
    text-decoration: none;
}

#wrapper .cms-diseno .btn-light,
#wrapper .cms-diseno .btn-light:hover {
    color: var(--veo-primary);
}

.cms-diseno .cms-faq__pregunta {
    cursor: pointer;
}

.cms-diseno .cms-faq__pregunta:focus-visible {
    outline: 3px solid var(--veo-alt-brand);
    outline-offset: 3px;
}

/* dentro de la ventana de la ficha (content_only) no hace falta salir del ancho */
body.layout-content-only .cms-diseno,
body#cms.content-only .cms-diseno {
    width: auto;
    margin-inline: 0;
}

/* y la columna de guías y dudas sobra: en la ventana solo interesa la guía */
body.layout-content-only .cms-diseno .side {
    display: none;
}

/* la columna lateral es pegajosa: cuando baja a su propia fila (ventana estrecha) tapaba el contenido al desplazarse */
@media (width <= 1099px) {
    body .cms-diseno .side {
        position: static;
        flex-basis: 100%;
        max-width: none;
    }
}

@media (width <= 767px) {
    .cms-diseno .flow.g4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* cms generado: inicio (node .claude/scripts/cms-desde-diseno.mjs; no editar a mano) */
.cms-diseno .btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:12px;font-weight:600;font-size:17px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap}
.cms-diseno .btn-cta {background:var(--veo-brand);color:var(--veo-primary)}
.cms-diseno .btn-cta:hover {background:#F25F05;color:var(--veo-primary)}
.cms-diseno .btn-ghost {background:var(--veo-primary);color:var(--veo-extra);border:1.5px solid #D5D9DA}
.cms-diseno .btn-ghost:hover {background:#F1F2F2;color:var(--veo-header)}
.cms-diseno .btn-light {background:transparent;color:var(--veo-primary);border:1.5px solid rgba(255,255,255,.55)}
.cms-diseno .btn-light:hover {background:rgba(255,255,255,.1);color:var(--veo-primary)}
.cms-diseno .eyebrow {font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--veo-alt-brand)}
.cms-diseno .muted {color:#5A6266}
.cms-diseno .ph {color:#5A6266;font-style:italic}
.cms-diseno .hero {background:var(--veo-secondary)}
.cms-diseno .crumbs {font-size:14px;color:#5A6266;display:flex;gap:8px;flex-wrap:wrap}
.cms-diseno .chip {display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--veo-extra);background:var(--veo-primary);border:1px solid var(--veo-border);padding:6px 12px;border-radius:999px}
.cms-diseno .chip.dark {background:var(--veo-extra);color:var(--veo-primary);border-color:var(--veo-extra)}
.cms-diseno .chips {display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cms-diseno .card {background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:20px;padding:28px}
.cms-diseno .checks {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cms-diseno .checks li {display:flex;gap:10px;align-items:flex-start}
.cms-diseno .checks .ico {width:20px;height:20px;color:#2F7A4F;margin-top:3px}
.cms-diseno .checks.w .ico {color:var(--veo-alt-brand)}
.cms-diseno .ggrid {display:grid;gap:16px}
.cms-diseno .gcard {display:flex;flex-direction:column;gap:10px;background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:20px;padding:24px;text-decoration:none;color:var(--veo-text);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.cms-diseno .gcard:hover {transform:translateY(-3px);box-shadow:0 14px 30px rgba(19,35,39,.09);border-color:#D9CFBE;color:var(--veo-text)}
.cms-diseno .gico {width:88px;height:72px;border-radius:16px;background:var(--veo-secondary);display:grid;place-items:center;flex:none}
.cms-diseno .gico img {max-width:64px;max-height:50px;display:block}
.cms-diseno .gtitle {font-family:var(--veo-font-title-family);font-size:21px;font-weight:700;color:var(--veo-header);line-height:1.2}
.cms-diseno .gmeta {font-size:14px;color:#5A6266}
.cms-diseno .gmore {margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--veo-alt-brand);font-size:15px}
.cms-diseno .diag {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cms-diseno .diag .cms-figura {margin:0;background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:18px;padding:12px}
.cms-diseno .diag img {width:100%;height:auto;display:block}
.cms-diseno .cap {font-size:13px;color:#5A6266;margin-top:10px}
.cms-diseno .meas {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cms-diseno .meas>li {display:flex;gap:18px;align-items:flex-start;background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:18px;padding:22px 24px}
.cms-diseno .num {width:40px;height:40px;border-radius:50%;background:var(--veo-extra);color:var(--veo-primary);display:grid;place-items:center;font-weight:700;font-size:17px;flex:none}
.cms-diseno .num.ok {background:#2F7A4F}
.cms-diseno .mbody {display:flex;flex-direction:column;gap:6px;min-width:0}
.cms-diseno .mbody h3 {font-size:22px;font-weight:700}
.cms-diseno .mbody h3 span {font-family:var(--veo-font-family);font-size:15px;font-weight:500;color:#5A6266;letter-spacing:0}
.cms-diseno .mbody p {color:#41484B}
.cms-diseno .mnote {font-size:15px;color:#5A6266}
.cms-diseno .rule {display:flex;gap:16px;align-items:flex-start;background:#FFF1E6;border-radius:18px;padding:22px 24px;color:var(--veo-header);font-weight:600;font-size:18px}
.cms-diseno .rule .ico {color:var(--veo-alt-brand);width:28px;height:28px}
.cms-diseno .warn {display:flex;gap:10px;align-items:flex-start;background:#FFF1E6;border-radius:12px;padding:12px 14px;color:#5C2A06;font-size:15px;font-weight:600}
.cms-diseno .warn .ico {width:20px;height:20px;color:var(--veo-alt-brand);margin-top:1px}
.cms-diseno .calc {background:var(--veo-primary);border:1.5px solid var(--veo-border);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px}
.cms-diseno .calch {display:flex;gap:14px;align-items:center}
.cms-diseno .ib {width:48px;height:48px;border-radius:14px;background:#FFEDE0;color:var(--veo-alt-brand);display:grid;place-items:center;flex:none}
.cms-diseno .fields {display:flex;gap:14px;flex-wrap:wrap}
.cms-diseno .fld {display:flex;flex-direction:column;gap:6px;flex:1 1 160px;min-width:0}
.cms-diseno .fld label {font-size:14px;font-weight:600;color:#41484B}
.cms-diseno .inp {display:flex;align-items:center;border:1.5px solid #D9D2C4;border-radius:12px;background:var(--veo-bg-subtle);padding-right:14px}
.cms-diseno .inp:focus-within {border-color:var(--veo-extra);box-shadow:0 0 0 3px rgba(46,52,55,.12)}
.cms-diseno .inp input {flex:1;min-width:0;width:100%;border:0;background:transparent;font:600 22px/1 var(--veo-font-family);color:var(--veo-header);padding:14px 16px;outline:none;font-variant-numeric:tabular-nums}
.cms-diseno .inp span {font-size:15px;color:#5A6266}
.cms-diseno .out {display:flex;flex-direction:column;gap:2px;justify-content:center;flex:1 1 160px;min-width:0;background:var(--veo-secondary);border-radius:12px;padding:10px 16px}
.cms-diseno .out span {font-size:13px;color:#5A6266;font-weight:600}
.cms-diseno .out strong {font-family:var(--veo-font-title-family);font-size:26px;color:var(--veo-header);font-variant-numeric:tabular-nums;line-height:1.15}
.cms-diseno .res {padding:14px 16px;border-radius:12px;background:#F1EDE5;color:#41484B;font-weight:600}
.cms-diseno .res.ok {background:#E6F2EA;color:#1F5C38}
.cms-diseno .res.err {background:#FBEAE8;color:#9B2C22}
.cms-diseno .seg {display:inline-flex;background:#F1EDE5;border-radius:10px;padding:4px;gap:4px;align-self:flex-start}
.cms-diseno .seg button {min-height:42px;padding:0 16px;border:0;border-radius:8px;background:transparent;font:600 15px var(--veo-font-family);color:#41484B;cursor:pointer}
.cms-diseno .seg button.on {background:var(--veo-primary);color:var(--veo-header);box-shadow:0 1px 3px rgba(19,35,39,.12)}
.cms-diseno .next {background:var(--veo-extra);border-radius:24px;padding:36px 40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cms-diseno .next h2 {color:var(--veo-primary)}
.cms-diseno .next p {color:#D9DEE0}
.cms-diseno .help {background:#EAE2D3;border-radius:28px;padding:44px 52px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.cms-diseno .hicon {width:68px;height:68px;border-radius:50%;background:var(--veo-extra);color:var(--veo-secondary);display:grid;place-items:center;flex:none}
.cms-diseno .photo {width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;display:block}
.cms-diseno .facts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cms-diseno .fact {background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:16px;padding:16px 18px;display:flex;gap:12px;align-items:flex-start;min-width:0}
.cms-diseno .fact .ico {color:var(--veo-alt-brand);margin-top:2px}
.cms-diseno .fact strong {display:block;font-family:var(--veo-font-title-family);font-size:20px;color:var(--veo-header);line-height:1.2}
.cms-diseno .fact span {font-size:14px;color:#5A6266}
.cms-diseno .steps {list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.cms-diseno .steps>li {display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;position:relative;padding-bottom:24px}
.cms-diseno .steps>li::before {content:"";position:absolute;left:27px;top:56px;bottom:0;width:2px;background:var(--veo-border)}
.cms-diseno .steps>li:last-child {padding-bottom:0}
.cms-diseno .steps>li:last-child::before {display:none}
.cms-diseno .sn {width:56px;height:56px;border-radius:50%;background:var(--veo-extra);color:var(--veo-primary);display:grid;place-items:center;font-family:var(--veo-font-title-family);font-weight:700;font-size:22px}
.cms-diseno .sbody {background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:18px;padding:22px 26px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cms-diseno .sbody h3 {font-size:22px;font-weight:700}
.cms-diseno .sbody ul,
.cms-diseno .lists ul {margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:#41484B}
.cms-diseno .lists {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cms-diseno .lists .card {display:flex;flex-direction:column;gap:12px}
.cms-diseno .flow {list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cms-diseno .flow li {background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cms-diseno .fi {width:44px;height:44px;border-radius:12px;background:var(--veo-secondary);color:var(--veo-extra);display:grid;place-items:center;flex:none}
.cms-diseno .flow strong {font-size:17px}
.cms-diseno .flow span {font-size:15px;color:#5A6266}
.cms-diseno .fn {font-family:var(--veo-font-title-family);font-size:15px;font-weight:700;color:var(--veo-alt-brand)}
.cms-diseno .gloss {margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
.cms-diseno .gloss div {display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:2px solid var(--veo-extra)}
.cms-diseno .gloss dt {font-family:var(--veo-font-title-family);font-size:22px;font-weight:700;color:var(--veo-header)}
.cms-diseno .gloss dd {margin:0;color:#41484B}
.cms-diseno .tbl {width:100%;border-collapse:collapse;font-size:16px}
.cms-diseno .tbl th,
.cms-diseno .tbl td {text-align:left;padding:16px;border-bottom:1px solid #ECE5D8;vertical-align:middle}
.cms-diseno .tbl thead th {border-bottom:2px solid var(--veo-extra);font-family:var(--veo-font-title-family);font-size:18px;color:var(--veo-header)}
.cms-diseno .tbl tbody th {font-weight:600;color:var(--veo-header)}
.cms-diseno .tags {display:flex;gap:6px;flex-wrap:wrap}
.cms-diseno .tag {display:inline-flex;min-width:52px;justify-content:center;padding:4px 10px;border-radius:8px;background:var(--veo-secondary);font-weight:600;font-variant-numeric:tabular-nums;font-size:15px;color:var(--veo-header)}
.cms-diseno .opts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cms-diseno .opts.two {grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
.cms-diseno .opt {display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:20px 12px 16px;border-radius:16px;border:1.5px solid #D9D2C4;background:var(--veo-bg-subtle);color:var(--veo-header);font-family:inherit;cursor:pointer;text-align:center;font-size:17px;font-weight:700}
.cms-diseno .opt:hover {border-color:var(--veo-extra)}
.cms-diseno .opt.on {border-color:var(--veo-brand);background:#FFF6EF;box-shadow:inset 0 0 0 1px var(--veo-brand)}
.cms-diseno .opt small {font-size:13px;font-weight:500;color:#5A6266}
.cms-diseno .oi {height:60px;display:flex;align-items:flex-end;justify-content:center}
.cms-diseno .qh {display:flex;gap:14px;align-items:center}
.cms-diseno .result {display:flex;flex-wrap:wrap;background:var(--veo-primary);border:1.5px solid var(--veo-brand);border-radius:22px;overflow:hidden}
.cms-diseno .rimg {flex:1 1 380px;min-width:0;min-height:300px;object-fit:cover;display:block}
.cms-diseno .rbody {flex:1 1 440px;min-width:0;padding:32px;display:flex;flex-direction:column;gap:12px}
.cms-diseno .price {font-family:var(--veo-font-title-family);font-size:34px;font-weight:700;color:var(--veo-alt-brand);line-height:1.05}
.cms-diseno .place {display:flex;flex-wrap:wrap;gap:32px;align-items:center}
.cms-diseno .place img {flex:1 1 440px;min-width:0;aspect-ratio:16/10;object-fit:cover;border-radius:22px;display:block}
.cms-diseno .place>div {flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.cms-diseno .h1 {font-size:52px;line-height:1.04;font-weight:700}
.cms-diseno .h2 {font-size:34px;line-height:1.12;font-weight:700}
.cms-diseno .h3 {font-size:24px;font-weight:700}
.cms-diseno .h4 {font-size:20px;font-weight:700}
.cms-diseno .lead {font-size:19px;color:#41484B;max-width:58ch}
.cms-diseno .sec {padding-block:80px;display:flex;flex-direction:column;gap:32px}
.cms-diseno .sech {display:flex;flex-direction:column;gap:10px;max-width:760px}
.cms-diseno .g5 {grid-template-columns:repeat(5,minmax(0,1fr))}
.cms-diseno .g3 {grid-template-columns:repeat(3,minmax(0,1fr))}
.cms-diseno .g4 {grid-template-columns:repeat(4,minmax(0,1fr))}
.cms-diseno .g6 {grid-template-columns:repeat(6,minmax(0,1fr))}
.cms-diseno .layout {display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding-block:56px 80px}
.cms-diseno .side {flex:1 1 260px;max-width:300px;min-width:0;position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
.cms-diseno .content {flex:999 1 640px;min-width:0;display:flex;flex-direction:column;gap:44px}
.cms-diseno .sidebox {background:var(--veo-primary);border:1px solid #EDE6DA;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:2px}
.cms-diseno .sidebox p {font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5A6266;padding:8px 12px 6px}
.cms-diseno .sidelink {display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--veo-text);font-weight:600;font-size:15px;min-height:48px}
.cms-diseno .sidelink:hover {background:var(--veo-secondary);color:var(--veo-header)}
.cms-diseno .sidelink.on {background:#FFF6EF;box-shadow:inset 0 0 0 1.5px var(--veo-brand);color:var(--veo-header)}
.cms-diseno .sidelink img {width:38px;height:28px;object-fit:contain;flex:none}
.cms-diseno .faq {border-bottom:1px solid var(--veo-border)}
.cms-diseno .faq .cms-faq__pregunta {list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;min-height:44px}
.cms-diseno .faq .cms-faq__pregunta::-webkit-details-marker {display:none}
.cms-diseno .faq .cms-faq__pregunta > h3 {font-family:var(--veo-font-family);font-size:18px;font-weight:600;letter-spacing:0;color:var(--veo-header)}
.cms-diseno .faq .cms-faq__pregunta::after {content:"+";flex:none;width:34px;height:34px;border-radius:50%;background:#F1EDE5;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--veo-extra)}
.cms-diseno .faq.is-abierta .cms-faq__pregunta::after {content:"−";background:var(--veo-brand);color:var(--veo-primary)}
.cms-diseno .faq .ans {padding:0 54px 22px 0;color:#41484B;font-size:16px;max-width:68ch}
.cms-diseno .faq .ans a {font-weight:600}
.cms-diseno .faq:not(.is-abierta) .ans {display:none}
.cms-diseno .cd-1 {padding-block:28px 64px;display:flex;flex-direction:column;gap:28px}
.cms-diseno .cd-2 {display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.cms-diseno .cd-3 {flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px}
.cms-diseno .cd-4 {flex:0 1 420px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:12px}
.cms-diseno .cd-5 {color:var(--veo-header);user-select:all}
.cms-diseno .cd-6 {width:18px;height:18px}
.cms-diseno .cd-7 {background:var(--veo-primary);border-block:1px solid #ECE5D8}
.cms-diseno .cd-8 {display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.cms-diseno .cd-9 {flex:1 1 560px;min-width:0}
.cms-diseno .cd-10 {flex:1 1 420px;min-width:0}
.cms-diseno .cd-11 {padding-block:80px;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.cms-diseno .cd-12 {flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.cms-diseno .cd-13 {font-size:17px;color:#41484B}
.cms-diseno .cd-14 {font-size:15px;color:#5A6266;padding-top:8px}
.cms-diseno .cd-15 {flex:2 1 560px;min-width:0;border-top:1px solid var(--veo-border)}
.cms-diseno .cd-16 {padding-block:72px}
.cms-diseno .cd-17 {display:flex;gap:20px;align-items:center;flex:1 1 460px;min-width:0}
.cms-diseno .cd-18 {width:30px;height:30px}
.cms-diseno .cd-19 {display:flex;flex-direction:column;gap:6px;min-width:0}
.cms-diseno .cd-20 {color:#41484B}
.cms-diseno .cd-21 {display:flex;gap:12px;flex-wrap:wrap}
.cms-diseno .cd-22 {width:16px;height:16px}
.cms-diseno .cd-23 {flex:0 1 480px;min-width:0}
.cms-diseno .cd-24 {object-position:center}
.cms-diseno .cd-25 {padding:20px;display:flex;flex-direction:column;gap:6px}
.cms-diseno .cd-26 {color:var(--veo-header)}
.cms-diseno .cd-27 {font-size:15px;color:#41484B}
.cms-diseno .cd-28 {display:flex;flex-direction:column;gap:16px}
.cms-diseno .cd-29 {display:flex;flex-direction:column;gap:2px;min-width:0}
.cms-diseno .cd-30 {font-size:15px}
.cms-diseno .cd-31 {align-items:stretch}
.cms-diseno .cd-32 {align-self:center;font-family:var(--veo-font-title-family);font-size:26px;font-weight:700;color:var(--veo-alt-brand);flex:none}
.cms-diseno .cd-33 {background:#FFF1E6}
.cms-diseno .cd-34 {display:flex;flex-direction:column;gap:12px}
.cms-diseno .cd-35 {display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 360px}
.cms-diseno .cd-36 {width:20px;height:20px}
.cms-diseno .cd-37 {object-position:15% 50%}
.cms-diseno .cd-38 {object-position:60% 40%}
.cms-diseno .cd-39 {object-position:50% 10%}
.cms-diseno .cd-40 {display:flex;flex-direction:column;gap:4px;min-width:0}
.cms-diseno .cd-41 {background:#FFEDE0;color:var(--veo-alt-brand)}
.cms-diseno .cd-42 {list-style:none;margin:0;padding:0}
.cms-diseno .cd-43 {font-weight:600;margin-top:auto}
.cms-diseno .cd-44 {background:var(--veo-secondary)}
.cms-diseno .cd-45 {background:var(--veo-extra);color:var(--veo-primary)}
.cms-diseno .cd-46 {object-position:60% 30%}
.cms-diseno .cd-47 {padding:0;overflow:hidden;display:flex;flex-direction:column}
.cms-diseno .cd-48 {width:100%;aspect-ratio:16/10;object-fit:cover;object-position:60% 20%;display:block}
.cms-diseno .cd-49 {padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.cms-diseno .cd-50 {height:16px;width:auto;filter:invert(1)}
.cms-diseno .cd-51 {color:#41484B;font-size:16px}
.cms-diseno .cd-52 {display:flex;gap:16px;flex-wrap:wrap}
.cms-diseno .cd-53 {font-weight:600}
.cms-diseno .cd-54 {width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;display:block}
.cms-diseno .cd-55 {width:100%;aspect-ratio:16/10;object-fit:cover;object-position:88% 40%;display:block}
.cms-diseno .cd-56 {width:100%;aspect-ratio:16/10;object-fit:cover;object-position:10% 40%;display:block}
.cms-diseno .cd-57 {width:100%;aspect-ratio:16/10;object-fit:cover;object-position:60% 40%;display:block}
.cms-diseno .cd-58 {background:var(--veo-bg-subtle);border-radius:14px}
.cms-diseno .cd-59 {width:100%;height:auto;display:block}
.cms-diseno .cd-60 {display:flex;flex-direction:column;gap:48px}
.cms-diseno .cd-61 {object-position:20% 40%}
.cms-diseno .cd-62 {overflow-x:auto}
@media (width <= 767px) {
    .cms-diseno .btn {padding:0 20px}
    .cms-diseno .card {padding:20px}
    .cms-diseno .gcard {padding:20px}
    .cms-diseno .diag {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .meas>li {gap:16px;padding:20px 20px}
    .cms-diseno .rule {padding:20px 20px}
    .cms-diseno .calc {padding:20px;gap:16px}
    .cms-diseno .out strong {font-size:24px}
    .cms-diseno .next {padding:20px 20px;gap:16px}
    .cms-diseno .help {padding:22px 26px;gap:16px}
    .cms-diseno .facts {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .steps>li {grid-template-columns:minmax(0,1fr);gap:16px;padding-bottom:20px}
    .cms-diseno .sbody {padding:20px 20px}
    .cms-diseno .lists {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .gloss {grid-template-columns:minmax(0,1fr);gap:16px 16px}
    .cms-diseno .opts {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .opts.two {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .rbody {padding:20px}
    .cms-diseno .price {font-size:24px}
    .cms-diseno .place {gap:16px}
    .cms-diseno .h1 {font-size:34px}
    .cms-diseno .h2 {font-size:24px}
    .cms-diseno .sec {padding-block:40px;gap:16px}
    .cms-diseno .g5 {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .g3 {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .g4 {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .g6 {grid-template-columns:minmax(0,1fr)}
    .cms-diseno .layout {gap:24px;padding-block:28px 40px}
    .cms-diseno .content {gap:22px}
    .cms-diseno .faq .cms-faq__pregunta {gap:16px}
    .cms-diseno .faq .ans {padding:0 27px 20px 0}
    .cms-diseno .h1 {font-size:30px;line-height:1.08;font-weight:700}
    .cms-diseno .h2 {font-size:24px;line-height:1.15;font-weight:700}
    .cms-diseno .h3 {font-size:20px;font-weight:700}
    .cms-diseno .h4 {font-size:18px;font-weight:700}
    .cms-diseno .lead {font-size:16px;color:#41484B}
    .cms-diseno .btn {min-height:50px;font-size:16px;padding:0 18px}
    .cms-diseno .sec {padding-block:40px;display:flex;flex-direction:column;gap:20px}
    .cms-diseno .sech {display:flex;flex-direction:column;gap:8px}
    .cms-diseno .g5, .cms-diseno .g6, .cms-diseno .g3 {grid-template-columns:1fr}
    .cms-diseno .g4 {grid-template-columns:repeat(2,minmax(0,1fr))}
    .cms-diseno .gcard {display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px;border-radius:16px}
    .cms-diseno .gcard .gico {width:64px;height:56px;border-radius:12px;grid-row:span 2}
    .cms-diseno .gcard .gico img {max-width:48px;max-height:38px}
    .cms-diseno .gtitle {font-size:17px}
    .cms-diseno .gmeta {font-size:13px}
    .cms-diseno .gmore {display:none}
    .cms-diseno .layout {display:flex;flex-direction:column;gap:28px;padding-block:24px 40px}
    .cms-diseno .content {display:flex;flex-direction:column;gap:28px;min-width:0}
    .cms-diseno .hnav {display:flex;gap:8px;overflow-x:auto;padding-inline:20px;scrollbar-width:none}
    .cms-diseno .hnav::-webkit-scrollbar {display:none}
    .cms-diseno .hchip {flex:none;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:12px;border:1.5px solid var(--veo-border);background:var(--veo-primary);text-decoration:none;color:var(--veo-text);font-weight:600;font-size:14px;min-height:46px}
    .cms-diseno .hchip.on {border-color:var(--veo-brand)}
    .cms-diseno .hchip img {height:22px;width:auto}
    .cms-diseno .diag {grid-template-columns:1fr;gap:12px}
    .cms-diseno .card {padding:20px;border-radius:18px}
    .cms-diseno .meas>li {padding:16px;gap:14px}
    .cms-diseno .num {width:34px;height:34px;font-size:15px}
    .cms-diseno .mbody h3 {font-size:19px}
    .cms-diseno .rule {font-size:16px;padding:16px;gap:12px}
    .cms-diseno .rule .ico {width:24px;height:24px}
    .cms-diseno .calc {padding:20px;gap:14px}
    .cms-diseno .inp input {font-size:20px;padding:12px}
    .cms-diseno .out strong {font-size:22px}
    .cms-diseno .next {padding:24px;border-radius:20px;gap:16px}
    .cms-diseno .next .btn {width:100%}
    .cms-diseno .help {padding:24px;border-radius:20px;gap:18px}
    .cms-diseno .help .btn {flex:1 1 100%}
    .cms-diseno .hicon {width:52px;height:52px}
    .cms-diseno .photo {border-radius:18px}
    .cms-diseno .facts {grid-template-columns:1fr;gap:8px}
    .cms-diseno .fact {padding:12px 14px}
    .cms-diseno .steps>li {grid-template-columns:40px minmax(0,1fr);gap:12px;padding-bottom:16px}
    .cms-diseno .steps>li::before {left:19px;top:40px}
    .cms-diseno .sn {width:40px;height:40px;font-size:17px}
    .cms-diseno .sbody {padding:16px 18px;border-radius:16px}
    .cms-diseno .sbody h3 {font-size:19px}
    .cms-diseno .lists {grid-template-columns:1fr;gap:12px}
    .cms-diseno .flow li {padding:16px;flex-direction:row;align-items:flex-start;gap:14px}
    .cms-diseno .gloss {grid-template-columns:1fr;gap:16px}
    .cms-diseno .gloss dt {font-size:19px}
    .cms-diseno .tbl {font-size:14px}
    .cms-diseno .tbl th, .cms-diseno .tbl td {padding:12px 8px}
    .cms-diseno .tag {min-width:44px;font-size:13px;padding:3px 8px}
    .cms-diseno .opts {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .cms-diseno .opts.two {grid-template-columns:1fr 1fr}
    .cms-diseno .opt {font-size:15px;padding:14px 8px 12px}
    .cms-diseno .oi {height:44px}
    .cms-diseno .rimg {min-height:200px;flex-basis:100%}
    .cms-diseno .rbody {padding:20px;flex-basis:100%}
    .cms-diseno .price {font-size:28px}
    .cms-diseno .place {gap:16px}
    .cms-diseno .place img {flex-basis:100%;border-radius:18px}
    .cms-diseno .place>div {flex-basis:100%}
    .cms-diseno .faq .cms-faq__pregunta {padding:16px 0}
    .cms-diseno .faq .cms-faq__pregunta > h3 {font-size:16px}
    .cms-diseno .faq .cms-faq__pregunta::after {width:30px;height:30px}
    .cms-diseno .faq .ans {padding:0 0 18px;font-size:15px}
    .cms-diseno .cd-1 {padding-block:20px 32px;gap:16px}
    .cms-diseno .cd-2 {gap:24px}
    .cms-diseno .cd-3 {gap:16px}
    .cms-diseno .cd-4 {padding:20px;gap:12px}
    .cms-diseno .cd-8 {gap:16px}
    .cms-diseno .cd-11 {padding-block:40px;gap:28px}
    .cms-diseno .cd-12 {gap:14px}
    .cms-diseno .cd-14 {padding-top:8px}
    .cms-diseno .cd-16 {padding-block:36px}
    .cms-diseno .cd-17 {gap:16px}
    .cms-diseno .cd-19 {gap:6px}
    .cms-diseno .cd-21 {gap:12px}
    .cms-diseno .cd-25 {padding:20px;gap:6px}
    .cms-diseno .cd-28 {gap:16px}
    .cms-diseno .cd-29 {gap:2px}
    .cms-diseno .cd-32 {font-size:24px}
    .cms-diseno .cd-34 {gap:12px}
    .cms-diseno .cd-35 {gap:6px}
    .cms-diseno .cd-40 {gap:4px}
    .cms-diseno .cd-42 {padding:0}
    .cms-diseno .cd-43 {margin-top:auto}
    .cms-diseno .cd-47 {padding:0}
    .cms-diseno .cd-49 {padding:20px;gap:10px}
    .cms-diseno .cd-52 {gap:16px}
    .cms-diseno .cd-60 {gap:24px}
}
/* cms generado: fin */

/*footer*/
.footer__before {
    padding: 0;
}

#pie-ventajas {
    background: var(--veo-extra);
}

#pie-ventajas .pie-ventajas__lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    margin: 0 auto;
    padding-block: 1.75rem;
    list-style: none;
}

#pie-ventajas .pie-ventajas__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

#pie-ventajas .pie-ventajas__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(var(--veo-brand-rgb), 0.16);
}

#pie-ventajas .pie-ventajas__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

#pie-ventajas .pie-ventajas__titulo {
    color: var(--veo-footer-heading-color);
    font-size: 1rem;
    text-decoration: none;
}

#pie-ventajas .pie-ventajas__descripcion {
    color: color-mix(in srgb, var(--veo-footer-color) 72%, var(--veo-extra));
    font-size: 0.875rem;
}

.footer__main {
    padding-block: 3.5rem 1.75rem;
    font-size: 0.9375rem;
}

.footer__main a {
    color: var(--veo-footer-color);
    text-decoration: none;
}

.footer__main a:hover {
    color: var(--veo-footer-hover);
    text-decoration: underline;
}

.footer__main .footer-block__title {
    margin-bottom: 0.75rem;
    color: var(--veo-footer-heading-color);
    font-family: var(--veo-font-family);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer__main .footer-block__title a {
    color: inherit;
}

.footer__main .footer-block__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#pie-marca {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#pie-marca .pie-marca__logo img {
    display: block;
    width: auto;
    height: 44px;
}

#pie-marca .pie-marca__texto {
    max-width: 30ch;
    margin: 0;
    color: color-mix(in srgb, var(--veo-footer-color) 78%, var(--veo-footer-bg));
}

#pie-marca .block-social__enlace {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
}

#pie-marca .block-social__enlace svg {
    font-size: 1.25rem;
}

.ps-contactinfo__infos {
    margin-bottom: 0.75rem;
    font-style: normal;
}

.ps-contactinfo__email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ps-contactinfo__pago-titulo {
    margin: 1.25rem 0 0.75rem;
    color: var(--veo-footer-heading-color);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ps-contactinfo__pago {
    display: flex;
    gap: 0.625rem;
}

.ps-contactinfo__pago span {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    background: var(--veo-primary);
}

.ps-contactinfo__pago .pago-visa {
    color: #1a1f71;
    font-size: 0.9375rem;
    font-style: italic;
    font-weight: 800;
}

.footer__main .copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid color-mix(in srgb, var(--veo-footer-color) 18%, var(--veo-footer-bg));
    color: color-mix(in srgb, var(--veo-footer-color) 78%, var(--veo-footer-bg));
    font-size: 0.875rem;
}

@media (width >= 992px) {
    .footer__main-top {
        display: grid;
        grid-template-columns: 1.4fr repeat(4, 1fr);
        gap: 2.5rem;
        margin: 0;
    }

    .footer__main-top > * {
        width: auto;
        max-width: none;
        padding: 0;
    }
}

@media (width <= 767px) {
    #pie-ventajas .pie-ventajas__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.125rem 0.75rem;
        padding-block: 1.375rem;
    }

    #pie-ventajas .pie-ventajas__icono {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    #pie-ventajas .pie-ventajas__titulo {
        font-size: 0.875rem;
    }

    #pie-ventajas .pie-ventajas__descripcion {
        font-size: 0.75rem;
    }

    .footer__main .copyright {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/*responsive*/
@media (width <= 575px) {
    .container,
    .container-md,
    .portada-seccion,
    .portada-franja {
        padding-inline: 1.25rem;
    }
}

/* cms 22: salidas por tipo de brazo */
.cms-diseno .salida {display:flex;flex-direction:column;gap:16px}
.cms-diseno .salida__cab {display:flex;align-items:center;gap:16px}
.cms-diseno .salida__icono {display:flex;flex:none;align-items:center;justify-content:center;width:72px;height:72px;border-radius:18px;background:var(--veo-secondary)}
.cms-diseno .salida__icono img {width:auto;max-width:52px;height:40px}
.cms-diseno .salida__cab .h3 {margin:2px 0 0}
.cms-diseno .salida__etiqueta {margin:8px 0 0;padding-top:16px;border-top:1px solid #ECE5D8;font-size:14px;color:var(--veo-text)}
.cms-diseno .salida__medidas {display:flex;flex-wrap:wrap;gap:8px}
.cms-diseno .salida__medidas span {display:inline-flex;align-items:baseline;gap:3px;padding:10px 14px;border:1.5px solid var(--veo-border);border-radius:12px;font-family:var(--veo-font-title-family);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--veo-header)}
.cms-diseno .salida__medidas small {font-size:13px;font-weight:500;color:var(--veo-text)}
.cms-diseno .salida__enlace {margin-top:auto}
@media (max-width: 767px) {
    .cms-diseno .salida__icono {width:60px;height:60px;border-radius:16px}
    .cms-diseno .salida__medidas span {padding:8px 12px;font-size:18px}
}