/* ===================================================================== BIVID — TEMA CLARO / IDENTIDAD DE MARCA 2026 Se carga DESPUÉS de style.css y solo en páginas con tema='claro' (cms_pages.tema, migración 112). Todo cuelga de body.tema-claro para no tocar ninguna página que no lo haya pedido. BASE: "Manual de marca bivid — Revisión de marca 2025" (AcidEstudi), en private/marca/. Lo que dice el manual y aquí se aplica: · 4.1 Colores. La marca principal son DOS colores: Hard pink #F0295B y Orange #FF6F00, y "la manera de utilizarlos será mediante la unión de ambos mediante un degradado siempre que sea posible". Secundario: Cool grey #525251. El morado (#7938AD Night purple + #B53486 Purple) NO es la marca: es la submarca "bivid telecom". El azul, "bivid store". La web es la marca principal -> rosa + naranja. (El morado que llevaba la web era la submarca usada como si fuera la marca.) · 3.1/3.2 Tipografía. Montserrat ExtraBold para titulares, destacados y CTA; Regular para cuerpo. Ya está autoalojada en /assets/fonts/. · 5.1 Sistema gráfico. Trazos manuales y ligados ("espirales") nacidos del logotipo; grosor homogéneo; en degradado o en negativo. Extraídos en vectorial del PDF a /assets/marca/tramas/. · 5.2 Iconos. Trazo grueso y degradado, para Fibra, Móvil, Tvify, Prime Wifi, Teléfono fijo y Servicio técnico. En /assets/marca/iconos/. · 6.3 Portada Hero web. Foto de estilo natural (amistad, ternura, cercanía) + bocadillo orgánico en degradado con el eslogan en ExtraBold y el claim en Regular. Cabecera blanca, logo en color, menú en Montserrat Regular y botón de contacto en píldora degradada. ===================================================================== */ /* ---------- Tokens de marca --------------------------------------------- */ body.tema-claro { /* 4.1 Colores corporativos, literales del manual */ --bv-pink: #F0295B; --bv-orange: #FF6F00; --bv-grey: #525251; /* Cool grey */ --bv-purple-night: #7938AD; /* submarca telecom */ --bv-purple: #B53486; --bv-blue-night: #0080DC; /* submarca store */ --bv-blue: #00AEDC; --bv-grad: linear-gradient(115deg, var(--bv-pink) 0%, var(--bv-orange) 100%); /* El mismo degradado con transparencia, para el lazo: deja ver la foto de debajo sin que el texto blanco pierda contraste. El limite lo pone el color, no el gusto: midiendo el texto blanco sobre el lazo con una foto BLANCA debajo (el peor caso posible), el rosa #F0295B se queda en 4,06:1 y el naranja #FF6F00 en 2,79:1 aun estando al 100 % de opacidad. O sea que esta paleta nunca llego a AA aqui, y es justo por eso que la paleta por defecto es la telecom (ver includes/paleta.php). Se le baja la opacidad en la misma medida, pero sin pasar de .88: mas transparencia solo empeora algo que ya falla. */ --bv-grad-lazo: linear-gradient(115deg, rgba(240,41,91,.90) 0%, rgba(240,41,91,.89) 42%, rgba(255,111,0,.88) 100%); /* Grano de papel, apenas perceptible: quita el plano de "relleno plano" y le da algo de materia al degradado. Va en soft-light al 55 %. */ /* Velo de marca sobre fotografia: deja ver la foto debajo pero mantiene el texto blanco por encima de 4,5:1. */ --bv-grad-velo: linear-gradient(115deg, rgba(240,41,91,.88) 0%, rgba(255,111,0,.80) 100%); --bv-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"); /* Superficies y tinta */ --bg: #ffffff; --bg-soft: #FAF6F4; /* off-white cálido: separa sin cortar */ --wash: #FFF1EC; /* lavado de marca para destacados */ --wash-2: #FFE9E1; /* el mismo, un punto mas fuerte (hover, seleccion) */ --line-marca: #FFC2AD; /* filete de marca sobre --wash (regalos, kickers) */ --line-marca-2: #FFD9CC; /* el mismo, mas suave */ --wash-3: var(--wash-3); /* lavado fuerte (chips, avisos) */ --ink: #262626; --ink-2: var(--bv-grey); --ink-3: #6E6E6D; /* AA sobre blanco: #8C8C8B se quedaba en 3,4:1 */ --line: #EDE7E4; --line-2: #E3DBD7; --card: #ffffff; --shadow-1: 0 1px 2px rgba(82,82,81,.06), 0 8px 24px rgba(82,82,81,.07); --bv-shadow-rgb: 240, 41, 91; /* tinte de las sombras de marca */ --shadow-2: 0 2px 6px rgba(82,82,81,.08), 0 20px 48px rgba(var(--bv-shadow-rgb),.14); --radius: 20px; --radius-sm: 12px; /* Se reescriben los tokens del sistema antiguo: así todo lo que ya usa var(--color-primary) pasa a la marca sin tocar componente por componente. */ --color-primary: var(--bv-pink); --color-primary-light: #FF5C7F; --color-primary-dark: #D31347; --color-primary-rgb: 240, 41, 91; --color-secondary: var(--bv-orange); --color-secondary-light: #FF8C33; --color-secondary-dark: #E05F00; --color-secondary-rgb: 255, 111, 0; --color-accent: var(--bv-pink); --color-accent-light: #FF5C7F; --color-accent-rgb: 240, 41, 91; --gradient-primary: var(--bv-grad); --gradient-tienda: var(--bv-grad); /* lo consumen stores-map y testimonials */ --gradient-accent: var(--bv-grad); --gradient-cyber: var(--bv-grad); --primary: var(--bv-pink); --primary-dark: #D31347; --primary-light: var(--color-primary-light); --secondary: var(--bv-orange); --background: var(--bv-pink); --text: var(--ink); --text-light: var(--ink-3); --brand: var(--bv-pink); --brand-2: #D31347; --pink-texto: #C00F3F; /* el rosa de marca sobre --wash se queda en 3,7:1; para texto, este */ --naranja-texto: #B35400; /* idem con el naranja sobre blanco (2,8:1) */ --brand-soft: var(--wash); --accent: var(--bv-pink); --ok: #0A7A54; /* sobre --wash el anterior daba 3,1:1 */ background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } body.tema-claro main { background: var(--bg); } /* :where() deja estas reglas con especificidad de clase simple: tiñen lo que no tiene color propio (la mayor parte de la página) pero NO pisan a los componentes que sí lo declaran — pie oscuro, botones de tienda, etc. */ body.tema-claro :where(h1, h2, h3, h4) { color: var(--ink); } body.tema-claro :where(p) { color: var(--ink-2); } body.tema-claro :where(a) { color: var(--bv-pink); } /* Utilidades de marca reutilizables en cualquier sección */ body.tema-claro .bv-degradado { background: var(--bv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Enlaces-boton: la regla general de enlaces de arriba es `body.tema-claro :where(a)` -> especificidad 0-1-1, y eso pisa a un `.boton{color:#fff}` de una hoja de pagina (0-1-0). Aqui se les devuelve el suyo. Si aparece un boton nuevo con el texto rosa sobre rosa, es esto. */ body.tema-claro :is(.bv-pill, .ir-btn, .cp-btn, .btn-primary, .btn-whatsapp, .store-btn-primary, .store-btn-call, .action-primary, .action-call, .action-whatsapp, .club-product-btn, .club-btn-glow, .club-slider-btn, .club-cta-btn), body.tema-claro :is(.bv-pill, .ir-btn, .cp-btn, .btn-primary, .btn-whatsapp, .club-product-btn, .club-btn-glow):hover { color: #fff; } /* el boton de la tarjeta de premio solo lleva una flecha: si hereda el rosa del tema se queda rosa sobre rosa y parece un circulo vacio */ body.tema-claro .club-product-btn i, body.tema-claro .club-btn-glow i { color: #fff; } body.tema-claro .ir-btn.ghost { color: var(--ink); } body.tema-claro .ir-btn.ghost:hover { color: var(--bv-pink); } /* 5.2 Iconos de marca. El SVG va como máscara para poder pintarlo con el degradado corporativo (currentColor no admite gradiente en CSS). */ body.tema-claro .bv-ico { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: var(--bv-grad); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; } body.tema-claro .bv-ico.blanco { background: #fff; } body.tema-claro .bv-ico-fibra { --ico: url('/assets/marca/iconos/fibra.svg'); } body.tema-claro .bv-ico-movil { --ico: url('/assets/marca/iconos/movil.svg'); } body.tema-claro .bv-ico-tv { --ico: url('/assets/marca/iconos/tv.svg'); } body.tema-claro .bv-ico-wifi { --ico: url('/assets/marca/iconos/wifi.svg'); } body.tema-claro .bv-ico-fijo { --ico: url('/assets/marca/iconos/fijo.svg'); } body.tema-claro .bv-ico-soporte { --ico: url('/assets/marca/iconos/soporte.svg'); } /* 5.2 (cont.): en las listas de producto se sustituye el glifo de Font Awesome por la silueta del manual sin tocar el HTML. Solo para fibra y móvil: son formas limpias que aguantan 16 px. El resto (escudo, nube, puzzle...) no tiene equivalente en el manual y se queda como estaba. */ body.tema-claro :is(.pk-incluye, .am-nom, .am-sub) > i:is(.fa-wifi, .fa-mobile-screen) { display: inline-block; width: 1.35em; height: 1.35em; background: var(--bv-grad); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; vertical-align: -.22em; } body.tema-claro :is(.pk-incluye, .am-nom, .am-sub) > i:is(.fa-wifi, .fa-mobile-screen)::before { content: ''; display: none; } body.tema-claro :is(.pk-incluye, .am-nom, .am-sub) > i.fa-wifi { --ico: url('/assets/marca/iconos/fibra.svg'); } body.tema-claro :is(.pk-incluye, .am-nom, .am-sub) > i.fa-mobile-screen { --ico: url('/assets/marca/iconos/movil.svg'); } /* ---------- Cabecera (manual 6.3) ---------------------------------------- */ body.tema-claro .main-header, body.tema-claro .main-header.scrolled, body.tema-claro .main-header.has-bg { background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(82,82,81,.04); } body.tema-claro .header-container { padding-top: .8rem; padding-bottom: .8rem; } body.tema-claro .logo img { height: 40px; width: auto; filter: none; } body.tema-claro .main-nav > ul { gap: .1rem; flex-wrap: nowrap; } body.tema-claro .main-nav > ul > li > a { color: var(--ink-2); font-weight: 500; font-size: .93rem; padding: .55rem .72rem; white-space: nowrap; } /* Los iconos del primer nivel partían el menú en dos líneas a 1440 px */ body.tema-claro .main-nav > ul > li > a > i { display: none; } body.tema-claro .main-nav > ul > li > a:hover, body.tema-claro .main-nav > ul > li.active > a { color: var(--bv-pink); background: var(--wash); } body.tema-claro .main-nav .dropdown-menu, body.tema-claro .main-nav ul ul { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-2); border-radius: var(--radius-sm); } /* En movil el submenu no es una tarjeta flotante sino una lista dentro del cajon: la caja con borde y sombra pintaba un recuadro vacio. */ @media (max-width: 1024px) { body.tema-claro .main-nav .dropdown-menu, body.tema-claro .main-nav ul ul { background: transparent; border: 0; box-shadow: none; border-radius: 0; } } body.tema-claro .main-nav ul ul a { color: var(--ink-2); } body.tema-claro .main-nav ul ul a:hover { color: var(--bv-pink); background: var(--wash); } body.tema-claro .mobile-toggle span { background: var(--ink); } body.tema-claro .lang-switcher-toggle { background: var(--bg-soft); color: var(--ink-2); border-color: var(--line); } body.tema-claro .lang-switcher-toggle:hover { background: var(--wash); border-color: var(--wash); color: var(--bv-pink); } body.tema-claro .lang-switcher .lang-code { background: var(--bv-grad); color: #fff; } body.tema-claro .main-nav.active, body.tema-claro .main-nav.open, body.tema-claro #main-nav.active { background: #fff; border-top: 1px solid var(--line); } body.tema-claro .main-nav.active a, body.tema-claro .main-nav.open a { color: var(--ink); } /* ---------- Hero de marca (manual 6.3) ----------------------------------- Foto corporativa a sangre + bocadillo orgánico en degradado con el titular dentro. Debajo, sobre blanco, la franja de acción (regalo, CTAs y prueba social), que el manual no contempla pero la web necesita para convertir. ------------------------------------------------------------ */ body.tema-claro .hero-marca { position: relative; display: block; /* .hero base es flex centrado: aquí estorba */ padding: 0; min-height: 0; background: #fff; isolation: isolate; } body.tema-claro .hero-marca .hm-foto { position: relative; width: 100%; aspect-ratio: 1920 / 1080; max-height: min(74vh, 720px); overflow: hidden; background: var(--bv-grad); } body.tema-claro .hero-marca .hm-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--hm-encuadre, 38%); display: block; } /* Encuadre por foto: la mancha ocupa la mitad superior del hero, asi que en las imagenes con la cara alta hay que bajar al sujeto (valor mas pequeno). Se afina por nombre de fichero para que valga en cualquier pagina; una pagina concreta puede forzar el suyo con body.pag-{--hm-encuadre}. */ body.tema-claro .hm-foto img[src*="/cima-"] { object-position: center 42%; } body.tema-claro .hm-foto img[src*="/familia-"] { object-position: center 20%; } body.tema-claro .hm-foto img[src*="/chica-movil-"] { object-position: center 8%; } body.tema-claro .hm-foto img[src*="/mayores-"] { object-position: center 15%; } body.tema-claro .hm-foto img[src*="/amigos-"] { object-position: center 30%; } body.tema-claro .hm-foto img[src*="/amigos-calle-"] { object-position: center 12%; } body.tema-claro .hm-foto img[src*="/playa-"] { object-position: center 25%; } body.tema-claro .hm-foto img[src*="/cafe-"] { object-position: center 12%; } body.tema-claro .hm-foto img[src*="/tienda-"] { object-position: center 20%; } /* Si alguna pagina necesita otro encuadre, se le escribe su propia regla: body.tema-claro.pag- .hm-foto img { object-position: center 10%; } */ /* Velo mínimo bajo la cabecera: la foto tiene que seguir siendo la foto */ body.tema-claro .hero-marca .hm-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,38,38,.22) 0%, rgba(38,38,38,0) 42%); pointer-events: none; } /* El bocadillo: el SVG real del manual, estirado al ancho del texto */ /* Proporciones medidas sobre la portada del manual (pág. 30): la mancha ocupa el 54 % del ancho del hero y arranca a un 27 % del borde izquierdo. */ body.tema-claro .hero-marca .hm-bocadillo { position: absolute; /* 14,5 % para que, con el contenedor al 71 % y el margen del 3,5 %, el borde izquierdo del lazo caiga donde caia antes (17 %). */ left: 14.5%; top: calc(var(--header-height, 108px) + .6rem); /* El manual lo dibuja al 54 % del ancho, pero ahi solo caben dos lineas cortas: midiendo la mascara, dentro de la forma solo entra un rectangulo del 66 % de ancho por el 40 % de alto. Con diapositivas de tres elementos (titular + claim + enlace) hace falta mas sitio, asi que la mancha va al 66 %. */ /* 71 % y no 66 %: las formas de lazos.php llevan un margen del 3,5 % dentro de su caja (antes la cola se veia cortada contra el borde), asi que el contenedor se agranda en la misma proporcion para que el lazo se siga viendo del mismo tamano. 66 / (1 - 2*0,035) = 71. */ width: 71%; aspect-ratio: 689 / 285; display: grid; z-index: 2; } /* ---- Lazos variables ------------------------------------------------- El manual dibuja UNA forma, pero es una familia de trazos, no un logo: web/includes/hero-marca.php inyecta un con cinco variantes de blob.svg (assets/marca/tramas/lazos.php) y el JS interpola la forma al cambiar de diapositiva. Son morfeables porque todas tienen los mismos 201 puntos y la misma secuencia de comandos. La clase bv-lazo la pone el propio script SOLO si ha podido crear el clipPath: sin ella manda la mascara de abajo y se ve como siempre. OJO: hay que apagar la mascara, porque mask y clip-path se intersecan y el resultado seria otra vez la forma original. */ html.bv-lazo body.tema-claro .hero-marca .hm-bocadillo::before { -webkit-mask: none; mask: none; -webkit-clip-path: url(#bv-lazo); clip-path: url(#bv-lazo); } body.tema-claro .hero-marca .hm-bocadillo::before { content: ''; grid-area: 1 / 1; /* grano + degradado: el grano se funde en soft-light, asi que se nota como materia, no como ruido */ background-image: var(--bv-grano), var(--bv-grad-lazo); background-size: 180px 180px, cover; background-blend-mode: soft-light, normal; /* blob-margen.svg = blob.svg con el mismo margen del 3,5 % que las variantes, para que el respaldo sin JS coincida con lo que hace el clip-path. El blob.svg original se queda como fuente del generador. */ -webkit-mask: url('/assets/marca/tramas/blob-margen.svg') center / 100% 100% no-repeat; mask: url('/assets/marca/tramas/blob-margen.svg') center / 100% 100% no-repeat; /* La sombra sigue el contorno del lazo porque drop-shadow se aplica despues de la mascara. Corta y baja, que no parezca una pegatina. OJO: filter crea contexto de apilamiento; .hm-texto lleva z-index:1 justo por esto, si se quita vuelve a taparse el claim. */ filter: drop-shadow(0 2px 3px rgba(82,82,81,.16)) drop-shadow(0 14px 26px rgba(82,82,81,.24)); } /* Zona segura: el rectangulo mayor que cabe dentro de la mancha, medido rasterizando blob.svg y buscando el rectangulo inscrito maximo (x 6 %-71,7 %, y 30,2 %-70,2 %). Fuera de ahi el texto pisa la curva. Con el margen del 3,5 % de las formas, ese rectangulo se transforma igual que ellas: p' = 0,035 + p * 0,93. De ahi los numeros de abajo. Si se cambia el margen en el generador, hay que rehacer esta cuenta. */ body.tema-claro .hero-marca .hm-texto { /* Ojo: en padding, los % verticales se calculan sobre el ANCHO. Por eso la caja va posicionada con top/bottom, que sí van sobre el alto. */ position: absolute; inset: 31.59% 29.82% 31.21% 9.08%; /* la mancha (::before) lleva mask, y eso crea contexto de apilamiento: sin este z-index se pintaba por encima y se tragaba el claim */ z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; color: #fff; } body.tema-claro .hero-marca .hm-texto h1 { margin: 0; color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.06; /* sin text-wrap:balance: aquí encoge la caja y parte en dos un titular que cabe de sobra en una línea */ font-size: clamp(1.15rem, 2.6vw, 2.75rem); width: 100%; } body.tema-claro .hero-marca .hm-texto h1 span { background: none; -webkit-text-fill-color: #fff; color: #fff; } /* El manual subraya una palabra del eslogan; aquí, el trozo marcado con * */ body.tema-claro .hero-marca .hm-texto h1 .highlight { text-decoration: underline; text-decoration-color: rgba(255,255,255,.7); text-decoration-thickness: .07em; text-underline-offset: .14em; } body.tema-claro .hero-marca .hm-claim { margin: 0; max-width: 92%; color: rgba(255,255,255,.95); font-weight: 400; font-size: clamp(.72rem, 1.05vw, 1.1rem); line-height: 1.35; text-wrap: balance; } /* --- Carrusel del hero ------------------------------------------------- Rotan la foto y el bocadillo; la franja de accion se queda quieta, que mover un boton debajo del cursor es la mejor forma de perder un clic. */ body.tema-claro .hero-marca .hm-foto .hm-img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; } body.tema-claro .hero-marca .hm-foto .hm-img.activa { opacity: 1; } body.tema-claro .hero-marca.hm-carrusel .hm-bocadillo { display: grid; } body.tema-claro .hero-marca.hm-carrusel .hm-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease, visibility .45s; } body.tema-claro .hero-marca.hm-carrusel .hm-slide.activa { opacity: 1; visibility: visible; transform: none; } /* El titular de la 2ª diapositiva en adelante es un

: mismo aspecto que el h1 */ body.tema-claro .hero-marca .hm-h { margin: 0; color: #fff; font-weight: 800; letter-spacing: -.02em; line-height: 1.06; font-size: clamp(1.15rem, 2.6vw, 2.75rem); width: 100%; } body.tema-claro .hero-marca .hm-h .highlight { text-decoration: underline; text-decoration-color: rgba(255,255,255,.7); text-decoration-thickness: .07em; text-underline-offset: .14em; } /* van dentro de .hm-foto, que es quien tiene el alto de la imagen */ body.tema-claro .hero-marca .hm-puntos { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(.9rem, 2.2vw, 1.6rem); display: flex; gap: .5rem; justify-content: center; } body.tema-claro .hero-marca .hm-punto { position: relative; width: 30px; height: 4px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; /* background-color, NO el atajo: en movil el boton crece a 44 px con padding y el filete se pinta con background-clip: content-box. El atajo 'background' resetea el clip a border-box y el punto activo salia como un circulo blanco de 44 px. */ background-color: rgba(255,255,255,.55); background-clip: content-box; box-shadow: 0 1px 3px rgba(38,38,38,.35); transition: background-color .25s ease, width .25s ease; } body.tema-claro .hero-marca .hm-punto:hover { background-color: rgba(255,255,255,.8); } body.tema-claro .hero-marca .hm-punto.activa { background-color: #fff; width: 46px; } @media (prefers-reduced-motion: reduce) { body.tema-claro .hero-marca .hm-foto .hm-img, body.tema-claro .hero-marca.hm-carrusel .hm-slide { transition: none; } } /* Tarjeta del premio del dia: acompana a la diapositiva de regalo, sale al lado del lazo y lleva a la pagina que explica el Club. */ body.tema-claro .hero-marca .hm-premio { position: absolute; z-index: 3; right: clamp(1.5rem, 5vw, 5rem); bottom: clamp(3.5rem, 8vw, 6rem); width: clamp(160px, 15vw, 210px); display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .8rem 1rem; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 18px; text-decoration: none; box-shadow: 0 2px 4px rgba(82,82,81,.14), 0 16px 30px rgba(82,82,81,.22); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); transition: opacity .5s ease, transform .5s ease, visibility .5s; } body.tema-claro .hero-marca .hm-premio.activa { opacity: 1; visibility: visible; transform: none; } body.tema-claro .hero-marca .hm-premio:hover { text-decoration: none; transform: translateY(-3px); } body.tema-claro .hero-marca .hm-premio img { width: 100%; height: 92px; object-fit: contain; } body.tema-claro .hero-marca .hm-premio-t { font-size: .74rem; font-weight: 700; line-height: 1.3; text-align: center; color: var(--ink); } body.tema-claro .hero-marca .hm-premio-p { font-size: .95rem; font-weight: 900; color: var(--pink-texto); } body.tema-claro .hero-marca .hm-premio-p s { font-size: .78rem; font-weight: 600; color: var(--ink-3); margin-left: .2rem; } /* Enlace dentro del lazo */ body.tema-claro .hero-marca .hm-mas { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: clamp(.72rem, .95vw, .92rem); font-weight: 800; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.55); text-underline-offset: .18em; } body.tema-claro .hero-marca .hm-mas:hover { color: #fff; text-decoration-color: #fff; } /* Franja de acción bajo la foto */ body.tema-claro .hero-marca .hm-accion { background: #fff; padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.6rem, 3.4vw, 2.6rem); text-align: center; } body.tema-claro .hero-marca .hm-regalo { display: inline-flex; align-items: center; gap: .55rem; background: var(--wash); color: var(--pink-texto); /* el rosa de marca daba 3,7:1 sobre el lavado */ border: 1px solid var(--line-marca-2); border-radius: 999px; padding: .45rem 1rem; font-weight: 700; font-size: .92rem; margin-bottom: 1.05rem; } body.tema-claro .hero-marca .hm-regalo .bv-ico { font-size: 1.15rem; } body.tema-claro .hero-marca .hm-botones { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; } body.tema-claro .hero-marca .hm-botones .btn-primary { background: var(--bv-grad); color: #fff; border: 0; box-shadow: 0 8px 22px rgba(var(--bv-shadow-rgb),.28); } body.tema-claro .hero-marca .hm-botones .btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--bv-shadow-rgb),.34); } body.tema-claro .hero-marca .hm-botones .btn-outline { border: 2px solid var(--line); color: var(--ink); background: #fff; } body.tema-claro .hero-marca .hm-botones .btn-outline:hover { border-color: var(--bv-pink); color: var(--bv-pink); background: #fff; } body.tema-claro .hero-marca .hm-prueba { margin: 1.1rem 0 0; color: var(--ink-3); font-size: .92rem; display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; } body.tema-claro .hero-marca .hm-prueba .trust-stars i { color: #FFB300; } /* Móvil: la mancha a 2,4:1 deja el texto ilegible. Se sustituye por una tarjeta de marca con el mismo degradado y la misma voz. */ @media (max-width: 860px) { body.tema-claro .hero-marca .hm-foto { aspect-ratio: 4 / 3; max-height: 46vh; } /* la tarjeta del bocadillo sube 3,2rem sobre la foto: los puntos, por encima */ body.tema-claro .hero-marca .hm-puntos { bottom: 4.4rem; } body.tema-claro .hero-marca .hm-premio { display: none; } body.tema-claro .hero-marca .hm-bocadillo { position: relative; left: auto; top: auto; margin: -3.2rem auto 0; width: min(92%, 560px); aspect-ratio: auto; min-height: 0; } /* En movil el bocadillo deja de ser mancha y pasa a tarjeta redondeada, asi que aqui tambien se quita el clip-path de los lazos variables. */ body.tema-claro .hero-marca .hm-bocadillo::before, html.bv-lazo body.tema-claro .hero-marca .hm-bocadillo::before { -webkit-mask: none; mask: none; -webkit-clip-path: none; clip-path: none; border-radius: 28px; filter: none; box-shadow: 0 10px 20px rgba(82,82,81,.20); } /* grid-area 1/1: al dejar de ser absoluto, .hm-texto pasa a ser un hijo de la rejilla, y sin celda propia caia en una segunda fila. El ::before (la tarjeta en degradado) se quedaba solo en la primera, con 0 px de alto, y el titular blanco sobre blanco no se veia (/internet-rural y /operadores-comprados, 02-10-2026). El carrusel no lo sufria porque .hm-slide ya va a 1/1. */ body.tema-claro .hero-marca .hm-texto { position: relative; inset: auto; grid-area: 1 / 1; padding: 1.5rem 1.35rem 1.6rem; } body.tema-claro .hero-marca .hm-texto h1 { font-size: clamp(1.6rem, 7.2vw, 2.2rem); } body.tema-claro .hero-marca .hm-claim { font-size: 1rem; } body.tema-claro .hero-marca .hm-botones .btn { width: 100%; max-width: 360px; justify-content: center; } } /* ---------- Hero genérico (páginas claras sin foto de marca) ------------- */ body.tema-claro .hero:not(.hero-marca) { background: var(--bv-grad); color: #fff; padding-top: calc(var(--header-height, 108px) + 3.5rem); padding-bottom: 4.5rem; min-height: auto; } body.tema-claro .hero:not(.hero-marca) .hero-bg, body.tema-claro .hero:not(.hero-marca) .hero-overlay, body.tema-claro .hero:not(.hero-marca) .hero-grid, body.tema-claro .hero:not(.hero-marca) .hero-particles, body.tema-claro .hero:not(.hero-marca) .hero-lines, body.tema-claro .hero:not(.hero-marca) .hero-visual, body.tema-claro .hero:not(.hero-marca) .hero-scroll { display: none !important; } body.tema-claro .hero:not(.hero-marca) .hero-content { max-width: 880px; } body.tema-claro .hero:not(.hero-marca) .hero-badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.34); color: #fff; font-weight: 700; } body.tema-claro .hero:not(.hero-marca) h1 { color: #fff; font-weight: 800; letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; } body.tema-claro .hero:not(.hero-marca) h1 .highlight { background: none; -webkit-text-fill-color: #fff; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); text-decoration-thickness: .08em; text-underline-offset: .12em; } body.tema-claro .hero:not(.hero-marca) .hero-subtitle { color: rgba(255,255,255,.92); max-width: 40em; margin-left: auto; margin-right: auto; } body.tema-claro .hero:not(.hero-marca) .hero-feature { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; border-radius: 999px; padding: .5rem .95rem; font-weight: 600; } body.tema-claro .hero:not(.hero-marca) .btn-primary { background: #fff; color: var(--bv-pink); border: 0; box-shadow: var(--shadow-1); } body.tema-claro .hero:not(.hero-marca) .btn-primary:hover { background: #fff; color: #D31347; transform: translateY(-2px); } body.tema-claro .hero:not(.hero-marca) .btn-outline { border-color: rgba(255,255,255,.6); color: #fff; } body.tema-claro .hero:not(.hero-marca) .btn-outline:hover { background: rgba(255,255,255,.14); color: #fff; } body.tema-claro .hero:not(.hero-marca) .hero-trust { color: rgba(255,255,255,.8); } /* Tivify va de regalo con todas las altas: el precio suelto no puede salir solo, que contradice a la portada. */ body.tema-claro .tv-regalo { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .5rem 1.1rem; margin: 0 0 1rem; font-weight: 700; color: #fff; } /* Hero de /tv, /tivify y /alarma. No hay fotografia de marca de television ni de alarmas, y meter una foto de gente cualquiera ni cuenta de que va la pagina ni pega con el resto. El manual resuelve justo ese caso (6.4, las publicaciones de "Servei tecnic" y "Prime Wifi") con degradado + trama + el icono del servicio. Eso es lo que se hace aqui. */ body.tema-claro :is(.tv-hero, .extra-hero) { background: var(--bv-grad); position: relative; overflow: hidden; } body.tema-claro :is(.tv-hero, .extra-hero)::after { content: ''; position: absolute; pointer-events: none; right: -6%; top: -22%; width: min(52%, 620px); aspect-ratio: 832 / 981; background: #fff; opacity: .04; -webkit-mask: url('/assets/marca/tramas/trama-linea.svg') center/contain no-repeat; mask: url('/assets/marca/tramas/trama-linea.svg') center/contain no-repeat; } body.tema-claro :is(.tv-hero, .extra-hero) > * { position: relative; z-index: 1; } /* la trama de crucecitas que traian estas paginas no es del manual */ body.tema-claro :is(.tv-hero, .extra-hero)::before { background: none; } /* Icono del manual en grande, en negativo, como ilustración del hero */ body.tema-claro .bv-ico-grande { display: inline-flex; align-items: center; justify-content: center; width: min(60%, 300px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); } body.tema-claro .bv-ico-grande .bv-ico { width: 52%; height: 52%; } /* ---------- Heros de las páginas de extras (/tv, /tivify, /alarma) ------- Son bandas con el degradado de marca: ahí dentro todo va en blanco. Las reglas base del tema los dejaban con texto oscuro sobre rosa. --------- */ body.tema-claro :is(.tv-hero, .extra-hero) :where(h1, h2, h3, h4, p, li, span, strong, small) { color: #fff; } body.tema-claro :is(.tv-hero, .extra-hero) :where(a) { color: #fff; } body.tema-claro :is(.tv-hero, .extra-hero) .btn-outline, body.tema-claro :is(.tv-hero, .extra-hero) .btn-secondary { border: 2px solid rgba(255,255,255,.65); color: #fff; background: transparent; } body.tema-claro :is(.tv-hero, .extra-hero) .btn-outline:hover, body.tema-claro :is(.tv-hero, .extra-hero) .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; } body.tema-claro :is(.tv-hero, .extra-hero) .btn-primary, body.tema-claro :is(.tv-hero, .extra-hero) .btn-white { background: #fff; color: var(--bv-pink); border: 0; } /* .btn-outline-white no estaba definida en NINGUNA hoja: los botones secundarios de /tv, /tivify y /alarma ("Volver al contratador", "Ver cómo funciona"...) salian como texto suelto sobre el degradado, sin borde y sin parecer un boton. Va aqui porque siempre se usa sobre fondo de marca. */ body.tema-claro .btn-outline-white { border: 2px solid rgba(255,255,255,.65); color: #fff; background: transparent; } body.tema-claro .btn-outline-white:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; } /* ---------- /comparar y /opiniones (paginas sueltas) -------------------- */ body.tema-claro.pag-comparar .compare-hero, body.tema-claro.pag-opiniones .reviews-hero { padding-top: calc(var(--header-height, 108px) + 2.6rem); } body.tema-claro.pag-comparar .compare-hero, body.tema-claro.pag-opiniones .reviews-hero { background: var(--bv-grad); } body.tema-claro.pag-comparar .compare-hero :where(h1, h2, p, span, a, li), body.tema-claro.pag-opiniones .reviews-hero :where(h1, h2, p, span, a, li) { color: #fff; } body.tema-claro.pag-comparar .compare-hero .breadcrumb, body.tema-claro.pag-comparar .compare-hero nav { background: rgba(255,255,255,.16); border-radius: 999px; } /* ---------- /cobertura (pagina suelta) ---------------------------------- */ body.tema-claro.pag-cobertura .coverage-hero { padding-top: calc(var(--header-height, 108px) + 2.6rem); } body.tema-claro.pag-cobertura .coverage-hero :where(h1, h2, p, span, li) { color: #fff; } body.tema-claro.pag-cobertura .cob-cta :where(h1, h2, h3, p, span, a) { color: #fff; } body.tema-claro.pag-cobertura .contact-cta a, body.tema-claro.pag-cobertura :where(a[href^="tel:"]) { color: var(--pink-texto); } /* ---------- /tiendas (pagina suelta) ------------------------------------ Tiene su propio CSS, ya reescrito a la paleta del manual. Aqui solo la banda de titulo, que ahora va debajo de la cabecera del sitio. ------ */ body.tema-claro.pag-tiendas .page-header { padding-top: calc(var(--header-height, 108px) + 2.6rem); padding-bottom: 2.8rem; } body.tema-claro.pag-tiendas .page-header :where(h1, p) { color: #fff; } body.tema-claro.pag-tiendas .page-header h1 { font-weight: 800; letter-spacing: -.02em; } /* ---------- /contacto (pagina suelta) ----------------------------------- Estaba construida sobre el tema oscuro (glass sobre negro). Se le dan los tokens en claro solo a ella para no tocar el resto del sitio. -------- */ body.tema-claro.pag-contacto { --glass-bg: #ffffff; --glass-border: var(--line); --color-gray-400: var(--ink-2); --color-gray-500: var(--ink-3); --color-gray-600: var(--ink-3); --color-gray-700: #B3AFAC; } body.tema-claro .contacto-hero { background: var(--bv-grad); padding-top: calc(var(--header-height, 108px) + 3rem); padding-bottom: 3.5rem; min-height: 0; } body.tema-claro .contacto-hero :where(h1, p) { color: #fff; } body.tema-claro .contacto-hero .section-badge { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); color: #fff; } body.tema-claro .contacto-cuerpo { background: var(--bg) !important; } body.tema-claro.pag-contacto .contact-card, body.tema-claro.pag-contacto .contact-form-card, body.tema-claro.pag-contacto .contact-sidebar > * { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } body.tema-claro.pag-contacto .contact-card-value { color: var(--ink); } body.tema-claro.pag-contacto .contact-card-action { color: var(--bv-pink); } body.tema-claro.pag-contacto input, body.tema-claro.pag-contacto textarea, body.tema-claro.pag-contacto select { background: #fff; border: 1px solid var(--line); color: var(--ink); } body.tema-claro.pag-contacto input::placeholder, body.tema-claro.pag-contacto textarea::placeholder { color: var(--ink-3); } body.tema-claro.pag-contacto .sidebar-card h3 { color: var(--ink); } body.tema-claro.pag-contacto .sidebar-card h3 i { color: var(--bv-orange); } body.tema-claro.pag-contacto .schedule-list li { border-bottom-color: var(--line); } body.tema-claro.pag-contacto .schedule-list .hours { color: var(--ink); } body.tema-claro.pag-contacto .schedule-list .closed { color: var(--ink-3); } body.tema-claro.pag-contacto .contact-social a { background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); } body.tema-claro.pag-contacto .contact-social a:hover { background: var(--bv-grad); border-color: transparent; color: #fff; } /* Grises heredados del tema oscuro que sobre blanco no llegan a AA */ body.tema-claro { --color-gray-400: #6E6E6D; --color-gray-500: #6E6E6D; --color-gray-600: #525251; } /* Enlaces de texto: el rosa claro no se lee sobre blanco */ body.tema-claro :where(main a:not([class])) { color: var(--pink-texto); } /* /tiendas trae sus propios botones de color (verde llamar, etc.) */ body.tema-claro.pag-tiendas :is(.btn-primary, .btn-success, .btn-secondary) { color: #fff; } /* Bandas y piezas de /tv, /tivify y /alarma que van sobre el degradado: ahí el texto es blanco, no la tinta del tema. */ body.tema-claro :is(.cta-section, .channels-counter) :where(h1,h2,h3,h4,p,span,strong,li,a) { color: #fff; } body.tema-claro .channels-counter .extra { background: rgba(0,0,0,.18); } body.tema-claro :is(.cta-section, .channels-counter) .number, body.tema-claro .tv-stat-item .number { color: #fff; } /* .section-badge: por defecto fondo rosa palido -> texto en rosa oscuro. En /tv la propia pagina lo pinta con el degradado solido -> blanco. */ body.tema-claro .section-badge { color: var(--pink-texto); } /* el fondo lo pone cada pagina; aqui solo la tinta */ body.tema-claro.pag-tv .section-badge, body.tema-claro :is(.tv-hero, .extra-hero, .cta-section) .section-badge { color: #fff; } /* Verde de WhatsApp: el de marca (#25D366) con texto blanco da 2:1 */ body.tema-claro .btn-whatsapp { background: #0E8A4F !important; border-color: #0E8A4F !important; color: #fff !important; } /* ---------- Ritmo de secciones ------------------------------------------ */ /* index.php reserva la altura de la cabecera en el primer hijo de

. Con hero eso sobra: el hero ya la ha reservado y dejaba 218 px de vacío. */ body.tema-claro.con-hero main > *:first-child { padding-top: 0; } body.tema-claro .pk-sec, body.tema-claro .am-sec, body.tema-claro .pb-sec, body.tema-claro .ah-sec { padding: clamp(3.5rem, 7vw, 5.5rem) 0; position: relative; } body.tema-claro .am-sec, body.tema-claro .ah-sec { background: var(--bg-soft); } /* 5.1 Sistema gráfico: la espiral como firma discreta al fondo de las secciones lavadas. Sin peso visual, solo aire de marca. Opacidades bajadas tres veces el 20-09-2026, a peticion: heros de servicio .13 -> .085 -> .06 -> .04 secciones home .07 -> .05 -> .035 -> .022 seccion del Club .06 -> .045 -> .03 -> .02 home en movil .05 -> .04 -> .028 -> .018 (ahi ocupa 70vw, y a igual opacidad pesa mas) A los valores originales el trazo se leia como ilustracion y competia con el contenido, que es justo lo que no debe hacer una marca de agua. Estos son ya valores de veladura: por debajo de ~.015 sobre fondo claro deja de percibirse. Si hay que moverla, son estos cuatro numeros. */ body.tema-claro .am-sec::before, body.tema-claro .ah-sec::before { content: ''; position: absolute; pointer-events: none; z-index: 0; width: min(46vw, 560px); aspect-ratio: 832 / 981; background: var(--bv-grad); opacity: .022; -webkit-mask: url('/assets/marca/tramas/trama-linea.svg') center/contain no-repeat; mask: url('/assets/marca/tramas/trama-linea.svg') center/contain no-repeat; } body.tema-claro .am-sec::before { right: -8%; top: -6%; } body.tema-claro .ah-sec::before { left: -10%; bottom: -8%; transform: scaleX(-1); } body.tema-claro .am-sec > *, body.tema-claro .ah-sec > * { position: relative; z-index: 1; } body.tema-claro .pk-cab h2, body.tema-claro .am-cab h2, body.tema-claro .pb-cab h2, body.tema-claro .ah-cab h2 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; } body.tema-claro .pk-cab p, body.tema-claro .am-cab p, body.tema-claro .pb-cab p, body.tema-claro .ah-cab p { color: var(--ink-3); } /* ---------- Tarjeta única (packs, motivos, extras) ----------------------- */ body.tema-claro .pk-card, body.tema-claro .pb-card, body.tema-claro .am-item { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); } body.tema-claro .pk-card:hover, body.tema-claro .pb-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-marca); } /* Packs */ body.tema-claro .pk-card h3 { color: var(--ink); } body.tema-claro .pk-incluye li { color: var(--ink-2); } body.tema-claro .pk-incluye li small { color: var(--ink-3); } body.tema-claro .pk-incluye i { color: var(--bv-pink); } body.tema-claro .pk-top { border-color: var(--bv-pink); background: #fff; box-shadow: var(--shadow-2); } body.tema-claro .pk-badge { background: var(--bv-grad); } body.tema-claro .pk-precio .n { color: var(--ink); } body.tema-claro .pk-precio .m { color: var(--ink-3); } body.tema-claro .pk-letra { color: var(--ink-3); } body.tema-claro .pk-top .pk-letra { color: var(--pink-texto); } body.tema-claro .pk-regalo { background: var(--wash); border: 1px dashed var(--line-marca); } body.tema-claro .pk-regalo-t { color: var(--pink-texto); } body.tema-claro .pk-regalo-i { color: var(--ink); } body.tema-claro .pk-regalo-i s { color: var(--ink-3); } body.tema-claro .pk-btn { background: var(--wash); border: 1px solid transparent; color: var(--pink-texto); font-weight: 700; } body.tema-claro .pk-btn:hover { background: var(--wash-3); color: #D31347; } body.tema-claro .pk-top .pk-btn { background: var(--bv-grad); color: #fff; box-shadow: 0 6px 18px rgba(var(--bv-shadow-rgb),.26); } body.tema-claro .pk-top .pk-btn:hover { color: #fff; filter: saturate(1.05); transform: translateY(-1px); } /* Añade lo que te falte */ body.tema-claro .am-sub { color: var(--ink-3); } body.tema-claro .am-sub i { color: var(--bv-pink); } body.tema-claro .am-item:hover { border-color: var(--line-marca); } body.tema-claro .am-nom { color: var(--ink-2); } body.tema-claro .am-nom i { color: var(--bv-pink); } body.tema-claro .am-eur { color: var(--ink); } body.tema-claro .am-promo { color: var(--pink-texto); } body.tema-claro .am-nota { color: var(--ink-3); } /* Por qué Bivid */ body.tema-claro .pb-ico { background: var(--wash); border: 0; } body.tema-claro .pb-ico i { color: var(--bv-pink); } body.tema-claro .pb-card h3 { color: var(--ink); } body.tema-claro .pb-card p { color: var(--ink-2); } body.tema-claro .pb-dato { color: var(--naranja-texto); font-weight: 800; } /* Comparativa de ahorro */ body.tema-claro .ah-kicker { background: var(--wash); border-color: var(--line-marca); color: var(--pink-texto); } body.tema-claro .ah-tabla { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } body.tema-claro .ah-fila { border-bottom-color: var(--line); } body.tema-claro .ah-nos { background: var(--wash); } body.tema-claro .ah-op { color: var(--ink); } body.tema-claro .ah-op small { color: var(--ink-3); } body.tema-claro .ah-precio { color: var(--ink); } body.tema-claro .ah-precio small { color: var(--ink-3); } body.tema-claro .ah-dif { color: var(--ink-3); } body.tema-claro .ah-mas { color: var(--pink-texto); } body.tema-claro .ah-nos .ah-dif { color: var(--ok); } body.tema-claro .ah-honesto { background: #fff; border-color: var(--line); color: var(--ink-2); } body.tema-claro .ah-honesto i { color: var(--bv-pink); } /* ---------- Calculadoras (fibra / móvil / combo) ------------------------- Son bloques oscuros por diseño. En vez de pelearse con ellos, se aceptan como lo que el manual llama un bloque Cool grey dentro de la composición (pág. 26) y se les cambia el color de marca: rosa + naranja en vez del azul y el morado heredados. ------------------------------------------ */ body.tema-claro .calc-fibra-section, body.tema-claro .calc-movil-section, body.tema-claro .calc-combo-section { --calc-primary: var(--bv-pink); --calc-light: var(--color-primary-light, #FF5C7F); --calc-accent: var(--bv-orange); --calc-rgb: 240, 41, 91; --calc-nota: #FF8FB0; /* nota de promo sobre el panel oscuro */ background: #2B2B2A; } body.tema-claro :is(.calc-fibra-section, .calc-movil-section, .calc-combo-section) :where(h1,h2,h3,h4) { color: #fff; } body.tema-claro :is(.calc-fibra-section, .calc-movil-section, .calc-combo-section) :where(p) { color: rgba(255,255,255,.72); } body.tema-claro :is(.calc-fibra-section, .calc-movil-section, .calc-combo-section) :where(a) { color: #fff; } /* ---------- Tienda (/tienda) -------------------------------------------- Las paginas de producto/carrito heredaban el fondo oscuro que la tienda tiene configurado en el CMS; con el tema claro ese fondo sobra. ----- */ body.tema-claro.pag-tienda { background: #fff; } body.tema-claro.pag-tienda .page-bg-container { display: none; } body.tema-claro.pag-tienda .breadcrumb, body.tema-claro.pag-tienda .breadcrumb a { color: var(--ink-3); } body.tema-claro.pag-tienda :where(h1, h2, h3) { color: var(--ink); } body.tema-claro.pag-tienda .product-detail-title, body.tema-claro.pag-tienda .product-title { color: var(--ink); } body.tema-claro.pag-tienda .product-brand a { color: var(--pink-texto); } body.tema-claro.pag-tienda .empty-text, body.tema-claro.pag-tienda .empty-icon { color: var(--ink-3); } /* el verde-cian del tema oscuro no se lee sobre blanco */ body.tema-claro { --color-success: #0A7A54; } body.tema-claro.pag-tienda .product-stock.in-stock { color: var(--ok); } /* Las secciones a sangre heredaban --section-bg (#1a1a1a del CMS) y salian sobre negro en las paginas que no van en modo "sections-transparent". En tema claro, el fondo de seccion es el de la pagina, punto. */ body.tema-claro :is(.club-catalog-section, .club-catalogo-section, .section) { background: var(--bg); } body.tema-claro :is(.am-sec, .ah-sec, .cb-sec, .sponsors-slider-section) { background: var(--bg-soft); } /* ---------- Catalogo del Club (/gift, /club-bivid) ---------------------- */ body.tema-claro .club-cuenta, body.tema-claro .club-cuenta strong { color: var(--ink-2); } body.tema-claro .club-slide h3, body.tema-claro .club-product-content h3 { color: var(--ink); } body.tema-claro .club-slider-cab h2, body.tema-claro .club-section-header h2 { color: var(--ink); } body.tema-claro .club-buscador input, body.tema-claro .club-orden select { color: var(--ink); } body.tema-claro .club-buscador input::placeholder { color: var(--ink-3); } /* el rosa claro sobre blanco no se lee: los precios van en el rosa de texto */ body.tema-claro .club-slide-precio strong, body.tema-claro :is(.club-featured-points, .club-product-points) .number, body.tema-claro :is(.club-featured-points, .club-product-points) .label { color: var(--pink-texto); } /* ---------- Club Bivid: la pagina que lo explica ------------------------ */ body.tema-claro .ce-sec { background: var(--bg); } body.tema-claro .ce-cab h2, body.tema-claro .ce-practica h3, body.tema-claro .ce-pasos h3 { color: var(--ink); } body.tema-claro .ce-cab p { color: var(--ink-2); } body.tema-claro .ce-bloque { background: var(--bg-soft); border: 1px solid var(--line); } body.tema-claro .ce-num { background: var(--bv-grad); box-shadow: 0 4px 12px rgba(var(--bv-shadow-rgb),.3); } body.tema-claro .ce-bloque h3 { color: var(--ink); } body.tema-claro .ce-bloque > p, body.tema-claro .ce-datos li { color: var(--ink-2); } body.tema-claro .ce-datos li strong { color: var(--ink); } body.tema-claro .ce-datos li::before { background: var(--bv-grad); } body.tema-claro .ce-nota { color: var(--ink-3); } body.tema-claro .ce-tramo { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } body.tema-claro .ce-personas { color: var(--pink-texto); } body.tema-claro .ce-personas-txt, body.tema-claro .ce-cuantos { color: var(--ink-2); } body.tema-claro .ce-saldo { color: var(--ink); } body.tema-claro .ce-cuantos strong { color: var(--ink); } body.tema-claro .ce-ejemplo { background: var(--bg-soft); } body.tema-claro .ce-ejemplo span { color: var(--ink); } body.tema-claro .ce-ejemplo small { color: var(--ink-3); } body.tema-claro .ce-pasos li { color: var(--ink-2); } body.tema-claro .ce-pasos li strong { color: var(--ink); } body.tema-claro .ce-link { color: var(--pink-texto); } /* ---------- Club Bivid (home) ------------------------------------------- */ body.tema-claro .cb-sec { background: var(--bg-soft); } body.tema-claro .cb-sec::before { content: ''; position: absolute; pointer-events: none; z-index: 0; left: -10%; top: -10%; width: min(42vw, 520px); aspect-ratio: 832 / 981; background: var(--bv-grad); opacity: .02; -webkit-mask: url('/assets/marca/tramas/trama-linea.svg') center/contain no-repeat; mask: url('/assets/marca/tramas/trama-linea.svg') center/contain no-repeat; } body.tema-claro .cb-sec > * { position: relative; z-index: 1; } body.tema-claro .cb-cab h2 { color: var(--ink); } body.tema-claro .cb-cab p { color: var(--ink-2); } body.tema-claro .cb-card { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } body.tema-claro .cb-card:hover { box-shadow: var(--shadow-2); border-color: var(--line-marca); } body.tema-claro .cb-ahorro { background: var(--bv-grad); } body.tema-claro .cb-img { background: var(--bg-soft); } body.tema-claro .cb-nom { color: var(--ink); } body.tema-claro .cb-precio strong { color: var(--ink); } body.tema-claro .cb-precio s { color: var(--ink-3); } body.tema-claro .cb-refer { background: var(--wash); border-color: #FFD9CC; } body.tema-claro .cb-refer-t { color: var(--ink-2); } body.tema-claro .cb-refer-t strong { color: var(--pink-texto); } body.tema-claro .cb-link { color: var(--pink-texto); } body.tema-claro .cb-nota { color: var(--ink-3); } /* ---------- Secciones heredadas del CMS --------------------------------- */ body.tema-claro .section-header h2 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; } body.tema-claro .section-header p { color: var(--ink-3); } body.tema-claro .testimonial-card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink-2); } body.tema-claro .testimonial-card p, body.tema-claro .testimonial-text { color: var(--ink-2); } body.tema-claro .testimonial-author strong, body.tema-claro .author-info strong { color: var(--ink); } body.tema-claro .testimonial-author span, body.tema-claro .author-info span { color: var(--ink-3); } body.tema-claro .testimonial-card blockquote { color: var(--ink-2); } body.tema-claro .testimonials-summary :where(p, span) { color: var(--ink-2); } body.tema-claro .testimonials-summary .rating-stars i { color: #FBBF24; } body.tema-claro .testimonial-stars i { color: #FBBF24; } body.tema-claro .testimonial-service { background: var(--wash); color: var(--pink-texto); } body.tema-claro .stores-grid-elegant .featured-content, body.tema-claro .store-card, body.tema-claro .featured-card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink-2); } body.tema-claro .featured-city { color: var(--ink); } /* La banda superior de la tarjeta de tienda va en degradado: ahí, blanco */ body.tema-claro .store-card-overlay .store-title, body.tema-claro .store-card-overlay .store-city, body.tema-claro .store-card-overlay .store-city i { color: #fff; } body.tema-claro .store-card-overlay .store-city { background: rgba(255,255,255,.2); } body.tema-claro .store-card-header .store-manager-badge span { color: var(--ink); } body.tema-claro .detail-row { color: var(--ink-2); } body.tema-claro .detail-row i { color: var(--bv-pink); } /* Los botones de tienda (.action-primary/.action-call/.store-btn-*) ya traen su color y ahora consumen --gradient-tienda, así que aquí no se tocan: una regla sobre .action-btn les pisaba el texto y dejaba rosa sobre rosa. */ body.tema-claro .store-btn-primary, body.tema-claro .store-btn-call, body.tema-claro .action-primary, body.tema-claro .action-call, body.tema-claro .action-whatsapp, body.tema-claro .store-btn-whatsapp { color: #fff; } body.tema-claro .store-btn-secondary, body.tema-claro .action-secondary { color: var(--pink-texto); } body.tema-claro .action-secondary, body.tema-claro .store-btn-secondary { border-color: var(--line); } body.tema-claro .action-secondary:hover, body.tema-claro .store-btn-secondary:hover { background: var(--wash); border-color: var(--bv-pink); } body.tema-claro .sponsors-slider-section { background: var(--bg-soft); } body.tema-claro .sponsors-slider-title { color: var(--ink); } body.tema-claro .sponsors-slider-subtitle { color: var(--ink-3); } body.tema-claro .sponsor-logo-wrapper { background: #fff; border: 1px solid var(--line); } body.tema-claro .sponsor-name { color: var(--ink-2); } body.tema-claro .section { background: transparent !important; color: var(--ink-2); } body.tema-claro .section-light, body.tema-claro .section-gradient { background: var(--bg-soft) !important; } /* Textos pequeños en rosa o gris que no llegaban a AA sobre blanco */ /* .btn-outline trae de style.css `border: 2px solid rgba(255,255,255,.3)`, pensado para el tema oscuro: sobre una tarjeta blanca el borde no se ve y el boton parece un enlace suelto. Aqui se le da filete visible. Dentro de los heros de marca sigue mandando la regla blanca, que es 0-3-1. */ body.tema-claro .btn-outline { color: var(--pink-texto); border: 2px solid var(--line-2); background: #fff; } body.tema-claro .btn-outline:hover { border-color: var(--bv-pink); background: var(--wash); color: var(--pink-texto); } body.tema-claro .info-label { color: var(--ink-3); } body.tema-claro .savings-preview { color: var(--ok); } body.tema-claro.pag-tiendas .page-footer :where(p, a) { color: rgba(255,255,255,.85); } body.tema-claro.pag-tiendas .page-footer a { text-decoration: underline; } /* ---------- /blog (pagina suelta) ---------------------------------------- Estaba montado sobre el tema oscuro y encima con el fondo de pagina del CMS. Aqui se apaga ese fondo y se le dan superficies claras. ------- */ body.tema-claro.pag-blog { background: var(--bg); } body.tema-claro.pag-blog .page-bg-container { display: none; } body.tema-claro.pag-blog .blog-header h1, body.tema-claro.pag-blog .blog-section-title { color: var(--ink); } body.tema-claro.pag-blog .blog-header p { color: var(--ink-3); } body.tema-claro.pag-blog :is(.blog-card, .blog-hero-side-card, .blog-related article) { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); } body.tema-claro.pag-blog :is(.blog-card, .blog-hero-side-card) :where(h2, h3, h4, a) { color: var(--ink); } body.tema-claro.pag-blog :is(.blog-excerpt, .blog-meta, .blog-meta *) { color: var(--ink-2); } body.tema-claro.pag-blog .blog-meta { color: var(--ink-3); } /* La pieza grande lleva foto a sangre y texto encima: ahi sigue en blanco */ body.tema-claro.pag-blog .blog-hero-main :where(h2, h3, p, span, a) { color: #fff; } body.tema-claro.pag-blog .blog-hero-main { background: #2B2B2A; } body.tema-claro.pag-blog .blog-categories a { background: #fff; border: 1px solid var(--line); color: var(--ink-2); } body.tema-claro.pag-blog .blog-categories a.activa, body.tema-claro.pag-blog .blog-categories a.active { background: var(--bv-grad); border-color: transparent; color: #fff; } body.tema-claro.pag-blog .blog-pagination a, body.tema-claro.pag-blog .blog-pagination span { background: #fff; border: 1px solid var(--line); color: var(--ink-2); } /* Cabecera del artículo. Sus colores salen de la «apariencia del blog» (cms_config), pensada para el fondo oscuro antiguo: título blanco y fecha/autor casi blancos, que sobre el fondo claro no se veían. */ body.tema-claro.pag-blog .blog-single h1 { color: var(--ink); } body.tema-claro.pag-blog .blog-single-meta { color: var(--ink-3); } body.tema-claro.pag-blog .blog-single-content { color: var(--ink-2); } body.tema-claro.pag-blog .blog-single-content :where(h1,h2,h3,h4) { color: var(--ink); } /* Listas, negritas, tablas y citas del cuerpo: el blog les da su propio color claro (--blog-text-color, #E2E8F0) y pisaba al del párrafo. */ body.tema-claro.pag-blog .blog-single-content :is(ul, ol, li, td, blockquote) { color: var(--ink-2); } body.tema-claro.pag-blog .blog-single-content :is(strong, b, th) { color: var(--ink); } body.tema-claro.pag-blog .blog-back { color: var(--pink-texto); } /* la insignia de categoria lleva el color de la categoria de fondo */ body.tema-claro.pag-blog .blog-category-badge { color: #fff; } /* ---------- Pie ---------------------------------------------------------- Se queda oscuro a propósito: cierra la página y es donde vive el logo en negativo. Gris del manual (Cool grey oscurecido), no morado, y rematado con una línea del degradado corporativo. --------------------------- */ body.tema-claro .main-footer { background: #2B2B2A; border-top: 0; position: relative; } body.tema-claro .main-footer::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--bv-grad); } /* El gris azulado heredado (--color-gray-500) no pega con una marca calida */ body.tema-claro .main-footer .footer-links h4, body.tema-claro .main-footer .footer-contact h4 { color: #fff; font-weight: 700; } body.tema-claro .main-footer .footer-links a, body.tema-claro .main-footer .footer-contact a, body.tema-claro .main-footer .footer-contact ul li, body.tema-claro .main-footer .footer-brand p { color: rgba(255,255,255,.66); } body.tema-claro .main-footer .footer-links a:hover, body.tema-claro .main-footer .footer-contact a:hover { color: #fff; } body.tema-claro .main-footer .footer-contact ul li i { color: var(--bv-orange); } body.tema-claro .main-footer .footer-social a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; } body.tema-claro .main-footer .footer-social a:hover { background: var(--bv-grad); border-color: transparent; box-shadow: 0 8px 22px rgba(var(--bv-shadow-rgb),.3); } body.tema-claro .main-footer .footer-bottom, body.tema-claro .main-footer .footer-bottom * { color: rgba(255,255,255,.5); } body.tema-claro .main-footer .footer-logo { filter: none; } /* ---------- Widgets ------------------------------------------------------- */ /* El aviso de cookies venia en oscuro (#1a1a2e) y era lo unico negro que quedaba en pantalla en las paginas claras. */ body.tema-claro #cookie-banner { background: #fff; color: var(--ink-2); border-top: 1px solid var(--line); box-shadow: 0 -6px 28px rgba(82,82,81,.14); } body.tema-claro #cookie-banner :where(h3, h4, strong) { color: var(--ink); } body.tema-claro #cookie-banner a { color: var(--pink-texto); } body.tema-claro .cookie-btn-accept { background: var(--bv-grad); color: #fff; } body.tema-claro .cookie-btn-reject { background: var(--bg-soft); color: var(--ink-2); border: 1px solid var(--line); } body.tema-claro .cookie-btn-settings { color: var(--ink-3); } body.tema-claro #cookie-settings { border-top-color: var(--line); } body.tema-claro #cookie-settings > * { border-bottom-color: var(--line); } body.tema-claro .cookie-toggle span { background: #C9C3BF; } body.tema-claro .cookie-toggle input:checked + span { background: var(--bv-pink); } body.tema-claro .cookie-banner-inner, body.tema-claro .cookie-settings-inner { background: #fff; color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-2); } body.tema-claro .cookie-banner-text, body.tema-claro .cookie-banner-text * { color: var(--ink-2); } body.tema-claro .cookie-btn { border-color: var(--line); color: var(--ink-2); background: #fff; } body.tema-claro .cookie-btn.primary, body.tema-claro .cookie-btn-accept { background: var(--bv-grad); color: #fff; border-color: transparent; } body.tema-claro .back-to-top { background: var(--bv-grad); color: #fff; box-shadow: var(--shadow-1); } /* ---------- Móvil --------------------------------------------------------- */ @media (max-width: 900px) { body.tema-claro .hero:not(.hero-marca) { padding-top: calc(var(--header-height, 96px) + 2.2rem); padding-bottom: 3rem; } body.tema-claro .hero:not(.hero-marca) h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); } body.tema-claro .logo img { height: 32px; } body.tema-claro .pk-card { padding: 1.25rem; } body.tema-claro .pk-precio .n { font-size: 2.1rem; } /* En movil la espiral ocupa 70vw, asi que a igual opacidad pesa mas que en escritorio: se compensa bajandola un punto. */ body.tema-claro .am-sec::before, body.tema-claro .ah-sec::before { width: 70vw; opacity: .018; } } /* CTA del cajon movil sobre tema claro. Va colgado de .main-nav porque 'body.tema-claro .main-nav.active a' pinta todos los enlaces del cajon en --ink y le ganaba por especificidad: el boton "Contacta" salia en negro sobre el degradado. */ body.tema-claro .main-nav .nav-cta-mini { color: var(--ink-2, #525251); background: #fff; } body.tema-claro .main-nav .nav-cta-mini.nav-cta-wa { color: #1FA855; } body.tema-claro .main-nav .nav-cta-movil .nav-cta-principal, body.tema-claro .main-nav .nav-cta-movil .nav-cta-principal:hover { color: #fff; } /* ===================================================================== VARIANTE DE PALETA — SUBMARCA "bivid telecom" (morado / fucsia) Manual 4.1: Night purple #7938AD + Purple #B53486. Se activa con ?paleta=telecom (includes/paleta.php pone la clase en el y cambia el logotipo por el de la submarca, que YA viene en este par de colores). Solo se redefinen tokens: ningun componente cambia. Por que puede interesar: rosa #F0295B y naranja #FF6F00 son dos rojos contiguos, practicamente el mismo color con daltonismo rojo-verde (protan/deutan), y ademas el naranja solo da 2,8:1 con texto blanco, por eso hubo que inventar --naranja-texto. El morado lleva componente azul, asi que se distingue del naranja y del gris, y da 7,0:1 (#7938AD) y 5,5:1 (#B53486) en blanco sobre color: el degradado entero pasa AA sin parches. ===================================================================== */ body.paleta-telecom { --bv-pink: #7938AD; /* Night purple: hace de color primario */ --bv-orange: #B53486; /* Purple: hace de secundario */ --bv-grad: linear-gradient(115deg, #7938AD 0%, #B53486 100%); /* Lazo de la submarca. Aqui si hay margen, y se aprovecha entero: medido con el texto blanco encima y una foto BLANCA debajo (peor caso), el #7938AD aguanta hasta alfa .80 manteniendo 4,5:1 y el #B53486 hasta .88. Midiendo sobre el pixel ya pintado el magenta se quedaba en 4,39:1 (el grano en soft-light aclara un poco), asi que ese extremo sube a .92; el morado, que es donde esta el texto, se queda en .82. Con las fotos reales del hero queda en 4,6:1 o mejor. Si se cambia alguno de los dos colores, hay que volver a medir. */ --bv-grad-lazo: linear-gradient(115deg, rgba(121,56,173,.82) 0%, rgba(121,56,173,.845) 42%, rgba(181,52,134,.92) 100%); --bv-shadow-rgb: 121, 56, 173; --bv-grad-velo: linear-gradient(115deg, rgba(121,56,173,.88) 0%, rgba(181,52,134,.80) 100%); /* Superficies: el off-white calido pega con el rosa, no con el morado */ --bg-soft: #F8F6FB; --wash: #F3ECFA; --wash-2: #E9DEF6; --line-marca: #D3BCE9; --line-marca-2: #E2D2F2; --wash-3: #E0CFF3; --line: #E9E3F1; --line-2: #DCD3EC; --shadow-2: 0 2px 6px rgba(82,82,81,.08), 0 20px 48px rgba(var(--bv-shadow-rgb),.16); --color-primary: var(--bv-pink); --color-primary-light: #9558C7; --color-primary-dark: #5F2A88; --color-primary-rgb: 121, 56, 173; --color-secondary: var(--bv-orange); --color-secondary-light: #D14FA3; --color-secondary-dark: #8F2569; --color-secondary-rgb: 181, 52, 134; --color-accent: var(--bv-pink); --color-accent-light: #9558C7; --color-accent-rgb: 121, 56, 173; --gradient-primary: var(--bv-grad); --gradient-tienda: var(--bv-grad); --gradient-accent: var(--bv-grad); --gradient-cyber: var(--bv-grad); --gradient-glow: linear-gradient(135deg, rgba(121,56,173,.3) 0%, rgba(181,52,134,.3) 100%); --primary: var(--bv-pink); --primary-dark: #5F2A88; --primary-light: var(--color-primary-light); --secondary: var(--bv-orange); --background: var(--bv-pink); --brand: var(--bv-pink); --brand-2: #5F2A88; --brand-soft: var(--wash); --accent: var(--bv-pink); /* Aqui si dan el contraste de sobra, pero se dejan un punto por debajo para que el texto sobre --wash siga holgado (6:1). */ --pink-texto: #6B2F9A; --naranja-texto: #9E2A74; --calc-rgb: 121, 56, 173; --calc-nota: #D9A6F0; } /* --------------------------------------------------------------------- Club: los dos bloques que seguian en oscuro .club-how-section y .club-final-cta se pintaban con --section-bg / --section-bg-alt, que en cms_config son #1a1a1a y #FF6F00. El tema claro ya ponia la tinta en --ink (#262626), asi que "¿Cómo funciona?" quedaba texto oscuro sobre negro (1,15:1: invisible) y el CTA final, morado sobre naranja. Aqui pasan al mismo claro que el resto de la pagina. --------------------------------------------------------------------- */ body.tema-claro .club-how-section { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } body.tema-claro .club-steps-container::before { background: var(--bv-grad); opacity: .35; } body.tema-claro .club-step-number { background: var(--bv-grad); box-shadow: 0 12px 30px rgba(var(--bv-shadow-rgb), .28); } body.tema-claro .club-step-card h3 { color: var(--ink); } body.tema-claro .club-step-card p { color: var(--ink-3); } body.tema-claro .club-final-cta { background: var(--wash); border-top: 1px solid var(--line); } body.tema-claro .club-final-cta::before { background: radial-gradient(circle, rgba(var(--bv-shadow-rgb), .10) 0%, transparent 70%); } body.tema-claro .club-cta-content h2 { color: var(--ink); } body.tema-claro .club-cta-content p { color: var(--ink-2); } body.tema-claro .club-section-tag { background: #fff; border: 1px solid var(--line-marca); color: var(--pink-texto); } body.tema-claro .club-section-header p { color: var(--ink-3); } /* ===================================================================== MOVIL — zonas de toque La auditoria daba decenas de enlaces de 18 px de alto (todo el pie), los puntos del slider en 30x4 y la hamburguesa en 34. La recomendacion (WCAG 2.5.8 / iOS HIG) es 44 px. Se agranda el AREA, no el dibujo: el filete del slider sigue midiendo 4 px porque se pinta con background-clip: content-box dentro de un boton mas alto. ===================================================================== */ @media (max-width: 767px) { /* Pie: cada enlace, una fila comoda */ body.tema-claro .main-footer .footer-links a, body.tema-claro .main-footer .footer-contact a { display: inline-block; padding: .7rem 0; line-height: 1.25; } /* Nombre del reseñista: enlaza a su perfil de Google */ body.tema-claro .testimonial-author a { display: inline-block; padding: .55rem 0; } body.tema-claro .main-footer .footer-links li { margin: 0; } /* Slider del hero: area de 44 px, filete de 4 px */ body.tema-claro .hero-marca .hm-puntos { gap: .15rem; } body.tema-claro .hero-marca .hm-punto { height: 44px; padding: 20px 0; box-shadow: none; } /* El enlace al Club dentro del lazo es una llamada a la accion */ body.tema-claro .hero-marca .hm-mas { padding: .45rem 0; } /* Telefonos y correos de /contacto */ body.tema-claro .info-value.info-link { display: inline-block; padding: .5rem 0; } /* Etiqueta de categoria del blog: medía 28 px de alto */ body.tema-claro .blog-category-badge { min-height: 36px; display: inline-flex; align-items: center; } } /* La hamburguesa y el selector de idioma, en cualquier tema */ @media (max-width: 767px) { .mobile-toggle { min-width: 44px; min-height: 44px; } .lang-switcher-toggle { min-height: 44px; } .main-header .logo { display: inline-flex; align-items: center; min-height: 44px; } } /* ===================================================================== ANIMACIONES Criterio: se notan poco y no marean. Nada se desplaza mas de 18 px, las entradas duran 620 ms y los estados de raton 220 ms. Todo se apaga entero con prefers-reduced-motion (ver el final del bloque). El estado OCULTO no se declara aqui: lo inyecta includes/animaciones.php en linea, antes del primer pintado, para que no haya parpadeo y para que sin JavaScript no se oculte nada. Aqui solo van la transicion y el estado final. ===================================================================== */ /* Las reglas de aparicion (estado oculto, transicion y .bv-visto) las emite includes/animaciones.php a partir de UNA sola lista de selectores. Aqui habia una copia hecha a mano de esa lista, y era la que devolvia la visibilidad: anadir un selector en el PHP lo ocultaba pero no lo destapaba, y el bloque se quedaba invisible en produccion. Si hay que tocar la lista, se toca en animacionesSelector() y ya esta. */ /* ---- Raton: tarjetas --------------------------------------------------- Se levantan 4 px y la sombra se abre. Nada de escalados: en una rejilla de precios el escalado descuadra la lectura. */ body.tema-claro :is(.pk-card, .pb-card, .testimonial-card, .club-product-card, .club-featured-card, .store-card, .blog-card, .product-card, .review-card) { transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s cubic-bezier(.4, 0, .2, 1), border-color .22s ease; } @media (hover: hover) { body.tema-claro :is(.pk-card, .pb-card, .testimonial-card, .club-product-card, .club-featured-card, .store-card, .blog-card, .product-card, .review-card):hover { transform: translateY(-4px); box-shadow: 0 2px 6px rgba(82,82,81,.07), 0 18px 40px rgba(var(--bv-shadow-rgb), .16); } } /* ---- Raton: botones de marca ------------------------------------------ El degradado se pinta al doble de ancho y se desplaza: parece que una luz recorre el boton. Es mas fino que cambiar de color. */ body.tema-claro :is(.bv-pill, .btn-primary, .cp-btn, .store-btn-primary, .club-cta-btn, .ir-btn) { background-size: 200% 100%; background-position: 0% 50%; transition: background-position .45s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, .2, 1); } @media (hover: hover) { body.tema-claro :is(.bv-pill, .btn-primary, .cp-btn, .store-btn-primary, .club-cta-btn, .ir-btn):hover { background-position: 100% 50%; } } body.tema-claro :is(.bv-pill, .btn-primary, .cp-btn, .store-btn-primary, .club-cta-btn, .ir-btn):active { transform: translateY(1px); } /* ---- Raton: la flecha de "ver premio" avanza --------------------------- */ body.tema-claro .club-product-btn i, body.tema-claro .club-product-btn svg { transition: transform .22s cubic-bezier(.4,0,.2,1); } @media (hover: hover) { body.tema-claro .club-product-btn:hover i, body.tema-claro .club-product-btn:hover svg { transform: translateX(3px); } } /* ---- Raton: la foto del producto respira ------------------------------- */ body.tema-claro :is(.product-card, .club-product-card, .blog-card) :is(img, .product-image img) { transition: transform .5s cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) { body.tema-claro :is(.product-card, .club-product-card, .blog-card):hover :is(img, .product-image img) { transform: scale(1.035); } } /* ---- Enlaces de texto: el subrayado crece ------------------------------ */ body.tema-claro :where(main a:not([class])) { text-decoration-thickness: 1px; text-underline-offset: .16em; transition: text-decoration-color .2s ease, text-underline-offset .2s ease; } body.tema-claro :where(main a:not([class])):hover { text-underline-offset: .24em; } /* ---- El lazo respira --------------------------------------------------- 18 s por ciclo y un 0,6 % de escala: no se ve moverse, se percibe que la pagina esta viva. Es la forma de la marca, no conviene tocarla mas. */ @keyframes bv-lazo-respira { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.006) rotate(.35deg); } } body.tema-claro .hero-marca .hm-bocadillo::before { animation: bv-lazo-respira 18s ease-in-out infinite alternate; transform-origin: 38% 55%; } /* ---- La foto del hero se acerca despacio (Ken Burns) ------------------- 28 s, 3 % de acercamiento. Solo la diapositiva visible, para no gastar composicion en las que estan ocultas. */ @keyframes bv-kenburns { from { transform: scale(1); } to { transform: scale(1.035); } } body.tema-claro .hero-marca .hm-foto .hm-img.activa img { animation: bv-kenburns 28s ease-out forwards; } /* ---- Cabecera: se compacta al bajar ------------------------------------ */ body.tema-claro .main-header { transition: padding .25s ease, box-shadow .25s ease, background-color .25s ease; } body.tema-claro .main-header.scrolled { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(82,82,81,.07); } /* ---- Apagado total ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.bv-js :is(.pk-card, .pb-card, .am-item, .ah-fila, .testimonial-card, .club-product-card, .product-card, .blog-card, .store-card) { opacity: 1 !important; transform: none !important; transition: none !important; } body.tema-claro .hero-marca .hm-bocadillo::before, body.tema-claro .hero-marca .hm-foto .hm-img.activa img { animation: none; } body.tema-claro *, body.tema-claro *::before, body.tema-claro *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ===================================================================== SECCION DE TARIFAS DE FIBRA (compartida: home y /zona/*) web/includes/sections/tarifas-fibra.php nacio en el tema oscuro, con tarjetas negras translucidas y acentos cian (#00d4ff) y morado viejo (#7339aa). Se deja el fichero como esta —sigue sirviendo a las paginas que aun son oscuras— y aqui se pasa a claro. ===================================================================== */ body.tema-claro .fibra-tariffs-section { background: var(--bg-soft); } body.tema-claro .fibra-section-header h2 { color: var(--ink); } body.tema-claro .fibra-section-header p { color: var(--ink-3); } body.tema-claro .fibra-section-tag { background: #fff; border: 1px solid var(--line-marca); color: var(--pink-texto); } body.tema-claro .fibra-card { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); box-shadow: var(--shadow-1); color: var(--ink); } body.tema-claro .fibra-card:hover { border-color: var(--bv-pink); box-shadow: 0 2px 6px rgba(82,82,81,.07), 0 22px 46px rgba(var(--bv-shadow-rgb), .16); } body.tema-claro .fibra-card-featured { background: var(--wash); border-color: var(--bv-pink); box-shadow: 0 2px 6px rgba(82,82,81,.07), 0 18px 40px rgba(var(--bv-shadow-rgb), .18); } body.tema-claro .fibra-card-featured:hover { border-color: var(--bv-pink); } body.tema-claro .fibra-badge, body.tema-claro .fibra-speed-icon { background: var(--bv-grad); color: #fff; } /* background-image, NO el atajo: .speed-number se pinta con background-clip:text y el atajo lo resetea a border-box, dejando el numero como un bloque de color macizo. Mismo tropiezo que los puntos del slider del hero. */ body.tema-claro .fibra-speed .speed-number { background-image: var(--bv-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.tema-claro .fibra-speed .speed-unit { color: var(--ink-2); } body.tema-claro .fibra-card :is(h3, .fibra-card-name) { color: var(--ink); } body.tema-claro .fibra-card :is(li, p, .fibra-feature) { color: var(--ink-2); } body.tema-claro .fibra-price :is(.price-amount, .price-currency) { color: var(--ink); } body.tema-claro .fibra-price :is(.price-period, .price-details) { color: var(--ink-3); } /* ===================================================================== /zona/* — PAGINAS DE COBERTURA (SEO local) Es la plantilla mas antigua que quedaba: secciones en #1a1a1a, una en naranja plano, texto blanco y acentos cian/amarillo. Tiene su propio