.wu-inicio {
    --inicio-accent: var(--color-primario, var(--bs-primary));
    --inicio-title: var(--color-titulo, var(--bs-heading-color));
    --inicio-text: var(--color-texto, var(--bs-body-color));
    --inicio-surface: var(--color-blanco, #fff);
    --inicio-radius: clamp(.85rem, 1.8vw, 1.35rem);
    position: relative;
    isolation: isolate;
    width: 100%;
    padding-block: clamp(3rem, 7vw, 6rem);
    color: var(--inicio-text);
    background-position: center;
    background-size: cover;
}

.wu-inicio header { margin-bottom: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.wu-inicio header h2,
.wu-inicio header h3 {
    margin: 0;
    color: var(--inicio-title);
    font-family: var(--tipografia-titulo, inherit);
    font-size: clamp(1.9rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
}

.wu-inicio a { text-decoration: none; }
.wu-inicio a:focus-visible,
.wu-inicio button:focus-visible { outline: 3px solid color-mix(in srgb, var(--inicio-accent) 32%, transparent); outline-offset: 3px; }

.wu-inicio__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.wu-inicio__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wu-inicio__grid > header,
.wu-inicio__grid > .AltoCeldaMenuCuatroImagenes:first-of-type,
.wu-inicio__grid > .AltoCeldaMenuEfectoSombra:first-of-type { grid-column: 1 / -1; }

/* Anula unicamente la maquetacion global antigua de estos controles. */
.wu-inicio #CuatroColumnas,
.wu-inicio #ContenidoMiniaturaMenu,
.wu-inicio #ContenidoMiniaturaFamilia,
.wu-inicio .ArticuloMenuMiniInicio,
.wu-inicio #ArticleListadoComentariosInicio,
.wu-inicio #ArticleContadorInicial {
    width: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: visible;
    column-count: initial;
}

.wu-inicio .MenuMiniInicio,
.wu-inicio .NombreProducto,
.wu-inicio .NombreMenuListado2MenuEcoIcons,
.wu-inicio .AltoCeldaMenuCuatroImagenes,
.wu-inicio .AltoCeldaMenuCuatroImagenesVisual,
.wu-inicio .AltoCeldaMenuEfectoSombra {
    float: none;
    width: auto;
    height: 100%;
    min-height: 0;
    margin: 0;
}

/* Tarjetas normales. */
.wu-inicio--menu-normal #CuatroColumnas,
.wu-inicio--menu-normal-2 #ContenidoMiniaturaFamilia {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.wu-inicio--menu-normal #CuatroColumnas > [class*="col-"],
.wu-inicio--menu-normal-2 .NombreProducto { width: auto; padding: 0; }

.wu-inicio--menu-normal .MenuMiniInicio,
.wu-inicio--menu-normal-2 .NombreProducto {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--inicio-text) 12%, transparent);
    border-radius: var(--inicio-radius);
    background: color-mix(in srgb, var(--inicio-surface) 96%, transparent);
    box-shadow: 0 .8rem 2.2rem rgba(21,24,28,.09);
    transition: transform .25s ease, box-shadow .25s ease;
}

.wu-inicio--menu-normal .MenuMiniInicio:hover,
.wu-inicio--menu-normal-2 .NombreProducto:hover { transform: translateY(-5px); box-shadow: 0 1.2rem 3rem rgba(21,24,28,.15); }
.wu-inicio--menu-normal .ImagenMenuMiniInicio,
.wu-inicio--menu-normal-2 .ImagenFamiliaMiniaturaCapa { width: 100%; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.wu-inicio--menu-normal .ImagenMenuMiniatura,
.wu-inicio--menu-normal-2 .ImagenFamiliaMiniatura { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.wu-inicio--menu-normal .TituloMenuMiniInicio,
.wu-inicio--menu-normal-2 .DescripcionFamiliaMiniatura { width: auto; height: auto; min-height: 0; margin: 0; padding: 1.25rem; }
.wu-inicio--menu-normal .TextoMenuMiniInicio,
.wu-inicio--menu-normal-2 .TextoFamiliaInicio { width: auto; min-height: 0; margin-top: .75rem; text-align: left !important; line-height: 1.6; }
.wu-inicio--menu-normal .MenuMinis,
.wu-inicio--menu-normal-2 .TituloFamilias { color: var(--inicio-title); font-size: 1.35rem; font-weight: 700; }

/* Circulos e iconos. */
.wu-inicio--circulos .wu-inicio__item,
.wu-inicio--circulos-borde .wu-inicio__item,
.wu-inicio--ecoicons .NombreMenuListado2MenuEcoIcons {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--inicio-text) 12%, transparent);
    border-radius: var(--inicio-radius);
    background: color-mix(in srgb, var(--inicio-surface) 96%, transparent);
    box-shadow: 0 .8rem 2.2rem rgba(21,24,28,.08);
    text-align: center;
}

