:root { --ink: #292827; --blue: #079b32; --blue-soft: #b9d6e7; --signal: #00ea18; --paper: #f7f5f0; --muted: #5b5955; --line: #cfcac2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#sobre-mi, #metodo, #contacto { scroll-margin-top: 92px; }
#inicio, #servicios { scroll-margin-top: 152px; }
body { background: var(--paper); color: var(--ink); font-family: "Trebuchet MS", "Avenir Next", Avenir, sans-serif; margin: 0; }
a { color: inherit; text-decoration: none; }
.site-header, .section, footer { margin: 0 auto; max-width: 1240px; padding-left: 42px; padding-right: 42px; }
.site-header { align-items: center; background: color-mix(in srgb, var(--paper) 92%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent); display: flex; gap: clamp(32px, 4vw, 56px); justify-content: space-between; left: 0; max-width: none; padding-bottom: 14px; padding-top: 14px; position: sticky; right: 0; top: 0; z-index: 20; }
.brand { display: block; line-height: 0; max-width: 290px; }
.brand img { display: block; height: auto; max-width: 100%; width: 255px; }
nav { display: flex; gap: 35px; font-size: .77rem; text-transform: uppercase; }
nav a { border-bottom: 1px solid transparent; padding: 10px 0; white-space: nowrap; } nav a:hover, nav .active { border-color: var(--blue); }
.hero { align-items: center; display: grid; gap: 38px; grid-template-columns: .78fr 1.22fr; min-height: 475px; padding-top: 55px; padding-bottom: 50px; }
.eyebrow { color: var(--blue); font-size: .67rem; letter-spacing: .16em; margin: 0 0 14px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 3.7vw, 3.65rem); font-weight: 400; letter-spacing: -.05em; line-height: 1.05; margin-bottom: 0; text-transform: uppercase; }
h1 span { color: var(--blue); }
.blue-rule { background: var(--blue); height: 1px; margin: 18px 0; width: 95px; }
.intro { font-size: .98rem; line-height: 1.6; max-width: 33ch; }
.button { border: 1px solid var(--blue); color: var(--blue); display: inline-flex; font-size: .8rem; gap: 28px; justify-content: space-between; letter-spacing: .06em; margin-top: 9px; min-width: 164px; padding: 14px 16px; text-transform: uppercase; transition: background .2s, color .2s; }
.button:hover { background: var(--blue); color: var(--paper); }.button b { font-size: 1.3rem; font-weight: 400; line-height: .7; }
.pencil-panel { min-height: 336px; position: relative; }
.pencil-panel::before { display: none; }
.pencil-panel::after { display: none; }
.art { filter: url(#pencil); position: absolute; }.process-icon .ink, .contact-action .ink { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.hero-visual { aspect-ratio: 3 / 2; bottom: 0; height: 100%; left: 50%; position: absolute; transform: translateX(-50%); width: auto; z-index: 1; }.hero-illustration { display: block; height: 100%; object-fit: contain; width: 100%; }.screen-cover { background: var(--paper); clip-path: polygon(0 0, 96% 0, 100% 92%, 6% 100%); height: 31%; left: 15%; position: absolute; top: 27.2%; transform: perspective(800px) rotateX(2deg) rotateY(-3deg) rotateZ(-3deg) skewY(-3deg); transform-origin: center; width: 33.3%; }.screen-photo { clip-path: polygon(0 0, 96% 0, 100% 92%, 6% 100%); filter: grayscale(1) contrast(1.16) brightness(1.05); height: 31%; left: 15%; object-fit: cover; object-position: center; position: absolute; top: 27.2%; transform: perspective(800px) rotateX(2deg) rotateY(-3deg) rotateZ(-3deg) skewY(-3deg); transform-origin: center; width: 33.3%; }
.art-line { display: none; }
.statement { border-top: 1px solid var(--line); max-width: 840px; padding-bottom: 64px; padding-top: 52px; text-align: center; }.statement p { font-size: 1.08rem; line-height: 1.6; margin: 0 auto; max-width: 73ch; }
.services { padding-bottom: 75px; }.section-heading { margin-bottom: 30px; }.section-heading h2 { font-size: clamp(1.55rem, 2.8vw, 2.5rem); font-weight: 400; letter-spacing: -.04em; margin: 0; text-transform: uppercase; }.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.service-card { border-left: 1px solid var(--line); padding: 0 20px; position: relative; }.service-card:first-child { border-left: 0; padding-left: 0; }.service-card:last-child { padding-right: 0; }.service-illustration { display: block; height: 142px; margin: -10px 0 4px -10px; max-width: 100%; object-fit: contain; object-position: left center; width: 100%; }.service-card h3 { font-size: 1.12rem; font-weight: 400; margin-bottom: 12px; text-transform: uppercase; }.service-card p { color: var(--muted); font-size: .86rem; line-height: 1.55; }
.process { border-top: 1px solid var(--line); padding-bottom: 74px; padding-top: 54px; }.centered { text-align: center; }.process-list { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 33px 0 0; padding: 0; }.process-list li { padding: 0 18px; position: relative; text-align: center; }.process-list li::after { border-top: 1px dashed var(--muted); content: ""; left: calc(50% + 47px); position: absolute; right: calc(-50% + 47px); top: 38px; }.process-list li:last-child::after { display: none; }.process-icon { display: grid; height: 78px; margin: auto; place-items: center; width: 78px; }.process-icon img { height: 78px; object-fit: contain; width: 78px; }.number { border: 1px solid var(--ink); border-radius: 50%; display: grid; font-size: .7rem; height: 21px; margin: 9px auto; place-items: center; width: 21px; }.process-list h3 { font-size: .85rem; font-weight: 400; letter-spacing: .04em; margin-bottom: 7px; text-transform: uppercase; }.process-list p { color: var(--muted); font-size: .77rem; line-height: 1.45; margin: auto; max-width: 18ch; }
.process-list li:nth-child(3) .process-icon { transform: translateX(-14px); }
.contact { align-items: center; border: 1px solid var(--line); display: grid; grid-template-columns: 1.25fr .75fr; margin-bottom: 120px; margin-top: 100px; padding-bottom: 24px; padding-top: 24px; }.contact-note { border-right: 1px solid var(--line); padding: 11px 42px 11px 20px; }.contact-note p { font-family: Georgia, serif; font-size: 1.12rem; font-style: italic; line-height: 1.45; margin: 0; text-align: center; }.contact-action { align-items: center; display: flex; gap: 15px; padding-left: 30px; }.contact-action > img { height: 104px; object-fit: contain; width: 112px; }.contact-action h2 { font-size: 1.45rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 8px; text-transform: uppercase; }.contact-action .button { margin-top: 0; min-width: 150px; }
footer { border-top: 1px solid var(--line); display: flex; font-size: .74rem; justify-content: space-between; padding-bottom: 24px; padding-top: 20px; text-transform: uppercase; } footer a { color: var(--blue); }.legal-links { display: flex; gap: 17px; }.legal-links a { color: var(--muted); }
.legal-page { max-width: 860px; padding-bottom: 72px; padding-top: 75px; }.legal-page h1 { margin-bottom: 11px; }.legal-date { color: var(--muted); font-size: .84rem; margin-bottom: 50px; }.legal-page section { border-top: 1px solid var(--line); padding: 26px 0 7px; }.legal-page h2 { font-size: 1.2rem; font-weight: 400; margin-bottom: 10px; }.legal-page p { line-height: 1.65; max-width: 73ch; }.legal-page a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .site-header, .section, footer { padding-left: 24px; padding-right: 24px; }.hero { grid-template-columns: 1fr; padding-top: 45px; }.pencil-panel { min-height: 320px; max-width: 660px; width: 100%; }.service-grid { grid-template-columns: repeat(2, 1fr); row-gap: 35px; }.service-card:nth-child(3) { border-left: 0; padding-left: 0; }.contact { grid-template-columns: 1fr; }.contact-note { border-bottom: 1px solid var(--line); border-right: 0; padding: 10px 12px 25px; }.contact-action { justify-content: center; padding: 22px 10px 0; } }
@media (max-width: 620px) { .site-header { align-items: flex-start; gap: 24px; padding-top: 20px; }.brand { max-width: 170px; }.brand img { width: 170px; } nav { flex-direction: column; gap: 2px; text-align: right; } nav a { padding: 2px 0; }.hero { min-height: 0; padding-top: 40px; }.pencil-panel { min-height: 260px; }.statement { padding-bottom: 50px; }.service-grid, .process-list { grid-template-columns: 1fr; }.service-card, .service-card:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); padding: 22px 0 0; }.service-card:first-child { border-top: 0; padding-top: 0; }.process-list { gap: 22px; }.process-list li::after { display: none; }.contact-action { align-items: flex-start; flex-direction: column; }.contact-note p { font-size: 1rem; }.legal-page { padding-top: 48px; }.legal-links { flex-wrap: wrap; gap: 8px 14px; } footer { align-items: flex-start; flex-direction: column; gap: 13px; } }