:root { --red:#C9202B; --ink:#191919; --paper:#F7F4EF; --white:#FFFFFF; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.page { min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.header { padding:38px clamp(24px,4.8vw,88px) 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; position:relative; z-index:2; }
.brand { display:block; width:clamp(150px,14vw,212px); }
.brand img { display:block; width:100%; height:auto; }
.location { font-size:11px; text-transform:uppercase; letter-spacing:.28em; padding-top:8px; white-space:nowrap; }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); flex:1; padding:clamp(42px,5.5vh,78px) clamp(24px,4.8vw,88px) 58px; align-items:center; }
.hero-copy { position:relative; z-index:2; }
.eyebrow { margin:0 0 23px; color:var(--red); text-transform:uppercase; font-size:13px; font-weight:600; letter-spacing:.24em; }
h1 { font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:clamp(48px,5.65vw,92px); line-height:1.04; letter-spacing:-.055em; margin:0 0 29px; }
h1 span { display:block; }
.accent { color:var(--red); }
.intro { max-width:600px; font-size:clamp(17px,1.55vw,23px); line-height:1.5; margin:0 0 27px; letter-spacing:-.015em; }
.services { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0 0 36px; column-gap:14px; row-gap:10px; font-size:clamp(12px,1.12vw,16px); letter-spacing:.035em; }
.services li:not(:last-child)::after { content: "\00B7"; margin-left:14px; color:var(--red); }
.contact-button { display:inline-flex; align-items:center; gap:24px; min-height:64px; padding:19px 26px; border:1px solid var(--red); border-radius:5px; background:var(--red); color:var(--white); font-size:clamp(15px,1.25vw,18px); font-weight:600; text-decoration:none; transition:background .25s,box-shadow .25s,transform .25s; }
.contact-button:hover { background:#AC1823; box-shadow:0 9px 22px #C9202B1C; transform:translateY(-2px); }
.contact-button svg { transition:transform .25s; flex-shrink:0; }
.contact-button:hover svg { transform:translateX(4px); }
a:focus-visible { outline:3px solid var(--ink); outline-offset:6px; }
.art { --float-y:24px; --float-x:8px; --g-turn:3deg; --orbit-turn:13deg; align-self:stretch; position:relative; pointer-events:none; min-height:540px; }
.art-motion { position:absolute; inset:0; transform:translate3d(var(--mx,0px),var(--my,0px),0); }
.letter-g { width:clamp(330px,36vw,600px); height:auto; position:absolute; top:18%; left:5%; animation:float 9s ease-in-out infinite; transform-origin:50% 40%; }
.orbit { width:clamp(340px,37vw,610px); aspect-ratio:1; border:1px solid var(--red); border-radius:50%; position:absolute; left:-2%; top:-5%; animation:orbit-sway 14s ease-in-out infinite; }
.orbit-dot { position:absolute; width:clamp(46px,6.8vw,105px); aspect-ratio:1; border-radius:50%; background:var(--red); right:9%; top:8%; animation:dot-breathe 7s ease-in-out infinite; }
.footer { z-index:3; position:relative; background:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px clamp(24px,4.8vw,88px); border-top:1px solid #19191960; font-size:12px; letter-spacing:.025em; }
.footer p { margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:5px; line-height:1.7; }
.status-dot { display:inline-block; background:var(--red); width:10px; height:10px; border-radius:50%; margin-right:10px; flex-shrink:0; }
.footer small { font-size:12px; white-space:nowrap; }
.skip-link { position:fixed; left:20px; top:10px; z-index:10; background:var(--ink); color:white; padding:12px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
/* El contenido sigue visible si JavaScript no está disponible. */
.motion-ready .reveal { animation:reveal .85s cubic-bezier(.2,.75,.2,1) both; animation-delay:var(--delay,0ms); }
@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes float { 0%,100% { transform:translate3d(0,0,0) rotate(calc(-1 * var(--g-turn))); } 50% { transform:translate3d(var(--float-x),calc(-1 * var(--float-y)),0) rotate(var(--g-turn)); } }
@keyframes orbit-sway { 0%,100% { transform:rotate(calc(-1 * var(--orbit-turn))) scale(1); } 50% { transform:rotate(var(--orbit-turn)) scale(1.025); } }
@keyframes dot-breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
.is-paused .letter-g,.is-paused .orbit,.is-paused .orbit-dot { animation-play-state:paused; }
@media (min-width:1600px) { .page { max-width:1900px; margin:auto; } }
@media (max-width:1000px) and (min-width:701px) { h1 { font-size:5.55vw; } .hero { grid-template-columns:1.8fr 1fr; } .art { min-height:490px; } .intro { font-size:18px; } }
@media (max-width:700px) {
  .header { padding-top:25px; align-items:center; } .brand { width:142px; } .location { font-size:9px; letter-spacing:.15em; padding-top:0; }
  .hero { display:block; padding-top:46px; padding-bottom:0; } .eyebrow { font-size:11px; margin-bottom:21px; }
  h1 { font-size:clamp(38px,8.15vw,57px); margin-bottom:25px; line-height:1.07; } .intro { font-size:17px; max-width:500px; }
  .services { font-size:12px; column-gap:8px; row-gap:8px; margin-bottom:28px; } .services li:not(:last-child)::after { margin-left:8px; }
  .contact-button { min-height:58px; padding:16px 20px; gap:18px; font-size:15px; }
  .art { --float-y:14px; --float-x:4px; --g-turn:2deg; --orbit-turn:10deg; height:330px; min-height:0; margin-top:38px; overflow:hidden; }
  /* El punto tiene su propio espacio superior, incluso durante el giro. */
  .letter-g { width:260px; left:calc(50% - 120px); top:76px; z-index:1; }
  .orbit { width:290px; left:calc(50% - 145px); top:24px; z-index:0; }
  .orbit-dot { width:32px; right:calc(50% - 16px); top:-12px; }
  .footer { flex-direction:column; align-items:flex-start; gap:14px; padding-top:20px; padding-bottom:22px; font-size:11px; } .footer p { display:block; padding-left:20px; position:relative; } .status-dot { position:absolute; left:0; top:5px; margin:0; width:8px; height:8px; } .footer p span:last-child { display:block; } .footer small { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .art-motion { transform:none; } }