/* V3: all visual refinements are scoped to the approved hero. */
#inicio { grid-template-columns: 1fr 1.07fr; gap: 10px; padding-block: 66px 76px; isolation: isolate; }
#inicio:has(.hologram-ready) { min-height: calc(100svh + 240px); }
#inicio .hero-copy { z-index: 2; }
#inicio:has(.hologram-ready) .hero-copy { top: 130px; }
#inicio h1 { font-size: clamp(58px,7.05vw,108px); line-height: 1.04; letter-spacing: -.025em; font-synthesis: none; }
#inicio h1 em { font-size: 1.13em; letter-spacing: -.045em; }
#inicio .ribbon { padding-inline: .1em; }
#inicio .ribbon::before { inset: 17% -.015em 4%; transform: scaleX(var(--ribbon-fill,1)) skewX(-4deg); background: linear-gradient(115deg,var(--wine),var(--red) 75%); }
#inicio .eyebrow { font-size: 10px; letter-spacing: .115em; margin-bottom: 28px; }
#inicio .hero-lead { font-size: 20px; line-height: 1.6; max-width: 470px; margin-top: 30px; text-wrap: pretty; }
#inicio .hero-description { max-width: 440px; font-size: 14px; line-height: 1.85; text-wrap: pretty; }
#inicio .actions { gap: 22px; margin-top: 32px; }
#inicio .button { min-height: 58px; padding: 18px 22px; font-size: 12px; }
#inicio .hero-note { margin-top: 34px; font-size: 11px; letter-spacing: .02em; color: var(--gray); }
#inicio .hologram { width: calc(100% + 48px); margin-left: -12px; perspective: 1000px; }
#inicio .hologram-ready { top: 120px; }
#inicio .art-top { font-size: 10px; letter-spacing: .19em; color: var(--gray); text-align: left; padding-left: 7%; margin-bottom: 6px; }
#inicio .art-top::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--red); vertical-align: middle; margin-right: 12px; }
#inicio .globe-webgl canvas { width: 100%; aspect-ratio: 1/1; touch-action: pan-y; border-radius: 0; }
#inicio .hologram-ready .holo-label { display: none; }
#inicio .hologram-ready .hologram-mark { top: 24%; left: 25%; width: 50%; transform: translateX(var(--mark-x,24px)) rotateY(var(--mark-turn,28deg)) scale(var(--mark-scale,.86)); filter: drop-shadow(0 12px 26px #0009) drop-shadow(0 0 42px #69000666); }
#inicio .holo-controls { margin: -6px 7% 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; }
#inicio .holo-controls button { border: 0; border-bottom: 1px solid #505852; padding: 6px 0; min-height: 40px; font-size: 11px; white-space: nowrap; }
#inicio .holo-controls button:hover { color: white; border-color: var(--red); }
#inicio .holo-caption { margin-top: 13px; font-size: 10px; letter-spacing: .035em; color: var(--gray); }
@media(min-width:1500px){ #inicio { padding-top: 88px; } #inicio h1 { font-size: 110px; } }
@media(min-width:761px) and (max-width:1050px){
  #inicio { grid-template-columns: 1fr 1fr; gap: 0; }
  #inicio h1 { font-size: clamp(58px,7.1vw,76px); }
  #inicio .eyebrow { font-size: 8px; }
  #inicio .hero-lead { font-size: 18px; }
  #inicio .hologram { width: calc(100% + 24px); margin-left: 0; }
  #inicio .art-top { font-size: 8px; letter-spacing: .12em; padding-left: 4%; }
  #inicio .art-top::before { width: 18px; margin-right: 8px; }
  #inicio .holo-controls { margin-inline: 4%; gap: 12px; flex-wrap: wrap; }
  #inicio .holo-caption { font-size: 9px; }
}
@media(max-width:760px){
  #inicio { grid-template-columns: 1fr; padding-block: 42px 38px; gap: 42px; }
  #inicio:has(.hologram-ready) { min-height: 0; }
  #inicio:has(.hologram-ready) .hero-copy, #inicio .hologram-ready { position: relative; top: auto; }
  #inicio h1 { font-size: clamp(51px,12.5vw,86px); line-height: 1.03; }
  #inicio h1 em { font-size: 1.1em; }
  #inicio .eyebrow { font-size: 8px; letter-spacing: .075em; margin-bottom: 23px; }
  #inicio .hero-lead { font-size: 18px; line-height: 1.6; margin-top: 25px; }
  #inicio .hero-description { font-size: 14px; line-height: 1.8; }
  #inicio .actions { gap: 15px 22px; margin-top: 27px; }
  #inicio .button { min-height: 54px; padding: 17px 18px; font-size: 11px; gap: 20px; }
  #inicio .hero-note { margin-top: 25px; font-size: 10px; }
  #inicio .hologram { width: calc(100% + 24px); max-width: 520px; margin-inline: -12px; }
  #inicio .art-top { font-size: 9px; padding-left: 5%; }
  #inicio .holo-controls { margin-inline: 5%; font-size: 10px; padding-top: 14px; }
  #inicio .holo-controls button { min-height: 44px; font-size: 10px; }
  #inicio .holo-caption { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce){
  #inicio:has(.hologram-ready) { min-height: 0; }
  #inicio:has(.hologram-ready) .hero-copy, #inicio .hologram-ready { position: relative; top: auto; }
}