/* CLEVER.CAT — hoja de estilos compartida. Sin build, sin framework. Un solo token de color (--accent): si el boss pide otro, se cambia acá y listo. */ :root{ --ink:#2B2622; --paper:#F7F1E7; --surface:#FFFFFF; /* fondo de tarjetas/chips/specs — separado de --on-accent (ver abajo) */ --on-accent:#FFFFFF; /* color de texto/icono sobre fondo --accent (botones, tag "addon") */ --line:#E4DCCF; --muted:#6B6357; --accent:#C2410C; /* CONFIRMADO por el boss — ver coderoot/marca/guia-de-marca.html seccion Paleta */ --backdrop:#2B2622; /* fondo fijo de fotos/iconos (.thumb, .mark, .media) — nunca invierte, ver abajo */ --radius:16px; --font:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif; } /* Modo oscuro: activado por el botón del nav (atributo data-theme, con JS + localStorage — ver el script inline en de cada página y el de fin de body). Ink/paper invierten roles reusando los mismos tonos calidos (no negro puro). --accent pasa a #FF7400 (el naranja original del logo): #C2410C pierde luminancia sobre fondo oscuro. Verificado por script (relative luminance, WCAG 2.1): ink/paper 13.3:1, ink/surface 11.1:1, muted/paper 5.56:1, muted/surface 4.62:1, accent-como-texto/paper 5.52:1 — todos ≥AA. --on-accent pasa a oscuro porque blanco sobre #FF7400 da apenas 2.71:1 (la misma cifra que el boss midió para #C2410C sobre blanco, pero acá como fondo): texto oscuro sobre #FF7400 da 5.52:1. */ :root[data-theme="dark"]{ --ink:#F7F1E7; --paper:#2B2622; --surface:#3A332C; --on-accent:#2B2622; --line:#4A4038; --muted:#A89C8C; --accent:#FF7400; } /* Las tarjetas (grilla de home, franja de OpenAPR, tabla de specs, bloque del dispositivo en Piumy) NO invierten en oscuro — el boss las quiere siempre claras: "cada tarjeta se lee como una hoja de papel apoyada sobre el fondo oscuro". Se re-fijan los mismos tokens a sus valores de modo claro, sólo dentro de estos 3 contenedores — sus descendientes (.tag, .spec .k/.v, h3, p) heredan el pin sin tocar ninguna otra regla. El acento adentro sigue siendo #C2410C (el que pasa contraste sobre fondo claro); el #FF7400 queda afuera, sobre el fondo oscuro de la página — conviven los dos, no se simplifica a uno solo. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .specs-grid, :root[data-theme="dark"] .media-highlight{ --ink:#2B2622; --paper:#F7F1E7; --surface:#F5EFE5; --muted:#6B6357; --line:#E4DCCF; --accent:#C2410C; --on-accent:#FFFFFF; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; } img{max-width:100%;display:block;} a{color:inherit;} .wrap{max-width:1360px;margin:0 auto;padding:0 24px;} h1,h2,h3{ font-family:var(--font); font-weight:700; letter-spacing:-0.01em; line-height:1.05; margin:0 0 16px; } p{margin:0 0 16px;max-width:60ch;} p.lead{font-size:1.1rem;color:var(--muted);} /* ---------- NAV ---------- */ nav.site{ position:sticky;top:0;z-index:10; background:var(--paper); border-bottom:1px solid var(--line); } nav.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;} .logo-nav{font-family:var(--font);font-weight:800;text-transform:uppercase;font-size:1.15rem;text-decoration:none;color:var(--ink);display:flex;align-items:center;} .logo-nav .dot{color:var(--accent);} nav.site .links{display:flex;align-items:center;gap:28px;font-size:0.9rem;} nav.site .links a{text-decoration:none;opacity:0.75;} nav.site .links a:hover{opacity:1;color:var(--accent);} .theme-toggle{ font-family:var(--font);font-size:inherit; background:none;border:none;padding:0;margin:0; color:var(--ink);opacity:0.75;cursor:pointer; } .theme-toggle:hover{opacity:1;color:var(--accent);} @media(max-width:420px){ nav.site .wrap{padding:16px;} .logo-nav{font-size:0.95rem;} nav.site .links{gap:12px;font-size:0.78rem;} } /* home: el wordmark del hero ya muestra la marca gigante, asi que el nav no compite por espacio -arranca oculto y aparece fijo arriba recien al scrollear, cuando de verdad hace falta para navegar. Solo esta pagina. */ nav.site.nav-home{ position:fixed;top:0;left:0;right:0; background:transparent;border-bottom-color:transparent; transform:translateY(-100%); transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; } nav.site.nav-home.visible{ background:var(--paper);border-bottom-color:var(--line); transform:translateY(0); } /* ---------- HERO ---------- */ .hero{padding:48px 0 28px;} .hero .wordmark{ font-weight:800;text-transform:uppercase; font-size:clamp(2.4rem,7vw,4.6rem); line-height:0.95;letter-spacing:-0.01em; margin:0 0 24px; } .hero .wordmark .dot{color:var(--accent);} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;} .chip{ display:inline-block; font-size:0.7rem;letter-spacing:0.04em;text-transform:uppercase;font-weight:600; background:var(--surface);color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:6px 12px; } /* ---------- BLOQUES / GRID DE PRODUCTOS ---------- */ .grid{display:grid;gap:16px;} /* las 4 capturas ya comparten la misma proporcion (1.90) en el archivo -no hace falta align-items:start ni aspect-ratio por tarjeta: se emparejan solas. */ .grid-products{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} @media(max-width:900px){.grid-products{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.grid-products,.grid-2{grid-template-columns:1fr;}} .card{ background:var(--surface); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); display:flex;flex-direction:column; /* sin borde: sobre fondo crema, la tarjeta blanca ya se separa sola. sin sombra tampoco -mismo criterio que el sistema de bloques de la guia de marca: el contraste lo da el color plano, no la profundidad falsa. */ transition:transform 0.15s ease; } .card:hover{transform:translateY(-3px);} .card .thumb{ aspect-ratio:1200/630; /* la proporcion real de las capturas (og-image 1200x630, hero 1920x1033) */ background:var(--backdrop); overflow:hidden; } .card .thumb img{ display:block; width:100%;height:100%; object-fit:cover; /* llena el marco entero: cero franjas muertas */ } .card .thumb.placeholder{ display:grid;place-items:center; /* el isotipo no es una captura: se centra a proposito, no se estira */ } .card .thumb.placeholder .isotipo{width:44%;height:auto;opacity:0.95;} /* fotos reales de producto en formato vertical (Extractordo, Monocontrol): recortarlas a 1.90 apaisado corta la placa o la pantalla -se muestran completas, contenidas sobre el mismo --backdrop del isotipo. */ .card .thumb.contain img{object-fit:contain;} .card .body{padding:16px;flex:1;display:flex;flex-direction:column;gap:5px;} .card h3{font-size:1.05rem;margin:0;} .card .tag{ display:inline-block;align-self:flex-start; font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;font-weight:600; background:var(--paper);border-radius:8px;padding:3px 8px;color:var(--muted); } .card .tag.addon{background:var(--accent);color:var(--on-accent);} .card p{font-size:0.88rem;color:var(--muted);margin:0;} /* unica tarjeta con 2 acciones propias (Desarrollo a pedido: WhatsApp + Ver trabajos) -no puede ser un entero como las demas, necesita 2 links reales. Mismos .cta-row/.btn del resto del sitio, a escala de tarjeta. */ .card .cta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;} .card .cta-row .btn{padding:8px 14px;font-size:0.78rem;} section{padding:40px 0;} section.tight{padding:16px 0;} /* ---------- FOOTER (contacto, las 7 paginas) ---------- */ footer.site{ border-top:1px solid var(--line); padding:28px 0; font-size:0.85rem;color:var(--muted); } footer.site .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;} footer.site .footer-brand{display:flex;flex-direction:column;gap:2px;line-height:1.4;} footer.site .footer-links{display:flex;gap:18px;flex-wrap:wrap;} footer.site .footer-links a{text-decoration:none;color:var(--muted);} footer.site .footer-links a:hover{color:var(--accent);} footer.site .btn{padding:9px 16px;font-size:0.82rem;} .btn{ display:inline-block; background:var(--ink);color:var(--paper); border-radius:12px;padding:14px 22px; font-weight:600;font-size:0.9rem;text-decoration:none; } .btn.accent{background:var(--accent);color:var(--on-accent);} /* ---------- PAGINA DE PRODUCTO ---------- */ .back-link{font-size:0.85rem;color:var(--muted);text-decoration:none;display:block;margin-bottom:24px;} .back-link:hover{color:var(--accent);} .product-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;} @media(max-width:800px){.product-hero{grid-template-columns:1fr;}} .product-hero h1{font-size:clamp(2rem,5vw,3rem);text-transform:none;} .product-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;} .product-hero .media{ background:var(--backdrop);border-radius:var(--radius); aspect-ratio:1200/630; /* proporcion real de las capturas — cero franjas muertas */ overflow:hidden; } .product-hero .media img{display:block;width:100%;height:100%;object-fit:cover;} /* isotipo (Extractordo/Riegorila): no es una captura, no se llena el marco con el - se centra a proposito, sin estirar */ .product-hero .media.is-mark{display:grid;place-items:center;} .product-hero .media.is-mark img{width:32%;height:auto;object-fit:contain;} /* foto real vertical (Extractordo, Monocontrol): mismo criterio que is-mark pero a mayor escala -es una foto de producto, no un isotipo. */ .product-hero .media.contain img{object-fit:contain;} /* captura a tamaño completo, sin recorte ni caja artificial — para cuando el pedido es "verla en grande", no un marco parejo con otras tarjetas */ .hero-media-full{ display:block;width:100%;height:auto; border-radius:var(--radius); margin:24px 0; } .specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:24px 0;color:var(--ink);} @media(max-width:600px){.specs-grid{grid-template-columns:1fr;}} .specs-grid .spec{background:var(--surface);padding:16px 18px;} .specs-grid .spec .k{font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px;} .specs-grid .spec .v{font-size:0.95rem;} /* cantidad de filas variable (se omiten las que no tienen dato real): si sobra una celda impar, la ultima ocupa el ancho completo en vez de dejar un hueco vacio */ .specs-grid .spec:last-child:nth-child(odd){grid-column:1/-1;} /* bloque generico imagen+texto -antes especifico de "addon", ahora reusado para cualquier destaque con foto (ej. el dispositivo fisico de Piumy en su propia pagina) */ .media-highlight{ display:grid;grid-template-columns:1fr 1.4fr;gap:24px;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:24px;margin-top:16px;color:var(--ink); } @media(max-width:700px){.media-highlight{grid-template-columns:1fr;}} .media-highlight .media{background:var(--backdrop);border-radius:12px;aspect-ratio:702/324;overflow:hidden;} .media-highlight .media img{display:block;width:100%;height:100%;object-fit:cover;} .media-highlight h3{margin-bottom:8px;} /* ========================================================================== develop.clever.cat — estilos propios del sitio del servicio. Reusa TODOS los tokens de CLEVER.CAT (incluido el pin de tarjetas claras en modo oscuro): acá sólo va lo que este sitio tiene y el otro no. ========================================================================== */ .section-lead{color:var(--muted);max-width:62ch;margin:-6px 0 22px;} .kicker{ display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);font-weight:700;margin-bottom:14px; } .hero .wordmark-sm{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;} .hero .lead{color:var(--muted);max-width:60ch;font-size:1.06rem;} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);} /* --- Precios: tres tarjetas, misma altura, el monto como protagonista --- */ .precios{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px;} .precio .body{display:flex;flex-direction:column;gap:10px;} .precio .monto{ font-size:2.6rem;font-weight:800;line-height:1;color:var(--ink);letter-spacing:-.02em; } .precio .monto .moneda{font-size:1rem;font-weight:700;color:var(--muted);vertical-align:.85em;margin-right:4px;} .precio p{color:var(--muted);margin:0;} .nota-tokens .body{padding:22px 24px;} .nota-tokens p{margin:0 0 10px;} .nota-tokens p:last-child{margin-bottom:0;} /* --- Metodología: seis pasos numerados --- */ .pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .paso .body{display:flex;flex-direction:column;gap:8px;} .paso .num{ display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--accent);color:var(--on-accent);font-weight:800;font-size:1rem;margin-bottom:2px; } .paso h3{margin:0;font-size:1.06rem;} .paso p{color:var(--muted);margin:0;} /* --- El agente: símbolo grande al costado del texto --- */ .agente-visual{display:grid;place-items:center;background:var(--backdrop);padding:34px;} .agente-visual img{width:132px;height:132px;} .cierre .body{text-align:left;} /* --- Footer --- */ .site-footer{border-top:1px solid var(--line);margin-top:16px;padding:22px 0;} .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;} .f-brand a{color:var(--ink);text-decoration:none;font-weight:700;} .f-brand .muted{color:var(--muted);} .f-links{display:flex;gap:18px;flex-wrap:wrap;} .f-links a{color:var(--muted);text-decoration:none;} .f-links a:hover{color:var(--accent);} .btn-wapp{white-space:nowrap;} @media(max-width:900px){ .precios,.pasos{grid-template-columns:1fr 1fr;} } @media(max-width:620px){ .precios,.pasos{grid-template-columns:1fr;} .footer-inner{flex-direction:column;align-items:flex-start;} } /* Trabajos entregados: se llena de a uno, a medida que cada cliente autoriza. */ .trabajos-grid{margin-bottom:18px;} .trabajos-grid .thumb{aspect-ratio:1200/630;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--backdrop);} .trabajos-grid .thumb img{display:block;width:100%;height:100%;object-fit:cover;}