:root {
    --paper: #f6f5f1;
    --white: #fff;
    --ink: #0a0a0a;
    --muted: #6d6d69;
    --line: #d8d6cf;
    --soft: #e9e7e0;
    --lime: #dfff55;
    --max: 1440px;
    --gutter: clamp(1.1rem, 3.2vw, 3.5rem);
    --section: clamp(5.5rem, 10vw, 10rem);
    --radius: 1.15rem;
    --sans: Arial, Helvetica, sans-serif;
    --serif: Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.45; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--white); }

.shell { width: min(var(--max), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.section-pad { padding-block: var(--section); }
.section-bottom { padding-bottom: var(--section); }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.065em; line-height: .92; }
h1 { font-size: clamp(4.2rem, 9.4vw, 10.8rem); }
h2 { font-size: clamp(3.2rem, 6.7vw, 7.5rem); }
h3 { font-size: clamp(2rem, 3vw, 3.5rem); }
em { font-family: var(--serif); font-weight: 400; }
p { color: var(--muted); }

/* Header */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    background: rgba(246, 245, 241, .88);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(10, 10, 10, .08);
}
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-size: .95rem; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: var(--white); border-radius: 50%; font-size: .85rem; }
.nav-panel { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.5rem); }
.nav-panel a { color: #464642; font-size: .87rem; transition: color .2s ease; }
.nav-panel a:hover, .nav-panel a[aria-current="page"] { color: var(--ink); }
.nav-panel .nav-cta { border: 1px solid var(--ink); border-radius: 100px; padding: .7rem 1rem; color: var(--ink); }
.nav-panel .nav-cta:hover { background: var(--ink); color: var(--white); }
.menu-button { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 1px solid var(--line); }
.menu-button span { position: absolute; width: 18px; height: 1px; background: var(--ink); left: 12px; transition: .25s ease; }
.menu-button span:first-child { top: 17px; }
.menu-button span:last-child { top: 25px; }
.menu-button.active span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button.active span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Hero */
.hero { min-height: 100svh; padding-top: clamp(8rem, 14vh, 11rem); padding-bottom: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.hero-kicker { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); color: var(--muted); text-transform: uppercase; font-size: .67rem; letter-spacing: .12em; }
.hero h1 { max-width: 1370px; margin-top: clamp(2rem, 7vh, 5rem); }
.hero h1 em { display: inline-block; }
.hero-bottom { display: grid; grid-template-columns: minmax(250px, 560px) auto; align-items: end; justify-content: space-between; gap: 2rem; margin-top: 3rem; }
.hero-bottom p { font-size: clamp(1.05rem, 1.7vw, 1.45rem); max-width: 580px; }
.round-link { width: clamp(72px, 8vw, 110px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-size: clamp(2rem, 4vw, 4rem); transition: transform .25s ease, background .25s ease; }
.round-link:hover { transform: rotate(-10deg); background: #2d2d2d; }

/* Generic title layouts */
.section-index, .page-label { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.statement { background: var(--ink); color: var(--white); }
.statement-grid { display: grid; grid-template-columns: 1fr 4fr; gap: 3rem; }
.statement h2 { max-width: 1100px; }
.statement .lead { color: rgba(255,255,255,.58); max-width: 690px; margin-top: 2rem; font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
.section-title-row { display: grid; grid-template-columns: 1fr 4fr; gap: 3rem; align-items: start; margin-bottom: clamp(3rem, 6vw, 6rem); }
.section-title-row h2 { max-width: 1100px; }
.section-title-row--compact { margin-bottom: 3rem; }
.text-link { display: inline-flex; align-items: center; gap: .65rem; margin-top: 2.5rem; padding-bottom: .35rem; border-bottom: 1px solid currentColor; font-size: .92rem; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, -3px); }

/* Website project videos inside a compact macOS-style browser */
.work-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
    padding-top: clamp(2rem, 6vw, 6rem);
}

.web-project {
    display: block;
    min-width: 0;
}

.web-project--large {
    grid-column: 1 / -1;
    width: min(1120px, 100%);
    margin-inline: auto;
}

.browser-preview {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #171717;
    border-radius: var(--radius);
    background: #101010;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .12);
    transform: translateZ(0);
}

.browser-top {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    background: #171717;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.browser-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.browser-dot--red { background: #ff5f57; }
.browser-dot--yellow { background: #febc2e; }
.browser-dot--green { background: #28c840; }

.browser-top small {
    min-width: 0;
    max-width: min(430px, 62%);
    margin-inline: auto;
    padding: .32rem .9rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: #242424;
    color: #aaa;
    font-size: .62rem;
    letter-spacing: .03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El área visible del vídeo siempre conserva la proporción Full HD 1920 × 1080 (16:9).
   La barra superior tipo macOS queda fuera de esta proporción. */
.browser-screen {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #080808;
}

.browser-screen video {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center center;
    background: #080808;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}

.web-project:hover .browser-screen video,
.project-detail:hover .browser-screen video {
    transform: scale(1.012);
    filter: contrast(1.02);
}
.project-caption { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 1.3rem; padding: 1.25rem 0 2rem; border-bottom: 1px solid var(--line); }
.project-caption > div { display: flex; align-items: baseline; gap: 1rem; }
.project-caption > div span { color: var(--muted); font-size: .72rem; }
.project-caption h3 { font-size: clamp(1.5rem, 2.2vw, 2.4rem); }
.project-caption p { font-size: .8rem; }
.project-caption .arrow { font-size: 1.3rem; transition: transform .25s ease; }
.web-project:hover .arrow { transform: translate(4px,-4px); }

/* Design gallery */
.design-strip { background: var(--white); }
.design-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.design-piece { min-width: 0; }
.design-piece--logo { grid-column: span 5; }
.design-piece--identity { grid-column: span 7; }
.design-piece--poster { grid-column: span 7; }
.design-piece--social { grid-column: span 5; }
.logo-study, .identity-study, .poster-study, .social-study { min-height: 500px; border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2.8rem); overflow: hidden; }
.logo-study { background: #e9e7df; display: flex; align-items: center; justify-content: center; gap: 2rem; }
.logo-study > span { font-family: var(--serif); font-size: clamp(9rem, 19vw, 20rem); line-height: .7; }
.logo-study small { font-size: .76rem; letter-spacing: .16em; }
.identity-study { background: #2f3b31; color: #f1e8ce; display: flex; flex-direction: column; justify-content: space-between; }
.identity-name { font-size: clamp(5rem, 14vw, 13rem); letter-spacing: -.1em; line-height: .7; }
.identity-study p { color: #f1e8ce; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1; }
.swatches { display: flex; gap: .55rem; }
.swatches i { width: 42px; height: 42px; border-radius: 50%; background: #e8d3a3; }
.swatches i:nth-child(2){background:#a45e3c}.swatches i:nth-child(3){background:#8e9a70}
.poster-study { background: #ff5338; color: #0b0b0b; display: flex; flex-direction: column; justify-content: space-between; }
.poster-study small { font-size: 1rem; }
.poster-study strong { font-size: clamp(5rem, 13vw, 13rem); line-height: .72; letter-spacing: -.1em; }
.poster-study p { color: #0b0b0b; border-top: 1px solid #0b0b0b; padding-top: 1rem; }
.social-study { background: #dfff55; color: #101010; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; }
.social-study span { font-size: clamp(3.7rem, 8vw, 8rem); line-height: .78; letter-spacing: -.08em; font-weight: 700; }
.social-study b { font-size: 1.3rem; }
.social-study small { grid-column: span 2; border-top: 1px solid #101010; padding-top: 1rem; }
.piece-copy { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; }
.piece-copy span { color: var(--muted); font-size: .8rem; text-align: right; max-width: 220px; }

/* Home services */
.services-home { background: var(--paper); }
.service-list { border-top: 1px solid var(--ink); }
.service-row { display: grid; grid-template-columns: .4fr 2fr 2fr auto; align-items: center; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.service-row > span { color: var(--muted); font-size: .75rem; }
.service-row h3 { font-size: clamp(1.9rem, 3.2vw, 3.5rem); }
.service-row p { max-width: 480px; }
.service-row b { font-size: 1.4rem; transition: transform .2s ease; }
.service-row:hover b { transform: translate(4px,-4px); }

/* Home pricing */
.pricing-preview { background: var(--ink); color: var(--white); }
.pricing-preview-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 8vw, 9rem); }
.pricing-intro h2 { font-size: clamp(3.2rem, 6vw, 6.8rem); margin: 1.5rem 0 2rem; }
.pricing-intro > p:not(.section-index) { color: rgba(255,255,255,.6); max-width: 520px; }
.price-briefs { border-top: 1px solid rgba(255,255,255,.25); }
.price-briefs article { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.price-briefs article span { font-size: clamp(1.5rem, 2.7vw, 2.7rem); letter-spacing: -.05em; }
.price-briefs article strong { font-size: .9rem; font-weight: 500; }
.price-briefs article p { grid-column: span 2; color: rgba(255,255,255,.5); }

/* CTA and footer */
.final-cta { text-align: center; }
.final-cta > p { text-transform: uppercase; font-size: .7rem; letter-spacing: .13em; margin-bottom: 2rem; }
.final-cta h2 { font-size: clamp(4rem, 9vw, 10rem); }
.pill-button { display: inline-flex; align-items: center; gap: 1rem; margin-top: 2.8rem; padding: 1rem 1.3rem 1rem 1.5rem; border-radius: 100px; background: var(--ink); color: var(--white); font-size: .92rem; }
.pill-button span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--ink); transition: transform .2s ease; }
.pill-button:hover span { transform: rotate(45deg); }
.site-footer { background: var(--ink); color: var(--white); padding: 3rem 0; }
.site-footer .brand-mark { background: var(--white); color: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.6fr .8fr 1.2fr; gap: 2rem; align-items: start; }
.footer-grid p { color: rgba(255,255,255,.52); max-width: 330px; font-size: .9rem; }
.footer-grid > div { display: flex; flex-direction: column; gap: .55rem; font-size: .82rem; }
.footer-grid > div:last-child { align-items: flex-end; }
.footer-grid > div span { color: rgba(255,255,255,.48); }

/* Inner page hero */
.page-hero { min-height: 88svh; padding-top: clamp(9.5rem, 16vh, 13rem); padding-bottom: 5rem; display: flex; flex-direction: column; }
.page-hero h1 { max-width: 1360px; margin-top: clamp(2rem, 5vw, 4rem); }
.page-hero-text { margin-top: auto; padding-top: 4rem; display: flex; justify-content: flex-end; }
.page-hero-text p { max-width: 600px; font-size: clamp(1.1rem, 1.8vw, 1.5rem); }

/* Web page */
.editorial-section { background: var(--white); }
.editorial-grid { display: grid; grid-template-columns: .7fr 2.3fr 1fr; gap: 3rem; align-items: start; }
.editorial-grid h2 { font-size: clamp(3rem, 6vw, 6.5rem); }
.editorial-copy { display: flex; flex-direction: column; gap: 1.2rem; padding-top: .4rem; }
.editorial-copy p { font-size: 1rem; }
.web-types { background: var(--paper); }
.web-type { display: grid; grid-template-columns: .35fr 2fr 1.15fr; gap: clamp(2rem, 5vw, 6rem); padding: clamp(2rem, 5vw, 5rem); border: 1px solid var(--line); border-radius: calc(var(--radius) + .3rem); margin-bottom: 1.2rem; }
.web-type--black { background: var(--ink); color: var(--white); border-color: var(--ink); }
.web-type-number { color: var(--muted); font-size: .8rem; }
.web-type .eyebrow { color: var(--muted); margin-bottom: 1.2rem; text-transform: uppercase; font-size: .7rem; letter-spacing: .12em; }
.web-type h2 { font-size: clamp(3rem, 5.2vw, 6rem); }
.web-type-copy p { margin-bottom: 1.5rem; }
.web-type-copy ul { list-style: none; border-top: 1px solid var(--line); }
.web-type-copy li { padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.web-type-copy a { display: inline-block; margin-top: 1.5rem; border-bottom: 1px solid currentColor; }
.web-type--black .web-type-copy p, .web-type--black .web-type-copy li { color: rgba(255,255,255,.6); }
.web-type--black .web-type-copy ul, .web-type--black .web-type-copy li { border-color: rgba(255,255,255,.2); }
.process-section { background: var(--white); }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); }
.process-grid article { min-height: 310px; padding: 1.4rem 1.4rem 1.4rem 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.process-grid article:not(:first-child) { padding-left: 1.4rem; }
.process-grid article:last-child { border-right: 0; }
.process-grid span { color: var(--muted); font-size: .75rem; }
.process-grid h3 { margin-top: auto; margin-bottom: 1rem; font-size: clamp(2rem, 2.8vw, 3rem); }
.process-grid p { font-size: .9rem; }
.all-projects { background: var(--paper); }
.projects-detail-grid { display: grid; gap: clamp(4rem, 8vw, 8rem); }
.project-detail { width: min(1180px, 100%); margin-inline: auto; display: grid; grid-template-columns: 1.65fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.project-detail:nth-child(even) { grid-template-columns: .8fr 1.65fr; }
.project-detail:nth-child(even) .browser-preview { order: 2; }
.project-detail-copy { padding-bottom: 1rem; }
.project-detail-copy > span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.project-detail-copy h3 { margin: 1.2rem 0; }
.project-detail-copy p { margin-bottom: 1.5rem; }
.project-detail-copy b { font-size: .85rem; border-bottom: 1px solid currentColor; }

/* Design page */
.design-manifesto { background: var(--ink); color: var(--white); }
.design-manifesto-grid { display: grid; grid-template-columns: .7fr 2.4fr 1fr; gap: 3rem; }
.design-manifesto-grid h2 { font-size: clamp(3rem, 6vw, 6.8rem); }
.design-manifesto-grid > div { display: flex; flex-direction: column; gap: 1.2rem; }
.design-manifesto-grid > div p { color: rgba(255,255,255,.58); }
.design-services-section { background: var(--paper); }
.design-service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.design-service { min-height: 610px; background: var(--white); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2.6rem); display: flex; flex-direction: column; }
.design-service > span { color: var(--muted); font-size: .75rem; }
.design-service h3 { margin-top: auto; margin-bottom: 1rem; }
.design-service > p { max-width: 520px; }
.mini-logo-art, .mini-identity-art, .mini-poster-art, .mini-social-art { margin: auto 0; min-height: 290px; display: flex; align-items: center; justify-content: center; }
.mini-logo-art { gap: 1.5rem; }
.mini-logo-art b { font-family: var(--serif); font-size: 11rem; font-weight: 400; line-height: .7; }
.mini-logo-art small { letter-spacing: .14em; }
.mini-identity-art { background: #6e7a56; color: #f4eedc; flex-wrap: wrap; gap: .7rem; padding: 2rem; }
.mini-identity-art strong { width: 100%; text-align: center; font-size: clamp(4rem, 9vw, 8rem); letter-spacing: -.08em; }
.mini-identity-art i { width: 45px; height: 45px; border-radius: 50%; background: #f1d69c; }
.mini-identity-art i:nth-of-type(2){background:#d78967}.mini-identity-art i:nth-of-type(3){background:#222d23}
.mini-poster-art { background: #e4412f; align-items: flex-start; justify-content: space-between; padding: 1.5rem; flex-direction: column; }
.mini-poster-art b { font-size: clamp(4rem, 8vw, 8rem); line-height: .75; letter-spacing: -.09em; }
.mini-social-art { background: #dfff55; align-items: flex-end; justify-content: space-between; padding: 1.5rem; }
.mini-social-art b { font-size: 8rem; line-height: .7; }
.mini-social-art span { font-size: 2rem; line-height: .85; font-weight: 700; }
.visual-work { background: var(--white); }
.visual-masonry { display: grid; grid-template-columns: repeat(12,1fr); gap: 1rem; }
.visual-card { min-width: 0; }
.visual-card > div { min-height: 500px; border-radius: var(--radius); padding: clamp(1.3rem, 2.8vw, 2.5rem); }
.visual-card > p { padding-top: .8rem; font-size: .8rem; }
.visual-card--brand { grid-column: span 5; }
.visual-card--poster { grid-column: span 7; }
.visual-card--system { grid-column: span 7; }
.visual-card--menu { grid-column: span 5; }
.visual-card--social { grid-column: span 12; }
.visual-card--brand > div { background: #ece8df; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.brand-symbol { font-family: var(--serif); font-size: 12rem; line-height: .65; }
.visual-card--brand strong { font-size: 2.5rem; letter-spacing: .14em; }
.visual-card--brand small { margin-top: .5rem; }
.visual-card--poster > div { background: #121212; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.visual-card--poster span { align-self: flex-end; text-align: right; font-size: .75rem; }
.visual-card--poster strong { font-size: clamp(5rem, 12vw, 12rem); line-height: .72; letter-spacing: -.1em; }
.visual-card--poster small { border-top: 1px solid #fff; padding-top: 1rem; }
.visual-card--system > div { background: #49594c; color: #eee7cf; display: flex; flex-direction: column; justify-content: space-between; }
.visual-card--system strong { font-size: clamp(5rem, 13vw, 12rem); letter-spacing: -.1em; }
.visual-card--system p { color: #eee7cf; font-family: var(--serif); font-size: 2rem; }
.system-colors { display: flex; gap: .6rem; }
.system-colors i { width: 48px; height: 48px; border-radius: 50%; background: #eee7cf; }.system-colors i:nth-child(2){background:#bd784e}.system-colors i:nth-child(3){background:#b9c3a3}.system-colors i:nth-child(4){background:#18251d}
.visual-card--menu > div { background: #f4c8be; display: flex; flex-direction: column; justify-content: space-between; }
.visual-card--menu strong { font-family: var(--serif); font-size: clamp(5rem, 10vw, 9rem); font-weight: 400; }
.visual-card--menu p { color: #111; border-top: 1px solid #111; padding-top: 1rem; }
.visual-card--social > div { min-height: 430px; background: #dfff55; display: grid; grid-template-columns: 1fr auto; align-items: start; }
.visual-card--social span { font-size: 1rem; }
.visual-card--social strong { grid-column: span 2; align-self: center; font-size: clamp(5rem, 14vw, 14rem); line-height: .75; letter-spacing: -.1em; }
.visual-card--social small { align-self: end; }
.deliverables { background: var(--paper); }
.deliverable-list { border-top: 1px solid var(--ink); }
.deliverable-list > div { display: grid; grid-template-columns: .5fr 3fr; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.deliverable-list span { color: var(--muted); font-size: .75rem; }
.deliverable-list p { color: var(--ink); font-size: clamp(1.4rem, 2.6vw, 2.8rem); letter-spacing: -.045em; }

/* Pricing page */
.pricing-category { background: var(--white); }
.pricing-category--dark { background: var(--ink); color: var(--white); }
.pricing-category-head { display: grid; grid-template-columns: .4fr 3fr; gap: 2rem; margin-bottom: 4rem; }
.pricing-category-head > p { color: var(--muted); }
.pricing-category-head span { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.pricing-category-head h2 { margin-top: 1.2rem; max-width: 1100px; }
.price-table { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.price-plan { min-height: 640px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.6rem); display: flex; flex-direction: column; color: var(--ink); }
.price-plan--featured { background: var(--lime); border-color: var(--lime); }
.plan-top { display: flex; justify-content: space-between; gap: 1rem; }
.plan-top p { color: var(--ink); font-weight: 700; }
.plan-top span { color: var(--muted); font-size: .75rem; }
.price-plan h3 { font-size: clamp(5rem, 9vw, 10rem); margin-top: clamp(2rem, 5vw, 5rem); }
.price-plan > small { color: var(--muted); }
.plan-description { margin: 1.8rem 0; max-width: 500px; }
.price-plan ul { list-style: none; border-top: 1px solid var(--line); margin-top: auto; }
.price-plan li { border-bottom: 1px solid var(--line); padding: .75rem 0; color: var(--muted); font-size: .9rem; }
.price-plan a { display: inline-block; margin-top: 1.5rem; align-self: flex-start; border-bottom: 1px solid currentColor; font-size: .85rem; }
.design-price-list { border-top: 1px solid var(--ink); }
.design-price-row { display: grid; grid-template-columns: .35fr 1.2fr 1.6fr auto; gap: 2rem; align-items: center; padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.design-price-row > span { color: var(--muted); font-size: .75rem; }
.design-price-row h3 { font-size: clamp(1.8rem, 3vw, 3rem); }
.design-price-row strong { white-space: nowrap; }
.conditions { background: var(--paper); }
.conditions-grid { display: grid; grid-template-columns: .6fr 1.5fr 1.2fr; gap: 3rem; }
.conditions-grid h2 { font-size: clamp(3rem, 5vw, 5.8rem); }
.conditions-grid > div { border-top: 1px solid var(--ink); }
.conditions-grid article { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.conditions-grid article span { display: block; color: var(--ink); margin-bottom: .5rem; font-size: .9rem; }

/* Contact */
.contact-layout { min-height: 100svh; padding-top: clamp(9.5rem, 15vh, 12rem); padding-bottom: var(--section); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.contact-heading { position: sticky; top: 120px; }
.contact-heading h1 { font-size: clamp(4.8rem, 9vw, 10rem); margin: 2rem 0; }
.contact-heading > p:not(.page-label) { max-width: 580px; font-size: clamp(1.05rem, 1.7vw, 1.4rem); }
.contact-direct { margin-top: 3rem; display: flex; flex-direction: column; gap: .35rem; }
.contact-direct span { color: var(--muted); font-size: .8rem; }
.contact-direct a { align-self: flex-start; border-bottom: 1px solid currentColor; }
.proposal-form { background: var(--white); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.7rem); border: 1px solid var(--line); }
.form-row { margin-bottom: 1.6rem; }
.form-row label { display: block; color: var(--muted); font-size: .78rem; margin-bottom: .45rem; }
.form-row input, .form-row textarea, .form-row select { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: .8rem 0; outline: none; border-radius: 0; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--ink); }
.form-row textarea { resize: vertical; }
.consent { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.consent input { margin-top: .15rem; accent-color: var(--ink); }
.form-submit { width: 100%; border: 0; border-radius: 100px; background: var(--ink); color: var(--white); padding: 1rem 1.3rem; margin-top: 1.5rem; display: flex; justify-content: space-between; }
.form-note { font-size: .72rem; margin-top: .8rem; }
.contact-faq { background: var(--white); }
.faq-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.faq-grid article { min-height: 280px; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; }
.faq-grid h3 { font-size: clamp(1.7rem, 2.4vw, 2.5rem); }
.faq-grid p { margin-top: auto; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1100px) {
    .work-showcase { grid-template-columns: 1fr 1fr; }
    .web-project--large { grid-column: 1 / -1; }
    .statement-grid, .section-title-row { grid-template-columns: .7fr 3fr; }
    .editorial-grid, .design-manifesto-grid, .conditions-grid { grid-template-columns: .6fr 2fr; }
    .editorial-grid .editorial-copy, .design-manifesto-grid > div, .conditions-grid > div { grid-column: 2; }
    .web-type { grid-template-columns: .25fr 1.6fr 1fr; }
    .project-detail, .project-detail:nth-child(even) { grid-template-columns: 1.35fr .75fr; }
    .project-detail:nth-child(even) .browser-preview { order: 0; }
        .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-grid > div:last-child { align-items: flex-start; }
}

@media (max-width: 850px) {
    .menu-button { display: block; z-index: 2; }
    .nav-panel { position: fixed; inset: 76px var(--gutter) auto; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 18px 50px rgba(0,0,0,.08); display: flex; flex-direction: column; align-items: stretch; gap: 0; opacity: 0; pointer-events: none; transform: translateY(-12px); transition: .25s ease; }
    .nav-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .nav-panel a { padding: .95rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; color: var(--ink); }
    .nav-panel .nav-cta { margin-top: .7rem; text-align: center; border-bottom: 1px solid var(--ink); }
    .hero { min-height: 92svh; }
    .hero h1 { font-size: clamp(4rem, 13vw, 7rem); }
    .hero-bottom { grid-template-columns: 1fr auto; }
    .statement-grid, .section-title-row, .pricing-preview-grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .design-piece--logo, .design-piece--identity, .design-piece--poster, .design-piece--social { grid-column: span 6; }
    .service-row { grid-template-columns: .3fr 1.7fr auto; }
    .service-row p { grid-column: 2 / span 2; }
    .editorial-grid, .design-manifesto-grid, .conditions-grid { grid-template-columns: 1fr; }
    .editorial-grid .editorial-copy, .design-manifesto-grid > div, .conditions-grid > div { grid-column: auto; }
    .web-type { grid-template-columns: .2fr 1.8fr; }
    .web-type-copy { grid-column: 2; }
    .process-grid { grid-template-columns: repeat(2,1fr); }
    .process-grid article:nth-child(2) { border-right: 0; }
    .process-grid article:nth-child(n+3) { border-top: 1px solid var(--line); }
    .project-detail, .project-detail:nth-child(even) { grid-template-columns: 1fr; }
        .design-service { min-height: 540px; }
    .visual-card--brand, .visual-card--poster, .visual-card--system, .visual-card--menu { grid-column: span 6; }
    .price-table { grid-template-columns: 1fr; }
    .design-price-row { grid-template-columns: .25fr 1fr auto; }
    .design-price-row p { grid-column: 2 / span 2; }
    .contact-layout { grid-template-columns: 1fr; }
    .contact-heading { position: static; }
    .faq-grid { grid-template-columns: 1fr; }
    .faq-grid article { min-height: 220px; }
}

@media (max-width: 620px) {
    :root { --gutter: 1rem; --radius: .85rem; }
    .nav { min-height: 68px; }
    .nav-panel { top: 68px; }
    .hero { padding-top: 7.5rem; padding-bottom: 1.5rem; }
    .hero-kicker span:last-child { display: none; }
    .hero-bottom { grid-template-columns: 1fr; }
    .round-link { width: 72px; justify-self: end; }
    h1 { font-size: clamp(3.6rem, 16vw, 5.7rem); }
    h2 { font-size: clamp(3rem, 13vw, 5rem); }
    .work-showcase { grid-template-columns: 1fr; }
    .web-project--large { grid-column: auto; }
    .project-caption { grid-template-columns: 1fr auto; }
    .project-caption > p { grid-column: 1; }
    .project-caption .arrow { grid-column: 2; grid-row: 1 / span 2; }
    .design-piece--logo, .design-piece--identity, .design-piece--poster, .design-piece--social { grid-column: span 12; }
    .logo-study, .identity-study, .poster-study, .social-study { min-height: 390px; }
    .piece-copy { flex-direction: column; }
    .piece-copy span { text-align: left; }
    .service-row { grid-template-columns: .2fr 1fr auto; gap: .8rem; }
    .service-row p { grid-column: 2 / span 2; }
    .price-briefs article { grid-template-columns: 1fr; }
    .price-briefs article p { grid-column: auto; }
    .footer-grid { grid-template-columns: 1fr; }
    .page-hero { min-height: 80svh; padding-top: 8.5rem; }
    .page-hero h1 { font-size: clamp(3.7rem, 15vw, 5.8rem); }
    .web-type { grid-template-columns: 1fr; padding: 1.35rem; }
    .web-type-copy { grid-column: auto; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid article, .process-grid article:not(:first-child) { min-height: 260px; padding: 1.2rem 0; border-right: 0; border-top: 1px solid var(--line); }
    .process-grid article:first-child { border-top: 0; }
        .design-service-grid { grid-template-columns: 1fr; }
    .design-service { min-height: 500px; }
    .visual-card--brand, .visual-card--poster, .visual-card--system, .visual-card--menu, .visual-card--social { grid-column: span 12; }
    .visual-card > div { min-height: 390px; }
    .deliverable-list > div { grid-template-columns: .2fr 1fr; gap: 1rem; }
    .pricing-category-head { grid-template-columns: 1fr; }
    .price-plan { min-height: 580px; }
    .design-price-row { grid-template-columns: .2fr 1fr; gap: 1rem; }
    .design-price-row p, .design-price-row strong { grid-column: 2; }
    .conditions-grid { gap: 1.5rem; }
    .contact-layout { padding-top: 8.5rem; }
    .proposal-form { padding: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}

/* FINAL 16:9 VIDEO FIX — keep this block at the end of the file */
/*
   The old stylesheet used min-height values (390px, 620px, 790px, etc.)
   for the browser previews. Those values made the videos look vertical.
   This final override removes every forced height and locks only the video
   viewport to 16:9. The macOS bar sits above it and is not part of the ratio.
*/
.browser-preview,
.web-project--large .browser-preview,
.project-detail .browser-preview {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden;
}

.browser-screen {
    position: relative;
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #080808;
}

.browser-screen video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    background: #080808;
}

/* Prevent grid/flex sizing from using the video's intrinsic dimensions. */
.web-project,
.project-detail,
.browser-preview,
.browser-screen {
    min-width: 0;
}
/* ================================
   HOME - DISEÑO VISUAL REAL
================================ */

.design-strip {
    background: var(--white);
}

.design-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2vw, 1.6rem);
}

.design-piece {
    min-width: 0;
}

.design-piece--logo {
    grid-column: span 6;
}

.design-piece--identity {
    grid-column: span 6;
}

.design-piece--poster {
    grid-column: span 6;
}

.design-piece--social {
    grid-column: span 6;
}

.design-piece-media {
    width: 100%;
    height: clamp(360px, 42vw, 620px);
    overflow: hidden;
    border-radius: var(--radius);
    background: #ece9e1;
    border: 1px solid rgba(10, 10, 10, 0.08);
}

.design-piece-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease, filter 0.3s ease;
}

.design-piece-media--contain img {
    object-fit: contain;
    padding: clamp(2rem, 5vw, 5rem);
    background: #f3f1eb;
}

.design-piece-media--portrait img {
    object-fit: contain;
    padding: clamp(1rem, 2vw, 2rem);
    background: #f3f1eb;
}

.design-piece:hover .design-piece-media img {
    transform: scale(1.025);
    filter: contrast(1.04);
}

.design-piece-media--contain:hover img,
.design-piece-media--portrait:hover img {
    transform: scale(1.015);
}

.piece-copy {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 1rem;
}

.piece-copy strong {
    color: var(--ink);
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.piece-copy span {
    max-width: 230px;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: right;
}

/* Tablet */
@media (max-width: 850px) {
    .design-piece--logo,
    .design-piece--identity,
    .design-piece--poster,
    .design-piece--social {
        grid-column: span 6;
    }

    .design-piece-media {
        height: clamp(320px, 55vw, 520px);
    }
}

/* Móvil */
@media (max-width: 620px) {
    .design-gallery {
        grid-template-columns: 1fr;
    }

    .design-piece--logo,
    .design-piece--identity,
    .design-piece--poster,
    .design-piece--social {
        grid-column: auto;
    }

    .design-piece-media {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .design-piece-media--contain {
        aspect-ratio: 1 / 1;
    }

    .design-piece-media--portrait {
        aspect-ratio: 3 / 4;
    }

    .piece-copy {
        flex-direction: column;
        gap: 0.35rem;
    }

    .piece-copy span {
        max-width: none;
        text-align: left;
    }
}

/* ================================
   FLECHAS LIMPIAS CSS
   Sustituye los símbolos ↗ ↘ por flechas dibujadas
================================ */

/* Ocultamos el carácter original */
.arrow,
.service-row b,
.text-link span,
.pill-button span,
.round-link {
    font-size: 0;
}

/* Flecha básica */
.arrow::before,
.service-row b::before,
.text-link span::before,
.pill-button span::before,
.round-link::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    transform: rotate(45deg);
}

/* Línea de la flecha */
.arrow::after,
.service-row b::after,
.text-link span::after,
.pill-button span::after,
.round-link::after {
    content: "";
    display: block;
    width: 24px;
    height: 1.8px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: right center;
    margin-top: -10px;
    margin-left: -6px;
}

/* Flechas normales de proyectos y servicios */
.arrow,
.service-row b,
.text-link span {
    position: relative;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    color: currentColor;
}

/* Flecha dentro del botón redondo grande del hero */
.round-link {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--white);
}

.round-link::before {
    width: 26px;
    height: 26px;
    border-width: 2.2px;
}

.round-link::after {
    width: 34px;
    height: 2.2px;
    margin-top: -14px;
    margin-left: -9px;
}

/* Flecha dentro del botón principal tipo pill */
.pill-button span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    position: relative;
}

.pill-button span::before {
    width: 12px;
    height: 12px;
    border-width: 1.6px;
}

.pill-button span::after {
    width: 18px;
    height: 1.6px;
    margin-top: -7px;
    margin-left: -5px;
}

/* Animaciones limpias */
.web-project:hover .arrow,
.service-row:hover b,
.text-link:hover span {
    transform: translate(4px, -4px);
}

.pill-button:hover span {
    transform: rotate(45deg);
}

.round-link:hover {
    transform: rotate(-8deg);
}

/* En móvil las quitamos igualmente para que no molesten */
@media (max-width: 620px) {
    .round-link,
    .project-caption .arrow,
    .service-row b,
    .text-link span,
    .pill-button span {
        display: none;
    }

    .project-caption {
        grid-template-columns: 1fr;
    }

    .service-row {
        grid-template-columns: .2fr 1fr;
    }

    .service-row p {
        grid-column: 2;
    }

    .pill-button {
        padding: 1rem 1.5rem;
    }
}

/* ================================
   QUITAR TODAS LAS FLECHAS
   Desktop + móvil
================================ */

/* Elimina flechas de proyectos, servicios, botones y enlaces */
.arrow,
.service-row b,
.text-link span,
.pill-button span,
.round-link {
    display: none !important;
}

/* Elimina también las flechas dibujadas con CSS */
.arrow::before,
.arrow::after,
.service-row b::before,
.service-row b::after,
.text-link span::before,
.text-link span::after,
.pill-button span::before,
.pill-button span::after,
.round-link::before,
.round-link::after {
    content: none !important;
    display: none !important;
}

/* Hero sin botón redondo */
.hero-bottom {
    grid-template-columns: minmax(250px, 620px);
    justify-content: start;
}

/* Proyectos sin columna de flecha */
.project-caption {
    grid-template-columns: 1fr auto;
}

.project-caption > p {
    grid-column: auto;
}

/* Servicios sin columna final de flecha */
.service-row {
    grid-template-columns: .4fr 2fr 2fr;
}

/* Enlaces tipo "Ver todos los trabajos" sin hueco de flecha */
.text-link {
    gap: 0;
}

/* Botones principales sin círculo de flecha */
.pill-button {
    gap: 0;
    padding: 1rem 1.5rem;
}

/* Quita animaciones de flechas anteriores */
.web-project:hover .arrow,
.service-row:hover b,
.text-link:hover span,
.pill-button:hover span,
.round-link:hover {
    transform: none !important;
}

/* Móvil */
@media (max-width: 620px) {
    .hero-bottom {
        grid-template-columns: 1fr;
    }

    .project-caption {
        grid-template-columns: 1fr;
    }

    .service-row {
        grid-template-columns: .2fr 1fr;
    }

    .service-row p {
        grid-column: 2;
    }
}


.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-note.success {
    color: #1f7a3a;
}

.form-note.error {
    color: #b3261e;
}