@charset "UTF-8";
/* =====================================================================================
idealoweb.css — ajustes de Idealoweb sobre la plantilla comprada
-------------------------------------------------------------------------------------
· Se carga el ÚLTIMO de todos los CSS (después de style.css, responsive.css y
priceslider.css) como . Si se toca,
se sube el ?v=NN en todos los HTML (ver CONTRATO-WEB.md §11).
· No se modifica ningún CSS de la plantilla: todo lo nuestro va aquí y gana por
orden de carga (misma especificidad, declarado después) o por especificidad.
· Los fondos de imagen que la copia de la plantilla no trajo se sustituyen por
degradados de marca (bloque 1). Cómo volver a las imágenes: assets/css/LEEME-css.md.
Índice
0. Variables de marca
1. Fondos que faltan (imágenes ausentes → degradados / CSS puro / SVG en línea)
2. Ganchos del contrato con el panel (topbar, ticker, selector Mensual/Anual,
pastillas de TLD, precio tachado, menú con grupos e insignias)
3. Tarjetas de dedicados (plan-box horizontal con data-plan-*)
3b. Hero de la portada (selector de productos, diapositivas apiladas)
3c. Varias ramas (bloque de la portada copiado de la web de Idealored)
4. Ajustes para textos en español (botones, menú, migas del sub-banner)
5. Restos de la demo que se ocultan (carrito, buscador, «Home 1/2/3»)
6. Movimiento reducido (prefers-reduced-motion)
===================================================================================== */
/* =====================================================================================
0. VARIABLES DE MARCA
Los colores de la plantilla (#2475ff, #457bff, #9548f8, #2e2f46, #f1f4f9) se reutilizan;
añadimos los tonos «noche» para los fondos oscuros que sustituyen a las fotos.
===================================================================================== */
:root {
--iw-azul: #2475ff; /* acento principal (= --e-global-color-accent) */
--iw-azul-claro: #457bff; /* = --e-global-color-light-blue */
--iw-violeta: #9548f8; /* = --e-global-color-bright-violet */
--iw-oscuro: #2e2f46; /* texto/titulares (= --e-global-color-secondary) */
--iw-gris: #f1f4f9; /* fondos claros (= --e-global-color-light-grayish-blue) */
--iw-noche: #0b1b3a; /* azul noche: base de los fondos oscuros */
--iw-noche-media: #0f2a5c; /* paso intermedio del degradado */
--iw-noche-clara: #16387a; /* paso claro del degradado */
--iw-texto-suave: #8a90a8; /* textos secundarios (tachados, subtítulos de menú) */
/* Patrón de puntos muy sutil que se superpone a los degradados oscuros */
--iw-patron-puntos: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.075) 1px, transparent 1.6px);
/* Degradado base de los sub-banners: azul noche → azul de marca */
--iw-degradado-banner: linear-gradient(112deg, var(--iw-noche) 0%, var(--iw-noche-media) 48%, var(--iw-azul) 100%);
/* Degradado base de las secciones oscuras interiores (FAQ, garantía, soporte…) */
--iw-degradado-seccion: linear-gradient(160deg, var(--iw-noche) 0%, #122a5a 55%, var(--iw-noche-clara) 100%);
/* Cada sub-banner puede cambiar el color y la posición de su «foco» de luz */
--iw-banner-acento: rgba(36, 117, 255, 0.55);
--iw-banner-pos: 82% 25%;
}
/* =====================================================================================
1. FONDOS: las imágenes de fondo de la plantilla están en assets/images/ (recuperadas el
19-09-2026). Los degradados que las sustituían viven en idealoweb-sin-fondos.css, sin enlazar.
Sólo se conserva el sustituto de close.png (no existe ni en la demo).
1.1 Fondos en WebP (rendimiento, 19-09-2026). Las fotos de fondo de la plantilla pesan
300-380 KB cada una en JPG; `node laweb/4-herramientas/optimizar-imagenes.js` genera al lado
de cada JPG/PNG de más de 150 KB un .webp con calidad 80 (60-90 % más ligero) sin borrar el
original. Aquí se repite la misma regla que style.css pero con image-set(): el navegador que
entiende image-set() con type() (Chrome 113+, Safari 17+, Firefox 89+) coge el .webp; el que
no, descarta esta declaración entera y se queda con el JPG/PNG de style.css. Mismos selectores
y misma especificidad que style.css, declarados después: ganan por orden de carga.
OJO: hay que ejecutar el optimizador antes de empaquetar la web (para-subir/web.zip); si un
.webp de esta lista no está en el servidor, ese fondo saldría vacío en navegadores modernos.
subbanner-domainbgimage.jpg (103 KB) no llega al umbral y sigue en JPG a propósito.
===================================================================================== */
/* Sub-banners de las páginas interiores (style.css .sub-banner y sus variantes por página) */
.sub-banner {
background-image: image-set(url("../images/subbanner-contactbgimage.webp") type("image/webp"),
url("../images/subbanner-contactbgimage.jpg") type("image/jpeg"));
}
.reseller-sub-banner {
background-image: image-set(url("../images/subbanner-resellerbgimage.webp") type("image/webp"),
url("../images/subbanner-resellerbgimage.jpg") type("image/jpeg"));
}
.shared-sub-banner {
background-image: image-set(url("../images/subbanner-sharedbgimage.webp") type("image/webp"),
url("../images/subbanner-sharedbgimage.jpg") type("image/jpeg"));
}
.dedicated-sub-banner {
background-image: image-set(url("../images/subbanner-dedicatedbgimage.webp") type("image/webp"),
url("../images/subbanner-dedicatedbgimage.jpg") type("image/jpeg"));
}
.vps-sub-banner {
background-image: image-set(url("../images/subbanner-vpsbgimage.webp") type("image/webp"),
url("../images/subbanner-vpsbgimage.jpg") type("image/jpeg"));
}
.about-sub-banner {
background-image: image-set(url("../images/subbanner-aboutbgimage.webp") type("image/webp"),
url("../images/subbanner-aboutbgimage.jpg") type("image/jpeg"));
}
.contact-sub-banner {
background-image: image-set(url("../images/subbanner-contactbgimage.webp") type("image/webp"),
url("../images/subbanner-contactbgimage.jpg") type("image/jpeg"));
}
/* Secciones oscuras interiores que comparten la misma foto (FAQ, garantía, características VPS, servidores) */
.vpsfeature-con,
.faq-con,
.guarantee-con,
.server3-con {
background-image: image-set(url("../images/domainfaq-backgroundimage.webp") type("image/webp"),
url("../images/domainfaq-backgroundimage.jpg") type("image/jpeg"));
}
/* Formulario de contacto (la foto va en el ::before, al 60 % de opacidad) */
.contactform-con::before {
background-image: image-set(url("../images/contactform-backgroundimage.webp") type("image/webp"),
url("../images/contactform-backgroundimage.jpg") type("image/jpeg"));
}
/* Banners de las portadas alternativas de la plantilla (no se usan hoy, pero pueden llegar
desde la biblioteca de bloques del panel); banner2 es el PNG de 550 KB → 119 KB en WebP */
.banner2-con {
background-image: image-set(url("../images/banner2-backgroundimage.webp") type("image/webp"),
url("../images/banner2-backgroundimage.png") type("image/png"));
}
.banner3-con {
background-image: image-set(url("../images/banner3-backgroundimage.webp") type("image/webp"),
url("../images/banner3-backgroundimage.jpg") type("image/jpeg"));
}
/* =====================================================================================
2. GANCHOS DEL CONTRATO CON EL PANEL
Estilos de los elementos que pinta site-loader.js y que la plantilla no trae.
===================================================================================== */
/* --- 2.1 Barra fina superior [data-topbar] --------------------------------------------
— va antes del .
Bootstrap ya tiene [hidden]{display:none!important}, así que mientras el loader no la
rellene y le quite «hidden» no ocupa nada. Los enlaces vacíos también se ocultan.
El relleno lateral sigue los anchos del .container de Bootstrap 4 para alinear con el logo. */
[data-topbar] {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 4px 26px;
padding: 7px 15px;
position: relative;
z-index: 6;
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 18px;
color: #d7e1f5;
background-color: var(--iw-noche);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-topbar][hidden] { display: none !important; }
@media (min-width: 576px) { [data-topbar] { padding-left: calc(50% - 255px); padding-right: calc(50% - 255px); } }
@media (min-width: 768px) { [data-topbar] { padding-left: calc(50% - 345px); padding-right: calc(50% - 345px); } }
@media (min-width: 992px) { [data-topbar] { padding-left: calc(50% - 465px); padding-right: calc(50% - 465px); } }
@media (min-width: 1200px) { [data-topbar] { padding-left: calc(50% - 555px); padding-right: calc(50% - 555px); } }
/* Si el HTML envuelve los enlaces en un .container, el flex lo hace el container */
[data-topbar]:has(> .container) { display: block; padding-left: 0; padding-right: 0; }
[data-topbar] > .container {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 4px 26px;
}
[data-topbar] a[data-topbar] {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--e-global-color-white, #fff);
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
[data-topbar] a[data-topbar]:hover { color: #9cc0ff; text-decoration: none; }
[data-topbar] a[data-topbar]:empty { display: none; }
/* Iconos con Font Awesome 6 (local, assets/webfonts) */
[data-topbar] a[data-topbar]::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 12px;
line-height: 1;
color: var(--iw-azul-claro);
}
[data-topbar] a[data-topbar="phone"]::before { content: "\f095"; }
[data-topbar] a[data-topbar="email"]::before { content: "\f0e0"; }
[data-topbar] a[data-topbar="kb"]::before { content: "\f059"; }
@media (max-width: 575px) {
[data-topbar] { justify-content: center; gap: 4px 18px; font-size: 13px; }
}
/* --- 2.2 Ticker de anuncios .site-announcement-bar ------------------------------------
El loader inserta antes del :
Debajo del formulario de dominios (portada, oscura, y dominios.html, clara).
Los selectores llevan «ul[data-tld-list]» para ganar a las reglas de la plantilla para
«.domain_content ul li» (que dan altura fija y fondo a las cajas de precios). */
ul[data-tld-list] {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
clear: both; /* la caja del buscador va en float:left en la plantilla */
margin: 0 0 28px;
padding: 0;
list-style: none;
}
ul[data-tld-list]:empty { display: none; }
/* dentro del