.wu-inicio--circulos .CapaCircular,
.wu-inicio--circulos-borde .CapaCircularBorde,
.wu-inicio--ecoicons .hi-icon {
    display: grid;
    place-items: center;
    width: clamp(120px, 16vw, 180px);
    aspect-ratio: 1;
    margin-inline: auto;
    border: 1px solid color-mix(in srgb, var(--inicio-accent) 35%, transparent);
    border-radius: 50%;
    color: var(--inicio-accent);
    background-position: center;
    background-size: cover;
    box-shadow: 0 .8rem 2rem rgba(21,24,28,.12);
}

.wu-inicio--ecoicons .hi-icon { background: color-mix(in srgb, var(--inicio-accent) 8%, var(--inicio-surface)); font-size: clamp(2.5rem, 6vw, 4rem); }
.wu-inicio--circulos figure { min-width: 0; margin: 0; }
.wu-inicio--circulos figcaption h2,
.wu-inicio--circulos-borde .TituloMenuCirculosBordeTexto,
.wu-inicio--ecoicons .TituloMenuEcoIcons { color: var(--inicio-title); font-size: 1.35rem; }

/* Tarjetas fotograficas. */
.wu-inicio--cuatro-imagenes .MenuCuatroImagenes,
.wu-inicio--cuatro-imagenes-visual .MenuCuatroImagenesVisual,
.wu-inicio--efecto-sombra .MenuEfectoSombra,
.wu-inicio--imagen-extendida .MenuImagenExtendida,
.wu-inicio--selena .effect-selena {
    position: relative;
    height: 100%;
    min-height: clamp(320px, 38vw, 480px);
    overflow: hidden;
    border-radius: var(--inicio-radius);
    background: var(--color-carbon, #191919);
    box-shadow: 0 .8rem 2.2rem rgba(21,24,28,.14);
}

.wu-inicio--cuatro-imagenes .ImagenMenuCuatroImagenes,
.wu-inicio--cuatro-imagenes-visual .ImagenMenuCuatroImagenesVisual,
.wu-inicio--efecto-sombra .ImagenMenuEfectoSombra,
.wu-inicio--imagen-extendida .ImagenMenuImagenExtendida { height: 100%; }
.wu-inicio--cuatro-imagenes .CapaFondoImagenCuatroImagenes,
.wu-inicio--cuatro-imagenes-visual .CapaFondoImagenCuatroImagenesVisual { position: absolute; inset: 0; background-position: center; background-size: cover; transition: transform .5s ease; }
.wu-inicio--imagen-extendida .ImagenMenuMiniaturaImagenExtendida,
.wu-inicio--selena .ImagenMenuMiniatura { width: 100%; height: 100%; object-fit: cover; }
.wu-inicio--cuatro-imagenes .InfoCuatroImagenes,
.wu-inicio--cuatro-imagenes-visual .InfoCuatroImagenesVisual,
.wu-inicio--efecto-sombra .InfoEfectoSombra { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.5rem; color: #fff; background: linear-gradient(transparent, rgba(8,10,12,.88)); }
.wu-inicio--selena figcaption { position: absolute; z-index: 2; inset: auto 0 0; padding: 1.5rem; color: #fff; background: linear-gradient(transparent, rgba(8,10,12,.88)); }
.wu-inicio--flip .CapaCirculo { min-width: 0; padding: 1.5rem; border-radius: var(--inicio-radius); background: var(--inicio-surface); box-shadow: 0 .8rem 2.2rem rgba(21,24,28,.1); }

/* Diseños divididos. */
.wu-inicio--trex #ContenidoMiniaturaMenu2Trex,
.wu-inicio--tuka #ArticleMenuTuka > .col-md-6:last-of-type { display: grid; gap: 1rem; }
.wu-inicio--trex .NombreMenuListado2Trex,
.wu-inicio--tuka [id^="MenuTukaItem"] { overflow: hidden; border-radius: var(--inicio-radius); background: var(--inicio-surface); box-shadow: 0 .8rem 2.2rem rgba(21,24,28,.1); }
.wu-inicio--trex .ImgMenuTrex,
.wu-inicio--tuka .ImagenMenuTuka { width: 100%; height: auto; object-fit: cover; }

/* Comentarios. */
.wu-inicio--comentarios #ContenidoListadoComentarios { position: static; width: auto; max-width: none; min-height: 0; }
.wu-inicio--comentarios .wu-comentario {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--inicio-text) 12%, transparent);
    border-radius: var(--inicio-radius);
    background: color-mix(in srgb, var(--inicio-surface) 96%, transparent);
    box-shadow: 0 .8rem 2.2rem rgba(21,24,28,.08);
}
.wu-inicio--comentarios .DetalleComentario { position: relative; inset: auto; display: flex; width: auto; height: 100%; margin: 0; text-align: left; }
.wu-comentario__icono { color: var(--inicio-accent); font-size: 2rem; line-height: 1; }
.wu-comentario__texto { flex: 1 1 auto; margin-block: 1rem 1.25rem; font-family: var(--tipografia-texto, inherit); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; }
.wu-comentario__autor { display: flex; align-items: center; gap: .5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--inicio-text) 12%, transparent); color: var(--inicio-title); font-weight: 700; }
.wu-inicio--comentarios-slider .carousel { max-width: 850px; margin-inline: auto; }
.wu-inicio--comentarios-slider .carousel-item { padding: .25rem clamp(0rem, 6vw, 4.5rem); }
.wu-inicio--comentarios-slider .carousel-control-prev,
.wu-inicio--comentarios-slider .carousel-control-next { width: 3rem; height: 3rem; top: 50%; border: 0; border-radius: 50%; background: var(--inicio-accent); opacity: 1; transform: translateY(-50%); }

