/* Estilos del sitio original de ChatGPT, extraídos del build publicado (sin Tailwind, que no se usaba).
   Los colores de tema (--muted, --alt-bg, --glass…) viven en palettes.css, que cargan todas las páginas. */
:root {
  --color-warm-cream: #ffedd7;
  --color-walnut-shadow: #100904;
  --color-bark-brown: #382416;
  --color-cork-border: #40372e;
  --color-driftwood: #6c5f51;
  --color-ember-accent: #dc5000;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--color-walnut-shadow); color: var(--color-warm-cream); -webkit-font-smoothing: antialiased; margin: 0; font-family: Inter, "Helvetica Neue", "Segoe UI", Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
::selection { color: var(--color-walnut-shadow); background: var(--color-warm-cream); }
.skip-link { z-index: 100; color: var(--color-walnut-shadow); background: var(--color-warm-cream); padding: 0.8rem 1rem; position: fixed; top: -5rem; left: 1rem; }
.skip-link:focus { top: 1rem; }
.eyebrow, .site-header, .hero-bottomline, .hero-edge, .chapter-label, .story-top, .story-progress, .service-number, .section-end, .process-step > span, .process-caption, .contact-top, .contact-bottom { text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.8rem; font-weight: 500; line-height: 1.25; }
.site-header { z-index: 50; border-bottom: 1px dashed transparent; justify-content: space-between; align-items: center; gap: 2rem; height: 80px; padding: 0 clamp(1.5rem, 4.2vw, 5rem); transition: background 0.4s, border-color 0.4s; display: flex; position: fixed; top: 0; left: 0; right: 0; }
.site-header.is-scrolled { border-bottom-color: var(--color-cork-border); backdrop-filter: blur(15px); background: var(--glass); }
.header-mark { font-size: 1.22rem; font-weight: 500; line-height: 1; }
.site-header nav { align-items: center; gap: clamp(1.4rem, 3vw, 3.6rem); display: flex; }
.site-header nav a { border-bottom: 1px dashed transparent; padding: 0.5rem 0; transition: border-color 0.25s; }
:is(.site-header nav a:hover, .site-header nav a:focus-visible) { border-color: var(--color-warm-cream); }
.hero { isolation: isolate; background: rgb(26, 16, 9); height: 100svh; min-height: 760px; position: relative; overflow: hidden; }
.hero-photo, .hero-vignette { width: 100%; height: 100%; position: absolute; inset: 0; }
.hero-photo { z-index: -2; object-fit: cover; object-position: 55% center; animation: slow-push 18s ease-in-out infinite alternate; }
.hero-vignette { z-index: -1; background: linear-gradient(90deg, rgba(16, 9, 4, 0.88) 0%, rgba(16, 9, 4, 0.59) 35%, rgba(16, 9, 4, 0.05) 75%), linear-gradient(rgba(16, 9, 4, 0.2), transparent 72%, rgba(16, 9, 4, 0.85)); }
.hero-content { z-index: 3; max-width: min(670px, 53vw); position: absolute; top: clamp(10rem, 22vh, 17rem); left: clamp(1.5rem, 4.2vw, 5rem); }
.hero-kicker { margin: 0 0 1.6rem; animation: fade-rise 0.9s ease both; }
.hero h1 { letter-spacing: 0; text-transform: uppercase; text-wrap: balance; margin: 0; font-size: clamp(3.8rem, 6.1vw, 7rem); font-weight: 500; line-height: 0.9; animation: fade-rise 1s ease 0.13s both; }
.hero-body { max-width: 490px; margin: 2rem 0 2.1rem; font-size: clamp(1.12rem, 1.65vw, 1.68rem); font-weight: 400; line-height: 1.28; animation: fade-rise 1s ease 0.28s both; }
.outline-link { border: 1px solid var(--color-warm-cream); border-radius: 22.5px; justify-content: space-between; align-items: center; gap: 2.3rem; min-width: 205px; padding: 0.75rem 1.1rem; font-size: 0.78rem; font-weight: 500; line-height: 1.2; transition: background 0.3s, color 0.3s, transform 0.3s; animation: fade-rise 1s ease 0.38s both; display: inline-flex; }
.outline-link:hover { color: var(--color-walnut-shadow); background: var(--color-warm-cream); transform: translateY(-3px); }
.hero-actions { flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; display: flex; }
.hero-scroll-link { border-bottom: 1px solid rgba(255, 237, 215, 0.7); padding: 0.65rem 0; font-size: 0.78rem; font-weight: 500; transition: border-color 0.25s; animation: fade-rise 1s ease 0.48s both; }
.hero-scroll-link:hover { border-color: transparent; }
.hero-brand { z-index: 1; letter-spacing: -0.055em; opacity: 0.9; pointer-events: none; font-size: clamp(8rem, 17.5vw, 22rem); font-weight: 500; line-height: 0.72; animation: brand-arrive 1.6s ease 0.35s both; position: absolute; bottom: 7.5vh; left: 3.5vw; }
.hero-edge { writing-mode: vertical-rl; z-index: 2; position: absolute; top: 44%; right: 1.4rem; }
.hero-bottomline { z-index: 4; border-top: 1px dashed rgba(255, 237, 215, 0.4); justify-content: space-between; gap: 1rem; padding: 1.15rem clamp(1.5rem, 4.2vw, 5rem); display: flex; position: absolute; bottom: 0; left: 0; right: 0; }
.intro-statement { border-bottom: 1px dashed var(--color-cork-border); flex-direction: column; justify-content: space-between; min-height: 76svh; padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4.2vw, 5rem); display: flex; }
.intro-statement p { text-transform: uppercase; max-width: 1250px; margin: 0; font-size: clamp(2.6rem, 5.2vw, 6.2rem); font-weight: 500; line-height: 0.98; }
.intro-statement em { color: var(--muted); font-style: normal; }
.story { height: 320svh; position: relative; }
.story-sticky { background: var(--color-walnut-shadow); height: 100svh; min-height: 620px; position: sticky; top: 0; overflow: hidden; }
.story-top { z-index: 4; color: var(--muted); justify-content: space-between; display: flex; position: absolute; top: 6.7rem; left: clamp(1.5rem, 4.2vw, 5rem); right: clamp(1.5rem, 4.2vw, 5rem); }
.story-art { aspect-ratio: 1.6 / 1; z-index: 1; width: min(72vw, 1100px); transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1), filter 1.15s; position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%) scale(0.94) rotate(-5deg); mask-image: radial-gradient(61% 65%, #000 57%, transparent 100%); }
.story-art img { object-fit: cover; width: 100%; height: 100%; display: block; }
.story-art-1 { transform: translate(-50%, -50%) scale(1.07) rotate(0deg); }
.story-art-2 { transform: translate(-50%, -49%) scale(1.17) rotate(5deg); }
.story-scene { z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; grid-template-columns: 1fr 1.18fr 1fr; align-items: center; gap: 2rem; padding: 0 clamp(1.5rem, 4.2vw, 5rem); transition: opacity 0.65s, transform 0.8s, visibility 0.65s; display: grid; position: absolute; inset: 0; transform: translateY(22px); }
.story-scene.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.story-left { grid-column: 1; }
.story-left .eyebrow { color: var(--muted); margin-bottom: 1.5rem; display: block; }
.story-left h2 { text-transform: uppercase; margin: 0; font-size: clamp(2.45rem, 3.8vw, 5rem); font-weight: 500; line-height: 0.92; }
.story-right { grid-column: 3; max-width: 380px; margin: 0; font-size: clamp(1.12rem, 1.9vw, 1.8rem); font-weight: 400; line-height: 1.26; }
.story-progress { z-index: 4; background: var(--color-cork-border); height: 1px; position: absolute; bottom: 2rem; left: clamp(1.5rem, 4.2vw, 5rem); right: clamp(1.5rem, 4.2vw, 5rem); }
.story-progress span { background: var(--color-warm-cream); height: 1px; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); display: block; }
.services { border-top: 1px dashed var(--color-cork-border); background: var(--alt-bg); min-height: 100svh; padding: clamp(6rem, 9vw, 10rem) clamp(1.5rem, 4.2vw, 5rem) 3rem; }
.section-heading { grid-template-columns: 0.42fr 1.2fr 0.7fr; align-items: start; gap: 3rem; margin-bottom: clamp(4rem, 7vw, 7rem); display: grid; }
.section-heading .eyebrow { color: var(--muted); padding-top: 0.45rem; }
.section-heading h2 { text-transform: uppercase; margin: 0; font-size: clamp(2.6rem, 4.5vw, 5.6rem); font-weight: 500; line-height: 0.94; }
.section-heading p { margin: 0.3rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.36; }
.service-list { border-top: 1px dashed var(--color-cork-border); }
.service-line { border-bottom: 1px dashed var(--color-cork-border); grid-template-columns: 7% minmax(0, 41%) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; min-height: 146px; padding: 1.3rem 1.2rem 1.3rem 0; transition: background 0.35s, padding 0.45s cubic-bezier(0.22, 1, 0.36, 1); display: grid; }
.service-line:hover { background: var(--color-bark-brown); padding-left: 1.2rem; }
.service-number { color: var(--muted); align-self: start; padding-top: 0.4rem; }
.service-line h3 { margin: 0; font-size: clamp(1.85rem, 3.35vw, 4.4rem); font-weight: 500; line-height: 1; }
.service-line p { max-width: 410px; margin: 0; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.45; }
.service-inquiry { border-bottom: 1px solid var(--color-driftwood); white-space: nowrap; align-items: center; gap: 0.55rem; min-height: 44px; font-size: 0.78rem; font-weight: 500; transition: border-color 0.25s, color 0.25s; display: inline-flex; }
.service-inquiry:hover { border-color: var(--color-warm-cream); color: #fff; }
.text-link { border-bottom: 1px solid var(--color-driftwood); white-space: nowrap; }
.text-link:hover { border-color: var(--color-warm-cream); }
.section-end { color: var(--muted); justify-content: space-between; gap: 1rem; margin-top: 2rem; display: flex; }
.times { border-top: 1px dashed var(--color-cork-border); padding: clamp(6rem, 9vw, 10rem) clamp(1.5rem, 4.2vw, 5rem) 3rem; }
.times-list { border-top: 1px dashed var(--color-cork-border); margin: 0; }
.times-row { border-bottom: 1px dashed var(--color-cork-border); grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: baseline; gap: 1.5rem; padding: 1.3rem 0; display: grid; }
.times-row dt { font-size: clamp(1.15rem, 1.8vw, 1.8rem); font-weight: 500; line-height: 1.15; }
.times-row dd { color: var(--muted); margin: 0; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.4; }
.process { flex-direction: column; justify-content: space-between; min-height: 100svh; padding: clamp(7rem, 10vw, 11rem) clamp(1.5rem, 4.2vw, 5rem) 3rem; display: flex; }
.process-intro { grid-template-columns: 0.42fr 1.9fr auto; align-items: start; gap: 3rem; display: grid; }
.process-scanner { justify-self: end; width: auto; height: clamp(20rem, 32vw, 32rem); margin-bottom: -4rem; }
.process-intro .eyebrow { color: var(--muted); padding-top: 0.4rem; }
.process-intro h2 { text-transform: uppercase; margin: 0; font-size: clamp(2.7rem, 5vw, 6.5rem); font-weight: 500; line-height: 0.94; }
.process-track { grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 6rem; display: grid; }
.process-step { border-top: 1px dashed var(--color-cork-border); padding-top: 1.3rem; }
.process-step > span { color: var(--muted); margin-bottom: clamp(2rem, 4vw, 4rem); display: block; }
.process-step h3 { margin: 0 0 1.1rem; font-size: clamp(1.6rem, 2.35vw, 3rem); font-weight: 500; line-height: 1; }
.process-step p { max-width: 380px; margin: 0; font-size: clamp(1.02rem, 1.3vw, 1.35rem); line-height: 1.45; }
.process-caption { color: var(--muted); padding-top: 5rem; }
.scan-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; min-height: 100svh; padding: 8rem clamp(1.5rem, 4.2vw, 5rem) 3rem; display: grid; background: radial-gradient(circle at 78% 55%, #2a1608 0%, var(--color-walnut-shadow) 55%); }
.scan-hero h1 { text-transform: uppercase; text-wrap: balance; margin: 0; font-size: clamp(3.4rem, 6.1vw, 7rem); font-weight: 500; line-height: 0.9; animation: fade-rise 1s ease 0.13s both; }
.scan-hero-img { width: auto; height: min(72svh, 36rem); margin-right: clamp(0rem, 4vw, 5rem); animation: fade-rise 1.2s ease 0.3s both; }
.scan-section { border-top: 1px dashed var(--color-cork-border); padding: clamp(6rem, 9vw, 10rem) clamp(1.5rem, 4.2vw, 5rem) 3rem; }
.scan-section .process-track { margin-top: 0; }
.zone-picker { margin-top: 3rem; }
.zone-picker label { color: var(--muted); margin-bottom: 1rem; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; display: block; }
.zone-picker-row { flex-wrap: wrap; align-items: center; gap: 1rem; display: flex; }
.zone-picker select { color: var(--color-warm-cream); background: var(--color-walnut-shadow); border: 1px solid var(--color-driftwood); border-radius: 36px; min-width: 280px; min-height: 52px; padding: 0 1.4rem; font: inherit; font-size: 1rem; }
.zone-picker select:focus-visible { outline: 2px solid var(--color-warm-cream); outline-offset: 3px; }
.faq { border-top: 1px dashed var(--color-cork-border); }
.faq details { border-bottom: 1px dashed var(--color-cork-border); }
.faq summary { cursor: pointer; list-style: none; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 0; font-size: clamp(1.15rem, 1.8vw, 1.8rem); font-weight: 500; line-height: 1.2; display: flex; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--color-warm-cream); outline-offset: 4px; }
.faq details p { color: var(--muted); max-width: 720px; margin: 0 0 1.6rem; font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.45; }
.contact { border-top: 1px dashed var(--color-cork-border); background: radial-gradient(circle at 75% 60%, var(--hero-glow) 0%, var(--color-walnut-shadow) 60%); flex-direction: column; justify-content: space-between; min-height: 100svh; padding: 6.5rem clamp(1.5rem, 4.2vw, 5rem) 2.5rem; display: flex; position: relative; }
.contact-top span:first-child { color: var(--color-ember-accent); }
.contact-top, .contact-bottom { color: var(--muted); justify-content: space-between; gap: 1rem; display: flex; }
.contact-core { margin: 5rem 0; }
.contact-core .eyebrow { margin: 0 0 2.8rem; }
.contact h2 { text-transform: uppercase; max-width: 1150px; margin: 0; font-size: clamp(3.5rem, 8.5vw, 11rem); font-weight: 500; line-height: 0.88; }
.contact-body { max-width: 620px; margin: 2.3rem 0 2.2rem; font-size: clamp(1.2rem, 2vw, 1.9rem); line-height: 1.25; }
.contact-action { background: var(--color-bark-brown); border-radius: 36px; justify-content: space-between; align-items: center; gap: 3rem; min-width: 315px; padding: 1.15rem 1.55rem; font-size: 0.81rem; font-weight: 500; transition: background 0.3s, transform 0.3s; display: inline-flex; }
.contact-action:hover { background: var(--btn-hover); transform: translateY(-3px); }
.contact-actions { flex-wrap: wrap; align-items: center; gap: 1.4rem 2rem; display: flex; }
.contact-secondary { border-bottom: 1px solid var(--color-driftwood); padding: 0.6rem 0; font-size: 0.78rem; font-weight: 500; }
.contact-secondary:hover { border-color: var(--color-warm-cream); }
.contact-bottom a { border-bottom: 1px solid var(--color-driftwood); }
.contact-bottom a:hover { color: var(--color-warm-cream); }
a:focus-visible { outline: 2px solid var(--color-warm-cream); outline-offset: 5px; }
.motion-ready .reveal { opacity: 0; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(30px); }
.motion-ready .reveal.is-in { opacity: 1; transform: translateY(0); }
@keyframes slow-push { from { transform: scale(1); } to { transform: scale(1.055); } }
@keyframes fade-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brand-arrive { from { opacity: 0; transform: translateY(45px); } to { opacity: 0.9; transform: translateY(0); } }

@media (max-width: 1100px) {
  .hero-content { max-width: 59vw; }
  .hero h1 { font-size: clamp(3.8rem, 6.6vw, 6.4rem); }
  .story-scene { grid-template-columns: 1fr 1fr; }
  .story-left { grid-column: 1; }
  .story-right { grid-column: 2; align-self: end; margin-bottom: 14vh; }
  .story-art { width: 86vw; }
  .section-heading { grid-template-columns: 0.3fr 1fr; }
  .section-heading p { grid-column: 2; max-width: 520px; }
  .service-line { grid-template-columns: 5% 42% minmax(0, 1fr) auto; gap: 1.2rem; }
}
@media (max-width: 700px) {
  .site-header { height: 68px; padding-inline: 1.3rem; }
  .header-mark { font-size: 1.08rem; }
  .site-header nav { gap: 1.1rem; }
  .site-header nav a { font-size: 0.7rem; }
  .site-header nav a:nth-child(2) { display: none; }
  .hero { min-height: 740px; }
  .hero-photo { object-position: 61% center; }
  .hero-vignette { background: linear-gradient(90deg, rgba(16, 9, 4, 0.8), rgba(16, 9, 4, 0.1) 100%), linear-gradient(rgba(16, 9, 4, 0.3), rgba(16, 9, 4, 0.1) 45%, rgba(16, 9, 4, 0.88)); }
  .hero-content { max-width: 88vw; top: 17vh; left: 1.4rem; }
  .hero-kicker { max-width: 240px; font-size: 0.72rem; line-height: 1.4; }
  .hero h1 { font-size: clamp(3.5rem, 11vw, 5rem); }
  .hero-body { max-width: 340px; margin: 1.5rem 0; font-size: 1.05rem; line-height: 1.34; }
  .hero-actions { gap: 0.65rem 1.2rem; }
  .hero-scroll-link { font-size: 0.72rem; }
  .hero-brand { font-size: 24vw; bottom: 10vh; left: 1rem; }
  .hero-edge, .hero-bottomline span:first-child { display: none; }
  .hero-bottomline { padding: 0.9rem 1.4rem; font-size: 0.7rem; }
  .intro-statement { min-height: 65svh; padding: 3rem 1.4rem; }
  .intro-statement p { font-size: clamp(2.55rem, 8.6vw, 4.2rem); }
  .story { height: 310svh; }
  .story-sticky { min-height: 580px; }
  .story-top { font-size: 0.68rem; top: 5.7rem; left: 1.4rem; right: 1.4rem; }
  .story-art { width: 136vw; top: 49%; mask-image: radial-gradient(62% 65%, #000 56%, transparent 100%); }
  .story-scene { flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 17vh 1.4rem 13vh; display: flex; }
  .story-left .eyebrow { margin-bottom: 1rem; font-size: 0.72rem; }
  .story-left h2 { font-size: clamp(2.8rem, 9vw, 4.4rem); }
  .story-right { align-self: flex-start; max-width: 90%; margin: 0; font-size: 1.2rem; line-height: 1.32; }
  .story-progress { bottom: 1.5rem; left: 1.4rem; right: 1.4rem; }
  .services { padding: 6rem 1.4rem 2rem; }
  .section-heading { margin-bottom: 3rem; display: block; }
  .section-heading h2 { margin: 1.9rem 0 1.2rem; font-size: clamp(2.6rem, 8.2vw, 4.2rem); }
  .section-heading p { font-size: 1.1rem; }
  .service-line { grid-template-columns: 2.4rem 1fr 1rem; gap: 0.3rem 1rem; min-height: 0; padding: 1.6rem 0; }
  .service-line:hover { background: none; padding-left: 0; }
  .service-number { grid-area: 1 / 1; font-size: 0.72rem; }
  .service-line h3 { grid-column: 2; font-size: clamp(1.55rem, 5.8vw, 2.6rem); }
  .service-line p { grid-area: 2 / 2; font-size: 1rem; }
  .service-inquiry { grid-area: 3 / 2 / auto / 4; justify-self: start; min-height: 40px; margin-top: 0.25rem; font-size: 0.72rem; }
  .section-end { font-size: 0.67rem; }
  .section-end span:last-child { display: none; }
  .times { padding: 6rem 1.4rem 2rem; }
  .times-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.2rem 0; }
  .process { min-height: 0; padding: 6rem 1.4rem 2.5rem; }
  .process-intro { display: block; }
  .process-scanner { display: block; height: 22rem; margin: 2.5rem auto -2rem; }
  .process-intro h2 { margin-top: 1.9rem; font-size: clamp(2.65rem, 8.4vw, 4.4rem); }
  .process-track { grid-template-columns: 1fr; gap: 2.3rem; margin-top: 4.5rem; }
  .process-step > span { margin-bottom: 1.5rem; }
  .process-step h3 { font-size: 1.9rem; }
  .process-step p { font-size: 1.08rem; }
  .process-caption { padding-top: 4rem; font-size: 0.7rem; }
  .scan-hero { grid-template-columns: 1fr; gap: 1rem; min-height: 0; padding: 7rem 1.4rem 2rem; }
  .scan-hero h1 { font-size: clamp(3rem, 11vw, 5rem); }
  .scan-hero-img { justify-self: center; height: 24rem; margin: 0; }
  .scan-section { padding: 5rem 1.4rem 2rem; }
  .zone-picker select, .zone-picker .contact-action { width: 100%; min-width: 0; }
  .contact { min-height: 100svh; padding: 5.7rem 1.4rem 1.8rem; }
  .contact-top, .contact-bottom { font-size: 0.67rem; }
  .contact-core { margin: 5rem 0; }
  .contact-core .eyebrow { max-width: 280px; line-height: 1.4; }
  .contact h2 { font-size: clamp(3.3rem, 10.5vw, 5.8rem); }
  .contact-body { font-size: 1.16rem; }
  .contact-action { gap: 1rem; width: 100%; min-width: 0; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 3.15rem; }
  .site-header nav { gap: 0.7rem; }
  .site-header nav a { font-size: 0.66rem; }
  .story-left h2 { font-size: 2.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}