/* ============================================================================= CELLIFIX — CAPA BASE COMPARTIDA Carga SIEMPRE así, y en este orden: tokens.css → base.css → Qué hay aquí: 1. Reglas de idioma (incluida la que evita el parpadeo). 2. El botón de sol/luna. 3. Correcciones de contraste de lo que estaba clavado a fondo oscuro: pie, cabecera, desplegables, menú móvil, formularios, aviso de cookies, fondo decorativo y el teléfono 3D de la portada. Qué NO hay: colores literales. Todo sale de tokens.css. Si necesitas un color que no existe como token, créalo en tokens.css — no lo escribas aquí. ========================================================================== */ /* =============================================================== 1. IDIOMA */ /* Las hojas antiguas ya traen `body:not(.lang-en) [data-en]{display:none}`. Se repite mirando porque el arranque de _head.html marca (todavía no existe ) y así el idioma correcto sale ya en el primer pintado, sin que se vea un instante del otro. */ html:not(.lang-en) [data-en] { display: none !important; } html.lang-en [data-es] { display: none !important; } /* ================================================================ 2. LOGO */ /* El logo tiene DOS variantes y se elige por CSS, no por JS: `data-theme` ya está puesto en antes del primer pintado, así que nunca se ve el logo equivocado ni un instante. NUNCA recolorear el logo con `filter` — es regla de marca. La variante de fondo oscuro lleva "ifix", la antena y la llave en BLANCO: sobre fondo blanco desaparece medio logo. Y la original es negro+rojo: sobre negro desaparece la otra mitad. Por eso hacen falta las dos. */ /* Se escriben con DOS clases (`.brand-logo.logo-…`) a propósito. Con una sola clase empatan en especificidad con `.brand-logo{display:block}` de index.css, que se carga DESPUÉS y ganaba por orden: se veían los dos logos a la vez. Detectado en la comprobación con navegador; no lo bajes a una clase. */ .brand-logo.logo-oscuro, img.logo-oscuro { display: none; } .brand-logo.logo-claro, img.logo-claro { display: block; } [data-theme="dark"] .brand-logo.logo-claro, [data-theme="dark"] img.logo-claro { display: none; } [data-theme="dark"] .brand-logo.logo-oscuro, [data-theme="dark"] img.logo-oscuro { display: block; } /* =============================================== 3. BOTÓN CLARO / OSCURO */ .tema-btn { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; flex: none; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--header-text); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .tema-btn:hover { color: var(--red-ink); border-color: var(--red-edge); background: var(--red-soft); } .tema-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .tema-btn svg { width: 1.05rem; height: 1.05rem; display: block; } /* Un solo botón con los dos iconos dentro; se enseña el del modo al que te llevaría pulsarlo. En claro se ve la luna ("pásame a oscuro"). */ .tema-btn .ico-luna { display: block; } .tema-btn .ico-sol { display: none; } [data-theme="dark"] .tema-btn .ico-luna { display: none; } [data-theme="dark"] .tema-btn .ico-sol { display: block; } /* En el panel móvil el botón se estira y se etiqueta, porque ahí un icono suelto de 2rem no se entiende. */ .m-panel .tema-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem .2rem; border-bottom: 1px solid var(--line); color: var(--header-text); font-family: var(--disp); font-weight: 800; font-size: 1.02rem; } .m-panel .tema-fila .tema-btn { width: 2.6rem; height: 2.6rem; } .m-panel .tema-fila .tema-btn svg { width: 1.2rem; height: 1.2rem; } /* ============================================ 3. SELECTOR DE IDIOMA */ .lang-switch { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; background: transparent; flex: none; } .lang-switch button { background: transparent; border: 0; padding: .26rem .46rem; font-size: .92rem; line-height: 1; cursor: pointer; opacity: .45; transition: opacity .2s ease, background .2s ease; } .lang-switch button[aria-pressed="true"] { opacity: 1; background: var(--red-soft-2); } .lang-switch button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; } /* ==================================================== 4. PIE DE PÁGINA */ /* Desde el 2026-08-05 el pie SIGUE AL TEMA: gris muy claro en modo claro, casi negro en oscuro. Antes iba oscuro en los dos y en modo claro quedaba como un bloque negro al final de una página blanca. Sigue usando sus propios tokens --footer-* y NO --body-c / --muted / --line: así el día que se quiera volver a un pie oscuro permanente basta con cambiar los cuatro tokens, sin tocar una sola regla. */ footer { background: var(--footer-bg); color: var(--footer-muted); border-top: 1px solid var(--footer-line); } footer h2, footer h3, footer b, footer strong { color: var(--footer-text); } .foot a, .foot-legal a, .foot-meta a { color: var(--footer-muted); } /* Hover en ROJO, que es el color de acción de la marca. Antes se limitaba a aclarar el gris, que sobre fondo claro no se nota. */ .foot a:hover, .foot-legal a:hover, .foot-meta a:hover { color: var(--red-ink); } .foot-social a { color: var(--footer-muted); border-color: var(--footer-line); background: transparent; } .foot-social a:hover { color: var(--red-ink); border-color: var(--red-edge); background: var(--footer-hover); } .foot-legal { border-top-color: var(--footer-line); } /* Logo del pie: mismo par claro/oscuro que el del encabezado. El archivo `-dark-bg` es la variante BLANCA y sobre el pie claro sería invisible. El logo NUNCA se recolorea con filtros: se cambia de archivo. */ .foot-logo.logo-oscuro { display: none; } .foot-logo.logo-claro { display: block; } [data-theme="dark"] .foot-logo.logo-claro { display: none; } [data-theme="dark"] .foot-logo.logo-oscuro { display: block; } /* ======================================================= 5. CABECERA */ header { background: var(--header-bg); border-bottom: 1px solid var(--header-line); color: var(--header-text); } header.scrolled { background: var(--header-bg-scroll); border-bottom-color: var(--header-line); box-shadow: var(--shadow-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav-links, .nav-links > a, .nav-links .nav-dd > .nav-dd-t { color: var(--header-text); } .nav-links > a:hover, .nav-dd:hover > .nav-dd-t { color: var(--red-ink); } .ig-link { color: var(--header-text); } .ig-link:hover { color: var(--red-ink); } /* Desplegables del escritorio */ .nav-dd-menu { background: var(--header-menu-bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .nav-dd-menu a { color: var(--body-c) !important; } .nav-dd-menu a:hover { background: var(--red-soft); color: var(--red-ink) !important; } /* Menú móvil */ .m-shell > summary { color: var(--header-text); border-color: var(--line-2); } .m-panel { background: var(--header-menu-bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); } .m-cat { border-bottom-color: var(--line); } .m-cat > summary, .m-link { color: var(--header-text); border-bottom-color: var(--line); } .m-cat > summary .mcaret { color: var(--red); } .m-cat .m-sub a { color: var(--body-c); } .m-cat .m-sub a:active, .m-cat .m-sub a:hover { background: var(--red-soft); color: var(--red-ink); } /* ==================================================== 6. FORMULARIOS */ .field input, .field textarea, .field select, input[type="text"], input[type="tel"], input[type="email"], input[type="search"], textarea, select { background: var(--input-bg); border: 1px solid var(--input-line); color: var(--input-text); } /* Un `` SIN atributo `type` es de texto, pero `input[type="text"]` NO lo encuentra. Por eso los campos de /kissimmee y /omaha salían con el borde gris del navegador (#767676) en vez del del tema. Va dentro de `:where()` a propósito: así pesa lo mismo que un selector de etiqueta y cualquier hoja de página lo sigue pudiendo pisar, que es como estaba pensado el orden tokens -> base -> página. */ :where(input:not([type]), input[type="url"], input[type="number"], input[type="date"], input[type="password"]) { background: var(--input-bg); border: 1px solid var(--input-line); color: var(--input-text); } .field input::placeholder, .field textarea::placeholder, input::placeholder, textarea::placeholder { color: var(--input-ph); opacity: 1; } .field input:focus, .field textarea:focus, .field select:focus, input:focus, textarea:focus, select:focus { border-color: var(--input-focus); outline: none; box-shadow: 0 0 0 3px var(--input-focus-ring); } label, .field > span, legend { color: var(--body-c); } /* Solo lectura y deshabilitado: gris, NUNCA con tinte rojo. El campo "equipo" de los modales del catálogo salía con fondo y texto rojos y parecía un error de validación, no un dato ya rellenado. */ input[readonly], textarea[readonly], select[readonly] { background: var(--input-readonly-bg); color: var(--text); cursor: default; } input:disabled, textarea:disabled, select:disabled, input[readonly]:focus, textarea[readonly]:focus { box-shadow: none; } input:disabled, textarea:disabled, select:disabled { background: var(--input-disabled-bg); color: var(--muted); cursor: not-allowed; opacity: 1; /* iOS baja la opacidad por su cuenta y lo borra */ } /* AUTOCOMPLETADO de Chrome. Chrome pinta el campo con SU amarillo/azul y no deja cambiarlo con `background`: el único recurso es una sombra interior enorme del color que toca, y `-webkit-text-fill-color` para el texto. Sin esto, un campo autocompletado se veía distinto a los de al lado. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--input-text); -webkit-box-shadow: 0 0 0 100px var(--input-bg) inset; box-shadow: 0 0 0 100px var(--input-bg) inset; caret-color: var(--input-text); } input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--input-bg) inset, 0 0 0 3px var(--input-focus-ring); box-shadow: 0 0 0 100px var(--input-bg) inset, 0 0 0 3px var(--input-focus-ring); } /* Casillas y radios: que el check salga en rojo de marca en los dos temas. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--red); } /* Mensajes de error y de éxito. Los colores viven en tokens.css (--error / --ok) porque antes cada modal traía el suyo a mano, pensado para fondo negro, y sobre blanco no se leía. */ .form-msg.bad, .cob-msg.bad, .lead-msg.bad, .local-form-msg.bad, [role="alert"].bad, .msg-error { color: var(--error); } .form-msg.ok, .cob-msg.ok, .lead-msg.ok, .local-form-msg.ok, .msg-ok { color: var(--ok); } .cob-ok svg, .lead-ok svg { color: var(--ok); } /* Campo que no pasó la validación */ input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--error); } /* ======================================================= 7. BOTONES */ /* `.btn-gold` es el nombre viejo del botón secundario. Se conserva la clase (está en 25 sitios del HTML) pero ya no es dorado: es el secundario rojo de contorno. No renombrar sin editar las 25 plantillas. */ .btn-gold { background: transparent; border-color: var(--line-2); color: var(--text); } .btn-gold:hover { background: var(--red-soft); border-color: var(--red-edge); color: var(--red-ink); box-shadow: none; } .btn-red { box-shadow: var(--shadow-btn); } .btn-ghost { color: var(--body-c); } .btn-ghost:hover { color: var(--red-ink); } .btn-outline { border-color: var(--line-2); color: var(--text); } .btn-outline:hover { border-color: var(--red-edge); color: var(--red-ink); background: var(--red-soft); } .btn-wa { background: linear-gradient(180deg, var(--wa-hi), var(--wa)); color: #fff; } /* --- Elevación al pasar el ratón (Fase 4) ------------------------------- Antes `.btn-red:hover` repetía la MISMA sombra que en reposo, así que el botón principal del sitio no respondía de ninguna forma al ratón. Ahora todos los botones suben 2px y ganan sombra; al pulsar bajan otra vez, que es lo que hace que se sienta un botón físico y no un rectángulo. Solo se anima transform y box-shadow: las dos propiedades que el navegador compone en la GPU, así que no provoca recálculo de diseño. */ .btn { transition: color .2s ease, border-color .2s ease, background .2s ease, transform .28s var(--lift-ease), box-shadow .28s var(--lift-ease); } .btn:hover { transform: translateY(var(--lift)); } .btn:active { transform: translateY(0); transition-duration: .06s; } .btn-red:hover { box-shadow: 0 2px 4px rgba(168,14,0,.22), 0 14px 30px -12px rgba(225,6,0,.55); } .btn-wa:hover { box-shadow: 0 2px 4px rgba(10,92,44,.22), 0 14px 30px -12px rgba(10,92,44,.5); } .btn-gold:hover { box-shadow: var(--shadow-sm); } /* Nadie que haya pedido menos movimiento debería ver esto. */ @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } } :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; } ::selection { background: var(--red-soft-2); color: var(--text); } /* ============================================ 8. FONDO DECORATIVO */ /* El fondo era negro puro con rejilla dorada. Ahora sigue al tema y la rejilla se dibuja con --grid-line, que es gris casi imperceptible en claro y blanco tenue en oscuro. */ .backdrop { background: var(--bg); } .backdrop::after { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); } /* ============================================= 9. AVISO DE COOKIES */ .cfx-consent { background: var(--card); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); } .cfx-consent p { color: var(--body-c); } .cfx-consent a { color: var(--red-ink); } .cfx-consent button { border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; } .cfx-consent-decline { background: transparent; color: var(--body-c); } .cfx-consent-decline:hover { background: var(--bg-2); color: var(--text); } .cfx-consent-accept { background: var(--red); color: var(--text-on-accent); border-color: var(--red) !important; } .cfx-consent-accept:hover { background: var(--red-hover); border-color: var(--red-hover) !important; } .cfx-consent-reopen { background: var(--card); color: var(--body-c); border: 1px solid var(--line-2); } /* ====================================== 10. TARJETAS Y SUPERFICIES */ /* Los degradados de tarjeta (card → bg-2) quedaban bien sobre negro; en claro se ven sucios. Se dejan planas, con un borde sutil, que es lo que pidió Diomes: limpio y sin adornos. */ .svc, .card, .plan, .eq-card, .fib-card, .loc-card, .blog-card { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .svc:hover, .card:hover, .eq-card:hover, .fib-card:hover, .blog-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-md); } .sect-alt { background: var(--bg-2); } .sect-line { border-top-color: var(--line); } /* =========================================== 11. TELÉFONO 3D DEL HERO */ /* Estaba pintado con marrones y dorados fijos. Se neutraliza a grises para que funcione en los dos temas: es un teléfono, no una joya. */ .phone-body { background: linear-gradient(155deg, #4a4a4f 0%, #2a2a2e 45%, #171719 100%); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); } .phone-body::before { background: linear-gradient(155deg, rgba(255,255,255,.14), transparent 30%, transparent 70%, rgba(255,255,255,.06)); } .phone-depth { background: #141416; box-shadow: 0 0 0 1px var(--line); } .phone-screen { background: linear-gradient(170deg, #1c1c1f 0%, #0e0e10 100%); } .stage-shadow { background: radial-gradient(50% 50% at 50% 50%, rgba(17,17,17,.14), transparent 70%); } /* La pantalla del teléfono es oscura en los dos temas, así que lo que va ENCIMA se queda claro siempre — no puede seguir a --text. */ .diag-head { color: var(--red-hi); } .diag-head::after { background: var(--red-edge); } .ring .track { stroke: rgba(255, 255, 255, .16); } .ring-label b { color: #f5f5f5; } .ring-label span { color: #a1a1aa; } .check { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #e4e4e7; } .scan { background: linear-gradient(180deg, transparent 0%, var(--red-soft-2) 50%, transparent 100%); } /* Los globitos flotantes van FUERA del teléfono, sobre el fondo de la página: esos sí siguen al tema. */ .chip { background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); color: var(--text); } .chip .icon { color: var(--red); } .chip small { color: var(--muted); } /* ================================================= 12. CINTA / MARQUEE */ .marquee { background: var(--bg-2); border-block: 1px solid var(--line); box-shadow: none; } .marquee-seq { color: var(--muted); } .marquee-seq svg { fill: var(--red); } /* ====================================================== 13. DETALLES */ .eyebrow { color: var(--red-ink); } .eyebrow::before { background: linear-gradient(90deg, transparent, var(--red)); } .trust-item .icon, .hero-note .icon { color: var(--red); } .trust-item span { color: var(--muted); } .trust-item b { color: var(--text); } /* El brillo animado sobre los titulares se quita: sobre blanco no se ve y el encargo pedía menos animación y menos degradado. */ .shine { background: none; -webkit-text-fill-color: currentColor; color: var(--text); animation: none; } .hero h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--red-ink); animation: none; } .hero h1 em::after { background: var(--red); opacity: 1; } /* Modales: fondo del velo y caja */ .modal-scrim, .lead-scrim, .cob-scrim, .wa-scrim { background: rgba(0, 0, 0, .55); } .modal-box, .lead-box, .cob-box, .wa-box { background: var(--card); color: var(--text); border: 1px solid var(--line-2); box-shadow: var(--shadow-lg); } /* ============================================ 8. DESTELLO DE RAYO EN LAS FOTOS Pedido de Diomes (2026-08-06): "las cajas donde están las imágenes, un efecto color amarillo que cambie con el rojo, que brillen como un rayo". QUÉ ES: un reflejo fino que RECORRE el borde de la caja, pasando de rojo a amarillo y de vuelta. No pinta la caja: viaja por el filo, como una chispa por un cable. Por eso el amarillo no vuelve a ser un color del sitio — sigue habiendo blanco, negro, rojo y grises— y el destello es un efecto. CÓMO: el truco del "borde con degradado". Un ::after ocupa toda la caja, se le pinta el degradado y se recorta con dos máscaras que se restan (`mask-composite`), dejando visible SOLO el marco de 1.5px. Mover `background-position` hace que la chispa recorra el borde. No se anima ningún tamaño ni posición del elemento, así que el navegador no recalcula el diseño: va en la GPU y no afecta al desplazamiento. VA AQUÍ, EN base.css, A PROPÓSITO: estas cajas viven en cinco hojas distintas (index, planes, equipos, fibra, ubicacion) y tres de ellas son copias entre sí. Poniéndolo una vez aquí no se repite el problema de tener que arreglar el mismo detalle cuatro veces. Se declara DESPUÉS de las hojas de página en el orden de carga... no: base carga ANTES, así que se sube la especificidad con :where() a 0 y se apoya en que ninguna de esas hojas define ::after en estas cajas (verificado). */ .rep-item, .cinta-item, .eq-card, .car-wrap, .gallery-local figure { position: relative; } .rep-item::after, .cinta-item::after, .eq-card::after, .car-wrap::after, .gallery-local figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; /* 1.5px se midio y SI pintaba (~700 px de borde encendido), pero a tamano real no se veia: un filo de hora y media de pixel no lee como "rayo". 2.5px + un halo del propio color hacen que se lea como LUZ, no como una raya. El halo va con drop-shadow sobre el pseudo-elemento ya recortado, asi que solo brilla el marco, no la caja. */ padding: 2.5px; pointer-events: none; z-index: 3; background: linear-gradient(115deg, transparent 26%, var(--rayo-1) 38%, var(--rayo-2) 50%, var(--rayo-1) 62%, transparent 74%); filter: drop-shadow(0 0 5px var(--rayo-2)) drop-shadow(0 0 2px var(--rayo-1)); background-size: 300% 100%; /* CUIDADO con estos porcentajes: en `background-position` el 100% NO es "el ancho de la caja", es "lo que sobra del degradado". Con `background-size: 300%` el rango útil es 100% (banda fuera por la izquierda) → 0% (fuera por la derecha), y el destello cruza el centro al 50%. El primer intento usaba 120% → -60% y la chispa NUNCA entraba en cuadro: se veía la parte transparente del degradado y parecía que el efecto no existía. */ background-position: 100% 0; /* Deja ver solo el marco: se pinta todo y se resta el interior. */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; animation: rayoPasa 7s cubic-bezier(.5,0,.5,1) infinite; } /* El destello NO cruza todas las cajas a la vez: eso sería un letrero de feria. Cada una entra con su retraso, así que en pantalla se ve una chispa suelta de vez en cuando. Los primos (5, 7, 11…) evitan que se sincronicen. */ .rep-item:nth-child(3n+2)::after, .eq-card:nth-child(3n+2)::after, .cinta-item:nth-child(3n+2)::after { animation-delay: 2.3s } .rep-item:nth-child(3n)::after, .eq-card:nth-child(3n)::after, .cinta-item:nth-child(3n)::after { animation-delay: 4.7s } .gallery-local figure:nth-child(2n)::after { animation-delay: 3.1s } @keyframes rayoPasa { 0% { background-position: 100% 0; opacity: 0 } 6% { opacity: var(--rayo-op) } 24% { background-position: 0% 0; opacity: var(--rayo-op) } 30%, 100% { background-position: 0% 0; opacity: 0 } } /* Al pasar el ratón (o al enfocar con el teclado) la chispa se queda quieta y encendida en el borde: confirma que la caja es pulsable. */ .rep-item:hover::after, .rep-item:focus-visible::after, .cinta-item:hover::after, .cinta-item:focus-visible::after, .eq-card:hover::after, .car-wrap:hover::after, .gallery-local figure:hover::after { animation: none; opacity: 1; background-position: 50% 0; } /* Quien pide menos movimiento no ve ninguna animación: se queda un filo rojo fijo, sin recorrido y sin amarillo parpadeando. */ @media (prefers-reduced-motion: reduce) { .rep-item::after, .cinta-item::after, .eq-card::after, .car-wrap::after, .gallery-local figure::after { animation: none; opacity: .5; background: var(--rayo-1); } } /* ================================ 9. SECCIONES OSCURAS: ROMPER LA MONOTONÍA Diomes, 2026-08-06: "el sitio se ve muy frío, muy claro, aburrido". Tenía razón y se puede medir: la portada son ONCE secciones de 9.400px de alto y TODAS son blancas (#ffffff) o el gris alterno (#f7f7f8). Entre esos dos colores hay un 3% de diferencia, así que la alternancia no se ve: el visitante baja por una sábana blanca sin un solo punto donde parar el ojo. La respuesta NO es volver al diseño negro (eso se decidió y se descartó), sino darle RITMO: dos bloques francamente oscuros que sirven de ancla, con el resto claro. Es lo que hacen las páginas que se sienten "caras". POR QUÉ ESTO SON SOLO ~20 LÍNEAS: no se reestilan las tarjetas, ni los textos, ni los botones de dentro. Se REDEFINEN LOS TOKENS dentro de la sección y todo lo que hay debajo se adapta solo, porque todo el sitio lee de tokens.css. Ese era justo el objetivo de haber centralizado los colores. Solo en MODO CLARO: en modo oscuro la página ya es oscura y estas secciones se distinguen con el borde y el resplandor de abajo, sin tocar los tokens. */ html:not([data-theme="dark"]) #galeria, html:not([data-theme="dark"]) #resenas { /* Superficies */ --bg: #0e0e11; --bg-2: #141418; --card: #17171b; --card-2: #1d1d22; --surface-sunk: #0a0a0c; /* Bordes */ --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .18); /* Texto — mismos valores que usa el tema oscuro, para no inventar grises */ --text: #f5f5f5; --body-c: #c4c4cc; --muted: #9b9ba4; /* El rojo de TEXTO sobre negro: #C21100 da 2.4:1 y no se leería. */ --red-ink: #FF5F52; --gold: #FF5F52; --red-soft: rgba(255, 95, 82, .10); --red-soft-2: rgba(255, 95, 82, .20); --red-edge: rgba(255, 95, 82, .35); /* Sombras: sobre negro las claras no existen */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, .6); --shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, .8); background: var(--bg); color: var(--body-c); border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); } /* Un resplandor rojo muy abierto detrás del contenido: es lo que evita que el bloque negro parezca un agujero. Va bajo el contenido, nunca encima. */ html:not([data-theme="dark"]) #galeria::before, html:not([data-theme="dark"]) #resenas::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 45% at 50% 0%, rgba(225, 6, 0, .16), transparent 70%), radial-gradient(45% 40% at 85% 100%, rgba(225, 6, 0, .08), transparent 72%); } html:not([data-theme="dark"]) #galeria > *, html:not([data-theme="dark"]) #resenas > * { position: relative; z-index: 1; } /* La sección alterna clara también era invisible (#f7f7f8 sobre #ffffff = 3% de diferencia). Se le da un punto más de presencia y un filo arriba, que es lo que hace que se lea como una banda y no como un accidente. */ html:not([data-theme="dark"]) .sect-alt { background: linear-gradient(180deg, #f2f2f5 0%, #f7f7f8 55%, #fbfbfc 100%); border-top: 1px solid var(--line); } /* --- La galería, en grande ------------------------------------------------- Tus fotos de la tienda estaban dentro del carril de 1160px y con la caja pequeña: el mejor material del sitio, del tamaño de un sello. Se saca del carril hasta 1400px y se le da aire. En celular ya iba en vertical (4/5), que es el formato correcto ahí, así que eso no se toca. */ #galeria .rail { max-width: 1400px; } #galeria .car-wrap { border-radius: 20px; border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9); } @media (min-width: 980px) { #galeria .car-slide { aspect-ratio: 16 / 9; } } /* Los botones de mover el carrusel sobre fondo oscuro: antes tomaban --card-2, que aquí ya es oscuro, y quedaban invisibles sobre la foto. */ #galeria .car-btn { background: rgba(10, 10, 12, .55); border-color: rgba(255, 255, 255, .28); color: #ffffff; } #galeria .car-btn:hover { background: rgba(225, 6, 0, .85); border-color: var(--red); }