/* Contadores. */
.wu-inicio--contador { color: var(--color-blanco, #fff); background-color: var(--color-fondo-principal, #191919); }
.wu-inicio--contador header h2 { color: currentColor; }
.wu-inicio--contador .ElementoContadorInicial,
.wu-inicio--contador .ElementoContadorInicialTuka { float: none; width: auto; min-width: 0; margin: 0; }
.wu-contador__item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 170px; padding: 1.5rem 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--inicio-radius); background: rgba(255,255,255,.055); text-align: center; }
.wu-contador__valor { color: var(--inicio-accent); font-family: var(--tipografia-titulo, inherit); font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 750; line-height: 1; }
.wu-contador__etiqueta { margin-top: .75rem; font-family: var(--tipografia-texto, inherit); font-weight: 600; }
.wu-contador__panel-imagen { min-height: 420px; border-radius: var(--inicio-radius); background-position: center; background-size: cover; }

@media (max-width: 991.98px) {
    .wu-inicio__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wu-inicio--menu-normal #CuatroColumnas,
    .wu-inicio--menu-normal-2 #ContenidoMiniaturaFamilia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .wu-inicio__grid,
    .wu-inicio__grid--four,
    .wu-inicio--menu-normal #CuatroColumnas,
    .wu-inicio--menu-normal-2 #ContenidoMiniaturaFamilia { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .wu-inicio--comentarios-slider .carousel { padding-bottom: 3rem; }
    .wu-inicio--comentarios-slider .carousel-control-prev,
    .wu-inicio--comentarios-slider .carousel-control-next { top: auto; bottom: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wu-inicio *, .wu-inicio *::before, .wu-inicio *::after { transition-duration: .01ms !important; }
}
