/* ========================================================================== MecánicaMoto — hoja de estilos v2 Tema: "taller abierto de noche" — oscuro, con carruseles estilo streaming ========================================================================== */ /* Las fuentes se cargan como en el de cada página (más rápido que @import) */ :root{ --paper: #121110; --paper-raised: #1C1B18; --paper-raised-2: #242320; --ink: #F2EFE6; --ink-soft: #C6C2B6; --steel: #8B887F; --line: #322F29; --blue: #6BB3DC; --blue-deep: #0C232D; --amber: #EFA83E; --amber-dim: #B47B2A; --amber-soft: #2E2213; --display: 'Archivo', sans-serif; --body: 'Source Serif 4', Georgia, serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --max: 1200px; } /* colores por categoría, usados en chips/eyebrows/thumbs */ .cat-motor{ --catA:#EFA83E; --catB:#7A5013; } .cat-frenos{ --catA:#E8785A; --catB:#7A2E1B; } .cat-transmision{ --catA:#6BB3DC; --catB:#1B4A63; } .cat-neumaticos{ --catA:#B79FE0; --catB:#3E2E63; } .cat-electrico{ --catA:#5FD6C0; --catB:#155246; } .cat-chasis{ --catA:#A9C46C; --catB:#3C4A1F; } .cat-general{ --catA:#C6C2B6; --catB:#3A382F; } .cat-diagnostico{ --catA:#E0A6C4; --catB:#5C2A42; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:var(--blue);} a:focus-visible, button:focus-visible{outline:3px solid var(--amber); outline-offset:2px;} .wrap{max-width:var(--max); margin:0 auto; padding:0 24px;} /* ---------- Header ---------- */ .site-header{ border-bottom:1px solid var(--line); background:rgba(18,17,16,0.9); backdrop-filter:blur(8px); position:sticky; top:0; z-index:50; transition:background .3s ease, border-color .3s ease; } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; } .wordmark{ font-family:var(--display); font-weight:900; text-transform:uppercase; letter-spacing:0.02em; font-size:20px; color:var(--ink); text-decoration:none; display:flex; align-items:baseline; gap:8px; } .wordmark .bolt{color:var(--amber); font-size:12px;} nav.main-nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;} nav.main-nav a{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:2px; } nav.main-nav a:hover, nav.main-nav a[aria-current="page"]{color:var(--amber); border-bottom-color:var(--amber);} /* homepage: header flota transparente sobre el hero hasta hacer scroll */ body.home .site-header{ position:fixed; width:100%; background:transparent; border-bottom:1px solid transparent; } body.home .site-header.scrolled{ background:rgba(18,17,16,0.92); border-bottom-color:var(--line); } body.home main{padding-top:0;} /* ---------- Hero (estilo banner de streaming) ---------- */ .hero{ position:relative; min-height:82vh; display:flex; align-items:flex-end; background: radial-gradient(ellipse 70% 60% at 75% 15%, rgba(239,168,62,0.16), transparent 60%), linear-gradient(180deg, rgba(18,17,16,0.15) 0%, rgba(18,17,16,0.55) 55%, var(--paper) 100%), repeating-linear-gradient(115deg, #1A1917 0px, #1A1917 2px, #151412 2px, #151412 90px), var(--paper); border-bottom:1px solid var(--line); overflow:hidden; } .hero::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size:40px 40px; mask-image:linear-gradient(180deg, black, transparent 75%); } .hero-inner{ position:relative; z-index:2; padding:160px 0 72px; max-width:760px; } .eyebrow{ font-family:var(--mono); font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:18px; } .eyebrow::before{content:""; width:26px; height:2px; background:var(--amber); display:inline-block;} h1.hero-title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(38px, 6.4vw, 72px); line-height:0.96; letter-spacing:-0.01em; margin:0 0 20px; text-shadow: 0 0 40px rgba(239,168,62,0.18); } h1.hero-title em{font-style:normal; color:var(--amber);} .hero p.lede{font-size:19px; color:var(--ink-soft); max-width:52ch; margin:0 0 32px;} .hero-actions{display:flex; gap:14px; flex-wrap:wrap;} .btn{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:0.02em; font-size:14.5px; padding:14px 26px; border-radius:4px; text-decoration:none; display:inline-flex; align-items:center; gap:10px; border:1px solid transparent; transition:transform .12s ease, opacity .12s ease; } .btn:hover{transform:translateY(-1px);} .btn-primary{background:var(--amber); color:#1A1408;} .btn-primary:hover{opacity:0.92;} .btn-ghost{background:rgba(255,255,255,0.06); color:var(--ink); border-color:var(--line);} .btn-ghost:hover{background:rgba(255,255,255,0.1);} /* mini "ficha técnica" flotante junto al hero, estilo Netflix "info" chip */ .hero-plate{ margin-top:34px; display:inline-flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:13px; color:var(--ink-soft); } .hero-plate b{color:var(--ink); font-weight:600;} /* ---------- Sections ---------- */ section{padding:8px 0;} .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;} h2.section-title{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:22px; letter-spacing:0.01em; margin:0; border-left:4px solid var(--amber); padding-left:12px; } .section-sub{font-family:var(--mono); font-size:13px; color:var(--steel);} /* ---------- Filas / carruseles estilo streaming ---------- */ .rows{padding:48px 0 24px;} .row{margin-bottom:44px; position:relative;} .row-head{display:flex; align-items:baseline; justify-content:space-between; padding:0 24px; max-width:var(--max); margin:0 auto 14px;} .row-viewport{position:relative;} .row-track{ display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity; padding:6px 24px 18px; margin:0 auto; max-width:var(--max); scrollbar-width:none; } .row-track::-webkit-scrollbar{display:none;} .row-arrow{ position:absolute; top:0; bottom:18px; width:64px; z-index:5; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:22px; opacity:0; transition:opacity .15s ease; } .row-viewport:hover .row-arrow{opacity:1;} .row-arrow.prev{left:0; background:linear-gradient(90deg, var(--paper) 20%, transparent);} .row-arrow.next{right:0; background:linear-gradient(270deg, var(--paper) 20%, transparent);} .rcard{ flex:0 0 auto; width:270px; scroll-snap-align:start; text-decoration:none; color:var(--ink); border-radius:6px; overflow:hidden; background:var(--paper-raised); border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; position:relative; } .rcard:hover{ transform:translateY(-6px) scale(1.035); z-index:3; box-shadow:0 18px 34px rgba(0,0,0,0.55); border-color:var(--catA, var(--amber)); } .rcard-thumb{ height:150px; position:relative; overflow:hidden; background: radial-gradient(120% 140% at 15% -10%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(135deg, var(--catA, var(--amber)) 0%, var(--catB, var(--amber-dim)) 100%); display:flex; align-items:center; justify-content:center; } .rcard-thumb::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px); background-size:14px 14px; } .rcard-thumb svg{width:64px; height:64px; opacity:0.95; position:relative; z-index:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,0.15));} .rcard-thumb .rnum{ position:absolute; right:10px; bottom:4px; font-family:var(--display); font-weight:900; font-size:44px; color:rgba(0,0,0,0.14); line-height:1; z-index:0; } .rcard-body{padding:14px 16px 16px;} .rcard .tag{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--catA, var(--amber)); } .rcard h3{font-family:var(--display); font-weight:800; font-size:16.5px; margin:6px 0 6px; line-height:1.25;} .rcard p{margin:0; color:var(--ink-soft); font-size:14px; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .rcard .meta{font-family:var(--mono); font-size:11.5px; color:var(--steel); margin-top:10px; display:block;} /* ---------- Card grid clásico (usado en páginas internas) ---------- */ .grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;} .card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:22px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:var(--ink); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover{transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.45); border-color:var(--amber-dim);} .card .tag{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--amber); background:var(--amber-soft); align-self:flex-start; padding:3px 8px; border-radius:2px; } .card h3{font-family:var(--display); font-weight:800; font-size:19px; margin:0; line-height:1.2; text-transform:none;} .card p{margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.5;} .card .meta{font-family:var(--mono); font-size:12px; color:var(--steel); margin-top:auto;} /* ---------- Ad slots ---------- */ .ad-slot{ border:1px dashed var(--line); background:var(--paper-raised); color:var(--steel); font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.06em; display:flex; align-items:center; justify-content:center; text-align:center; min-height:100px; border-radius:4px; margin:36px 0; } /* ---------- Article page ---------- */ .article-header{border-bottom:1px solid var(--line); padding:48px 0 32px; background:var(--paper-raised);} .article-header .eyebrow{margin-bottom:14px;} h1.article-title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(28px, 4vw, 42px); line-height:1.05; margin:0 0 14px; max-width:22ch; } .article-header .lede{color:var(--ink-soft); font-size:18px; max-width:60ch; margin:0;} .article-layout{display:grid; grid-template-columns: 2fr 1fr; gap:48px; padding:44px 0 64px;} .article-body h2{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:21px; margin:40px 0 12px; letter-spacing:0.01em;} .article-body h2:first-child{margin-top:0;} .article-body p{margin:0 0 16px;} .article-body ol, .article-body ul{padding-left:22px; margin:0 0 16px;} .article-body li{margin-bottom:8px;} .article-body .warning{ background:var(--amber-soft); border-left:4px solid var(--amber); padding:14px 16px; border-radius:2px; font-size:16px; margin:20px 0; color:var(--ink); } .article-body .warning strong{font-family:var(--mono); text-transform:uppercase; font-size:12.5px; letter-spacing:0.05em; display:block; margin-bottom:4px; color:var(--amber);} .sidebar{position:sticky; top:88px; align-self:start; display:flex; flex-direction:column; gap:28px;} .sidebar .plate dl{grid-template-columns: 1fr; } .sidebar .plate dt{margin-top:6px;} .sidebar .plate dt:first-child{margin-top:0;} .sidebar .plate dd{text-align:left; font-size:14.5px;} .related-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;} .related-list a{ display:block; font-family:var(--mono); font-size:13.5px; text-decoration:none; color:var(--ink); padding:10px 12px; background:var(--paper-raised); border:1px solid var(--line); border-radius:3px; } .related-list a:hover{border-color:var(--amber);} /* ---------- data plate — elemento de firma ---------- */ .plate{ background:var(--blue-deep); color:#EDEAE0; padding:22px 22px 18px; position:relative; border-radius:4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .plate::before, .plate::after, .plate .corner-l, .plate .corner-r{ content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:#5A6870; box-shadow: inset 0 1px 1px rgba(0,0,0,0.5); } .plate::before{top:10px; left:10px;} .plate::after{top:10px; right:10px;} .plate .corner-l{bottom:10px; left:10px;} .plate .corner-r{bottom:10px; right:10px;} .plate-label{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); margin-bottom:12px; } .plate dl{display:grid; grid-template-columns: auto 1fr; gap:8px 14px; margin:0; font-family:var(--mono); font-size:13.5px;} .plate dt{color:#8FA0A8;} .plate dd{margin:0; color:#F4F1E8; text-align:right;} /* ---------- Footer ---------- */ .site-footer{background:var(--blue-deep); color:#B9C4C9; padding:44px 0 32px; margin-top:40px;} .site-footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;} .site-footer a{color:#E9E6DC; text-decoration:none; font-family:var(--mono); font-size:13px;} .site-footer a:hover{color:var(--amber);} .footer-cols{display:flex; gap:56px; flex-wrap:wrap;} .footer-cols h4{font-family:var(--mono); text-transform:uppercase; letter-spacing:0.08em; font-size:12px; color:#7B8B92; margin:0 0 12px;} .footer-cols ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;} .footer-bottom{font-family:var(--mono); font-size:12px; color:#67767D; margin-top:32px; border-top:1px solid rgba(255,255,255,0.08); padding-top:20px;} /* ---------- Responsive ---------- */ @media (max-width: 860px){ .grid{grid-template-columns:1fr 1fr;} .article-layout{grid-template-columns:1fr;} .sidebar{position:static;} nav.main-nav ul{gap:16px; flex-wrap:wrap;} .hero-inner{padding:130px 0 56px;} .rcard{width:220px;} } @media (max-width: 560px){ .grid{grid-template-columns:1fr;} .site-header .wrap{flex-direction:column; align-items:flex-start; gap:12px;} .row-head, .row-track{padding-left:16px; padding-right:16px;} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .card, .rcard{transition:none;} }