:root {
  --ink: #151410;
  --ink-soft: #37342c;
  --sand: #e8e0d1;
  --paper: #f3efe7;
  --gold: #c99b51;
  --gold-light: #e8c986;
  --line: rgba(21, 20, 16, 0.17);
  --display: Georgia, "Times New Roman", serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--body); }
a { color: inherit; }
button { font: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; background: white; color: black; padding: .75rem; z-index: 30; }
.skip-link:focus { top: 1rem; }
.preview-banner { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .45rem 1rem; text-align: center; background: #231e17; color: #fff8e9; font-size: .68rem; line-height: 1.4; letter-spacing: .055em; text-transform: uppercase; }
.preview-dot { width: 6px; height: 6px; background: var(--gold-light); border-radius: 100%; box-shadow: 0 0 12px var(--gold-light); }
.site-header { height: 86px; padding: 0 clamp(1.25rem, 5vw, 5rem); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.wordmark { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; }
.wordmark-main { font-family: var(--display); font-size: 1.65rem; font-weight: 700; letter-spacing: .15em; }
.wordmark-sub { margin-top: .45rem; font-size: .49rem; letter-spacing: .28em; font-weight: 700; }
nav { display: flex; gap: clamp(1rem, 2vw, 2rem); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
nav a { text-decoration: none; padding: .55rem 0; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
nav a:hover, nav a:focus-visible { border-color: var(--gold); }
.hero { min-height: min(770px, calc(100vh - 122px)); display: grid; align-items: end; position: relative; overflow: hidden; background: var(--ink); color: #fffaf0; isolation: isolate; }
.hero-media, .hero-media img, .hero-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 65% center; z-index: -3; }
.hero-wash { z-index: -2; background: linear-gradient(90deg, rgba(13, 12, 9, .95) 0%, rgba(15, 13, 10, .78) 36%, rgba(15, 13, 10, .23) 76%, rgba(15, 13, 10, .18) 100%), linear-gradient(0deg, rgba(13, 12, 9, .56), transparent 45%); }
.hero-line { position: absolute; width: 72vw; height: 1px; background: linear-gradient(90deg, transparent, rgba(237, 199, 125, .72), transparent); transform: rotate(-31deg); transform-origin: center; z-index: -1; opacity: .52; }
.line-one { left: 23%; top: 18%; }.line-two { left: 46%; top: 78%; opacity: .25; }
.hero-content { max-width: 680px; padding: clamp(5rem, 11vw, 9rem) clamp(1.25rem, 8vw, 8rem) clamp(4rem, 8vw, 6.5rem); }
.eyebrow { margin: 0 0 1.25rem; font-size: .67rem; font-weight: 700; letter-spacing: .2em; line-height: 1.4; }.gold { color: #896832; }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { font-weight: 400; }
h1 { margin-bottom: 1.35rem; max-width: 650px; font-family: var(--display); font-size: clamp(3.25rem, 7vw, 6.45rem); line-height: .92; letter-spacing: -.065em; }
h1 em, h2 em { color: var(--gold-light); font-style: italic; }
.hero-intro { max-width: 460px; font-size: clamp(1rem, 1.6vw, 1.23rem); line-height: 1.65; color: #e3dacb; }.hero-actions { display: flex; gap: 1.25rem; align-items: center; margin-top: 2.2rem; flex-wrap: wrap; }
.button { display: inline-flex; gap: 2.8rem; justify-content: space-between; align-items: center; border: 1px solid transparent; padding: .95rem 1.1rem 1rem 1.25rem; min-width: 220px; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.button-gold { background: var(--gold-light); color: #281e10; }.button-light { background: #fffaf0; color: #1f1a13; }.disabled-cta { cursor: not-allowed; opacity: .85; }.disabled-cta:hover { transform: none; }
.text-link { font-size: .68rem; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; border-bottom: 1px solid rgba(255,255,255,.44); padding-bottom: .45rem; }.text-link span { color: var(--gold-light); margin-left: .3rem; }
.cta-note { margin: .85rem 0 0; color: #c2b9aa; font-size: .72rem; }.asset-credit { position: absolute; right: clamp(1.25rem, 5vw, 5rem); bottom: 1.45rem; max-width: 260px; margin: 0; color: #c6bcaa; font-size: .61rem; line-height: 1.45; text-align: right; }.hero-index { display: flex; align-items: center; gap: .7rem; position: absolute; left: clamp(1.25rem, 5vw, 5rem); bottom: 1.65rem; font-size: .61rem; letter-spacing: .1em; color: #d4c6ae; }.hero-index i { width: 54px; height: 1px; background: rgba(255,255,255,.42); }
.section-shell { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }.intro { display: grid; grid-template-columns: .45fr 1.2fr .65fr; gap: clamp(2rem, 6vw, 7rem); padding-block: clamp(5rem, 10vw, 9rem); align-items: center; }.intro-mark { font-family: var(--display); font-size: clamp(6rem, 15vw, 13rem); color: var(--gold); line-height: .6; }.intro h2, .section-heading h2, .approach h2, .contact h2 { font-family: var(--display); font-size: clamp(2.5rem, 4.8vw, 4.45rem); letter-spacing: -.055em; line-height: .98; }.intro h2 em, .section-heading h2 em { color: #806432; }.intro p { max-width: 550px; color: var(--ink-soft); line-height: 1.75; }.intro-aside { border-left: 1px solid var(--line); padding-left: 1.5rem; display: grid; gap: .7rem; }.intro-aside span { color: #7f6d51; font-size: .59rem; letter-spacing: .16em; font-weight: 700; }.intro-aside strong { font-family: var(--display); font-size: 1.5rem; font-weight: 400; }.intro-aside small { color: #5b574f; line-height: 1.5; }
.components { padding: clamp(4.5rem, 9vw, 8rem) 0; background: #ded4c3; }.section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 3rem; }.section-heading h2 { max-width: 570px; margin-bottom: 0; }.section-heading > p { max-width: 305px; color: #625947; line-height: 1.6; font-size: .91rem; }.component-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(50, 39, 21, .2); border: 1px solid rgba(50, 39, 21, .2); }.component-card { position: relative; min-height: 335px; padding: 1.45rem; background: #e9e0d2; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }.component-no { position: absolute; top: 1.35rem; left: 1.45rem; color: #806432; font-size: .65rem; letter-spacing: .12em; }.component-card h3 { margin-bottom: .55rem; font-family: var(--display); font-size: 1.65rem; }.component-card p { margin-bottom: 0; color: #655c4d; line-height: 1.55; font-size: .78rem; }.orb, .charm, .finding { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); }.orb { width: 106px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 28% 20%, #fff8ce 0%, #efc35f 16%, #bd7d1d 50%, #57300c 100%); box-shadow: inset -15px -14px 25px rgba(61,32,5,.34), 19px 22px 28px rgba(73,53,26,.2); }.orb-faceted { clip-path: polygon(50% 0%, 83% 10%, 100% 42%, 88% 83%, 50% 100%, 12% 83%, 0 42%, 17% 10%); border-radius: 0; background: conic-gradient(from 30deg, #633a0d, #ffde83, #a86115, #fff3b0, #6c3d0e); }.charm { width: 87px; aspect-ratio: 1; transform: translateX(-50%) rotate(45deg); border-radius: 18px; background: linear-gradient(135deg, #f9df93, #aa6617 76%); box-shadow: 17px 20px 28px rgba(73,53,26,.2); }.charm::after { content: ""; position: absolute; width: 22px; height: 22px; border: 8px solid #bd7b20; background: #e9e0d2; border-radius: 50%; left: 50%; top: -29px; transform: translateX(-50%) rotate(-45deg); }.finding { width: 118px; height: 35px; border-radius: 4px; transform: translateX(-50%) rotate(-17deg); background: linear-gradient(180deg, #ffdb7d, #9e5f13); box-shadow: 15px 18px 22px rgba(73,53,26,.2); }.finding::before, .finding::after { content: ""; position: absolute; width: 26px; height: 26px; top: 5px; border: 6px solid #c7892c; border-radius: 50%; }.finding::before { left: -25px; }.finding::after { right: -25px; }
.approach { color: #f5ede1; background: #171510; padding-block: clamp(5rem, 10vw, 9rem); }.approach-content { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 9vw, 10rem); align-items: center; }.approach h2 { margin-bottom: 1.5rem; }.approach p { max-width: 560px; color: #c9bfaf; line-height: 1.75; }.approach-list { padding: 0; margin: 2.2rem 0 0; list-style: none; border-top: 1px solid rgba(238,220,187,.2); }.approach-list li { display: flex; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid rgba(238,220,187,.2); color: #e4d9c7; }.approach-list span { color: var(--gold-light); font-size: .68rem; }.metal-panel { min-height: 430px; background: radial-gradient(circle at 69% 34%, rgba(240,205,122,.44), transparent 5%), radial-gradient(circle at 46% 68%, rgba(232,190,101,.3), transparent 8%), linear-gradient(135deg, #403322, #14120e 69%); overflow: hidden; position: relative; border: 1px solid rgba(238,220,187,.16); }.metal-ring { position: absolute; border: 1px solid rgba(244,203,116,.64); border-radius: 50%; }.ring-one { width: 310px; height: 310px; top: -59px; right: -63px; }.ring-two { width: 205px; height: 205px; bottom: 12px; left: 8%; }.ring-three { width: 110px; height: 110px; left: 47%; top: 38%; border-color: rgba(244,203,116,.27); }.metal-panel p { position: absolute; bottom: 1.65rem; left: 1.65rem; color: #ffefd0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4.8rem); letter-spacing: .08em; line-height: .8; }.metal-panel p span { font-size: .56em; color: var(--gold-light); letter-spacing: .2em; }
.contact { padding: clamp(5rem, 10vw, 9rem) 0; text-align: center; background: linear-gradient(105deg, #b98331, #e3c16d 49%, #9b6724); color: #21170c; }.contact-inner { max-width: 820px; }.contact .eyebrow { color: #50330f; }.contact h2 { margin-bottom: 1.15rem; }.contact h2 em { color: #fff1c6; }.contact > p, .contact-inner > p { margin-inline: auto; max-width: 530px; line-height: 1.65; }.contact .button { margin-top: 1.55rem; }.contact-note { margin-top: 1.15rem; font-size: .68rem; color: #5b3d14; }
footer { padding: 2.4rem clamp(1.25rem, 5vw, 5rem); color: #e0d7c8; background: #151410; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }footer .wordmark-sub { color: #a69a88; }footer p { margin: 0; font-size: .7rem; color: #a69a88; }
.reveal { animation: rise .75s both; }.delay-1 { animation-delay: .08s; }.delay-2 { animation-delay: .16s; }.delay-3 { animation-delay: .24s; }@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) { .site-header { height: 75px; }.site-header nav { display: none; }.hero { min-height: 680px; }.hero-media img { object-position: 70% center; }.hero-wash { background: linear-gradient(0deg, rgba(13,12,9,.9) 0%, rgba(13,12,9,.55) 55%, rgba(13,12,9,.34) 100%); }.asset-credit { left: 1.25rem; right: auto; bottom: 1.2rem; text-align: left; }.hero-index { display: none; }.intro { grid-template-columns: .3fr 1fr; }.intro-aside { grid-column: 2; }.component-grid { grid-template-columns: repeat(2, 1fr); }.approach-content { grid-template-columns: 1fr; }.metal-panel { min-height: 330px; }.section-heading { display: block; }.section-heading > p { margin-top: 1.25rem; }.hero-content { padding-bottom: 7.5rem; } }
@media (max-width: 510px) { .preview-banner { font-size: .58rem; }.wordmark-main { font-size: 1.35rem; }.hero { min-height: 650px; }.hero-content { width: 100%; padding-top: 4rem; }.hero-intro { max-width: 280px; font-size: .92rem; }.hero-content .cta-note { max-width: 280px; } h1 { font-size: clamp(3.05rem, 15vw, 4.2rem); } h1 em { display: block; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }.intro { grid-template-columns: 1fr; gap: 2rem; }.intro-mark { font-size: 7rem; }.intro-aside { grid-column: auto; }.component-grid { grid-template-columns: 1fr; }.component-card { min-height: 290px; }.section-shell { width: min(100% - 2rem, 1180px); } footer { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { animation: none; }.button, nav a { transition: none; } }

/* Iteración FREZSAS: tarjetas fotográficas, contacto directo y motion al entrar en viewport. */
.button { text-decoration: none; transition: transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease, background-color 240ms ease; }
.button:hover, .button:focus-visible { box-shadow: 0 10px 24px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, .contact-inline:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.text-link { transition: border-color 220ms ease, color 220ms ease; }
.text-link:hover, .text-link:focus-visible { border-color: var(--gold-light); color: #fff8e9; }
nav a { position: relative; border-bottom: 0; }
nav a::after { position: absolute; right: 0; bottom: .25rem; left: 0; height: 1px; content: ""; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 260ms cubic-bezier(.22,.61,.36,1); }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.component-card { min-height: 400px; background: #e9e0d2; isolation: isolate; transition: background-color 280ms ease, transform 360ms cubic-bezier(.22,.61,.36,1), box-shadow 360ms ease; }
.component-card::after { position: absolute; content: ""; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(16, 13, 8, .72) 100%); z-index: -1; }
.component-card:hover { background: #17130e; box-shadow: 0 12px 26px rgba(46, 34, 16, .16); transform: translateY(-3px); }
.component-no { z-index: 2; color: #fff0cc; }
.component-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.03); transition: transform 700ms cubic-bezier(.22,.61,.36,1), filter 350ms ease; }
.component-card:hover .component-image { filter: saturate(1.02) contrast(1.06); transform: scale(1.025); }
.component-card h3 { position: relative; color: #fff8e9; }
.component-card p { position: relative; color: #e4dac9; }
.illustration-note { margin-top: 1.15rem; color: #786b56; font-size: .68rem; line-height: 1.5; }
.contact-person { display: grid; grid-template-columns: minmax(210px, .5fr) 1fr; gap: clamp(2rem, 8vw, 7rem); align-items: center; padding-block: clamp(4.5rem, 9vw, 7rem); }
.contact-portrait { min-height: 265px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; background: linear-gradient(135deg, #272118, #554021); border: 1px solid rgba(201,155,81,.47); color: var(--gold-light); }
.contact-portrait span { display: grid; width: 120px; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--display); font-size: 2.5rem; letter-spacing: .08em; }
.contact-portrait small { font-size: .53rem; letter-spacing: .16em; }
.contact-person h2 { margin-bottom: 1rem; font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.05em; }
.contact-person p { max-width: 530px; color: var(--ink-soft); line-height: 1.75; }
.contact-inline { display: inline-block; margin-top: .65rem; border-bottom: 1px solid var(--gold); color: #725527; font-size: .73rem; font-weight: 700; letter-spacing: .09em; padding-bottom: .45rem; text-decoration: none; text-transform: uppercase; transition: transform 220ms cubic-bezier(.22,.61,.36,1), color 220ms ease, border-color 220ms ease; }
.contact-inline:hover { color: var(--ink); border-color: var(--ink); transform: translateX(3px); }
.reveal { animation: none; opacity: 1; transform: none; }
.motion-enabled .reveal { opacity: 0; transform: translateY(16px); transition: opacity 520ms ease, transform 650ms cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; }
.motion-enabled .hero-reveal { transform: translateY(14px); }
.motion-enabled .reveal.is-visible { opacity: 1; transform: translateY(0); }
.motion-enabled .delay-1 { transition-delay: 80ms; }.motion-enabled .delay-2 { transition-delay: 160ms; }.motion-enabled .delay-3 { transition-delay: 240ms; }
@media (max-width: 800px) { .contact-person { grid-template-columns: 240px 1fr; } }
@media (max-width: 510px) {
  .section-shell { width: calc(100% - 2rem); }
  .intro, .approach-content { min-width: 0; }
  .intro > *, .approach-content > * { min-width: 0; }
  .intro h2, .section-heading h2, .approach h2, .contact h2, .contact-person h2 { max-width: 100%; overflow-wrap: anywhere; }
  .intro h2 { max-inline-size: 12ch; }
  .approach h2 { max-inline-size: 14ch; }
  .component-card { min-height: 350px; }
  .contact-person { grid-template-columns: 1fr; }
  .contact-portrait { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .motion-enabled .reveal, .motion-enabled .reveal.is-visible { opacity: 1; transform: none; transition: none; }.button, nav a, nav a::after, .text-link, .component-card, .component-image, .contact-inline { transition: none; } }