/* CalmaLink · "¿Desde dónde empiezas?" section with the animated globe.
   Everything is scoped under .cg-section / cg- classes so it cannot clash with the rest of the site.
   White section, as on the live site. The two door cards keep their own component styles; this file lays
   them out around the globe and gives them a dark outline that stands out on hover. */

.cg-section {
  --cg-ink: #0b1726;
  --cg-navy: #16354B;
  --cg-amber: #f2c35a;
  --cg-teal: #167E79;
  --cg-text: #4b5d72;
  position: relative;
  overflow: hidden;
  color: var(--cg-navy);
  background: #fff;
  padding-block: clamp(56px, 8vw, 96px);
}
.cg-head { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.cg-head .cg-eyebrow { font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cg-teal); }
.cg-head h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--cg-navy); text-wrap: balance; }
.cg-head p { margin: 0; max-width: 60ch; color: var(--cg-text); font-size: 1.05rem; }

/* door | globe | door on desktop; globe on top and the doors below on smaller screens */
.cg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  align-items: center;
}
.cg-layout > * { min-width: 0; }
@media (max-width: 1023px) {
  .cg-layout { grid-template-columns: 1fr 1fr; }
  .cg-stage { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 640px) {
  .cg-layout { grid-template-columns: 1fr; }
}

/* door cards: a thin dark outline at rest; on hover or keyboard focus the line thickens to black and the card lifts.
   The card the globe is showing keeps the thick line (without lifting), so the line travels between the two doors. */
.cg-section .cg-layout [data-globe-door] { border: 1px solid var(--cg-ink); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.cg-section .cg-layout [data-globe-door].cg-active { box-shadow: 0 0 0 1.5px var(--cg-ink); }
.cg-section .cg-layout [data-globe-door]:hover,
.cg-section .cg-layout [data-globe-door]:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--cg-ink), 0 22px 44px rgba(11, 23, 38, .16); }

/* globe */
.cg-stage { display: grid; justify-items: center; gap: 10px; text-align: center; }
.cg-globe { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; }
/* depth on white: a soft cool backdrop behind the globe, so its bright atmosphere rim reads, and a contact shadow underneath */
.cg-globe::before { content: ""; position: absolute; inset: -4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(19, 50, 79, .16) 0%, rgba(19, 50, 79, .07) 62%, rgba(19, 50, 79, 0) 100%); pointer-events: none; }
.cg-globe::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 23, 38, .34), rgba(11, 23, 38, 0)); filter: blur(3px); pointer-events: none; }
.cg-globe canvas { position: relative; z-index: 1; display: block; width: 100% !important; height: 100% !important; border-radius: 50%; opacity: 0; transition: opacity .8s ease; }
.cg-globe.cg-ready canvas { opacity: 1; }
.cg-poster { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; transition: opacity .8s ease; }
.cg-globe.cg-ready .cg-poster { opacity: 0; }
.cg-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cg-lbl { position: absolute; left: 0; top: 0; font-family: inherit; font-size: .78rem; font-weight: 800; line-height: 1.3; color: #fff; background: rgba(14, 42, 68, .8); border: 1px solid rgba(242, 195, 90, .7); padding: 3px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; transition: opacity .4s ease; }
.cg-ukname { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 2; text-align: center; font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: .02em; color: var(--cg-amber); text-shadow: 0 4px 30px rgba(242, 195, 90, .45); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.cg-caption { margin: 0; min-height: 1.6em; font-size: .92rem; font-weight: 700; color: var(--cg-navy); }
.cg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: .74rem; font-weight: 700; color: var(--cg-text); }
.cg-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.cg-note { margin: clamp(22px, 3vw, 32px) auto 0; display: flex; justify-content: center; gap: 8px; text-align: center; font-size: .9rem; color: var(--cg-text); max-width: 80ch; }

@media (prefers-reduced-motion: reduce) {
  .cg-section .cg-layout [data-globe-door], .cg-globe canvas, .cg-poster, .cg-lbl, .cg-ukname { transition: none; }
}

/* Requested extra depth: stronger contact shadow, atmospheric edge and subtle float. */
.cg-globe::before{background:radial-gradient(closest-side,rgba(19,50,79,.22) 0%,rgba(19,50,79,.10) 62%,rgba(19,50,79,0) 100%)}
.cg-globe::after{left:15%;right:15%;bottom:-1%;height:8%;background:radial-gradient(closest-side,rgba(5,24,42,.55),rgba(11,23,38,.18) 55%,rgba(11,23,38,0));filter:blur(4px)}
.cg-globe canvas,.cg-globe .cg-poster{filter:drop-shadow(0 10px 13px rgba(7,34,63,.25)) drop-shadow(0 0 5px rgba(74,166,255,.32))}
.cg-globe{animation:cg-float 7.5s ease-in-out infinite;animation-play-state:paused}
.cg-globe.cg-in-view{animation-play-state:running}
@keyframes cg-float{0%,100%{transform:translateY(3px) rotate(-.25deg)}50%{transform:translateY(-5px) rotate(.25deg)}}
.motion-paused .cg-globe{animation:none!important}
@media(prefers-reduced-motion:reduce){.cg-globe{animation:none!important}}