/* ========================================================= CUATRICOMIAS — sistema visual "cuatricomía" (CMYK) Cada servicio es una "plancha" de color, como en un pliego de impresión real. El nombre de la empresa es el punto de partida del diseño, no una decoración añadida. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap'); :root { /* Papel y tinta */ --paper: #F7F5EF; --paper-deep: #EDEAE0; --ink: #17181A; --ink-soft: #55585C; --line: #D8D3C4; /* Las cuatro planchas del proceso CMYK */ --plate-c: #0089C7; /* Cian → Serigrafía */ --plate-m: #D6336C; /* Magenta → Bordados */ --plate-y: #E3A400; /* Amarillo → Rotulación */ --plate-k: var(--ink); /* Negro/Key → Diseño Gráfico */ /* Tintas directas (fuera del proceso CMYK estándar) */ --spot-r: #1E8F73; /* Resina 3D */ --spot-f: #C1571B; /* Estudio Fotográfico */ /* Acento por defecto (páginas sin servicio asignado) */ --accent: var(--plate-c); --radius: 14px; --nav-h: 56px; } /* Acento por página, fijado vía data-service en */ body[data-service="bordados"] { --accent: var(--plate-m); } body[data-service="impresion-publicitaria"]{ --accent: var(--plate-c); } body[data-service="plotter"] { --accent: var(--plate-y); } body[data-service="papeleria"] { --accent: var(--plate-k); } body[data-service="fotografia"] { --accent: var(--spot-f); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } html { scroll-behavior: smooth; } * { box-sizing: border-box; } body { font-family: 'IBM Plex Sans', -apple-system, sans-serif; margin: 0; color: var(--ink); background: var(--paper); line-height: 1.7; overflow-x: hidden; } a { text-decoration: none; color: inherit; } h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.01em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .hero, .services { scroll-margin-top: 110px; } /* ---------- Barra de color (firma visual) ---------- La "cuatricomía" hecha franja: cuatro tintas en fila, igual que una barra de control de color en un pliego impreso. Se usa como subrayado, como separador y como detalle de carga de página. */ .color-bar { display: flex; height: 5px; width: 100%; max-width: 320px; border-radius: 3px; overflow: hidden; margin: 18px 0 0; } .color-bar.centered { margin-left: auto; margin-right: auto; } .color-bar span { flex: 1; transform: scaleX(0); transform-origin: left; animation: registerIn 0.6s ease forwards; } .color-bar span:nth-child(1) { background: var(--plate-c); animation-delay: 0.05s; } .color-bar span:nth-child(2) { background: var(--plate-m); animation-delay: 0.15s; } .color-bar span:nth-child(3) { background: var(--plate-y); animation-delay: 0.25s; } .color-bar span:nth-child(4) { background: var(--plate-k); animation-delay: 0.35s; } @keyframes registerIn { to { transform: scaleX(1); } } /* ---------- Marca de registro (logomark) ---------- */ .reg-mark { width: 22px; height: 22px; flex-shrink: 0; color: var(--paper); opacity: 0.9; } /* ---------- HEADER ---------- */ header { background: var(--ink); color: var(--paper); padding: 34px 20px 0; } .header-top { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 10px; } .wordmark { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; margin: 0; color: var(--paper); } .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,245,239,0.6); margin: 6px 0 0; } .header-top .color-bar { margin: 22px 0 0; max-width: 1200px; } /* Fichas de servicio: cada una es una "plancha" de color */ .plates { max-width: 1200px; margin: 22px auto 0; display: flex; gap: 10px; overflow-x: auto; padding: 0 0 22px; -ms-overflow-style: none; scrollbar-width: none; } .plates::-webkit-scrollbar { display: none; } .plate { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(247,245,239,0.06); border: 1px solid rgba(247,245,239,0.14); white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .plate:hover, .plate:focus-visible { background: rgba(247,245,239,0.12); border-color: rgba(247,245,239,0.3); transform: translateY(-2px); } .plate-letter { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 0.8rem; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .plate-label { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--paper); } .plate[data-plate="m"] .plate-letter { background: var(--plate-m); color: var(--paper); } .plate[data-plate="c"] .plate-letter { background: var(--plate-c); color: var(--paper); } .plate[data-plate="y"] .plate-letter { background: var(--plate-y); color: var(--ink); } .plate[data-plate="k"] .plate-letter { background: var(--paper); color: var(--ink); } .plate[data-plate="r"] .plate-letter { background: var(--spot-r); color: var(--paper); } .plate[data-plate="f"] .plate-letter { background: var(--spot-f); color: var(--paper); } /* ---------- NAV ---------- */ nav { background: var(--paper); border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; padding: 0 20px; position: sticky; top: 0; z-index: 1000; } nav a { flex: 0 0 auto; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; letter-spacing: 0.02em; padding: 18px 16px; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } nav a:hover, nav a:focus-visible { color: var(--ink); border-bottom-color: var(--accent); } /* ---------- HERO ---------- */ .hero { background: var(--paper); padding: 70px 0 60px; } .hero h2 { color: var(--ink); font-size: clamp(1.9rem, 4.5vw, 2.7rem); font-weight: 700; margin: 0 0 22px; max-width: 720px; } .hero p { font-size: 1.08rem; color: var(--ink-soft); max-width: 640px; margin: 0 0 20px; } /* ---------- BOTÓN CTA ---------- */ .cta-button { position: relative; display: inline-block; background: var(--ink); color: var(--paper); padding: 15px 32px; border-radius: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em; overflow: hidden; transition: transform 0.2s ease; margin-top: 6px; } .cta-button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--plate-c), var(--plate-m), var(--plate-y), var(--plate-k)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .cta-button:hover, .cta-button:focus-visible { transform: translateY(-3px); } .cta-button:hover::after, .cta-button:focus-visible::after { transform: scaleX(1); } /* ---------- SECCIONES DE SERVICIO ---------- */ .services { padding: 70px 0; } .services h1 { font-size: clamp(1.9rem, 4vw, 2.4rem); margin: 0 0 8px; } .services h2 { text-align: left; font-size: clamp(1.5rem, 3.5vw, 1.9rem); margin-bottom: 36px; } .page-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px; } .page-eyebrow .chip { width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: var(--paper); display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.78rem; } body[data-service="plotter"] .page-eyebrow .chip { color: var(--ink); } body[data-service="papeleria"] .page-eyebrow .chip { background: var(--ink); color: var(--paper); } .services-content { max-width: 720px; } .services-content p { margin: 0 0 18px; } .services-content ul { margin: 0 0 22px; padding-left: 20px; } .services-content li { margin-bottom: 8px; color: var(--ink); } .subsection { margin: 40px 0 18px; padding-top: 4px; border-top: 1px solid var(--line); } .subsection:first-of-type { border-top: none; margin-top: 8px; } .subsection h2 { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 18px 0 8px; padding-left: 14px; border-left: 3px solid var(--accent); } .subsection > p:first-of-type { padding-left: 17px; } /* ---------- Tarjeta de anuncio (Segunda Mano) ---------- */ .ad-card { border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px 24px; background: var(--paper-deep); max-width: 480px; } .ad-card .ad-tag { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: var(--paper); padding: 3px 9px; border-radius: 4px; margin-bottom: 10px; } .ad-card h3 { margin: 0 0 6px; font-size: 1.05rem; } .ad-card p { margin: 0 0 4px; font-size: 0.92rem; color: var(--ink-soft); } .ad-card .ad-price { font-family: 'IBM Plex Mono', monospace; color: var(--ink); font-weight: 500; } /* ---------- Rincón de siempre (widgets divertidos) ---------- */ .fun-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 20px 0 10px; } .fun-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--paper); } .fun-card h3 { font-size: 1.05rem; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .fun-card p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 14px; } .fun-card input[type="text"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: 'IBM Plex Sans', sans-serif; font-size: 0.92rem; margin-bottom: 10px; background: var(--paper-deep); color: var(--ink); } .fun-card input[type="text"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .fun-card .mini-button { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; background: var(--ink); color: var(--paper); border: none; padding: 9px 18px; border-radius: 7px; cursor: pointer; } .fun-card .mini-button:hover { opacity: 0.85; } .fun-card .cipher-result { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 1.1rem; min-height: 1.4em; color: var(--plate-m); word-break: break-word; } .whatsapp-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 8px; } .whatsapp-link:hover { opacity: 0.85; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 20px; } .service-card { display: block; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 30px 26px; transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .service-card:hover, .service-card:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(23,24,26,0.1); } .service-card .plate-letter { margin-bottom: 16px; } .service-card h3 { font-size: 1.2rem; margin: 0 0 10px; font-weight: 600; } .service-card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; } /* ---------- CTA SECTION ---------- */ .cta-section { background: var(--ink); color: var(--paper); text-align: left; padding: 64px 40px; margin: 80px 0; border-radius: var(--radius); } .cta-section h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 12px; color: var(--paper); } .cta-section p { font-size: 1.05rem; margin: 0 0 28px; color: rgba(247,245,239,0.75); } .cta-section .cta-button { background: var(--paper); color: var(--ink); } /* ---------- FOOTER ---------- */ footer { background: var(--paper-deep); color: var(--ink-soft); padding: 50px 20px 30px; border-top: 1px solid var(--line); } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; padding-bottom: 30px; } .footer-brand .wordmark { color: var(--ink); font-size: 1.3rem; } .footer-brand p { font-size: 0.9rem; margin: 10px 0 0; max-width: 320px; } .footer-col h4 { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; } .footer-col a, .footer-col p { display: block; font-size: 0.9rem; margin: 0 0 8px; color: var(--ink-soft); transition: color 0.2s ease; } .footer-col a:hover { color: var(--ink); } .footer-bottom { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 768px) { header { padding: 26px 16px 0; } .header-top { gap: 8px; } nav { flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } nav::-webkit-scrollbar { display: none; } nav a { padding: 14px 12px; font-size: 0.78rem; } .hero, .services { scroll-margin-top: 130px; } .hero { padding: 50px 0 40px; } .cta-section { padding: 44px 24px; margin: 60px 0; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } }