/* ============================================================ TwinECM — mobile first. Base styles target a handset. Everything above 560/620/720/941 is a progressive enhancement via min-width. ============================================================ */ :root { --bg: #0B0E11; --bg-2: #0F1318; --surface: #12161B; --line: #1F262E; --ink: #E9EDF1; --ink-2: #9AA4AE; --ink-3: #5F6A75; --accent: #4DE3FF; --accent-ink: #06141A; --accent-dim: rgba(77, 227, 255, .10); --accent-line: rgba(77, 227, 255, .32); --glow: rgba(77, 227, 255, .30); --warn: #FFB547; --no: #F07A6E; --display: "Michroma", "Eurostile", "Arial Black", sans-serif; --body: "Sora", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", "SF Mono", Menlo, monospace; --shell: 1120px; --gut: 20px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* anchor targets clear the sticky masthead instead of landing under it */ [id] { scroll-margin-top: 128px; } body { background: var(--bg); color: var(--ink); font-family: var(--body); font-weight: 300; font-size: 16px; line-height: 1.6; margin: 0; overflow-x: hidden; padding-bottom: 88px; /* clears the fixed call bar */ -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); } /* placeholder conventions, per the brand rules */ .ph { color: var(--accent); border-bottom: 1px dashed var(--accent); } .bench { color: var(--warn); border-bottom: 1px dashed var(--warn); } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0; } /* ---------- buttons: 44px minimum touch target ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; max-width: 100%; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-family: var(--body); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 30px -10px var(--glow); } .btn--ghost { border-color: var(--ink-3); color: var(--ink); } .btn--sm { min-height: 44px; font-size: 13px; padding: 0 16px; } .btn--lg { min-height: 56px; font-size: 16px; padding: 0 26px; } .btn svg { width: 17px; height: 17px; flex: none; } /* ---------- masthead ---------- */ /* Franja de estado. En teléfono una sola línea, sin envolver nunca: solo lo que el hero no repite ya. Los dos datos del medio aparecen cuando hay ancho de sobra. */ .strip { border-bottom: 1px solid var(--line); background: var(--bg-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); } .strip .shell { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; } .strip p { margin: 0; white-space: nowrap; } .strip-live { display: flex; align-items: center; gap: 8px; color: var(--accent); } /* el punto respira porque es un indicador en vivo, no un adorno */ .strip-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 rgba(77,227,255,.55); animation: live 2.6s ease-out infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 rgba(77,227,255,.5); } 62%, 100% { box-shadow: 0 0 0 7px rgba(77,227,255,0); } } .strip-facts { display: none; margin: 0; padding: 0; list-style: none; } .strip-hours { color: var(--ink-3); } .on-wide { display: none; } @media (min-width: 620px) { .strip-facts { display: flex; align-items: center; gap: 22px; min-width: 0; } .strip-facts li { position: relative; white-space: nowrap; } .strip-facts li + li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--line); transform: translateY(-50%); } } @media (min-width: 941px) { .on-wide { display: inline; } } @media (prefers-reduced-motion: reduce) { .strip-live i { animation: none; } } .masthead { position: sticky; top: 0; z-index: 12; border-bottom: 1px solid var(--line); background: rgba(11, 14, 17, .9); backdrop-filter: blur(10px); } .masthead .shell { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; } .brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); } .brand .word { font-family: var(--display); font-size: 15px; letter-spacing: .08em; } .brand .word span { color: var(--accent); } .bar-b { animation: twin .9s ease-out .25s both; } @keyframes twin { from { opacity: 0; transform: translateX(-7px); } to { opacity: 1; transform: none; } } /* On a handset the nav becomes a swipeable chip row that bleeds to both edges, instead of vanishing and stranding every section link. */ .masthead nav { order: 3; width: 100%; display: flex; gap: 22px; font-size: 14px; font-weight: 400; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 2px; } .masthead nav::-webkit-scrollbar { display: none; } .masthead nav a { color: var(--ink-2); text-decoration: none; white-space: nowrap; padding: 4px 0; } .masthead nav a:hover { color: var(--ink); } /* ---------- hero ---------- */ .hero { padding: 54px 0; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 60% 55% at 22% 0%, rgba(77,227,255,.09), transparent 68%); } .hero .shell { max-width: 780px; text-align: center; } .hero h1 { font-family: var(--body); font-weight: 700; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -.02em; margin: 18px 0 18px; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--accent); } /* los keywords viven dentro del h1, con el aspecto del eyebrow que reemplazan */ .hero h1 .h1-kicker { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; } .hero .lede { font-size: 16.5px; color: var(--ink-2); margin: 0 auto 28px; max-width: 50ch; } .hero .lede strong { color: var(--ink); font-weight: 500; } .checkrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); } .checkrow li { display: flex; align-items: center; gap: 9px; } .checkrow svg { width: 15px; height: 15px; flex: none; color: var(--accent); } /* full-bleed buttons on a handset, auto width once there is room */ .actions { display: flex; flex-wrap: wrap; gap: 12px; } .actions .btn { width: 100%; } .hero .actions { justify-content: center; } .hero .fineprint { font-size: 14px; color: var(--ink-2); margin: 18px auto 0; max-width: 44ch; } .hero .fineprint b { color: var(--ink); font-weight: 500; } /* ---------- generic section ---------- */ .band { padding: 54px 0; border-bottom: 1px solid var(--line); } .band--alt { background: var(--bg-2); } .band h2 { font-family: var(--body); font-weight: 600; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.015em; line-height: 1.16; margin: 12px auto 12px; text-wrap: balance; max-width: 22ch; text-align: center; } .band .eyebrow { text-align: center; } .band .intro { color: var(--ink-2); margin: 0 auto 32px; max-width: 60ch; font-size: 15.5px; text-align: center; } /* the two split layouts keep their copy left-aligned */ .samepart .eyebrow, .shops .eyebrow { text-align: left; } .samepart h2, .shops h2 { text-align: left; margin-left: 0; } .samepart .intro, .shops .intro { text-align: left; margin-left: 0; } /* ---------- dealer table ---------- */ /* bleeds to the screen edges so the swipe affordance is obvious */ .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); } table.compare { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; } table.compare th, table.compare td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); } table.compare thead th { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--ink-3); } table.compare thead th.them { color: var(--no); } table.compare thead th.us { color: var(--accent); } table.compare tbody th { font-weight: 400; color: var(--ink-2); width: 22%; } table.compare td.them { color: var(--ink-2); } table.compare td.us { color: var(--ink); font-weight: 500; } table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; } /* ---------- paths ---------- */ .paths { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; } .path { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px 22px; display: flex; flex-direction: column; gap: 11px; } .path--lead { border-color: var(--accent-line); box-shadow: 0 0 60px -26px var(--glow); } .path .ico { width: 44px; height: 44px; border-radius: 10px; background: rgba(77, 227, 255, .1); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .path .ico svg { height: 24px; width: auto; } .path .flag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } .path--lead .flag { color: var(--accent); } .path h3 { font-family: var(--body); font-size: 19px; font-weight: 600; margin: 0; } .path .fig { font-family: var(--display); font-size: 30px; color: var(--accent); letter-spacing: .01em; line-height: 1; margin-top: 2px; } .path .fig small { display: block; font-family: var(--body); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; } .path p { color: var(--ink-2); font-size: 14.5px; margin: 0; flex: 1; } .path .btn { margin-top: 6px; align-self: stretch; width: 100%; } /* ---------- same part ---------- */ .samepart .shell { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } /* Tres nombres, una sola pieza. El resalte recorre los términos porque eso ES el contenido: son intercambiables. Cada uno revela quién lo usa, así que quien solo mire la tipografía grande igual aprende el mapeo. */ .stack { --term: clamp(34px, 9.4vw, 52px); } .stack-terms { margin: 0; padding: 0; list-style: none; } .stack-terms li { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .stack-terms b { font-family: var(--display); font-size: var(--term); font-weight: 400; line-height: 1.22; letter-spacing: .01em; color: var(--ink-3); animation: term-lit 6s infinite; } .stack-terms span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); opacity: 0; animation: term-who 6s infinite; } .stack-terms li:nth-child(2) b, .stack-terms li:nth-child(2) span { animation-delay: 2s; } .stack-terms li:nth-child(3) b, .stack-terms li:nth-child(3) span { animation-delay: 4s; } /* dos clases (0,2,0) para ganarle a `.samepart p` (0,1,1), que si no lo pinta gris y le mete un max-width de 52ch */ .stack .stack-hit { font-family: var(--display); font-size: var(--term); font-weight: 400; line-height: 1.22; letter-spacing: .01em; color: var(--accent); margin: 0; max-width: none; text-shadow: 0 0 34px var(--glow); } @keyframes term-lit { 0%, 30% { color: var(--accent); } 36%, 100% { color: var(--ink-3); } } @keyframes term-who { 0%, 30% { opacity: 1; transform: none; } 36%, 100% { opacity: 0; transform: translateX(-5px); } } /* sin movimiento: los tres términos legibles y las tres etiquetas visibles */ @media (prefers-reduced-motion: reduce) { .stack-terms b { animation: none; color: var(--ink); } .stack-terms span { animation: none; opacity: 1; transform: none; } } .samepart p { color: var(--ink-2); margin: 0 0 12px; max-width: 52ch; } .samepart p:last-child { margin-bottom: 0; } .samepart strong { color: var(--ink); font-weight: 500; } /* ---------- steps ---------- */ .steps { display: grid; grid-template-columns: 1fr; gap: 14px; } .step { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 22px 20px; } .step .n { font-family: var(--display); font-size: 13px; color: var(--accent); letter-spacing: .06em; } .step h3 { font-family: var(--body); font-size: 16.5px; font-weight: 600; margin: 11px 0 6px; } .step p { font-size: 14px; color: var(--ink-2); margin: 0; } .pings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; } .pings .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; } .pings span.ping { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; color: var(--ink-2); } .pings span.ping.lit { border-color: var(--accent-line); color: var(--accent); } /* ---------- honesty ---------- */ .honest { display: grid; grid-template-columns: 1fr; gap: 14px; } .honest > div { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 22px 22px; } .honest h3 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; margin: 0 0 14px; } .honest h3.yes { color: var(--accent); } .honest h3.no { color: var(--ink-3); } .honest ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); } .honest li { padding: 11px 0; border-top: 1px solid var(--line); } .honest li:first-child { border-top: 0; padding-top: 0; } /* ---------- shops ---------- */ .shops .shell { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } .shops h2 { margin-top: 12px; } .panel { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px 22px; } .panel h3 { font-family: var(--body); font-size: 16px; font-weight: 600; margin: 0 0 14px; } .panel ul { margin: 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--ink-2); } .panel li { padding: 11px 0; border-top: 1px solid var(--line); } .panel li:first-child { border-top: 0; padding-top: 0; } /* ---------- brands ---------- */ .marques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .marques span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; background: var(--surface); } .marques span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .callback { margin: 30px auto 0; max-width: 720px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-dim); padding: 24px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .callback p { margin: 0; font-size: 16px; max-width: 46ch; color: var(--ink); } /* ---------- faq ---------- */ .faq { display: grid; grid-template-columns: 1fr; gap: 0; } .faq details { border-top: 1px solid var(--line); padding: 4px 0; } .faq details:last-child { border-bottom: 1px solid var(--line); } .faq details[open] { padding-bottom: 10px; } .faq summary { cursor: pointer; list-style: none; padding: 16px 0; min-height: 44px; font-size: 15.5px; font-weight: 500; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 16px; flex: none; } .faq details[open] summary::after { content: "\2212"; } .faq p { margin: 0 0 4px; font-size: 14.5px; color: var(--ink-2); max-width: 56ch; } /* ---------- close ---------- */ .close { padding: 64px 0; text-align: center; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 46% 90% at 50% 118%, rgba(77,227,255,.13), transparent 70%); } .close h2 { margin: 12px auto 12px; max-width: 18ch; } .close p { color: var(--ink-2); max-width: 44ch; margin: 0 auto 28px; } .close .actions { justify-content: center; } footer { padding: 40px 0 48px; font-size: 13.5px; color: var(--ink-3); } footer .cols { display: grid; grid-template-columns: 1fr; gap: 28px; } footer h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; color: var(--ink-3); margin: 0 0 12px; } footer p, footer address { margin: 0 0 7px; color: var(--ink-2); font-style: normal; } footer a { color: var(--ink-2); text-decoration: none; } footer a:hover { color: var(--accent); } footer .tel { font-family: var(--display); font-size: 19px; color: var(--ink); letter-spacing: .01em; } footer .promise { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; } footer .promise span { max-width: 60ch; } /* the call button stays within thumb reach on a handset */ .callbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(11, 14, 17, .93); backdrop-filter: blur(10px); border-top: 1px solid var(--line); } .callbar .btn { width: 100%; } /* ============================================================ Enhancements upward. Nothing below here is needed on a phone. ============================================================ */ @media (min-width: 560px) { .actions .btn { width: auto; } .path .btn { align-self: flex-start; width: auto; } .steps { grid-template-columns: 1fr 1fr; } footer .cols { grid-template-columns: 1fr 1fr; } } @media (min-width: 620px) { .strip .shell { flex-direction: row; justify-content: space-between; gap: 16px; } .marques { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 720px) { :root { --gut: 28px; } .scroller { margin: 0; padding: 0; } .path { padding: 28px 26px; } .honest > div { padding: 26px 28px; } .panel { padding: 28px 30px; } .callback { padding: 30px 32px; } .marques span { font-size: 15px; padding: 14px 16px; } table.compare { font-size: 15px; } table.compare th, table.compare td { padding: 17px 18px; } .hero .lede { font-size: 17.5px; } .band .intro { font-size: 16px; } .btn--lg { min-height: 60px; font-size: 17px; padding: 0 34px; } } @media (min-width: 941px) { body { padding-bottom: 0; } .callbar { display: none; } [id] { scroll-margin-top: 78px; } .masthead .shell { flex-wrap: nowrap; gap: 20px; padding-top: 18px; padding-bottom: 18px; } .masthead nav { order: 0; width: auto; overflow: visible; margin: 0; padding: 0; gap: 26px; } .hero { padding: 84px 0 78px; } .band { padding: 78px 0; } .close { padding: 88px 0; } .paths { grid-template-columns: repeat(3, 1fr); } .steps { grid-template-columns: repeat(4, 1fr); } .honest { grid-template-columns: 1fr 1fr; } .marques { grid-template-columns: repeat(5, 1fr); } .faq { grid-template-columns: 1fr 1fr; gap: 0 56px; } .faq details:last-child { border-bottom: 0; } .samepart .shell { grid-template-columns: auto 1fr; gap: 52px; } .shops .shell { grid-template-columns: 1.05fr .95fr; gap: 52px; } footer { padding: 44px 0 60px; } footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; } footer .promise { margin-top: 34px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bar-b { animation: none; } * { transition: none !important; } } /* ============================================================ Figuras explicativas — solo en junkyard-ecm por ahora. El texto a la izquierda, la figura a la derecha. En móvil la figura va debajo, no al lado. ============================================================ */ .split { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; } /* ---- el saludo entre la llave y la computadora ---- Es un proceso, así que se anima: el código sale, viaja, y no coincide. */ .hs { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px 22px; } .hs-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; } .hs-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .hs-node { min-width: 0; } .hs-lab { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; } .hs-chip { font-family: var(--mono); font-size: 13px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 8px; padding: 10px 12px; background: var(--accent-dim); text-align: center; } .hs-list { margin: 0; padding: 0; list-style: none; } .hs-list li { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--bg-2); text-align: center; } .hs-list li + li { margin-top: 6px; } /* el cable: tres puntos que viajan de la llave al módulo */ .hs-wire { display: flex; align-items: center; gap: 5px; } .hs-wire i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); display: block; animation: hsflow 3.4s infinite; } .hs-wire i:nth-child(2) { animation-delay: .18s; } .hs-wire i:nth-child(3) { animation-delay: .36s; } @keyframes hsflow { 0%, 62%, 100% { background: var(--ink-3); transform: none; } 14%, 44% { background: var(--accent); transform: scale(1.5); } } .hs-out { margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 16px; display: flex; align-items: center; gap: 10px; } .hs-x { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--no); color: var(--no); flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; animation: hspop 3.4s infinite; } .hs-out p { margin: 0; font-size: 13.5px; color: var(--ink-2); } .hs-out b { color: var(--no); font-weight: 500; } @keyframes hspop { 0%, 55% { opacity: .25; transform: scale(.8); } 66%, 100% { opacity: 1; transform: scale(1); } } /* ---- la etiqueta del número de parte ---- Es un artefacto, no un proceso. Se queda quieto: animarlo sería adorno. */ .tag-fig { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 24px 22px; } .tag-sticker { border: 1px dashed var(--ink-3); border-radius: 10px; padding: 18px 16px; text-align: center; background: var(--bg-2); } .tag-num { font-family: var(--mono); font-size: clamp(19px, 4.6vw, 27px); letter-spacing: .04em; white-space: nowrap; } .tag-num .hw { color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 3px; } .tag-num .sw { color: var(--warn); border-bottom: 2px solid var(--warn); padding-bottom: 3px; } .tag-key { margin: 18px 0 0; padding: 0; list-style: none; } .tag-key li { display: grid; grid-template-columns: 12px 1fr; gap: 11px; align-items: start; font-size: 13.5px; color: var(--ink-2); padding: 9px 0; border-top: 1px solid var(--line); } .tag-key li:first-child { border-top: 0; } .tag-key i { width: 12px; height: 3px; border-radius: 2px; margin-top: 8px; display: block; } .tag-key .k-hw { background: var(--accent); } .tag-key .k-sw { background: var(--warn); } .tag-key b { color: var(--ink); font-weight: 500; } @media (min-width: 941px) { .split { grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; } .hs, .tag-fig { padding: 30px 28px; } } @media (prefers-reduced-motion: reduce) { .hs-wire i, .hs-x { animation: none; } .hs-wire i { background: var(--accent); } .hs-x { opacity: 1; transform: none; } } /* ============================================================ Hero cinematográfico. Una escena real de programación al fondo, hundida en oscuridad para que el titular mande. La foto da atmósfera, no información: nadie tiene que descifrarla. ============================================================ */ .hero { position: relative; overflow: hidden; isolation: isolate; } .hero .shell { position: relative; z-index: 2; } .hero-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("/images/ecu-ecm.webp") no-repeat 68% 42% / cover; filter: brightness(.34) contrast(1.14) saturate(.30); opacity: .85; } /* el velo: casi opaco donde vive el texto, se abre hacia los bordes */ .hero-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 96% 84% at 50% 46%, rgba(11,14,17,.93) 0%, rgba(11,14,17,.72) 42%, rgba(11,14,17,.30) 76%, transparent 100%), radial-gradient(ellipse 62% 58% at 78% 74%, rgba(77,227,255,.12), transparent 68%), linear-gradient(to bottom, rgba(11,14,17,.55) 0%, transparent 24%, transparent 66%, var(--bg) 100%); } @media (min-width: 941px) { .hero-media { background-position: 62% 44%; filter: brightness(.38) contrast(1.14) saturate(.32); } .hero-tint { background: radial-gradient(ellipse 86% 82% at 46% 46%, rgba(11,14,17,.90) 0%, rgba(11,14,17,.64) 44%, rgba(11,14,17,.18) 78%, transparent 100%), radial-gradient(ellipse 56% 60% at 80% 72%, rgba(77,227,255,.15), transparent 66%), linear-gradient(to bottom, rgba(11,14,17,.48) 0%, transparent 22%, transparent 68%, var(--bg) 100%); } } /* ============================================================ Fotos dentro del contenido. Enmarcadas como las tarjetas y graduadas hacia la paleta, para que no parezcan pegadas. ============================================================ */ .shot { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-2); } .shot img { display: block; width: 100%; height: auto; filter: saturate(.62) contrast(1.05) brightness(.82); } .shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11,14,17,.62) 0%, rgba(11,14,17,.10) 44%, transparent 72%), radial-gradient(ellipse 88% 80% at 50% 44%, transparent 42%, rgba(11,14,17,.42) 100%); } .shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-2); padding: 14px 16px; } .shot figcaption b { color: var(--accent); font-weight: 400; } /* la del diagnóstico va a lo ancho, entre la entradilla y las dos columnas */ .shot--wide { margin: 0 0 26px; } /* la del taller va encima del panel, en la misma columna */ .shot--side { margin: 0 0 14px; } /* ============================================================ Piezas comunes a las páginas del clúster. Vivían duplicadas en el