@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-*)
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