/* ============================================================
Ciclotech — estilos del banner destacado + iconos de confianza
(rediseño: fondo con profundidad/animación en el banner,
iconos más grandes con un gesto de movimiento cada uno)
Todas las clases y variables llevan el prefijo "cb-" (Ciclotech
Banner) para no chocar con clases/variables ya existentes en el
proyecto Django/Tailwind real. Si algún nombre "cb-*" ya existe
en el proyecto, renómbralo antes de integrar.
Requiere las fuentes de Google Fonts (añadir UNA vez en el
de la plantilla base, no en cada include):
============================================================ */
:root {
--cb-ink: #0a1628;
--cb-ink-2: #12263f;
--cb-ink-3: #1a3352;
--cb-paper: #f2f6f4;
--cb-paper-2: #e7ede9;
--cb-line: #d7e0da;
--cb-ink-text-dim: #57685f;
--cb-green: #22c55e;
--cb-green-soft: #86e6ac;
--cb-teal: #14b8a6;
--cb-copper: #c17a3e;
--cb-copper-soft: #e7bb8d;
--cb-white: #ffffff;
--cb-font-display: "Unbounded", "Arial Black", sans-serif;
--cb-font-body: "Sora", "Segoe UI", sans-serif;
--cb-font-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* ============================================================
BANNER
============================================================ */
.cb-banner {
position: relative;
overflow: hidden;
border-radius: 22px;
background: linear-gradient(160deg, var(--cb-ink) 0%, var(--cb-ink-2) 55%, var(--cb-ink-3) 100%);
padding: 52px 44px;
isolation: isolate;
}
.cb-banner-traces {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.55;
}
.cb-banner-glow {
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(34,197,94,0.28), transparent 70%);
top: -160px;
right: -120px;
z-index: 0;
animation: cbDriftGlow 14s ease-in-out infinite;
}
.cb-banner-glow.cb-teal {
background: radial-gradient(circle, rgba(20,184,166,0.22), transparent 70%);
top: auto;
bottom: -180px;
left: -140px;
right: auto;
animation-duration: 18s;
animation-delay: -4s;
}
@keyframes cbDriftGlow {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-24px, 26px) scale(1.08); }
}
/* ── Variantes de color por tipo de slide ──────────────────────
Por defecto (.cb-banner) = fondo oscuro, usado en "Nuevo".
--soft = degradado claro verde→teal, usado en "Oferta destacada".
--mint = menta plano, usado en "Outlet".
Ambas variantes claras ocultan el resplandor/trazas (pensados
para fondo oscuro) y oscurecen textos/orbita para contraste. */
.cb-banner--soft {
background: linear-gradient(120deg, var(--cb-green-soft) 0%, var(--cb-teal) 100%);
}
.cb-banner--mint {
background: var(--cb-paper);
}
.cb-banner--soft .cb-banner-traces,
.cb-banner--soft .cb-banner-glow,
.cb-banner--mint .cb-banner-traces,
.cb-banner--mint .cb-banner-glow {
display: none;
}
.cb-banner--soft .cb-banner-badge {
background: rgba(255, 255, 255, 0.75);
}
.cb-banner--mint .cb-banner-badge {
background: linear-gradient(90deg, var(--cb-white), var(--cb-paper-2));
border: 1px solid var(--cb-line);
}
.cb-banner--soft .cb-banner-badge .cb-dot,
.cb-banner--mint .cb-banner-badge .cb-dot {
background: var(--cb-copper);
}
.cb-banner--soft .cb-banner-copy h3,
.cb-banner--mint .cb-banner-copy h3 {
color: var(--cb-ink);
}
.cb-banner--soft .cb-banner-copy h3 em,
.cb-banner--mint .cb-banner-copy h3 em {
background: none;
-webkit-text-fill-color: initial;
color: var(--cb-copper);
}
.cb-banner--soft .cb-banner-copy p {
color: rgba(10, 22, 40, 0.72);
}
.cb-banner--mint .cb-banner-copy p {
color: var(--cb-ink-text-dim);
}
.cb-banner--soft .cb-orbit-ring,
.cb-banner--mint .cb-orbit-ring {
stroke: var(--cb-ink);
stroke-opacity: 0.18;
}
.cb-banner-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
}
.cb-banner-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--cb-font-mono);
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cb-ink);
background: linear-gradient(90deg, var(--cb-green-soft), var(--cb-teal) 120%);
padding: 7px 16px 7px 12px;
border-radius: 999px;
}
.cb-banner-badge .cb-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cb-ink);
animation: cbPulseDot 1.8s ease-in-out infinite;
}
@keyframes cbPulseDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.cb-banner-copy h3 {
font-family: var(--cb-font-display);
font-weight: 700;
font-size: clamp(26px, 3.7vw, 39px);
line-height: 1.14;
color: var(--cb-white);
margin: 18px 0 14px;
text-wrap: balance;
}
.cb-banner-copy h3 em {
font-style: normal;
background: linear-gradient(90deg, var(--cb-green-soft), var(--cb-teal));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cb-banner-copy p {
color: #b8c6d9;
font-size: 14.5px;
margin: 0 0 26px;
max-width: 40ch;
}
.cb-banner-actions {
display: flex;
align-items: center;
gap: 18px;
}
.cb-cta {
font-family: var(--cb-font-body);
font-weight: 600;
font-size: 14px;
color: var(--cb-ink);
background: linear-gradient(100deg, var(--cb-copper-soft), var(--cb-copper));
border: none;
padding: 13px 24px;
border-radius: 11px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 8px 20px -8px rgba(193,122,62,0.55);
}
.cb-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -8px rgba(193,122,62,0.65);
}
.cb-cta svg { transition: transform 0.25s ease; }
.cb-cta:hover svg { transform: translateX(3px); }
/* Puntos del carrusel: SOLO estilo. La lógica de qué punto/slide está
activo la sigue controlando el JS del carrusel ya existente. */
.cb-dots {
display: flex;
gap: 6px;
}
.cb-dots span {
width: 16px;
height: 4px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
}
.cb-dots span.cb-active {
background: var(--cb-green-soft);
width: 22px;
}
/* Ilustración flotante del portátil */
.cb-banner-art {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.cb-laptop-float {
animation: cbFloatSlow 6s ease-in-out infinite;
filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
}
/* Mini PC de la slide "Nuevo": mismo flotado, sin pantalla — con
un LED de encendido pulsando en vez del brillo de pantalla. */
.cb-minipc-float {
animation: cbFloatSlow 6s ease-in-out infinite;
filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
}
.cb-minipc-led {
animation: cbPulseDot 2.2s ease-in-out infinite;
}
@keyframes cbFloatSlow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.cb-screen-shine {
animation: cbShine 5.5s ease-in-out infinite;
}
@keyframes cbShine {
0%, 15% { transform: translateX(-120%); opacity: 0; }
30% { opacity: 0.5; }
55% { transform: translateX(120%); opacity: 0.5; }
68%, 100% { transform: translateX(120%); opacity: 0; }
}
.cb-orbit-ring {
animation: cbSpin 22s linear infinite;
transform-origin: center;
}
@keyframes cbSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 760px) {
.cb-banner-grid { grid-template-columns: 1fr; }
.cb-banner-art { order: -1; }
}
/* ============================================================
ICONOS DE CONFIANZA (4 tarjetas)
============================================================ */
.cb-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 760px) {
.cb-features { grid-template-columns: repeat(2, 1fr); }
}
.cb-feature {
background: var(--cb-white);
border: 1px solid var(--cb-line);
border-radius: 18px;
padding: 26px 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cb-feature:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px -18px rgba(10,22,40,0.25);
border-color: transparent;
}
.cb-feature-icon {
width: 60px;
height: 60px;
margin: 0 auto 16px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2), var(--cb-paper));
}
.cb-feature h3 {
/* Selector ajustado de h4 a h3: la plantilla real de Ciclotech usa
para no bajar el nivel semántico del encabezado. */
font-family: var(--cb-font-body);
font-weight: 600;
font-size: 14.5px;
color: var(--cb-ink);
margin: 0 0 6px;
}
.cb-feature p {
font-size: 12.5px;
color: var(--cb-ink-text-dim);
margin: 0;
line-height: 1.5;
}
.cb-gear-spin { animation: cbSpin 12s linear infinite; transform-origin: center; }
.cb-lock-shackle {
animation: cbUnlock 4.5s ease-in-out infinite;
transform-origin: 25px 20px;
}
@keyframes cbUnlock {
0%, 20%, 100% { transform: rotate(0deg); }
35%, 55% { transform: rotate(-18deg); }
}
.cb-check-draw {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: cbDraw 3.2s ease-in-out infinite;
}
@keyframes cbDraw {
0%, 15% { stroke-dashoffset: 24; }
45%, 80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
.cb-recycle-spin { animation: cbSpin 16s linear infinite; transform-origin: center; }
/* ============================================================
ICONOS DE "Explora por categoría" (home)
Mismo tratamiento visual que .cb-feature-icon: más grandes,
fondo con degradado radial, con un ligero movimiento de flotación
para que llamen más la atención.
El hover (fondo sólido teal, icono blanco) se define aquí en vez
de dejarlo en las utilidades group-hover:* de Tailwind: como el
fondo base usa la propiedad corta "background" con un degradado,
solo cambiar background-color (lo que hacía group-hover:bg-*) deja
el degradado claro pintado encima y el hover se ve lavado/blanco.
Aquí se sobreescribe "background" completo para que el teal salga
sólido, como estaba antes del rediseño. */
.cb-category-icon {
width: 56px;
height: 56px;
border-radius: 16px;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2), var(--cb-paper));
color: var(--cb-teal);
transition: background 0.25s ease, color 0.25s ease;
}
.group:hover .cb-category-icon {
background: var(--cb-teal);
color: var(--cb-white);
}
.cb-category-icon svg {
width: 30px;
height: 30px;
animation: cbCategoryFloat 3.6s ease-in-out infinite;
}
@keyframes cbCategoryFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
/* Respeta la preferencia de reducir movimiento del sistema operativo */
@media (prefers-reduced-motion: reduce) {
.cb-banner *,
.cb-features *,
.cb-category-icon * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ============================================================
"Nuestro proceso de reacondicionamiento" (6 pasos, home)
Reutiliza --cb-* y .cb-gear-spin/.cb-check-draw ya definidos
arriba (pasos "Reparación" y "Venta con garantía").
============================================================ */
.cb-process-header {
text-align: center;
max-width: 640px;
margin: 0 auto 40px;
}
.cb-process-header h2 {
font-family: var(--cb-font-display);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 28px);
color: var(--cb-ink);
margin: 0 0 10px;
}
.cb-process-header p {
color: var(--cb-ink-text-dim);
font-size: 14.5px;
margin: 0;
}
.cb-process-row {
position: relative;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
}
@media (max-width: 900px) {
.cb-process-row { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
}
@media (max-width: 520px) {
.cb-process-row { grid-template-columns: repeat(2, 1fr); }
}
/* Línea que conecta los 6 pasos — solo en la fila completa de 6 */
.cb-process-line {
position: absolute;
top: 21px;
left: 8%;
right: 8%;
height: 2px;
background: var(--cb-line);
z-index: 0;
}
.cb-process-line-fg {
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--cb-teal), var(--cb-green));
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cb-process-line-fg.cb-in-view { transform: scaleX(1); }
@media (max-width: 900px) {
.cb-process-line { display: none; }
}
.cb-process-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.cb-process-badge {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--cb-teal);
color: var(--cb-white);
font-family: var(--cb-font-mono);
font-weight: 600;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
box-shadow: 0 0 0 4px var(--cb-paper);
}
.cb-process-step:last-child .cb-process-badge {
background: var(--cb-green);
}
.cb-process-icon {
width: 56px;
height: 56px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2), var(--cb-paper));
margin-bottom: 14px;
}
.cb-process-step h4 {
font-family: var(--cb-font-body);
font-weight: 600;
font-size: 14px;
color: var(--cb-ink);
margin: 0 0 6px;
}
.cb-process-step p {
font-size: 12px;
color: var(--cb-ink-text-dim);
margin: 0;
line-height: 1.45;
max-width: 15ch;
}
.cb-truck-float {
animation: cbTruckFloat 2.8s ease-in-out infinite;
}
@keyframes cbTruckFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.cb-scan-sweep {
animation: cbScanSweep 3.6s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes cbScanSweep {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-2px, -2px); }
}
.cb-battery-fill {
animation: cbBatteryFill 3s ease-in-out infinite;
}
@keyframes cbBatteryFill {
0%, 100% { width: 0; }
50% { width: 22px; }
}
.cb-twinkle {
animation: cbTwinkle 2.2s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
@keyframes cbTwinkle {
0%, 100% { opacity: 0.25; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1); }
}
/* Respeta la preferencia de reducir movimiento del sistema operativo */
@media (prefers-reduced-motion: reduce) {
.cb-process-row * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ============================================================
Página de Contacto (rediseño visual)
Reutiliza --cb-* ya definidos arriba.
============================================================ */
.cb-contact {
position: relative;
overflow: hidden;
padding: 64px 24px;
isolation: isolate;
}
.cb-contact-glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(34,197,94,0.10), transparent 70%);
top: -220px;
left: -160px;
z-index: -1;
}
.cb-contact-grid {
max-width: 1040px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
@media (max-width: 760px) {
.cb-contact-grid { grid-template-columns: 1fr; }
}
.cb-contact-panel {
background: var(--cb-white, #fff);
border: 1px solid var(--cb-line, #d7e0da);
border-radius: 20px;
padding: 36px;
}
.cb-contact-panel h1 {
font-family: var(--cb-font-display, sans-serif);
font-weight: 700;
font-size: clamp(26px, 3vw, 32px);
color: var(--cb-ink, #0a1628);
margin: 0 0 14px;
}
.cb-contact-lead {
color: var(--cb-ink-text-dim, #57685f);
font-size: 15px;
line-height: 1.6;
margin: 0 0 28px;
}
.cb-contact-list {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cb-contact-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 10px;
border-radius: 12px;
transition: transform 0.25s ease, background-color 0.25s ease;
}
.cb-contact-row:hover {
transform: translateX(4px);
background: var(--cb-paper, #f2f6f4);
}
.cb-contact-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2, #e7ede9), var(--cb-paper, #f2f6f4));
}
.cb-contact-label {
display: block;
font-family: var(--cb-font-mono, monospace);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--cb-ink-text-dim, #57685f);
margin-bottom: 2px;
}
.cb-contact-value {
display: block;
font-family: var(--cb-font-body, sans-serif);
font-weight: 600;
font-size: 14.5px;
color: var(--cb-ink, #0a1628);
}
.cb-contact-link {
text-decoration: none;
transition: color 0.2s ease;
}
.cb-contact-link:hover {
color: var(--cb-green, #22c55e);
}
.cb-contact-note {
font-family: var(--cb-font-mono, monospace);
font-size: 11.5px;
line-height: 1.6;
color: var(--cb-ink-text-dim, #57685f);
background: var(--cb-paper, #f2f6f4);
border: 1px dashed var(--cb-line, #d7e0da);
border-radius: 12px;
padding: 12px 14px;
margin: 0;
}
.cb-contact-note code {
font-family: var(--cb-font-mono, monospace);
background: var(--cb-paper-2, #e7ede9);
padding: 1px 5px;
border-radius: 4px;
}
.cb-contact-form {
background: var(--cb-white, #fff);
border: 1px solid var(--cb-line, #d7e0da);
border-radius: 20px;
padding: 36px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 1px 2px rgba(10,22,40,0.04), 0 12px 30px -16px rgba(10,22,40,0.12);
}
.cb-field {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--cb-font-body, sans-serif);
font-size: 13px;
font-weight: 600;
color: var(--cb-ink, #0a1628);
}
.cb-field input,
.cb-field textarea {
font-family: var(--cb-font-body, sans-serif);
font-size: 14.5px;
font-weight: 400;
color: var(--cb-ink, #0a1628);
border: 1.5px solid var(--cb-line, #d7e0da);
border-radius: 12px;
padding: 11px 14px;
outline: none;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
resize: vertical;
}
.cb-field input:focus,
.cb-field textarea:focus {
border-color: var(--cb-teal, #14b8a6);
box-shadow: 0 0 0 4px rgba(20,184,166,0.14);
}
.cb-submit {
margin-top: 4px;
position: relative;
overflow: hidden;
font-family: var(--cb-font-body, sans-serif);
font-weight: 600;
font-size: 15px;
color: #ffffff;
background: linear-gradient(100deg, var(--cb-green, #22c55e), var(--cb-teal, #14b8a6));
border: none;
border-radius: 12px;
padding: 14px 22px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 8px 20px -10px rgba(20,184,166,0.55);
}
.cb-submit:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px -12px rgba(20,184,166,0.65);
}
.cb-submit svg { transition: transform 0.25s ease; }
.cb-submit:hover svg { transform: translateX(3px); }
.cb-submit::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.cb-submit:hover::after {
left: 130%;
}
@media (prefers-reduced-motion: reduce) {
.cb-contact-row,
.cb-submit,
.cb-submit::after,
.cb-field input,
.cb-field textarea {
transition: none !important;
}
}
/* ============================================================
Ciclotech — sección "Conócenos" (rediseño visual)
============================================================ */
.cb-about {
position: relative;
overflow: hidden;
padding: 72px 24px;
isolation: isolate;
}
.cb-about-glow {
position: absolute;
width: 560px;
height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(20,184,166,0.09), transparent 70%);
top: -260px;
right: -180px;
z-index: -1;
}
.cb-about-inner {
max-width: 920px;
margin: 0 auto;
}
.cb-about-title {
font-family: var(--cb-font-display, sans-serif);
font-weight: 700;
font-size: clamp(26px, 3.4vw, 34px);
color: var(--cb-ink, #0a1628);
margin: 0 0 20px;
}
.cb-about-lead {
font-family: var(--cb-font-body, sans-serif);
color: var(--cb-ink-text-dim, #57685f);
font-size: 15.5px;
line-height: 1.7;
max-width: 760px;
margin: 0 0 24px;
}
.cb-about-story {
max-width: 760px;
margin: 0 0 36px;
}
.cb-about-story p {
font-family: var(--cb-font-body, sans-serif);
font-size: 15px;
line-height: 1.75;
color: var(--cb-ink-text-dim, #57685f);
margin: 0 0 16px;
}
.cb-about-story p:last-child {
margin-bottom: 0;
}
.cb-about-commitment {
font-weight: 600;
color: var(--cb-ink, #0a1628) !important;
}
.cb-about-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 760px) {
.cb-about-cards { grid-template-columns: 1fr; }
}
.cb-about-card {
position: relative;
background: var(--cb-paper, #f2f6f4);
border: 1px solid var(--cb-line, #d7e0da);
border-radius: 16px;
padding: 26px 24px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cb-about-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cb-teal, #14b8a6), var(--cb-green, #22c55e));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s ease;
}
.cb-about-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: 0 16px 32px -18px rgba(10,22,40,0.22);
}
.cb-about-card:hover::before {
transform: scaleX(1);
}
.cb-about-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 13px;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2, #e7ede9), var(--cb-white, #fff));
margin-bottom: 16px;
transition: transform 0.3s ease;
}
.cb-about-card:hover .cb-about-icon {
transform: scale(1.08) rotate(-4deg);
}
.cb-about-card h3 {
font-family: var(--cb-font-body, sans-serif);
font-weight: 700;
font-size: 16px;
color: var(--cb-teal, #14b8a6);
margin: 0 0 8px;
}
.cb-about-card:nth-child(2) h3 { color: var(--cb-green, #22c55e); }
.cb-about-card p {
font-size: 13.5px;
line-height: 1.55;
color: var(--cb-ink-text-dim, #57685f);
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.cb-about-card,
.cb-about-card::before,
.cb-about-icon {
transition: none !important;
}
}
/* ============================================================
Ciclotech — Footer (rediseño visual)
============================================================ */
.cb-footer {
position: relative;
background: var(--cb-paper, #f2f6f4);
padding: 0 24px 28px;
}
.cb-footer-topline {
height: 3px;
background: linear-gradient(90deg, var(--cb-teal, #14b8a6), var(--cb-green, #22c55e));
opacity: 0.7;
}
.cb-footer-inner {
max-width: 1140px;
margin: 0 auto;
padding-top: 44px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 32px;
}
/* Sin datos de contacto/redes: la columna "Empresa" no se renderiza */
.cb-footer-inner-3col {
grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 900px) {
.cb-footer-inner,
.cb-footer-inner-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.cb-footer-inner,
.cb-footer-inner-3col { grid-template-columns: 1fr; }
}
.cb-footer-logo {
margin-bottom: 16px;
}
.cb-footer-logo-img {
display: block;
height: 56px;
width: auto;
max-width: 100%;
}
.cb-footer-tagline {
font-family: var(--cb-font-mono, monospace);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--cb-teal, #14b8a6);
margin: 0 0 10px;
}
.cb-footer-desc {
font-size: 13.5px;
line-height: 1.6;
color: var(--cb-ink-text-dim, #57685f);
max-width: 30ch;
margin: 0;
}
.cb-footer-social {
display: flex;
gap: 12px;
margin-top: 16px;
}
.cb-footer-social a {
display: inline-flex;
color: var(--cb-ink-text-dim, #57685f);
transition: color 0.2s ease;
}
.cb-footer-social a:hover {
color: var(--cb-teal, #14b8a6);
}
.cb-footer-col h4 {
font-family: var(--cb-font-mono, monospace);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cb-ink, #0a1628);
-webkit-text-stroke: 0.4px var(--cb-ink, #0a1628);
margin: 0 0 16px;
position: relative;
padding-bottom: 11px;
}
.cb-footer-col h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 28px;
height: 2.5px;
background: var(--cb-green, #22c55e);
transition: width 0.3s ease;
}
.cb-footer-col:hover h4::after {
width: 44px;
}
.cb-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.cb-footer-col a {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
font-size: 13.5px;
color: var(--cb-ink-text-dim, #57685f);
transition: color 0.2s ease, transform 0.2s ease;
}
.cb-footer-col a:hover {
color: var(--cb-teal, #14b8a6);
transform: translateX(3px);
}
.cb-footer-catalog {
margin-top: 14px;
font-weight: 600;
color: var(--cb-green, #22c55e) !important;
}
.cb-footer-catalog svg { transition: transform 0.25s ease; }
.cb-footer-catalog:hover svg { transform: translateX(3px); }
/* Fallback: enlaces de Empresa dentro de Tienda cuando no hay columna 3 */
.cb-footer-fallback {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--cb-line, #d7e0da);
}
.cb-footer-col ul.cb-footer-contact {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--cb-line, #d7e0da);
display: flex;
flex-direction: column;
gap: 12px;
}
.cb-footer-contact li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--cb-ink-text-dim, #57685f);
}
.cb-footer-contact a {
padding: 0;
}
.cb-footer-address {
margin: 12px 0 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--cb-ink-text-dim, #57685f);
}
.cb-footer-bottom {
max-width: 1140px;
margin: 36px auto 0;
padding-top: 20px;
border-top: 1px solid var(--cb-line, #d7e0da);
}
.cb-footer-bottom-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
color: var(--cb-ink-text-dim, #57685f);
}
@media (min-width: 640px) {
.cb-footer-bottom-inner { flex-direction: row; }
}
.cb-footer-bottom-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px 16px;
}
.cb-footer-bottom-links a {
color: var(--cb-ink-text-dim, #57685f);
text-decoration: none;
transition: color 0.2s ease;
}
.cb-footer-bottom-links a:hover {
color: var(--cb-teal, #14b8a6);
}
@media (prefers-reduced-motion: reduce) {
.cb-footer-col a,
.cb-footer-col h4::after,
.cb-footer-catalog svg,
.cb-footer-social a,
.cb-footer-bottom-links a {
transition: none !important;
}
}
/* ============================================================
Ciclotech — página "Servicios para empresas" (rediseño visual)
Depende de las variables --cb-* y fuentes ya definidas arriba en este
mismo archivo (banner/iconos/proceso/contacto/conócenos/footer/nav).
Todas las clases llevan el prefijo cb-svc- y las animaciones @keyframes
el prefijo cbSvc, autocontenidas — no dependen de .cb-gear-spin ni de
otras animaciones de entregas anteriores.
============================================================ */
/* ============================================================
Ciclotech — página "Servicios para empresas" (rediseño visual)
Depende de piezas que YA deberían existir en el sitio, de entregas
anteriores (banner/iconos/proceso/contacto/conócenos/footer/nav):
- Variables :root con prefijo --cb- (--cb-ink, --cb-teal, --cb-green,
--cb-paper, --cb-paper-2, --cb-line, --cb-ink-text-dim, --cb-white,
--cb-font-display, --cb-font-body, --cb-font-mono).
Si esas variables no están presentes en esta página, avísame antes de
redefinirlas — no las inventes de cero aquí.
============================================================ */
/* ---------- Hero ---------- */
.cb-svc-hero {
position: relative;
overflow: hidden;
padding: 88px 24px 64px;
text-align: center;
isolation: isolate;
}
.cb-svc-hero-glow {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 0%, rgba(20,184,166,0.12), transparent 55%),
radial-gradient(circle at 75% 30%, rgba(34,197,94,0.10), transparent 50%);
z-index: -1;
}
.cb-svc-hero-inner {
max-width: 760px;
margin: 0 auto;
}
.cb-svc-eyebrow {
display: inline-block;
font-family: var(--cb-font-mono, monospace);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--cb-teal, #14b8a6);
margin-bottom: 14px;
}
.cb-svc-title {
font-family: var(--cb-font-display, sans-serif);
font-weight: 700;
font-size: clamp(30px, 4.4vw, 46px);
line-height: 1.15;
color: var(--cb-ink, #0a1628);
margin: 0 0 18px;
}
.cb-svc-title-accent {
color: var(--cb-green, #22c55e);
}
.cb-svc-subtitle {
font-family: var(--cb-font-body, sans-serif);
font-size: 16px;
line-height: 1.65;
color: var(--cb-ink-text-dim, #57685f);
max-width: 620px;
margin: 0 auto 32px;
}
.cb-svc-cta-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.cb-svc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--cb-font-body, sans-serif);
font-weight: 600;
font-size: 14.5px;
text-decoration: none;
padding: 13px 22px;
border-radius: 11px;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.cb-svc-btn-primary {
color: #ffffff;
background: linear-gradient(100deg, var(--cb-green, #22c55e), var(--cb-teal, #14b8a6));
box-shadow: 0 10px 24px -12px rgba(20,184,166,0.55);
}
.cb-svc-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 30px -14px rgba(20,184,166,0.65);
}
.cb-svc-btn-primary svg { transition: transform 0.25s ease; }
.cb-svc-btn-primary:hover svg { transform: translateX(3px); }
.cb-svc-btn-secondary {
color: var(--cb-ink, #0a1628);
background: var(--cb-white, #fff);
border: 1.5px solid var(--cb-line, #d7e0da);
}
.cb-svc-btn-secondary:hover {
border-color: var(--cb-teal, #14b8a6);
color: var(--cb-teal, #14b8a6);
transform: translateY(-2px);
}
/* ---------- Intro ---------- */
.cb-svc-intro {
max-width: 780px;
margin: 0 auto;
padding: 0 24px 56px;
text-align: center;
}
.cb-svc-intro p {
font-family: var(--cb-font-body, sans-serif);
font-size: 15.5px;
line-height: 1.7;
color: var(--cb-ink-text-dim, #57685f);
margin: 0;
}
/* ---------- Grid de servicios ---------- */
.cb-svc-grid-section {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px 72px;
}
.cb-svc-grid-title {
text-align: center;
font-family: var(--cb-font-display, sans-serif);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 28px);
color: var(--cb-ink, #0a1628);
margin: 0 0 36px;
}
.cb-svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) {
.cb-svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.cb-svc-grid { grid-template-columns: 1fr; }
}
.cb-svc-card {
position: relative;
background: var(--cb-paper, #f2f6f4);
border: 1px solid var(--cb-line, #d7e0da);
border-radius: 16px;
padding: 26px 24px;
overflow: hidden;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cb-svc-card.cb-in-view {
opacity: 1;
transform: translateY(0);
}
.cb-svc-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cb-teal, #14b8a6), var(--cb-green, #22c55e));
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s ease;
}
.cb-svc-card:hover {
transform: translateY(-4px);
border-color: transparent;
box-shadow: 0 16px 32px -18px rgba(10,22,40,0.22);
}
.cb-svc-card:hover::before {
transform: scaleX(1);
}
.cb-svc-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2, #e7ede9), var(--cb-white, #fff));
margin: 0 auto 16px;
transition: transform 0.3s ease;
}
.cb-svc-icon svg {
width: 32px;
height: 32px;
}
.cb-svc-card:hover .cb-svc-icon {
transform: scale(1.08) rotate(-4deg);
}
.cb-svc-card h3 {
font-family: var(--cb-font-body, sans-serif);
font-weight: 700;
font-size: 16px;
color: var(--cb-teal, #14b8a6);
margin: 0 0 12px;
}
.cb-svc-card:nth-child(3n+2) h3 { color: var(--cb-green, #22c55e); }
.cb-svc-card ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cb-svc-card li {
position: relative;
padding-left: 20px;
font-size: 13px;
line-height: 1.5;
color: var(--cb-ink-text-dim, #57685f);
}
.cb-svc-card li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--cb-green, #22c55e);
opacity: 0.55;
}
/* ---------- Cómo trabajamos ---------- */
.cb-svc-how {
max-width: 1180px;
margin: 0 auto;
padding: 8px 24px 88px;
}
.cb-svc-how-title {
text-align: center;
font-family: var(--cb-font-display, sans-serif);
font-weight: 700;
font-size: clamp(22px, 2.6vw, 28px);
color: var(--cb-ink, #0a1628);
margin: 0 0 44px;
}
.cb-svc-how-zigzag {
position: relative;
height: 320px;
margin: 0 20px;
}
.cb-svc-how-zigzag-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.cb-svc-how-zigzag-line-bg {
fill: none;
stroke: var(--cb-line, #d7e0da);
stroke-width: 3;
stroke-linecap: round;
}
.cb-svc-how-zigzag-line-fg {
fill: none;
stroke: url(#cb-svc-zigzag-gradient);
stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cb-svc-how-zigzag.cb-in-view .cb-svc-how-zigzag-line-fg {
stroke-dashoffset: 0 !important;
}
.cb-svc-how-node {
position: absolute;
width: 64px;
height: 64px;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 0;
transition: opacity 0.6s ease 0.4s;
}
.cb-svc-how-zigzag.cb-in-view .cb-svc-how-node {
opacity: 1;
}
.cb-svc-how-icon {
width: 100%;
height: 100%;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 30% 20%, var(--cb-paper-2, #e7ede9), var(--cb-white, #fff));
box-shadow: 0 8px 20px -12px rgba(10,22,40,0.25), 0 0 0 4px var(--cb-paper, #f2f6f4);
animation: cbSvcFloat 2.6s ease-in-out infinite;
}
.cb-svc-how-node:nth-child(2) .cb-svc-how-icon { animation-delay: 0.25s; }
.cb-svc-how-node:nth-child(3) .cb-svc-how-icon { animation-delay: 0.5s; }
.cb-svc-how-node:nth-child(4) .cb-svc-how-icon { animation-delay: 0.75s; }
.cb-svc-how-node:nth-child(5) .cb-svc-how-icon { animation-delay: 1s; }
@keyframes cbSvcFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
.cb-svc-how-badge {
position: absolute;
top: -8px;
right: -8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--cb-teal, #14b8a6);
color: var(--cb-white, #fff);
font-family: var(--cb-font-mono, monospace);
font-weight: 600;
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px var(--cb-paper, #f2f6f4);
}
.cb-svc-how-badge-last {
background: var(--cb-green, #22c55e);
}
.cb-svc-how-node p {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 150px;
font-size: 13px;
text-align: center;
color: var(--cb-ink-text-dim, #57685f);
margin: 0;
line-height: 1.4;
}
.cb-row-top p {
bottom: calc(100% + 16px);
}
.cb-row-bottom p {
top: calc(100% + 16px);
}
@media (max-width: 760px) {
.cb-svc-how-zigzag {
height: auto;
margin: 0;
}
.cb-svc-how-zigzag-svg { display: none; }
.cb-svc-how-zigzag {
display: flex;
flex-direction: column;
gap: 28px;
}
.cb-svc-how-node {
position: relative;
left: auto !important;
top: auto !important;
transform: none;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
opacity: 1;
}
.cb-svc-how-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.cb-svc-how-badge {
top: -6px;
right: auto;
left: 42px;
}
.cb-svc-how-node p {
position: static;
transform: none;
text-align: left;
width: auto;
}
}
/* ---------- Animaciones de los iconos (tarjetas de servicio y "Cómo trabajamos") ---------- */
@keyframes cbSvcSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cb-svc-anim-spin {
display: inline-block;
transform-box: fill-box;
transform-origin: center;
animation: cbSvcSpin 6s linear infinite;
}
@keyframes cbSvcWiggle {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(-10deg); }
}
.cb-svc-anim-wiggle {
display: inline-block;
transform-box: fill-box;
transform-origin: 70% 70%;
animation: cbSvcWiggle 2.4s ease-in-out infinite;
}
@keyframes cbSvcDraw {
0% { stroke-dashoffset: 14; }
35% { stroke-dashoffset: 0; }
75% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 14; }
}
.cb-svc-anim-draw {
stroke-dasharray: 14;
animation: cbSvcDraw 3s ease-in-out infinite;
}
@keyframes cbSvcBlink {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
.cb-svc-anim-blink {
animation: cbSvcBlink 1.8s ease-in-out infinite;
}
@keyframes cbSvcDot {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1); }
}
.cb-svc-anim-dot {
transform-box: fill-box;
transform-origin: center;
animation: cbSvcDot 1.8s ease-in-out infinite;
}
.cb-svc-anim-dot-1 { animation-delay: 0s; }
.cb-svc-anim-dot-2 { animation-delay: 0.3s; }
.cb-svc-anim-dot-3 { animation-delay: 0.6s; }
@media (prefers-reduced-motion: reduce) {
.cb-svc-card,
.cb-svc-btn,
.cb-svc-icon,
.cb-svc-how-icon,
.cb-svc-how-zigzag-line-fg,
.cb-svc-anim-spin,
.cb-svc-anim-wiggle,
.cb-svc-anim-draw,
.cb-svc-anim-blink,
.cb-svc-anim-dot {
transition: none !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.cb-svc-how-node {
opacity: 1 !important;
}
}